@nadicodeai/design-system 6.3.1 → 6.3.3
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.md +15 -0
- package/package.json +1 -1
package/DESIGN.md
CHANGED
|
@@ -303,6 +303,21 @@ Neutrals carry the interface: grounds, chrome, hierarchy, and every control come
|
|
|
303
303
|
|
|
304
304
|
Interaction states are material, not meaning: focus, hover, and selection read as contrast steps on the neutral spine. A hover ground is a neutral step; the only change a control hover carries is a step inside its own family, as `{colors.action-hover}` does on the action control. Cobalto stays on info and running.
|
|
305
305
|
|
|
306
|
+
**Table and action affordances.** Across products, hovering a table body row
|
|
307
|
+
reveals a visible, full-width neutral fill. Use the full soft-canvas step
|
|
308
|
+
(`bg-accent` in React), without reducing its opacity. The same row treatment
|
|
309
|
+
accompanies keyboard focus inside a row and an open row menu; keep the focused
|
|
310
|
+
control's own outline. Header and footer rows remain stable. Preserve text,
|
|
311
|
+
status, and selection meaning, with no layout shift.
|
|
312
|
+
|
|
313
|
+
Enabled buttons, including the three-dot action trigger, show a pointer cursor.
|
|
314
|
+
Disabled controls do not advertise an available action. Row highlighting also
|
|
315
|
+
helps scan read-only data: only give the whole row a pointer cursor when it has
|
|
316
|
+
an actual row action. Touch access must not depend on hover. Shared React
|
|
317
|
+
behavior belongs to `TableRow` and the UI stylesheet, consumed by all product
|
|
318
|
+
adapters. Verify light and dark themes, keyboard focus, menu opening and closing,
|
|
319
|
+
and compact widths in the rendered product.
|
|
320
|
+
|
|
306
321
|
Every value a role needs is carried by the role token itself; there is no numeric scale family. The neutral spine — `{colors.ink}`, `{colors.body}`, `{colors.muted}`, `{colors.canvas}`, `{colors.canvas-soft}`, `{colors.canvas-soft-2}`, `{colors.line}`, `{colors.seam}` — is strictly achromatic: every neutral is an equal-channel gray (OKLCH chroma 0) in both themes. The five identity-palette hues are cross-spectrum equals, so any neutral bias would flatter one and dirty another; hue arrives full-strength through the chromatic roles or not at all, and no tint ever paints an app surface. Colours are authored as sRGB hex here and emitted as `oklch()` in the generated CSS.
|
|
307
322
|
|
|
308
323
|
### Semantic roles (functional tier)
|