@porsche-design-system/components-angular 3.31.0-rc.0 → 4.0.0-alpha.0

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 (19) hide show
  1. package/CHANGELOG.md +252 -1
  2. package/fesm2022/porsche-design-system-components-angular.mjs +343 -708
  3. package/fesm2022/porsche-design-system-components-angular.mjs.map +1 -1
  4. package/global-styles/cn/font-face.css +1 -0
  5. package/global-styles/cn/index.css +168 -0
  6. package/global-styles/font-face.css +1 -0
  7. package/global-styles/index.css +168 -0
  8. package/global-styles/legacy-radius.css +5 -0
  9. package/global-styles/normalize.css +11 -0
  10. package/global-styles/variables.css +156 -0
  11. package/index.d.ts +370 -986
  12. package/package.json +29 -8
  13. package/tailwindcss/index.css +174 -152
  14. package/tokens/cjs/index.cjs +12 -0
  15. package/tokens/esm/index.d.ts +1 -0
  16. package/tokens/esm/index.mjs +1 -0
  17. /package/styles/vanilla-extract/cjs/{vanilla-extract/index.cjs → index.cjs} +0 -0
  18. /package/styles/vanilla-extract/esm/{vanilla-extract/index.d.ts → index.d.ts} +0 -0
  19. /package/styles/vanilla-extract/esm/{vanilla-extract/index.mjs → index.mjs} +0 -0
