@porsche-design-system/components-angular 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 (53) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/OSS_NOTICE +1649 -5178
  3. package/fesm2022/porsche-design-system-components-angular.mjs +6 -4
  4. package/fesm2022/porsche-design-system-components-angular.mjs.map +1 -1
  5. package/global-styles/cn/index.css +154 -152
  6. package/global-styles/color-scheme.css +95 -95
  7. package/global-styles/index.css +154 -152
  8. package/global-styles/variables.css +59 -57
  9. package/package.json +2 -2
  10. package/tailwindcss/index.css +151 -154
  11. package/types/porsche-design-system-components-angular.d.ts +24 -3
  12. package/vanilla-extract/cjs/tokens/dist/esm/color/palette.cjs +56 -56
  13. package/vanilla-extract/cjs/tokens/dist/esm/font/size/typescaleXs.cjs +1 -1
  14. package/vanilla-extract/cjs/typography/deprecated/text/textLargeStyle.cjs +0 -2
  15. package/vanilla-extract/cjs/typography/deprecated/text/textMediumStyle.cjs +0 -2
  16. package/vanilla-extract/cjs/typography/deprecated/text/textSmallStyle.cjs +0 -2
  17. package/vanilla-extract/cjs/typography/deprecated/text/textXLargeStyle.cjs +0 -2
  18. package/vanilla-extract/cjs/typography/deprecated/text/textXSmallStyle.cjs +0 -2
  19. package/vanilla-extract/cjs/typography/deprecated/text/textXXSmallStyle.cjs +0 -2
  20. package/vanilla-extract/cjs/typography/proseText2XsStyle.cjs +0 -2
  21. package/vanilla-extract/cjs/typography/proseTextLgStyle.cjs +0 -2
  22. package/vanilla-extract/cjs/typography/proseTextMdStyle.cjs +0 -2
  23. package/vanilla-extract/cjs/typography/proseTextSmStyle.cjs +0 -2
  24. package/vanilla-extract/cjs/typography/proseTextXlStyle.cjs +0 -2
  25. package/vanilla-extract/cjs/typography/proseTextXsStyle.cjs +0 -2
  26. package/vanilla-extract/esm/font/deprecated/fontSizeTextXSmall.d.ts +1 -1
  27. package/vanilla-extract/esm/font/typescaleXs.d.ts +1 -1
  28. package/vanilla-extract/esm/tokens/dist/esm/color/palette.mjs +56 -56
  29. package/vanilla-extract/esm/tokens/dist/esm/font/size/typescaleXs.mjs +1 -1
  30. package/vanilla-extract/esm/typography/deprecated/text/textLargeStyle.d.ts +0 -2
  31. package/vanilla-extract/esm/typography/deprecated/text/textLargeStyle.mjs +0 -2
  32. package/vanilla-extract/esm/typography/deprecated/text/textMediumStyle.d.ts +0 -2
  33. package/vanilla-extract/esm/typography/deprecated/text/textMediumStyle.mjs +0 -2
  34. package/vanilla-extract/esm/typography/deprecated/text/textSmallStyle.d.ts +0 -2
  35. package/vanilla-extract/esm/typography/deprecated/text/textSmallStyle.mjs +0 -2
  36. package/vanilla-extract/esm/typography/deprecated/text/textXLargeStyle.d.ts +0 -2
  37. package/vanilla-extract/esm/typography/deprecated/text/textXLargeStyle.mjs +0 -2
  38. package/vanilla-extract/esm/typography/deprecated/text/textXSmallStyle.d.ts +1 -3
  39. package/vanilla-extract/esm/typography/deprecated/text/textXSmallStyle.mjs +0 -2
  40. package/vanilla-extract/esm/typography/deprecated/text/textXXSmallStyle.d.ts +0 -2
  41. package/vanilla-extract/esm/typography/deprecated/text/textXXSmallStyle.mjs +0 -2
  42. package/vanilla-extract/esm/typography/proseText2XsStyle.d.ts +0 -2
  43. package/vanilla-extract/esm/typography/proseText2XsStyle.mjs +0 -2
  44. package/vanilla-extract/esm/typography/proseTextLgStyle.d.ts +0 -2
  45. package/vanilla-extract/esm/typography/proseTextLgStyle.mjs +0 -2
  46. package/vanilla-extract/esm/typography/proseTextMdStyle.d.ts +0 -2
  47. package/vanilla-extract/esm/typography/proseTextMdStyle.mjs +0 -2
  48. package/vanilla-extract/esm/typography/proseTextSmStyle.d.ts +0 -2
  49. package/vanilla-extract/esm/typography/proseTextSmStyle.mjs +0 -2
  50. package/vanilla-extract/esm/typography/proseTextXlStyle.d.ts +0 -2
  51. package/vanilla-extract/esm/typography/proseTextXlStyle.mjs +0 -2
  52. package/vanilla-extract/esm/typography/proseTextXsStyle.d.ts +0 -2
  53. package/vanilla-extract/esm/typography/proseTextXsStyle.mjs +0 -2
