@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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-angular",
3
- "version": "3.31.0-rc.0",
3
+ "version": "4.0.0-alpha.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.31.0-rc.0",
20
+ "@porsche-design-system/components-js": "4.0.0-alpha.0",
21
21
  "tslib": "^2.8.1"
22
22
  },
23
23
  "peerDependencies": {
@@ -49,6 +49,11 @@
49
49
  "module": "./partials/esm/index.mjs",
50
50
  "default": "./partials/cjs/index.cjs"
51
51
  },
52
+ "./tokens": {
53
+ "types": "./tokens/esm/index.d.ts",
54
+ "import": "./tokens/esm/index.mjs",
55
+ "default": "./tokens/cjs/index.cjs"
56
+ },
52
57
  "./styles": {
53
58
  "sass": "./styles/_index.scss",
54
59
  "types": "./styles/esm/index.d.ts",
@@ -56,12 +61,9 @@
56
61
  "default": "./styles/cjs/index.cjs"
57
62
  },
58
63
  "./styles/vanilla-extract": {
59
- "types": "./styles/vanilla-extract/esm/vanilla-extract/index.d.ts",
60
- "import": "./styles/vanilla-extract/esm/vanilla-extract/index.mjs",
61
- "default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
62
- },
63
- "./tailwindcss": {
64
- "style": "./tailwindcss/index.css"
64
+ "types": "./styles/vanilla-extract/esm/index.d.ts",
65
+ "import": "./styles/vanilla-extract/esm/index.mjs",
66
+ "default": "./styles/vanilla-extract/cjs/index.cjs"
65
67
  },
66
68
  "./ag-grid": {
67
69
  "types": "./ag-grid/esm/index.d.ts",
@@ -72,6 +74,24 @@
72
74
  "types": "./testing/index.d.ts",
73
75
  "default": "./testing/index.cjs"
74
76
  },
77
+ "./tailwindcss": "./tailwindcss/index.css",
78
+ "./tailwindcss/index.css": "./tailwindcss/index.css",
79
+ "./tailwindcss/index": "./tailwindcss/index.css",
80
+ "./index.css": "./global-styles/index.css",
81
+ "./index": "./global-styles/index.css",
82
+ "./font-face.css": "./global-styles/font-face.css",
83
+ "./font-face": "./global-styles/font-face.css",
84
+ "./normalize.css": "./global-styles/normalize.css",
85
+ "./normalize": "./global-styles/normalize.css",
86
+ "./variables.css": "./global-styles/variables.css",
87
+ "./variables": "./global-styles/variables.css",
88
+ "./cn": "./global-styles/cn/index.css",
89
+ "./cn/index.css": "./global-styles/cn/index.css",
90
+ "./cn/index": "./global-styles/cn/index.css",
91
+ "./cn/font-face.css": "./global-styles/cn/font-face.css",
92
+ "./cn/font-face": "./global-styles/cn/font-face.css",
93
+ "./legacy-radius.css": "./global-styles/legacy-radius.css",
94
+ "./legacy-radius": "./global-styles/legacy-radius.css",
75
95
  "./package.json": {
76
96
  "default": "./package.json"
77
97
  },
@@ -80,6 +100,7 @@
80
100
  "default": "./fesm2022/porsche-design-system-components-angular.mjs"
81
101
  }
82
102
  },
103
+ "style": "./global-styles/index.css",
83
104
  "module": "fesm2022/porsche-design-system-components-angular.mjs",
84
105
  "typings": "index.d.ts",
85
106
  "sideEffects": false
package/tailwindcss/index.css CHANGED
@@ -1,75 +1,52 @@
1
1
  @custom-variant dark (&:where(.dark, .dark *));
2
2
 
