Design update Phase 1 - Githubissues

alexasselin008 commented 1 year ago

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.
border radius rounded has been removed, use the value 2 instead.
- borderRadius="rounded" becomes borderRadius={2}
- border-radius: var(--o-ui-br-rounded); becomes border-radius: var(--o-ui-br-2);
The Card component visually changed drastically, so this could be considered breaking. If you want the same look as before, add variant="outline" to the card.

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.

netlify[bot] commented 1 year ago

Deploy Preview for sg-orbit ready!

Name	Link
Latest commit	508ea34dcef2cfb38d02e77b48abf032fe4fbac3
Latest deploy log	https://app.netlify.com/sites/sg-orbit/deploys/639a8cc42b9bc700096e9855
Deploy Preview	https://deploy-preview-1075--sg-orbit.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] commented 1 year ago

Deploy Preview for sg-storybook ready!

Name	Link
Latest commit	508ea34dcef2cfb38d02e77b48abf032fe4fbac3
Latest deploy log	https://app.netlify.com/sites/sg-storybook/deploys/639a8cc4dc146c00084b2aef
Deploy Preview	https://deploy-preview-1075--sg-storybook.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

patricklafrance commented 1 year ago

I am a bit skeptical regarding that legacy theme given the fact that the rebrand doesn't only involves swapping tokens, it also introduce new tokens and some changes related to the component.

For example, the card component will not have a border by default in the rebrand, how would you implement this with the legacy theme?

alexasselin008 commented 1 year ago

I am a bit skeptical regarding that legacy theme given the fact that the rebrand doesn't only involves swapping tokens, it also introduce new tokens and some changes related to the component.

For example, the card component will not have a border by default in the rebrand, how would you implement this with the legacy theme?

~~The legacy theme isn't perfect in any way, but it will help us transition a bit smoother.~~

~~All the new UI can be iteratively released as soon as they are coded, except 3 changes:~~ ~~- Purple Shadows must be released at the same time in every app~~ ~~- The grey background (bg-app) must be released in all app at the same time~~ ~~- The border radius must be released at the same time in every app.~~

The legacy theme will allow teams to implement the new change and prevent the shadows and background from being affected. For the border radius, we have no other choice but to wait at the last minute and update them all in orbit and apps, since they have no semantic tokens.

The legacy theme will be used for approximatively 3 weeks, then removed. If we had only 1 app, i would of hardcoded it directly in the app's codebase, but with 5 apps its easier to code it here and remove it later

Change of plan, we don't need it anymore according to pierre

patricklafrance commented 1 year ago

@fraincs I am not sure I understand the naming strategy here. From my understanding you are now using numerical values and textual values for the BR?

If so, how do you choose when you use a numerical value vs a textual value?

patricklafrance commented 1 year ago

I think the selected value will require additional emphasis:

patricklafrance commented 1 year ago

By the way, those super accentuated rounded borders, isn't it what we went away from in the latest rebrand?

alexasselin008 commented 1 year ago

@fraincs I am not sure I understand the naming strategy here. From my understanding you are now using numerical values and textual values for the BR?

If so, how do you choose when you use a numerical value vs a textual value?

This is the existing naming, we havent modified anything yet.

I must admit that i'm not sure if i should use 2 or rounded most of the time.

alexasselin008 commented 1 year ago

issue with modal focus ring

patricklafrance commented 1 year ago

@fraincs I am not sure I understand the naming strategy here. From my understanding you are now using numerical values and textual values for the BR? If so, how do you choose when you use a numerical value vs a textual value?

This is the existing naming, we havent modified anything yet.

I must admit that i'm not sure if i should use 2 or rounded most of the time.

Oh well, I guess I would not modify it then and introduce a breaking change

gsoft-inc / sg-orbit

Design update Phase 1 #1075

Breaking

Other Changes