From 457723bb3c3345cac2585632f09cae21d47de5d4 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Wed, 8 Nov 2023 14:58:40 +0100 Subject: [PATCH] Change `.border-primary`, `.text-primary`, `.bg-primary` to have dark orange --- scss/_button-group.scss | 4 ++-- scss/_buttons.scss | 4 ++-- scss/_root.scss | 1 - scss/_utilities.scss | 1 - scss/_variables-dark.scss | 8 +++---- scss/_variables.scss | 38 ++++++++++++++++---------------- scss/forms/_form-check.scss | 6 ++--- scss/helpers/_colored-links.scss | 2 +- site/assets/scss/_variables.scss | 2 +- site/data/theme-colors.yml | 1 - 10 files changed, 32 insertions(+), 35 deletions(-) diff --git a/scss/_button-group.scss b/scss/_button-group.scss index dc2e795f0e..34b4a74195 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -118,11 +118,11 @@ .btn.active + &, &:active + * + .btn, &.active + * + .btn { - border-color: $primary; + border-color: $brand-orange; } .btn-group.show > &:not(:focus):not(:active)::before { - color: $primary; + color: $brand-orange; background-color: currentcolor; } // End mod diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 70aff36f5b..a912bdaab3 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -98,7 +98,7 @@ // scss-docs-start btn-variant-loops .btn-primary { - @include button-variant($primary, $primary, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg)); + @include button-variant($brand-orange, $brand-orange, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg)); } .btn-success { @@ -138,7 +138,7 @@ @if #{$color} == "secondary" { @include button-outline-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color)); } @else { - @include button-outline-variant($value, $btn-outline-hover-color); + @include button-outline-variant(var(--#{$prefix}#{$color}), $btn-outline-hover-color); } } } diff --git a/scss/_root.scss b/scss/_root.scss index e4326df544..752f845332 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -35,7 +35,6 @@ --#{$prefix}#{$color}-border-subtle: #{$value}; } - --#{$prefix}primary-text-rgb: #{to-rgb($accessible-orange)}; // Boosted mod --#{$prefix}white-rgb: #{to-rgb($white)}; --#{$prefix}black-rgb: #{to-rgb($black)}; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 4d3bb07853..ff6856e21b 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -593,7 +593,6 @@ $utilities: map-merge( "body-tertiary": var(--#{$prefix}tertiary-color), "body-emphasis": var(--#{$prefix}emphasis-color), "reset": inherit, - "primary": rgba(var(--#{$prefix}primary-text-rgb), var(--#{$prefix}text-opacity)), // Boosted mod: redefine primary value ) ) ), diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index abd521b9bf..3ccea79708 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -16,8 +16,8 @@ $functional-red-dark: #d53f15 !default; // scss-docs-start sass-dark-mode-vars // scss-docs-start theme-color-dark-variables -$primary-dark: $orange !default; -$secondary-dark: $black !default; +$primary-dark: $brand-orange !default; +$secondary-dark: $white !default; $success-dark: $functional-green-dark !default; $info-dark: $functional-blue-dark !default; $warning-dark: $functional-yellow-dark !default; @@ -41,7 +41,7 @@ $theme-colors-dark: ( // End mod // scss-docs-start theme-text-dark-variables -$primary-text-emphasis-dark: $primary-dark !default; // Boosted mod: isntead of `tint-color($primary, 40%)` +$primary-text-emphasis-dark: $primary-dark !default; // Boosted mod: instead of `tint-color($primary, 40%)` $secondary-text-emphasis-dark: $secondary-dark !default; // Boosted mod: instead of `tint-color($secondary, 40%)` $success-text-emphasis-dark: $success-dark !default; // Boosted mod: instead of `tint-color($success, 40%)` $info-text-emphasis-dark: $info-dark !default; // Boosted mod: instead of `tint-color($info, 40%)` @@ -84,7 +84,7 @@ $border-color-dark: $white !default; // Boosted mod: instead of $border-color-translucent-dark: $gray-700 !default; // Boosted mod instead of `rgba($white, .15)` $headings-color-dark: $white !default; // Boosted mod: instead of `inherit` $link-color-dark: $white !default; // Boosted mod: instead of `tint-color($primary, 40%)` -$link-hover-color-dark: $primary !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)` +$link-hover-color-dark: $brand-orange !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)` $code-color-dark: tint-color($code-color, 40%) !default; $mark-color-dark: $black !default; // Boosted mod: instead of `$body-color-dark` $mark-bg-dark: $white !default; // Boosted mod: instead of `$yellow-800` diff --git a/scss/_variables.scss b/scss/_variables.scss index 7d87a6521c..17f78f556f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -63,7 +63,7 @@ $indigo: $supporting-purple !default; $purple: $supporting-purple !default; $pink: $supporting-pink !default; $red: $functional-red !default; -$orange: $brand-orange !default; +$orange: $accessible-orange !default; $yellow: $functional-yellow !default; $green: $functional-green !default; $teal: $supporting-green !default; @@ -344,7 +344,7 @@ $theme-colors: ( // scss-docs-end theme-colors-map // scss-docs-start theme-text-variables -$primary-text-emphasis: $accessible-orange !default; // Boosted mod: instead of `shade-color($primary, 60%)` +$primary-text-emphasis: $primary !default; // Boosted mod: instead of `shade-color($primary, 60%)` $secondary-text-emphasis: $secondary !default; // Boosted mod: instead of `shade-color($secondary, 60%)` $success-text-emphasis: $success !default; // Boosted mod: instead of `shade-color($success, 60%)` $info-text-emphasis: $info !default; // Boosted mod: instead of `shade-color($info, 60%)` @@ -668,12 +668,12 @@ $box-shadow-inset: null !default; // Boosted mod: instead of `inset 0 1px 2px r // scss-docs-end box-shadow-variables $component-active-color: $black !default; -$component-active-bg: $primary !default; +$component-active-bg: $brand-orange !default; // scss-docs-start focus-ring-variables $focus-ring-width: .25rem !default; $focus-ring-opacity: .25 !default; -$focus-ring-color: rgba($primary, $focus-ring-opacity) !default; +$focus-ring-color: rgba($brand-orange, $focus-ring-opacity) !default; // Boosted mod: no `$focus-ring-blur` $focus-ring-box-shadow: null !default; // Boosted mod: instead of `0 0 $focus-ring-blur $focus-ring-width $focus-ring-color` // scss-docs-end focus-ring-variables @@ -987,8 +987,8 @@ $btn-border-width: $input-btn-border-width !default; $btn-default-hover-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod $btn-default-hover-border: var(--#{$prefix}highlight-bg) !default; // Boosted mod $btn-default-hover-color: var(--#{$prefix}highlight-color) !default; // Boosted mod -$btn-default-active-bg: $primary !default; // Boosted mod -$btn-default-active-border: $primary !default; // Boosted mod +$btn-default-active-bg: $brand-orange !default; // Boosted mod +$btn-default-active-border: $brand-orange !default; // Boosted mod $btn-default-active-color: $black !default; // Boosted mod $btn-default-disabled-bg: var(--#{$prefix}disabled-color) !default; // Boosted mod $btn-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod @@ -997,8 +997,8 @@ $btn-default-disabled-color: var(--#{$prefix}highlight-color) !default; // Boos $btn-outline-default-hover-bg: var(--#{$prefix}btn-color) !default; // Boosted mod $btn-outline-default-hover-border: var(--#{$prefix}btn-border-color) !default; // Boosted mod $btn-outline-default-hover-color: $white !default; // Boosted mod -$btn-outline-default-active-bg: $primary !default; // Boosted mod -$btn-outline-default-active-border: $primary !default; // Boosted mod +$btn-outline-default-active-bg: $brand-orange !default; // Boosted mod +$btn-outline-default-active-border: $brand-orange !default; // Boosted mod $btn-outline-default-active-color: $black !default; // Boosted mod $btn-outline-default-disabled-bg: transparent !default; // Boosted mod $btn-outline-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod @@ -1056,7 +1056,7 @@ $btn-social-networks: ( "icon": "" ), "mail": ( - "color": $primary, + "color": $brand-orange, "icon": "", "size": 1.5rem ), @@ -1259,8 +1259,8 @@ $form-switch-checked-bg-size: add(map-get($spacers, 2), map-get($spacers, 1) $form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; // Boosted mod $form-switch-checked-square-bg: var(--#{$prefix}body-bg) !default; // Boosted mod -$form-switch-checked-bg: $primary !default; // Boosted mod -$form-switch-checked-border-color: $primary !default; // Boosted mod +$form-switch-checked-bg: $brand-orange !default; // Boosted mod +$form-switch-checked-border-color: $brand-orange !default; // Boosted mod $form-switch-checked-filter: none !default; // Boosted mod $form-switch-checked-focus-inner: var(--#{$prefix}focus-visible-inner-color) !default; // Boosted mod $form-switch-checked-focus-outer: var(--#{$prefix}focus-visible-outer-color) !default; // Boosted mod @@ -1324,7 +1324,7 @@ $form-range-track-width: 100% !default; $form-range-track-height: .375rem !default; // Boosted mod: instead of `.5rem` $form-range-track-cursor: pointer !default; $form-range-track-bg: var(--#{$prefix}secondary-bg) !default; -$form-range-track-filled-bg: $primary !default; // Boosted mod +$form-range-track-filled-bg: $brand-orange !default; // Boosted mod $form-range-track-border-radius: null !default; // Boosted mod: instead of `1rem` $form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default; @@ -1337,8 +1337,8 @@ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !defa $form-range-thumb-focus-box-shadow: null !default; // Boosted mod $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge $form-range-thumb-hover-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod -$form-range-thumb-active-bg: $primary !default; // Boosted mod: instead of `tint-color($component-active-bg, 70%)` -$form-range-thumb-active-border: $primary !default; // Boosted mod +$form-range-thumb-active-bg: $brand-orange !default; // Boosted mod: instead of `tint-color($component-active-bg, 70%)` +$form-range-thumb-active-border: $brand-orange !default; // Boosted mod $form-range-thumb-disabled-bg: var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` $form-range-thumb-transition: background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing !default; // Boosted mod: no box shadow // scss-docs-end form-range-variables @@ -1562,8 +1562,8 @@ $navbar-badge-margin-top: .375rem !default; $navbar-dark-border-color: $gray-700 !default; // Boosted mod $navbar-dark-color: $white !default; // Boosted mod: instead of `rgba($white, .55)` -$navbar-dark-hover-color: $primary !default; // Boosted mod: instead of `rgba($white, .75)` -$navbar-dark-active-color: $primary !default; // Boosted mod: instead of `$white` +$navbar-dark-hover-color: $brand-orange !default; // Boosted mod: instead of `rgba($white, .75)` +$navbar-dark-active-color: $brand-orange !default; // Boosted mod: instead of `$white` $navbar-dark-disabled-color: $gray-700 !default; // Boosted mod: instead of `rgba($white, .25)` // Boosted mod: no $navbar-dark-icon-color // Boosted mod: no $navbar-dark-toggler-icon-bg since dark toggler are handled with filter @@ -1679,7 +1679,7 @@ $pagination-icon-size: subtract($spacer * 2, calc(var(--#{$prefix}b $pagination-icon-width: add(.5rem, 1px) !default; $pagination-icon-height: subtract(1rem, 1px) !default; -$pagination-active-item-bg: $primary !default; +$pagination-active-item-bg: $brand-orange !default; $pagination-active-item-color: $black !default; $pagination-active-item-border: $pagination-active-item-bg !default; // End mod @@ -2220,7 +2220,7 @@ $btn-close-white-color: $white !default; // Boosted mod $btn-close-white-bg: transparent !default; // Boosted mod $btn-close-white-border-color: transparent !default; // Boosted mod $btn-close-white-hover-color: $btn-close-white-color !default; // Boosted mod -$btn-close-white-active-color: $primary !default; // Boosted mod +$btn-close-white-active-color: $brand-orange !default; // Boosted mod $btn-close-white-active-border-color: $gray-700 !default; // Boosted mod $btn-close-white-disabled-color: $gray-700 !default; // Boosted mod @@ -2299,7 +2299,7 @@ $step-item-padding-end: $step-item-padding * 2 !default; // Deprecated in // fusv-enable $step-item-margin-end: var(--#{$prefix}border-width) !default; $step-item-bg: var(--#{$prefix}highlight-bg) !default; -$step-item-active-bg: $primary !default; +$step-item-active-bg: $brand-orange !default; $step-item-next-bg: var(--#{$prefix}border-color-translucent) !default; $step-item-shadow-size: calc(var(--#{$prefix}border-width) * 1.5) !default; // stylelint-disable-line function-disallowed-list $step-item-drop-shadow: drop-shadow($step-item-shadow-size 0 0 var(--#{$prefix}stepped-process-bg)) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 var(--#{$prefix}stepped-process-bg)) #{"*/"} !default; // stylelint-disable-line function-disallowed-list diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 52b60744b1..9f7ea8770f 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -318,11 +318,11 @@ &:active + .btn, + .btn:active, + .btn.active { - color: color-contrast($primary); - background-color: $primary; + color: color-contrast($brand-orange); + background-color: $brand-orange; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); - border-color: $primary; + border-color: $brand-orange; } // End mod diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index f47bd3bbd1..794053146a 100644 --- a/scss/helpers/_colored-links.scss +++ b/scss/helpers/_colored-links.scss @@ -1,7 +1,7 @@ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 @each $color, $value in $theme-colors { .link-#{$color} { - color: RGBA(if($color == "primary", var(--#{$prefix}#{$color}-text-rgb), var(--#{$prefix}#{$color}-rgb)), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); // Boosted mod: adapt to the right variable for primary + color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); // Boosted mod: adapt to the right variable for primary text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); @if $link-shade-percentage != 0 { diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 2e92776f41..d97290345b 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -1,5 +1,5 @@ // Local docs variables -$bd-primary: $primary; // Boosted mod +$bd-primary: $brand-orange; // Boosted mod // stylelint-disable-next-line function-disallowed-list $bd-primary-light: lighten(saturate($bd-primary, 5%), 15%); // Boosted mod $bd-purple: #4c0bce; diff --git a/site/data/theme-colors.yml b/site/data/theme-colors.yml index 63a99e0bf7..fd6db3ac9d 100644 --- a/site/data/theme-colors.yml +++ b/site/data/theme-colors.yml @@ -3,7 +3,6 @@ contrast_color: dark - name: secondary hex: "#000" - contrast_color: white - name: success hex: "#32c832" - name: danger