Skip to content

Conversation

@langermank
Copy link
Contributor

Currently, the contribution graph colors are custom (outside of Primer) and only support light and dark. I'd like to move them here so we can support all themes, including some upcoming contrast work.

Part of https://github.com/github/accessibility-audits/issues/10272

I have attempted to match the existing custom colors as closely as possible. I'm renaming these to use a contribution pattern name because "calendar" feels misleading. The number variants represent how many contributions.

(calendar-halloween-graph-day-L1-bg, (light: #ffee4a, dark: #631c03)),
    (calendar-halloween-graph-day-L2-bg, (light: #ffc501, dark: #bd561d)),
    (calendar-halloween-graph-day-L3-bg, (light: #fe9600, dark: #fa7a18)),
    (calendar-halloween-graph-day-L4-bg, (light: #03001c, dark: #fddf68)),
    (calendar-winter-graph-day-L1-bg, (light: #B6E3FF, dark: #0A3069)),
    (calendar-winter-graph-day-L2-bg, (light: #54AEFF, dark: #0969DA)),
    (calendar-winter-graph-day-L3-bg, (light: #0969DA, dark: #54AEFF)),
    (calendar-winter-graph-day-L4-bg, (light: #0A3069, dark: #B6E3FF)),
    (calendar-graph-day-bg, (light: #ebedf0, dark: #161b22)),
    (calendar-graph-day-border, (light: rgba(27,31,35,0.06), dark: rgba(27,31,35,0.06))),
    (calendar-graph-day-L1-bg, (light: #9be9a8, dark: #0e4429)),
    (calendar-graph-day-L2-bg, (light: #40c463, dark: #006d32)),
    (calendar-graph-day-L3-bg, (light: #30a14e, dark: #26a641)),
    (calendar-graph-day-L4-bg, (light: #216e39, dark: #39d353)),
    (calendar-graph-day-L1-border, (light: rgba(27,31,35,0.06), dark: rgba(255,255,255,0.05))),
    (calendar-graph-day-L2-border, (light: rgba(27,31,35,0.06), dark: rgba(255,255,255,0.05))),
    (calendar-graph-day-L3-border, (light: rgba(27,31,35,0.06), dark: rgba(255,255,255,0.05))),
    (calendar-graph-day-L4-border, (light: rgba(27,31,35,0.06), dark: rgba(255,255,255,0.05))),

@changeset-bot
Copy link

changeset-bot bot commented Jan 25, 2025

🦋 Changeset detected

Latest commit: f0f57bd

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 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
Copy link
Contributor

github-actions bot commented Jan 25, 2025

Design Token Diff (CSS)

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2025-01-27 22:57:01.212269394 +0000
@@ -135,6 +135,24 @@
 --color-prettylights-syntax-string-regexp: #a5d6ff;
 --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
 --color-prettylights-syntax-variable: #ffa657;
+  --contribution-default-bgColor-0: #151b23;
+  --contribution-default-bgColor-1: #033a16;
+  --contribution-default-bgColor-2: #196c2e;
+  --contribution-default-bgColor-3: #2ea043;
+  --contribution-default-bgColor-4: #56d364;
+  --contribution-default-borderColor-0: #ffffff0d;
+  --contribution-default-borderColor-1: #ffffff0d;
+  --contribution-default-borderColor-2: #ffffff0d;
+  --contribution-default-borderColor-3: #ffffff0d;
+  --contribution-default-borderColor-4: #ffffff0d;
+  --contribution-halloween-bgColor-1: #fac68f;
+  --contribution-halloween-bgColor-2: #c46212;
+  --contribution-halloween-bgColor-3: #984b10;
+  --contribution-halloween-bgColor-4: #e3d04f;
+  --contribution-winter-bgColor-1: #0c2d6b;
+  --contribution-winter-bgColor-2: #1158c7;
+  --contribution-winter-bgColor-3: #58a6ff;
+  --contribution-winter-bgColor-4: #cae8ff;
 --control-bgColor-active: #2a313c;
 --control-bgColor-hover: #262c36;
 --control-bgColor-rest: #212830;
@@ -741,6 +759,24 @@
   --color-prettylights-syntax-string-regexp: #a5d6ff;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
   --color-prettylights-syntax-variable: #ffa657;
+    --contribution-default-bgColor-0: #151b23;
+    --contribution-default-bgColor-1: #033a16;
+    --contribution-default-bgColor-2: #196c2e;
+    --contribution-default-bgColor-3: #2ea043;
+    --contribution-default-bgColor-4: #56d364;
+    --contribution-default-borderColor-0: #ffffff0d;
+    --contribution-default-borderColor-1: #ffffff0d;
+    --contribution-default-borderColor-2: #ffffff0d;
+    --contribution-default-borderColor-3: #ffffff0d;
+    --contribution-default-borderColor-4: #ffffff0d;
+    --contribution-halloween-bgColor-1: #fac68f;
+    --contribution-halloween-bgColor-2: #c46212;
+    --contribution-halloween-bgColor-3: #984b10;
+    --contribution-halloween-bgColor-4: #e3d04f;
+    --contribution-winter-bgColor-1: #0c2d6b;
+    --contribution-winter-bgColor-2: #1158c7;
+    --contribution-winter-bgColor-3: #58a6ff;
+    --contribution-winter-bgColor-4: #cae8ff;
   --control-bgColor-active: #2a313c;
   --control-bgColor-hover: #262c36;
   --control-bgColor-rest: #212830;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css	2025-01-27 22:56:58.811273774 +0000
@@ -144,6 +144,24 @@
 --color-prettylights-syntax-string-regexp: #8ddb8c;
 --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
 --color-prettylights-syntax-variable: #f69d50;
+  --contribution-default-bgColor-0: #2a313c;
+  --contribution-default-bgColor-1: #1b4721;
+  --contribution-default-bgColor-2: #2b6a30;
+  --contribution-default-bgColor-3: #46954a;
+  --contribution-default-bgColor-4: #6bc46d;
+  --contribution-default-borderColor-0: #cdd9e50d;
+  --contribution-default-borderColor-1: #cdd9e50d;
+  --contribution-default-borderColor-2: #cdd9e50d;
+  --contribution-default-borderColor-3: #cdd9e50d;
+  --contribution-default-borderColor-4: #cdd9e50d;
+  --contribution-halloween-bgColor-1: #fac68f;
+  --contribution-halloween-bgColor-2: #c46212;
+  --contribution-halloween-bgColor-3: #984b10;
+  --contribution-halloween-bgColor-4: #e3d04f;
+  --contribution-winter-bgColor-1: #143d79;
+  --contribution-winter-bgColor-2: #255ab2;
+  --contribution-winter-bgColor-3: #539bf5;
+  --contribution-winter-bgColor-4: #c6e6ff;
 --control-bgColor-active: #3d444d;
 --control-bgColor-hover: #2f3742;
 --control-bgColor-rest: #2a313c;
@@ -750,6 +768,24 @@
   --color-prettylights-syntax-string-regexp: #8ddb8c;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
   --color-prettylights-syntax-variable: #f69d50;
+    --contribution-default-bgColor-0: #2a313c;
+    --contribution-default-bgColor-1: #1b4721;
+    --contribution-default-bgColor-2: #2b6a30;
+    --contribution-default-bgColor-3: #46954a;
+    --contribution-default-bgColor-4: #6bc46d;
+    --contribution-default-borderColor-0: #cdd9e50d;
+    --contribution-default-borderColor-1: #cdd9e50d;
+    --contribution-default-borderColor-2: #cdd9e50d;
+    --contribution-default-borderColor-3: #cdd9e50d;
+    --contribution-default-borderColor-4: #cdd9e50d;
+    --contribution-halloween-bgColor-1: #fac68f;
+    --contribution-halloween-bgColor-2: #c46212;
+    --contribution-halloween-bgColor-3: #984b10;
+    --contribution-halloween-bgColor-4: #e3d04f;
+    --contribution-winter-bgColor-1: #143d79;
+    --contribution-winter-bgColor-2: #255ab2;
+    --contribution-winter-bgColor-3: #539bf5;
+    --contribution-winter-bgColor-4: #c6e6ff;
   --control-bgColor-active: #3d444d;
   --control-bgColor-hover: #2f3742;
   --control-bgColor-rest: #2a313c;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2025-01-27 22:57:02.344267486 +0000
@@ -140,6 +140,24 @@
 --color-prettylights-syntax-string-regexp: #72f088;
 --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
 --color-prettylights-syntax-variable: #ffb757;
+  --contribution-default-bgColor-0: #212830;
+  --contribution-default-bgColor-1: #007728;
+  --contribution-default-bgColor-2: #02a232;
+  --contribution-default-bgColor-3: #0ac740;
+  --contribution-default-bgColor-4: #4ae168;
+  --contribution-default-borderColor-0: #ffffff;
+  --contribution-default-borderColor-1: #ffffff;
+  --contribution-default-borderColor-2: #ffffff;
+  --contribution-default-borderColor-3: #ffffff;
+  --contribution-default-borderColor-4: #ffffff;
+  --contribution-halloween-bgColor-1: #fac68f;
+  --contribution-halloween-bgColor-2: #c46212;
+  --contribution-halloween-bgColor-3: #984b10;
+  --contribution-halloween-bgColor-4: #e3d04f;
+  --contribution-winter-bgColor-1: #1e60d5;
+  --contribution-winter-bgColor-2: #318bf8;
+  --contribution-winter-bgColor-3: #71b7ff;
+  --contribution-winter-bgColor-4: #caeaff;
 --control-bgColor-active: #2f3742;
 --control-bgColor-hover: #2a313c;
 --control-bgColor-rest: #262c36;
@@ -746,6 +764,24 @@
   --color-prettylights-syntax-string-regexp: #72f088;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
   --color-prettylights-syntax-variable: #ffb757;
+    --contribution-default-bgColor-0: #212830;
+    --contribution-default-bgColor-1: #007728;
+    --contribution-default-bgColor-2: #02a232;
+    --contribution-default-bgColor-3: #0ac740;
+    --contribution-default-bgColor-4: #4ae168;
+    --contribution-default-borderColor-0: #ffffff;
+    --contribution-default-borderColor-1: #ffffff;
+    --contribution-default-borderColor-2: #ffffff;
+    --contribution-default-borderColor-3: #ffffff;
+    --contribution-default-borderColor-4: #ffffff;
+    --contribution-halloween-bgColor-1: #fac68f;
+    --contribution-halloween-bgColor-2: #c46212;
+    --contribution-halloween-bgColor-3: #984b10;
+    --contribution-halloween-bgColor-4: #e3d04f;
+    --contribution-winter-bgColor-1: #1e60d5;
+    --contribution-winter-bgColor-2: #318bf8;
+    --contribution-winter-bgColor-3: #71b7ff;
+    --contribution-winter-bgColor-4: #caeaff;
   --control-bgColor-active: #2f3742;
   --control-bgColor-hover: #2a313c;
   --control-bgColor-rest: #262c36;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2025-01-27 22:57:00.030271386 +0000
@@ -138,6 +138,24 @@
 --color-prettylights-syntax-string-regexp: #a5d6ff;
 --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
 --color-prettylights-syntax-variable: #ffa198;
+  --contribution-default-bgColor-0: #151b23;
+  --contribution-default-bgColor-1: #033a16;
+  --contribution-default-bgColor-2: #196c2e;
+  --contribution-default-bgColor-3: #2ea043;
+  --contribution-default-bgColor-4: #56d364;
+  --contribution-default-borderColor-0: #ffffff0d;
+  --contribution-default-borderColor-1: #ffffff0d;
+  --contribution-default-borderColor-2: #ffffff0d;
+  --contribution-default-borderColor-3: #ffffff0d;
+  --contribution-default-borderColor-4: #ffffff0d;
+  --contribution-halloween-bgColor-1: #fac68f;
+  --contribution-halloween-bgColor-2: #c46212;
+  --contribution-halloween-bgColor-3: #984b10;
+  --contribution-halloween-bgColor-4: #e3d04f;
+  --contribution-winter-bgColor-1: #0c2d6b;
+  --contribution-winter-bgColor-2: #1158c7;
+  --contribution-winter-bgColor-3: #58a6ff;
+  --contribution-winter-bgColor-4: #cae8ff;
 --control-bgColor-active: #2a313c;
 --control-bgColor-hover: #262c36;
 --control-bgColor-rest: #212830;
@@ -744,6 +762,24 @@
   --color-prettylights-syntax-string-regexp: #a5d6ff;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
   --color-prettylights-syntax-variable: #ffa198;
+    --contribution-default-bgColor-0: #151b23;
+    --contribution-default-bgColor-1: #033a16;
+    --contribution-default-bgColor-2: #196c2e;
+    --contribution-default-bgColor-3: #2ea043;
+    --contribution-default-bgColor-4: #56d364;
+    --contribution-default-borderColor-0: #ffffff0d;
+    --contribution-default-borderColor-1: #ffffff0d;
+    --contribution-default-borderColor-2: #ffffff0d;
+    --contribution-default-borderColor-3: #ffffff0d;
+    --contribution-default-borderColor-4: #ffffff0d;
+    --contribution-halloween-bgColor-1: #fac68f;
+    --contribution-halloween-bgColor-2: #c46212;
+    --contribution-halloween-bgColor-3: #984b10;
+    --contribution-halloween-bgColor-4: #e3d04f;
+    --contribution-winter-bgColor-1: #0c2d6b;
+    --contribution-winter-bgColor-2: #1158c7;
+    --contribution-winter-bgColor-3: #58a6ff;
+    --contribution-winter-bgColor-4: #cae8ff;
   --control-bgColor-active: #2a313c;
   --control-bgColor-hover: #262c36;
   --control-bgColor-rest: #212830;

/css/functional/themes/dark.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css	2025-01-27 22:56:57.667275169 +0000
@@ -132,6 +132,24 @@
 --color-prettylights-syntax-string-regexp: #7ee787;
 --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
 --color-prettylights-syntax-variable: #ffa657;
+  --contribution-default-bgColor-0: #151b23;
+  --contribution-default-bgColor-1: #033a16;
+  --contribution-default-bgColor-2: #196c2e;
+  --contribution-default-bgColor-3: #2ea043;
+  --contribution-default-bgColor-4: #56d364;
+  --contribution-default-borderColor-0: #ffffff0d;
+  --contribution-default-borderColor-1: #ffffff0d;
+  --contribution-default-borderColor-2: #ffffff0d;
+  --contribution-default-borderColor-3: #ffffff0d;
+  --contribution-default-borderColor-4: #ffffff0d;
+  --contribution-halloween-bgColor-1: #fac68f;
+  --contribution-halloween-bgColor-2: #c46212;
+  --contribution-halloween-bgColor-3: #984b10;
+  --contribution-halloween-bgColor-4: #e3d04f;
+  --contribution-winter-bgColor-1: #0c2d6b;
+  --contribution-winter-bgColor-2: #1158c7;
+  --contribution-winter-bgColor-3: #58a6ff;
+  --contribution-winter-bgColor-4: #cae8ff;
 --control-bgColor-active: #2a313c;
 --control-bgColor-hover: #262c36;
 --control-bgColor-rest: #212830;
@@ -738,6 +756,24 @@
   --color-prettylights-syntax-string-regexp: #7ee787;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
   --color-prettylights-syntax-variable: #ffa657;
+    --contribution-default-bgColor-0: #151b23;
+    --contribution-default-bgColor-1: #033a16;
+    --contribution-default-bgColor-2: #196c2e;
+    --contribution-default-bgColor-3: #2ea043;
+    --contribution-default-bgColor-4: #56d364;
+    --contribution-default-borderColor-0: #ffffff0d;
+    --contribution-default-borderColor-1: #ffffff0d;
+    --contribution-default-borderColor-2: #ffffff0d;
+    --contribution-default-borderColor-3: #ffffff0d;
+    --contribution-default-borderColor-4: #ffffff0d;
+    --contribution-halloween-bgColor-1: #fac68f;
+    --contribution-halloween-bgColor-2: #c46212;
+    --contribution-halloween-bgColor-3: #984b10;
+    --contribution-halloween-bgColor-4: #e3d04f;
+    --contribution-winter-bgColor-1: #0c2d6b;
+    --contribution-winter-bgColor-2: #1158c7;
+    --contribution-winter-bgColor-3: #58a6ff;
+    --contribution-winter-bgColor-4: #cae8ff;
   --control-bgColor-active: #2a313c;
   --control-bgColor-hover: #262c36;
   --control-bgColor-rest: #212830;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css	2025-01-27 22:56:55.428276172 +0000
@@ -119,6 +119,24 @@
 --color-prettylights-syntax-string-regexp: #0550ae;
 --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
 --color-prettylights-syntax-variable: #953800;
+  --contribution-default-bgColor-0: #eff2f5;
+  --contribution-default-bgColor-1: #aceebb;
+  --contribution-default-bgColor-2: #4ac26b;
+  --contribution-default-bgColor-3: #2da44e;
+  --contribution-default-bgColor-4: #116329;
+  --contribution-default-borderColor-0: #1f23280d;
+  --contribution-default-borderColor-1: #1f23280d;
+  --contribution-default-borderColor-2: #1f23280d;
+  --contribution-default-borderColor-3: #1f23280d;
+  --contribution-default-borderColor-4: #1f23280d;
+  --contribution-halloween-bgColor-1: #f0db3d;
+  --contribution-halloween-bgColor-2: #ffd642;
+  --contribution-halloween-bgColor-3: #f68c41;
+  --contribution-halloween-bgColor-4: #1f2328;
+  --contribution-winter-bgColor-1: #b6e3ff;
+  --contribution-winter-bgColor-2: #54aeff;
+  --contribution-winter-bgColor-3: #0969da;
+  --contribution-winter-bgColor-4: #0a3069;
 --control-bgColor-active: #e6eaef;
 --control-bgColor-hover: #eff2f5;
 --control-bgColor-rest: #f6f8fa;
@@ -725,6 +743,24 @@
   --color-prettylights-syntax-string-regexp: #0550ae;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
   --color-prettylights-syntax-variable: #953800;
+    --contribution-default-bgColor-0: #eff2f5;
+    --contribution-default-bgColor-1: #aceebb;
+    --contribution-default-bgColor-2: #4ac26b;
+    --contribution-default-bgColor-3: #2da44e;
+    --contribution-default-bgColor-4: #116329;
+    --contribution-default-borderColor-0: #1f23280d;
+    --contribution-default-borderColor-1: #1f23280d;
+    --contribution-default-borderColor-2: #1f23280d;
+    --contribution-default-borderColor-3: #1f23280d;
+    --contribution-default-borderColor-4: #1f23280d;
+    --contribution-halloween-bgColor-1: #f0db3d;
+    --contribution-halloween-bgColor-2: #ffd642;
+    --contribution-halloween-bgColor-3: #f68c41;
+    --contribution-halloween-bgColor-4: #1f2328;
+    --contribution-winter-bgColor-1: #b6e3ff;
+    --contribution-winter-bgColor-2: #54aeff;
+    --contribution-winter-bgColor-3: #0969da;
+    --contribution-winter-bgColor-4: #0a3069;
   --control-bgColor-active: #e6eaef;
   --control-bgColor-hover: #eff2f5;
   --control-bgColor-rest: #f6f8fa;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2025-01-27 22:56:56.513275686 +0000
@@ -125,6 +125,24 @@
 --color-prettylights-syntax-string-regexp: #024c1a;
 --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
 --color-prettylights-syntax-variable: #702c00;
+  --contribution-default-bgColor-0: #e6eaef;
+  --contribution-default-bgColor-1: #82e596;
+  --contribution-default-bgColor-2: #26a148;
+  --contribution-default-bgColor-3: #117f32;
+  --contribution-default-bgColor-4: #024c1a;
+  --contribution-default-borderColor-0: #010409;
+  --contribution-default-borderColor-1: #010409;
+  --contribution-default-borderColor-2: #010409;
+  --contribution-default-borderColor-3: #010409;
+  --contribution-default-borderColor-4: #010409;
+  --contribution-halloween-bgColor-1: #f0db3d;
+  --contribution-halloween-bgColor-2: #ffd642;
+  --contribution-halloween-bgColor-3: #f68c41;
+  --contribution-halloween-bgColor-4: #010409;
+  --contribution-winter-bgColor-1: #9cd7ff;
+  --contribution-winter-bgColor-2: #368cf9;
+  --contribution-winter-bgColor-3: #0349b4;
+  --contribution-winter-bgColor-4: #032563;
 --control-bgColor-active: #d1d9e0;
 --control-bgColor-hover: #dae0e7;
 --control-bgColor-rest: #e0e6eb;
@@ -731,6 +749,24 @@
   --color-prettylights-syntax-string-regexp: #024c1a;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
   --color-prettylights-syntax-variable: #702c00;
+    --contribution-default-bgColor-0: #e6eaef;
+    --contribution-default-bgColor-1: #82e596;
+    --contribution-default-bgColor-2: #26a148;
+    --contribution-default-bgColor-3: #117f32;
+    --contribution-default-bgColor-4: #024c1a;
+    --contribution-default-borderColor-0: #010409;
+    --contribution-default-borderColor-1: #010409;
+    --contribution-default-borderColor-2: #010409;
+    --contribution-default-borderColor-3: #010409;
+    --contribution-default-borderColor-4: #010409;
+    --contribution-halloween-bgColor-1: #f0db3d;
+    --contribution-halloween-bgColor-2: #ffd642;
+    --contribution-halloween-bgColor-3: #f68c41;
+    --contribution-halloween-bgColor-4: #010409;
+    --contribution-winter-bgColor-1: #9cd7ff;
+    --contribution-winter-bgColor-2: #368cf9;
+    --contribution-winter-bgColor-3: #0349b4;
+    --contribution-winter-bgColor-4: #032563;
   --control-bgColor-active: #d1d9e0;
   --control-bgColor-hover: #dae0e7;
   --control-bgColor-rest: #e0e6eb;

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

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia.css	2025-01-27 22:56:54.221276713 +0000
@@ -124,6 +124,24 @@
 --color-prettylights-syntax-string-regexp: #0550ae;
 --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
 --color-prettylights-syntax-variable: #a40e26;
+  --contribution-default-bgColor-0: #eff2f5;
+  --contribution-default-bgColor-1: #aceebb;
+  --contribution-default-bgColor-2: #4ac26b;
+  --contribution-default-bgColor-3: #2da44e;
+  --contribution-default-bgColor-4: #116329;
+  --contribution-default-borderColor-0: #1f23280d;
+  --contribution-default-borderColor-1: #1f23280d;
+  --contribution-default-borderColor-2: #1f23280d;
+  --contribution-default-borderColor-3: #1f23280d;
+  --contribution-default-borderColor-4: #1f23280d;
+  --contribution-halloween-bgColor-1: #f0db3d;
+  --contribution-halloween-bgColor-2: #ffd642;
+  --contribution-halloween-bgColor-3: #f68c41;
+  --contribution-halloween-bgColor-4: #1f2328;
+  --contribution-winter-bgColor-1: #b6e3ff;
+  --contribution-winter-bgColor-2: #54aeff;
+  --contribution-winter-bgColor-3: #0969da;
+  --contribution-winter-bgColor-4: #0a3069;
 --control-bgColor-active: #e6eaef;
 --control-bgColor-hover: #eff2f5;
 --control-bgColor-rest: #f6f8fa;
@@ -730,6 +748,24 @@
   --color-prettylights-syntax-string-regexp: #0550ae;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
   --color-prettylights-syntax-variable: #a40e26;
+    --contribution-default-bgColor-0: #eff2f5;
+    --contribution-default-bgColor-1: #aceebb;
+    --contribution-default-bgColor-2: #4ac26b;
+    --contribution-default-bgColor-3: #2da44e;
+    --contribution-default-bgColor-4: #116329;
+    --contribution-default-borderColor-0: #1f23280d;
+    --contribution-default-borderColor-1: #1f23280d;
+    --contribution-default-borderColor-2: #1f23280d;
+    --contribution-default-borderColor-3: #1f23280d;
+    --contribution-default-borderColor-4: #1f23280d;
+    --contribution-halloween-bgColor-1: #f0db3d;
+    --contribution-halloween-bgColor-2: #ffd642;
+    --contribution-halloween-bgColor-3: #f68c41;
+    --contribution-halloween-bgColor-4: #1f2328;
+    --contribution-winter-bgColor-1: #b6e3ff;
+    --contribution-winter-bgColor-2: #54aeff;
+    --contribution-winter-bgColor-3: #0969da;
+    --contribution-winter-bgColor-4: #0a3069;
   --control-bgColor-active: #e6eaef;
   --control-bgColor-hover: #eff2f5;
   --control-bgColor-rest: #f6f8fa;

/css/functional/themes/light.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css	2025-01-27 22:56:53.045277240 +0000
@@ -122,6 +122,24 @@
 --color-prettylights-syntax-string-regexp: #116329;
 --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
 --color-prettylights-syntax-variable: #953800;
+  --contribution-default-bgColor-0: #eff2f5;
+  --contribution-default-bgColor-1: #aceebb;
+  --contribution-default-bgColor-2: #4ac26b;
+  --contribution-default-bgColor-3: #2da44e;
+  --contribution-default-bgColor-4: #116329;
+  --contribution-default-borderColor-0: #1f23280d;
+  --contribution-default-borderColor-1: #1f23280d;
+  --contribution-default-borderColor-2: #1f23280d;
+  --contribution-default-borderColor-3: #1f23280d;
+  --contribution-default-borderColor-4: #1f23280d;
+  --contribution-halloween-bgColor-1: #f0db3d;
+  --contribution-halloween-bgColor-2: #ffd642;
+  --contribution-halloween-bgColor-3: #f68c41;
+  --contribution-halloween-bgColor-4: #1f2328;
+  --contribution-winter-bgColor-1: #b6e3ff;
+  --contribution-winter-bgColor-2: #54aeff;
+  --contribution-winter-bgColor-3: #0969da;
+  --contribution-winter-bgColor-4: #0a3069;
 --control-bgColor-active: #e6eaef;
 --control-bgColor-hover: #eff2f5;
 --control-bgColor-rest: #f6f8fa;
@@ -728,6 +746,24 @@
   --color-prettylights-syntax-string-regexp: #116329;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
   --color-prettylights-syntax-variable: #953800;
+    --contribution-default-bgColor-0: #eff2f5;
+    --contribution-default-bgColor-1: #aceebb;
+    --contribution-default-bgColor-2: #4ac26b;
+    --contribution-default-bgColor-3: #2da44e;
+    --contribution-default-bgColor-4: #116329;
+    --contribution-default-borderColor-0: #1f23280d;
+    --contribution-default-borderColor-1: #1f23280d;
+    --contribution-default-borderColor-2: #1f23280d;
+    --contribution-default-borderColor-3: #1f23280d;
+    --contribution-default-borderColor-4: #1f23280d;
+    --contribution-halloween-bgColor-1: #f0db3d;
+    --contribution-halloween-bgColor-2: #ffd642;
+    --contribution-halloween-bgColor-3: #f68c41;
+    --contribution-halloween-bgColor-4: #1f2328;
+    --contribution-winter-bgColor-1: #b6e3ff;
+    --contribution-winter-bgColor-2: #54aeff;
+    --contribution-winter-bgColor-3: #0969da;
+    --contribution-winter-bgColor-4: #0a3069;
   --control-bgColor-active: #e6eaef;
   --control-bgColor-hover: #eff2f5;
   --control-bgColor-rest: #f6f8fa;

@github-actions
Copy link
Contributor

github-actions bot commented Jan 25, 2025

Design Token Diff (StyleLint)

The message is too long to be displayed here. For more details, please check the job summary.

@github-actions
Copy link
Contributor

github-actions bot commented Jan 25, 2025

Design Token Diff (Figma)

The message is too long to be displayed here. For more details, please check the job summary.

Comment on lines +86 to +101
'org.primer.overrides': {
dark: {
$value: '{base.color.white}',
alpha: 0.05,
},
'dark-dimmed': {
$value: '{base.color.white}',
alpha: 0.05,
},
'dark-high-contrast': {
$value: '{base.color.white}',
alpha: 1,
},
'light-high-contrast': {
alpha: 1,
},
Copy link
Contributor Author

Choose a reason for hiding this comment

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

How does this look @lukasoppermann? Can I just override alpha like I've done for light high contrast?

Also, you may notice all of these border colors are the same (so why do we need individual tokens?) I plan to override them individually to achieve 3:1 contrast behind our border contrast feature flag. I'm not sure what the token structure will look like for that yet but I know I need custom values for each level 😄

Copy link
Collaborator

@lukasoppermann lukasoppermann Jan 27, 2025

Choose a reason for hiding this comment

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

Yes, it works.

@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 25, 2025 00:24 Inactive
@langermank langermank added the update snapshots Update visual regression test snapshots label Jan 25, 2025
@langermank langermank marked this pull request as ready for review January 25, 2025 00:32
@langermank langermank requested review from a team as code owners January 25, 2025 00:32
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Jan 25, 2025
@primer primer bot temporarily deployed to github-pages January 25, 2025 01:09 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 25, 2025 01:09 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 27, 2025 22:58 Inactive
@langermank langermank merged commit 7256edd into main Jan 27, 2025
27 checks passed
@langermank langermank deleted the contrib-graph-tokens branch January 27, 2025 23:07
@primer primer bot mentioned this pull request Jan 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants