@diskette/palette 0.7.0 → 0.9.0

package/README.md

@@ -0,0 +1,233 @@
+# @diskette/palette
+
+A color palette library based on [Radix Colors](https://www.radix-ui.com/colors) with support for both sRGB and Display P3 color spaces.
+
+## Installation
+
+```bash
+npm install @diskette/palette
+# or
+pnpm add @diskette/palette
+```
+
+## Usage
+
+### Importing Colors
+
+```ts
+// Import all colors
+import colors from '@diskette/palette'
+
+// Import specific colors
+import { blue, red, gray } from '@diskette/palette/colors'
+
+// Import a single color
+import blue from '@diskette/palette/colors/blue'
+```
+
+### Color Structure
+
+Each color provides values for both color spaces and light/dark themes:
+
+```ts
+import blue from '@diskette/palette/colors/blue'
+
+// sRGB values (hex)
+blue.srgb.light.blue9 // '#0090ff'
+blue.srgb.dark.blue9 // '#0090ff'
+
+// Display P3 values
+blue.p3.light.blue9 // 'color(display-p3 0.247 0.556 0.969)'
+blue.p3.dark.blue9 // 'color(display-p3 0.247 0.556 0.969)'
+
+// Alpha variants
+blue.srgb.light.blueA9 // '#0090ff' (with alpha)
+
+// Surface (translucent overlay)
+blue.surface.srgb.light // '#f1f9ffcc'
+blue.surface.p3.dark // 'color(display-p3 0.0706 0.1255 0.2196 / 0.5)'
+
+// Semantic values
+blue.contrast // 'white'
+blue.indicator // 'blue9'
+blue.track // 'blue9'
+```
+
+### Generating CSS
+
+Use the `css` utility to generate CSS custom properties:
+
+```ts
+import { css } from '@diskette/palette'
+import blue from '@diskette/palette/colors/blue'
+
+// Generate scale variables for light theme
+const blue = css.scale('light', blue)
+// Output: :root, .light, .light-theme { --blue-1: #fbfdff; ... }
+
+// Generate alpha variants
+css.scale('lightAlpha', blue)
+
+// Generate semantic tokens
+css.semantic('blue', blue)
+// Output: :root { --blue-contrast: white; } ...
+```
+
+### Alpha Colors
+
+For transparency overlays:
+
+```ts
+import { blackAlpha, whiteAlpha } from '@diskette/palette/colors'
+
+blackAlpha.srgb.blackA5 // 'rgba(0, 0, 0, 0.3)'
+whiteAlpha.p3.whiteA5 // 'color(display-p3 1 1 1 / 0.3)'
+```
+
+## Available Colors
+
+### Accent Colors
+
+`amber`, `blue`, `bronze`, `brown`, `crimson`, `cyan`, `gold`, `grass`, `gray`, `green`, `indigo`, `iris`, `jade`, `lime`, `mint`, `orange`, `pink`, `plum`, `purple`, `red`, `ruby`, `sky`, `teal`, `tomato`, `violet`, `yellow`
+
+### Gray Scales
+
+`gray`, `mauve`, `olive`, `sage`, `sand`, `slate`
+
+### Alpha Colors
+
+`blackAlpha`, `whiteAlpha`
+
+## Color Scale
+
+Each color provides a 12-step scale following Radix Colors conventions:
+
+| Step | Use Case                      |
+| ---- | ----------------------------- |
+| 1-2  | App backgrounds               |
+| 3-4  | Component backgrounds         |
+| 5    | Hovered component backgrounds |
+| 6    | Active/selected backgrounds   |
+| 7    | Borders and separators        |
+| 8    | Hovered borders, focus rings  |
+| 9    | Solid backgrounds             |
+| 10   | Hovered solid backgrounds     |
+| 11   | Low-contrast text             |
+| 12   | High-contrast text            |
+
+## API Reference
+
+### `css.scale(scheme, config)`
+
+Generates CSS custom properties for a color scale.
+
+```ts
+css.scale(scheme: 'light' | 'lightAlpha' | 'dark' | 'darkAlpha', config: ColorConfig): string
+```
+
+<details>
+<summary>Example output</summary>
+
+```css
+: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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :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);
+    }
+  }
+}
+```
+
+</details>
+
+Output includes `@supports` and `@media (color-gamut: p3)` blocks for Display P3 fallbacks.
+
+### `css.alpha(config)`
+
+Generates CSS custom properties for alpha color scales (blackAlpha, whiteAlpha).
+
+```ts
+css.alpha(config: AlphaConfig): string
+```
+
+### `css.semantic(name, config)`
+
+Generates semantic CSS custom properties for a color.
+
+```ts
+css.semantic(name: string, config: ColorConfig): string
+```
+
+<details>
+<summary>Example output</summary>
+
+```css
+:root {
+  --amber-contrast: #21201c;
+}
+
+:root,
+.light,
+.light-theme {
+  --amber-surface: #fefae4cc;
+  --amber-indicator: var(--amber-9);
+  --amber-track: var(--amber-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --amber-surface: color(display-p3 0.9922 0.9843 0.902 / 0.8);
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --amber-surface: #271f1380;
+  --amber-indicator: var(--amber-9);
+  --amber-track: var(--amber-9);
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --amber-surface: color(display-p3 0.1412 0.1176 0.0784 / 0.5);
+    }
+  }
+}
+```
+
+</details>
+
+## Credits
+
+Color values are derived from [Radix Colors](https://www.radix-ui.com/colors) by [WorkOS](https://workos.com/).
+
+## License
+
+MIT

package/dist/colors/amber.d.ts

@@ -0,0 +1,128 @@
+declare const _default: {
+    srgb: {
+        light: {
+            amber1: string;
+            amber2: string;
+            amber3: string;
+            amber4: string;
+            amber5: string;
+            amber6: string;
+            amber7: string;
+            amber8: string;
+            amber9: string;
+            amber10: string;
+            amber11: string;
+            amber12: string;
+            amberA1: string;
+            amberA2: string;
+            amberA3: string;
+            amberA4: string;
+            amberA5: string;
+            amberA6: string;
+            amberA7: string;
+            amberA8: string;
+            amberA9: string;
+            amberA10: string;
+            amberA11: string;
+            amberA12: string;
+            surface: string;
+        };
+        dark: {
+            amber1: string;
+            amber2: string;
+            amber3: string;
+            amber4: string;
+            amber5: string;
+            amber6: string;
+            amber7: string;
+            amber8: string;
+            amber9: string;
+            amber10: string;
+            amber11: string;
+            amber12: string;
+            amberA1: string;
+            amberA2: string;
+            amberA3: string;
+            amberA4: string;
+            amberA5: string;
+            amberA6: string;
+            amberA7: string;
+            amberA8: string;
+            amberA9: string;
+            amberA10: string;
+            amberA11: string;
+            amberA12: string;
+            surface: string;
+        };
+    };
+    p3: {
+        light: {
+            amber1: string;
+            amber2: string;
+            amber3: string;
+            amber4: string;
+            amber5: string;
+            amber6: string;
+            amber7: string;
+            amber8: string;
+            amber9: string;
+            amber10: string;
+            amber11: string;
+            amber12: string;
+            amberA1: string;
+            amberA2: string;
+            amberA3: string;
+            amberA4: string;
+            amberA5: string;
+            amberA6: string;
+            amberA7: string;
+            amberA8: string;
+            amberA9: string;
+            amberA10: string;
+            amberA11: string;
+            amberA12: string;
+            surface: string;
+        };
+        dark: {
+            amber1: string;
+            amber2: string;
+            amber3: string;
+            amber4: string;
+            amber5: string;
+            amber6: string;
+            amber7: string;
+            amber8: string;
+            amber9: string;
+            amber10: string;
+            amber11: string;
+            amber12: string;
+            amberA1: string;
+            amberA2: string;
+            amberA3: string;
+            amberA4: string;
+            amberA5: string;
+            amberA6: string;
+            amberA7: string;
+            amberA8: string;
+            amberA9: string;
+            amberA10: string;
+            amberA11: string;
+            amberA12: string;
+            surface: string;
+        };
+    };
+    contrast: string;
+    indicator: string;
+    track: string;
+    surface: {
+        srgb: {
+            light: string;
+            dark: string;
+        };
+        p3: {
+            light: string;
+            dark: string;
+        };
+    };
+};
+export default _default;

package/dist/colors/amber.js

@@ -0,0 +1,127 @@
+export default {
+    srgb: {
+        light: {
+            amber1: '#fefdfb',
+            amber2: '#fefbe9',
+            amber3: '#fff7c2',
+            amber4: '#ffee9c',
+            amber5: '#fbe577',
+            amber6: '#f3d673',
+            amber7: '#e9c162',
+            amber8: '#e2a336',
+            amber9: '#ffc53d',
+            amber10: '#ffba18',
+            amber11: '#ab6400',
+            amber12: '#4f3422',
+            amberA1: '#c0800004',
+            amberA2: '#f4d10016',
+            amberA3: '#ffde003d',
+            amberA4: '#ffd40063',
+            amberA5: '#f8cf0088',
+            amberA6: '#eab5008c',
+            amberA7: '#dc9b009d',
+            amberA8: '#da8a00c9',
+            amberA9: '#ffb300c2',
+            amberA10: '#ffb300e7',
+            amberA11: '#ab6400',
+            amberA12: '#341500dd',
+            surface: '#fefae4cc',
+        },
+        dark: {
+            amber1: '#16120c',
+            amber2: '#1d180f',
+            amber3: '#302008',
+            amber4: '#3f2700',
+            amber5: '#4d3000',
+            amber6: '#5c3d05',
+            amber7: '#714f19',
+            amber8: '#8f6424',
+            amber9: '#ffc53d',
+            amber10: '#ffd60a',
+            amber11: '#ffca16',
+            amber12: '#ffe7b3',
+            amberA1: '#e63c0006',
+            amberA2: '#fd9b000d',
+            amberA3: '#fa820022',
+            amberA4: '#fc820032',
+            amberA5: '#fd8b0041',
+            amberA6: '#fd9b0051',
+            amberA7: '#ffab2567',
+            amberA8: '#ffae3587',
+            amberA9: '#ffc53d',
+            amberA10: '#ffd60a',
+            amberA11: '#ffca16',
+            amberA12: '#ffe7b3',
+            surface: '#271f1380',
+        },
+    },
+    p3: {
+        light: {
+            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)',
+            amberA1: 'color(display-p3 0.757 0.514 0.024 / 0.016)',
+            amberA2: 'color(display-p3 0.902 0.804 0.008 / 0.079)',
+            amberA3: 'color(display-p3 0.965 0.859 0.004 / 0.22)',
+            amberA4: 'color(display-p3 0.969 0.82 0.004 / 0.35)',
+            amberA5: 'color(display-p3 0.933 0.796 0.004 / 0.475)',
+            amberA6: 'color(display-p3 0.875 0.682 0.004 / 0.495)',
+            amberA7: 'color(display-p3 0.804 0.573 0 / 0.557)',
+            amberA8: 'color(display-p3 0.788 0.502 0 / 0.699)',
+            amberA9: 'color(display-p3 1 0.686 0 / 0.742)',
+            amberA10: 'color(display-p3 0.945 0.643 0 / 0.726)',
+            amberA11: 'color(display-p3 0.64 0.4 0)',
+            amberA12: 'color(display-p3 0.294 0.208 0.145)',
+            surface: 'color(display-p3 0.9922 0.9843 0.902 / 0.8)',
+        },
+        dark: {
+            amber1: 'color(display-p3 0.082 0.07 0.05)',
+            amber2: 'color(display-p3 0.111 0.094 0.064)',
+            amber3: 'color(display-p3 0.178 0.128 0.049)',
+            amber4: 'color(display-p3 0.239 0.156 0)',
+            amber5: 'color(display-p3 0.29 0.193 0)',
+            amber6: 'color(display-p3 0.344 0.245 0.076)',
+            amber7: 'color(display-p3 0.422 0.314 0.141)',
+            amber8: 'color(display-p3 0.535 0.399 0.189)',
+            amber9: 'color(display-p3 1 0.77 0.26)',
+            amber10: 'color(display-p3 1 0.87 0.15)',
+            amber11: 'color(display-p3 1 0.8 0.29)',
+            amber12: 'color(display-p3 0.984 0.909 0.726)',
+            amberA1: 'color(display-p3 0.992 0.298 0 / 0.017)',
+            amberA2: 'color(display-p3 0.988 0.651 0 / 0.047)',
+            amberA3: 'color(display-p3 1 0.6 0 / 0.118)',
+            amberA4: 'color(display-p3 1 0.557 0 / 0.185)',
+            amberA5: 'color(display-p3 1 0.592 0 / 0.24)',
+            amberA6: 'color(display-p3 1 0.659 0.094 / 0.299)',
+            amberA7: 'color(display-p3 1 0.714 0.263 / 0.383)',
+            amberA8: 'color(display-p3 0.996 0.729 0.306 / 0.5)',
+            amberA9: 'color(display-p3 1 0.769 0.259)',
+            amberA10: 'color(display-p3 1 0.871 0.149)',
+            amberA11: 'color(display-p3 1 0.8 0.29)',
+            amberA12: 'color(display-p3 0.984 0.909 0.726)',
+            surface: 'color(display-p3 0.1412 0.1176 0.0784 / 0.5)',
+        },
+    },
+    contrast: '#21201c',
+    indicator: 'amber9',
+    track: 'amber9',
+    surface: {
+        srgb: {
+            light: '#fefae4cc',
+            dark: '#271f1380',
+        },
+        p3: {
+            light: 'color(display-p3 0.9922 0.9843 0.902 / 0.8)',
+            dark: 'color(display-p3 0.1412 0.1176 0.0784 / 0.5)',
+        },
+    },
+};

package/dist/colors/black-alpha.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    srgb: {
+        blackA1: string;
+        blackA2: string;
+        blackA3: string;
+        blackA4: string;
+        blackA5: string;
+        blackA6: string;
+        blackA7: string;
+        blackA8: string;
+        blackA9: string;
+        blackA10: string;
+        blackA11: string;
+        blackA12: string;
+    };
+    p3: {
+        blackA1: string;
+        blackA2: string;
+        blackA3: string;
+        blackA4: string;
+        blackA5: string;
+        blackA6: string;
+        blackA7: string;
+        blackA8: string;
+        blackA9: string;
+        blackA10: string;
+        blackA11: string;
+        blackA12: string;
+    };
+};
+export default _default;

