Skip to content

Commit 33cceb2

Browse files
mrholekmrholek
committed
refactor: divide and optimize functions
1 parent 951c386 commit 33cceb2

18 files changed

+239
-203
lines changed

‎docs/assets/scss/_colors.scss

+115-118
Large diffs are not rendered by default.

‎scss/_functions.scss

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
@forward "functions/assert";
2-
@forward "functions/color-contrast";
1+
@forward "functions/assert-ascending";
2+
@forward "functions/assert-starts-at-zero";
33
@forward "functions/color";
4+
@forward "functions/color-contrast";
5+
@forward "functions/contrast-ratio";
46
@forward "functions/escape-svg";
57
@forward "functions/maps";
68
@forward "functions/math";
9+
@forward "functions/rgba-css-var";
710
@forward "functions/str-replace";
11+
@forward "functions/to-rgb";

‎scss/_maps.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use "sass:map";
22
@use "functions/color" as *;
33
@use "functions/maps" as *;
4+
@use "functions/to-rgb" as *;
45
@use "variables" as *;
56
@use "variables-dark" as *;
67

‎scss/_root.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use "sass:meta";
22
@use "functions/color" as *;
3+
@use "functions/to-rgb" as *;
34
@use "mixins/color-mode" as *;
45
@use "vendor/rfs" as *;
56
@use "maps" as *;

‎scss/_variables.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
@use "sass:color";
22
@use "sass:string";
3-
@use "functions/assert" as *;
3+
@use "functions/assert-ascending" as *;
4+
@use "functions/assert-starts-at-zero" as *;
45
@use "functions/color" as *;
5-
@use "functions/color-contrast" as *;
6+
@use "functions/color-contrast-variables" as *;
67
@use "functions/math" as *;
8+
@use "functions/to-rgb" as *;
79

810
// Variables
911
//

‎scss/functions/_assert.scss renamed to ‎scss/functions/_assert-ascending.scss

-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@use "sass:list";
2-
@use "sass:map";
31
@use "sass:math";
42

53
// Ascending
@@ -19,15 +17,3 @@
1917
$prev-num: $num;
2018
}
2119
}
22-
23-
// Starts at zero
24-
// Used to ensure the min-width of the lowest breakpoint starts at 0.
25-
@mixin assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
26-
@if list.length($map) > 0 {
27-
$values: map.values($map);
28-
$first-value: list.nth($values, 1);
29-
@if $first-value != 0 {
30-
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
31-
}
32-
}
33-
}

‎scss/functions/_assert-starts-at-zero.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@use "sass:list";
2+
@use "sass:map";
3+
4+
// Starts at zero
5+
// Used to ensure the min-width of the lowest breakpoint starts at 0.
6+
@mixin assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
7+
@if list.length($map) > 0 {
8+
$values: map.values($map);
9+
$first-value: list.nth($values, 1);
10+
@if $first-value != 0 {
11+
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
12+
}
13+
}
14+
}

‎scss/functions/_color-contrast-variables.scss

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@use "contrast-ratio" as *;
2+
3+
// Color contrast
4+
// See https://github.com/twbs/bootstrap/pull/30168
5+
6+
@function color-contrast($background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio) {
7+
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
8+
$max-ratio: 0;
9+
$max-ratio-color: null;
10+
11+
@each $color in $foregrounds {
12+
$contrast-ratio: contrast-ratio($background, $color);
13+
@if $contrast-ratio > $min-contrast-ratio {
14+
@return $color;
15+
} @else if $contrast-ratio > $max-ratio {
16+
$max-ratio: $contrast-ratio;
17+
$max-ratio-color: $color;
18+
}
19+
}
20+
21+
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
22+
23+
@return $max-ratio-color;
24+
}

‎scss/functions/_color-contrast.scss

+3-37
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
@use "sass:color";
2-
@use "sass:map";
3-
@use "sass:math";
4-
@use "math" as *;
1+
@use "contrast-ratio" as *;
2+
@use "../variables" as *;
53

64
// Color contrast
75
// See https://github.com/twbs/bootstrap/pull/30168
86

