@porsche-design-system/components-react 4.0.0-beta.3 → 4.0.0-beta.4

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 (32) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/OSS_NOTICE +1649 -5178
  3. package/cjs/lib/components/heading.wrapper.cjs +3 -3
  4. package/cjs/lib/components/text.wrapper.cjs +3 -3
  5. package/esm/lib/components/heading.wrapper.d.ts +21 -13
  6. package/esm/lib/components/heading.wrapper.mjs +3 -3
  7. package/esm/lib/components/text.wrapper.d.ts +21 -13
  8. package/esm/lib/components/text.wrapper.mjs +3 -3
  9. package/esm/lib/types.d.ts +19 -0
  10. package/global-styles/cn/index.css +154 -152
  11. package/global-styles/color-scheme.css +95 -95
  12. package/global-styles/index.css +154 -152
  13. package/global-styles/variables.css +59 -57
  14. package/package.json +2 -2
  15. package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs +78 -199
  16. package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs +3 -11
  17. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/heading.wrapper.cjs +4 -4
  18. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/text.wrapper.cjs +4 -4
  19. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.cjs +1 -1
  20. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/heading.cjs +1 -1
  21. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text.cjs +1 -1
  22. package/ssr/esm/components/dist/styles/esm/styles-entry.mjs +78 -199
  23. package/ssr/esm/components/dist/utils/esm/utils-entry.mjs +3 -11
  24. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/heading.wrapper.mjs +4 -4
  25. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/text.wrapper.mjs +4 -4
  26. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.mjs +1 -1
  27. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/heading.mjs +1 -1
  28. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text.mjs +1 -1
  29. package/ssr/esm/lib/components/heading.wrapper.d.ts +21 -13
  30. package/ssr/esm/lib/components/text.wrapper.d.ts +21 -13
  31. package/ssr/esm/lib/types.d.ts +19 -0
  32. package/tailwindcss/index.css +151 -154
package/tailwindcss/index.css CHANGED
@@ -11,109 +11,106 @@
11
11
  --color-white: #fff;
12
12
 