package/global-styles/cn/index.css CHANGED
@@ -10,110 +10,112 @@ body {
10
10
  -webkit-text-size-adjust: none;
11
11
  }
12
12
  :root {
13
+ color-scheme: light;
14
+
13
15
  --p-color-focus: light-dark(#1a44ea, #1a44ea);
14
- --p-color-canvas: light-dark(#fff, hsl(225, 66.7%, 1.2%));
15
- --p-color-surface: light-dark(hsl(240, 10%, 95%), hsl(240, 2%, 10%));
16
+ --p-color-canvas: light-dark(#fff, hsl(225 66.7% 1.2%));
17
+ --p-color-surface: light-dark(hsl(240 10% 95%), hsl(240 2% 10%));
16
18
  --p-color-frosted: light-dark(
17
- hsla(240, 5%, 70%, 0.148),
18
- hsla(240, 2%, 43%, 0.228)
19
+ hsl(240 5% 70% / 0.148),
20
+ hsl(240 2% 43% / 0.228)
19
21
  );
20
22
  --p-color-frosted-soft: light-dark(
21
- hsla(234, 9.8%, 60%, 0.06),
22
- hsla(240, 3.7%, 26.5%, 0.154)
23
+ hsl(234 9.8% 60% / 0.06),
24
+ hsl(240 3.7% 26.5% / 0.154)
23
25
  );
24
26
  --p-color-frosted-strong: light-dark(
25
- hsla(236, 6.5%, 42%, 0.236),
26
- hsla(240, 1.5%, 61.8%, 0.302)
27
+ hsl(236 6.5% 42% / 0.236),
28
+ hsl(240 1.5% 61.8% / 0.302)
27
29
  );
28
30
  --p-color-backdrop: light-dark(
29
- hsla(240, 5.3%, 14.9%, 0.5),
30
- hsla(240, 5.3%, 14.9%, 0.5)
31
+ hsl(240 5.3% 14.9% / 0.5),
32
+ hsl(240 5.3% 14.9% / 0.5)
31
33
  );
32
34
  --p-color-contrast-lower: light-dark(
33
- hsla(234, 6%, 32.9%, 0.324),
34
- hsla(240, 1.5%, 61.8%, 0.302)
35
+ hsl(234 6% 32.9% / 0.324),
36
+ hsl(240 1.5% 61.8% / 0.302)
35
37
  );
36
38
  --p-color-contrast-low: light-dark(
37
- hsla(240, 5.3%, 14.9%, 0.5),
38
- hsla(240, 12.5%, 96.9%, 0.45)
39
+ hsl(240 5.3% 14.9% / 0.5),
40
+ hsl(240 12.5% 96.9% / 0.45)
39
41
  );
40
42
  --p-color-contrast-medium: light-dark(
41
- hsla(240, 6.1%, 7%, 0.6),
42
- hsla(240, 12.5%, 96.9%, 0.56)
43
+ hsl(240 6.1% 7% / 0.6),
44
+ hsl(240 12.5% 96.9% / 0.56)
43
45
  );
44
46
  --p-color-contrast-high: light-dark(
45
- hsla(240, 7.1%, 11%, 0.7),
46
- hsla(240, 12.5%, 96.9%, 0.67)
47
+ hsl(240 7.1% 11% / 0.7),
48
+ hsl(240 12.5% 96.9% / 0.67)
47
49
  );
48
50
  --p-color-contrast-higher: light-dark(
49
- hsla(240, 8.7%, 9%, 0.8),
50
- hsla(240, 12.5%, 96.9%, 0.78)
51
+ hsl(240 8.7% 9% / 0.8),
52
+ hsl(240 12.5% 96.9% / 0.78)
51
53
  );
52
- --p-color-primary: light-dark(hsl(225, 66.7%, 1.2%), hsl(225, 100%, 99%));
53
- --p-color-success: light-dark(hsl(115, 77.5%, 27.8%), hsl(157, 84.9%, 41.6%));
54
+ --p-color-primary: light-dark(hsl(225 66.7% 1.2%), hsl(225 100% 99%));
55
+ --p-color-success: light-dark(hsl(115 77.5% 27.8%), hsl(157 84.9% 41.6%));
54
56
  --p-color-success-low: light-dark(
55
- hsla(115, 77.5%, 27.8%, 0.18),
56
- hsla(157, 84.9%, 41.6%, 0.18)
57
+ hsl(115 77.5% 27.8% / 0.18),
58
+ hsl(157 84.9% 41.6% / 0.18)
57
59
  );
58
60
  --p-color-success-medium: light-dark(
59
- hsla(115, 77.5%, 27.8%, 0.6),
60
- hsla(157, 84.9%, 41.6%, 0.6)
61
+ hsl(115 77.5% 27.8% / 0.6),
62
+ hsl(157 84.9% 41.6% / 0.6)
61
63
  );
62
64
  --p-color-success-frosted: light-dark(
63
- hsla(115, 77.5%, 27.8%, 0.18),
64
- hsla(157, 84.9%, 41.6%, 0.26)
65
+ hsl(115 77.5% 27.8% / 0.18),
66
+ hsl(157 84.9% 41.6% / 0.26)
65
67
  );
66
68
  --p-color-success-frosted-soft: light-dark(
67
- hsla(115, 77.5%, 27.8%, 0.1),
68
- hsla(157, 84.9%, 41.6%, 0.1)
69
+ hsl(115 77.5% 27.8% / 0.1),
70
+ hsl(157 84.9% 41.6% / 0.1)
69
71
  );
70
- --p-color-warning: light-dark(hsl(28, 97.7%, 34.1%), hsl(28, 90.2%, 56.1%));
72
+ --p-color-warning: light-dark(hsl(28 97.7% 34.1%), hsl(28 90.2% 56.1%));
71
73
  --p-color-warning-low: light-dark(
72
- hsla(28, 97.7%, 34.1%, 0.18),
73
- hsla(28, 90.2%, 56.1%, 0.18)
74
+ hsl(28 97.7% 34.1% / 0.18),
75
+ hsl(28 90.2% 56.1% / 0.18)
74
76
  );
75
77
  --p-color-warning-medium: light-dark(
76
- hsla(28, 97.7%, 34.1%, 0.6),
77
- hsla(28, 90.2%, 56.1%, 0.6)
78
+ hsl(28 97.7% 34.1% / 0.6),
79
+ hsl(28 90.2% 56.1% / 0.6)
78
80
  );
79
81
  --p-color-warning-frosted: light-dark(
80
- hsla(28, 97.7%, 34.1%, 0.18),
81
- hsla(28, 90.2%, 56.1%, 0.26)
82
+ hsl(28 97.7% 34.1% / 0.18),
83
+ hsl(28 90.2% 56.1% / 0.26)
82
84
  );
83
- --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
84
- --p-color-error: light-dark(hsl(357, 78%, 41%), hsl(0, 96.9%, 62%));
85
+ --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
86
+ --p-color-error: light-dark(hsl(357 78% 41%), hsl(0 96.9% 62%));
85
87
  --p-color-error-low: light-dark(
86
- hsla(357, 78%, 41%, 0.18),
87
- hsla(0, 96.9%, 62%, 0.18)
88
+ hsl(357 78% 41% / 0.18),
89
+ hsl(0 96.9% 62% / 0.18)
88
90
  );
89
91
  --p-color-error-medium: light-dark(
90
- hsla(357, 78%, 41%, 0.6),
91
- hsla(0, 96.9%, 62%, 0.6)
92
+ hsl(357 78% 41% / 0.6),
93
+ hsl(0 96.9% 62% / 0.6)
92
94
  );
93
95
  --p-color-error-frosted: light-dark(
94
- hsla(357, 78%, 41%, 0.18),
95
- hsla(0, 96.9%, 62%, 0.26)
96
+ hsl(357 78% 41% / 0.18),
97
+ hsl(0 96.9% 62% / 0.26)
96
98
  );
97
99
  --p-color-error-frosted-soft: light-dark(
98
- hsla(357, 78%, 41%, 0.1),
99
- hsla(0, 96.9%, 62%, 0.1)
100
+ hsl(357 78% 41% / 0.1),
101
+ hsl(0 96.9% 62% / 0.1)
100
102
  );
101
- --p-color-info: light-dark(hsl(228, 83.2%, 51%), hsl(210, 100%, 54.5%));
103
+ --p-color-info: light-dark(hsl(228 83.2% 51%), hsl(210 100% 54.5%));
102
104
  --p-color-info-low: light-dark(
103
- hsla(228, 83.2%, 51%, 0.18),
104
- hsla(210, 100%, 54.5%, 0.18)
105
+ hsl(228 83.2% 51% / 0.18),
106
+ hsl(210 100% 54.5% / 0.18)
105
107
  );
106
108
  --p-color-info-medium: light-dark(
107
- hsla(228, 83.2%, 51%, 0.6),
108
- hsla(210, 100%, 54.5%, 0.6)
109
+ hsl(228 83.2% 51% / 0.6),
110
+ hsl(210 100% 54.5% / 0.6)
109
111
  );
110
112
  --p-color-info-frosted: light-dark(
111
- hsla(228, 83.2%, 51%, 0.18),
112
- hsla(210, 100%, 54.5%, 0.26)
113
+ hsl(228 83.2% 51% / 0.18),
114
+ hsl(210 100% 54.5% / 0.26)
113
115
  );
114
116
  --p-color-info-frosted-soft: light-dark(
115
- hsla(228, 83.2%, 51%, 0.1),
116
- hsla(210, 100%, 54.5%, 0.1)
117
+ hsl(228 83.2% 51% / 0.1),
118
+ hsl(210 100% 54.5% / 0.1)
117
119
  );
118
120
 
119
121
  --p-font-porsche-next:
@@ -126,7 +128,7 @@ body {
126
128
  --p-leading-normal: calc(6px + 2.125ex);
127
129
 
128
130
  --p-typescale-2xs: 0.75rem;
129
- --p-typescale-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
131
+ --p-typescale-xs: 0.875rem;
130
132
  --p-typescale-sm: 1rem;
131
133
  --p-typescale-md: clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem);
132
134
  --p-typescale-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
@@ -202,111 +204,111 @@ body {
202
204
  .scheme-light-dark {
203
205
  --p-color-focus: #1a44ea;
204
206
  --p-color-canvas: #fff;
205
- --p-color-surface: hsl(240, 10%, 95%);
206
- --p-color-frosted: hsla(240, 5%, 70%, 0.148);
207
- --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
208
- --p-color-frosted-strong: hsla(236, 6.5%, 42%, 0.236);
209
- --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
210
- --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
211
- --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
212
- --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
213
- --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
214
- --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
215
- --p-color-primary: hsl(225, 66.7%, 1.2%);
216
- --p-color-success: hsl(115, 77.5%, 27.8%);
217
- --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
218
- --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
219
- --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
220
- --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
221
- --p-color-warning: hsl(28, 97.7%, 34.1%);
222
- --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
223
- --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
224
- --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
225
- --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
226
- --p-color-error: hsl(357, 78%, 41%);
227
- --p-color-error-low: hsla(357, 78%, 41%, 0.18);
228
- --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
229
- --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
230
- --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
231
- --p-color-info: hsl(228, 83.2%, 51%);
232
- --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
233
- --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
234
- --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
235
- --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
207
+ --p-color-surface: hsl(240 10% 95%);
208
+ --p-color-frosted: hsl(240 5% 70% / 0.148);
209
+ --p-color-frosted-soft: hsl(234 9.8% 60% / 0.06);
210
+ --p-color-frosted-strong: hsl(236 6.5% 42% / 0.236);
211
+ --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
212
+ --p-color-contrast-lower: hsl(234 6% 32.9% / 0.324);
213
+ --p-color-contrast-low: hsl(240 5.3% 14.9% / 0.5);
214
+ --p-color-contrast-medium: hsl(240 6.1% 7% / 0.6);
215
+ --p-color-contrast-high: hsl(240 7.1% 11% / 0.7);
216
+ --p-color-contrast-higher: hsl(240 8.7% 9% / 0.8);
217
+ --p-color-primary: hsl(225 66.7% 1.2%);
218
+ --p-color-success: hsl(115 77.5% 27.8%);
219
+ --p-color-success-low: hsl(115 77.5% 27.8% / 0.18);
220
+ --p-color-success-medium: hsl(115 77.5% 27.8% / 0.6);
221
+ --p-color-success-frosted: hsl(115 77.5% 27.8% / 0.18);
222
+ --p-color-success-frosted-soft: hsl(115 77.5% 27.8% / 0.1);
223
+ --p-color-warning: hsl(28 97.7% 34.1%);
224
+ --p-color-warning-low: hsl(28 97.7% 34.1% / 0.18);
225
+ --p-color-warning-medium: hsl(28 97.7% 34.1% / 0.6);
226
+ --p-color-warning-frosted: hsl(28 97.7% 34.1% / 0.18);
227
+ --p-color-warning-frosted-soft: hsl(28 97.7% 34.1% / 0.1);
228
+ --p-color-error: hsl(357 78% 41%);
229
+ --p-color-error-low: hsl(357 78% 41% / 0.18);
230
+ --p-color-error-medium: hsl(357 78% 41% / 0.6);
231
+ --p-color-error-frosted: hsl(357 78% 41% / 0.18);
232
+ --p-color-error-frosted-soft: hsl(357 78% 41% / 0.1);
233
+ --p-color-info: hsl(228 83.2% 51%);
234
+ --p-color-info-low: hsl(228 83.2% 51% / 0.18);
235
+ --p-color-info-medium: hsl(228 83.2% 51% / 0.6);
236
+ --p-color-info-frosted: hsl(228 83.2% 51% / 0.18);
237
+ --p-color-info-frosted-soft: hsl(228 83.2% 51% / 0.1);
236
238
  }
237
239
 
238
240
  .scheme-dark,
239
241
  .scheme-only-dark {
240
242
  --p-color-focus: #1a44ea;
241
- --p-color-canvas: hsl(225, 66.7%, 1.2%);
242
- --p-color-surface: hsl(240, 2%, 10%);
243
- --p-color-frosted: hsla(240, 2%, 43%, 0.228);
244
- --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
245
- --p-color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
246
- --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
247
- --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
248
- --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
249
- --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
250
- --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
251
- --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
252
- --p-color-primary: hsl(225, 100%, 99%);
253
- --p-color-success: hsl(157, 84.9%, 41.6%);
254
- --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
255
- --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
256
- --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
257
- --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
258
- --p-color-warning: hsl(28, 90.2%, 56.1%);
259
- --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
260
- --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
261
- --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
262
- --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
263
- --p-color-error: hsl(0, 96.9%, 62%);
264
- --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
265
- --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
266
- --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
267
- --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
268
- --p-color-info: hsl(210, 100%, 54.5%);
269
- --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
270
- --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
271
- --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
272
- --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
243
+ --p-color-canvas: hsl(225 66.7% 1.2%);
244
+ --p-color-surface: hsl(240 2% 10%);
245
+ --p-color-frosted: hsl(240 2% 43% / 0.228);
246
+ --p-color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
247
+ --p-color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
248
+ --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
249
+ --p-color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
250
+ --p-color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
251
+ --p-color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
252
+ --p-color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
253
+ --p-color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
254
+ --p-color-primary: hsl(225 100% 99%);
255
+ --p-color-success: hsl(157 84.9% 41.6%);
256
+ --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
257
+ --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
258
+ --p-color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
259
+ --p-color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
260
+ --p-color-warning: hsl(28 90.2% 56.1%);
261
+ --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
262
+ --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
263
+ --p-color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
264
+ --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
265
+ --p-color-error: hsl(0 96.9% 62%);
266
+ --p-color-error-low: hsl(0 96.9% 62% / 0.18);
267
+ --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
268
+ --p-color-error-frosted: hsl(0 96.9% 62% / 0.26);
269
+ --p-color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
270
+ --p-color-info: hsl(210 100% 54.5%);
271
+ --p-color-info-low: hsl(210 100% 54.5% / 0.18);
272
+ --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
273
+ --p-color-info-frosted: hsl(210 100% 54.5% / 0.26);
274
+ --p-color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
273
275
  }
274
276
 
275
277
  @media (prefers-color-scheme: dark) {
276
278
  .scheme-light-dark {
277
279
  --p-color-focus: #1a44ea;
278
- --p-color-canvas: hsl(225, 66.7%, 1.2%);
279
- --p-color-surface: hsl(240, 2%, 10%);
280
- --p-color-frosted: hsla(240, 2%, 43%, 0.228);
281
- --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
282
- --p-color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
283
- --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
284
- --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
285
- --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
286
- --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
287
- --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
288
- --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
289
- --p-color-primary: hsl(225, 100%, 99%);
290
- --p-color-success: hsl(157, 84.9%, 41.6%);
291
- --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
292
- --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
293
- --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
294
- --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
295
- --p-color-warning: hsl(28, 90.2%, 56.1%);
296
- --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
297
- --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
298
- --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
299
- --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
300
- --p-color-error: hsl(0, 96.9%, 62%);
301
- --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
302
- --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
303
- --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
304
- --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
305
- --p-color-info: hsl(210, 100%, 54.5%);
306
- --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
307
- --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
308
- --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
309
- --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
280
+ --p-color-canvas: hsl(225 66.7% 1.2%);
281
+ --p-color-surface: hsl(240 2% 10%);
282
+ --p-color-frosted: hsl(240 2% 43% / 0.228);
283
+ --p-color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
284
+ --p-color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
285
+ --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
286
+ --p-color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
287
+ --p-color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
288
+ --p-color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
289
+ --p-color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
290
+ --p-color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
291
+ --p-color-primary: hsl(225 100% 99%);
292
+ --p-color-success: hsl(157 84.9% 41.6%);
293
+ --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
294
+ --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
295
+ --p-color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
296
+ --p-color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
297
+ --p-color-warning: hsl(28 90.2% 56.1%);
298
+ --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
299
+ --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
300
+ --p-color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
301
+ --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
302
+ --p-color-error: hsl(0 96.9% 62%);
303
+ --p-color-error-low: hsl(0 96.9% 62% / 0.18);
304
+ --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
305
+ --p-color-error-frosted: hsl(0 96.9% 62% / 0.26);
306
+ --p-color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
307
+ --p-color-info: hsl(210 100% 54.5%);
308
+ --p-color-info-low: hsl(210 100% 54.5% / 0.18);
309
+ --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
310
+ --p-color-info-frosted: hsl(210 100% 54.5% / 0.26);
311
+ --p-color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
310
312
  }
311
313
  }
312
314
  }
package/global-styles/color-scheme.css CHANGED
@@ -25,111 +25,111 @@
25
25
  .scheme-light-dark {
26
26
  --p-color-focus: #1a44ea;
27
27
  --p-color-canvas: #fff;
28
- --p-color-surface: hsl(240, 10%, 95%);
29
- --p-color-frosted: hsla(240, 5%, 70%, 0.148);
30
- --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
31
- --p-color-frosted-strong: hsla(236, 6.5%, 42%, 0.236);
32
- --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
33
- --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
34
- --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
35
- --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
36
- --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
37
- --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
38
- --p-color-primary: hsl(225, 66.7%, 1.2%);
39
- --p-color-success: hsl(115, 77.5%, 27.8%);
40
- --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
41
- --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
42
- --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
43
- --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
44
- --p-color-warning: hsl(28, 97.7%, 34.1%);
45
- --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
46
- --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
47
- --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
48
- --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
49
- --p-color-error: hsl(357, 78%, 41%);
50
- --p-color-error-low: hsla(357, 78%, 41%, 0.18);
51
- --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
52
- --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
53
- --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
54
- --p-color-info: hsl(228, 83.2%, 51%);
55
- --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
56
- --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
57
- --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
58
- --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
28
+ --p-color-surface: hsl(240 10% 95%);
29
+ --p-color-frosted: hsl(240 5% 70% / 0.148);
30
+ --p-color-frosted-soft: hsl(234 9.8% 60% / 0.06);
31
+ --p-color-frosted-strong: hsl(236 6.5% 42% / 0.236);
32
+ --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
33
+ --p-color-contrast-lower: hsl(234 6% 32.9% / 0.324);
34
+ --p-color-contrast-low: hsl(240 5.3% 14.9% / 0.5);
35
+ --p-color-contrast-medium: hsl(240 6.1% 7% / 0.6);
36
+ --p-color-contrast-high: hsl(240 7.1% 11% / 0.7);
37
+ --p-color-contrast-higher: hsl(240 8.7% 9% / 0.8);
38
+ --p-color-primary: hsl(225 66.7% 1.2%);
39
+ --p-color-success: hsl(115 77.5% 27.8%);
40
+ --p-color-success-low: hsl(115 77.5% 27.8% / 0.18);
41
+ --p-color-success-medium: hsl(115 77.5% 27.8% / 0.6);
42
+ --p-color-success-frosted: hsl(115 77.5% 27.8% / 0.18);
43
+ --p-color-success-frosted-soft: hsl(115 77.5% 27.8% / 0.1);
44
+ --p-color-warning: hsl(28 97.7% 34.1%);
45
+ --p-color-warning-low: hsl(28 97.7% 34.1% / 0.18);
46
+ --p-color-warning-medium: hsl(28 97.7% 34.1% / 0.6);
47
+ --p-color-warning-frosted: hsl(28 97.7% 34.1% / 0.18);
48
+ --p-color-warning-frosted-soft: hsl(28 97.7% 34.1% / 0.1);
49
+ --p-color-error: hsl(357 78% 41%);
50
+ --p-color-error-low: hsl(357 78% 41% / 0.18);
51
+ --p-color-error-medium: hsl(357 78% 41% / 0.6);
52
+ --p-color-error-frosted: hsl(357 78% 41% / 0.18);
53
+ --p-color-error-frosted-soft: hsl(357 78% 41% / 0.1);
54
+ --p-color-info: hsl(228 83.2% 51%);
55
+ --p-color-info-low: hsl(228 83.2% 51% / 0.18);
56
+ --p-color-info-medium: hsl(228 83.2% 51% / 0.6);
57
+ --p-color-info-frosted: hsl(228 83.2% 51% / 0.18);
58
+ --p-color-info-frosted-soft: hsl(228 83.2% 51% / 0.1);
59
59
  }
60
60
 
61
61
  .scheme-dark,
62
62
  .scheme-only-dark {
63
63
  --p-color-focus: #1a44ea;
64
- --p-color-canvas: hsl(225, 66.7%, 1.2%);
65
- --p-color-surface: hsl(240, 2%, 10%);
66
- --p-color-frosted: hsla(240, 2%, 43%, 0.228);
67
- --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
68
- --p-color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
69
- --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
70
- --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
71
- --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
72
- --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
73
- --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
74
- --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
75
- --p-color-primary: hsl(225, 100%, 99%);
76
- --p-color-success: hsl(157, 84.9%, 41.6%);
77
- --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
78
- --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
79
- --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
80
- --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
81
- --p-color-warning: hsl(28, 90.2%, 56.1%);
82
- --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
83
- --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
84
- --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
85
- --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
86
- --p-color-error: hsl(0, 96.9%, 62%);
87
- --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
88
- --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
89
- --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
90
- --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
91
- --p-color-info: hsl(210, 100%, 54.5%);
92
- --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
93
- --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
94
- --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
95
- --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
64
+ --p-color-canvas: hsl(225 66.7% 1.2%);
65
+ --p-color-surface: hsl(240 2% 10%);
66
+ --p-color-frosted: hsl(240 2% 43% / 0.228);
67
+ --p-color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
68
+ --p-color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
69
+ --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
70
+ --p-color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
71
+ --p-color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
72
+ --p-color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
73
+ --p-color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
74
+ --p-color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
75
+ --p-color-primary: hsl(225 100% 99%);
76
+ --p-color-success: hsl(157 84.9% 41.6%);
77
+ --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
78
+ --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
79
+ --p-color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
80
+ --p-color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
81
+ --p-color-warning: hsl(28 90.2% 56.1%);
82
+ --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
83
+ --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
84
+ --p-color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
85
+ --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
86
+ --p-color-error: hsl(0 96.9% 62%);
87
+ --p-color-error-low: hsl(0 96.9% 62% / 0.18);
88
+ --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
89
+ --p-color-error-frosted: hsl(0 96.9% 62% / 0.26);
90
+ --p-color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
91
+ --p-color-info: hsl(210 100% 54.5%);
92
+ --p-color-info-low: hsl(210 100% 54.5% / 0.18);
93
+ --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
94
+ --p-color-info-frosted: hsl(210 100% 54.5% / 0.26);
95
+ --p-color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
96
96
  }
97
97
 
98
98
  @media (prefers-color-scheme: dark) {
99
99
  .scheme-light-dark {
100
100
  --p-color-focus: #1a44ea;
101
- --p-color-canvas: hsl(225, 66.7%, 1.2%);
102
- --p-color-surface: hsl(240, 2%, 10%);
103
- --p-color-frosted: hsla(240, 2%, 43%, 0.228);
104
- --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
105
- --p-color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
106
- --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
107
- --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
108
- --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
109
- --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
110
- --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
111
- --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
112
- --p-color-primary: hsl(225, 100%, 99%);
113
- --p-color-success: hsl(157, 84.9%, 41.6%);
114
- --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
115
- --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
116
- --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
117
- --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
118
- --p-color-warning: hsl(28, 90.2%, 56.1%);
119
- --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
120
- --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
121
- --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
122
- --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
123
- --p-color-error: hsl(0, 96.9%, 62%);
124
- --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
125
- --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
126
- --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
127
- --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
128
- --p-color-info: hsl(210, 100%, 54.5%);
129
- --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
130
- --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
131
- --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
132
- --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
101
+ --p-color-canvas: hsl(225 66.7% 1.2%);
102
+ --p-color-surface: hsl(240 2% 10%);
103
+ --p-color-frosted: hsl(240 2% 43% / 0.228);
104
+ --p-color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
105
+ --p-color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
106
+ --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
107
+ --p-color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
108
+ --p-color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
109
+ --p-color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
110
+ --p-color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
111
+ --p-color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
112
+ --p-color-primary: hsl(225 100% 99%);
113
+ --p-color-success: hsl(157 84.9% 41.6%);
114
+ --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
115
+ --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
116
+ --p-color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
117
+ --p-color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
118
+ --p-color-warning: hsl(28 90.2% 56.1%);
119
+ --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
120
+ --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
121
+ --p-color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
122
+ --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
123
+ --p-color-error: hsl(0 96.9% 62%);
124
+ --p-color-error-low: hsl(0 96.9% 62% / 0.18);
125
+ --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
126
+ --p-color-error-frosted: hsl(0 96.9% 62% / 0.26);
127
+ --p-color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
128
+ --p-color-info: hsl(210 100% 54.5%);
129
+ --p-color-info-low: hsl(210 100% 54.5% / 0.18);
130
+ --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
131
+ --p-color-info-frosted: hsl(210 100% 54.5% / 0.26);
132
+ --p-color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
133
133
  }
134
134
  }
135
135
  }