@wtasnorg/candi 0.0.22 → 0.0.27

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright © 2025 wtasg
+Copyright © 2026 wtasg
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -19,6 +19,7 @@ Candi provides a single source of truth for colors using the OKLCH color space,
 | **KDE Plasma** | Full | Color schemes for KDE 4, 5 & 6 |
 | **GNOME** | Full | GTK3 & GTK4 themes for X11 and Wayland |
 | **Obsidian** | Full | Light & Dark themes with 60+ CSS variables |
+| **Showcase App** | Full | Interactive Flutter gallery & playground |
 
 ---
 
@@ -32,19 +33,23 @@ All colors are defined in `src/data/colors.js`. This file is the canonical sourc
 src/data/colors.js (Source of Truth)
         │
         ▼
+scripts/gen-oklch-primitives.js (Derivation Engine)
+        │
+        ▼
 scripts/sync-colors.js (Generator)
         │
         ├── src/css/base.css (CSS Variables)
         ├── src/v4/theme.css (Tailwind v4 @theme)
         └── dist/colors.json (Data export)
 
-Platform Builds (all consume colors.js directly):
+Platform Builds (all consume colors.js & derivation engine):
 ├── build-flutter.js → flutter/lib/candi_colors.dart
 ├── build-vscode.js  → vscode/themes/*.json
 ├── build-vim.js     → vim/colors/*.vim
 ├── build-kde.js     → kde/v4,v5/*.colors
 ├── build-gnome.js   → gnome/gtk-*/*.css
-└── build-obsidian.js → obsidian/theme.css
+├── build-obsidian.js → obsidian/theme.css
+└── build-showcase.js → showcase_flutter/ (Vite/Web build)
 ```
 
 ### OKLCH Color Space
@@ -85,7 +90,8 @@ candi/
 ├── vim/                    # Vim colorschemes
 ├── kde/                    # KDE Plasma color schemes
 ├── gnome/                  # GTK3/GTK4 themes
-└── obsidian/               # Obsidian theme
+├── obsidian/               # Obsidian theme
+└── showcase_flutter/       # Flutter showcase application
 ```
 
 ---
@@ -104,6 +110,7 @@ candi/
 | `npm run build:kde` | Build KDE color schemes only |
 | `npm run build:gnome` | Build GNOME/GTK themes only |
 | `npm run build:obsidian` | Build Obsidian theme only |
+| `npm run build:showcase` | Build Flutter showcase app only |
 
 ### Test
 
@@ -118,6 +125,7 @@ candi/
 | `npm run test:kde` | Test KDE color schemes |
 | `npm run test:gnome` | Test GNOME themes |
 | `npm run test:obsidian` | Test Obsidian theme |
+| `npm run test:showcase` | Test Flutter showcase app |
 
 ### Package & Publish
 
