Add alpha data-vis colors by langermank · Pull Request #820 · primer/primitives

langermank · 2024-03-04T22:59:46Z

Adds the first iteration of data-vis colors for internal testing

changeset-bot · 2024-03-04T22:59:49Z

🦋 Changeset detected

Latest commit: c24e40f

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

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	Patch

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 · 2024-03-04T23:00:04Z

Variables changed

No variables changed

github-actions · 2024-03-04T23:01:25Z

Design Token Diff

/css/functional/themes/dark-colorblind.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css	2024-03-07 17:07:51.226326140 +0000
@@ -42,6 +42,16 @@
 --header-borderColor-divider: #8b949e;
 --headerSearch-bgColor: #0d1117;
 --headerSearch-borderColor: #30363d;
+  --data-blue-color: #0576ff;
+  --data-auburn-color: #a86f6b;
+  --data-orange-color: #984b10;
+  --data-yellow-color: #895906;
+  --data-green-color: #2f6f37;
+  --data-teal-color: #106c70;
+  --data-purple-color: #975bf1;
+  --data-pink-color: #d34591;
+  --data-red-color: #eb3342;
+  --data-gray-color: #576270;
 --avatar-bgColor: #ffffff1a;
 --avatar-borderColor: #30363db3;
 --avatar-shadow: 0px 0px 0px 2px #0d1117;
@@ -453,6 +463,16 @@
   --header-borderColor-divider: #8b949e;
   --headerSearch-bgColor: #0d1117;
   --headerSearch-borderColor: #30363d;
+    --data-blue-color: #0576ff;
+    --data-auburn-color: #a86f6b;
+    --data-orange-color: #984b10;
+    --data-yellow-color: #895906;
+    --data-green-color: #2f6f37;
+    --data-teal-color: #106c70;
+    --data-purple-color: #975bf1;
+    --data-pink-color: #d34591;
+    --data-red-color: #eb3342;
+    --data-gray-color: #576270;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #30363db3;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;

/css/functional/themes/dark-dimmed.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css	2024-03-07 17:07:50.482322433 +0000
@@ -42,6 +42,16 @@
 --header-borderColor-divider: #768390;
 --headerSearch-bgColor: #22272e;
 --headerSearch-borderColor: #444c56;
+  --data-blue-color: #0576ff;
+  --data-auburn-color: #a86f6b;
+  --data-orange-color: #984b10;
+  --data-yellow-color: #895906;
+  --data-green-color: #2f6f37;
+  --data-teal-color: #106c70;
+  --data-purple-color: #975bf1;
+  --data-pink-color: #d34591;
+  --data-red-color: #eb3342;
+  --data-gray-color: #576270;
 --avatar-bgColor: #cdd9e51a;
 --avatar-borderColor: #444c56b3;
 --avatar-shadow: 0px 0px 0px 2px #22272e;
@@ -453,6 +463,16 @@
   --header-borderColor-divider: #768390;
   --headerSearch-bgColor: #22272e;
   --headerSearch-borderColor: #444c56;
+    --data-blue-color: #0576ff;
+    --data-auburn-color: #a86f6b;
+    --data-orange-color: #984b10;
+    --data-yellow-color: #895906;
+    --data-green-color: #2f6f37;
+    --data-teal-color: #106c70;
+    --data-purple-color: #975bf1;
+    --data-pink-color: #d34591;
+    --data-red-color: #eb3342;
+    --data-gray-color: #576270;
   --avatar-bgColor: #cdd9e51a;
   --avatar-borderColor: #444c56b3;
   --avatar-shadow: 0px 0px 0px 2px #22272e;

/css/functional/themes/dark-high-contrast.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css	2024-03-07 17:07:51.610328053 +0000
@@ -42,6 +42,16 @@
 --header-borderColor-divider: #bdc4cc;
 --headerSearch-bgColor: #0a0c10;
 --headerSearch-borderColor: #525964;
