feat: [M3-7579] - Design Tokens (CDS 2.0) #10022

jaalah-akamai · 2023-12-27T18:52:27Z

Description 📝

Initial pass to replace the hard-coded styles in the light.ts theme file with their corresponding design tokens, so that we can achieve consistency in styling and facilitate future theming. We will be doing more structural changes to the theme files in the near future. These design tokens are in sync with Core Design System (CDS) 2.0 decisions being made for Akamai.

Benefits:

Single source of truth for design decisions
Autocompletion
Type Checking / Inference
Design consistency across Akamai projects

Changes 🔄

New dependency "@linode/design-language-system": "^1.0.0"
- https://github.com/linode/design-language-system
Updated some of our status colors in the app to use the equivalent design token
Storybook color palettes have been updated automatically.

Preview 📷

Before	After

How to test 🧪

Prerequisites

Checkout branch
yarn install && yarn build && yarn dev

Reproduction steps

Go to http://localhost:3000

Verification steps

Observe differences compared to https://cloud.linode.com/

As an Author I have considered 🤔

Check all that apply

jaalah-akamai · 2023-12-27T18:54:45Z

packages/manager/src/features/Users/UserPermissionsEntitySection.tsx

@@ -6,45 +6,47 @@
 * I'll create a tech debt ticket in jira to keep track of this issue.


This entire file was untouched - I just ran ESLINT against it.

jaalah-akamai · 2023-12-27T18:55:41Z

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts

@@ -75,8 +75,8 @@ const useStyles = makeStyles<void, 'linkItem'>()(
          opacity: 1,
        },
        '& svg': {
-          color: theme.color.teal,
-          fill: theme.color.teal,


Teal was green in production, whereas it's actually teal with new design tokens. I just updated this to use our new status color for success (green).

bnussman-akamai

Neat! It's gonna take me a bit to get use to all of the new colors, but things look solid!

The table header looks much different, and slightly less appealing now in my opinion. Is this change to bring us into alignment with Akamai's tables?

jaalah-akamai · 2024-01-02T19:03:57Z

The table header looks much different, and slightly less appealing now in my opinion. Is this change to bring us into alignment with Akamai's tables?

Yes! The table will look much different once we actually apply the Table tokens. We can either decide to make that change now or in an upcoming PR. I was hesitant in doing anything drastic with this first PR and was more trying to do a 1:1 mapping.

packages/manager/src/foundations/themes/light.ts

…or color

abailly-akamai · 2024-06-18T02:42:46Z

packages/manager/src/foundations/themes/dark.ts

+          borderColor: Select.Default.Border,
+          // TODO: designTokens - figure out why:
+          // - Select.Default.Text and Select.Focus.Text would be different colors
+          // - Why Select.Default.Text (#a3a3ab) looks like a disabled color (maybe that's just the discrepancy)


@jaalah-akamai any idea about this one? I changed it for now but using Select.Default.Text looks like a disabled style then color changes on focus which is not what we want

dwiley-akamai

Visually audited the app in light and dark mode ✅

Nice work, I like some aspects of this better than the current design, such as the blue hover/selection state for primary nav items instead of green.

Screenshots & Questions

Do we expect to keep the jet black background? It feels a bit jarring. And it looks like we have some stray miscoloration in the bottom left.
Do we expect to keep the light gray borders/outlines on the elements? It makes the app look busier than the current dark gray borders/outlines IMO.

bnussman-akamai

List of things I've noticed. Looks great!

Note

I might keep adding stuff to this comment so keep an eye out for new items added

Popovers/Menus have no contrast

I feel like popovers/menus should have a different background color than the app's background color.

Top Nav icon colors inconsistant

Can we make the hamburger icon the same color as the other ones?

Random black in the bottom left on smaller viewports

Can this be fixed?

Can we add a contrasting background color to the footer?

Previously, we only had contrast in dark mode. I'd personally like to see the footer have a contrasting background color it in both themes

Can we make entity icons not green?

I'm not sure if these were intentionally kept green. Can we make then blue, gray, or white?

…ai/manager into feature/design-tokens-cds-v2

abailly-akamai · 2024-06-24T16:25:21Z

Addressed some of the feedback from @dwiley-akamai & @bnussman-akamai which I will list here (dark theme only, did not touch light theme):

Do we expect to keep the jet black background? It feels a bit jarring. And it looks like we have some stray miscoloration in the bottom left.

miscoloration (also mentioned by Banks) has been fixed
i had to re-work the jet-black/primary nav/top nav handling cause styling was a bit broken - eventually the jet black will be our top bar bg (CDS styles) but we will have to rework how the primary nav is built to make them work together. for now i lightened it some to transition over smoothly to the future CDS styles and kept the sidebar somewhat similar to what it is now (darker) to minimize impact and keep experience nice

Do we expect to keep the light gray borders/outlines on the elements? It makes the app look busier than the current dark gray borders/outlines IMO.

yes, these are the styles for CDS 2.0 which Cloud Manager is adopting now and will increase adoption in the next major update

Popovers/Menus have no contrast

yeah i agree this isn't the best experience so I added contrast back

Top Nav icon colors inconsistent

fixed!

Can we add a contrasting background color to the footer?

leaving this one out cause the light theme does not have it and i don't think we need to in the dark mode either (trying to keep themes consistent in terms of main elements)

Can we make entity icons not green?

That will be coming in the future but for now marketing/product styling is out of scope.

jaalah added 7 commits November 13, 2023 14:44

Add design tokens

62481fd

Updates to status colors

9c4d3c7

Saving...

21df7ea

Saving...

bfaaf04

Version 14

27c0a58

Update latest from upstream/develop

cacf334

Update version to v1.0.0

945d4fa

jaalah-akamai added Ready for Review Design Tokens Laying the groundwork for Design Tokens labels Dec 27, 2023

jaalah-akamai self-assigned this Dec 27, 2023

jaalah-akamai requested a review from a team as a code owner December 27, 2023 18:52

jaalah-akamai requested review from coliu-akamai and tyler-akamai and removed request for a team December 27, 2023 18:52

Added changeset: Added Design Tokens (CDS 2.0)

489b955

jaalah-akamai commented Dec 27, 2023

View reviewed changes

jaalah-akamai marked this pull request as draft December 28, 2023 15:41

jaalah-akamai removed the Ready for Review label Dec 28, 2023

jaalah added 2 commits December 28, 2023 15:10

Update to latest version

5440011

Revert

55cb2c8

jaalah-akamai added Work in Progress and removed Work in Progress labels Dec 28, 2023

jaalah-akamai marked this pull request as ready for review December 29, 2023 18:41

jaalah-akamai added the Ready for Review label Dec 29, 2023

Bump version

a3eebdf

bnussman-akamai reviewed Jan 2, 2024

View reviewed changes

packages/manager/src/foundations/themes/light.ts Show resolved Hide resolved

Updates to chip palette and update endpoint palette to use darker err…

d4c864c

…or color

jaalah added 5 commits June 3, 2024 12:51

Minor

256b8df

Add feature flag

7bba247

More updates

4ca76cf

Merge latest from dev

816566e

Modal close

c2b649b

jaalah-akamai requested a review from a team as a code owner June 4, 2024 21:29

jaalah-akamai requested review from jdamore-linode and removed request for a team June 4, 2024 21:29

jaalah-akamai added Ready for Review and removed Do Not Merge labels Jun 4, 2024

jaalah and others added 5 commits June 6, 2024 13:56

Nearing the end

efa6628

Fix merge conflicts

9d1f0b6

update snapshots

0908a39

Snaclbar and placeholder update

0013870

Tefield updates dark theme

680c68e

abailly-akamai reviewed Jun 18, 2024

View reviewed changes

Update to menu items

bf597dc

dwiley-akamai self-requested a review June 18, 2024 21:31

react select placeholder

72ffaea

dwiley-akamai approved these changes Jun 20, 2024

View reviewed changes

bnussman-akamai approved these changes Jun 20, 2024

View reviewed changes

abailly-akamai and others added 5 commits June 21, 2024 13:27

feedback @dwiley-akamai

45d7432

feedback

347c06f

Revert nav hover colors back to Linode green

dea0ed3

Merge branch 'feature/design-tokens-cds-v2' of github.com:jaalah-akam…

f7ac08f

…ai/manager into feature/design-tokens-cds-v2

last feedback bit

936b181

abailly-akamai merged commit fc680a6 into linode:develop Jun 24, 2024
17 of 18 checks passed

This was referenced Jul 8, 2024

Release v1.123.0 - release → staging #10648

Merged

Release v1.123.0 - staging → master #10652

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-7579] - Design Tokens (CDS 2.0) #10022

