- Legacy tokens and their definitions were moved into private package and are no longer available in this package
- Removed token
ColorBaseBlack
, it is no longer needed according to latest UX specs
- values for legacy tokens:
radius-input-100
color-border-input
shadow-focus-100
color-border-100
color-border-500
shadow-focus-100
color-bg-input-error
color-border-error
shadow-focus-error
color-border-300
color-bg-interactive-100
color-bg-interactive-300
radius-button-100
color-bg-interactive-300-hover
color-bg-interactive-300-pressed
color-focus-300
- values of some dark theme tokens to get better visibility
- values spacing according to values in Figma
- shadow none value according value in Figma
- values of some dark theme tokens to get better visibility
- new font token:
font-specific-header-logo
- new tokens:
sizing-item-035
sizing-item-250
sizing-item-350
sizing-item-450
sizing-item-480
sizing-item-600
sizing-item-620
sizing-item-680
sizing-item-700
sizing-item-750
sizing-item-780
sizing-item-800
sizing-item-850
sizing-item-900
opacity-interactive-default
opacity-interactive-hover
opacity-interactive-selected
opacity-interactive-pressed
- new tokens:
ColorBrandCjm100
ColorBrandCjm200
ColorBrandBatchProduction100
ColorBrandBatchProduction200
-
new tokens:
SizingModal100
SizingModal150
SizingModal200
SizingModal300
ColorBrandDefault100
ColorBrandDefault200
ColorBrandContentAuthor100
ColorBrandContentAuthor200
ColorBrandDigitalServices100
ColorBrandDigitalServices200
ColorBrandFrontOffice100
ColorBrandFrontOffice200
ColorBrandInspire100
ColorBrandInspire200
ColorBrandMessenger100
ColorBrandMessenger200
ColorBrandOmnichannel100
ColorBrandOmnichannel200
ColorBrandOnDemand100
ColorBrandOnDemand200
-
ColorBrand100 and ColorBrand200 tokens used ColorBrandDefault100 and ColorBrandDefault200 tokens as values, so there is new brandDefault.json file
- changed value of token
legacyTheme/strong/size
from 14px to 13px
- new tokens:
sizing-device-desktop: 1280px
sizing-device-desktop-large: 1440px
- new tokens:
focus-100
focus-error
focus-warning
- new tokens:
duration-500
duration-550
duration-600
duration-700
duration-800
shadow-focus-100
shadow-focus-error
shadow-focus-warning
sizing-spinner-050
- token names (remove doubled bg prefix):
color-bg-error-100
color-bg-warning-100
color-bg-info-100
color-bg-success-100
- new tokens:
sizing-spinner-100
sizing-spinner-200
sizing-spinner-300
sizing-spinner-400
sizing-spinner-500
sizing-spinner-600
sizing-spinner-700
sizing-spinner-800
color-bg-error-100
color-bg-warning-100
color-bg-info-100
color-bg-success-100
- removed token
sizing-item-000
usesizing-item-075
instead
- value of
color-bg-switch-handle-positive
color-bg-switch-positive
color-bg-switch-negative
- new tokens:
sizing-item-020
sizing-item-030
sizing-item-040
sizing-item-050
sizing-item-075
sizing-item-100
color-icon-info
color-icon-success
font-note
- new token
color-chart-grey-100
- value of
color-text-400
token for dark theme
- new tokens:
spacing-000
,font-xsmall-*
- new tokens:
sizing-item-450
sizing-icon-500
border-width-500
border-width-600
border-width-700
duration-100
duration-150
duration-200
duration-250
duration-300
duration-350
duration-400
easing-standard
easing-decelerated
easing-accelerated
color-text-error
color-text-warning
color-bg-ui-300-inverted
color-text-300
value for dark theme
fontSize
andfontWeight
values of fontstrong
for legacy theme
- used
Rubik
andQuicksand
as default fonts - font
caption
tokens were renamed tolabel
- font
navigation
tokens were renamed tostrong
- font
heading
tokens were updated according latest UX spec
- new legacy font tokens with
Open Sans
font family - new tokens for sizing
- new values for legacy theme
- new tokens for charts:
color-chart-amethyst-violet-500
color-chart-amethyst-violet-300
color-chart-lavender-violet-500
color-chart-lavender-violet-300
color-chart-dark-blue-500
color-chart-dark-blue-300
- new token
color-bg-tab-pressed
- token value for:
color-bg-interactive-400
color-bg-interactive-400-hover
color-bg-interactive-400-selected
color-bg-interactive-400-pressed
color-text-100
color-text-300
color-bg-tab
color-bg-tab-hover
color-bg-tab-selected
- new tokens according latest UX specification:
- angle-100
- angle-200
- angle-300
- angle-400
- angle-500
- angle-600
- angle-700
- angle-800
- color-brand-100
- color-brand-200
- color-bg-ui-300
- color-icon-100-hover
- color-icon-100-selected
- color-icon-100-pressed
- color-icon-400
- color-base-grey-050
- color-base-grey-150
- color-base-grey-850
- color-base-grey-950
- gradient-app-logo
- gradient-app-header-stripe
- gradient-sign-in-bg
- interactive200-hover
- interactive200-selected
- interactive200-pressed
- opacity-base-050
- opacity-base-150
- opacity-base-850
- opacity-base-950
- radius-input-100
- radius-button-100
- radius-button-200
- radius-list-100
- radius-container-100
- radius-base-100
- radius-base-200
- radius-base-300
- radius-base-400
- radius-base-500
- radius-base-600
- radius-base-none
- radius-base-full
- radius-base-pill
- removed tokens according latest UX specification:
- color-brand (use color-brand-100 instead)
- radius-100 (use radius-base-100 instead)
- radius-200 (use radius-base-200 instead)
- radius-300 (use radius-base-300 instead)
- radius-400 (use radius-base-400 instead)
- radius-500 (use radius-base-500 instead)
- radius-none (use radius-base-none instead)
- radius-full (use radius-base-full instead)
- radius-pill (use radius-base-pill instead)
- value of many tokens according latest UX specification
- new tokens according latest UX specification:
- color-border-input
- color-bg-input
- color-bg-input-error
- color-bg-input-warning
- color-bg-switch-positive
- color-bg-switch-negative
- color-bg-switch-handle-positive
- color-bg-switch-handle-negative
- First version with latest tokens according latest UX specification
- Default and dark theme
- Action and transformation for colors with opacity
- Example with theme switching