@graupl/graupl 1.0.0-alpha.2 → 1.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/dist/base/form/form.css +1 -85
  3. package/dist/base/form/form.css.map +1 -1
  4. package/dist/base/link/link.css +1 -25
  5. package/dist/base/link/link.css.map +1 -1
  6. package/dist/component/button/button.css +1 -61
  7. package/dist/component/button/button.css.map +1 -1
  8. package/dist/graupl.css +1 -320
  9. package/dist/graupl.css.map +1 -1
  10. package/dist/layout/columns/columns.css +1 -40
  11. package/dist/layout/columns/columns.css.map +1 -1
  12. package/dist/layout/container/container.css +1 -37
  13. package/dist/layout/container/container.css.map +1 -1
  14. package/dist/state/focus/focus.css +1 -9
  15. package/dist/state/focus/focus.css.map +1 -1
  16. package/dist/theme/theme.css +1 -69
  17. package/dist/theme/theme.css.map +1 -1
  18. package/dist/utilities/background/background.css +1 -0
  19. package/dist/utilities/colors/colors.css +2 -0
  20. package/dist/utilities/colors/colors.css.map +1 -0
  21. package/docs/.vitepress/config.js +41 -1
  22. package/docs/.vitepress/theme/custom.scss +29 -29
  23. package/docs/compiling-graupl.md +56 -0
  24. package/docs/introduction.md +5 -0
  25. package/index.html +6 -2
  26. package/package.json +27 -1
  27. package/postcss.config.cjs +1 -1
  28. package/scss/_defaults.scss +3 -0
  29. package/scss/_index.scss +14 -0
  30. package/scss/_init.scss +3 -0
  31. package/scss/base/form/_variables.scss +8 -8
  32. package/scss/base/link/_variables.scss +5 -8
  33. package/scss/component/button/_defaults.scss +2 -0
  34. package/scss/component/button/_index.scss +47 -19
  35. package/scss/component/button/_variables.scss +36 -10
  36. package/scss/functions/_important.scss +11 -0
  37. package/scss/functions/_theme.scss +11 -0
  38. package/scss/graupl.scss +1 -5
  39. package/scss/layout/columns/_index.scss +1 -1
  40. package/scss/state/focus/_variables.scss +3 -3
  41. package/scss/theme/_defaults.scss +48 -31
  42. package/scss/theme/_index.scss +13 -66
  43. package/scss/theme/_variables.scss +92 -452
  44. package/scss/utilities/_index.scss +3 -0
  45. package/scss/utilities/colors/_defaults.scss +7 -0
  46. package/scss/utilities/colors/_index.scss +22 -0
  47. package/scss/utilities/colors/_variables.scss +3 -0
  48. package/scss/utilities/colors/colors.scss +3 -0
