Skip to content

Commit eedd30c

Browse files
indacoindaco
committed
fix: expose color space CSS variable
1 parent 9cd0806 commit eedd30c

File tree

3 files changed

+33
-33
lines changed

3 files changed

+33
-33
lines changed

‎assets/css/colors.css‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
:root {
22
/* - Color Space- */
3-
--gtt-color-space: oklab;
3+
--_gtt-color-space: var(--gtt-color-space, oklab);
44

55
/* - Default Level - */
66
--_gtt-color-default-base: var(
77
--gtt-color-default-base,
88
oklch(0.554 0.046 257.417)
99
);
1010
--gtt-color-default-lightest: color-mix(
11-
in var(--gtt-color-space),
11+
in var(--_gtt-color-space),
1212
var(--_gtt-color-default-base) 10%,
1313
white
1414
);
1515
--gtt-color-default-lighter: color-mix(
16-
in var(--gtt-color-space),
16+
in var(--_gtt-color-space),
1717
var(--_gtt-color-default-base) 30%,
1818
white
1919
);
2020
--gtt-color-default-light: color-mix(
21-
in var(--gtt-color-space),
21+
in var(--_gtt-color-space),
2222
var(--_gtt-color-default-base) 70%,
2323
white
2424
);
2525
--gtt-color-default-dark: color-mix(
26-
in var(--gtt-color-space),
26+
in var(--_gtt-color-space),
2727
var(--_gtt-color-default-base) 70%,
2828
black
2929
);
3030
--gtt-color-default-darker: color-mix(
31-
in var(--gtt-color-space),
31+
in var(--_gtt-color-space),
3232
var(--_gtt-color-default-base) 30%,
3333
black
3434
);
3535
--gtt-color-default-darkest: color-mix(
36-
in var(--gtt-color-space),
36+
in var(--_gtt-color-space),
3737
var(--_gtt-color-default-base) 10%,
3838
black
3939
);
@@ -44,32 +44,32 @@
4444
oklch(0.723 0.219 149.579)
4545
);
4646
--gtt-color-success-lightest: color-mix(
47-
in var(--gtt-color-space),
47+
in var(--_gtt-color-space),
4848
var(--_gtt-color-success-base) 10%,
4949
white
5050
);
5151
--gtt-color-success-lighter: color-mix(
52-
in var(--gtt-color-space),
52+
in var(--_gtt-color-space),
5353
var(--_gtt-color-success-base) 30%,
5454
white
5555
);
5656
--gtt-color-success-light: color-mix(
57-
in var(--gtt-color-space),
57+
in var(--_gtt-color-space),
5858
var(--_gtt-color-success-base) 70%,
5959
white
6060
);
6161
--gtt-color-success-dark: color-mix(
62-
in var(--gtt-color-space),
62+
in var(--_gtt-color-space),
6363
var(--_gtt-color-success-base) 70%,
6464
black
6565
);
6666
--gtt-color-success-darker: color-mix(
67-
in var(--gtt-color-space),
67+
in var(--_gtt-color-space),
6868
var(--_gtt-color-success-base) 30%,
6969
black
7070
);
7171
--gtt-color-success-darkest: color-mix(
72-
in var(--gtt-color-space),
72+
in var(--_gtt-color-space),
7373
var(--_gtt-color-success-base) 10%,
7474
black
7575
);
@@ -80,32 +80,32 @@
8080
oklch(0.637 0.237 25.331)
8181
);
8282
--gtt-color-error-lightest: color-mix(
83-
in var(--gtt-color-space),
83+
in var(--_gtt-color-space),
8484
var(--_gtt-color-error-base) 10%,
8585
white
8686
);
8787
--gtt-color-error-lighter: color-mix(
88-
in var(--gtt-color-space),
88+
in var(--_gtt-color-space),
8989
var(--_gtt-color-error-base) 30%,
9090
white
9191
);
9292
--gtt-color-error-light: color-mix(
93-
in var(--gtt-color-space),
93+
in var(--_gtt-color-space),
9494
var(--_gtt-color-error-base) 70%,
9595
white
9696
);
9797
--gtt-color-error-dark: color-mix(
98-
in var(--gtt-color-space),
98+
in var(--_gtt-color-space),
9999
var(--_gtt-color-error-base) 70%,
100100
black
101101
);
102102
--gtt-color-error-darker: color-mix(
103-
in var(--gtt-color-space),
103+
in var(--_gtt-color-space),
104104
var(--_gtt-color-error-base) 30%,
105105
black
106106
);
107107
--gtt-color-error-darkest: color-mix(
108-
in var(--gtt-color-space),
108+
in var(--_gtt-color-space),
109109
var(--_gtt-color-error-base) 10%,
110110
black
111111
);
@@ -116,32 +116,32 @@
116116
oklch(0.769 0.188 70.08)
117117
);
118118
--gtt-color-warning-lightest: color-mix(
119-
in var(--gtt-color-space),
119+
in var(--_gtt-color-space),
120120
var(--_gtt-color-warning-base) 10%,
121121
white
122122
);
123123
--gtt-color-warning-lighter: color-mix(
124-
in var(--gtt-color-space),
124+
in var(--_gtt-color-space),
125125
var(--_gtt-color-warning-base) 30%,
126126
white
127127
);
128128
--gtt-color-warning-light: color-mix(
129-
in var(--gtt-color-space),
129+
in var(--_gtt-color-space),
130130
var(--_gtt-color-warning-base) 70%,
131131
white
132132
);
133133
--gtt-color-warning-dark: color-mix(
134-
in var(--gtt-color-space),
134+
in var(--_gtt-color-space),
135135
var(--_gtt-color-warning-base) 70%,
136136
black
137137
);
138138
--gtt-color-warning-darker: color-mix(
139-
in var(--gtt-color-space),
139+
in var(--_gtt-color-space),
140140
var(--_gtt-color-warning-base) 30%,
141141
black
142142
);
143143
--gtt-color-warning-darkest: color-mix(
144-
in var(--gtt-color-space),
144+
in var(--_gtt-color-space),
145145
var(--_gtt-color-warning-base) 10%,
146146
black
147147
);
@@ -152,32 +152,32 @@
152152
oklch(0.623 0.214 259.815)
153153
);
154154
--gtt-color-info-lightest: color-mix(
155-
in var(--gtt-color-space),
155+
in var(--_gtt-color-space),
156156
var(--_gtt-color-info-base) 10%,
157157
white
158158
);
159159
--gtt-color-info-lighter: color-mix(
160-
in var(--gtt-color-space),
160+
in var(--_gtt-color-space),
161161
var(--_gtt-color-info-base) 30%,
162162
white
163163
);
164164
--gtt-color-info-light: color-mix(
165-
in var(--gtt-color-space),
165+
in var(--_gtt-color-space),
166166
var(--_gtt-color-info-base) 70%,
167167
white
168168
);
169169
--gtt-color-info-dark: color-mix(
170-
in var(--gtt-color-space),
170+
in var(--_gtt-color-space),
171171
var(--_gtt-color-info-base) 70%,
172172
black
173173
);
174174
--gtt-color-info-darker: color-mix(
175-
in var(--gtt-color-space),
175+
in var(--_gtt-color-space),
176176
var(--_gtt-color-info-base) 30%,
177177
black
178178
);
179179
--gtt-color-info-darkest: color-mix(
180-
in var(--gtt-color-space),
180+
in var(--_gtt-color-space),
181181
var(--_gtt-color-info-base) 10%,
182182
black
183183
);

