Skip to content

FG colors for non-default modes #557

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
Merged
lukasoppermann merged 3 commits into from
Apr 5, 2023
Merged

FG colors for non-default modes #557

lukasoppermann merged 3 commits into from
Apr 5, 2023

Conversation

@lukasoppermann
Copy link
Collaborator

@lukasoppermann lukasoppermann commented Apr 5, 2023

Summary

This PR adds exceptions for the non-default modes to avoid color overrides.

@lukasoppermann lukasoppermann requested a review from a team as a code owner April 5, 2023 06:31
@lukasoppermann lukasoppermann requested review from a team, broccolinisoup and tobiasahlin April 5, 2023 06:31
@changeset-bot
Copy link

changeset-bot bot commented Apr 5, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: df6cabb

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

@lukasoppermann lukasoppermann requested review from simurai and removed request for broccolinisoup and tobiasahlin April 5, 2023 06:32
@github-actions
Copy link
Contributor

github-actions bot commented Apr 5, 2023 •
edited
Loading

Variables changed ```diff --- base/dist/scss/colors/_dark_colorblind.scss 2023-04-05 06:51:49.544075678 +0000 +++ dist/scss/colors/_dark_colorblind.scss 2023-04-05 06:50:21.481127495 +0000 @@ -6,4 +6,4 @@ --color-marketing-icon-secondary: #1f6feb; - --color-diff-blob-addition-num-text: #e6edf3; - --color-diff-blob-addition-fg: #e6edf3; + --color-diff-blob-addition-num-text: #c9d1d9; + --color-diff-blob-addition-fg: #c9d1d9; --color-diff-blob-addition-num-bg: rgba(88,166,255,0.3); @@ -11,4 +11,4 @@ --color-diff-blob-addition-word-bg: rgba(56,139,253,0.4); - --color-diff-blob-deletion-num-text: #e6edf3; - --color-diff-blob-deletion-fg: #e6edf3; + --color-diff-blob-deletion-num-text: #c9d1d9; + --color-diff-blob-deletion-fg: #c9d1d9; --color-diff-blob-deletion-num-bg: rgba(212,118,22,0.3); @@ -17,3 +17,3 @@ --color-diff-blob-hunk-num-bg: rgba(56,139,253,0.4); - --color-diff-blob-expander-icon: #7d8590; + --color-diff-blob-expander-icon: #8b949e; --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; @@ -53,3 +53,3 @@ --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; - --color-codemirror-text: #e6edf3; + --color-codemirror-text: #c9d1d9; --color-codemirror-bg: #0d1117; @@ -58,7 +58,7 @@ --color-codemirror-guttermarker-subtle-text: #6e7681; - --color-codemirror-linenumber-text: #7d8590; - --color-codemirror-cursor: #e6edf3; + --color-codemirror-linenumber-text: #8b949e; + --color-codemirror-cursor: #c9d1d9; --color-codemirror-selection-bg: rgba(56,139,253,0.4); --color-codemirror-activeline-bg: rgba(110,118,129,0.1); - --color-codemirror-matchingbracket-text: #e6edf3; + --color-codemirror-matchingbracket-text: #c9d1d9; --color-codemirror-lines-bg: #0d1117; @@ -75,11 +75,11 @@ --color-checks-container-border-width: 1px; - --color-checks-text-primary: #e6edf3; - --color-checks-text-secondary: #7d8590; + --color-checks-text-primary: #c9d1d9; + --color-checks-text-secondary: #8b949e; --color-checks-text-link: #58a6ff; - --color-checks-btn-icon: #7d8590; - --color-checks-btn-hover-icon: #e6edf3; + --color-checks-btn-icon: #8b949e; + --color-checks-btn-hover-icon: #c9d1d9; --color-checks-btn-hover-bg: rgba(110,118,129,0.1); - --color-checks-input-text: #7d8590; + --color-checks-input-text: #8b949e; --color-checks-input-placeholder-text: #6e7681; - --color-checks-input-focus-text: #e6edf3; + --color-checks-input-focus-text: #c9d1d9; --color-checks-input-bg: #161b22; @@ -90,3 +90,3 @@ --color-checks-donut-neutral: #8b949e; - --color-checks-dropdown-text: #e6edf3; + --color-checks-dropdown-text: #c9d1d9; --color-checks-dropdown-bg: #161b22; @@ -94,12 +94,12 @@ --color-checks-dropdown-shadow: rgba(1,4,9,0.3); - --color-checks-dropdown-hover-text: #e6edf3; + --color-checks-dropdown-hover-text: #c9d1d9; --color-checks-dropdown-hover-bg: rgba(110,118,129,0.1); - --color-checks-dropdown-btn-hover-text: #e6edf3; + --color-checks-dropdown-btn-hover-text: #c9d1d9; --color-checks-dropdown-btn-hover-bg: rgba(110,118,129,0.1); --color-checks-scrollbar-thumb-bg: rgba(110,118,129,0.4); - --color-checks-header-label-text: #7d8590; - --color-checks-header-label-open-text: #e6edf3; + --color-checks-header-label-text: #8b949e; + --color-checks-header-label-open-text: #c9d1d9; --color-checks-header-border: #21262d; - --color-checks-header-icon: #7d8590; - --color-checks-line-text: #7d8590; + --color-checks-header-icon: #8b949e; + --color-checks-line-text: #8b949e; --color-checks-line-num-text: #6e7681; @@ -112,3 +112,3 @@ --color-checks-gate-bg: rgba(187,128,9,0.15); - --color-checks-gate-text: #7d8590; + --color-checks-gate-text: #8b949e; --color-checks-gate-waiting-text: #d29922; @@ -117,9 +117,9 @@ --color-checks-step-warning-text: #d29922; - --color-checks-logline-text: #7d8590; + --color-checks-logline-text: #8b949e; --color-checks-logline-num-text: #6e7681; --color-checks-logline-debug-text: #a371f7; - --color-checks-logline-error-text: #7d8590; + --color-checks-logline-error-text: #8b949e; --color-checks-logline-error-num-text: #6e7681; --color-checks-logline-error-bg: rgba(212,118,22,0.1); - --color-checks-logline-warning-text: #7d8590; + --color-checks-logline-warning-text: #8b949e; --color-checks-logline-warning-num-text: #d29922; @@ -265,3 +265,3 @@ --color-switch-track-disabled-bg: #21262d; - --color-switch-track-fg: #7d8590; + --color-switch-track-fg: #8b949e; --color-switch-track-disabled-fg: #010409; @@ -286,5 +286,5 @@ --color-tree-view-item-chevron-hover-bg: rgba(177,186,196,0.12); - --color-tree-view-item-directory-fill: #7d8590; - --color-fg-default: #e6edf3; - --color-fg-muted: #7d8590; + --color-tree-view-item-directory-fill: #8b949e; + --color-fg-default: #c9d1d9; + --color-fg-muted: #8b949e; --color-fg-subtle: #6e7681; --- base/dist/scss/colors/_dark_dimmed.scss 2023-04-05 06:51:49.532075302 +0000 +++ dist/scss/colors/_dark_dimmed.scss 2023-04-05 06:50:21.469127206 +0000 @@ -6,4 +6,4 @@ --color-marketing-icon-secondary: #316dca; - --color-diff-blob-addition-num-text: #e6edf3; - --color-diff-blob-addition-fg: #e6edf3; + --color-diff-blob-addition-num-text: #adbac7; + --color-diff-blob-addition-fg: #adbac7; --color-diff-blob-addition-num-bg: rgba(87,171,90,0.3); @@ -11,4 +11,4 @@ --color-diff-blob-addition-word-bg: rgba(70,149,74,0.4); - --color-diff-blob-deletion-num-text: #e6edf3; - --color-diff-blob-deletion-fg: #e6edf3; + --color-diff-blob-deletion-num-text: #adbac7; + --color-diff-blob-deletion-fg: #adbac7; --color-diff-blob-deletion-num-bg: rgba(229,83,75,0.3); @@ -17,3 +17,3 @@ --color-diff-blob-hunk-num-bg: rgba(65,132,228,0.4); - --color-diff-blob-expander-icon: #7d8590; + --color-diff-blob-expander-icon: #adbac7; --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; @@ -53,3 +53,3 @@ --color-prettylights-syntax-constant-other-reference-link: #96d0ff; - --color-codemirror-text: #e6edf3; + --color-codemirror-text: #adbac7; --color-codemirror-bg: #22272e; @@ -58,7 +58,7 @@ --color-codemirror-guttermarker-subtle-text: #636e7b; - --color-codemirror-linenumber-text: #7d8590; - --color-codemirror-cursor: #e6edf3; + --color-codemirror-linenumber-text: #768390; + --color-codemirror-cursor: #adbac7; --color-codemirror-selection-bg: rgba(65,132,228,0.4); --color-codemirror-activeline-bg: rgba(99,110,123,0.1); - --color-codemirror-matchingbracket-text: #e6edf3; + --color-codemirror-matchingbracket-text: #adbac7; --color-codemirror-lines-bg: #22272e; @@ -75,11 +75,11 @@ --color-checks-container-border-width: 1px; - --color-checks-text-primary: #e6edf3; - --color-checks-text-secondary: #7d8590; - --color-checks-text-link: #2f81f7; - --color-checks-btn-icon: #7d8590; - --color-checks-btn-hover-icon: #e6edf3; + --color-checks-text-primary: #adbac7; + --color-checks-text-secondary: #768390; + --color-checks-text-link: #539bf5; + --color-checks-btn-icon: #768390; + --color-checks-btn-hover-icon: #adbac7; --color-checks-btn-hover-bg: rgba(99,110,123,0.1); - --color-checks-input-text: #7d8590; + --color-checks-input-text: #768390; --color-checks-input-placeholder-text: #636e7b; - --color-checks-input-focus-text: #e6edf3; + --color-checks-input-focus-text: #adbac7; --color-checks-input-bg: #2d333b; @@ -90,3 +90,3 @@ --color-checks-donut-neutral: #768390; - --color-checks-dropdown-text: #e6edf3; + --color-checks-dropdown-text: #adbac7; --color-checks-dropdown-bg: #2d333b; @@ -94,12 +94,12 @@ --color-checks-dropdown-shadow: rgba(28,33,40,0.3); - --color-checks-dropdown-hover-text: #e6edf3; + --color-checks-dropdown-hover-text: #adbac7; --color-checks-dropdown-hover-bg: rgba(99,110,123,0.1); - --color-checks-dropdown-btn-hover-text: #e6edf3; + --color-checks-dropdown-btn-hover-text: #adbac7; --color-checks-dropdown-btn-hover-bg: rgba(99,110,123,0.1); --color-checks-scrollbar-thumb-bg: rgba(99,110,123,0.4); - --color-checks-header-label-text: #7d8590; - --color-checks-header-label-open-text: #e6edf3; + --color-checks-header-label-text: #768390; + --color-checks-header-label-open-text: #adbac7; --color-checks-header-border: #373e47; - --color-checks-header-icon: #7d8590; - --color-checks-line-text: #7d8590; + --color-checks-header-icon: #768390; + --color-checks-line-text: #768390; --color-checks-line-num-text: #636e7b; @@ -108,3 +108,3 @@ --color-checks-line-selected-bg: rgba(65,132,228,0.1); - --color-checks-line-selected-num-text: #2f81f7; + --color-checks-line-selected-num-text: #539bf5; --color-checks-line-dt-fm-text: #cdd9e5; @@ -112,3 +112,3 @@ --color-checks-gate-bg: rgba(174,124,20,0.15); - --color-checks-gate-text: #7d8590; + --color-checks-gate-text: #768390; --color-checks-gate-waiting-text: #c69026; @@ -117,12 +117,12 @@ --color-checks-step-warning-text: #c69026; - --color-checks-logline-text: #7d8590; + --color-checks-logline-text: #768390; --color-checks-logline-num-text: #636e7b; --color-checks-logline-debug-text: #986ee2; - --color-checks-logline-error-text: #7d8590; + --color-checks-logline-error-text: #768390; --color-checks-logline-error-num-text: #636e7b; --color-checks-logline-error-bg: rgba(229,83,75,0.1); - --color-checks-logline-warning-text: #7d8590; + --color-checks-logline-warning-text: #768390; --color-checks-logline-warning-num-text: #c69026; --color-checks-logline-warning-bg: rgba(174,124,20,0.15); - --color-checks-logline-command-text: #2f81f7; + --color-checks-logline-command-text: #539bf5; --color-checks-logline-section-text: #57ab5a; @@ -265,3 +265,3 @@ --color-switch-track-disabled-bg: #373e47; - --color-switch-track-fg: #7d8590; + --color-switch-track-fg: #768390; --color-switch-track-disabled-fg: #1c2128; @@ -286,5 +286,5 @@ --color-tree-view-item-chevron-hover-bg: rgba(144,157,171,0.12); - --color-tree-view-item-directory-fill: #7d8590; - --color-fg-default: #e6edf3; - --color-fg-muted: #7d8590; + --color-tree-view-item-directory-fill: #768390; + --color-fg-default: #adbac7; + --color-fg-muted: #768390; --color-fg-subtle: #636e7b; @@ -306,3 +306,3 @@ --color-neutral-subtle: rgba(99,110,123,0.1); - --color-accent-fg: #2f81f7; + --color-accent-fg: #539bf5; --color-accent-emphasis: #316dca; --- base/dist/scss/colors/_dark_high_contrast.scss 2023-04-05 06:51:49.540075553 +0000 +++ dist/scss/colors/_dark_high_contrast.scss 2023-04-05 06:50:21.477127399 +0000 @@ -6,3 +6,3 @@ --color-marketing-icon-secondary: #409eff; - --color-diff-blob-addition-num-text: #e6edf3; + --color-diff-blob-addition-num-text: #f0f3f6; --color-diff-blob-addition-fg: #0a0c10; @@ -11,3 +11,3 @@ --color-diff-blob-addition-word-bg: #09b43a; - --color-diff-blob-deletion-num-text: #e6edf3; + --color-diff-blob-deletion-num-text: #f0f3f6; --color-diff-blob-deletion-fg: #0a0c10; @@ -17,3 +17,3 @@ --color-diff-blob-hunk-num-bg: rgba(64,158,255,0.4); - --color-diff-blob-expander-icon: #e6edf3; + --color-diff-blob-expander-icon: #f0f3f6; --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; @@ -53,3 +53,3 @@ --color-prettylights-syntax-constant-other-reference-link: #addcff; - --color-codemirror-text: #e6edf3; + --color-codemirror-text: #f0f3f6; --color-codemirror-bg: #0a0c10; @@ -59,6 +59,6 @@ --color-codemirror-linenumber-text: #f0f3f6; - --color-codemirror-cursor: #e6edf3; + --color-codemirror-cursor: #f0f3f6; --color-codemirror-selection-bg: rgba(64,158,255,0.4); --color-codemirror-activeline-bg: rgba(158,167,179,0.1); - --color-codemirror-matchingbracket-text: #e6edf3; + --color-codemirror-matchingbracket-text: #f0f3f6; --color-codemirror-lines-bg: #0a0c10; @@ -75,3 +75,3 @@ --color-checks-container-border-width: 1px; - --color-checks-text-primary: #e6edf3; + --color-checks-text-primary: #f0f3f6; --color-checks-text-secondary: #f0f3f6; @@ -79,3 +79,3 @@ --color-checks-btn-icon: #f0f3f6; - --color-checks-btn-hover-icon: #e6edf3; + --color-checks-btn-hover-icon: #f0f3f6; --color-checks-btn-hover-bg: rgba(158,167,179,0.1); @@ -83,3 +83,3 @@ --color-checks-input-placeholder-text: #9ea7b3; - --color-checks-input-focus-text: #e6edf3; + --color-checks-input-focus-text: #f0f3f6; --color-checks-input-bg: #272b33; @@ -90,3 +90,3 @@ --color-checks-donut-neutral: #bdc4cc; - --color-checks-dropdown-text: #e6edf3; + --color-checks-dropdown-text: #f0f3f6; --color-checks-dropdown-bg: #272b33; @@ -94,5 +94,5 @@ --color-checks-dropdown-shadow: rgba(1,4,9,0.3); - --color-checks-dropdown-hover-text: #e6edf3; + --color-checks-dropdown-hover-text: #f0f3f6; --color-checks-dropdown-hover-bg: rgba(158,167,179,0.1); - --color-checks-dropdown-btn-hover-text: #e6edf3; + --color-checks-dropdown-btn-hover-text: #f0f3f6; --color-checks-dropdown-btn-hover-bg: rgba(158,167,179,0.1); @@ -100,3 +100,3 @@ --color-checks-header-label-text: #f0f3f6; - --color-checks-header-label-open-text: #e6edf3; + --color-checks-header-label-open-text: #f0f3f6; --color-checks-header-border: #7a828e; @@ -287,3 +287,3 @@ --color-tree-view-item-directory-fill: #f0f3f6; - --color-fg-default: #e6edf3; + --color-fg-default: #f0f3f6; --color-fg-muted: #f0f3f6; --- base/dist/scss/colors/_dark_tritanopia.scss 2023-04-05 06:51:49.548075803 +0000 +++ dist/scss/colors/_dark_tritanopia.scss 2023-04-05 06:50:21.485127591 +0000 @@ -6,4 +6,4 @@ --color-marketing-icon-secondary: #1f6feb; - --color-diff-blob-addition-num-text: #e6edf3; - --color-diff-blob-addition-fg: #e6edf3; + --color-diff-blob-addition-num-text: #c9d1d9; + --color-diff-blob-addition-fg: #c9d1d9; --color-diff-blob-addition-num-bg: rgba(88,166,255,0.3); @@ -11,4 +11,4 @@ --color-diff-blob-addition-word-bg: rgba(56,139,253,0.4); - --color-diff-blob-deletion-num-text: #e6edf3; - --color-diff-blob-deletion-fg: #e6edf3; + --color-diff-blob-deletion-num-text: #c9d1d9; + --color-diff-blob-deletion-fg: #c9d1d9; --color-diff-blob-deletion-num-bg: rgba(248,81,73,0.3); @@ -17,3 +17,3 @@ --color-diff-blob-hunk-num-bg: rgba(56,139,253,0.4); - --color-diff-blob-expander-icon: #7d8590; + --color-diff-blob-expander-icon: #8b949e; --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; @@ -53,3 +53,3 @@ --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; - --color-codemirror-text: #e6edf3; + --color-codemirror-text: #c9d1d9; --color-codemirror-bg: #0d1117; @@ -58,7 +58,7 @@ --color-codemirror-guttermarker-subtle-text: #6e7681; - --color-codemirror-linenumber-text: #7d8590; - --color-codemirror-cursor: #e6edf3; + --color-codemirror-linenumber-text: #8b949e; + --color-codemirror-cursor: #c9d1d9; --color-codemirror-selection-bg: rgba(56,139,253,0.4); --color-codemirror-activeline-bg: rgba(110,118,129,0.1); - --color-codemirror-matchingbracket-text: #e6edf3; + --color-codemirror-matchingbracket-text: #c9d1d9; --color-codemirror-lines-bg: #0d1117; @@ -75,11 +75,11 @@ --color-checks-container-border-width: 1px; - --color-checks-text-primary: #e6edf3; - --color-checks-text-secondary: #7d8590; + --color-checks-text-primary: #c9d1d9; + --color-checks-text-secondary: #8b949e; --color-checks-text-link: #58a6ff; - --color-checks-btn-icon: #7d8590; - --color-checks-btn-hover-icon: #e6edf3; + --color-checks-btn-icon: #8b949e; + --color-checks-btn-hover-icon: #c9d1d9; --color-checks-btn-hover-bg: rgba(110,118,129,0.1); - --color-checks-input-text: #7d8590; + --color-checks-input-text: #8b949e; --color-checks-input-placeholder-text: #6e7681; - --color-checks-input-focus-text: #e6edf3; + --color-checks-input-focus-text: #c9d1d9; --color-checks-input-bg: #161b22; @@ -90,3 +90,3 @@ --color-checks-donut-neutral: #8b949e; - --color-checks-dropdown-text: #e6edf3; + --color-checks-dropdown-text: #c9d1d9; --color-checks-dropdown-bg: #161b22; @@ -94,12 +94,12 @@ --color-checks-dropdown-shadow: rgba(1,4,9,0.3); - --color-checks-dropdown-hover-text: #e6edf3; + --color-checks-dropdown-hover-text: #c9d1d9; --color-checks-dropdown-hover-bg: rgba(110,118,129,0.1); - --color-checks-dropdown-btn-hover-text: #e6edf3; + --color-checks-dropdown-btn-hover-text: #c9d1d9; --color-checks-dropdown-btn-hover-bg: rgba(110,118,129,0.1); --color-checks-scrollbar-thumb-bg: rgba(110,118,129,0.4); - --color-checks-header-label-text: #7d8590; - --color-checks-header-label-open-text: #e6edf3; + --color-checks-header-label-text: #8b949e; + --color-checks-header-label-open-text: #c9d1d9; --color-checks-header-border: #21262d; - --color-checks-header-icon: #7d8590; - --color-checks-line-text: #7d8590; + --color-checks-header-icon: #8b949e; + --color-checks-line-text: #8b949e; --color-checks-line-num-text: #6e7681; @@ -112,3 +112,3 @@ --color-checks-gate-bg: rgba(187,128,9,0.15); - --color-checks-gate-text: #7d8590; + --color-checks-gate-text: #8b949e; --color-checks-gate-waiting-text: #d29922; @@ -117,9 +117,9 @@ --color-checks-step-warning-text: #d29922; - --color-checks-logline-text: #7d8590; + --color-checks-logline-text: #8b949e; --color-checks-logline-num-text: #6e7681; --color-checks-logline-debug-text: #a371f7; - --color-checks-logline-error-text: #7d8590; + --color-checks-logline-error-text: #8b949e; --color-checks-logline-error-num-text: #6e7681; --color-checks-logline-error-bg: rgba(248,81,73,0.1); - --color-checks-logline-warning-text: #7d8590; + --color-checks-logline-warning-text: #8b949e; --color-checks-logline-warning-num-text: #d29922; @@ -265,3 +265,3 @@ --color-switch-track-disabled-bg: #21262d; - --color-switch-track-fg: #7d8590; + --color-switch-track-fg: #8b949e; --color-switch-track-disabled-fg: #010409; @@ -286,5 +286,5 @@ --color-tree-view-item-chevron-hover-bg: rgba(177,186,196,0.12); - --color-tree-view-item-directory-fill: #7d8590; - --color-fg-default: #e6edf3; - --color-fg-muted: #7d8590; + --color-tree-view-item-directory-fill: #8b949e; + --color-fg-default: #c9d1d9; + --color-fg-muted: #8b949e; --color-fg-subtle: #6e7681; --- base/dist/scss/colors/_light_colorblind.scss 2023-04-05 06:51:49.512074675 +0000 +++ dist/scss/colors/_light_colorblind.scss 2023-04-05 06:50:21.449126724 +0000 @@ -6,4 +6,4 @@ --color-marketing-icon-secondary: #54aeff; - --color-diff-blob-addition-num-text: #1b1f24; - --color-diff-blob-addition-fg: #1b1f24; + --color-diff-blob-addition-num-text: #24292f; + --color-diff-blob-addition-fg: #24292f; --color-diff-blob-addition-num-bg: rgba(84,174,255,0.4); @@ -11,4 +11,4 @@ --color-diff-blob-addition-word-bg: rgba(84,174,255,0.4); - --color-diff-blob-deletion-num-text: #1b1f24; - --color-diff-blob-deletion-fg: #1b1f24; + --color-diff-blob-deletion-num-text: #24292f; + --color-diff-blob-deletion-fg: #24292f; --color-diff-blob-deletion-num-bg: rgba(247,153,57,0.4); @@ -17,3 +17,3 @@ --color-diff-blob-hunk-num-bg: rgba(84,174,255,0.4); - --color-diff-blob-expander-icon: #656d76; + --color-diff-blob-expander-icon: #57606a; --color-diff-blob-selected-line-highlight-mix-blend-mode: multiply; @@ -53,3 +53,3 @@ --color-prettylights-syntax-constant-other-reference-link: #0a3069; - --color-codemirror-text: #1b1f24; + --color-codemirror-text: #24292f; --color-codemirror-bg: #ffffff; @@ -58,7 +58,7 @@ --color-codemirror-guttermarker-subtle-text: #6e7781; - --color-codemirror-linenumber-text: #656d76; - --color-codemirror-cursor: #1b1f24; + --color-codemirror-linenumber-text: #57606a; + --color-codemirror-cursor: #24292f; --color-codemirror-selection-bg: rgba(84,174,255,0.4); --color-codemirror-activeline-bg: rgba(234,238,242,0.5); - --color-codemirror-matchingbracket-text: #1b1f24; + --color-codemirror-matchingbracket-text: #24292f; --color-codemirror-lines-bg: #ffffff; @@ -265,3 +265,3 @@ --color-switch-track-disabled-bg: #8c959f; - --color-switch-track-fg: #656d76; + --color-switch-track-fg: #57606a; --color-switch-track-disabled-fg: #ffffff; @@ -287,4 +287,4 @@ --color-tree-view-item-directory-fill: #54aeff; - --color-fg-default: #1b1f24; - --color-fg-muted: #656d76; + --color-fg-default: #24292f; + --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --- base/dist/scss/colors/_light_high_contrast.scss 2023-04-05 06:51:49.508074550 +0000 +++ dist/scss/colors/_light_high_contrast.scss 2023-04-05 06:50:21.445126628 +0000 @@ -6,3 +6,3 @@ --color-marketing-icon-secondary: #368cf9; - --color-diff-blob-addition-num-text: #010409; + --color-diff-blob-addition-num-text: #0e1116; --color-diff-blob-addition-fg: #ffffff; @@ -11,3 +11,3 @@ --color-diff-blob-addition-word-bg: #055d20; - --color-diff-blob-deletion-num-text: #010409; + --color-diff-blob-deletion-num-text: #0e1116; --color-diff-blob-deletion-fg: #ffffff; @@ -53,3 +53,3 @@ --color-prettylights-syntax-constant-other-reference-link: #032563; - --color-codemirror-text: #010409; + --color-codemirror-text: #0e1116; --color-codemirror-bg: #ffffff; @@ -59,6 +59,6 @@ --color-codemirror-linenumber-text: #0e1116; - --color-codemirror-cursor: #010409; + --color-codemirror-cursor: #0e1116; --color-codemirror-selection-bg: #368cf9; --color-codemirror-activeline-bg: #e7ecf0; - --color-codemirror-matchingbracket-text: #010409; + --color-codemirror-matchingbracket-text: #0e1116; --color-codemirror-lines-bg: #ffffff; @@ -287,3 +287,3 @@ --color-tree-view-item-directory-fill: #368cf9; - --color-fg-default: #010409; + --color-fg-default: #0e1116; --color-fg-muted: #0e1116; --- base/dist/scss/colors/_light_tritanopia.scss 2023-04-05 06:51:49.520074926 +0000 +++ dist/scss/colors/_light_tritanopia.scss 2023-04-05 06:50:21.457126917 +0000 @@ -6,4 +6,4 @@ --color-marketing-icon-secondary: #54aeff; - --color-diff-blob-addition-num-text: #1b1f24; - --color-diff-blob-addition-fg: #1b1f24; + --color-diff-blob-addition-num-text: #24292f; + --color-diff-blob-addition-fg: #24292f; --color-diff-blob-addition-num-bg: rgba(84,174,255,0.4); @@ -11,4 +11,4 @@ --color-diff-blob-addition-word-bg: rgba(84,174,255,0.4); - --color-diff-blob-deletion-num-text: #1b1f24; - --color-diff-blob-deletion-fg: #1b1f24; + --color-diff-blob-deletion-num-text: #24292f; + --color-diff-blob-deletion-fg: #24292f; --color-diff-blob-deletion-num-bg: rgba(255,129,130,0.4); @@ -17,3 +17,3 @@ --color-diff-blob-hunk-num-bg: rgba(84,174,255,0.4); - --color-diff-blob-expander-icon: #656d76; + --color-diff-blob-expander-icon: #57606a; --color-diff-blob-selected-line-highlight-mix-blend-mode: multiply; @@ -53,3 +53,3 @@ --color-prettylights-syntax-constant-other-reference-link: #0a3069; - --color-codemirror-text: #1b1f24; + --color-codemirror-text: #24292f; --color-codemirror-bg: #ffffff; @@ -58,7 +58,7 @@ --color-codemirror-guttermarker-subtle-text: #6e7781; - --color-codemirror-linenumber-text: #656d76; - --color-codemirror-cursor: #1b1f24; + --color-codemirror-linenumber-text: #57606a; + --color-codemirror-cursor: #24292f; --color-codemirror-selection-bg: rgba(84,174,255,0.4); --color-codemirror-activeline-bg: rgba(234,238,242,0.5); - --color-codemirror-matchingbracket-text: #1b1f24; + --color-codemirror-matchingbracket-text: #24292f; --color-codemirror-lines-bg: #ffffff; @@ -265,3 +265,3 @@ --color-switch-track-disabled-bg: #8c959f; - --color-switch-track-fg: #656d76; + --color-switch-track-fg: #57606a; --color-switch-track-disabled-fg: #ffffff; @@ -287,4 +287,4 @@ --color-tree-view-item-directory-fill: #54aeff; - --color-fg-default: #1b1f24; - --color-fg-muted: #656d76; + --color-fg-default: #24292f; + --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; ```