13
13
  --color-focus: light-dark(#1a44ea, #1a44ea);
14
- --color-canvas: light-dark(#fff, hsl(225, 66.7%, 1.2%));
15
- --color-surface: light-dark(hsl(240, 10%, 95%), hsl(240, 2%, 10%));
16
- --color-frosted: light-dark(
17
- hsla(240, 5%, 70%, 0.148),
18
- hsla(240, 2%, 43%, 0.228)
19
- );
14
+ --color-canvas: light-dark(#fff, hsl(225 66.7% 1.2%));
15
+ --color-surface: light-dark(hsl(240 10% 95%), hsl(240 2% 10%));
16
+ --color-frosted: light-dark(hsl(240 5% 70% / 0.148), hsl(240 2% 43% / 0.228));
20
17
  --color-frosted-soft: light-dark(
21
- hsla(234, 9.8%, 60%, 0.06),
22
- hsla(240, 3.7%, 26.5%, 0.154)
18
+ hsl(234 9.8% 60% / 0.06),
19
+ hsl(240 3.7% 26.5% / 0.154)
23
20
  );
24
21
  --color-frosted-strong: light-dark(
25
- hsla(236, 6.5%, 42%, 0.236),
26
- hsla(240, 1.5%, 61.8%, 0.302)
22
+ hsl(236 6.5% 42% / 0.236),
23
+ hsl(240 1.5% 61.8% / 0.302)
27
24
  );
28
25
  --color-backdrop: light-dark(
29
- hsla(240, 5.3%, 14.9%, 0.5),
30
- hsla(240, 5.3%, 14.9%, 0.5)
26
+ hsl(240 5.3% 14.9% / 0.5),
27
+ hsl(240 5.3% 14.9% / 0.5)
31
28
  );
32
29
  --color-contrast-lower: light-dark(
33
- hsla(234, 6%, 32.9%, 0.324),
34
- hsla(240, 1.5%, 61.8%, 0.302)
30
+ hsl(234 6% 32.9% / 0.324),
31
+ hsl(240 1.5% 61.8% / 0.302)
35
32
  );
36
33
  --color-contrast-low: light-dark(
37
- hsla(240, 5.3%, 14.9%, 0.5),
38
- hsla(240, 12.5%, 96.9%, 0.45)
34
+ hsl(240 5.3% 14.9% / 0.5),
35
+ hsl(240 12.5% 96.9% / 0.45)
39
36
  );
40
37
  --color-contrast-medium: light-dark(
41
- hsla(240, 6.1%, 7%, 0.6),
42
- hsla(240, 12.5%, 96.9%, 0.56)
38
+ hsl(240 6.1% 7% / 0.6),
39
+ hsl(240 12.5% 96.9% / 0.56)
43
40
  );
44
41
  --color-contrast-high: light-dark(
45
- hsla(240, 7.1%, 11%, 0.7),
46
- hsla(240, 12.5%, 96.9%, 0.67)
42
+ hsl(240 7.1% 11% / 0.7),
43
+ hsl(240 12.5% 96.9% / 0.67)
47
44
  );
48
45
  --color-contrast-higher: light-dark(
49
- hsla(240, 8.7%, 9%, 0.8),
50
- hsla(240, 12.5%, 96.9%, 0.78)
46
+ hsl(240 8.7% 9% / 0.8),
47
+ hsl(240 12.5% 96.9% / 0.78)
51
48
  );
52
- --color-primary: light-dark(hsl(225, 66.7%, 1.2%), hsl(225, 100%, 99%));
53
- --color-success: light-dark(hsl(115, 77.5%, 27.8%), hsl(157, 84.9%, 41.6%));
49
+ --color-primary: light-dark(hsl(225 66.7% 1.2%), hsl(225 100% 99%));
50
+ --color-success: light-dark(hsl(115 77.5% 27.8%), hsl(157 84.9% 41.6%));
54
51
  --color-success-low: light-dark(
55
- hsla(115, 77.5%, 27.8%, 0.18),
56
- hsla(157, 84.9%, 41.6%, 0.18)
52
+ hsl(115 77.5% 27.8% / 0.18),
53
+ hsl(157 84.9% 41.6% / 0.18)
57
54
  );
58
55
  --color-success-medium: light-dark(
59
- hsla(115, 77.5%, 27.8%, 0.6),
60
- hsla(157, 84.9%, 41.6%, 0.6)
56
+ hsl(115 77.5% 27.8% / 0.6),
57
+ hsl(157 84.9% 41.6% / 0.6)
61
58
  );
62
59
  --color-success-frosted: light-dark(
63
- hsla(115, 77.5%, 27.8%, 0.18),
64
- hsla(157, 84.9%, 41.6%, 0.26)
60
+ hsl(115 77.5% 27.8% / 0.18),
61
+ hsl(157 84.9% 41.6% / 0.26)
65
62
  );
66
63
  --color-success-frosted-soft: light-dark(
67
- hsla(115, 77.5%, 27.8%, 0.1),
68
- hsla(157, 84.9%, 41.6%, 0.1)
64
+ hsl(115 77.5% 27.8% / 0.1),
65
+ hsl(157 84.9% 41.6% / 0.1)
69
66
  );
70
- --color-warning: light-dark(hsl(28, 97.7%, 34.1%), hsl(28, 90.2%, 56.1%));
67
+ --color-warning: light-dark(hsl(28 97.7% 34.1%), hsl(28 90.2% 56.1%));
71
68
  --color-warning-low: light-dark(
72
- hsla(28, 97.7%, 34.1%, 0.18),
73
- hsla(28, 90.2%, 56.1%, 0.18)
69
+ hsl(28 97.7% 34.1% / 0.18),
70
+ hsl(28 90.2% 56.1% / 0.18)
74
71
  );
75
72
  --color-warning-medium: light-dark(
76
- hsla(28, 97.7%, 34.1%, 0.6),
77
- hsla(28, 90.2%, 56.1%, 0.6)
73
+ hsl(28 97.7% 34.1% / 0.6),
74
+ hsl(28 90.2% 56.1% / 0.6)
78
75
  );
79
76
  --color-warning-frosted: light-dark(
80
- hsla(28, 97.7%, 34.1%, 0.18),
81
- hsla(28, 90.2%, 56.1%, 0.26)
77
+ hsl(28 97.7% 34.1% / 0.18),
78
+ hsl(28 90.2% 56.1% / 0.26)
82
79
  );
83
- --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
84
- --color-error: light-dark(hsl(357, 78%, 41%), hsl(0, 96.9%, 62%));
80
+ --color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
81
+ --color-error: light-dark(hsl(357 78% 41%), hsl(0 96.9% 62%));
85
82
  --color-error-low: light-dark(
86
- hsla(357, 78%, 41%, 0.18),
87
- hsla(0, 96.9%, 62%, 0.18)
83
+ hsl(357 78% 41% / 0.18),
84
+ hsl(0 96.9% 62% / 0.18)
88
85
  );
89
86
  --color-error-medium: light-dark(
90
- hsla(357, 78%, 41%, 0.6),
91
- hsla(0, 96.9%, 62%, 0.6)
87
+ hsl(357 78% 41% / 0.6),
88
+ hsl(0 96.9% 62% / 0.6)
92
89
  );
93
90
  --color-error-frosted: light-dark(
94
- hsla(357, 78%, 41%, 0.18),
95
- hsla(0, 96.9%, 62%, 0.26)
91
+ hsl(357 78% 41% / 0.18),
92
+ hsl(0 96.9% 62% / 0.26)
96
93
  );
97
94
  --color-error-frosted-soft: light-dark(
98
- hsla(357, 78%, 41%, 0.1),
99
- hsla(0, 96.9%, 62%, 0.1)
95
+ hsl(357 78% 41% / 0.1),
96
+ hsl(0 96.9% 62% / 0.1)
100
97
  );
101
- --color-info: light-dark(hsl(228, 83.2%, 51%), hsl(210, 100%, 54.5%));
98
+ --color-info: light-dark(hsl(228 83.2% 51%), hsl(210 100% 54.5%));
102
99
  --color-info-low: light-dark(
103
- hsla(228, 83.2%, 51%, 0.18),
104
- hsla(210, 100%, 54.5%, 0.18)
100
+ hsl(228 83.2% 51% / 0.18),
101
+ hsl(210 100% 54.5% / 0.18)
105
102
  );
106
103
  --color-info-medium: light-dark(
107
- hsla(228, 83.2%, 51%, 0.6),
108
- hsla(210, 100%, 54.5%, 0.6)
104
+ hsl(228 83.2% 51% / 0.6),
105
+ hsl(210 100% 54.5% / 0.6)
109
106
  );
110
107
  --color-info-frosted: light-dark(
111
- hsla(228, 83.2%, 51%, 0.18),
112
- hsla(210, 100%, 54.5%, 0.26)
108
+ hsl(228 83.2% 51% / 0.18),
109
+ hsl(210 100% 54.5% / 0.26)
113
110
  );
114
111
  --color-info-frosted-soft: light-dark(
115
- hsla(228, 83.2%, 51%, 0.1),
116
- hsla(210, 100%, 54.5%, 0.1)
112
+ hsl(228 83.2% 51% / 0.1),
113
+ hsl(210 100% 54.5% / 0.1)
117
114
  );
118
115
 
119
116
  /* Typography */
@@ -129,7 +126,7 @@
129
126
 
130
127
  --text-2xs: 0.75rem;
131
128
  --text-2xs--line-height: calc(6px + 2.125ex);
132
- --text-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
129
+ --text-xs: 0.875rem;
133
130
  --text-xs--line-height: calc(6px + 2.125ex);
134
131
  --text-base: 1rem;
135
132
  --text-base--line-height: calc(6px + 2.125ex);
@@ -249,111 +246,111 @@
249
246
  .scheme-light-dark {
250
247
  --color-focus: #1a44ea;
251
248
  --color-canvas: #fff;
252
- --color-surface: hsl(240, 10%, 95%);
253
- --color-frosted: hsla(240, 5%, 70%, 0.148);
254
- --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
255
- --color-frosted-strong: hsla(236, 6.5%, 42%, 0.236);
256
- --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
257
- --color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
258
- --color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
259
- --color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
260
- --color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
261
- --color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
262
- --color-primary: hsl(225, 66.7%, 1.2%);
263
- --color-success: hsl(115, 77.5%, 27.8%);
264
- --color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
265
- --color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
266
- --color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
267
- --color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
268
- --color-warning: hsl(28, 97.7%, 34.1%);
269
- --color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
270
- --color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
271
- --color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
272
- --color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
273
- --color-error: hsl(357, 78%, 41%);
274
- --color-error-low: hsla(357, 78%, 41%, 0.18);
275
- --color-error-medium: hsla(357, 78%, 41%, 0.6);
276
- --color-error-frosted: hsla(357, 78%, 41%, 0.18);
277
- --color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
278
- --color-info: hsl(228, 83.2%, 51%);
279
- --color-info-low: hsla(228, 83.2%, 51%, 0.18);
280
- --color-info-medium: hsla(228, 83.2%, 51%, 0.6);
281
- --color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
282
- --color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
249
+ --color-surface: hsl(240 10% 95%);
250
+ --color-frosted: hsl(240 5% 70% / 0.148);
251
+ --color-frosted-soft: hsl(234 9.8% 60% / 0.06);
252
+ --color-frosted-strong: hsl(236 6.5% 42% / 0.236);
253
+ --color-backdrop: hsl(240 5.3% 14.9% / 0.5);
254
+ --color-contrast-lower: hsl(234 6% 32.9% / 0.324);
255
+ --color-contrast-low: hsl(240 5.3% 14.9% / 0.5);
256
+ --color-contrast-medium: hsl(240 6.1% 7% / 0.6);
257
+ --color-contrast-high: hsl(240 7.1% 11% / 0.7);
258
+ --color-contrast-higher: hsl(240 8.7% 9% / 0.8);
259
+ --color-primary: hsl(225 66.7% 1.2%);
260
+ --color-success: hsl(115 77.5% 27.8%);
261
+ --color-success-low: hsl(115 77.5% 27.8% / 0.18);
262
+ --color-success-medium: hsl(115 77.5% 27.8% / 0.6);
263
+ --color-success-frosted: hsl(115 77.5% 27.8% / 0.18);
264
+ --color-success-frosted-soft: hsl(115 77.5% 27.8% / 0.1);
265
+ --color-warning: hsl(28 97.7% 34.1%);
266
+ --color-warning-low: hsl(28 97.7% 34.1% / 0.18);
267
+ --color-warning-medium: hsl(28 97.7% 34.1% / 0.6);
268
+ --color-warning-frosted: hsl(28 97.7% 34.1% / 0.18);
269
+ --color-warning-frosted-soft: hsl(28 97.7% 34.1% / 0.1);
270
+ --color-error: hsl(357 78% 41%);
271
+ --color-error-low: hsl(357 78% 41% / 0.18);
272
+ --color-error-medium: hsl(357 78% 41% / 0.6);
273
+ --color-error-frosted: hsl(357 78% 41% / 0.18);
274
+ --color-error-frosted-soft: hsl(357 78% 41% / 0.1);
275
+ --color-info: hsl(228 83.2% 51%);
276
+ --color-info-low: hsl(228 83.2% 51% / 0.18);
277
+ --color-info-medium: hsl(228 83.2% 51% / 0.6);
278
+ --color-info-frosted: hsl(228 83.2% 51% / 0.18);
279
+ --color-info-frosted-soft: hsl(228 83.2% 51% / 0.1);
283
280
  }
284
281
 
285
282
  .scheme-dark,
286
283
  .scheme-only-dark {
287
284
  --color-focus: #1a44ea;
288
- --color-canvas: hsl(225, 66.7%, 1.2%);
289
- --color-surface: hsl(240, 2%, 10%);
290
- --color-frosted: hsla(240, 2%, 43%, 0.228);
291
- --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
292
- --color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
293
- --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
294
- --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
295
- --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
296
- --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
297
- --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
298
- --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
299
- --color-primary: hsl(225, 100%, 99%);
300
- --color-success: hsl(157, 84.9%, 41.6%);
301
- --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
302
- --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
303
- --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
304
- --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
305
- --color-warning: hsl(28, 90.2%, 56.1%);
306
- --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
307
- --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
308
- --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
309
- --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
310
- --color-error: hsl(0, 96.9%, 62%);
311
- --color-error-low: hsla(0, 96.9%, 62%, 0.18);
312
- --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
313
- --color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
314
- --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
315
- --color-info: hsl(210, 100%, 54.5%);
316
- --color-info-low: hsla(210, 100%, 54.5%, 0.18);
317
- --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
318
- --color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
319
- --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
285
+ --color-canvas: hsl(225 66.7% 1.2%);
286
+ --color-surface: hsl(240 2% 10%);
287
+ --color-frosted: hsl(240 2% 43% / 0.228);
288
+ --color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
289
+ --color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
290
+ --color-backdrop: hsl(240 5.3% 14.9% / 0.5);
291
+ --color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
292
+ --color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
293
+ --color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
294
+ --color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
295
+ --color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
296
+ --color-primary: hsl(225 100% 99%);
297
+ --color-success: hsl(157 84.9% 41.6%);
298
+ --color-success-low: hsl(157 84.9% 41.6% / 0.18);
299
+ --color-success-medium: hsl(157 84.9% 41.6% / 0.6);
300
+ --color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
301
+ --color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
302
+ --color-warning: hsl(28 90.2% 56.1%);
303
+ --color-warning-low: hsl(28 90.2% 56.1% / 0.18);
304
+ --color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
305
+ --color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
306
+ --color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
307
+ --color-error: hsl(0 96.9% 62%);
308
+ --color-error-low: hsl(0 96.9% 62% / 0.18);
309
+ --color-error-medium: hsl(0 96.9% 62% / 0.6);
310
+ --color-error-frosted: hsl(0 96.9% 62% / 0.26);
311
+ --color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
312
+ --color-info: hsl(210 100% 54.5%);
313
+ --color-info-low: hsl(210 100% 54.5% / 0.18);
314
+ --color-info-medium: hsl(210 100% 54.5% / 0.6);
315
+ --color-info-frosted: hsl(210 100% 54.5% / 0.26);
316
+ --color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
320
317
  }
321
318
 
322
319
  @media (prefers-color-scheme: dark) {
323
320
  .scheme-light-dark {
324
321
  --color-focus: #1a44ea;
325
- --color-canvas: hsl(225, 66.7%, 1.2%);
326
- --color-surface: hsl(240, 2%, 10%);
327
- --color-frosted: hsla(240, 2%, 43%, 0.228);
328
- --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
329
- --color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
330
- --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
331
- --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
332
- --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
333
- --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
334
- --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
335
- --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
336
- --color-primary: hsl(225, 100%, 99%);
337
- --color-success: hsl(157, 84.9%, 41.6%);
338
- --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
339
- --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
340
- --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
341
- --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
342
- --color-warning: hsl(28, 90.2%, 56.1%);
343
- --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
344
- --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
345
- --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
346
- --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
347
- --color-error: hsl(0, 96.9%, 62%);
348
- --color-error-low: hsla(0, 96.9%, 62%, 0.18);
349
- --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
350
- --color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
351
- --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
352
- --color-info: hsl(210, 100%, 54.5%);
353
- --color-info-low: hsla(210, 100%, 54.5%, 0.18);
354
- --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
355
- --color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
356
- --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
322
+ --color-canvas: hsl(225 66.7% 1.2%);
323
+ --color-surface: hsl(240 2% 10%);
324
+ --color-frosted: hsl(240 2% 43% / 0.228);
325
+ --color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
326
+ --color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
327
+ --color-backdrop: hsl(240 5.3% 14.9% / 0.5);
328
+ --color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
329
+ --color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
330
+ --color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
331
+ --color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
332
+ --color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
333
+ --color-primary: hsl(225 100% 99%);
334
+ --color-success: hsl(157 84.9% 41.6%);
335
+ --color-success-low: hsl(157 84.9% 41.6% / 0.18);
336
+ --color-success-medium: hsl(157 84.9% 41.6% / 0.6);
337
+ --color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
338
+ --color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
339
+ --color-warning: hsl(28 90.2% 56.1%);
340
+ --color-warning-low: hsl(28 90.2% 56.1% / 0.18);
341
+ --color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
342
+ --color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
343
+ --color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
344
+ --color-error: hsl(0 96.9% 62%);
345
+ --color-error-low: hsl(0 96.9% 62% / 0.18);
346
+ --color-error-medium: hsl(0 96.9% 62% / 0.6);
347
+ --color-error-frosted: hsl(0 96.9% 62% / 0.26);
348
+ --color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
349
+ --color-info: hsl(210 100% 54.5%);
350
+ --color-info-low: hsl(210 100% 54.5% / 0.18);
351
+ --color-info-medium: hsl(210 100% 54.5% / 0.6);
352
+ --color-info-frosted: hsl(210 100% 54.5% / 0.26);
353
+ --color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
357
354
  }
358
355
  }
359
356
  }