Skip to content

Commit 499dbd4

Browse files
FrontendlandFrontendland
committed
✨ Add themes
1 parent 1b6fc71 commit 499dbd4

27 files changed

+179
-117
lines changed

‎src/components/Accordion/accordion.module.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
list-style-type: none;
77

88
li {
9-
border-bottom: 1px solid #252525;
9+
border-bottom: 1px solid var(--w-color-primary-50);
1010
padding: 10px 0;
1111
font-size: 16px;
1212

@@ -27,15 +27,15 @@
2727
width: 100%;
2828
background: transparent;
2929
border: 0;
30-
color: #FFF;
30+
color: var(--w-color-primary);
3131
font-size: 16px;
3232
padding: 0;
3333
cursor: pointer;
3434
text-align: left;
3535

3636
svg {
3737
@include Transition(transform);
38-
color: #BBB;
38+
color: var(--w-color-primary-20);
3939
width: 15px;
4040
height: 15px;
4141
pointer-events: none;
@@ -65,7 +65,7 @@
6565
.content {
6666
@include Transition();
6767
overflow: hidden;
68-
color: #BBB;
68+
color: var(--w-color-primary-20);
6969
}
7070
}
7171
}

‎src/components/Alert/alert.module.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import '../../scss/config.scss';
22

33
.w-alert {
4-
border: 1px solid #252525;
4+
border: 1px solid var(--w-color-primary-50);
55
border-radius: 5px;
66
padding: 15px;
77
display: flex;
@@ -48,7 +48,7 @@
4848

4949
.body {
5050
font-size: 16px;
51-
color: #BBB;
51+
color: var(--w-color-primary-20);
5252
line-height: 1.5;
5353
}
5454
}

‎src/components/Badge/badge.module.scss

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,29 @@
88
align-items: center;
99
gap: 5px;
1010
font-size: 12px;
11-
background: #FFF;
12-
color: #252525;
11+
background: var(--w-color-primary);
12+
color: var(--w-color-primary-50);
1313
border: 0;
1414

