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‎

Lines changed: 115 additions & 118 deletions
Large diffs are not rendered by default.

‎scss/_functions.scss‎

Lines changed: 6 additions & 2 deletions
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‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 4 additions & 2 deletions
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

Lines changed: 0 additions & 14 deletions
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‎

Lines changed: 14 additions & 0 deletions
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‎

Lines changed: 24 additions & 0 deletions
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‎

Lines changed: 3 additions & 37 deletions
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‎

Lines changed: 0 additions & 14 deletions
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-
}

0 commit comments

Comments
 (0)