9-
10-
@function color-contrast($background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio) {
7+
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
118
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
129
$max-ratio: 0;
1310
$max-ratio-color: null;
@@ -26,34 +23,3 @@
2623

2724
@return $max-ratio-color;
2825
}
29-
30-
@function contrast-ratio($background, $foreground) {
31-
$l1: luminance($background);
32-
$l2: luminance(opaque($background, $foreground));
33-
34-
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
35-
}
36-
37-
// Return WCAG2.2 relative luminance
38-
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
39-
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
40-
@function luminance($color) {
41-
$rgb: (
42-
"r": color.channel($color, "red", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
43-
"g": color.channel($color, "green", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
44-
"b": color.channel($color, "blue", $space: rgb) // stylelint-disable-line scss/at-function-named-arguments
45-
);
46-
47-
@each $name, $value in $rgb {
48-
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), math.pow(divide((divide(math.round($value) + 1, 255) + .055), 1.055), 2.4));
49-
$rgb: map.merge($rgb, ($name: $value));
50-
}
51-
52-
@return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
53-
}
54-
55-
// Return opaque color
56-
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
57-
@function opaque($background, $foreground) {
58-
@return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
59-
}

‎scss/functions/_color.scss

-14
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,3 @@
1616
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
1717
}
1818
// scss-docs-end color-functions
19-
20-
@function to-rgb($value) {
21-
@return color.channel($value, "red", $space: rgb), color.channel($value, "green", $space: rgb), color.channel($value, "blue", $space: rgb);
22-
}
23-
24-
@function rgba-css-var($prefix, $identifier, $target) {
25-
@if $identifier == "body" and $target == "bg" {
26-
@return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
27-
} @if $identifier == "body" and $target == "text" {
28-
@return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
29-
} @else {
30-
@return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
31-
}
32-
}

‎scss/functions/_contrast-ratio.scss

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@use "sass:color";
2+
@use "sass:map";
3+
@use "sass:math";
4+
@use "math" as *;
5+
6+
@function contrast-ratio($background, $foreground) {
7+
$l1: luminance($background);
8+
$l2: luminance(opaque($background, $foreground));
9+
10+
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
11+
}
12+
13+
// Return WCAG2.2 relative luminance
14+
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
15+
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
16+
@function luminance($color) {
17+
$rgb: (
18+
"r": color.channel($color, "red", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
19+
"g": color.channel($color, "green", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
20+
"b": color.channel($color, "blue", $space: rgb) // stylelint-disable-line scss/at-function-named-arguments
21+
);
22+
23+
@each $name, $value in $rgb {
24+
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), math.pow(divide((divide(math.round($value) + 1, 255) + .055), 1.055), 2.4));
25+
$rgb: map.merge($rgb, ($name: $value));
26+
}
27+
28+
@return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
29+
}
30+
31+
// Return opaque color
32+
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
33+
@function opaque($background, $foreground) {
34+
@return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
35+
}

‎scss/functions/_maps.scss

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
@use "sass:map";
33
@use "sass:meta";
44
@use "color" as *;
5+
@use "rgba-css-var" as *;
6+
@use "to-rgb" as *;
57
@use "../variables" as *;
68

79
// stylelint-disable scss/dollar-variable-pattern

‎scss/functions/_rgba-css-var.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@function rgba-css-var($prefix, $identifier, $target) {
2+
@if $identifier == "body" and $target == "bg" {
3+
@return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
4+
} @if $identifier == "body" and $target == "text" {
5+
@return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
6+
} @else {
7+
@return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
8+
}
9+
}

‎scss/functions/_to-rgb.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@use "sass:color";
2+
3+
@function to-rgb($value) {
4+
@return color.channel($value, "red", $space: rgb), color.channel($value, "green", $space: rgb), color.channel($value, "blue", $space: rgb);
5+
}

‎scss/helpers/_color-bg.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
@use "../functions/color" as *;
22
@use "../functions/color-contrast" as *;
3+
@use "../functions/to-rgb" as *;
34
@use "../mixins/color-mode" as *;
45
@use "../variables" as *;
56
@use "../variables-dark" as *;
67

78
@each $color, $value in $theme-colors {
89
.text-bg-#{$color} {
9-
color: color-contrast($value, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio) if($enable-important-utilities, !important, null);
10+
color: color-contrast($value) if($enable-important-utilities, !important, null);
1011
background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
1112
}
1213
}
@@ -16,7 +17,7 @@
1617
@each $color, $value in $theme-colors-dark {
1718
$color-rgb: to-rgb($value);
1819
.text-bg-#{$color} {
19-
color: color-contrast($value, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio) if($enable-important-utilities, !important, null);
20+
color: color-contrast($value) if($enable-important-utilities, !important, null);
2021
background-color: rgba($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
2122
}
2223
}