package/dist/colors/black-alpha.js

@@ -0,0 +1,30 @@
+export default {
+    srgb: {
+        blackA1: 'rgba(0, 0, 0, 0.05)',
+        blackA2: 'rgba(0, 0, 0, 0.1)',
+        blackA3: 'rgba(0, 0, 0, 0.15)',
+        blackA4: 'rgba(0, 0, 0, 0.2)',
+        blackA5: 'rgba(0, 0, 0, 0.3)',
+        blackA6: 'rgba(0, 0, 0, 0.4)',
+        blackA7: 'rgba(0, 0, 0, 0.5)',
+        blackA8: 'rgba(0, 0, 0, 0.6)',
+        blackA9: 'rgba(0, 0, 0, 0.7)',
+        blackA10: 'rgba(0, 0, 0, 0.8)',
+        blackA11: 'rgba(0, 0, 0, 0.9)',
+        blackA12: 'rgba(0, 0, 0, 0.95)',
+    },
+    p3: {
+        blackA1: 'color(display-p3 0 0 0 / 0.05)',
+        blackA2: 'color(display-p3 0 0 0 / 0.1)',
+        blackA3: 'color(display-p3 0 0 0 / 0.15)',
+        blackA4: 'color(display-p3 0 0 0 / 0.2)',
+        blackA5: 'color(display-p3 0 0 0 / 0.3)',
+        blackA6: 'color(display-p3 0 0 0 / 0.4)',
+        blackA7: 'color(display-p3 0 0 0 / 0.5)',
+        blackA8: 'color(display-p3 0 0 0 / 0.6)',
+        blackA9: 'color(display-p3 0 0 0 / 0.7)',
+        blackA10: 'color(display-p3 0 0 0 / 0.8)',
+        blackA11: 'color(display-p3 0 0 0 / 0.9)',
+        blackA12: 'color(display-p3 0 0 0 / 0.95)',
+    },
+};

