Skip to content

Commit 75706ab

Browse files
mrholekmrholek
committed
refactor: simplify CSS Variables
1 parent c3e2cdc commit 75706ab

File tree

4 files changed

+33
-46
lines changed

4 files changed

+33
-46
lines changed

‎scss/_alert.scss

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,11 @@
4444
// Generate contextual modifier classes for colorizing the alert.
4545

4646
@each $state, $map in $alert-variants {
47-
$background: var(--#{$variable-prefix}alert-#{$state}-bg, map-get($map, "background"));
48-
$border: var(--#{$variable-prefix}alert-#{$state}-border-color, map-get($map, "border"));
49-
$color: var(--#{$variable-prefix}alert-#{$state}-color, map-get($map, "color"));
50-
$link-color: var(--#{$variable-prefix}alert-#{$state}-link-color, map-get($map, "link-color"));
51-
// TODO: refactor
52-
@if ($enable-contrast-ratio-correction and contrast-ratio(map-get($map, "background"), map-get($map, "color")) < $min-contrast-ratio) {
53-
@if $enable-contrast-ratio-warnings {
54-
@warn "Alert #{$state} contrast ratio #{contrast-ratio(map-get($map, "background"), map-get($map, "color"))}.";
55-
}
56-
$color: var(--#{$variable-prefix}alert-#{$state}-color, mix(map-get($map, "color"), color-contrast(map-get($map, "background")), abs($alert-color-scale)));
57-
}
47+
$background: var(--#{$variable-prefix}alert-bg, map-get($map, "background"));
48+
$border: var(--#{$variable-prefix}alert-border-color, map-get($map, "border"));
49+
$color: var(--#{$variable-prefix}alert-color, contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state));
50+
$link-color: var(--#{$variable-prefix}alert-link-color, map-get($map, "link-color"));
51+
5852
.alert-#{$state} {
5953
@include alert-variant($background, $border, $color, $link-color);
6054
}

‎scss/_buttons.scss

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -59,19 +59,19 @@
5959
@each $state, $map in $button-variants {
6060
.btn-#{$state} {
6161
@include button-variant(
62-
$background: var(--#{$variable-prefix}btn-#{$state}-background, map-get($map, "background")),
63-
$border: var(--#{$variable-prefix}btn-#{$state}-border-color, map-get($map, "border")),
64-
$color: var(--#{$variable-prefix}btn-#{$state}-color, map-get($map, "color")),
65-
$hover-background: var(--#{$variable-prefix}btn-#{$state}-hover-background, map-get($map, "hover-background")),
66-
$hover-border: var(--#{$variable-prefix}btn-#{$state}-hover-border, map-get($map, "hover-border")),
67-
$hover-color: var(--#{$variable-prefix}btn-#{$state}-hover-color, map-get($map, "hover-color")),
68-
$active-background: var(--#{$variable-prefix}btn-#{$state}-active-background, map-get($map, "active-background")),
69-
$active-border: var(--#{$variable-prefix}btn-#{$state}-active-border, map-get($map, "active-border")),
70-
$active-color: var(--#{$variable-prefix}btn-#{$state}-active-color, map-get($map, "active-color")),
71-
$disabled-background: var(--#{$variable-prefix}btn-#{$state}-disabled-background, map-get($map, "disabled-background")),
72-
$disabled-border: var(--#{$variable-prefix}btn-#{$state}-disabled-border, map-get($map, "disabled-border")),
73-
$disabled-color: var(--#{$variable-prefix}btn-#{$state}-disabled-color, map-get($map, "disabled-color")),
74-
$shadow: var(--#{$variable-prefix}btn-#{$state}-shadow, map-get($map, "shadow"))
62+
$background: var(--#{$variable-prefix}btn-background, map-get($map, "background")),
63+
$border: var(--#{$variable-prefix}btn-border-color, map-get($map, "border")),
64+
$color: var(--#{$variable-prefix}btn-color, map-get($map, "color")),
65+
$hover-background: var(--#{$variable-prefix}btn-hover-background, map-get($map, "hover-background")),
66+
$hover-border: var(--#{$variable-prefix}btn-hover-border, map-get($map, "hover-border")),
67+
$hover-color: var(--#{$variable-prefix}btn-hover-color, map-get($map, "hover-color")),
68+
$active-background: var(--#{$variable-prefix}btn-active-background, map-get($map, "active-background")),
69+
$active-border: var(--#{$variable-prefix}btn-active-border, map-get($map, "active-border")),
70+
$active-color: var(--#{$variable-prefix}btn-active-color, map-get($map, "active-color")),
71+
$disabled-background: var(--#{$variable-prefix}btn-disabled-background, map-get($map, "disabled-background")),
72+
$disabled-border: var(--#{$variable-prefix}btn-disabled-border, map-get($map, "disabled-border")),
73+
$disabled-color: var(--#{$variable-prefix}btn-disabled-color, map-get($map, "disabled-color")),
74+
$shadow: var(--#{$variable-prefix}btn-shadow, map-get($map, "shadow"))
7575
);
7676
}
7777
}
@@ -81,12 +81,12 @@
8181
@each $state, $map in $button-variants {
8282
.btn-outline-#{$state} {
8383
@include button-outline-variant(
84-
$color: var(--#{$variable-prefix}btn-outline-#{$state}-color, map-get($map, "background")),
85-
$color-hover: var(--#{$variable-prefix}btn-outline-#{$state}-hover-color, map-get($map, "color")),
86-
$active-background: var(--#{$variable-prefix}btn-outline-#{$state}-active-background, map-get($map, "background")),
87-
$active-border: var(--#{$variable-prefix}btn-outline-#{$state}-active-border, map-get($map, "background")),
88-
$active-color: var(--#{$variable-prefix}btn-outline-#{$state}-active-color, map-get($map, "active-color")),
89-
$shadow: var(--#{$variable-prefix}btn-outline-#{$state}-shadow, map-get($map, "shadow"))
84+
$color: var(--#{$variable-prefix}btn-outline-color, map-get($map, "background")),
85+
$color-hover: var(--#{$variable-prefix}btn-outline-hover-color, map-get($map, "color")),
86+
$active-background: var(--#{$variable-prefix}btn-outline-active-background, map-get($map, "background")),
87+
$active-border: var(--#{$variable-prefix}btn-outline-active-border, map-get($map, "background")),
88+
$active-color: var(--#{$variable-prefix}btn-outline-active-color, map-get($map, "active-color")),
89+
$shadow: var(--#{$variable-prefix}btn-outline-shadow, map-get($map, "shadow"))
9090
);
9191
}
9292
}
@@ -96,11 +96,11 @@
9696
@each $state, $map in $button-variants {
9797
.btn-ghost-#{$state} {
9898
@include button-ghost-variant(
99-
$color: var(--#{$variable-prefix}btn-ghost-#{$state}-color, map-get($map, "background")),
100-
$color-hover: var(--#{$variable-prefix}btn-ghost-#{$state}-hover-color, map-get($map, "color")),
101-
$active-background: var(--#{$variable-prefix}btn-ghost-#{$state}-active-background, map-get($map, "background")),
102-
$active-border: var(--#{$variable-prefix}btn-ghost-#{$state}-active-border, map-get($map, "background")),
103-
$shadow: var(--#{$variable-prefix}btn-ghost-#{$state}-shadow, map-get($map, "shadow"))
99+
$color: var(--#{$variable-prefix}btn-ghost-color, map-get($map, "background")),
100+
$color-hover: var(--#{$variable-prefix}btn-ghost-hover-color, map-get($map, "color")),
101+
$active-background: var(--#{$variable-prefix}btn-ghost-active-background, map-get($map, "background")),
102+
$active-border: var(--#{$variable-prefix}btn-ghost-active-border, map-get($map, "background")),
103+
$shadow: var(--#{$variable-prefix}btn-ghost-shadow, map-get($map, "shadow"))
104104
);
105105
}
106106
}

‎scss/_callout.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
// Generate contextual modifier classes for colorizing the collor.
1111
@each $state, $value in $callout-variants {
1212
.callout-#{$state} {
13-
border-left-color: var(--#{$variable-prefix}callout-#{$state}-border-left-color, $value);
13+
border-left-color: var(--#{$variable-prefix}callout-border-left-color, $value);
1414
}
1515
}
1616
// scss-docs-end callout-modifiers

‎scss/_list-group.scss

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -152,16 +152,9 @@
152152
// Organizationally, this must come after the `:hover` states.
153153

154154
@each $state, $map in $list-group-variants {
155-
$background: var(--#{$variable-prefix}list-group-#{$state}-background, map-get($map, "background"));
156-
$background-hover: var(--#{$variable-prefix}list-group-#{$state}-background-hover, map-get($map, "background-hover"));
157-
$color: var(--#{$variable-prefix}list-group-#{$state}-color, map-get($map, "color"));
158-
// TODO: refactor
159-
@if ($enable-contrast-ratio-correction and contrast-ratio(map-get($map, "background"), map-get($map, "color")) < $min-contrast-ratio) {
160-
@if $enable-contrast-ratio-warnings {
161-
@warn "List group item #{$state} contrast ratio #{contrast-ratio(map-get($map, "background"), map-get($map, "color"))}.";
162-
}
163-
$color: var(--#{$variable-prefix}list-group-#{$state}-color, mix(map-get($map, "color"), color-contrast(map-get($map, "background")), abs($alert-color-scale)));
164-
}
155+
$background: var(--#{$variable-prefix}list-group-background, map-get($map, "background"));
156+
$background-hover: var(--#{$variable-prefix}list-group-background-hover, map-get($map, "background-hover"));
157+
$color: var(--#{$variable-prefix}list-group-color, contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state));
165158

166159
@include list-group-item-variant($state, $background, $background-hover, $color);
167160
}

0 commit comments

Comments
 (0)