@porsche-design-system/components-vue 3.28.0-rc.2 → 3.28.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/package.json +5 -2
  3. package/tailwind/index.css +348 -0
package/CHANGELOG.md CHANGED
@@ -14,6 +14,26 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
14
14
 
15
15
  ## [Unreleased]
16
16
 
17
+ ## [3.28.0-rc.3] - 2025-05-19
18
+
19
+ ### Added
20
+
21
+ - `Styles`: theme for `tailwindcss` including utilities available under
22
+ `import { … } from '@porsche-design-system/components-{js|angular|react|vue}/tailwindcss';`
23
+ ([#3849](https://github.com/porsche-design-system/porsche-design-system/pull/3849))
24
+
25
+ ### Changed
26
+
27
+ - Partials: `getInitialStyles` removed default styles for `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `b` and `strong`
28
+ ([#3849](https://github.com/porsche-design-system/porsche-design-system/pull/3849))
29
+
30
+ #### Fixed
31
+
32
+ - `Multi Select`: enable full a11y compliance
33
+ ([#3819](https://github.com/porsche-design-system/porsche-design-system/pull/3819))
34
+ - Accessibility: fix ARIA live announcements of form components status messages
35
+ ([#3796](https://github.com/porsche-design-system/porsche-design-system/pull/3796))
36
+
17
37
  ## [3.28.0-rc.2] - 2025-04-23
18
38
 
19
39
  ### Fixed
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-vue",
3
- "version": "3.28.0-rc.2",
3
+ "version": "3.28.0-rc.3",
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-rc.2"
20
+ "@porsche-design-system/components-js": "3.28.0-rc.3"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "ag-grid-enterprise": ">= 33.0.0 <34.0.0",
@@ -62,6 +62,9 @@
62
62
  "import": "./styles/vanilla-extract/esm/vanilla-extract/index.mjs",
63
63
  "default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
64
64
  },
65
+ "./tailwindcss": {
66
+ "style": "./tailwind/index.css"
67
+ },
65
68
  "./ag-grid": {
66
69
  "types": "./ag-grid/esm/index.d.ts",
67
70
  "import": "./ag-grid/esm/index.mjs",
package/tailwind/index.css ADDED
@@ -0,0 +1,348 @@
1
+ @custom-variant dark (&:where(.dark, .dark *));
2
+ @theme {
3
+ --color-primary: #010205;
4
+ --color-base: #fff;
5
+ --color-surface: #eeeff2;
6
+ --color-shading: rgba(1, 2, 5, 0.67);
7
+ --color-frosted: hsla(240, 4%, 85%, 0.35);
8
+ --color-contrast-low: #d8d8db;
9
+ --color-contrast-medium: #6b6d70;
10
+ --color-contrast-high: #535457;
11
+ --color-success: #197e10;
12
+ --color-success-soft: #e4ffec;
13
+ --color-warning: #f3be00;
14
+ --color-warning-soft: #fff4d2;
15
+ --color-error: #cc1922;
16
+ --color-error-soft: #ffe2e4;
17
+ --color-info: #2762ec;
18
+ --color-info-soft: #d3e1ff;
19
+ --color-hover: rgba(148, 149, 152, 0.18);
20
+ --color-active: rgba(148, 149, 152, 0.2);
21
+ --color-focus: #1a44ea;
22
+ --color-disabled: #949598;
23
+ --color-skeleton: #f7f7f7;
24
+ --color-primary-light: #010205;
25
+ --color-base-light: #fff;
26
+ --color-surface-light: #eeeff2;
27
+ --color-shading-light: rgba(1, 2, 5, 0.67);
28
+ --color-frosted-light: hsla(240, 4%, 85%, 0.35);
29
+ --color-contrast-low-light: #d8d8db;
30
+ --color-contrast-medium-light: #6b6d70;
31
+ --color-contrast-high-light: #535457;
32
+ --color-success-light: #197e10;
33
+ --color-success-soft-light: #e4ffec;
34
+ --color-warning-light: #f3be00;
35
+ --color-warning-soft-light: #fff4d2;
36
+ --color-error-light: #cc1922;
37
+ --color-error-soft-light: #ffe2e4;
38
+ --color-info-light: #2762ec;
39
+ --color-info-soft-light: #d3e1ff;
40
+ --color-hover-light: rgba(148, 149, 152, 0.18);
41
+ --color-active-light: rgba(148, 149, 152, 0.2);
42
+ --color-focus-light: #1a44ea;
43
+ --color-disabled-light: #949598;
44
+ --color-skeleton-light: #f7f7f7;
45
+ --color-primary-dark: #fbfcff;
46
+ --color-base-dark: #0e0e12;
47
+ --color-surface-dark: #212225;
48
+ --color-shading-dark: rgba(38, 38, 41, 0.67);
49
+ --color-frosted-dark: hsla(240, 3%, 26%, 0.35);
50
+ --color-contrast-low-dark: #404044;
51
+ --color-contrast-medium-dark: #88898c;
52
+ --color-contrast-high-dark: #afb0b3;
53
+ --color-success-dark: #09d087;
54
+ --color-success-soft-dark: #003320;
55
+ --color-warning-dark: #f7cb47;
56
+ --color-warning-soft-dark: #362b0a;
57
+ --color-error-dark: #fc4040;
58
+ --color-error-soft-dark: #3a0f0f;
59
+ --color-info-dark: #178bff;
60
+ --color-info-soft-dark: #04294e;
61
+ --color-hover-dark: rgba(148, 149, 152, 0.18);
62
+ --color-active-dark: rgba(126, 127, 130, 0.2);
63
+ --color-focus-dark: #1a44ea;
64
+ --color-disabled-dark: #7e7f82;
65
+ --color-skeleton-dark: #1a1b1e;
66
+ --font-porsche-next: Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif;
67
+ --font-weight-normal: 400;
68
+ --font-weight-semibold: 600;
69
+ --font-weight-bold: 700;
70
+ --leading-normal: calc(6px + 2.125ex);
71
+ --text-2xs: 0.75rem;
72
+ --text-2xs--line-height: calc(6px + 2.125ex);
73
+ --text-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
74
+ --text-xs--line-height: calc(6px + 2.125ex);
75
+ --text-base: 1rem;
76
+ --text-base--line-height: calc(6px + 2.125ex);
77
+ --text-sm: 1rem;
78
+ --text-sm--line-height: calc(6px + 2.125ex);
79
+ --text-md: clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem);
80
+ --text-md--line-height: calc(6px + 2.125ex);
81
+ --text-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
82
+ --text-lg--line-height: calc(6px + 2.125ex);
83
+ --text-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
84
+ --text-xl--line-height: calc(6px + 2.125ex);
85
+ --text-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
86
+ --text-2xl--line-height: calc(6px + 2.125ex);
87
+ --breakpoint-xs: 480px;
88
+ --breakpoint-sm: 760px;
89
+ --breakpoint-md: 1000px;
90
+ --breakpoint-lg: 1300px;
91
+ --breakpoint-xl: 1760px;
92
+ --breakpoint-2xl: 1920px;
93
+ --spacing: 0.25rem;
94
+ --spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
95
+ --spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
96
+ --spacing-fluid-md: clamp(16px, 1.25vw + 12px, 36px);
97
+ --spacing-fluid-lg: clamp(32px, 2.75vw + 23px, 76px);
98
+ --spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
99
+ --spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);
100
+ --spacing-static-xs: 4px;
101
+ --spacing-static-sm: 8px;
102
+ --spacing-static-md: 16px;
103
+ --spacing-static-lg: 32px;
104
+ --spacing-static-xl: 48px;
105
+ --spacing-static-2xl: 80px;
106
+ --radius-sm: 4px;
107
+ --radius-md: 8px;
108
+ --radius-lg: 12px;
109
+ --default-border-width: 2px;
110
+ --border-width-thin: 1px;
111
+ --blur-frosted: 32px;
112
+ --shadow-low: 0px 3px 8px rgba(0,0,0,.16);
113
+ --shadow-medium: 0px 4px 16px rgba(0,0,0,.16);
114
+ --shadow-high: 0px 8px 40px rgba(0,0,0,.16);
115
+ --default-outline-width: 2px;
116
+ --default-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
117
+ --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
118
+ --ease-in: cubic-bezier(0, 0, 0.2, 1);
119
+ --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
120
+ --default-transition-duration: 0.25s;
121
+ --transition-duration-short: 0.25s;
122
+ --transition-duration-moderate: 0.4s;
123
+ --transition-duration-long: 0.6s;
124
+ --transition-duration-very-long: 1.2s;
125
+ --animate-skeleton: skeleton var(--transition-duration-long) var(--ease-in-out) infinite;
126
+ @keyframes skeleton {
127
+ from {
128
+ background-position-x: 100%;
129
+ }
130
+ to {
131
+ background-position-x: -100%;
132
+ }
133
+ }
134
+ }
135
+ @layer theme {
136
+ .light {
137
+ --color-primary: #010205;
138
+ --color-base: #fff;
139
+ --color-surface: #eeeff2;
140
+ --color-shading: rgba(1, 2, 5, 0.67);
141
+ --color-frosted: hsla(240, 4%, 85%, 0.35);
142
+ --color-contrast-low: #d8d8db;
143
+ --color-contrast-medium: #6b6d70;
144
+ --color-contrast-high: #535457;
145
+ --color-success: #197e10;
146
+ --color-success-soft: #e4ffec;
147
+ --color-warning: #f3be00;
148
+ --color-warning-soft: #fff4d2;
149
+ --color-error: #cc1922;
150
+ --color-error-soft: #ffe2e4;
151
+ --color-info: #2762ec;
152
+ --color-info-soft: #d3e1ff;
153
+ --color-hover: rgba(148, 149, 152, 0.18);
154
+ --color-active: rgba(148, 149, 152, 0.2);
155
+ --color-focus: #1a44ea;
156
+ --color-disabled: #949598;
157
+ --color-skeleton: #f7f7f7;
158
+ }
159
+ .dark {
160
+ --color-primary: #fbfcff;
161
+ --color-base: #0e0e12;
162
+ --color-surface: #212225;
163
+ --color-shading: rgba(38, 38, 41, 0.67);
164
+ --color-frosted: hsla(240, 3%, 26%, 0.35);
165
+ --color-contrast-low: #404044;
166
+ --color-contrast-medium: #88898c;
167
+ --color-contrast-high: #afb0b3;
168
+ --color-success: #09d087;
169
+ --color-success-soft: #003320;
170
+ --color-warning: #f7cb47;
171
+ --color-warning-soft: #362b0a;
172
+ --color-error: #fc4040;
173
+ --color-error-soft: #3a0f0f;
174
+ --color-info: #178bff;
175
+ --color-info-soft: #04294e;
176
+ --color-hover: rgba(148, 149, 152, 0.18);
177
+ --color-active: rgba(126, 127, 130, 0.2);
178
+ --color-focus: #1a44ea;
179
+ --color-disabled: #7e7f82;
180
+ --color-skeleton: #1a1b1e;
181
+ }
182
+ @media (prefers-color-scheme: dark) {
183
+ .auto {
184
+ --color-primary: #fbfcff;
185
+ --color-base: #0e0e12;
186
+ --color-surface: #212225;
187
+ --color-shading: rgba(38, 38, 41, 0.67);
188
+ --color-frosted: hsla(240, 3%, 26%, 0.35);
189
+ --color-contrast-low: #404044;
190
+ --color-contrast-medium: #88898c;
191
+ --color-contrast-high: #afb0b3;
192
+ --color-success: #09d087;
193
+ --color-success-soft: #003320;
194
+ --color-warning: #f7cb47;
195
+ --color-warning-soft: #362b0a;
196
+ --color-error: #fc4040;
197
+ --color-error-soft: #3a0f0f;
198
+ --color-info: #178bff;
199
+ --color-info-soft: #04294e;
200
+ --color-hover: rgba(148, 149, 152, 0.18);
201
+ --color-active: rgba(126, 127, 130, 0.2);
202
+ --color-focus: #1a44ea;
203
+ --color-disabled: #7e7f82;
204
+ --color-skeleton: #1a1b1e;
205
+ }
206
+ }
207
+ }
208
+ @utility bg-fade-to-t {
209
+ @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
+ }
211
+ @utility bg-fade-to-r {
212
+ @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
+ }
214
+ @utility bg-fade-to-b {
215
+ @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
+ }
217
+ @utility bg-fade-to-l {
218
+ @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
+ }
220
+ @utility grid-template {
221
+ @apply [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
222
+ [--_pds-grid-col:minmax(0,var(--pds-internal-grid-outer-column,calc(var(--pds-internal-grid-safe-zone)-var(--spacing-fluid-md))))]
223
+ grid
224
+ 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]]
225
+ gap-(--spacing-fluid-md)
226
+ min-w-[var(--pds-internal-grid-width-min,320px)]
227
+ max-w-[var(--pds-internal-grid-width-max,2560px)]
228
+ box-content
229
+ mx-(--pds-internal-grid-margin,0)
230
+ px-[calc(50%-var(--pds-internal-grid-margin,0px)-2560px/2)]
231
+ sm:[--pds-internal-grid-safe-zone:calc(5vw-16px)]
232
+ 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
+ 2xl:[--pds-internal-grid-safe-zone:min(50vw-880px,400px)];
234
+ }
235
+ @utility col-narrow {
236
+ @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-[narrow];
237
+ }
238
+ @utility col-start-narrow {
239
+ @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-start-[narrow-start];
240
+ }
241
+ @utility col-end-narrow {
242
+ @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:4] col-end-[narrow-end];
243
+ }
244
+ @utility col-basic {
245
+ @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
+ }
247
+ @utility col-start-basic {
248
+ @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
+ }
250
+ @utility col-end-basic {
251
+ @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
+ }
253
+ @utility col-extended {
254
+ @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-[extended];
255
+ }
256
+ @utility col-start-extended {
257
+ @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-start-[extended-start];
258
+ }
259
+ @utility col-end-extended {
260
+ @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:7] col-end-[extended-end];
261
+ }
262
+ @utility col-wide {
263
+ @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-[wide];
264
+ }
265
+ @utility col-start-wide {
266
+ @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-start-[wide-start];
267
+ }
268
+ @utility col-end-wide {
269
+ @apply [--_pds-grid-one-half:3] sm:[--_pds-grid-one-half:8] col-end-[wide-end];
270
+ }
271
+ @utility col-full {
272
+ @apply col-[full];
273
+ }
274
+ @utility col-start-full {
275
+ @apply col-start-[full-start];
276
+ }
277
+ @utility col-end-full {
278
+ @apply col-end-[full-end];
279
+ }
280
+ @utility col-span-one-half {
281
+ @apply col-span-(--_pds-grid-one-half,1);
282
+ }
283
+ @utility col-span-one-third {
284
+ @apply col-span-(--_pds-grid-one-third,1);
285
+ }
286
+ @utility col-span-two-thirds {
287
+ @apply col-span-(--_pds-grid-two-thirds,1);
288
+ }
289
+ @utility skeleton {
290
+ @apply animate-skeleton;
291
+ @apply block rounded-sm;
292
+ @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
+ }
294
+ @utility skeleton-light {
295
+ @apply animate-skeleton;
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
+ }
304
+ @utility prose-text-2xs {
305
+ @apply font-porsche-next not-italic font-normal text-2xs text-primary;
306
+ }
307
+ @utility prose-text-xs {
308
+ @apply font-porsche-next not-italic font-normal text-xs text-primary;
309
+ }
310
+ @utility prose-text-sm {
311
+ @apply font-porsche-next not-italic font-normal text-sm text-primary;
312
+ }
313
+ @utility prose-text-md {
314
+ @apply font-porsche-next not-italic font-normal text-md text-primary;
315
+ }
316
+ @utility prose-text-lg {
317
+ @apply font-porsche-next not-italic font-normal text-lg text-primary;
318
+ }
319
+ @utility prose-text-xl {
320
+ @apply font-porsche-next not-italic font-normal text-xl text-primary;
321
+ }
322
+ @utility prose-heading-sm {
323
+ @apply font-porsche-next not-italic font-semibold text-sm text-primary;
324
+ }
325
+ @utility prose-heading-md {
326
+ @apply font-porsche-next not-italic font-semibold text-md text-primary;
327
+ }
328
+ @utility prose-heading-lg {
329
+ @apply font-porsche-next not-italic font-semibold text-lg text-primary;
330
+ }
331
+ @utility prose-heading-xl {
332
+ @apply font-porsche-next not-italic font-semibold text-xl text-primary;
333
+ }
334
+ @utility prose-heading-2xl {
335
+ @apply font-porsche-next not-italic font-semibold text-2xl text-primary;
336
+ }
337
+ @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);
340
+ }
341
+ @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);
344
+ }
345
+ @utility prose-display-lg {
346
+ @apply font-porsche-next not-italic font-normal leading-normal text-primary;
347
+ font-size: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
348
+ }