@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.
- package/README.md +51 -0
- package/dist/platform-tokens.css +592 -0
- package/dist/shell-reset.css +254 -0
- package/package.json +30 -0
- package/src/base.css +161 -0
- package/src/layer-order.css +23 -0
- package/src/shell-reset.css +254 -0
- package/src/tokens.css +406 -0
package/README.md
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
# @bluealba/pae-design-tokens
|
|
2
|
+
|
|
3
|
+
Single source of truth for the Blue Alba Platform CSS architecture: design
|
|
4
|
+
tokens, the cascade layer contract and base styles.
|
|
5
|
+
|
|
6
|
+
## Artifacts
|
|
7
|
+
|
|
8
|
+
| File | Purpose | Where it loads |
|
|
9
|
+
|---|---|---|
|
|
10
|
+
| `dist/platform-tokens.css` | Layer order declaration + all `--platform-*`/`--pae-shell-*` tokens (light & dark) + minimal document base | Inlined **first** in the document `<head>` by the gateway (`index.hbs`) |
|
|
11
|
+
| `dist/shell-reset.css` | Full preflight-style reset for the shell | Injected **inside the shell shadow root only** — never into the document |
|
|
12
|
+
|
|
13
|
+
## Cascade layer contract
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
@layer pae.tokens, pae.base, pae.customization;
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
- **`pae.tokens`** — token definitions (`:root` custom properties, `[data-theme='dark']` overrides).
|
|
20
|
+
- **`pae.base`** — minimal document base (`html`/`body`) + defensive defaults scoped to `[data-pae-ui]` (the marker `initializeMicroFrontend()` puts on every micro-frontend root).
|
|
21
|
+
- **`pae.customization`** — tenant/customization overrides. Always wins over the layers above **regardless of stylesheet load order** (this is what makes customization deterministic).
|
|
22
|
+
|
|
23
|
+
### What the contract guarantees
|
|
24
|
+
|
|
25
|
+
- Deterministic priority between platform layers, independent of load order.
|
|
26
|
+
- A micro-frontend using its own layers (e.g. Tailwind v4) declares them later in the document, so its CSS wins over platform layers inside its own tree.
|
|
27
|
+
- Tokens are consumed as CSS custom properties: they inherit into the shell shadow root and into every micro-frontend.
|
|
28
|
+
|
|
29
|
+
### What it does NOT guarantee
|
|
30
|
+
|
|
31
|
+
- Un-layered CSS beats layered CSS at equal specificity. The shell is immune
|
|
32
|
+
to hostile global CSS via **Shadow DOM**, not via layers.
|
|
33
|
+
- Isolation **between** micro-frontends in the light DOM. A micro-frontend
|
|
34
|
+
loading a global reset (e.g. an unscoped Tailwind preflight) can affect
|
|
35
|
+
sibling micro-frontends — scope your preflight to your own container
|
|
36
|
+
(`#pae-app:<module-name>`).
|
|
37
|
+
|
|
38
|
+
## Customization
|
|
39
|
+
|
|
40
|
+
Tenant customization stylesheets are wrapped in `@layer pae.customization`
|
|
41
|
+
automatically by `usePlatformCustomization` / `useDynamicStyleSheet`
|
|
42
|
+
(`@bluealba/pae-ui-react-core`). They should only re-declare custom
|
|
43
|
+
properties:
|
|
44
|
+
|
|
45
|
+
```css
|
|
46
|
+
:root {
|
|
47
|
+
--platform-color-primary-red: 5;
|
|
48
|
+
--platform-color-primary-green: 35;
|
|
49
|
+
--platform-color-primary-blue: 100;
|
|
50
|
+
}
|
|
51
|
+
```
|
|
@@ -0,0 +1,592 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Platform cascade layer contract.
|
|
3
|
+
*
|
|
4
|
+
* This MUST be the first stylesheet evaluated in the document: the first
|
|
5
|
+
* appearance of each layer name fixes its position in the cascade, so any
|
|
6
|
+
* stylesheet loaded later (in any order) that targets one of these layers
|
|
7
|
+
* gets deterministic priority.
|
|
8
|
+
*
|
|
9
|
+
* Order (lowest to highest priority at equal specificity):
|
|
10
|
+
* - pae.tokens design token definitions (custom properties)
|
|
11
|
+
* - pae.base minimal document base + defensive defaults ([data-pae-ui])
|
|
12
|
+
* - pae.customization tenant/customization overrides — always wins over the above
|
|
13
|
+
*
|
|
14
|
+
* Guarantees:
|
|
15
|
+
* - pae.customization beats pae.tokens/pae.base regardless of load order.
|
|
16
|
+
* - Micro-frontend CSS placed in its own layers (e.g. Tailwind v4 layers)
|
|
17
|
+
* is declared later, so it wins over platform layers inside the MFE tree.
|
|
18
|
+
*
|
|
19
|
+
* NOT guaranteed:
|
|
20
|
+
* - Un-layered third-party CSS always beats layered CSS at equal
|
|
21
|
+
* specificity. The shell is immune to that via Shadow DOM, not layers.
|
|
22
|
+
*/
|
|
23
|
+
@layer pae.tokens, pae.base, pae.customization;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Platform design tokens.
|
|
27
|
+
*
|
|
28
|
+
* Single source of truth for every --platform-* / --pae-shell-* custom
|
|
29
|
+
* property. Served by the gateway on the document (:root), so the values
|
|
30
|
+
* inherit both into the shell shadow root and into micro-frontends mounted
|
|
31
|
+
* in the light DOM.
|
|
32
|
+
*
|
|
33
|
+
* Customizations override these by re-declaring variables inside
|
|
34
|
+
* @layer pae.customization (see layer-order.css).
|
|
35
|
+
*/
|
|
36
|
+
@layer pae.tokens {
|
|
37
|
+
:root {
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Platform (generic) variables
|
|
41
|
+
*/
|
|
42
|
+
|
|
43
|
+
--platform-text-base-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
|
44
|
+
--platform-text-base-font-size: 12px;
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Colors
|
|
48
|
+
*/
|
|
49
|
+
|
|
50
|
+
--platform-color-primary-red: 57;
|
|
51
|
+
--platform-color-primary-green: 57;
|
|
52
|
+
--platform-color-primary-blue: 57;
|
|
53
|
+
|
|
54
|
+
--platform-color-primary: rgba(var(--platform-color-primary-red), var(--platform-color-primary-green), var(--platform-color-primary-blue), 1);
|
|
55
|
+
--platform-color-secondary: #ED8525;
|
|
56
|
+
|
|
57
|
+
--platform-color-white: #fff;
|
|
58
|
+
--platform-color-dark: #101828;
|
|
59
|
+
|
|
60
|
+
--platform-color-success: #2ECA76;
|
|
61
|
+
--platform-color-success-light: #E3F9F0;
|
|
62
|
+
--platform-color-warning: #EDB525;
|
|
63
|
+
--platform-color-warning-light: #FFF8E6;
|
|
64
|
+
--platform-color-danger: #E06969;
|
|
65
|
+
--platform-color-danger-light: #FEEFEE;
|
|
66
|
+
|
|
67
|
+
--platform-text-primary-color: #565656;
|
|
68
|
+
--platform-text-secondary-color: #818181;
|
|
69
|
+
|
|
70
|
+
--platform-background-primary-color: #fff;
|
|
71
|
+
--platform-background-secondary-color: #f9fafb;
|
|
72
|
+
--platform-lines: #e4e7ec;
|
|
73
|
+
|
|
74
|
+
--platform-authentication-background-primary-color: #212121;
|
|
75
|
+
--platform-authentication-background-secondary-color: #252525;
|
|
76
|
+
--platform-authentication-lines: #3A3A3A;
|
|
77
|
+
--platform-authentication-color: #fff;
|
|
78
|
+
--platform-authentication-button-background-color: #fff;
|
|
79
|
+
--platform-authentication-button-color: #212121;
|
|
80
|
+
|
|
81
|
+
/* DEPRECATED */
|
|
82
|
+
--platform-error-color: var(--platform-color-danger);
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Shadows
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
--platform-shadow-color: rgba(0,0,0,0.16);
|
|
89
|
+
--platform-shadow: 0px 4px 6px -2px #10182808, 0px 12px 16px -4px #10182814;
|
|
90
|
+
|
|
91
|
+
--platform-icon-default-color: #A9A9A9;
|
|
92
|
+
--platform-close-icon-color: var(--platform-icon-default-color);
|
|
93
|
+
--platform-close-icon-hover-color: #818181;
|
|
94
|
+
|
|
95
|
+
--platform-user-avatar-color: #393939;
|
|
96
|
+
--platform-user-avatar-background-color: #3939391A;
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Skeleton
|
|
100
|
+
*/
|
|
101
|
+
--platform-skeleton-color-1: #f5f5f5;
|
|
102
|
+
--platform-skeleton-color-2: #e5e5e5;
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Z-index layers
|
|
106
|
+
*/
|
|
107
|
+
--platform-bottom-layer: 0;
|
|
108
|
+
--platform-app-layer: 1000;
|
|
109
|
+
--platform-shell-layer: 2000;
|
|
110
|
+
--platform-modal-layer: 3000;
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* Label & Input (component tokens, formerly pae-ui-react-core/global.css)
|
|
114
|
+
*/
|
|
115
|
+
--platform-label-color: var(--platform-text-secondary-color);
|
|
116
|
+
--platform-input-border-color: var(--platform-lines);
|
|
117
|
+
--platform-input-background-color: var(--platform-background-secondary-color);
|
|
118
|
+
--platform-input-color: var(--platform-text-primary-color);
|
|
119
|
+
--platform-input-focus-border-color: var(--platform-color-primary);
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* Button (component tokens, formerly pae-ui-react-core/global.css)
|
|
123
|
+
*/
|
|
124
|
+
--platform-button-base-padding: 4px 16px;
|
|
125
|
+
--platform-button-base-border-radius: 6px;
|
|
126
|
+
--platform-button-base-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
127
|
+
--platform-button-base-font-size: 1em;
|
|
128
|
+
--platform-button-base-line-height: 16px;
|
|
129
|
+
--platform-button-base-height: calc(2 * var(--platform-button-base-font-size));
|
|
130
|
+
/* Contained Primary variant */
|
|
131
|
+
--platform-button-contained-primary-background-color: var(--platform-color-primary);
|
|
132
|
+
--platform-button-contained-primary-color: #ffffff;
|
|
133
|
+
/* Outlined Primary variant */
|
|
134
|
+
--platform-button-outlined-primary-color: var(--platform-color-primary);
|
|
135
|
+
/* Text Primary variant */
|
|
136
|
+
--platform-button-text-primary-color: var(--platform-text-primary-color);
|
|
137
|
+
/* Contained danger variant */
|
|
138
|
+
--platform-button-contained-danger-background-color: var(--platform-color-danger);
|
|
139
|
+
--platform-button-contained-danger-color: #ffffff;
|
|
140
|
+
/* Outlined danger variant */
|
|
141
|
+
--platform-button-outlined-danger-color: var(--platform-color-danger);
|
|
142
|
+
/* Text danger variant */
|
|
143
|
+
--platform-button-text-danger-color: var(--platform-color-danger);
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* Shell variables
|
|
147
|
+
*/
|
|
148
|
+
|
|
149
|
+
--pae-shell-text-base-font-family: var(--platform-text-base-font-family);
|
|
150
|
+
--pae-shell-text-base-font-size: var(--platform-text-base-font-size);
|
|
151
|
+
|
|
152
|
+
--pae-shell-text-primary-color: var(--platform-text-primary-color);
|
|
153
|
+
--pae-shell-text-secondary-color: var(--platform-text-secondary-color);
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* Colors
|
|
157
|
+
*/
|
|
158
|
+
|
|
159
|
+
--pae-shell-color-primary: var(--platform-color-primary);
|
|
160
|
+
|
|
161
|
+
--pae-shell-color-secondary: var(--platform-color-secondary);
|
|
162
|
+
--pae-shell-color-white: var(--platform-color-white);
|
|
163
|
+
--pae-shell-color-dark: var(--platform-color-dark);
|
|
164
|
+
--pae-shell-shadow: var(--platform-shadow);
|
|
165
|
+
|
|
166
|
+
/**
|
|
167
|
+
* Lines & Borders
|
|
168
|
+
*/
|
|
169
|
+
|
|
170
|
+
--box-border: 1px solid var(--platform-lines);
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* Layout / Navbar
|
|
174
|
+
*/
|
|
175
|
+
--pae-shell-navbar--width: 6.5em;
|
|
176
|
+
--pae-shell-navbar-expanded-width: 20em;
|
|
177
|
+
--pae-shell-navbar-top-color: var(--pae-shell-color-primary);
|
|
178
|
+
--pae-shell-navbar-bottom-color: rgb(
|
|
179
|
+
calc(var(--platform-color-primary-red) * 0.76),
|
|
180
|
+
calc(var(--platform-color-primary-green) * 0.76),
|
|
181
|
+
calc(var(--platform-color-primary-blue) * 0.76)
|
|
182
|
+
);
|
|
183
|
+
--pae-shell-navbar-color: linear-gradient(180deg, var(--pae-shell-navbar-top-color) 0%, var(--pae-shell-navbar-bottom-color) 100%);
|
|
184
|
+
--pae-shell-navbar-border-right: 0;
|
|
185
|
+
|
|
186
|
+
--pae-shell-application-content-background-color: var(--platform-background-primary-color);
|
|
187
|
+
|
|
188
|
+
--pae-shell-user-avatar-size: 50px;
|
|
189
|
+
--pae-shell-user-avatar-color: 255,255,255;
|
|
190
|
+
--pae-shell-user-avatar-font-size: 16px;
|
|
191
|
+
--pae-shell-user-avatar-padding: 1em 0 2em 0;
|
|
192
|
+
|
|
193
|
+
--pae-shell-navbar-toggle-state-background-color: var(--platform-text-primary-color);
|
|
194
|
+
--pae-shell-navbar-toggle-state-border-color: var(--platform-text-secondary-color);
|
|
195
|
+
--pae-shell-navbar-toggle-state-icon-color: var(--platform-lines);
|
|
196
|
+
--pae-shell-navbar-toggle-state-icon-hover-color: var(--pae-shell-color-white);
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* Logged in user
|
|
200
|
+
*/
|
|
201
|
+
--pae-shell-user-dropdown-background-color: var(--pae-shell-color-white);
|
|
202
|
+
--pae-shell-user-dropdown-hover-background-color: #3939391A;
|
|
203
|
+
--pae-shell-user-dropdown-color: var(--platform-text-primary-color);
|
|
204
|
+
|
|
205
|
+
--pae-shell-user-display-name-color: var(--pae-shell-color-white);
|
|
206
|
+
--pae-shell-user-user-name-color: var(--platform-text-secondary-color);
|
|
207
|
+
|
|
208
|
+
/**
|
|
209
|
+
* Splash screen
|
|
210
|
+
*/
|
|
211
|
+
--pae-shell-splash-screen-background-color: var(--pae-shell-color-primary);
|
|
212
|
+
--pae-shell-splash-screen-text-color: var(--pae-shell-color-white);
|
|
213
|
+
|
|
214
|
+
/**
|
|
215
|
+
* Version dialog
|
|
216
|
+
*/
|
|
217
|
+
--pae-shell-version-dialog-header-background-color: var(--pae-shell-color-primary);
|
|
218
|
+
--pae-shell-version-dialog-header-text-color: var(--pae-shell-color-white);
|
|
219
|
+
--pae-shell-version-dialog-content-background-color: var(--pae-shell-color-white);
|
|
220
|
+
--pae-shell-version-dialog-content-text-color: var(--pae-shell-text-primary-color);
|
|
221
|
+
--pae-shell-version-dialog-odd-item-background-color: var(--pae-shell-version-dialog-content-background-color);
|
|
222
|
+
--pae-shell-version-dialog-even-item-background-color: rgb(249, 250, 251);
|
|
223
|
+
--pae-shell-version-dialog-close-icon-color: var(--platform-close-icon-color);
|
|
224
|
+
--pae-shell-version-dialog-close-icon-hover-color: var(--platform-close-icon-hover-color);
|
|
225
|
+
|
|
226
|
+
/**
|
|
227
|
+
* Applications menu
|
|
228
|
+
*/
|
|
229
|
+
--pae-shell-apps-menu-item-background-color: #535353;
|
|
230
|
+
--pae-shell-apps-menu-item-color: var(--pae-shell-text-secondary-color);
|
|
231
|
+
--pae-shell-apps-menu-item-hover-background-color: transparent;
|
|
232
|
+
--pae-shell-apps-menu-selected-item-color: var(--pae-shell-color-white);
|
|
233
|
+
--pae-shell-apps-menu-selected-item-text-color: var(--pae-shell-color-white);
|
|
234
|
+
--pae-shell-apps-menu-items-gap: 1.4em;
|
|
235
|
+
--pae-shell-apps-menu-item-size: 44px;
|
|
236
|
+
--pae-shell-apps-menu-item-font-size: 1.3em;
|
|
237
|
+
--pae-shell-apps-menu-item-font-weight: 600;
|
|
238
|
+
--pae-shell-apps-menu-icon-size: 2.3em;
|
|
239
|
+
--pae-shell-apps-menu-selected-item-border-radius: 4px;
|
|
240
|
+
--pae-shell-apps-menu-selected-item-line-width: 4px;
|
|
241
|
+
|
|
242
|
+
/**
|
|
243
|
+
* Application sub-menu
|
|
244
|
+
*/
|
|
245
|
+
--pae-shell-app-menu-min-width: 16.5em;
|
|
246
|
+
--pae-shell-app-menu-max-width: 20em;
|
|
247
|
+
--pae-shell-app-menu-background-color: var(--platform-background-secondary-color);
|
|
248
|
+
--pae-shell-app-menu-border-right: 0;
|
|
249
|
+
|
|
250
|
+
--pae-shell-toggle-menu-button-background-color: var(--pae-shell-color-primary);
|
|
251
|
+
--pae-shell-toggle-menu-button-color: var(--pae-shell-color-white);
|
|
252
|
+
--pae-shell-toggle-menu-button-border-color: var(--pae-shell-color-primary);
|
|
253
|
+
|
|
254
|
+
--pae-shell-open-menu-button-top: 132px;
|
|
255
|
+
--pae-shell-open-menu-button-background-color: var(--pae-shell-toggle-menu-button-color);
|
|
256
|
+
--pae-shell-open-menu-button-color: var(--pae-shell-toggle-menu-button-background-color);
|
|
257
|
+
--pae-shell-open-menu-button-border-color: var(--pae-shell-toggle-menu-button-border-color);
|
|
258
|
+
|
|
259
|
+
--pae-shell-close-menu-button-top: 48px;
|
|
260
|
+
--pae-shell-close-menu-button-background-color: var(--pae-shell-toggle-menu-button-background-color);
|
|
261
|
+
--pae-shell-close-menu-button-color: var(--pae-shell-toggle-menu-button-color);
|
|
262
|
+
--pae-shell-close-menu-button-border-color: var(--pae-shell-toggle-menu-button-border-color);
|
|
263
|
+
|
|
264
|
+
--pae-shell-app-menu-title-color: var(--pae-shell-color-primary);
|
|
265
|
+
--pae-shell-app-menu-title-font-weight: 700;
|
|
266
|
+
--pae-shell-app-menu-title-font-size: 1.4em;
|
|
267
|
+
--pae-shell-app-menu-title-margin-bottom: 1em;
|
|
268
|
+
|
|
269
|
+
--pae-shell-app-menu-section-color: var(--pae-shell-text-secondary-color);
|
|
270
|
+
--pae-shell-app-menu-section-hover-color: var(--pae-shell-color-secondary);
|
|
271
|
+
|
|
272
|
+
--pae-shell-app-menu-item-padding: 0.7em 1em;
|
|
273
|
+
--pae-shell-app-menu-item-font-size: 1em;
|
|
274
|
+
--pae-shell-app-menu-item-font-weight: 600;
|
|
275
|
+
--pae-shell-app-menu-item-color: var(--pae-shell-text-primary-color);
|
|
276
|
+
--pae-shell-app-menu-item-hover-color: var(--pae-shell-color-secondary);
|
|
277
|
+
--pae-shell-app-menu-selected-item-color: var(--pae-shell-color-white);
|
|
278
|
+
--pae-shell-app-menu-selected-item-background-color: var(--pae-shell-color-primary);
|
|
279
|
+
--pae-shell-app-menu-selected-item-icon-color: var(--pae-shell-color-white);
|
|
280
|
+
--pae-shell-app-menu-selected-item-font-weight: 600;
|
|
281
|
+
|
|
282
|
+
/**
|
|
283
|
+
* Tooltip
|
|
284
|
+
*/
|
|
285
|
+
--pae-shell-tooltip-font-weight: 600;
|
|
286
|
+
--pae-shell-tooltip-color: var(--pae-shell-color-white);
|
|
287
|
+
--pae-shell-tooltip-background-color: var(--pae-shell-color-dark);
|
|
288
|
+
|
|
289
|
+
--platform-tooltip-font-weight: var(--pae-shell-tooltip-font-weight);
|
|
290
|
+
--platform-tooltip-color: var(--pae-shell-tooltip-color);
|
|
291
|
+
--platform-tooltip-background-color: var(--pae-shell-tooltip-background-color);
|
|
292
|
+
|
|
293
|
+
/**
|
|
294
|
+
* Impersonation dialog
|
|
295
|
+
*/
|
|
296
|
+
--pae-shell-impersonation-dialog-header-background-color: var(--platform-background-secondary-color);
|
|
297
|
+
--pae-shell-impersonation-dialog-header-text-color: var(--platform-text-primary-color);
|
|
298
|
+
--pae-shell-impersonation-dialog-content-background-color: var(--pae-shell-version-dialog-content-background-color);
|
|
299
|
+
--pae-shell-impersonation-dialog-content-text-color: var(--pae-shell-version-dialog-content-text-color);
|
|
300
|
+
--pae-shell-impersonation-dialog-close-icon-color: var(--platform-close-icon-color);
|
|
301
|
+
--pae-shell-impersonation-dialog-close-icon-hover-color: var(--platform-close-icon-hover-color);
|
|
302
|
+
|
|
303
|
+
--pae-shell-impersonation-recent-user-avatar-background-color: #3939391A;
|
|
304
|
+
--pae-shell-impersonation-recent-user-avatar-color: #393939;
|
|
305
|
+
|
|
306
|
+
--pae-shell-stop-impersonation-button-color: var(--pae-shell-color-white);
|
|
307
|
+
--pae-shell-stop-impersonation-button-background-color: var(--pae-shell-color-secondary);
|
|
308
|
+
|
|
309
|
+
--pae-shell-environment-indicator-color: var(--pae-shell-color-white);
|
|
310
|
+
--pae-shell-environment-indicator-background-color: var(--pae-shell-color-secondary);
|
|
311
|
+
|
|
312
|
+
/**
|
|
313
|
+
* Starlight documentation
|
|
314
|
+
*/
|
|
315
|
+
--pae-documentation-font: var(--platform-text-base-font-family);
|
|
316
|
+
--pae-documentation-accent-color: var(--platform-color-primary);
|
|
317
|
+
--pae-documentation-text-color: var(--platform-text-primary-color);
|
|
318
|
+
--pae-documentation-text-accent-color: var(--platform-color-secondary);
|
|
319
|
+
--pae-documentation-background-color: var(--platform-background-primary-color);
|
|
320
|
+
--pae-documentation-sidebar-background-color: var(--platform-background-secondary-color);
|
|
321
|
+
--pae-documentation-navbar-background-color: var(--platform-background-secondary-color);
|
|
322
|
+
--pae-documentation-lines: var(--platform-lines);
|
|
323
|
+
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
[data-theme='dark'] {
|
|
327
|
+
/**
|
|
328
|
+
* Platform colors (inverted for dark mode)
|
|
329
|
+
*/
|
|
330
|
+
--platform-color-success-light: #1a3a2a;
|
|
331
|
+
--platform-color-warning-light: #3a3020;
|
|
332
|
+
--platform-color-danger-light: #3a2020;
|
|
333
|
+
|
|
334
|
+
--platform-text-primary-color: #e0e0e0;
|
|
335
|
+
--platform-text-secondary-color: #b0b0b0;
|
|
336
|
+
|
|
337
|
+
--platform-background-primary-color: #1a1a1a;
|
|
338
|
+
--platform-background-secondary-color: #242424;
|
|
339
|
+
--platform-lines: #3a3a3a;
|
|
340
|
+
|
|
341
|
+
--platform-shadow-color: rgba(0,0,0,0.6);
|
|
342
|
+
|
|
343
|
+
--platform-icon-default-color: #b0b0b0;
|
|
344
|
+
--platform-close-icon-hover-color: #e0e0e0;
|
|
345
|
+
|
|
346
|
+
--platform-user-avatar-color: #e0e0e0;
|
|
347
|
+
--platform-user-avatar-background-color: #e0e0e01A;
|
|
348
|
+
|
|
349
|
+
/**
|
|
350
|
+
* Skeleton
|
|
351
|
+
*/
|
|
352
|
+
--platform-skeleton-color-1: #3f3f3f;
|
|
353
|
+
--platform-skeleton-color-2: #2f2f2f;
|
|
354
|
+
|
|
355
|
+
/**
|
|
356
|
+
* Shell colors (inverted for dark mode)
|
|
357
|
+
*/
|
|
358
|
+
--pae-shell-application-content-background-color: #1a1a1a;
|
|
359
|
+
/**
|
|
360
|
+
* User dropdown
|
|
361
|
+
*/
|
|
362
|
+
--pae-shell-user-dropdown-background-color: #242424;
|
|
363
|
+
--pae-shell-user-dropdown-hover-background-color: #e0e0e01A;
|
|
364
|
+
--pae-shell-user-dropdown-color: #e0e0e0;
|
|
365
|
+
|
|
366
|
+
--pae-shell-user-user-name-color: #b0b0b0;
|
|
367
|
+
|
|
368
|
+
/**
|
|
369
|
+
* Version dialog
|
|
370
|
+
*/
|
|
371
|
+
--pae-shell-version-dialog-content-background-color: #242424;
|
|
372
|
+
--pae-shell-version-dialog-content-text-color: #e0e0e0;
|
|
373
|
+
--pae-shell-version-dialog-odd-item-background-color: #242424;
|
|
374
|
+
--pae-shell-version-dialog-even-item-background-color: #2a2a2a;
|
|
375
|
+
--pae-shell-version-dialog-close-icon-color: #b0b0b0;
|
|
376
|
+
--pae-shell-version-dialog-close-icon-hover-color: #e0e0e0;
|
|
377
|
+
|
|
378
|
+
/**
|
|
379
|
+
* Applications menu
|
|
380
|
+
*/
|
|
381
|
+
--pae-shell-app-menu-title-color: #fff;
|
|
382
|
+
--pae-shell-apps-menu-item-background-color: #6a6a6a;
|
|
383
|
+
--pae-shell-apps-menu-item-color: #b0b0b0;
|
|
384
|
+
|
|
385
|
+
/**
|
|
386
|
+
* Application sub-menu
|
|
387
|
+
*/
|
|
388
|
+
--pae-shell-app-menu-background-color: #242424;
|
|
389
|
+
|
|
390
|
+
--pae-shell-open-menu-button-background-color: #242424;
|
|
391
|
+
--pae-shell-open-menu-button-color: var(--pae-shell-toggle-menu-button-background-color);
|
|
392
|
+
|
|
393
|
+
--pae-shell-close-menu-button-background-color: var(--pae-shell-toggle-menu-button-background-color);
|
|
394
|
+
|
|
395
|
+
--pae-shell-app-menu-section-color: #b0b0b0;
|
|
396
|
+
|
|
397
|
+
--pae-shell-app-menu-item-color: #e0e0e0;
|
|
398
|
+
|
|
399
|
+
/**
|
|
400
|
+
* Navbar
|
|
401
|
+
*/
|
|
402
|
+
--pae-shell-navbar-toggle-state-background-color: var(--pae-shell-app-menu-background-color);
|
|
403
|
+
--pae-shell-navbar-toggle-state-border-color: var(--platform-text-secondary-color);
|
|
404
|
+
--pae-shell-navbar-toggle-state-icon-color: var(--platform-text-secondary-color);
|
|
405
|
+
--pae-shell-navbar-toggle-state-icon-hover-color: var(--platform-text-primary-color);
|
|
406
|
+
|
|
407
|
+
/**
|
|
408
|
+
* Tooltip
|
|
409
|
+
*/
|
|
410
|
+
--pae-shell-tooltip-background-color: #2a2a2a;
|
|
411
|
+
|
|
412
|
+
/**
|
|
413
|
+
* Impersonation dialog
|
|
414
|
+
*/
|
|
415
|
+
--pae-shell-impersonation-dialog-header-background-color: #242424;
|
|
416
|
+
--pae-shell-impersonation-dialog-header-text-color: #e0e0e0;
|
|
417
|
+
--pae-shell-impersonation-dialog-content-background-color: #242424;
|
|
418
|
+
--pae-shell-impersonation-dialog-content-text-color: #e0e0e0;
|
|
419
|
+
--pae-shell-impersonation-dialog-close-icon-color: #b0b0b0;
|
|
420
|
+
--pae-shell-impersonation-dialog-close-icon-hover-color: #e0e0e0;
|
|
421
|
+
|
|
422
|
+
--pae-shell-impersonation-recent-user-avatar-background-color: #e0e0e01A;
|
|
423
|
+
--pae-shell-impersonation-recent-user-avatar-color: #e0e0e0;
|
|
424
|
+
|
|
425
|
+
/**
|
|
426
|
+
* Button
|
|
427
|
+
*/
|
|
428
|
+
--platform-button-outlined-primary-color: var(--platform-text-primary-color);
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
/**
|
|
433
|
+
* Platform document base + defensive defaults.
|
|
434
|
+
*
|
|
435
|
+
* Everything here lives in @layer pae.base, so:
|
|
436
|
+
* - a micro-frontend that owns its tree (e.g. Tailwind v4, whose layers are
|
|
437
|
+
* declared later in the document) can override these rules deliberately;
|
|
438
|
+
* - tenant customizations (@layer pae.customization) always win.
|
|
439
|
+
*
|
|
440
|
+
* IMPORTANT: this file must NOT contain aggressive global resets. The full
|
|
441
|
+
* preflight-style reset only exists inside the shell shadow root
|
|
442
|
+
* (see shell-reset.css).
|
|
443
|
+
*/
|
|
444
|
+
@layer pae.base {
|
|
445
|
+
|
|
446
|
+
/**
|
|
447
|
+
* Minimal document base. The shell is rendered in a shadow root and does
|
|
448
|
+
* not depend on these, but the document still needs a sane baseline:
|
|
449
|
+
* rem sizing, no default body margin and the platform font for
|
|
450
|
+
* micro-frontends that don't bring their own.
|
|
451
|
+
*/
|
|
452
|
+
html {
|
|
453
|
+
font-size: var(--platform-text-base-font-size);
|
|
454
|
+
line-height: 1.5;
|
|
455
|
+
-webkit-text-size-adjust: 100%;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
body {
|
|
459
|
+
margin: 0;
|
|
460
|
+
padding: 0;
|
|
461
|
+
line-height: inherit;
|
|
462
|
+
font-family: var(--platform-text-base-font-family);
|
|
463
|
+
overflow: hidden;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
/**
|
|
467
|
+
* Defensive defaults for platform UI rendered in the light DOM
|
|
468
|
+
* (pae-ui-react-core components inside micro-frontends). Scoped to the
|
|
469
|
+
* [data-pae-ui] marker that initializeMicroFrontend() puts on every
|
|
470
|
+
* micro-frontend root, so it never leaks into arbitrary third-party DOM.
|
|
471
|
+
*/
|
|
472
|
+
[data-pae-ui],
|
|
473
|
+
[data-pae-ui] *,
|
|
474
|
+
[data-pae-ui] *::before,
|
|
475
|
+
[data-pae-ui] *::after {
|
|
476
|
+
box-sizing: border-box;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
[data-pae-ui] button,
|
|
480
|
+
[data-pae-ui] input,
|
|
481
|
+
[data-pae-ui] optgroup,
|
|
482
|
+
[data-pae-ui] select,
|
|
483
|
+
[data-pae-ui] textarea {
|
|
484
|
+
font-family: inherit;
|
|
485
|
+
font-size: 100%;
|
|
486
|
+
font-weight: inherit;
|
|
487
|
+
line-height: inherit;
|
|
488
|
+
letter-spacing: inherit;
|
|
489
|
+
color: inherit;
|
|
490
|
+
margin: 0;
|
|
491
|
+
padding: 0;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
[data-pae-ui] button,
|
|
495
|
+
[data-pae-ui] select {
|
|
496
|
+
text-transform: none;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
[data-pae-ui] button,
|
|
500
|
+
[data-pae-ui] input:where([type=button]),
|
|
501
|
+
[data-pae-ui] input:where([type=reset]),
|
|
502
|
+
[data-pae-ui] input:where([type=submit]) {
|
|
503
|
+
-webkit-appearance: button;
|
|
504
|
+
background-color: transparent;
|
|
505
|
+
background-image: none;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
[data-pae-ui] button,
|
|
509
|
+
[data-pae-ui] [role=button] {
|
|
510
|
+
cursor: pointer;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
[data-pae-ui] :disabled {
|
|
514
|
+
cursor: default;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
[data-pae-ui] h1,
|
|
518
|
+
[data-pae-ui] h2,
|
|
519
|
+
[data-pae-ui] h3,
|
|
520
|
+
[data-pae-ui] h4,
|
|
521
|
+
[data-pae-ui] h5,
|
|
522
|
+
[data-pae-ui] h6,
|
|
523
|
+
[data-pae-ui] p,
|
|
524
|
+
[data-pae-ui] figure,
|
|
525
|
+
[data-pae-ui] blockquote,
|
|
526
|
+
[data-pae-ui] dl,
|
|
527
|
+
[data-pae-ui] dd,
|
|
528
|
+
[data-pae-ui] hr,
|
|
529
|
+
[data-pae-ui] pre {
|
|
530
|
+
margin: 0;
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
[data-pae-ui] h1,
|
|
534
|
+
[data-pae-ui] h2,
|
|
535
|
+
[data-pae-ui] h3,
|
|
536
|
+
[data-pae-ui] h4,
|
|
537
|
+
[data-pae-ui] h5,
|
|
538
|
+
[data-pae-ui] h6 {
|
|
539
|
+
font-size: inherit;
|
|
540
|
+
font-weight: inherit;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
[data-pae-ui] a {
|
|
544
|
+
color: inherit;
|
|
545
|
+
text-decoration: inherit;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
[data-pae-ui] menu,
|
|
549
|
+
[data-pae-ui] ol,
|
|
550
|
+
[data-pae-ui] ul {
|
|
551
|
+
list-style: none;
|
|
552
|
+
margin: 0;
|
|
553
|
+
padding: 0;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
[data-pae-ui] img,
|
|
557
|
+
[data-pae-ui] svg,
|
|
558
|
+
[data-pae-ui] video,
|
|
559
|
+
[data-pae-ui] canvas,
|
|
560
|
+
[data-pae-ui] audio,
|
|
561
|
+
[data-pae-ui] iframe,
|
|
562
|
+
[data-pae-ui] embed,
|
|
563
|
+
[data-pae-ui] object {
|
|
564
|
+
display: block;
|
|
565
|
+
vertical-align: middle;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
[data-pae-ui] img,
|
|
569
|
+
[data-pae-ui] video {
|
|
570
|
+
max-width: 100%;
|
|
571
|
+
height: auto;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
[data-pae-ui] textarea {
|
|
575
|
+
resize: vertical;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
[data-pae-ui] input::placeholder,
|
|
579
|
+
[data-pae-ui] textarea::placeholder {
|
|
580
|
+
opacity: 1;
|
|
581
|
+
color: #9ca3af;
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
/**
|
|
586
|
+
* Radix portals (popovers/tooltips/dropdowns) attach to document.body in the
|
|
587
|
+
* light DOM. They must stack above the application layer. Kept outside any
|
|
588
|
+
* layer on purpose so third-party layered CSS cannot accidentally beat it.
|
|
589
|
+
*/
|
|
590
|
+
div[data-radix-popper-content-wrapper] {
|
|
591
|
+
z-index: calc(var(--platform-shell-layer) + 10) !important;
|
|
592
|
+
}
|