diff --git a/packages/components/src/styles/components/tag.scss b/packages/components/src/styles/components/tag.scss index 96bade739dc..e148ac71f8d 100644 --- a/packages/components/src/styles/components/tag.scss +++ b/packages/components/src/styles/components/tag.scss @@ -8,9 +8,7 @@ // @use "../mixins/focus-ring" as *; - -// we set a higher value than the line-height (~13px) to accommodate cases where the text wraps -$hds-tag-border-radius: 50px; +@use "../mixins/carbonization" as *; .hds-tag { display: inline-flex; @@ -18,16 +16,22 @@ $hds-tag-border-radius: 50px; width: fit-content; max-width: 100%; vertical-align: middle; - background-color: var(--token-color-surface-interactive); + background-color: var(--token-tag-surface-color-default); border: 1px solid var(--token-color-border-strong); - border-radius: $hds-tag-border-radius; + border-radius: var(--token-tag-border-radius); + + @include hds-apply-only-if-carbon() { + &:not(.hds-tag--color-primary, .hds-tag--color-secondary) { + border: none; + } + } } .hds-tag__dismiss { flex: 0 0 auto; margin: 0; // reset default button margin padding: 6px 4px 6px 8px; - background-color: var(--token-color-surface-interactive); + background-color: var(--token-tag-surface-color-default); border: none; // reset default button border border-radius: inherit; border-top-right-radius: 0; @@ -37,26 +41,37 @@ $hds-tag-border-radius: 50px; .hds-tag__dismiss-icon { width: 12px; height: 12px; + color: var(--token-tag-icon-color); } -.hds-tag__dismiss-icon, +.hds-tag__dismiss, .hds-tag__text { - color: var(--token-color-foreground-primary); + color: var(--token-tag-foreground-color-default); } .hds-tag__text, .hds-tag__link { flex: 1 0 0; - max-width: 166px; // account for excess horizontal padding of text in non-dismissible variant - padding: 3px 10px 5px 10px; - background-color: var(--token-color-surface-interactive); + max-width: var(--token-tag-max-width); // account for excess horizontal padding of text in non-dismissible variant + padding: var(--token-tag-padding-top) var(--token-tag-padding-right) var(--token-tag-padding-bottom) + var(--token-tag-padding-left); + background-color: var(--token-tag-surface-color-default); border-radius: inherit; } +.hds-tag__link { + @include hds-apply-only-if-carbon() { + text-decoration: none; + } +} + .hds-tag__text-container { display: -webkit-box; overflow: hidden; - line-height: 1rem; // 16px - override `body-100` + font-weight: var(--token-typography-font-weight-regular); + font-size: var(--token-tag-typography-font-size); + line-height: var(--token-tag-typography-line-height); + letter-spacing: var(--token-tag-typography-letter-spacing); word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 1; @@ -65,8 +80,8 @@ $hds-tag-border-radius: 50px; .hds-tag__dismiss ~ .hds-tag__text, .hds-tag__dismiss ~ .hds-tag__link { - max-width: 160px; - padding: 3px 8px 5px 6px; + max-width: calc(var(--token-tag-max-width) - 6px); + padding: var(--token-tag-padding-top) 8px var(--token-tag-padding-bottom) 6px; border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -79,12 +94,12 @@ $hds-tag-border-radius: 50px; &:hover, &.mock-hover { - background-color: var(--token-color-surface-interactive-hover); + background-color: var(--token-tag-surface-color-hover); } &:active, &.mock-active { - background-color: var(--token-color-surface-interactive-active); + background-color: var(--token-tag-surface-color-active); } &:focus, @@ -112,23 +127,50 @@ $hds-tag-border-radius: 50px; // COLORS (FOR LINK) .hds-tag--color-primary { + border: 1px solid var(--token-tag-link-border-color-primary); + + .hds-tag__link, + &:has(.hds-tag__link) .hds-tag__dismiss { + background-color: var(--token-tag-link-surface-color-primary-default); + + &:hover, + &.mock-hover { + background-color: var(--token-tag-link-surface-color-primary-hover); + } + + &:active, + &.mock-active { + background-color: var(--token-tag-link-surface-color-primary-hover); + } + } + .hds-tag__link { - color: var(--token-color-foreground-action); + color: var(--token-tag-link-foreground-color-primary-default); &:hover, &.mock-hover { - color: var(--token-color-foreground-action-hover); + color: var(--token-tag-link-foreground-color-primary-hover); } &:active, &.mock-active { - color: var(--token-color-foreground-action-active); + color: var(--token-tag-link-foreground-color-primary-active); } } + + .hds-tag__dismiss-icon { + color: var(--token-tag-link-icon-color-primary); + } } .hds-tag--color-secondary { + border: 1px solid var(--token-tag-link-border-color-secondary); + .hds-tag__link { - color: var(--token-color-foreground-strong); + color: var(--token-tag-link-foreground-color-secondary-default); + } + + .hds-tag__dismiss-icon { + color: var(--token-tag-link-icon-color-secondary); } } diff --git a/packages/tokens/dist/devdot/css/tokens.css b/packages/tokens/dist/devdot/css/tokens.css index 9f66f634fb4..c45afce731b 100644 --- a/packages/tokens/dist/devdot/css/tokens.css +++ b/packages/tokens/dist/devdot/css/tokens.css @@ -475,6 +475,30 @@ --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); --token-tabs-indicator-transition-duration: 0.6s; --token-tabs-divider-height: 1px; + --token-tag-max-width: 166px; + --token-tag-padding-top: 3px; + --token-tag-padding-bottom: 5px; + --token-tag-padding-right: 10px; + --token-tag-padding-left: 10px; + --token-tag-border-radius: 50px; + --token-tag-surface-color-default: #ffffff; + --token-tag-surface-color-hover: #f1f2f3; + --token-tag-surface-color-active: #dedfe3; + --token-tag-foreground-color-default: #3b3d45; + --token-tag-typography-font-size: 0.8125rem; + --token-tag-typography-letter-spacing: 0px; + --token-tag-typography-line-height: 1.2308; + --token-tag-icon-color: #3b3d45; + --token-tag-link-border-color-primary: #3b3d4566; + --token-tag-link-border-color-secondary: #3b3d4566; + --token-tag-link-surface-color-primary-default: #ffffff; + --token-tag-link-surface-color-primary-hover: #f1f2f3; + --token-tag-link-foreground-color-primary-default: #1060ff; + --token-tag-link-foreground-color-primary-hover: #0c56e9; + --token-tag-link-foreground-color-primary-active: #0046d1; + --token-tag-link-foreground-color-secondary-default: #0c0c0e; + --token-tag-link-icon-color-primary: #3b3d45; + --token-tag-link-icon-color-secondary: #3b3d45; --token-tooltip-max-width: 280px; --token-tooltip-padding-horizontal: 12px; --token-tooltip-padding-vertical: 8px; diff --git a/packages/tokens/dist/docs/products/themed-tokens.json b/packages/tokens/dist/docs/products/themed-tokens.json index 1dd257f3d2d..4b04c22d074 100644 --- a/packages/tokens/dist/docs/products/themed-tokens.json +++ b/packages/tokens/dist/docs/products/themed-tokens.json @@ -13767,1083 +13767,1129 @@ "height" ] }, - "token-tooltip-max-width": { - "key": "{tooltip.max-width}", + "token-tag-max-width": { + "key": "{tag.max-width}", "$type": "dimension", - "$value": "280px", + "$value": "166px", "unit": "px", "$modes": { - "default": "280", - "cds-g0": "288", - "cds-g10": "288", - "cds-g90": "288", - "cds-g100": "288" + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" }, "original": { "$type": "dimension", - "$value": "280", + "$value": "166", "unit": "px", "$modes": { - "default": "280", - "cds-g0": "288", - "cds-g10": "288", - "cds-g90": "288", - "cds-g100": "288" + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" }, - "key": "{tooltip.max-width}" + "key": "{tag.max-width}" }, - "name": "token-tooltip-max-width", + "name": "token-tag-max-width", "attributes": { - "category": "tooltip" + "category": "tag" }, "path": [ - "tooltip", + "tag", "max-width" ] }, - "token-tooltip-padding-horizontal": { - "key": "{tooltip.padding.horizontal}", + "token-tag-padding-top": { + "key": "{tag.padding.top}", "$type": "dimension", - "$value": "12px", + "$value": "3px", "unit": "px", "$modes": { - "default": "12", - "cds-g0": "16px", - "cds-g10": "16px", - "cds-g90": "16px", - "cds-g100": "16px" + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, "original": { "$type": "dimension", - "$value": "12", + "$value": "3", "unit": "px", "$modes": { - "default": "12", - "cds-g0": "{carbon.themes.white.spacing05}", - "cds-g10": "{carbon.themes.g10.spacing05}", - "cds-g90": "{carbon.themes.g90.spacing05}", - "cds-g100": "{carbon.themes.g100.spacing05}" + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, - "key": "{tooltip.padding.horizontal}" + "key": "{tag.padding.top}" }, - "name": "token-tooltip-padding-horizontal", + "name": "token-tag-padding-top", "attributes": { - "category": "tooltip" + "category": "tag" }, "path": [ - "tooltip", + "tag", "padding", - "horizontal" + "top" ] }, - "token-tooltip-padding-vertical": { - "key": "{tooltip.padding.vertical}", + "token-tag-padding-bottom": { + "key": "{tag.padding.bottom}", "$type": "dimension", - "$value": "8px", + "$value": "5px", "unit": "px", "$modes": { - "default": "8", - "cds-g0": "16px", - "cds-g10": "16px", - "cds-g90": "16px", - "cds-g100": "16px" + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, "original": { "$type": "dimension", - "$value": "8", + "$value": "5", "unit": "px", "$modes": { - "default": "8", - "cds-g0": "{carbon.themes.white.spacing05}", - "cds-g10": "{carbon.themes.g10.spacing05}", - "cds-g90": "{carbon.themes.g90.spacing05}", - "cds-g100": "{carbon.themes.g100.spacing05}" + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, - "key": "{tooltip.padding.vertical}" + "key": "{tag.padding.bottom}" }, - "name": "token-tooltip-padding-vertical", + "name": "token-tag-padding-bottom", "attributes": { - "category": "tooltip" + "category": "tag" }, "path": [ - "tooltip", + "tag", "padding", - "vertical" + "bottom" ] }, - "token-tooltip-border-radius": { - "key": "{tooltip.border.radius}", + "token-tag-padding-right": { + "key": "{tag.padding.right}", "$type": "dimension", - "$value": "5px", + "$value": "10px", "unit": "px", "$modes": { - "default": "5px", - "cds-g0": "2", - "cds-g10": "2", - "cds-g90": "2", - "cds-g100": "2" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, "original": { "$type": "dimension", - "$value": "{border.radius.small}", + "$value": "10", "unit": "px", "$modes": { - "default": "{border.radius.small}", - "cds-g0": "2", - "cds-g10": "2", - "cds-g90": "2", - "cds-g100": "2" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, - "key": "{tooltip.border.radius}" + "key": "{tag.padding.right}" }, - "name": "token-tooltip-border-radius", + "name": "token-tag-padding-right", "attributes": { - "category": "tooltip" + "category": "tag" }, "path": [ - "tooltip", - "border", - "radius" + "tag", + "padding", + "right" ] }, - "token-tooltip-caret-clip-path": { - "key": "{tooltip.caret.clip-path}", - "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "token-tag-padding-left": { + "key": "{tag.padding.left}", + "$type": "dimension", + "$value": "10px", + "unit": "px", "$modes": { - "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", - "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", - "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", - "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", - "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, "original": { - "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "$type": "dimension", + "$value": "10", + "unit": "px", "$modes": { - "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", - "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", - "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", - "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", - "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, - "key": "{tooltip.caret.clip-path}" + "key": "{tag.padding.left}" }, - "name": "token-tooltip-caret-clip-path", + "name": "token-tag-padding-left", "attributes": { - "category": "tooltip" + "category": "tag" }, "path": [ - "tooltip", - "caret", - "clip-path" + "tag", + "padding", + "left" ] }, - "token-tooltip-caret-height": { - "key": "{tooltip.caret.height}", + "token-tag-border-radius": { + "key": "{tag.border.radius}", "$type": "dimension", - "$value": "7px", + "$value": "50px", "unit": "px", "$modes": { - "default": "7", - "cds-g0": "6", - "cds-g10": "6", - "cds-g90": "6", - "cds-g100": "6" + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" }, "original": { "$type": "dimension", - "$value": "7", + "$value": "50", "unit": "px", "$modes": { - "default": "7", - "cds-g0": "6", - "cds-g10": "6", - "cds-g90": "6", - "cds-g100": "6" + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" }, - "key": "{tooltip.caret.height}" + "key": "{tag.border.radius}" }, - "name": "token-tooltip-caret-height", + "name": "token-tag-border-radius", "attributes": { - "category": "tooltip" + "category": "tag" }, "path": [ - "tooltip", - "caret", - "height" + "tag", + "border", + "radius" ] }, - "token-tooltip-caret-width": { - "key": "{tooltip.caret.width}", - "$type": "dimension", - "$value": "16px", - "unit": "px", + "token-tag-surface-color-default": { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#ffffff", "$modes": { - "default": "16", - "cds-g0": "12", - "cds-g10": "12", - "cds-g90": "12", - "cds-g100": "12" + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" }, "original": { - "$type": "dimension", - "$value": "16", - "unit": "px", + "$type": "color", + "$value": "{color.surface.interactive}", "$modes": { - "default": "16", - "cds-g0": "12", - "cds-g10": "12", - "cds-g90": "12", - "cds-g100": "12" + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" }, - "key": "{tooltip.caret.width}" + "key": "{tag.surface.color.default}" }, - "name": "token-tooltip-caret-width", + "name": "token-tag-surface-color-default", "attributes": { - "category": "tooltip" + "category": "tag" }, "path": [ - "tooltip", - "caret", - "width" + "tag", + "surface", + "color", + "default" ] }, - "token-tooltip-focus-offset": { - "key": "{tooltip.focus-offset}", - "$type": "dimension", - "$value": "-2px", - "unit": "px", + "token-tag-surface-color-hover": { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#f1f2f3", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, "original": { - "$type": "dimension", - "$value": "-2", - "unit": "px", - "key": "{tooltip.focus-offset}" + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" }, - "name": "token-tooltip-focus-offset", + "name": "token-tag-surface-color-hover", "attributes": { - "category": "tooltip" + "category": "tag" }, "path": [ - "tooltip", - "focus-offset" + "tag", + "surface", + "color", + "hover" ] }, - "token-tooltip-transition-function": { - "key": "{tooltip.transition.function}", - "$type": "cubicBezier", - "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "token-tag-surface-color-active": { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, "original": { - "$type": "cubicBezier", - "$value": [ - 0.54, - 1.5, - 0.38, - 1.11 - ], - "key": "{tooltip.transition.function}" + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" }, - "name": "token-tooltip-transition-function", + "name": "token-tag-surface-color-active", "attributes": { - "category": "tooltip" + "category": "tag" }, "path": [ - "tooltip", - "transition", - "function" + "tag", + "surface", + "color", + "active" ] }, - "token-typography-font-stack-display": { - "key": "{typography.font-stack.display}", - "$type": "font-family", - "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "token-tag-foreground-color-default": { + "key": "{tag.foreground.color.default}", + "$type": "color", + "$value": "#3b3d45", "$modes": { - "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", - "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" }, "original": { - "$type": "font-family", - "$value": "{typography.font-stack.sans.display.combined}", + "$type": "color", + "$value": "{color.foreground.primary}", "$modes": { - "default": "{typography.font-stack.sans.display.combined}", - "cds-g0": "{carbon.typography.font-family.sans}", - "cds-g10": "{carbon.typography.font-family.sans}", - "cds-g90": "{carbon.typography.font-family.sans}", - "cds-g100": "{carbon.typography.font-family.sans}" + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" }, - "key": "{typography.font-stack.display}" + "key": "{tag.foreground.color.default}" }, - "name": "token-typography-font-stack-display", + "name": "token-tag-foreground-color-default", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "font-stack", - "display" + "tag", + "foreground", + "color", + "default" ] }, - "token-typography-font-stack-text": { - "key": "{typography.font-stack.text}", - "$type": "font-family", - "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "token-tag-typography-font-size": { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", "$modes": { - "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", - "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" }, "original": { - "$type": "font-family", - "$value": "{typography.font-stack.sans.text.combined}", + "$type": "font-size", + "$value": "13", + "unit": "px", "$modes": { - "default": "{typography.font-stack.sans.text.combined}", - "cds-g0": "{carbon.typography.font-family.sans}", - "cds-g10": "{carbon.typography.font-family.sans}", - "cds-g90": "{carbon.typography.font-family.sans}", - "cds-g100": "{carbon.typography.font-family.sans}" + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" }, - "key": "{typography.font-stack.text}" + "key": "{tag.typography.font-size}" }, - "name": "token-typography-font-stack-text", + "name": "token-tag-typography-font-size", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ + "tag", "typography", - "font-stack", - "text" + "font-size" ] }, - "token-typography-font-stack-code": { - "key": "{typography.font-stack.code}", - "$type": "font-family", - "$value": "ui-monospace, Menlo, Consolas, monospace", + "token-tag-typography-letter-spacing": { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", "$modes": { - "default": "ui-monospace, Menlo, Consolas, monospace", - "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" }, "original": { - "$type": "font-family", - "$value": "{typography.font-stack.monospace.code.combined}", + "$type": "letter-spacing", + "$value": 0, + "unit": "px", "$modes": { - "default": "{typography.font-stack.monospace.code.combined}", - "cds-g0": "{carbon.typography.font-family.mono}", - "cds-g10": "{carbon.typography.font-family.mono}", - "cds-g90": "{carbon.typography.font-family.mono}", - "cds-g100": "{carbon.typography.font-family.mono}" + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" }, - "key": "{typography.font-stack.code}" + "key": "{tag.typography.letter-spacing}" }, - "name": "token-typography-font-stack-code", + "name": "token-tag-typography-letter-spacing", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ + "tag", "typography", - "font-stack", - "code" + "letter-spacing" ] }, - "token-typography-font-weight-regular": { - "key": "{typography.font-weight.regular}", - "$type": "font-weight", - "$value": "400", + "token-tag-typography-line-height": { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.2308, "$modes": { - "default": "400", - "cds-g0": 400, - "cds-g10": 400, - "cds-g90": 400, - "cds-g100": 400 + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 }, "original": { - "$type": "font-weight", - "$value": "400", + "$type": "number", + "$value": 1.2308, "$modes": { - "default": "400", - "cds-g0": "{carbon.typography.font-weight.regular}", - "cds-g10": "{carbon.typography.font-weight.regular}", - "cds-g90": "{carbon.typography.font-weight.regular}", - "cds-g100": "{carbon.typography.font-weight.regular}" + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" }, - "key": "{typography.font-weight.regular}" + "key": "{tag.typography.line-height}" }, - "name": "token-typography-font-weight-regular", + "name": "token-tag-typography-line-height", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ + "tag", "typography", - "font-weight", - "regular" + "line-height" ] }, - "token-typography-font-weight-medium": { - "key": "{typography.font-weight.medium}", - "$type": "font-weight", - "$value": "500", + "token-tag-icon-color": { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#3b3d45", "$modes": { - "default": "500", - "cds-g0": 400, - "cds-g10": 400, - "cds-g90": 400, - "cds-g100": 400 + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" }, "original": { - "$type": "font-weight", - "$value": "500", + "$type": "color", + "$value": "{color.foreground.primary}", "$modes": { - "default": "500", - "cds-g0": "{carbon.typography.font-weight.regular}", - "cds-g10": "{carbon.typography.font-weight.regular}", - "cds-g90": "{carbon.typography.font-weight.regular}", - "cds-g100": "{carbon.typography.font-weight.regular}" + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" }, - "key": "{typography.font-weight.medium}" + "key": "{tag.icon.color}" }, - "name": "token-typography-font-weight-medium", + "name": "token-tag-icon-color", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "font-weight", - "medium" + "tag", + "icon", + "color" ] }, - "token-typography-font-weight-semibold": { - "key": "{typography.font-weight.semibold}", - "$type": "font-weight", - "$value": "600", + "token-tag-link-border-color-primary": { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#3b3d4566", "$modes": { - "default": "600", - "cds-g0": 600, - "cds-g10": 600, - "cds-g90": 600, - "cds-g100": 600 + "default": "#3b3d4566", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" }, "original": { - "$type": "font-weight", - "$value": "600", + "$type": "color", + "$value": "{color.border.strong}", "$modes": { - "default": "600", - "cds-g0": "{carbon.typography.font-weight.semibold}", - "cds-g10": "{carbon.typography.font-weight.semibold}", - "cds-g90": "{carbon.typography.font-weight.semibold}", - "cds-g100": "{carbon.typography.font-weight.semibold}" + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" }, - "key": "{typography.font-weight.semibold}" + "key": "{tag.link.border.color.primary}" }, - "name": "token-typography-font-weight-semibold", + "name": "token-tag-link-border-color-primary", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "font-weight", - "semibold" + "tag", + "link", + "border", + "color", + "primary" ] }, - "token-typography-font-weight-bold": { - "key": "{typography.font-weight.bold}", - "$type": "font-weight", - "$value": "700", + "token-tag-link-border-color-secondary": { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#3b3d4566", "$modes": { - "default": "700", - "cds-g0": 600, - "cds-g10": 600, - "cds-g90": 600, - "cds-g100": 600 + "default": "#3b3d4566", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" }, "original": { - "$type": "font-weight", - "$value": "700", + "$type": "color", + "$value": "{color.border.strong}", "$modes": { - "default": "700", - "cds-g0": "{carbon.typography.font-weight.semibold}", - "cds-g10": "{carbon.typography.font-weight.semibold}", - "cds-g90": "{carbon.typography.font-weight.semibold}", - "cds-g100": "{carbon.typography.font-weight.semibold}" + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" }, - "key": "{typography.font-weight.bold}" + "key": "{tag.link.border.color.secondary}" }, - "name": "token-typography-font-weight-bold", + "name": "token-tag-link-border-color-secondary", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "font-weight", - "bold" + "tag", + "link", + "border", + "color", + "secondary" ] }, - "token-typography-display-500-font-family": { - "key": "{typography.display-500.font-family}", - "$type": "font-family", - "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "token-tag-link-surface-color-primary-default": { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#ffffff", "$modes": { - "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", - "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + "default": "#ffffff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" }, "original": { - "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$type": "color", + "$value": "{color.surface.interactive}", "$modes": { - "default": "{typography.font-stack.display}", - "cds-g0": "{carbon.typography.font-family.sans}", - "cds-g10": "{carbon.typography.font-family.sans}", - "cds-g90": "{carbon.typography.font-family.sans}", - "cds-g100": "{carbon.typography.font-family.sans}" + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" }, - "key": "{typography.display-500.font-family}" + "key": "{tag.link.surface.color.primary.default}" }, - "name": "token-typography-display-500-font-family", + "name": "token-tag-link-surface-color-primary-default", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "display-500", - "font-family" + "tag", + "link", + "surface", + "color", + "primary", + "default" ] }, - "token-typography-display-500-font-size": { - "key": "{typography.display-500.font-size}", - "$type": "font-size", - "$value": "1.875rem", - "unit": "px", - "comment": "30px/1.875rem", + "token-tag-link-surface-color-primary-hover": { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#f1f2f3", "$modes": { - "default": "30", - "cds-g0": "2rem", - "cds-g10": "2rem", - "cds-g90": "2rem", - "cds-g100": "2rem" + "default": "#f1f2f3", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" }, "original": { - "$type": "font-size", - "$value": "30", - "unit": "px", - "comment": "30px/1.875rem", + "$type": "color", + "$value": "{color.surface.interactive-hover}", "$modes": { - "default": "30", - "cds-g0": "{carbon.typography.heading05.font-size}", - "cds-g10": "{carbon.typography.heading05.font-size}", - "cds-g90": "{carbon.typography.heading05.font-size}", - "cds-g100": "{carbon.typography.heading05.font-size}" + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" }, - "key": "{typography.display-500.font-size}" + "key": "{tag.link.surface.color.primary.hover}" }, - "name": "token-typography-display-500-font-size", + "name": "token-tag-link-surface-color-primary-hover", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "display-500", - "font-size" + "tag", + "link", + "surface", + "color", + "primary", + "hover" ] }, - "token-typography-display-500-line-height": { - "key": "{typography.display-500.line-height}", - "$type": "number", - "$value": 1.2666, - "comment": "38px", + "token-tag-link-foreground-color-primary-default": { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#1060ff", "$modes": { - "default": 1.2666, - "cds-g0": 1.25, - "cds-g10": 1.25, - "cds-g90": 1.25, - "cds-g100": 1.25 + "default": "#1060ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" }, "original": { - "$type": "number", - "$value": 1.2666, - "comment": "38px", + "$type": "color", + "$value": "{color.foreground.action}", "$modes": { - "default": 1.2666, - "cds-g0": "{carbon.typography.heading05.line-height}", - "cds-g10": "{carbon.typography.heading05.line-height}", - "cds-g90": "{carbon.typography.heading05.line-height}", - "cds-g100": "{carbon.typography.heading05.line-height}" + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" }, - "key": "{typography.display-500.line-height}" + "key": "{tag.link.foreground.color.primary.default}" }, - "name": "token-typography-display-500-line-height", + "name": "token-tag-link-foreground-color-primary-default", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "display-500", - "line-height" + "tag", + "link", + "foreground", + "color", + "primary", + "default" ] }, - "token-typography-display-500-letter-spacing": { - "key": "{typography.display-500.letter-spacing}", - "$type": "letter-spacing", - "$value": "-0.5px", - "unit": "px", + "token-tag-link-foreground-color-primary-hover": { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", "$modes": { - "default": -0.5, - "cds-g0": "0px", - "cds-g10": "0px", - "cds-g90": "0px", - "cds-g100": "0px" + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" }, "original": { - "$type": "letter-spacing", - "$value": -0.5, - "unit": "px", + "$type": "color", + "$value": "{color.foreground.action-hover}", "$modes": { - "default": -0.5, - "cds-g0": "{carbon.typography.heading05.letter-spacing}", - "cds-g10": "{carbon.typography.heading05.letter-spacing}", - "cds-g90": "{carbon.typography.heading05.letter-spacing}", - "cds-g100": "{carbon.typography.heading05.letter-spacing}" + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" }, - "key": "{typography.display-500.letter-spacing}" + "key": "{tag.link.foreground.color.primary.hover}" }, - "name": "token-typography-display-500-letter-spacing", + "name": "token-tag-link-foreground-color-primary-hover", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "display-500", - "letter-spacing" + "tag", + "link", + "foreground", + "color", + "primary", + "hover" ] }, - "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", + "token-tag-link-foreground-color-primary-active": { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#0046d1", "$modes": { - "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", - "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + "default": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" }, "original": { - "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$type": "color", + "$value": "{color.foreground.action-active}", "$modes": { - "default": "{typography.font-stack.display}", - "cds-g0": "{carbon.typography.font-family.sans}", - "cds-g10": "{carbon.typography.font-family.sans}", - "cds-g90": "{carbon.typography.font-family.sans}", - "cds-g100": "{carbon.typography.font-family.sans}" + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" }, - "key": "{typography.display-400.font-family}" + "key": "{tag.link.foreground.color.primary.active}" }, - "name": "token-typography-display-400-font-family", + "name": "token-tag-link-foreground-color-primary-active", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "display-400", - "font-family" + "tag", + "link", + "foreground", + "color", + "primary", + "active" ] }, - "token-typography-display-400-font-size": { - "key": "{typography.display-400.font-size}", - "$type": "font-size", - "$value": "1.5rem", - "unit": "px", - "comment": "24px/1.5rem", + "token-tag-link-foreground-color-secondary-default": { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#0c0c0e", "$modes": { - "default": "24", - "cds-g0": "1.75rem", - "cds-g10": "1.75rem", - "cds-g90": "1.75rem", - "cds-g100": "1.75rem" + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" }, "original": { - "$type": "font-size", - "$value": "24", - "unit": "px", - "comment": "24px/1.5rem", + "$type": "color", + "$value": "{color.foreground.strong}", "$modes": { - "default": "24", - "cds-g0": "{carbon.typography.heading04.font-size}", - "cds-g10": "{carbon.typography.heading04.font-size}", - "cds-g90": "{carbon.typography.heading04.font-size}", - "cds-g100": "{carbon.typography.heading04.font-size}" + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" }, - "key": "{typography.display-400.font-size}" + "key": "{tag.link.foreground.color.secondary.default}" }, - "name": "token-typography-display-400-font-size", + "name": "token-tag-link-foreground-color-secondary-default", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "display-400", - "font-size" + "tag", + "link", + "foreground", + "color", + "secondary", + "default" ] }, - "token-typography-display-400-line-height": { - "key": "{typography.display-400.line-height}", - "$type": "number", - "$value": 1.3333, - "comment": "32px", + "token-tag-link-icon-color-primary": { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#3b3d45", "$modes": { - "default": 1.3333, - "cds-g0": 1.28572, - "cds-g10": 1.28572, - "cds-g90": 1.28572, - "cds-g100": 1.28572 + "default": "#3b3d45", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" }, "original": { - "$type": "number", - "$value": 1.3333, - "comment": "32px", + "$type": "color", + "$value": "{color.foreground.primary}", "$modes": { - "default": 1.3333, - "cds-g0": "{carbon.typography.heading04.line-height}", - "cds-g10": "{carbon.typography.heading04.line-height}", - "cds-g90": "{carbon.typography.heading04.line-height}", - "cds-g100": "{carbon.typography.heading04.line-height}" + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" }, - "key": "{typography.display-400.line-height}" + "key": "{tag.link.icon.color.primary}" }, - "name": "token-typography-display-400-line-height", + "name": "token-tag-link-icon-color-primary", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "display-400", - "line-height" + "tag", + "link", + "icon", + "color", + "primary" ] }, - "token-typography-display-400-letter-spacing": { - "key": "{typography.display-400.letter-spacing}", - "$type": "letter-spacing", - "$value": "0px", - "unit": "px", + "token-tag-link-icon-color-secondary": { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#3b3d45", "$modes": { - "default": 0, - "cds-g0": "0px", - "cds-g10": "0px", - "cds-g90": "0px", - "cds-g100": "0px" + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" }, "original": { - "$type": "letter-spacing", - "$value": 0, - "unit": "px", + "$type": "color", + "$value": "{color.foreground.primary}", "$modes": { - "default": 0, - "cds-g0": "{carbon.typography.heading04.letter-spacing}", - "cds-g10": "{carbon.typography.heading04.letter-spacing}", - "cds-g90": "{carbon.typography.heading04.letter-spacing}", - "cds-g100": "{carbon.typography.heading04.letter-spacing}" + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" }, - "key": "{typography.display-400.letter-spacing}" + "key": "{tag.link.icon.color.secondary}" }, - "name": "token-typography-display-400-letter-spacing", + "name": "token-tag-link-icon-color-secondary", "attributes": { - "category": "typography" + "category": "tag" }, "path": [ - "typography", - "display-400", - "letter-spacing" + "tag", + "link", + "icon", + "color", + "secondary" ] }, - "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", + "token-tooltip-max-width": { + "key": "{tooltip.max-width}", + "$type": "dimension", + "$value": "280px", + "unit": "px", "$modes": { - "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", - "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" }, "original": { - "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$type": "dimension", + "$value": "280", + "unit": "px", "$modes": { - "default": "{typography.font-stack.text}", - "cds-g0": "{carbon.typography.font-family.sans}", - "cds-g10": "{carbon.typography.font-family.sans}", - "cds-g90": "{carbon.typography.font-family.sans}", - "cds-g100": "{carbon.typography.font-family.sans}" + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" }, - "key": "{typography.display-300.font-family}" + "key": "{tooltip.max-width}" }, - "name": "token-typography-display-300-font-family", + "name": "token-tooltip-max-width", "attributes": { - "category": "typography" + "category": "tooltip" }, "path": [ - "typography", - "display-300", - "font-family" + "tooltip", + "max-width" ] }, - "token-typography-display-300-font-size": { - "key": "{typography.display-300.font-size}", - "$type": "font-size", - "$value": "1.125rem", + "token-tooltip-padding-horizontal": { + "key": "{tooltip.padding.horizontal}", + "$type": "dimension", + "$value": "12px", "unit": "px", - "comment": "18px/1.125rem", "$modes": { - "default": "18", - "cds-g0": "1.25rem", - "cds-g10": "1.25rem", - "cds-g90": "1.25rem", - "cds-g100": "1.25rem" + "default": "12", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" }, "original": { - "$type": "font-size", - "$value": "18", + "$type": "dimension", + "$value": "12", "unit": "px", - "comment": "18px/1.125rem", "$modes": { - "default": "18", - "cds-g0": "{carbon.typography.heading03.font-size}", - "cds-g10": "{carbon.typography.heading03.font-size}", - "cds-g90": "{carbon.typography.heading03.font-size}", - "cds-g100": "{carbon.typography.heading03.font-size}" + "default": "12", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" }, - "key": "{typography.display-300.font-size}" + "key": "{tooltip.padding.horizontal}" }, - "name": "token-typography-display-300-font-size", + "name": "token-tooltip-padding-horizontal", "attributes": { - "category": "typography" + "category": "tooltip" }, "path": [ - "typography", - "display-300", - "font-size" + "tooltip", + "padding", + "horizontal" ] }, - "token-typography-display-300-line-height": { - "key": "{typography.display-300.line-height}", - "$type": "number", - "$value": 1.3333, - "comment": "24px", + "token-tooltip-padding-vertical": { + "key": "{tooltip.padding.vertical}", + "$type": "dimension", + "$value": "8px", + "unit": "px", "$modes": { - "default": 1.3333, - "cds-g0": 1.4, - "cds-g10": 1.4, - "cds-g90": 1.4, - "cds-g100": 1.4 + "default": "8", + "cds-g0": "16px", + "cds-g10": "16px", + "cds-g90": "16px", + "cds-g100": "16px" }, "original": { - "$type": "number", - "$value": 1.3333, - "comment": "24px", + "$type": "dimension", + "$value": "8", + "unit": "px", "$modes": { - "default": 1.3333, - "cds-g0": "{carbon.typography.heading03.line-height}", - "cds-g10": "{carbon.typography.heading03.line-height}", - "cds-g90": "{carbon.typography.heading03.line-height}", - "cds-g100": "{carbon.typography.heading03.line-height}" + "default": "8", + "cds-g0": "{carbon.themes.white.spacing05}", + "cds-g10": "{carbon.themes.g10.spacing05}", + "cds-g90": "{carbon.themes.g90.spacing05}", + "cds-g100": "{carbon.themes.g100.spacing05}" }, - "key": "{typography.display-300.line-height}" + "key": "{tooltip.padding.vertical}" }, - "name": "token-typography-display-300-line-height", + "name": "token-tooltip-padding-vertical", "attributes": { - "category": "typography" + "category": "tooltip" }, "path": [ - "typography", - "display-300", - "line-height" + "tooltip", + "padding", + "vertical" ] }, - "token-typography-display-300-letter-spacing": { - "key": "{typography.display-300.letter-spacing}", - "$type": "letter-spacing", - "$value": "-0.5px", + "token-tooltip-border-radius": { + "key": "{tooltip.border.radius}", + "$type": "dimension", + "$value": "5px", "unit": "px", "$modes": { - "default": -0.5, - "cds-g0": "0px", - "cds-g10": "0px", - "cds-g90": "0px", - "cds-g100": "0px" + "default": "5px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" }, "original": { - "$type": "letter-spacing", - "$value": -0.5, + "$type": "dimension", + "$value": "{border.radius.small}", "unit": "px", "$modes": { - "default": -0.5, - "cds-g0": "{carbon.typography.heading03.letter-spacing}", - "cds-g10": "{carbon.typography.heading03.letter-spacing}", - "cds-g90": "{carbon.typography.heading03.letter-spacing}", - "cds-g100": "{carbon.typography.heading03.letter-spacing}" + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" }, - "key": "{typography.display-300.letter-spacing}" + "key": "{tooltip.border.radius}" }, - "name": "token-typography-display-300-letter-spacing", + "name": "token-tooltip-border-radius", "attributes": { - "category": "typography" + "category": "tooltip" }, "path": [ - "typography", - "display-300", - "letter-spacing" + "tooltip", + "border", + "radius" ] }, - "token-typography-display-200-font-family": { - "key": "{typography.display-200.font-family}", - "$type": "font-family", - "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "token-tooltip-caret-clip-path": { + "key": "{tooltip.caret.clip-path}", + "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", "$modes": { - "default": "-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" + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" }, "original": { - "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", "$modes": { - "default": "{typography.font-stack.display}", - "cds-g0": "{carbon.typography.font-family.sans}", - "cds-g10": "{carbon.typography.font-family.sans}", - "cds-g90": "{carbon.typography.font-family.sans}", - "cds-g100": "{carbon.typography.font-family.sans}" + "default": "path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')", + "cds-g0": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g10": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g90": "polygon(0 100%, 50% 0, 100% 100%)", + "cds-g100": "polygon(0 100%, 50% 0, 100% 100%)" }, - "key": "{typography.display-200.font-family}" + "key": "{tooltip.caret.clip-path}" }, - "name": "token-typography-display-200-font-family", + "name": "token-tooltip-caret-clip-path", "attributes": { - "category": "typography" + "category": "tooltip" }, "path": [ - "typography", - "display-200", - "font-family" + "tooltip", + "caret", + "clip-path" ] }, - "token-typography-display-200-font-size": { - "key": "{typography.display-200.font-size}", - "$type": "font-size", - "$value": "1rem", + "token-tooltip-caret-height": { + "key": "{tooltip.caret.height}", + "$type": "dimension", + "$value": "7px", "unit": "px", - "comment": "16px/1rem", "$modes": { - "default": "16", - "cds-g0": "1rem", - "cds-g10": "1rem", - "cds-g90": "1rem", - "cds-g100": "1rem" + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" }, "original": { - "$type": "font-size", - "$value": "16", + "$type": "dimension", + "$value": "7", "unit": "px", - "comment": "16px/1rem", "$modes": { - "default": "16", - "cds-g0": "{carbon.typography.heading02.font-size}", - "cds-g10": "{carbon.typography.heading02.font-size}", - "cds-g90": "{carbon.typography.heading02.font-size}", - "cds-g100": "{carbon.typography.heading02.font-size}" + "default": "7", + "cds-g0": "6", + "cds-g10": "6", + "cds-g90": "6", + "cds-g100": "6" }, - "key": "{typography.display-200.font-size}" + "key": "{tooltip.caret.height}" }, - "name": "token-typography-display-200-font-size", + "name": "token-tooltip-caret-height", "attributes": { - "category": "typography" + "category": "tooltip" }, "path": [ - "typography", - "display-200", - "font-size" + "tooltip", + "caret", + "height" ] }, - "token-typography-display-200-line-height": { - "key": "{typography.display-200.line-height}", - "$type": "number", - "$value": 1.5, - "comment": "24px", + "token-tooltip-caret-width": { + "key": "{tooltip.caret.width}", + "$type": "dimension", + "$value": "16px", + "unit": "px", "$modes": { - "default": 1.5, - "cds-g0": 1.5, - "cds-g10": 1.5, - "cds-g90": 1.5, - "cds-g100": 1.5 + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" }, "original": { - "$type": "number", - "$value": 1.5, - "comment": "24px", + "$type": "dimension", + "$value": "16", + "unit": "px", "$modes": { - "default": 1.5, - "cds-g0": "{carbon.typography.heading02.line-height}", - "cds-g10": "{carbon.typography.heading02.line-height}", - "cds-g90": "{carbon.typography.heading02.line-height}", - "cds-g100": "{carbon.typography.heading02.line-height}" + "default": "16", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" }, - "key": "{typography.display-200.line-height}" + "key": "{tooltip.caret.width}" }, - "name": "token-typography-display-200-line-height", + "name": "token-tooltip-caret-width", "attributes": { - "category": "typography" + "category": "tooltip" }, "path": [ - "typography", - "display-200", - "line-height" + "tooltip", + "caret", + "width" ] }, - "token-typography-display-200-letter-spacing": { - "key": "{typography.display-200.letter-spacing}", - "$type": "letter-spacing", - "$value": "-0.5px", + "token-tooltip-focus-offset": { + "key": "{tooltip.focus-offset}", + "$type": "dimension", + "$value": "-2px", "unit": "px", - "$modes": { - "default": -0.5, - "cds-g0": "0px", - "cds-g10": "0px", - "cds-g90": "0px", - "cds-g100": "0px" - }, "original": { - "$type": "letter-spacing", - "$value": -0.5, + "$type": "dimension", + "$value": "-2", "unit": "px", - "$modes": { - "default": -0.5, - "cds-g0": "{carbon.typography.heading02.letter-spacing}", - "cds-g10": "{carbon.typography.heading02.letter-spacing}", - "cds-g90": "{carbon.typography.heading02.letter-spacing}", - "cds-g100": "{carbon.typography.heading02.letter-spacing}" - }, - "key": "{typography.display-200.letter-spacing}" + "key": "{tooltip.focus-offset}" }, - "name": "token-typography-display-200-letter-spacing", + "name": "token-tooltip-focus-offset", "attributes": { - "category": "typography" + "category": "tooltip" }, "path": [ - "typography", - "display-200", - "letter-spacing" + "tooltip", + "focus-offset" ] }, - "token-typography-display-100-font-family": { - "key": "{typography.display-100.font-family}", + "token-tooltip-transition-function": { + "key": "{tooltip.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.54, + 1.5, + 0.38, + 1.11 + ], + "key": "{tooltip.transition.function}" + }, + "name": "token-tooltip-transition-function", + "attributes": { + "category": "tooltip" + }, + "path": [ + "tooltip", + "transition", + "function" + ] + }, + "token-typography-font-stack-display": { + "key": "{typography.font-stack.display}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", "$modes": { @@ -14855,240 +14901,226 @@ }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.display}", + "$value": "{typography.font-stack.sans.display.combined}", "$modes": { - "default": "{typography.font-stack.display}", + "default": "{typography.font-stack.sans.display.combined}", "cds-g0": "{carbon.typography.font-family.sans}", "cds-g10": "{carbon.typography.font-family.sans}", "cds-g90": "{carbon.typography.font-family.sans}", "cds-g100": "{carbon.typography.font-family.sans}" }, - "key": "{typography.display-100.font-family}" + "key": "{typography.font-stack.display}" }, - "name": "token-typography-display-100-font-family", + "name": "token-typography-font-stack-display", "attributes": { "category": "typography" }, "path": [ "typography", - "display-100", - "font-family" + "font-stack", + "display" ] }, - "token-typography-display-100-font-size": { - "key": "{typography.display-100.font-size}", - "$type": "font-size", - "$value": "0.8125rem", - "unit": "px", - "comment": "13px/0.8125rem", + "token-typography-font-stack-text": { + "key": "{typography.font-stack.text}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", "$modes": { - "default": "13", - "cds-g0": "0.875rem", - "cds-g10": "0.875rem", - "cds-g90": "0.875rem", - "cds-g100": "0.875rem" + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" }, "original": { - "$type": "font-size", - "$value": "13", - "unit": "px", - "comment": "13px/0.8125rem", + "$type": "font-family", + "$value": "{typography.font-stack.sans.text.combined}", "$modes": { - "default": "13", - "cds-g0": "{carbon.typography.heading01.font-size}", - "cds-g10": "{carbon.typography.heading01.font-size}", - "cds-g90": "{carbon.typography.heading01.font-size}", - "cds-g100": "{carbon.typography.heading01.font-size}" + "default": "{typography.font-stack.sans.text.combined}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" }, - "key": "{typography.display-100.font-size}" + "key": "{typography.font-stack.text}" }, - "name": "token-typography-display-100-font-size", + "name": "token-typography-font-stack-text", "attributes": { "category": "typography" }, "path": [ "typography", - "display-100", - "font-size" + "font-stack", + "text" ] }, - "token-typography-display-100-line-height": { - "key": "{typography.display-100.line-height}", - "$type": "number", - "$value": 1.3846, - "comment": "18px", + "token-typography-font-stack-code": { + "key": "{typography.font-stack.code}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", "$modes": { - "default": 1.3846, - "cds-g0": 1.42857, - "cds-g10": 1.42857, - "cds-g90": 1.42857, - "cds-g100": 1.42857 + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" }, "original": { - "$type": "number", - "$value": 1.3846, - "comment": "18px", + "$type": "font-family", + "$value": "{typography.font-stack.monospace.code.combined}", "$modes": { - "default": 1.3846, - "cds-g0": "{carbon.typography.heading01.line-height}", - "cds-g10": "{carbon.typography.heading01.line-height}", - "cds-g90": "{carbon.typography.heading01.line-height}", - "cds-g100": "{carbon.typography.heading01.line-height}" + "default": "{typography.font-stack.monospace.code.combined}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" }, - "key": "{typography.display-100.line-height}" + "key": "{typography.font-stack.code}" }, - "name": "token-typography-display-100-line-height", + "name": "token-typography-font-stack-code", "attributes": { "category": "typography" }, "path": [ "typography", - "display-100", - "line-height" + "font-stack", + "code" ] }, - "token-typography-display-100-letter-spacing": { - "key": "{typography.display-100.letter-spacing}", - "$type": "letter-spacing", - "$value": "0px", - "unit": "px", + "token-typography-font-weight-regular": { + "key": "{typography.font-weight.regular}", + "$type": "font-weight", + "$value": "400", "$modes": { - "default": 0, - "cds-g0": "0.16px", - "cds-g10": "0.16px", - "cds-g90": "0.16px", - "cds-g100": "0.16px" + "default": "400", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 }, "original": { - "$type": "letter-spacing", - "$value": 0, - "unit": "px", + "$type": "font-weight", + "$value": "400", "$modes": { - "default": 0, - "cds-g0": "{carbon.typography.heading01.letter-spacing}", - "cds-g10": "{carbon.typography.heading01.letter-spacing}", - "cds-g90": "{carbon.typography.heading01.letter-spacing}", - "cds-g100": "{carbon.typography.heading01.letter-spacing}" + "default": "400", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" }, - "key": "{typography.display-100.letter-spacing}" + "key": "{typography.font-weight.regular}" }, - "name": "token-typography-display-100-letter-spacing", + "name": "token-typography-font-weight-regular", "attributes": { "category": "typography" }, "path": [ "typography", - "display-100", - "letter-spacing" + "font-weight", + "regular" ] }, - "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", + "token-typography-font-weight-medium": { + "key": "{typography.font-weight.medium}", + "$type": "font-weight", + "$value": "500", "$modes": { - "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", - "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", - "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + "default": "500", + "cds-g0": 400, + "cds-g10": 400, + "cds-g90": 400, + "cds-g100": 400 }, "original": { - "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$type": "font-weight", + "$value": "500", "$modes": { - "default": "{typography.font-stack.text}", - "cds-g0": "{carbon.typography.font-family.sans}", - "cds-g10": "{carbon.typography.font-family.sans}", - "cds-g90": "{carbon.typography.font-family.sans}", - "cds-g100": "{carbon.typography.font-family.sans}" + "default": "500", + "cds-g0": "{carbon.typography.font-weight.regular}", + "cds-g10": "{carbon.typography.font-weight.regular}", + "cds-g90": "{carbon.typography.font-weight.regular}", + "cds-g100": "{carbon.typography.font-weight.regular}" }, - "key": "{typography.body-300.font-family}" + "key": "{typography.font-weight.medium}" }, - "name": "token-typography-body-300-font-family", + "name": "token-typography-font-weight-medium", "attributes": { "category": "typography" }, "path": [ "typography", - "body-300", - "font-family" + "font-weight", + "medium" ] }, - "token-typography-body-300-font-size": { - "key": "{typography.body-300.font-size}", - "$type": "font-size", - "$value": "1rem", - "unit": "px", - "comment": "16px/1rem", + "token-typography-font-weight-semibold": { + "key": "{typography.font-weight.semibold}", + "$type": "font-weight", + "$value": "600", "$modes": { - "default": "16", - "cds-g0": "1rem", - "cds-g10": "1rem", - "cds-g90": "1rem", - "cds-g100": "1rem" + "default": "600", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 }, "original": { - "$type": "font-size", - "$value": "16", - "unit": "px", - "comment": "16px/1rem", + "$type": "font-weight", + "$value": "600", "$modes": { - "default": "16", - "cds-g0": "{carbon.typography.body02.font-size}", - "cds-g10": "{carbon.typography.body02.font-size}", - "cds-g90": "{carbon.typography.body02.font-size}", - "cds-g100": "{carbon.typography.body02.font-size}" + "default": "600", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" }, - "key": "{typography.body-300.font-size}" + "key": "{typography.font-weight.semibold}" }, - "name": "token-typography-body-300-font-size", + "name": "token-typography-font-weight-semibold", "attributes": { "category": "typography" }, "path": [ "typography", - "body-300", - "font-size" + "font-weight", + "semibold" ] }, - "token-typography-body-300-line-height": { - "key": "{typography.body-300.line-height}", - "$type": "number", - "$value": 1.5, - "comment": "24px", + "token-typography-font-weight-bold": { + "key": "{typography.font-weight.bold}", + "$type": "font-weight", + "$value": "700", "$modes": { - "default": 1.5, - "cds-g0": 1.5, - "cds-g10": 1.5, - "cds-g90": 1.5, - "cds-g100": 1.5 + "default": "700", + "cds-g0": 600, + "cds-g10": 600, + "cds-g90": 600, + "cds-g100": 600 }, "original": { - "$type": "number", - "$value": 1.5, - "comment": "24px", + "$type": "font-weight", + "$value": "700", "$modes": { - "default": 1.5, - "cds-g0": "{carbon.typography.body02.line-height}", - "cds-g10": "{carbon.typography.body02.line-height}", - "cds-g90": "{carbon.typography.body02.line-height}", - "cds-g100": "{carbon.typography.body02.line-height}" + "default": "700", + "cds-g0": "{carbon.typography.font-weight.semibold}", + "cds-g10": "{carbon.typography.font-weight.semibold}", + "cds-g90": "{carbon.typography.font-weight.semibold}", + "cds-g100": "{carbon.typography.font-weight.semibold}" }, - "key": "{typography.body-300.line-height}" + "key": "{typography.font-weight.bold}" }, - "name": "token-typography-body-300-line-height", + "name": "token-typography-font-weight-bold", "attributes": { "category": "typography" }, "path": [ "typography", - "body-300", - "line-height" + "font-weight", + "bold" ] }, - "token-typography-body-200-font-family": { - "key": "{typography.body-200.font-family}", + "token-typography-display-500-font-family": { + "key": "{typography.display-500.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", "$modes": { @@ -15100,100 +15132,135 @@ }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{typography.font-stack.display}", "$modes": { - "default": "{typography.font-stack.text}", + "default": "{typography.font-stack.display}", "cds-g0": "{carbon.typography.font-family.sans}", "cds-g10": "{carbon.typography.font-family.sans}", "cds-g90": "{carbon.typography.font-family.sans}", "cds-g100": "{carbon.typography.font-family.sans}" }, - "key": "{typography.body-200.font-family}" + "key": "{typography.display-500.font-family}" }, - "name": "token-typography-body-200-font-family", + "name": "token-typography-display-500-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "body-200", + "display-500", "font-family" ] }, - "token-typography-body-200-font-size": { - "key": "{typography.body-200.font-size}", + "token-typography-display-500-font-size": { + "key": "{typography.display-500.font-size}", "$type": "font-size", - "$value": "0.875rem", + "$value": "1.875rem", "unit": "px", - "comment": "14px/0.875rem", + "comment": "30px/1.875rem", "$modes": { - "default": "14", - "cds-g0": "0.875rem", - "cds-g10": "0.875rem", - "cds-g90": "0.875rem", - "cds-g100": "0.875rem" + "default": "30", + "cds-g0": "2rem", + "cds-g10": "2rem", + "cds-g90": "2rem", + "cds-g100": "2rem" }, "original": { "$type": "font-size", - "$value": "14", + "$value": "30", "unit": "px", - "comment": "14px/0.875rem", + "comment": "30px/1.875rem", "$modes": { - "default": "14", - "cds-g0": "{carbon.typography.body01.font-size}", - "cds-g10": "{carbon.typography.body01.font-size}", - "cds-g90": "{carbon.typography.body01.font-size}", - "cds-g100": "{carbon.typography.body01.font-size}" + "default": "30", + "cds-g0": "{carbon.typography.heading05.font-size}", + "cds-g10": "{carbon.typography.heading05.font-size}", + "cds-g90": "{carbon.typography.heading05.font-size}", + "cds-g100": "{carbon.typography.heading05.font-size}" }, - "key": "{typography.body-200.font-size}" + "key": "{typography.display-500.font-size}" }, - "name": "token-typography-body-200-font-size", + "name": "token-typography-display-500-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "body-200", + "display-500", "font-size" ] }, - "token-typography-body-200-line-height": { - "key": "{typography.body-200.line-height}", + "token-typography-display-500-line-height": { + "key": "{typography.display-500.line-height}", "$type": "number", - "$value": 1.4286, - "comment": "20px", + "$value": 1.2666, + "comment": "38px", "$modes": { - "default": 1.4286, - "cds-g0": 1.42857, - "cds-g10": 1.42857, - "cds-g90": 1.42857, - "cds-g100": 1.42857 + "default": 1.2666, + "cds-g0": 1.25, + "cds-g10": 1.25, + "cds-g90": 1.25, + "cds-g100": 1.25 }, "original": { "$type": "number", - "$value": 1.4286, - "comment": "20px", + "$value": 1.2666, + "comment": "38px", "$modes": { - "default": 1.4286, - "cds-g0": "{carbon.typography.body01.line-height}", - "cds-g10": "{carbon.typography.body01.line-height}", - "cds-g90": "{carbon.typography.body01.line-height}", - "cds-g100": "{carbon.typography.body01.line-height}" + "default": 1.2666, + "cds-g0": "{carbon.typography.heading05.line-height}", + "cds-g10": "{carbon.typography.heading05.line-height}", + "cds-g90": "{carbon.typography.heading05.line-height}", + "cds-g100": "{carbon.typography.heading05.line-height}" }, - "key": "{typography.body-200.line-height}" + "key": "{typography.display-500.line-height}" }, - "name": "token-typography-body-200-line-height", + "name": "token-typography-display-500-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "body-200", + "display-500", "line-height" ] }, - "token-typography-body-100-font-family": { - "key": "{typography.body-100.font-family}", + "token-typography-display-500-letter-spacing": { + "key": "{typography.display-500.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading05.letter-spacing}", + "cds-g10": "{carbon.typography.heading05.letter-spacing}", + "cds-g90": "{carbon.typography.heading05.letter-spacing}", + "cds-g100": "{carbon.typography.heading05.letter-spacing}" + }, + "key": "{typography.display-500.letter-spacing}" + }, + "name": "token-typography-display-500-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-500", + "letter-spacing" + ] + }, + "token-typography-display-400-font-family": { + "key": "{typography.display-400.font-family}", "$type": "font-family", "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", "$modes": { @@ -15205,70 +15272,70 @@ }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.text}", + "$value": "{typography.font-stack.display}", "$modes": { - "default": "{typography.font-stack.text}", + "default": "{typography.font-stack.display}", "cds-g0": "{carbon.typography.font-family.sans}", "cds-g10": "{carbon.typography.font-family.sans}", "cds-g90": "{carbon.typography.font-family.sans}", "cds-g100": "{carbon.typography.font-family.sans}" }, - "key": "{typography.body-100.font-family}" + "key": "{typography.display-400.font-family}" }, - "name": "token-typography-body-100-font-family", + "name": "token-typography-display-400-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "body-100", + "display-400", "font-family" ] }, - "token-typography-body-100-font-size": { - "key": "{typography.body-100.font-size}", + "token-typography-display-400-font-size": { + "key": "{typography.display-400.font-size}", "$type": "font-size", - "$value": "0.8125rem", + "$value": "1.5rem", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "24px/1.5rem", "$modes": { - "default": "13", - "cds-g0": "0.875rem", - "cds-g10": "0.875rem", - "cds-g90": "0.875rem", - "cds-g100": "0.875rem" + "default": "24", + "cds-g0": "1.75rem", + "cds-g10": "1.75rem", + "cds-g90": "1.75rem", + "cds-g100": "1.75rem" }, "original": { "$type": "font-size", - "$value": "13", + "$value": "24", "unit": "px", - "comment": "13px/0.8125rem", + "comment": "24px/1.5rem", "$modes": { - "default": "13", - "cds-g0": "{carbon.typography.bodyCompact01.font-size}", - "cds-g10": "{carbon.typography.bodyCompact01.font-size}", - "cds-g90": "{carbon.typography.bodyCompact01.font-size}", - "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + "default": "24", + "cds-g0": "{carbon.typography.heading04.font-size}", + "cds-g10": "{carbon.typography.heading04.font-size}", + "cds-g90": "{carbon.typography.heading04.font-size}", + "cds-g100": "{carbon.typography.heading04.font-size}" }, - "key": "{typography.body-100.font-size}" + "key": "{typography.display-400.font-size}" }, - "name": "token-typography-body-100-font-size", + "name": "token-typography-display-400-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "body-100", + "display-400", "font-size" ] }, - "token-typography-body-100-line-height": { - "key": "{typography.body-100.line-height}", + "token-typography-display-400-line-height": { + "key": "{typography.display-400.line-height}", "$type": "number", - "$value": 1.3846, - "comment": "18px", + "$value": 1.3333, + "comment": "32px", "$modes": { - "default": 1.3846, + "default": 1.3333, "cds-g0": 1.28572, "cds-g10": 1.28572, "cds-g90": 1.28572, @@ -15276,272 +15343,377 @@ }, "original": { "$type": "number", - "$value": 1.3846, - "comment": "18px", + "$value": 1.3333, + "comment": "32px", "$modes": { - "default": 1.3846, - "cds-g0": "{carbon.typography.bodyCompact01.line-height}", - "cds-g10": "{carbon.typography.bodyCompact01.line-height}", - "cds-g90": "{carbon.typography.bodyCompact01.line-height}", - "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + "default": 1.3333, + "cds-g0": "{carbon.typography.heading04.line-height}", + "cds-g10": "{carbon.typography.heading04.line-height}", + "cds-g90": "{carbon.typography.heading04.line-height}", + "cds-g100": "{carbon.typography.heading04.line-height}" }, - "key": "{typography.body-100.line-height}" + "key": "{typography.display-400.line-height}" }, - "name": "token-typography-body-100-line-height", + "name": "token-typography-display-400-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "body-100", + "display-400", "line-height" ] }, - "token-typography-code-300-font-family": { - "key": "{typography.code-300.font-family}", + "token-typography-display-400-letter-spacing": { + "key": "{typography.display-400.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading04.letter-spacing}", + "cds-g10": "{carbon.typography.heading04.letter-spacing}", + "cds-g90": "{carbon.typography.heading04.letter-spacing}", + "cds-g100": "{carbon.typography.heading04.letter-spacing}" + }, + "key": "{typography.display-400.letter-spacing}" + }, + "name": "token-typography-display-400-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-400", + "letter-spacing" + ] + }, + "token-typography-display-300-font-family": { + "key": "{typography.display-300.font-family}", "$type": "font-family", - "$value": "ui-monospace, Menlo, Consolas, monospace", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", "$modes": { - "default": "ui-monospace, Menlo, Consolas, monospace", - "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", + "$value": "{typography.font-stack.text}", "$modes": { - "default": "{typography.font-stack.code}", - "cds-g0": "{carbon.typography.font-family.mono}", - "cds-g10": "{carbon.typography.font-family.mono}", - "cds-g90": "{carbon.typography.font-family.mono}", - "cds-g100": "{carbon.typography.font-family.mono}" + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" }, - "key": "{typography.code-300.font-family}" + "key": "{typography.display-300.font-family}" }, - "name": "token-typography-code-300-font-family", + "name": "token-typography-display-300-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "display-300", "font-family" ] }, - "token-typography-code-300-font-size": { - "key": "{typography.code-300.font-size}", + "token-typography-display-300-font-size": { + "key": "{typography.display-300.font-size}", "$type": "font-size", - "$value": "1rem", + "$value": "1.125rem", "unit": "px", - "comment": "16px/1rem", + "comment": "18px/1.125rem", "$modes": { - "default": "16", - "cds-g0": "0.875rem", - "cds-g10": "0.875rem", - "cds-g90": "0.875rem", - "cds-g100": "0.875rem" + "default": "18", + "cds-g0": "1.25rem", + "cds-g10": "1.25rem", + "cds-g90": "1.25rem", + "cds-g100": "1.25rem" }, "original": { "$type": "font-size", - "$value": "16", + "$value": "18", "unit": "px", - "comment": "16px/1rem", + "comment": "18px/1.125rem", "$modes": { - "default": "16", - "cds-g0": "{carbon.typography.code02.font-size}", - "cds-g10": "{carbon.typography.code02.font-size}", - "cds-g90": "{carbon.typography.code02.font-size}", - "cds-g100": "{carbon.typography.code02.font-size}" + "default": "18", + "cds-g0": "{carbon.typography.heading03.font-size}", + "cds-g10": "{carbon.typography.heading03.font-size}", + "cds-g90": "{carbon.typography.heading03.font-size}", + "cds-g100": "{carbon.typography.heading03.font-size}" }, - "key": "{typography.code-300.font-size}" + "key": "{typography.display-300.font-size}" }, - "name": "token-typography-code-300-font-size", + "name": "token-typography-display-300-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "display-300", "font-size" ] }, - "token-typography-code-300-line-height": { - "key": "{typography.code-300.line-height}", + "token-typography-display-300-line-height": { + "key": "{typography.display-300.line-height}", "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.3333, + "comment": "24px", "$modes": { - "default": 1.25, - "cds-g0": 1.42857, - "cds-g10": 1.42857, - "cds-g90": 1.42857, - "cds-g100": 1.42857 + "default": 1.3333, + "cds-g0": 1.4, + "cds-g10": 1.4, + "cds-g90": 1.4, + "cds-g100": 1.4 }, "original": { "$type": "number", - "$value": 1.25, - "comment": "20px", + "$value": 1.3333, + "comment": "24px", "$modes": { - "default": 1.25, - "cds-g0": "{carbon.typography.code02.line-height}", - "cds-g10": "{carbon.typography.code02.line-height}", - "cds-g90": "{carbon.typography.code02.line-height}", - "cds-g100": "{carbon.typography.code02.line-height}" + "default": 1.3333, + "cds-g0": "{carbon.typography.heading03.line-height}", + "cds-g10": "{carbon.typography.heading03.line-height}", + "cds-g90": "{carbon.typography.heading03.line-height}", + "cds-g100": "{carbon.typography.heading03.line-height}" }, - "key": "{typography.code-300.line-height}" + "key": "{typography.display-300.line-height}" }, - "name": "token-typography-code-300-line-height", + "name": "token-typography-display-300-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-300", + "display-300", "line-height" ] }, - "token-typography-code-200-font-family": { - "key": "{typography.code-200.font-family}", + "token-typography-display-300-letter-spacing": { + "key": "{typography.display-300.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading03.letter-spacing}", + "cds-g10": "{carbon.typography.heading03.letter-spacing}", + "cds-g90": "{carbon.typography.heading03.letter-spacing}", + "cds-g100": "{carbon.typography.heading03.letter-spacing}" + }, + "key": "{typography.display-300.letter-spacing}" + }, + "name": "token-typography-display-300-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-300", + "letter-spacing" + ] + }, + "token-typography-display-200-font-family": { + "key": "{typography.display-200.font-family}", "$type": "font-family", - "$value": "ui-monospace, Menlo, Consolas, monospace", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", "$modes": { - "default": "ui-monospace, Menlo, Consolas, monospace", - "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", + "$value": "{typography.font-stack.display}", "$modes": { - "default": "{typography.font-stack.code}", - "cds-g0": "{carbon.typography.font-family.mono}", - "cds-g10": "{carbon.typography.font-family.mono}", - "cds-g90": "{carbon.typography.font-family.mono}", - "cds-g100": "{carbon.typography.font-family.mono}" + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" }, - "key": "{typography.code-200.font-family}" + "key": "{typography.display-200.font-family}" }, - "name": "token-typography-code-200-font-family", + "name": "token-typography-display-200-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-200", + "display-200", "font-family" ] }, - "token-typography-code-200-font-size": { - "key": "{typography.code-200.font-size}", + "token-typography-display-200-font-size": { + "key": "{typography.display-200.font-size}", "$type": "font-size", - "$value": "0.875rem", + "$value": "1rem", "unit": "px", - "comment": "14px/0.875rem", + "comment": "16px/1rem", "$modes": { - "default": "14", - "cds-g0": "0.875rem", - "cds-g10": "0.875rem", - "cds-g90": "0.875rem", - "cds-g100": "0.875rem" + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" }, "original": { "$type": "font-size", - "$value": "14", + "$value": "16", "unit": "px", - "comment": "14px/0.875rem", + "comment": "16px/1rem", "$modes": { - "default": "14", - "cds-g0": "{carbon.typography.code02.font-size}", - "cds-g10": "{carbon.typography.code02.font-size}", - "cds-g90": "{carbon.typography.code02.font-size}", - "cds-g100": "{carbon.typography.code02.font-size}" + "default": "16", + "cds-g0": "{carbon.typography.heading02.font-size}", + "cds-g10": "{carbon.typography.heading02.font-size}", + "cds-g90": "{carbon.typography.heading02.font-size}", + "cds-g100": "{carbon.typography.heading02.font-size}" }, - "key": "{typography.code-200.font-size}" + "key": "{typography.display-200.font-size}" }, - "name": "token-typography-code-200-font-size", + "name": "token-typography-display-200-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-200", + "display-200", "font-size" ] }, - "token-typography-code-200-line-height": { - "key": "{typography.code-200.line-height}", + "token-typography-display-200-line-height": { + "key": "{typography.display-200.line-height}", "$type": "number", - "$value": 1.125, - "comment": "18px", + "$value": 1.5, + "comment": "24px", "$modes": { - "default": 1.125, - "cds-g0": 1.42857, - "cds-g10": 1.42857, - "cds-g90": 1.42857, - "cds-g100": 1.42857 + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 }, "original": { "$type": "number", - "$value": 1.125, - "comment": "18px", + "$value": 1.5, + "comment": "24px", "$modes": { - "default": 1.125, - "cds-g0": "{carbon.typography.code02.line-height}", - "cds-g10": "{carbon.typography.code02.line-height}", - "cds-g90": "{carbon.typography.code02.line-height}", - "cds-g100": "{carbon.typography.code02.line-height}" + "default": 1.5, + "cds-g0": "{carbon.typography.heading02.line-height}", + "cds-g10": "{carbon.typography.heading02.line-height}", + "cds-g90": "{carbon.typography.heading02.line-height}", + "cds-g100": "{carbon.typography.heading02.line-height}" }, - "key": "{typography.code-200.line-height}" + "key": "{typography.display-200.line-height}" }, - "name": "token-typography-code-200-line-height", + "name": "token-typography-display-200-line-height", "attributes": { "category": "typography" }, "path": [ "typography", - "code-200", + "display-200", "line-height" ] }, - "token-typography-code-100-font-family": { - "key": "{typography.code-100.font-family}", + "token-typography-display-200-letter-spacing": { + "key": "{typography.display-200.letter-spacing}", + "$type": "letter-spacing", + "$value": "-0.5px", + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "0px", + "cds-g10": "0px", + "cds-g90": "0px", + "cds-g100": "0px" + }, + "original": { + "$type": "letter-spacing", + "$value": -0.5, + "unit": "px", + "$modes": { + "default": -0.5, + "cds-g0": "{carbon.typography.heading02.letter-spacing}", + "cds-g10": "{carbon.typography.heading02.letter-spacing}", + "cds-g90": "{carbon.typography.heading02.letter-spacing}", + "cds-g100": "{carbon.typography.heading02.letter-spacing}" + }, + "key": "{typography.display-200.letter-spacing}" + }, + "name": "token-typography-display-200-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-200", + "letter-spacing" + ] + }, + "token-typography-display-100-font-family": { + "key": "{typography.display-100.font-family}", "$type": "font-family", - "$value": "ui-monospace, Menlo, Consolas, monospace", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", "$modes": { - "default": "ui-monospace, Menlo, Consolas, monospace", - "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", - "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" }, "original": { "$type": "font-family", - "$value": "{typography.font-stack.code}", + "$value": "{typography.font-stack.display}", "$modes": { - "default": "{typography.font-stack.code}", - "cds-g0": "{carbon.typography.font-family.mono}", - "cds-g10": "{carbon.typography.font-family.mono}", - "cds-g90": "{carbon.typography.font-family.mono}", - "cds-g100": "{carbon.typography.font-family.mono}" + "default": "{typography.font-stack.display}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" }, - "key": "{typography.code-100.font-family}" + "key": "{typography.display-100.font-family}" }, - "name": "token-typography-code-100-font-family", + "name": "token-typography-display-100-font-family", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "display-100", "font-family" ] }, - "token-typography-code-100-font-size": { - "key": "{typography.code-100.font-size}", + "token-typography-display-100-font-size": { + "key": "{typography.display-100.font-size}", "$type": "font-size", "$value": "0.8125rem", "unit": "px", @@ -15560,28 +15732,693 @@ "comment": "13px/0.8125rem", "$modes": { "default": "13", - "cds-g0": "{carbon.typography.code02.font-size}", - "cds-g10": "{carbon.typography.code02.font-size}", - "cds-g90": "{carbon.typography.code02.font-size}", - "cds-g100": "{carbon.typography.code02.font-size}" + "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.code-100.font-size}" + "key": "{typography.display-100.font-size}" }, - "name": "token-typography-code-100-font-size", + "name": "token-typography-display-100-font-size", "attributes": { "category": "typography" }, "path": [ "typography", - "code-100", + "display-100", "font-size" ] }, - "token-typography-code-100-line-height": { - "key": "{typography.code-100.line-height}", + "token-typography-display-100-line-height": { + "key": "{typography.display-100.line-height}", "$type": "number", - "$value": 1.23, - "comment": "16px", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.heading01.line-height}", + "cds-g10": "{carbon.typography.heading01.line-height}", + "cds-g90": "{carbon.typography.heading01.line-height}", + "cds-g100": "{carbon.typography.heading01.line-height}" + }, + "key": "{typography.display-100.line-height}" + }, + "name": "token-typography-display-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "line-height" + ] + }, + "token-typography-display-100-letter-spacing": { + "key": "{typography.display-100.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.16px", + "cds-g10": "0.16px", + "cds-g90": "0.16px", + "cds-g100": "0.16px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.heading01.letter-spacing}", + "cds-g10": "{carbon.typography.heading01.letter-spacing}", + "cds-g90": "{carbon.typography.heading01.letter-spacing}", + "cds-g100": "{carbon.typography.heading01.letter-spacing}" + }, + "key": "{typography.display-100.letter-spacing}" + }, + "name": "token-typography-display-100-letter-spacing", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "display-100", + "letter-spacing" + ] + }, + "token-typography-body-300-font-family": { + "key": "{typography.body-300.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-300.font-family}" + }, + "name": "token-typography-body-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-family" + ] + }, + "token-typography-body-300-font-size": { + "key": "{typography.body-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "1rem", + "cds-g10": "1rem", + "cds-g90": "1rem", + "cds-g100": "1rem" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.body02.font-size}", + "cds-g10": "{carbon.typography.body02.font-size}", + "cds-g90": "{carbon.typography.body02.font-size}", + "cds-g100": "{carbon.typography.body02.font-size}" + }, + "key": "{typography.body-300.font-size}" + }, + "name": "token-typography-body-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "font-size" + ] + }, + "token-typography-body-300-line-height": { + "key": "{typography.body-300.line-height}", + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": 1.5, + "cds-g10": 1.5, + "cds-g90": 1.5, + "cds-g100": 1.5 + }, + "original": { + "$type": "number", + "$value": 1.5, + "comment": "24px", + "$modes": { + "default": 1.5, + "cds-g0": "{carbon.typography.body02.line-height}", + "cds-g10": "{carbon.typography.body02.line-height}", + "cds-g90": "{carbon.typography.body02.line-height}", + "cds-g100": "{carbon.typography.body02.line-height}" + }, + "key": "{typography.body-300.line-height}" + }, + "name": "token-typography-body-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-300", + "line-height" + ] + }, + "token-typography-body-200-font-family": { + "key": "{typography.body-200.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-200.font-family}" + }, + "name": "token-typography-body-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-family" + ] + }, + "token-typography-body-200-font-size": { + "key": "{typography.body-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.body01.font-size}", + "cds-g10": "{carbon.typography.body01.font-size}", + "cds-g90": "{carbon.typography.body01.font-size}", + "cds-g100": "{carbon.typography.body01.font-size}" + }, + "key": "{typography.body-200.font-size}" + }, + "name": "token-typography-body-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "font-size" + ] + }, + "token-typography-body-200-line-height": { + "key": "{typography.body-200.line-height}", + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.4286, + "comment": "20px", + "$modes": { + "default": 1.4286, + "cds-g0": "{carbon.typography.body01.line-height}", + "cds-g10": "{carbon.typography.body01.line-height}", + "cds-g90": "{carbon.typography.body01.line-height}", + "cds-g100": "{carbon.typography.body01.line-height}" + }, + "key": "{typography.body-200.line-height}" + }, + "name": "token-typography-body-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-200", + "line-height" + ] + }, + "token-typography-body-100-font-family": { + "key": "{typography.body-100.font-family}", + "$type": "font-family", + "$value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "$modes": { + "default": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", + "cds-g0": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g10": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g90": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif", + "cds-g100": "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.text}", + "$modes": { + "default": "{typography.font-stack.text}", + "cds-g0": "{carbon.typography.font-family.sans}", + "cds-g10": "{carbon.typography.font-family.sans}", + "cds-g90": "{carbon.typography.font-family.sans}", + "cds-g100": "{carbon.typography.font-family.sans}" + }, + "key": "{typography.body-100.font-family}" + }, + "name": "token-typography-body-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-family" + ] + }, + "token-typography-body-100-font-size": { + "key": "{typography.body-100.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.bodyCompact01.font-size}", + "cds-g10": "{carbon.typography.bodyCompact01.font-size}", + "cds-g90": "{carbon.typography.bodyCompact01.font-size}", + "cds-g100": "{carbon.typography.bodyCompact01.font-size}" + }, + "key": "{typography.body-100.font-size}" + }, + "name": "token-typography-body-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "font-size" + ] + }, + "token-typography-body-100-line-height": { + "key": "{typography.body-100.line-height}", + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": 1.28572, + "cds-g10": 1.28572, + "cds-g90": 1.28572, + "cds-g100": 1.28572 + }, + "original": { + "$type": "number", + "$value": 1.3846, + "comment": "18px", + "$modes": { + "default": 1.3846, + "cds-g0": "{carbon.typography.bodyCompact01.line-height}", + "cds-g10": "{carbon.typography.bodyCompact01.line-height}", + "cds-g90": "{carbon.typography.bodyCompact01.line-height}", + "cds-g100": "{carbon.typography.bodyCompact01.line-height}" + }, + "key": "{typography.body-100.line-height}" + }, + "name": "token-typography-body-100-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "body-100", + "line-height" + ] + }, + "token-typography-code-300-font-family": { + "key": "{typography.code-300.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-300.font-family}" + }, + "name": "token-typography-code-300-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-family" + ] + }, + "token-typography-code-300-font-size": { + "key": "{typography.code-300.font-size}", + "$type": "font-size", + "$value": "1rem", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "16", + "unit": "px", + "comment": "16px/1rem", + "$modes": { + "default": "16", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-300.font-size}" + }, + "name": "token-typography-code-300-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "font-size" + ] + }, + "token-typography-code-300-line-height": { + "key": "{typography.code-300.line-height}", + "$type": "number", + "$value": 1.25, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.25, + "comment": "20px", + "$modes": { + "default": 1.25, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-300.line-height}" + }, + "name": "token-typography-code-300-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-300", + "line-height" + ] + }, + "token-typography-code-200-font-family": { + "key": "{typography.code-200.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-200.font-family}" + }, + "name": "token-typography-code-200-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-family" + ] + }, + "token-typography-code-200-font-size": { + "key": "{typography.code-200.font-size}", + "$type": "font-size", + "$value": "0.875rem", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "14", + "unit": "px", + "comment": "14px/0.875rem", + "$modes": { + "default": "14", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-200.font-size}" + }, + "name": "token-typography-code-200-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "font-size" + ] + }, + "token-typography-code-200-line-height": { + "key": "{typography.code-200.line-height}", + "$type": "number", + "$value": 1.125, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": 1.42857, + "cds-g10": 1.42857, + "cds-g90": 1.42857, + "cds-g100": 1.42857 + }, + "original": { + "$type": "number", + "$value": 1.125, + "comment": "18px", + "$modes": { + "default": 1.125, + "cds-g0": "{carbon.typography.code02.line-height}", + "cds-g10": "{carbon.typography.code02.line-height}", + "cds-g90": "{carbon.typography.code02.line-height}", + "cds-g100": "{carbon.typography.code02.line-height}" + }, + "key": "{typography.code-200.line-height}" + }, + "name": "token-typography-code-200-line-height", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-200", + "line-height" + ] + }, + "token-typography-code-100-font-family": { + "key": "{typography.code-100.font-family}", + "$type": "font-family", + "$value": "ui-monospace, Menlo, Consolas, monospace", + "$modes": { + "default": "ui-monospace, Menlo, Consolas, monospace", + "cds-g0": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g10": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g90": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", + "cds-g100": "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace" + }, + "original": { + "$type": "font-family", + "$value": "{typography.font-stack.code}", + "$modes": { + "default": "{typography.font-stack.code}", + "cds-g0": "{carbon.typography.font-family.mono}", + "cds-g10": "{carbon.typography.font-family.mono}", + "cds-g90": "{carbon.typography.font-family.mono}", + "cds-g100": "{carbon.typography.font-family.mono}" + }, + "key": "{typography.code-100.font-family}" + }, + "name": "token-typography-code-100-font-family", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-family" + ] + }, + "token-typography-code-100-font-size": { + "key": "{typography.code-100.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "0.875rem", + "cds-g10": "0.875rem", + "cds-g90": "0.875rem", + "cds-g100": "0.875rem" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "comment": "13px/0.8125rem", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.code02.font-size}", + "cds-g10": "{carbon.typography.code02.font-size}", + "cds-g90": "{carbon.typography.code02.font-size}", + "cds-g100": "{carbon.typography.code02.font-size}" + }, + "key": "{typography.code-100.font-size}" + }, + "name": "token-typography-code-100-font-size", + "attributes": { + "category": "typography" + }, + "path": [ + "typography", + "code-100", + "font-size" + ] + }, + "token-typography-code-100-line-height": { + "key": "{typography.code-100.line-height}", + "$type": "number", + "$value": 1.23, + "comment": "16px", "$modes": { "default": 1.23, "cds-g0": 1.33333, @@ -28198,453 +29035,1075 @@ "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", "comment": "notice: the icon color and animation are hardcoded here!", "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", - "comment": "notice: the icon color and animation are hardcoded here!", - "key": "{form.text-input.background-image.data-url-search-loading}" + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + "token-form-toggle-width": { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + "token-form-toggle-height": { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + "token-form-toggle-base-surface-color-default": { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + "token-form-toggle-border-radius": { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + "token-form-toggle-border-width": { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + "token-form-toggle-background-image-size": { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + "token-form-toggle-background-image-position-x": { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + "token-form-toggle-background-image-data-url": { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + "token-form-toggle-background-image-data-url-disabled": { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + "token-form-toggle-transition-duration": { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + "token-form-toggle-transition-timing-function": { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + "token-form-toggle-thumb-size": { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + "token-icon-tile-border-color-overlay": { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + "token-icon-tile-border-color-logo": { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + "token-icon-tile-surface-color-overlay": { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.white.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + "token-pagination-nav-control-height": { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + "token-pagination-nav-control-padding-horizontal": { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + "token-pagination-nav-control-focus-inset": { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + "token-pagination-nav-control-icon-spacing": { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + "token-pagination-nav-indicator-height": { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" }, - "name": "token-form-text-input-background-image-data-url-search-loading", + "name": "token-pagination-nav-indicator-height", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "text-input", - "background-image", - "data-url-search-loading" + "pagination", + "nav", + "indicator", + "height" ] }, - "token-form-toggle-width": { - "key": "{form.toggle.width}", + "token-pagination-nav-indicator-spacing": { + "key": "{pagination.nav.indicator.spacing}", "$type": "dimension", - "$value": "32px", + "$value": "6px", "unit": "px", "original": { "$type": "dimension", - "$value": "32", + "$value": "6", "unit": "px", - "key": "{form.toggle.width}" + "key": "{pagination.nav.indicator.spacing}" }, - "name": "token-form-toggle-width", + "name": "token-pagination-nav-indicator-spacing", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "width" + "pagination", + "nav", + "indicator", + "spacing" ] }, - "token-form-toggle-height": { - "key": "{form.toggle.height}", + "token-pagination-child-spacing-vertical": { + "key": "{pagination.child.spacing.vertical}", "$type": "dimension", - "$value": "16px", + "$value": "8px", "unit": "px", "original": { "$type": "dimension", - "$value": "16", + "$value": "8", "unit": "px", - "key": "{form.toggle.height}" + "key": "{pagination.child.spacing.vertical}" }, - "name": "token-form-toggle-height", + "name": "token-pagination-child-spacing-vertical", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "height" + "pagination", + "child", + "spacing", + "vertical" ] }, - "token-form-toggle-base-surface-color-default": { - "key": "{form.toggle.base.surface-color.default}", - "$type": "color", - "$value": "#e0e0e0", - "group": "components", - "comment": "the toggle has a different base surface color, compared to the other controls", + "token-pagination-child-spacing-horizontal": { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", "original": { - "$type": "color", - "$value": "{color.surface.strong}", - "group": "components", - "comment": "the toggle has a different base surface color, compared to the other controls", - "key": "{form.toggle.base.surface-color.default}" + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" }, - "name": "token-form-toggle-base-surface-color-default", + "name": "token-pagination-child-spacing-horizontal", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "base", - "surface-color", - "default" + "pagination", + "child", + "spacing", + "horizontal" ] }, - "token-form-toggle-border-radius": { - "key": "{form.toggle.border.radius}", + "token-rich-tooltip-bubble-max-width": { + "key": "{rich-tooltip.bubble.max-width}", "$type": "dimension", - "$value": "3px", + "$value": "288px", "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, "original": { "$type": "dimension", - "$value": "3", + "$value": "288", "unit": "px", - "key": "{form.toggle.border.radius}" + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" }, - "name": "token-form-toggle-border-radius", + "name": "token-rich-tooltip-bubble-max-width", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", + "rich-tooltip", + "bubble", + "max-width" + ] + }, + "token-rich-tooltip-bubble-border-color": { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#c6c6c6", + "$modes": { + "default": "#52525233", + "cds-g0": "#c6c6c6", + "cds-g10": "#c6c6c6", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", "border", - "radius" + "color" ] }, - "token-form-toggle-border-width": { - "key": "{form.toggle.border.width}", + "token-rich-tooltip-bubble-border-radius": { + "key": "{rich-tooltip.bubble.border.radius}", "$type": "dimension", - "$value": "1px", + "$value": "2px", "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, "original": { "$type": "dimension", - "$value": "1", + "$value": "2", "unit": "px", - "key": "{form.toggle.border.width}" + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" }, - "name": "token-form-toggle-border-width", + "name": "token-rich-tooltip-bubble-border-radius", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", + "rich-tooltip", + "bubble", "border", - "width" + "radius" ] }, - "token-form-toggle-background-image-size": { - "key": "{form.toggle.background-image.size}", + "token-rich-tooltip-bubble-arrow-size": { + "key": "{rich-tooltip.bubble.arrow.size}", "$type": "dimension", "$value": "12px", "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, "original": { "$type": "dimension", "$value": "12", "unit": "px", - "key": "{form.toggle.background-image.size}" + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" }, - "name": "token-form-toggle-background-image-size", + "name": "token-rich-tooltip-bubble-arrow-size", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", - "background-image", + "rich-tooltip", + "bubble", + "arrow", "size" ] }, - "token-form-toggle-background-image-position-x": { - "key": "{form.toggle.background-image.position-x}", + "token-rich-tooltip-toggle-gap-horizontal": { + "key": "{rich-tooltip.toggle.gap.horizontal}", "$type": "dimension", - "$value": "2px", + "$value": "8px", "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, "original": { "$type": "dimension", - "$value": "2", + "$value": "8", "unit": "px", - "key": "{form.toggle.background-image.position-x}" + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" }, - "name": "token-form-toggle-background-image-position-x", + "name": "token-rich-tooltip-toggle-gap-horizontal", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "position-x" + "gap", + "horizontal" ] }, - "token-form-toggle-background-image-data-url": { - "key": "{form.toggle.background-image.data-url}", - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", + "token-rich-tooltip-toggle-foreground-color-default": { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#525252", + "$modes": { + "default": "#161616", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", - "key": "{form.toggle.background-image.data-url}" + "$value": "{carbon.themes.white.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" }, - "name": "token-form-toggle-background-image-data-url", + "name": "token-rich-tooltip-toggle-foreground-color-default", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "data-url" + "foreground", + "color", + "default" ] }, - "token-form-toggle-background-image-data-url-disabled": { - "key": "{form.toggle.background-image.data-url-disabled}", - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", + "token-rich-tooltip-toggle-foreground-color-hover": { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", - "key": "{form.toggle.background-image.data-url-disabled}" + "$value": "{carbon.themes.white.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" }, - "name": "token-form-toggle-background-image-data-url-disabled", + "name": "token-rich-tooltip-toggle-foreground-color-hover", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "data-url-disabled" + "foreground", + "color", + "hover" ] }, - "token-form-toggle-transition-duration": { - "key": "{form.toggle.transition.duration}", - "$type": "duration", - "$value": "0.2s", - "unit": "s", + "token-rich-tooltip-toggle-foreground-color-active": { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#525252", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "original": { - "$type": "duration", - "$value": "0.2", - "unit": "s", - "key": "{form.toggle.transition.duration}" + "$value": "{carbon.themes.white.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" }, - "name": "token-form-toggle-transition-duration", + "name": "token-rich-tooltip-toggle-foreground-color-active", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "transition", - "duration" + "foreground", + "color", + "active" ] }, - "token-form-toggle-transition-timing-function": { - "key": "{form.toggle.transition.timing-function}", - "$type": "cubicBezier", - "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "token-rich-tooltip-toggle-icon-size": { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, "original": { - "$type": "cubicBezier", - "$value": [ - 0.68, - -0.2, - 0.265, - 1.15 - ], - "key": "{form.toggle.transition.timing-function}" + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" }, - "name": "token-form-toggle-transition-timing-function", + "name": "token-rich-tooltip-toggle-icon-size", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "transition", - "timing-function" + "icon", + "size" ] }, - "token-form-toggle-thumb-size": { - "key": "{form.toggle.thumb-size}", + "token-tabs-tab-height-medium": { + "key": "{tabs.tab.height.medium}", "$type": "dimension", - "$value": "16px", + "$value": "36px", + "unit": "px", "original": { "$type": "dimension", - "$value": "{form.toggle.height}", - "key": "{form.toggle.thumb-size}" + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" }, - "name": "token-form-toggle-thumb-size", + "name": "token-tabs-tab-height-medium", "attributes": { - "category": "form" + "category": "tabs" }, "path": [ - "form", - "toggle", - "thumb-size" + "tabs", + "tab", + "height", + "medium" ] }, - "token-icon-tile-border-color-overlay": { - "key": "{icon-tile.border.color.overlay}", - "$type": "color", - "$value": "#e0e0e0", - "$modes": { - "default": "#c6c6c6", - "cds-g0": "#e0e0e0", - "cds-g10": "#c6c6c6", - "cds-g90": "#8d8d8d", - "cds-g100": "#6f6f6f" - }, - "original": { - "$type": "color", - "$value": "{carbon.themes.white.borderSubtle02}", - "$modes": { - "default": "{color.border.primary}", - "cds-g0": "{carbon.themes.white.borderSubtle02}", - "cds-g10": "{carbon.themes.g10.borderSubtle02}", - "cds-g90": "{carbon.themes.g90.borderSubtle02}", - "cds-g100": "{carbon.themes.g100.borderSubtle02}" - }, - "key": "{icon-tile.border.color.overlay}" + "token-tabs-tab-height-large": { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" }, - "name": "token-icon-tile-border-color-overlay", + "name": "token-tabs-tab-height-large", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "border", - "color", - "overlay" + "tabs", + "tab", + "height", + "large" ] }, - "token-icon-tile-border-color-logo": { - "key": "{icon-tile.border.color.logo}", - "$type": "color", - "$value": "#c6c6c6", - "$modes": { - "default": "#c6c6c6", - "cds-g0": "#c6c6c6", - "cds-g10": "#e0e0e0", - "cds-g90": "#6f6f6f", - "cds-g100": "#525252" - }, + "token-tabs-tab-padding-horizontal-medium": { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", "original": { - "$type": "color", - "$value": "{carbon.themes.white.borderSubtle01}", - "$modes": { - "default": "{color.border.primary}", - "cds-g0": "{carbon.themes.white.borderSubtle01}", - "cds-g10": "{carbon.themes.g10.borderSubtle01}", - "cds-g90": "{carbon.themes.g90.borderSubtle01}", - "cds-g100": "{carbon.themes.g100.borderSubtle01}" - }, - "key": "{icon-tile.border.color.logo}" + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" }, - "name": "token-icon-tile-border-color-logo", + "name": "token-tabs-tab-padding-horizontal-medium", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "border", - "color", - "logo" + "tabs", + "tab", + "padding", + "horizontal", + "medium" ] }, - "token-icon-tile-surface-color-overlay": { - "key": "{icon-tile.surface.color.overlay}", - "$type": "color", - "$value": "#ffffff", - "$modes": { - "default": "#f4f4f4", - "cds-g0": "#ffffff", - "cds-g10": "#f4f4f4", - "cds-g90": "#525252", - "cds-g100": "#393939" - }, + "token-tabs-tab-padding-horizontal-large": { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", "original": { - "$type": "color", - "$value": "{carbon.themes.white.layer02}", - "$modes": { - "default": "{color.surface.primary}", - "cds-g0": "{carbon.themes.white.layer02}", - "cds-g10": "{carbon.themes.g10.layer02}", - "cds-g90": "{carbon.themes.g90.layer02}", - "cds-g100": "{carbon.themes.g100.layer02}" - }, - "key": "{icon-tile.surface.color.overlay}" + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" }, - "name": "token-icon-tile-surface-color-overlay", + "name": "token-tabs-tab-padding-horizontal-large", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "surface", - "color", - "overlay" + "tabs", + "tab", + "padding", + "horizontal", + "large" ] }, - "token-pagination-nav-control-height": { - "key": "{pagination.nav.control.height}", + "token-tabs-tab-padding-vertical": { + "key": "{tabs.tab.padding.vertical}", "$type": "dimension", - "$value": "36px", + "$value": "0px", "unit": "px", "original": { "$type": "dimension", - "$value": "36", + "$value": "0", "unit": "px", - "key": "{pagination.nav.control.height}" + "key": "{tabs.tab.padding.vertical}" }, - "name": "token-pagination-nav-control-height", + "name": "token-tabs-tab-padding-vertical", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "height" + "tabs", + "tab", + "padding", + "vertical" ] }, - "token-pagination-nav-control-padding-horizontal": { - "key": "{pagination.nav.control.padding.horizontal}", + "token-tabs-tab-border-radius": { + "key": "{tabs.tab.border-radius}", "$type": "dimension", - "$value": "12px", + "$value": "5px", "unit": "px", "original": { "$type": "dimension", - "$value": "12", + "$value": "5", "unit": "px", - "key": "{pagination.nav.control.padding.horizontal}" + "key": "{tabs.tab.border-radius}" }, - "name": "token-pagination-nav-control-padding-horizontal", + "name": "token-tabs-tab-border-radius", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "padding", - "horizontal" + "tabs", + "tab", + "border-radius" ] }, - "token-pagination-nav-control-focus-inset": { - "key": "{pagination.nav.control.focus-inset}", + "token-tabs-tab-focus-inset": { + "key": "{tabs.tab.focus-inset}", "$type": "dimension", - "$value": "4px", + "$value": "6px", "unit": "px", "original": { "$type": "dimension", - "$value": "4", + "$value": "6", "unit": "px", - "key": "{pagination.nav.control.focus-inset}" + "key": "{tabs.tab.focus-inset}" }, - "name": "token-pagination-nav-control-focus-inset", + "name": "token-tabs-tab-focus-inset", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", + "tabs", + "tab", "focus-inset" ] }, - "token-pagination-nav-control-icon-spacing": { - "key": "{pagination.nav.control.icon-spacing}", + "token-tabs-tab-gutter": { + "key": "{tabs.tab.gutter}", "$type": "dimension", "$value": "6px", "unit": "px", @@ -28652,253 +30111,253 @@ "$type": "dimension", "$value": "6", "unit": "px", - "key": "{pagination.nav.control.icon-spacing}" + "key": "{tabs.tab.gutter}" }, - "name": "token-pagination-nav-control-icon-spacing", + "name": "token-tabs-tab-gutter", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "icon-spacing" + "tabs", + "tab", + "gutter" ] }, - "token-pagination-nav-indicator-height": { - "key": "{pagination.nav.indicator.height}", + "token-tabs-indicator-height": { + "key": "{tabs.indicator.height}", "$type": "dimension", - "$value": "2px", + "$value": "3px", "unit": "px", "original": { "$type": "dimension", - "$value": "2", + "$value": "3", "unit": "px", - "key": "{pagination.nav.indicator.height}" + "key": "{tabs.indicator.height}" }, - "name": "token-pagination-nav-indicator-height", + "name": "token-tabs-indicator-height", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", + "tabs", "indicator", "height" ] }, - "token-pagination-nav-indicator-spacing": { - "key": "{pagination.nav.indicator.spacing}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tabs-indicator-transition-function": { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{pagination.nav.indicator.spacing}" + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" }, - "name": "token-pagination-nav-indicator-spacing", + "name": "token-tabs-indicator-transition-function", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", + "tabs", "indicator", - "spacing" + "transition", + "function" ] }, - "token-pagination-child-spacing-vertical": { - "key": "{pagination.child.spacing.vertical}", - "$type": "dimension", - "$value": "8px", - "unit": "px", + "token-tabs-indicator-transition-duration": { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", "original": { - "$type": "dimension", - "$value": "8", - "unit": "px", - "key": "{pagination.child.spacing.vertical}" + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" }, - "name": "token-pagination-child-spacing-vertical", + "name": "token-tabs-indicator-transition-duration", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "child", - "spacing", - "vertical" + "tabs", + "indicator", + "transition", + "duration" ] }, - "token-pagination-child-spacing-horizontal": { - "key": "{pagination.child.spacing.horizontal}", + "token-tabs-divider-height": { + "key": "{tabs.divider.height}", "$type": "dimension", - "$value": "20px", + "$value": "1px", "unit": "px", "original": { "$type": "dimension", - "$value": "20", + "$value": "1", "unit": "px", - "key": "{pagination.child.spacing.horizontal}" + "key": "{tabs.divider.height}" }, - "name": "token-pagination-child-spacing-horizontal", + "name": "token-tabs-divider-height", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "child", - "spacing", - "horizontal" + "tabs", + "divider", + "height" ] }, - "token-rich-tooltip-bubble-max-width": { - "key": "{rich-tooltip.bubble.max-width}", + "token-tag-max-width": { + "key": "{tag.max-width}", "$type": "dimension", - "$value": "288px", + "$value": "208px", "unit": "px", "$modes": { - "default": "280", - "cds-g0": "288", - "cds-g10": "288", - "cds-g90": "288", - "cds-g100": "288" + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" }, "original": { "$type": "dimension", - "$value": "288", + "$value": "208", "unit": "px", "$modes": { - "default": "280", - "cds-g0": "288", - "cds-g10": "288", - "cds-g90": "288", - "cds-g100": "288" + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" }, - "key": "{rich-tooltip.bubble.max-width}" + "key": "{tag.max-width}" }, - "name": "token-rich-tooltip-bubble-max-width", + "name": "token-tag-max-width", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", + "tag", "max-width" ] }, - "token-rich-tooltip-bubble-border-color": { - "key": "{rich-tooltip.bubble.border.color}", - "$value": "#c6c6c6", + "token-tag-padding-top": { + "key": "{tag.padding.top}", + "$type": "dimension", + "$value": "4px", + "unit": "px", "$modes": { - "default": "#52525233", - "cds-g0": "#c6c6c6", - "cds-g10": "#c6c6c6", - "cds-g90": "#c6c6c6", - "cds-g100": "#c6c6c6" + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, "original": { - "$value": "{color.palette.alpha-200}", + "$type": "dimension", + "$value": "4", + "unit": "px", "$modes": { - "default": "{elevation.higher.border.color}", - "cds-g0": "{color.palette.alpha-200}", - "cds-g10": "{color.palette.alpha-200}", - "cds-g90": "{color.palette.alpha-200}", - "cds-g100": "{color.palette.alpha-200}" + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, - "key": "{rich-tooltip.bubble.border.color}" + "key": "{tag.padding.top}" }, - "name": "token-rich-tooltip-bubble-border-color", + "name": "token-tag-padding-top", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "border", - "color" + "tag", + "padding", + "top" ] }, - "token-rich-tooltip-bubble-border-radius": { - "key": "{rich-tooltip.bubble.border.radius}", + "token-tag-padding-bottom": { + "key": "{tag.padding.bottom}", "$type": "dimension", - "$value": "2px", + "$value": "4px", "unit": "px", "$modes": { - "default": "0px", - "cds-g0": "2", - "cds-g10": "2", - "cds-g90": "2", - "cds-g100": "2" + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, "original": { "$type": "dimension", - "$value": "2", + "$value": "4", "unit": "px", "$modes": { - "default": "{border.radius.small}", - "cds-g0": "2", - "cds-g10": "2", - "cds-g90": "2", - "cds-g100": "2" + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, - "key": "{rich-tooltip.bubble.border.radius}" + "key": "{tag.padding.bottom}" }, - "name": "token-rich-tooltip-bubble-border-radius", + "name": "token-tag-padding-bottom", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "border", - "radius" + "tag", + "padding", + "bottom" ] }, - "token-rich-tooltip-bubble-arrow-size": { - "key": "{rich-tooltip.bubble.arrow.size}", + "token-tag-padding-right": { + "key": "{tag.padding.right}", "$type": "dimension", - "$value": "12px", + "$value": "8px", "unit": "px", "$modes": { - "default": "20", - "cds-g0": "12", - "cds-g10": "12", - "cds-g90": "12", - "cds-g100": "12" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, "original": { "$type": "dimension", - "$value": "12", + "$value": "8", "unit": "px", "$modes": { - "default": "20", - "cds-g0": "12", - "cds-g10": "12", - "cds-g90": "12", - "cds-g100": "12" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, - "key": "{rich-tooltip.bubble.arrow.size}" + "key": "{tag.padding.right}" }, - "name": "token-rich-tooltip-bubble-arrow-size", + "name": "token-tag-padding-right", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "arrow", - "size" + "tag", + "padding", + "right" ] }, - "token-rich-tooltip-toggle-gap-horizontal": { - "key": "{rich-tooltip.toggle.gap.horizontal}", + "token-tag-padding-left": { + "key": "{tag.padding.left}", "$type": "dimension", "$value": "8px", "unit": "px", "$modes": { - "default": "4", + "default": "10", "cds-g0": "8", "cds-g10": "8", "cds-g90": "8", @@ -28909,60 +30368,164 @@ "$value": "8", "unit": "px", "$modes": { - "default": "4", + "default": "10", "cds-g0": "8", "cds-g10": "8", "cds-g90": "8", "cds-g100": "8" }, - "key": "{rich-tooltip.toggle.gap.horizontal}" + "key": "{tag.padding.left}" }, - "name": "token-rich-tooltip-toggle-gap-horizontal", + "name": "token-tag-padding-left", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "gap", - "horizontal" + "tag", + "padding", + "left" ] }, - "token-rich-tooltip-toggle-foreground-color-default": { - "key": "{rich-tooltip.toggle.foreground.color.default}", - "$value": "#525252", + "token-tag-border-radius": { + "key": "{tag.border.radius}", + "$type": "dimension", + "$value": "16px", + "unit": "px", "$modes": { - "default": "#161616", - "cds-g0": "#525252", - "cds-g10": "#525252", - "cds-g90": "#c6c6c6", - "cds-g100": "#c6c6c6" + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" }, "original": { - "$value": "{carbon.themes.white.textSecondary}", + "$type": "dimension", + "$value": "16", + "unit": "px", "$modes": { - "default": "{color.foreground.strong}", - "cds-g0": "{carbon.themes.white.textSecondary}", - "cds-g10": "{carbon.themes.g10.textSecondary}", - "cds-g90": "{carbon.themes.g90.textSecondary}", - "cds-g100": "{carbon.themes.g100.textSecondary}" + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" }, - "key": "{rich-tooltip.toggle.foreground.color.default}" + "key": "{tag.border.radius}" }, - "name": "token-rich-tooltip-toggle-foreground-color-default", + "name": "token-tag-border-radius", "attributes": { - "category": "rich-tooltip" + "category": "tag" + }, + "path": [ + "tag", + "border", + "radius" + ] + }, + "token-tag-surface-color-default": { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{tag.surface.color.default}" + }, + "name": "token-tag-surface-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "default" + ] + }, + "token-tag-surface-color-hover": { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#d1d1d1", + "$modes": { + "default": "#e8e8e8", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.white}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" + }, + "name": "token-tag-surface-color-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "hover" + ] + }, + "token-tag-surface-color-active": { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#d1d1d1", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.white}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" + }, + "name": "token-tag-surface-color-active", + "attributes": { + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "foreground", + "tag", + "surface", "color", - "default" + "active" ] }, - "token-rich-tooltip-toggle-foreground-color-hover": { - "key": "{rich-tooltip.toggle.foreground.color.hover}", + "token-tag-foreground-color-default": { + "key": "{tag.foreground.color.default}", + "$type": "color", "$value": "#161616", "$modes": { "default": "#161616", @@ -28972,407 +30535,518 @@ "cds-g100": "#f4f4f4" }, "original": { - "$value": "{carbon.themes.white.textPrimary}", + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", "$modes": { "default": "{color.foreground.primary}", - "cds-g0": "{carbon.themes.white.textPrimary}", - "cds-g10": "{carbon.themes.g10.textPrimary}", - "cds-g90": "{carbon.themes.g90.textPrimary}", - "cds-g100": "{carbon.themes.g100.textPrimary}" + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" }, - "key": "{rich-tooltip.toggle.foreground.color.hover}" + "key": "{tag.foreground.color.default}" }, - "name": "token-rich-tooltip-toggle-foreground-color-hover", + "name": "token-tag-foreground-color-default", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", + "tag", "foreground", "color", - "hover" + "default" ] }, - "token-rich-tooltip-toggle-foreground-color-active": { - "key": "{rich-tooltip.toggle.foreground.color.active}", - "$value": "#525252", + "token-tag-typography-font-size": { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", "$modes": { - "default": "#525252", - "cds-g0": "#525252", - "cds-g10": "#525252", - "cds-g90": "#c6c6c6", - "cds-g100": "#c6c6c6" + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" }, "original": { - "$value": "{carbon.themes.white.textSecondary}", + "$type": "font-size", + "$value": "{carbon.typography.label01.font-size}", + "unit": "px", "$modes": { - "default": "{color.foreground.faint}", - "cds-g0": "{carbon.themes.white.textSecondary}", - "cds-g10": "{carbon.themes.g10.textSecondary}", - "cds-g90": "{carbon.themes.g90.textSecondary}", - "cds-g100": "{carbon.themes.g100.textSecondary}" + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" }, - "key": "{rich-tooltip.toggle.foreground.color.active}" + "key": "{tag.typography.font-size}" }, - "name": "token-rich-tooltip-toggle-foreground-color-active", + "name": "token-tag-typography-font-size", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "foreground", - "color", - "active" + "tag", + "typography", + "font-size" ] }, - "token-rich-tooltip-toggle-icon-size": { - "key": "{rich-tooltip.toggle.icon.size}", - "$type": "dimension", - "$value": "14px", + "token-tag-typography-letter-spacing": { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.32px", "unit": "px", "$modes": { - "default": "1", - "cds-g0": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g10": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g90": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g100": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - } + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" }, "original": { - "$type": "dimension", - "$value": "14", + "$type": "letter-spacing", + "$value": "{carbon.typography.label01.letter-spacing}", "unit": "px", "$modes": { - "default": "1", - "cds-g0": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g10": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g90": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g100": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - } + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" }, - "key": "{rich-tooltip.toggle.icon.size}" + "key": "{tag.typography.letter-spacing}" }, - "name": "token-rich-tooltip-toggle-icon-size", + "name": "token-tag-typography-letter-spacing", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "icon", - "size" + "tag", + "typography", + "letter-spacing" ] }, - "token-tabs-tab-height-medium": { - "key": "{tabs.tab.height.medium}", - "$type": "dimension", - "$value": "36px", - "unit": "px", + "token-tag-typography-line-height": { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.33333, + "$modes": { + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { - "$type": "dimension", - "$value": "36", - "unit": "px", - "key": "{tabs.tab.height.medium}" + "$type": "number", + "$value": "{carbon.typography.label01.line-height}", + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + }, + "key": "{tag.typography.line-height}" }, - "name": "token-tabs-tab-height-medium", + "name": "token-tag-typography-line-height", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "height", - "medium" + "tag", + "typography", + "line-height" ] }, - "token-tabs-tab-height-large": { - "key": "{tabs.tab.height.large}", - "$type": "dimension", - "$value": "48px", - "unit": "px", + "token-tag-icon-color": { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "dimension", - "$value": "48", - "unit": "px", - "key": "{tabs.tab.height.large}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.icon.color}" }, - "name": "token-tabs-tab-height-large", + "name": "token-tag-icon-color", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "height", - "large" + "tag", + "icon", + "color" ] }, - "token-tabs-tab-padding-horizontal-medium": { - "key": "{tabs.tab.padding.horizontal.medium}", - "$type": "dimension", - "$value": "12px", - "unit": "px", + "token-tag-link-border-color-primary": { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#78a9ff", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { - "$type": "dimension", - "$value": "12", - "unit": "px", - "key": "{tabs.tab.padding.horizontal.medium}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + }, + "key": "{tag.link.border.color.primary}" }, - "name": "token-tabs-tab-padding-horizontal-medium", + "name": "token-tag-link-border-color-primary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "horizontal", - "medium" + "tag", + "link", + "border", + "color", + "primary" ] }, - "token-tabs-tab-padding-horizontal-large": { - "key": "{tabs.tab.padding.horizontal.large}", - "$type": "dimension", - "$value": "20px", - "unit": "px", + "token-tag-link-border-color-secondary": { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#a8a8a8", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, "original": { - "$type": "dimension", - "$value": "20", - "unit": "px", - "key": "{tabs.tab.padding.horizontal.large}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderGray.white}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + }, + "key": "{tag.link.border.color.secondary}" }, - "name": "token-tabs-tab-padding-horizontal-large", + "name": "token-tag-link-border-color-secondary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "horizontal", - "large" + "tag", + "link", + "border", + "color", + "secondary" ] }, - "token-tabs-tab-padding-vertical": { - "key": "{tabs.tab.padding.vertical}", - "$type": "dimension", - "$value": "0px", - "unit": "px", + "token-tag-link-surface-color-primary-default": { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { - "$type": "dimension", - "$value": "0", - "unit": "px", - "key": "{tabs.tab.padding.vertical}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.default}" }, - "name": "token-tabs-tab-padding-vertical", + "name": "token-tag-link-surface-color-primary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "vertical" + "tag", + "link", + "surface", + "color", + "primary", + "default" ] }, - "token-tabs-tab-border-radius": { - "key": "{tabs.tab.border-radius}", - "$type": "dimension", - "$value": "5px", - "unit": "px", + "token-tag-link-surface-color-primary-hover": { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#b8d3ff", + "$modes": { + "default": "#e8e8e8", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" + }, "original": { - "$type": "dimension", - "$value": "5", - "unit": "px", - "key": "{tabs.tab.border-radius}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.hover}" }, - "name": "token-tabs-tab-border-radius", + "name": "token-tag-link-surface-color-primary-hover", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "border-radius" + "tag", + "link", + "surface", + "color", + "primary", + "hover" ] }, - "token-tabs-tab-focus-inset": { - "key": "{tabs.tab.focus-inset}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tag-link-foreground-color-primary-default": { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{tabs.tab.focus-inset}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.white}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.default}" }, - "name": "token-tabs-tab-focus-inset", + "name": "token-tag-link-foreground-color-primary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "focus-inset" + "tag", + "link", + "foreground", + "color", + "primary", + "default" ] }, - "token-tabs-tab-gutter": { - "key": "{tabs.tab.gutter}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tag-link-foreground-color-primary-hover": { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{tabs.tab.gutter}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.white}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.hover}" }, - "name": "token-tabs-tab-gutter", + "name": "token-tag-link-foreground-color-primary-hover", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "gutter" + "tag", + "link", + "foreground", + "color", + "primary", + "hover" ] }, - "token-tabs-indicator-height": { - "key": "{tabs.indicator.height}", - "$type": "dimension", - "$value": "3px", - "unit": "px", + "token-tag-link-foreground-color-primary-active": { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "3", - "unit": "px", - "key": "{tabs.indicator.height}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.white}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.active}" }, - "name": "token-tabs-indicator-height", + "name": "token-tag-link-foreground-color-primary-active", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "height" + "tag", + "link", + "foreground", + "color", + "primary", + "active" ] }, - "token-tabs-indicator-transition-function": { - "key": "{tabs.indicator.transition.function}", - "$type": "cubicBezier", - "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "token-tag-link-foreground-color-secondary-default": { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "cubicBezier", - "$value": [ - 0.5, - 1, - 0.89, - 1 - ], - "key": "{tabs.indicator.transition.function}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.foreground.color.secondary.default}" }, - "name": "token-tabs-indicator-transition-function", + "name": "token-tag-link-foreground-color-secondary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "transition", - "function" + "tag", + "link", + "foreground", + "color", + "secondary", + "default" ] }, - "token-tabs-indicator-transition-duration": { - "key": "{tabs.indicator.transition.duration}", - "$type": "duration", - "$value": "0.6s", - "unit": "s", + "token-tag-link-icon-color-primary": { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#161616", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "duration", - "$value": "0.6", - "unit": "s", - "key": "{tabs.indicator.transition.duration}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.icon.color.primary}" }, - "name": "token-tabs-indicator-transition-duration", + "name": "token-tag-link-icon-color-primary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "transition", - "duration" + "tag", + "link", + "icon", + "color", + "primary" ] }, - "token-tabs-divider-height": { - "key": "{tabs.divider.height}", - "$type": "dimension", - "$value": "1px", - "unit": "px", + "token-tag-link-icon-color-secondary": { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "dimension", - "$value": "1", - "unit": "px", - "key": "{tabs.divider.height}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.icon.color.secondary}" }, - "name": "token-tabs-divider-height", + "name": "token-tag-link-icon-color-secondary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "divider", - "height" + "tag", + "link", + "icon", + "color", + "secondary" ] }, "token-tooltip-max-width": { @@ -43806,453 +45480,1075 @@ "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", "comment": "notice: the icon color and animation are hardcoded here!", "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", - "comment": "notice: the icon color and animation are hardcoded here!", - "key": "{form.text-input.background-image.data-url-search-loading}" + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + "token-form-toggle-width": { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + "token-form-toggle-height": { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + "token-form-toggle-base-surface-color-default": { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#e0e0e0", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + "token-form-toggle-border-radius": { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + "token-form-toggle-border-width": { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + "token-form-toggle-background-image-size": { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + "token-form-toggle-background-image-position-x": { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + "token-form-toggle-background-image-data-url": { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + "token-form-toggle-background-image-data-url-disabled": { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + "token-form-toggle-transition-duration": { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + "token-form-toggle-transition-timing-function": { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + "token-form-toggle-thumb-size": { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + "token-icon-tile-border-color-overlay": { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#c6c6c6", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + "token-icon-tile-border-color-logo": { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#e0e0e0", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + "token-icon-tile-surface-color-overlay": { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#ffffff", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g10.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + "token-pagination-nav-control-height": { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + "token-pagination-nav-control-padding-horizontal": { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + "token-pagination-nav-control-focus-inset": { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + "token-pagination-nav-control-icon-spacing": { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + "token-pagination-nav-indicator-height": { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" }, - "name": "token-form-text-input-background-image-data-url-search-loading", + "name": "token-pagination-nav-indicator-height", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "text-input", - "background-image", - "data-url-search-loading" + "pagination", + "nav", + "indicator", + "height" ] }, - "token-form-toggle-width": { - "key": "{form.toggle.width}", + "token-pagination-nav-indicator-spacing": { + "key": "{pagination.nav.indicator.spacing}", "$type": "dimension", - "$value": "32px", + "$value": "6px", "unit": "px", "original": { "$type": "dimension", - "$value": "32", + "$value": "6", "unit": "px", - "key": "{form.toggle.width}" + "key": "{pagination.nav.indicator.spacing}" }, - "name": "token-form-toggle-width", + "name": "token-pagination-nav-indicator-spacing", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "width" + "pagination", + "nav", + "indicator", + "spacing" ] }, - "token-form-toggle-height": { - "key": "{form.toggle.height}", + "token-pagination-child-spacing-vertical": { + "key": "{pagination.child.spacing.vertical}", "$type": "dimension", - "$value": "16px", + "$value": "8px", "unit": "px", "original": { "$type": "dimension", - "$value": "16", + "$value": "8", "unit": "px", - "key": "{form.toggle.height}" + "key": "{pagination.child.spacing.vertical}" }, - "name": "token-form-toggle-height", + "name": "token-pagination-child-spacing-vertical", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "height" + "pagination", + "child", + "spacing", + "vertical" ] }, - "token-form-toggle-base-surface-color-default": { - "key": "{form.toggle.base.surface-color.default}", - "$type": "color", - "$value": "#e0e0e0", - "group": "components", - "comment": "the toggle has a different base surface color, compared to the other controls", + "token-pagination-child-spacing-horizontal": { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", "original": { - "$type": "color", - "$value": "{color.surface.strong}", - "group": "components", - "comment": "the toggle has a different base surface color, compared to the other controls", - "key": "{form.toggle.base.surface-color.default}" + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" }, - "name": "token-form-toggle-base-surface-color-default", + "name": "token-pagination-child-spacing-horizontal", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "base", - "surface-color", - "default" + "pagination", + "child", + "spacing", + "horizontal" ] }, - "token-form-toggle-border-radius": { - "key": "{form.toggle.border.radius}", + "token-rich-tooltip-bubble-max-width": { + "key": "{rich-tooltip.bubble.max-width}", "$type": "dimension", - "$value": "3px", + "$value": "288px", "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, "original": { "$type": "dimension", - "$value": "3", + "$value": "288", "unit": "px", - "key": "{form.toggle.border.radius}" + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" }, - "name": "token-form-toggle-border-radius", + "name": "token-rich-tooltip-bubble-max-width", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", + "rich-tooltip", + "bubble", + "max-width" + ] + }, + "token-rich-tooltip-bubble-border-color": { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#e0e0e0", + "$modes": { + "default": "#52525233", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#e0e0e0", + "cds-g100": "#e0e0e0" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", "border", - "radius" + "color" ] }, - "token-form-toggle-border-width": { - "key": "{form.toggle.border.width}", + "token-rich-tooltip-bubble-border-radius": { + "key": "{rich-tooltip.bubble.border.radius}", "$type": "dimension", - "$value": "1px", + "$value": "2px", "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, "original": { "$type": "dimension", - "$value": "1", + "$value": "2", "unit": "px", - "key": "{form.toggle.border.width}" + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" }, - "name": "token-form-toggle-border-width", + "name": "token-rich-tooltip-bubble-border-radius", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", + "rich-tooltip", + "bubble", "border", - "width" + "radius" ] }, - "token-form-toggle-background-image-size": { - "key": "{form.toggle.background-image.size}", + "token-rich-tooltip-bubble-arrow-size": { + "key": "{rich-tooltip.bubble.arrow.size}", "$type": "dimension", "$value": "12px", "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, "original": { "$type": "dimension", "$value": "12", "unit": "px", - "key": "{form.toggle.background-image.size}" + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" }, - "name": "token-form-toggle-background-image-size", + "name": "token-rich-tooltip-bubble-arrow-size", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", - "background-image", + "rich-tooltip", + "bubble", + "arrow", "size" ] }, - "token-form-toggle-background-image-position-x": { - "key": "{form.toggle.background-image.position-x}", + "token-rich-tooltip-toggle-gap-horizontal": { + "key": "{rich-tooltip.toggle.gap.horizontal}", "$type": "dimension", - "$value": "2px", + "$value": "8px", "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, "original": { "$type": "dimension", - "$value": "2", + "$value": "8", "unit": "px", - "key": "{form.toggle.background-image.position-x}" + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" }, - "name": "token-form-toggle-background-image-position-x", + "name": "token-rich-tooltip-toggle-gap-horizontal", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "position-x" + "gap", + "horizontal" ] }, - "token-form-toggle-background-image-data-url": { - "key": "{form.toggle.background-image.data-url}", - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", + "token-rich-tooltip-toggle-foreground-color-default": { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#525252", + "$modes": { + "default": "#161616", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", - "key": "{form.toggle.background-image.data-url}" + "$value": "{carbon.themes.g10.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" }, - "name": "token-form-toggle-background-image-data-url", + "name": "token-rich-tooltip-toggle-foreground-color-default", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "data-url" + "foreground", + "color", + "default" ] }, - "token-form-toggle-background-image-data-url-disabled": { - "key": "{form.toggle.background-image.data-url-disabled}", - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", + "token-rich-tooltip-toggle-foreground-color-hover": { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", - "key": "{form.toggle.background-image.data-url-disabled}" + "$value": "{carbon.themes.g10.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" }, - "name": "token-form-toggle-background-image-data-url-disabled", + "name": "token-rich-tooltip-toggle-foreground-color-hover", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "data-url-disabled" + "foreground", + "color", + "hover" ] }, - "token-form-toggle-transition-duration": { - "key": "{form.toggle.transition.duration}", - "$type": "duration", - "$value": "0.2s", - "unit": "s", + "token-rich-tooltip-toggle-foreground-color-active": { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#525252", + "$modes": { + "default": "#525252", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "original": { - "$type": "duration", - "$value": "0.2", - "unit": "s", - "key": "{form.toggle.transition.duration}" + "$value": "{carbon.themes.g10.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" }, - "name": "token-form-toggle-transition-duration", + "name": "token-rich-tooltip-toggle-foreground-color-active", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "transition", - "duration" + "foreground", + "color", + "active" ] }, - "token-form-toggle-transition-timing-function": { - "key": "{form.toggle.transition.timing-function}", - "$type": "cubicBezier", - "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "token-rich-tooltip-toggle-icon-size": { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, "original": { - "$type": "cubicBezier", - "$value": [ - 0.68, - -0.2, - 0.265, - 1.15 - ], - "key": "{form.toggle.transition.timing-function}" + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" }, - "name": "token-form-toggle-transition-timing-function", + "name": "token-rich-tooltip-toggle-icon-size", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "transition", - "timing-function" + "icon", + "size" ] }, - "token-form-toggle-thumb-size": { - "key": "{form.toggle.thumb-size}", + "token-tabs-tab-height-medium": { + "key": "{tabs.tab.height.medium}", "$type": "dimension", - "$value": "16px", + "$value": "36px", + "unit": "px", "original": { "$type": "dimension", - "$value": "{form.toggle.height}", - "key": "{form.toggle.thumb-size}" + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" }, - "name": "token-form-toggle-thumb-size", + "name": "token-tabs-tab-height-medium", "attributes": { - "category": "form" + "category": "tabs" }, "path": [ - "form", - "toggle", - "thumb-size" + "tabs", + "tab", + "height", + "medium" ] }, - "token-icon-tile-border-color-overlay": { - "key": "{icon-tile.border.color.overlay}", - "$type": "color", - "$value": "#c6c6c6", - "$modes": { - "default": "#e0e0e0", - "cds-g0": "#e0e0e0", - "cds-g10": "#c6c6c6", - "cds-g90": "#8d8d8d", - "cds-g100": "#6f6f6f" - }, - "original": { - "$type": "color", - "$value": "{carbon.themes.g10.borderSubtle02}", - "$modes": { - "default": "{color.border.primary}", - "cds-g0": "{carbon.themes.white.borderSubtle02}", - "cds-g10": "{carbon.themes.g10.borderSubtle02}", - "cds-g90": "{carbon.themes.g90.borderSubtle02}", - "cds-g100": "{carbon.themes.g100.borderSubtle02}" - }, - "key": "{icon-tile.border.color.overlay}" + "token-tabs-tab-height-large": { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" }, - "name": "token-icon-tile-border-color-overlay", + "name": "token-tabs-tab-height-large", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "border", - "color", - "overlay" + "tabs", + "tab", + "height", + "large" ] }, - "token-icon-tile-border-color-logo": { - "key": "{icon-tile.border.color.logo}", - "$type": "color", - "$value": "#e0e0e0", - "$modes": { - "default": "#e0e0e0", - "cds-g0": "#c6c6c6", - "cds-g10": "#e0e0e0", - "cds-g90": "#6f6f6f", - "cds-g100": "#525252" - }, + "token-tabs-tab-padding-horizontal-medium": { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", "original": { - "$type": "color", - "$value": "{carbon.themes.g10.borderSubtle01}", - "$modes": { - "default": "{color.border.primary}", - "cds-g0": "{carbon.themes.white.borderSubtle01}", - "cds-g10": "{carbon.themes.g10.borderSubtle01}", - "cds-g90": "{carbon.themes.g90.borderSubtle01}", - "cds-g100": "{carbon.themes.g100.borderSubtle01}" - }, - "key": "{icon-tile.border.color.logo}" + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" }, - "name": "token-icon-tile-border-color-logo", + "name": "token-tabs-tab-padding-horizontal-medium", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "border", - "color", - "logo" + "tabs", + "tab", + "padding", + "horizontal", + "medium" ] }, - "token-icon-tile-surface-color-overlay": { - "key": "{icon-tile.surface.color.overlay}", - "$type": "color", - "$value": "#f4f4f4", - "$modes": { - "default": "#ffffff", - "cds-g0": "#ffffff", - "cds-g10": "#f4f4f4", - "cds-g90": "#525252", - "cds-g100": "#393939" - }, + "token-tabs-tab-padding-horizontal-large": { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", "original": { - "$type": "color", - "$value": "{carbon.themes.g10.layer02}", - "$modes": { - "default": "{color.surface.primary}", - "cds-g0": "{carbon.themes.white.layer02}", - "cds-g10": "{carbon.themes.g10.layer02}", - "cds-g90": "{carbon.themes.g90.layer02}", - "cds-g100": "{carbon.themes.g100.layer02}" - }, - "key": "{icon-tile.surface.color.overlay}" + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" }, - "name": "token-icon-tile-surface-color-overlay", + "name": "token-tabs-tab-padding-horizontal-large", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "surface", - "color", - "overlay" + "tabs", + "tab", + "padding", + "horizontal", + "large" ] }, - "token-pagination-nav-control-height": { - "key": "{pagination.nav.control.height}", + "token-tabs-tab-padding-vertical": { + "key": "{tabs.tab.padding.vertical}", "$type": "dimension", - "$value": "36px", + "$value": "0px", "unit": "px", "original": { "$type": "dimension", - "$value": "36", + "$value": "0", "unit": "px", - "key": "{pagination.nav.control.height}" + "key": "{tabs.tab.padding.vertical}" }, - "name": "token-pagination-nav-control-height", + "name": "token-tabs-tab-padding-vertical", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "height" + "tabs", + "tab", + "padding", + "vertical" ] }, - "token-pagination-nav-control-padding-horizontal": { - "key": "{pagination.nav.control.padding.horizontal}", + "token-tabs-tab-border-radius": { + "key": "{tabs.tab.border-radius}", "$type": "dimension", - "$value": "12px", + "$value": "5px", "unit": "px", "original": { "$type": "dimension", - "$value": "12", + "$value": "5", "unit": "px", - "key": "{pagination.nav.control.padding.horizontal}" + "key": "{tabs.tab.border-radius}" }, - "name": "token-pagination-nav-control-padding-horizontal", + "name": "token-tabs-tab-border-radius", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "padding", - "horizontal" + "tabs", + "tab", + "border-radius" ] }, - "token-pagination-nav-control-focus-inset": { - "key": "{pagination.nav.control.focus-inset}", + "token-tabs-tab-focus-inset": { + "key": "{tabs.tab.focus-inset}", "$type": "dimension", - "$value": "4px", + "$value": "6px", "unit": "px", "original": { "$type": "dimension", - "$value": "4", + "$value": "6", "unit": "px", - "key": "{pagination.nav.control.focus-inset}" + "key": "{tabs.tab.focus-inset}" }, - "name": "token-pagination-nav-control-focus-inset", + "name": "token-tabs-tab-focus-inset", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", + "tabs", + "tab", "focus-inset" ] }, - "token-pagination-nav-control-icon-spacing": { - "key": "{pagination.nav.control.icon-spacing}", + "token-tabs-tab-gutter": { + "key": "{tabs.tab.gutter}", "$type": "dimension", "$value": "6px", "unit": "px", @@ -44260,253 +46556,253 @@ "$type": "dimension", "$value": "6", "unit": "px", - "key": "{pagination.nav.control.icon-spacing}" + "key": "{tabs.tab.gutter}" }, - "name": "token-pagination-nav-control-icon-spacing", + "name": "token-tabs-tab-gutter", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "icon-spacing" + "tabs", + "tab", + "gutter" ] }, - "token-pagination-nav-indicator-height": { - "key": "{pagination.nav.indicator.height}", + "token-tabs-indicator-height": { + "key": "{tabs.indicator.height}", "$type": "dimension", - "$value": "2px", + "$value": "3px", "unit": "px", "original": { "$type": "dimension", - "$value": "2", + "$value": "3", "unit": "px", - "key": "{pagination.nav.indicator.height}" + "key": "{tabs.indicator.height}" }, - "name": "token-pagination-nav-indicator-height", + "name": "token-tabs-indicator-height", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", + "tabs", "indicator", "height" ] }, - "token-pagination-nav-indicator-spacing": { - "key": "{pagination.nav.indicator.spacing}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tabs-indicator-transition-function": { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{pagination.nav.indicator.spacing}" + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" }, - "name": "token-pagination-nav-indicator-spacing", + "name": "token-tabs-indicator-transition-function", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", + "tabs", "indicator", - "spacing" + "transition", + "function" ] }, - "token-pagination-child-spacing-vertical": { - "key": "{pagination.child.spacing.vertical}", - "$type": "dimension", - "$value": "8px", - "unit": "px", + "token-tabs-indicator-transition-duration": { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", "original": { - "$type": "dimension", - "$value": "8", - "unit": "px", - "key": "{pagination.child.spacing.vertical}" + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" }, - "name": "token-pagination-child-spacing-vertical", + "name": "token-tabs-indicator-transition-duration", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "child", - "spacing", - "vertical" + "tabs", + "indicator", + "transition", + "duration" ] }, - "token-pagination-child-spacing-horizontal": { - "key": "{pagination.child.spacing.horizontal}", + "token-tabs-divider-height": { + "key": "{tabs.divider.height}", "$type": "dimension", - "$value": "20px", + "$value": "1px", "unit": "px", "original": { "$type": "dimension", - "$value": "20", + "$value": "1", "unit": "px", - "key": "{pagination.child.spacing.horizontal}" + "key": "{tabs.divider.height}" }, - "name": "token-pagination-child-spacing-horizontal", + "name": "token-tabs-divider-height", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "child", - "spacing", - "horizontal" + "tabs", + "divider", + "height" ] }, - "token-rich-tooltip-bubble-max-width": { - "key": "{rich-tooltip.bubble.max-width}", + "token-tag-max-width": { + "key": "{tag.max-width}", "$type": "dimension", - "$value": "288px", + "$value": "208px", "unit": "px", "$modes": { - "default": "280", - "cds-g0": "288", - "cds-g10": "288", - "cds-g90": "288", - "cds-g100": "288" + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" }, "original": { "$type": "dimension", - "$value": "288", + "$value": "208", "unit": "px", "$modes": { - "default": "280", - "cds-g0": "288", - "cds-g10": "288", - "cds-g90": "288", - "cds-g100": "288" + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" }, - "key": "{rich-tooltip.bubble.max-width}" + "key": "{tag.max-width}" }, - "name": "token-rich-tooltip-bubble-max-width", + "name": "token-tag-max-width", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", + "tag", "max-width" ] }, - "token-rich-tooltip-bubble-border-color": { - "key": "{rich-tooltip.bubble.border.color}", - "$value": "#e0e0e0", + "token-tag-padding-top": { + "key": "{tag.padding.top}", + "$type": "dimension", + "$value": "4px", + "unit": "px", "$modes": { - "default": "#52525233", - "cds-g0": "#e0e0e0", - "cds-g10": "#e0e0e0", - "cds-g90": "#e0e0e0", - "cds-g100": "#e0e0e0" + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, "original": { - "$value": "{color.palette.alpha-200}", + "$type": "dimension", + "$value": "4", + "unit": "px", "$modes": { - "default": "{elevation.higher.border.color}", - "cds-g0": "{color.palette.alpha-200}", - "cds-g10": "{color.palette.alpha-200}", - "cds-g90": "{color.palette.alpha-200}", - "cds-g100": "{color.palette.alpha-200}" + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, - "key": "{rich-tooltip.bubble.border.color}" + "key": "{tag.padding.top}" }, - "name": "token-rich-tooltip-bubble-border-color", + "name": "token-tag-padding-top", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "border", - "color" + "tag", + "padding", + "top" ] }, - "token-rich-tooltip-bubble-border-radius": { - "key": "{rich-tooltip.bubble.border.radius}", + "token-tag-padding-bottom": { + "key": "{tag.padding.bottom}", "$type": "dimension", - "$value": "2px", + "$value": "4px", "unit": "px", "$modes": { - "default": "0px", - "cds-g0": "2", - "cds-g10": "2", - "cds-g90": "2", - "cds-g100": "2" + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, "original": { "$type": "dimension", - "$value": "2", + "$value": "4", "unit": "px", "$modes": { - "default": "{border.radius.small}", - "cds-g0": "2", - "cds-g10": "2", - "cds-g90": "2", - "cds-g100": "2" + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, - "key": "{rich-tooltip.bubble.border.radius}" + "key": "{tag.padding.bottom}" }, - "name": "token-rich-tooltip-bubble-border-radius", + "name": "token-tag-padding-bottom", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "border", - "radius" + "tag", + "padding", + "bottom" ] }, - "token-rich-tooltip-bubble-arrow-size": { - "key": "{rich-tooltip.bubble.arrow.size}", + "token-tag-padding-right": { + "key": "{tag.padding.right}", "$type": "dimension", - "$value": "12px", + "$value": "8px", "unit": "px", "$modes": { - "default": "20", - "cds-g0": "12", - "cds-g10": "12", - "cds-g90": "12", - "cds-g100": "12" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, "original": { "$type": "dimension", - "$value": "12", + "$value": "8", "unit": "px", "$modes": { - "default": "20", - "cds-g0": "12", - "cds-g10": "12", - "cds-g90": "12", - "cds-g100": "12" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, - "key": "{rich-tooltip.bubble.arrow.size}" + "key": "{tag.padding.right}" }, - "name": "token-rich-tooltip-bubble-arrow-size", + "name": "token-tag-padding-right", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "arrow", - "size" + "tag", + "padding", + "right" ] }, - "token-rich-tooltip-toggle-gap-horizontal": { - "key": "{rich-tooltip.toggle.gap.horizontal}", + "token-tag-padding-left": { + "key": "{tag.padding.left}", "$type": "dimension", "$value": "8px", "unit": "px", "$modes": { - "default": "4", + "default": "10", "cds-g0": "8", "cds-g10": "8", "cds-g90": "8", @@ -44517,60 +46813,164 @@ "$value": "8", "unit": "px", "$modes": { - "default": "4", + "default": "10", "cds-g0": "8", "cds-g10": "8", "cds-g90": "8", "cds-g100": "8" }, - "key": "{rich-tooltip.toggle.gap.horizontal}" + "key": "{tag.padding.left}" }, - "name": "token-rich-tooltip-toggle-gap-horizontal", + "name": "token-tag-padding-left", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "gap", - "horizontal" + "tag", + "padding", + "left" ] }, - "token-rich-tooltip-toggle-foreground-color-default": { - "key": "{rich-tooltip.toggle.foreground.color.default}", - "$value": "#525252", + "token-tag-border-radius": { + "key": "{tag.border.radius}", + "$type": "dimension", + "$value": "16px", + "unit": "px", "$modes": { - "default": "#161616", - "cds-g0": "#525252", - "cds-g10": "#525252", - "cds-g90": "#c6c6c6", - "cds-g100": "#c6c6c6" + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" }, "original": { - "$value": "{carbon.themes.g10.textSecondary}", + "$type": "dimension", + "$value": "16", + "unit": "px", "$modes": { - "default": "{color.foreground.strong}", - "cds-g0": "{carbon.themes.white.textSecondary}", - "cds-g10": "{carbon.themes.g10.textSecondary}", - "cds-g90": "{carbon.themes.g90.textSecondary}", - "cds-g100": "{carbon.themes.g100.textSecondary}" + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" }, - "key": "{rich-tooltip.toggle.foreground.color.default}" + "key": "{tag.border.radius}" }, - "name": "token-rich-tooltip-toggle-foreground-color-default", + "name": "token-tag-border-radius", "attributes": { - "category": "rich-tooltip" + "category": "tag" + }, + "path": [ + "tag", + "border", + "radius" + ] + }, + "token-tag-surface-color-default": { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{tag.surface.color.default}" + }, + "name": "token-tag-surface-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "default" + ] + }, + "token-tag-surface-color-hover": { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#d1d1d1", + "$modes": { + "default": "#e8e8e8", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" + }, + "name": "token-tag-surface-color-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "hover" + ] + }, + "token-tag-surface-color-active": { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#d1d1d1", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" + }, + "name": "token-tag-surface-color-active", + "attributes": { + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "foreground", + "tag", + "surface", "color", - "default" + "active" ] }, - "token-rich-tooltip-toggle-foreground-color-hover": { - "key": "{rich-tooltip.toggle.foreground.color.hover}", + "token-tag-foreground-color-default": { + "key": "{tag.foreground.color.default}", + "$type": "color", "$value": "#161616", "$modes": { "default": "#161616", @@ -44580,407 +46980,518 @@ "cds-g100": "#f4f4f4" }, "original": { - "$value": "{carbon.themes.g10.textPrimary}", + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", "$modes": { "default": "{color.foreground.primary}", - "cds-g0": "{carbon.themes.white.textPrimary}", - "cds-g10": "{carbon.themes.g10.textPrimary}", - "cds-g90": "{carbon.themes.g90.textPrimary}", - "cds-g100": "{carbon.themes.g100.textPrimary}" + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" }, - "key": "{rich-tooltip.toggle.foreground.color.hover}" + "key": "{tag.foreground.color.default}" }, - "name": "token-rich-tooltip-toggle-foreground-color-hover", + "name": "token-tag-foreground-color-default", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", + "tag", "foreground", "color", - "hover" + "default" ] }, - "token-rich-tooltip-toggle-foreground-color-active": { - "key": "{rich-tooltip.toggle.foreground.color.active}", - "$value": "#525252", + "token-tag-typography-font-size": { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", "$modes": { - "default": "#525252", - "cds-g0": "#525252", - "cds-g10": "#525252", - "cds-g90": "#c6c6c6", - "cds-g100": "#c6c6c6" + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" }, "original": { - "$value": "{carbon.themes.g10.textSecondary}", + "$type": "font-size", + "$value": "{carbon.typography.label01.font-size}", + "unit": "px", "$modes": { - "default": "{color.foreground.faint}", - "cds-g0": "{carbon.themes.white.textSecondary}", - "cds-g10": "{carbon.themes.g10.textSecondary}", - "cds-g90": "{carbon.themes.g90.textSecondary}", - "cds-g100": "{carbon.themes.g100.textSecondary}" + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" }, - "key": "{rich-tooltip.toggle.foreground.color.active}" + "key": "{tag.typography.font-size}" }, - "name": "token-rich-tooltip-toggle-foreground-color-active", + "name": "token-tag-typography-font-size", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "foreground", - "color", - "active" + "tag", + "typography", + "font-size" ] }, - "token-rich-tooltip-toggle-icon-size": { - "key": "{rich-tooltip.toggle.icon.size}", - "$type": "dimension", - "$value": "14px", + "token-tag-typography-letter-spacing": { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.32px", "unit": "px", "$modes": { - "default": "1", - "cds-g0": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g10": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g90": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g100": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - } + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" }, "original": { - "$type": "dimension", - "$value": "14", + "$type": "letter-spacing", + "$value": "{carbon.typography.label01.letter-spacing}", "unit": "px", "$modes": { - "default": "1", - "cds-g0": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g10": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g90": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g100": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - } + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" }, - "key": "{rich-tooltip.toggle.icon.size}" + "key": "{tag.typography.letter-spacing}" }, - "name": "token-rich-tooltip-toggle-icon-size", + "name": "token-tag-typography-letter-spacing", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "icon", - "size" + "tag", + "typography", + "letter-spacing" ] }, - "token-tabs-tab-height-medium": { - "key": "{tabs.tab.height.medium}", - "$type": "dimension", - "$value": "36px", - "unit": "px", + "token-tag-typography-line-height": { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.33333, + "$modes": { + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { - "$type": "dimension", - "$value": "36", - "unit": "px", - "key": "{tabs.tab.height.medium}" + "$type": "number", + "$value": "{carbon.typography.label01.line-height}", + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + }, + "key": "{tag.typography.line-height}" }, - "name": "token-tabs-tab-height-medium", + "name": "token-tag-typography-line-height", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "height", - "medium" + "tag", + "typography", + "line-height" ] }, - "token-tabs-tab-height-large": { - "key": "{tabs.tab.height.large}", - "$type": "dimension", - "$value": "48px", - "unit": "px", + "token-tag-icon-color": { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "dimension", - "$value": "48", - "unit": "px", - "key": "{tabs.tab.height.large}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.icon.color}" }, - "name": "token-tabs-tab-height-large", + "name": "token-tag-icon-color", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "height", - "large" + "tag", + "icon", + "color" ] }, - "token-tabs-tab-padding-horizontal-medium": { - "key": "{tabs.tab.padding.horizontal.medium}", - "$type": "dimension", - "$value": "12px", - "unit": "px", + "token-tag-link-border-color-primary": { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#78a9ff", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { - "$type": "dimension", - "$value": "12", - "unit": "px", - "key": "{tabs.tab.padding.horizontal.medium}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + }, + "key": "{tag.link.border.color.primary}" }, - "name": "token-tabs-tab-padding-horizontal-medium", + "name": "token-tag-link-border-color-primary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "horizontal", - "medium" + "tag", + "link", + "border", + "color", + "primary" ] }, - "token-tabs-tab-padding-horizontal-large": { - "key": "{tabs.tab.padding.horizontal.large}", - "$type": "dimension", - "$value": "20px", - "unit": "px", + "token-tag-link-border-color-secondary": { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#a8a8a8", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, "original": { - "$type": "dimension", - "$value": "20", - "unit": "px", - "key": "{tabs.tab.padding.horizontal.large}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + }, + "key": "{tag.link.border.color.secondary}" }, - "name": "token-tabs-tab-padding-horizontal-large", + "name": "token-tag-link-border-color-secondary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "horizontal", - "large" + "tag", + "link", + "border", + "color", + "secondary" ] }, - "token-tabs-tab-padding-vertical": { - "key": "{tabs.tab.padding.vertical}", - "$type": "dimension", - "$value": "0px", - "unit": "px", + "token-tag-link-surface-color-primary-default": { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { - "$type": "dimension", - "$value": "0", - "unit": "px", - "key": "{tabs.tab.padding.vertical}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.default}" }, - "name": "token-tabs-tab-padding-vertical", + "name": "token-tag-link-surface-color-primary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "vertical" + "tag", + "link", + "surface", + "color", + "primary", + "default" ] }, - "token-tabs-tab-border-radius": { - "key": "{tabs.tab.border-radius}", - "$type": "dimension", - "$value": "5px", - "unit": "px", + "token-tag-link-surface-color-primary-hover": { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#b8d3ff", + "$modes": { + "default": "#e8e8e8", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" + }, "original": { - "$type": "dimension", - "$value": "5", - "unit": "px", - "key": "{tabs.tab.border-radius}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.hover}" }, - "name": "token-tabs-tab-border-radius", + "name": "token-tag-link-surface-color-primary-hover", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "border-radius" + "tag", + "link", + "surface", + "color", + "primary", + "hover" ] }, - "token-tabs-tab-focus-inset": { - "key": "{tabs.tab.focus-inset}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tag-link-foreground-color-primary-default": { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{tabs.tab.focus-inset}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.default}" }, - "name": "token-tabs-tab-focus-inset", + "name": "token-tag-link-foreground-color-primary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "focus-inset" + "tag", + "link", + "foreground", + "color", + "primary", + "default" ] }, - "token-tabs-tab-gutter": { - "key": "{tabs.tab.gutter}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tag-link-foreground-color-primary-hover": { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{tabs.tab.gutter}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.hover}" }, - "name": "token-tabs-tab-gutter", + "name": "token-tag-link-foreground-color-primary-hover", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "gutter" + "tag", + "link", + "foreground", + "color", + "primary", + "hover" ] }, - "token-tabs-indicator-height": { - "key": "{tabs.indicator.height}", - "$type": "dimension", - "$value": "3px", - "unit": "px", + "token-tag-link-foreground-color-primary-active": { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "3", - "unit": "px", - "key": "{tabs.indicator.height}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.active}" }, - "name": "token-tabs-indicator-height", + "name": "token-tag-link-foreground-color-primary-active", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "height" + "tag", + "link", + "foreground", + "color", + "primary", + "active" ] }, - "token-tabs-indicator-transition-function": { - "key": "{tabs.indicator.transition.function}", - "$type": "cubicBezier", - "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "token-tag-link-foreground-color-secondary-default": { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "cubicBezier", - "$value": [ - 0.5, - 1, - 0.89, - 1 - ], - "key": "{tabs.indicator.transition.function}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.foreground.color.secondary.default}" }, - "name": "token-tabs-indicator-transition-function", + "name": "token-tag-link-foreground-color-secondary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "transition", - "function" + "tag", + "link", + "foreground", + "color", + "secondary", + "default" ] }, - "token-tabs-indicator-transition-duration": { - "key": "{tabs.indicator.transition.duration}", - "$type": "duration", - "$value": "0.6s", - "unit": "s", + "token-tag-link-icon-color-primary": { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#161616", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "duration", - "$value": "0.6", - "unit": "s", - "key": "{tabs.indicator.transition.duration}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.icon.color.primary}" }, - "name": "token-tabs-indicator-transition-duration", + "name": "token-tag-link-icon-color-primary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "transition", - "duration" + "tag", + "link", + "icon", + "color", + "primary" ] }, - "token-tabs-divider-height": { - "key": "{tabs.divider.height}", - "$type": "dimension", - "$value": "1px", - "unit": "px", + "token-tag-link-icon-color-secondary": { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "dimension", - "$value": "1", - "unit": "px", - "key": "{tabs.divider.height}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.icon.color.secondary}" }, - "name": "token-tabs-divider-height", + "name": "token-tag-link-icon-color-secondary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "divider", - "height" + "tag", + "link", + "icon", + "color", + "secondary" ] }, "token-tooltip-max-width": { @@ -59414,453 +61925,1075 @@ "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", "comment": "notice: the icon color and animation are hardcoded here!", "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", - "comment": "notice: the icon color and animation are hardcoded here!", - "key": "{form.text-input.background-image.data-url-search-loading}" + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + "token-form-toggle-width": { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + "token-form-toggle-height": { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + "token-form-toggle-base-surface-color-default": { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#525252", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + "token-form-toggle-border-radius": { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + "token-form-toggle-border-width": { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + "token-form-toggle-background-image-size": { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + "token-form-toggle-background-image-position-x": { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + "token-form-toggle-background-image-data-url": { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + "token-form-toggle-background-image-data-url-disabled": { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + "token-form-toggle-transition-duration": { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + "token-form-toggle-transition-timing-function": { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + "token-form-toggle-thumb-size": { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + "token-icon-tile-border-color-overlay": { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + "token-icon-tile-border-color-logo": { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + "token-icon-tile-surface-color-overlay": { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#393939", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g90.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + "token-pagination-nav-control-height": { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + "token-pagination-nav-control-padding-horizontal": { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + "token-pagination-nav-control-focus-inset": { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + "token-pagination-nav-control-icon-spacing": { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + "token-pagination-nav-indicator-height": { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" }, - "name": "token-form-text-input-background-image-data-url-search-loading", + "name": "token-pagination-nav-indicator-height", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "text-input", - "background-image", - "data-url-search-loading" + "pagination", + "nav", + "indicator", + "height" ] }, - "token-form-toggle-width": { - "key": "{form.toggle.width}", + "token-pagination-nav-indicator-spacing": { + "key": "{pagination.nav.indicator.spacing}", "$type": "dimension", - "$value": "32px", + "$value": "6px", "unit": "px", "original": { "$type": "dimension", - "$value": "32", + "$value": "6", "unit": "px", - "key": "{form.toggle.width}" + "key": "{pagination.nav.indicator.spacing}" }, - "name": "token-form-toggle-width", + "name": "token-pagination-nav-indicator-spacing", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "width" + "pagination", + "nav", + "indicator", + "spacing" ] }, - "token-form-toggle-height": { - "key": "{form.toggle.height}", + "token-pagination-child-spacing-vertical": { + "key": "{pagination.child.spacing.vertical}", "$type": "dimension", - "$value": "16px", + "$value": "8px", "unit": "px", "original": { "$type": "dimension", - "$value": "16", + "$value": "8", "unit": "px", - "key": "{form.toggle.height}" + "key": "{pagination.child.spacing.vertical}" }, - "name": "token-form-toggle-height", + "name": "token-pagination-child-spacing-vertical", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "height" + "pagination", + "child", + "spacing", + "vertical" ] }, - "token-form-toggle-base-surface-color-default": { - "key": "{form.toggle.base.surface-color.default}", - "$type": "color", - "$value": "#525252", - "group": "components", - "comment": "the toggle has a different base surface color, compared to the other controls", + "token-pagination-child-spacing-horizontal": { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", "original": { - "$type": "color", - "$value": "{color.surface.strong}", - "group": "components", - "comment": "the toggle has a different base surface color, compared to the other controls", - "key": "{form.toggle.base.surface-color.default}" + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" }, - "name": "token-form-toggle-base-surface-color-default", + "name": "token-pagination-child-spacing-horizontal", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "base", - "surface-color", - "default" + "pagination", + "child", + "spacing", + "horizontal" ] }, - "token-form-toggle-border-radius": { - "key": "{form.toggle.border.radius}", + "token-rich-tooltip-bubble-max-width": { + "key": "{rich-tooltip.bubble.max-width}", "$type": "dimension", - "$value": "3px", + "$value": "288px", "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, "original": { "$type": "dimension", - "$value": "3", + "$value": "288", "unit": "px", - "key": "{form.toggle.border.radius}" + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" }, - "name": "token-form-toggle-border-radius", + "name": "token-rich-tooltip-bubble-max-width", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", + "rich-tooltip", + "bubble", + "max-width" + ] + }, + "token-rich-tooltip-bubble-border-color": { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#6f6f6f", + "$modes": { + "default": "#52525233", + "cds-g0": "#6f6f6f", + "cds-g10": "#6f6f6f", + "cds-g90": "#6f6f6f", + "cds-g100": "#6f6f6f" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", "border", - "radius" + "color" ] }, - "token-form-toggle-border-width": { - "key": "{form.toggle.border.width}", + "token-rich-tooltip-bubble-border-radius": { + "key": "{rich-tooltip.bubble.border.radius}", "$type": "dimension", - "$value": "1px", + "$value": "2px", "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, "original": { "$type": "dimension", - "$value": "1", + "$value": "2", "unit": "px", - "key": "{form.toggle.border.width}" + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" }, - "name": "token-form-toggle-border-width", + "name": "token-rich-tooltip-bubble-border-radius", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", + "rich-tooltip", + "bubble", "border", - "width" + "radius" ] }, - "token-form-toggle-background-image-size": { - "key": "{form.toggle.background-image.size}", + "token-rich-tooltip-bubble-arrow-size": { + "key": "{rich-tooltip.bubble.arrow.size}", "$type": "dimension", "$value": "12px", "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, "original": { "$type": "dimension", "$value": "12", "unit": "px", - "key": "{form.toggle.background-image.size}" + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" }, - "name": "token-form-toggle-background-image-size", + "name": "token-rich-tooltip-bubble-arrow-size", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", - "background-image", + "rich-tooltip", + "bubble", + "arrow", "size" ] }, - "token-form-toggle-background-image-position-x": { - "key": "{form.toggle.background-image.position-x}", + "token-rich-tooltip-toggle-gap-horizontal": { + "key": "{rich-tooltip.toggle.gap.horizontal}", "$type": "dimension", - "$value": "2px", + "$value": "8px", "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, "original": { "$type": "dimension", - "$value": "2", + "$value": "8", "unit": "px", - "key": "{form.toggle.background-image.position-x}" + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" }, - "name": "token-form-toggle-background-image-position-x", + "name": "token-rich-tooltip-toggle-gap-horizontal", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "position-x" + "gap", + "horizontal" ] }, - "token-form-toggle-background-image-data-url": { - "key": "{form.toggle.background-image.data-url}", - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", + "token-rich-tooltip-toggle-foreground-color-default": { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#c6c6c6", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", - "key": "{form.toggle.background-image.data-url}" + "$value": "{carbon.themes.g90.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" }, - "name": "token-form-toggle-background-image-data-url", + "name": "token-rich-tooltip-toggle-foreground-color-default", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "data-url" + "foreground", + "color", + "default" ] }, - "token-form-toggle-background-image-data-url-disabled": { - "key": "{form.toggle.background-image.data-url-disabled}", - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", + "token-rich-tooltip-toggle-foreground-color-hover": { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", - "key": "{form.toggle.background-image.data-url-disabled}" + "$value": "{carbon.themes.g90.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" }, - "name": "token-form-toggle-background-image-data-url-disabled", + "name": "token-rich-tooltip-toggle-foreground-color-hover", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "data-url-disabled" + "foreground", + "color", + "hover" ] }, - "token-form-toggle-transition-duration": { - "key": "{form.toggle.transition.duration}", - "$type": "duration", - "$value": "0.2s", - "unit": "s", + "token-rich-tooltip-toggle-foreground-color-active": { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#c6c6c6", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "original": { - "$type": "duration", - "$value": "0.2", - "unit": "s", - "key": "{form.toggle.transition.duration}" + "$value": "{carbon.themes.g90.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" }, - "name": "token-form-toggle-transition-duration", + "name": "token-rich-tooltip-toggle-foreground-color-active", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "transition", - "duration" + "foreground", + "color", + "active" ] }, - "token-form-toggle-transition-timing-function": { - "key": "{form.toggle.transition.timing-function}", - "$type": "cubicBezier", - "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "token-rich-tooltip-toggle-icon-size": { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, "original": { - "$type": "cubicBezier", - "$value": [ - 0.68, - -0.2, - 0.265, - 1.15 - ], - "key": "{form.toggle.transition.timing-function}" + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" }, - "name": "token-form-toggle-transition-timing-function", + "name": "token-rich-tooltip-toggle-icon-size", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "transition", - "timing-function" + "icon", + "size" ] }, - "token-form-toggle-thumb-size": { - "key": "{form.toggle.thumb-size}", + "token-tabs-tab-height-medium": { + "key": "{tabs.tab.height.medium}", "$type": "dimension", - "$value": "16px", + "$value": "36px", + "unit": "px", "original": { "$type": "dimension", - "$value": "{form.toggle.height}", - "key": "{form.toggle.thumb-size}" + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" }, - "name": "token-form-toggle-thumb-size", + "name": "token-tabs-tab-height-medium", "attributes": { - "category": "form" + "category": "tabs" }, "path": [ - "form", - "toggle", - "thumb-size" + "tabs", + "tab", + "height", + "medium" ] }, - "token-icon-tile-border-color-overlay": { - "key": "{icon-tile.border.color.overlay}", - "$type": "color", - "$value": "#8d8d8d", - "$modes": { - "default": "#8d8d8d", - "cds-g0": "#e0e0e0", - "cds-g10": "#c6c6c6", - "cds-g90": "#8d8d8d", - "cds-g100": "#6f6f6f" - }, - "original": { - "$type": "color", - "$value": "{carbon.themes.g90.borderSubtle02}", - "$modes": { - "default": "{color.border.primary}", - "cds-g0": "{carbon.themes.white.borderSubtle02}", - "cds-g10": "{carbon.themes.g10.borderSubtle02}", - "cds-g90": "{carbon.themes.g90.borderSubtle02}", - "cds-g100": "{carbon.themes.g100.borderSubtle02}" - }, - "key": "{icon-tile.border.color.overlay}" + "token-tabs-tab-height-large": { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" }, - "name": "token-icon-tile-border-color-overlay", + "name": "token-tabs-tab-height-large", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "border", - "color", - "overlay" + "tabs", + "tab", + "height", + "large" ] }, - "token-icon-tile-border-color-logo": { - "key": "{icon-tile.border.color.logo}", - "$type": "color", - "$value": "#6f6f6f", - "$modes": { - "default": "#8d8d8d", - "cds-g0": "#c6c6c6", - "cds-g10": "#e0e0e0", - "cds-g90": "#6f6f6f", - "cds-g100": "#525252" - }, + "token-tabs-tab-padding-horizontal-medium": { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", "original": { - "$type": "color", - "$value": "{carbon.themes.g90.borderSubtle01}", - "$modes": { - "default": "{color.border.primary}", - "cds-g0": "{carbon.themes.white.borderSubtle01}", - "cds-g10": "{carbon.themes.g10.borderSubtle01}", - "cds-g90": "{carbon.themes.g90.borderSubtle01}", - "cds-g100": "{carbon.themes.g100.borderSubtle01}" - }, - "key": "{icon-tile.border.color.logo}" + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" }, - "name": "token-icon-tile-border-color-logo", + "name": "token-tabs-tab-padding-horizontal-medium", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "border", - "color", - "logo" + "tabs", + "tab", + "padding", + "horizontal", + "medium" ] }, - "token-icon-tile-surface-color-overlay": { - "key": "{icon-tile.surface.color.overlay}", - "$type": "color", - "$value": "#525252", - "$modes": { - "default": "#393939", - "cds-g0": "#ffffff", - "cds-g10": "#f4f4f4", - "cds-g90": "#525252", - "cds-g100": "#393939" - }, + "token-tabs-tab-padding-horizontal-large": { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", "original": { - "$type": "color", - "$value": "{carbon.themes.g90.layer02}", - "$modes": { - "default": "{color.surface.primary}", - "cds-g0": "{carbon.themes.white.layer02}", - "cds-g10": "{carbon.themes.g10.layer02}", - "cds-g90": "{carbon.themes.g90.layer02}", - "cds-g100": "{carbon.themes.g100.layer02}" - }, - "key": "{icon-tile.surface.color.overlay}" + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" }, - "name": "token-icon-tile-surface-color-overlay", + "name": "token-tabs-tab-padding-horizontal-large", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "surface", - "color", - "overlay" + "tabs", + "tab", + "padding", + "horizontal", + "large" ] }, - "token-pagination-nav-control-height": { - "key": "{pagination.nav.control.height}", + "token-tabs-tab-padding-vertical": { + "key": "{tabs.tab.padding.vertical}", "$type": "dimension", - "$value": "36px", + "$value": "0px", "unit": "px", "original": { "$type": "dimension", - "$value": "36", + "$value": "0", "unit": "px", - "key": "{pagination.nav.control.height}" + "key": "{tabs.tab.padding.vertical}" }, - "name": "token-pagination-nav-control-height", + "name": "token-tabs-tab-padding-vertical", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "height" + "tabs", + "tab", + "padding", + "vertical" ] }, - "token-pagination-nav-control-padding-horizontal": { - "key": "{pagination.nav.control.padding.horizontal}", + "token-tabs-tab-border-radius": { + "key": "{tabs.tab.border-radius}", "$type": "dimension", - "$value": "12px", + "$value": "5px", "unit": "px", "original": { "$type": "dimension", - "$value": "12", + "$value": "5", "unit": "px", - "key": "{pagination.nav.control.padding.horizontal}" + "key": "{tabs.tab.border-radius}" }, - "name": "token-pagination-nav-control-padding-horizontal", + "name": "token-tabs-tab-border-radius", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "padding", - "horizontal" + "tabs", + "tab", + "border-radius" ] }, - "token-pagination-nav-control-focus-inset": { - "key": "{pagination.nav.control.focus-inset}", + "token-tabs-tab-focus-inset": { + "key": "{tabs.tab.focus-inset}", "$type": "dimension", - "$value": "4px", + "$value": "6px", "unit": "px", "original": { "$type": "dimension", - "$value": "4", + "$value": "6", "unit": "px", - "key": "{pagination.nav.control.focus-inset}" + "key": "{tabs.tab.focus-inset}" }, - "name": "token-pagination-nav-control-focus-inset", + "name": "token-tabs-tab-focus-inset", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", + "tabs", + "tab", "focus-inset" ] }, - "token-pagination-nav-control-icon-spacing": { - "key": "{pagination.nav.control.icon-spacing}", + "token-tabs-tab-gutter": { + "key": "{tabs.tab.gutter}", "$type": "dimension", "$value": "6px", "unit": "px", @@ -59868,253 +63001,253 @@ "$type": "dimension", "$value": "6", "unit": "px", - "key": "{pagination.nav.control.icon-spacing}" + "key": "{tabs.tab.gutter}" }, - "name": "token-pagination-nav-control-icon-spacing", + "name": "token-tabs-tab-gutter", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "icon-spacing" + "tabs", + "tab", + "gutter" ] }, - "token-pagination-nav-indicator-height": { - "key": "{pagination.nav.indicator.height}", + "token-tabs-indicator-height": { + "key": "{tabs.indicator.height}", "$type": "dimension", - "$value": "2px", + "$value": "3px", "unit": "px", "original": { "$type": "dimension", - "$value": "2", + "$value": "3", "unit": "px", - "key": "{pagination.nav.indicator.height}" + "key": "{tabs.indicator.height}" }, - "name": "token-pagination-nav-indicator-height", + "name": "token-tabs-indicator-height", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", + "tabs", "indicator", "height" ] }, - "token-pagination-nav-indicator-spacing": { - "key": "{pagination.nav.indicator.spacing}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tabs-indicator-transition-function": { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{pagination.nav.indicator.spacing}" + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" }, - "name": "token-pagination-nav-indicator-spacing", + "name": "token-tabs-indicator-transition-function", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", + "tabs", "indicator", - "spacing" + "transition", + "function" ] }, - "token-pagination-child-spacing-vertical": { - "key": "{pagination.child.spacing.vertical}", - "$type": "dimension", - "$value": "8px", - "unit": "px", + "token-tabs-indicator-transition-duration": { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", "original": { - "$type": "dimension", - "$value": "8", - "unit": "px", - "key": "{pagination.child.spacing.vertical}" + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" }, - "name": "token-pagination-child-spacing-vertical", + "name": "token-tabs-indicator-transition-duration", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "child", - "spacing", - "vertical" + "tabs", + "indicator", + "transition", + "duration" ] }, - "token-pagination-child-spacing-horizontal": { - "key": "{pagination.child.spacing.horizontal}", + "token-tabs-divider-height": { + "key": "{tabs.divider.height}", "$type": "dimension", - "$value": "20px", + "$value": "1px", "unit": "px", "original": { "$type": "dimension", - "$value": "20", + "$value": "1", "unit": "px", - "key": "{pagination.child.spacing.horizontal}" + "key": "{tabs.divider.height}" }, - "name": "token-pagination-child-spacing-horizontal", + "name": "token-tabs-divider-height", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "child", - "spacing", - "horizontal" + "tabs", + "divider", + "height" ] }, - "token-rich-tooltip-bubble-max-width": { - "key": "{rich-tooltip.bubble.max-width}", + "token-tag-max-width": { + "key": "{tag.max-width}", "$type": "dimension", - "$value": "288px", + "$value": "208px", "unit": "px", "$modes": { - "default": "280", - "cds-g0": "288", - "cds-g10": "288", - "cds-g90": "288", - "cds-g100": "288" + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" }, "original": { "$type": "dimension", - "$value": "288", + "$value": "208", "unit": "px", "$modes": { - "default": "280", - "cds-g0": "288", - "cds-g10": "288", - "cds-g90": "288", - "cds-g100": "288" + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" }, - "key": "{rich-tooltip.bubble.max-width}" + "key": "{tag.max-width}" }, - "name": "token-rich-tooltip-bubble-max-width", + "name": "token-tag-max-width", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", + "tag", "max-width" ] }, - "token-rich-tooltip-bubble-border-color": { - "key": "{rich-tooltip.bubble.border.color}", - "$value": "#6f6f6f", + "token-tag-padding-top": { + "key": "{tag.padding.top}", + "$type": "dimension", + "$value": "4px", + "unit": "px", "$modes": { - "default": "#52525233", - "cds-g0": "#6f6f6f", - "cds-g10": "#6f6f6f", - "cds-g90": "#6f6f6f", - "cds-g100": "#6f6f6f" + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, "original": { - "$value": "{color.palette.alpha-200}", + "$type": "dimension", + "$value": "4", + "unit": "px", "$modes": { - "default": "{elevation.higher.border.color}", - "cds-g0": "{color.palette.alpha-200}", - "cds-g10": "{color.palette.alpha-200}", - "cds-g90": "{color.palette.alpha-200}", - "cds-g100": "{color.palette.alpha-200}" + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, - "key": "{rich-tooltip.bubble.border.color}" + "key": "{tag.padding.top}" }, - "name": "token-rich-tooltip-bubble-border-color", + "name": "token-tag-padding-top", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "border", - "color" + "tag", + "padding", + "top" ] }, - "token-rich-tooltip-bubble-border-radius": { - "key": "{rich-tooltip.bubble.border.radius}", + "token-tag-padding-bottom": { + "key": "{tag.padding.bottom}", "$type": "dimension", - "$value": "2px", + "$value": "4px", "unit": "px", "$modes": { - "default": "0px", - "cds-g0": "2", - "cds-g10": "2", - "cds-g90": "2", - "cds-g100": "2" + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, "original": { "$type": "dimension", - "$value": "2", + "$value": "4", "unit": "px", "$modes": { - "default": "{border.radius.small}", - "cds-g0": "2", - "cds-g10": "2", - "cds-g90": "2", - "cds-g100": "2" + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, - "key": "{rich-tooltip.bubble.border.radius}" + "key": "{tag.padding.bottom}" }, - "name": "token-rich-tooltip-bubble-border-radius", + "name": "token-tag-padding-bottom", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "border", - "radius" + "tag", + "padding", + "bottom" ] }, - "token-rich-tooltip-bubble-arrow-size": { - "key": "{rich-tooltip.bubble.arrow.size}", + "token-tag-padding-right": { + "key": "{tag.padding.right}", "$type": "dimension", - "$value": "12px", + "$value": "8px", "unit": "px", "$modes": { - "default": "20", - "cds-g0": "12", - "cds-g10": "12", - "cds-g90": "12", - "cds-g100": "12" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, "original": { "$type": "dimension", - "$value": "12", + "$value": "8", "unit": "px", "$modes": { - "default": "20", - "cds-g0": "12", - "cds-g10": "12", - "cds-g90": "12", - "cds-g100": "12" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, - "key": "{rich-tooltip.bubble.arrow.size}" + "key": "{tag.padding.right}" }, - "name": "token-rich-tooltip-bubble-arrow-size", + "name": "token-tag-padding-right", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "arrow", - "size" + "tag", + "padding", + "right" ] }, - "token-rich-tooltip-toggle-gap-horizontal": { - "key": "{rich-tooltip.toggle.gap.horizontal}", + "token-tag-padding-left": { + "key": "{tag.padding.left}", "$type": "dimension", "$value": "8px", "unit": "px", "$modes": { - "default": "4", + "default": "10", "cds-g0": "8", "cds-g10": "8", "cds-g90": "8", @@ -60125,60 +63258,164 @@ "$value": "8", "unit": "px", "$modes": { - "default": "4", + "default": "10", "cds-g0": "8", "cds-g10": "8", "cds-g90": "8", "cds-g100": "8" }, - "key": "{rich-tooltip.toggle.gap.horizontal}" + "key": "{tag.padding.left}" }, - "name": "token-rich-tooltip-toggle-gap-horizontal", + "name": "token-tag-padding-left", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "gap", - "horizontal" + "tag", + "padding", + "left" ] }, - "token-rich-tooltip-toggle-foreground-color-default": { - "key": "{rich-tooltip.toggle.foreground.color.default}", - "$value": "#c6c6c6", + "token-tag-border-radius": { + "key": "{tag.border.radius}", + "$type": "dimension", + "$value": "16px", + "unit": "px", "$modes": { - "default": "#f4f4f4", - "cds-g0": "#525252", - "cds-g10": "#525252", - "cds-g90": "#c6c6c6", - "cds-g100": "#c6c6c6" + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" }, "original": { - "$value": "{carbon.themes.g90.textSecondary}", + "$type": "dimension", + "$value": "16", + "unit": "px", "$modes": { - "default": "{color.foreground.strong}", - "cds-g0": "{carbon.themes.white.textSecondary}", - "cds-g10": "{carbon.themes.g10.textSecondary}", - "cds-g90": "{carbon.themes.g90.textSecondary}", - "cds-g100": "{carbon.themes.g100.textSecondary}" + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" }, - "key": "{rich-tooltip.toggle.foreground.color.default}" + "key": "{tag.border.radius}" }, - "name": "token-rich-tooltip-toggle-foreground-color-default", + "name": "token-tag-border-radius", "attributes": { - "category": "rich-tooltip" + "category": "tag" + }, + "path": [ + "tag", + "border", + "radius" + ] + }, + "token-tag-surface-color-default": { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#393939", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{tag.surface.color.default}" + }, + "name": "token-tag-surface-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "default" + ] + }, + "token-tag-surface-color-hover": { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#636363", + "$modes": { + "default": "#474747", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" + }, + "name": "token-tag-surface-color-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "hover" + ] + }, + "token-tag-surface-color-active": { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#636363", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" + }, + "name": "token-tag-surface-color-active", + "attributes": { + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "foreground", + "tag", + "surface", "color", - "default" + "active" ] }, - "token-rich-tooltip-toggle-foreground-color-hover": { - "key": "{rich-tooltip.toggle.foreground.color.hover}", + "token-tag-foreground-color-default": { + "key": "{tag.foreground.color.default}", + "$type": "color", "$value": "#f4f4f4", "$modes": { "default": "#f4f4f4", @@ -60188,407 +63425,518 @@ "cds-g100": "#f4f4f4" }, "original": { - "$value": "{carbon.themes.g90.textPrimary}", + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", "$modes": { "default": "{color.foreground.primary}", - "cds-g0": "{carbon.themes.white.textPrimary}", - "cds-g10": "{carbon.themes.g10.textPrimary}", - "cds-g90": "{carbon.themes.g90.textPrimary}", - "cds-g100": "{carbon.themes.g100.textPrimary}" + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" }, - "key": "{rich-tooltip.toggle.foreground.color.hover}" + "key": "{tag.foreground.color.default}" }, - "name": "token-rich-tooltip-toggle-foreground-color-hover", + "name": "token-tag-foreground-color-default", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", + "tag", "foreground", "color", - "hover" + "default" ] }, - "token-rich-tooltip-toggle-foreground-color-active": { - "key": "{rich-tooltip.toggle.foreground.color.active}", - "$value": "#c6c6c6", + "token-tag-typography-font-size": { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", "$modes": { - "default": "#c6c6c6", - "cds-g0": "#525252", - "cds-g10": "#525252", - "cds-g90": "#c6c6c6", - "cds-g100": "#c6c6c6" + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" }, "original": { - "$value": "{carbon.themes.g90.textSecondary}", + "$type": "font-size", + "$value": "{carbon.typography.label01.font-size}", + "unit": "px", "$modes": { - "default": "{color.foreground.faint}", - "cds-g0": "{carbon.themes.white.textSecondary}", - "cds-g10": "{carbon.themes.g10.textSecondary}", - "cds-g90": "{carbon.themes.g90.textSecondary}", - "cds-g100": "{carbon.themes.g100.textSecondary}" + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" }, - "key": "{rich-tooltip.toggle.foreground.color.active}" + "key": "{tag.typography.font-size}" }, - "name": "token-rich-tooltip-toggle-foreground-color-active", + "name": "token-tag-typography-font-size", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "foreground", - "color", - "active" + "tag", + "typography", + "font-size" ] }, - "token-rich-tooltip-toggle-icon-size": { - "key": "{rich-tooltip.toggle.icon.size}", - "$type": "dimension", - "$value": "14px", + "token-tag-typography-letter-spacing": { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.32px", "unit": "px", "$modes": { - "default": "1", - "cds-g0": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g10": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g90": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g100": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - } + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" }, "original": { - "$type": "dimension", - "$value": "14", + "$type": "letter-spacing", + "$value": "{carbon.typography.label01.letter-spacing}", "unit": "px", "$modes": { - "default": "1", - "cds-g0": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g10": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g90": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g100": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - } + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" }, - "key": "{rich-tooltip.toggle.icon.size}" + "key": "{tag.typography.letter-spacing}" }, - "name": "token-rich-tooltip-toggle-icon-size", + "name": "token-tag-typography-letter-spacing", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "icon", - "size" + "tag", + "typography", + "letter-spacing" ] }, - "token-tabs-tab-height-medium": { - "key": "{tabs.tab.height.medium}", - "$type": "dimension", - "$value": "36px", - "unit": "px", + "token-tag-typography-line-height": { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.33333, + "$modes": { + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { - "$type": "dimension", - "$value": "36", - "unit": "px", - "key": "{tabs.tab.height.medium}" + "$type": "number", + "$value": "{carbon.typography.label01.line-height}", + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + }, + "key": "{tag.typography.line-height}" }, - "name": "token-tabs-tab-height-medium", + "name": "token-tag-typography-line-height", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "height", - "medium" + "tag", + "typography", + "line-height" ] }, - "token-tabs-tab-height-large": { - "key": "{tabs.tab.height.large}", - "$type": "dimension", - "$value": "48px", - "unit": "px", + "token-tag-icon-color": { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "dimension", - "$value": "48", - "unit": "px", - "key": "{tabs.tab.height.large}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.icon.color}" }, - "name": "token-tabs-tab-height-large", + "name": "token-tag-icon-color", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "height", - "large" + "tag", + "icon", + "color" ] }, - "token-tabs-tab-padding-horizontal-medium": { - "key": "{tabs.tab.padding.horizontal.medium}", - "$type": "dimension", - "$value": "12px", - "unit": "px", + "token-tag-link-border-color-primary": { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#4589ff", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { - "$type": "dimension", - "$value": "12", - "unit": "px", - "key": "{tabs.tab.padding.horizontal.medium}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + }, + "key": "{tag.link.border.color.primary}" }, - "name": "token-tabs-tab-padding-horizontal-medium", + "name": "token-tag-link-border-color-primary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "horizontal", - "medium" + "tag", + "link", + "border", + "color", + "primary" ] }, - "token-tabs-tab-padding-horizontal-large": { - "key": "{tabs.tab.padding.horizontal.large}", - "$type": "dimension", - "$value": "20px", - "unit": "px", + "token-tag-link-border-color-secondary": { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, "original": { - "$type": "dimension", - "$value": "20", - "unit": "px", - "key": "{tabs.tab.padding.horizontal.large}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + }, + "key": "{tag.link.border.color.secondary}" }, - "name": "token-tabs-tab-padding-horizontal-large", + "name": "token-tag-link-border-color-secondary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "horizontal", - "large" + "tag", + "link", + "border", + "color", + "secondary" ] }, - "token-tabs-tab-padding-vertical": { - "key": "{tabs.tab.padding.vertical}", - "$type": "dimension", - "$value": "0px", - "unit": "px", + "token-tag-link-surface-color-primary-default": { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#393939", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { - "$type": "dimension", - "$value": "0", - "unit": "px", - "key": "{tabs.tab.padding.vertical}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.default}" }, - "name": "token-tabs-tab-padding-vertical", + "name": "token-tag-link-surface-color-primary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "vertical" + "tag", + "link", + "surface", + "color", + "primary", + "default" ] }, - "token-tabs-tab-border-radius": { - "key": "{tabs.tab.border-radius}", - "$type": "dimension", - "$value": "5px", - "unit": "px", + "token-tag-link-surface-color-primary-hover": { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#0053ff", + "$modes": { + "default": "#474747", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" + }, "original": { - "$type": "dimension", - "$value": "5", - "unit": "px", - "key": "{tabs.tab.border-radius}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.hover}" }, - "name": "token-tabs-tab-border-radius", + "name": "token-tag-link-surface-color-primary-hover", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "border-radius" + "tag", + "link", + "surface", + "color", + "primary", + "hover" ] }, - "token-tabs-tab-focus-inset": { - "key": "{tabs.tab.focus-inset}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tag-link-foreground-color-primary-default": { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{tabs.tab.focus-inset}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.default}" }, - "name": "token-tabs-tab-focus-inset", + "name": "token-tag-link-foreground-color-primary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "focus-inset" + "tag", + "link", + "foreground", + "color", + "primary", + "default" ] }, - "token-tabs-tab-gutter": { - "key": "{tabs.tab.gutter}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tag-link-foreground-color-primary-hover": { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{tabs.tab.gutter}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.hover}" }, - "name": "token-tabs-tab-gutter", + "name": "token-tag-link-foreground-color-primary-hover", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "gutter" + "tag", + "link", + "foreground", + "color", + "primary", + "hover" ] }, - "token-tabs-indicator-height": { - "key": "{tabs.indicator.height}", - "$type": "dimension", - "$value": "3px", - "unit": "px", + "token-tag-link-foreground-color-primary-active": { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "3", - "unit": "px", - "key": "{tabs.indicator.height}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.active}" }, - "name": "token-tabs-indicator-height", + "name": "token-tag-link-foreground-color-primary-active", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "height" + "tag", + "link", + "foreground", + "color", + "primary", + "active" ] }, - "token-tabs-indicator-transition-function": { - "key": "{tabs.indicator.transition.function}", - "$type": "cubicBezier", - "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "token-tag-link-foreground-color-secondary-default": { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "cubicBezier", - "$value": [ - 0.5, - 1, - 0.89, - 1 - ], - "key": "{tabs.indicator.transition.function}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.foreground.color.secondary.default}" }, - "name": "token-tabs-indicator-transition-function", + "name": "token-tag-link-foreground-color-secondary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "transition", - "function" + "tag", + "link", + "foreground", + "color", + "secondary", + "default" ] }, - "token-tabs-indicator-transition-duration": { - "key": "{tabs.indicator.transition.duration}", - "$type": "duration", - "$value": "0.6s", - "unit": "s", + "token-tag-link-icon-color-primary": { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "duration", - "$value": "0.6", - "unit": "s", - "key": "{tabs.indicator.transition.duration}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.icon.color.primary}" }, - "name": "token-tabs-indicator-transition-duration", + "name": "token-tag-link-icon-color-primary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "transition", - "duration" + "tag", + "link", + "icon", + "color", + "primary" ] }, - "token-tabs-divider-height": { - "key": "{tabs.divider.height}", - "$type": "dimension", - "$value": "1px", - "unit": "px", + "token-tag-link-icon-color-secondary": { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "dimension", - "$value": "1", - "unit": "px", - "key": "{tabs.divider.height}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.icon.color.secondary}" }, - "name": "token-tabs-divider-height", + "name": "token-tag-link-icon-color-secondary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "divider", - "height" + "tag", + "link", + "icon", + "color", + "secondary" ] }, "token-tooltip-max-width": { @@ -75022,453 +78370,1075 @@ "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", "comment": "notice: the icon color and animation are hardcoded here!", "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", - "comment": "notice: the icon color and animation are hardcoded here!", - "key": "{form.text-input.background-image.data-url-search-loading}" + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")", + "comment": "notice: the icon color and animation are hardcoded here!", + "key": "{form.text-input.background-image.data-url-search-loading}" + }, + "name": "token-form-text-input-background-image-data-url-search-loading", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "text-input", + "background-image", + "data-url-search-loading" + ] + }, + "token-form-toggle-width": { + "key": "{form.toggle.width}", + "$type": "dimension", + "$value": "32px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "32", + "unit": "px", + "key": "{form.toggle.width}" + }, + "name": "token-form-toggle-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "width" + ] + }, + "token-form-toggle-height": { + "key": "{form.toggle.height}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "key": "{form.toggle.height}" + }, + "name": "token-form-toggle-height", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "height" + ] + }, + "token-form-toggle-base-surface-color-default": { + "key": "{form.toggle.base.surface-color.default}", + "$type": "color", + "$value": "#393939", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "original": { + "$type": "color", + "$value": "{color.surface.strong}", + "group": "components", + "comment": "the toggle has a different base surface color, compared to the other controls", + "key": "{form.toggle.base.surface-color.default}" + }, + "name": "token-form-toggle-base-surface-color-default", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "base", + "surface-color", + "default" + ] + }, + "token-form-toggle-border-radius": { + "key": "{form.toggle.border.radius}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "key": "{form.toggle.border.radius}" + }, + "name": "token-form-toggle-border-radius", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "radius" + ] + }, + "token-form-toggle-border-width": { + "key": "{form.toggle.border.width}", + "$type": "dimension", + "$value": "1px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "1", + "unit": "px", + "key": "{form.toggle.border.width}" + }, + "name": "token-form-toggle-border-width", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "border", + "width" + ] + }, + "token-form-toggle-background-image-size": { + "key": "{form.toggle.background-image.size}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{form.toggle.background-image.size}" + }, + "name": "token-form-toggle-background-image-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "size" + ] + }, + "token-form-toggle-background-image-position-x": { + "key": "{form.toggle.background-image.position-x}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{form.toggle.background-image.position-x}" + }, + "name": "token-form-toggle-background-image-position-x", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "position-x" + ] + }, + "token-form-toggle-background-image-data-url": { + "key": "{form.toggle.background-image.data-url}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url}" + }, + "name": "token-form-toggle-background-image-data-url", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url" + ] + }, + "token-form-toggle-background-image-data-url-disabled": { + "key": "{form.toggle.background-image.data-url-disabled}", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "original": { + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", + "comment": "notice: the 'tick' color is hardcoded here!", + "key": "{form.toggle.background-image.data-url-disabled}" + }, + "name": "token-form-toggle-background-image-data-url-disabled", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "background-image", + "data-url-disabled" + ] + }, + "token-form-toggle-transition-duration": { + "key": "{form.toggle.transition.duration}", + "$type": "duration", + "$value": "0.2s", + "unit": "s", + "original": { + "$type": "duration", + "$value": "0.2", + "unit": "s", + "key": "{form.toggle.transition.duration}" + }, + "name": "token-form-toggle-transition-duration", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "duration" + ] + }, + "token-form-toggle-transition-timing-function": { + "key": "{form.toggle.transition.timing-function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "original": { + "$type": "cubicBezier", + "$value": [ + 0.68, + -0.2, + 0.265, + 1.15 + ], + "key": "{form.toggle.transition.timing-function}" + }, + "name": "token-form-toggle-transition-timing-function", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "transition", + "timing-function" + ] + }, + "token-form-toggle-thumb-size": { + "key": "{form.toggle.thumb-size}", + "$type": "dimension", + "$value": "16px", + "original": { + "$type": "dimension", + "$value": "{form.toggle.height}", + "key": "{form.toggle.thumb-size}" + }, + "name": "token-form-toggle-thumb-size", + "attributes": { + "category": "form" + }, + "path": [ + "form", + "toggle", + "thumb-size" + ] + }, + "token-icon-tile-border-color-overlay": { + "key": "{icon-tile.border.color.overlay}", + "$type": "color", + "$value": "#6f6f6f", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#e0e0e0", + "cds-g10": "#c6c6c6", + "cds-g90": "#8d8d8d", + "cds-g100": "#6f6f6f" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderSubtle02}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle02}", + "cds-g10": "{carbon.themes.g10.borderSubtle02}", + "cds-g90": "{carbon.themes.g90.borderSubtle02}", + "cds-g100": "{carbon.themes.g100.borderSubtle02}" + }, + "key": "{icon-tile.border.color.overlay}" + }, + "name": "token-icon-tile-border-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "overlay" + ] + }, + "token-icon-tile-border-color-logo": { + "key": "{icon-tile.border.color.logo}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#c6c6c6", + "cds-g10": "#e0e0e0", + "cds-g90": "#6f6f6f", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.borderSubtle01}", + "$modes": { + "default": "{color.border.primary}", + "cds-g0": "{carbon.themes.white.borderSubtle01}", + "cds-g10": "{carbon.themes.g10.borderSubtle01}", + "cds-g90": "{carbon.themes.g90.borderSubtle01}", + "cds-g100": "{carbon.themes.g100.borderSubtle01}" + }, + "key": "{icon-tile.border.color.logo}" + }, + "name": "token-icon-tile-border-color-logo", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "border", + "color", + "logo" + ] + }, + "token-icon-tile-surface-color-overlay": { + "key": "{icon-tile.surface.color.overlay}", + "$type": "color", + "$value": "#393939", + "$modes": { + "default": "#262626", + "cds-g0": "#ffffff", + "cds-g10": "#f4f4f4", + "cds-g90": "#525252", + "cds-g100": "#393939" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.g100.layer02}", + "$modes": { + "default": "{color.surface.primary}", + "cds-g0": "{carbon.themes.white.layer02}", + "cds-g10": "{carbon.themes.g10.layer02}", + "cds-g90": "{carbon.themes.g90.layer02}", + "cds-g100": "{carbon.themes.g100.layer02}" + }, + "key": "{icon-tile.surface.color.overlay}" + }, + "name": "token-icon-tile-surface-color-overlay", + "attributes": { + "category": "icon-tile" + }, + "path": [ + "icon-tile", + "surface", + "color", + "overlay" + ] + }, + "token-pagination-nav-control-height": { + "key": "{pagination.nav.control.height}", + "$type": "dimension", + "$value": "36px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "36", + "unit": "px", + "key": "{pagination.nav.control.height}" + }, + "name": "token-pagination-nav-control-height", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "height" + ] + }, + "token-pagination-nav-control-padding-horizontal": { + "key": "{pagination.nav.control.padding.horizontal}", + "$type": "dimension", + "$value": "12px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{pagination.nav.control.padding.horizontal}" + }, + "name": "token-pagination-nav-control-padding-horizontal", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "padding", + "horizontal" + ] + }, + "token-pagination-nav-control-focus-inset": { + "key": "{pagination.nav.control.focus-inset}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "key": "{pagination.nav.control.focus-inset}" + }, + "name": "token-pagination-nav-control-focus-inset", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "focus-inset" + ] + }, + "token-pagination-nav-control-icon-spacing": { + "key": "{pagination.nav.control.icon-spacing}", + "$type": "dimension", + "$value": "6px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "6", + "unit": "px", + "key": "{pagination.nav.control.icon-spacing}" + }, + "name": "token-pagination-nav-control-icon-spacing", + "attributes": { + "category": "pagination" + }, + "path": [ + "pagination", + "nav", + "control", + "icon-spacing" + ] + }, + "token-pagination-nav-indicator-height": { + "key": "{pagination.nav.indicator.height}", + "$type": "dimension", + "$value": "2px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "2", + "unit": "px", + "key": "{pagination.nav.indicator.height}" }, - "name": "token-form-text-input-background-image-data-url-search-loading", + "name": "token-pagination-nav-indicator-height", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "text-input", - "background-image", - "data-url-search-loading" + "pagination", + "nav", + "indicator", + "height" ] }, - "token-form-toggle-width": { - "key": "{form.toggle.width}", + "token-pagination-nav-indicator-spacing": { + "key": "{pagination.nav.indicator.spacing}", "$type": "dimension", - "$value": "32px", + "$value": "6px", "unit": "px", "original": { "$type": "dimension", - "$value": "32", + "$value": "6", "unit": "px", - "key": "{form.toggle.width}" + "key": "{pagination.nav.indicator.spacing}" }, - "name": "token-form-toggle-width", + "name": "token-pagination-nav-indicator-spacing", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "width" + "pagination", + "nav", + "indicator", + "spacing" ] }, - "token-form-toggle-height": { - "key": "{form.toggle.height}", + "token-pagination-child-spacing-vertical": { + "key": "{pagination.child.spacing.vertical}", "$type": "dimension", - "$value": "16px", + "$value": "8px", "unit": "px", "original": { "$type": "dimension", - "$value": "16", + "$value": "8", "unit": "px", - "key": "{form.toggle.height}" + "key": "{pagination.child.spacing.vertical}" }, - "name": "token-form-toggle-height", + "name": "token-pagination-child-spacing-vertical", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "height" + "pagination", + "child", + "spacing", + "vertical" ] }, - "token-form-toggle-base-surface-color-default": { - "key": "{form.toggle.base.surface-color.default}", - "$type": "color", - "$value": "#393939", - "group": "components", - "comment": "the toggle has a different base surface color, compared to the other controls", + "token-pagination-child-spacing-horizontal": { + "key": "{pagination.child.spacing.horizontal}", + "$type": "dimension", + "$value": "20px", + "unit": "px", "original": { - "$type": "color", - "$value": "{color.surface.strong}", - "group": "components", - "comment": "the toggle has a different base surface color, compared to the other controls", - "key": "{form.toggle.base.surface-color.default}" + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{pagination.child.spacing.horizontal}" }, - "name": "token-form-toggle-base-surface-color-default", + "name": "token-pagination-child-spacing-horizontal", "attributes": { - "category": "form" + "category": "pagination" }, "path": [ - "form", - "toggle", - "base", - "surface-color", - "default" + "pagination", + "child", + "spacing", + "horizontal" ] }, - "token-form-toggle-border-radius": { - "key": "{form.toggle.border.radius}", + "token-rich-tooltip-bubble-max-width": { + "key": "{rich-tooltip.bubble.max-width}", "$type": "dimension", - "$value": "3px", + "$value": "288px", "unit": "px", + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, "original": { "$type": "dimension", - "$value": "3", + "$value": "288", "unit": "px", - "key": "{form.toggle.border.radius}" + "$modes": { + "default": "280", + "cds-g0": "288", + "cds-g10": "288", + "cds-g90": "288", + "cds-g100": "288" + }, + "key": "{rich-tooltip.bubble.max-width}" }, - "name": "token-form-toggle-border-radius", + "name": "token-rich-tooltip-bubble-max-width", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", + "rich-tooltip", + "bubble", + "max-width" + ] + }, + "token-rich-tooltip-bubble-border-color": { + "key": "{rich-tooltip.bubble.border.color}", + "$value": "#525252", + "$modes": { + "default": "#52525233", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$value": "{color.palette.alpha-200}", + "$modes": { + "default": "{elevation.higher.border.color}", + "cds-g0": "{color.palette.alpha-200}", + "cds-g10": "{color.palette.alpha-200}", + "cds-g90": "{color.palette.alpha-200}", + "cds-g100": "{color.palette.alpha-200}" + }, + "key": "{rich-tooltip.bubble.border.color}" + }, + "name": "token-rich-tooltip-bubble-border-color", + "attributes": { + "category": "rich-tooltip" + }, + "path": [ + "rich-tooltip", + "bubble", "border", - "radius" + "color" ] }, - "token-form-toggle-border-width": { - "key": "{form.toggle.border.width}", + "token-rich-tooltip-bubble-border-radius": { + "key": "{rich-tooltip.bubble.border.radius}", "$type": "dimension", - "$value": "1px", + "$value": "2px", "unit": "px", + "$modes": { + "default": "0px", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, "original": { "$type": "dimension", - "$value": "1", + "$value": "2", "unit": "px", - "key": "{form.toggle.border.width}" + "$modes": { + "default": "{border.radius.small}", + "cds-g0": "2", + "cds-g10": "2", + "cds-g90": "2", + "cds-g100": "2" + }, + "key": "{rich-tooltip.bubble.border.radius}" }, - "name": "token-form-toggle-border-width", + "name": "token-rich-tooltip-bubble-border-radius", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", + "rich-tooltip", + "bubble", "border", - "width" + "radius" ] }, - "token-form-toggle-background-image-size": { - "key": "{form.toggle.background-image.size}", + "token-rich-tooltip-bubble-arrow-size": { + "key": "{rich-tooltip.bubble.arrow.size}", "$type": "dimension", "$value": "12px", "unit": "px", + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, "original": { "$type": "dimension", "$value": "12", "unit": "px", - "key": "{form.toggle.background-image.size}" + "$modes": { + "default": "20", + "cds-g0": "12", + "cds-g10": "12", + "cds-g90": "12", + "cds-g100": "12" + }, + "key": "{rich-tooltip.bubble.arrow.size}" }, - "name": "token-form-toggle-background-image-size", + "name": "token-rich-tooltip-bubble-arrow-size", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", - "toggle", - "background-image", + "rich-tooltip", + "bubble", + "arrow", "size" ] }, - "token-form-toggle-background-image-position-x": { - "key": "{form.toggle.background-image.position-x}", + "token-rich-tooltip-toggle-gap-horizontal": { + "key": "{rich-tooltip.toggle.gap.horizontal}", "$type": "dimension", - "$value": "2px", + "$value": "8px", "unit": "px", + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, "original": { "$type": "dimension", - "$value": "2", + "$value": "8", "unit": "px", - "key": "{form.toggle.background-image.position-x}" + "$modes": { + "default": "4", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{rich-tooltip.toggle.gap.horizontal}" }, - "name": "token-form-toggle-background-image-position-x", + "name": "token-rich-tooltip-toggle-gap-horizontal", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "position-x" + "gap", + "horizontal" ] }, - "token-form-toggle-background-image-data-url": { - "key": "{form.toggle.background-image.data-url}", - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", + "token-rich-tooltip-toggle-foreground-color-default": { + "key": "{rich-tooltip.toggle.foreground.color.default}", + "$value": "#c6c6c6", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", - "key": "{form.toggle.background-image.data-url}" + "$value": "{carbon.themes.g100.textSecondary}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.default}" }, - "name": "token-form-toggle-background-image-data-url", + "name": "token-rich-tooltip-toggle-foreground-color-default", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "data-url" + "foreground", + "color", + "default" ] }, - "token-form-toggle-background-image-data-url-disabled": { - "key": "{form.toggle.background-image.data-url-disabled}", - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", + "token-rich-tooltip-toggle-foreground-color-hover": { + "key": "{rich-tooltip.toggle.foreground.color.hover}", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")", - "comment": "notice: the 'tick' color is hardcoded here!", - "key": "{form.toggle.background-image.data-url-disabled}" + "$value": "{carbon.themes.g100.textPrimary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.white.textPrimary}", + "cds-g10": "{carbon.themes.g10.textPrimary}", + "cds-g90": "{carbon.themes.g90.textPrimary}", + "cds-g100": "{carbon.themes.g100.textPrimary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.hover}" }, - "name": "token-form-toggle-background-image-data-url-disabled", + "name": "token-rich-tooltip-toggle-foreground-color-hover", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "background-image", - "data-url-disabled" + "foreground", + "color", + "hover" ] }, - "token-form-toggle-transition-duration": { - "key": "{form.toggle.transition.duration}", - "$type": "duration", - "$value": "0.2s", - "unit": "s", + "token-rich-tooltip-toggle-foreground-color-active": { + "key": "{rich-tooltip.toggle.foreground.color.active}", + "$value": "#c6c6c6", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#525252", + "cds-g10": "#525252", + "cds-g90": "#c6c6c6", + "cds-g100": "#c6c6c6" + }, "original": { - "$type": "duration", - "$value": "0.2", - "unit": "s", - "key": "{form.toggle.transition.duration}" + "$value": "{carbon.themes.g100.textSecondary}", + "$modes": { + "default": "{color.foreground.faint}", + "cds-g0": "{carbon.themes.white.textSecondary}", + "cds-g10": "{carbon.themes.g10.textSecondary}", + "cds-g90": "{carbon.themes.g90.textSecondary}", + "cds-g100": "{carbon.themes.g100.textSecondary}" + }, + "key": "{rich-tooltip.toggle.foreground.color.active}" }, - "name": "token-form-toggle-transition-duration", + "name": "token-rich-tooltip-toggle-foreground-color-active", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "transition", - "duration" + "foreground", + "color", + "active" ] }, - "token-form-toggle-transition-timing-function": { - "key": "{form.toggle.transition.timing-function}", - "$type": "cubicBezier", - "$value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)", + "token-rich-tooltip-toggle-icon-size": { + "key": "{rich-tooltip.toggle.icon.size}", + "$type": "dimension", + "$value": "14px", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, "original": { - "$type": "cubicBezier", - "$value": [ - 0.68, - -0.2, - 0.265, - 1.15 - ], - "key": "{form.toggle.transition.timing-function}" + "$type": "dimension", + "$value": "14", + "unit": "px", + "$modes": { + "default": "1", + "cds-g0": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g10": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g90": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + }, + "cds-g100": { + "$value": "14", + "unit": "px", + "filePath": "src/products/shared/rich-tooltip.json", + "isSource": true, + "$type": "dimension" + } + }, + "key": "{rich-tooltip.toggle.icon.size}" }, - "name": "token-form-toggle-transition-timing-function", + "name": "token-rich-tooltip-toggle-icon-size", "attributes": { - "category": "form" + "category": "rich-tooltip" }, "path": [ - "form", + "rich-tooltip", "toggle", - "transition", - "timing-function" + "icon", + "size" ] }, - "token-form-toggle-thumb-size": { - "key": "{form.toggle.thumb-size}", + "token-tabs-tab-height-medium": { + "key": "{tabs.tab.height.medium}", "$type": "dimension", - "$value": "16px", + "$value": "36px", + "unit": "px", "original": { "$type": "dimension", - "$value": "{form.toggle.height}", - "key": "{form.toggle.thumb-size}" + "$value": "36", + "unit": "px", + "key": "{tabs.tab.height.medium}" }, - "name": "token-form-toggle-thumb-size", + "name": "token-tabs-tab-height-medium", "attributes": { - "category": "form" + "category": "tabs" }, "path": [ - "form", - "toggle", - "thumb-size" + "tabs", + "tab", + "height", + "medium" ] }, - "token-icon-tile-border-color-overlay": { - "key": "{icon-tile.border.color.overlay}", - "$type": "color", - "$value": "#6f6f6f", - "$modes": { - "default": "#6f6f6f", - "cds-g0": "#e0e0e0", - "cds-g10": "#c6c6c6", - "cds-g90": "#8d8d8d", - "cds-g100": "#6f6f6f" - }, - "original": { - "$type": "color", - "$value": "{carbon.themes.g100.borderSubtle02}", - "$modes": { - "default": "{color.border.primary}", - "cds-g0": "{carbon.themes.white.borderSubtle02}", - "cds-g10": "{carbon.themes.g10.borderSubtle02}", - "cds-g90": "{carbon.themes.g90.borderSubtle02}", - "cds-g100": "{carbon.themes.g100.borderSubtle02}" - }, - "key": "{icon-tile.border.color.overlay}" + "token-tabs-tab-height-large": { + "key": "{tabs.tab.height.large}", + "$type": "dimension", + "$value": "48px", + "unit": "px", + "original": { + "$type": "dimension", + "$value": "48", + "unit": "px", + "key": "{tabs.tab.height.large}" }, - "name": "token-icon-tile-border-color-overlay", + "name": "token-tabs-tab-height-large", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "border", - "color", - "overlay" + "tabs", + "tab", + "height", + "large" ] }, - "token-icon-tile-border-color-logo": { - "key": "{icon-tile.border.color.logo}", - "$type": "color", - "$value": "#525252", - "$modes": { - "default": "#6f6f6f", - "cds-g0": "#c6c6c6", - "cds-g10": "#e0e0e0", - "cds-g90": "#6f6f6f", - "cds-g100": "#525252" - }, + "token-tabs-tab-padding-horizontal-medium": { + "key": "{tabs.tab.padding.horizontal.medium}", + "$type": "dimension", + "$value": "12px", + "unit": "px", "original": { - "$type": "color", - "$value": "{carbon.themes.g100.borderSubtle01}", - "$modes": { - "default": "{color.border.primary}", - "cds-g0": "{carbon.themes.white.borderSubtle01}", - "cds-g10": "{carbon.themes.g10.borderSubtle01}", - "cds-g90": "{carbon.themes.g90.borderSubtle01}", - "cds-g100": "{carbon.themes.g100.borderSubtle01}" - }, - "key": "{icon-tile.border.color.logo}" + "$type": "dimension", + "$value": "12", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.medium}" }, - "name": "token-icon-tile-border-color-logo", + "name": "token-tabs-tab-padding-horizontal-medium", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "border", - "color", - "logo" + "tabs", + "tab", + "padding", + "horizontal", + "medium" ] }, - "token-icon-tile-surface-color-overlay": { - "key": "{icon-tile.surface.color.overlay}", - "$type": "color", - "$value": "#393939", - "$modes": { - "default": "#262626", - "cds-g0": "#ffffff", - "cds-g10": "#f4f4f4", - "cds-g90": "#525252", - "cds-g100": "#393939" - }, + "token-tabs-tab-padding-horizontal-large": { + "key": "{tabs.tab.padding.horizontal.large}", + "$type": "dimension", + "$value": "20px", + "unit": "px", "original": { - "$type": "color", - "$value": "{carbon.themes.g100.layer02}", - "$modes": { - "default": "{color.surface.primary}", - "cds-g0": "{carbon.themes.white.layer02}", - "cds-g10": "{carbon.themes.g10.layer02}", - "cds-g90": "{carbon.themes.g90.layer02}", - "cds-g100": "{carbon.themes.g100.layer02}" - }, - "key": "{icon-tile.surface.color.overlay}" + "$type": "dimension", + "$value": "20", + "unit": "px", + "key": "{tabs.tab.padding.horizontal.large}" }, - "name": "token-icon-tile-surface-color-overlay", + "name": "token-tabs-tab-padding-horizontal-large", "attributes": { - "category": "icon-tile" + "category": "tabs" }, "path": [ - "icon-tile", - "surface", - "color", - "overlay" + "tabs", + "tab", + "padding", + "horizontal", + "large" ] }, - "token-pagination-nav-control-height": { - "key": "{pagination.nav.control.height}", + "token-tabs-tab-padding-vertical": { + "key": "{tabs.tab.padding.vertical}", "$type": "dimension", - "$value": "36px", + "$value": "0px", "unit": "px", "original": { "$type": "dimension", - "$value": "36", + "$value": "0", "unit": "px", - "key": "{pagination.nav.control.height}" + "key": "{tabs.tab.padding.vertical}" }, - "name": "token-pagination-nav-control-height", + "name": "token-tabs-tab-padding-vertical", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "height" + "tabs", + "tab", + "padding", + "vertical" ] }, - "token-pagination-nav-control-padding-horizontal": { - "key": "{pagination.nav.control.padding.horizontal}", + "token-tabs-tab-border-radius": { + "key": "{tabs.tab.border-radius}", "$type": "dimension", - "$value": "12px", + "$value": "5px", "unit": "px", "original": { "$type": "dimension", - "$value": "12", + "$value": "5", "unit": "px", - "key": "{pagination.nav.control.padding.horizontal}" + "key": "{tabs.tab.border-radius}" }, - "name": "token-pagination-nav-control-padding-horizontal", + "name": "token-tabs-tab-border-radius", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "padding", - "horizontal" + "tabs", + "tab", + "border-radius" ] }, - "token-pagination-nav-control-focus-inset": { - "key": "{pagination.nav.control.focus-inset}", + "token-tabs-tab-focus-inset": { + "key": "{tabs.tab.focus-inset}", "$type": "dimension", - "$value": "4px", + "$value": "6px", "unit": "px", "original": { "$type": "dimension", - "$value": "4", + "$value": "6", "unit": "px", - "key": "{pagination.nav.control.focus-inset}" + "key": "{tabs.tab.focus-inset}" }, - "name": "token-pagination-nav-control-focus-inset", + "name": "token-tabs-tab-focus-inset", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", + "tabs", + "tab", "focus-inset" ] }, - "token-pagination-nav-control-icon-spacing": { - "key": "{pagination.nav.control.icon-spacing}", + "token-tabs-tab-gutter": { + "key": "{tabs.tab.gutter}", "$type": "dimension", "$value": "6px", "unit": "px", @@ -75476,253 +79446,253 @@ "$type": "dimension", "$value": "6", "unit": "px", - "key": "{pagination.nav.control.icon-spacing}" + "key": "{tabs.tab.gutter}" }, - "name": "token-pagination-nav-control-icon-spacing", + "name": "token-tabs-tab-gutter", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", - "control", - "icon-spacing" + "tabs", + "tab", + "gutter" ] }, - "token-pagination-nav-indicator-height": { - "key": "{pagination.nav.indicator.height}", + "token-tabs-indicator-height": { + "key": "{tabs.indicator.height}", "$type": "dimension", - "$value": "2px", + "$value": "3px", "unit": "px", "original": { "$type": "dimension", - "$value": "2", + "$value": "3", "unit": "px", - "key": "{pagination.nav.indicator.height}" + "key": "{tabs.indicator.height}" }, - "name": "token-pagination-nav-indicator-height", + "name": "token-tabs-indicator-height", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", + "tabs", "indicator", "height" ] }, - "token-pagination-nav-indicator-spacing": { - "key": "{pagination.nav.indicator.spacing}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tabs-indicator-transition-function": { + "key": "{tabs.indicator.transition.function}", + "$type": "cubicBezier", + "$value": "cubic-bezier(0.5, 1, 0.89, 1)", "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{pagination.nav.indicator.spacing}" + "$type": "cubicBezier", + "$value": [ + 0.5, + 1, + 0.89, + 1 + ], + "key": "{tabs.indicator.transition.function}" }, - "name": "token-pagination-nav-indicator-spacing", + "name": "token-tabs-indicator-transition-function", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "nav", + "tabs", "indicator", - "spacing" + "transition", + "function" ] }, - "token-pagination-child-spacing-vertical": { - "key": "{pagination.child.spacing.vertical}", - "$type": "dimension", - "$value": "8px", - "unit": "px", + "token-tabs-indicator-transition-duration": { + "key": "{tabs.indicator.transition.duration}", + "$type": "duration", + "$value": "0.6s", + "unit": "s", "original": { - "$type": "dimension", - "$value": "8", - "unit": "px", - "key": "{pagination.child.spacing.vertical}" + "$type": "duration", + "$value": "0.6", + "unit": "s", + "key": "{tabs.indicator.transition.duration}" }, - "name": "token-pagination-child-spacing-vertical", + "name": "token-tabs-indicator-transition-duration", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "child", - "spacing", - "vertical" + "tabs", + "indicator", + "transition", + "duration" ] }, - "token-pagination-child-spacing-horizontal": { - "key": "{pagination.child.spacing.horizontal}", + "token-tabs-divider-height": { + "key": "{tabs.divider.height}", "$type": "dimension", - "$value": "20px", + "$value": "1px", "unit": "px", "original": { "$type": "dimension", - "$value": "20", + "$value": "1", "unit": "px", - "key": "{pagination.child.spacing.horizontal}" + "key": "{tabs.divider.height}" }, - "name": "token-pagination-child-spacing-horizontal", + "name": "token-tabs-divider-height", "attributes": { - "category": "pagination" + "category": "tabs" }, "path": [ - "pagination", - "child", - "spacing", - "horizontal" + "tabs", + "divider", + "height" ] }, - "token-rich-tooltip-bubble-max-width": { - "key": "{rich-tooltip.bubble.max-width}", + "token-tag-max-width": { + "key": "{tag.max-width}", "$type": "dimension", - "$value": "288px", + "$value": "208px", "unit": "px", "$modes": { - "default": "280", - "cds-g0": "288", - "cds-g10": "288", - "cds-g90": "288", - "cds-g100": "288" + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" }, "original": { "$type": "dimension", - "$value": "288", + "$value": "208", "unit": "px", "$modes": { - "default": "280", - "cds-g0": "288", - "cds-g10": "288", - "cds-g90": "288", - "cds-g100": "288" + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" }, - "key": "{rich-tooltip.bubble.max-width}" + "key": "{tag.max-width}" }, - "name": "token-rich-tooltip-bubble-max-width", + "name": "token-tag-max-width", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", + "tag", "max-width" ] }, - "token-rich-tooltip-bubble-border-color": { - "key": "{rich-tooltip.bubble.border.color}", - "$value": "#525252", + "token-tag-padding-top": { + "key": "{tag.padding.top}", + "$type": "dimension", + "$value": "4px", + "unit": "px", "$modes": { - "default": "#52525233", - "cds-g0": "#525252", - "cds-g10": "#525252", - "cds-g90": "#525252", - "cds-g100": "#525252" + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, "original": { - "$value": "{color.palette.alpha-200}", + "$type": "dimension", + "$value": "4", + "unit": "px", "$modes": { - "default": "{elevation.higher.border.color}", - "cds-g0": "{color.palette.alpha-200}", - "cds-g10": "{color.palette.alpha-200}", - "cds-g90": "{color.palette.alpha-200}", - "cds-g100": "{color.palette.alpha-200}" + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, - "key": "{rich-tooltip.bubble.border.color}" + "key": "{tag.padding.top}" }, - "name": "token-rich-tooltip-bubble-border-color", + "name": "token-tag-padding-top", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "border", - "color" + "tag", + "padding", + "top" ] }, - "token-rich-tooltip-bubble-border-radius": { - "key": "{rich-tooltip.bubble.border.radius}", + "token-tag-padding-bottom": { + "key": "{tag.padding.bottom}", "$type": "dimension", - "$value": "2px", + "$value": "4px", "unit": "px", "$modes": { - "default": "0px", - "cds-g0": "2", - "cds-g10": "2", - "cds-g90": "2", - "cds-g100": "2" + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, "original": { "$type": "dimension", - "$value": "2", + "$value": "4", "unit": "px", "$modes": { - "default": "{border.radius.small}", - "cds-g0": "2", - "cds-g10": "2", - "cds-g90": "2", - "cds-g100": "2" + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" }, - "key": "{rich-tooltip.bubble.border.radius}" + "key": "{tag.padding.bottom}" }, - "name": "token-rich-tooltip-bubble-border-radius", + "name": "token-tag-padding-bottom", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "border", - "radius" + "tag", + "padding", + "bottom" ] }, - "token-rich-tooltip-bubble-arrow-size": { - "key": "{rich-tooltip.bubble.arrow.size}", + "token-tag-padding-right": { + "key": "{tag.padding.right}", "$type": "dimension", - "$value": "12px", + "$value": "8px", "unit": "px", "$modes": { - "default": "20", - "cds-g0": "12", - "cds-g10": "12", - "cds-g90": "12", - "cds-g100": "12" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, "original": { "$type": "dimension", - "$value": "12", + "$value": "8", "unit": "px", "$modes": { - "default": "20", - "cds-g0": "12", - "cds-g10": "12", - "cds-g90": "12", - "cds-g100": "12" + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" }, - "key": "{rich-tooltip.bubble.arrow.size}" + "key": "{tag.padding.right}" }, - "name": "token-rich-tooltip-bubble-arrow-size", + "name": "token-tag-padding-right", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "bubble", - "arrow", - "size" + "tag", + "padding", + "right" ] }, - "token-rich-tooltip-toggle-gap-horizontal": { - "key": "{rich-tooltip.toggle.gap.horizontal}", + "token-tag-padding-left": { + "key": "{tag.padding.left}", "$type": "dimension", "$value": "8px", "unit": "px", "$modes": { - "default": "4", + "default": "10", "cds-g0": "8", "cds-g10": "8", "cds-g90": "8", @@ -75733,60 +79703,164 @@ "$value": "8", "unit": "px", "$modes": { - "default": "4", + "default": "10", "cds-g0": "8", "cds-g10": "8", "cds-g90": "8", "cds-g100": "8" }, - "key": "{rich-tooltip.toggle.gap.horizontal}" + "key": "{tag.padding.left}" }, - "name": "token-rich-tooltip-toggle-gap-horizontal", + "name": "token-tag-padding-left", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "gap", - "horizontal" + "tag", + "padding", + "left" ] }, - "token-rich-tooltip-toggle-foreground-color-default": { - "key": "{rich-tooltip.toggle.foreground.color.default}", - "$value": "#c6c6c6", + "token-tag-border-radius": { + "key": "{tag.border.radius}", + "$type": "dimension", + "$value": "16px", + "unit": "px", "$modes": { - "default": "#f4f4f4", - "cds-g0": "#525252", - "cds-g10": "#525252", - "cds-g90": "#c6c6c6", - "cds-g100": "#c6c6c6" + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" }, "original": { - "$value": "{carbon.themes.g100.textSecondary}", + "$type": "dimension", + "$value": "16", + "unit": "px", "$modes": { - "default": "{color.foreground.strong}", - "cds-g0": "{carbon.themes.white.textSecondary}", - "cds-g10": "{carbon.themes.g10.textSecondary}", - "cds-g90": "{carbon.themes.g90.textSecondary}", - "cds-g100": "{carbon.themes.g100.textSecondary}" + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" }, - "key": "{rich-tooltip.toggle.foreground.color.default}" + "key": "{tag.border.radius}" }, - "name": "token-rich-tooltip-toggle-foreground-color-default", + "name": "token-tag-border-radius", "attributes": { - "category": "rich-tooltip" + "category": "tag" + }, + "path": [ + "tag", + "border", + "radius" + ] + }, + "token-tag-surface-color-default": { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#262626", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g100}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{tag.surface.color.default}" + }, + "name": "token-tag-surface-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "default" + ] + }, + "token-tag-surface-color-hover": { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#636363", + "$modes": { + "default": "#333333", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g100}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" + }, + "name": "token-tag-surface-color-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "hover" + ] + }, + "token-tag-surface-color-active": { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#636363", + "$modes": { + "default": "#525252", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g100}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" + }, + "name": "token-tag-surface-color-active", + "attributes": { + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "foreground", + "tag", + "surface", "color", - "default" + "active" ] }, - "token-rich-tooltip-toggle-foreground-color-hover": { - "key": "{rich-tooltip.toggle.foreground.color.hover}", + "token-tag-foreground-color-default": { + "key": "{tag.foreground.color.default}", + "$type": "color", "$value": "#f4f4f4", "$modes": { "default": "#f4f4f4", @@ -75796,407 +79870,518 @@ "cds-g100": "#f4f4f4" }, "original": { - "$value": "{carbon.themes.g100.textPrimary}", + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", "$modes": { "default": "{color.foreground.primary}", - "cds-g0": "{carbon.themes.white.textPrimary}", - "cds-g10": "{carbon.themes.g10.textPrimary}", - "cds-g90": "{carbon.themes.g90.textPrimary}", - "cds-g100": "{carbon.themes.g100.textPrimary}" + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" }, - "key": "{rich-tooltip.toggle.foreground.color.hover}" + "key": "{tag.foreground.color.default}" }, - "name": "token-rich-tooltip-toggle-foreground-color-hover", + "name": "token-tag-foreground-color-default", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", + "tag", "foreground", "color", - "hover" + "default" ] }, - "token-rich-tooltip-toggle-foreground-color-active": { - "key": "{rich-tooltip.toggle.foreground.color.active}", - "$value": "#c6c6c6", + "token-tag-typography-font-size": { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", "$modes": { - "default": "#c6c6c6", - "cds-g0": "#525252", - "cds-g10": "#525252", - "cds-g90": "#c6c6c6", - "cds-g100": "#c6c6c6" + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" }, "original": { - "$value": "{carbon.themes.g100.textSecondary}", + "$type": "font-size", + "$value": "{carbon.typography.label01.font-size}", + "unit": "px", "$modes": { - "default": "{color.foreground.faint}", - "cds-g0": "{carbon.themes.white.textSecondary}", - "cds-g10": "{carbon.themes.g10.textSecondary}", - "cds-g90": "{carbon.themes.g90.textSecondary}", - "cds-g100": "{carbon.themes.g100.textSecondary}" + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" }, - "key": "{rich-tooltip.toggle.foreground.color.active}" + "key": "{tag.typography.font-size}" }, - "name": "token-rich-tooltip-toggle-foreground-color-active", + "name": "token-tag-typography-font-size", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "foreground", - "color", - "active" + "tag", + "typography", + "font-size" ] }, - "token-rich-tooltip-toggle-icon-size": { - "key": "{rich-tooltip.toggle.icon.size}", - "$type": "dimension", - "$value": "14px", + "token-tag-typography-letter-spacing": { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.32px", "unit": "px", "$modes": { - "default": "1", - "cds-g0": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g10": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g90": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g100": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - } + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" }, "original": { - "$type": "dimension", - "$value": "14", + "$type": "letter-spacing", + "$value": "{carbon.typography.label01.letter-spacing}", "unit": "px", "$modes": { - "default": "1", - "cds-g0": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g10": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g90": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - }, - "cds-g100": { - "$value": "14", - "unit": "px", - "filePath": "src/products/shared/rich-tooltip.json", - "isSource": true, - "$type": "dimension" - } + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" }, - "key": "{rich-tooltip.toggle.icon.size}" + "key": "{tag.typography.letter-spacing}" }, - "name": "token-rich-tooltip-toggle-icon-size", + "name": "token-tag-typography-letter-spacing", "attributes": { - "category": "rich-tooltip" + "category": "tag" }, "path": [ - "rich-tooltip", - "toggle", - "icon", - "size" + "tag", + "typography", + "letter-spacing" ] }, - "token-tabs-tab-height-medium": { - "key": "{tabs.tab.height.medium}", - "$type": "dimension", - "$value": "36px", - "unit": "px", + "token-tag-typography-line-height": { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.33333, + "$modes": { + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, "original": { - "$type": "dimension", - "$value": "36", - "unit": "px", - "key": "{tabs.tab.height.medium}" + "$type": "number", + "$value": "{carbon.typography.label01.line-height}", + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + }, + "key": "{tag.typography.line-height}" }, - "name": "token-tabs-tab-height-medium", + "name": "token-tag-typography-line-height", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "height", - "medium" + "tag", + "typography", + "line-height" ] }, - "token-tabs-tab-height-large": { - "key": "{tabs.tab.height.large}", - "$type": "dimension", - "$value": "48px", - "unit": "px", + "token-tag-icon-color": { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "dimension", - "$value": "48", - "unit": "px", - "key": "{tabs.tab.height.large}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.icon.color}" }, - "name": "token-tabs-tab-height-large", + "name": "token-tag-icon-color", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "height", - "large" + "tag", + "icon", + "color" ] }, - "token-tabs-tab-padding-horizontal-medium": { - "key": "{tabs.tab.padding.horizontal.medium}", - "$type": "dimension", - "$value": "12px", - "unit": "px", + "token-tag-link-border-color-primary": { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#4589ff", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, "original": { - "$type": "dimension", - "$value": "12", - "unit": "px", - "key": "{tabs.tab.padding.horizontal.medium}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderBlue.g100}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + }, + "key": "{tag.link.border.color.primary}" }, - "name": "token-tabs-tab-padding-horizontal-medium", + "name": "token-tag-link-border-color-primary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "horizontal", - "medium" + "tag", + "link", + "border", + "color", + "primary" ] }, - "token-tabs-tab-padding-horizontal-large": { - "key": "{tabs.tab.padding.horizontal.large}", - "$type": "dimension", - "$value": "20px", - "unit": "px", + "token-tag-link-border-color-secondary": { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, "original": { - "$type": "dimension", - "$value": "20", - "unit": "px", - "key": "{tabs.tab.padding.horizontal.large}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderGray.g100}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + }, + "key": "{tag.link.border.color.secondary}" }, - "name": "token-tabs-tab-padding-horizontal-large", + "name": "token-tag-link-border-color-secondary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "horizontal", - "large" + "tag", + "link", + "border", + "color", + "secondary" ] }, - "token-tabs-tab-padding-vertical": { - "key": "{tabs.tab.padding.vertical}", - "$type": "dimension", - "$value": "0px", - "unit": "px", + "token-tag-link-surface-color-primary-default": { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#262626", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, "original": { - "$type": "dimension", - "$value": "0", - "unit": "px", - "key": "{tabs.tab.padding.vertical}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.default}" }, - "name": "token-tabs-tab-padding-vertical", + "name": "token-tag-link-surface-color-primary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "padding", - "vertical" + "tag", + "link", + "surface", + "color", + "primary", + "default" ] }, - "token-tabs-tab-border-radius": { - "key": "{tabs.tab.border-radius}", - "$type": "dimension", - "$value": "5px", - "unit": "px", + "token-tag-link-surface-color-primary-hover": { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#0053ff", + "$modes": { + "default": "#333333", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" + }, "original": { - "$type": "dimension", - "$value": "5", - "unit": "px", - "key": "{tabs.tab.border-radius}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverBlue.g100}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.hover}" }, - "name": "token-tabs-tab-border-radius", + "name": "token-tag-link-surface-color-primary-hover", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "border-radius" + "tag", + "link", + "surface", + "color", + "primary", + "hover" ] }, - "token-tabs-tab-focus-inset": { - "key": "{tabs.tab.focus-inset}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tag-link-foreground-color-primary-default": { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{tabs.tab.focus-inset}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g100}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.default}" }, - "name": "token-tabs-tab-focus-inset", + "name": "token-tag-link-foreground-color-primary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "focus-inset" + "tag", + "link", + "foreground", + "color", + "primary", + "default" ] }, - "token-tabs-tab-gutter": { - "key": "{tabs.tab.gutter}", - "$type": "dimension", - "$value": "6px", - "unit": "px", + "token-tag-link-foreground-color-primary-hover": { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "6", - "unit": "px", - "key": "{tabs.tab.gutter}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g100}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.hover}" }, - "name": "token-tabs-tab-gutter", + "name": "token-tag-link-foreground-color-primary-hover", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "tab", - "gutter" + "tag", + "link", + "foreground", + "color", + "primary", + "hover" ] }, - "token-tabs-indicator-height": { - "key": "{tabs.indicator.height}", - "$type": "dimension", - "$value": "3px", - "unit": "px", + "token-tag-link-foreground-color-primary-active": { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "dimension", - "$value": "3", - "unit": "px", - "key": "{tabs.indicator.height}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g100}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.active}" }, - "name": "token-tabs-indicator-height", + "name": "token-tag-link-foreground-color-primary-active", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "height" + "tag", + "link", + "foreground", + "color", + "primary", + "active" ] }, - "token-tabs-indicator-transition-function": { - "key": "{tabs.indicator.transition.function}", - "$type": "cubicBezier", - "$value": "cubic-bezier(0.5, 1, 0.89, 1)", + "token-tag-link-foreground-color-secondary-default": { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "cubicBezier", - "$value": [ - 0.5, - 1, - 0.89, - 1 - ], - "key": "{tabs.indicator.transition.function}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.foreground.color.secondary.default}" }, - "name": "token-tabs-indicator-transition-function", + "name": "token-tag-link-foreground-color-secondary-default", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "transition", - "function" + "tag", + "link", + "foreground", + "color", + "secondary", + "default" ] }, - "token-tabs-indicator-transition-duration": { - "key": "{tabs.indicator.transition.duration}", - "$type": "duration", - "$value": "0.6s", - "unit": "s", + "token-tag-link-icon-color-primary": { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, "original": { - "$type": "duration", - "$value": "0.6", - "unit": "s", - "key": "{tabs.indicator.transition.duration}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.icon.color.primary}" }, - "name": "token-tabs-indicator-transition-duration", + "name": "token-tag-link-icon-color-primary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "indicator", - "transition", - "duration" + "tag", + "link", + "icon", + "color", + "primary" ] }, - "token-tabs-divider-height": { - "key": "{tabs.divider.height}", - "$type": "dimension", - "$value": "1px", - "unit": "px", + "token-tag-link-icon-color-secondary": { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, "original": { - "$type": "dimension", - "$value": "1", - "unit": "px", - "key": "{tabs.divider.height}" + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.icon.color.secondary}" }, - "name": "token-tabs-divider-height", + "name": "token-tag-link-icon-color-secondary", "attributes": { - "category": "tabs" + "category": "tag" }, "path": [ - "tabs", - "divider", - "height" + "tag", + "link", + "icon", + "color", + "secondary" ] }, "token-tooltip-max-width": { 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 bbca917d338..401a49f2d4b 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g0.json @@ -13760,6 +13760,843 @@ "height" ] }, + { + "key": "{tag.max-width}", + "$type": "dimension", + "$value": "208px", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "original": { + "$type": "dimension", + "$value": "208", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "key": "{tag.max-width}" + }, + "name": "token-tag-max-width", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "max-width" + ] + }, + { + "key": "{tag.padding.top}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.top}" + }, + "name": "token-tag-padding-top", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "top" + ] + }, + { + "key": "{tag.padding.bottom}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.bottom}" + }, + "name": "token-tag-padding-bottom", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "bottom" + ] + }, + { + "key": "{tag.padding.right}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.right}" + }, + "name": "token-tag-padding-right", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "right" + ] + }, + { + "key": "{tag.padding.left}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.left}" + }, + "name": "token-tag-padding-left", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "left" + ] + }, + { + "key": "{tag.border.radius}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{tag.border.radius}" + }, + "name": "token-tag-border-radius", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "border", + "radius" + ] + }, + { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{tag.surface.color.default}" + }, + "name": "token-tag-surface-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "default" + ] + }, + { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#d1d1d1", + "$modes": { + "default": "#e8e8e8", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.white}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" + }, + "name": "token-tag-surface-color-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "hover" + ] + }, + { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#d1d1d1", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.white}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" + }, + "name": "token-tag-surface-color-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "active" + ] + }, + { + "key": "{tag.foreground.color.default}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.foreground.color.default}" + }, + "name": "token-tag-foreground-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "foreground", + "color", + "default" + ] + }, + { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.label01.font-size}", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" + }, + "key": "{tag.typography.font-size}" + }, + "name": "token-tag-typography-font-size", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "font-size" + ] + }, + { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.32px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.label01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" + }, + "key": "{tag.typography.letter-spacing}" + }, + "name": "token-tag-typography-letter-spacing", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "letter-spacing" + ] + }, + { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.33333, + "$modes": { + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.label01.line-height}", + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + }, + "key": "{tag.typography.line-height}" + }, + "name": "token-tag-typography-line-height", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "line-height" + ] + }, + { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.icon.color}" + }, + "name": "token-tag-icon-color", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "icon", + "color" + ] + }, + { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#78a9ff", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + }, + "key": "{tag.link.border.color.primary}" + }, + "name": "token-tag-link-border-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "primary" + ] + }, + { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#a8a8a8", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderGray.white}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + }, + "key": "{tag.link.border.color.secondary}" + }, + "name": "token-tag-link-border-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "secondary" + ] + }, + { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.default}" + }, + "name": "token-tag-link-surface-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#b8d3ff", + "$modes": { + "default": "#e8e8e8", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.hover}" + }, + "name": "token-tag-link-surface-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.white}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.default}" + }, + "name": "token-tag-link-foreground-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.white}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.hover}" + }, + "name": "token-tag-link-foreground-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.white}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.active}" + }, + "name": "token-tag-link-foreground-color-primary-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.foreground.color.secondary.default}" + }, + "name": "token-tag-link-foreground-color-secondary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#161616", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.icon.color.primary}" + }, + "name": "token-tag-link-icon-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "primary" + ] + }, + { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.white}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.icon.color.secondary}" + }, + "name": "token-tag-link-icon-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "secondary" + ] + }, { "key": "{tooltip.max-width}", "$type": "dimension", 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 12ca1387b29..cf8282e18f4 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g10.json @@ -13760,6 +13760,843 @@ "height" ] }, + { + "key": "{tag.max-width}", + "$type": "dimension", + "$value": "208px", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "original": { + "$type": "dimension", + "$value": "208", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "key": "{tag.max-width}" + }, + "name": "token-tag-max-width", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "max-width" + ] + }, + { + "key": "{tag.padding.top}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.top}" + }, + "name": "token-tag-padding-top", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "top" + ] + }, + { + "key": "{tag.padding.bottom}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.bottom}" + }, + "name": "token-tag-padding-bottom", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "bottom" + ] + }, + { + "key": "{tag.padding.right}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.right}" + }, + "name": "token-tag-padding-right", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "right" + ] + }, + { + "key": "{tag.padding.left}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.left}" + }, + "name": "token-tag-padding-left", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "left" + ] + }, + { + "key": "{tag.border.radius}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{tag.border.radius}" + }, + "name": "token-tag-border-radius", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "border", + "radius" + ] + }, + { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#e0e0e0", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{tag.surface.color.default}" + }, + "name": "token-tag-surface-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "default" + ] + }, + { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#d1d1d1", + "$modes": { + "default": "#e8e8e8", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" + }, + "name": "token-tag-surface-color-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "hover" + ] + }, + { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#d1d1d1", + "$modes": { + "default": "#c6c6c6", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" + }, + "name": "token-tag-surface-color-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "active" + ] + }, + { + "key": "{tag.foreground.color.default}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.foreground.color.default}" + }, + "name": "token-tag-foreground-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "foreground", + "color", + "default" + ] + }, + { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.label01.font-size}", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" + }, + "key": "{tag.typography.font-size}" + }, + "name": "token-tag-typography-font-size", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "font-size" + ] + }, + { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.32px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.label01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" + }, + "key": "{tag.typography.letter-spacing}" + }, + "name": "token-tag-typography-letter-spacing", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "letter-spacing" + ] + }, + { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.33333, + "$modes": { + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.label01.line-height}", + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + }, + "key": "{tag.typography.line-height}" + }, + "name": "token-tag-typography-line-height", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "line-height" + ] + }, + { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.icon.color}" + }, + "name": "token-tag-icon-color", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "icon", + "color" + ] + }, + { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#78a9ff", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + }, + "key": "{tag.link.border.color.primary}" + }, + "name": "token-tag-link-border-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "primary" + ] + }, + { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#a8a8a8", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + }, + "key": "{tag.link.border.color.secondary}" + }, + "name": "token-tag-link-border-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "secondary" + ] + }, + { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.default}" + }, + "name": "token-tag-link-surface-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#b8d3ff", + "$modes": { + "default": "#e8e8e8", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.hover}" + }, + "name": "token-tag-link-surface-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0f62fe", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.default}" + }, + "name": "token-tag-link-foreground-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.hover}" + }, + "name": "token-tag-link-foreground-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#0043ce", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.active}" + }, + "name": "token-tag-link-foreground-color-primary-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.foreground.color.secondary.default}" + }, + "name": "token-tag-link-foreground-color-secondary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#161616", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.icon.color.primary}" + }, + "name": "token-tag-link-icon-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "primary" + ] + }, + { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#161616", + "$modes": { + "default": "#161616", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g10}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.icon.color.secondary}" + }, + "name": "token-tag-link-icon-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "secondary" + ] + }, { "key": "{tooltip.max-width}", "$type": "dimension", 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 4c7e6ba5207..88aaeb2974d 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g100.json @@ -13760,6 +13760,843 @@ "height" ] }, + { + "key": "{tag.max-width}", + "$type": "dimension", + "$value": "208px", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "original": { + "$type": "dimension", + "$value": "208", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "key": "{tag.max-width}" + }, + "name": "token-tag-max-width", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "max-width" + ] + }, + { + "key": "{tag.padding.top}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.top}" + }, + "name": "token-tag-padding-top", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "top" + ] + }, + { + "key": "{tag.padding.bottom}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.bottom}" + }, + "name": "token-tag-padding-bottom", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "bottom" + ] + }, + { + "key": "{tag.padding.right}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.right}" + }, + "name": "token-tag-padding-right", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "right" + ] + }, + { + "key": "{tag.padding.left}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.left}" + }, + "name": "token-tag-padding-left", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "left" + ] + }, + { + "key": "{tag.border.radius}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{tag.border.radius}" + }, + "name": "token-tag-border-radius", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "border", + "radius" + ] + }, + { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#262626", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g100}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{tag.surface.color.default}" + }, + "name": "token-tag-surface-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "default" + ] + }, + { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#636363", + "$modes": { + "default": "#333333", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g100}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" + }, + "name": "token-tag-surface-color-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "hover" + ] + }, + { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#636363", + "$modes": { + "default": "#525252", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g100}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" + }, + "name": "token-tag-surface-color-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "active" + ] + }, + { + "key": "{tag.foreground.color.default}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.foreground.color.default}" + }, + "name": "token-tag-foreground-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "foreground", + "color", + "default" + ] + }, + { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.label01.font-size}", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" + }, + "key": "{tag.typography.font-size}" + }, + "name": "token-tag-typography-font-size", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "font-size" + ] + }, + { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.32px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.label01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" + }, + "key": "{tag.typography.letter-spacing}" + }, + "name": "token-tag-typography-letter-spacing", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "letter-spacing" + ] + }, + { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.33333, + "$modes": { + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.label01.line-height}", + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + }, + "key": "{tag.typography.line-height}" + }, + "name": "token-tag-typography-line-height", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "line-height" + ] + }, + { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.icon.color}" + }, + "name": "token-tag-icon-color", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "icon", + "color" + ] + }, + { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#4589ff", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderBlue.g100}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + }, + "key": "{tag.link.border.color.primary}" + }, + "name": "token-tag-link-border-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "primary" + ] + }, + { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderGray.g100}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + }, + "key": "{tag.link.border.color.secondary}" + }, + "name": "token-tag-link-border-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "secondary" + ] + }, + { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#262626", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.default}" + }, + "name": "token-tag-link-surface-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#0053ff", + "$modes": { + "default": "#333333", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverBlue.g100}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.hover}" + }, + "name": "token-tag-link-surface-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g100}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.default}" + }, + "name": "token-tag-link-foreground-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g100}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.hover}" + }, + "name": "token-tag-link-foreground-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g100}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.active}" + }, + "name": "token-tag-link-foreground-color-primary-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.foreground.color.secondary.default}" + }, + "name": "token-tag-link-foreground-color-secondary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.icon.color.primary}" + }, + "name": "token-tag-link-icon-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "primary" + ] + }, + { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g100}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.icon.color.secondary}" + }, + "name": "token-tag-link-icon-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "secondary" + ] + }, { "key": "{tooltip.max-width}", "$type": "dimension", 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 491c93ecb68..b2a6250d21f 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json +++ b/packages/tokens/dist/docs/products/themed-tokens/cds-g90.json @@ -13760,6 +13760,843 @@ "height" ] }, + { + "key": "{tag.max-width}", + "$type": "dimension", + "$value": "208px", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "original": { + "$type": "dimension", + "$value": "208", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "key": "{tag.max-width}" + }, + "name": "token-tag-max-width", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "max-width" + ] + }, + { + "key": "{tag.padding.top}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.top}" + }, + "name": "token-tag-padding-top", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "top" + ] + }, + { + "key": "{tag.padding.bottom}", + "$type": "dimension", + "$value": "4px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "4", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.bottom}" + }, + "name": "token-tag-padding-bottom", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "bottom" + ] + }, + { + "key": "{tag.padding.right}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.right}" + }, + "name": "token-tag-padding-right", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "right" + ] + }, + { + "key": "{tag.padding.left}", + "$type": "dimension", + "$value": "8px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "8", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.left}" + }, + "name": "token-tag-padding-left", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "left" + ] + }, + { + "key": "{tag.border.radius}", + "$type": "dimension", + "$value": "16px", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "16", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{tag.border.radius}" + }, + "name": "token-tag-border-radius", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "border", + "radius" + ] + }, + { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#525252", + "$modes": { + "default": "#393939", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{tag.surface.color.default}" + }, + "name": "token-tag-surface-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "default" + ] + }, + { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#636363", + "$modes": { + "default": "#474747", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" + }, + "name": "token-tag-surface-color-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "hover" + ] + }, + { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#636363", + "$modes": { + "default": "#6f6f6f", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" + }, + "name": "token-tag-surface-color-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "active" + ] + }, + { + "key": "{tag.foreground.color.default}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.foreground.color.default}" + }, + "name": "token-tag-foreground-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "foreground", + "color", + "default" + ] + }, + { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.75rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" + }, + "original": { + "$type": "font-size", + "$value": "{carbon.typography.label01.font-size}", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" + }, + "key": "{tag.typography.font-size}" + }, + "name": "token-tag-typography-font-size", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "font-size" + ] + }, + { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0.32px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" + }, + "original": { + "$type": "letter-spacing", + "$value": "{carbon.typography.label01.letter-spacing}", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" + }, + "key": "{tag.typography.letter-spacing}" + }, + "name": "token-tag-typography-letter-spacing", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "letter-spacing" + ] + }, + { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.33333, + "$modes": { + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": "{carbon.typography.label01.line-height}", + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + }, + "key": "{tag.typography.line-height}" + }, + "name": "token-tag-typography-line-height", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "line-height" + ] + }, + { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.icon.color}" + }, + "name": "token-tag-icon-color", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "icon", + "color" + ] + }, + { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#4589ff", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + }, + "key": "{tag.link.border.color.primary}" + }, + "name": "token-tag-link-border-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "primary" + ] + }, + { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#8d8d8d", + "$modes": { + "default": "#8d8d8d", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + }, + "key": "{tag.link.border.color.secondary}" + }, + "name": "token-tag-link-border-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "secondary" + ] + }, + { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#0043ce", + "$modes": { + "default": "#393939", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.default}" + }, + "name": "token-tag-link-surface-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#0053ff", + "$modes": { + "default": "#474747", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.hover}" + }, + "name": "token-tag-link-surface-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#78a9ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.default}" + }, + "name": "token-tag-link-foreground-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.hover}" + }, + "name": "token-tag-link-foreground-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#a6c8ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.active}" + }, + "name": "token-tag-link-foreground-color-primary-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.foreground.color.secondary.default}" + }, + "name": "token-tag-link-foreground-color-secondary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#d0e2ff", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.icon.color.primary}" + }, + "name": "token-tag-link-icon-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "primary" + ] + }, + { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#f4f4f4", + "$modes": { + "default": "#f4f4f4", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{carbon.themes.tagTokens.tagColorGray.g90}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.icon.color.secondary}" + }, + "name": "token-tag-link-icon-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "secondary" + ] + }, { "key": "{tooltip.max-width}", "$type": "dimension", diff --git a/packages/tokens/dist/docs/products/themed-tokens/default.json b/packages/tokens/dist/docs/products/themed-tokens/default.json index 7997ebd2714..f7eb990aa03 100644 --- a/packages/tokens/dist/docs/products/themed-tokens/default.json +++ b/packages/tokens/dist/docs/products/themed-tokens/default.json @@ -13766,6 +13766,843 @@ "height" ] }, + { + "key": "{tag.max-width}", + "$type": "dimension", + "$value": "166px", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "original": { + "$type": "dimension", + "$value": "166", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "key": "{tag.max-width}" + }, + "name": "token-tag-max-width", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "max-width" + ] + }, + { + "key": "{tag.padding.top}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.top}" + }, + "name": "token-tag-padding-top", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "top" + ] + }, + { + "key": "{tag.padding.bottom}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.bottom}" + }, + "name": "token-tag-padding-bottom", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "bottom" + ] + }, + { + "key": "{tag.padding.right}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.right}" + }, + "name": "token-tag-padding-right", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "right" + ] + }, + { + "key": "{tag.padding.left}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.left}" + }, + "name": "token-tag-padding-left", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "left" + ] + }, + { + "key": "{tag.border.radius}", + "$type": "dimension", + "$value": "50px", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "50", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{tag.border.radius}" + }, + "name": "token-tag-border-radius", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "border", + "radius" + ] + }, + { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{tag.surface.color.default}" + }, + "name": "token-tag-surface-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "default" + ] + }, + { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#f1f2f3", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" + }, + "name": "token-tag-surface-color-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "hover" + ] + }, + { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" + }, + "name": "token-tag-surface-color-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "active" + ] + }, + { + "key": "{tag.foreground.color.default}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.foreground.color.default}" + }, + "name": "token-tag-foreground-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "foreground", + "color", + "default" + ] + }, + { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" + }, + "key": "{tag.typography.font-size}" + }, + "name": "token-tag-typography-font-size", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "font-size" + ] + }, + { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" + }, + "key": "{tag.typography.letter-spacing}" + }, + "name": "token-tag-typography-letter-spacing", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "letter-spacing" + ] + }, + { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.2308, + "$modes": { + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": 1.2308, + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + }, + "key": "{tag.typography.line-height}" + }, + "name": "token-tag-typography-line-height", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "line-height" + ] + }, + { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.icon.color}" + }, + "name": "token-tag-icon-color", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "icon", + "color" + ] + }, + { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + }, + "key": "{tag.link.border.color.primary}" + }, + "name": "token-tag-link-border-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "primary" + ] + }, + { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + }, + "key": "{tag.link.border.color.secondary}" + }, + "name": "token-tag-link-border-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "secondary" + ] + }, + { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.default}" + }, + "name": "token-tag-link-surface-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#f1f2f3", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.hover}" + }, + "name": "token-tag-link-surface-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.default}" + }, + "name": "token-tag-link-foreground-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action-hover}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.hover}" + }, + "name": "token-tag-link-foreground-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action-active}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.active}" + }, + "name": "token-tag-link-foreground-color-primary-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#0c0c0e", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.foreground.color.secondary.default}" + }, + "name": "token-tag-link-foreground-color-secondary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.icon.color.primary}" + }, + "name": "token-tag-link-icon-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "primary" + ] + }, + { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.icon.color.secondary}" + }, + "name": "token-tag-link-icon-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "secondary" + ] + }, { "key": "{tooltip.max-width}", "$type": "dimension", diff --git a/packages/tokens/dist/docs/products/tokens.json b/packages/tokens/dist/docs/products/tokens.json index 7997ebd2714..f7eb990aa03 100644 --- a/packages/tokens/dist/docs/products/tokens.json +++ b/packages/tokens/dist/docs/products/tokens.json @@ -13766,6 +13766,843 @@ "height" ] }, + { + "key": "{tag.max-width}", + "$type": "dimension", + "$value": "166px", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "original": { + "$type": "dimension", + "$value": "166", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "key": "{tag.max-width}" + }, + "name": "token-tag-max-width", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "max-width" + ] + }, + { + "key": "{tag.padding.top}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.top}" + }, + "name": "token-tag-padding-top", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "top" + ] + }, + { + "key": "{tag.padding.bottom}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.bottom}" + }, + "name": "token-tag-padding-bottom", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "bottom" + ] + }, + { + "key": "{tag.padding.right}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.right}" + }, + "name": "token-tag-padding-right", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "right" + ] + }, + { + "key": "{tag.padding.left}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.left}" + }, + "name": "token-tag-padding-left", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "left" + ] + }, + { + "key": "{tag.border.radius}", + "$type": "dimension", + "$value": "50px", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "original": { + "$type": "dimension", + "$value": "50", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{tag.border.radius}" + }, + "name": "token-tag-border-radius", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "border", + "radius" + ] + }, + { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{tag.surface.color.default}" + }, + "name": "token-tag-surface-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "default" + ] + }, + { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#f1f2f3", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" + }, + "name": "token-tag-surface-color-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "hover" + ] + }, + { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" + }, + "name": "token-tag-surface-color-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "active" + ] + }, + { + "key": "{tag.foreground.color.default}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.foreground.color.default}" + }, + "name": "token-tag-foreground-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "foreground", + "color", + "default" + ] + }, + { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" + }, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" + }, + "key": "{tag.typography.font-size}" + }, + "name": "token-tag-typography-font-size", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "font-size" + ] + }, + { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" + }, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" + }, + "key": "{tag.typography.letter-spacing}" + }, + "name": "token-tag-typography-letter-spacing", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "letter-spacing" + ] + }, + { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.2308, + "$modes": { + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "original": { + "$type": "number", + "$value": 1.2308, + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + }, + "key": "{tag.typography.line-height}" + }, + "name": "token-tag-typography-line-height", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "line-height" + ] + }, + { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.icon.color}" + }, + "name": "token-tag-icon-color", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "icon", + "color" + ] + }, + { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + }, + "key": "{tag.link.border.color.primary}" + }, + "name": "token-tag-link-border-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "primary" + ] + }, + { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + }, + "key": "{tag.link.border.color.secondary}" + }, + "name": "token-tag-link-border-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "secondary" + ] + }, + { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.default}" + }, + "name": "token-tag-link-surface-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#f1f2f3", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" + }, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.hover}" + }, + "name": "token-tag-link-surface-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.default}" + }, + "name": "token-tag-link-foreground-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "default" + ] + }, + { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action-hover}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.hover}" + }, + "name": "token-tag-link-foreground-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "hover" + ] + }, + { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.action-active}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.active}" + }, + "name": "token-tag-link-foreground-color-primary-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "active" + ] + }, + { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#0c0c0e", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.foreground.color.secondary.default}" + }, + "name": "token-tag-link-foreground-color-secondary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "secondary", + "default" + ] + }, + { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.icon.color.primary}" + }, + "name": "token-tag-link-icon-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "primary" + ] + }, + { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.icon.color.secondary}" + }, + "name": "token-tag-link-icon-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "secondary" + ] + }, { "key": "{tooltip.max-width}", "$type": "dimension", diff --git a/packages/tokens/dist/marketing/css/tokens.css b/packages/tokens/dist/marketing/css/tokens.css index 73161d316a1..7ac25929456 100644 --- a/packages/tokens/dist/marketing/css/tokens.css +++ b/packages/tokens/dist/marketing/css/tokens.css @@ -473,6 +473,30 @@ --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); --token-tabs-indicator-transition-duration: 0.6s; --token-tabs-divider-height: 1px; + --token-tag-max-width: 166px; + --token-tag-padding-top: 3px; + --token-tag-padding-bottom: 5px; + --token-tag-padding-right: 10px; + --token-tag-padding-left: 10px; + --token-tag-border-radius: 50px; + --token-tag-surface-color-default: #ffffff; + --token-tag-surface-color-hover: #f1f2f3; + --token-tag-surface-color-active: #dedfe3; + --token-tag-foreground-color-default: #3b3d45; + --token-tag-typography-font-size: 0.8125rem; + --token-tag-typography-letter-spacing: 0px; + --token-tag-typography-line-height: 1.2308; + --token-tag-icon-color: #3b3d45; + --token-tag-link-border-color-primary: #3b3d4566; + --token-tag-link-border-color-secondary: #3b3d4566; + --token-tag-link-surface-color-primary-default: #ffffff; + --token-tag-link-surface-color-primary-hover: #f1f2f3; + --token-tag-link-foreground-color-primary-default: #1060ff; + --token-tag-link-foreground-color-primary-hover: #0c56e9; + --token-tag-link-foreground-color-primary-active: #0046d1; + --token-tag-link-foreground-color-secondary-default: #0c0c0e; + --token-tag-link-icon-color-primary: #3b3d45; + --token-tag-link-icon-color-secondary: #3b3d45; --token-tooltip-max-width: 280px; --token-tooltip-padding-horizontal: 12px; --token-tooltip-padding-vertical: 8px; diff --git a/packages/tokens/dist/marketing/tokens.json b/packages/tokens/dist/marketing/tokens.json index 6dafcedb1c2..e3c5dc07796 100644 --- a/packages/tokens/dist/marketing/tokens.json +++ b/packages/tokens/dist/marketing/tokens.json @@ -15180,6 +15180,933 @@ } } }, + "tag": { + "max-width": { + "key": "{tag.max-width}", + "$type": "dimension", + "$value": "166px", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "166", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + }, + "key": "{tag.max-width}" + }, + "name": "token-tag-max-width", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "max-width" + ] + }, + "padding": { + "top": { + "key": "{tag.padding.top}", + "$type": "dimension", + "$value": "3px", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.top}" + }, + "name": "token-tag-padding-top", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "top" + ] + }, + "bottom": { + "key": "{tag.padding.bottom}", + "$type": "dimension", + "$value": "5px", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + }, + "key": "{tag.padding.bottom}" + }, + "name": "token-tag-padding-bottom", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "bottom" + ] + }, + "right": { + "key": "{tag.padding.right}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.right}" + }, + "name": "token-tag-padding-right", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "right" + ] + }, + "left": { + "key": "{tag.padding.left}", + "$type": "dimension", + "$value": "10px", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + }, + "key": "{tag.padding.left}" + }, + "name": "token-tag-padding-left", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "padding", + "left" + ] + } + }, + "border": { + "radius": { + "key": "{tag.border.radius}", + "$type": "dimension", + "$value": "50px", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "dimension", + "$value": "50", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + }, + "key": "{tag.border.radius}" + }, + "name": "token-tag-border-radius", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "border", + "radius" + ] + } + }, + "surface": { + "color": { + "default": { + "key": "{tag.surface.color.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#e0e0e0", + "cds-g10": "#e0e0e0", + "cds-g90": "#525252", + "cds-g100": "#525252" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + }, + "key": "{tag.surface.color.default}" + }, + "name": "token-tag-surface-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "default" + ] + }, + "hover": { + "key": "{tag.surface.color.hover}", + "$type": "color", + "$value": "#f1f2f3", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.hover}" + }, + "name": "token-tag-surface-color-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "hover" + ] + }, + "active": { + "key": "{tag.surface.color.active}", + "$type": "color", + "$value": "#dedfe3", + "$modes": { + "default": "#dedfe3", + "cds-g0": "#d1d1d1", + "cds-g10": "#d1d1d1", + "cds-g90": "#636363", + "cds-g100": "#636363" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + }, + "key": "{tag.surface.color.active}" + }, + "name": "token-tag-surface-color-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "surface", + "color", + "active" + ] + } + } + }, + "foreground": { + "color": { + "default": { + "key": "{tag.foreground.color.default}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.foreground.color.default}" + }, + "name": "token-tag-foreground-color-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "foreground", + "color", + "default" + ] + } + } + }, + "typography": { + "font-size": { + "key": "{tag.typography.font-size}", + "$type": "font-size", + "$value": "0.8125rem", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "0.75rem", + "cds-g10": "0.75rem", + "cds-g90": "0.75rem", + "cds-g100": "0.75rem" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" + }, + "key": "{tag.typography.font-size}" + }, + "name": "token-tag-typography-font-size", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "font-size" + ] + }, + "letter-spacing": { + "key": "{tag.typography.letter-spacing}", + "$type": "letter-spacing", + "$value": "0px", + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "0.32px", + "cds-g10": "0.32px", + "cds-g90": "0.32px", + "cds-g100": "0.32px" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" + }, + "key": "{tag.typography.letter-spacing}" + }, + "name": "token-tag-typography-letter-spacing", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "letter-spacing" + ] + }, + "line-height": { + "key": "{tag.typography.line-height}", + "$type": "number", + "$value": 1.2308, + "$modes": { + "default": 1.2308, + "cds-g0": 1.33333, + "cds-g10": 1.33333, + "cds-g90": 1.33333, + "cds-g100": 1.33333 + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "number", + "$value": 1.2308, + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + }, + "key": "{tag.typography.line-height}" + }, + "name": "token-tag-typography-line-height", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "typography", + "line-height" + ] + } + }, + "icon": { + "color": { + "key": "{tag.icon.color}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.icon.color}" + }, + "name": "token-tag-icon-color", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "icon", + "color" + ] + } + }, + "link": { + "border": { + "color": { + "primary": { + "key": "{tag.link.border.color.primary}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "#78a9ff", + "cds-g10": "#78a9ff", + "cds-g90": "#4589ff", + "cds-g100": "#4589ff" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + }, + "key": "{tag.link.border.color.primary}" + }, + "name": "token-tag-link-border-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "primary" + ] + }, + "secondary": { + "key": "{tag.link.border.color.secondary}", + "$type": "color", + "$value": "#3b3d4566", + "$modes": { + "default": "#3b3d4566", + "cds-g0": "#a8a8a8", + "cds-g10": "#a8a8a8", + "cds-g90": "#8d8d8d", + "cds-g100": "#8d8d8d" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + }, + "key": "{tag.link.border.color.secondary}" + }, + "name": "token-tag-link-border-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "border", + "color", + "secondary" + ] + } + } + }, + "surface": { + "color": { + "primary": { + "default": { + "key": "{tag.link.surface.color.primary.default}", + "$type": "color", + "$value": "#ffffff", + "$modes": { + "default": "#ffffff", + "cds-g0": "#d0e2ff", + "cds-g10": "#d0e2ff", + "cds-g90": "#0043ce", + "cds-g100": "#0043ce" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.interactive}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.default}" + }, + "name": "token-tag-link-surface-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "default" + ] + }, + "hover": { + "key": "{tag.link.surface.color.primary.hover}", + "$type": "color", + "$value": "#f1f2f3", + "$modes": { + "default": "#f1f2f3", + "cds-g0": "#b8d3ff", + "cds-g10": "#b8d3ff", + "cds-g90": "#0053ff", + "cds-g100": "#0053ff" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + }, + "key": "{tag.link.surface.color.primary.hover}" + }, + "name": "token-tag-link-surface-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "surface", + "color", + "primary", + "hover" + ] + } + } + } + }, + "foreground": { + "color": { + "primary": { + "default": { + "key": "{tag.link.foreground.color.primary.default}", + "$type": "color", + "$value": "#1060ff", + "$modes": { + "default": "#1060ff", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.default}" + }, + "name": "token-tag-link-foreground-color-primary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "default" + ] + }, + "hover": { + "key": "{tag.link.foreground.color.primary.hover}", + "$type": "color", + "$value": "#0c56e9", + "$modes": { + "default": "#0c56e9", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.action-hover}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.hover}" + }, + "name": "token-tag-link-foreground-color-primary-hover", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "hover" + ] + }, + "active": { + "key": "{tag.link.foreground.color.primary.active}", + "$type": "color", + "$value": "#0046d1", + "$modes": { + "default": "#0046d1", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.action-active}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.foreground.color.primary.active}" + }, + "name": "token-tag-link-foreground-color-primary-active", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "primary", + "active" + ] + } + }, + "secondary": { + "default": { + "key": "{tag.link.foreground.color.secondary.default}", + "$type": "color", + "$value": "#0c0c0e", + "$modes": { + "default": "#0c0c0e", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.foreground.color.secondary.default}" + }, + "name": "token-tag-link-foreground-color-secondary-default", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "foreground", + "color", + "secondary", + "default" + ] + } + } + } + }, + "icon": { + "color": { + "primary": { + "key": "{tag.link.icon.color.primary}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#0043ce", + "cds-g10": "#0043ce", + "cds-g90": "#d0e2ff", + "cds-g100": "#d0e2ff" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + }, + "key": "{tag.link.icon.color.primary}" + }, + "name": "token-tag-link-icon-color-primary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "primary" + ] + }, + "secondary": { + "key": "{tag.link.icon.color.secondary}", + "$type": "color", + "$value": "#3b3d45", + "$modes": { + "default": "#3b3d45", + "cds-g0": "#161616", + "cds-g10": "#161616", + "cds-g90": "#f4f4f4", + "cds-g100": "#f4f4f4" + }, + "filePath": "src/products/shared/tag.json", + "isSource": true, + "original": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + }, + "key": "{tag.link.icon.color.secondary}" + }, + "name": "token-tag-link-icon-color-secondary", + "attributes": { + "category": "tag" + }, + "path": [ + "tag", + "link", + "icon", + "color", + "secondary" + ] + } + } + } + } + }, "tooltip": { "max-width": { "key": "{tooltip.max-width}", diff --git a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css index 9ae2916a8cc..d67655caf45 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--advanced/tokens.css @@ -459,6 +459,44 @@ 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-tag-border-radius: 50px; + --token-tag-foreground-color-default: var(--token-color-foreground-primary); + --token-tag-icon-color: var(--token-color-foreground-primary); + --token-tag-link-border-color-primary: var(--token-color-border-strong); + --token-tag-link-border-color-secondary: var(--token-color-border-strong); + --token-tag-link-foreground-color-primary-active: var( + --token-color-foreground-action-active + ); + --token-tag-link-foreground-color-primary-default: var( + --token-color-foreground-action + ); + --token-tag-link-foreground-color-primary-hover: var( + --token-color-foreground-action-hover + ); + --token-tag-link-foreground-color-secondary-default: var( + --token-color-foreground-strong + ); + --token-tag-link-icon-color-primary: var(--token-color-foreground-primary); + --token-tag-link-icon-color-secondary: var(--token-color-foreground-primary); + --token-tag-link-surface-color-primary-default: var( + --token-color-surface-interactive + ); + --token-tag-link-surface-color-primary-hover: var( + --token-color-surface-interactive-hover + ); + --token-tag-max-width: 166px; + --token-tag-padding-bottom: 5px; + --token-tag-padding-left: 10px; + --token-tag-padding-right: 10px; + --token-tag-padding-top: 3px; + --token-tag-surface-color-active: var( + --token-color-surface-interactive-active + ); + --token-tag-surface-color-default: var(--token-color-surface-interactive); + --token-tag-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-tag-typography-font-size: 0.8125rem; + --token-tag-typography-letter-spacing: 0px; + --token-tag-typography-line-height: 1.2308; --token-tooltip-border-radius: var(--token-border-radius-small); --token-tooltip-caret-clip-path: path( "M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z" @@ -798,6 +836,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -1138,6 +1200,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -1478,6 +1564,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -1817,6 +1927,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -2155,6 +2289,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -2493,6 +2651,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; diff --git a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css index 3c1c306e35d..ecd2e372df7 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors--migration/tokens.css @@ -459,6 +459,44 @@ 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-tag-border-radius: 50px; + --token-tag-foreground-color-default: var(--token-color-foreground-primary); + --token-tag-icon-color: var(--token-color-foreground-primary); + --token-tag-link-border-color-primary: var(--token-color-border-strong); + --token-tag-link-border-color-secondary: var(--token-color-border-strong); + --token-tag-link-foreground-color-primary-active: var( + --token-color-foreground-action-active + ); + --token-tag-link-foreground-color-primary-default: var( + --token-color-foreground-action + ); + --token-tag-link-foreground-color-primary-hover: var( + --token-color-foreground-action-hover + ); + --token-tag-link-foreground-color-secondary-default: var( + --token-color-foreground-strong + ); + --token-tag-link-icon-color-primary: var(--token-color-foreground-primary); + --token-tag-link-icon-color-secondary: var(--token-color-foreground-primary); + --token-tag-link-surface-color-primary-default: var( + --token-color-surface-interactive + ); + --token-tag-link-surface-color-primary-hover: var( + --token-color-surface-interactive-hover + ); + --token-tag-max-width: 166px; + --token-tag-padding-bottom: 5px; + --token-tag-padding-left: 10px; + --token-tag-padding-right: 10px; + --token-tag-padding-top: 3px; + --token-tag-surface-color-active: var( + --token-color-surface-interactive-active + ); + --token-tag-surface-color-default: var(--token-color-surface-interactive); + --token-tag-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-tag-typography-font-size: 0.8125rem; + --token-tag-typography-letter-spacing: 0px; + --token-tag-typography-line-height: 1.2308; --token-tooltip-border-radius: var(--token-border-radius-small); --token-tooltip-caret-clip-path: path( "M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z" @@ -798,6 +836,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -1138,6 +1200,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -1477,6 +1563,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -1815,6 +1925,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; diff --git a/packages/tokens/dist/products/css/themed-tokens/with-css-selectors/tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-css-selectors/tokens.css index 7617d5d2a96..7f76507ad57 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 @@ -258,6 +258,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -597,6 +621,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -937,6 +985,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -1276,6 +1348,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -1614,6 +1710,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; 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 887cefa83d9..8f3b8e1d0d8 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 @@ -254,6 +254,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; 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 d9c528520f5..68dcdf19db7 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 @@ -254,6 +254,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; 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 b299b8e00f2..84ab231409d 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 @@ -254,6 +254,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; 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 64d8f52c13f..fb9a90704d7 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 @@ -254,6 +254,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; diff --git a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css index d10144e9799..a382440c18d 100644 --- a/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css +++ b/packages/tokens/dist/products/css/themed-tokens/with-root-selector/default/themed-tokens.css @@ -254,6 +254,30 @@ --token-surface-low-box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d; --token-surface-mid-box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633; --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-tag-border-radius: 50px; + --token-tag-foreground-color-default: var(--token-color-foreground-primary); + --token-tag-icon-color: var(--token-color-foreground-primary); + --token-tag-link-border-color-primary: var(--token-color-border-strong); + --token-tag-link-border-color-secondary: var(--token-color-border-strong); + --token-tag-link-foreground-color-primary-active: var(--token-color-foreground-action-active); + --token-tag-link-foreground-color-primary-default: var(--token-color-foreground-action); + --token-tag-link-foreground-color-primary-hover: var(--token-color-foreground-action-hover); + --token-tag-link-foreground-color-secondary-default: var(--token-color-foreground-strong); + --token-tag-link-icon-color-primary: var(--token-color-foreground-primary); + --token-tag-link-icon-color-secondary: var(--token-color-foreground-primary); + --token-tag-link-surface-color-primary-default: var(--token-color-surface-interactive); + --token-tag-link-surface-color-primary-hover: var(--token-color-surface-interactive-hover); + --token-tag-max-width: 166px; + --token-tag-padding-bottom: 5px; + --token-tag-padding-left: 10px; + --token-tag-padding-right: 10px; + --token-tag-padding-top: 3px; + --token-tag-surface-color-active: var(--token-color-surface-interactive-active); + --token-tag-surface-color-default: var(--token-color-surface-interactive); + --token-tag-surface-color-hover: var(--token-color-surface-interactive-hover); + --token-tag-typography-font-size: 0.8125rem; + --token-tag-typography-letter-spacing: 0px; + --token-tag-typography-line-height: 1.2308; --token-tooltip-border-radius: var(--token-border-radius-small); --token-tooltip-caret-clip-path: path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z'); --token-tooltip-caret-height: 7px; 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 da1a6918a05..feaeb99e75e 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 @@ -468,6 +468,48 @@ --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559; + --token-tag-border-radius: 50px; + --token-tag-foreground-color-default: var(--token-color-foreground-primary); + --token-tag-icon-color: var(--token-color-foreground-primary); + --token-tag-link-border-color-primary: var(--token-color-border-strong); + --token-tag-link-border-color-secondary: var(--token-color-border-strong); + --token-tag-link-foreground-color-primary-active: var( + --token-color-foreground-action-active + ); + --token-tag-link-foreground-color-primary-default: var( + --token-color-foreground-action + ); + --token-tag-link-foreground-color-primary-hover: var( + --token-color-foreground-action-hover + ); + --token-tag-link-foreground-color-secondary-default: var( + --token-color-foreground-strong + ); + --token-tag-link-icon-color-primary: var(--token-color-foreground-primary); + --token-tag-link-icon-color-secondary: var( + --token-color-foreground-primary + ); + --token-tag-link-surface-color-primary-default: var( + --token-color-surface-interactive + ); + --token-tag-link-surface-color-primary-hover: var( + --token-color-surface-interactive-hover + ); + --token-tag-max-width: 166px; + --token-tag-padding-bottom: 5px; + --token-tag-padding-left: 10px; + --token-tag-padding-right: 10px; + --token-tag-padding-top: 3px; + --token-tag-surface-color-active: var( + --token-color-surface-interactive-active + ); + --token-tag-surface-color-default: var(--token-color-surface-interactive); + --token-tag-surface-color-hover: var( + --token-color-surface-interactive-hover + ); + --token-tag-typography-font-size: 0.8125rem; + --token-tag-typography-letter-spacing: 0px; + --token-tag-typography-line-height: 1.2308; --token-tooltip-border-radius: var(--token-border-radius-small); --token-tooltip-caret-clip-path: path( "M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z" @@ -809,6 +851,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -1149,6 +1215,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -1489,6 +1579,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -1829,6 +1943,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #161616; + --token-tag-icon-color: #161616; + --token-tag-link-border-color-primary: #78a9ff; + --token-tag-link-border-color-secondary: #a8a8a8; + --token-tag-link-foreground-color-primary-active: #0043ce; + --token-tag-link-foreground-color-primary-default: #0043ce; + --token-tag-link-foreground-color-primary-hover: #0043ce; + --token-tag-link-foreground-color-secondary-default: #161616; + --token-tag-link-icon-color-primary: #0043ce; + --token-tag-link-icon-color-secondary: #161616; + --token-tag-link-surface-color-primary-default: #d0e2ff; + --token-tag-link-surface-color-primary-hover: #b8d3ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #d1d1d1; + --token-tag-surface-color-default: #e0e0e0; + --token-tag-surface-color-hover: #d1d1d1; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -2169,6 +2307,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; @@ -2509,6 +2671,30 @@ --token-surface-low-box-shadow: none; --token-surface-mid-box-shadow: none; --token-surface-overlay-box-shadow: none; + --token-tag-border-radius: 16px; + --token-tag-foreground-color-default: #f4f4f4; + --token-tag-icon-color: #f4f4f4; + --token-tag-link-border-color-primary: #4589ff; + --token-tag-link-border-color-secondary: #8d8d8d; + --token-tag-link-foreground-color-primary-active: #d0e2ff; + --token-tag-link-foreground-color-primary-default: #d0e2ff; + --token-tag-link-foreground-color-primary-hover: #d0e2ff; + --token-tag-link-foreground-color-secondary-default: #f4f4f4; + --token-tag-link-icon-color-primary: #d0e2ff; + --token-tag-link-icon-color-secondary: #f4f4f4; + --token-tag-link-surface-color-primary-default: #0043ce; + --token-tag-link-surface-color-primary-hover: #0053ff; + --token-tag-max-width: 208px; + --token-tag-padding-bottom: 4px; + --token-tag-padding-left: 8px; + --token-tag-padding-right: 8px; + --token-tag-padding-top: 4px; + --token-tag-surface-color-active: #636363; + --token-tag-surface-color-default: #525252; + --token-tag-surface-color-hover: #636363; + --token-tag-typography-font-size: 0.75rem; + --token-tag-typography-letter-spacing: 0.32px; + --token-tag-typography-line-height: 1.33333; --token-tooltip-border-radius: 2px; --token-tooltip-caret-clip-path: polygon(0 100%, 50% 0, 100% 100%); --token-tooltip-caret-height: 6px; diff --git a/packages/tokens/dist/products/css/tokens.css b/packages/tokens/dist/products/css/tokens.css index 73161d316a1..7ac25929456 100644 --- a/packages/tokens/dist/products/css/tokens.css +++ b/packages/tokens/dist/products/css/tokens.css @@ -473,6 +473,30 @@ --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1); --token-tabs-indicator-transition-duration: 0.6s; --token-tabs-divider-height: 1px; + --token-tag-max-width: 166px; + --token-tag-padding-top: 3px; + --token-tag-padding-bottom: 5px; + --token-tag-padding-right: 10px; + --token-tag-padding-left: 10px; + --token-tag-border-radius: 50px; + --token-tag-surface-color-default: #ffffff; + --token-tag-surface-color-hover: #f1f2f3; + --token-tag-surface-color-active: #dedfe3; + --token-tag-foreground-color-default: #3b3d45; + --token-tag-typography-font-size: 0.8125rem; + --token-tag-typography-letter-spacing: 0px; + --token-tag-typography-line-height: 1.2308; + --token-tag-icon-color: #3b3d45; + --token-tag-link-border-color-primary: #3b3d4566; + --token-tag-link-border-color-secondary: #3b3d4566; + --token-tag-link-surface-color-primary-default: #ffffff; + --token-tag-link-surface-color-primary-hover: #f1f2f3; + --token-tag-link-foreground-color-primary-default: #1060ff; + --token-tag-link-foreground-color-primary-hover: #0c56e9; + --token-tag-link-foreground-color-primary-active: #0046d1; + --token-tag-link-foreground-color-secondary-default: #0c0c0e; + --token-tag-link-icon-color-primary: #3b3d45; + --token-tag-link-icon-color-secondary: #3b3d45; --token-tooltip-max-width: 280px; --token-tooltip-padding-horizontal: 12px; --token-tooltip-padding-vertical: 8px; diff --git a/packages/tokens/src/products/shared/tag.json b/packages/tokens/src/products/shared/tag.json new file mode 100644 index 00000000000..4eca6300e2c --- /dev/null +++ b/packages/tokens/src/products/shared/tag.json @@ -0,0 +1,316 @@ +{ + "tag": { + "max-width": { + "$type": "dimension", + "$value": "166", + "unit": "px", + "$modes": { + "default": "166", + "cds-g0": "208", + "cds-g10": "208", + "cds-g90": "208", + "cds-g100": "208" + } + }, + "padding": { + "top": { + "$type": "dimension", + "$value": "3", + "unit": "px", + "$modes": { + "default": "3", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + } + }, + "bottom": { + "$type": "dimension", + "$value": "5", + "unit": "px", + "$modes": { + "default": "5", + "cds-g0": "4", + "cds-g10": "4", + "cds-g90": "4", + "cds-g100": "4" + } + }, + "right": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + } + }, + "left": { + "$type": "dimension", + "$value": "10", + "unit": "px", + "$modes": { + "default": "10", + "cds-g0": "8", + "cds-g10": "8", + "cds-g90": "8", + "cds-g100": "8" + } + } + }, + "border": { + "radius": { + "$type": "dimension", + "$value": "50", + "unit": "px", + "$modes": { + "default": "50", + "cds-g0": "16", + "cds-g10": "16", + "cds-g90": "16", + "cds-g100": "16" + } + } + }, + "surface": { + "color": { + "default": { + "$type": "color", + "$value": "{color.surface.interactive}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundGray.g100}" + } + }, + "hover": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + } + }, + "active": { + "$type": "color", + "$value": "{color.surface.interactive-active}", + "$modes": { + "default": "{color.surface.interactive-active}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverGray.g100}" + } + } + } + }, + "foreground": { + "color": { + "default": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + } + } + } + }, + "typography": { + "font-size": { + "$type": "font-size", + "$value": "13", + "unit": "px", + "$modes": { + "default": "13", + "cds-g0": "{carbon.typography.label01.font-size}", + "cds-g10": "{carbon.typography.label01.font-size}", + "cds-g90": "{carbon.typography.label01.font-size}", + "cds-g100": "{carbon.typography.label01.font-size}" + } + }, + "letter-spacing": { + "$type": "letter-spacing", + "$value": 0, + "unit": "px", + "$modes": { + "default": 0, + "cds-g0": "{carbon.typography.label01.letter-spacing}", + "cds-g10": "{carbon.typography.label01.letter-spacing}", + "cds-g90": "{carbon.typography.label01.letter-spacing}", + "cds-g100": "{carbon.typography.label01.letter-spacing}" + } + }, + "line-height": { + "$type": "number", + "$value": 1.2308, + "$modes": { + "default": 1.2308, + "cds-g0": "{carbon.typography.label01.line-height}", + "cds-g10": "{carbon.typography.label01.line-height}", + "cds-g90": "{carbon.typography.label01.line-height}", + "cds-g100": "{carbon.typography.label01.line-height}" + } + } + }, + "icon": { + "color": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + } + } + }, + "link": { + "border": { + "color": { + "primary": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderBlue.g100}" + } + }, + "secondary": { + "$type": "color", + "$value": "{color.border.strong}", + "$modes": { + "default": "{color.border.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagBorderGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBorderGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBorderGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBorderGray.g100}" + } + } + } + }, + "surface": { + "color": { + "primary": { + "default": { + "$type": "color", + "$value": "{color.surface.interactive}", + "$modes": { + "default": "{color.surface.interactive}", + "cds-g0": "{carbon.themes.tagTokens.tagBackgroundBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagBackgroundBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagBackgroundBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagBackgroundBlue.g100}" + } + }, + "hover": { + "$type": "color", + "$value": "{color.surface.interactive-hover}", + "$modes": { + "default": "{color.surface.interactive-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagHoverBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagHoverBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagHoverBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagHoverBlue.g100}" + } + } + } + } + }, + "foreground": { + "color": { + "primary": { + "default": { + "$type": "color", + "$value": "{color.foreground.action}", + "$modes": { + "default": "{color.foreground.action}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + } + }, + "hover": { + "$type": "color", + "$value": "{color.foreground.action-hover}", + "$modes": { + "default": "{color.foreground.action-hover}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + } + }, + "active": { + "$type": "color", + "$value": "{color.foreground.action-active}", + "$modes": { + "default": "{color.foreground.action-active}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + } + } + }, + "secondary": { + "default": { + "$type": "color", + "$value": "{color.foreground.strong}", + "$modes": { + "default": "{color.foreground.strong}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + } + } + } + } + }, + "icon": { + "color": { + "primary": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorBlue.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorBlue.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorBlue.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorBlue.g100}" + } + }, + "secondary": { + "$type": "color", + "$value": "{color.foreground.primary}", + "$modes": { + "default": "{color.foreground.primary}", + "cds-g0": "{carbon.themes.tagTokens.tagColorGray.white}", + "cds-g10": "{carbon.themes.tagTokens.tagColorGray.g10}", + "cds-g90": "{carbon.themes.tagTokens.tagColorGray.g90}", + "cds-g100": "{carbon.themes.tagTokens.tagColorGray.g100}" + } + } + } + } + } + } +} \ No newline at end of file diff --git a/showcase/app/components/page-carbonization/components/tag/index.gts b/showcase/app/components/page-carbonization/components/tag/index.gts new file mode 100644 index 00000000000..4df275ee8e4 --- /dev/null +++ b/showcase/app/components/page-carbonization/components/tag/index.gts @@ -0,0 +1,246 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { eq, notEq, and } from 'ember-truth-helpers'; +import { capitalize } from '@ember/string'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwTextH3 from 'showcase/components/shw/text/h3'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; +import NOOP from 'showcase/utils/noop'; + +import { HdsTag } from '@hashicorp/design-system-components/components'; +import { COLORS } from '@hashicorp/design-system-components/components/hds/tag/index'; + +// these are used only for presentation purpose in the showcase +const STATES = ['default', 'hover', 'active', 'focus']; + +const TagCarbonizationIndex: TemplateOnlyComponent = + {{pageTitle "Tag - Carbonization"}} + + Tag - Carbonization + + + + Plain text + + + <:theming> + + + + + + + + + + + + + + + + <:reference> + + + Lorem ipsum + + + + + + This is a very long text that should go on multiple lines + + + + + + + + + + + Links + + {{#each COLORS as |color|}} + {{capitalize color}} + + <:theming> + + + + + + + + + + + + + + + + <:reference> + {{#if (notEq color "secondary")}} + + + + + + + + + + + + + {{else}} + n/a + {{/if}} + + + {{/each}} + + + + States + + Plain text + + {{#each STATES as |state|}} + + <:theming> + + + <:reference> + {{#if (eq state "default")}} + + {{else}} + TODO: add static image here + {{/if}} + + + {{/each}} + + Links + + {{#each COLORS as |color|}} + {{capitalize color}} + {{#each STATES as |state|}} + + <:theming> + + + + + + + + + + <:reference> + {{#if (and (eq state "default") (notEq color "secondary"))}} + + + + {{else if (eq color "secondary")}} + n/a + {{else}} + TODO: add static image here + {{/if}} + + + {{/each}} + {{/each}} + +; + +export default TagCarbonizationIndex; diff --git a/showcase/app/index.html b/showcase/app/index.html index 74978589221..a86882450c5 100644 --- a/showcase/app/index.html +++ b/showcase/app/index.html @@ -61,6 +61,7 @@ src="https://1.www.s81c.com/common/carbon/web-components/version/v2.48.0/text-input.min.js"> +
n/a
TODO: add static image here