@diskette/palette 0.9.0 → 0.9.2

package/README.md

@@ -132,18 +132,18 @@ css.scale(scheme: 'light' | 'lightAlpha' | 'dark' | 'darkAlpha', config: ColorCo
 :root,
 .light,
 .light-theme {
-  amber1: #fefdfb;
-  amber2: #fefbe9;
-  amber3: #fff7c2;
-  amber4: #ffee9c;
-  amber5: #fbe577;
-  amber6: #f3d673;
-  amber7: #e9c162;
-  amber8: #e2a336;
-  amber9: #ffc53d;
-  amber10: #ffba18;
-  amber11: #ab6400;
-  amber12: #4f3422;
+  --amber-1: #fefdfb;
+  --amber-2: #fefbe9;
+  --amber-3: #fff7c2;
+  --amber-4: #ffee9c;
+  --amber-5: #fbe577;
+  --amber-6: #f3d673;
+  --amber-7: #e9c162;
+  --amber-8: #e2a336;
+  --amber-9: #ffc53d;
+  --amber-10: #ffba18;
+  --amber-11: #ab6400;
+  --amber-12: #4f3422;
 }
 
 @supports (color: color(display-p3 1 1 1)) {
@@ -151,18 +151,18 @@ css.scale(scheme: 'light' | 'lightAlpha' | 'dark' | 'darkAlpha', config: ColorCo
     :root,
     .light,
     .light-theme {
-      amber1: color(display-p3 0.995 0.992 0.985);
-      amber2: color(display-p3 0.994 0.986 0.921);
-      amber3: color(display-p3 0.994 0.969 0.782);
-      amber4: color(display-p3 0.989 0.937 0.65);
-      amber5: color(display-p3 0.97 0.902 0.527);
-      amber6: color(display-p3 0.936 0.844 0.506);
-      amber7: color(display-p3 0.89 0.762 0.443);
-      amber8: color(display-p3 0.85 0.65 0.3);
-      amber9: color(display-p3 1 0.77 0.26);
-      amber10: color(display-p3 0.959 0.741 0.274);
-      amber11: color(display-p3 0.64 0.4 0);
-      amber12: color(display-p3 0.294 0.208 0.145);
+      --amber-1: color(display-p3 0.995 0.992 0.985);
+      --amber-2: color(display-p3 0.994 0.986 0.921);
+      --amber-3: color(display-p3 0.994 0.969 0.782);
+      --amber-4: color(display-p3 0.989 0.937 0.65);
+      --amber-5: color(display-p3 0.97 0.902 0.527);
+      --amber-6: color(display-p3 0.936 0.844 0.506);
+      --amber-7: color(display-p3 0.89 0.762 0.443);
+      --amber-8: color(display-p3 0.85 0.65 0.3);
+      --amber-9: color(display-p3 1 0.77 0.26);
+      --amber-10: color(display-p3 0.959 0.741 0.274);
+      --amber-11: color(display-p3 0.64 0.4 0);
+      --amber-12: color(display-p3 0.294 0.208 0.145);
     }
   }
 }
@@ -224,6 +224,182 @@ css.semantic(name: string, config: ColorConfig): string
 
 </details>
 
+## Examples
+
+### Generate a Complete CSS File
+
+```ts
+// scripts/generate-css.ts
+import { writeFileSync } from 'node:fs'
+import { css, colors } from '@diskette/palette'
+import { blackAlpha, whiteAlpha } from '@diskette/palette/colors'
+
+let output = ''
+
+// Generate scales for all colors
+for (const color of colors) {
+  output += css.scale('light', color)
+  output += css.scale('lightAlpha', color)
+  output += css.scale('dark', color)
+  output += css.scale('darkAlpha', color)
+}
+
+// Generate alpha colors
+output += css.alpha(blackAlpha)
+output += css.alpha(whiteAlpha)
+
+writeFileSync('dist/colors.css', output)
+```
+
+### Generate CSS for Selected Colors
+
+```ts
+// scripts/generate-theme.ts
+import { writeFileSync } from 'node:fs'
+import { css } from '@diskette/palette'
+import blue from '@diskette/palette/colors/blue'
+import gray from '@diskette/palette/colors/gray'
+
+const output = [
+  // Base scales
+  css.scale('light', blue),
+  css.scale('dark', blue),
+  css.scale('light', gray),
+  css.scale('dark', gray),
+
+  // Semantic tokens
+  css.semantic('blue', blue),
+  css.semantic('gray', gray),
+].join('\n')
+
+writeFileSync('src/styles/theme.css', output)
+```
+
+### Generate CSS with Custom Build Script
+
+```ts
+// build-colors.ts
+import { writeFileSync, mkdirSync } from 'node:fs'
+import { css, colors } from '@diskette/palette'
+
+mkdirSync('dist', { recursive: true })
+
+// Generate individual files per color
+for (const color of colors) {
+  const name = Object.keys(color.srgb.light)[0].replace(/\d+$/, '')
+
+  const content = [
+    css.scale('light', color),
+    css.scale('dark', color),
+    css.semantic(name, color),
+  ].join('\n')
+
+  writeFileSync(`dist/${name}.css`, content)
+}
+
+// Generate combined file
+let combined = ''
+for (const color of colors) {
+  const name = Object.keys(color.srgb.light)[0].replace(/\d+$/, '')
+  combined += css.scale('light', color)
+  combined += css.scale('dark', color)
+  combined += css.semantic(name, color)
+}
+writeFileSync('dist/all-colors.css', combined)
+```
+
+### Use with vanilla-extract
+
+```ts
+// src/styles/colors.css.ts
+import { createGlobalTheme } from '@vanilla-extract/css'
+import blue from '@diskette/palette/colors/blue'
+import gray from '@diskette/palette/colors/gray'
+
+// Create CSS variables from the palette
+createGlobalTheme(':root', {
+  colors: {
+    blue1: blue.srgb.light.blue1,
+    blue2: blue.srgb.light.blue2,
+    blue3: blue.srgb.light.blue3,
+    // ... etc
+    blue9: blue.srgb.light.blue9,
+    blue10: blue.srgb.light.blue10,
+    blue11: blue.srgb.light.blue11,
+    blue12: blue.srgb.light.blue12,
+    gray1: gray.srgb.light.gray1,
+    // ... etc
+  },
+})
+
+// For dark mode
+createGlobalTheme('.dark', {
+  colors: {
+    blue1: blue.srgb.dark.blue1,
+    blue2: blue.srgb.dark.blue2,
+    // ... etc
+  },
+})
+```
+
+### Generate Semantic Tokens Only
+
+```ts
+// scripts/semantic-tokens.ts
+import { writeFileSync } from 'node:fs'
+import { css, colors } from '@diskette/palette'
+
+let output = ''
+
+for (const color of colors) {
+  // Extract color name from first key (e.g., "blue1" -> "blue")
+  const name = Object.keys(color.srgb.light)[0].replace(/\d+$/, '')
+  output += css.semantic(name, color)
+}
+
+writeFileSync('dist/semantic.css', output)
+```
+
+### Access Colors Directly in JavaScript
+
+```ts
+import blue from '@diskette/palette/colors/blue'
+
+// Use in CSS-in-JS libraries
+const styles = {
+  button: {
+    backgroundColor: blue.srgb.light.blue9,
+    color: blue.contrast,
+    '&:hover': {
+      backgroundColor: blue.srgb.light.blue10,
+    },
+  },
+}
+
+// Use P3 colors for wider gamut displays
+const p3Styles = {
+  button: {
+    backgroundColor: blue.p3.light.blue9,
+  },
+}
+
+// Access surface colors for overlays
+const overlay = {
+  backgroundColor: blue.surface.srgb.light, // '#f1f9ffcc'
+}
+```
+
+### NPM Script Integration
+
+```json
+{
+  "scripts": {
+    "build:css": "tsx scripts/generate-css.ts",
+    "build": "pnpm build:css && vite build"
+  }
+}
+```
+
 ## Credits
 
 Color values are derived from [Radix Colors](https://www.radix-ui.com/colors) by [WorkOS](https://workos.com/).

package/dist/lib.js

@@ -1,5 +1,7 @@
 const lightSelector = `:root, .light, .light-theme`;
 const darkSelector = `.dark, .dark-theme`;
+/** Convert color key to CSS variable name (e.g., "blue1" → "--blue-1", "blueA1" → "--blue-a1") */
+const toVarName = (key) => '--' + key.replace(/A?(\d)/, (_, num) => (key.includes('A') ? `-a${num}` : `-${num}`));
 export const css = {
     scale(scheme, config) {
         const isLight = scheme === 'light' || scheme === 'lightAlpha';
@@ -14,10 +16,10 @@ export const css = {
             return isAlpha ? hasAlpha : !hasAlpha;
         });
         const baseVars = filterEntries(srgbScale)
-            .map(([key, value]) => `  ${key}: ${value};`)
+            .map(([key, value]) => `  ${toVarName(key)}: ${value};`)
             .join('\n');
         const p3Vars = filterEntries(p3Scale)
-            .map(([key, value]) => `      ${key}: ${value};`)
+            .map(([key, value]) => `      ${toVarName(key)}: ${value};`)
             .join('\n');
         return `${selector} {
 ${baseVars}
@@ -34,10 +36,10 @@ ${p3Vars}
     },
     alpha(config) {
         const baseVars = Object.entries(config.srgb)
-            .map(([key, value]) => `  ${key}: ${value};`)
+            .map(([key, value]) => `  ${toVarName(key)}: ${value};`)
             .join('\n');
         const p3Vars = Object.entries(config.p3)
-            .map(([key, value]) => `      ${key}: ${value};`)
+            .map(([key, value]) => `      ${toVarName(key)}: ${value};`)
             .join('\n');
         return `:root {
 ${baseVars}
@@ -53,7 +55,7 @@ ${p3Vars}
 `;
     },
     semantic(name, config) {
-        const varRef = (key) => `var(--${key.replace(/(\d+)$/, '-$1')})`;
+        const varRef = (key) => `var(${toVarName(key)})`;
         return `:root {
   --${name}-contrast: ${config.contrast};
 }

package/package.json

@@ -1,11 +1,20 @@
 {
   "name": "@diskette/palette",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "exports": {
-    ".": "./dist/colors.js",
-    "./colors": "./dist/colors/index.js",
-    "./colors/*": "./dist/colors/*.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./colors": {
+      "types": "./dist/colors/index.d.ts",
+      "default": "./dist/colors/index.js"
+    },
+    "./colors/*": {
+      "types": "./dist/colors/*.d.ts",
+      "default": "./dist/colors/*.js"
+    }
   },
   "files": [
     "dist"