otimus-library 0.5.6 → 0.5.7
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/fesm2022/otimus-library.mjs +184 -97
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +19 -5
- package/package.json +1 -1
- package/styles/components/inputs/inputs.scss +13 -0
- package/styles/components/inputs/inputs.shui.scss +23 -0
- package/styles/components/table/table.scss +9 -9
- package/styles/components/table/table.shui.scss +5 -5
- package/styles/patterns/shui/colors.shui.scss +9 -6
- package/styles/patterns/shui/variables.shui.scss +24 -16
- package/styles/styles.scss +7 -6
- package/styles/tokens.scss +332 -0
- package/styles/variables.scss +61 -44
|
@@ -0,0 +1,332 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Design tokens as CSS custom properties (runtime-themeable) — ACC-2362
|
|
3
|
+
// -----------------------------------------------------------------------------
|
|
4
|
+
// This file is the SINGLE SOURCE OF TRUTH for every brand / state / neutral
|
|
5
|
+
// color value. It is emitted globally exactly once (via `styles.scss`).
|
|
6
|
+
//
|
|
7
|
+
// Components keep referencing the SCSS aliases in `variables.scss`
|
|
8
|
+
// (`$color-brand-p-1`, `$color-shui-ui-8`, …) which now simply resolve to the
|
|
9
|
+
// matching `var(--oc-color-*)` — so switching the palette or the light/dark
|
|
10
|
+
// variant is done by TOGGLING A CLASS on <body>, with no component changes.
|
|
11
|
+
//
|
|
12
|
+
// Class convention (see PLAN-P3 / PLAN-OVERVIEW):
|
|
13
|
+
// theme = palette base class (omitted for `otimus`, the :root default)
|
|
14
|
+
// variant = dark -> additional `<theme>-dark` class
|
|
15
|
+
// e.g. otimus+dark => "otimus-dark"
|
|
16
|
+
// asl+light => "asl" | asl+dark => "asl asl-dark"
|
|
17
|
+
// shui+light => "shui" | shui+dark => "shui shui-dark"
|
|
18
|
+
//
|
|
19
|
+
// Dark values are the WCAG-validated palette approved 2026-07-06
|
|
20
|
+
// (task-descriptions/2362/PLAN-P3-dark-palette.md).
|
|
21
|
+
// =============================================================================
|
|
22
|
+
|
|
23
|
+
// -----------------------------------------------------------------------------
|
|
24
|
+
// :root — Otimus LIGHT (the default identity; also the ASL base for now)
|
|
25
|
+
// -----------------------------------------------------------------------------
|
|
26
|
+
:root {
|
|
27
|
+
// Native controls (date/time pickers + their icons, native selects, spin
|
|
28
|
+
// buttons, scrollbars) follow `color-scheme`. Declaring it per variant keeps
|
|
29
|
+
// those OS-drawn parts readable — otherwise a dark date field renders a black
|
|
30
|
+
// calendar icon. Dark blocks below set `dark`.
|
|
31
|
+
color-scheme: light;
|
|
32
|
+
|
|
33
|
+
// Brand — primary purple
|
|
34
|
+
--oc-color-brand-p-1: #5505a2;
|
|
35
|
+
--oc-color-brand-p-2: #661eab;
|
|
36
|
+
--oc-color-brand-p-3: #7737b5;
|
|
37
|
+
--oc-color-brand-p-4: #8850be;
|
|
38
|
+
--oc-color-brand-p-5: #9969c7;
|
|
39
|
+
--oc-color-brand-p-6: #bb9cd9;
|
|
40
|
+
// p-7/p-8: os dois tons mais claros do ramp. O clinic tinha 8 passos; o lib
|
|
41
|
+
// re-indexou para 6 (removeu o outlier deep-purple), então p-7 reaproveita o
|
|
42
|
+
// valor de p-6 e p-8 é o tom mais claro — preserva o render atual do otimus.
|
|
43
|
+
--oc-color-brand-p-7: #bb9cd9;
|
|
44
|
+
--oc-color-brand-p-8: #e6d5f3;
|
|
45
|
+
|
|
46
|
+
// Brand — deep purple
|
|
47
|
+
--oc-color-brand-dp-1: #1e0832;
|
|
48
|
+
--oc-color-brand-dp-2: #352147;
|
|
49
|
+
--oc-color-brand-dp-3: #4b395b;
|
|
50
|
+
--oc-color-brand-dp-4: #625270;
|
|
51
|
+
--oc-color-brand-dp-5: #786b84;
|
|
52
|
+
|
|
53
|
+
// Brand — secondary green
|
|
54
|
+
--oc-color-brand-g-1: #00dda3;
|
|
55
|
+
--oc-color-brand-g-2: #1ae0ac;
|
|
56
|
+
--oc-color-brand-g-3: #33e4b5;
|
|
57
|
+
--oc-color-brand-g-4: #4de7bf;
|
|
58
|
+
--oc-color-brand-g-5: #66ebc8;
|
|
59
|
+
--oc-color-brand-g-6: #94ffe3;
|
|
60
|
+
|
|
61
|
+
// State / feedback
|
|
62
|
+
--oc-color-success: #4ab858;
|
|
63
|
+
--oc-color-warning: #ebbc2e;
|
|
64
|
+
--oc-color-error: #ed3a3a;
|
|
65
|
+
|
|
66
|
+
// State tints (soft surfaces: bg / border / text)
|
|
67
|
+
--oc-color-success-tint-bg: #e6fbf4;
|
|
68
|
+
--oc-color-success-tint-border: #b7efdb;
|
|
69
|
+
--oc-color-success-tint-text: #08643d;
|
|
70
|
+
--oc-color-error-tint-bg: #fde9e9;
|
|
71
|
+
--oc-color-error-tint-border: #f5bfbf;
|
|
72
|
+
--oc-color-error-tint-text: #7a1717;
|
|
73
|
+
--oc-color-info-tint-bg: #f2eaf9;
|
|
74
|
+
--oc-color-info-tint-border: #dcc8ee;
|
|
75
|
+
--oc-color-info-tint-text: #3d0676;
|
|
76
|
+
|
|
77
|
+
// Neutrals
|
|
78
|
+
--oc-color-gray-1: #353535;
|
|
79
|
+
--oc-color-gray-2: #7e8485;
|
|
80
|
+
--oc-color-gray-3: #8f9596;
|
|
81
|
+
--oc-color-gray-4: #d1d5db;
|
|
82
|
+
--oc-color-gray-5: #f7f7f7;
|
|
83
|
+
--oc-color-gray-6: #f8f9ff;
|
|
84
|
+
--oc-color-white: #ffffff;
|
|
85
|
+
|
|
86
|
+
// Semantic surfaces (NEW — for coherent dark mode; adopt incrementally).
|
|
87
|
+
// In light they equal the neutrals components already use for surfaces.
|
|
88
|
+
--oc-color-bg-1: #f7f7f7; // page background (was gray-5)
|
|
89
|
+
--oc-color-surface-1: #ffffff; // card / paper (was white)
|
|
90
|
+
--oc-color-surface-2: #f8f9ff; // elevated: menus, hover (was gray-6)
|
|
91
|
+
--oc-color-surface-3: #f7f7f7; // soft fill (was gray-5)
|
|
92
|
+
--oc-color-border-1: #d1d5db; // divider / border (was gray-4)
|
|
93
|
+
|
|
94
|
+
// Text
|
|
95
|
+
--oc-color-text-1: #353535; // primary
|
|
96
|
+
--oc-color-text-2: #7e8485; // secondary
|
|
97
|
+
--oc-color-text-3: #5505a2; // brand
|
|
98
|
+
--oc-color-text-4: #00dda3; // green
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// -----------------------------------------------------------------------------
|
|
102
|
+
// ASL LIGHT — mirrors Otimus for now (own hex to be defined later).
|
|
103
|
+
// The class must exist so `cliente.theme = 'asl'` resolves to a real selector.
|
|
104
|
+
// -----------------------------------------------------------------------------
|
|
105
|
+
// NOTE ON SELECTORS: every theme token block below is scoped to `body.<theme>`,
|
|
106
|
+
// NOT a bare `.<theme>`. ThemeService sets the theme classes on <body>. Bare
|
|
107
|
+
// `.shui` is ALSO used by components as a styling hook on inner elements
|
|
108
|
+
// (e.g. oc-step adds `class="shui"`); if the token block used a bare `.shui`,
|
|
109
|
+
// those inner hooks would RE-DECLARE the light token block for their subtree,
|
|
110
|
+
// shadowing `body.shui-dark` and reverting that subtree to the light palette
|
|
111
|
+
// (and reverting Azul's accent). Scoping to `body.<theme>` means only <body>
|
|
112
|
+
// carries the tokens; inner `.shui` hooks inherit the correct values.
|
|
113
|
+
body.asl {
|
|
114
|
+
// Intentionally inherits every :root token unchanged (ASL == Otimus for now).
|
|
115
|
+
// When ASL gets its own palette, override the --oc-color-* tokens here.
|
|
116
|
+
--oc-color-brand-p-1: #5505a2;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// -----------------------------------------------------------------------------
|
|
120
|
+
// Otimus / ASL DARK — approved dark palette (purple-tinted neutrals)
|
|
121
|
+
// -----------------------------------------------------------------------------
|
|
122
|
+
body.otimus-dark,
|
|
123
|
+
body.asl-dark {
|
|
124
|
+
// Render native controls (date/time picker icons, native selects, scrollbars)
|
|
125
|
+
// in dark mode so their OS-drawn parts stay visible on dark surfaces.
|
|
126
|
+
color-scheme: dark;
|
|
127
|
+
|
|
128
|
+
// Brand — primary purple (lifted ~+15% luminance so accents read on dark)
|
|
129
|
+
--oc-color-brand-p-1: #7d3fc4;
|
|
130
|
+
--oc-color-brand-p-2: #8a4fce;
|
|
131
|
+
--oc-color-brand-p-3: #9761d4;
|
|
132
|
+
--oc-color-brand-p-4: #a473da;
|
|
133
|
+
--oc-color-brand-p-5: #b184e0;
|
|
134
|
+
--oc-color-brand-p-6: #c9a9e8;
|
|
135
|
+
// p-7/p-8 — continuam o ramp clareado do dark (preenchimentos/realces claros)
|
|
136
|
+
--oc-color-brand-p-7: #d9c2ef;
|
|
137
|
+
--oc-color-brand-p-8: #e8dbf6;
|
|
138
|
+
|
|
139
|
+
// Brand — deep purple (nudged so it separates from the true-dark bg)
|
|
140
|
+
--oc-color-brand-dp-1: #2a1140;
|
|
141
|
+
--oc-color-brand-dp-2: #3d2a52;
|
|
142
|
+
--oc-color-brand-dp-3: #52415f;
|
|
143
|
+
--oc-color-brand-dp-4: #6a5b78;
|
|
144
|
+
--oc-color-brand-dp-5: #837690;
|
|
145
|
+
|
|
146
|
+
// Brand — green (g-1 +1 step; rest read well as-is)
|
|
147
|
+
--oc-color-brand-g-1: #17e6ad;
|
|
148
|
+
--oc-color-brand-g-2: #1ae0ac;
|
|
149
|
+
--oc-color-brand-g-3: #33e4b5;
|
|
150
|
+
--oc-color-brand-g-4: #4de7bf;
|
|
151
|
+
--oc-color-brand-g-5: #66ebc8;
|
|
152
|
+
--oc-color-brand-g-6: #94ffe3;
|
|
153
|
+
|
|
154
|
+
// State (brightened for dark bg — good as text / icon / border)
|
|
155
|
+
--oc-color-success: #57c667;
|
|
156
|
+
--oc-color-warning: #f0c94e;
|
|
157
|
+
--oc-color-error: #f2544f;
|
|
158
|
+
|
|
159
|
+
// State tints (dark translucent surface + light text)
|
|
160
|
+
--oc-color-success-tint-bg: #0f2a20;
|
|
161
|
+
--oc-color-success-tint-border: #1c5c43;
|
|
162
|
+
--oc-color-success-tint-text: #7fe7c0;
|
|
163
|
+
--oc-color-error-tint-bg: #2e1414;
|
|
164
|
+
--oc-color-error-tint-border: #6e2f2f;
|
|
165
|
+
--oc-color-error-tint-text: #f2a9a9;
|
|
166
|
+
--oc-color-info-tint-bg: #1e1430;
|
|
167
|
+
--oc-color-info-tint-border: #4a327a;
|
|
168
|
+
--oc-color-info-tint-text: #c9a9ee;
|
|
169
|
+
|
|
170
|
+
// Neutrals — inverted so components keyed on grays go dark automatically
|
|
171
|
+
--oc-color-gray-1: #ececf1; // was darkest → now lightest (primary text)
|
|
172
|
+
--oc-color-gray-2: #a39dae; // secondary text
|
|
173
|
+
--oc-color-gray-3: #8b8594;
|
|
174
|
+
--oc-color-gray-4: #3a3342; // borders
|
|
175
|
+
--oc-color-gray-5: #201a28; // soft surface / page
|
|
176
|
+
--oc-color-gray-6: #272030; // elevated
|
|
177
|
+
// --oc-color-white stays #ffffff (labels on colored fills rely on it).
|
|
178
|
+
|
|
179
|
+
// Semantic surfaces
|
|
180
|
+
--oc-color-bg-1: #141019;
|
|
181
|
+
--oc-color-surface-1: #1e1826;
|
|
182
|
+
--oc-color-surface-2: #272030;
|
|
183
|
+
--oc-color-surface-3: #201a28;
|
|
184
|
+
--oc-color-border-1: #3a3342;
|
|
185
|
+
|
|
186
|
+
// Text
|
|
187
|
+
--oc-color-text-1: #ececf1;
|
|
188
|
+
--oc-color-text-2: #a39dae;
|
|
189
|
+
--oc-color-text-3: #b98fe0;
|
|
190
|
+
--oc-color-text-4: #33e4b5;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
// -----------------------------------------------------------------------------
|
|
194
|
+
// Siemens (shui) LIGHT — official Siemens Healthineers identity, token-driven.
|
|
195
|
+
// Per the Shui style guide (shui.siemens-healthineers.com), the primary accent
|
|
196
|
+
// is Healthy Orange (ui-3 #cf4b00 idle / ui-2 #ec6602 hover), NOT blue. The
|
|
197
|
+
// blue-accented flavor now lives in the `.shui-blue` white-label override below.
|
|
198
|
+
// -----------------------------------------------------------------------------
|
|
199
|
+
body.shui {
|
|
200
|
+
--oc-color-shui-base-0: #ffffff;
|
|
201
|
+
--oc-color-shui-base-1: #ebebeb;
|
|
202
|
+
--oc-color-shui-base-2: #f5f5f5;
|
|
203
|
+
--oc-color-shui-ui-0: #009999;
|
|
204
|
+
--oc-color-shui-ui-1: #000000;
|
|
205
|
+
--oc-color-shui-ui-2: #ec6602;
|
|
206
|
+
--oc-color-shui-ui-3: #cf4b00;
|
|
207
|
+
--oc-color-shui-ui-4: #d85808;
|
|
208
|
+
--oc-color-shui-ui-5: #7d7d7d;
|
|
209
|
+
--oc-color-shui-ui-6: #c8c8c8;
|
|
210
|
+
--oc-color-shui-ui-7: #ffffff;
|
|
211
|
+
// Primary accent (buttons, active nav, input focus). Healthy Orange, idle.
|
|
212
|
+
--oc-color-shui-ui-8: #cf4b00;
|
|
213
|
+
--oc-color-shui-functional-green: #009a38;
|
|
214
|
+
--oc-color-shui-functional-yellow: #ffd200;
|
|
215
|
+
--oc-color-shui-functional-red: #e7001d;
|
|
216
|
+
--oc-color-shui-black: #000000;
|
|
217
|
+
|
|
218
|
+
// Re-skin the base OTIMUS brand accent to the Shui accent so generic
|
|
219
|
+
// components that consume `--oc-color-brand-p-*` / `--oc-color-text-3`
|
|
220
|
+
// directly (wizard steps, breadcrumb, page titles, default oc-tabs, etc.)
|
|
221
|
+
// follow the Shui palette instead of otimus purple. Pointing at
|
|
222
|
+
// `--oc-color-shui-ui-8` (not a literal) means the `.shui-blue` white-label —
|
|
223
|
+
// which overrides only ui-8 — cascades here automatically, and `.shui-dark`'s
|
|
224
|
+
// dark accent is inherited too. This does NOT depend on any per-component
|
|
225
|
+
// `.shui` class, so it is robust to the flaky `getStyleTheme()` detection.
|
|
226
|
+
--oc-color-brand-p-1: var(--oc-color-shui-ui-8);
|
|
227
|
+
--oc-color-brand-p-2: var(--oc-color-shui-ui-8);
|
|
228
|
+
--oc-color-brand-p-3: var(--oc-color-shui-ui-8);
|
|
229
|
+
--oc-color-brand-p-4: var(--oc-color-shui-ui-8);
|
|
230
|
+
--oc-color-brand-p-5: var(--oc-color-shui-ui-8);
|
|
231
|
+
--oc-color-brand-p-6: var(--oc-color-shui-ui-8);
|
|
232
|
+
// p-7/p-8 são preenchimentos/bordas SUTIS (não o accent sólido). Tinta clara do
|
|
233
|
+
// accent — acompanha shui (laranja) e shui-blue (azul) via ui-8. No dark é
|
|
234
|
+
// sobrescrito em body.shui-dark (mistura com a superfície escura, não com branco).
|
|
235
|
+
--oc-color-brand-p-7: color-mix(in srgb, var(--oc-color-shui-ui-8) 24%, #ffffff);
|
|
236
|
+
--oc-color-brand-p-8: color-mix(in srgb, var(--oc-color-shui-ui-8) 12%, #ffffff);
|
|
237
|
+
--oc-color-text-3: var(--oc-color-shui-ui-8);
|
|
238
|
+
|
|
239
|
+
// A cor secundária Otimus (verde) não integra a identidade shui (accent único).
|
|
240
|
+
// Colapsa `brand-g` no accent shui — espelhando `brand-p` acima — para que
|
|
241
|
+
// consumidores diretos do token (glow de botão, links, ícones) sigam o laranja
|
|
242
|
+
// em vez do verde Otimus. Sucesso/estado usa `--oc-color-shui-functional-green`
|
|
243
|
+
// (token separado), então nada que deva permanecer verde é afetado. Aponta para
|
|
244
|
+
// `shui-ui-8` (não literal) para herdar shui-blue (azul) e shui-dark (accent escuro).
|
|
245
|
+
--oc-color-brand-g-1: var(--oc-color-shui-ui-8);
|
|
246
|
+
--oc-color-brand-g-2: var(--oc-color-shui-ui-8);
|
|
247
|
+
--oc-color-brand-g-3: var(--oc-color-shui-ui-8);
|
|
248
|
+
--oc-color-brand-g-4: var(--oc-color-shui-ui-8);
|
|
249
|
+
--oc-color-brand-g-5: var(--oc-color-shui-ui-8);
|
|
250
|
+
--oc-color-brand-g-6: var(--oc-color-shui-ui-8);
|
|
251
|
+
|
|
252
|
+
// `brand-dp` (roxo escuro Otimus) é o "chrome" escuro fixo — a topbar
|
|
253
|
+
// (`background: brand-dp-1`) e o hover do bloco de usuário (`brand-dp-2`)
|
|
254
|
+
// devem ser escuros em AMBAS as variantes. Sem override, `brand-dp` caía no
|
|
255
|
+
// roxo Otimus do `:root` sob shui, deixando a topbar roxa ao lado do avatar
|
|
256
|
+
// laranja. Recolhe a rampa num escuro levemente tingido pelo accent: mistura
|
|
257
|
+
// `shui-ui-8` com uma âncora neutra que clareia degrau a degrau (dp-1 = barra,
|
|
258
|
+
// dp-2 = hover). Aponta para `shui-ui-8` (não literal), então shui herda tom
|
|
259
|
+
// quente (laranja) e shui-blue tom frio (azul) automaticamente.
|
|
260
|
+
--oc-color-brand-dp-1: color-mix(in srgb, var(--oc-color-shui-ui-8) 12%, #1a1a1a);
|
|
261
|
+
--oc-color-brand-dp-2: color-mix(in srgb, var(--oc-color-shui-ui-8) 15%, #262626);
|
|
262
|
+
--oc-color-brand-dp-3: color-mix(in srgb, var(--oc-color-shui-ui-8) 18%, #333333);
|
|
263
|
+
--oc-color-brand-dp-4: color-mix(in srgb, var(--oc-color-shui-ui-8) 20%, #3f3f3f);
|
|
264
|
+
--oc-color-brand-dp-5: color-mix(in srgb, var(--oc-color-shui-ui-8) 22%, #4c4c4c);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
// -----------------------------------------------------------------------------
|
|
268
|
+
// Siemens (shui) DARK — neutral grays (Siemens identity), approved palette.
|
|
269
|
+
// Applied together with `.shui` (body class "shui shui-dark"), so it overrides
|
|
270
|
+
// both the shui tokens AND the base neutral/text tokens for generic components.
|
|
271
|
+
// -----------------------------------------------------------------------------
|
|
272
|
+
body.shui-dark {
|
|
273
|
+
// Native controls (date/time picker icons, native selects, scrollbars) render
|
|
274
|
+
// in dark mode so their OS-drawn parts stay visible on dark surfaces.
|
|
275
|
+
color-scheme: dark;
|
|
276
|
+
|
|
277
|
+
// Shui palette — dark
|
|
278
|
+
--oc-color-shui-base-0: #1f1f1f; // card / surface
|
|
279
|
+
--oc-color-shui-base-1: #2a2a2a; // elevated / hover
|
|
280
|
+
--oc-color-shui-base-2: #161616; // page
|
|
281
|
+
--oc-color-shui-ui-0: #00b3b3; // petrol / teal
|
|
282
|
+
--oc-color-shui-ui-1: #ededed; // primary text
|
|
283
|
+
--oc-color-shui-ui-2: #ff7d1f; // orange
|
|
284
|
+
--oc-color-shui-ui-3: #e85f14;
|
|
285
|
+
--oc-color-shui-ui-4: #f26a1b;
|
|
286
|
+
--oc-color-shui-ui-5: #a3a3a3; // secondary text
|
|
287
|
+
--oc-color-shui-ui-6: #3a3a3a; // border
|
|
288
|
+
--oc-color-shui-ui-7: #ffffff;
|
|
289
|
+
--oc-color-shui-ui-8: #e85f14; // primary accent — Healthy Orange (dark)
|
|
290
|
+
--oc-color-shui-functional-green: #2bbb5f;
|
|
291
|
+
--oc-color-shui-functional-yellow: #ffd83d;
|
|
292
|
+
--oc-color-shui-functional-red: #ff4d5e;
|
|
293
|
+
--oc-color-shui-black: #000000;
|
|
294
|
+
|
|
295
|
+
// Base neutrals/text — so non-shui-specific components also go dark under shui-dark
|
|
296
|
+
--oc-color-gray-1: #ededed;
|
|
297
|
+
--oc-color-gray-2: #a3a3a3;
|
|
298
|
+
--oc-color-gray-3: #8a8a8a;
|
|
299
|
+
--oc-color-gray-4: #3a3a3a;
|
|
300
|
+
--oc-color-gray-5: #1f1f1f;
|
|
301
|
+
--oc-color-gray-6: #2a2a2a;
|
|
302
|
+
--oc-color-bg-1: #161616;
|
|
303
|
+
--oc-color-surface-1: #1f1f1f;
|
|
304
|
+
--oc-color-surface-2: #2a2a2a;
|
|
305
|
+
--oc-color-surface-3: #1f1f1f;
|
|
306
|
+
--oc-color-border-1: #3a3a3a;
|
|
307
|
+
--oc-color-text-1: #ededed;
|
|
308
|
+
--oc-color-text-2: #a3a3a3;
|
|
309
|
+
|
|
310
|
+
// p-7/p-8 no dark: tinta do accent sobre a superfície escura, para o
|
|
311
|
+
// preenchimento/borda sutil permanecer escuro (recomputa p/ shui-blue via ui-8).
|
|
312
|
+
--oc-color-brand-p-7: color-mix(in srgb, var(--oc-color-shui-ui-8) 32%, var(--oc-color-surface-1));
|
|
313
|
+
--oc-color-brand-p-8: color-mix(in srgb, var(--oc-color-shui-ui-8) 18%, var(--oc-color-surface-1));
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
// -----------------------------------------------------------------------------
|
|
317
|
+
// Siemens Shui Azul — blue-accented WHITE-LABEL of Shui (theme value `shui-blue`).
|
|
318
|
+
// This is the flavor the app historically shipped as "shui". It is now a
|
|
319
|
+
// distinct theme, applied ADDITIVELY on top of `.shui` (body class
|
|
320
|
+
// "shui shui-blue", or "shui shui-blue shui-dark" for dark), and overrides ONLY
|
|
321
|
+
// the primary accent back to blue. Everything else (neutral base, teal badges,
|
|
322
|
+
// functional colors, dark surfaces) is inherited from `.shui` / `.shui-dark`.
|
|
323
|
+
// -----------------------------------------------------------------------------
|
|
324
|
+
body.shui-blue {
|
|
325
|
+
--oc-color-shui-ui-8: #0169b2; // primary accent — Siemens blue (light)
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
// Higher specificity than `body.shui-dark` so the blue accent wins in dark mode
|
|
329
|
+
// regardless of source order. Must sit after `body.shui-dark`.
|
|
330
|
+
body.shui-blue.shui-dark {
|
|
331
|
+
--oc-color-shui-ui-8: #3d9be0; // primary accent — Siemens blue (dark)
|
|
332
|
+
}
|
package/styles/variables.scss
CHANGED
|
@@ -1,61 +1,78 @@
|
|
|
1
1
|
@forward './patterns/shui/variables.shui.scss';
|
|
2
2
|
|
|
3
|
+
// -----------------------------------------------------------------------------
|
|
4
|
+
// Color tokens — ACC-2362
|
|
5
|
+
// The actual values are RUNTIME CSS custom properties defined once in
|
|
6
|
+
// `tokens.scss` (emitted globally by `styles.scss`). The SCSS names below are
|
|
7
|
+
// kept as ALIASES so every existing component keeps compiling unchanged AND
|
|
8
|
+
// becomes themeable by toggling a class on <body> (otimus / otimus-dark / asl /
|
|
9
|
+
// asl-dark / shui / shui-dark ...). A SCSS `$var` can't switch at runtime — a
|
|
10
|
+
// `var(--…)` can, so these now hold `var(--oc-color-*)`.
|
|
11
|
+
//
|
|
12
|
+
// NOTE: because these resolve to `var(...)`, they must NOT be passed into a
|
|
13
|
+
// Sass color function (color.mix/rgba/darken/…). Use CSS `color-mix(in srgb, …)`
|
|
14
|
+
// instead (all former call sites were migrated for exactly this reason).
|
|
15
|
+
// -----------------------------------------------------------------------------
|
|
16
|
+
|
|
3
17
|
// Cor Primária (Roxo)
|
|
4
|
-
$color-brand-p-1:
|
|
5
|
-
$color-brand-p-2:
|
|
6
|
-
$color-brand-p-3:
|
|
7
|
-
$color-brand-p-4:
|
|
8
|
-
$color-brand-p-5:
|
|
9
|
-
$color-brand-p-6:
|
|
18
|
+
$color-brand-p-1: var(--oc-color-brand-p-1);
|
|
19
|
+
$color-brand-p-2: var(--oc-color-brand-p-2);
|
|
20
|
+
$color-brand-p-3: var(--oc-color-brand-p-3);
|
|
21
|
+
$color-brand-p-4: var(--oc-color-brand-p-4);
|
|
22
|
+
$color-brand-p-5: var(--oc-color-brand-p-5);
|
|
23
|
+
$color-brand-p-6: var(--oc-color-brand-p-6);
|
|
10
24
|
|
|
11
25
|
// Variações escuras da cor Primária
|
|
12
|
-
$color-brand-dp-1:
|
|
13
|
-
$color-brand-dp-2:
|
|
14
|
-
$color-brand-dp-3:
|
|
15
|
-
$color-brand-dp-4:
|
|
16
|
-
$color-brand-dp-5:
|
|
26
|
+
$color-brand-dp-1: var(--oc-color-brand-dp-1);
|
|
27
|
+
$color-brand-dp-2: var(--oc-color-brand-dp-2);
|
|
28
|
+
$color-brand-dp-3: var(--oc-color-brand-dp-3);
|
|
29
|
+
$color-brand-dp-4: var(--oc-color-brand-dp-4);
|
|
30
|
+
$color-brand-dp-5: var(--oc-color-brand-dp-5);
|
|
17
31
|
|
|
18
32
|
// Cor secundária (Verde)
|
|
19
|
-
$color-brand-g-1:
|
|
20
|
-
$color-brand-g-2:
|
|
21
|
-
$color-brand-g-3:
|
|
22
|
-
$color-brand-g-4:
|
|
23
|
-
$color-brand-g-5:
|
|
24
|
-
$color-brand-g-6:
|
|
33
|
+
$color-brand-g-1: var(--oc-color-brand-g-1);
|
|
34
|
+
$color-brand-g-2: var(--oc-color-brand-g-2);
|
|
35
|
+
$color-brand-g-3: var(--oc-color-brand-g-3);
|
|
36
|
+
$color-brand-g-4: var(--oc-color-brand-g-4);
|
|
37
|
+
$color-brand-g-5: var(--oc-color-brand-g-5);
|
|
38
|
+
$color-brand-g-6: var(--oc-color-brand-g-6);
|
|
25
39
|
|
|
26
40
|
// Cores de estado/feedback
|
|
27
|
-
$color-success:
|
|
28
|
-
$color-warning:
|
|
29
|
-
$color-error:
|
|
41
|
+
$color-success: var(--oc-color-success);
|
|
42
|
+
$color-warning: var(--oc-color-warning);
|
|
43
|
+
$color-error: var(--oc-color-error);
|
|
30
44
|
|
|
31
|
-
// Tints de estado — superfícies suaves (fundo/borda/texto)
|
|
32
|
-
|
|
33
|
-
$color-success-tint-
|
|
34
|
-
$color-success-tint-
|
|
35
|
-
$color-success-tint-text: #08643d;
|
|
45
|
+
// Tints de estado — superfícies suaves (fundo/borda/texto)
|
|
46
|
+
$color-success-tint-bg: var(--oc-color-success-tint-bg);
|
|
47
|
+
$color-success-tint-border: var(--oc-color-success-tint-border);
|
|
48
|
+
$color-success-tint-text: var(--oc-color-success-tint-text);
|
|
36
49
|
|
|
37
|
-
$color-error-tint-bg:
|
|
38
|
-
$color-error-tint-border:
|
|
39
|
-
$color-error-tint-text:
|
|
50
|
+
$color-error-tint-bg: var(--oc-color-error-tint-bg);
|
|
51
|
+
$color-error-tint-border: var(--oc-color-error-tint-border);
|
|
52
|
+
$color-error-tint-text: var(--oc-color-error-tint-text);
|
|
40
53
|
|
|
41
|
-
$color-info-tint-bg:
|
|
42
|
-
$color-info-tint-border:
|
|
43
|
-
$color-info-tint-text:
|
|
54
|
+
$color-info-tint-bg: var(--oc-color-info-tint-bg);
|
|
55
|
+
$color-info-tint-border: var(--oc-color-info-tint-border);
|
|
56
|
+
$color-info-tint-text: var(--oc-color-info-tint-text);
|
|
44
57
|
|
|
45
58
|
// Tons de Cinza
|
|
46
|
-
$color-gray-1:
|
|
47
|
-
$color-gray-2:
|
|
48
|
-
$color-gray-3:
|
|
49
|
-
$color-gray-4:
|
|
50
|
-
$color-gray-5:
|
|
51
|
-
$color-gray-6:
|
|
52
|
-
$color-white:
|
|
59
|
+
$color-gray-1: var(--oc-color-gray-1);
|
|
60
|
+
$color-gray-2: var(--oc-color-gray-2);
|
|
61
|
+
$color-gray-3: var(--oc-color-gray-3);
|
|
62
|
+
$color-gray-4: var(--oc-color-gray-4);
|
|
63
|
+
$color-gray-5: var(--oc-color-gray-5);
|
|
64
|
+
$color-gray-6: var(--oc-color-gray-6);
|
|
65
|
+
$color-white: var(--oc-color-white);
|
|
53
66
|
|
|
54
|
-
//
|
|
55
|
-
$color-bg-1:
|
|
67
|
+
// Superfícies semânticas (novas — para dark mode coerente; adoção incremental)
|
|
68
|
+
$color-bg-1: var(--oc-color-bg-1);
|
|
69
|
+
$color-surface-1: var(--oc-color-surface-1);
|
|
70
|
+
$color-surface-2: var(--oc-color-surface-2);
|
|
71
|
+
$color-surface-3: var(--oc-color-surface-3);
|
|
72
|
+
$color-border-1: var(--oc-color-border-1);
|
|
56
73
|
|
|
57
74
|
// Cores para texto
|
|
58
|
-
$color-text-1:
|
|
59
|
-
$color-text-2:
|
|
60
|
-
$color-text-3:
|
|
61
|
-
$color-text-4:
|
|
75
|
+
$color-text-1: var(--oc-color-text-1);
|
|
76
|
+
$color-text-2: var(--oc-color-text-2);
|
|
77
|
+
$color-text-3: var(--oc-color-text-3);
|
|
78
|
+
$color-text-4: var(--oc-color-text-4);
|