7k-design-system 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [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)
+
+
+### Bug Fixes
+
+* add missing perms ([b0e54a3](https://github.com/7K-Group/7k-design-system/commit/b0e54a3be2ff1248736e3c0de379c61a02af750d))
+* do not run ci on main and cd ([f38dce0](https://github.com/7K-Group/7k-design-system/commit/f38dce02bcb8e938b916a59acfede57225e18905))
+* release process failing ([ab488bc](https://github.com/7K-Group/7k-design-system/commit/ab488bc40537ed54dc04a606eef668da317a812b))
+
 # [1.1.0](https://github.com/7K-Group/7k-design-system/compare/v1.0.0...v1.1.0) (2026-06-05)
 
 
@@ -22,6 +38,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
@@ -35,6 +62,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" />
@@ -116,16 +116,16 @@ All CSS custom properties are available globally:
   background: var(--bg-elevated);
   color: var(--text-primary);
   border: 2px solid var(--border-default);
-  
+
   /* Typography */
   font-family: var(--font-sans);
   font-size: var(--text-body);
   line-height: var(--leading-normal);
-  
+
   /* Spacing */
   padding: var(--space-4);
   gap: var(--space-2);
-  
+
   /* Brand accent */
   border-color: var(--brand-primary);
 }
@@ -194,7 +194,7 @@ import { useTheme } from '7k-design-system/react';
 
 function ThemeAwareComponent() {
   const { theme, toggleTheme, setTheme } = useTheme();
-  
+
   return (
     <div>
       <p>Current theme: {theme}</p>
@@ -212,11 +212,12 @@ function ThemeAwareComponent() {
 
 ```tsx
 <Button
-  variant="primary"    // 'primary' | 'secondary' | 'ghost' | 'glow' | 'glow-cyan' | 'glow-grid' | 'danger'
-  size="md"            // 'sm' | 'md' | 'lg'
+  variant="primary" // 'primary' | 'secondary' | 'ghost' | 'glow' | 'accent' | 'glow-accent' | 'glow-secondary' | 'danger'
+  size="md" // 'sm' | 'md' | 'lg'
   disabled={false}
+  loading={false}
   onClick={() => {}}
-  type="button"        // 'button' | 'submit' | 'reset'
+  type="button" // 'button' | 'submit' | 'reset'
 >
   Click me
 </Button>
@@ -226,11 +227,13 @@ function ThemeAwareComponent() {
 
 ```tsx
 <Input
-  type="text"          // any HTML input type
+  type="text" // any HTML input type
   placeholder="Hint"
   disabled={false}
   value={value}
   onChange={(value) => setValue(value)}
+  label="Email"
+  error="Required"
 />
 ```
 
@@ -238,37 +241,96 @@ function ThemeAwareComponent() {
 
 ```tsx
 <Badge
-  variant="default"    // 'default' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'
+  variant="default" // 'default' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'
+  role="status"
 >
   Status
 </Badge>
 ```
 
+#### Card
+
+```tsx
+<Card texture="halftone" hover={true}>
+  <CardHeader>Title</CardHeader>
+  <CardBody>Content</CardBody>
+</Card>
+```
+
+#### Modal
+
+```tsx
+<Modal open={isOpen} onClose={close} texture="noise" aria-labelledby="modal-title">
+  <ModalHeader>
+    <h2 id="modal-title">Title</h2>
+  </ModalHeader>
+  <p>Content</p>
+  <ModalFooter>
+    <Button onClick={close}>Close</Button>
+  </ModalFooter>
+</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>
+```
+
+#### Forms
+
+```tsx
+<Checkbox label="Accept" />
+<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} />
+```
+
+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
 
-Each 7K sub-project can override the accent color while keeping the same base design.
+The parent 7K brand uses magenta primary + cyan secondary. Each sub-project can theme the secondary accent while keeping the same base design.
 
 ### Override Accent Colors
 
 ```css
 /* project-neon.css */
 .project-neon {
-  /* Circle project — cyan accent */
-  --accent-circle: var(--cyan-500);
+  /* 7KMinato — cyan takes over the full brand chain */
+  --brand-secondary: var(--cyan-500);
 }
 
-/* project-grid.css */
-.project-grid {
-  /* Grid project — acid green accent */
-  --accent-grid: var(--acid-500);
-}
-
-/* project-ember.css */
-.project-ember {
-  /* Line project — orange accent */
-  --accent-line: var(--ember-500);
+/* project-inari.css */
+.project-inari {
+  /* Inari — burnt orange takes over the full brand chain */
+  --brand-secondary: var(--inari-500);
 }
 ```
 
@@ -279,9 +341,9 @@ Each 7K sub-project can override the accent color while keeping the same base de
 function App() {
   return (
     <ThemeProvider>
-      <div className="project-neon">
+      <ProjectProvider defaultProject="circle">
         <YourApp />
-      </div>
+      </ProjectProvider>
     </ThemeProvider>
   );
 }
@@ -363,29 +425,31 @@ import { Button, ThemeToggle } from '7k-design-system/react';
 export function Home() {
   return (
     <div className="project-neon">
-      <nav style={{ 
-        position: 'sticky', 
-        top: 0, 
-        display: 'flex', 
-        justifyContent: 'space-between',
-        padding: '12px 24px',
-        background: 'var(--bg-base)',
-        borderBottom: '2px solid var(--border-default)'
-      }}>
+      <nav
+        style={{
+          position: 'sticky',
+          top: 0,
+          display: 'flex',
+          justifyContent: 'space-between',
+          padding: '12px 24px',
+          background: 'var(--bg-base)',
+          borderBottom: '2px solid var(--border-default)',
+        }}
+      >
         <span className="mono-label">7K GROUP</span>
         <ThemeToggle />
       </nav>
 
-      <section 
-        className="scanline" 
-        style={{ 
+      <section
+        className="scanline"
+        style={{
           minHeight: '80vh',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
           textAlign: 'center',
-          padding: 'var(--space-8)'
+          padding: 'var(--space-8)',
         }}
       >
         <span className="mono-label" style={{ color: 'var(--brand-primary)' }}>
@@ -395,8 +459,8 @@ export function Home() {
           Built for Midnight
         </h1>
         <p className="body-lg" style={{ maxWidth: '600px', marginTop: 'var(--space-4)' }}>
-          A multi-project technology company crafting infrastructure, 
-          AI pipelines, and digital products.
+          A multi-project technology company crafting infrastructure, AI pipelines, and digital
+          products.
         </p>
         <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-6)' }}>
           <Button variant="glow">Explore Projects</Button>
@@ -404,15 +468,10 @@ export function Home() {
         </div>
       </section>
 
-      <section 
-        className="halftone-md"
-        style={{ padding: 'var(--space-8)' }}
-      >
+      <section className="halftone-md" style={{ padding: 'var(--space-8)' }}>
         <span className="mono-label">PHILOSOPHY</span>
         <h2 className="h2">Dark First</h2>
-        <p className="body">
-          We design for the dark. Light mode is opt-in, not default.
-        </p>
+        <p className="body">We design for the dark. Light mode is opt-in, not default.</p>
       </section>
     </div>
   );
@@ -466,6 +525,6 @@ Make sure your `tsconfig.json` includes:
 ## Next Steps
 
 1. Run `npm run storybook` in the design system repo to explore all components
-2. Open `preview/*.html` files to see token values rendered
+2. Browse the Tokens, Textures, and Components stories to see token values rendered
 3. Read `DESIGN.md` for detailed design principles and constraints
 4. Check `CONTRIBUTING.md` if you want to contribute back