+  --data-blue-color: #0576ff;
+  --data-auburn-color: #a86f6b;
+  --data-orange-color: #984b10;
+  --data-yellow-color: #895906;
+  --data-green-color: #2f6f37;
+  --data-teal-color: #106c70;
+  --data-purple-color: #975bf1;
+  --data-pink-color: #d34591;
+  --data-red-color: #eb3342;
+  --data-gray-color: #576270;
 --avatar-bgColor: #ffffff1a;
 --avatar-borderColor: #ffffffe6;
 --avatar-shadow: 0px 0px 0px 2px #0a0c10;
@@ -453,6 +463,16 @@
   --header-borderColor-divider: #bdc4cc;
   --headerSearch-bgColor: #0a0c10;
   --headerSearch-borderColor: #525964;
+    --data-blue-color: #0576ff;
+    --data-auburn-color: #a86f6b;
+    --data-orange-color: #984b10;
+    --data-yellow-color: #895906;
+    --data-green-color: #2f6f37;
+    --data-teal-color: #106c70;
+    --data-purple-color: #975bf1;
+    --data-pink-color: #d34591;
+    --data-red-color: #eb3342;
+    --data-gray-color: #576270;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #ffffffe6;
   --avatar-shadow: 0px 0px 0px 2px #0a0c10;

/css/functional/themes/dark-tritanopia.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css	2024-03-07 17:07:50.854324286 +0000
@@ -42,6 +42,16 @@
 --header-borderColor-divider: #8b949e;
 --headerSearch-bgColor: #0d1117;
 --headerSearch-borderColor: #30363d;
+  --data-blue-color: #0576ff;
+  --data-auburn-color: #a86f6b;
+  --data-orange-color: #984b10;
+  --data-yellow-color: #895906;
+  --data-green-color: #2f6f37;
+  --data-teal-color: #106c70;
+  --data-purple-color: #975bf1;
+  --data-pink-color: #d34591;
+  --data-red-color: #eb3342;
+  --data-gray-color: #576270;
 --avatar-bgColor: #ffffff1a;
 --avatar-borderColor: #30363db3;
 --avatar-shadow: 0px 0px 0px 2px #0d1117;
@@ -453,6 +463,16 @@
   --header-borderColor-divider: #8b949e;
   --headerSearch-bgColor: #0d1117;
   --headerSearch-borderColor: #30363d;
+    --data-blue-color: #0576ff;
+    --data-auburn-color: #a86f6b;
+    --data-orange-color: #984b10;
+    --data-yellow-color: #895906;
+    --data-green-color: #2f6f37;
+    --data-teal-color: #106c70;
+    --data-purple-color: #975bf1;
+    --data-pink-color: #d34591;
+    --data-red-color: #eb3342;
+    --data-gray-color: #576270;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #30363db3;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/dark.css	2024-03-07 17:07:50.102320539 +0000
@@ -42,6 +42,16 @@
 --header-borderColor-divider: #8b949e;
 --headerSearch-bgColor: #0d1117;
 --headerSearch-borderColor: #30363d;
+  --data-blue-color: #0576ff;
+  --data-auburn-color: #a86f6b;
+  --data-orange-color: #984b10;
+  --data-yellow-color: #895906;
+  --data-green-color: #2f6f37;
+  --data-teal-color: #106c70;
+  --data-purple-color: #975bf1;
+  --data-pink-color: #d34591;
+  --data-red-color: #eb3342;
+  --data-gray-color: #576270;
 --avatar-bgColor: #ffffff1a;
 --avatar-borderColor: #30363db3;
 --avatar-shadow: 0px 0px 0px 2px #0d1117;
@@ -453,6 +463,16 @@
   --header-borderColor-divider: #8b949e;
   --headerSearch-bgColor: #0d1117;
   --headerSearch-borderColor: #30363d;
