@sken-ds/primitives 0.3.0 → 0.3.1
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/dist/decorate-D4FKzyDw.js +9 -0
- package/dist/directive-BcLtPdVO.js +263 -0
- package/dist/directive-BcLtPdVO.js.map +1 -0
- package/dist/index.js +14 -0
- package/dist/ix-bridge.css +608 -0
- package/dist/sken-button.js +125 -0
- package/dist/sken-button.js.map +1 -0
- package/dist/sken-checkbox.js +218 -0
- package/dist/sken-checkbox.js.map +1 -0
- package/dist/sken-combobox-group.js +20 -0
- package/dist/sken-combobox-group.js.map +1 -0
- package/dist/sken-combobox-item.js +20 -0
- package/dist/sken-combobox-item.js.map +1 -0
- package/dist/sken-combobox.js +590 -0
- package/dist/sken-combobox.js.map +1 -0
- package/dist/sken-datatable-BtR-NwRN.js +1563 -0
- package/dist/sken-datatable-BtR-NwRN.js.map +1 -0
- package/dist/sken-datatable.js +2 -0
- package/dist/sken-date-picker.js +42 -0
- package/dist/sken-date-picker.js.map +1 -0
- package/dist/sken-dialog-hRtML2jW.js +243 -0
- package/dist/sken-dialog-hRtML2jW.js.map +1 -0
- package/dist/sken-dialog.js +2 -0
- package/dist/sken-filter-chip.js +111 -0
- package/dist/sken-filter-chip.js.map +1 -0
- package/dist/sken-input.js +246 -0
- package/dist/sken-input.js.map +1 -0
- package/dist/sken-number-input.js +514 -0
- package/dist/sken-number-input.js.map +1 -0
- package/dist/sken-switch.js +196 -0
- package/dist/sken-switch.js.map +1 -0
- package/dist/sken-textarea.js +213 -0
- package/dist/sken-textarea.js.map +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,608 @@
|
|
|
1
|
+
/* ─────────────────────────────────────────────────────────────
|
|
2
|
+
* Sken ↔ Siemens iX 5 token bridge
|
|
3
|
+
* ─────────────────────────────────────────────────────────────
|
|
4
|
+
*
|
|
5
|
+
* This CSS file maps the Sken design tokens (`--sken-*`,
|
|
6
|
+
* `--sken-*`, `--sken-family-*`) onto the
|
|
7
|
+
* `--theme-*` and `--ix-*` custom properties that Siemens
|
|
8
|
+
* iX 5 components consume inside their shadow trees.
|
|
9
|
+
*
|
|
10
|
+
* Import this file from any application that uses
|
|
11
|
+
* `@sken/primitives/sken-combobox` or
|
|
12
|
+
* `@sken/primitives/sken-date-picker` (or any other iX-backed
|
|
13
|
+
* Sken primitive). Without the bridge, the iX components
|
|
14
|
+
* render with the Siemens `classic` palette (Siemens Sans,
|
|
15
|
+
* Siemens blue) instead of the Sken brand palette.
|
|
16
|
+
*
|
|
17
|
+
* The bridge is theme-aware. Each of the four
|
|
18
|
+
* `html[data-theme="..."]` blocks maps the iX tokens to the
|
|
19
|
+
* Sken tokens declared in `@sken/theme/css`. The consumer
|
|
20
|
+
* is responsible for putting `data-theme` on `<html>` (or
|
|
21
|
+
* any element where the `html` selector in this file can
|
|
22
|
+
* reach it via the cascade). Storybook's
|
|
23
|
+
* `@storybook/addon-themes` decorator does this
|
|
24
|
+
* automatically; roll-your-own apps should do the same in
|
|
25
|
+
* their theme switcher.
|
|
26
|
+
*
|
|
27
|
+
* Why `html[data-theme="..."]` (specificity 0,0,2,1)? iX 5's
|
|
28
|
+
* `[data-ix-theme=classic][data-ix-color-schema=...]` block
|
|
29
|
+
* lives in the global `siemens-ix.css` and uses specificity
|
|
30
|
+
* (0,0,2,0). The bridge prefixes the Sken attribute selector
|
|
31
|
+
* with `html` to land at (0,0,2,1) — strictly higher — so
|
|
32
|
+
* the cascade ALWAYS resolves to the Sken palette,
|
|
33
|
+
* regardless of CSS load order. This avoids the
|
|
34
|
+
* `!important` anti-pattern entirely: the bridge wins on
|
|
35
|
+
* specificity alone.
|
|
36
|
+
*
|
|
37
|
+
* Why literal values for the derived tokens (e.g.
|
|
38
|
+
* `--theme-input-select-icon--color: #c5d2e2` instead of
|
|
39
|
+
* `var(--sken-muted-foreground)`)? Some iX tokens resolve
|
|
40
|
+
* to `var(--theme-color-soft-text)` in the iX stylesheet.
|
|
41
|
+
* The browser evaluates that `var()` ONCE in the light-DOM
|
|
42
|
+
* cascade and inherits the resulting literal into the
|
|
43
|
+
* shadow — the shadow does NOT re-evaluate the chain
|
|
44
|
+
* against its own inherited `--theme-color-soft-text`. A
|
|
45
|
+
* literal Sken value on the derived token guarantees the
|
|
46
|
+
* right colour reaches the shadow.
|
|
47
|
+
*
|
|
48
|
+
* Subpath: `@sken/primitives/ix-bridge.css` (declared in
|
|
49
|
+
* `packages/primitives/package.json` under `exports`).
|
|
50
|
+
*
|
|
51
|
+
* Consumers:
|
|
52
|
+
* ```ts
|
|
53
|
+
* import '@sken/primitives/ix-bridge.css' // once at app boot
|
|
54
|
+
* import '@sken/primitives/sken-combobox' // wherever used
|
|
55
|
+
* ```
|
|
56
|
+
*
|
|
57
|
+
* The bridge is currently ~480 lines and grows by ~100 lines
|
|
58
|
+
* per iX-backed primitive. We expect it to stabilise around
|
|
59
|
+
* the M10 wave once `<sken-modal>`, `<sken-dropdown>`, etc.
|
|
60
|
+
* land.
|
|
61
|
+
* ───────────────────────────────────────────────────────────── */
|
|
62
|
+
|
|
63
|
+
/* ── Universal iX defaults (no theme) ─────────────────────────
|
|
64
|
+
* These `--ix-*` properties are iX's "own" tokens, separate
|
|
65
|
+
* from the `--theme-*` palette. iX reads them at the shadow
|
|
66
|
+
* root for typography, radii, and a few semantic colours
|
|
67
|
+
* that don't change with theme. We bind them once for every
|
|
68
|
+
* iX-tag we use. */
|
|
69
|
+
ix-select,
|
|
70
|
+
ix-button,
|
|
71
|
+
ix-icon-button,
|
|
72
|
+
ix-input,
|
|
73
|
+
ix-dropdown,
|
|
74
|
+
ix-select-item,
|
|
75
|
+
ix-card,
|
|
76
|
+
ix-date-input,
|
|
77
|
+
ix-label,
|
|
78
|
+
ix-typography,
|
|
79
|
+
sken-combobox,
|
|
80
|
+
sken-date-picker {
|
|
81
|
+
--ix-font-family: var(--sken-family-sans);
|
|
82
|
+
--ix-color-primary: var(--sken-primary);
|
|
83
|
+
--ix-color-primary-hover: var(--sken-primary-hover);
|
|
84
|
+
--ix-color-primary-active: var(--sken-primary-active);
|
|
85
|
+
--ix-color-primary-contrast: var(--sken-primary-foreground);
|
|
86
|
+
--ix-color-text: var(--sken-foreground);
|
|
87
|
+
--ix-color-text-muted: var(--sken-muted-foreground);
|
|
88
|
+
--ix-color-text-placeholder: var(--sken-muted-foreground);
|
|
89
|
+
--ix-color-bg-1: var(--sken-card);
|
|
90
|
+
--ix-color-bg-2: var(--sken-muted);
|
|
91
|
+
--ix-color-bg-3: var(--sken-background);
|
|
92
|
+
--ix-color-border: var(--sken-border);
|
|
93
|
+
--ix-color-border-subtle: var(--sken-border);
|
|
94
|
+
--ix-color-border-strong: var(--sken-foreground);
|
|
95
|
+
--ix-color-focus: var(--sken-ring);
|
|
96
|
+
--ix-border-radius-md: var(--sken-md);
|
|
97
|
+
--ix-border-radius-sm: var(--sken-sm);
|
|
98
|
+
--ix-border-radius-lg: var(--sken-lg);
|
|
99
|
+
font-family: var(--sken-family-sans);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* ── Shape (no theme) ────────────────────────────────────────
|
|
103
|
+
* Round the outer container, square the inner list items
|
|
104
|
+
* so they fill the rounded surface without seams.
|
|
105
|
+
*
|
|
106
|
+
* NOTE: `sken-combobox` is intentionally NOT in this list.
|
|
107
|
+
* Its listbox panel is `position: absolute; top: 100%`,
|
|
108
|
+
* which must overflow the host for the dropdown to be
|
|
109
|
+
* visible. The `overflow: hidden` on this rule clips the
|
|
110
|
+
* listbox to the host's box (which only contains the
|
|
111
|
+
* trigger), so the user sees nothing when the listbox
|
|
112
|
+
* opens. The `border-radius` on the trigger is owned by
|
|
113
|
+
* the combobox's own static styles (`.trigger` rule in
|
|
114
|
+
* `sken-combobox.ts`), so we don't lose visual rounding
|
|
115
|
+
* by removing the host from this selector. */
|
|
116
|
+
ix-select,
|
|
117
|
+
ix-button,
|
|
118
|
+
ix-icon-button,
|
|
119
|
+
ix-input,
|
|
120
|
+
ix-card,
|
|
121
|
+
sken-date-picker {
|
|
122
|
+
border-radius: var(--sken-md);
|
|
123
|
+
overflow: hidden;
|
|
124
|
+
}
|
|
125
|
+
ix-select-item,
|
|
126
|
+
ix-dropdown-item {
|
|
127
|
+
border-radius: 0;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* ── `<ix-icon>` host sizing ─────────────────────────────────
|
|
131
|
+
* `<ix-icon>` is a Stencil host that ships its CSS in
|
|
132
|
+
* `@siemens/ix-icons/dist/.../icon.css` — but that path is
|
|
133
|
+
* NOT in the package's `exports` field, so we cannot import
|
|
134
|
+
* it from a bundler. Without that CSS the icon collapses to
|
|
135
|
+
* 0×0 because the host element has no intrinsic size. The
|
|
136
|
+
* icons themselves are SVG data URIs embedded in the
|
|
137
|
+
* component output; we only need the host to be visible. */
|
|
138
|
+
ix-icon {
|
|
139
|
+
display: inline-block;
|
|
140
|
+
width: 1rem;
|
|
141
|
+
height: 1rem;
|
|
142
|
+
vertical-align: middle;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* ── Bridge constants per theme ──────────────────────────────
|
|
146
|
+
* Each theme block below declares a small set of bridge
|
|
147
|
+
* constants under `html[data-theme="..."]`. These are the
|
|
148
|
+
* one place where the bridge names its own colour values
|
|
149
|
+
* (instead of writing hex literals at every `--theme-*`
|
|
150
|
+
* override further down). The point is single-source-of-truth:
|
|
151
|
+
* if Sken's brand deep or hover-blue changes, we update the
|
|
152
|
+
* mapping in this block, not at 50 different override sites.
|
|
153
|
+
*
|
|
154
|
+
* Most constants are simple aliases to existing Sken tokens
|
|
155
|
+
* (`var(--sken-muted-foreground)` etc.). A few are still
|
|
156
|
+
* literal hex because they don't have a direct Sken token
|
|
157
|
+
* — those are the iX-classic leftovers that survive the
|
|
158
|
+
* shadow-DOM inheritance trap (see the docstring at the top
|
|
159
|
+
* of the file). Their values are kept here so the "literal
|
|
160
|
+
* hex" cost is paid once, not at every use site. */
|
|
161
|
+
html[data-theme="light"] {
|
|
162
|
+
/* iX-classic values that have no direct Sken token but are
|
|
163
|
+
* needed as the *resolved* colour of certain shadow-trap
|
|
164
|
+
* tokens. The shadow reads the value as a literal; we
|
|
165
|
+
* have to provide a literal, not a var() chain. */
|
|
166
|
+
--sken-bridge-ix-select-icon: var(--sken-muted-foreground);
|
|
167
|
+
--sken-bridge-ix-primary: var(--sken-primary);
|
|
168
|
+
--sken-bridge-ix-scrollbar-track: var(--sken-background);
|
|
169
|
+
--sken-bridge-ix-scrollbar-track-hover: var(--sken-muted);
|
|
170
|
+
--sken-bridge-ix-scrollbar-track-border: var(--sken-muted);
|
|
171
|
+
--sken-bridge-ix-scrollbar-thumb: var(--sken-border);
|
|
172
|
+
/* TODO(ux-tokens-2026-07-24): replace the literal below with
|
|
173
|
+
* a Sken token once UX delivers the scrollbar-specific
|
|
174
|
+
* tokens. The two hex values that don't have a Sken token
|
|
175
|
+
* live here and in the dark block below. They are
|
|
176
|
+
* "neutral-300 darken 5%" (light) and "border-default
|
|
177
|
+
* lighten 15%" (dark) — derived shades that Sken does
|
|
178
|
+
* not currently model. Until UX ships them, we keep the
|
|
179
|
+
* literal but flag it as a known gap. Search for
|
|
180
|
+
* "TODO(ux-tokens" in this file to find both. */
|
|
181
|
+
--sken-bridge-ix-scrollbar-thumb-hover: #8a8f99;
|
|
182
|
+
}
|
|
183
|
+
html[data-theme="dark"] {
|
|
184
|
+
--sken-bridge-ix-select-icon: var(--sken-muted-foreground);
|
|
185
|
+
--sken-bridge-ix-primary: var(--sken-primary-hover);
|
|
186
|
+
--sken-bridge-ix-scrollbar-track: var(--sken-card);
|
|
187
|
+
--sken-bridge-ix-scrollbar-track-hover: var(--sken-border);
|
|
188
|
+
--sken-bridge-ix-scrollbar-track-border: var(--sken-background);
|
|
189
|
+
--sken-bridge-ix-scrollbar-thumb: var(--sken-border);
|
|
190
|
+
/* TODO(ux-tokens-2026-07-24): see note in the light block
|
|
191
|
+
* above. Replace with a Sken token once UX ships it. */
|
|
192
|
+
--sken-bridge-ix-scrollbar-thumb-hover: #5a7ba8;
|
|
193
|
+
}
|
|
194
|
+
html[data-theme="hc-light"] {
|
|
195
|
+
--sken-bridge-ix-select-icon: var(--sken-foreground);
|
|
196
|
+
--sken-bridge-ix-primary: var(--sken-foreground);
|
|
197
|
+
--sken-bridge-ix-scrollbar-track: var(--sken-background);
|
|
198
|
+
--sken-bridge-ix-scrollbar-track-hover: var(--sken-background);
|
|
199
|
+
--sken-bridge-ix-scrollbar-track-border: var(--sken-background);
|
|
200
|
+
--sken-bridge-ix-scrollbar-thumb: var(--sken-foreground);
|
|
201
|
+
--sken-bridge-ix-scrollbar-thumb-hover: var(--sken-foreground);
|
|
202
|
+
}
|
|
203
|
+
html[data-theme="hc-dark"] {
|
|
204
|
+
--sken-bridge-ix-select-icon: var(--sken-background);
|
|
205
|
+
--sken-bridge-ix-primary: var(--sken-background);
|
|
206
|
+
--sken-bridge-ix-scrollbar-track: var(--sken-foreground);
|
|
207
|
+
--sken-bridge-ix-scrollbar-track-hover: var(--sken-foreground);
|
|
208
|
+
--sken-bridge-ix-scrollbar-track-border: var(--sken-foreground);
|
|
209
|
+
--sken-bridge-ix-scrollbar-thumb: var(--sken-background);
|
|
210
|
+
--sken-bridge-ix-scrollbar-thumb-hover: var(--sken-background);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* ── Theme: light ──────────────────────────────────────────── */
|
|
214
|
+
html[data-theme="light"] ix-select,
|
|
215
|
+
html[data-theme="light"] ix-date-input,
|
|
216
|
+
html[data-theme="light"] sken-combobox,
|
|
217
|
+
html[data-theme="light"] sken-date-picker {
|
|
218
|
+
--theme-color-1: var(--sken-card);
|
|
219
|
+
--theme-color-2: var(--sken-muted);
|
|
220
|
+
--theme-color-3: var(--sken-muted);
|
|
221
|
+
--theme-color-4: var(--sken-border);
|
|
222
|
+
--theme-color-5: var(--sken-border);
|
|
223
|
+
--theme-color-6: var(--sken-foreground);
|
|
224
|
+
--theme-color-7: var(--sken-muted-foreground);
|
|
225
|
+
--theme-color-8: var(--sken-muted-foreground);
|
|
226
|
+
--theme-color-std-text: var(--sken-foreground);
|
|
227
|
+
--theme-color-soft-text: var(--sken-muted-foreground);
|
|
228
|
+
--theme-color-weak-text: var(--sken-muted-foreground);
|
|
229
|
+
--theme-color-inv-std-text: var(--sken-primary-foreground);
|
|
230
|
+
--theme-color-primary: var(--sken-primary);
|
|
231
|
+
--theme-color-primary--hover: var(--sken-primary-hover);
|
|
232
|
+
--theme-color-primary--active: var(--sken-primary-active);
|
|
233
|
+
--theme-color-primary--contrast: var(--sken-primary-foreground);
|
|
234
|
+
--theme-color-dynamic: var(--sken-primary);
|
|
235
|
+
--theme-color-dynamic--hover: var(--sken-primary-hover);
|
|
236
|
+
--theme-color-dynamic--active: var(--sken-primary-active);
|
|
237
|
+
--theme-color-dynamic-alt: var(--sken-primary);
|
|
238
|
+
--theme-color-secondary: var(--sken-secondary);
|
|
239
|
+
--theme-color-info: var(--sken-info);
|
|
240
|
+
--theme-color-success: var(--sken-success);
|
|
241
|
+
--theme-color-warning: var(--sken-warning);
|
|
242
|
+
--theme-color-danger: var(--sken-destructive);
|
|
243
|
+
--theme-color-alarm: var(--sken-destructive);
|
|
244
|
+
--theme-color-critical: var(--sken-destructive);
|
|
245
|
+
--theme-color-ghost: var(--sken-secondary);
|
|
246
|
+
--theme-color-ghost--hover: var(--sken-secondary-hover);
|
|
247
|
+
--theme-color-ghost--active: var(--sken-muted);
|
|
248
|
+
--theme-color-neutral: var(--sken-secondary);
|
|
249
|
+
--theme-input--background: var(--sken-card);
|
|
250
|
+
--theme-input--color: var(--sken-foreground);
|
|
251
|
+
--theme-input--border-color: var(--sken-border);
|
|
252
|
+
--theme-input-hint--color: var(--sken-muted-foreground);
|
|
253
|
+
/* iX's `<ix-select>` placeholder color is set by
|
|
254
|
+
* `select.css` via `--theme-input-select-icon--color`,
|
|
255
|
+
* NOT `--theme-input-hint--color`. The chain
|
|
256
|
+
* `var(--theme-color-soft-text)` is evaluated ONCE in
|
|
257
|
+
* the light-DOM cascade and inherited into the shadow as
|
|
258
|
+
* a literal — the shadow does NOT re-evaluate. So even
|
|
259
|
+
* with our Sken override on `--theme-color-soft-text`,
|
|
260
|
+
* the placeholder inside the shadow keeps iX classic
|
|
261
|
+
* light's `#000a1499` (near-black, 60% alpha) — which
|
|
262
|
+
* is invisible against a dark surface. We override the
|
|
263
|
+
* derived token explicitly with a literal so the
|
|
264
|
+
* inheritance carries our value. */
|
|
265
|
+
--theme-input-select-icon--color: var(--sken-bridge-ix-select-icon);
|
|
266
|
+
--theme-input-select-icon--color--active: var(--sken-bridge-ix-primary);
|
|
267
|
+
--theme-input-select-icon--color--hover: var(--sken-bridge-ix-primary);
|
|
268
|
+
/* Scrollbar tokens (see dark block for the full
|
|
269
|
+
* rationale on the shadow-DOM inheritance trap). */
|
|
270
|
+
--theme-scrollbar-track--background: var(--sken-bridge-ix-scrollbar-track);
|
|
271
|
+
--theme-scrollbar-track--background--hover: var(--sken-bridge-ix-scrollbar-track-hover);
|
|
272
|
+
--theme-scrollbar-track--border: var(--sken-bridge-ix-scrollbar-track-border);
|
|
273
|
+
--theme-scrollbar-thumb--background: var(--sken-bridge-ix-scrollbar-thumb);
|
|
274
|
+
--theme-scrollbar-thumb--background--hover: var(--sken-bridge-ix-scrollbar-thumb-hover);
|
|
275
|
+
--theme-input--background--hover: var(--sken-card);
|
|
276
|
+
--theme-input--border-color--hover: var(--sken-foreground);
|
|
277
|
+
--theme-input--border-color--focus: var(--sken-ring);
|
|
278
|
+
--theme-input--border-color--info: var(--sken-info);
|
|
279
|
+
--theme-input--border-color--warning: var(--sken-warning);
|
|
280
|
+
--theme-input--border-color--invalid: var(--sken-destructive);
|
|
281
|
+
/* iX's `--theme-btn-*-color` tokens resolve to
|
|
282
|
+
* `var(--theme-color-primary)` etc. in the iX stylesheet.
|
|
283
|
+
* That chain is computed once in the light-DOM cascade
|
|
284
|
+
* (where iX's plain specificity loses to our `!important`
|
|
285
|
+
* Sken overrides, but the *result* of that chain is then
|
|
286
|
+
* inherited into the shadow tree as a literal value — the
|
|
287
|
+
* shadow does NOT re-evaluate `var(--theme-color-primary)`
|
|
288
|
+
* against its own inherited primary). So `--theme-color-primary`
|
|
289
|
+
* in the shadow correctly shows Sken, but the *derived*
|
|
290
|
+
* `--theme-btn-tertiary--color` keeps iX's value. Override
|
|
291
|
+
* the derived tokens explicitly so the button text in
|
|
292
|
+
* `<ix-dropdown-button>` (the "July" / "2026" selectors in
|
|
293
|
+
* the date-picker popover) picks up Sken's primary. */
|
|
294
|
+
--theme-btn-primary--color: var(--sken-primary-foreground);
|
|
295
|
+
--theme-btn-secondary--color: var(--sken-primary);
|
|
296
|
+
--theme-btn-tertiary--color: var(--sken-primary);
|
|
297
|
+
--theme-btn-subtle-primary--color: var(--sken-foreground);
|
|
298
|
+
--theme-btn-subtle-secondary--color: var(--sken-foreground);
|
|
299
|
+
--theme-btn-subtle-tertiary--color: var(--sken-foreground);
|
|
300
|
+
--theme-btn-danger-primary--color: var(--sken-primary-foreground);
|
|
301
|
+
--theme-btn-danger-secondary--color: var(--sken-destructive);
|
|
302
|
+
--theme-btn-danger-tertiary--color: var(--sken-destructive);
|
|
303
|
+
/* date-picker popover (theme.menu--background = .card; date-picker
|
|
304
|
+
* grid cells; weekday header; today marker). These tokens were
|
|
305
|
+
* missing from the Sken re-skin and fell back to iX classic
|
|
306
|
+
* light values (#eff0f1 popover bg, #006e93 day color, #000a1499
|
|
307
|
+
* weekday color) inside the nested shadow trees of
|
|
308
|
+
* `<ix-date-time-card>` and `<ix-date-picker>`. */
|
|
309
|
+
--theme-menu--background: var(--sken-card);
|
|
310
|
+
--theme-menu--border-color: var(--sken-border);
|
|
311
|
+
--theme-menu-item--color: var(--sken-foreground);
|
|
312
|
+
--theme-datepicker-day--background: transparent;
|
|
313
|
+
--theme-datepicker-day--background--hover: var(--sken-secondary-hover);
|
|
314
|
+
--theme-datepicker-day--background--active: var(--sken-muted);
|
|
315
|
+
--theme-datepicker-day--background--disabled: var(--sken-secondary);
|
|
316
|
+
--theme-datepicker-day--background--selected: var(--sken-primary);
|
|
317
|
+
--theme-datepicker-day--background--selected-hover: var(--sken-primary-hover);
|
|
318
|
+
--theme-datepicker-day--background--selected-active: var(--sken-primary-active);
|
|
319
|
+
--theme-datepicker-day--color: var(--sken-foreground);
|
|
320
|
+
--theme-datepicker-day--color--hover: var(--sken-foreground);
|
|
321
|
+
--theme-datepicker-day--color--active: var(--sken-foreground);
|
|
322
|
+
--theme-datepicker-day--color--disabled: var(--sken-muted-foreground);
|
|
323
|
+
--theme-datepicker-day--color--selected: var(--sken-primary-foreground);
|
|
324
|
+
--theme-datepicker-day--color--selected-hover: var(--sken-primary-foreground);
|
|
325
|
+
--theme-datepicker-weekday--color: var(--sken-muted-foreground);
|
|
326
|
+
--theme-datepicker-today--color: var(--sken-primary);
|
|
327
|
+
--theme-datepicker-today--border-color: var(--sken-primary);
|
|
328
|
+
--theme-datepicker-separator--background: var(--sken-border);
|
|
329
|
+
--theme-select-list-item--background--hover: var(--sken-secondary-hover);
|
|
330
|
+
--theme-select-list-item--background--selected: var(--sken-muted);
|
|
331
|
+
/* select list header hint (the muted text rendered as
|
|
332
|
+
* the "Select an option" placeholder inside the open
|
|
333
|
+
* dropdown). iX resolves it to `var(--theme-color-soft-text)`
|
|
334
|
+
* which in iX classic light is `#000a1499` (near-black
|
|
335
|
+
* with 60% alpha) — invisible against a dark surface. */
|
|
336
|
+
--theme-select-list-item-hint--color: var(--sken-muted-foreground);
|
|
337
|
+
--theme-select-list-item-hint--color--active: var(--sken-muted-foreground);
|
|
338
|
+
--theme-select-list-item-hint--color--hover: var(--sken-muted-foreground);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/* ── Theme: dark ───────────────────────────────────────────── */
|
|
342
|
+
html[data-theme="dark"] ix-select,
|
|
343
|
+
html[data-theme="dark"] ix-date-input,
|
|
344
|
+
html[data-theme="dark"] sken-combobox,
|
|
345
|
+
html[data-theme="dark"] sken-date-picker {
|
|
346
|
+
--theme-color-1: var(--sken-card);
|
|
347
|
+
--theme-color-2: var(--sken-muted);
|
|
348
|
+
--theme-color-3: var(--sken-muted);
|
|
349
|
+
--theme-color-4: var(--sken-border);
|
|
350
|
+
--theme-color-5: var(--sken-border);
|
|
351
|
+
--theme-color-6: var(--sken-foreground);
|
|
352
|
+
--theme-color-7: var(--sken-muted-foreground);
|
|
353
|
+
--theme-color-8: var(--sken-muted-foreground);
|
|
354
|
+
--theme-color-std-text: var(--sken-foreground);
|
|
355
|
+
--theme-color-soft-text: var(--sken-muted-foreground);
|
|
356
|
+
--theme-color-weak-text: var(--sken-muted-foreground);
|
|
357
|
+
--theme-color-inv-std-text: var(--sken-primary-foreground);
|
|
358
|
+
--theme-color-primary: var(--sken-primary);
|
|
359
|
+
--theme-color-primary--hover: var(--sken-primary-hover);
|
|
360
|
+
--theme-color-primary--active: var(--sken-primary-active);
|
|
361
|
+
--theme-color-primary--contrast: var(--sken-primary-foreground);
|
|
362
|
+
--theme-color-dynamic: var(--sken-primary);
|
|
363
|
+
--theme-color-dynamic--hover: var(--sken-primary-hover);
|
|
364
|
+
--theme-color-dynamic--active: var(--sken-primary-active);
|
|
365
|
+
--theme-color-dynamic-alt: var(--sken-primary);
|
|
366
|
+
--theme-color-secondary: var(--sken-secondary);
|
|
367
|
+
--theme-color-info: var(--sken-info);
|
|
368
|
+
--theme-color-success: var(--sken-success);
|
|
369
|
+
--theme-color-warning: var(--sken-warning);
|
|
370
|
+
--theme-color-danger: var(--sken-destructive);
|
|
371
|
+
--theme-color-alarm: var(--sken-destructive);
|
|
372
|
+
--theme-color-critical: var(--sken-destructive);
|
|
373
|
+
--theme-color-ghost: var(--sken-secondary);
|
|
374
|
+
--theme-color-ghost--hover: var(--sken-secondary-hover);
|
|
375
|
+
--theme-color-ghost--active: var(--sken-muted);
|
|
376
|
+
--theme-color-neutral: var(--sken-secondary);
|
|
377
|
+
--theme-input--background: var(--sken-card);
|
|
378
|
+
--theme-input--color: var(--sken-foreground);
|
|
379
|
+
--theme-input--border-color: var(--sken-border);
|
|
380
|
+
--theme-input-hint--color: var(--sken-muted-foreground);
|
|
381
|
+
/* See light block for the rationale on the literal
|
|
382
|
+
* `input-select-icon` override (Sken dark muted). */
|
|
383
|
+
--theme-input-select-icon--color: var(--sken-bridge-ix-select-icon);
|
|
384
|
+
--theme-input-select-icon--color--active: var(--sken-bridge-ix-primary);
|
|
385
|
+
--theme-input-select-icon--color--hover: var(--sken-bridge-ix-primary);
|
|
386
|
+
/* Scrollbar tokens (see light block for the shadow-DOM
|
|
387
|
+
* chain rationale). Dark surface, lighter track than the
|
|
388
|
+
* raised surface so the user can see the track. */
|
|
389
|
+
--theme-scrollbar-track--background: var(--sken-bridge-ix-scrollbar-track);
|
|
390
|
+
--theme-scrollbar-track--background--hover: var(--sken-bridge-ix-scrollbar-track-hover);
|
|
391
|
+
--theme-scrollbar-track--border: var(--sken-bridge-ix-scrollbar-track-border);
|
|
392
|
+
--theme-scrollbar-thumb--background: var(--sken-bridge-ix-scrollbar-thumb);
|
|
393
|
+
--theme-scrollbar-thumb--background--hover: var(--sken-bridge-ix-scrollbar-thumb-hover);
|
|
394
|
+
--theme-input--background--hover: var(--sken-card);
|
|
395
|
+
--theme-input--border-color--hover: var(--sken-foreground);
|
|
396
|
+
--theme-input--border-color--focus: var(--sken-ring);
|
|
397
|
+
--theme-input--border-color--info: var(--sken-info);
|
|
398
|
+
--theme-input--border-color--warning: var(--sken-warning);
|
|
399
|
+
--theme-input--border-color--invalid: var(--sken-destructive);
|
|
400
|
+
--theme-btn-primary--color: var(--sken-primary-foreground);
|
|
401
|
+
--theme-btn-secondary--color: var(--sken-primary);
|
|
402
|
+
--theme-btn-tertiary--color: var(--sken-primary);
|
|
403
|
+
--theme-btn-subtle-primary--color: var(--sken-foreground);
|
|
404
|
+
--theme-btn-subtle-secondary--color: var(--sken-foreground);
|
|
405
|
+
--theme-btn-subtle-tertiary--color: var(--sken-foreground);
|
|
406
|
+
--theme-btn-danger-primary--color: var(--sken-primary-foreground);
|
|
407
|
+
--theme-btn-danger-secondary--color: var(--sken-destructive);
|
|
408
|
+
--theme-btn-danger-tertiary--color: var(--sken-destructive);
|
|
409
|
+
--theme-menu--background: var(--sken-card);
|
|
410
|
+
--theme-menu--border-color: var(--sken-border);
|
|
411
|
+
--theme-menu-item--color: var(--sken-foreground);
|
|
412
|
+
--theme-datepicker-day--background: transparent;
|
|
413
|
+
--theme-datepicker-day--background--hover: var(--sken-secondary-hover);
|
|
414
|
+
--theme-datepicker-day--background--active: var(--sken-muted);
|
|
415
|
+
--theme-datepicker-day--background--disabled: var(--sken-secondary);
|
|
416
|
+
--theme-datepicker-day--background--selected: var(--sken-primary);
|
|
417
|
+
--theme-datepicker-day--background--selected-hover: var(--sken-primary-hover);
|
|
418
|
+
--theme-datepicker-day--background--selected-active: var(--sken-primary-active);
|
|
419
|
+
--theme-datepicker-day--color: var(--sken-foreground);
|
|
420
|
+
--theme-datepicker-day--color--hover: var(--sken-foreground);
|
|
421
|
+
--theme-datepicker-day--color--active: var(--sken-foreground);
|
|
422
|
+
--theme-datepicker-day--color--disabled: var(--sken-muted-foreground);
|
|
423
|
+
--theme-datepicker-day--color--selected: var(--sken-primary-foreground);
|
|
424
|
+
--theme-datepicker-day--color--selected-hover: var(--sken-primary-foreground);
|
|
425
|
+
--theme-datepicker-weekday--color: var(--sken-muted-foreground);
|
|
426
|
+
--theme-datepicker-today--color: var(--sken-primary);
|
|
427
|
+
--theme-datepicker-today--border-color: var(--sken-primary);
|
|
428
|
+
--theme-datepicker-separator--background: var(--sken-border);
|
|
429
|
+
--theme-select-list-item--background--hover: var(--sken-secondary-hover);
|
|
430
|
+
--theme-select-list-item--background--selected: var(--sken-muted);
|
|
431
|
+
--theme-select-list-item-hint--color: var(--sken-muted-foreground);
|
|
432
|
+
--theme-select-list-item-hint--color--active: var(--sken-muted-foreground);
|
|
433
|
+
--theme-select-list-item-hint--color--hover: var(--sken-muted-foreground);
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
/* ── Theme: hc-light (high contrast light) ────────────────── */
|
|
437
|
+
html[data-theme="hc-light"] ix-select,
|
|
438
|
+
html[data-theme="hc-light"] ix-date-input,
|
|
439
|
+
html[data-theme="hc-light"] sken-combobox,
|
|
440
|
+
html[data-theme="hc-light"] sken-date-picker {
|
|
441
|
+
--theme-color-1: var(--sken-background);
|
|
442
|
+
--theme-color-2: var(--sken-background);
|
|
443
|
+
--theme-color-3: var(--sken-background);
|
|
444
|
+
--theme-color-4: var(--sken-foreground);
|
|
445
|
+
--theme-color-5: var(--sken-foreground);
|
|
446
|
+
--theme-color-6: var(--sken-foreground);
|
|
447
|
+
--theme-color-7: var(--sken-foreground);
|
|
448
|
+
--theme-color-8: var(--sken-foreground);
|
|
449
|
+
--theme-color-std-text: var(--sken-foreground);
|
|
450
|
+
--theme-color-soft-text: var(--sken-foreground);
|
|
451
|
+
--theme-color-weak-text: var(--sken-foreground);
|
|
452
|
+
--theme-color-inv-std-text: var(--sken-background);
|
|
453
|
+
--theme-color-primary: var(--sken-foreground);
|
|
454
|
+
--theme-color-primary--hover: var(--sken-foreground);
|
|
455
|
+
--theme-color-primary--active: var(--sken-foreground);
|
|
456
|
+
--theme-color-primary--contrast: var(--sken-background);
|
|
457
|
+
--theme-color-dynamic: var(--sken-foreground);
|
|
458
|
+
--theme-color-dynamic--hover: var(--sken-foreground);
|
|
459
|
+
--theme-color-dynamic--active: var(--sken-foreground);
|
|
460
|
+
--theme-color-dynamic-alt: var(--sken-foreground);
|
|
461
|
+
--theme-color-secondary: var(--sken-background);
|
|
462
|
+
--theme-color-info: var(--sken-foreground);
|
|
463
|
+
--theme-color-success: var(--sken-foreground);
|
|
464
|
+
--theme-color-warning: var(--sken-foreground);
|
|
465
|
+
--theme-color-danger: var(--sken-foreground);
|
|
466
|
+
--theme-color-alarm: var(--sken-foreground);
|
|
467
|
+
--theme-color-critical: var(--sken-foreground);
|
|
468
|
+
--theme-color-ghost: var(--sken-background);
|
|
469
|
+
--theme-color-ghost--hover: var(--sken-foreground);
|
|
470
|
+
--theme-color-ghost--active: var(--sken-foreground);
|
|
471
|
+
--theme-color-neutral: var(--sken-background);
|
|
472
|
+
--theme-input--background: var(--sken-background);
|
|
473
|
+
--theme-input--color: var(--sken-foreground);
|
|
474
|
+
--theme-input--border-color: var(--sken-foreground);
|
|
475
|
+
--theme-input-hint--color: var(--sken-foreground);
|
|
476
|
+
--theme-input-select-icon--color: var(--sken-bridge-ix-select-icon);
|
|
477
|
+
--theme-input-select-icon--color--active: var(--sken-bridge-ix-primary);
|
|
478
|
+
--theme-input-select-icon--color--hover: var(--sken-bridge-ix-primary);
|
|
479
|
+
--theme-scrollbar-track--background: var(--sken-bridge-ix-scrollbar-track);
|
|
480
|
+
--theme-scrollbar-track--background--hover: var(--sken-bridge-ix-scrollbar-track-hover);
|
|
481
|
+
--theme-scrollbar-track--border: var(--sken-bridge-ix-scrollbar-track-border);
|
|
482
|
+
--theme-scrollbar-thumb--background: var(--sken-bridge-ix-scrollbar-thumb);
|
|
483
|
+
--theme-scrollbar-thumb--background--hover: var(--sken-bridge-ix-scrollbar-thumb-hover);
|
|
484
|
+
--theme-input--background--hover: var(--sken-background);
|
|
485
|
+
--theme-input--border-color--hover: var(--sken-foreground);
|
|
486
|
+
--theme-input--border-color--focus: var(--sken-foreground);
|
|
487
|
+
--theme-btn-primary--color: var(--sken-background);
|
|
488
|
+
--theme-btn-secondary--color: var(--sken-foreground);
|
|
489
|
+
--theme-btn-tertiary--color: var(--sken-foreground);
|
|
490
|
+
--theme-btn-subtle-primary--color: var(--sken-foreground);
|
|
491
|
+
--theme-btn-subtle-secondary--color: var(--sken-foreground);
|
|
492
|
+
--theme-btn-subtle-tertiary--color: var(--sken-foreground);
|
|
493
|
+
--theme-btn-danger-primary--color: var(--sken-background);
|
|
494
|
+
--theme-btn-danger-secondary--color: var(--sken-foreground);
|
|
495
|
+
--theme-btn-danger-tertiary--color: var(--sken-foreground);
|
|
496
|
+
--theme-menu--background: var(--sken-background);
|
|
497
|
+
--theme-menu--border-color: var(--sken-foreground);
|
|
498
|
+
--theme-menu-item--color: var(--sken-foreground);
|
|
499
|
+
--theme-datepicker-day--background: transparent;
|
|
500
|
+
--theme-datepicker-day--background--hover: var(--sken-foreground);
|
|
501
|
+
--theme-datepicker-day--background--active: var(--sken-foreground);
|
|
502
|
+
--theme-datepicker-day--background--disabled: var(--sken-background);
|
|
503
|
+
--theme-datepicker-day--background--selected: var(--sken-foreground);
|
|
504
|
+
--theme-datepicker-day--background--selected-hover: var(--sken-foreground);
|
|
505
|
+
--theme-datepicker-day--background--selected-active: var(--sken-foreground);
|
|
506
|
+
--theme-datepicker-day--color: var(--sken-foreground);
|
|
507
|
+
--theme-datepicker-day--color--hover: var(--sken-foreground);
|
|
508
|
+
--theme-datepicker-day--color--active: var(--sken-foreground);
|
|
509
|
+
--theme-datepicker-day--color--disabled: var(--sken-foreground);
|
|
510
|
+
--theme-datepicker-day--color--selected: var(--sken-background);
|
|
511
|
+
--theme-datepicker-day--color--selected-hover: var(--sken-background);
|
|
512
|
+
--theme-datepicker-weekday--color: var(--sken-foreground);
|
|
513
|
+
--theme-datepicker-today--color: var(--sken-foreground);
|
|
514
|
+
--theme-datepicker-today--border-color: var(--sken-foreground);
|
|
515
|
+
--theme-datepicker-separator--background: var(--sken-foreground);
|
|
516
|
+
--theme-select-list-item--background--hover: var(--sken-foreground);
|
|
517
|
+
--theme-select-list-item--background--selected: var(--sken-foreground);
|
|
518
|
+
--theme-select-list-item-hint--color: var(--sken-foreground);
|
|
519
|
+
--theme-select-list-item-hint--color--active: var(--sken-foreground);
|
|
520
|
+
--theme-select-list-item-hint--color--hover: var(--sken-foreground);
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
/* ── Theme: hc-dark (high contrast dark) ───────────────────── */
|
|
524
|
+
html[data-theme="hc-dark"] ix-select,
|
|
525
|
+
html[data-theme="hc-dark"] ix-date-input,
|
|
526
|
+
html[data-theme="hc-dark"] sken-combobox,
|
|
527
|
+
html[data-theme="hc-dark"] sken-date-picker {
|
|
528
|
+
--theme-color-1: var(--sken-foreground);
|
|
529
|
+
--theme-color-2: var(--sken-foreground);
|
|
530
|
+
--theme-color-3: var(--sken-foreground);
|
|
531
|
+
--theme-color-4: var(--sken-background);
|
|
532
|
+
--theme-color-5: var(--sken-background);
|
|
533
|
+
--theme-color-6: var(--sken-background);
|
|
534
|
+
--theme-color-7: var(--sken-background);
|
|
535
|
+
--theme-color-8: var(--sken-background);
|
|
536
|
+
--theme-color-std-text: var(--sken-background);
|
|
537
|
+
--theme-color-soft-text: var(--sken-background);
|
|
538
|
+
--theme-color-weak-text: var(--sken-background);
|
|
539
|
+
--theme-color-inv-std-text: var(--sken-foreground);
|
|
540
|
+
--theme-color-primary: var(--sken-background);
|
|
541
|
+
--theme-color-primary--hover: var(--sken-background);
|
|
542
|
+
--theme-color-primary--active: var(--sken-background);
|
|
543
|
+
--theme-color-primary--contrast: var(--sken-foreground);
|
|
544
|
+
--theme-color-dynamic: var(--sken-background);
|
|
545
|
+
--theme-color-dynamic--hover: var(--sken-background);
|
|
546
|
+
--theme-color-dynamic--active: var(--sken-background);
|
|
547
|
+
--theme-color-dynamic-alt: var(--sken-background);
|
|
548
|
+
--theme-color-secondary: var(--sken-foreground);
|
|
549
|
+
--theme-color-info: var(--sken-background);
|
|
550
|
+
--theme-color-success: var(--sken-background);
|
|
551
|
+
--theme-color-warning: var(--sken-background);
|
|
552
|
+
--theme-color-danger: var(--sken-background);
|
|
553
|
+
--theme-color-alarm: var(--sken-background);
|
|
554
|
+
--theme-color-critical: var(--sken-background);
|
|
555
|
+
--theme-color-ghost: var(--sken-foreground);
|
|
556
|
+
--theme-color-ghost--hover: var(--sken-background);
|
|
557
|
+
--theme-color-ghost--active: var(--sken-background);
|
|
558
|
+
--theme-color-neutral: var(--sken-foreground);
|
|
559
|
+
--theme-input--background: var(--sken-foreground);
|
|
560
|
+
--theme-input--color: var(--sken-background);
|
|
561
|
+
--theme-input--border-color: var(--sken-background);
|
|
562
|
+
--theme-input-hint--color: var(--sken-background);
|
|
563
|
+
--theme-input--background--hover: var(--sken-foreground);
|
|
564
|
+
--theme-input--border-color--hover: var(--sken-background);
|
|
565
|
+
--theme-input--border-color--focus: var(--sken-background);
|
|
566
|
+
--theme-input-select-icon--color: var(--sken-bridge-ix-select-icon);
|
|
567
|
+
--theme-input-select-icon--color--active: var(--sken-bridge-ix-primary);
|
|
568
|
+
--theme-input-select-icon--color--hover: var(--sken-bridge-ix-primary);
|
|
569
|
+
--theme-scrollbar-track--background: var(--sken-bridge-ix-scrollbar-track);
|
|
570
|
+
--theme-scrollbar-track--background--hover: var(--sken-bridge-ix-scrollbar-track-hover);
|
|
571
|
+
--theme-scrollbar-track--border: var(--sken-bridge-ix-scrollbar-track-border);
|
|
572
|
+
--theme-scrollbar-thumb--background: var(--sken-bridge-ix-scrollbar-thumb);
|
|
573
|
+
--theme-scrollbar-thumb--background--hover: var(--sken-bridge-ix-scrollbar-thumb-hover);
|
|
574
|
+
--theme-btn-primary--color: var(--sken-foreground);
|
|
575
|
+
--theme-btn-secondary--color: var(--sken-background);
|
|
576
|
+
--theme-btn-tertiary--color: var(--sken-background);
|
|
577
|
+
--theme-btn-subtle-primary--color: var(--sken-background);
|
|
578
|
+
--theme-btn-subtle-secondary--color: var(--sken-background);
|
|
579
|
+
--theme-btn-subtle-tertiary--color: var(--sken-background);
|
|
580
|
+
--theme-btn-danger-primary--color: var(--sken-foreground);
|
|
581
|
+
--theme-btn-danger-secondary--color: var(--sken-background);
|
|
582
|
+
--theme-btn-danger-tertiary--color: var(--sken-background);
|
|
583
|
+
--theme-menu--background: var(--sken-foreground);
|
|
584
|
+
--theme-menu--border-color: var(--sken-background);
|
|
585
|
+
--theme-menu-item--color: var(--sken-background);
|
|
586
|
+
--theme-datepicker-day--background: transparent;
|
|
587
|
+
--theme-datepicker-day--background--hover: var(--sken-background);
|
|
588
|
+
--theme-datepicker-day--background--active: var(--sken-background);
|
|
589
|
+
--theme-datepicker-day--background--disabled: var(--sken-foreground);
|
|
590
|
+
--theme-datepicker-day--background--selected: var(--sken-background);
|
|
591
|
+
--theme-datepicker-day--background--selected-hover: var(--sken-background);
|
|
592
|
+
--theme-datepicker-day--background--selected-active: var(--sken-background);
|
|
593
|
+
--theme-datepicker-day--color: var(--sken-background);
|
|
594
|
+
--theme-datepicker-day--color--hover: var(--sken-background);
|
|
595
|
+
--theme-datepicker-day--color--active: var(--sken-background);
|
|
596
|
+
--theme-datepicker-day--color--disabled: var(--sken-background);
|
|
597
|
+
--theme-datepicker-day--color--selected: var(--sken-foreground);
|
|
598
|
+
--theme-datepicker-day--color--selected-hover: var(--sken-foreground);
|
|
599
|
+
--theme-datepicker-weekday--color: var(--sken-background);
|
|
600
|
+
--theme-datepicker-today--color: var(--sken-background);
|
|
601
|
+
--theme-datepicker-today--border-color: var(--sken-background);
|
|
602
|
+
--theme-datepicker-separator--background: var(--sken-background);
|
|
603
|
+
--theme-select-list-item--background--hover: var(--sken-background);
|
|
604
|
+
--theme-select-list-item--background--selected: var(--sken-background);
|
|
605
|
+
--theme-select-list-item-hint--color: var(--sken-background);
|
|
606
|
+
--theme-select-list-item-hint--color--active: var(--sken-background);
|
|
607
|
+
--theme-select-list-item-hint--color--hover: var(--sken-background);
|
|
608
|
+
}
|