package/dist/colors/blue.d.ts

@@ -0,0 +1,128 @@
+declare const _default: {
+    srgb: {
+        light: {
+            blue1: string;
+            blue2: string;
+            blue3: string;
+            blue4: string;
+            blue5: string;
+            blue6: string;
+            blue7: string;
+            blue8: string;
+            blue9: string;
+            blue10: string;
+            blue11: string;
+            blue12: string;
+            blueA1: string;
+            blueA2: string;
+            blueA3: string;
+            blueA4: string;
+            blueA5: string;
+            blueA6: string;
+            blueA7: string;
+            blueA8: string;
+            blueA9: string;
+            blueA10: string;
+            blueA11: string;
+            blueA12: string;
+            surface: string;
+        };
+        dark: {
+            blue1: string;
+            blue2: string;
+            blue3: string;
+            blue4: string;
+            blue5: string;
+            blue6: string;
+            blue7: string;
+            blue8: string;
+            blue9: string;
+            blue10: string;
+            blue11: string;
+            blue12: string;
+            blueA1: string;
+            blueA2: string;
+            blueA3: string;
+            blueA4: string;
+            blueA5: string;
+            blueA6: string;
+            blueA7: string;
+            blueA8: string;
+            blueA9: string;
+            blueA10: string;
+            blueA11: string;
+            blueA12: string;
+            surface: string;
+        };
+    };
+    p3: {
+        light: {
+            blue1: string;
+            blue2: string;
+            blue3: string;
+            blue4: string;
+            blue5: string;
+            blue6: string;
+            blue7: string;
+            blue8: string;
+            blue9: string;
+            blue10: string;
+            blue11: string;
+            blue12: string;
+            blueA1: string;
+            blueA2: string;
+            blueA3: string;
+            blueA4: string;
+            blueA5: string;
+            blueA6: string;
+            blueA7: string;
+            blueA8: string;
+            blueA9: string;
+            blueA10: string;
+            blueA11: string;
+            blueA12: string;
+            surface: string;
+        };
+        dark: {
+            blue1: string;
+            blue2: string;
+            blue3: string;
+            blue4: string;
+            blue5: string;
+            blue6: string;
+            blue7: string;
+            blue8: string;
+            blue9: string;
+            blue10: string;
+            blue11: string;
+            blue12: string;
+            blueA1: string;
+            blueA2: string;
+            blueA3: string;
+            blueA4: string;
+            blueA5: string;
+            blueA6: string;
+            blueA7: string;
+            blueA8: string;
+            blueA9: string;
+            blueA10: string;
+            blueA11: string;
+            blueA12: string;
+            surface: string;
+        };
+    };
+    contrast: string;
+    indicator: string;
+    track: string;
+    surface: {
+        srgb: {
+            light: string;
+            dark: string;
+        };
+        p3: {
+            light: string;
+            dark: string;
+        };
+    };
+};
+export default _default;