package/global-styles/cn/font-face.css ADDED
@@ -0,0 +1 @@
1
+ @font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-bold.1796b39.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-regular.413b375.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-bold.4cb90bb.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-regular.b845952.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-semi-bold.378f7d5.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-bold.d2546b1.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-regular.0b3d9b3.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-semi-bold.f3a9ae0.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-bold.0fbdc6d.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-bold.f30f194.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-regular.3989814.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-bold.b9e9f23.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-regular.ac04c30.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-semi-bold.8d53572.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-bold.49a86a4.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-regular.ad23819.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}
package/global-styles/cn/index.css ADDED
@@ -0,0 +1,168 @@
1
+ html,
2
+ body {
3
+ margin: 0;
4
+ padding: 0;
5
+ font-family:
6
+ "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
7
+ line-height: calc(6px + 2.125ex);
8
+ letter-spacing: normal;
9
+ text-size-adjust: none;
10
+ -webkit-text-size-adjust: none;
11
+ }
12
+ :root {
13
+ --p-color-focus: #1a44ea;
14
+ --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
15
+ --p-color-canvas: #fff;
16
+ --p-color-surface: hsl(240, 7.7%, 97.5%);
17
+ --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
18
+ --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
19
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
20
+ --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
21
+ --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
22
+ --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
23
+ --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
24
+ --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
25
+ --p-color-primary: hsl(225, 66.7%, 1.2%);
26
+ --p-color-success: hsl(115, 77.5%, 27.8%);
27
+ --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
28
+ --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
29
+ --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
30
+ --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
31
+ --p-color-warning: hsl(28, 97.7%, 34.1%);
32
+ --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
33
+ --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
34
+ --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
35
+ --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
36
+ --p-color-error: hsl(357, 78%, 41%);
37
+ --p-color-error-low: hsla(357, 78%, 41%, 0.18);
38
+ --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
39
+ --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
40
+ --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
41
+ --p-color-info: hsl(228, 83.2%, 51%);
42
+ --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
43
+ --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
44
+ --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
45
+ --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
46
+ --p-color-skeleton: #f7f7f7;
47
+
48
+ --p-radius-xs: 2px;
49
+ --p-radius-sm: 4px;
50
+ --p-radius-md: 6px;
51
+ --p-radius-lg: 8px;
52
+ --p-radius-xl: 12px;
53
+ --p-radius-2xl: 16px;
54
+ --p-radius-3xl: 24px;
55
+ --p-radius-4xl: 32px;
56
+ --p-radius-full: calc(infinity * 1px);
57
+ }
58
+ .light {
59
+ --p-color-focus: #1a44ea;
60
+ --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
61
+ --p-color-canvas: #fff;
62
+ --p-color-surface: hsl(240, 7.7%, 97.5%);
63
+ --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
64
+ --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
65
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
66
+ --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
67
+ --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
68
+ --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
69
+ --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
70
+ --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
71
+ --p-color-primary: hsl(225, 66.7%, 1.2%);
72
+ --p-color-success: hsl(115, 77.5%, 27.8%);
73
+ --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
74
+ --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
75
+ --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
76
+ --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
77
+ --p-color-warning: hsl(28, 97.7%, 34.1%);
78
+ --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
79
+ --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
80
+ --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
81
+ --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
82
+ --p-color-error: hsl(357, 78%, 41%);
83
+ --p-color-error-low: hsla(357, 78%, 41%, 0.18);
84
+ --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
85
+ --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
86
+ --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
87
+ --p-color-info: hsl(228, 83.2%, 51%);
88
+ --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
89
+ --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
90
+ --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
91
+ --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
92
+ --p-color-skeleton: #f7f7f7;
93
+ }
94
+ .dark {
95
+ --p-color-focus: #1a44ea;
96
+ --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
97
+ --p-color-canvas: hsl(225, 66.7%, 1.2%);
98
+ --p-color-surface: hsl(240, 2%, 10%);
99
+ --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
100
+ --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
101
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
102
+ --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
103
+ --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
104
+ --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
105
+ --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
106
+ --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
107
+ --p-color-primary: hsl(240, 12.5%, 96.9%);
108
+ --p-color-success: hsl(157, 84.9%, 41.6%);
109
+ --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
110
+ --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
111
+ --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
112
+ --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
113
+ --p-color-warning: hsl(28, 90.2%, 56.1%);
114
+ --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
115
+ --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
116
+ --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
117
+ --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
118
+ --p-color-error: hsl(0, 96.9%, 62%);
119
+ --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
120
+ --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
121
+ --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
122
+ --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
123
+ --p-color-info: hsl(210, 100%, 54.5%);
124
+ --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
125
+ --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
126
+ --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
127
+ --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
128
+ --p-color-skeleton: #1a1b1e;
129
+ }
130
+ .auto {
131
+ @media (prefers-color-scheme: dark) {
132
+ --p-color-focus: #1a44ea;
133
+ --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
134
+ --p-color-canvas: hsl(225, 66.7%, 1.2%);
135
+ --p-color-surface: hsl(240, 2%, 10%);
136
+ --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
137
+ --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
138
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
139
+ --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
140
+ --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
141
+ --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
142
+ --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
143
+ --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
144
+ --p-color-primary: hsl(240, 12.5%, 96.9%);
145
+ --p-color-success: hsl(157, 84.9%, 41.6%);
146
+ --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
147
+ --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
148
+ --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
149
+ --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
150
+ --p-color-warning: hsl(28, 90.2%, 56.1%);
151
+ --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
152
+ --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
153
+ --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
154
+ --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
155
+ --p-color-error: hsl(0, 96.9%, 62%);
156
+ --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
157
+ --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
158
+ --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
159
+ --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
160
+ --p-color-info: hsl(210, 100%, 54.5%);
161
+ --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
162
+ --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
163
+ --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
164
+ --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
165
+ --p-color-skeleton: #1a1b1e;
166
+ }
167
+ }
168
+ @font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-bold.1796b39.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-regular.413b375.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-bold.4cb90bb.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-regular.b845952.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-semi-bold.378f7d5.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-bold.d2546b1.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-regular.0b3d9b3.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-semi-bold.f3a9ae0.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-bold.0fbdc6d.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-bold.f30f194.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-regular.3989814.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-bold.b9e9f23.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-regular.ac04c30.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-semi-bold.8d53572.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-bold.49a86a4.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-regular.ad23819.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}
package/global-styles/font-face.css ADDED
@@ -0,0 +1 @@
1
+ @font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-arabic-bold.1796b39.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-arabic-regular.413b375.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-bold.4cb90bb.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-regular.b845952.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-semi-bold.378f7d5.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-bold.d2546b1.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-regular.0b3d9b3.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-semi-bold.f3a9ae0.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-bold.0fbdc6d.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-pashto-bold.f30f194.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-pashto-regular.3989814.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-bold.b9e9f23.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-regular.ac04c30.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-semi-bold.8d53572.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-urdu-bold.49a86a4.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-urdu-regular.ad23819.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}
package/global-styles/index.css ADDED
@@ -0,0 +1,168 @@
1
+ html,
2
+ body {
3
+ margin: 0;
4
+ padding: 0;
5
+ font-family:
6
+ "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
7
+ line-height: calc(6px + 2.125ex);
8
+ letter-spacing: normal;
9
+ text-size-adjust: none;
10
+ -webkit-text-size-adjust: none;
11
+ }
12
+ :root {
13
+ --p-color-focus: #1a44ea;
14
+ --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
15
+ --p-color-canvas: #fff;
16
+ --p-color-surface: hsl(240, 7.7%, 97.5%);
17
+ --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
18
+ --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
19
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
20
+ --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
21
+ --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
22
+ --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
23
+ --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
24
+ --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
25
+ --p-color-primary: hsl(225, 66.7%, 1.2%);
26
+ --p-color-success: hsl(115, 77.5%, 27.8%);
27
+ --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
28
+ --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
29
+ --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
30
+ --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
31
+ --p-color-warning: hsl(28, 97.7%, 34.1%);
32
+ --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
33
+ --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
34
+ --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
35
+ --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
36
+ --p-color-error: hsl(357, 78%, 41%);
37
+ --p-color-error-low: hsla(357, 78%, 41%, 0.18);
38
+ --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
39
+ --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
40
+ --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
41
+ --p-color-info: hsl(228, 83.2%, 51%);
42
+ --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
43
+ --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
44
+ --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
45
+ --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
46
+ --p-color-skeleton: #f7f7f7;
47
+
48
+ --p-radius-xs: 2px;
49
+ --p-radius-sm: 4px;
50
+ --p-radius-md: 6px;
51
+ --p-radius-lg: 8px;
52
+ --p-radius-xl: 12px;
53
+ --p-radius-2xl: 16px;
54
+ --p-radius-3xl: 24px;
55
+ --p-radius-4xl: 32px;
56
+ --p-radius-full: calc(infinity * 1px);
57
+ }
58
+ .light {
59
+ --p-color-focus: #1a44ea;
60
+ --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
61
+ --p-color-canvas: #fff;
62
+ --p-color-surface: hsl(240, 7.7%, 97.5%);
63
+ --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
64
+ --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
65
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
66
+ --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
67
+ --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
68
+ --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
69
+ --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
70
+ --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
71
+ --p-color-primary: hsl(225, 66.7%, 1.2%);
72
+ --p-color-success: hsl(115, 77.5%, 27.8%);
73
+ --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
74
+ --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
75
+ --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
76
+ --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
77
+ --p-color-warning: hsl(28, 97.7%, 34.1%);
78
+ --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
79
+ --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
80
+ --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
81
+ --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
82
+ --p-color-error: hsl(357, 78%, 41%);
83
+ --p-color-error-low: hsla(357, 78%, 41%, 0.18);
84
+ --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
85
+ --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
86
+ --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
87
+ --p-color-info: hsl(228, 83.2%, 51%);
88
+ --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
89
+ --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
90
+ --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
91
+ --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
92
+ --p-color-skeleton: #f7f7f7;
93
+ }
94
+ .dark {
95
+ --p-color-focus: #1a44ea;
96
+ --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
97
+ --p-color-canvas: hsl(225, 66.7%, 1.2%);
98
+ --p-color-surface: hsl(240, 2%, 10%);
99
+ --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
100
+ --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
101
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
102
+ --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
103
+ --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
104
+ --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
105
+ --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
106
+ --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
107
+ --p-color-primary: hsl(240, 12.5%, 96.9%);
108
+ --p-color-success: hsl(157, 84.9%, 41.6%);
109
+ --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
110
+ --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
111
+ --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
112
+ --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
113
+ --p-color-warning: hsl(28, 90.2%, 56.1%);
114
+ --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
115
+ --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
116
+ --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
117
+ --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
118
+ --p-color-error: hsl(0, 96.9%, 62%);
119
+ --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
120
+ --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
121
+ --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
122
+ --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
123
+ --p-color-info: hsl(210, 100%, 54.5%);
124
+ --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
125
+ --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
126
+ --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
127
+ --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
128
+ --p-color-skeleton: #1a1b1e;
129
+ }
130
+ .auto {
131
+ @media (prefers-color-scheme: dark) {
132
+ --p-color-focus: #1a44ea;
133
+ --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
134
+ --p-color-canvas: hsl(225, 66.7%, 1.2%);
135
+ --p-color-surface: hsl(240, 2%, 10%);
136
+ --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
137
+ --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
138
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
139
+ --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
140
+ --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
141
+ --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
142
+ --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
143
+ --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
144
+ --p-color-primary: hsl(240, 12.5%, 96.9%);
145
+ --p-color-success: hsl(157, 84.9%, 41.6%);
146
+ --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
147
+ --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
148
+ --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
149
+ --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
150
+ --p-color-warning: hsl(28, 90.2%, 56.1%);
151
+ --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
152
+ --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
153
+ --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
154
+ --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
155
+ --p-color-error: hsl(0, 96.9%, 62%);
156
+ --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
157
+ --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
158
+ --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
159
+ --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
160
+ --p-color-info: hsl(210, 100%, 54.5%);
161
+ --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
162
+ --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
163
+ --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
164
+ --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
165
+ --p-color-skeleton: #1a1b1e;
166
+ }
167
+ }
168
+ @font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-arabic-bold.1796b39.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-arabic-regular.413b375.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-bold.4cb90bb.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-regular.b845952.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-semi-bold.378f7d5.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-bold.d2546b1.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-regular.0b3d9b3.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-semi-bold.f3a9ae0.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-bold.0fbdc6d.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-pashto-bold.f30f194.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-pashto-regular.3989814.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-bold.b9e9f23.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-regular.ac04c30.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-semi-bold.8d53572.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-urdu-bold.49a86a4.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-urdu-regular.ad23819.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}
package/global-styles/legacy-radius.css ADDED
@@ -0,0 +1,5 @@
1
+ :root {
2
+ --_p-legacy-radius-small: 4px;
3
+ --_p-legacy-radius-medium: 8px;
4
+ --_p-legacy-radius-large: 12px;
5
+ }
package/global-styles/normalize.css ADDED
@@ -0,0 +1,11 @@
1
+ html,
2
+ body {
3
+ margin: 0;
4
+ padding: 0;
5
+ font-family:
6
+ "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
7
+ line-height: calc(6px + 2.125ex);
8
+ letter-spacing: normal;
9
+ text-size-adjust: none;
10
+ -webkit-text-size-adjust: none;
11
+ }
package/global-styles/variables.css ADDED
@@ -0,0 +1,156 @@
1
+ :root {
2
+ --p-color-focus: #1a44ea;
3
+ --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
4
+ --p-color-canvas: #fff;
5
+ --p-color-surface: hsl(240, 7.7%, 97.5%);
6
+ --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
7
+ --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
8
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
9
+ --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
10
+ --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
11
+ --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
12
+ --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
13
+ --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
14
+ --p-color-primary: hsl(225, 66.7%, 1.2%);
15
+ --p-color-success: hsl(115, 77.5%, 27.8%);
16
+ --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
17
+ --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
18
+ --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
19
+ --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
20
+ --p-color-warning: hsl(28, 97.7%, 34.1%);
21
+ --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
22
+ --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
23
+ --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
24
+ --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
25
+ --p-color-error: hsl(357, 78%, 41%);
26
+ --p-color-error-low: hsla(357, 78%, 41%, 0.18);
27
+ --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
28
+ --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
29
+ --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
30
+ --p-color-info: hsl(228, 83.2%, 51%);
31
+ --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
32
+ --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
33
+ --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
34
+ --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
35
+ --p-color-skeleton: #f7f7f7;
36
+
37
+ --p-radius-xs: 2px;
38
+ --p-radius-sm: 4px;
39
+ --p-radius-md: 6px;
40
+ --p-radius-lg: 8px;
41
+ --p-radius-xl: 12px;
42
+ --p-radius-2xl: 16px;
43
+ --p-radius-3xl: 24px;
44
+ --p-radius-4xl: 32px;
45
+ --p-radius-full: calc(infinity * 1px);
46
+ }
47
+ .light {
48
+ --p-color-focus: #1a44ea;
49
+ --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
50
+ --p-color-canvas: #fff;
51
+ --p-color-surface: hsl(240, 7.7%, 97.5%);
52
+ --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
53
+ --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
54
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
55
+ --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
56
+ --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
57
+ --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
58
+ --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
59
+ --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
60
+ --p-color-primary: hsl(225, 66.7%, 1.2%);
61
+ --p-color-success: hsl(115, 77.5%, 27.8%);
62
+ --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
63
+ --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
64
+ --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
65
+ --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
66
+ --p-color-warning: hsl(28, 97.7%, 34.1%);
67
+ --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
68
+ --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
69
+ --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
70
+ --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
71
+ --p-color-error: hsl(357, 78%, 41%);
72
+ --p-color-error-low: hsla(357, 78%, 41%, 0.18);
73
+ --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
74
+ --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
75
+ --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
76
+ --p-color-info: hsl(228, 83.2%, 51%);
77
+ --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
78
+ --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
79
+ --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
80
+ --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
81
+ --p-color-skeleton: #f7f7f7;
82
+ }
83
+ .dark {
84
+ --p-color-focus: #1a44ea;
85
+ --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
86
+ --p-color-canvas: hsl(225, 66.7%, 1.2%);
87
+ --p-color-surface: hsl(240, 2%, 10%);
88
+ --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
89
+ --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
90
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
91
+ --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
92
+ --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
93
+ --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
94
+ --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
95
+ --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
96
+ --p-color-primary: hsl(240, 12.5%, 96.9%);
97
+ --p-color-success: hsl(157, 84.9%, 41.6%);
98
+ --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
99
+ --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
100
+ --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
101
+ --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
102
+ --p-color-warning: hsl(28, 90.2%, 56.1%);
103
+ --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
104
+ --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
105
+ --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
106
+ --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
107
+ --p-color-error: hsl(0, 96.9%, 62%);
108
+ --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
109
+ --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
110
+ --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
111
+ --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
112
+ --p-color-info: hsl(210, 100%, 54.5%);
113
+ --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
114
+ --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
115
+ --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
116
+ --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
117
+ --p-color-skeleton: #1a1b1e;
118
+ }
119
+ .auto {
120
+ @media (prefers-color-scheme: dark) {
121
+ --p-color-focus: #1a44ea;
122
+ --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
123
+ --p-color-canvas: hsl(225, 66.7%, 1.2%);
124
+ --p-color-surface: hsl(240, 2%, 10%);
125
+ --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
126
+ --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
127
+ --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
128
+ --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
129
+ --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
130
+ --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
131
+ --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
132
+ --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
133
+ --p-color-primary: hsl(240, 12.5%, 96.9%);
134
+ --p-color-success: hsl(157, 84.9%, 41.6%);
135
+ --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
136
+ --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
137
+ --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
138
+ --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
139
+ --p-color-warning: hsl(28, 90.2%, 56.1%);
140
+ --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
141
+ --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
142
+ --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
143
+ --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
144
+ --p-color-error: hsl(0, 96.9%, 62%);
145
+ --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
146
+ --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
147
+ --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
148
+ --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
149
+ --p-color-info: hsl(210, 100%, 54.5%);
150
+ --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
151
+ --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
152
+ --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
153
+ --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
154
+ --p-color-skeleton: #1a1b1e;
155
+ }
156
+ }