1515
&.hover {
1616
cursor: pointer;
1717

1818
&:hover {
19-
background: #BBB;
19+
background: var(--w-color-primary-20);
2020
}
2121

2222
&.secondary:hover {
23-
background: #333;
23+
background: var(--w-color-primary-40);
2424
}
2525

2626
&.outline:hover {
27-
color: #FFF;
27+
color: var(--w-color-primary);
2828
background: transparent;
29-
box-shadow: inset 0px 0px 0px 1px #FFF;
29+
box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
3030
}
3131

3232
&.flat:hover {
33-
background: #333;
33+
background: var(--w-color-primary-40);
3434
}
3535

3636
&.info:hover {
@@ -52,19 +52,19 @@
5252

5353

5454
&.secondary {
55-
background: #252525;
56-
color: #FFF;
55+
background: var(--w-color-primary-50);
56+
color: var(--w-color-primary);
5757
}
5858

5959
&.outline {
60-
background: #000;
61-
color: #BBB;
62-
box-shadow: inset 0px 0px 0px 1px #BBB;
60+
background: var(--w-color-primary-70);
61+
color: var(--w-color-primary-20);
62+
box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
6363
}
6464

6565
&.flat {
66-
background: #000;
67-
color: #FFF;
66+
background: var(--w-color-primary-70);;
67+
color: var(--w-color-primary);
6868
}
6969

7070
&.info {
@@ -81,6 +81,6 @@
8181

8282
&.alert {
8383
background: #e73f40;
84-
color: #fff;
84+
color: var(--w-color-primary);
8585
}
8686
}

‎src/components/Button/button.module.scss

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,44 +11,44 @@
1111
font-size: 16px;
1212
cursor: pointer;
1313
border: 0;
14-
background: #FFF;
15-
color: #252525;
14+
background: var(--w-color-primary);
15+
color: var(--w-color-primary-50);
1616

1717
&[disabled] {
1818
cursor: no-drop;
19-
background: #BBB;
19+
background: var(--w-color-primary-20);
2020
}
2121

2222
&:hover {
23-
background: #BBB;
23+
background: var(--w-color-primary-20);
2424
}
2525

2626
&.secondary {
27-
background: #252525;
28-
color: #FFF;
27+
background: var(--w-color-primary-50);
28+
color: var(--w-color-primary);
2929

3030
&:hover {
31-
background: #333;
31+
background: var(--w-color-primary-40);
3232
}
3333
}
3434

3535
&.outline {
3636
background: transparent;
37-
color: #BBB;
38-
box-shadow: inset 0px 0px 0px 1px #BBB;
37+
color: var(--w-color-primary-20);
38+
box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
3939

4040
&:hover {
41-
color: #FFF;
42-
box-shadow: inset 0px 0px 0px 1px #FFF;
41+
color: var(--w-color-primary);
42+
box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
4343
}
4444
}
4545

4646
&.flat {
4747
background: transparent;
48-
color: #FFF;
48+
color: var(--w-color-primary);
4949

5050
&:hover {
51-
background: #333;
51+
background: var(--w-color-primary-40);
5252
}
5353
}
5454

@@ -78,7 +78,7 @@
7878

7979
&.alert {
8080
background: #e73f40;
81-
color: #fff;
81+
color: var(--w-color-primary);
8282

8383
&:hover {
8484
background: #ee5253;

‎src/components/Card/card.module.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
.card {
2-
border: 1px solid #252525;
2+
border: 1px solid var(--w-color-primary-50);
33
border-radius: 5px;
44
display: flex;
55
flex-direction: column;
66

77
&.secondary {
8-
background: #111;
8+
background: var(--w-color-primary-60);
99

1010
.title {
11-
background: #000;
11+
background: var(--w-color-primary-70);
1212
}
1313
}
1414

1515
.title {
1616
padding: 20px;
1717
display: block;
18-
border-bottom: 1px solid #252525;
18+
border-bottom: 1px solid var(--w-color-primary-50);
1919
font-size: 16px;
2020
}
2121

@@ -25,8 +25,8 @@
2525
position: relative;
2626

2727
&.compact {
28-
border: 20px solid #111;
29-
background: #000;
28+
border: 20px solid var(--w-color-primary-60);
29+
background: var(--w-color-primary-70);
3030
padding: 40px;
3131
}
3232
}

‎src/components/Checkbox/checkbox.module.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,15 @@
3636
left: 50%;
3737
transform: translate(-50%, -50%);
3838
display: block;
39-
color: #252525;
39+
color: var(--w-color-primary-50);
4040
width: 10px;
4141
height: 10px;
4242
}
4343
}
4444

4545
&:disabled + span {
46-
background-color: #333;
47-
border-color: #333;
46+
background-color: var(--w-color-primary-40);
47+
border-color: var(--w-color-primary-40);
4848
cursor: no-drop;
4949
}
5050
}
@@ -70,14 +70,14 @@
7070
.text {
7171
margin-left: 25px;
7272
font-size: 14px;
73-
color: #BBB;
73+
color: var(--w-color-primary-20);
7474

7575
a {
7676
@include Transition(color);
77-
color: #BBB;
77+
color: var(--w-color-primary-20);
7878

7979
&:hover {
80-
color: #FFF;
80+
color: var(--w-color-primary);
8181
}
8282
}
8383
}

‎src/components/Input/input.module.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@
33
.input {
44
border-radius: 2px;
55
padding: 5px 10px;
6-
border: 1px solid #252525;
6+
border: 1px solid var(--w-color-primary-50);
77
background: transparent;
88
font-family: Regular;
9-
color: #FFF;
9+
color: var(--w-color-primary);
1010
line-height: 20px;
1111
width: 100%;
1212
color-scheme: dark;
1313

1414
&[disabled] {
1515
cursor: no-drop;
16-
color: #555;
16+
color: var(--w-color-primary-30);
1717
}
1818

1919
&::file-selector-button {
2020
background: transparent;
2121
border: 0;
22-
color: #FFF;
22+
color: var(--w-color-primary);
2323
}
2424

2525
&[type="color"] {
@@ -43,7 +43,7 @@
4343
}
4444

4545
&.fill {
46-
background: #252525;
46+
background: var(--w-color-primary-50);
4747
}
4848
}
4949

@@ -53,7 +53,7 @@
5353

5454
.label {
5555
font-size: 16px;
56-
color: #BBB;
56+
color: var(--w-color-primary-20);
5757
margin-bottom: 5px;
5858
}
5959

@@ -77,7 +77,7 @@
7777

7878
.subtext {
7979
font-size: 14px;
80-
color: #555;
80+
color: var(--w-color-primary-30);
8181
margin-top: 5px;
8282
}
8383
}

‎src/components/Menu/menu.module.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
@import '../../scss/config.scss';
22

33
.menu {
4-
background: #000;
4+
background: var(--w-color-primary-70);
55
padding: 15px;
66
font-size: 16px;
7-
border-bottom: 1px solid #252525;
7+
border-bottom: 1px solid var(--w-color-primary-50);
88
position: sticky;
99
top: 0;
1010
z-index: 99;
1111

1212
&[data-active="true"] {
1313
.hamburger {
14-
box-shadow: 0 0 0 1000px #000;
14+
box-shadow: 0 0 0 1000px var(--w-color-primary-70);
1515

1616
.meat:first-child,
1717
.meat:last-child {
@@ -68,10 +68,10 @@
6868

6969
a {
7070
@include Transition(color);
71-
color: #BBB;
71+
color: var(--w-color-primary-20);
7272

7373
&:hover {
74-
color: #FFF;
74+
color: var(--w-color-primary);
7575
}
7676
}
7777
}
@@ -81,7 +81,7 @@
8181
position: relative;
8282
width: 30px;
8383
height: 20px;
84-
box-shadow: 0 0 0 0 #000;
84+
box-shadow: 0 0 0 0 var(--w-color-primary-70);
8585
border-radius: 50%;
8686
padding: 0;
8787
border: 0;
@@ -93,7 +93,7 @@
9393
width: 100%;
9494
position: absolute;
9595
height: 2px;
96-
background: #FFF;
96+
background: var(--w-color-primary);
9797
display: block;
9898
border-radius: 5px;
9999

0 commit comments

Comments
 (0)