Skip to content

Commit 5d86175

Browse files
indacoindaco
committed
refactor: styles and add CSS color variables
1 parent 762fa7e commit 5d86175

17 files changed

+584
-992
lines changed

‎assets/css/colors.css‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
:root {
2+
/* - Color Space- */
3+
--gtt-color-space: oklab;
4+
5+
/* - Default Level - */
6+
--_gtt-color-default-base: var(
7+
--gtt-color-default-base,
8+
oklch(0.554 0.046 257.417)
9+
);
10+
--gtt-color-default-lightest: color-mix(
11+
in var(--gtt-color-space),
12+
var(--_gtt-color-default-base) 10%,
13+
white
14+
);
15+
--gtt-color-default-lighter: color-mix(
16+
in var(--gtt-color-space),
17+
var(--_gtt-color-default-base) 30%,
18+
white
19+
);
20+
--gtt-color-default-light: color-mix(
21+
in var(--gtt-color-space),
22+
var(--_gtt-color-default-base) 70%,
23+
white
24+
);
25+
--gtt-color-default-dark: color-mix(
26+
in var(--gtt-color-space),
27+
var(--_gtt-color-default-base) 70%,
28+
black
29+
);
30+
--gtt-color-default-darker: color-mix(
31+
in var(--gtt-color-space),
32+
var(--_gtt-color-default-base) 30%,
33+
black
34+
);
35+
--gtt-color-default-darkest: color-mix(
36+
in var(--gtt-color-space),
37+
var(--_gtt-color-default-base) 10%,
38+
black
39+
);
40+
41+
/* - Success Level - */
42+
--_gtt-color-success-base: var(
43+
--gtt-color-success-base,
44+
oklch(0.723 0.219 149.579)
45+
);
46+
--gtt-color-success-lightest: color-mix(
47+
in var(--gtt-color-space),
48+
var(--_gtt-color-success-base) 10%,
49+
white
50+
);
51+
--gtt-color-success-lighter: color-mix(
52+
in var(--gtt-color-space),
53+
var(--_gtt-color-success-base) 30%,
54+
white
55+
);
56+
--gtt-color-success-light: color-mix(
57+
in var(--gtt-color-space),
58+
var(--_gtt-color-success-base) 70%,
59+
white
60+
);
61+
--gtt-color-success-dark: color-mix(
62+
in var(--gtt-color-space),
63+
var(--_gtt-color-success-base) 70%,
64+
black
65+
);
66+
--gtt-color-success-darker: color-mix(
67+
in var(--gtt-color-space),
68+
var(--_gtt-color-success-base) 30%,
69+
black
70+
);
71+
--gtt-color-success-darkest: color-mix(
72+
in var(--gtt-color-space),
73+
var(--_gtt-color-success-base) 10%,
74+
black
75+
);
76+
77+
/* - Error Level - */
78+
--_gtt-color-error-base: var(
79+
--gtt-color-error-base,
80+
oklch(0.637 0.237 25.331)
81+
);
82+
--gtt-color-error-lightest: color-mix(
83+
in var(--gtt-color-space),
84+
var(--_gtt-color-error-base) 10%,
85+
white
86+
);
87+
--gtt-color-error-lighter: color-mix(
88+
in var(--gtt-color-space),
89+
var(--_gtt-color-error-base) 30%,
90+
white
91+
);
92+
--gtt-color-error-light: color-mix(
93+
in var(--gtt-color-space),
94+
var(--_gtt-color-error-base) 70%,
95+
white
96+
);
97+
--gtt-color-error-dark: color-mix(
98+
in var(--gtt-color-space),
99+
var(--_gtt-color-error-base) 70%,
100+
black
101+
);
102+
--gtt-color-error-darker: color-mix(
103+
in var(--gtt-color-space),
104+
var(--_gtt-color-error-base) 30%,
105+
black
106+
);
107+
--gtt-color-error-darkest: color-mix(
108+
in var(--gtt-color-space),
109+
var(--_gtt-color-error-base) 10%,
110+
black
111+
);
112+
113+
/* - Warning Level - */
114+
--_gtt-color-warning-base: var(
115+
--gtt-color-warning-base,
116+
oklch(0.769 0.188 70.08)
117+
);
118+
--gtt-color-warning-lightest: color-mix(
119+
in var(--gtt-color-space),
120+
var(--_gtt-color-warning-base) 10%,
121+
white
122+
);
123+
--gtt-color-warning-lighter: color-mix(
124+
in var(--gtt-color-space),
125+
var(--_gtt-color-warning-base) 30%,
126+
white
127+
);
128+
--gtt-color-warning-light: color-mix(
129+
in var(--gtt-color-space),
130+
var(--_gtt-color-warning-base) 70%,
131+
white
132+
);
133+
--gtt-color-warning-dark: color-mix(
134+
in var(--gtt-color-space),
135+
var(--_gtt-color-warning-base) 70%,
136+
black
137+
);
138+
--gtt-color-warning-darker: color-mix(
139+
in var(--gtt-color-space),
140+
var(--_gtt-color-warning-base) 30%,
141+
black
142+
);
143+
--gtt-color-warning-darkest: color-mix(
144+
in var(--gtt-color-space),
145+
var(--_gtt-color-warning-base) 10%,
146+
black
147+
);
148+
149+
/* - Info Level - */
150+
--_gtt-color-info-base: var(
151+
--gtt-color-info-base,
152+
oklch(0.623 0.214 259.815)
153+
);
154+
--gtt-color-info-lightest: color-mix(
155+
in var(--gtt-color-space),
156+
var(--_gtt-color-info-base) 10%,
157+
white
158+
);
159+
--gtt-color-info-lighter: color-mix(
160+
in var(--gtt-color-space),
161+
var(--_gtt-color-info-base) 30%,
162+
white
163+
);
164+
--gtt-color-info-light: color-mix(
165+
in var(--gtt-color-space),
166+
var(--_gtt-color-info-base) 70%,
167+
white
168+
);
169+
--gtt-color-info-dark: color-mix(
170+
in var(--gtt-color-space),
171+
var(--_gtt-color-info-base) 70%,
172+
black
173+
);
174+
--gtt-color-info-darker: color-mix(
175+
in var(--gtt-color-space),
176+
var(--_gtt-color-info-base) 30%,
177+
black
178+
);
179+
--gtt-color-info-darkest: color-mix(
180+
in var(--gtt-color-space),
181+
var(--_gtt-color-info-base) 10%,
182+
black
183+
);
184+
}

0 commit comments

Comments
 (0)