Skip to content

Commit 014847c

Browse files
mrholekmrholek
committed
refactor: update dark theme
1 parent 2ed9190 commit 014847c

File tree

4 files changed

+93
-26
lines changed

4 files changed

+93
-26
lines changed

‎scss/mixins/_theme.scss

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
@mixin theme-variants($map, $state, $component) {
2-
@each $name, $value in $map {
3-
@if $value != null {
4-
--#{$variable-prefix}#{$component}-#{$state}-#{$name}: #{$value};
2+
$selector: &;
3+
$selector-with-prefix: selector-replace($selector, ".#{$component}", ".#{$theme-prefix}\\:#{$component}");
4+
@at-root #{$selector-with-prefix}-#{$state}, &-#{$state}:not([class*="#{$theme-prefix}:"]) {
5+
@each $name, $value in $map {
6+
@if $value != null {
7+
// TODO: find solution
8+
@if $name == "border" {
9+
$name: "border-color";
10+
}
11+
12+
--#{$variable-prefix}#{$component}-#{$name}: #{$value};
13+
}
514
}
615
}
716
}
@@ -36,8 +45,7 @@
3645
}
3746
}
3847
@else {
39-
.#{$name},
40-
&.#{$name} {
48+
.#{$name} {
4149
@include theme-components($value, $name);
4250
}
4351
}

‎scss/themes/dark.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
@import "./../functions";
22
@import "./../mixins";
33
@import "./../variables";
4+
@import "./../utilities";
45

6+
$theme-name: "dark-theme" !default;
7+
$theme-prefix: "dark" !default;
58

6-
.dark-theme {
9+
.#{$theme-name} {
710
@import "dark/variables";
11+
@import "dark/utilities";
812

913
// Colors
1014
@each $color, $value in $theme-colors-dt {
@@ -18,4 +22,7 @@
1822
}
1923

2024
@include theme($theme-map);
25+
26+
// Utilities
27+
@import "./../utilities/api";
2128
}

‎scss/themes/dark/_utilities.scss

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Utilities
2+
// stylelint-disable-next-line scss/dollar-variable-default
3+
$utilities: ();
4+
// stylelint-disable-next-line scss/dollar-variable-default
5+
$utilities: map-merge(
6+
(
7+
"background-color": (
8+
property: background-color,
9+
prefix: "dark\\:",
10+
class: bg,
11+
values: map-merge(
12+
$theme-colors,
13+
(
14+
"body": $body-bg,
15+
"white": $white,
16+
"transparent": transparent
17+
)
18+
),
19+
vars: true
20+
),
21+
"background-color-exclude": (
22+
property: background-color,
23+
class: bg,
24+
postfix: ":not([class*='dark:'])",
25+
values: map-merge(
26+
$theme-colors,
27+
(
28+
"body": $body-bg,
29+
"white": $white,
30+
"transparent": transparent
31+
)
32+
),
33+
vars: true
34+
),
35+
),
36+
$utilities
37+
);
38+

‎scss/themes/dark/_variables.scss

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ $success-dt: desaturate($success, 20%) !default;
2121
$info-dt: desaturate($info, 20%) !default;
2222
$warning-dt: desaturate($warning, 20%) !default;
2323
$danger-dt: desaturate($danger, 20%) !default;
24+
$light-dt: rgba($white, .1) !default;
25+
$dark-dt: rgba($black, .1) !default;
2426

