feat(colors): use #ff7900 as primary color & drop color-contrast() by…

…pass for Orange ❤️
Orange-OpenSource · Jul 21, 2020 · fece01e · fece01e
1 parent c887a99
commit fece01e
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 35 deletions.
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -64,7 +64,7 @@
 // Boosted mod: inconsistent theming ¯\_(ツ)_/¯
 .btn-primary,
 .btn-warning {
-  @include button-variant($primary, $primary, $white, $active-background: $white, $active-border: $black, $active-color: $black);
+  @include button-variant($primary, $primary, $black, $active-background: $white, $active-border: $black, $active-color: $black);
 }
 
 .btn-light,

diff --git a/scss/_card.scss b/scss/_card.scss
@@ -270,7 +270,7 @@
         @include caret($accordion: true);
 
         &:not(.collapsed) {
-          color: $primary;
+          color: $orange-2;
 
           &::after {
             transform: rotate(180deg);

diff --git a/scss/_functions.scss b/scss/_functions.scss
@@ -94,11 +94,6 @@
 $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
 
 @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
-  // Boosted mod: Orange is not the new Black
-  @if ($background == $primary) {
-    @return $color-contrast-light;
-  }
-  // End mod
   $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
   $max-ratio: 0;
   $max-ratio-color: null;

diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -103,14 +103,14 @@
 
     &:hover,
     &:focus {
-      color: $primary;
+      color: $orange-2;
       background: none;
       border-color: transparent;
       outline-color: currentColor;
     }
 
     &.active {
-      border-bottom-color: $primary;
+      border-bottom-color: $orange-2;
     }
   }
 }

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -96,14 +96,13 @@
     }
 
     &:active {
-      color: $pagination-active-color;
+      color: color-contrast($pagination-active-item-bg);
       background-color: $pagination-active-item-bg;
       border-color: $pagination-active-item-border-color;
     }
 
     &:hover::before,