‎scss/helpers/_colored-links.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use "../functions/color" as *;
22
@use "../functions/color-contrast" as *;
3+
@use "../functions/to-rgb" as *;
34
@use "../variables" as *;
45

56
@each $color, $value in $theme-colors {
@@ -10,7 +11,7 @@
1011
@if $link-shade-percentage != 0 {
1112
&:hover,
1213
&:focus {
13-
$hover-color: if(color-contrast($value, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
14+
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
1415
color: rgba(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
1516
text-decoration-color: rgba(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
1617
}

‎scss/mixins/_buttons.scss

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use "sass:color";
22
@use "../functions/color" as *;
33
@use "../functions/color-contrast" as *;
4+
@use "../functions/to-rgb" as *;
45
@use "../vendor/rfs" as *;
56
@use "../variables" as *;
67

@@ -13,16 +14,16 @@
1314
@mixin button-variant(
1415
$background,
1516
$border,
16-
$color: color-contrast($background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
17+
$color: color-contrast($background),
1718
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
1819
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
19-
$hover-color: color-contrast($hover-background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
20+
$hover-color: color-contrast($hover-background),
2021
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
2122
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
22-
$active-color: color-contrast($active-background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
23+
$active-color: color-contrast($active-background),
2324
$disabled-background: $background,
2425
$disabled-border: $border,
25-
$disabled-color: color-contrast($disabled-background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)
26+
$disabled-color: color-contrast($disabled-background)
2627
) {
2728
--#{$prefix}btn-color: #{$color};
2829
--#{$prefix}btn-bg: #{$background};
@@ -44,10 +45,10 @@
4445
// scss-docs-start btn-outline-variant-mixin
4546
@mixin button-outline-variant(
4647
$color,
47-
$color-hover: color-contrast($color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
48+
$color-hover: color-contrast($color),
4849
$active-background: $color,
4950
$active-border: $color,
50-
$active-color: color-contrast($active-background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)
51+
$active-color: color-contrast($active-background)
5152
) {
5253
--#{$prefix}btn-color: #{$color};
5354
--#{$prefix}btn-border-color: #{$color};
@@ -69,13 +70,13 @@
6970
// scss-docs-start btn-ghost-variant-mixin
7071
@mixin button-ghost-variant(
7172
$color,
72-
$color-hover: color-contrast($color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
73+
$color-hover: color-contrast($color),
7374
$hover-background: $color,
7475
$hover-border: $color,
75-
$hover-color: color-contrast($color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
76+
$hover-color: color-contrast($color),
7677
$active-background: $color,
7778
$active-border: $color,
78-
$active-color: color-contrast($color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)
79+
$active-color: color-contrast($color)
7980
) {
8081
--#{$prefix}btn-color: #{$color};
8182
--#{$prefix}btn-border-color: transparent;

‎scss/mixins/_table-variants.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
@use "sass:color";
22
@use "sass:math";
33
@use "../functions/color-contrast" as *;
4+
@use "../functions/contrast-ratio" as *;
45
@use "../variables" as *;
56

67
// scss-docs-start table-variant
78
@mixin table-variant($state, $background) {
89
.table-#{$state} {
9-
$color: color-contrast(opaque($body-bg, $background), $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio);
10+
$color: color-contrast(opaque($body-bg, $background));
1011
$hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
1112
$striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
1213
$active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
@@ -16,11 +17,11 @@
1617
--#{$prefix}table-bg: #{$background};
1718
--#{$prefix}table-border-color: #{$table-border-color};
1819
--#{$prefix}table-striped-bg: #{$striped-bg};
19-
--#{$prefix}table-striped-color: #{color-contrast($striped-bg, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)};
20+
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
2021
--#{$prefix}table-active-bg: #{$active-bg};
21-
--#{$prefix}table-active-color: #{color-contrast($active-bg, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)};
22+
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
2223
--#{$prefix}table-hover-bg: #{$hover-bg};
23-
--#{$prefix}table-hover-color: #{color-contrast($hover-bg, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)};
24+
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
2425

2526
color: var(--#{$prefix}table-color);
2627
border-color: var(--#{$prefix}table-border-color);

0 commit comments

Comments
 (0)