7k-design-system 1.1.1 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [1.3.0](https://github.com/7K-Group/7k-design-system/compare/v1.2.0...v1.3.0) (2026-10-13)
+
+
+### Features
+
+* data-display components, u-* utilities, legacy class conformance, edge releases ([441ec7b](https://github.com/7K-Group/7k-design-system/commit/441ec7b72993d75899127ed803d273965434fb16))
+
+# [1.3.0](https://github.com/7K-Group/7k-design-system/compare/v1.2.0...v1.3.0) (2026-10-08)
+
+
+### Features
+
+* add `Stat`, `EmptyState`, and `DataTable` React components (`.stat`/`.empty`/`.table` compositions with loading skeletons, sortable headers, and a mobile stacked-card transform) plus `.banner-count`/`.banner-link` banner slots ([3eae951](https://github.com/7K-Group/7k-design-system/commit/3eae951))
+* add token-based `u-*` utility classes (`utilities.css`): text/background/border helpers with explicit opacity and hover variants
+
+### Breaking Changes
+
+* rename legacy class families for consistency: `isometric-*` → `iso-*`, bare texture classes → `bg-*` (e.g. `.scanline` → `.bg-scanline`), `.pixel-*` → `.font-pixel-*`, `.pixel-fade-in`/`.pixel-dots` → `.step-fade-in`/`.step-dots`; `TextureOverlay` prop `animate` → `animated`; the conflicting duplicate `.texture-overlay` in isometric.css is now `.overlay-fill`
+
+# [1.2.0](https://github.com/7K-Group/7k-design-system/compare/v1.1.1...v1.2.0) (2026-10-08)
+
+
+### Features
+
+* modernize design system — naming standardization, Inari project, accent-driven UI ([#65](https://github.com/7K-Group/7k-design-system/issues/65)) ([b160a60](https://github.com/7K-Group/7k-design-system/commit/b160a60b4373c6a8fb1d91446397f8cd6b84ef80))
+
 ## [1.1.1](https://github.com/7K-Group/7k-design-system/compare/v1.1.0...v1.1.1) (2026-08-13)
 
 
@@ -31,6 +57,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- `.btn-modern-glow-secondary` variant (cyan/per-project outline + glow) — completes the `glow-secondary` Button variant that React and the consumer guide already referenced
+- `.btn-modern:disabled` / `[aria-disabled='true']` styling (40% opacity, no pointer events, glow removed) for all button variants
+- `.select-native:disabled`, `.checkbox`/`.radio`/`.toggle` disabled styling (`:has(input:disabled)`, 40% opacity)
+- Visible keyboard focus rings for custom `Checkbox`, `Radio`, and `Toggle` controls (`:has(input:focus-visible)`)
+- Missing status variant classes: `.toast-info`, `.alert-info`, `.alert-danger` (the React `Alert` `danger` variant emitted an unstyled class), `.alert-content`, `.alert-close`, `.toast-content`, plus focus-visible styles for dismiss buttons
+- `.card-static:hover` reset so `Card hover={false}` actually disables the hover lift
+- `.spinner-cyan` and `.icon-box-cyan` classes (previously documented but unimplemented)
+- Modal: Escape key closes, Tab focus is trapped inside the dialog while open
+- Drawer: Escape key closes, focus returns to the triggering element
+- Tabs: ARIA APG keyboard support (Arrow/Home/End moves selection, roving tabindex), `TabPanel` is focusable
+- `tests/States.test.tsx` covering the new interaction states
 - Production-ready build pipeline with Vite, PostCSS, and autoprefixer
 - TypeScript configuration and type definitions for React UI kit
 - ESLint, Prettier, and Stylelint configurations for code quality
@@ -44,6 +81,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Self-hosted Geist font strategy with CDN fallback
 
 ### Changed
+- **Contrast (WCAG AA, dark theme):** `--text-tertiary` now maps to `--neutral-400` (was `--neutral-500`, 3.5–3.7:1) and `--text-disabled` to `--neutral-600` (was `--neutral-700`, 1.75:1); `.badge-neutral` uses `--status-neutral`; primary/glow button `:active` text is now white (was magenta on muted fill, 3.0:1). Visual change is subtle but visible — captions and disabled elements read slightly brighter
+- `Input` with an `error` now applies the `.error` class (danger border) in addition to `aria-invalid`
+- Component CSS now consumes semantic tokens instead of raw ramps (`.input:focus` → `--border-focus`; badge/toast/alert status colors → `--status-*`; `.table td`/`.modal-body` → `--text-secondary`)
+- Hard-coded z-index values replaced with `--z-*` tokens in `.tooltip-content`, `.combobox-menu`, and Modal/Drawer/Tooltip inline styles
+- Shimmer animation now uses theme-aware `--texture-*` tokens (works in light theme)
+- Light theme: `--shadow-inset` corrected to a black inner shadow; the `prefers-color-scheme: light` media block now yields to an explicit `data-theme` attribute
+- DESIGN.md, SKILL.md, and CONSUMER_GUIDE.md synced with implemented class names, button variants, modifier names, and token values
 - Converted React UI kit from plain JS to TypeScript with proper component patterns
 - Refactored CSS to eliminate hard-coded colors in favor of design tokens
 - Updated `package.json` with proper `exports`, `engines`, and `types` fields

package/CONSUMER_GUIDE.md

@@ -72,9 +72,9 @@ import '7k-design-system/css/animations';
 
 ```html
 <!-- Buttons -->
-<button class="btn-modern btn-modern-primary">Primary</button>
-<button class="btn-modern btn-modern-secondary">Secondary</button>
-<button class="btn-modern btn-modern-ghost">Ghost</button>
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-secondary">Secondary</button>
+<button class="btn btn-ghost">Ghost</button>
 
 <!-- Forms -->
 <input class="input" placeholder="Enter text" />
@@ -271,12 +271,32 @@ function ThemeAwareComponent() {
 </Modal>
 ```
 
+Accessibility notes: `Modal` closes on **Escape**, traps **Tab** focus inside the dialog while open, and restores focus to the triggering element on close. Always pass `aria-labelledby` (or `aria-label`). `Drawer` supports Escape and focus restoration as well.
+
+#### Toast
+
+```tsx
+<Toast
+  variant="success" // 'default' | 'success' | 'error' | 'warning' | 'info'
+  onDismiss={() => setShow(false)}
+>
+  Deployed
+</Toast>
+```
+
+Mount toasts in a fixed container at the top of your app (they use `role="status"`/`role="alert"` and the `slide-up-reveal` animation). Example container:
+
+```tsx
+<div style={{ position: 'fixed', bottom: 24, right: 24, zIndex: 'var(--z-toast)', display: 'grid', gap: 8 }}>
+  {toasts.map((t) => <Toast key={t.id} {...t} />)}
+</div>
+```
+
 #### Layout helpers
 
 ```tsx
 <TextureOverlay texture="halftone" animate>...</TextureOverlay>
 <IsometricBackground pattern="grid" animated>...</IsometricBackground>
-<MangaPanel frame texture="halftone" speedLine="horizontal">...</MangaPanel>
 ```
 
 #### Forms
@@ -286,9 +306,35 @@ function ThemeAwareComponent() {
 <Radio label="Option" name="group" />
 <Toggle label="Enable" checked={on} onChange={setOn} />
 <Select><option>A</option></Select>
+<Listbox options={[{ value: 'a', label: 'A' }]} value={v} onChange={setV} />
 <Textarea rows={4} />
 ```
 
+#### Data display (1.3.0)
+
+```tsx
+<Stat value="24" label="Clusters" accent trend="+2" />
+<EmptyState title="No clusters" body="Register one to get started" action={<Button variant="accent">Register</Button>} />
+<DataTable
+  columns={[
+    { key: 'name', label: 'Name' },
+    { key: 'status', label: 'Status', mono: true, sortable: true },
+  ]}
+  rows={rows}
+  rowKey="id"
+  loading={isLoading}      // renders skeleton rows
+  empty={<EmptyState title="No rows" />}
+  onSort={(key) => sort(key)}
+  sortKey={sortKey}
+  sortDirection="asc"
+  pagination={<div className="pagination">…</div>}
+/>
+```
+
+`DataTable` composes the `.table` classes: mono uppercase headers, sortable-column buttons, skeleton rows while `loading`, an `empty` slot when there are no rows, and a stacked-card transform on narrow viewports (≤640px, each cell labelled via `data-label`).
+
+Form notes: passing `error` to `Input` adds the `.error` class (danger border) and wires `aria-invalid` + an alert-role message automatically (for `Textarea`/`Select`, add the `error` class and `aria-invalid` manually). Custom `Checkbox`/`Radio`/`Toggle` render a visually-hidden native input — keyboard focus shows a magenta focus ring on the custom control via `:focus-visible`. `Tabs` supports full arrow-key / Home / End navigation with roving tabindex per the ARIA tabs pattern.
+
 ---
 
 ## Project Customization
@@ -300,20 +346,14 @@ The parent 7K brand uses magenta primary + cyan secondary. Each sub-project can
 ```css
 /* project-neon.css */
 .project-neon {
-  /* Circle project — cyan secondary accent */
+  /* 7KMinato — cyan takes over the full brand chain */
   --brand-secondary: var(--cyan-500);
 }
 
-/* project-grid.css */
-.project-grid {
-  /* Grid project — acid green secondary accent */
-  --brand-secondary: var(--acid-500);
-}
-
-/* project-ember.css */
-.project-ember {
-  /* Line project — orange secondary accent */
-  --brand-secondary: var(--ember-500);
+/* project-inari.css */
+.project-inari {
+  /* Inari — burnt orange takes over the full brand chain */
+  --brand-secondary: var(--inari-500);
 }
 ```
 
@@ -373,7 +413,7 @@ function App() {
 
 - **Don't hard-code colors** — Avoid hex values; use design tokens
 - **Don't import CSS in components** — Import once at app level
-- **Don't mix textures** — Don't put `.scanline` inside `.halftone`
+- **Don't mix textures** — Don't put `.bg-scanline` inside `.halftone`
 - **Don't override component internals** — Style via props or wrapper classes
 - **Don't forget data-theme** — Light mode requires `data-theme="light"` on <html>