Skip to content

Commit 34a744a

Browse files
mrholekmrholek
committed
refactor: improvement in dark theme
1 parent a0490e9 commit 34a744a

File tree

4 files changed

+85
-13
lines changed

4 files changed

+85
-13
lines changed

‎scss/_variables.scss

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -366,16 +366,16 @@ $elevation-base-color: 60, 75, 100 !default; //#3c4b64
366366

367367
$elevations: (
368368
0: unquote("none"),
369-
1: unquote("0 1px 1px 0 rgba(var(--elevation-base-color, #{$elevation-base-color}), .14), 0 2px 1px -1px rgba(var(--elevation-base-color, #{$elevation-base-color}), .12), 0 1px 3px 0 rgba(var(--elevation-base-color, #{$elevation-base-color}), .20)"),
370-
2: unquote("0 2px 2px 0 rgba(var(--elevation-base-color, #{$elevation-base-color}), .14), 0 3px 1px -2px rgba(var(--elevation-base-color, #{$elevation-base-color}), .12), 0 1px 5px 0 rgba(var(--elevation-base-color, #{$elevation-base-color}), .20)"),
371-
3: unquote("0 3px 4px 0 rgba(var(--elevation-base-color, #{$elevation-base-color}), .14), 0 3px 3px -2px rgba(var(--elevation-base-color, #{$elevation-base-color}), .12), 0 1px 8px 0 rgba(var(--elevation-base-color, #{$elevation-base-color}), .20)"),
372-
4: unquote("0 4px 5px 0 rgba(var(--elevation-base-color, #{$elevation-base-color}), .14), 0 1px 10px 0 rgba(var(--elevation-base-color, #{$elevation-base-color}), .12), 0 2px 4px -1px rgba(var(--elevation-base-color, #{$elevation-base-color}), .20)"),
373-
6: unquote("0 6px 10px 0 rgba(var(--elevation-base-color, #{$elevation-base-color}), .14), 0 1px 18px 0 rgba(var(--elevation-base-color, #{$elevation-base-color}), .12), 0 3px 5px -1px rgba(var(--elevation-base-color, #{$elevation-base-color}), .20)"),
374-
8: unquote("0 8px 10px 1px rgba(var(--elevation-base-color, #{$elevation-base-color}), .14), 0 3px 14px 2px rgba(var(--elevation-base-color, #{$elevation-base-color}), .12), 0 5px 5px -3px rgba(var(--elevation-base-color, #{$elevation-base-color}), .20)"),
375-
9: unquote("0 9px 12px 1px rgba(var(--elevation-base-color, #{$elevation-base-color}), .14), 0 3px 16px 2px rgba(var(--elevation-base-color, #{$elevation-base-color}), .12), 0 5px 6px -3px rgba(var(--elevation-base-color, #{$elevation-base-color}), .20)"),
376-
12: unquote("0 12px 17px 2px rgba(var(--elevation-base-color, #{$elevation-base-color}), .14), 0 5px 22px 4px rgba(var(--elevation-base-color, #{$elevation-base-color}), .12), 0 7px 8px -4px rgba(var(--elevation-base-color, #{$elevation-base-color}), .20)"),
377-
16: unquote("0 16px 24px 2px rgba(var(--elevation-base-color, #{$elevation-base-color}), .14), 0 6px 30px 5px rgba(var(--elevation-base-color, #{$elevation-base-color}), .12), 0 8px 10px -5px rgba(var(--elevation-base-color, #{$elevation-base-color}), .20)"),
378-
24: unquote("0 24px 38px 3px rgba(var(--elevation-base-color, #{$elevation-base-color}), .14), 0 9px 46px 8px rgba(var(--elevation-base-color, #{$elevation-base-color}), .12), 0 11px 15px -7px rgba(var(--elevation-base-color, #{$elevation-base-color}), .20)")
369+
1: unquote("0 1px 1px 0 rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 2px 1px -1px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 1px 3px 0 rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
370+
2: unquote("0 2px 2px 0 rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 3px 1px -2px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 1px 5px 0 rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
371+
3: unquote("0 3px 4px 0 rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 3px 3px -2px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 1px 8px 0 rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
372+
4: unquote("0 4px 5px 0 rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 1px 10px 0 rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 2px 4px -1px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
373+
6: unquote("0 6px 10px 0 rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 1px 18px 0 rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 3px 5px -1px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
374+
8: unquote("0 8px 10px 1px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 3px 14px 2px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 5px 5px -3px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
375+
9: unquote("0 9px 12px 1px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 3px 16px 2px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 5px 6px -3px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
376+
12: unquote("0 12px 17px 2px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 5px 22px 4px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 7px 8px -4px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
377+
16: unquote("0 16px 24px 2px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 6px 30px 5px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 8px 10px -5px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .20)"),
378+
24: unquote("0 24px 38px 3px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .14), 0 9px 46px 8px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .12), 0 11px 15px -7px rgba(var(--#{$variable-prefix}elevation-base-color, #{$elevation-base-color}), .20)")
379379
) !default;
380380

381381

‎scss/mixins/_gradients.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,5 @@
4444

4545
@mixin gradient($color, $value) {
4646
background-color: var(--#{$variable-prefix}#{$color}, map-get($value, "stop"));
47-
background-image: var(--#{$variable-prefix}#{$color}-gradient, linear-gradient(45deg, map-get($value, "start") 0%, map-get($value, "stop") 100%));
47+
background-image: linear-gradient(45deg, var(--#{$variable-prefix}#{$color}-start, map-get($value, "start")) 0%, var(--#{$variable-prefix}#{$color}-stop, map-get($value, "stop") 100%));
4848
}

‎scss/themes/dark.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,20 @@
22
@import "./../mixins";
33
@import "./../variables";
44

5+
56
.dark-theme {
67
@import "dark/variables";
8+
9+
// Colors
10+
@each $color, $value in $theme-colors-dt {
11+
--#{$variable-prefix}#{$color}: #{$value};
12+
}
13+
14+
// Gradients
15+
@each $color, $map in $theme-gradients-dt {
16+
--#{$variable-prefix}#{$color}-start: #{map-get($map, "start")};
17+
--#{$variable-prefix}#{$color}-stop: #{map-get($map, "stop")};
18+
}
19+
720
@include theme($theme-map);
821
}

‎scss/themes/dark/_variables.scss

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,61 @@ $theme-colors-dt: (
3333
) !default;
3434
// fusv-enable
3535

36+
// Gradients
37+
38+
// scss-docs-start theme-gradients
39+
$primary-gradient-dt: (
40+
"start": desaturate(#321fdb, 20%),
41+
"stop": desaturate(#1f1498, 20%)
42+
) !default;
43+
44+
$secondary-gradient-dt: (
45+
"start": desaturate(#c8d2dc, 20%),
46+
"stop": desaturate($white, 20%)
47+
) !default;
48+
49+
$light-gradient-dt: (
50+
"start": desaturate(#e3e8ed, 20%),
51+
"stop": desaturate($white, 20%)
52+
) !default;
53+
54+
$dark-gradient-dt: (
55+
"start": desaturate(#3c4b64, 20%),
56+
"stop": desaturate(#212333, 20%)
57+
) !default;
58+
59+
$danger-gradient-dt: (
60+
"start": desaturate(#e55353, 20%),
61+
"stop": desaturate(#d93737, 20%)
62+
) !default;
63+
64+
$warning-gradient-dt: (
65+
"start": desaturate(#f9b115, 20%),
66+
"stop": desaturate(#f6960b, 20%)
67+
) !default;
68+
69+
$success-gradient-dt: (
70+
"start": desaturate(#2eb85c, 20%),
71+
"stop": desaturate(#1b9e3e, 20%)
72+
) !default;
73+
74+
$info-gradient-dt: (
75+
"start": desaturate(#39f, 20%),
76+
"stop": desaturate(#2982cc, 20%)
77+
) !default;
78+
79+
$theme-gradients-dt: (
80+
"primary": $primary-gradient-dt,
81+
"secondary": $secondary-gradient-dt,
82+
"success": $success-gradient-dt,
83+
"info": $info-gradient-dt,
84+
"warning": $warning-gradient-dt,
85+
"danger": $danger-gradient-dt,
86+
"light": $light-gradient-dt,
87+
"dark": $dark-gradient-dt
88+
) !default;
89+
// scss-docs-end theme-gradients
90+
3691
$high-emphasis-dt: rgba($white, .87) !default;
3792
$medium-emphasis-dt: rgba($white, .6) !default;
3893
$disabled-dt: rgba($white, .38) !default;
@@ -43,10 +98,12 @@ $disabled-dt: rgba($white, .38) !default;
4398

4499
$body-bg-dt: $bg-elevation-0 !default;
45100
$body-color-dt: $high-emphasis-dt !default;
101+
$elevation-base-color-dt: 0, 0, 0 !default;
46102

47103
$theme-body-dt: (
48104
"body-bg": $body-bg-dt,
49-
"body-color": $body-color-dt
105+
"body-color": $body-color-dt,
106+
"elevation-base-color": $elevation-base-color-dt
50107
) !default;
51108

52109
// Components
@@ -235,6 +292,7 @@ $header-brand-hover-color-dt: $header-active-color-dt !default;
235292
$header-toggler-icon-bg-dt: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-color-dt}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
236293
$header-toggler-hover-icon-bg-dt: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-hover-color-dt}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
237294
$header-toggler-border-color-dt: rgba($white, .1) !default;
295+
$header-divider-border-color-dt: rgba($white, .1) !default;
238296

239297
$header-theme-map: (
240298
"header-bg": $header-bg-dt,
@@ -247,7 +305,8 @@ $header-theme-map: (
247305
"header-brand-hover-color": $header-brand-hover-color-dt,
248306
"header-toggler-icon-bg": $header-toggler-icon-bg-dt,
249307
"header-toggler-hover-icon-bg": $header-toggler-hover-icon-bg-dt,
250-
"header-toggler-border-color": $header-toggler-border-color-dt
308+
"header-toggler-border-color": $header-toggler-border-color-dt,
309+
"header-divider-border-color": $header-divider-border-color-dt
251310
) !default;
252311

253312
// Links

0 commit comments

Comments
 (0)