Skip to content

Next release

Alexandre Asselin edited this page Dec 14, 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.

Other Changes

  • 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.
  • bg-alias-underlay token has been added which allows you to specify a background-color for the underlay of an element.
  • b-alias-accent token value has been modified 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.
  • The close button on popover has been moved slightly since the border radius changed.

Bug Fix

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

Migration path

  • Your app body is most likely using bg-alias-default replace it with bg-alias-surface this is a temporary step as eventually your app should use bg-alias-body which is a light gray colour.
  • 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