← All updates

Watson update #6

Grzegorz Poradko

Breaking changes in CSS Tokens

During the Figma variables effort, we are encountering some issues and inconsistencies with component tokens. Here you have a list with changed tokens per component.

Button

removed:

  • --w-button-box-shadow-gap-focus
  • --w-button-box-shadow-outline-focus
  • --w-button-color-border-inverted

added:

  • --w-button-plain-outline-focus

changed:

  • --w-button-color-border-accent → --w-button-primary-outline-focus

Checkbox

added:

  • --w-checkbox-icon-color-error

Fieldset

removed:

  • --w-fieldset-hint-margin
  • --w-fieldset-error-margin
  • --w-fieldset-radio-size

Tabs

removed:

  • --w-tabs-color-background

Tabs item

removed:

  • --w-tabs-item-icon-spacing

added:

  • --w-tabs-item-height

changed:

  • --w-tabs-item-padding-vertical → --w-tabs-item-padding-horizontal

Combobox

added:

  • --w-combobox-trigger-multiselect-options-color-foreground

Step indicator

changed:

  • --w-step-indicator-label-color → --w-step-indicator-label-color-foreground

changed:

  • --w-modal-background-color → --w-modal-color-background
  • --w-modal-backdrop-color → --w-modal-backdrop-color-background
  • --w-modal-footer-border-color → --w-modal-footer-color-border
  • --w-modal-footer-background → --w-modal-footer-color-background
  • --w-modal-header-border-color → --w-modal-header-color-border

Bug fixes

  • Fixed issue with update position in WTooltip.