-    &:focus::before,
-    &:active::before {
+    &:focus::before {
       background-image: escape-svg($pagination-icon-hover);
     }
 

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -216,7 +216,7 @@ ul {
 // See https://developer.mozilla.org/fr/docs/Web/CSS/::marker
 // stylelint-disable selector-max-type
 li::marker {
-  color: $primary;
+  color: $orange-2;
   vertical-align: middle;
 }
 
@@ -228,7 +228,7 @@ li li li::marker { color: $gray-500; }
 // @todo To remove when ::marker support is OK
 // See https://caniuse.com/#search=%3A%3Amarker
 li::before {
-  color: $primary;
+  color: $orange-2;
   vertical-align: text-top;
 }
 

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -385,7 +385,7 @@ $utilities: map-merge(
       property: color,
       class: text,
       values: (
-        "primary": $primary,
+        "primary": $orange-2,
         "light": $gray-500,
         "white": $white,
         "body": $body-color,

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -32,8 +32,8 @@ $grays: (
 
 // Boosted mod
 //// Core colors
-$orange:   #f16e00 !default;
-$orange-2: #ff7900 !default;
+$orange:   #ff7900 !default;
+$orange-2: #f16e00 !default;
 //// Functional colors
 $green:    #32c832 !default;
 $blue:     #527edb !default;
@@ -291,7 +291,7 @@ $body-text-align:           null !default;
 
 $link-color:                              $black !default;
 $link-decoration:                         underline !default;
-$link-hover-color:                        $primary !default;
+$link-hover-color:                        $orange-2 !default;
 $link-hover-decoration:                   null !default;
 // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
 $emphasized-link-hover-darken-percentage: 15% !default;
@@ -380,7 +380,7 @@ $box-shadow:                  null !default;
 $box-shadow-sm:               null !default;
 $box-shadow-inset:            null !default;
 
-$component-active-color:      $white !default;
+$component-active-color:      $black !default;
 $component-active-bg:         $primary !default;
 
 $caret-width:                 add($spacer / 4, $border-width) !default;
@@ -722,10 +722,12 @@ $form-check-input-checked-color:          $component-active-color !default;
 $form-check-input-checked-bg-color:       $component-active-bg !default;
 $form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
 $form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'><path fill='#{$form-check-input-checked-color}' d='M13 0L5 8 2 5 0 7l5 5L15 2z'/></svg>") !default;
+$form-check-input-disabled-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'><path fill='#{color-contrast($form-check-input-checked-color)}' d='M13 0L5 8 2 5 0 7l5 5L15 2z'/></svg>") !default; // Boosted mod
 $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
+$form-check-radio-disabled-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{color-contrast($form-check-input-checked-color)}'/></svg>") !default;
 
-$form-check-input-indeterminate-color:          $component-active-color !default;
-$form-check-input-indeterminate-bg-color:       $black !default;
+$form-check-input-indeterminate-color:          color-contrast($component-active-color) !default;
+$form-check-input-indeterminate-bg-color:       $component-active-color !default;
 $form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
 $form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 3'><path fill='#{$form-check-input-indeterminate-color}' d='M0 0h10v3H0z'/></svg>") !default;
 
@@ -740,6 +742,7 @@ $form-switch-bg-square-size:      add(1rem, $spacer / 2) !default;
 $form-switch-border-radius:       null !default;
 
 $form-switch-checked-bg-image:    $form-check-input-checked-bg-image !default;
+$form-switch-disabled-bg-image:   $form-check-input-disabled-bg-image !default; // Boosted mod
 $form-switch-checked-bg-size:     add(map-get($spacers, 2), map-get($spacers, 1)) !default;
 $form-switch-checked-bg-position: $border-width * 3 50% !default;
 
@@ -889,8 +892,8 @@ $nav-tabs-link-active-bg:           $body-bg !default;
 $nav-tabs-link-active-border-color: $nav-tabs-link-active-color !default;
 
 $nav-pills-border-radius:           $border-radius !default;
-$nav-pills-link-active-color:       $white !default;
-$nav-pills-link-active-bg:          $primary !default;
+$nav-pills-link-active-color:       $component-active-color !default;
+$nav-pills-link-active-bg:          $component-active-bg !default;
 
 
 // Navbar
@@ -931,21 +934,21 @@ $navbar-toggler-focus-width:        null !default;
 $navbar-toggler-transition:         $transition-focus !default;
 
 $navbar-dark-color:                 $white !default;
-$navbar-dark-hover-color:           $orange-2 !default;
-$navbar-dark-active-color:          $orange-2 !default;
+$navbar-dark-hover-color:           $primary !default;
+$navbar-dark-active-color:          $primary !default;
 $navbar-dark-disabled-color:        $gray-400 !default;
 $navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$white}' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-dark-toggler-border-color:  transparent !default;
 
 $navbar-light-color:                $black !default;
-$navbar-light-hover-color:          $orange !default;
-$navbar-light-active-color:         $orange !default;
+$navbar-light-hover-color:          $orange-2 !default;
+$navbar-light-active-color:         $orange-2 !default;
 $navbar-light-disabled-color:       $gray-500 !default;
 $navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$black}' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-light-toggler-border-color: null !default;
 
-$navbar-light-brand-color:                $navbar-light-active-color !default;
-$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
+$navbar-light-brand-color:          $navbar-light-active-color !default;
+$navbar-light-brand-hover-color:    $navbar-light-active-color !default;
 $navbar-dark-brand-color:           inherit !default;
 $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
 
@@ -1006,7 +1009,7 @@ $pagination-hover-color:            $black !default;
 $pagination-hover-bg:               $white !default;
 $pagination-hover-border-color:     $gray-500 !default;
 
-$pagination-active-color:           $component-active-color !default;
+$pagination-active-color:           $white !default;
 $pagination-active-bg:              $black !default;
 $pagination-active-border-color:    $pagination-active-bg !default;
 

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -95,6 +95,22 @@
     &:checked {
       background-color: $input-border-color;
       border-color: $input-border-color;
+
+      &[type="checkbox"] {
+        @if $enable-gradients {
+          background-image: escape-svg($form-check-input-disabled-bg-image), var(--bs-gradient);
+        } @else {
+          background-image: escape-svg($form-check-input-disabled-bg-image);
+        }
+      }
+
+      &[type="radio"] {
+        @if $enable-gradients {
+          background-image: escape-svg($form-check-radio-disabled-bg-image), var(--bs-gradient);
+        } @else {
+          background-image: escape-svg($form-check-radio-disabled-bg-image);
+        }
+      }
     }
     // End mod
   }
@@ -112,7 +128,7 @@
   &:required {
     ~ .form-check-label::after {
       margin-left: $form-label-margin-bottom;
-      color: $primary;
+      color: $orange-2;
       content: "*";
     }
   }
@@ -142,7 +158,9 @@
     background-position: $form-switch-bg-position, 0 0;
     background-size: $form-switch-bg-size, $form-switch-bg-square-size; // Get a 1px separation
     border-color: $black;
+    outline-offset: $spacer; // Boosted mod
     @include border-radius($form-switch-border-radius);
+    @include transition($transition-focus); // Boosted mod
 
     &:checked {
       background-color: $primary;
@@ -165,7 +183,7 @@
     }
 
     &:focus {
-      // @TODO: custom focus
+      outline-offset: $outline-width / 2;
     }
 
     &:active {
@@ -176,6 +194,16 @@
     &:disabled {
       background-color: $input-border-color;
       border-color: $input-border-color;
+
+      // Boosted mod
+      &:checked {
+        @if $enable-gradients {
+          background-image: escape-svg($form-switch-disabled-bg-image), var(--bs-gradient), var(--o-switch-gradient);
+        } @else {
+          background-image: escape-svg($form-switch-disabled-bg-image), var(--o-switch-gradient);
+        }
+      }
+      // End mod
     }
   }
 

diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
@@ -17,7 +17,7 @@
 
 .is-required::after {
   margin-left: $form-label-margin-bottom;
-  color: $primary;
+  color: $orange-2;
   content: "*";
 }
 // End mod

diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
@@ -43,9 +43,9 @@
         @each $property in $properties {
           #{$property}: $value if($enable-important-utilities, !important, null);
           // Boosted mod: ensure contrasts in color utilities
-          @if "background-color" == $property and "transparent" != inspect($value) {
+          @if "background-color" == $property and "transparent" != inspect($value) and $primary != $value {
             color: color-contrast($value);
-          } @else if "color" == $property and "inherit" != inspect($value) {
+          } @else if "color" == $property and "inherit" != inspect($value) and $orange-2 != $value {
             background-color: color-contrast($value);
           }
           // End mod