@bluealba/pae-design-tokens 0.0.0-integration-css.403

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 (8) hide show
  1. package/README.md +51 -0
  2. package/dist/platform-tokens.css +592 -0
  3. package/dist/shell-reset.css +254 -0
  4. package/package.json +30 -0
  5. package/src/base.css +161 -0
  6. package/src/layer-order.css +23 -0
  7. package/src/shell-reset.css +254 -0
  8. package/src/tokens.css +406 -0
package/src/tokens.css ADDED
@@ -0,0 +1,406 @@
1
+ /**
2
+ * Platform design tokens.
3
+ *
4
+ * Single source of truth for every --platform-* / --pae-shell-* custom
5
+ * property. Served by the gateway on the document (:root), so the values
6
+ * inherit both into the shell shadow root and into micro-frontends mounted
7
+ * in the light DOM.
8
+ *
9
+ * Customizations override these by re-declaring variables inside
10
+ * @layer pae.customization (see layer-order.css).
11
+ */
12
+ @layer pae.tokens {
13
+ :root {
14
+
15
+ /**
16
+ * Platform (generic) variables
17
+ */
18
+
19
+ --platform-text-base-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
20
+ --platform-text-base-font-size: 12px;
21
+
22
+ /**
23
+ * Colors
24
+ */
25
+
26
+ --platform-color-primary-red: 57;
27
+ --platform-color-primary-green: 57;
28
+ --platform-color-primary-blue: 57;
29
+
30
+ --platform-color-primary: rgba(var(--platform-color-primary-red), var(--platform-color-primary-green), var(--platform-color-primary-blue), 1);
31
+ --platform-color-secondary: #ED8525;
32
+
33
+ --platform-color-white: #fff;
34
+ --platform-color-dark: #101828;
35
+
36
+ --platform-color-success: #2ECA76;
37
+ --platform-color-success-light: #E3F9F0;
38
+ --platform-color-warning: #EDB525;
39
+ --platform-color-warning-light: #FFF8E6;
40
+ --platform-color-danger: #E06969;
41
+ --platform-color-danger-light: #FEEFEE;
42
+
43
+ --platform-text-primary-color: #565656;
44
+ --platform-text-secondary-color: #818181;
45
+
46
+ --platform-background-primary-color: #fff;
47
+ --platform-background-secondary-color: #f9fafb;
48
+ --platform-lines: #e4e7ec;
49
+
50
+ --platform-authentication-background-primary-color: #212121;
51
+ --platform-authentication-background-secondary-color: #252525;
52
+ --platform-authentication-lines: #3A3A3A;
53
+ --platform-authentication-color: #fff;
54
+ --platform-authentication-button-background-color: #fff;
55
+ --platform-authentication-button-color: #212121;
56
+
57
+ /* DEPRECATED */
58
+ --platform-error-color: var(--platform-color-danger);
59
+
60
+ /**
61
+ * Shadows
62
+ */
63
+
64
+ --platform-shadow-color: rgba(0,0,0,0.16);
65
+ --platform-shadow: 0px 4px 6px -2px #10182808, 0px 12px 16px -4px #10182814;
66
+
67
+ --platform-icon-default-color: #A9A9A9;
68
+ --platform-close-icon-color: var(--platform-icon-default-color);
69
+ --platform-close-icon-hover-color: #818181;
70
+
71
+ --platform-user-avatar-color: #393939;
72
+ --platform-user-avatar-background-color: #3939391A;
73
+
74
+ /**
75
+ * Skeleton
76
+ */
77
+ --platform-skeleton-color-1: #f5f5f5;
78
+ --platform-skeleton-color-2: #e5e5e5;
79
+
80
+ /**
81
+ * Z-index layers
82
+ */
83
+ --platform-bottom-layer: 0;
84
+ --platform-app-layer: 1000;
85
+ --platform-shell-layer: 2000;
86
+ --platform-modal-layer: 3000;
87
+
88
+ /**
89
+ * Label & Input (component tokens, formerly pae-ui-react-core/global.css)
90
+ */
91
+ --platform-label-color: var(--platform-text-secondary-color);
92
+ --platform-input-border-color: var(--platform-lines);
93
+ --platform-input-background-color: var(--platform-background-secondary-color);
94
+ --platform-input-color: var(--platform-text-primary-color);
95
+ --platform-input-focus-border-color: var(--platform-color-primary);
96
+
97
+ /**
98
+ * Button (component tokens, formerly pae-ui-react-core/global.css)
99
+ */
100
+ --platform-button-base-padding: 4px 16px;
101
+ --platform-button-base-border-radius: 6px;
102
+ --platform-button-base-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
103
+ --platform-button-base-font-size: 1em;
104
+ --platform-button-base-line-height: 16px;
105
+ --platform-button-base-height: calc(2 * var(--platform-button-base-font-size));
106
+ /* Contained Primary variant */
107
+ --platform-button-contained-primary-background-color: var(--platform-color-primary);
108
+ --platform-button-contained-primary-color: #ffffff;
109
+ /* Outlined Primary variant */
110
+ --platform-button-outlined-primary-color: var(--platform-color-primary);
111
+ /* Text Primary variant */
112
+ --platform-button-text-primary-color: var(--platform-text-primary-color);
113
+ /* Contained danger variant */
114
+ --platform-button-contained-danger-background-color: var(--platform-color-danger);
115
+ --platform-button-contained-danger-color: #ffffff;
116
+ /* Outlined danger variant */
117
+ --platform-button-outlined-danger-color: var(--platform-color-danger);
118
+ /* Text danger variant */
119
+ --platform-button-text-danger-color: var(--platform-color-danger);
120
+
121
+ /**
122
+ * Shell variables
123
+ */
124
+
125
+ --pae-shell-text-base-font-family: var(--platform-text-base-font-family);
126
+ --pae-shell-text-base-font-size: var(--platform-text-base-font-size);
127
+
128
+ --pae-shell-text-primary-color: var(--platform-text-primary-color);
129
+ --pae-shell-text-secondary-color: var(--platform-text-secondary-color);
130
+
131
+ /**
132
+ * Colors
133
+ */
134
+
135
+ --pae-shell-color-primary: var(--platform-color-primary);
136
+
137
+ --pae-shell-color-secondary: var(--platform-color-secondary);
138
+ --pae-shell-color-white: var(--platform-color-white);
139
+ --pae-shell-color-dark: var(--platform-color-dark);
140
+ --pae-shell-shadow: var(--platform-shadow);
141
+
142
+ /**
143
+ * Lines & Borders
144
+ */
145
+
146
+ --box-border: 1px solid var(--platform-lines);
147
+
148
+ /**
149
+ * Layout / Navbar
150
+ */
151
+ --pae-shell-navbar--width: 6.5em;
152
+ --pae-shell-navbar-expanded-width: 20em;
153
+ --pae-shell-navbar-top-color: var(--pae-shell-color-primary);
154
+ --pae-shell-navbar-bottom-color: rgb(
155
+ calc(var(--platform-color-primary-red) * 0.76),
156
+ calc(var(--platform-color-primary-green) * 0.76),
157
+ calc(var(--platform-color-primary-blue) * 0.76)
158
+ );
159
+ --pae-shell-navbar-color: linear-gradient(180deg, var(--pae-shell-navbar-top-color) 0%, var(--pae-shell-navbar-bottom-color) 100%);
160
+ --pae-shell-navbar-border-right: 0;
161
+
162
+ --pae-shell-application-content-background-color: var(--platform-background-primary-color);
163
+
164
+ --pae-shell-user-avatar-size: 50px;
165
+ --pae-shell-user-avatar-color: 255,255,255;
166
+ --pae-shell-user-avatar-font-size: 16px;
167
+ --pae-shell-user-avatar-padding: 1em 0 2em 0;
168
+
169
+ --pae-shell-navbar-toggle-state-background-color: var(--platform-text-primary-color);
170
+ --pae-shell-navbar-toggle-state-border-color: var(--platform-text-secondary-color);
171
+ --pae-shell-navbar-toggle-state-icon-color: var(--platform-lines);
172
+ --pae-shell-navbar-toggle-state-icon-hover-color: var(--pae-shell-color-white);
173
+
174
+ /**
175
+ * Logged in user
176
+ */
177
+ --pae-shell-user-dropdown-background-color: var(--pae-shell-color-white);
178
+ --pae-shell-user-dropdown-hover-background-color: #3939391A;
179
+ --pae-shell-user-dropdown-color: var(--platform-text-primary-color);
180
+
181
+ --pae-shell-user-display-name-color: var(--pae-shell-color-white);
182
+ --pae-shell-user-user-name-color: var(--platform-text-secondary-color);
183
+
184
+ /**
185
+ * Splash screen
186
+ */
187
+ --pae-shell-splash-screen-background-color: var(--pae-shell-color-primary);
188
+ --pae-shell-splash-screen-text-color: var(--pae-shell-color-white);
189
+
190
+ /**
191
+ * Version dialog
192
+ */
193
+ --pae-shell-version-dialog-header-background-color: var(--pae-shell-color-primary);
194
+ --pae-shell-version-dialog-header-text-color: var(--pae-shell-color-white);
195
+ --pae-shell-version-dialog-content-background-color: var(--pae-shell-color-white);
196
+ --pae-shell-version-dialog-content-text-color: var(--pae-shell-text-primary-color);
197
+ --pae-shell-version-dialog-odd-item-background-color: var(--pae-shell-version-dialog-content-background-color);
198
+ --pae-shell-version-dialog-even-item-background-color: rgb(249, 250, 251);
199
+ --pae-shell-version-dialog-close-icon-color: var(--platform-close-icon-color);
200
+ --pae-shell-version-dialog-close-icon-hover-color: var(--platform-close-icon-hover-color);
201
+
202
+ /**
203
+ * Applications menu
204
+ */
205
+ --pae-shell-apps-menu-item-background-color: #535353;
206
+ --pae-shell-apps-menu-item-color: var(--pae-shell-text-secondary-color);
207
+ --pae-shell-apps-menu-item-hover-background-color: transparent;
208
+ --pae-shell-apps-menu-selected-item-color: var(--pae-shell-color-white);
209
+ --pae-shell-apps-menu-selected-item-text-color: var(--pae-shell-color-white);
210
+ --pae-shell-apps-menu-items-gap: 1.4em;
211
+ --pae-shell-apps-menu-item-size: 44px;
212
+ --pae-shell-apps-menu-item-font-size: 1.3em;
213
+ --pae-shell-apps-menu-item-font-weight: 600;
214
+ --pae-shell-apps-menu-icon-size: 2.3em;
215
+ --pae-shell-apps-menu-selected-item-border-radius: 4px;
216
+ --pae-shell-apps-menu-selected-item-line-width: 4px;
217
+
218
+ /**
219
+ * Application sub-menu
220
+ */
221
+ --pae-shell-app-menu-min-width: 16.5em;
222
+ --pae-shell-app-menu-max-width: 20em;
223
+ --pae-shell-app-menu-background-color: var(--platform-background-secondary-color);
224
+ --pae-shell-app-menu-border-right: 0;
225
+
226
+ --pae-shell-toggle-menu-button-background-color: var(--pae-shell-color-primary);
227
+ --pae-shell-toggle-menu-button-color: var(--pae-shell-color-white);
228
+ --pae-shell-toggle-menu-button-border-color: var(--pae-shell-color-primary);
229
+
230
+ --pae-shell-open-menu-button-top: 132px;
231
+ --pae-shell-open-menu-button-background-color: var(--pae-shell-toggle-menu-button-color);
232
+ --pae-shell-open-menu-button-color: var(--pae-shell-toggle-menu-button-background-color);
233
+ --pae-shell-open-menu-button-border-color: var(--pae-shell-toggle-menu-button-border-color);
234
+
235
+ --pae-shell-close-menu-button-top: 48px;
236
+ --pae-shell-close-menu-button-background-color: var(--pae-shell-toggle-menu-button-background-color);
237
+ --pae-shell-close-menu-button-color: var(--pae-shell-toggle-menu-button-color);
238
+ --pae-shell-close-menu-button-border-color: var(--pae-shell-toggle-menu-button-border-color);
239
+
240
+ --pae-shell-app-menu-title-color: var(--pae-shell-color-primary);
241
+ --pae-shell-app-menu-title-font-weight: 700;
242
+ --pae-shell-app-menu-title-font-size: 1.4em;
243
+ --pae-shell-app-menu-title-margin-bottom: 1em;
244
+
245
+ --pae-shell-app-menu-section-color: var(--pae-shell-text-secondary-color);
246
+ --pae-shell-app-menu-section-hover-color: var(--pae-shell-color-secondary);
247
+
248
+ --pae-shell-app-menu-item-padding: 0.7em 1em;
249
+ --pae-shell-app-menu-item-font-size: 1em;
250
+ --pae-shell-app-menu-item-font-weight: 600;
251
+ --pae-shell-app-menu-item-color: var(--pae-shell-text-primary-color);
252
+ --pae-shell-app-menu-item-hover-color: var(--pae-shell-color-secondary);
253
+ --pae-shell-app-menu-selected-item-color: var(--pae-shell-color-white);
254
+ --pae-shell-app-menu-selected-item-background-color: var(--pae-shell-color-primary);
255
+ --pae-shell-app-menu-selected-item-icon-color: var(--pae-shell-color-white);
256
+ --pae-shell-app-menu-selected-item-font-weight: 600;
257
+
258
+ /**
259
+ * Tooltip
260
+ */
261
+ --pae-shell-tooltip-font-weight: 600;
262
+ --pae-shell-tooltip-color: var(--pae-shell-color-white);
263
+ --pae-shell-tooltip-background-color: var(--pae-shell-color-dark);
264
+
265
+ --platform-tooltip-font-weight: var(--pae-shell-tooltip-font-weight);
266
+ --platform-tooltip-color: var(--pae-shell-tooltip-color);
267
+ --platform-tooltip-background-color: var(--pae-shell-tooltip-background-color);
268
+
269
+ /**
270
+ * Impersonation dialog
271
+ */
272
+ --pae-shell-impersonation-dialog-header-background-color: var(--platform-background-secondary-color);
273
+ --pae-shell-impersonation-dialog-header-text-color: var(--platform-text-primary-color);
274
+ --pae-shell-impersonation-dialog-content-background-color: var(--pae-shell-version-dialog-content-background-color);
275
+ --pae-shell-impersonation-dialog-content-text-color: var(--pae-shell-version-dialog-content-text-color);
276
+ --pae-shell-impersonation-dialog-close-icon-color: var(--platform-close-icon-color);
277
+ --pae-shell-impersonation-dialog-close-icon-hover-color: var(--platform-close-icon-hover-color);
278
+
279
+ --pae-shell-impersonation-recent-user-avatar-background-color: #3939391A;
280
+ --pae-shell-impersonation-recent-user-avatar-color: #393939;
281
+
282
+ --pae-shell-stop-impersonation-button-color: var(--pae-shell-color-white);
283
+ --pae-shell-stop-impersonation-button-background-color: var(--pae-shell-color-secondary);
284
+
285
+ --pae-shell-environment-indicator-color: var(--pae-shell-color-white);
286
+ --pae-shell-environment-indicator-background-color: var(--pae-shell-color-secondary);
287
+
288
+ /**
289
+ * Starlight documentation
290
+ */
291
+ --pae-documentation-font: var(--platform-text-base-font-family);
292
+ --pae-documentation-accent-color: var(--platform-color-primary);
293
+ --pae-documentation-text-color: var(--platform-text-primary-color);
294
+ --pae-documentation-text-accent-color: var(--platform-color-secondary);
295
+ --pae-documentation-background-color: var(--platform-background-primary-color);
296
+ --pae-documentation-sidebar-background-color: var(--platform-background-secondary-color);
297
+ --pae-documentation-navbar-background-color: var(--platform-background-secondary-color);
298
+ --pae-documentation-lines: var(--platform-lines);
299
+
300
+ }
301
+
302
+ [data-theme='dark'] {
303
+ /**
304
+ * Platform colors (inverted for dark mode)
305
+ */
306
+ --platform-color-success-light: #1a3a2a;
307
+ --platform-color-warning-light: #3a3020;
308
+ --platform-color-danger-light: #3a2020;
309
+
310
+ --platform-text-primary-color: #e0e0e0;
311
+ --platform-text-secondary-color: #b0b0b0;
312
+
313
+ --platform-background-primary-color: #1a1a1a;
314
+ --platform-background-secondary-color: #242424;
315
+ --platform-lines: #3a3a3a;
316
+
317
+ --platform-shadow-color: rgba(0,0,0,0.6);
318
+
319
+ --platform-icon-default-color: #b0b0b0;
320
+ --platform-close-icon-hover-color: #e0e0e0;
321
+
322
+ --platform-user-avatar-color: #e0e0e0;
323
+ --platform-user-avatar-background-color: #e0e0e01A;
324
+
325
+ /**
326
+ * Skeleton
327
+ */
328
+ --platform-skeleton-color-1: #3f3f3f;
329
+ --platform-skeleton-color-2: #2f2f2f;
330
+
331
+ /**
332
+ * Shell colors (inverted for dark mode)
333
+ */
334
+ --pae-shell-application-content-background-color: #1a1a1a;
335
+ /**
336
+ * User dropdown
337
+ */
338
+ --pae-shell-user-dropdown-background-color: #242424;
339
+ --pae-shell-user-dropdown-hover-background-color: #e0e0e01A;
340
+ --pae-shell-user-dropdown-color: #e0e0e0;
341
+
342
+ --pae-shell-user-user-name-color: #b0b0b0;
343
+
344
+ /**
345
+ * Version dialog
346
+ */
347
+ --pae-shell-version-dialog-content-background-color: #242424;
348
+ --pae-shell-version-dialog-content-text-color: #e0e0e0;
349
+ --pae-shell-version-dialog-odd-item-background-color: #242424;
350
+ --pae-shell-version-dialog-even-item-background-color: #2a2a2a;
351
+ --pae-shell-version-dialog-close-icon-color: #b0b0b0;
352
+ --pae-shell-version-dialog-close-icon-hover-color: #e0e0e0;
353
+
354
+ /**
355
+ * Applications menu
356
+ */
357
+ --pae-shell-app-menu-title-color: #fff;
358
+ --pae-shell-apps-menu-item-background-color: #6a6a6a;
359
+ --pae-shell-apps-menu-item-color: #b0b0b0;
360
+
361
+ /**
362
+ * Application sub-menu
363
+ */
364
+ --pae-shell-app-menu-background-color: #242424;
365
+
366
+ --pae-shell-open-menu-button-background-color: #242424;
367
+ --pae-shell-open-menu-button-color: var(--pae-shell-toggle-menu-button-background-color);
368
+
369
+ --pae-shell-close-menu-button-background-color: var(--pae-shell-toggle-menu-button-background-color);
370
+
371
+ --pae-shell-app-menu-section-color: #b0b0b0;
372
+
373
+ --pae-shell-app-menu-item-color: #e0e0e0;
374
+
375
+ /**
376
+ * Navbar
377
+ */
378
+ --pae-shell-navbar-toggle-state-background-color: var(--pae-shell-app-menu-background-color);
379
+ --pae-shell-navbar-toggle-state-border-color: var(--platform-text-secondary-color);
380
+ --pae-shell-navbar-toggle-state-icon-color: var(--platform-text-secondary-color);
381
+ --pae-shell-navbar-toggle-state-icon-hover-color: var(--platform-text-primary-color);
382
+
383
+ /**
384
+ * Tooltip
385
+ */
386
+ --pae-shell-tooltip-background-color: #2a2a2a;
387
+
388
+ /**
389
+ * Impersonation dialog
390
+ */
391
+ --pae-shell-impersonation-dialog-header-background-color: #242424;
392
+ --pae-shell-impersonation-dialog-header-text-color: #e0e0e0;
393
+ --pae-shell-impersonation-dialog-content-background-color: #242424;
394
+ --pae-shell-impersonation-dialog-content-text-color: #e0e0e0;
395
+ --pae-shell-impersonation-dialog-close-icon-color: #b0b0b0;
396
+ --pae-shell-impersonation-dialog-close-icon-hover-color: #e0e0e0;
397
+
398
+ --pae-shell-impersonation-recent-user-avatar-background-color: #e0e0e01A;
399
+ --pae-shell-impersonation-recent-user-avatar-color: #e0e0e0;
400
+
401
+ /**
402
+ * Button
403
+ */
404
+ --platform-button-outlined-primary-color: var(--platform-text-primary-color);
405
+ }
406
+ }