Use new tokens throughout Glide Core #750

ynotdraw · 2025-03-07T21:04:05Z

🚀 Description

This PR is pretty massive. I broke the changes into chunks. Feel free to review by commit as well (I'll be sure to squash on merge!).

Token Updates

We removed almost all of our old tokens in favor of the new ones using the code from #732. This moves every component to our new tokens using the script I wrote (and some manual ❤️). There's a lot here, sorry! But this brings us about 90% aligned with the new designs. The remaining 10% will be worked on over the next few weeks in downstream PRs as they're lower priority.

CSS Variable Generation Updates

Moved to a constants.ts file for all configuration related items. This simplified the arguments to the different functions.

Line heights are now generated using rem values to match design.

I updated our Figma fetching code to allow for extended styles. Extended styles are variables local to a component. They are prefixed with --glide-core-private-. We need to expose them due to the way our stylesheets work with themes. The hope is that the name -private- prevents folks from using them directly.

Rather than making all 146 extended styles available, we use a subset of them via the extendedVariables array.

CEM Shuffling

Moved ../library/get-parent-class-name.js out from library and into the cem-analyzer-plugins directory instead. Figma code is all colocated. CEM plugin code can/should be too?

📋 Checklist

I have followed the Contributing Guidelines.
I have added tests to cover new or updated functionality.
I have added or updated Storybook stories.
I have localized new strings.
I have followed the ARIA Authoring Practices Guide or met with the Accessibility Team.
I have included a changeset.
I have scheduled a design review.
I have reviewed the Storybook and Visual Test Report links below.

🔬 Testing

Review Storybook and see if anything is totally busted. The visual tests failing are expected. Here is a high-level overview of some of the main changes:

Most line-heights were removed
- This was something we did in v2 to account for Figma's text trimming
- Talked with Zheng - we no longer need this for most cases
- This means that some content will be pushed slightly down when viewing the VRT report
- There are still a few components leveraging them. These will be cleaned up in another PR, along with some other updates.
Button secondary and tertiary states have been redesigned
Button colors in dark mode have been changed to different values
Icon Button was updated to follow Button's changes
Checkbox when indeterminate and disabled has a new visual design
Split Button was visually redesigned
Radio's selected, hover, and disabled visuals were updated.
Box shadow values have changed and been redesigned. They're now named differently as well.

I've gone through all 377 visual test failures a couple of times now and everything looks expected to me 👍.

📸 Images and videos

Too many to list 😆 ! Viewing the visual test report is a good place to go.

changeset-bot · 2025-03-07T21:04:08Z

🦋 Changeset detected

Latest commit: e012f31

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@crowdstrike/glide-core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-03-07T21:06:25Z

Storybook

https://glide-core.crowdstrike-ux.workers.dev/use-new-tokens

github-actions · 2025-03-07T21:07:52Z

⚠️ Visual Test Report

https://glide-core.crowdstrike-ux.workers.dev/use-new-tokens/visual-test-report

ynotdraw · 2025-03-12T12:32:17Z

src/button-group.button.styles.ts

      border-start-end-radius: 0.6875rem;
    }

    :host(:last-of-type) .component.vertical {
+      border-block-end: none;


Needed to match the new designs. Otherwise the border looked doubled-up on the end with the other changes in this file.

ynotdraw · 2025-03-12T12:32:56Z

src/button-group.button.styles.ts

+          &:hover {
+            background-color: var(
+              --glide-core-color-interactive-surface-container--hover
+            );
+            border-color: var(
+              --glide-core-color-interactive-surface-container--hover
+            );
+            color: var(--glide-core-color-interactive-text-link);
+          }


Button Group Button when selected now has hover styles according to the designs 🎉

ynotdraw · 2025-03-12T12:35:25Z

src/cem-analyzer-plugins/add-custom-properties.ts

@@ -9,7 +9,7 @@ import {
  type Node,
 } from 'typescript';
 import postcss, { Comment, Declaration, Rule } from 'postcss';
-import getParentClassName from '../library/get-parent-class-name.js';
+import getParentClassName from './get-parent-class-name.js';


Moved ../library/get-parent-class-name.js out from library and into the cem-analyzer-plugins directory instead. Figma code is all colocated. CEM plugin code can/should be too?

ynotdraw · 2025-03-12T12:54:45Z

src/checkbox.styles.ts

+        .indeterminate-icon {
+          fill: var(--glide-core-private-color-checkbox-icon-default--disabled);
+          stroke: var(
+            --glide-core-private-color-checkbox-icon-default--disabled
+          );
+        }


Checkbox when indeterminate and disabled has a new visual design

ynotdraw · 2025-03-12T13:00:58Z

src/figma/constants.ts

Moved to a constants.ts file for all configuration related items. This simplified the arguments to the different functions.

ynotdraw · 2025-03-12T13:33:25Z

src/figma/constants.ts

+// This information can be found in Figma's
+// Deatils modal when clicking on an extended
+// style by combining the collection information
+// with the variable's full name.


As an example:

Can copy the collection (bottom) and the full variable name (top)

ynotdraw · 2025-03-12T13:34:11Z

.gitignore

These are no longer needed now that we've moved over to the new token code

ynotdraw · 2025-03-12T13:34:30Z

custom-elements.json

Due to whitespace trimming in src/cem-analyzer-plugins/add-slots.ts

ynotdraw · 2025-03-12T13:34:54Z

src/styles/variables/miscellaneous.css

Cleaned out most of these! The only items left are custom "effect styles" as they're referred to in Figma. I have a task to look into how we might pull these from Figma's API, but until then, these are manually updated and named to align with Figma.

ynotdraw · 2025-03-12T13:42:33Z

.changeset/strong-penguins-kick.md

+- Button secondary and tertiary visual states have been redesigned.
+- Button colors in dark mode have been changed to different values.
+- Icon Button was updated to follow Button's changes.
+- Checkbox when indeterminate and disabled has a new visual design.
+- Split Button was visually redesigned.
+- Radio's selected, hover, and disabled visuals were updated.
+- Explicitly set `line-height`s were removed from most components.


Worth calling out a few more changes since these lead to visual regression test failures.

Suggested change

- Button secondary and tertiary visual states have been redesigned.

- Button colors in dark mode have been changed to different values.

- Icon Button was updated to follow Button's changes.

- Checkbox when indeterminate and disabled has a new visual design.

- Split Button was visually redesigned.

- Radio's selected, hover, and disabled visuals were updated.

- Explicitly set `line-height`s were removed from most components.

- Button secondary and tertiary visual states have been redesigned.

- Button colors in dark mode have been changed to different values.

- Icon Button was updated to follow Button's changes.

- Checkbox when indeterminate and disabled has a new visual design.

- Split Button was visually redesigned.

- Radio's selected, hover, and disabled visuals were updated.

- Explicitly set `line-height`s were removed from most components.

- Toast colors in dark mode have been changed to different values.

- Box shadow values have been redesigned.

ynotdraw · 2025-03-12T13:57:09Z

.storybook/overrides.css

+:root,
+.theme-light {
+  --color-template-surface-background-page: #ffffff00;
+}
+
+:host,
+.theme-dark {
+  --color-template-surface-background-page: #141414;
+}


There are extended styles for this. But they're only used by Storybook. It wasn't worth exposing these to the world just for this one case, in my opinion. Let me know if you feel differently.

ynotdraw · 2025-03-12T13:57:54Z

src/button-group.button.styles.ts

      cursor: pointer;
      display: flex;
-      font-family: var(--glide-core-font-sans);
-      font-size: var(--glide-core-body-md-font-size);
-      font-style: var(--glide-core-heading-xxs-font-style);


Removed all font-style as normal is the default and we have no need for any other options.

ynotdraw · 2025-03-12T13:58:19Z

src/checkbox.styles.ts

-        font-family: var(--glide-core-body-sm-font-family);
-        font-size: var(--glide-core-body-sm-font-size);
-        font-style: var(--glide-core-body-sm-font-style);
-        font-variant: var(--glide-core-body-sm-font-variant);


Similar to font-style, we use the default font-variant, so no need to be explicit.

clintcs · 2025-03-12T14:15:38Z

Too many to list 😆 ! Viewing the visual test report is a good place to go.

Maybe we should rename that section to just Videos given we now have the visual report.

ynotdraw · 2025-03-12T14:30:23Z

@clintcs I was wondering the same actually. The visual test report handles images.

I almost wonder if we remove "📸 Images and videos" completely? If you want to add a video, you can in the " 🚀 Description" section. I don't think folks add many videos these days.

clintcs · 2025-03-12T14:31:35Z

Went through all the changes. The visual report made doing so a breeze. Lots of nice dark mode improvements especially.

Would you say dark mode is still beta?

clintcs · 2025-03-12T14:16:27Z

.changeset/strong-penguins-kick.md

+Our CSS custom properties have been updated to follow a new semantic token format:
+
+```
+--glide-core-{collection}-{category*}-{scope*}-{property}-{variant*}--{state*}


Worth concisely defining what each semantic part means or providing an example variable?

I ask because I can imagine people reading this and immediately having questions or assuming that the terms map to technical terms.

Great call. I'll cook something up here in a bit and get your thoughts!

Let me know what you think - this is directly from design: 714040b

Works for me!

clintcs · 2025-03-12T14:21:05Z

src/cem-analyzer-plugins/add-slots.ts

@@ -51,8 +51,8 @@ export default () => {
              };
            }

-            const block = commentParser(`/** 


Gotta love it.

clintcs · 2025-03-12T14:23:50Z

src/input.styles.ts

@@ -105,12 +113,12 @@ export default [
      /* The input obscures an offset outline for -webkit-calendar-picker-indicator, so 'focus-outline' is not used */
      &[type='date'] {
        &::-webkit-calendar-picker-indicator {
-          border-radius: var(--glide-core-border-radius-xs);
-          padding: var(--glide-core-spacing-xxs);
+          border-radius: 0.125rem;


Ah. So we will still have some hardcoded values.

Yeah, unfortunately in a few cases. It's on my list to go back through cases like this one and see if we can remove it in favor of another variable though!

Either way. Still overall much more amenable to a lint rule against hardcoded values. The few left can just disable the rule.

Totally agree!

clintcs · 2025-03-12T14:33:02Z

I was wondering the same actually. The visual test report handles images.

No need to push another commit unless you want to. I can open a separate PR for this.

ynotdraw · 2025-03-12T14:40:25Z

Would you say dark mode is still beta?

@clintcs I contemplated removing this as well! I've got about another week or so left of work in the area of variables, so I imagine there will be a few more tweaks here and there. But once I get through those, I think we can safely remove the beta part 🎉

ynotdraw · 2025-03-12T14:53:20Z

No need to push another commit unless you want to. I can open a separate PR for this.

I can roll this in. Deletion incoming.

clintcs · 2025-03-12T14:55:26Z

I can roll this in. Deletion incoming

Too late!

danwenzel · 2025-03-12T16:08:52Z

So with tertiary buttons now having a background on hover, etc, we'll probably run into some issues in consuming apps where they'll need to now add some gap. We have an example of that happening now, with the Modal Tertiary button:

danwenzel · 2025-03-12T16:10:20Z

Issue I'm seeing with transparency of Tooltip body, in Modal Tertiary button story, in dark mode:

ynotdraw · 2025-03-28T16:54:33Z

@danwenzel @clintcs should be all ready to go again. Had a few more rounds of review with design. It required a couple more iterations. We also reviewed the visual testing report multiple times and verified the changes are what we expect.

I've broken things up into separate commits for easier reviewing:

Checkbox now has a solid background color
Disabled checkbox styling recent update
- In particular, let me know how you feel about summary.disabled please!
- When disabled, there were some tweaks, but the summary text in particular is now a different color
Fixed a bug where secondary over tertiary was used
- This was actually a bug with our visual tests. The test should have been for tertiary, but was setting secondary. This is now fixed!
Color/Button/Icon/primary is no longer private
Fixed the primary icon button dark mode color
Split Button Secondary should use active background color
Fix SplitButton focus-visible box-shadow
Use new typography variables
- Typography variables changed from when the PR was first opened. In particular, the Accordion label is now 1rem, which is 2px larger than before. All other changes were renames.
Remove IconButton secondary border per design
- Design decided to drop the border for the secondary variant
Update colors and Tooltip Shortcut color
- Tooltip shortcut and Toggle when disabled had some contrast issues, so they were updated. Tooltip's shortcut required a new, private variable.

If you wouldn't mind giving this a 👍 or re-approval after you've taken a look, I'd greatly appreciate it. I'm hoping to land this on Monday.

clintcs · 2025-03-31T13:05:18Z

If you wouldn't mind giving this a 👍 or re-approval after you've taken a look, I'd greatly appreciate it. I'm hoping to land this on Monday.

Went through all the screenshots. Looks good to me!

danwenzel · 2025-03-31T14:29:30Z

If you wouldn't mind giving this a 👍 or re-approval after you've taken a look, I'd greatly appreciate it. I'm hoping to land this on Monday.

Went through all the screenshots. Looks good to me!

Same here, !

ynotdraw self-assigned this Mar 7, 2025

ynotdraw force-pushed the use-new-tokens branch 2 times, most recently from 89fba95 to b2e4e37 Compare March 11, 2025 18:50

ynotdraw changed the title ~~[WIP] Use new tokens throughout Glide Core~~ Use new tokens throughout Glide Core Mar 12, 2025

ynotdraw force-pushed the use-new-tokens branch 4 times, most recently from f81e15b to bdfaeaf Compare March 12, 2025 13:31

ynotdraw commented Mar 12, 2025

View reviewed changes

ynotdraw marked this pull request as ready for review March 12, 2025 13:55

ynotdraw requested review from clintcs and danwenzel as code owners March 12, 2025 13:55

ynotdraw commented Mar 12, 2025

View reviewed changes

clintcs approved these changes Mar 12, 2025

View reviewed changes

clintcs mentioned this pull request Mar 12, 2025

Tweak PR template #762

Merged

ynotdraw added 10 commits March 26, 2025 18:42

Remove unnecessary font-styles and font-variants

121dd9e

Remove explicit line-heights per design

7d962c9

Remove glow-sm in favor of hovered shadow

bedb1ab

Button Group Button Audit updates

6968439

Icon Button audit updates

df94d29

Comment and code cleanup

def2934

Remove unused font-style

08be819

Update README

605a1d0

Fix for Modal tertiary slot, added release note comment

e55be7a

Update Tooltip colors

31a73b7

ynotdraw force-pushed the use-new-tokens branch from 18d5ac0 to 31a73b7 Compare March 26, 2025 22:43

ynotdraw added 10 commits March 27, 2025 09:36

Checkbox now has a solid background color

7cb5328

Disabled checkbox styling recent update

1e05c7f

Fixed a bug where secondary over tertiary was used

a5ca7f6

Color/Button/Icon/primary is no longer private

d7180a5

Fixed the primary icon button dark mode color

66dce14

Split Button Secondary should use active background color

b80cae8

Fix SplitButton focus-visible box-shadow

57bfa26

Use new typography variables

e012f31

Remove IconButton secondary border per design

c140d7c

Update colors and Tooltip Shortcut color

20cbc52

ynotdraw marked this pull request as ready for review March 28, 2025 16:48

ynotdraw added this pull request to the merge queue Mar 31, 2025

Merged via the queue into main with commit 418008e Mar 31, 2025
29 checks passed

ynotdraw deleted the use-new-tokens branch March 31, 2025 14:44

github-actions bot mentioned this pull request Mar 31, 2025

Release Preview #806

Merged

Use new tokens throughout Glide Core #750

Use new tokens throughout Glide Core #750

Conversation

ynotdraw commented Mar 7, 2025 • edited Loading

🚀 Description

Token Updates

CSS Variable Generation Updates

CEM Shuffling

📋 Checklist

🔬 Testing

📸 Images and videos

changeset-bot bot commented Mar 7, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Mar 7, 2025

Storybook

github-actions bot commented Mar 7, 2025 • edited Loading

⚠️ Visual Test Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ynotdraw Mar 12, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clintcs commented Mar 12, 2025

ynotdraw commented Mar 12, 2025

clintcs commented Mar 12, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clintcs commented Mar 12, 2025

ynotdraw commented Mar 12, 2025

ynotdraw commented Mar 12, 2025

clintcs commented Mar 12, 2025

danwenzel commented Mar 12, 2025

danwenzel commented Mar 12, 2025 • edited Loading

ynotdraw commented Mar 28, 2025 • edited Loading

clintcs commented Mar 31, 2025

danwenzel commented Mar 31, 2025

ynotdraw commented Mar 7, 2025 •

edited

Loading

changeset-bot bot commented Mar 7, 2025 •

edited

Loading

github-actions bot commented Mar 7, 2025 •

edited

Loading

ynotdraw Mar 12, 2025 •

edited

Loading

danwenzel commented Mar 12, 2025 •

edited

Loading

ynotdraw commented Mar 28, 2025 •

edited

Loading