From 214c03812f2256bb74a118824447b45564c2f4b1 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Tue, 9 Apr 2024 14:55:16 -0700 Subject: [PATCH 1/7] remove old colors --- src/color-modes/themes/dark.scss | 7 +------ src/color-modes/themes/dark_colorblind.scss | 7 +------ src/color-modes/themes/dark_dimmed.scss | 7 +------ src/color-modes/themes/dark_high_contrast.scss | 7 +------ src/color-modes/themes/dark_tritanopia.scss | 7 +------ src/color-modes/themes/light.scss | 7 +------ src/color-modes/themes/light_colorblind.scss | 7 +------ src/color-modes/themes/light_high_contrast.scss | 7 +------ src/color-modes/themes/light_tritanopia.scss | 7 +------ 9 files changed, 9 insertions(+), 54 deletions(-) diff --git a/src/color-modes/themes/dark.scss b/src/color-modes/themes/dark.scss index fdeda0589b..ae3a744340 100644 --- a/src/color-modes/themes/dark.scss +++ b/src/color-modes/themes/dark.scss @@ -1,6 +1 @@ -@import '../../support/index.scss'; -@import '@primer/primitives/dist/scss/colors/_dark.scss'; - -@include color-mode-theme(dark) { - @include primer-colors-dark; -} +@import '@primer/primitives/dist/css/functional/themes/dark.css'; diff --git a/src/color-modes/themes/dark_colorblind.scss b/src/color-modes/themes/dark_colorblind.scss index 057a9f3d76..23399f53e6 100644 --- a/src/color-modes/themes/dark_colorblind.scss +++ b/src/color-modes/themes/dark_colorblind.scss @@ -1,6 +1 @@ -@import '../../support/index.scss'; -@import '@primer/primitives/dist/scss/colors/_dark_colorblind.scss'; - -@include color-mode-theme(dark_colorblind) { - @include primer-colors-dark_colorblind; -} +@import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css'; diff --git a/src/color-modes/themes/dark_dimmed.scss b/src/color-modes/themes/dark_dimmed.scss index 6f9de21419..c3fa9da8d1 100644 --- a/src/color-modes/themes/dark_dimmed.scss +++ b/src/color-modes/themes/dark_dimmed.scss @@ -1,6 +1 @@ -@import '../../support/index.scss'; -@import '@primer/primitives/dist/scss/colors/_dark_dimmed.scss'; - -@include color-mode-theme(dark_dimmed) { - @include primer-colors-dark_dimmed; -} +@import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css'; diff --git a/src/color-modes/themes/dark_high_contrast.scss b/src/color-modes/themes/dark_high_contrast.scss index 8203dd8eca..0dcf4f88ac 100644 --- a/src/color-modes/themes/dark_high_contrast.scss +++ b/src/color-modes/themes/dark_high_contrast.scss @@ -1,6 +1 @@ -@import '../../support/index.scss'; -@import '@primer/primitives/dist/scss/colors/_dark_high_contrast.scss'; - -@include color-mode-theme(dark_high_contrast) { - @include primer-colors-dark_high_contrast; -} +@import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css'; diff --git a/src/color-modes/themes/dark_tritanopia.scss b/src/color-modes/themes/dark_tritanopia.scss index 9fb25c7a90..b27209f4bf 100644 --- a/src/color-modes/themes/dark_tritanopia.scss +++ b/src/color-modes/themes/dark_tritanopia.scss @@ -1,6 +1 @@ -@import '../../support/index.scss'; -@import '@primer/primitives/dist/scss/colors/_dark_tritanopia.scss'; - -@include color-mode-theme(dark_tritanopia) { - @include primer-colors-dark_tritanopia; -} +@import '@primer/primitives/dist/css/functional/themes/dark-tritanopia.css'; diff --git a/src/color-modes/themes/light.scss b/src/color-modes/themes/light.scss index 9aa84f2fd8..426160536d 100644 --- a/src/color-modes/themes/light.scss +++ b/src/color-modes/themes/light.scss @@ -1,6 +1 @@ -@import '../../support/index.scss'; -@import '@primer/primitives/dist/scss/colors/_light.scss'; - -@include color-mode-theme(light, true) { - @include primer-colors-light; -} +@import '@primer/primitives/dist/css/functional/themes/light.css'; diff --git a/src/color-modes/themes/light_colorblind.scss b/src/color-modes/themes/light_colorblind.scss index dd043514be..8fe78e9414 100644 --- a/src/color-modes/themes/light_colorblind.scss +++ b/src/color-modes/themes/light_colorblind.scss @@ -1,6 +1 @@ -@import '../../support/index.scss'; -@import '@primer/primitives/dist/scss/colors/_light_colorblind.scss'; - -@include color-mode-theme(light_colorblind) { - @include primer-colors-light_colorblind; -} +@import '@primer/primitives/dist/css/functional/themes/light-colorblind.css'; diff --git a/src/color-modes/themes/light_high_contrast.scss b/src/color-modes/themes/light_high_contrast.scss index 3ff08538f1..d11666d3f0 100644 --- a/src/color-modes/themes/light_high_contrast.scss +++ b/src/color-modes/themes/light_high_contrast.scss @@ -1,6 +1 @@ -@import '../../support/index.scss'; -@import '@primer/primitives/dist/scss/colors/_light_high_contrast.scss'; - -@include color-mode-theme(light_high_contrast) { - @include primer-colors-light_high_contrast; -} +@import '@primer/primitives/dist/css/functional/themes/light-high-contrast.css'; diff --git a/src/color-modes/themes/light_tritanopia.scss b/src/color-modes/themes/light_tritanopia.scss index 63223001a0..c43ce209d0 100644 --- a/src/color-modes/themes/light_tritanopia.scss +++ b/src/color-modes/themes/light_tritanopia.scss @@ -1,6 +1 @@ -@import '../../support/index.scss'; -@import '@primer/primitives/dist/scss/colors/_light_tritanopia.scss'; - -@include color-mode-theme(light_tritanopia) { - @include primer-colors-light_tritanopia; -} +@import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css'; From b3330321510a1cd7f8be5b3c80a4798221fdc822 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Tue, 9 Apr 2024 14:58:28 -0700 Subject: [PATCH 2/7] Create wise-ducks-promise.md --- .changeset/wise-ducks-promise.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wise-ducks-promise.md diff --git a/.changeset/wise-ducks-promise.md b/.changeset/wise-ducks-promise.md new file mode 100644 index 0000000000..280f3654dc --- /dev/null +++ b/.changeset/wise-ducks-promise.md @@ -0,0 +1,5 @@ +--- +"@primer/css": major +--- + +- Remove legacy color variables From 840bc65655ff47d8920e75c5dd99cc7489c53e03 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Fri, 10 May 2024 10:38:46 -0700 Subject: [PATCH 3/7] remove themes + color fallbacks --- CHANGELOG.md | 2 +- src/autocomplete/suggester.scss | 22 +-- src/avatars/avatar-parent-child.scss | 4 +- src/avatars/circle-badge.scss | 6 +- src/base/base.scss | 10 +- src/base/kbd.scss | 10 +- src/base/native-colors.scss | 6 +- src/base/normalize.scss | 4 +- src/box/box-overlay.scss | 6 +- src/branch-name/branch-name.scss | 12 +- src/buttons/button.scss | 126 +++++++++--------- src/buttons/misc.scss | 52 ++++---- src/color-modes/index.scss | 11 -- src/color-modes/themes/dark.scss | 1 - src/color-modes/themes/dark_colorblind.scss | 1 - src/color-modes/themes/dark_dimmed.scss | 1 - .../themes/dark_high_contrast.scss | 1 - src/color-modes/themes/dark_tritanopia.scss | 1 - src/color-modes/themes/light.scss | 1 - src/color-modes/themes/light_colorblind.scss | 1 - .../themes/light_high_contrast.scss | 1 - src/color-modes/themes/light_tritanopia.scss | 1 - src/docs.scss | 3 - src/forms/form-control.scss | 36 ++--- src/forms/form-group.scss | 58 ++++---- src/forms/form-select.scss | 2 +- src/forms/input-group.scss | 4 +- src/forms/radio-group.scss | 12 +- src/header/header.scss | 14 +- src/index.scss | 3 - src/layout/app-frame.scss | 14 +- src/layout/page-layout.scss | 4 +- src/layout/stack.scss | 2 +- src/markdown/blob-csv.scss | 4 +- src/markdown/code.scss | 6 +- src/markdown/footnotes.scss | 6 +- src/markdown/headings.scss | 8 +- src/markdown/images.scss | 6 +- src/markdown/markdown-body.scss | 8 +- src/markdown/tables.scss | 8 +- src/marketing/buttons/button.scss | 18 +-- src/navigation/filter-list.scss | 16 +-- src/navigation/sidenav.scss | 24 ++-- src/navigation/subnav.scss | 18 +-- src/pagination/pagination.scss | 14 +- src/select-menu/select-menu.scss | 82 ++++++------ src/support/mixins/misc.scss | 16 +-- src/support/variables/misc.scss | 4 +- src/toasts/toasts.scss | 34 ++--- src/tooltips/tooltips.scss | 4 +- src/utilities/box-shadow.scss | 10 +- src/utilities/colors.scss | 118 ++++++++-------- src/utilities/details.scss | 2 +- stylelint.config.cjs | 2 +- 54 files changed, 406 insertions(+), 434 deletions(-) delete mode 100644 src/color-modes/index.scss delete mode 100644 src/color-modes/themes/dark.scss delete mode 100644 src/color-modes/themes/dark_colorblind.scss delete mode 100644 src/color-modes/themes/dark_dimmed.scss delete mode 100644 src/color-modes/themes/dark_high_contrast.scss delete mode 100644 src/color-modes/themes/dark_tritanopia.scss delete mode 100644 src/color-modes/themes/light.scss delete mode 100644 src/color-modes/themes/light_colorblind.scss delete mode 100644 src/color-modes/themes/light_high_contrast.scss delete mode 100644 src/color-modes/themes/light_tritanopia.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 01f6267486..402c22856e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -776,7 +776,7 @@ - [#1581](https://github.com/primer/css/pull/1581) [`be518b80`](https://github.com/primer/css/commit/be518b8023b56802b1fc67ccc8a5b8398d1b279c) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating deprecations.js file to be more straightforward -* [#1579](https://github.com/primer/css/pull/1579) [`c3b4a0c3`](https://github.com/primer/css/commit/c3b4a0c36302af7bb06ca996f37a63470ab99c62) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing v2 color mode css var fallbacks. `var(--color-v2, var(--color-v1))` becomes `var(--color-v2)` +* [#1579](https://github.com/primer/css/pull/1579) [`c3b4a0c3`](https://github.com/primer/css/commit/c3b4a0c36302af7bb06ca996f37a63470ab99c62) Thanks [@jonrohan](https://github.com/jonrohan)! - Removing v2 color mode css var fallbacks. `var(--color-v2)` becomes `var(--color-v2)` ## 17.8.0 diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss index a7f61e0f96..2a61358ea8 100644 --- a/src/autocomplete/suggester.scss +++ b/src/autocomplete/suggester.scss @@ -11,20 +11,20 @@ margin-top: $spacer-4; list-style: none; cursor: pointer; - background: var(--overlay-bgColor, var(--color-canvas-overlay)); - border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); + background: var(--overlay-bgColor); + border: $border-width $border-style var(--borderColor-default); border-radius: $border-radius; - box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)); + box-shadow: var(--shadow-resting-medium); li { display: block; padding: $spacer-1 $spacer-2; font-weight: $font-weight-semibold; - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-bottom: $border-width $border-style var(--borderColor-muted); small { font-weight: $font-weight-normal; - color: var(--fgColor-muted, var(--color-fg-muted)); + color: var(--fgColor-muted); } &:last-child { @@ -39,12 +39,12 @@ } &:hover { - color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); + color: var(--fgColor-onEmphasis); text-decoration: none; - background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)); + background: var(--bgColor-accent-emphasis); small { - color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); + color: var(--fgColor-onEmphasis); } .octicon { @@ -54,12 +54,12 @@ &[aria-selected='true'], &.navigation-focus { - color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); + color: var(--fgColor-onEmphasis); text-decoration: none; - background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)); + background: var(--bgColor-accent-emphasis); small { - color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); + color: var(--fgColor-onEmphasis); } .octicon { diff --git a/src/avatars/avatar-parent-child.scss b/src/avatars/avatar-parent-child.scss index 01a5c7127e..2c8792cfa4 100644 --- a/src/avatars/avatar-parent-child.scss +++ b/src/avatars/avatar-parent-child.scss @@ -10,8 +10,8 @@ position: absolute; right: -15%; bottom: -9%; - background-color: var(--bgColor-default, var(--color-canvas-default)); // For transparent backgrounds + background-color: var(--bgColor-default); // For transparent backgrounds // stylelint-disable-next-line primer/borders border-radius: $border-radius-1; - box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow)); + box-shadow: var(--avatar-shadow); } diff --git a/src/avatars/circle-badge.scss b/src/avatars/circle-badge.scss index 63032cfb63..bdf365bc8f 100644 --- a/src/avatars/circle-badge.scss +++ b/src/avatars/circle-badge.scss @@ -4,9 +4,9 @@ display: flex; align-items: center; justify-content: center; - background-color: var(--bgColor-default, var(--color-canvas-default)); + background-color: var(--bgColor-default); border-radius: 50%; - box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)); + box-shadow: var(--shadow-resting-medium); } .CircleBadge-icon { @@ -46,7 +46,7 @@ width: 100%; content: ''; // stylelint-disable-next-line primer/borders - border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default)); + border-bottom: 2px dashed var(--borderColor-default); } .CircleBadge { diff --git a/src/base/base.scss b/src/base/base.scss index dbf662b2c2..56ead21be1 100644 --- a/src/base/base.scss +++ b/src/base/base.scss @@ -16,12 +16,12 @@ body { font-family: $body-font; font-size: var(--body-font-size, $body-font-size); line-height: $body-line-height; - color: var(--fgColor-default, var(--color-fg-default)); - background-color: var(--bgColor-default, var(--color-canvas-default)); + color: var(--fgColor-default); + background-color: var(--bgColor-default); } a { - color: var(--fgColor-accent, var(--color-accent-fg)); + color: var(--fgColor-accent); text-decoration: none; &:hover { @@ -46,7 +46,7 @@ label { // Custom styling for HTML5 validation bubbles (WebKit only) ::placeholder { - color: var(--fgColor-muted, var(--color-fg-subtle)); + color: var(--fgColor-muted); opacity: 1; // override opacity in normalize.css } @@ -61,7 +61,7 @@ hr, overflow: hidden; background: transparent; border: 0; - border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + border-bottom: $border-width $border-style var(--borderColor-muted); @include clearfix(); } diff --git a/src/base/kbd.scss b/src/base/kbd.scss index c1386105c9..5884c570e3 100644 --- a/src/base/kbd.scss +++ b/src/base/kbd.scss @@ -7,13 +7,13 @@ kbd { font: 11px $mono-font; // stylelint-disable-next-line primer/typography line-height: 10px; - color: var(--fgColor-default, var(--color-fg-default)); + color: var(--fgColor-default); vertical-align: middle; - background-color: var(--bgColor-muted, var(--color-canvas-subtle)); + background-color: var(--bgColor-muted); // stylelint-disable-next-line primer/borders - border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted)); - border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted)); + border: $border-style $border-width var(--borderColor-neutral-muted); + border-bottom-color: var(--borderColor-neutral-muted); border-radius: $border-radius; // stylelint-disable-next-line primer/box-shadow - box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted)); + box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted); } diff --git a/src/base/native-colors.scss b/src/base/native-colors.scss index a7ff089fc7..075aada1fe 100644 --- a/src/base/native-colors.scss +++ b/src/base/native-colors.scss @@ -6,8 +6,8 @@ @include color-mode(dark) { color-scheme: dark; } [data-color-mode] { - color: var(--fgColor-default, var(--color-fg-default)); - background-color: var(--bgColor-default, var(--color-canvas-default)); + color: var(--fgColor-default); + background-color: var(--bgColor-default); } // Windows High Contrast mode @@ -16,8 +16,6 @@ // stylelint-disable selector-max-type @media (forced-colors: active) { body { - --color-accent-emphasis: Highlight; - --color-fg-on-emphasis: LinkText; --fgColor-onEmphasis: LinkText; --fgColor-accent: Highlight; } diff --git a/src/base/normalize.scss b/src/base/normalize.scss index 9b38890e1f..8c980883ac 100644 --- a/src/base/normalize.scss +++ b/src/base/normalize.scss @@ -153,8 +153,8 @@ h1 { */ mark { - background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)); - color: var(--fgColor-default, var(--color-fg-default)); + background-color: var(--bgColor-attention-muted); + color: var(--fgColor-default); } /** diff --git a/src/box/box-overlay.scss b/src/box/box-overlay.scss index 5a82a501be..21aa98a9a4 100644 --- a/src/box/box-overlay.scss +++ b/src/box/box-overlay.scss @@ -3,9 +3,9 @@ width: 448px; margin-right: auto; margin-left: auto; - background-color: var(--bgColor-default, var(--color-canvas-default)); + background-color: var(--bgColor-default); background-clip: padding-box; - border-color: var(--borderColor-default, var(--color-border-default)); + border-color: var(--borderColor-default); // stylelint-disable-next-line primer/box-shadow box-shadow: 0 0 18px rgba(0, 0, 0, 0.4); @@ -36,7 +36,7 @@ .help { padding-top: $spacer-2; margin: 0; - color: var(--fgColor-muted, var(--color-fg-muted)); + color: var(--fgColor-muted); text-align: center; } } diff --git a/src/branch-name/branch-name.scss b/src/branch-name/branch-name.scss index c18c746e50..d3c06a44cf 100644 --- a/src/branch-name/branch-name.scss +++ b/src/branch-name/branch-name.scss @@ -7,25 +7,25 @@ // stylelint-disable-next-line primer/spacing padding: 2px 6px; font: 12px $mono-font; - color: var(--fgColor-muted, var(--color-fg-muted)); + color: var(--fgColor-muted); word-break: break-all; - background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)); + background-color: var(--bgColor-accent-muted); border-radius: $border-radius; .octicon { // stylelint-disable-next-line primer/spacing margin: 1px -2px 0 0; - color: var(--fgColor-muted, var(--color-fg-muted)); + color: var(--fgColor-muted); } } // When a branch name is a link a.branch-name { - color: var(--fgColor-accent, var(--color-accent-fg)); - background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)); + color: var(--fgColor-accent); + background-color: var(--bgColor-accent-muted); .octicon { - color: var(--fgColor-accent, var(--color-accent-fg)); + color: var(--fgColor-accent); } } diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 9e967a42a9..01a02510b3 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -36,7 +36,7 @@ .octicon { margin-right: $spacer-1; - color: var(--fgColor-muted, var(--color-fg-muted)); + color: var(--fgColor-muted); vertical-align: text-bottom; &:only-child { @@ -50,7 +50,7 @@ color: inherit; text-shadow: none; vertical-align: top; - background-color: var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg)); + background-color: var(--buttonCounter-default-bgColor-rest); } .dropdown-caret { @@ -62,42 +62,42 @@ // Default button .btn { - color: var(--button-default-fgColor-rest, var(--color-btn-text)); - background-color: var(--button-default-bgColor-rest, var(--color-btn-bg)); - border-color: var(--button-default-borderColor-rest, var(--color-btn-border)); - box-shadow: var(--button-default-shadow-resting, var(--color-btn-shadow)), var(--button-default-shadow-inset, var(--color-btn-inset-shadow)); + color: var(--button-default-fgColor-rest); + background-color: var(--button-default-bgColor-rest); + border-color: var(--button-default-borderColor-rest); + box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset); transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); transition-property: color, background-color, box-shadow, border-color; &:hover, &.hover, [open] > & { - background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg)); - border-color: var(--button-default-borderColor-hover, var(--color-btn-hover-border)); + background-color: var(--button-default-bgColor-hover); + border-color: var(--button-default-borderColor-hover); transition-duration: 0.1s; } &:active { - background-color: var(--button-default-bgColor-active, var(--color-btn-active-bg)); - border-color: var(--button-default-borderColor-active, var(--color-btn-active-border)); + background-color: var(--button-default-bgColor-active); + border-color: var(--button-default-borderColor-active); transition: none; } &.selected, &[aria-selected='true'] { - background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg)); - box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset)); + background-color: var(--button-default-bgColor-selected); + box-shadow: var(--shadow-inset); } &:disabled, &.disabled, &[aria-disabled='true'] { - color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); - background-color: var(--button-default-bgColor-rest, var(--color-btn-bg)); - border-color: var(--button-default-borderColor-rest, var(--color-btn-border)); + color: var(--fgColor-disabled); + background-color: var(--button-default-bgColor-rest); + border-color: var(--button-default-borderColor-rest); .octicon { - color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); + color: var(--fgColor-disabled); } } } @@ -105,16 +105,16 @@ // Primary button .btn-primary { - color: var(--button-primary-fgColor-rest, var(--color-btn-primary-text)); - background-color: var(--button-primary-bgColor-rest, var(--color-btn-primary-bg)); - border-color: var(--button-primary-borderColor-rest, var(--color-btn-primary-border)); - box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow)); + color: var(--button-primary-fgColor-rest); + background-color: var(--button-primary-bgColor-rest); + border-color: var(--button-primary-borderColor-rest); + box-shadow: var(--shadow-resting-small), var(--shadow-highlight); &:hover, &.hover, [open] > & { - background-color: var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg)); - border-color: var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border)); + background-color: var(--button-primary-bgColor-hover); + border-color: var(--button-primary-borderColor-hover); } // fallback :focus state @@ -136,29 +136,29 @@ &:active, &.selected, &[aria-selected='true'] { - background-color: var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg)); - box-shadow: var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow)); + background-color: var(--button-primary-bgColor-active); + box-shadow: var(--button-primary-shadow-selected); } &:disabled, &.disabled, &[aria-disabled='true'] { - color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text)); - background-color: var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg)); - border-color: var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border)); + color: var(--button-primary-fgColor-disabled); + background-color: var(--button-primary-bgColor-disabled); + border-color: var(--button-primary-borderColor-disabled); .octicon { - color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text)); + color: var(--button-primary-fgColor-disabled); } } .Counter { color: inherit; - background-color: var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg)); + background-color: var(--buttonCounter-primary-bgColor-rest); } .octicon { - color: var(--button-primary-iconColor-rest, var(--color-btn-primary-icon)); + color: var(--button-primary-iconColor-rest); } } @@ -185,17 +185,17 @@ a.btn-primary { // Outline button .btn-outline { - color: var(--button-outline-fgColor-rest, var(--color-btn-outline-text)); + color: var(--button-outline-fgColor-rest); &:hover, [open] > & { - color: var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text)); - background-color: var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg)); - border-color: var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border)); - box-shadow: var(--shadow-resting-small, var(--color-btn-outline-hover-shadow)), var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow)); + color: var(--button-outline-fgColor-hover); + background-color: var(--button-outline-bgColor-hover); + border-color: var(--button-outline-borderColor-hover); + box-shadow: var(--shadow-resting-small), var(--shadow-highlight); .Counter { - background-color: var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg)); + background-color: var(--buttonCounter-outline-bgColor-hover); } .octicon { @@ -206,10 +206,10 @@ a.btn-primary { &:active, &.selected, &[aria-selected='true'] { - color: var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text)); - background-color: var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg)); - border-color: var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border)); - box-shadow: var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow)); + color: var(--button-outline-fgColor-active); + background-color: var(--button-outline-bgColor-active); + border-color: var(--button-outline-borderColor-active); + box-shadow: var(--button-outline-shadow-selected); // fallback :focus state &:focus { @@ -231,76 +231,76 @@ a.btn-primary { &:disabled, &.disabled, &[aria-disabled='true'] { - color: var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text)); - background-color: var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg)); - border-color: var(--button-default-borderColor-rest, var(--color-btn-border)); + color: var(--button-outline-fgColor-disabled); + background-color: var(--button-outline-bgColor-disabled); + border-color: var(--button-default-borderColor-rest); box-shadow: none; .Counter { - background-color: var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg)); + background-color: var(--buttonCounter-outline-bgColor-disabled); } } .Counter { color: inherit; - background-color: var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg)); + background-color: var(--buttonCounter-outline-bgColor-rest); } } // Danger button .btn-danger { - color: var(--button-danger-fgColor-rest, var(--color-btn-danger-text)); + color: var(--button-danger-fgColor-rest); .octicon { - color: var(--button-danger-iconColor-rest, var(--color-btn-danger-icon)); + color: var(--button-danger-iconColor-rest); } &:hover, [open] > & { - color: var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text)); - background-color: var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg)); - border-color: var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border)); - box-shadow: var(--shadow-resting-small, var(--color-btn-danger-hover-shadow)), var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow)); + color: var(--button-danger-fgColor-hover); + background-color: var(--button-danger-bgColor-hover); + border-color: var(--button-danger-borderColor-hover); + box-shadow: var(--shadow-resting-small), var(--shadow-highlight); .Counter { - background-color: var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg)); + background-color: var(--buttonCounter-danger-bgColor-hover); } .octicon { - color: var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon)); + color: var(--button-danger-iconColor-hover); } } &:active, &.selected, &[aria-selected='true'] { - color: var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text)); - background-color: var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg)); - border-color: var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border)); - box-shadow: var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow)); + color: var(--button-danger-fgColor-active); + background-color: var(--button-danger-bgColor-active); + border-color: var(--button-danger-borderColor-active); + box-shadow: var(--button-danger-shadow-selected); } &:disabled, &.disabled, &[aria-disabled='true'] { - color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text)); - background-color: var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg)); - border-color: var(--button-default-borderColor-rest, var(--color-btn-border)); + color: var(--button-danger-fgColor-disabled); + background-color: var(--button-danger-bgColor-disabled); + border-color: var(--button-default-borderColor-rest); box-shadow: none; .Counter { - background-color: var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg)); + background-color: var(--buttonCounter-danger-bgColor-disabled); } .octicon { - color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text)); + color: var(--button-danger-fgColor-disabled); } } .Counter { color: inherit; - background-color: var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg)); + background-color: var(--buttonCounter-danger-bgColor-rest); } } diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index 399392d681..00c185284e 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -7,7 +7,7 @@ display: inline-block; padding: 0; font-size: inherit; - color: var(--fgColor-accent, var(--color-accent-fg)); + color: var(--fgColor-accent); text-decoration: none; white-space: nowrap; cursor: pointer; @@ -24,7 +24,7 @@ &[aria-disabled='true'] { &, &:hover { - color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); + color: var(--fgColor-disabled); cursor: default; } } @@ -42,7 +42,7 @@ // // Typically used as a "cancel" button next to a .btn .btn-invisible { - color: var(--fgColor-accent, var(--color-accent-fg)); + color: var(--fgColor-accent); background-color: transparent; // Reset default gradient backgrounds and colors border: 0; border-radius: $border-radius; @@ -50,8 +50,8 @@ &:hover, &.zeroclipboard-is-hover { - color: var(--fgColor-accent, var(--color-accent-fg)); - background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg)); + color: var(--fgColor-accent); + background-color: var(--button-default-bgColor-hover); outline: none; box-shadow: none; } @@ -60,21 +60,21 @@ &.selected, &[aria-selected='true'], &.zeroclipboard-is-active { - color: var(--fgColor-accent, var(--color-accent-fg)); + color: var(--fgColor-accent); background: none; - border-color: var(--button-default-borderColor-active, var(--color-btn-active-border)); + border-color: var(--button-default-borderColor-active); @include focusOutline; } &:active &.zeroclipboard-is-active { - background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg)); + background-color: var(--button-default-bgColor-selected); } &:disabled, &.disabled, &[aria-disabled='true'] { - color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); + color: var(--fgColor-disabled); background-color: transparent; } } @@ -89,7 +89,7 @@ // stylelint-disable-next-line primer/spacing margin-left: 5px; line-height: $lh-condensed-ultra; - color: var(--fgColor-muted, var(--color-fg-muted)); + color: var(--fgColor-muted); vertical-align: middle; // For `