2527
// fusv-disable
2628
$theme-colors-dt: (
@@ -30,6 +32,8 @@ $theme-colors-dt: (
3032
"info": $info-dt,
3133
"warning": $warning-dt,
3234
"danger": $danger-dt,
35+
"light": $light-dt,
36+
"dark": $dark-dt
3337
) !default;
3438
// fusv-enable
3539

@@ -422,29 +426,38 @@ $modal-theme-map: (
422426

423427
// Navs
424428

425-
$nav-link-color-dt: null !default;
426-
$nav-link-disabled-color-dt: $disabled-dt !default;
427-
$nav-link-hover-color-dt: null !default;
428-
$nav-pills-link-active-bg-dt: $component-active-bg-dt !default;
429-
$nav-pills-link-active-color-dt: $component-active-color-dt !default;
430-
$nav-tabs-border-color-dt: $border-color-dt !default;
431-
$nav-tabs-link-active-bg-dt: $border-color-dt !default;
432-
$nav-tabs-link-active-color-dt: $body-color-dt !default;
433-
$nav-tabs-link-active-border-color-dt: transparent !default;
434-
$nav-tabs-link-hover-border-color-dt: $border-color-dt $border-color-dt $border-color-dt !default;
429+
$nav-link-color-dt: null !default;
430+
$nav-link-disabled-color-dt: $disabled-dt !default;
431+
$nav-link-hover-color-dt: null !default;
432+
$nav-pills-link-active-bg-dt: $component-active-bg-dt !default;
433+
$nav-pills-link-active-color-dt: $component-active-color-dt !default;
434+
$nav-tabs-border-color-dt: $border-color-dt !default;
435+
$nav-tabs-link-active-bg-dt: $border-color-dt !default;
436+
$nav-tabs-link-active-color-dt: $body-color-dt !default;
437+
$nav-tabs-link-active-border-color-dt: transparent !default;
438+
$nav-tabs-link-hover-border-color-dt: $border-color-dt $border-color-dt $border-color-dt !default;
439+
440+
$nav-underline-border-color-dt: $border-color-dt !default;
441+
$nav-underline-link-color-dt: $medium-emphasis-dt !default;
442+
$nav-underline-link-active-color-dt: $component-active-bg-dt !default;
443+
$nav-underline-link-active-border-color-dt: $component-active-bg-dt !default;
435444

436445

437446
$nav-theme-map: (
438-
"nav-link-color": $nav-link-color-dt,
439-
"nav-link-disabled-color": $nav-link-disabled-color-dt,
440-
"nav-link-hover-color": $nav-link-hover-color-dt,
441-
"nav-pills-link-active-bg": $nav-pills-link-active-bg-dt,
442-
"nav-pills-link-active-color": $nav-pills-link-active-color-dt,
443-
"nav-tabs-border-color": $nav-tabs-border-color-dt,
444-
"nav-tabs-link-active-bg": $nav-tabs-link-active-bg-dt,
445-
"nav-tabs-link-active-color": $nav-tabs-link-active-color-dt,
446-
"nav-tabs-link-active-border-color": $nav-tabs-link-active-border-color-dt,
447-
"nav-tabs-link-hover-border-color": $nav-tabs-link-hover-border-color-dt
447+
"nav-link-color": $nav-link-color-dt,
448+
"nav-link-disabled-color": $nav-link-disabled-color-dt,
449+
"nav-link-hover-color": $nav-link-hover-color-dt,
450+
"nav-pills-link-active-bg": $nav-pills-link-active-bg-dt,
451+
"nav-pills-link-active-color": $nav-pills-link-active-color-dt,
452+
"nav-tabs-border-color": $nav-tabs-border-color-dt,
453+
"nav-tabs-link-active-bg": $nav-tabs-link-active-bg-dt,
454+
"nav-tabs-link-active-color": $nav-tabs-link-active-color-dt,
455+
"nav-tabs-link-active-border-color": $nav-tabs-link-active-border-color-dt,
456+
"nav-tabs-link-hover-border-color": $nav-tabs-link-hover-border-color-dt,
457+
"nav-underline-border-color": $nav-underline-border-color-dt,
458+
"nav-underline-link-color": $nav-underline-link-color-dt,
459+
"nav-underline-link-active-color": $nav-underline-link-active-color-dt,
460+
"nav-underline-link-active-border-color": $nav-underline-link-active-border-color-dt
448461
) !default;
449462

450463
// Pagination
@@ -612,6 +625,7 @@ $theme-map: (
612625
"alert": $alert-theme-variants-dt,
613626
"breadcrumb": $breadcrumb-theme-map,
614627
"btn": $button-theme-variants-dt,
628+
"btn-outline": $button-theme-variants-dt,
615629
"btn-close": $close-theme-map,
616630
"card": $card-theme-map,
617631
"dropdown": $dropdown-theme-map,

0 commit comments

Comments
 (0)