Skip to content

Commit f832248

Browse files
mrholekmrholek
committed
feat: add dark mode support; update CSS Variables; bug fixes & minor enhancements
1 parent 8807747 commit f832248

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+1532
-691
lines changed

‎scss/_accordion.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
1414
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
1515
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
16-
--#{$prefix}accordion-btn-color: #{$accordion-color};
1716
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
1817
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
1918
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
@@ -148,3 +147,12 @@
148147
}
149148
}
150149
}
150+
151+
@if $enable-dark-mode {
152+
@include color-mode(dark) {
153+
.accordion-button::after {
154+
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
155+
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
156+
}
157+
}
158+
}

‎scss/_alert.scss‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
--#{$prefix}alert-border-color: transparent;
1313
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
1414
--#{$prefix}alert-border-radius: #{$alert-border-radius};
15+
--#{$prefix}alert-link-color: inherit;
1516
// scss-docs-end alert-css-vars
1617

1718
position: relative;
@@ -56,17 +57,12 @@
5657

5758
// scss-docs-start alert-modifiers
5859
// Generate contextual modifier classes for colorizing the alert.
59-
60-
@each $state, $value in $alert-variants {
61-
$alert-background: map-get($value, "alert-bg");
62-
$alert-border: map-get($value, "alert-border");
63-
$alert-color: map-get($value, "alert-color");
64-
65-
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
66-
$alert-color: mix(map-get($value, "base-color"), color-contrast($alert-background), abs($alert-color-scale));
67-
}
60+
@each $state in map-keys($theme-colors) {
6861
.alert-#{$state} {
69-
@include alert-variant($alert-background, $alert-border, $alert-color);
62+
--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
63+
--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
64+
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
65+
--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
7066
}
7167
}
7268
// scss-docs-end alert-modifiers

‎scss/_badge.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
//
4343

4444
.badge-sm {
45-
padding: $badge-padding-y-sm $badge-padding-x-sm;
45+
--#{$prefix}badge-padding-x: #{$badge-padding-x-sm};
46+
--#{$prefix}badge-padding-y: #{$badge-padding-y-sm};
4647
@include font-size($badge-font-size-sm);
4748
}

‎scss/_button-group.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
// Prevent double borders when buttons are next to each other
4040
> :not(.btn-check:first-child) + .btn,
4141
> .btn-group:not(:first-child) {
42-
@include ltr-rtl("margin-left", -$btn-border-width);
42+
margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
4343
}
4444

4545
// Reset rounded corners
@@ -79,11 +79,11 @@
7979
&::after,
8080
.dropup &::after,
8181
.dropend &::after {
82-
@include ltr-rtl("margin-left", 0);
82+
margin-left: 0;
8383
}
8484

8585
.dropstart &::before {
86-
@include ltr-rtl("margin-right", 0);
86+
margin-right: 0;
8787
}
8888
}
8989

@@ -126,7 +126,7 @@
126126

127127
> .btn:not(:first-child),
128128
> .btn-group:not(:first-child) {
129-
margin-top: -$btn-border-width;
129+
margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
130130
}
131131

132132
// Reset rounded corners

‎scss/_buttons.scss‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
1111
--#{$prefix}btn-font-weight: #{$btn-font-weight};
1212
--#{$prefix}btn-line-height: #{$btn-line-height};
13-
--#{$prefix}btn-color: #{$body-color};
13+
--#{$prefix}btn-color: #{$btn-color};
1414
--#{$prefix}btn-bg: transparent;
1515
--#{$prefix}btn-border-width: #{$btn-border-width};
1616
--#{$prefix}btn-border-color: transparent;
@@ -192,3 +192,25 @@
192192
.btn-sm {
193193
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
194194
}
195+
196+
@if $enable-dark-mode {
197+
@include color-mode(dark) {
198+
@each $state, $variant in $button-variants-dark {
199+
.btn-#{$state} {
200+
@include button-variant($variant);
201+
}
202+
}
203+
204+
@each $state, $variant in $button-outline-ghost-variants-dark {
205+
.btn-outline-#{$state} {
206+
@include button-outline-variant($variant);
207+
}
208+
}
209+
210+
@each $state, $variant in $button-outline-ghost-variants-dark {
211+
.btn-ghost-#{$state} {
212+
@include button-ghost-variant($variant);
213+
}
214+
}
215+
}
216+
}

