Update Design Tokens

Amanda Wallin

Release notes

Deprecated tokens with new replacement:

  1. color.fill.morkHimmel → color.fill.himmel2
  2. color.fill.svart4Procent → color.fill.quaternary
  3. color.fill.hostlov451 → color.fill.hostlov2
  4. color.border.focus → color.border.focused
  5. color.border.borderSvart42Procent → color.border.input
  6. color.border.borderSvart60Procent → color.border.input
  7. color.label.hostlov451 → color.text.hostlov2
  8. global.borderWidth.medium → global.dimension.borderWidth.md

New tokens:

Shadow tokens:
  1. global.shadow.chromeBottom
  2. global.shadow.chromeTop - new shadow token for chrome UI elements (top edge)
  3. global.shadow.chromeRight - new shadow token for chrome UI elements (right edge)
Dimension tokens:
  1. global.dimension.backgroundBlur.chrome
  2. global.dimension.borderWidth.*
Color tokens:
  1. color.miscellaneous.chrome*
  2. color.background.primaryLevel1/2, secondaryLevel1/2, tertiaryLevel1/2
  3. color.fill.quaternary

Deprecated tokens without replacement:

  1. global.backdropFilter.resting
  2. global.shadow.resting
  3. color.fill.sjPrioVit
  4. color.fill.sjPrioGra
  5. color.fill.sjPrioSvart

To be updated later:

  1. Border radius tokens: S3CM-2597
  2. Breakpoint tokens: S3CM-2617
  3. Spacing tokens: Will be updated in a future PI. No Jira yet.
  4. Grid tokens: Will be updated in a future PI. No Jira yet.
  5. Typography tokens: S3CM-2644

Ärende

Ändrade komponenter

Dependency bumpar

  • assets/assets

  • envs/custom-env-stencil

  • hooks/use-detect-enlarged-font

  • hooks/use-live-announcer

  • hooks/use-on-click-outside

  • props/accordion-props

  • props/journey-card-types

  • props/journey-summary-types

  • props/link-props

  • props/navigation-button-props

  • props/navigation-props

  • props/transport-details-types

  • styles/colors

  • styles/fonts

  • styles/styles

  • translations/date-picker-translation

  • translations/departure-card-translation

  • translations/journey-summary-translation

  • translations/resizeable-sheet-translation

  • translations/route-description-translation

  • translations/translation-types

  • translations/transport-details-translation

  • translations/travel-time-translation

  • ui/accordion

  • ui/accordion-card

  • ui/accordion-details

  • ui/accordion-summary

  • ui/action-buttons

  • ui/bottom-sheet-swipeable

  • ui/button-group

  • ui/card-action-area

  • ui/card-actions

  • ui/card-content

  • ui/card-header

  • ui/card-media

  • ui/card-secondary-text

  • ui/checkbox-card

  • ui/choose-multiride-card-skeleton

  • ui/collapse

  • ui/config-provider

  • ui/container

  • ui/date-field

  • ui/departure-card-skeleton

  • ui/dialog

  • ui/divider

  • ui/empty-state

  • ui/error-summary-card

  • ui/execute-button

  • ui/form-control-label

  • ui/form-group

  • ui/form-helper-text

  • ui/grid

  • ui/icon

  • ui/icon-button-card

  • ui/icons

  • ui/image

  • ui/journey-card

  • ui/journey-summary

  • ui/link

  • ui/list

  • ui/list-image

  • ui/list-item

  • ui/list-item-button

  • ui/list-item-icon

  • ui/list-item-secondary-action

  • ui/list-item-text

  • ui/list-subheader

  • ui/localization-provider

  • ui/logo

  • ui/menu-item-icon

  • ui/navigation-button

  • ui/page-transition

  • ui/paper

  • ui/payment-method

  • ui/pickers-day

  • ui/product-card

  • ui/prominent-action-button

  • ui/radio-button-card

  • ui/resizeable-sheet

  • ui/sheet

  • ui/side-sheet

  • ui/sj-icon

  • ui/sj-spinner

  • ui/spacing

  • ui/stack

  • ui/station-picker

  • ui/status-text

  • ui/stepper

  • ui/svg-icon

  • ui/swipable-tab-panels

  • ui/switch-list-item

  • ui/tab

  • ui/tab-panel

  • ui/text-list

  • ui/theme-provider

  • ui/title

  • ui/trains

  • ui/transport-details

  • ui/transport-image

  • ui/transport-summary

  • ui/travel-time

  • ui/virtualized-list

  • utils/card-limited-click-area

  • utils/card-meta-text

  • utils/date-time-format-util

  • utils/duration-utils

  • utils/input-card-content

  • utils/live-announcer-util

  • utils/localization-util

  • utils/mock-link

  • utils/navigation-utils

  • utils/price-card-content

  • utils/screen-reader-utils

  • utils/soft-hyphen-utils

  • utils/string-utils

  • utils/translations-util