+    --data-blue-color: #0576ff;
+    --data-auburn-color: #a86f6b;
+    --data-orange-color: #984b10;
+    --data-yellow-color: #895906;
+    --data-green-color: #2f6f37;
+    --data-teal-color: #106c70;
+    --data-purple-color: #975bf1;
+    --data-pink-color: #d34591;
+    --data-red-color: #eb3342;
+    --data-gray-color: #576270;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #30363db3;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;

/css/functional/themes/light-colorblind.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-colorblind.css	2024-03-07 17:07:49.290316493 +0000
@@ -42,6 +42,16 @@
 --header-borderColor-divider: #57606a;
 --headerSearch-bgColor: #24292f;
 --headerSearch-borderColor: #57606a;
+  --data-blue-color: #006edb;
+  --data-auburn-color: #9d615c;
+  --data-orange-color: #eb670f;
+  --data-yellow-color: #b88700;
+  --data-green-color: #30a147;
+  --data-teal-color: #179b9b;
+  --data-purple-color: #894ceb;
+  --data-pink-color: #ce2c85;
+  --data-red-color: #df0c24;
+  --data-gray-color: #808fa3;
 --avatar-bgColor: #ffffff;
 --avatar-borderColor: #d0d7de;
 --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
@@ -453,6 +463,16 @@
   --header-borderColor-divider: #57606a;
   --headerSearch-bgColor: #24292f;
   --headerSearch-borderColor: #57606a;
+    --data-blue-color: #006edb;
+    --data-auburn-color: #9d615c;
+    --data-orange-color: #eb670f;
+    --data-yellow-color: #b88700;
+    --data-green-color: #30a147;
+    --data-teal-color: #179b9b;
+    --data-purple-color: #894ceb;
+    --data-pink-color: #ce2c85;
+    --data-red-color: #df0c24;
+    --data-gray-color: #808fa3;
   --avatar-bgColor: #ffffff;
   --avatar-borderColor: #d0d7de;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;

/css/functional/themes/light-high-contrast.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css	2024-03-07 17:07:49.718318626 +0000
@@ -42,6 +42,16 @@
 --header-borderColor-divider: #acb6c0;
 --headerSearch-bgColor: #0e1116;
 --headerSearch-borderColor: #4b535d;
+  --data-blue-color: #006edb;
+  --data-auburn-color: #9d615c;
+  --data-orange-color: #eb670f;
+  --data-yellow-color: #b88700;
+  --data-green-color: #30a147;
+  --data-teal-color: #179b9b;
+  --data-purple-color: #894ceb;
+  --data-pink-color: #ce2c85;
+  --data-red-color: #df0c24;
+  --data-gray-color: #808fa3;
 --avatar-bgColor: #ffffff;
 --avatar-borderColor: #20252c;
 --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
@@ -453,6 +463,16 @@
   --header-borderColor-divider: #acb6c0;
   --headerSearch-bgColor: #0e1116;
   --headerSearch-borderColor: #4b535d;
+    --data-blue-color: #006edb;
+    --data-auburn-color: #9d615c;
+    --data-orange-color: #eb670f;
+    --data-yellow-color: #b88700;
+    --data-green-color: #30a147;
+    --data-teal-color: #179b9b;
+    --data-purple-color: #894ceb;
+    --data-pink-color: #ce2c85;
+    --data-red-color: #df0c24;
+    --data-gray-color: #808fa3;
   --avatar-bgColor: #ffffff;
   --avatar-borderColor: #20252c;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;

/css/functional/themes/light-tritanopia.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css	2024-03-07 17:07:48.874314420 +0000
@@ -42,6 +42,16 @@
 --header-borderColor-divider: #57606a;
 --headerSearch-bgColor: #24292f;
 --headerSearch-borderColor: #57606a;