@@ -137,38 +145,7 @@ Download ready-to-use artifacts from GitHub releases (recommended for most users
 
 **[Using Prebuilt Releases Guide](docs/using-release-artifacts.md)**
 
-### GitHub Packages Authentication (Required)
-
-> [!IMPORTANT]
-> This package is published to **GitHub Packages**, not npmjs.com. You must authenticate with GitHub before installing.
-
-To install the package, you need to authenticate with GitHub:
-
-1. **Create a Personal Access Token (PAT)**:
-   - Go to GitHub Settings → [Developer settings → Personal access tokens → Tokens (classic)](https://github.com/settings/tokens)
-   - Click "Generate new token (classic)"
-   - Give it a descriptive name (e.g., "npm packages")
-   - Select the `read:packages` scope
-   - Click "Generate token" and copy the token
-
-2. **Configure npm authentication**:
-
-```bash
-npm login --scope=@wtasg --auth-type=legacy --registry=https://npm.pkg.github.com
-```
-
-- Username: Your GitHub username
-- Password: The PAT you just created
-- Email: Your GitHub email
-
-Or create/update your `~/.npmrc` file:
-
-```text
-//npm.pkg.github.com/:_authToken=YOUR_GITHUB_PAT
-@wtasg:registry=https://npm.pkg.github.com
-```
-
-### Web (Tailwind CSS)
+### Web (npm Package)
 
 ```bash
 npm install @wtasnorg/candi
@@ -212,9 +189,9 @@ module.exports = {
 
 | Token | Light | Dark | Usage |
 | :--- | :--- | :--- | :--- |
-| `bg` | Warm white | Warm dark | Page background |
-| `surface` | Soft cream | Card surface | Cards, sections |
-| `elevated` | Pure white | Elevated dark | Modals, popups |
+| `bg` | Warm white | Warm dark (Hygge) | Page background |
+| `surface` | Soft cream | Warm dark surface | Cards, sections |
+| `elevated` | Pure white | Warm elevated dark | Modals, popups |
 | `text` | Warm charcoal | Off-white | Primary text |
 | `text-subtle` | Medium gray | Light gray | Secondary text |
 | `text-muted` | Light gray | Muted gray | Tertiary text |
@@ -230,11 +207,11 @@ module.exports = {
 
 ## Design & Accessibility
 
-Candi is built with accessibility as a core requirement:
+Candi prioritizes accessibility through automated validation:
 
-- **WCAG Standards**: Color extraction pipeline automatically validates contrast ratios
-- **Primary Text**: Aimed at **4.5:1** contrast (WCAG AA) for standard text
-- **UI Elements**: Accents and status indicators tuned for **3.0:1** contrast (WCAG Graphical Objects)
+- **WCAG Compliance**: Contrast ratios are validated programmatically during the color extraction pipeline.
+- **Primary Text**: Targets **4.5:1** (WCAG AA) for standard text.
+- **UI Elements**: Accents and state indicators target **3.0:1** (WCAG Graphical Objects).
 
 ---
 
@@ -260,23 +237,21 @@ npm install
 npm run build:all
 ```
 
-### Working on the Documentation Website
+### Documentation Website
 
-The docs website lives in `website/` and uses the built theme from `dist/`:
+The documentation site in `website/` consumes the built theme from `dist/`:
 
 ```bash
 cd website
 npm install
-npm run dev     # Starts dev server at http://localhost:3000
+npm run dev
 ```
 
-The `predev` and `prebuild` scripts automatically rebuild the parent package, so changes to `src/data/colors.js` are reflected immediately.
-
-### Making Color Changes
+### Color Modifications
 
-1. Edit `src/data/colors.js` (the single source of truth)
-2. Run `npm run build:all` to regenerate all platform themes
-3. Run `npm test` to validate color accuracy and contrast ratios
+1. Edit authoritative anchors in `src/data/colors.js`.
+2. Run `npm run build:all` to regenerate platform themes via the derivation engine.
+3. Run `npm test` to validate system-wide harmony and contrast.
 
 ---
 

package/dist/base.css

@@ -12,29 +12,15 @@
 
 :root {
   /* @tokens-start-light */
-    --candi-bg: oklch(98% 0.008 85);
-    --candi-surface: oklch(95.5% 0.012 85);
+    --candi-bg: oklch(96% 0.012 85);
+    --candi-surface: oklch(93% 0.015 85);
     --candi-elevated: oklch(100% 0 0);
-    --candi-text: oklch(28% 0.015 250);
-    --candi-text-subtle: oklch(50% 0.01 250);
-    --candi-text-muted: oklch(62% 0.008 250);
-    --candi-border: oklch(90% 0.008 85);
-    --candi-border-strong: oklch(82% 0.01 85);
-    --candi-divider: oklch(88% 0.006 85);
-    --candi-accent: oklch(52% 0.06 230);
-    --candi-accent-subtle: oklch(85% 0.03 230);
-    --candi-on-accent: oklch(100% 0 0);
-    --candi-secondary: oklch(58% 0.12 55);
-    --candi-secondary-subtle: oklch(88% 0.04 55);
-    --candi-on-secondary: oklch(100% 0 0);
-    --candi-success: oklch(52% 0.08 145);
-    --candi-on-success: oklch(100% 0 0);
-    --candi-warning: oklch(68% 0.13 70);
-    --candi-on-warning: oklch(20% 0.02 70);
-    --candi-error: oklch(58% 0.12 25);
-    --candi-on-error: oklch(100% 0 0);
-    --candi-info: oklch(55% 0.1 240);
-    --candi-on-info: oklch(100% 0 0);
+    --candi-text: oklch(25% 0.02 250);
+    --candi-text-subtle: oklch(45% 0.015 250);
+    --candi-text-muted: oklch(60% 0.01 250);
+    --candi-border: oklch(88% 0.012 85);
+    --candi-border-strong: oklch(80% 0.015 85);
+    --candi-divider: oklch(85% 0.01 85);
     --candi-link: oklch(50% 0.08 230);
     --candi-disabled: oklch(75% 0.005 250);
     --candi-overlay: oklch(0% 0 0 / 0.5);
@@ -62,55 +48,67 @@
     --candi-terminal-magenta: oklch(60% 0.15 0);
     --candi-terminal-cyan: oklch(65% 0.1 200);
     --candi-terminal-white: oklch(92% 0.01 85);
-
-    /* Terminal Palette */
-    --candi-terminal-black: oklch(25% 0.01 250);
-    --candi-terminal-red: var(--candi-error);
-    --candi-terminal-green: var(--candi-success);
-    --candi-terminal-yellow: var(--candi-warning);
-    --candi-terminal-blue: var(--candi-accent);
-    --candi-terminal-magenta: var(--candi-syntax-keyword);
-    --candi-terminal-cyan: var(--candi-syntax-var);
-    --candi-terminal-white: var(--candi-text);
+    --candi-accent: oklch(52% 0.14 275);
+    --candi-accent-subtle: oklch(85% 0.112 275);
+    --candi-accent-soft: oklch(62% 0.126 275);
+    --candi-accent-strong: oklch(42% 0.154 275);
+    --candi-accent-outline: oklch(37% 0.126 275);
+    --candi-on-accent: oklch(100% 0 0);
+    --candi-secondary: oklch(60% 0.10 15);
+    --candi-secondary-subtle: oklch(93% 0.08 15);
+    --candi-secondary-soft: oklch(70% 0.09 15);
+    --candi-secondary-strong: oklch(50% 0.11 15);
+    --candi-secondary-outline: oklch(45% 0.09 15);
+    --candi-on-secondary: oklch(0% 0 0);
+    --candi-success: oklch(50% 0.08 145);
+    --candi-success-subtle: oklch(83% 0.064 145);
+    --candi-success-soft: oklch(60% 0.072 145);
+    --candi-success-strong: oklch(40% 0.088 145);
+    --candi-success-outline: oklch(35% 0.072 145);
+    --candi-on-success: oklch(100% 0 0);
+    --candi-warning: oklch(60% 0.10 75);
+    --candi-warning-subtle: oklch(93% 0.08 75);
+    --candi-warning-soft: oklch(70% 0.09 75);
+    --candi-warning-strong: oklch(50% 0.11 75);
+    --candi-warning-outline: oklch(45% 0.09 75);
+    --candi-on-warning: oklch(0% 0 0);
+    --candi-error: oklch(50% 0.10 25);
+    --candi-error-subtle: oklch(83% 0.08 25);
+    --candi-error-soft: oklch(60% 0.09 25);
+    --candi-error-strong: oklch(40% 0.11 25);
+    --candi-error-outline: oklch(35% 0.09 25);
+    --candi-on-error: oklch(100% 0 0);
+    --candi-info: oklch(50% 0.08 225);
+    --candi-info-subtle: oklch(83% 0.064 225);
+    --candi-info-soft: oklch(60% 0.072 225);
+    --candi-info-strong: oklch(40% 0.088 225);
+    --candi-info-outline: oklch(35% 0.072 225);
+    --candi-on-info: oklch(100% 0 0);
     /* @tokens-end-light */
 }
 
 .dark {
   /* @tokens-start-dark */
-    --candi-bg: oklch(18% 0.015 250);
-    --candi-surface: oklch(22% 0.012 250);
-    --candi-elevated: oklch(25% 0.015 250);
+    --candi-bg: oklch(18% 0.015 85);
+    --candi-surface: oklch(22% 0.012 85);
+    --candi-elevated: oklch(25% 0.015 85);
     --candi-text: oklch(92% 0.01 85);
     --candi-text-subtle: oklch(72% 0.008 85);
     --candi-text-muted: oklch(58% 0.006 85);
-    --candi-border: oklch(30% 0.01 250);
-    --candi-border-strong: oklch(40% 0.012 250);
-    --candi-divider: oklch(28% 0.008 250);
-    --candi-accent: oklch(62% 0.08 230);
-    --candi-accent-subtle: oklch(35% 0.04 230);
-    --candi-on-accent: oklch(15% 0.01 230);
-    --candi-secondary: oklch(65% 0.12 55);
-    --candi-secondary-subtle: oklch(30% 0.05 55);
-    --candi-on-secondary: oklch(15% 0.02 55);
-    --candi-success: oklch(60% 0.1 145);
-    --candi-on-success: oklch(15% 0.02 145);
-    --candi-warning: oklch(72% 0.13 70);
-    --candi-on-warning: oklch(15% 0.02 70);
-    --candi-error: oklch(65% 0.12 25);
-    --candi-on-error: oklch(15% 0.02 25);
-    --candi-info: oklch(65% 0.1 240);
-    --candi-on-info: oklch(15% 0.02 240);
-    --candi-link: oklch(60% 0.08 230);
-    --candi-disabled: oklch(45% 0.005 250);
+    --candi-border: oklch(30% 0.01 85);
+    --candi-border-strong: oklch(40% 0.012 85);
+    --candi-divider: oklch(28% 0.008 85);
+    --candi-link: oklch(65% 0.08 85);
+    --candi-disabled: oklch(45% 0.005 85);
     --candi-overlay: oklch(0% 0 0 / 0.7);
     --candi-scrim: oklch(0% 0 0 / 0.6);
     --candi-inverse-surface: oklch(92% 0.008 85);
-    --candi-inverse-text: oklch(25% 0.015 250);
+    --candi-inverse-text: oklch(25% 0.015 275);
     --candi-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
     --candi-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
     --candi-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45);
     --candi-shadow-color: oklch(0% 0 0 / 0.4);
-    --candi-focus-ring: oklch(62% 0.08 230 / 0.5);
+    --candi-focus-ring: oklch(62% 0.08 275 / 0.5);
     --candi-syntax-keyword: oklch(70% 0.15 0);
     --candi-syntax-type: oklch(75% 0.12 280);
     --candi-syntax-var: oklch(75% 0.1 200);
@@ -119,24 +117,50 @@
     --candi-syntax-string: oklch(70% 0.12 140);
     --candi-hover: oklch(100% 0 0 / 0.1);
     --candi-active: oklch(100% 0 0 / 0.2);
-    --candi-terminal-black: oklch(15% 0.01 250);
-    --candi-terminal-red: oklch(65% 0.12 25);
-    --candi-terminal-green: oklch(60% 0.1 145);
-    --candi-terminal-yellow: oklch(72% 0.13 70);
-    --candi-terminal-blue: oklch(62% 0.08 230);
-    --candi-terminal-magenta: oklch(70% 0.15 0);
-    --candi-terminal-cyan: oklch(75% 0.1 200);
+    --candi-terminal-black: oklch(15% 0.01 275);
+    --candi-terminal-red: oklch(65% 0.05 25);
+    --candi-terminal-green: oklch(65% 0.04 145);
+    --candi-terminal-yellow: oklch(75% 0.06 75);
+    --candi-terminal-blue: oklch(65% 0.13 275);
+    --candi-terminal-magenta: oklch(70% 0.10 15);
+    --candi-terminal-cyan: oklch(70% 0.04 225);
     --candi-terminal-white: oklch(92% 0.01 85);
-
-    /* Terminal Palette */
-    --candi-terminal-black: oklch(15% 0.01 250);
-    --candi-terminal-red: var(--candi-error);
-    --candi-terminal-green: var(--candi-success);
-    --candi-terminal-yellow: var(--candi-warning);
-    --candi-terminal-blue: var(--candi-accent);
-    --candi-terminal-magenta: var(--candi-syntax-keyword);
-    --candi-terminal-cyan: var(--candi-syntax-var);
-    --candi-terminal-white: var(--candi-text);
+    --candi-accent: oklch(65% 0.13 275);
+    --candi-accent-subtle: oklch(38% 0.104 275);
+    --candi-accent-soft: oklch(75% 0.117 275);
+    --candi-accent-strong: oklch(55% 0.143 275);
+    --candi-accent-outline: oklch(50% 0.117 275);
+    --candi-on-accent: oklch(0% 0 0);
+    --candi-secondary: oklch(70% 0.10 15);
+    --candi-secondary-subtle: oklch(43% 0.08 15);
+    --candi-secondary-soft: oklch(80% 0.09 15);
+    --candi-secondary-strong: oklch(60% 0.11 15);
+    --candi-secondary-outline: oklch(55% 0.09 15);
+    --candi-on-secondary: oklch(0% 0 0);
+    --candi-success: oklch(75% 0.08 145);
+    --candi-success-subtle: oklch(48% 0.064 145);
+    --candi-success-soft: oklch(85% 0.072 145);
+    --candi-success-strong: oklch(65% 0.088 145);
+    --candi-success-outline: oklch(60% 0.072 145);
+    --candi-on-success: oklch(0% 0 0);
+    --candi-warning: oklch(80% 0.10 75);
+    --candi-warning-subtle: oklch(53% 0.08 75);
+    --candi-warning-soft: oklch(90% 0.09 75);
+    --candi-warning-strong: oklch(70% 0.11 75);
+    --candi-warning-outline: oklch(65% 0.09 75);
+    --candi-on-warning: oklch(0% 0 0);
+    --candi-error: oklch(75% 0.10 25);
+    --candi-error-subtle: oklch(48% 0.08 25);
+    --candi-error-soft: oklch(85% 0.09 25);
+    --candi-error-strong: oklch(65% 0.11 25);
+    --candi-error-outline: oklch(60% 0.09 25);
+    --candi-on-error: oklch(0% 0 0);
+    --candi-info: oklch(75% 0.08 225);
+    --candi-info-subtle: oklch(48% 0.064 225);
+    --candi-info-soft: oklch(85% 0.072 225);
+    --candi-info-strong: oklch(65% 0.088 225);
+    --candi-info-outline: oklch(60% 0.072 225);
+    --candi-on-info: oklch(0% 0 0);
     /* @tokens-end-dark */
 }