@diskette/palette 0.18.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/README.md +90 -70
  2. package/dist/cli/cli.d.ts +1 -1
  3. package/dist/cli/cli.js +59 -9
  4. package/dist/colors/amber.d.ts +21 -109
  5. package/dist/colors/amber.js +126 -109
  6. package/dist/colors/blue.d.ts +21 -109
  7. package/dist/colors/blue.js +126 -109
  8. package/dist/colors/bronze.d.ts +21 -109
  9. package/dist/colors/bronze.js +126 -109
  10. package/dist/colors/brown.d.ts +21 -109
  11. package/dist/colors/brown.js +126 -109
  12. package/dist/colors/crimson.d.ts +21 -109
  13. package/dist/colors/crimson.js +126 -109
  14. package/dist/colors/cyan.d.ts +21 -109
  15. package/dist/colors/cyan.js +126 -109
  16. package/dist/colors/gold.d.ts +21 -109
  17. package/dist/colors/gold.js +126 -109
  18. package/dist/colors/grass.d.ts +21 -109
  19. package/dist/colors/grass.js +126 -109
  20. package/dist/colors/gray.d.ts +21 -109
  21. package/dist/colors/gray.js +126 -109
  22. package/dist/colors/green.d.ts +21 -109
  23. package/dist/colors/green.js +126 -109
  24. package/dist/colors/indigo.d.ts +21 -109
  25. package/dist/colors/indigo.js +126 -109
  26. package/dist/colors/iris.d.ts +21 -109
  27. package/dist/colors/iris.js +126 -109
  28. package/dist/colors/jade.d.ts +21 -109
  29. package/dist/colors/jade.js +126 -109
  30. package/dist/colors/lime.d.ts +21 -109
  31. package/dist/colors/lime.js +126 -109
  32. package/dist/colors/mauve.d.ts +21 -109
  33. package/dist/colors/mauve.js +126 -109
  34. package/dist/colors/mint.d.ts +21 -109
  35. package/dist/colors/mint.js +126 -109
  36. package/dist/colors/olive.d.ts +21 -109
  37. package/dist/colors/olive.js +126 -109
  38. package/dist/colors/orange.d.ts +21 -109
  39. package/dist/colors/orange.js +126 -109
  40. package/dist/colors/pink.d.ts +21 -109
  41. package/dist/colors/pink.js +126 -109
  42. package/dist/colors/plum.d.ts +21 -109
  43. package/dist/colors/plum.js +126 -109
  44. package/dist/colors/purple.d.ts +21 -109
  45. package/dist/colors/purple.js +126 -109
  46. package/dist/colors/red.d.ts +21 -109
  47. package/dist/colors/red.js +126 -109
  48. package/dist/colors/ruby.d.ts +21 -109
  49. package/dist/colors/ruby.js +126 -109
  50. package/dist/colors/sage.d.ts +21 -109
  51. package/dist/colors/sage.js +126 -109
  52. package/dist/colors/sand.d.ts +21 -109
  53. package/dist/colors/sand.js +126 -109
  54. package/dist/colors/sky.d.ts +21 -109
  55. package/dist/colors/sky.js +126 -109
  56. package/dist/colors/slate.d.ts +21 -109
  57. package/dist/colors/slate.js +126 -109
  58. package/dist/colors/teal.d.ts +21 -109
  59. package/dist/colors/teal.js +126 -109
  60. package/dist/colors/tomato.d.ts +21 -109
  61. package/dist/colors/tomato.js +126 -109
  62. package/dist/colors/violet.d.ts +21 -109
  63. package/dist/colors/violet.js +126 -109
  64. package/dist/colors/yellow.d.ts +21 -109
  65. package/dist/colors/yellow.js +126 -109
  66. package/dist/css.d.ts +3 -2
  67. package/dist/css.js +28 -9
  68. package/dist/index.d.ts +716 -3444
  69. package/dist/index.js +2 -3
  70. package/dist/types.d.ts +24 -23
  71. package/dist/utils.d.ts +9 -0
  72. package/dist/utils.js +44 -0
  73. package/package.json +4 -3
  74. package/dist/cli/commands/generate.d.ts +0 -64
  75. package/dist/cli/commands/generate.js +0 -87
  76. package/dist/cli/commands/list.d.ts +0 -48
  77. package/dist/cli/commands/list.js +0 -33
package/dist/index.js CHANGED
@@ -62,8 +62,7 @@ export const colors = {
62
62
  violet,
63
63
  yellow,
64
64
  };
65
- colors['amber'];
66
65
  export default colors;
67
66
  export { accentColors, grayColors } from "./types.js";