feat: [M3-7579] - Design Tokens (CDS 2.0) #10022

jaalah-akamai commented Dec 27, 2023 •

edited

Loading

jaalah-akamai Dec 27, 2023

jaalah-akamai Dec 27, 2023 •

edited

Loading

bnussman-akamai left a comment

jaalah-akamai commented Jan 2, 2024

abailly-akamai Jun 18, 2024

dwiley-akamai left a comment

bnussman-akamai left a comment •

edited

Loading

abailly-akamai commented Jun 24, 2024

		@@ -6,45 +6,47 @@
		* I'll create a tech debt ticket in jira to keep track of this issue.

feat: [M3-7579] - Design Tokens (CDS 2.0) #10022

feat: [M3-7579] - Design Tokens (CDS 2.0) #10022

Conversation

jaalah-akamai commented Dec 27, 2023 • edited Loading

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Prerequisites

Reproduction steps

Verification steps

As an Author I have considered 🤔

jaalah-akamai Dec 27, 2023

Choose a reason for hiding this comment

jaalah-akamai Dec 27, 2023 • edited Loading

Choose a reason for hiding this comment

bnussman-akamai left a comment

Choose a reason for hiding this comment

jaalah-akamai commented Jan 2, 2024

abailly-akamai Jun 18, 2024

Choose a reason for hiding this comment

dwiley-akamai left a comment

Choose a reason for hiding this comment

bnussman-akamai left a comment • edited Loading

Choose a reason for hiding this comment

abailly-akamai commented Jun 24, 2024

jaalah-akamai commented Dec 27, 2023 •

edited

Loading

jaalah-akamai Dec 27, 2023 •

edited

Loading

bnussman-akamai left a comment •

edited

Loading