feat: use blue not purple accent color (via core-styles) #1087

wesleyboar · 2025-03-26T23:16:42Z

Overview

Use blue not purple accent color via:
- Delete outdated global CSS vars.
- Use Portal values from Core-Styles.

Warning

Unexpected color change. A11y potentially compromised.

History

Portal used Core-Styles v0 (only a few vars).
Portal defined its own CSS vars.
Wes copied the vars to Core-Styles v1.
Portal never used Core-Styles v1.
Core-Styles v2.N changed accent color.
Portal upgraded to Core-Styles v2.
Portal retained those vars which became Core-Styles v1.
Portal is overwriting Core-Styles v2 vars with its v1 vars.
Thus, portal still uses purple, not blue.

Changes

deleted old CSS vars
changed all CSS vars to come from Core-Styles

Testing

Verify accent color changes from blue to purple.
Verify nothing else changes:
- fonts
- spaces
- borders

UI

local	dev	prod

Solution: - Delete old CSS vars. Why: - So Portal uses CSS vars from Core-Styles, instead of overwriting them. History: 1. Portal used Core-Styles v0 (only a few vars). 2. Portal defined its own CSS vars. 3. Wes copied the vars to Core-Styles v1. 4. Portal never used Core-Styles v1. 5. Portal upgraded to Core-Styles v2. 6. Portal retained those vars which became Core-Styles v1. 7. Portal is overwriting Core-Styles v2 vars with its v1 vars. 8. Thus, portal still uses purple, not blue.

codecov · 2025-03-26T23:18:37Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.64%. Comparing base (56b4c2a) to head (38256c1).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1087   +/-   ##
=======================================
  Coverage   70.64%   70.64%           
=======================================
  Files         540      540           
  Lines       33727    33727           
  Branches     3002     3002           
=======================================
  Hits        23828    23828           
  Misses       9690     9690           
  Partials      209      209

