Skip to content

Commit a529c0b

Browse files
ncpa0cplncpa0cpl
committed
feat: updated the theme colors pallete
1 parent 756c946 commit a529c0b

16 files changed

+154
-153
lines changed

‎docs/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
A theme must be provided to a container that houses all of the elements.
2828

29-
Three themes are available: `dark-theme`, `light-theme` and `light-theme-2`.
29+
Themes available: `dark-theme`, `light-theme`.
3030

3131
### Example
3232

‎docs/components/box.md

+16-9
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,19 @@ Box is a simple container element. By default comes with a flex display type.
1212

1313
## Levels
1414

15-
Box elements can have levels between 1-4 (default: 1), each level has a brighter of darker background color (depending on the theme.)
15+
Box elements can have levels between 1-5 (default: 2), each level has a brighter of darker background color (depending on the theme.)
1616

1717
```html
1818
'
19-
<div class="box">
20-
<div class="box bg-level-2">
21-
<div class="box bg-level-3">
22-
<div class="box bg-level-4">
23-
<!-- content -->
19+
<div class="box bg-1">
20+
<div class="box bg-2">
21+
<div class="box bg-3">
22+
<div class="box bg-4">
23+
<div class="box bg-5">
24+
<div class="box bg-6">
25+
<!-- content -->
26+
</div>
27+
</div>
2428
</div>
2529
</div>
2630
</div>
@@ -30,7 +34,10 @@ Box elements can have levels between 1-4 (default: 1), each level has a brighter
3034
# Class Names
3135

3236
- `box` - a container element with a flex display type
33-
- `bg-level-2` - a class that changes the background color of the box to a darker or lighter shade
34-
- `bg-level-3` - a class that changes the background color of the box to a darker or lighter shade
35-
- `bg-level-4` - a class that changes the background color of the box to a darker or lighter shade
37+
- `bg-1` - a class that changes the background color of the box to a darker or lighter shade
38+
- `bg-2` - a class that changes the background color of the box to a darker or lighter shade
39+
- `bg-3` - a class that changes the background color of the box to a darker or lighter shade
40+
- `bg-4` - a class that changes the background color of the box to a darker or lighter shade
41+
- `bg-5` - a class that changes the background color of the box to a darker or lighter shade
42+
- `bg-6` - a class that changes the background color of the box to a darker or lighter shade
3643
- `rounded` - a class that adds a border radius to the box

‎src/components/alert.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.alert {
22
padding: 1.5em 1.5em;
3-
background-color: color("bg2");
3+
background-color: color("bg3");
44
border-radius: size("bradius");
55
color: color("text");
66
font-family: "Ubuntu", sans-serif;

‎src/components/box.scss

+16-4
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
11
.box {
22
@include scrollbar;
33
display: flex;
4-
background-color: color("bg1");
4+
background-color: color("bg2");
55

66
&.rounded {
77
border-radius: size("bradius");
88
}
99

10-
&.bg-level-2 {
10+
&.bg-1 {
11+
background-color: color("bg1");
12+
}
13+
14+
&.bg-2 {
1115
background-color: color("bg2");
1216
}
1317

14-
&.bg-level-3 {
18+
&.bg-3 {
1519
background-color: color("bg3");
1620
}
1721

18-
&.bg-level-4 {
22+
&.bg-4 {
1923
background-color: color("bg4");
2024
}
25+
26+
&.bg-5 {
27+
background-color: color("bg5");
28+
}
29+
30+
&.bg-6 {
31+
background-color: color("bg6");
32+
}
2133
}

‎src/components/breadcrumbs.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
display: flex;
33
flex-direction: row;
44
padding: 0.15em 0.15em;
5-
background-color: color("bg3");
5+
background-color: color("bg5");
66
border-radius: 4px;
77
align-items: center;
88

‎src/components/card.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
.card {
2+
@include box-shadow(8px, -4px);
23
border-radius: size("bradius");
3-
background-color: color("bg2");
4+
background-color: color("bg4");
45
padding: 0.85em 1.15em;
56

67
&.activable {
78
@include bg-transition();
89
&:hover {
9-
background-color: color-mix(in srgb, color("bg2") 82%, rgb(128, 128, 128));
10+
background-color: color-mix(in srgb, color("bg4") 90%, rgb(128, 128, 128));
1011
}
1112
}
1213
}

‎src/components/list.scss

+25-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
.list {
22
@include scrollbar;
3+
@include box-shadow(8px, -4px);
34
$listBorderRadius: size("bradius");
4-
$listSeparatorColor: transparent;
5-
$bgColor: color("list-elem");
6-
5+
$listSeparatorColor: color("list-elem-border");
6+
$listSeparatorColor2: color("list-elem-border-2");
77
border-radius: $listBorderRadius;
88

99
.list-element {
1010
@include bg-transition(0.1s);
11-
background-color: $bgColor;
11+
background-color: color("list-elem");
1212
background-clip: padding-box;
1313
padding: 1em 1.15em;
1414

@@ -36,4 +36,24 @@
3636
}
3737
}
3838
}
39-
}
39+
40+
&.bg-2 {
41+
& .list-element {
42+
background-color: color("list-elem-2");
43+
44+
&:not(:first-child) {
45+
border-top: 1px solid $listSeparatorColor2;
46+
}
47+
48+
&:not(:last-child) {
49+
border-bottom: 1px solid $listSeparatorColor2;
50+
}
51+
52+
&.activable {
53+
&:hover {
54+
background-color: color("list-elem-hover-2");
55+
}
56+
}
57+
}
58+
}
59+
}

‎src/components/nav-sidebar.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@
1616
font-family: "Ubuntu", sans-serif;
1717

1818
&.active {
19-
background-color: rgba(128, 128, 128, 0.3);
19+
background-color: rgba(128, 128, 128, 0.25);
2020
}
2121

2222
&:hover {
23-
background-color: rgba(128, 128, 128, 0.25);
23+
background-color: rgba(128, 128, 128, 0.2);
2424
}
2525

2626
&:active {
27-
background-color: rgba(128, 128, 128, 0.4);
27+
background-color: rgba(128, 128, 128, 0.3);
2828
}
2929

3030
&:focus-visible {

‎src/components/selector.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ $elementHeight: 1.8em;
123123
}
124124

125125
&:focus-visible {
126-
background-color: color("bg4");
126+
background-color: color("bg6");
127127
}
128128
}
129129
}

‎src/components/slider.scss

+6-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ $noPositionClassName: ".no-position";
1313
.slider-progress {
1414
background-color: color-mix(in srgb, color("btn") 65%, #dfdfdf);
1515
}
16+
17+
.slider-thumb {
18+
background-color: nativeDarken(color("slider-thumb"), 20%);
19+
}
1620
}
1721

1822
&:not(#{$noPositionClassName}) {
@@ -52,10 +56,11 @@ $noPositionClassName: ".no-position";
5256
}
5357

5458
.slider-thumb {
59+
@include box-shadow(1.5px, 1.5px);
5560
height: 0.75em;
5661
width: 0.75em;
5762
border-radius: 18px;
58-
background-color: color-mix(in srgb, color("btn") 50%, #888888);
63+
background-color: color("slider-thumb");
5964

6065
&:not(#{$noPositionClassName}) {
6166
position: absolute;

‎src/components/switch.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ $swBtnMargin: 0.15em;
66
cursor: pointer;
77
user-select: none;
88
border-radius: 18px;
9-
background-color: color("bg4");
9+
background-color: color("bg6");
1010
height: $swBtnDim;
1111
width: $swBtnDim * 2;
1212

@@ -25,11 +25,11 @@ $swBtnMargin: 0.15em;
2525
&.disabled {
2626
cursor: not-allowed;
2727
&.active {
28-
background-color: color-mix(in srgb, color("bg4") 60%, rgb(128, 128, 128));
28+
background-color: color-mix(in srgb, color("bg6") 60%, rgb(128, 128, 128));
2929
}
3030

3131
.switch-knob {
32-
background-color: color-mix(in srgb, color("bg2") 50%, rgb(217, 217, 217));
32+
background-color: color-mix(in srgb, color("bg3") 50%, rgb(217, 217, 217));
3333
}
3434
}
3535

‎src/index.ts

+33-13
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
export class Theme {
22
static readonly dark = "dark-theme";
33
static readonly light = "light-theme";
4-
static readonly light2 = "light-theme-2";
54

6-
static className(params: { type?: "dark" | "light" | "light2" }) {
5+
static className(params: { type?: "dark" | "light" }) {
76
switch (params.type) {
87
case "light":
98
return Theme.light;
10-
case "light2":
11-
return Theme.light2;
129
}
1310
return Theme.dark;
1411
}
@@ -29,31 +26,52 @@ export class Box {
2926
/**
3027
* Read more at @link https://github.com/ncpa0/ADWaveCSS/blob/master/docs/components/box.md#ClassNames
3128
*/
32-
static readonly bg2 = "bg-level-2";
29+
static readonly bg1 = "bg-1";
3330
/**
3431
* Read more at @link https://github.com/ncpa0/ADWaveCSS/blob/master/docs/components/box.md#ClassNames
3532
*/
36-
static readonly bg3 = "bg-level-3";
33+
static readonly bg2 = "bg-2";
3734
/**
3835
* Read more at @link https://github.com/ncpa0/ADWaveCSS/blob/master/docs/components/box.md#ClassNames
3936
*/
40-
static readonly bg4 = "bg-level-4";
37+
static readonly bg3 = "bg-3";
38+
/**
39+
* Read more at @link https://github.com/ncpa0/ADWaveCSS/blob/master/docs/components/box.md#ClassNames
40+
*/
41+
static readonly bg4 = "bg-4";
42+
/**
43+
* Read more at @link https://github.com/ncpa0/ADWaveCSS/blob/master/docs/components/box.md#ClassNames
44+
*/
45+
static readonly bg5 = "bg-5";
46+
/**
47+
* Read more at @link https://github.com/ncpa0/ADWaveCSS/blob/master/docs/components/box.md#ClassNames
48+
*/
49+
static readonly bg6 = "bg-6";
4150

42-
static className(params: { rounded?: boolean; bg?: 1 | 2 | 3 | 4 }) {
51+
static className(params: { rounded?: boolean; bg?: 1 | 2 | 3 | 4 | 5 | 6 }) {
4352
let className = Box.box;
4453
if (params.rounded) {
4554
className += ` ${Box.rounded}`;
4655
}
4756
if (params.bg) {
4857
switch (params.bg) {
49-
case 4:
50-
className += ` ${Box.bg4}`;
58+
case 1:
59+
className += ` ${Box.bg1}`;
60+
break;
61+
case 2:
62+
className += ` ${Box.bg2}`;
5163
break;
5264
case 3:
5365
className += ` ${Box.bg3}`;
5466
break;
55-
case 2:
56-
className += ` ${Box.bg2}`;
67+
case 4:
68+
className += ` ${Box.bg4}`;
69+
break;
70+
case 5:
71+
className += ` ${Box.bg5}`;
72+
break;
73+
case 6:
74+
className += ` ${Box.bg6}`;
5775
break;
5876
}
5977
}
@@ -661,7 +679,9 @@ export class Alert {
661679
static readonly warning = "warning";
662680
static readonly error = "error";
663681

664-
static className(params: { type?: "info" | "success" | "warning" | "error" }) {
682+
static className(params: {
683+
type?: "info" | "success" | "warning" | "error";
684+
}) {
665685
switch (params.type) {
666686
case "info":
667687
return `${Alert.alert} ${Alert.info}`;

‎src/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import "variables";
44
@import "mixins/scrollbar";
55
@import "mixins/bg-transition";
6+
@import "mixins/box-shadow";
67
@import "components/alert";
78
@import "components/box";
89
@import "components/breadcrumbs";

‎src/mixins/box-shadow.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@mixin box-shadow($blur: 0px, $spread: 0px, $h: 0px, $v: 0px, $color: rgba(134, 134, 134, 1)) {
2+
-webkit-box-shadow: $h $v $blur $spread $color;
3+
-moz-box-shadow: $h $v $blur $spread $color;
4+
box-shadow: $h $v $blur $spread $color;
5+
}

‎src/mixins/scrollbar.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212
}
1313

1414
&::-webkit-scrollbar-thumb {
15-
background-color: color("bg4");
15+
background-color: color("bg6");
1616
border-radius: size("bradius");
1717
}
1818

1919
&::-webkit-scrollbar-track:hover {
20-
background-color: color-mix(in srgb, color("bg4"), transparent 70%);
20+
background-color: color-mix(in srgb, color("bg6"), transparent 70%);
2121
}
2222
}

0 commit comments

Comments
 (0)