+  --data-blue-color: #006edb;
+  --data-auburn-color: #9d615c;
+  --data-orange-color: #eb670f;
+  --data-yellow-color: #b88700;
+  --data-green-color: #30a147;
+  --data-teal-color: #179b9b;
+  --data-purple-color: #894ceb;
+  --data-pink-color: #ce2c85;
+  --data-red-color: #df0c24;
+  --data-gray-color: #808fa3;
 --avatar-bgColor: #ffffff;
 --avatar-borderColor: #d0d7de;
 --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
@@ -453,6 +463,16 @@
   --header-borderColor-divider: #57606a;
   --headerSearch-bgColor: #24292f;
   --headerSearch-borderColor: #57606a;
+    --data-blue-color: #006edb;
+    --data-auburn-color: #9d615c;
+    --data-orange-color: #eb670f;
+    --data-yellow-color: #b88700;
+    --data-green-color: #30a147;
+    --data-teal-color: #179b9b;
+    --data-purple-color: #894ceb;
+    --data-pink-color: #ce2c85;
+    --data-red-color: #df0c24;
+    --data-gray-color: #808fa3;
   --avatar-bgColor: #ffffff;
   --avatar-borderColor: #d0d7de;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/tokens-next-private/css/functional/themes/light.css	2024-03-07 17:07:48.374311927 +0000
@@ -42,6 +42,16 @@
 --header-borderColor-divider: #57606a;
 --headerSearch-bgColor: #24292f;
 --headerSearch-borderColor: #57606a;
+  --data-blue-color: #006edb;
+  --data-auburn-color: #9d615c;
+  --data-orange-color: #eb670f;
+  --data-yellow-color: #b88700;
+  --data-green-color: #30a147;
+  --data-teal-color: #179b9b;
+  --data-purple-color: #894ceb;
+  --data-pink-color: #ce2c85;
+  --data-red-color: #df0c24;
+  --data-gray-color: #808fa3;
 --avatar-bgColor: #ffffff;
 --avatar-borderColor: #d0d7de;
 --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
@@ -453,6 +463,16 @@
   --header-borderColor-divider: #57606a;
   --headerSearch-bgColor: #24292f;
   --headerSearch-borderColor: #57606a;
+    --data-blue-color: #006edb;
+    --data-auburn-color: #9d615c;
+    --data-orange-color: #eb670f;
+    --data-yellow-color: #b88700;
+    --data-green-color: #30a147;
+    --data-teal-color: #179b9b;
+    --data-purple-color: #894ceb;
+    --data-pink-color: #ce2c85;
+    --data-red-color: #df0c24;
+    --data-gray-color: #808fa3;
   --avatar-bgColor: #ffffff;
   --avatar-borderColor: #d0d7de;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;

lukasoppermann · 2024-03-05T13:02:09Z

Hey @langermank,

there were actually a few things that needed fixing:

figma needs to have a different setup for shadows, this is why it does not use the theme file everywere, so we need to add the display as well, as we have shadows in pattern: scripts/buildPlatforms/buildFigma.ts
deprecated files needed the reference as well: 0e12b18#diff-711832e96e66a85c309d33133a318d8c9b995f6e26ff38c87ddcf81a32b9cd1cR165
you had some wrong references in the themes file: src/tokens/base/color/light/display-dark.json5 (link)

Once we remove the old tokens and everything is more clean, we can look into improving this so that we only define those themes once.

langermank added 2 commits March 4, 2024 14:48

try referencing display color

dc8ca58

comment out

99675b7

langermank temporarily deployed to github-pages March 4, 2024 23:01 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview March 4, 2024 23:01 Inactive

fixes

0e12b18

lukasoppermann temporarily deployed to github-pages March 5, 2024 12:53 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview March 5, 2024 12:54 Inactive

add data-vis colors

a2f5ff2

langermank commented Mar 6, 2024

View reviewed changes

Comment thread docs/storybook/stories/Color/DataVis/Charts.stories.tsx Resolved

Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx

b9af50a

langermank commented Mar 6, 2024

View reviewed changes

Comment thread docs/storybook/stories/Color/DataVis/Charts.stories.tsx Resolved

Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx

94ad5b9