Flag	Coverage Δ
javascript	`72.83% <ø> (ø)`
unittests	`61.34% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

wesleyboar

Notes for reviewers.

wesleyboar · 2025-03-26T23:32:29Z

client/src/styles/settings/space.css

Use only Core-Styles settings/space.css (ref); same values, but as pixels.¹

Footnotes

Designer chose to use pixels (static zoom-based sizing) for spaces instead of rem (dynamic font-based sizing). ↩

wesleyboar · 2025-03-26T23:39:15Z

client/src/styles/settings/font.css

Use only Core-Styles settings/font(…).css (ref 1, ref 2); same values¹ plus global font size vars.

Footnotes

Same values, eventually. You gotta follow the --this-var: var(--that-var) cascade² to verify. I verified. ↩

I will simplify the cascade in Core-Styles v3. ↩

wesleyboar · 2025-03-26T23:50:47Z

client/src/styles/settings/color.css

Use only Core-Styles settings/color(…).css (ref 1a, ref 1b¹, ref 2a, ref 2b¹).

Footnotes

Design tokens. Designers maintain the colors. Devs import the colors.² ↩ ↩²

Use CSS vars or design tokens?! For now, use vars as medium for tokens.³ ↩

Core-Styles v3 might offer design tokens for clients. ↩

wesleyboar · 2025-03-26T23:57:43Z

client/src/styles/global.css

+@import url('@tacc/core-styles/dist/settings/border.css');
+@import url('@tacc/core-styles/dist/settings/color.css');
+@import url('@tacc/core-styles/dist/settings/color--portal.v2.css');
+@import url('@tacc/core-styles/dist/settings/font.css');
+@import url('@tacc/core-styles/dist/settings/font--portal.css');
+@import url('@tacc/core-styles/dist/settings/space.css');


Basically, load the same CSS vars, with accent color change, plus some new font size vars that are innocuous and intended for Core-Portal to eventually use.

wesleyboar · 2025-03-27T00:25:45Z

client/src/styles/global.css

See #1087 (review) for annotations.

…-styles-settings

taoteg

LGTM!

…-styles-settings

fnets · 2025-10-09T16:42:10Z

client/src/styles/settings/color.css

-  --global-color-accent--weak: #6039cc40; /* similar to #E3D7FD on #f4f4f4 */
-
-  --global-color-info--dark: var(--global-color-primary--x-dark);
-  --global-color-info--normal: var(--global-color-primary--normal);


I don't think it really matters, but might be a sign of other changes. The info box borders get darker after this changes.

fnets

LGTM, but a minor aesthetic change. If it's not important, I'll go ahead and approve this.

…-styles-settings

wesleyboar · 2025-10-14T22:22:10Z

What @fnets found is minor, but —

unexpected
potentially not legible enough to pass a11y test
suggests other unexpected bugs are possible

— so please hold for now.

wesleyboar changed the title ~~feat:~~ feat: global css vars only via core-styles Mar 26, 2025

wesleyboar commented Mar 26, 2025

View reviewed changes

wesleyboar changed the title ~~feat: global css vars only via core-styles~~ feat: use blue not purple accent color Mar 27, 2025

fix: use all portal colors, not just some

70724f2

wesleyboar commented Mar 27, 2025

View reviewed changes

client/src/styles/global.css

Copy link

Member Author

wesleyboar Mar 27, 2025 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See #1087 (review) for annotations.

wesleyboar added 2 commits April 17, 2025 14:10

Merge branch 'main' into feat/no-custom-css-settings-ie-use-only-core…

6451ecc

…-styles-settings

Merge branch 'main' into feat/no-custom-css-settings-ie-use-only-core…

80fea27

…-styles-settings

wesleyboar mentioned this pull request Jun 24, 2025

feat: WC-274 component can opt for CMS styles #1127

Merged

20 tasks

wesleyboar added 2 commits July 7, 2025 12:14

Merge branch 'main' into feat/no-custom-css-settings-ie-use-only-core…

d42c9b3

…-styles-settings

Merge branch 'main' into feat/no-custom-css-settings-ie-use-only-core…

7d03dd3

…-styles-settings

wesleyboar changed the title ~~feat: use blue not purple accent color~~ feat: use blue not purple accent color, via core-styles Sep 11, 2025

wesleyboar marked this pull request as ready for review September 11, 2025 19:30

wesleyboar changed the title ~~feat: use blue not purple accent color, via core-styles~~ feat: use blue not purple accent color (via core-styles) Sep 11, 2025

wesleyboar added 2 commits September 15, 2025 12:29

Merge branch 'main' into feat/no-custom-css-settings-ie-use-only-core…

600bc4a

…-styles-settings

Merge branch 'main' into feat/no-custom-css-settings-ie-use-only-core…

5bb00ba

…-styles-settings

taoteg approved these changes Oct 8, 2025

View reviewed changes

Merge branch 'main' into feat/no-custom-css-settings-ie-use-only-core…

c4d60fc

…-styles-settings

fnets reviewed Oct 9, 2025

View reviewed changes

Merge branch 'main' into feat/no-custom-css-settings-ie-use-only-core…

38256c1

…-styles-settings

wesleyboar marked this pull request as draft October 14, 2025 22:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: use blue not purple accent color (via core-styles) #1087

feat: use blue not purple accent color (via core-styles) #1087

Uh oh!

wesleyboar commented Mar 26, 2025 •

edited

Loading

Uh oh!

codecov bot commented Mar 26, 2025 •

edited

Loading

Uh oh!

wesleyboar left a comment

Uh oh!

wesleyboar Mar 26, 2025

Uh oh!

wesleyboar Mar 26, 2025 •

edited

Loading

Uh oh!

wesleyboar Mar 26, 2025 •

edited

Loading

Uh oh!

wesleyboar Mar 26, 2025 •

edited

Loading

Uh oh!

wesleyboar Mar 27, 2025 •

edited

Loading

Uh oh!

taoteg left a comment

Uh oh!

fnets Oct 9, 2025

Uh oh!

fnets left a comment

Uh oh!

wesleyboar commented Oct 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat: use blue not purple accent color (via core-styles) #1087

Are you sure you want to change the base?

feat: use blue not purple accent color (via core-styles) #1087

Uh oh!

Conversation

wesleyboar commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Related

Changes

Testing

UI

Uh oh!

codecov bot commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

wesleyboar left a comment

Choose a reason for hiding this comment

Uh oh!

wesleyboar Mar 26, 2025

Choose a reason for hiding this comment

Footnotes

Uh oh!

wesleyboar Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Footnotes

Uh oh!

wesleyboar Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Footnotes

Uh oh!

wesleyboar Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wesleyboar Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

taoteg left a comment

Choose a reason for hiding this comment

Uh oh!

fnets Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

fnets left a comment

Choose a reason for hiding this comment

Uh oh!

wesleyboar commented Oct 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wesleyboar commented Mar 26, 2025 •

edited

Loading

codecov bot commented Mar 26, 2025 •

edited

Loading

wesleyboar Mar 26, 2025 •

edited

Loading

wesleyboar Mar 26, 2025 •

edited

Loading

wesleyboar Mar 26, 2025 •

edited

Loading

wesleyboar Mar 27, 2025 •

edited

Loading