Add alpha data-vis colors #820

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.

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

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

docs/storybook/stories/Color/DataVis/Charts.stories.tsx Outdated Show resolved Hide resolved

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

b9af50a

langermank commented Mar 6, 2024

View reviewed changes

docs/storybook/stories/Color/DataVis/Charts.stories.tsx Show resolved Hide 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

docs/storybook/stories/Color/DataVis/Charts.stories.tsx Outdated Show resolved Hide 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 tobiasahlin and jonrohan 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
26 checks passed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add alpha data-vis colors #820

Add alpha data-vis colors #820

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

/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

lukasoppermann commented Mar 5, 2024

Add alpha data-vis colors #820

Add alpha data-vis colors #820

Conversation

langermank commented Mar 4, 2024 • edited Loading

changeset-bot bot commented Mar 4, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Mar 4, 2024 • edited Loading

github-actions bot commented Mar 4, 2024 • edited Loading

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

lukasoppermann commented Mar 5, 2024

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