Skip to content

Commit dc670d5

Browse files
gavmckgavmck
authored
Merge pull request #24 from wrap-org/feat/new-themes
Feat/new themes
2 parents 9414cd9 + a33c337 commit dc670d5

3 files changed

Lines changed: 56 additions & 119 deletions

File tree

‎src/tokens/color.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,11 @@
3030
--evg-color-rose-25: #f7cecd;
3131

3232
--evg-color-cloud: #fff;
33+
--evg-color-steel: #7d8796;
3334
--evg-color-coal: #000;
35+
36+
--evg-color-lemon: #ffe861;
37+
--evg-color-orange: #ffa345;
38+
--evg-color-violet: #6347e3;
39+
--evg-color-lilac: #d1bdf5;
3440
}

‎src/tokens/font.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
--evg-font-size-heading-xs: var(--evg-font-size-16);
5656
--evg-font-size-heading-sm: var(--evg-font-size-24);
5757
--evg-font-size-heading-md: var(--evg-font-size-32);
58-
--evg-font-size-heading-lg: var(--evg-font-size-40);
58+
--evg-font-size-heading-lg: var(--evg-font-size-52);
5959
--evg-font-size-heading-xl: var(--evg-font-size-64);
6060

6161
--evg-font-size-display-sm: var(--evg-font-size-80);

‎src/tokens/theme.css‎