‎components/css/colors.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ templ GoasterCSSColors() {
66
@cssColorsHandle.Once() {
77
<style type="text/css">
88
/* [tempo] BEGIN - Do not edit! This section is auto-generated. */
9-
:root{--gtt-color-space: oklab;--_gtt-color-default-base: var( --gtt-color-default-base, oklch(.554 .046 257.417) );--gtt-color-default-lightest: color-mix( in var(--gtt-color-space), var(--_gtt-color-default-base) 10%, white );--gtt-color-default-lighter: color-mix( in var(--gtt-color-space), var(--_gtt-color-default-base) 30%, white );--gtt-color-default-light: color-mix( in var(--gtt-color-space), var(--_gtt-color-default-base) 70%, white );--gtt-color-default-dark: color-mix( in var(--gtt-color-space), var(--_gtt-color-default-base) 70%, black );--gtt-color-default-darker: color-mix( in var(--gtt-color-space), var(--_gtt-color-default-base) 30%, black );--gtt-color-default-darkest: color-mix( in var(--gtt-color-space), var(--_gtt-color-default-base) 10%, black );--_gtt-color-success-base: var( --gtt-color-success-base, oklch(.723 .219 149.579) );--gtt-color-success-lightest: color-mix( in var(--gtt-color-space), var(--_gtt-color-success-base) 10%, white );--gtt-color-success-lighter: color-mix( in var(--gtt-color-space), var(--_gtt-color-success-base) 30%, white );--gtt-color-success-light: color-mix( in var(--gtt-color-space), var(--_gtt-color-success-base) 70%, white );--gtt-color-success-dark: color-mix( in var(--gtt-color-space), var(--_gtt-color-success-base) 70%, black );--gtt-color-success-darker: color-mix( in var(--gtt-color-space), var(--_gtt-color-success-base) 30%, black );--gtt-color-success-darkest: color-mix( in var(--gtt-color-space), var(--_gtt-color-success-base) 10%, black );--_gtt-color-error-base: var( --gtt-color-error-base, oklch(.637 .237 25.331) );--gtt-color-error-lightest: color-mix( in var(--gtt-color-space), var(--_gtt-color-error-base) 10%, white );--gtt-color-error-lighter: color-mix( in var(--gtt-color-space), var(--_gtt-color-error-base) 30%, white );--gtt-color-error-light: color-mix( in var(--gtt-color-space), var(--_gtt-color-error-base) 70%, white );--gtt-color-error-dark: color-mix( in var(--gtt-color-space), var(--_gtt-color-error-base) 70%, black );--gtt-color-error-darker: color-mix( in var(--gtt-color-space), var(--_gtt-color-error-base) 30%, black );--gtt-color-error-darkest: color-mix( in var(--gtt-color-space), var(--_gtt-color-error-base) 10%, black );--_gtt-color-warning-base: var( --gtt-color-warning-base, oklch(.769 .188 70.08) );--gtt-color-warning-lightest: color-mix( in var(--gtt-color-space), var(--_gtt-color-warning-base) 10%, white );--gtt-color-warning-lighter: color-mix( in var(--gtt-color-space), var(--_gtt-color-warning-base) 30%, white );--gtt-color-warning-light: color-mix( in var(--gtt-color-space), var(--_gtt-color-warning-base) 70%, white );--gtt-color-warning-dark: color-mix( in var(--gtt-color-space), var(--_gtt-color-warning-base) 70%, black );--gtt-color-warning-darker: color-mix( in var(--gtt-color-space), var(--_gtt-color-warning-base) 30%, black );--gtt-color-warning-darkest: color-mix( in var(--gtt-color-space), var(--_gtt-color-warning-base) 10%, black );--_gtt-color-info-base: var( --gtt-color-info-base, oklch(.623 .214 259.815) );--gtt-color-info-lightest: color-mix( in var(--gtt-color-space), var(--_gtt-color-info-base) 10%, white );--gtt-color-info-lighter: color-mix( in var(--gtt-color-space), var(--_gtt-color-info-base) 30%, white );--gtt-color-info-light: color-mix( in var(--gtt-color-space), var(--_gtt-color-info-base) 70%, white );--gtt-color-info-dark: color-mix( in var(--gtt-color-space), var(--_gtt-color-info-base) 70%, black );--gtt-color-info-darker: color-mix( in var(--gtt-color-space), var(--_gtt-color-info-base) 30%, black );--gtt-color-info-darkest: color-mix( in var(--gtt-color-space), var(--_gtt-color-info-base) 10%, black )}
9+
:root{--_gtt-color-space: var(--gtt-color-space, oklab);--_gtt-color-default-base: var( --gtt-color-default-base, oklch(.554 .046 257.417) );--gtt-color-default-lightest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 10%, white );--gtt-color-default-lighter: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 30%, white );--gtt-color-default-light: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 70%, white );--gtt-color-default-dark: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 70%, black );--gtt-color-default-darker: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 30%, black );--gtt-color-default-darkest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 10%, black );--_gtt-color-success-base: var( --gtt-color-success-base, oklch(.723 .219 149.579) );--gtt-color-success-lightest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 10%, white );--gtt-color-success-lighter: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 30%, white );--gtt-color-success-light: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 70%, white );--gtt-color-success-dark: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 70%, black );--gtt-color-success-darker: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 30%, black );--gtt-color-success-darkest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 10%, black );--_gtt-color-error-base: var( --gtt-color-error-base, oklch(.637 .237 25.331) );--gtt-color-error-lightest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 10%, white );--gtt-color-error-lighter: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 30%, white );--gtt-color-error-light: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 70%, white );--gtt-color-error-dark: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 70%, black );--gtt-color-error-darker: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 30%, black );--gtt-color-error-darkest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 10%, black );--_gtt-color-warning-base: var( --gtt-color-warning-base, oklch(.769 .188 70.08) );--gtt-color-warning-lightest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 10%, white );--gtt-color-warning-lighter: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 30%, white );--gtt-color-warning-light: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 70%, white );--gtt-color-warning-dark: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 70%, black );--gtt-color-warning-darker: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 30%, black );--gtt-color-warning-darkest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 10%, black );--_gtt-color-info-base: var( --gtt-color-info-base, oklch(.623 .214 259.815) );--gtt-color-info-lightest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 10%, white );--gtt-color-info-lighter: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 30%, white );--gtt-color-info-light: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 70%, white );--gtt-color-info-dark: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 70%, black );--gtt-color-info-darker: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 30%, black );--gtt-color-info-darkest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 10%, black )}
1010

1111
/* [tempo] END */
1212
</style>

0 commit comments

Comments
 (0)