github-actions Bot temporarily deployed to storybook-preview March 6, 2024 01:56 Inactive

langermank commented Mar 6, 2024

View reviewed changes

Comment thread docs/storybook/stories/Color/DataVis/Charts.stories.tsx Resolved

Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx

5204995

github-actions Bot temporarily deployed to storybook-preview March 6, 2024 01:57 Inactive

langermank temporarily deployed to github-pages March 6, 2024 01:58 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview March 6, 2024 01:58 Inactive

rename

372eddd

langermank temporarily deployed to github-pages March 6, 2024 02:10 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview March 6, 2024 02:10 Inactive

temp display scale stories

200bb71

langermank temporarily deployed to github-pages March 6, 2024 18:58 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview March 6, 2024 18:58 Inactive

address feedback

9344cf9

langermank temporarily deployed to github-pages March 7, 2024 00:55 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview March 7, 2024 00:55 Inactive

Create eleven-kings-hug.md

0458eb2

langermank temporarily deployed to github-pages March 7, 2024 01:00 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview March 7, 2024 01:00 Inactive

fix snaps

e6c2eda

langermank temporarily deployed to github-pages March 7, 2024 01:13 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview March 7, 2024 01:14 Inactive

langermank added the update snapshots Update visual regression test snapshots label Mar 7, 2024

github-actions[bot] Regenerated snapshots

5e9c310

github-actions Bot removed the update snapshots Update visual regression test snapshots label Mar 7, 2024

primer Bot temporarily deployed to github-pages March 7, 2024 01:51 Inactive

github-actions Bot temporarily deployed to storybook-preview March 7, 2024 01:52 Inactive

langermank marked this pull request as ready for review March 7, 2024 17:06

langermank requested review from a team as code owners March 7, 2024 17:06

langermank requested review from jonrohan and tobiasahlin March 7, 2024 17:06

Merge branch 'main' into data-vis-colors

c24e40f

langermank temporarily deployed to github-pages March 7, 2024 17:09 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to storybook-preview March 7, 2024 17:09 Inactive

langermank merged commit f959cc7 into main Mar 7, 2024

langermank deleted the data-vis-colors branch March 7, 2024 17:15

primer Bot mentioned this pull request Mar 7, 2024

Release Tracking #824

Merged

Navigation Menu

Repository navigation

Add alpha data-vis colors - #820

Add alpha data-vis colors#820
langermank merged 14 commits into
mainfrom
data-vis-colors

langermank commented Mar 4, 2024 •

edited

Loading

Uh oh!

changeset-bot Bot commented Mar 4, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 4, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 4, 2024 •

edited

Loading

/css/functional/themes/dark-colorblind.css

/css/functional/themes/dark-dimmed.css

/css/functional/themes/dark-high-contrast.css

/css/functional/themes/dark-tritanopia.css

/css/functional/themes/dark.css

/css/functional/themes/light-colorblind.css

/css/functional/themes/light-high-contrast.css

/css/functional/themes/light-tritanopia.css

/css/functional/themes/light.css

Uh oh!

lukasoppermann commented Mar 5, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

langermank commented Mar 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Mar 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Mar 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Design Token Diff

/css/functional/themes/dark-colorblind.css

/css/functional/themes/dark-dimmed.css

/css/functional/themes/dark-high-contrast.css

/css/functional/themes/dark-tritanopia.css

/css/functional/themes/dark.css

/css/functional/themes/light-colorblind.css

/css/functional/themes/light-high-contrast.css

/css/functional/themes/light-tritanopia.css

/css/functional/themes/light.css

Uh oh!

lukasoppermann commented Mar 5, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This branch was previously deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

langermank commented Mar 4, 2024 •

edited

Loading

changeset-bot Bot commented Mar 4, 2024 •

edited

Loading

github-actions Bot commented Mar 4, 2024 •

edited

Loading

github-actions Bot commented Mar 4, 2024 •

edited

Loading