@vectoriox/iox-ui 5.11.0 → 5.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/design-core/index.d.ts +122 -36
- package/fesm2022/vectoriox-iox-ui-design-core.mjs +217 -76
- package/fesm2022/vectoriox-iox-ui-design-core.mjs.map +1 -1
- package/fesm2022/vectoriox-iox-ui.mjs +152 -20
- package/fesm2022/vectoriox-iox-ui.mjs.map +1 -1
- package/index.d.ts +67 -4
- package/package.json +1 -1
- package/src/design-core/element-styles.ts +271 -0
- package/src/design-core/flavor.ts +11 -88
- package/src/design-core/public-api.ts +1 -0
- package/src/design-core/token-css.ts +25 -6
- package/styles/iox-forms.css +56 -5
package/styles/iox-forms.css
CHANGED
|
@@ -49,6 +49,57 @@
|
|
|
49
49
|
.iox-field__error { margin: 4px 0 0; }
|
|
50
50
|
.iox-submit { font: inherit; border: none; cursor: pointer; }
|
|
51
51
|
|
|
52
|
+
/* ── Visual baseline — EXACTLY the spec's `fieldClassBaseline` (design-system plan DS2) ──────────
|
|
53
|
+
* Every value is a token, so a re-theme restyles every form with no page write. Each var() carries
|
|
54
|
+
* today's value as its fallback (trap T6) — `inherit` where the structural rule above inherits, the
|
|
55
|
+
* engine reset's `0` for padding, and `revert` (the UA default, which is what rendered before) for
|
|
56
|
+
* everything nothing declared — so an org whose tokens are not seeded renders as it did.
|
|
57
|
+
* Two spec values are bare keywords and cannot fall back: `border-style: solid` (the UA inset
|
|
58
|
+
* border becomes solid) and the focus ring's `outline: none`, whose box-shadow therefore falls back
|
|
59
|
+
* to a visible system-colour ring rather than to nothing. */
|
|
60
|
+
.iox-field__control {
|
|
61
|
+
background: var(--iox-field-bg, revert);
|
|
62
|
+
color: var(--iox-field-ink, inherit);
|
|
63
|
+
border-width: var(--iox-field-border-width, revert);
|
|
64
|
+
border-style: solid;
|
|
65
|
+
border-color: var(--iox-field-border, revert);
|
|
66
|
+
border-radius: var(--iox-field-radius, revert);
|
|
67
|
+
padding: var(--iox-field-pad, 0);
|
|
68
|
+
font-family: var(--iox-font-body, inherit);
|
|
69
|
+
font-size: var(--iox-size-body, inherit);
|
|
70
|
+
transition: border-color var(--iox-dur-base, 0s) var(--iox-ease-standard, ease), box-shadow var(--iox-dur-base, 0s) var(--iox-ease-standard, ease);
|
|
71
|
+
}
|
|
72
|
+
.iox-field__control:focus-visible {
|
|
73
|
+
border-color: var(--iox-accent, revert);
|
|
74
|
+
box-shadow: var(--iox-field-focus, 0 0 0 2px Highlight);
|
|
75
|
+
outline: none;
|
|
76
|
+
}
|
|
77
|
+
.iox-field__label {
|
|
78
|
+
font-family: var(--iox-font-body, inherit);
|
|
79
|
+
font-size: var(--iox-field-label-size, inherit);
|
|
80
|
+
font-weight: var(--iox-field-label-weight, inherit);
|
|
81
|
+
color: var(--iox-text, inherit);
|
|
82
|
+
}
|
|
83
|
+
.iox-field__help {
|
|
84
|
+
font-size: var(--iox-size-small, inherit);
|
|
85
|
+
color: var(--iox-text-muted, inherit);
|
|
86
|
+
}
|
|
87
|
+
.iox-field__error {
|
|
88
|
+
font-size: var(--iox-size-small, inherit);
|
|
89
|
+
color: var(--iox-danger, inherit);
|
|
90
|
+
}
|
|
91
|
+
.iox-invalid .iox-field__control {
|
|
92
|
+
border-color: var(--iox-danger, revert);
|
|
93
|
+
}
|
|
94
|
+
/* Native-appearance controls (checkbox, radio, range — and the switch, a checkbox) draw themselves:
|
|
95
|
+
the box baseline must not frame them. `:where()` keeps this at the baseline's specificity, so the
|
|
96
|
+
switch rules below still paint the track. */
|
|
97
|
+
.iox-field__control:where([type='checkbox'], [type='radio'], [type='range']) {
|
|
98
|
+
border: none;
|
|
99
|
+
padding: 0;
|
|
100
|
+
background: transparent;
|
|
101
|
+
}
|
|
102
|
+
|
|
52
103
|
/* Visually hidden, still announced — a label may be hidden, never deleted. */
|
|
53
104
|
.iox-field__label--hidden {
|
|
54
105
|
position: absolute; width: 1px; height: 1px; margin: -1px;
|
|
@@ -65,7 +116,7 @@
|
|
|
65
116
|
background: var(--iox-line, #d8d4d1);
|
|
66
117
|
position: relative;
|
|
67
118
|
cursor: pointer;
|
|
68
|
-
transition: background 150ms ease-out;
|
|
119
|
+
transition: background var(--iox-dur-fast, 150ms) var(--iox-ease-standard, ease-out);
|
|
69
120
|
flex-shrink: 0;
|
|
70
121
|
}
|
|
71
122
|
.iox-field__control--switch::before {
|
|
@@ -76,11 +127,11 @@
|
|
|
76
127
|
width: 16px;
|
|
77
128
|
height: 16px;
|
|
78
129
|
border-radius: 999px;
|
|
79
|
-
background: #ffffff;
|
|
80
|
-
transition: transform 150ms ease-out;
|
|
130
|
+
background: var(--iox-accent-ink, #ffffff);
|
|
131
|
+
transition: transform var(--iox-dur-fast, 150ms) var(--iox-ease-standard, ease-out);
|
|
81
132
|
}
|
|
82
133
|
.iox-field__control--switch:checked {
|
|
83
|
-
background: var(--iox-brand-500, #1f1d1b);
|
|
134
|
+
background: var(--iox-accent, var(--iox-brand-500, #1f1d1b));
|
|
84
135
|
}
|
|
85
136
|
.iox-field__control--switch:checked::before {
|
|
86
137
|
transform: translateX(16px);
|
|
@@ -92,5 +143,5 @@
|
|
|
92
143
|
/* ── range (control='range') ── */
|
|
93
144
|
.iox-field__control--range {
|
|
94
145
|
width: 100%;
|
|
95
|
-
accent-color: var(--iox-brand-500, #1f1d1b);
|
|
146
|
+
accent-color: var(--iox-accent, var(--iox-brand-500, #1f1d1b));
|
|
96
147
|
}
|