@wtasnorg/candi 0.0.32 → 0.0.36

package/README.md

@@ -174,6 +174,20 @@ Tailwind v4 (Recommended):
 @import "@wtasnorg/candi/v4";
 ```
 
+The v4 theme uses the `--color-candi-` prefix for CSS variables (e.g., `--color-candi-bg`), which generates utility classes like `bg-candi-bg`, `text-candi-text`, etc.
+
+Quick start example:
+
+```css
+@import "tailwindcss";
+@import "@wtasnorg/candi/v4";
+
+body {
+  background-color: var(--color-candi-bg);
+  color: var(--color-candi-text);
+}
+```
+
 Tailwind v3:
 
 ```js
@@ -204,17 +218,17 @@ module.exports = {
 
 | Token | Light | Dark | Usage |
 | :--- | :--- | :--- | :--- |
-| `bg` | Warm white | Warm dark (Hygge) | Page background |
-| `surface` | Soft cream | Warm dark surface | Cards, sections |
-| `elevated` | Pure white | Warm elevated dark | Modals, popups |
+| `bg` | Bright white | Warm dark gray | Page background |
+| `surface` | Warm off-white | Warm dark surface | Cards, sections |
+| `elevated` | Pure near-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 |
-| `accent` | Steel blue | Lighter steel | Primary actions |
-| `secondary` | Terracotta | Lighter terracotta | Secondary actions |
-| `success` | Forest green | Lighter green | Success states |
-| `warning` | Amber | Lighter amber | Warning states |
-| `error` | Coral red | Lighter coral | Error states |
+| `text-subtle` | Medium charcoal | Light gray | Secondary text |
+| `text-muted` | Warm gray | Muted warm gray | Tertiary text |
+| `accent` | Balanced steel blue | Lighter steel | Primary actions |
+| `secondary` | Balanced terracotta | Lighter terracotta | Secondary actions |
+| `success` | Balanced forest | Lighter forest | Success states |
+| `warning` | Balanced amber | Lighter amber | Warning states |
+| `error` | Balanced brick | Lighter brick | Error states |
 
 ### Primitive Colors
 

package/dist/base.css

@@ -12,26 +12,26 @@
 
 :root {
   /* @tokens-start-light */
-    --candi-bg: oklch(97.8% 0.005 80);
-    --candi-surface: oklch(95.5% 0.01 80);
-    --candi-elevated: oklch(100% 0 0);
-    --candi-text: oklch(28% 0.015 80);
-    --candi-text-subtle: oklch(50% 0.01 80);
-    --candi-text-muted: oklch(55% 0.01 80);
-    --candi-border: oklch(84% 0.01 80);
-    --candi-border-strong: oklch(75% 0.01 80);
-    --candi-divider: oklch(88% 0.01 80);
-    --candi-link: oklch(50% 0.08 230);
-    --candi-disabled: oklch(75% 0.005 250);
+    --candi-bg: oklch(97.5% 0.005 80);
+    --candi-surface: oklch(95% 0.008 80);
+    --candi-elevated: oklch(99.5% 0.003 80);
+    --candi-text: oklch(15% 0.01 80);
+    --candi-text-subtle: oklch(40% 0.008 80);
+    --candi-text-muted: oklch(52% 0.006 80);
+    --candi-border: oklch(84% 0.005 80);
+    --candi-border-strong: oklch(77% 0.006 80);
+    --candi-divider: oklch(90% 0.004 80);
+    --candi-link: oklch(48% 0.14 240);
+    --candi-disabled: oklch(82% 0.004 80);
     --candi-overlay: oklch(0% 0 0 / 0.5);
     --candi-scrim: oklch(0% 0 0 / 0.32);
-    --candi-inverse-surface: oklch(25% 0.015 250);
-    --candi-inverse-text: oklch(92% 0.01 250);
+    --candi-inverse-surface: oklch(25% 0.005 80);
+    --candi-inverse-text: oklch(92% 0.005 80);
     --candi-shadow: 0 2px 8px rgba(45, 50, 57, 0.06);
     --candi-shadow-md: 0 4px 20px rgba(45, 50, 57, 0.1);
     --candi-shadow-lg: 0 8px 40px rgba(45, 50, 57, 0.15);
-    --candi-shadow-color: oklch(25% 0.01 250 / 0.15);
-    --candi-focus-ring: oklch(52% 0.06 230 / 0.4);
+    --candi-shadow-color: oklch(25% 0.005 80 / 0.15);
+    --candi-focus-ring: oklch(52% 0.06 240 / 0.4);
     --candi-syntax-keyword: oklch(60% 0.15 0);
     --candi-syntax-type: oklch(65% 0.12 280);
     --candi-syntax-var: oklch(65% 0.1 200);
@@ -40,7 +40,7 @@
     --candi-syntax-string: oklch(60% 0.12 140);
     --candi-hover: oklch(0% 0 0 / 0.05);
     --candi-active: oklch(0% 0 0 / 0.1);
-    --candi-terminal-black: oklch(25% 0.01 250);
+    --candi-terminal-black: oklch(25% 0.005 80);
     --candi-terminal-red: oklch(58% 0.12 25);
     --candi-terminal-green: oklch(52% 0.08 145);
     --candi-terminal-yellow: oklch(68% 0.13 70);
@@ -51,12 +51,16 @@
     --candi-red: oklch(55% 0.14 25);
     --candi-red-subtle: oklch(88% 0.11 25);
     --candi-red-soft: oklch(65% 0.13 25);
+    --candi-red-warm: oklch(70% 0.12 25);
+    --candi-red-hot: oklch(50% 0.16 25);
     --candi-red-strong: oklch(45% 0.15 25);
     --candi-red-outline: oklch(40% 0.13 25);
     --candi-on-red: oklch(100% 0 0);
     --candi-blue: oklch(50% 0.12 250);
     --candi-blue-subtle: oklch(83% 0.10 250);
     --candi-blue-soft: oklch(60% 0.11 250);
+    --candi-blue-warm: oklch(65% 0.10 250);
+    --candi-blue-hot: oklch(45% 0.14 250);
     --candi-blue-strong: oklch(40% 0.13 250);
     --candi-blue-outline: oklch(35% 0.11 250);
     --candi-on-blue: oklch(100% 0 0);
@@ -108,67 +112,79 @@
     --candi-silver-strong: oklch(65% 0.012 250);
     --candi-silver-outline: oklch(60% 0.009 250);
     --candi-on-silver: oklch(0% 0 0);
-    --candi-accent: oklch(52% 0.08 250);
-    --candi-accent-subtle: oklch(85% 0.048 250);
-    --candi-accent-soft: oklch(62% 0.064 250);
-    --candi-accent-strong: oklch(42% 0.088 250);
-    --candi-accent-outline: oklch(37% 0.056 250);
+    --candi-accent: oklch(50% 0.13 245);
+    --candi-accent-subtle: oklch(83% 0.078 245);
+    --candi-accent-soft: oklch(60% 0.104 245);
+    --candi-accent-warm: oklch(65% 0.1105 245);
+    --candi-accent-hot: oklch(45% 0.1495 245);
+    --candi-accent-strong: oklch(40% 0.143 245);
+    --candi-accent-outline: oklch(35% 0.091 245);
     --candi-on-accent: oklch(100% 0 0);
-    --candi-secondary: oklch(60% 0.07 15);
-    --candi-secondary-subtle: oklch(93% 0.042 15);
-    --candi-secondary-soft: oklch(70% 0.056 15);
-    --candi-secondary-strong: oklch(50% 0.077 15);
-    --candi-secondary-outline: oklch(45% 0.049 15);
-    --candi-on-secondary: oklch(0% 0 0);
-    --candi-success: oklch(50% 0.06 145);
-    --candi-success-subtle: oklch(83% 0.036 145);
-    --candi-success-soft: oklch(60% 0.048 145);
-    --candi-success-strong: oklch(40% 0.066 145);
-    --candi-success-outline: oklch(35% 0.042 145);
+    --candi-secondary: oklch(55% 0.12 20);
+    --candi-secondary-subtle: oklch(88% 0.072 20);
+    --candi-secondary-soft: oklch(65% 0.096 20);
+    --candi-secondary-warm: oklch(70% 0.102 20);
+    --candi-secondary-hot: oklch(50% 0.138 20);
+    --candi-secondary-strong: oklch(45% 0.132 20);
+    --candi-secondary-outline: oklch(40% 0.084 20);
+    --candi-on-secondary: oklch(100% 0 0);
+    --candi-success: oklch(50% 0.10 150);
+    --candi-success-subtle: oklch(83% 0.06 150);
+    --candi-success-soft: oklch(60% 0.08 150);
+    --candi-success-warm: oklch(65% 0.085 150);
+    --candi-success-hot: oklch(45% 0.115 150);
+    --candi-success-strong: oklch(40% 0.11 150);
+    --candi-success-outline: oklch(35% 0.07 150);
     --candi-on-success: oklch(100% 0 0);
-    --candi-warning: oklch(60% 0.07 75);
-    --candi-warning-subtle: oklch(93% 0.042 75);
-    --candi-warning-soft: oklch(70% 0.056 75);
-    --candi-warning-strong: oklch(50% 0.077 75);
-    --candi-warning-outline: oklch(45% 0.049 75);
+    --candi-warning: oklch(60% 0.13 80);
+    --candi-warning-subtle: oklch(93% 0.078 80);
+    --candi-warning-soft: oklch(70% 0.104 80);
+    --candi-warning-warm: oklch(75% 0.1105 80);
+    --candi-warning-hot: oklch(55% 0.1495 80);
+    --candi-warning-strong: oklch(50% 0.143 80);
+    --candi-warning-outline: oklch(45% 0.091 80);
     --candi-on-warning: oklch(0% 0 0);
-    --candi-error: oklch(50% 0.08 25);
-    --candi-error-subtle: oklch(83% 0.048 25);
-    --candi-error-soft: oklch(60% 0.064 25);
-    --candi-error-strong: oklch(40% 0.088 25);
-    --candi-error-outline: oklch(35% 0.056 25);
+    --candi-error: oklch(50% 0.14 25);
+    --candi-error-subtle: oklch(83% 0.084 25);
+    --candi-error-soft: oklch(60% 0.112 25);
+    --candi-error-warm: oklch(65% 0.119 25);
+    --candi-error-hot: oklch(45% 0.161 25);
+    --candi-error-strong: oklch(40% 0.154 25);
+    --candi-error-outline: oklch(35% 0.098 25);
     --candi-on-error: oklch(100% 0 0);
-    --candi-info: oklch(50% 0.06 225);
-    --candi-info-subtle: oklch(83% 0.036 225);
-    --candi-info-soft: oklch(60% 0.048 225);
-    --candi-info-strong: oklch(40% 0.066 225);
-    --candi-info-outline: oklch(35% 0.042 225);
+    --candi-info: oklch(50% 0.10 225);
+    --candi-info-subtle: oklch(83% 0.06 225);
+    --candi-info-soft: oklch(60% 0.08 225);
+    --candi-info-warm: oklch(65% 0.085 225);
+    --candi-info-hot: oklch(45% 0.115 225);
+    --candi-info-strong: oklch(40% 0.11 225);
+    --candi-info-outline: oklch(35% 0.07 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-text: oklch(92% 0.01 250);
-    --candi-text-subtle: oklch(75% 0.01 250);
-    --candi-text-muted: oklch(62% 0.008 250);
-    --candi-border: oklch(35% 0.01 250);
-    --candi-border-strong: oklch(45% 0.012 250);
-    --candi-divider: oklch(32% 0.008 250);
-    --candi-link: oklch(65% 0.08 250);
-    --candi-disabled: oklch(45% 0.005 250);
+    --candi-bg: oklch(20% 0.005 80);
+    --candi-surface: oklch(26% 0.005 80);
+    --candi-elevated: oklch(32% 0.006 80);
+    --candi-text: oklch(90% 0.005 80);
+    --candi-text-subtle: oklch(70% 0.005 80);
+    --candi-text-muted: oklch(60% 0.004 80);
+    --candi-border: oklch(40% 0.005 80);
+    --candi-border-strong: oklch(45% 0.006 80);
+    --candi-divider: oklch(35% 0.004 80);
+    --candi-link: oklch(65% 0.14 240);
+    --candi-disabled: oklch(45% 0.004 80);
     --candi-overlay: oklch(0% 0 0 / 0.7);
     --candi-scrim: oklch(0% 0 0 / 0.6);
-    --candi-inverse-surface: oklch(92% 0.01 250);
-    --candi-inverse-text: oklch(25% 0.015 250);
+    --candi-inverse-surface: oklch(92% 0.005 80);
+    --candi-inverse-text: oklch(20% 0.005 80);
     --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 275 / 0.5);
+    --candi-focus-ring: oklch(62% 0.08 80 / 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);
@@ -177,23 +193,27 @@
     --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 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);
+    --candi-terminal-black: oklch(15% 0.005 80);
+    --candi-terminal-red: oklch(68% 0.11 25);
+    --candi-terminal-green: oklch(68% 0.09 145);
+    --candi-terminal-yellow: oklch(78% 0.11 75);
+    --candi-terminal-blue: oklch(65% 0.13 245);
+    --candi-terminal-magenta: oklch(72% 0.12 330);
+    --candi-terminal-cyan: oklch(72% 0.09 200);
+    --candi-terminal-white: oklch(92% 0.005 80);
     --candi-red: oklch(70% 0.12 25);
     --candi-red-subtle: oklch(40% 0.10 25);
     --candi-red-soft: oklch(78% 0.11 25);
+    --candi-red-warm: oklch(55% 0.10 25);
+    --candi-red-hot: oklch(65% 0.14 25);
     --candi-red-strong: oklch(60% 0.13 25);
     --candi-red-outline: oklch(55% 0.11 25);
     --candi-on-red: oklch(0% 0 0);
     --candi-blue: oklch(70% 0.10 250);
     --candi-blue-subtle: oklch(38% 0.08 250);
     --candi-blue-soft: oklch(78% 0.09 250);
+    --candi-blue-warm: oklch(55% 0.08 250);
+    --candi-blue-hot: oklch(65% 0.12 250);
     --candi-blue-strong: oklch(60% 0.11 250);
     --candi-blue-outline: oklch(55% 0.09 250);
     --candi-on-blue: oklch(0% 0 0);
@@ -245,41 +265,53 @@
     --candi-silver-strong: oklch(50% 0.012 250);
     --candi-silver-outline: oklch(45% 0.009 250);
     --candi-on-silver: oklch(100% 0 0);
-    --candi-accent: oklch(65% 0.08 250);
-    --candi-accent-subtle: oklch(38% 0.048 250);
-    --candi-accent-soft: oklch(75% 0.064 250);
-    --candi-accent-strong: oklch(55% 0.088 250);
-    --candi-accent-outline: oklch(50% 0.056 250);
+    --candi-accent: oklch(72% 0.12 245);
+    --candi-accent-subtle: oklch(45% 0.072 245);
+    --candi-accent-soft: oklch(82% 0.096 245);
+    --candi-accent-warm: oklch(57% 0.102 245);
+    --candi-accent-hot: oklch(67% 0.138 245);
+    --candi-accent-strong: oklch(62% 0.132 245);
+    --candi-accent-outline: oklch(57% 0.084 245);
     --candi-on-accent: oklch(0% 0 0);
-    --candi-secondary: oklch(70% 0.07 15);
-    --candi-secondary-subtle: oklch(43% 0.042 15);
-    --candi-secondary-soft: oklch(80% 0.056 15);
-    --candi-secondary-strong: oklch(60% 0.077 15);
-    --candi-secondary-outline: oklch(55% 0.049 15);
+    --candi-secondary: oklch(75% 0.11 20);
+    --candi-secondary-subtle: oklch(48% 0.066 20);
+    --candi-secondary-soft: oklch(85% 0.088 20);
+    --candi-secondary-warm: oklch(60% 0.0935 20);
+    --candi-secondary-hot: oklch(70% 0.1265 20);
+    --candi-secondary-strong: oklch(65% 0.121 20);
+    --candi-secondary-outline: oklch(60% 0.077 20);
     --candi-on-secondary: oklch(0% 0 0);
-    --candi-success: oklch(75% 0.06 145);
-    --candi-success-subtle: oklch(48% 0.036 145);
-    --candi-success-soft: oklch(85% 0.048 145);
-    --candi-success-strong: oklch(65% 0.066 145);
-    --candi-success-outline: oklch(60% 0.042 145);
+    --candi-success: oklch(78% 0.10 150);
+    --candi-success-subtle: oklch(51% 0.06 150);
+    --candi-success-soft: oklch(88% 0.08 150);
+    --candi-success-warm: oklch(63% 0.085 150);
+    --candi-success-hot: oklch(73% 0.115 150);
+    --candi-success-strong: oklch(68% 0.11 150);
+    --candi-success-outline: oklch(63% 0.07 150);
     --candi-on-success: oklch(0% 0 0);
-    --candi-warning: oklch(80% 0.07 75);
-    --candi-warning-subtle: oklch(53% 0.042 75);
-    --candi-warning-soft: oklch(90% 0.056 75);
-    --candi-warning-strong: oklch(70% 0.077 75);
-    --candi-warning-outline: oklch(65% 0.049 75);
+    --candi-warning: oklch(82% 0.12 80);
+    --candi-warning-subtle: oklch(55% 0.072 80);
+    --candi-warning-soft: oklch(92% 0.096 80);
+    --candi-warning-warm: oklch(67% 0.102 80);
+    --candi-warning-hot: oklch(77% 0.138 80);
+    --candi-warning-strong: oklch(72% 0.132 80);
+    --candi-warning-outline: oklch(67% 0.084 80);
     --candi-on-warning: oklch(0% 0 0);
-    --candi-error: oklch(75% 0.08 25);
-    --candi-error-subtle: oklch(48% 0.048 25);
-    --candi-error-soft: oklch(85% 0.064 25);
-    --candi-error-strong: oklch(65% 0.088 25);
-    --candi-error-outline: oklch(60% 0.056 25);
+    --candi-error: oklch(78% 0.12 25);
+    --candi-error-subtle: oklch(51% 0.072 25);
+    --candi-error-soft: oklch(88% 0.096 25);
+    --candi-error-warm: oklch(63% 0.102 25);
+    --candi-error-hot: oklch(73% 0.138 25);
+    --candi-error-strong: oklch(68% 0.132 25);
+    --candi-error-outline: oklch(63% 0.084 25);
     --candi-on-error: oklch(0% 0 0);
-    --candi-info: oklch(75% 0.06 225);
-    --candi-info-subtle: oklch(48% 0.036 225);
-    --candi-info-soft: oklch(85% 0.048 225);
-    --candi-info-strong: oklch(65% 0.066 225);
-    --candi-info-outline: oklch(60% 0.042 225);
+    --candi-info: oklch(78% 0.10 225);
+    --candi-info-subtle: oklch(51% 0.06 225);
+    --candi-info-soft: oklch(88% 0.08 225);
+    --candi-info-warm: oklch(63% 0.085 225);
+    --candi-info-hot: oklch(73% 0.115 225);
+    --candi-info-strong: oklch(68% 0.11 225);
+    --candi-info-outline: oklch(63% 0.07 225);
     --candi-on-info: oklch(0% 0 0);
     /* @tokens-end-dark */
 }