68
- export { css } from "./css.js";
69
- export { getMatchingGrayColor } from "./utils.js";
67
+ export { applyColorVars, css } from "./css.js";
68
+ export { getMatchingGrayColor, toVarName } from "./utils.js";
package/dist/types.d.ts CHANGED
@@ -3,37 +3,38 @@ export type GrayColor = (typeof grayColors)[number];
3
3
  export declare const accentColors: readonly ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"];
4
4
  export type AccentColor = (typeof accentColors)[number];
5
5
  export type Color = AccentColor | GrayColor;
6
- type ScaleStep = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
7
- export type ScaleSteps<C extends Color> = {
8
- [K in `${C}${ScaleStep}` | `${C}A${ScaleStep}`]: string;
9
- };
10
- export type ColorScale<C extends Color> = {
6
+ type Tuple<T, N extends number, R extends T[] = []> = R['length'] extends N ? R : Tuple<T, N, [...R, T]>;
7
+ export type ScaleSteps = Tuple<string, 12>;
8
+ export interface ColorScale {
9
+ solid: ScaleSteps;
10
+ alpha: ScaleSteps;
11
+ }
12
+ export interface PaletteColor<C extends Color> {
11
13
  name: C;
12
- srgb: {
13
- light: ScaleSteps<C>;
14
- dark: ScaleSteps<C>;
14
+ contrast: string;
15
+ indicator: number;
16
+ track: number;
17
+ light: {
18
+ srgb: ColorScale;
19
+ p3: ColorScale;
15
20
  };
16
- p3: {
17
- light: ScaleSteps<C>;
18
- dark: ScaleSteps<C>;
21
+ dark: {
22
+ srgb: ColorScale;
23
+ p3: ColorScale;
19
24
  };
20
- contrast: string;
21
- indicator: string;
22
- track: string;
23
25
  surface: {
24
- srgb: {
25
- light: string;
26
- dark: string;
26
+ light: {
27
+ srgb: string;
28
+ p3: string;
27
29
  };
28
- p3: {
29
- light: string;
30
- dark: string;
30
+ dark: {
31
+ srgb: string;
32
+ p3: string;
31
33
  };
32
34
  };
33
- };
34
- export type AnyColorScale = ColorScale<any>;
35
+ }
35
36
  export type AlphaScale<C extends 'white' | 'back'> = {
36
- [K in `${C}A${ScaleStep}`]: string;
37
+ [K in `${C}A${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`]: string;
37
38
  };
38
39
  export type AlphaConfig<C extends 'white' | 'back'> = {
39
40
  name: C;
package/dist/utils.d.ts CHANGED
@@ -8,3 +8,12 @@ export declare const toVarName: (key: string) => string;
8
8
  export declare const formatRule: (selector: string, vars: string[]) => string;
9
9
  export declare const formatP3: (selector: string, vars: string[]) => string;
10
10
  export declare const formatNestedBlock: (selector: string, vars: string[]) => string;
11
+ /**
12
+ * get package.json content from startDir
13
+ * @param cwd
14
+ * @returns package.json content
15
+ */
16
+ export declare const getPackageJson: (cwd: string) => {
17
+ pkg: any;
18
+ packageJsonPath: string;
19
+ } | undefined;
package/dist/utils.js CHANGED
@@ -1,3 +1,7 @@
1
+ import fs from 'node:fs';
2
+ import { createRequire } from 'node:module';
3
+ import path from 'node:path';
4
+ import * as url from 'node:url';
1
5
  export function getMatchingGrayColor(accentColor) {
2
6
  switch (accentColor) {
3
7
  case 'tomato':
@@ -43,3 +47,43 @@ export const toVarName = (key) => `--${key.replace(/A?(\d+)/, (m, n) => (m.start
43
47
  export const formatRule = (selector, vars) => `${selector} {\n ${vars.join(';\n ')};\n}`;
44
48
  export const formatP3 = (selector, vars) => `@supports (color: color(display-p3 1 1 1)) {\n @media (color-gamut: p3) {\n ${selector} {\n ${vars.join(';\n ')};\n }\n }\n}`;
45
49
  export const formatNestedBlock = (selector, vars) => `&:where(${selector}) {\n ${vars.join(';\n ')};\n }`;
50
+ const require = createRequire(import.meta.url);
51
+ /**
52
+ * get package.json content from startDir
53
+ * @param cwd
54
+ * @returns package.json content
55
+ */
56
+ export const getPackageJson = (cwd) => {
57
+ try {
58
+ const startDir = path.dirname(url.fileURLToPath(cwd));
59
+ const packageJsonPath = findPackageJson(startDir);
60
+ if (packageJsonPath) {
61
+ const pkg = require(packageJsonPath);
62
+ return { pkg, packageJsonPath };
63
+ }
64
+ return undefined;
65
+ }
66
+ catch (error) {
67
+ // ignore error
68
+ return undefined;
69
+ }
70
+ };
71
+ /**
72
+ * search package.json from startDir
73
+ * @param startDir
74
+ * @returns
75
+ */
76
+ const findPackageJson = (startDir) => {
77
+ let currentDir = startDir;
78
+ while (true) {
79
+ const packageJsonPath = path.join(currentDir, 'package.json');
80
+ if (fs.existsSync(packageJsonPath)) {
81
+ return packageJsonPath;
82
+ }
83
+ const parentDir = path.resolve(currentDir, '..');
84
+ if (parentDir === currentDir) {
85
+ return '';
86
+ }
87
+ currentDir = parentDir;
88
+ }
89
+ };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@diskette/palette",
3
3
  "type": "module",
4
- "version": "0.18.0",
4
+ "version": "0.20.0",
5
5
  "bin": {
6
6
  "palette": "./dist/cli/cli.js"
7
7
  },
@@ -23,12 +23,13 @@
23
23
  "dist"
24
24
  ],
25
25
  "dependencies": {
26
- "cleye": "^2.0.1",
27
- "type-flag": "^4.0.2"
26
+ "citty": "^0.1.6"
28
27
  },
29
28
  "devDependencies": {
30
29
  "@changesets/cli": "^2.29.7",
30
+ "@diskette/fs": "^0.17.0",
31
31
  "@types/node": "^24.3.0",
32
+ "magicast": "^0.5.1",
32
33
  "oxlint": "^1.16.0",
33
34
  "oxlint-tsgolint": "^0.2.0",
34
35
  "prettier": "^3.6.2",
@@ -1,64 +0,0 @@
1
- export declare const generate: import("cleye").Command<{
2
- name: "generate";
3
- alias: "gen";
4
- parameters: "[colors]"[];
5
- flags: {
6
- grays: {
7
- type: StringConstructor;
8
- alias: string;
9
- description: string;
10
- };
11
- accents: {
12
- type: BooleanConstructor;
13
- alias: string;
14
- description: string;
15
- default: boolean;
16
- };
17
- output: {
18
- type: StringConstructor;
19
- alias: string;
20
- description: string;
21
- };
22
- };
23
- help: {
24
- description: string;
25
- examples: string[];
26
- };
27
- }, {
28
- command: "generate";
29
- } & import("type-flag").TypeFlag<{
30
- grays: {
31
- type: StringConstructor;
32
- alias: string;
33
- description: string;
34
- };
35
- accents: {
36
- type: BooleanConstructor;
37
- alias: string;
38
- description: string;
39
- default: boolean;
40
- };
41
- output: {
42
- type: StringConstructor;
43
- alias: string;
44
- description: string;
45
- };
46
- } & {
47
- help: BooleanConstructor;
48
- }> & {
49
- _: {
50
- colors: string | undefined;
51
- };
52
- showHelp: (options?: {
53
- version?: string;
54
- description?: string;
55
- usage?: false | string | string[];
56
- examples?: string | string[];
57
- render?: (nodes: {
58
- id?: string;
59
- type: keyof import("cleye").Renderers;
60
- data: any;
61
- }[], renderers: import("cleye").Renderers) => string;
62
- }) => void;
63
- showVersion: () => void;
64
- }>;
@@ -1,87 +0,0 @@
1
- import { command } from 'cleye';
2
- import { mkdirSync, writeFileSync } from 'node:fs';
3
- import { resolve } from 'node:path';
4
- import { blackAlpha, whiteAlpha } from "../../colors/index.js";
5
- import { css } from "../../css.js";
6
- import { accentColors, colors, grayColors } from "../../index.js";
7
- function parseColors(input, available) {
8
- if (!input)
9
- return [];
10
- if (input === 'all')
11
- return [...available];
12
- return input.split(',').filter((c) => available.includes(c));
13
- }
14
- export const generate = command({
15
- name: 'generate',
16
- alias: 'gen',
17
- parameters: ['[colors]'],
18
- flags: {
19
- grays: {
20
- type: String,
21
- alias: 'g',
22
- description: 'Gray colors to generate (comma-separated or "all")',
23
- },
24
- accents: {
25
- type: Boolean,
26
- alias: 'a',
27
- description: 'Generate accents.css with semantic accent tokens',
28
- default: false,
29
- },
30
- output: {
31
- type: String,
32
- alias: 'o',
33
- description: 'Output directory',
34
- },
35
- },
36
- help: {
37
- description: 'Generate CSS files for color palettes',
38
- examples: [
39
- 'palette generate blue,red -g slate -a -o ./styles',
40
- 'palette gen all -g all -a -o ./styles',
41
- ],
42
- },
43
- }, (argv) => {
44
- if (!argv.flags.output) {
45
- console.error('Error: --output (-o) is required');
46
- process.exit(1);
47
- }
48
- const selectedAccentColors = parseColors(argv._.colors, accentColors);
49
- const selectedGrayColors = parseColors(argv.flags.grays, grayColors.filter((g) => g !== 'gray'));
50
- const selectedColors = [...selectedAccentColors, ...selectedGrayColors];
51
- if (selectedColors.length === 0) {
52
- console.error('No colors selected. Use positional args or --grays flag.');
53
- console.error('Run "palette list" to see available colors.');
54
- process.exit(1);
55
- }
56
- const outputPath = resolve(process.cwd(), argv.flags.output);
57
- mkdirSync(outputPath, { recursive: true });
58
- for (const name of selectedColors) {
59
- const palette = colors[name];
60
- writeFileSync(`${outputPath}/${name}.css`, css.palette(name, palette, { schemes: ['light'], alpha: true }));
61
- writeFileSync(`${outputPath}/${name}-dark.css`, css.palette(name, palette, { schemes: ['dark'], alpha: true }));
62
- console.log(` ${name}.css, ${name}-dark.css`);
63
- }
64
- writeFileSync(`${outputPath}/black-alpha.css`, css.alpha(blackAlpha));
65
- writeFileSync(`${outputPath}/white-alpha.css`, css.alpha(whiteAlpha));
66
- console.log(' black-alpha.css, white-alpha.css');
67
- if (argv.flags.accents) {
68
- const accents = css.accents([...selectedAccentColors]);
69
- const grays = css.grays(selectedGrayColors, 'diskette-palette');
70
- writeFileSync(`${outputPath}/accents.css`, `${accents}\n${grays}`);
71
- console.log(' accents.css');
72
- }
73
- const imports = [
74
- ...(argv.flags.accents ? ['./accents.css'] : []),
75
- ...selectedColors.flatMap((name) => [
76
- `./${name}.css`,
77
- `./${name}-dark.css`,
78
- ]),
79
- './black-alpha.css',
80
- './white-alpha.css',
81
- ]
82
- .map((path) => `@import '${path}';`)
83
- .join('\n');
84
- writeFileSync(`${outputPath}/index.css`, `${imports}\n\n${css.tailwind(['white', 'black', 'accent', ...selectedColors])}`);
85
- console.log(' index.css');
86
- console.log(`\nCSS saved to ${outputPath}`);
87
- });
@@ -1,48 +0,0 @@
1
- export declare const list: import("cleye").Command<{
2
- name: "list";
3
- alias: "ls";
4
- flags: {
5
- accent: {
6
- type: BooleanConstructor;
7
- description: string;
8
- default: boolean;
9
- };
10
- gray: {
11
- type: BooleanConstructor;
12
- description: string;
13
- default: boolean;
14
- };
15
- };
16
- help: {
17
- description: string;
18
- };
19
- }, {
20
- command: "list";
21
- } & import("type-flag").TypeFlag<{
22
- accent: {
23
- type: BooleanConstructor;
24
- description: string;
25
- default: boolean;
26
- };
27
- gray: {
28
- type: BooleanConstructor;
29
- description: string;
30
- default: boolean;
31
- };
32
- } & {
33
- help: BooleanConstructor;
34
- }> & {
35
- _: {};
36
- showHelp: (options?: {
37
- version?: string;
38
- description?: string;
39
- usage?: false | string | string[];
40
- examples?: string | string[];
41
- render?: (nodes: {
42
- id?: string;
43
- type: keyof import("cleye").Renderers;
44
- data: any;
45
- }[], renderers: import("cleye").Renderers) => string;
46
- }) => void;
47
- showVersion: () => void;
48
- }>;
@@ -1,33 +0,0 @@
1
- import { command } from 'cleye';
2
- import { accentColors, grayColors } from "../../index.js";
3
- export const list = command({
4
- name: 'list',
5
- alias: 'ls',
6
- flags: {
7
- accent: {
8
- type: Boolean,
9
- description: 'List only accent colors',
10
- default: false,
11
- },
12
- gray: {
13
- type: Boolean,
14
- description: 'List only gray colors',
15
- default: false,
16
- },
17
- },
18
- help: {
19
- description: 'List available colors',
20
- },
21
- }, (argv) => {
22
- const showAll = !argv.flags.accent && !argv.flags.gray;
23
- if (showAll || argv.flags.accent) {
24
- console.log('Accent colors:');
25
- console.log(` ${accentColors.join(', ')}`);
26
- }
27
- if (showAll)
28
- console.log();
29
- if (showAll || argv.flags.gray) {
30
- console.log('Gray colors:');
31
- console.log(` ${grayColors.filter((g) => g !== 'gray').join(', ')}`);
32
- }
33
- });