@github-actions
Copy link
Contributor

github-actions bot commented Apr 5, 2023 •
edited
Loading

Design Token Contrast Check

light: ✅ all checks passed

Show results table for theme: light
contrastPair pass contrastRatio minimumContrastRatio
fg.default vs. canvas.default ✅ 15.79:1 4.5:1
fg.muted vs. canvas.default ✅ 5.24:1 4.5:1
fg.subtle vs. canvas.default ✅ 4.54:1 4.5:1
fg.default vs. canvas.subtle ✅ 14.83:1 4.5:1
fg.muted vs. canvas.subtle ✅ 4.92:1 4.5:1
fg.default vs. canvas.inset ✅ 14.83:1 4.5:1
fg.muted vs. canvas.inset ✅ 4.92:1 4.5:1
fg.default vs. accent.fg ✅ 3.04:1 3:1
fg.default vs. fg.muted ✅ 3.01:1 3:1
fg.default vs. accent.subtle ✅ 13.88:1 4.5:1
fg.default vs. success.subtle ✅ 14.19:1 4.5:1
fg.default vs. open.subtle ✅ 14.19:1 4.5:1
fg.default vs. danger.subtle ✅ 13.77:1 4.5:1
fg.default vs. closed.subtle ✅ 13.77:1 4.5:1
fg.default vs. attention.subtle ✅ 14.65:1 4.5:1
fg.default vs. severe.subtle ✅ 14.26:1 4.5:1
fg.default vs. done.subtle ✅ 14.21:1 4.5:1
fg.default vs. sponsors.subtle ✅ 14.24:1 4.5:1
accent.fg vs. canvas.default ✅ 5.19:1 4.5:1
accent.fg vs. canvas.subtle ✅ 4.87:1 4.5:1
accent.fg vs. canvas.inset ✅ 4.87:1 4.5:1
success.fg vs. canvas.default ✅ 5.07:1 4.5:1
success.fg vs. canvas.subtle ✅ 4.77:1 4.5:1
success.fg vs. canvas.inset ✅ 4.77:1 4.5:1
open.fg vs. canvas.default ✅ 5.07:1 4.5:1
open.fg vs. canvas.subtle ✅ 4.77:1 4.5:1
open.fg vs. canvas.inset ✅ 4.77:1 4.5:1
danger.fg vs. canvas.default ✅ 5.24:1 4.5:1
danger.fg vs. canvas.subtle ✅ 4.92:1 4.5:1
danger.fg vs. canvas.inset ✅ 4.92:1 4.5:1
closed.fg vs. canvas.default ✅ 5.24:1 4.5:1
closed.fg vs. canvas.subtle ✅ 4.92:1 4.5:1
closed.fg vs. canvas.inset ✅ 4.92:1 4.5:1
attention.fg vs. canvas.default ✅ 4.86:1 4.5:1
attention.fg vs. canvas.subtle ✅ 4.57:1 4.5:1
attention.fg vs. canvas.inset ✅ 4.57:1 4.5:1
severe.fg vs. canvas.default ✅ 5.03:1 4.5:1
severe.fg vs. canvas.subtle ✅ 4.72:1 4.5:1
severe.fg vs. canvas.inset ✅ 4.72:1 4.5:1
done.fg vs. canvas.default ✅ 5.04:1 4.5:1
done.fg vs. canvas.subtle ✅ 4.73:1 4.5:1
done.fg vs. canvas.inset ✅ 4.73:1 4.5:1
sponsors.fg vs. canvas.default ✅ 5.04:1 4.5:1
sponsors.fg vs. canvas.subtle ✅ 4.73:1 4.5:1
sponsors.fg vs. canvas.inset ✅ 4.73:1 4.5:1
accent.fg vs. accent.subtle ✅ 4.56:1 4.5:1
success.fg vs. success.subtle ✅ 4.56:1 4.5:1
open.fg vs. open.subtle ✅ 4.56:1 4.5:1
danger.fg vs. danger.subtle ✅ 4.57:1 4.5:1
closed.fg vs. closed.subtle ✅ 4.57:1 4.5:1
attention.fg vs. attention.subtle ✅ 4.51:1 4.5:1
severe.fg vs. severe.subtle ✅ 4.54:1 4.5:1
done.fg vs. done.subtle ✅ 4.53:1 4.5:1
sponsors.fg vs. sponsors.subtle ✅ 4.55:1 4.5:1
accent.fg vs. fg.default ✅ 3.04:1 3:1
success.fg vs. fg.default ✅ 3.11:1 3:1
open.fg vs. fg.default ✅ 3.11:1 3:1
danger.fg vs. fg.default ✅ 3.01:1 3:1
closed.fg vs. fg.default ✅ 3.01:1 3:1
attention.fg vs. fg.default ✅ 3.24:1 3:1
severe.fg vs. fg.default ✅ 3.13:1 3:1
done.fg vs. fg.default ✅ 3.13:1 3:1
sponsors.fg vs. fg.default ✅ 3.13:1 3:1
fg.onEmphasis vs. neutral.emphasis ✅ 4.54:1 4.5:1
fg.onEmphasis vs. neutral.emphasisPlus ✅ 14.65:1 4.5:1
fg.onEmphasis vs. accent.emphasis ✅ 5.19:1 4.5:1
fg.onEmphasis vs. success.emphasis ✅ 4.51:1 4.5:1
fg.onEmphasis vs. open.emphasis ✅ 4.51:1 4.5:1
fg.onEmphasis vs. danger.emphasis ✅ 5.35:1 4.5:1
fg.onEmphasis vs. closed.emphasis ✅ 5.35:1 4.5:1
fg.onEmphasis vs. attention.emphasis ✅ 4.86:1 4.5:1
fg.onEmphasis vs. severe.emphasis ✅ 5.03:1 4.5:1
fg.onEmphasis vs. done.emphasis ✅ 5.04:1 4.5:1
fg.onEmphasis vs. sponsors.emphasis ✅ 5.04:1 4.5:1
control.borderColor.emphasis vs. canvas.default ✅ 3.28:1 3:1
control.borderColor.emphasis vs. canvas.subtle ✅ 3.08:1 3:1

