@porsche-design-system/components-angular 3.28.0-rc.3 → 3.28.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.
- package/CHANGELOG.md +14 -0
- package/esm/lib/components/barrel.d.ts +1 -0
- package/esm/lib/components/input-number.wrapper.d.ts +30 -0
- package/esm/lib/types.d.ts +12 -2
- package/esm/porsche-design-system.module.d.ts +50 -49
- package/fesm2022/porsche-design-system-components-angular.mjs +280 -242
- package/fesm2022/porsche-design-system-components-angular.mjs.map +1 -1
- package/package.json +3 -3
- package/{tailwind → tailwindcss}/index.css +194 -133
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@porsche-design-system/components-angular",
|
|
3
|
-
"version": "3.28.0
|
|
3
|
+
"version": "3.28.0",
|
|
4
4
|
"description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"porsche",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"license": "SEE LICENSE IN LICENSE",
|
|
18
18
|
"homepage": "https://designsystem.porsche.com",
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@porsche-design-system/components-js": "3.28.0
|
|
20
|
+
"@porsche-design-system/components-js": "3.28.0"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"@angular/common": ">=19.0.0 <20.0.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
|
|
57
57
|
},
|
|
58
58
|
"./tailwindcss": {
|
|
59
|
-
"style": "./
|
|
59
|
+
"style": "./tailwindcss/index.css"
|
|
60
60
|
},
|
|
61
61
|
"./ag-grid": {
|
|
62
62
|
"types": "./ag-grid/esm/index.d.ts",
|
|
@@ -1,74 +1,83 @@
|
|
|
1
1
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
2
|
+
|
|
2
3
|
@theme {
|
|
4
|
+
/* Color */
|
|
3
5
|
--color-primary: #010205;
|
|
4
|
-
--color-base: #
|
|
5
|
-
--color-surface: #
|
|
6
|
-
--color-shading: rgba(1,
|
|
7
|
-
--color-frosted:
|
|
8
|
-
--color-contrast-low: #
|
|
9
|
-
--color-contrast-medium: #
|
|
6
|
+
--color-base: #FFF;
|
|
7
|
+
--color-surface: #EEEFF2;
|
|
8
|
+
--color-shading: rgba(1,2,5,.67);
|
|
9
|
+
--color-frosted: hsl(240 4% 85%/35%);
|
|
10
|
+
--color-contrast-low: #D8D8DB;
|
|
11
|
+
--color-contrast-medium: #6B6D70;
|
|
10
12
|
--color-contrast-high: #535457;
|
|
11
|
-
--color-success: #
|
|
12
|
-
--color-success-soft: #
|
|
13
|
-
--color-warning: #
|
|
14
|
-
--color-warning-soft: #
|
|
15
|
-
--color-error: #
|
|
16
|
-
--color-error-soft: #
|
|
17
|
-
--color-info: #
|
|
18
|
-
--color-info-soft: #
|
|
19
|
-
--color-hover: rgba(148,
|
|
20
|
-
--color-active: rgba(148,
|
|
21
|
-
--color-focus: #
|
|
13
|
+
--color-success: #197E10;
|
|
14
|
+
--color-success-soft: #E4FFEC;
|
|
15
|
+
--color-warning: #F3BE00;
|
|
16
|
+
--color-warning-soft: #FFF4D2;
|
|
17
|
+
--color-error: #CC1922;
|
|
18
|
+
--color-error-soft: #FFE2E4;
|
|
19
|
+
--color-info: #2762EC;
|
|
20
|
+
--color-info-soft: #D3E1FF;
|
|
21
|
+
--color-hover: rgba(148,149,152,.18);
|
|
22
|
+
--color-active: rgba(148,149,152,.2);
|
|
23
|
+
--color-focus: #1A44EA;
|
|
22
24
|
--color-disabled: #949598;
|
|
23
25
|
--color-skeleton: #f7f7f7;
|
|
26
|
+
|
|
24
27
|
--color-primary-light: #010205;
|
|
25
|
-
--color-base-light: #
|
|
26
|
-
--color-surface-light: #
|
|
27
|
-
--color-shading-light: rgba(1,
|
|
28
|
-
--color-frosted-light:
|
|
29
|
-
--color-contrast-low-light: #
|
|
30
|
-
--color-contrast-medium-light: #
|
|
28
|
+
--color-base-light: #FFF;
|
|
29
|
+
--color-surface-light: #EEEFF2;
|
|
30
|
+
--color-shading-light: rgba(1,2,5,.67);
|
|
31
|
+
--color-frosted-light: hsl(240 4% 85%/35%);
|
|
32
|
+
--color-contrast-low-light: #D8D8DB;
|
|
33
|
+
--color-contrast-medium-light: #6B6D70;
|
|
31
34
|
--color-contrast-high-light: #535457;
|
|
32
|
-
--color-success-light: #
|
|
33
|
-
--color-success-soft-light: #
|
|
34
|
-
--color-warning-light: #
|
|
35
|
-
--color-warning-soft-light: #
|
|
36
|
-
--color-error-light: #
|
|
37
|
-
--color-error-soft-light: #
|
|
38
|
-
--color-info-light: #
|
|
39
|
-
--color-info-soft-light: #
|
|
40
|
-
--color-hover-light: rgba(148,
|
|
41
|
-
--color-active-light: rgba(148,
|
|
42
|
-
--color-focus-light: #
|
|
35
|
+
--color-success-light: #197E10;
|
|
36
|
+
--color-success-soft-light: #E4FFEC;
|
|
37
|
+
--color-warning-light: #F3BE00;
|
|
38
|
+
--color-warning-soft-light: #FFF4D2;
|
|
39
|
+
--color-error-light: #CC1922;
|
|
40
|
+
--color-error-soft-light: #FFE2E4;
|
|
41
|
+
--color-info-light: #2762EC;
|
|
42
|
+
--color-info-soft-light: #D3E1FF;
|
|
43
|
+
--color-hover-light: rgba(148,149,152,.18);
|
|
44
|
+
--color-active-light: rgba(148,149,152,.2);
|
|
45
|
+
--color-focus-light: #1A44EA;
|
|
43
46
|
--color-disabled-light: #949598;
|
|
44
47
|
--color-skeleton-light: #f7f7f7;
|
|
45
|
-
|
|
46
|
-
--color-
|
|
48
|
+
|
|
49
|
+
--color-primary-dark: #FBFCFF;
|
|
50
|
+
--color-base-dark: #0E0E12;
|
|
47
51
|
--color-surface-dark: #212225;
|
|
48
|
-
--color-shading-dark: rgba(38,
|
|
49
|
-
--color-frosted-dark:
|
|
52
|
+
--color-shading-dark: rgba(38,38,41,.67);
|
|
53
|
+
--color-frosted-dark: hsl(240 3% 26%/35%);
|
|
50
54
|
--color-contrast-low-dark: #404044;
|
|
51
|
-
--color-contrast-medium-dark: #
|
|
52
|
-
--color-contrast-high-dark: #
|
|
53
|
-
--color-success-dark: #
|
|
55
|
+
--color-contrast-medium-dark: #88898C;
|
|
56
|
+
--color-contrast-high-dark: #AFB0B3;
|
|
57
|
+
--color-success-dark: #09D087;
|
|
54
58
|
--color-success-soft-dark: #003320;
|
|
55
|
-
--color-warning-dark: #
|
|
56
|
-
--color-warning-soft-dark: #
|
|
57
|
-
--color-error-dark: #
|
|
58
|
-
--color-error-soft-dark: #
|
|
59
|
-
--color-info-dark: #
|
|
60
|
-
--color-info-soft-dark: #
|
|
61
|
-
--color-hover-dark: rgba(148,
|
|
62
|
-
--color-active-dark: rgba(126,
|
|
63
|
-
--color-focus-dark: #
|
|
64
|
-
--color-disabled-dark: #
|
|
59
|
+
--color-warning-dark: #F7CB47;
|
|
60
|
+
--color-warning-soft-dark: #362B0A;
|
|
61
|
+
--color-error-dark: #FC4040;
|
|
62
|
+
--color-error-soft-dark: #3A0F0F;
|
|
63
|
+
--color-info-dark: #178BFF;
|
|
64
|
+
--color-info-soft-dark: #04294E;
|
|
65
|
+
--color-hover-dark: rgba(148,149,152,.18);
|
|
66
|
+
--color-active-dark: rgba(126,127,130,.2);
|
|
67
|
+
--color-focus-dark: #1A44EA;
|
|
68
|
+
--color-disabled-dark: #7E7F82;
|
|
65
69
|
--color-skeleton-dark: #1a1b1e;
|
|
66
|
-
|
|
70
|
+
|
|
71
|
+
/* Typography */
|
|
72
|
+
--font-porsche-next: 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;
|
|
73
|
+
|
|
67
74
|
--font-weight-normal: 400;
|
|
68
75
|
--font-weight-semibold: 600;
|
|
69
76
|
--font-weight-bold: 700;
|
|
77
|
+
|
|
70
78
|
--leading-normal: calc(6px + 2.125ex);
|
|
71
|
-
|
|
79
|
+
|
|
80
|
+
--text-2xs: .75rem;
|
|
72
81
|
--text-2xs--line-height: calc(6px + 2.125ex);
|
|
73
82
|
--text-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
|
|
74
83
|
--text-xs--line-height: calc(6px + 2.125ex);
|
|
@@ -84,45 +93,67 @@
|
|
|
84
93
|
--text-xl--line-height: calc(6px + 2.125ex);
|
|
85
94
|
--text-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
|
|
86
95
|
--text-2xl--line-height: calc(6px + 2.125ex);
|
|
96
|
+
|
|
97
|
+
/* Breakpoint */
|
|
87
98
|
--breakpoint-xs: 480px;
|
|
88
99
|
--breakpoint-sm: 760px;
|
|
89
100
|
--breakpoint-md: 1000px;
|
|
90
101
|
--breakpoint-lg: 1300px;
|
|
91
102
|
--breakpoint-xl: 1760px;
|
|
92
103
|
--breakpoint-2xl: 1920px;
|
|
93
|
-
|
|
104
|
+
|
|
105
|
+
/* Spacing */
|
|
106
|
+
--spacing: .25rem;
|
|
107
|
+
|
|
94
108
|
--spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
|
|
95
109
|
--spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
|
|
96
110
|
--spacing-fluid-md: clamp(16px, 1.25vw + 12px, 36px);
|
|
97
111
|
--spacing-fluid-lg: clamp(32px, 2.75vw + 23px, 76px);
|
|
98
112
|
--spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
|
|
99
113
|
--spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);
|
|
114
|
+
|
|
100
115
|
--spacing-static-xs: 4px;
|
|
101
116
|
--spacing-static-sm: 8px;
|
|
102
117
|
--spacing-static-md: 16px;
|
|
103
118
|
--spacing-static-lg: 32px;
|
|
104
119
|
--spacing-static-xl: 48px;
|
|
105
120
|
--spacing-static-2xl: 80px;
|
|
121
|
+
|
|
122
|
+
/* Border */
|
|
106
123
|
--radius-sm: 4px;
|
|
107
124
|
--radius-md: 8px;
|
|
108
125
|
--radius-lg: 12px;
|
|
126
|
+
|
|
109
127
|
--default-border-width: 2px;
|
|
128
|
+
--border-width-regular: 2px;
|
|
110
129
|
--border-width-thin: 1px;
|
|
130
|
+
|
|
131
|
+
/* Blur */
|
|
111
132
|
--blur-frosted: 32px;
|
|
133
|
+
|
|
134
|
+
/* Shadow */
|
|
112
135
|
--shadow-low: 0px 3px 8px rgba(0,0,0,.16);
|
|
113
136
|
--shadow-medium: 0px 4px 16px rgba(0,0,0,.16);
|
|
114
137
|
--shadow-high: 0px 8px 40px rgba(0,0,0,.16);
|
|
138
|
+
|
|
139
|
+
/* Outline */
|
|
115
140
|
--default-outline-width: 2px;
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
--
|
|
119
|
-
--ease-out: cubic-bezier(
|
|
120
|
-
--
|
|
121
|
-
--
|
|
122
|
-
|
|
123
|
-
--transition-duration
|
|
141
|
+
|
|
142
|
+
/* Motion */
|
|
143
|
+
--default-transition-timing-function: cubic-bezier(.25,.1,.25,1);
|
|
144
|
+
--ease-in-out: cubic-bezier(.25,.1,.25,1);
|
|
145
|
+
--ease-in: cubic-bezier(0,0,.2,1);
|
|
146
|
+
--ease-out: cubic-bezier(.4,0,.5,1);
|
|
147
|
+
|
|
148
|
+
--default-transition-duration: .25s;
|
|
149
|
+
--transition-duration-short: .25s;
|
|
150
|
+
--transition-duration-moderate: .4s;
|
|
151
|
+
--transition-duration-long: .6s;
|
|
124
152
|
--transition-duration-very-long: 1.2s;
|
|
153
|
+
|
|
154
|
+
/* Animation */
|
|
125
155
|
--animate-skeleton: skeleton var(--transition-duration-long) var(--ease-in-out) infinite;
|
|
156
|
+
|
|
126
157
|
@keyframes skeleton {
|
|
127
158
|
from {
|
|
128
159
|
background-position-x: 100%;
|
|
@@ -132,93 +163,104 @@
|
|
|
132
163
|
}
|
|
133
164
|
}
|
|
134
165
|
}
|
|
166
|
+
|
|
135
167
|
@layer theme {
|
|
136
168
|
.light {
|
|
137
169
|
--color-primary: #010205;
|
|
138
|
-
--color-base: #
|
|
139
|
-
--color-surface: #
|
|
140
|
-
--color-shading: rgba(1,
|
|
141
|
-
--color-frosted:
|
|
142
|
-
--color-contrast-low: #
|
|
143
|
-
--color-contrast-medium: #
|
|
170
|
+
--color-base: #FFF;
|
|
171
|
+
--color-surface: #EEEFF2;
|
|
172
|
+
--color-shading: rgba(1,2,5,.67);
|
|
173
|
+
--color-frosted: hsl(240 4% 85%/35%);
|
|
174
|
+
--color-contrast-low: #D8D8DB;
|
|
175
|
+
--color-contrast-medium: #6B6D70;
|
|
144
176
|
--color-contrast-high: #535457;
|
|
145
|
-
--color-success: #
|
|
146
|
-
--color-success-soft: #
|
|
147
|
-
--color-warning: #
|
|
148
|
-
--color-warning-soft: #
|
|
149
|
-
--color-error: #
|
|
150
|
-
--color-error-soft: #
|
|
151
|
-
--color-info: #
|
|
152
|
-
--color-info-soft: #
|
|
153
|
-
--color-hover: rgba(148,
|
|
154
|
-
--color-active: rgba(148,
|
|
155
|
-
--color-focus: #
|
|
177
|
+
--color-success: #197E10;
|
|
178
|
+
--color-success-soft: #E4FFEC;
|
|
179
|
+
--color-warning: #F3BE00;
|
|
180
|
+
--color-warning-soft: #FFF4D2;
|
|
181
|
+
--color-error: #CC1922;
|
|
182
|
+
--color-error-soft: #FFE2E4;
|
|
183
|
+
--color-info: #2762EC;
|
|
184
|
+
--color-info-soft: #D3E1FF;
|
|
185
|
+
--color-hover: rgba(148,149,152,.18);
|
|
186
|
+
--color-active: rgba(148,149,152,.2);
|
|
187
|
+
--color-focus: #1A44EA;
|
|
156
188
|
--color-disabled: #949598;
|
|
157
189
|
--color-skeleton: #f7f7f7;
|
|
158
190
|
}
|
|
191
|
+
|
|
159
192
|
.dark {
|
|
160
|
-
--color-primary: #
|
|
161
|
-
--color-base: #
|
|
193
|
+
--color-primary: #FBFCFF;
|
|
194
|
+
--color-base: #0E0E12;
|
|
162
195
|
--color-surface: #212225;
|
|
163
|
-
--color-shading: rgba(38,
|
|
164
|
-
--color-frosted:
|
|
196
|
+
--color-shading: rgba(38,38,41,.67);
|
|
197
|
+
--color-frosted: hsl(240 3% 26%/35%);
|
|
165
198
|
--color-contrast-low: #404044;
|
|
166
|
-
--color-contrast-medium: #
|
|
167
|
-
--color-contrast-high: #
|
|
168
|
-
--color-success: #
|
|
199
|
+
--color-contrast-medium: #88898C;
|
|
200
|
+
--color-contrast-high: #AFB0B3;
|
|
201
|
+
--color-success: #09D087;
|
|
169
202
|
--color-success-soft: #003320;
|
|
170
|
-
--color-warning: #
|
|
171
|
-
--color-warning-soft: #
|
|
172
|
-
--color-error: #
|
|
173
|
-
--color-error-soft: #
|
|
174
|
-
--color-info: #
|
|
175
|
-
--color-info-soft: #
|
|
176
|
-
--color-hover: rgba(148,
|
|
177
|
-
--color-active: rgba(126,
|
|
178
|
-
--color-focus: #
|
|
179
|
-
--color-disabled: #
|
|
203
|
+
--color-warning: #F7CB47;
|
|
204
|
+
--color-warning-soft: #362B0A;
|
|
205
|
+
--color-error: #FC4040;
|
|
206
|
+
--color-error-soft: #3A0F0F;
|
|
207
|
+
--color-info: #178BFF;
|
|
208
|
+
--color-info-soft: #04294E;
|
|
209
|
+
--color-hover: rgba(148,149,152,.18);
|
|
210
|
+
--color-active: rgba(126,127,130,.2);
|
|
211
|
+
--color-focus: #1A44EA;
|
|
212
|
+
--color-disabled: #7E7F82;
|
|
180
213
|
--color-skeleton: #1a1b1e;
|
|
181
214
|
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
--color-
|
|
215
|
+
|
|
216
|
+
.auto {
|
|
217
|
+
@media (prefers-color-scheme: dark) {
|
|
218
|
+
--color-primary: #FBFCFF;
|
|
219
|
+
--color-base: #0E0E12;
|
|
186
220
|
--color-surface: #212225;
|
|
187
|
-
--color-shading: rgba(38,
|
|
188
|
-
--color-frosted:
|
|
221
|
+
--color-shading: rgba(38,38,41,.67);
|
|
222
|
+
--color-frosted: hsl(240 3% 26%/35%);
|
|
189
223
|
--color-contrast-low: #404044;
|
|
190
|
-
--color-contrast-medium: #
|
|
191
|
-
--color-contrast-high: #
|
|
192
|
-
--color-success: #
|
|
224
|
+
--color-contrast-medium: #88898C;
|
|
225
|
+
--color-contrast-high: #AFB0B3;
|
|
226
|
+
--color-success: #09D087;
|
|
193
227
|
--color-success-soft: #003320;
|
|
194
|
-
--color-warning: #
|
|
195
|
-
--color-warning-soft: #
|
|
196
|
-
--color-error: #
|
|
197
|
-
--color-error-soft: #
|
|
198
|
-
--color-info: #
|
|
199
|
-
--color-info-soft: #
|
|
200
|
-
--color-hover: rgba(148,
|
|
201
|
-
--color-active: rgba(126,
|
|
202
|
-
--color-focus: #
|
|
203
|
-
--color-disabled: #
|
|
228
|
+
--color-warning: #F7CB47;
|
|
229
|
+
--color-warning-soft: #362B0A;
|
|
230
|
+
--color-error: #FC4040;
|
|
231
|
+
--color-error-soft: #3A0F0F;
|
|
232
|
+
--color-info: #178BFF;
|
|
233
|
+
--color-info-soft: #04294E;
|
|
234
|
+
--color-hover: rgba(148,149,152,.18);
|
|
235
|
+
--color-active: rgba(126,127,130,.2);
|
|
236
|
+
--color-focus: #1A44EA;
|
|
237
|
+
--color-disabled: #7E7F82;
|
|
204
238
|
--color-skeleton: #1a1b1e;
|
|
205
239
|
}
|
|
206
240
|
}
|
|
207
241
|
}
|
|
242
|
+
|
|
243
|
+
/* Gradient */
|
|
208
244
|
@utility bg-fade-to-t {
|
|
209
245
|
@apply bg-linear-[to_top,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
|
|
210
246
|
}
|
|
247
|
+
|
|
211
248
|
@utility bg-fade-to-r {
|
|
212
249
|
@apply bg-linear-[to_right,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
|
|
213
250
|
}
|
|
251
|
+
|
|
214
252
|
@utility bg-fade-to-b {
|
|
215
253
|
@apply bg-linear-[to_bottom,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
|
|
216
254
|
}
|
|
255
|
+
|
|
217
256
|
@utility bg-fade-to-l {
|
|
218
257
|
@apply bg-linear-[to_left,hsla(0,0%,0%,.8)_0%,hsla(0,0%,0%,.8)_8.1%,hsla(0,0%,0%,.8)_15.5%,hsla(0,0%,0%,.8)_22.5%,hsla(0,0%,0%,.78)_29%,hsla(0,0%,0%,.73)_35.3%,hsla(0,0%,0%,.67)_41.2%,hsla(0,0%,0%,.6)_47.1%,hsla(0,0%,0%,.52)_52.9%,hsla(0,0%,0%,.44)_58.8%,hsla(0,0%,0%,.33)_64.7%,hsla(0,0%,0%,.22)_71%,hsla(0,0%,0%,.12)_77.5%,hsla(0,0%,0%,.05)_84.5%,hsla(0,0%,0%,.011)_91.9%,hsla(0,0%,0%,0)_100%];
|
|
219
258
|
}
|
|
259
|
+
|
|
260
|
+
/* Grid */
|
|
220
261
|
@utility grid-template {
|
|
221
|
-
@apply
|
|
262
|
+
@apply
|
|
263
|
+
[--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
|
|
222
264
|
[--_pds-grid-col:minmax(0,var(--pds-internal-grid-outer-column,calc(var(--pds-internal-grid-safe-zone)-var(--spacing-fluid-md))))]
|
|
223
265
|
grid
|
|
224
266
|
grid-cols-[[full-start]_var(--_pds-grid-col)_[wide-start_extended-start_basic-start_narrow-start]_repeat(6,minmax(0,1fr))_[narrow-end_basic-end_extended-end_wide-end]_var(--_pds-grid-col)_[full-end]]
|
|
@@ -232,75 +274,93 @@
|
|
|
232
274
|
sm:grid-cols-[[full-start]_var(--_pds-grid-col)_[wide-start]_minmax(0,1fr)_[extended-start]_minmax(0,1fr)_[basic-start]_repeat(2,minmax(0,1fr))_[narrow-start]_repeat(8,minmax(0,1fr))_[narrow-end]_repeat(2,minmax(0,1fr))_[basic-end]_minmax(0,1fr)_[extended-end]_minmax(0,1fr)_[wide-end]_var(--_pds-grid-col)[full-end]]
|
|
233
275
|
2xl:[--pds-internal-grid-safe-zone:min(50vw-880px,400px)];
|
|
234
276
|
}
|
|
277
|
+
|
|
278
|
+
/* Grid: Area Narrow */
|
|
235
279
|
@utility col-narrow {
|
|
236
280
|
@apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-[narrow];
|
|
237
281
|
}
|
|
282
|
+
|
|
238
283
|
@utility col-start-narrow {
|
|
239
284
|
@apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-start-[narrow-start];
|
|
240
285
|
}
|
|
286
|
+
|
|
241
287
|
@utility col-end-narrow {
|
|
242
288
|
@apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-end-[narrow-end];
|
|
243
289
|
}
|
|
290
|
+
|
|
291
|
+
/* Grid: Area Basic */
|
|
244
292
|
@utility col-basic {
|
|
245
293
|
@apply [--_pds-grid-one-half:3] [--_pds-grid-one-third:2] [--_pds-grid-two-thirds:4] sm:[--_pds-grid-one-half:6] sm:[--_pds-grid-one-third:4] sm:[--_pds-grid-two-thirds:8] col-[basic];
|
|
246
294
|
}
|
|
295
|
+
|
|
247
296
|
@utility col-start-basic {
|
|
248
297
|
@apply [--_pds-grid-one-half:3] [--_pds-grid-one-third:2] [--_pds-grid-two-thirds:4] sm:[--_pds-grid-one-half:6] sm:[--_pds-grid-one-third:4] sm:[--_pds-grid-two-thirds:8] col-start-[basic-start];
|
|
249
298
|
}
|
|
299
|
+
|
|
250
300
|
@utility col-end-basic {
|
|
251
301
|
@apply [--_pds-grid-one-half:3] [--_pds-grid-one-third:2] [--_pds-grid-two-thirds:4] sm:[--_pds-grid-one-half:6] sm:[--_pds-grid-one-third:4] sm:[--_pds-grid-two-thirds:8] col-end-[basic-end];
|
|
252
302
|
}
|
|
303
|
+
|
|
304
|
+
/* Grid: Area Extended */
|
|
253
305
|
@utility col-extended {
|
|
254
306
|
@apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-[extended];
|
|
255
307
|
}
|
|
308
|
+
|
|
256
309
|
@utility col-start-extended {
|
|
257
310
|
@apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-start-[extended-start];
|
|
258
311
|
}
|
|
312
|
+
|
|
259
313
|
@utility col-end-extended {
|
|
260
314
|
@apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-end-[extended-end];
|
|
261
315
|
}
|
|
316
|
+
|
|
317
|
+
/* Grid: Area Wide */
|
|
262
318
|
@utility col-wide {
|
|
263
319
|
@apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-[wide];
|
|
264
320
|
}
|
|
321
|
+
|
|
265
322
|
@utility col-start-wide {
|
|
266
323
|
@apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-start-[wide-start];
|
|
267
324
|
}
|
|
325
|
+
|
|
268
326
|
@utility col-end-wide {
|
|
269
327
|
@apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-end-[wide-end];
|
|
270
328
|
}
|
|
329
|
+
|
|
330
|
+
/* Grid: Area Full */
|
|
271
331
|
@utility col-full {
|
|
272
332
|
@apply col-[full];
|
|
273
333
|
}
|
|
334
|
+
|
|
274
335
|
@utility col-start-full {
|
|
275
336
|
@apply col-start-[full-start];
|
|
276
337
|
}
|
|
338
|
+
|
|
277
339
|
@utility col-end-full {
|
|
278
340
|
@apply col-end-[full-end];
|
|
279
341
|
}
|
|
342
|
+
|
|
343
|
+
/* Grid: Division */
|
|
280
344
|
@utility col-span-one-half {
|
|
281
345
|
@apply col-span-(--_pds-grid-one-half,1);
|
|
282
346
|
}
|
|
347
|
+
|
|
283
348
|
@utility col-span-one-third {
|
|
284
349
|
@apply col-span-(--_pds-grid-one-third,1);
|
|
285
350
|
}
|
|
351
|
+
|
|
286
352
|
@utility col-span-two-thirds {
|
|
287
353
|
@apply col-span-(--_pds-grid-two-thirds,1);
|
|
288
354
|
}
|
|
355
|
+
|
|
356
|
+
/* Skeleton */
|
|
289
357
|
@utility skeleton {
|
|
290
358
|
@apply animate-skeleton;
|
|
291
359
|
@apply block rounded-sm;
|
|
292
360
|
@apply bg-surface bg-[linear-gradient(to_right,transparent_0%,var(--color-skeleton)_20%,transparent_50%)] bg-position-[0_0] bg-size-[200%_100%];
|
|
293
361
|
}
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
@apply block rounded-sm;
|
|
297
|
-
@apply bg-surface-light bg-[linear-gradient(to_right,transparent_0%,var(--color-skeleton-light)_20%,transparent_50%)] bg-position-[0_0] bg-size-[200%_100%];
|
|
298
|
-
}
|
|
299
|
-
@utility skeleton-dark {
|
|
300
|
-
@apply animate-skeleton;
|
|
301
|
-
@apply block rounded-sm;
|
|
302
|
-
@apply bg-surface-dark bg-[linear-gradient(to_right,transparent_0%,var(--color-skeleton-dark)_20%,transparent_50%)] bg-position-[0_0] bg-size-[200%_100%];
|
|
303
|
-
}
|
|
362
|
+
|
|
363
|
+
/* Typography: Text */
|
|
304
364
|
@utility prose-text-2xs {
|
|
305
365
|
@apply font-porsche-next not-italic font-normal text-2xs text-primary;
|
|
306
366
|
}
|
|
@@ -319,6 +379,8 @@
|
|
|
319
379
|
@utility prose-text-xl {
|
|
320
380
|
@apply font-porsche-next not-italic font-normal text-xl text-primary;
|
|
321
381
|
}
|
|
382
|
+
|
|
383
|
+
/* Typography: Heading */
|
|
322
384
|
@utility prose-heading-sm {
|
|
323
385
|
@apply font-porsche-next not-italic font-semibold text-sm text-primary;
|
|
324
386
|
}
|
|
@@ -334,15 +396,14 @@
|
|
|
334
396
|
@utility prose-heading-2xl {
|
|
335
397
|
@apply font-porsche-next not-italic font-semibold text-2xl text-primary;
|
|
336
398
|
}
|
|
399
|
+
|
|
400
|
+
/* Typography: Display */
|
|
337
401
|
@utility prose-display-sm {
|
|
338
|
-
@apply font-porsche-next not-italic font-normal leading-normal text-primary;
|
|
339
|
-
font-size: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
|
|
402
|
+
@apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(1.8rem,2.41vw+1.32rem,4.21rem)];
|
|
340
403
|
}
|
|
341
404
|
@utility prose-display-md {
|
|
342
|
-
@apply font-porsche-next not-italic font-normal leading-normal text-primary;
|
|
343
|
-
font-size: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
|
|
405
|
+
@apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.03rem,3.58vw+1.31rem,5.61rem)];
|
|
344
406
|
}
|
|
345
407
|
@utility prose-display-lg {
|
|
346
|
-
@apply font-porsche-next not-italic font-normal leading-normal text-primary;
|
|
347
|
-
|
|
348
|
-
}
|
|
408
|
+
@apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.28rem,5.2vw+1.24rem,7.48rem)];
|
|
409
|
+
}
|