@diskette/palette 0.9.0 → 0.9.1

package/README.md

@@ -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/package.json

@@ -1,11 +1,20 @@
 {
   "name": "@diskette/palette",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "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"