@diskette/palette 0.25.1 → 0.26.3
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/dist/cli/cli.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/types.d.ts +34 -3
- package/dist/utils.d.ts +8 -0
- package/dist/utils.js +14 -2
- package/package.json +2 -2
package/dist/cli/cli.js
CHANGED
|
@@ -26,7 +26,7 @@ const grayOptions = grayOptionsList.map((c) => {
|
|
|
26
26
|
return { value: c, label: `${swatch}${capitalize(c)}` };
|
|
27
27
|
});
|
|
28
28
|
async function main() {
|
|
29
|
-
p.intro(`palette
|
|
29
|
+
p.intro(`palette v__VERSION__`);
|
|
30
30
|
const results = await p.group({
|
|
31
31
|
colors: () => p.groupMultiselect({
|
|
32
32
|
message: 'Select accent colors',
|
package/dist/index.d.ts
CHANGED
|
@@ -1118,6 +1118,6 @@ export declare const colors: {
|
|
|
1118
1118
|
};
|
|
1119
1119
|
export default colors;
|
|
1120
1120
|
export { accentColors, grayColors } from './types.ts';
|
|
1121
|
-
export type { AccentColor, AlphaConfig, AlphaScale, Color, ColorScale, ColorSteps, GrayColor, PaletteColor, ScaleSteps, } from './types.ts';
|
|
1121
|
+
export type { AccentColor, AlphaConfig, AlphaScale, Color, ColorScale, ColorSteps, GrayColor, PaletteColor, ScaleSteps, Steps, } from './types.ts';
|
|
1122
1122
|
export { applyColorVars, css } from './css.ts';
|
|
1123
1123
|
export { getColor, getColorModes, getMatchingGrayColor, toVarName, } from './utils.ts';
|
package/dist/types.d.ts
CHANGED
|
@@ -34,9 +34,40 @@ export interface PaletteColor<C extends Color> {
|
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
36
|
export type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
37
|
-
export
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
export interface ColorSteps {
|
|
38
|
+
/** App background, striped table background, canvas area */
|
|
39
|
+
step1: string;
|
|
40
|
+
/** Subtle component background: cards, sidebars, code blocks */
|
|
41
|
+
step2: string;
|
|
42
|
+
/** UI component background (normal state) */
|
|
43
|
+
step3: string;
|
|
44
|
+
/** UI component background (hover state) */
|
|
45
|
+
step4: string;
|
|
46
|
+
/** UI component background (pressed/selected state) */
|
|
47
|
+
step5: string;
|
|
48
|
+
/** Subtle borders: sidebars, headers, cards, alerts, separators */
|
|
49
|
+
step6: string;
|
|
50
|
+
/** Subtle borders on interactive components */
|
|
51
|
+
step7: string;
|
|
52
|
+
/** Stronger borders on interactive components, focus rings */
|
|
53
|
+
step8: string;
|
|
54
|
+
/** Solid backgrounds: headers, buttons, graphics, overlays. Highest chroma. */
|
|
55
|
+
step9: string;
|
|
56
|
+
/** Solid background hover state (where step9 is normal state) */
|
|
57
|
+
step10: string;
|
|
58
|
+
/** Low-contrast text */
|
|
59
|
+
step11: string;
|
|
60
|
+
/** High-contrast text */
|
|
61
|
+
step12: string;
|
|
62
|
+
/** Foreground color for text on solid backgrounds (step9/10). Usually "white" or "black". */
|
|
63
|
+
contrast: string;
|
|
64
|
+
/** Accent color for indicators, badges, and status dots */
|
|
65
|
+
indicator: string;
|
|
66
|
+
/** Accent color for slider tracks and progress bars */
|
|
67
|
+
track: string;
|
|
68
|
+
/** Translucent surface color for cards and overlays */
|
|
69
|
+
surface: string;
|
|
70
|
+
}
|
|
40
71
|
export type AlphaScale<C extends 'white' | 'back'> = {
|
|
41
72
|
[K in `${C}A${Steps}`]: string;
|
|
42
73
|
};
|
package/dist/utils.d.ts
CHANGED
|
@@ -59,3 +59,11 @@ export declare function getColorModes(color: Color, opts?: {
|
|
|
59
59
|
light: ColorSteps;
|
|
60
60
|
dark: ColorSteps;
|
|
61
61
|
};
|
|
62
|
+
export declare function getColorPair(color: AccentColor, opts?: {
|
|
63
|
+
mode?: 'light' | 'dark';
|
|
64
|
+
variant?: 'alpha' | 'solid';
|
|
65
|
+
type?: 'p3' | 'srgb';
|
|
66
|
+
}): {
|
|
67
|
+
accent: ColorSteps;
|
|
68
|
+
gray: ColorSteps;
|
|
69
|
+
};
|
package/dist/utils.js
CHANGED
|
@@ -85,15 +85,27 @@ export function getMatchingGrayColor(accentColor) {
|
|
|
85
85
|
*/
|
|
86
86
|
export function getColor(color, opts) {
|
|
87
87
|
const { variant = 'solid', type = 'p3', mode = 'dark' } = opts ?? {};
|
|
88
|
-
const
|
|
89
|
-
|
|
88
|
+
const colorDef = colors[color];
|
|
89
|
+
const scales = colorDef[mode][type][variant];
|
|
90
|
+
const result = scales.reduce((acc, current, index) => {
|
|
90
91
|
const key = `step${index + 1}`;
|
|
91
92
|
acc[key] = current;
|
|
92
93
|
return acc;
|
|
93
94
|
}, {});
|
|
95
|
+
result.contrast = colorDef.contrast;
|
|
96
|
+
result.indicator = scales[colorDef.indicator - 1];
|
|
97
|
+
result.track = scales[colorDef.track - 1];
|
|
98
|
+
result.surface = colorDef.surface[mode][type];
|
|
99
|
+
return result;
|
|
94
100
|
}
|
|
95
101
|
export function getColorModes(color, opts) {
|
|
96
102
|
const light = getColor(color, opts);
|
|
97
103
|
const dark = getColor(color, opts);
|
|
98
104
|
return { light, dark };
|
|
99
105
|
}
|
|
106
|
+
export function getColorPair(color, opts) {
|
|
107
|
+
const accent = getColor(color, opts);
|
|
108
|
+
const grayName = getMatchingGrayColor(color);
|
|
109
|
+
const gray = getColor(grayName, opts);
|
|
110
|
+
return { accent, gray };
|
|
111
|
+
}
|
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.26.3",
|
|
5
5
|
"bin": {
|
|
6
6
|
"palette": "./dist/cli/cli.js"
|
|
7
7
|
},
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
},
|
|
180
180
|
"license": "MIT",
|
|
181
181
|
"scripts": {
|
|
182
|
-
"build": "rm -rf dist && tsc -p tsconfig.build.json
|
|
182
|
+
"build": "rm -rf dist && tsc -p tsconfig.build.json",
|
|
183
183
|
"typecheck": "tsc",
|
|
184
184
|
"test": "vitest run",
|
|
185
185
|
"lint": "oxlint --type-aware src",
|