package/dist/graupl.css CHANGED
@@ -1,321 +1,2 @@
1
- @layer graupl.base{
2
- input,
3
- textarea,
4
- select{
5
- padding:var(--graupl-input-padding, var(--graupl-input-padding-y, calc(var(--graupl-gap, 1rem) / 2)) var(--graupl-input-padding-x, var(--graupl-gap, 1rem)));
6
- border-width:var(--graupl-input-border-width, var(--graupl-border-width, 2px));
7
- border-style:var(--graupl-botton-border-style, var(--graupl-border-style, solid));
8
- border-radius:var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem));
9
- font-size:var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem));
10
- }
11
- input:disabled,
12
- textarea:disabled,
13
- select:disabled{
14
- cursor:not-allowed;
15
- }
16
- label{
17
- font-size:var(--graupl-label-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
18
- }
19
- fieldset{
20
- display:flex;
21
- flex-flow:var(--graupl-fieldset-direction, column) wrap;
22
- gap:var(--graupl-fieldset-gap, calc(var(--graupl-gap, 1rem) / 4));
23
- padding:var(--graupl-fieldset-padding, var(--graupl-fieldset-padding-y, var(--graupl-input-padding-y, calc(var(--graupl-gap, 1rem) / 2))) var(--graupl-fieldset-padding-x, var(--graupl-input-padding-x, var(--graupl-gap, 1rem))));
24
- border-width:var(--graupl-fieldset-border-width, var(--graupl-input-border-width, var(--graupl-border-width, 2px)));
25
- border-style:var(--graupl-fieldset-border-style, var(--graupl-botton-border-style, var(--graupl-border-style, solid)));
26
- border-radius:var(--graupl-fieldset-border-radius, var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem)));
27
- font-size:var(--graupl-fieldset-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
28
- }
29
- fieldset:disabled input,
30
- fieldset:disabled textarea,
31
- fieldset:disabled select{
32
- cursor:not-allowed;
33
- }
34
- }
35
- @layer graupl.theme{
36
- input,
37
- textarea,
38
- select{
39
- border-color:var(--graupl-input-border-color, var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)))));
40
- background:var(--graupl-input-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
41
- color:var(--graupl-input-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
42
- accent-color:var(--graupl-input-accent-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
43
- }
44
- input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{
45
- color:var(--graupl-input-placeholder-color, var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)))));
46
- }
47
- input::placeholder,
48
- textarea::placeholder,
49
- select::placeholder{
50
- color:var(--graupl-input-placeholder-color, var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)))));
51
- }
52
- input:disabled,
53
- textarea:disabled,
54
- select:disabled{
55
- border-color:var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));
56
- color:var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));
57
- }
58
- input:disabled::-moz-placeholder, textarea:disabled::-moz-placeholder, select:disabled::-moz-placeholder{
59
- color:var(--graupl-input-disabled-placeholder-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
60
- }
61
- input:disabled::placeholder,
62
- textarea:disabled::placeholder,
63
- select:disabled::placeholder{
64
- color:var(--graupl-input-disabled-placeholder-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
65
- }
66
- label{
67
- color:var(--graupl-label-color, var(--graupl-input-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))));
68
- }
69
- label:has(+ input:disabled, + textarea:disabled, + select:disabled){
70
- color:var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
71
- }
72
- fieldset{
73
- border-color:var(--graupl-fieldset-border-color, var(--graupl-input-border-color, var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))))));
74
- background:var(--graupl-fieldset-background, var(--graupl-input-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
75
- color:var(--graupl-fieldset-color, var(--graupl-input-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))));
76
- }
77
- fieldset:disabled{
78
- border-color:var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));
79
- color:var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
80
- }
81
- fieldset:disabled label{
82
- color:var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
83
- }
84
- }
85
- @layer graupl.base{
86
- a{
87
- -webkit-text-decoration:var(--graupl-link-text-decoration, underline);
88
- text-decoration:var(--graupl-link-text-decoration, underline);
89
- text-decoration-thickness:var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 2px));
90
- }
91
- }
92
- @layer graupl.theme{
93
- a{
94
- color:var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
95
- }
96
- a:hover{
97
- color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
98
- }
99
- a:active{
100
- color:var(--graupl-link-active-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
101
- }
102
- a:visited{
103
- color:var(--graupl-link-visited-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
104
- }
105
- a:visited:hover{
106
- color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
107
- }
108
- }
109
- @layer graupl.layout{
110
- .container,
111
- .container > .full-width{
112
- --graupl-container-full-width:minmax(var(--graupl-container-gap, var(--graupl-gap, 1rem)), 1fr);
113
- --graupl-container-content:min(
114
- var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)),
115
- calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem)) * 2)
116
- );
117
- --graupl-container-breakout:minmax(
118
- 0,
119
- var(--graupl-container-breakout-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))
120
- );
121
- --graupl-container-feature:minmax(
122
- 0,
123
- var(--graupl-container-feature-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2))
124
- );
125
- display:grid;
126
- grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end];
127
- }
128
- .container > :not(.breakout, .full-width, .feature),
129
- .container > .full-width > :not(.breakout, .full-width, .feature){
130
- grid-column:content;
131
- }
132
- .container .breakout,
133
- .container > .full-width .breakout{
134
- grid-column:breakout;
135
- }
136
- .container .feature,
137
- .container > .full-width .feature{
138
- grid-column:feature;
139
- }
140
- .container .full-width,
141
- .container > .full-width .full-width{
142
- grid-column:full-width;
143
- }
144
- }
145
- @layer graupl.layout{
146
- .columns{
147
- display:grid;
148
- grid-template-columns:var(--graupl-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem)) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));
149
- gap:var(--graupl-columns-gap, var(--graupl-gap, 1rem));
150
- }
151
- .columns > *{
152
- grid-column:span var(--graupl-columns-span, 1);
153
- }
154
- .columns-1{
155
- --graupl-columns-count:1;
156
- }
157
- .span-1{
158
- --graupl-columns-span:1;
159
- }
160
- .columns-2{
161
- --graupl-columns-count:2;
162
- }
163
- .span-2{
164
- --graupl-columns-span:2;
165
- }
166
- .columns-3{
167
- --graupl-columns-count:3;
168
- }
169
- .span-3{
170
- --graupl-columns-span:3;
171
- }
172
- .columns-4{
173
- --graupl-columns-count:4;
174
- }
175
- .span-4{
176
- --graupl-columns-span:4;
177
- }
178
- @media screen and (max-width: 48ch){
179
- .columns{
180
- --graupl-columns-min-width:1fr;
181
- }
182
- }
183
- }
184
- @layer graupl.component{
185
- .button{
186
- display:flex;
187
- align-items:center;
188
- justify-content:center;
189
- min-width:var(--graupl-button-min-width, 44px);
190
- min-height:var(--graupl-button-min-height, 44px);
191
- padding:var(--graupl-button-padding, var(--graupl-button-padding-y, calc(var(--graupl-gap, 1rem) / 2)) var(--graupl-button-padding-x, var(--graupl-gap, 1rem)));
192
- transition:var(--graupl-button-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), border-color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));
193
- border-width:var(--graupl-button-border-width, var(--graupl-border-width, 2px));
194
- border-style:var(--graupl-botton-border-style, var(--graupl-border-style, solid));
195
- border-radius:var(--graupl-button-border-radius, var(--graupl-border-radius, 0.125rem));
196
- font-size:var(--graupl-button-font-size, var(--graupl-font-size-default, 1rem));
197
- cursor:pointer;
198
- }
199
- .button:hover{
200
- transform:var(--graupl-button-hover-transform, none);
201
- }
202
- .button:active{
203
- transform:var(--graupl-button-active-transform, scale(0.95));
204
- }
205
- }
206
- @layer graupl.theme{
207
- .button{
208
- border-color:var(--graupl-button-border-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
209
- background:var(--graupl-button-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
210
- color:var(--graupl-button-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
211
- }
212
- .button:hover{
213
- border-color:var(--graupl-button-hover-border-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
214
- background:var(--graupl-button-hover-background, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
215
- color:var(--graupl-button-hover-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
216
- }
217
- .button:active{
218
- border-color:var(--graupl-button-active-border-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
219
- background:var(--graupl-button-active-background, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
220
- color:var(--graupl-button-active-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
221
- }
222
- .button.primary{
223
- --graupl-button-hover-background:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
224
- --graupl-button-active-background:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
225
- --graupl-button-border-color:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
226
- --graupl-button-hover-border-color:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
227
- --graupl-button-active-border-color:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
228
- }
229
- .button.secondary{
230
- --graupl-button-hover-background:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
231
- --graupl-button-active-background:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
232
- --graupl-button-border-color:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
233
- --graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
234
- --graupl-button-active-border-color:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
235
- }
236
- .button.tertiary{
237
- --graupl-button-hover-background:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
238
- --graupl-button-active-background:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
239
- --graupl-button-border-color:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
240
- --graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
241
- --graupl-button-active-border-color:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
242
- }
243
- }
244
- @layer graupl.state{
245
- *:focus-visible{
246
- border-color:transparent;
247
- outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
248
- outline-offset:var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))));
249
- box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
250
- }
251
- }
252
- @layer graupl.theme{
253
- :root{
254
- background:var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));
255
- color:var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));
256
- font-family:var(--graupl-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);
257
- font-size:var(--graupl-font-size, clamp(0.85rem, 0.8rem + 0.5vw, 1.25rem));
258
- }
259
- .dark-mode{
260
- --graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100, var(--graupl-primary--900, hsl(219, 100%, 10%)));
261
- --graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200, var(--graupl-primary--800, hsl(219, 90%, 20%)));
262
- --graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300, var(--graupl-primary--700, hsl(219, 80%, 35%)));
263
- --graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400, var(--graupl-primary--600, hsl(219, 75%, 45%)));
264
- --graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
265
- --graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600, var(--graupl-primary--400, hsl(219, 75%, 55%)));
266
- --graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700, var(--graupl-primary--300, hsl(219, 80%, 65%)));
267
- --graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800, var(--graupl-primary--200, hsl(219, 90%, 80%)));
268
- --graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900, var(--graupl-primary--100, hsl(219, 100%, 95%)));
269
- --graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
270
- --graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
271
- --graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
272
- --graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
273
- --graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
274
- --graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
275
- --graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
276
- --graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
277
- --graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
278
- --graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
279
- --graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
280
- --graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
281
- --graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
282
- --graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
283
- --graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
284
- --graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
285
- --graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
286
- --graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
287
- color-scheme:dark;
288
- }
289
- .light-mode{
290
- --graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)));
291
- --graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)));
292
- --graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%)));
293
- --graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400, var(--graupl-primary--400, hsl(219, 75%, 55%)));
294
- --graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
295
- --graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%)));
296
- --graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)));
297
- --graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%)));
298
- --graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)));
299
- --graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
300
- --graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
301
- --graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
302
- --graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
303
- --graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
304
- --graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
305
- --graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
306
- --graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
307
- --graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
308
- --graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
309
- --graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
310
- --graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
311
- --graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
312
- --graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
313
- --graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
314
- --graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
315
- --graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
316
- --graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
317
- color-scheme:light;
318
- }
319
- }
320
-
1
+ @layer graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;@layer graupl.base{input,select,textarea{border-radius:var(--graupl-input-border-radius,var(--graupl-border-radius,.125rem));border-style:var(--graupl-botton-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-input-border-width,var(--graupl-border-width,2px));font-size:var(--graupl-input-font-size,var(--graupl-font-size-default,1rem));padding:var(--graupl-input-padding,var(--graupl-input-padding-y,calc(var(--graupl-gap, 1rem)/2)) var(--graupl-input-padding-x,var(--graupl-gap,1rem)))}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed}label{font-size:var(--graupl-label-font-size,var(--graupl-input-font-size,var(--graupl-font-size-default,1rem)))}fieldset{border-radius:var(--graupl-fieldset-border-radius,var(--graupl-input-border-radius,var(--graupl-border-radius,.125rem)));border-style:var(--graupl-fieldset-border-style,var(--graupl-botton-border-style,var(--graupl-border-style,solid)));border-width:var(--graupl-fieldset-border-width,var(--graupl-input-border-width,var(--graupl-border-width,2px)));display:flex;flex-flow:var(--graupl-fieldset-direction,column) wrap;font-size:var(--graupl-fieldset-font-size,var(--graupl-input-font-size,var(--graupl-font-size-default,1rem)));gap:var(--graupl-fieldset-gap,calc(var(--graupl-gap, 1rem)/4));padding:var(--graupl-fieldset-padding,var(--graupl-fieldset-padding-y,var(--graupl-input-padding-y,calc(var(--graupl-gap, 1rem)/2))) var(--graupl-fieldset-padding-x,var(--graupl-input-padding-x,var(--graupl-gap,1rem))))}fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea{cursor:not-allowed}}@layer graupl.theme{input,select,textarea{accent-color:var(--graupl-input-accent-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))));background:var(--graupl-input-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-input-border-color,var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b))));color:var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}input::-moz-placeholder,select::-moz-placeholder,textarea::-moz-placeholder{color:var(--graupl-input-placeholder-color,var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484))))}input::placeholder,select::placeholder,textarea::placeholder{color:var(--graupl-input-placeholder-color,var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484))))}input:disabled,select:disabled,textarea:disabled{border-color:var(--graupl-input-disabled-border-color,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb))));color:var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d))))}input:disabled::-moz-placeholder,select:disabled::-moz-placeholder,textarea:disabled::-moz-placeholder{color:var(--graupl-input-disabled-placeholder-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}input:disabled::placeholder,select:disabled::placeholder,textarea:disabled::placeholder{color:var(--graupl-input-disabled-placeholder-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}label{color:var(--graupl-label-color,var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}label:has(+input:disabled,+textarea:disabled,+select:disabled){color:var(--graupl-label-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}fieldset{background:var(--graupl-fieldset-background,var(--graupl-input-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));border-color:var(--graupl-fieldset-border-color,var(--graupl-input-border-color,var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))));color:var(--graupl-fieldset-color,var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}fieldset:disabled{border-color:var(--graupl-fieldset-disabled-border-color,var(--graupl-input-disabled-border-color,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))));color:var(--graupl-fieldset-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}fieldset:disabled label{color:var(--graupl-label-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}}@layer graupl.base{a{-webkit-text-decoration:var(--graupl-link-text-decoration,underline);text-decoration:var(--graupl-link-text-decoration,underline);text-decoration-thickness:var(--graupl-link-text-decoration-thickness,var(--graupl-border-width,2px))}}@layer graupl.theme{a{color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a:hover{color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a:active{color:var(--graupl-link-active-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a:visited{color:var(--graupl-link-visited-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a:visited:hover{color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}}@layer graupl.layout{.container,.container>.full-width{--graupl-container-full-width:minmax(var(--graupl-container-gap,var(--graupl-gap,1rem)),1fr);--graupl-container-content:min(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)),calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem))*2));--graupl-container-breakout:minmax(0,var(--graupl-container-breakout-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)));--graupl-container-feature:minmax(0,var(--graupl-container-feature-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)));display:grid;grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end]}.container>.full-width>:not(.breakout,.full-width,.feature),.container>:not(.breakout,.full-width,.feature){grid-column:content}.container .breakout,.container>.full-width .breakout{grid-column:breakout}.container .feature,.container>.full-width .feature{grid-column:feature}.container .full-width,.container>.full-width .full-width{grid-column:full-width}.columns{display:grid;gap:var(--graupl-columns-gap,var(--graupl-gap,1rem));grid-template-columns:var(--graupl-columns,repeat(auto-fit,minmax(var(--graupl-columns-min-width,calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem))*(var(--graupl-columns-count, 3) - 1))/var(--graupl-columns-count, 3))),var(--graupl-columns-max-width,1fr))))}.columns>*{grid-column:span var(--graupl-columns-span,1)}.count-1{--graupl-columns-count:1}.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.span-4{--graupl-columns-span:4}}@layer graupl.layout{@media screen and (max-width:48ch){.columns{--graupl-columns-min-width:1fr}}}@layer graupl.component{.button{align-items:center;border-radius:var(--graupl-button-border-radius,var(--graupl-border-radius,.125rem));border-style:var(--graupl-botton-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-button-border-width,var(--graupl-border-width,2px));cursor:pointer;display:flex;font-size:var(--graupl-button-font-size,var(--graupl-font-size-default,1rem));justify-content:center;min-height:var(--graupl-button-min-height,44px);min-width:var(--graupl-button-min-width,44px);padding:var(--graupl-button-padding,var(--graupl-button-padding-y,calc(var(--graupl-gap, 1rem)/2)) var(--graupl-button-padding-x,var(--graupl-gap,1rem)));transition:var(--graupl-button-transition,background var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),border-color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease))}.button:hover{transform:var(--graupl-button-hover-transform,none)}.button:active{transform:var(--graupl-button-active-transform,scale(.95))}.button:disabled{cursor:not-allowed}.button:disabled:active,.button:disabled:hover{transform:none}@media (prefers-reduced-motion:reduce){.button{transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease),border-color var(--graupl-transition-timing-function,ease))}.button:hover{transform:var(--graupl-button-hover-transform-reduced-motion,none)}.button:active{transform:var(--graupl-button-active-transform-reduced-motion,scale(.98))}}}@layer graupl.theme{.button{background:var(--graupl-button-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-button-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}.button:hover{background:var(--graupl-button-hover-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-color:var(--graupl-button-hover-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-hover-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button:active{background:var(--graupl-button-active-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-color:var(--graupl-button-active-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-active-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button:disabled,.button:disabled:active,.button:disabled:hover{background:var(--graupl-button-disabled-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.primary{--graupl-button-hover-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-disabled-border-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.button.secondary{--graupl-button-hover-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-disabled-border-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.button.tertiary{--graupl-button-hover-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-disabled-border-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}}@layer graupl.state{:focus-visible{border-color:transparent;box-shadow:var(--graupl-focus-box-shadow,var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-width,var(--graupl-border-width,2px)) 0 0 var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))),0 0 0 var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));outline:var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,2px))) var(--graupl-focus-outline-style,dotted) var(--graupl-focus-outline-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));outline-offset:var(--graupl-focus-outline-offset,calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))))}}@layer graupl.theme{:root{background:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));font-family:var(--graupl-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif);font-size:var(--graupl-font-size,clamp(.85rem,.8rem + .5vw,1.25rem))}.dark-mode{--graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100,var(--graupl-primary--900,#001233));--graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100,var(--graupl-tertiary--900,#2f0412));--graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900,var(--graupl-tertiary--100,#fde7ef));color-scheme:dark}.light-mode{--graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233));--graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef));--graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412));color-scheme:light}}@layer graupl.utilities{.background-primary-100{background:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))!important}.color-primary-100{color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))!important}.background-primary-200{background:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))!important}.color-primary-200{color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))!important}.background-primary-300{background:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))!important}.color-primary-300{color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))!important}.background-primary-400{background:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))!important}.color-primary-400{color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))!important}.background-primary-500{background:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))!important}.color-primary-500{color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))!important}.background-primary-600{background:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))!important}.color-primary-600{color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))!important}.background-primary-700{background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))!important}.color-primary-700{color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))!important}.background-primary-800{background:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))!important}.color-primary-800{color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))!important}.background-primary-900{background:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))!important}.color-primary-900{color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))!important}.background-secondary-100{background:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))!important}.color-secondary-100{color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))!important}.background-secondary-200{background:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))!important}.color-secondary-200{color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))!important}.background-secondary-300{background:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))!important}.color-secondary-300{color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))!important}.background-secondary-400{background:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))!important}.color-secondary-400{color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))!important}.background-secondary-500{background:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))!important}.color-secondary-500{color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))!important}.background-secondary-600{background:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))!important}.color-secondary-600{color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))!important}.background-secondary-700{background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))!important}.color-secondary-700{color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))!important}.background-secondary-800{background:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))!important}.color-secondary-800{color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))!important}.background-secondary-900{background:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))!important}.color-secondary-900{color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))!important}.background-tertiary-100{background:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))!important}.color-tertiary-100{color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))!important}.background-tertiary-200{background:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))!important}.color-tertiary-200{color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))!important}.background-tertiary-300{background:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))!important}.color-tertiary-300{color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))!important}.background-tertiary-400{background:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))!important}.color-tertiary-400{color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))!important}.background-tertiary-500{background:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))!important}.color-tertiary-500{color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))!important}.background-tertiary-600{background:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))!important}.color-tertiary-600{color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))!important}.background-tertiary-700{background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))!important}.color-tertiary-700{color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))!important}.background-tertiary-800{background:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))!important}.color-tertiary-800{color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))!important}.background-tertiary-900{background:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))!important}.color-tertiary-900{color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))!important}}
321
2
  /*# sourceMappingURL=graupl.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["../scss/mixins/_layer.scss","../scss/base/form/_index.scss","../scss/base/form/_variables.scss","graupl.css","../scss/base/link/_index.scss","../scss/base/link/_variables.scss","../scss/layout/container/_index.scss","../scss/layout/columns/_index.scss","../scss/layout/columns/_variables.scss","../scss/component/button/_index.scss","../scss/component/button/_variables.scss","../scss/state/focus/_index.scss","../scss/state/focus/_variables.scss","../scss/theme/_index.scss","../scss/theme/_variables.scss"],"names":[],"mappings":"AASI;ECHF;;;IAGE,4JCGY;IDFZ,8EC2EiB;ID1EjB,iFC8EiB;ID7EjB,sFCiFkB;IDhFlB,8ECGc;ECNhB;EFKE;;;IACE,kBAAA;EEDJ;EFKA;IACE,6GCDc;ECFhB;EFMA;IACE,YAAA;IACA,uDAAA;IACA,iECCW;IDAX,mOCSe;IDRf,mHCoEoB;IDnEpB,sHCuEoB;IDtEpB,4HC0EqB;IDzErB,gHCSiB;ECbnB;EFOI;;;IAGE,kBAAA;EELN;AACF;AHzBI;ECoCF;;;IAGE,sLC+DiB;ID9DjB,6KCFe;IDGf,mKCOU;IDNV,gLC8EiB;ECtFnB;EFUE;IACE,oLCOoB;ECbxB;EFKE;;;IACE,oLCOoB;ECbxB;EFSE;;;IACE,+LCyDwB;IDxDxB,iLCQiB;ECbrB;EFOI;IACE,iOCS2B;ECZjC;EFEI;;;IACE,iOCS2B;ECZjC;EFQA;IACE,8LCHU;ECHZ;EFQE;IACE,qNCIiB;ECVrB;EFUA;IACE,2NC2CoB;ID1CpB,gNC1BkB;ID2BlB,iMCZa;ECIf;EFUE;IACE,6OC0C2B;IDzC3B,wNCHoB;ECLxB;EFUI;IACE,qNCVe;ECErB;AACF;AHrEI;EIHF;IACE,qEAAA;YAAA,6DAAA;IACA,uGCG6B;EFwE/B;AACF;AH3EI;EIIF;IACE,iKCCS;EFyEX;ECxEE;IACE,0KCEa;EFwEjB;ECvEE;IACE,2KCEc;EFuElB;ECtEE;IACE,yKCEe;EFsEnB;ECtEI;IACE,0KCTW;EFiFjB;AACF;AH5FI;EMFF;;IAEE,+FAAA;IACA;;;KAAA;IAIA;;;KAAA;IAIA;;;KAAA;IAKA,YAAA;IACA,6XACE;EH+FJ;EGvFE;;IACE,mBAAA;EH0FJ;EGvFE;;IACE,oBAAA;EH0FJ;EGvFE;;IACE,mBAAA;EH0FJ;EGvFE;;IACE,sBAAA;EH0FJ;AACF;AHhII;EODF;IACE,YAAA;IACA,wTAAA;IAIA,sDCTU;EL0IZ;EI/HE;IACE,8CAAA;EJiIJ;EI5HE;IACE,wBAAA;EJ8HJ;EI3HE;IACE,uBAAA;EJ6HJ;EIlIE;IACE,wBAAA;EJoIJ;EIjIE;IACE,uBAAA;EJmIJ;EIxIE;IACE,wBAAA;EJ0IJ;EIvIE;IACE,uBAAA;EJyIJ;EI9IE;IACE,wBAAA;EJgJJ;EI7IE;IACE,uBAAA;EJ+IJ;EI1IA;IACE;MACE,8BAAA;IJ4IF;EACF;AACF;AHvKI;ESDF;IACE,YAAA;IACA,kBAAA;IACA,sBAAA;IACA,8CCJe;IDKf,gDCDgB;IDEhB,+JCOa;IDNb,0cCcgB;IDbhB,+EC4DkB;ID3DlB,iFC+DkB;ID9DlB,uFCkEmB;IDjEnB,+ECMe;IDLf,cAAA;EN2KF;EMzKE;IACE,oDCemB;EP4JvB;EMxKE;IACE,4DCeoB;EP2JxB;AACF;AH7LI;ESwBF;IACE,kLCwDkB;IDvDlB,8KCagB;IDZhB,oKC0BW;EP8Ib;EMtKE;IACE,wLCuDsB;IDtDtB,oLCYoB;IDXpB,0KCyBe;EP+InB;EMrKE;IACE,yLCqDuB;IDpDvB,qLCUqB;IDTrB,2KCuBgB;EPgJpB;EMpKE;IACE,kKAAA;IACA,mKAAA;IACA,8JAAA;IACA,oKAAA;IACA,qKAAA;ENsKJ;EMnKE;IACE,wKAAA;IACA,yKAAA;IACA,oKAAA;IACA,0KAAA;IACA,2KAAA;ENqKJ;EMlKE;IACE,qKAAA;IACA,sKAAA;IACA,iKAAA;IACA,uKAAA;IACA,wKAAA;ENoKJ;AACF;AHnOI;EWHF;IACE,wBAAA;IACA,qTAAA;IACA,2JCUmB;IDTnB,gpBCqBe;EToNjB;AACF;AH3OI;EaDF;IACE,6ICkMyB;IDjMzB,wICiOyB;IDhOzB,wIC0cU;IDzcV,0EC0cQ;EX3NV;EU3OA;IAEE,2HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,2HAAA;IAGA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IAGA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IAEA,iBAAA;EVuOF;EUnOA;IAEE,4HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,4HAAA;IAGA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IAGA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IAEA,kBAAA;EV+NF;AACF","file":"graupl.css"}
1
+ {"version":3,"sources":["../scss/_init.scss","../scss/mixins/_layer.scss","../scss/base/form/_index.scss","../scss/base/form/_variables.scss","graupl.css","../scss/base/link/_index.scss","../scss/layout/container/_index.scss","../scss/layout/columns/_index.scss","../scss/layout/columns/_variables.scss","../scss/component/button/_index.scss","../scss/component/button/_variables.scss","../scss/mixins/_media-queries.scss","../scss/state/focus/_index.scss","../scss/state/focus/_variables.scss","../scss/theme/_index.scss","../scss/theme/_variables.scss","../scss/utilities/colors/_index.scss"],"names":[],"mappings":"AAEA,iGAAA,CCOI,mBCHF,sBAME,mFCiFkB,CDlFlB,+EC8EiB,CD/EjB,4EC2EiB,CDxEjB,4ECGc,CDPd,sJEEF,CFIE,iDACE,kBEAJ,CFIA,MACE,0GEFF,CFKA,SAOE,wHC0EqB,CD3ErB,mHCuEoB,CDxEpB,gHCoEoB,CDxEpB,YAAA,CACA,sDAAA,CAMA,6GCSiB,CDdjB,8DCCW,CDAX,2NECF,CFMI,4EAGE,kBEJN,CACF,CH1BI,oBCoCF,sBAME,iKC8EiB,CDhFjB,6JCFe,CDCf,uKC+DiB,CD7DjB,mJENF,CFSE,4EACE,qKELJ,CFIE,6DACE,qKELJ,CFQE,iDACE,gLCyDwB,CDxDxB,kKEJJ,CFMI,uGACE,iNEFN,CFCI,wFACE,iNEFN,CFOA,MACE,6KELF,CFOE,+DACE,qMELJ,CFSA,SAEE,+LC1BkB,CDyBlB,2MC2CoB,CDzCpB,gLEPF,CFSE,kBACE,6NC0C2B,CDzC3B,wMEPJ,CFSI,wBACE,qMEPN,CACF,CHtEI,mBIHF,EACE,oEAAA,CAAA,4DAAA,CACA,qGD4EF,CACF,CH5EI,oBIIF,EACE,kJD2EF,CCzEE,QACE,2JD2EJ,CCxEE,SACE,4JD0EJ,CCvEE,UACE,0JDyEJ,CCvEI,gBACE,2JDyEN,CACF,CH7FI,qBKFF,kCAEE,4FAAA,CACA,kLAAA,CAIA,qTAAA,CAIA,oaAAA,CAKA,YAAA,CACA,6XFiGF,CExFE,4GACE,mBF2FJ,CExFE,sDACE,oBF2FJ,CExFE,oDACE,mBF2FJ,CExFE,0DACE,sBF2FJ,CGjIA,SACE,YAAA,CAKA,oDCTU,CDKV,+SHsIF,CGhIE,WACE,6CHkIJ,CG7HE,SACE,wBH+HJ,CG5HE,QACE,uBH8HJ,CGnIE,SACE,wBHqIJ,CGlIE,QACE,uBHoIJ,CGzIE,SACE,wBH2IJ,CGxIE,QACE,uBH0IJ,CG/IE,SACE,wBHiJJ,CG9IE,QACE,uBHgJJ,CAjCF,CHjII,qBMuBF,mCACE,SACE,8BH6IF,CACF,CACF,CHxKI,wBQCF,QAEE,kBAAA,CAQA,oFCsFmB,CDvFnB,+ECmFkB,CDpFlB,6ECgFkB,CD5ElB,cAAA,CAXA,YAAA,CAUA,6ECIe,CDZf,sBAAA,CAEA,+CCHgB,CDEhB,6CCNe,CDQf,yJCKa,CDJb,0bL+KF,CKxKE,cACE,mDL0KJ,CKvKE,eACE,0DLyKJ,CKtKE,iBACE,kBLwKJ,CKtKI,+CAEE,cLuKN,COjMA,uCFgCE,QACE,iOLoKF,CKlKE,cACE,kELoKJ,CKjKE,eACE,yELmKJ,CACF,CACF,CH/MI,oBQiDF,QAEE,8JCEgB,CDHhB,kKCqDkB,CDnDlB,oJLiKF,CK/JE,cAEE,oKCCoB,CDFpB,wKCoDsB,CDlDtB,0JLiKJ,CK9JE,eAEE,qKCDqB,CDArB,yKCkDuB,CDhDvB,2JLgKJ,CKxJI,gEAGE,uKCTqB,CDQrB,2KC0CuB,CDxCvB,6JL8JN,CKzJI,gBACE,oJAAA,CACA,qJAAA,CACA,gJAAA,CACA,sJAAA,CACA,uJAAA,CACA,yJL2JN,CKjKI,kBACE,0JAAA,CACA,2JAAA,CACA,sJAAA,CACA,4JAAA,CACA,6JAAA,CACA,+JLmKN,CKzKI,iBACE,uJAAA,CACA,wJAAA,CACA,mJAAA,CACA,yJAAA,CACA,0JAAA,CACA,4JL2KN,CACF,CHlQI,oBWHF,eACE,wBAAA,CAGA,smBCqBe,CDvBf,iSAAA,CACA,0JRyQF,CACF,CH1QI,oBaAF,MACE,8HAAA,CACA,yHAAA,CACA,gICiGU,CDhGV,oEV6QF,CUzQA,WAGM,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,6GAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAIJ,iBVgSF,CU5RA,YAGM,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,8GAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAIJ,kBVmTF,CACF,CH9UI,wBeGE,wBACE,wIZ8UN,CY3UI,mBACE,mIZ6UN,CYlVI,wBACE,wIZoVN,CYjVI,mBACE,mIZmVN,CYxVI,wBACE,wIZ0VN,CYvVI,mBACE,mIZyVN,CY9VI,wBACE,wIZgWN,CY7VI,mBACE,mIZ+VN,CYpWI,wBACE,wIZsWN,CYnWI,mBACE,mIZqWN,CY1WI,wBACE,wIZ4WN,CYzWI,mBACE,mIZ2WN,CYhXI,wBACE,wIZkXN,CY/WI,mBACE,mIZiXN,CYtXI,wBACE,wIZwXN,CYrXI,mBACE,mIZuXN,CY5XI,wBACE,wIZ8XN,CY3XI,mBACE,mIZ6XN,CYlYI,0BACE,8IZoYN,CYjYI,qBACE,yIZmYN,CYxYI,0BACE,8IZ0YN,CYvYI,qBACE,yIZyYN,CY9YI,0BACE,8IZgZN,CY7YI,qBACE,yIZ+YN,CYpZI,0BACE,8IZsZN,CYnZI,qBACE,yIZqZN,CY1ZI,0BACE,8IZ4ZN,CYzZI,qBACE,yIZ2ZN,CYhaI,0BACE,8IZkaN,CY/ZI,qBACE,yIZiaN,CYtaI,0BACE,8IZwaN,CYraI,qBACE,yIZuaN,CY5aI,0BACE,8IZ8aN,CY3aI,qBACE,yIZ6aN,CYlbI,0BACE,8IZobN,CYjbI,qBACE,yIZmbN,CYxbI,yBACE,2IZ0bN,CYvbI,oBACE,sIZybN,CY9bI,yBACE,2IZgcN,CY7bI,oBACE,sIZ+bN,CYpcI,yBACE,2IZscN,CYncI,oBACE,sIZqcN,CY1cI,yBACE,2IZ4cN,CYzcI,oBACE,sIZ2cN,CYhdI,yBACE,wIZkdN,CY/cI,oBACE,mIZidN,CYtdI,yBACE,2IZwdN,CYrdI,oBACE,sIZudN,CY5dI,yBACE,2IZ8dN,CY3dI,oBACE,sIZ6dN,CYleI,yBACE,2IZoeN,CYjeI,oBACE,sIZmeN,CYxeI,yBACE,2IZ0eN,CYveI,oBACE,sIZyeN,CACF","file":"graupl.css"}
@@ -1,41 +1,2 @@
1
- @layer graupl.layout{
2
- .columns{
3
- display:grid;
4
- grid-template-columns:var(--graupl-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem)) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));
5
- gap:var(--graupl-columns-gap, var(--graupl-gap, 1rem));
6
- }
7
- .columns > *{
8
- grid-column:span var(--graupl-columns-span, 1);
9
- }
10
- .columns-1{
11
- --graupl-columns-count:1;
12
- }
13
- .span-1{
14
- --graupl-columns-span:1;
15
- }
16
- .columns-2{
17
- --graupl-columns-count:2;
18
- }
19
- .span-2{
20
- --graupl-columns-span:2;
21
- }
22
- .columns-3{
23
- --graupl-columns-count:3;
24
- }
25
- .span-3{
26
- --graupl-columns-span:3;
27
- }
28
- .columns-4{
29
- --graupl-columns-count:4;
30
- }
31
- .span-4{
32
- --graupl-columns-span:4;
33
- }
34
- @media screen and (max-width: 48ch){
35
- .columns{
36
- --graupl-columns-min-width:1fr;
37
- }
38
- }
39
- }
40
-
1
+ @layer graupl.layout{.columns{display:grid;gap:var(--graupl-columns-gap,var(--graupl-gap,1rem));grid-template-columns:var(--graupl-columns,repeat(auto-fit,minmax(var(--graupl-columns-min-width,calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem))*(var(--graupl-columns-count, 3) - 1))/var(--graupl-columns-count, 3))),var(--graupl-columns-max-width,1fr))))}.columns>*{grid-column:span var(--graupl-columns-span,1)}.count-1{--graupl-columns-count:1}.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.span-4{--graupl-columns-span:4}@media screen and (max-width:48ch){.columns{--graupl-columns-min-width:1fr}}}
41
2
  /*# sourceMappingURL=columns.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/columns/_index.scss","../../../scss/layout/columns/_variables.scss","columns.css"],"names":[],"mappings":"AASI;ECDF;IACE,YAAA;IACA,wTAAA;IAIA,sDCTU;ECAZ;EFWE;IACE,8CAAA;EETJ;EFcE;IACE,wBAAA;EEZJ;EFeE;IACE,uBAAA;EEbJ;EFQE;IACE,wBAAA;EENJ;EFSE;IACE,uBAAA;EEPJ;EFEE;IACE,wBAAA;EEAJ;EFGE;IACE,uBAAA;EEDJ;EFJE;IACE,wBAAA;EEMJ;EFHE;IACE,uBAAA;EEKJ;EFAA;IACE;MACE,8BAAA;IEEF;EACF;AACF","file":"columns.css"}
1
+ {"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/columns/_index.scss","../../../scss/layout/columns/_variables.scss","columns.css"],"names":[],"mappings":"AASI,qBCDF,SACE,YAAA,CAKA,oDCTU,CDKV,+SELF,CFWE,WACE,6CETJ,CFcE,SACE,wBEZJ,CFeE,QACE,uBEbJ,CFQE,SACE,wBENJ,CFSE,QACE,uBEPJ,CFEE,SACE,wBEAJ,CFGE,QACE,uBEDJ,CFJE,SACE,wBEMJ,CFHE,QACE,uBEKJ,CFAA,mCACE,SACE,8BEEF,CACF,CACF","file":"columns.css"}
@@ -1,38 +1,2 @@
1
- @layer graupl.layout{
2
- .container,
3
- .container > .full-width{
4
- --graupl-container-full-width:minmax(var(--graupl-container-gap, var(--graupl-gap, 1rem)), 1fr);
5
- --graupl-container-content:min(
6
- var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)),
7
- calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem)) * 2)
8
- );
9
- --graupl-container-breakout:minmax(
10
- 0,
11
- var(--graupl-container-breakout-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))
12
- );
13
- --graupl-container-feature:minmax(
14
- 0,
15
- var(--graupl-container-feature-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2))
16
- );
17
- display:grid;
18
- grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end];
19
- }
20
- .container > :not(.breakout, .full-width, .feature),
21
- .container > .full-width > :not(.breakout, .full-width, .feature){
22
- grid-column:content;
23
- }
24
- .container .breakout,
25
- .container > .full-width .breakout{
26
- grid-column:breakout;
27
- }
28
- .container .feature,
29
- .container > .full-width .feature{
30
- grid-column:feature;
31
- }
32
- .container .full-width,
33
- .container > .full-width .full-width{
34
- grid-column:full-width;
35
- }
36
- }
37
-
1
+ @layer graupl.layout{.container,.container>.full-width{--graupl-container-full-width:minmax(var(--graupl-container-gap,var(--graupl-gap,1rem)),1fr);--graupl-container-content:min(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)),calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem))*2));--graupl-container-breakout:minmax(0,var(--graupl-container-breakout-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)));--graupl-container-feature:minmax(0,var(--graupl-container-feature-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)));display:grid;grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end]}.container>.full-width>:not(.breakout,.full-width,.feature),.container>:not(.breakout,.full-width,.feature){grid-column:content}.container .breakout,.container>.full-width .breakout{grid-column:breakout}.container .feature,.container>.full-width .feature{grid-column:feature}.container .full-width,.container>.full-width .full-width{grid-column:full-width}}
38
2
  /*# sourceMappingURL=container.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/container/_index.scss","container.css"],"names":[],"mappings":"AASI;ECFF;;IAEE,+FAAA;IACA;;;KAAA;IAIA;;;KAAA;IAIA;;;KAAA;IAKA,YAAA;IACA,6XACE;ECPJ;EDeE;;IACE,mBAAA;ECZJ;EDeE;;IACE,oBAAA;ECZJ;EDeE;;IACE,mBAAA;ECZJ;EDeE;;IACE,sBAAA;ECZJ;AACF","file":"container.css"}
1
+ {"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/container/_index.scss","container.css"],"names":[],"mappings":"AASI,qBCFF,kCAEE,4FAAA,CACA,kLAAA,CAIA,qTAAA,CAIA,oaAAA,CAKA,YAAA,CACA,6XCNF,CDeE,4GACE,mBCZJ,CDeE,sDACE,oBCZJ,CDeE,oDACE,mBCZJ,CDeE,0DACE,sBCZJ,CACF","file":"container.css"}
@@ -1,10 +1,2 @@
1
- @layer graupl.state{
2
- *:focus-visible{
3
- border-color:transparent;
4
- outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
5
- outline-offset:var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))));
6
- box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
7
- }
8
- }
9
-
1
+ @layer graupl.state{:focus-visible{border-color:transparent;box-shadow:var(--graupl-focus-box-shadow,var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-width,var(--graupl-border-width,2px)) 0 0 var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))),0 0 0 var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));outline:var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,2px))) var(--graupl-focus-outline-style,dotted) var(--graupl-focus-outline-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));outline-offset:var(--graupl-focus-outline-offset,calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))))}}
10
2
  /*# sourceMappingURL=focus.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI;ECHF;IACE,wBAAA;IACA,qTAAA;IACA,2JCUmB;IDTnB,gpBCqBe;ECxBjB;AACF","file":"focus.css"}
1
+ {"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI,oBCHF,eACE,wBAAA,CAGA,smBCqBe,CDvBf,iSAAA,CACA,0JEFF,CACF","file":"focus.css"}