dark: ❌ 9 checks failed

Show results table for theme: dark
contrastPair pass contrastRatio minimumContrastRatio
fg.default vs. canvas.default ✅ 16.01:1 4.5:1
fg.muted vs. canvas.default ✅ 5.07:1 4.5:1
fg.subtle vs. canvas.default ❌ 4.11:1 4.5:1
fg.default vs. canvas.subtle ✅ 14.63:1 4.5:1
fg.muted vs. canvas.subtle ✅ 4.63:1 4.5:1
fg.default vs. canvas.inset ✅ 17.37:1 4.5:1
fg.muted vs. canvas.inset ✅ 5.5:1 4.5:1
fg.default vs. accent.fg ✅ 3.17:1 3:1
fg.default vs. fg.muted ✅ 3.15:1 3:1
fg.default vs. accent.subtle on canvas.default ✅ 14.34:1 4.5:1
fg.default vs. accent.subtle on canvas.subtle ✅ 12.91:1 4.5:1
fg.default vs. success.subtle on canvas.default ✅ 13.44:1 4.5:1
fg.default vs. success.subtle on canvas.subtle ✅ 12:1 4.5:1
fg.default vs. open.subtle on canvas.default ✅ 13.44:1 4.5:1
fg.default vs. open.subtle on canvas.subtle ✅ 12:1 4.5:1
fg.default vs. danger.subtle on canvas.default ✅ 14.59:1 4.5:1
fg.default vs. danger.subtle on canvas.subtle ✅ 13.2:1 4.5:1
fg.default vs. closed.subtle on canvas.default ✅ 13.64:1 4.5:1
fg.default vs. closed.subtle on canvas.subtle ✅ 12.34:1 4.5:1
fg.default vs. attention.subtle on canvas.default ✅ 13.4:1 4.5:1
fg.default vs. attention.subtle on canvas.subtle ✅ 12.08:1 4.5:1
fg.default vs. severe.subtle on canvas.default ✅ 14.45:1 4.5:1
fg.default vs. severe.subtle on canvas.subtle ✅ 13.03:1 4.5:1
fg.default vs. done.subtle on canvas.default ✅ 14.28:1 4.5:1
fg.default vs. done.subtle on canvas.subtle ✅ 12.85:1 4.5:1
fg.default vs. sponsors.subtle on canvas.default ✅ 14.4:1 4.5:1
fg.default vs. sponsors.subtle on canvas.subtle ✅ 12.98:1 4.5:1
accent.fg vs. canvas.default ✅ 5.05:1 4.5:1
accent.fg vs. canvas.subtle ✅ 4.61:1 4.5:1
accent.fg vs. canvas.inset ✅ 5.48:1 4.5:1
success.fg vs. canvas.default ✅ 7.44:1 4.5:1
success.fg vs. canvas.subtle ✅ 6.8:1 4.5:1
success.fg vs. canvas.inset ✅ 8.08:1 4.5:1
open.fg vs. canvas.default ✅ 7.44:1 4.5:1
open.fg vs. canvas.subtle ✅ 6.8:1 4.5:1
open.fg vs. canvas.inset ✅ 8.08:1 4.5:1
danger.fg vs. canvas.default ✅ 5.64:1 4.5:1
danger.fg vs. canvas.subtle ✅ 5.16:1 4.5:1
danger.fg vs. canvas.inset ✅ 6.12:1 4.5:1
closed.fg vs. canvas.default ✅ 5.64:1 4.5:1
closed.fg vs. canvas.subtle ✅ 5.16:1 4.5:1
closed.fg vs. canvas.inset ✅ 6.12:1 4.5:1
attention.fg vs. canvas.default ✅ 7.49:1 4.5:1
attention.fg vs. canvas.subtle ✅ 6.85:1 4.5:1
attention.fg vs. canvas.inset ✅ 8.13:1 4.5:1
severe.fg vs. canvas.default ✅ 5.61:1 4.5:1
severe.fg vs. canvas.subtle ✅ 5.13:1 4.5:1
severe.fg vs. canvas.inset ✅ 6.09:1 4.5:1
done.fg vs. canvas.default ✅ 5.64:1 4.5:1
done.fg vs. canvas.subtle ✅ 5.15:1 4.5:1
done.fg vs. canvas.inset ✅ 6.12:1 4.5:1
sponsors.fg vs. canvas.default ✅ 5.62:1 4.5:1
sponsors.fg vs. canvas.subtle ✅ 5.14:1 4.5:1
sponsors.fg vs. canvas.inset ✅ 6.1:1 4.5:1
accent.fg vs. accent.subtle on canvas.default ✅ 4.52:1 4.5:1
success.fg vs. success.subtle on canvas.default ✅ 6.25:1 4.5:1
success.fg vs. success.subtle on canvas.subtle ✅ 5.58:1 4.5:1
open.fg vs. open.subtle on canvas.default ✅ 6.25:1 4.5:1
open.fg vs. open.subtle on canvas.subtle ✅ 5.58:1 4.5:1
danger.fg vs. danger.subtle on canvas.default ✅ 5.14:1 4.5:1
danger.fg vs. danger.subtle on canvas.subtle ✅ 4.65:1 4.5:1
closed.fg vs. closed.subtle on canvas.default ✅ 4.81:1 4.5:1
attention.fg vs. attention.subtle on canvas.default ✅ 6.27:1 4.5:1
attention.fg vs. attention.subtle on canvas.subtle ✅ 5.65:1 4.5:1
severe.fg vs. severe.subtle on canvas.default ✅ 5.06:1 4.5:1
severe.fg vs. severe.subtle on canvas.subtle ✅ 4.57:1 4.5:1
done.fg vs. done.subtle on canvas.default ✅ 5.03:1 4.5:1
done.fg vs. done.subtle on canvas.subtle ✅ 4.52:1 4.5:1
sponsors.fg vs. sponsors.subtle on canvas.default ✅ 5.06:1 4.5:1
sponsors.fg vs. sponsors.subtle on canvas.subtle ✅ 4.56:1 4.5:1
accent.fg vs. fg.default ✅ 3.17:1 3:1
success.fg vs. fg.default ❌ 2.14:1 3:1
open.fg vs. fg.default ❌ 2.14:1 3:1
danger.fg vs. fg.default ❌ 2.83:1 3:1
closed.fg vs. fg.default ❌ 2.83:1 3:1
attention.fg vs. fg.default ❌ 2.13:1 3:1
severe.fg vs. fg.default ❌ 2.85:1 3:1
done.fg vs. fg.default ❌ 2.83:1 3:1
sponsors.fg vs. fg.default ❌ 2.84:1 3:1
fg.onEmphasis vs. neutral.emphasis ✅ 4.59:1 4.5:1
fg.onEmphasis vs. neutral.emphasisPlus ✅ 4.59:1 4.5:1
fg.onEmphasis vs. accent.emphasis ✅ 4.63:1 4.5:1
fg.onEmphasis vs. success.emphasis ✅ 4.63:1 4.5:1
fg.onEmphasis vs. open.emphasis ✅ 4.63:1 4.5:1
fg.onEmphasis vs. danger.emphasis ✅ 4.6:1 4.5:1
fg.onEmphasis vs. closed.emphasis ✅ 4.6:1 4.5:1
fg.onEmphasis vs. attention.emphasis ✅ 4.64:1 4.5:1
fg.onEmphasis vs. severe.emphasis ✅ 4.65:1 4.5:1
fg.onEmphasis vs. done.emphasis ✅ 4.6:1 4.5:1
fg.onEmphasis vs. sponsors.emphasis ✅ 4.57:1 4.5:1
control.borderColor.emphasis vs. canvas.default ✅ 3.31:1 3:1
control.borderColor.emphasis vs. canvas.subtle ✅ 3.02:1 3:1

@github-actions
Copy link
Contributor

github-actions bot commented Apr 5, 2023 •
edited
Loading

🟢 No design token changes found

@lukasoppermann lukasoppermann temporarily deployed to github-pages April 5, 2023 06:37 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview April 5, 2023 06:37 Inactive
@lukasoppermann lukasoppermann changed the title Darkmode fg FG colors for non-default modes Apr 5, 2023
@github-actions github-actions bot temporarily deployed to storybook-preview April 5, 2023 06:55 Inactive
@lukasoppermann lukasoppermann merged commit c9101b7 into main Apr 5, 2023
@lukasoppermann lukasoppermann deleted the darkmode-fg branch April 5, 2023 06:57
@primer-css primer-css mentioned this pull request Apr 5, 2023
Merged
This was referenced Apr 5, 2023
Merged
Merged
langermank pushed a commit that referenced this pull request Apr 19, 2023
@lukasoppermann @langermank
FG colors for non-default modes (#557)
df29945 
* update fg muted and default

* added changeset

* add dark dimmed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@simurai simurai simurai approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@lukasoppermann @simurai