Skip to content

Next release

Jump to bottom
Francis Thibault edited this page Dec 13, 2022 · 81 revisions

This release is the phase 1 of the redesign. It introduces the required stepping blocks to tokens and component styles in order to do the relooking of the apps.

Breaking

  • bg-alias-default token has been removed, it has been replaced by bg-alias-surface to acknowledge the design update. You can use bg-alias-surface on your app body/html element before implementing the new design.
  • Reduced the number of shadow tokens from 4 to 2. This will simplify the process of applying shadows to your components, while having no reduction in visual impact. --o-ui-bs-alias-lifted is used for anything above the app's background level, and --o-ui-bs-alias-floating is used for anything that is over other content.

Addon

  • bg-alias-surface token has been added, this background colour should be used on anything that is one layer above the page body.
  • bg-alias-body token has been added, this background colour should only be used on the body, html tag of an app.
  • Added a theme Selector in Storybook to easily switch between different themes, allowing you to preview how your components will look with different colour schemes.
  • Added a LegacyTheme to help you with the transition to the design update. This theme will allow you to continue using the old look and feel until you are ready to switch to the new one.
  • bg-alias-underlay token has been added which allows you to specify a background-color for the underlay of an element.
  • Modified the b-alias-accent token value to a darker shade of purple (purple-4 => purple-6).
  • Accordion box shadow has been modified to match the new look and feel of the theme.
  • Added shadow to default card it now has a box shadow by default.
  • Added a variant outline to the card component use on the card component to create cards with an outline style, which is ideal for use in sections.
  • Increased tab underline from 2px to 4px, providing a more prominent visual indication of the active tab.
  • The look of the tile component has been updated to match the new theme.

Bug Fix

  • We don't introduce bugs, who am I kidding. This release is not fixing any bugs.

Migration path

  • While migrating to the finalized version of our new design, use the LegacyTheme.
  • Replace all usages of the bg-alias-default token to bg-alias-surface.
  • If you are using box shadows tokens in your app, we simplified them if something is floating on the page (Modal, Popover) use floating, otherwise use lifted. Here's the old mapping in case you are not using the named shadows.

image

Clone this wiki locally