@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.
- package/README.md +90 -70
- package/dist/cli/cli.d.ts +1 -1
- package/dist/cli/cli.js +59 -9
- package/dist/colors/amber.d.ts +21 -109
- package/dist/colors/amber.js +126 -109
- package/dist/colors/blue.d.ts +21 -109
- package/dist/colors/blue.js +126 -109
- package/dist/colors/bronze.d.ts +21 -109
- package/dist/colors/bronze.js +126 -109
- package/dist/colors/brown.d.ts +21 -109
- package/dist/colors/brown.js +126 -109
- package/dist/colors/crimson.d.ts +21 -109
- package/dist/colors/crimson.js +126 -109
- package/dist/colors/cyan.d.ts +21 -109
- package/dist/colors/cyan.js +126 -109
- package/dist/colors/gold.d.ts +21 -109
- package/dist/colors/gold.js +126 -109
- package/dist/colors/grass.d.ts +21 -109
- package/dist/colors/grass.js +126 -109
- package/dist/colors/gray.d.ts +21 -109
- package/dist/colors/gray.js +126 -109
- package/dist/colors/green.d.ts +21 -109
- package/dist/colors/green.js +126 -109
- package/dist/colors/indigo.d.ts +21 -109
- package/dist/colors/indigo.js +126 -109
- package/dist/colors/iris.d.ts +21 -109
- package/dist/colors/iris.js +126 -109
- package/dist/colors/jade.d.ts +21 -109
- package/dist/colors/jade.js +126 -109
- package/dist/colors/lime.d.ts +21 -109
- package/dist/colors/lime.js +126 -109
- package/dist/colors/mauve.d.ts +21 -109
- package/dist/colors/mauve.js +126 -109
- package/dist/colors/mint.d.ts +21 -109
- package/dist/colors/mint.js +126 -109
- package/dist/colors/olive.d.ts +21 -109
- package/dist/colors/olive.js +126 -109
- package/dist/colors/orange.d.ts +21 -109
- package/dist/colors/orange.js +126 -109
- package/dist/colors/pink.d.ts +21 -109
- package/dist/colors/pink.js +126 -109
- package/dist/colors/plum.d.ts +21 -109
- package/dist/colors/plum.js +126 -109
- package/dist/colors/purple.d.ts +21 -109
- package/dist/colors/purple.js +126 -109
- package/dist/colors/red.d.ts +21 -109
- package/dist/colors/red.js +126 -109
- package/dist/colors/ruby.d.ts +21 -109
- package/dist/colors/ruby.js +126 -109
- package/dist/colors/sage.d.ts +21 -109
- package/dist/colors/sage.js +126 -109
- package/dist/colors/sand.d.ts +21 -109
- package/dist/colors/sand.js +126 -109
- package/dist/colors/sky.d.ts +21 -109
- package/dist/colors/sky.js +126 -109
- package/dist/colors/slate.d.ts +21 -109
- package/dist/colors/slate.js +126 -109
- package/dist/colors/teal.d.ts +21 -109
- package/dist/colors/teal.js +126 -109
- package/dist/colors/tomato.d.ts +21 -109
- package/dist/colors/tomato.js +126 -109
- package/dist/colors/violet.d.ts +21 -109
- package/dist/colors/violet.js +126 -109
- package/dist/colors/yellow.d.ts +21 -109
- package/dist/colors/yellow.js +126 -109
- package/dist/css.d.ts +3 -2
- package/dist/css.js +28 -9
- package/dist/index.d.ts +716 -3444
- package/dist/index.js +2 -3
- package/dist/types.d.ts +24 -23
- package/dist/utils.d.ts +9 -0
- package/dist/utils.js +44 -0
- package/package.json +4 -3
- package/dist/cli/commands/generate.d.ts +0 -64
- package/dist/cli/commands/generate.js +0 -87
- package/dist/cli/commands/list.d.ts +0 -48
- 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
|
|
7
|
-
export type ScaleSteps
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
contrast: string;
|
|
15
|
+
indicator: number;
|
|
16
|
+
track: number;
|
|
17
|
+
light: {
|
|
18
|
+
srgb: ColorScale;
|
|
19
|
+
p3: ColorScale;
|
|
15
20
|
};
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
21
|
+
dark: {
|
|
22
|
+
srgb: ColorScale;
|
|
23
|
+
p3: ColorScale;
|
|
19
24
|
};
|
|
20
|
-
contrast: string;
|
|
21
|
-
indicator: string;
|
|
22
|
-
track: string;
|
|
23
25
|
surface: {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
light: {
|
|
27
|
+
srgb: string;
|
|
28
|
+
p3: string;
|
|
27
29
|
};
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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${
|
|
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.
|
|
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
|
-
"
|
|
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
|
-
});
|