3
3
  @theme {
4
+ /* Reset */
5
+ --color-*: initial;
6
+
4
7
  /* Color */
5
- --color-primary: #010205;
6
- --color-canvas: #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;
12
- --color-contrast-high: #535457;
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;
24
- --color-disabled: #949598;
8
+ --color-black: #000;
9
+ --color-white: #fff;
10
+
11
+ --color-focus: #1a44ea;
12
+ --color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
13
+ --color-canvas: #fff;
14
+ --color-surface: hsl(240, 7.7%, 97.5%);
15
+ --color-frosted: hsla(236, 6.4%, 51%, 0.148);
16
+ --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
17
+ --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
18
+ --color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
19
+ --color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
20
+ --color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
21
+ --color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
22
+ --color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
23
+ --color-primary: hsl(225, 66.7%, 1.2%);
24
+ --color-success: hsl(115, 77.5%, 27.8%);
25
+ --color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
26
+ --color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
27
+ --color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
28
+ --color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
29
+ --color-warning: hsl(28, 97.7%, 34.1%);
30
+ --color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
31
+ --color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
32
+ --color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
33
+ --color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
34
+ --color-error: hsl(357, 78%, 41%);
35
+ --color-error-low: hsla(357, 78%, 41%, 0.18);
36
+ --color-error-medium: hsla(357, 78%, 41%, 0.6);
37
+ --color-error-frosted: hsla(357, 78%, 41%, 0.18);
38
+ --color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
39
+ --color-info: hsl(228, 83.2%, 51%);
40
+ --color-info-low: hsla(228, 83.2%, 51%, 0.18);
41
+ --color-info-medium: hsla(228, 83.2%, 51%, 0.6);
42
+ --color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
43
+ --color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
25
44
  --color-skeleton: #f7f7f7;
26
45
 
27
- --color-primary-light: #010205;
28
- --color-canvas-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;
34
- --color-contrast-high-light: #535457;
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;
46
- --color-disabled-light: #949598;
47
- --color-skeleton-light: #f7f7f7;
48
-
49
- --color-primary-dark: #FBFCFF;
50
- --color-canvas-dark: #0E0E12;
51
- --color-surface-dark: #212225;
52
- --color-shading-dark: rgba(38,38,41,.67);
53
- --color-frosted-dark: hsl(240 3% 26%/35%);
54
- --color-contrast-low-dark: #404044;
55
- --color-contrast-medium-dark: #88898C;
56
- --color-contrast-high-dark: #AFB0B3;
57
- --color-success-dark: #09D087;
58
- --color-success-soft-dark: #003320;
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;
69
- --color-skeleton-dark: #1a1b1e;
70
-
71
46
  /* Typography */
72
- --font-porsche-next: 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;
47
+ --font-porsche-next:
48
+ "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
49
+ --font-sans: var(--font-porsche-next);
73
50
 
74
51
  --font-weight-normal: 400;
75
52
  --font-weight-semibold: 600;
@@ -77,7 +54,7 @@
77
54
 
78
55
  --leading-normal: calc(6px + 2.125ex);
79
56
 
80
- --text-2xs: .75rem;
57
+ --text-2xs: 0.75rem;
81
58
  --text-2xs--line-height: calc(6px + 2.125ex);
82
59
  --text-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
83
60
  --text-xs--line-height: calc(6px + 2.125ex);
@@ -103,7 +80,7 @@
103
80
  --breakpoint-2xl: 1920px;
104
81
 
105
82
  /* Spacing */
106
- --spacing: .25rem;
83
+ --spacing: 0.25rem;
107
84
 
108
85
  --spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
109
86
  --spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
@@ -120,11 +97,17 @@
120
97
  --spacing-static-2xl: 80px;
121
98
 
122
99
  /* Border */
100
+ --radius-xs: 2px;
123
101
  --radius-sm: 4px;
124
- --radius-md: 8px;
125
- --radius-lg: 12px;
126
-
127
- --default-border-width: 2px;
102
+ --radius-md: 6px;
103
+ --radius-lg: 8px;
104
+ --radius-xl: 12px;
105
+ --radius-2xl: 16px;
106
+ --radius-3xl: 24px;
107
+ --radius-4xl: 32px;
108
+ --radius-full: calc(infinity * 1px);
109
+
110
+ --default-border-width: 1px;
128
111
  --border-width-regular: 2px;
129
112
  --border-width-thin: 1px;
130
113
 
@@ -132,27 +115,28 @@
132
115
  --blur-frosted: 32px;
133
116
 
134
117
  /* Shadow */
135
- --shadow-low: 0px 3px 8px rgba(0,0,0,.16);
136
- --shadow-medium: 0px 4px 16px rgba(0,0,0,.16);
137
- --shadow-high: 0px 8px 40px rgba(0,0,0,.16);
118
+ --shadow-low: 0px 3px 8px rgba(0, 0, 0, 0.16);
119
+ --shadow-medium: 0px 4px 16px rgba(0, 0, 0, 0.16);
120
+ --shadow-high: 0px 8px 40px rgba(0, 0, 0, 0.16);
138
121
 
139
122
  /* Outline */
140
123
  --default-outline-width: 2px;
141
124
 
142
125
  /* 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;
126
+ --default-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
127
+ --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
128
+ --ease-in: cubic-bezier(0, 0, 0.2, 1);
129
+ --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
130
+
131
+ --default-transition-duration: 0.25s;
132
+ --transition-duration-short: 0.25s;
133
+ --transition-duration-moderate: 0.4s;
134
+ --transition-duration-long: 0.6s;
152
135
  --transition-duration-very-long: 1.2s;
153
136
 
154
137
  /* Animation */
155
- --animate-skeleton: skeleton var(--transition-duration-long) var(--ease-in-out) infinite;
138
+ --animate-skeleton: skeleton var(--transition-duration-long)
139
+ var(--ease-in-out) infinite;
156
140
 
157
141
  @keyframes skeleton {
158
142
  from {
@@ -166,75 +150,114 @@
166
150
 
167
151
  @layer theme {
168
152
  .light {
169
- --color-primary: #010205;
170
- --color-canvas: #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;
176
- --color-contrast-high: #535457;
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;
188
- --color-disabled: #949598;
153
+ --color-focus: #1a44ea;
154
+ --color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
155
+ --color-canvas: #fff;
156
+ --color-surface: hsl(240, 7.7%, 97.5%);
157
+ --color-frosted: hsla(236, 6.4%, 51%, 0.148);
158
+ --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
159
+ --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
160
+ --color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
161
+ --color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
162
+ --color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
163
+ --color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
164
+ --color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
165
+ --color-primary: hsl(225, 66.7%, 1.2%);
166
+ --color-success: hsl(115, 77.5%, 27.8%);
167
+ --color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
168
+ --color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
169
+ --color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
170
+ --color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
171
+ --color-warning: hsl(28, 97.7%, 34.1%);
172
+ --color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
173
+ --color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
174
+ --color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
175
+ --color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
176
+ --color-error: hsl(357, 78%, 41%);
177
+ --color-error-low: hsla(357, 78%, 41%, 0.18);
178
+ --color-error-medium: hsla(357, 78%, 41%, 0.6);
179
+ --color-error-frosted: hsla(357, 78%, 41%, 0.18);
180
+ --color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
181
+ --color-info: hsl(228, 83.2%, 51%);
182
+ --color-info-low: hsla(228, 83.2%, 51%, 0.18);
183
+ --color-info-medium: hsla(228, 83.2%, 51%, 0.6);
184
+ --color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
185
+ --color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
189
186
  --color-skeleton: #f7f7f7;
190
187
  }
191
188
 
192
189
  .dark {
193
- --color-primary: #FBFCFF;
194
- --color-canvas: #0E0E12;
195
- --color-surface: #212225;
196
- --color-shading: rgba(38,38,41,.67);
197
- --color-frosted: hsl(240 3% 26%/35%);
198
- --color-contrast-low: #404044;
199
- --color-contrast-medium: #88898C;
200
- --color-contrast-high: #AFB0B3;
201
- --color-success: #09D087;
202
- --color-success-soft: #003320;
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;
190
+ --color-focus: #1a44ea;
191
+ --color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
192
+ --color-canvas: hsl(225, 66.7%, 1.2%);
193
+ --color-surface: hsl(240, 2%, 10%);
194
+ --color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
195
+ --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
196
+ --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
197
+ --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
198
+ --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
199
+ --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
200
+ --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
201
+ --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
202
+ --color-primary: hsl(240, 12.5%, 96.9%);
203
+ --color-success: hsl(157, 84.9%, 41.6%);
204
+ --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
205
+ --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
206
+ --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
207
+ --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
208
+ --color-warning: hsl(28, 90.2%, 56.1%);
209
+ --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
210
+ --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
211
+ --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
212
+ --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
213
+ --color-error: hsl(0, 96.9%, 62%);
214
+ --color-error-low: hsla(0, 96.9%, 62%, 0.18);
215
+ --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
216
+ --color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
217
+ --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
218
+ --color-info: hsl(210, 100%, 54.5%);
219
+ --color-info-low: hsla(210, 100%, 54.5%, 0.18);
220
+ --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
221
+ --color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
222
+ --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
213
223
  --color-skeleton: #1a1b1e;
214
224
  }
215
225
 
216
226
  .auto {
217
227
  @media (prefers-color-scheme: dark) {
218
- --color-primary: #FBFCFF;
219
- --color-canvas: #0E0E12;
220
- --color-surface: #212225;
221
- --color-shading: rgba(38,38,41,.67);
222
- --color-frosted: hsl(240 3% 26%/35%);
223
- --color-contrast-low: #404044;
224
- --color-contrast-medium: #88898C;
225
- --color-contrast-high: #AFB0B3;
226
- --color-success: #09D087;
227
- --color-success-soft: #003320;
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;
228
+ --color-focus: #1a44ea;
229
+ --color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
230
+ --color-canvas: hsl(225, 66.7%, 1.2%);
231
+ --color-surface: hsl(240, 2%, 10%);
232
+ --color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
233
+ --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
234
+ --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
235
+ --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
236
+ --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
237
+ --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
238
+ --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
239
+ --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
240
+ --color-primary: hsl(240, 12.5%, 96.9%);
241
+ --color-success: hsl(157, 84.9%, 41.6%);
242
+ --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
243
+ --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
244
+ --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
245
+ --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
246
+ --color-warning: hsl(28, 90.2%, 56.1%);
247
+ --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
248
+ --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
249
+ --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
250
+ --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
251
+ --color-error: hsl(0, 96.9%, 62%);
252
+ --color-error-low: hsla(0, 96.9%, 62%, 0.18);
253
+ --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
254
+ --color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
255
+ --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
256
+ --color-info: hsl(210, 100%, 54.5%);
257
+ --color-info-low: hsla(210, 100%, 54.5%, 0.18);
258
+ --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
259
+ --color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
260
+ --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
238
261
  --color-skeleton: #1a1b1e;
239
262
  }
240
263
  }
@@ -259,8 +282,7 @@
259
282
 
260
283
  /* Grid */
261
284
  @utility grid-template {
262
- @apply
263
- [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
285
+ @apply [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
264
286
  [--_pds-grid-col:minmax(0,var(--pds-internal-grid-outer-column,calc(var(--pds-internal-grid-safe-zone)-var(--spacing-fluid-md))))]
265
287
  grid
266
288
  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]]
@@ -382,19 +404,19 @@
382
404
 
383
405
  /* Typography: Heading */
384
406
  @utility prose-heading-sm {
385
- @apply font-porsche-next not-italic font-semibold text-sm text-primary;
407
+ @apply font-porsche-next not-italic font-normal text-sm text-primary;
386
408
  }
387
409
  @utility prose-heading-md {
388
- @apply font-porsche-next not-italic font-semibold text-md text-primary;
410
+ @apply font-porsche-next not-italic font-normal text-md text-primary;
389
411
  }
390
412
  @utility prose-heading-lg {
391
- @apply font-porsche-next not-italic font-semibold text-lg text-primary;
413
+ @apply font-porsche-next not-italic font-normal text-lg text-primary;
392
414
  }
393
415
  @utility prose-heading-xl {
394
- @apply font-porsche-next not-italic font-semibold text-xl text-primary;
416
+ @apply font-porsche-next not-italic font-normal text-xl text-primary;
395
417
  }
396
418
  @utility prose-heading-2xl {
397
- @apply font-porsche-next not-italic font-semibold text-2xl text-primary;
419
+ @apply font-porsche-next not-italic font-normal text-2xl text-primary;
398
420
  }
399
421
 
400
422
  /* Typography: Display */
@@ -406,4 +428,4 @@
406
428
  }
407
429
  @utility prose-display-lg {
408
430
  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.28rem,5.2vw+1.24rem,7.48rem)];
409
- }
431
+ }
package/tokens/cjs/index.cjs ADDED
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ var tokens = require('@porsche-design-system/components-js/tokens');
4
+
5
+
6
+
7
+ Object.keys(tokens).forEach(function (k) {
8
+ if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
9
+ enumerable: true,
10
+ get: function () { return tokens[k]; }
11
+ });
12
+ });
package/tokens/esm/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from '@porsche-design-system/components-js/tokens';
package/tokens/esm/index.mjs ADDED
@@ -0,0 +1 @@
1
+ export * from '@porsche-design-system/components-js/tokens';