‎scss/_card.scss‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
--#{$prefix}card-spacer-y: #{$card-spacer-y};
88
--#{$prefix}card-spacer-x: #{$card-spacer-x};
99
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
10+
--#{$prefix}card-title-color: #{$card-title-color};
11+
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
1012
--#{$prefix}card-border-width: #{$card-border-width};
1113
--#{$prefix}card-border-color: #{$card-border-color};
1214
--#{$prefix}card-border-radius: #{$card-border-radius};
@@ -28,6 +30,7 @@
2830
flex-direction: column;
2931
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
3032
height: var(--#{$prefix}card-height);
33+
color: var(--#{$prefix}body-color);
3134
word-wrap: break-word;
3235
background-color: var(--#{$prefix}card-bg);
3336
background-clip: border-box;
@@ -73,11 +76,13 @@
7376

7477
.card-title {
7578
margin-bottom: var(--#{$prefix}card-title-spacer-y);
79+
color: var(--#{$prefix}card-title-color);
7680
}
7781

7882
.card-subtitle {
7983
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
8084
margin-bottom: 0;
85+
color: var(--#{$prefix}card-subtitle-color);
8186
}
8287

8388
.card-text:last-child {
@@ -90,7 +95,7 @@
9095
}
9196

9297
+ .card-link {
93-
@include ltr-rtl("margin-left", var(--#{$prefix}card-spacer-x));
98+
margin-left: var(--#{$prefix}card-spacer-x);
9499
}
95100
}
96101

@@ -193,8 +198,8 @@
193198
margin-bottom: 0;
194199

195200
+ .card {
196-
@include ltr-rtl("margin-left", 0);
197-
@include ltr-rtl("border-left", 0);
201+
margin-left: 0;
202+
border-left: 0;
198203
}
199204

200205
// Handle rounded corners

‎scss/_carousel.scss‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
justify-content: center; // 3. horizontally center contents
9797
width: $carousel-control-width;
9898
padding: 0;
99-
color: var(--#{$prefix}carousel-control-color, $carousel-control-color);
99+
color: $carousel-control-color;
100100
text-align: center;
101101
background: none;
102102
border: 0;
@@ -106,7 +106,7 @@
106106
// Hover/focus state
107107
&:hover,
108108
&:focus {
109-
color: var(--#{$prefix}carousel-control-color, $carousel-control-color);
109+
color: $carousel-control-color;
110110
text-decoration: none;
111111
outline: 0;
112112
opacity: $carousel-control-hover-opacity;
@@ -165,7 +165,6 @@
165165
margin-right: $carousel-control-width;
166166
margin-bottom: 1rem;
167167
margin-left: $carousel-control-width;
168-
list-style: none;
169168

170169
[data-coreui-target] {
171170
box-sizing: content-box;
@@ -177,7 +176,7 @@
177176
margin-left: $carousel-indicator-spacer;
178177
text-indent: -999px;
179178
cursor: pointer;
180-
background-color: var(--#{$prefix}carousel-indicator-active-bg, $carousel-indicator-active-bg);
179+
background-color: $carousel-indicator-active-bg;
181180
background-clip: padding-box;
182181
border: 0;
183182
// Use transparent borders to increase the hit area by 10px on top and bottom.
@@ -204,15 +203,13 @@
204203
left: (100% - $carousel-caption-width) * .5;
205204
padding-top: $carousel-caption-padding-y;
206205
padding-bottom: $carousel-caption-padding-y;
207-
color: var(--#{$prefix}carousel-caption-color, $carousel-caption-color);
206+
color: $carousel-caption-color;
208207
text-align: center;
209208
}
210209

211210
// Dark mode carousel
212211

213-
.carousel-dark {
214-
--#{$prefix}carousel-indicator-active-bg: #{$carousel-dark-indicator-active-bg};
215-
--#{$prefix}carousel-caption-color: #{$carousel-dark-caption-color};
212+
@mixin carousel-dark() {
216213
.carousel-control-prev-icon,
217214
.carousel-control-next-icon {
218215
filter: $carousel-dark-control-icon-filter;
@@ -226,3 +223,22 @@
226223
color: $carousel-dark-caption-color;
227224
}
228225
}
226+
227+
.carousel-dark {
228+
@include carousel-dark();
229+
}
230+
231+
@if $enable-dark-mode {
232+
@include color-mode(dark) {
233+
@if $color-mode-type == "media-query" {
234+
.carousel {
235+
@include carousel-dark();
236+
}
237+
} @else {
238+
.carousel,
239+
&.carousel {
240+
@include carousel-dark();
241+
}
242+
}
243+
}
244+
}

‎scss/_close.scss‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,60 @@
44
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
55

66
.btn-close {
7+
// scss-docs-start close-css-vars
8+
--#{$prefix}btn-close-color: #{$btn-close-color};
9+
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
10+
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
11+
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
12+
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
13+
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
14+
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
15+
--#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
16+
// scss-docs-end close-css-vars
17+
718
box-sizing: content-box;
819
width: $btn-close-width;
920
height: $btn-close-height;
1021
padding: $btn-close-padding-y $btn-close-padding-x;
11-
color: var(--#{$prefix}btn-close-color, $btn-close-color);
12-
background: transparent var(--#{$prefix}btn-close-bg, escape-svg($btn-close-bg)) center / $btn-close-width auto no-repeat; // include transparent for button elements
22+
color: var(--#{$prefix}btn-close-color);
23+
background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
1324
border: 0; // for button elements
1425
@include border-radius();
15-
opacity: $btn-close-opacity;
26+
opacity: var(--#{$prefix}btn-close-opacity);
1627

1728
// Override <a>'s hover style
1829
&:hover {
19-
color: var(--#{$prefix}btn-close-color, $btn-close-color);
30+
color: var(--#{$prefix}btn-close-color);
2031
text-decoration: none;
21-
opacity: $btn-close-hover-opacity;
32+
opacity: var(--#{$prefix}btn-close-hover-opacity);
2233
}
2334

2435
&:focus {
2536
outline: 0;
26-
box-shadow: $btn-close-focus-shadow;
27-
opacity: $btn-close-focus-opacity;
37+
box-shadow: var(--#{$prefix}btn-close-focus-shadow);
38+
opacity: var(--#{$prefix}btn-close-focus-opacity);
2839
}
2940

3041
&:disabled,
3142
&.disabled {
3243
pointer-events: none;
3344
user-select: none;
34-
opacity: $btn-close-disabled-opacity;
45+
opacity: var(--#{$prefix}btn-close-disabled-opacity);
3546
}
3647
}
3748

49+
@mixin btn-close-white() {
50+
filter: var(--#{$prefix}btn-close-white-filter);
51+
}
52+
3853
.btn-close-white {
39-
filter: $btn-close-white-filter;
54+
@include btn-close-white();
55+
}
56+
57+
@if $enable-dark-mode {
58+
@include color-mode(dark) {
59+
.btn-close {
60+
@include btn-close-white();
61+
}
62+
}
4063
}

‎scss/_dropdown.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
9191

9292
.dropdown-menu#{$infix}-start {
93-
--#{$prefix}position: start;
93+
--cui-position: start;
9494

9595
&[data-coreui-popper] {
9696
right: auto;
@@ -99,7 +99,7 @@
9999
}
100100

101101
.dropdown-menu#{$infix}-end {
102-
--#{$prefix}position: end;
102+
--cui-position: end;
103103

104104
&[data-coreui-popper] {
105105
right: 0;
@@ -145,7 +145,6 @@
145145
.dropstart {
146146
.dropdown-menu[data-coreui-popper] {
147147
top: 0;
148-
149148
@include ltr-rtl("right", 100%);
150149
@include ltr-rtl("left", auto);
151150
margin-top: 0;
@@ -185,6 +184,7 @@
185184
white-space: nowrap; // prevent links from randomly breaking onto new lines
186185
background-color: transparent; // For `<button>`s
187186
border: 0; // For `<button>`s
187+
@include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
188188

189189
&:hover,
190190
&:focus {

0 commit comments

Comments
 (0)