Skip to content

Commit 1892c8c

Browse files
MartijnCuppensMartijnCuppens
committed
Colors rewrite
1 parent 4238a04 commit 1892c8c

File tree

15 files changed

+157
-146
lines changed

15 files changed

+157
-146
lines changed

‎.stylelintrc‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
],
55
"rules": {
66
"function-disallowed-list": [
7-
"calc"
7+
"calc",
8+
"lighten",
9+
"darken"
810
],
911
"property-disallowed-list": [
1012
"border-radius",

‎scss/_alert.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444

4545
@each $color, $value in $theme-colors {
4646
.alert-#{$color} {
47-
@include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level));
47+
@include alert-variant(scale-color($value, $alert-bg-scale), scale-color($value, $alert-border-scale), scale-color($value, $alert-color-scale));
4848
}
4949
}
5050
// scss-docs-end alert-modifiers

‎scss/_functions.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -150,23 +150,23 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
150150
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
151151
}
152152

153-
// Request a color level
154-
// scss-docs-start color-level
155-
@function color-level($color: $primary, $level: 0) {
156-
$color-base: if($level > 0, $black, $white);
157-
$level: abs($level);
158-
159-
@return mix($color-base, $color, $level * $theme-color-interval);
153+
// scss-docs-start color-functions
154+
// Tint a color: mix a color with white
155+
@function tint-color($color, $weight) {
156+
@return mix(white, $color, $weight);
160157
}
161-
// scss-docs-end color-level
162158

163-
@function tint-color($color, $level) {
164-
@return mix(white, $color, $level * $theme-color-interval);
159+
// Shade a color: mix a color with black
160+
@function shade-color($color, $weight) {
161+
@return mix(black, $color, $weight);
165162
}
166163

167-
@function shade-color($color, $level) {
168-
@return mix(black, $color, $level * $theme-color-interval);
164+
// Scale a color:
165+
// Shade the color if the weight is positive, else tint it
166+
@function scale-color($color, $weight) {
167+
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
169168
}
169+
// scss-docs-end color-functions
170170

171171
// Return valid calc
172172
@function add($value1, $value2, $return-calc: true) {

‎scss/_list-group.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,6 @@
152152
// Organizationally, this must come after the `:hover` states.
153153

154154
@each $color, $value in $theme-colors {
155-
@include list-group-item-variant($color, color-level($value, $list-group-item-bg-level), color-level($value, $list-group-item-color-level));
155+
@include list-group-item-variant($color, scale-color($value, $list-group-item-bg-scale), scale-color($value, $list-group-item-color-scale));
156156
}
157157
// scss-docs-end list-group-modifiers

‎scss/_popover.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
@include font-size($font-size-base);
157157
color: $popover-header-color;
158158
background-color: $popover-header-bg;
159-
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
159+
border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
160160
@include border-top-radius($popover-inner-border-radius);
161161

162162
&:empty {

‎scss/_variables.scss‎

Lines changed: 107 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -82,9 +82,6 @@ $theme-colors: (
8282
) !default;
8383
// scss-docs-end theme-colors-map
8484

85-
// Set a specific jump point for requesting color jumps
86-
$theme-color-interval: 8% !default;
87-
8885
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
8986
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
9087
$min-contrast-ratio: 4.5 !default;
@@ -94,105 +91,105 @@ $color-contrast-dark: $black !default;
9491
$color-contrast-light: $white !default;
9592

9693
// fusv-disable
97-
$blue-100: tint-color($blue, 8) !default;
98-
$blue-200: tint-color($blue, 6) !default;
99-
$blue-300: tint-color($blue, 4) !default;
100-
$blue-400: tint-color($blue, 2) !default;
94+
$blue-100: tint-color($blue, 80%) !default;
95+
$blue-200: tint-color($blue, 60%) !default;
96+
$blue-300: tint-color($blue, 40%) !default;
97+
$blue-400: tint-color($blue, 20%) !default;
10198
$blue-500: $blue !default;
102-
$blue-600: shade-color($blue, 2) !default;
103-
$blue-700: shade-color($blue, 4) !default;
104-
$blue-800: shade-color($blue, 6) !default;
105-
$blue-900: shade-color($blue, 8) !default;
106-
107-
$indigo-100: tint-color($indigo, 8) !default;
108-
$indigo-200: tint-color($indigo, 6) !default;
109-
$indigo-300: tint-color($indigo, 4) !default;
110-
$indigo-400: tint-color($indigo, 2) !default;
99+
$blue-600: shade-color($blue, 20%) !default;
100+
$blue-700: shade-color($blue, 40%) !default;
101+
$blue-800: shade-color($blue, 60%) !default;
102+
$blue-900: shade-color($blue, 80%) !default;
103+
104+
$indigo-100: tint-color($indigo, 80%) !default;
105+
$indigo-200: tint-color($indigo, 60%) !default;
106+
$indigo-300: tint-color($indigo, 40%) !default;
107+
$indigo-400: tint-color($indigo, 20%) !default;
111108
$indigo-500: $indigo !default;
112-
$indigo-600: shade-color($indigo, 2) !default;
113-
$indigo-700: shade-color($indigo, 4) !default;
114-
$indigo-800: shade-color($indigo, 6) !default;
115-
$indigo-900: shade-color($indigo, 8) !default;
116-
117-
$purple-100: tint-color($purple, 8) !default;
118-
$purple-200: tint-color($purple, 6) !default;
119-
$purple-300: tint-color($purple, 4) !default;
120-
$purple-400: tint-color($purple, 2) !default;
109+
$indigo-600: shade-color($indigo, 20%) !default;
110+
$indigo-700: shade-color($indigo, 40%) !default;
111+
$indigo-800: shade-color($indigo, 60%) !default;
112+
$indigo-900: shade-color($indigo, 80%) !default;
113+
114+
$purple-100: tint-color($purple, 80%) !default;
115+
$purple-200: tint-color($purple, 60%) !default;
116+
$purple-300: tint-color($purple, 40%) !default;
117+
$purple-400: tint-color($purple, 20%) !default;
121118
$purple-500: $purple !default;
122-
$purple-600: shade-color($purple, 2) !default;
123-
$purple-700: shade-color($purple, 4) !default;
124-
$purple-800: shade-color($purple, 6) !default;
125-
$purple-900: shade-color($purple, 8) !default;
126-
127-
$pink-100: tint-color($pink, 8) !default;
128-
$pink-200: tint-color($pink, 6) !default;
129-
$pink-300: tint-color($pink, 4) !default;
130-
$pink-400: tint-color($pink, 2) !default;
119+
$purple-600: shade-color($purple, 20%) !default;
120+
$purple-700: shade-color($purple, 40%) !default;
121+
$purple-800: shade-color($purple, 60%) !default;
122+
$purple-900: shade-color($purple, 80%) !default;
123+
124+
$pink-100: tint-color($pink, 80%) !default;
125+
$pink-200: tint-color($pink, 60%) !default;
126+
$pink-300: tint-color($pink, 40%) !default;
127+
$pink-400: tint-color($pink, 20%) !default;
131128
$pink-500: $pink !default;
132-
$pink-600: shade-color($pink, 2) !default;
133-
$pink-700: shade-color($pink, 4) !default;
134-
$pink-800: shade-color($pink, 6) !default;
135-
$pink-900: shade-color($pink, 8) !default;
136-
137-
$red-100: tint-color($red, 8) !default;
138-
$red-200: tint-color($red, 6) !default;
139-
$red-300: tint-color($red, 4) !default;
140-
$red-400: tint-color($red, 2) !default;
129+
$pink-600: shade-color($pink, 20%) !default;
130+
$pink-700: shade-color($pink, 40%) !default;
131+
$pink-800: shade-color($pink, 60%) !default;
132+
$pink-900: shade-color($pink, 80%) !default;
133+
134+
$red-100: tint-color($red, 80%) !default;
135+
$red-200: tint-color($red, 60%) !default;
136+
$red-300: tint-color($red, 40%) !default;
137+
$red-400: tint-color($red, 20%) !default;
141138
$red-500: $red !default;
142-
$red-600: shade-color($red, 2) !default;
143-
$red-700: shade-color($red, 4) !default;
144-
$red-800: shade-color($red, 6) !default;
145-
$red-900: shade-color($red, 8) !default;
146-
147-
$orange-100: tint-color($orange, 8) !default;
148-
$orange-200: tint-color($orange, 6) !default;
149-
$orange-300: tint-color($orange, 4) !default;
150-
$orange-400: tint-color($orange, 2) !default;
139+
$red-600: shade-color($red, 20%) !default;
140+
$red-700: shade-color($red, 40%) !default;
141+
$red-800: shade-color($red, 60%) !default;
142+
$red-900: shade-color($red, 80%) !default;
143+
144+
$orange-100: tint-color($orange, 80%) !default;
145+
$orange-200: tint-color($orange, 60%) !default;
146+
$orange-300: tint-color($orange, 40%) !default;
147+
$orange-400: tint-color($orange, 20%) !default;
151148
$orange-500: $orange !default;
152-
$orange-600: shade-color($orange, 2) !default;
153-
$orange-700: shade-color($orange, 4) !default;
154-
$orange-800: shade-color($orange, 6) !default;
155-
$orange-900: shade-color($orange, 8) !default;
156-
157-
$yellow-100: tint-color($yellow, 8) !default;
158-
$yellow-200: tint-color($yellow, 6) !default;
159-
$yellow-300: tint-color($yellow, 4) !default;
160-
$yellow-400: tint-color($yellow, 2) !default;
149+
$orange-600: shade-color($orange, 20%) !default;
150+
$orange-700: shade-color($orange, 40%) !default;
151+
$orange-800: shade-color($orange, 60%) !default;
152+
$orange-900: shade-color($orange, 80%) !default;
153+
154+
$yellow-100: tint-color($yellow, 80%) !default;
155+
$yellow-200: tint-color($yellow, 60%) !default;
156+
$yellow-300: tint-color($yellow, 40%) !default;
157+
$yellow-400: tint-color($yellow, 20%) !default;
161158
$yellow-500: $yellow !default;
162-
$yellow-600: shade-color($yellow, 2) !default;
163-
$yellow-700: shade-color($yellow, 4) !default;
164-
$yellow-800: shade-color($yellow, 6) !default;
165-
$yellow-900: shade-color($yellow, 8) !default;
166-
167-
$green-100: tint-color($green, 8) !default;
168-
$green-200: tint-color($green, 6) !default;
169-
$green-300: tint-color($green, 4) !default;
170-
$green-400: tint-color($green, 2) !default;
159+
$yellow-600: shade-color($yellow, 20%) !default;
160+
$yellow-700: shade-color($yellow, 40%) !default;
161+
$yellow-800: shade-color($yellow, 60%) !default;
162+
$yellow-900: shade-color($yellow, 80%) !default;
163+
164+
$green-100: tint-color($green, 80%) !default;
165+
$green-200: tint-color($green, 60%) !default;
166+
$green-300: tint-color($green, 40%) !default;
167+
$green-400: tint-color($green, 20%) !default;
171168
$green-500: $green !default;
172-
$green-600: shade-color($green, 2) !default;
173-
$green-700: shade-color($green, 4) !default;
174-
$green-800: shade-color($green, 6) !default;
175-
$green-900: shade-color($green, 8) !default;
176-
177-
$teal-100: tint-color($teal, 8) !default;
178-
$teal-200: tint-color($teal, 6) !default;
179-
$teal-300: tint-color($teal, 4) !default;
180-
$teal-400: tint-color($teal, 2) !default;
169+
$green-600: shade-color($green, 20%) !default;
170+
$green-700: shade-color($green, 40%) !default;
171+
$green-800: shade-color($green, 60%) !default;
172+
$green-900: shade-color($green, 80%) !default;
173+
174+
$teal-100: tint-color($teal, 80%) !default;
175+
$teal-200: tint-color($teal, 60%) !default;
176+
$teal-300: tint-color($teal, 40%) !default;
177+
$teal-400: tint-color($teal, 20%) !default;
181178
$teal-500: $teal !default;
182-
$teal-600: shade-color($teal, 2) !default;
183-
$teal-700: shade-color($teal, 4) !default;
184-
$teal-800: shade-color($teal, 6) !default;
185-
$teal-900: shade-color($teal, 8) !default;
186-
187-
$cyan-100: tint-color($cyan, 8) !default;
188-
$cyan-200: tint-color($cyan, 6) !default;
189-
$cyan-300: tint-color($cyan, 4) !default;
190-
$cyan-400: tint-color($cyan, 2) !default;
179+
$teal-600: shade-color($teal, 20%) !default;
180+
$teal-700: shade-color($teal, 40%) !default;
181+
$teal-800: shade-color($teal, 60%) !default;
182+
$teal-900: shade-color($teal, 80%) !default;
183+
184+
$cyan-100: tint-color($cyan, 80%) !default;
185+
$cyan-200: tint-color($cyan, 60%) !default;
186+
$cyan-300: tint-color($cyan, 40%) !default;
187+
$cyan-400: tint-color($cyan, 20%) !default;
191188
$cyan-500: $cyan !default;
192-
$cyan-600: shade-color($cyan, 2) !default;
193-
$cyan-700: shade-color($cyan, 4) !default;
194-
$cyan-800: shade-color($cyan, 6) !default;
195-
$cyan-900: shade-color($cyan, 8) !default;
189+
$cyan-600: shade-color($cyan, 20%) !default;
190+
$cyan-700: shade-color($cyan, 40%) !default;
191+
$cyan-800: shade-color($cyan, 60%) !default;
192+
$cyan-900: shade-color($cyan, 80%) !default;
196193
// fusv-enable
197194

198195
// Characters which are escaped by the escape-svg function
@@ -272,10 +269,9 @@ $body-text-align: null !default;
272269

273270
$link-color: $primary !default;
274271
$link-decoration: underline !default;
275-
$link-hover-color: darken($link-color, 15%) !default;
272+
$link-shade-percentage: 20% !default;
273+
$link-hover-color: scale-color($link-color, $link-shade-percentage) !default;
276274
$link-hover-decoration: null !default;
277-
// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
278-
$emphasized-link-hover-darken-percentage: 15% !default;
279275

280276
$stretched-link-pseudo-element: after !default;
281277
$stretched-link-z-index: 1 !default;
@@ -520,15 +516,15 @@ $table-group-separator-color: currentColor !default;
520516

521517
$table-caption-color: $text-muted !default;
522518

523-
$table-bg-level: -9 !default;
519+
$table-bg-scale: -80% !default;
524520

525521
$table-variants: (
526-
"primary": color-level($primary, $table-bg-level),
527-
"secondary": color-level($secondary, $table-bg-level),
528-
"success": color-level($success, $table-bg-level),
529-
"info": color-level($info, $table-bg-level),
530-
"warning": color-level($warning, $table-bg-level),
531-
"danger": color-level($danger, $table-bg-level),
522+
"primary": scale-color($primary, $table-bg-scale),
523+
"secondary": scale-color($secondary, $table-bg-scale),
524+
"success": scale-color($success, $table-bg-scale),
525+
"info": scale-color($info, $table-bg-scale),
526+
"warning": scale-color($warning, $table-bg-scale),
527+
"danger": scale-color($danger, $table-bg-scale),
532528
"light": $light,
533529
"dark": $dark,
534530
) !default;
@@ -646,7 +642,7 @@ $input-border-radius-sm: $border-radius-sm !default;
646642
$input-border-radius-lg: $border-radius-lg !default;
647643

648644
$input-focus-bg: $input-bg !default;
649-
$input-focus-border-color: lighten($component-active-bg, 25%) !default;
645+
$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
650646
$input-focus-color: $input-color !default;
651647
$input-focus-width: $input-btn-focus-width !default;
652648
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
@@ -774,7 +770,7 @@ $form-range-thumb-border-radius: 1rem !default;
774770
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
775771
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
776772
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
777-
$form-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
773+
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
778774
$form-range-thumb-disabled-bg: $gray-500 !default;
779775
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
780776

@@ -936,7 +932,7 @@ $dropdown-divider-margin-y: $spacer / 2 !default;
936932
$dropdown-box-shadow: $box-shadow !default;
937933

938934
$dropdown-link-color: $gray-900 !default;
939-
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
935+
$dropdown-link-hover-color: shade-color($gray-900, 10%) !default;
940936
$dropdown-link-hover-bg: $gray-100 !default;
941937

942938
$dropdown-link-active-color: $component-active-color !default;
@@ -1057,7 +1053,7 @@ $popover-border-radius: $border-radius-lg !default;
10571053
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
10581054
$popover-box-shadow: $box-shadow !default;
10591055

1060-
$popover-header-bg: darken($popover-bg, 3%) !default;
1056+
$popover-header-bg: shade-color($popover-bg, 6%) !default;
10611057
$popover-header-color: $headings-color !default;
10621058
$popover-header-padding-y: .5rem !default;
10631059
$popover-header-padding-x: $spacer !default;
@@ -1155,9 +1151,9 @@ $alert-border-radius: $border-radius !default;
11551151
$alert-link-font-weight: $font-weight-bold !default;
11561152
$alert-border-width: $border-width !default;
11571153

1158-
$alert-bg-level: -10 !default;
1159-
$alert-border-level: -9 !default;
1160-
$alert-color-level: 6 !default;
1154+
$alert-bg-scale: -80% !default;
1155+
$alert-border-scale: -70% !default;
1156+
$alert-color-scale: 50% !default;
11611157

11621158
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
11631159

@@ -1185,8 +1181,8 @@ $list-group-border-radius: $border-radius !default;
11851181

11861182
$list-group-item-padding-y: $spacer / 2 !default;
11871183
$list-group-item-padding-x: $spacer !default;
1188-
$list-group-item-bg-level: -9 !default;
1189-
$list-group-item-color-level: 6 !default;
1184+
$list-group-item-bg-scale: -80% !default;
1185+
$list-group-item-color-scale: 50% !default;
11901186

11911187
$list-group-hover-bg: $gray-100 !default;
11921188
$list-group-active-color: $component-active-color !default;

‎scss/helpers/_colored-links.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
.link-#{$color} {
33
color: $value;
44

5-
@if $emphasized-link-hover-darken-percentage != 0 {
5+
@if $link-shade-percentage != 0 {
66
&:hover,
77
&:focus {
8-
color: if(color-contrast($value) == $color-contrast-light, darken($value, $emphasized-link-hover-darken-percentage), lighten($value, $emphasized-link-hover-darken-percentage));
8+
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
99
}
1010
}
1111
}

‎scss/mixins/_alert.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
border-color: $border;
55

66
.alert-link {
7-
color: darken($color, 10%);
7+
color: shade-color($color, 20%);
88
}
99
}

0 commit comments

Comments
 (0)