Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Combine dark and light default button into button.json5 #1179

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Combine dark and light default button into button.json5 #1179

wants to merge 6 commits into from
+1,528 −2,045

Conversation

lukasoppermann
Copy link
Contributor

@lukasoppermann lukasoppermann commented Jan 31, 2025 •
edited
Loading

Summary

Accepting change because it was a divergence in dark mode.

List of notable changes:

What should reviewers focus on?

Steps to test:

@lukasoppermann lukasoppermann added the skip changeset Apply to PRs that should not result in a version bump. label Jan 31, 2025
@lukasoppermann lukasoppermann self-assigned this Jan 31, 2025
@lukasoppermann lukasoppermann requested review from a team as code owners January 31, 2025 10:48
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jan 31, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: ff9c5d0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 31, 2025 •
edited
Loading

Design Token Diff (CSS)

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-colorblind.css	2025-01-31 13:34:59.784393585 +0000
@@ -621,7 +621,7 @@
 --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
 --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
 --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="dark_colorblind"],
@@ -1245,6 +1245,6 @@
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
}

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-dimmed.css	2025-01-31 13:34:57.046372772 +0000
@@ -621,7 +621,7 @@
 --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 --focus-outline: 2px solid #316dca;
 --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="dark_dimmed"],
@@ -1245,6 +1245,6 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --focus-outline: 2px solid #316dca;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
}

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-high-contrast.css	2025-01-31 13:35:01.027403060 +0000
@@ -621,7 +621,7 @@
 --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
 --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
@@ -1245,6 +1245,6 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
}

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark-tritanopia.css	2025-01-31 13:34:58.443383364 +0000
@@ -621,7 +621,7 @@
 --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
 --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
 --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="dark_tritanopia"],
@@ -1245,6 +1245,6 @@
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
}

/css/functional/themes/dark.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/dark.css	2025-01-31 13:34:55.842363820 +0000
@@ -621,7 +621,7 @@
 --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
 --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
 --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
}
@media (prefers-color-scheme: dark) {
 [data-color-mode="auto"][data-dark-theme="dark"],
@@ -1245,6 +1245,6 @@
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
}

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-colorblind.css	2025-01-31 13:34:53.337345195 +0000
@@ -574,7 +574,6 @@
 --button-default-bgColor-disabled: var(--control-bgColor-disabled);
 --button-default-borderColor-active: var(--control-borderColor-rest);
 --button-default-borderColor-disabled: var(--control-borderColor-disabled);
-  --button-default-borderColor-hover: var(--control-borderColor-rest);
 --button-default-borderColor-rest: var(--control-borderColor-rest);
 --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
 --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -616,6 +615,7 @@
 --underlineNav-borderColor-hover: var(--borderColor-muted);
 --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
 --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
+  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
 --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
 --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
 --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
@@ -1198,7 +1198,6 @@
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-active: var(--control-borderColor-rest);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
-    --button-default-borderColor-hover: var(--control-borderColor-rest);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -1240,6 +1239,7 @@
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
+    --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
   --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-high-contrast.css	2025-01-31 13:34:54.568354348 +0000
@@ -574,7 +574,6 @@
 --button-default-bgColor-disabled: var(--control-bgColor-disabled);
 --button-default-borderColor-active: var(--control-borderColor-rest);
 --button-default-borderColor-disabled: var(--control-borderColor-disabled);
-  --button-default-borderColor-hover: var(--control-borderColor-rest);
 --button-default-borderColor-rest: var(--control-borderColor-rest);
 --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
 --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
@@ -621,6 +620,7 @@
 --tooltip-fgColor: var(--fgColor-onEmphasis);
 --underlineNav-borderColor-hover: var(--borderColor-muted);
 --border-neutral-muted: 0.0625rem solid #454c54;
+  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
 --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
}
@media (prefers-color-scheme: dark) {
@@ -1198,7 +1198,6 @@
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-active: var(--control-borderColor-rest);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
-    --button-default-borderColor-hover: var(--control-borderColor-rest);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
   --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
@@ -1245,6 +1244,7 @@
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #454c54;
+    --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 }
}

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

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light-tritanopia.css	2025-01-31 13:34:52.057335678 +0000
@@ -574,7 +574,6 @@
 --button-default-bgColor-disabled: var(--control-bgColor-disabled);
 --button-default-borderColor-active: var(--control-borderColor-rest);
 --button-default-borderColor-disabled: var(--control-borderColor-disabled);
-  --button-default-borderColor-hover: var(--control-borderColor-rest);
 --button-default-borderColor-rest: var(--control-borderColor-rest);
 --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
 --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -616,6 +615,7 @@
 --underlineNav-borderColor-hover: var(--borderColor-muted);
 --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
 --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
+  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
 --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
 --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
 --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
@@ -1198,7 +1198,6 @@
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-active: var(--control-borderColor-rest);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
-    --button-default-borderColor-hover: var(--control-borderColor-rest);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -1240,6 +1239,7 @@
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
+    --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
   --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;

/css/functional/themes/light.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/themes/light.css	2025-01-31 13:34:50.799326325 +0000
@@ -574,7 +574,6 @@
 --button-default-bgColor-disabled: var(--control-bgColor-disabled);
 --button-default-borderColor-active: var(--control-borderColor-rest);
 --button-default-borderColor-disabled: var(--control-borderColor-disabled);
-  --button-default-borderColor-hover: var(--control-borderColor-rest);
 --button-default-borderColor-rest: var(--control-borderColor-rest);
 --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
 --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -616,6 +615,7 @@
 --underlineNav-borderColor-hover: var(--borderColor-muted);
 --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
 --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
+  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
 --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
 --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
 --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
@@ -1198,7 +1198,6 @@
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-active: var(--control-borderColor-rest);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
-    --button-default-borderColor-hover: var(--control-borderColor-rest);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -1240,6 +1239,7 @@
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
+    --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
   --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 31, 2025 •
edited
Loading

Design Token Diff (StyleLint)

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

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 31, 2025 •
edited
Loading

Design Token Diff (Figma)

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

@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 31, 2025 10:50 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 31, 2025 10:57 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 31, 2025 11:09 Inactive
@lukasoppermann lukasoppermann added the update snapshots Update visual regression test snapshots label Jan 31, 2025
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Jan 31, 2025
@primer primer bot temporarily deployed to github-pages January 31, 2025 12:22 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 31, 2025 12:22 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 31, 2025 12:40 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 31, 2025 13:24 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@langermank langermank Awaiting requested review from langermank langermank is a code owner automatically assigned from primer/css-reviewers

At least 1 approving review is required to merge this pull request.

Assignees

@lukasoppermann lukasoppermann

Labels
skip changeset Apply to PRs that should not result in a version bump.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@lukasoppermann