Lines changed: 49 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,51 @@
11
:root {
2-
/* LIGHT */
3-
--evg-theme-background-light: var(--evg-color-cloud);
4-
--evg-theme-background-muted-light: var(--evg-color-sand-50);
5-
6-
--evg-theme-border-color-light: var(--evg-color-forest-25);
7-
--evg-theme-border-color-muted-light: var(--evg-color-forest-25);
8-
9-
--evg-theme-color-light: var(--evg-color-forest);
10-
--evg-theme-color-muted-light: var(--evg-color-forest);
11-
--evg-theme-heading-color-light: var(--evg-color-forest);
12-
13-
--evg-theme-link-color-light: var(--evg-color-forest);
14-
--evg-theme-link-text-decoration-light: underline;
15-
--evg-theme-link-text-decoration-hover-light: none;
16-
17-
/* DARK */
18-
--evg-theme-background-dark: var(--evg-color-forest);
19-
--evg-theme-background-muted-dark: var(--evg-color-forest-75);
20-
21-
--evg-theme-border-color-dark: var(--evg-color-coal);
22-
--evg-theme-border-color-muted-dark: var(--evg-color-forest);
23-
24-
--evg-theme-color-dark: var(--evg-color-cloud);
25-
--evg-theme-color-muted-dark: var(--evg-color-cloud);
26-
--evg-theme-heading-color-dark: var(--evg-color-cloud);
27-
28-
--evg-theme-link-color-dark: var(--evg-color-cloud);
29-
--evg-theme-link-text-decoration-dark: underline;
30-
--evg-theme-link-text-decoration-hover-dark: none;
31-
32-
/* INFO */
33-
--evg-theme-background-info: var(--evg-color-sky-25);
34-
--evg-theme-background-muted-info: var(--evg-color-forest-25);
35-
36-
--evg-theme-border-color-info: var(--evg-color-sky-25);
37-
--evg-theme-border-color-muted-info: var(--evg-color-forest-25);
38-
39-
--evg-theme-color-info: var(--evg-color-forest);
40-
--evg-theme-color-muted-info: var(--evg-color-forest);
41-
--evg-theme-heading-color-info: var(--evg-color-forest);
42-
43-
--evg-theme-link-color-info: var(--evg-color-forest);
44-
--evg-theme-link-text-decoration-info: underline;
45-
--evg-theme-link-text-decoration-hover-info: none;
46-
47-
/* ATTENTION */
48-
--evg-theme-background-attention: var(--evg-color-lime-25);
49-
--evg-theme-background-muted-attention: var(--evg-color-earth-50);
50-
51-
--evg-theme-border-color-attention: var(--evg-color-lime-25);
52-
--evg-theme-border-color-muted-attention: var(--evg-color-earth-50);
53-
54-
--evg-theme-color-attention: var(--evg-color-forest);
55-
--evg-theme-color-muted-attention: var(--evg-color-forest);
56-
--evg-theme-heading-color-attention: var(--evg-color-forest);
57-
58-
--evg-theme-link-color-attention: var(--evg-color-forest);
59-
--evg-theme-link-text-decoration-attention: underline;
60-
--evg-theme-link-text-decoration-hover-attention: none;
61-
62-
/* POSITIVE */
63-
--evg-theme-background-positive: var(--evg-color-lime);
64-
--evg-theme-background-muted-positive: var(--evg-color-earth-50);
65-
66-
--evg-theme-border-color-positive: var(--evg-color-lime);
67-
--evg-theme-border-color-muted-positive: var(--evg-color-earth-50);
68-
69-
--evg-theme-color-positive: var(--evg-color-forest);
70-
--evg-theme-color-muted-positive: var(--evg-color-forest);
71-
--evg-theme-heading-color-positive: var(--evg-color-forest);
72-
73-
--evg-theme-link-color-positive: var(--evg-color-forest);
74-
--evg-theme-link-text-decoration-positive: underline;
75-
--evg-theme-link-text-decoration-hover-positive: none;
76-
77-
/* NEGATIVE */
78-
--evg-theme-background-negative: var(--evg-color-rose-75);
79-
--evg-theme-background-muted-negative: var(--evg-color-sand);
80-
81-
--evg-theme-border-color-negative: var(--evg-color-rose-75);
82-
--evg-theme-border-color-muted-negative: var(--evg-color-sand);
83-
84-
--evg-theme-color-negative: var(--evg-color-forest);
85-
--evg-theme-color-muted-negative: var(--evg-color-forest);
86-
--evg-theme-heading-color-negative: var(--evg-color-forest);
87-
88-
--evg-theme-link-color-negative: var(--evg-color-forest);
89-
--evg-theme-link-text-decoration-negative: underline;
90-
--evg-theme-link-text-decoration-hover-negative: none;
91-
92-
/* NEUTRAL */
93-
--evg-theme-background-neutral: var(--evg-color-sky);
94-
--evg-theme-background-muted-neutral: var(--evg-color-forest-25);
95-
96-
--evg-theme-border-color-neutral: var(--evg-color-sky);
97-
--evg-theme-border-color-muted-neutral: var(--evg-color-forest-25);
98-
99-
--evg-theme-color-neutral: var(--evg-color-forest);
100-
--evg-theme-color-muted-neutral: var(--evg-color-forest);
101-
--evg-theme-heading-color-neutral: var(--evg-color-forest);
102-
103-
--evg-theme-link-color-neutral: var(--evg-color-forest);
104-
--evg-theme-link-text-decoration-neutral: underline;
105-
--evg-theme-link-text-decoration-hover-neutral: none;
106-
107-
/* FALLBACK AND MAIN */
108-
--evg-theme-background: var(--evg-theme-background-light);
109-
--evg-theme-background-muted: var(--evg-theme-background-muted-light);
110-
--evg-theme-border-color: var(--evg-theme-border-color-light);
111-
--evg-theme-border-color-muted: var(--evg-theme-border-color-muted-light);
112-
--evg-theme-color: var(--evg-theme-color-light);
113-
--evg-theme-color-muted: var(--evg-theme-color-muted-light);
114-
--evg-theme-heading-color: var(--evg-theme-heading-color-light);
115-
--evg-theme-link-color: var(--evg-theme-link-color-light);
116-
--evg-theme-link-text-decoration: var(--evg-theme-link-text-decoration-light);
117-
--evg-theme-link-text-decoration-hover: var(
118-
--evg-theme-link-text-decoration-hover-light
119-
);
2+
--evg-theme-background-default: var(--evg-color-cloud);
3+
--evg-theme-color-default: var(--evg-color-forest);
4+
--evg-theme-heading-color-default: var(--evg-color-forest);
5+
--evg-theme-link-color-default: var(--evg-color-forest);
6+
7+
--evg-theme-background-sand: var(--evg-color-sand-50);
8+
--evg-theme-color-sand: var(--evg-color-forest);
9+
--evg-theme-heading-color-sand: var(--evg-color-forest);
10+
--evg-theme-link-color-sand: var(--evg-color-forest);
11+
12+
--evg-theme-background-forest: var(--evg-color-forest);
13+
--evg-theme-color-forest: var(--evg-color-cloud);
14+
--evg-theme-heading-color-forest: var(--evg-color-cloud);
15+
--evg-theme-link-color-forest: var(--evg-color-cloud);
16+
17+
--evg-theme-background-forest-light: var(--evg-color-forest-25);
18+
--evg-theme-color-forest-light: var(--evg-color-forest);
19+
--evg-theme-heading-color-forest-light: var(--evg-color-forest);
20+
--evg-theme-link-color-forest-light: var(--evg-color-forest);
21+
22+
--evg-theme-background-lime: var(--evg-color-lime);
23+
--evg-theme-color-lime: var(--evg-color-forest);
24+
--evg-theme-heading-color-lime: var(--evg-color-forest);
25+
--evg-theme-link-color-lime: var(--evg-color-forest);
26+
27+
--evg-theme-background-lime-light: var(--evg-color-lime-25);
28+
--evg-theme-color-lime-light: var(--evg-color-forest);
29+
--evg-theme-heading-color-lime-light: var(--evg-color-forest);
30+
--evg-theme-link-color-lime-light: var(--evg-color-forest);
31+
32+
--evg-theme-background-sky: var(--evg-color-sky-50);
33+
--evg-theme-color-sky: var(--evg-color-forest);
34+
--evg-theme-heading-color-sky: var(--evg-color-forest);
35+
--evg-theme-link-color-sky: var(--evg-color-forest);
36+
37+
--evg-theme-background-sky-light: var(--evg-color-sky-25);
38+
--evg-theme-color-sky-light: var(--evg-color-forest);
39+
--evg-theme-heading-color-sky-light: var(--evg-color-forest);
40+
--evg-theme-link-color-sky-light: var(--evg-color-forest);
41+
42+
--evg-theme-background-earth: var(--evg-color-earth-75);
43+
--evg-theme-color-earth: var(--evg-color-forest);
44+
--evg-theme-heading-color-earth: var(--evg-color-forest);
45+
--evg-theme-link-color-earth: var(--evg-color-forest);
46+
47+
--evg-theme-background-earth-light: var(--evg-color-earth-25);
48+
--evg-theme-color-earth-light: var(--evg-color-forest);
49+
--evg-theme-heading-color-earth-light: var(--evg-color-forest);
50+
--evg-theme-link-color-earth-light: var(--evg-color-forest);
12051
}

0 commit comments

Comments
 (0)