@porsche-design-system/components-angular 3.28.0-rc.1 → 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.
- package/CHANGELOG.md +684 -657
- package/LICENSE.md +1 -1
- package/package.json +5 -2
- package/tailwind/index.css +348 -0
package/LICENSE.md
CHANGED
|
@@ -21,7 +21,7 @@ update this licensing agreement at any time.
|
|
|
21
21
|
Subject to the terms of this Agreement, Porsche grants you a limited, worldwide, royalty-free, non-assignable,
|
|
22
22
|
non-transferable, non-sublicensable, and non-exclusive license to use the Porsche Design System Assets solely to
|
|
23
23
|
develop, test, and distribute software applications, websites, and interfaces on behalf of Porsche that are available
|
|
24
|
-
via
|
|
24
|
+
via [https://porsche.com](https://porsche.com) or any associated websites or other Porsche software (“Applications”).
|
|
25
25
|
|
|
26
26
|
### License Restrictions
|
|
27
27
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@porsche-design-system/components-angular",
|
|
3
|
-
"version": "3.28.0-rc.
|
|
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.
|
|
20
|
+
"@porsche-design-system/components-js": "3.28.0-rc.3"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"@angular/common": ">=19.0.0 <20.0.0",
|
|
@@ -55,6 +55,9 @@
|
|
|
55
55
|
"import": "./styles/vanilla-extract/esm/vanilla-extract/index.mjs",
|
|
56
56
|
"default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
|
|
57
57
|
},
|
|
58
|
+
"./tailwindcss": {
|
|
59
|
+
"style": "./tailwind/index.css"
|
|
60
|
+
},
|
|
58
61
|
"./ag-grid": {
|
|
59
62
|
"types": "./ag-grid/esm/index.d.ts",
|
|
60
63
|
"import": "./ag-grid/esm/index.mjs",
|
|
@@ -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
|
+
}
|