@diskette/palette 0.26.3 → 0.27.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/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/utils.d.ts +3 -11
- package/dist/utils.js +9 -15
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1120,4 +1120,4 @@ export default colors;
|
|
|
1120
1120
|
export { accentColors, grayColors } from './types.ts';
|
|
1121
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
|
-
export {
|
|
1123
|
+
export { getColorModes, getColorSteps, getMatchingGrayColor, toVarName, } from './utils.ts';
|
package/dist/index.js
CHANGED
|
@@ -65,4 +65,4 @@ export const colors = {
|
|
|
65
65
|
export default colors;
|
|
66
66
|
export { accentColors, grayColors } from "./types.js";
|
|
67
67
|
export { applyColorVars, css } from "./css.js";
|
|
68
|
-
export {
|
|
68
|
+
export { getColorModes, getColorSteps, getMatchingGrayColor, toVarName, } from "./utils.js";
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { AccentColor, Color, ColorSteps, GrayColor } from './types.ts';
|
|
1
|
+
import type { AccentColor, Color, ColorSteps, GrayColor, PaletteColor } from './types.ts';
|
|
2
2
|
export declare const LIGHT_SELECTOR = ":root, .light, .light-theme";
|
|
3
3
|
export declare const DARK_SELECTOR = ".dark, .dark-theme";
|
|
4
4
|
export declare const schemeSelector: (scheme: "light" | "dark") => string;
|
|
@@ -47,23 +47,15 @@ export declare function getMatchingGrayColor(accentColor: AccentColor): GrayColo
|
|
|
47
47
|
* - Step `11` is designed for low-contrast text.
|
|
48
48
|
* - Step `12` is designed for high-contrast text.
|
|
49
49
|
*/
|
|
50
|
-
export declare function
|
|
50
|
+
export declare function getColorSteps(color: PaletteColor<Color>, opts?: {
|
|
51
51
|
mode?: 'light' | 'dark';
|
|
52
52
|
variant?: 'alpha' | 'solid';
|
|
53
53
|
type?: 'p3' | 'srgb';
|
|
54
54
|
}): ColorSteps;
|
|
55
|
-
export declare function getColorModes(color: Color
|
|
55
|
+
export declare function getColorModes(color: PaletteColor<Color>, opts?: {
|
|
56
56
|
variant?: 'alpha' | 'solid';
|
|
57
57
|
type?: 'p3' | 'srgb';
|
|
58
58
|
}): {
|
|
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
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import pink from "./colors/pink.js";
|
|
1
2
|
import colors from "./index.js";
|
|
2
3
|
export const LIGHT_SELECTOR = ':root, .light, .light-theme';
|
|
3
4
|
export const DARK_SELECTOR = '.dark, .dark-theme';
|
|
@@ -83,29 +84,22 @@ export function getMatchingGrayColor(accentColor) {
|
|
|
83
84
|
* - Step `11` is designed for low-contrast text.
|
|
84
85
|
* - Step `12` is designed for high-contrast text.
|
|
85
86
|
*/
|
|
86
|
-
export function
|
|
87
|
+
export function getColorSteps(color, opts) {
|
|
87
88
|
const { variant = 'solid', type = 'p3', mode = 'dark' } = opts ?? {};
|
|
88
|
-
const
|
|
89
|
-
const scales = colorDef[mode][type][variant];
|
|
89
|
+
const scales = color[mode][type][variant];
|
|
90
90
|
const result = scales.reduce((acc, current, index) => {
|
|
91
91
|
const key = `step${index + 1}`;
|
|
92
92
|
acc[key] = current;
|
|
93
93
|
return acc;
|
|
94
94
|
}, {});
|
|
95
|
-
result.contrast =
|
|
96
|
-
result.indicator = scales[
|
|
97
|
-
result.track = scales[
|
|
98
|
-
result.surface =
|
|
95
|
+
result.contrast = color.contrast;
|
|
96
|
+
result.indicator = scales[color.indicator - 1];
|
|
97
|
+
result.track = scales[color.track - 1];
|
|
98
|
+
result.surface = color.surface[mode][type];
|
|
99
99
|
return result;
|
|
100
100
|
}
|
|
101
101
|
export function getColorModes(color, opts) {
|
|
102
|
-
const light =
|
|
103
|
-
const dark =
|
|
102
|
+
const light = getColorSteps(color, opts);
|
|
103
|
+
const dark = getColorSteps(color, opts);
|
|
104
104
|
return { light, dark };
|
|
105
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
|
-
}
|