@diskette/palette 0.24.0 → 0.25.0

package/dist/cli/cli.js

@@ -26,7 +26,7 @@ const grayOptions = grayOptionsList.map((c) => {
     return { value: c, label: `${swatch}${capitalize(c)}` };
 });
 async function main() {
-    p.intro(`palette v0.24.0`);
+    p.intro(`palette v0.25.0`);
     const results = await p.group({
         colors: () => p.groupMultiselect({
             message: 'Select accent colors',

package/dist/index.d.ts

@@ -1118,6 +1118,6 @@ export declare const colors: {
 };
 export default colors;
 export { accentColors, grayColors } from './types.ts';
-export type { AccentColor, AlphaConfig, AlphaScale, Color, ColorScale, GrayColor, PaletteColor, ScaleSteps, } from './types.ts';
+export type { AccentColor, AlphaConfig, AlphaScale, Color, ColorScale, ColorSteps, GrayColor, PaletteColor, ScaleSteps, } from './types.ts';
 export { applyColorVars, css } from './css.ts';
-export { getMatchingGrayColor, toVarName } from './utils.ts';
+export { getColor, getColorModes, getMatchingGrayColor, toVarName, } from './utils.ts';

package/dist/index.js

@@ -65,4 +65,4 @@ export const colors = {
 export default colors;
 export { accentColors, grayColors } from "./types.js";
 export { applyColorVars, css } from "./css.js";
-export { getMatchingGrayColor, toVarName } from "./utils.js";
+export { getColor, getColorModes, getMatchingGrayColor, toVarName, } from "./utils.js";

package/dist/types.d.ts

@@ -33,8 +33,12 @@ export interface PaletteColor<C extends Color> {
         };
     };
 }
+export type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type ColorSteps = {
+    [K in `step${Steps}`]: string;
+};
 export type AlphaScale<C extends 'white' | 'back'> = {
-    [K in `${C}A${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`]: string;
+    [K in `${C}A${Steps}`]: string;
 };
 export type AlphaConfig<C extends 'white' | 'back'> = {
     name: C;

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { AccentColor, GrayColor } from './types.ts';
+import type { AccentColor, Color, ColorSteps, GrayColor } from './types.ts';
 export declare const LIGHT_SELECTOR = ":root, .light, .light-theme";
 export declare const DARK_SELECTOR = ".dark, .dark-theme";
 export declare const schemeSelector: (scheme: "light" | "dark") => string;
@@ -8,3 +8,54 @@ export declare const formatRule: (selector: string, vars: string[]) => string;
 export declare const formatP3: (selector: string, vars: string[]) => string;
 export declare const formatNestedBlock: (selector: string, vars: string[]) => string;
 export declare function getMatchingGrayColor(accentColor: AccentColor): GrayColor;
+/**
+ * Steps `1` and `2` are designed for app backgrounds and subtle component backgrounds.
+ * Appropriate applications include:
+ * - Main app background
+ * - Striped table background
+ * - Code block background
+ * - Card background
+ * - Sidebar background
+ * - Canvas area background
+ *
+ * Steps `3`, `4`, and `5` are designed for UI component backgrounds.
+ * - Step `3` is for normal states.
+ * - Step `4` is for hover states.
+ * - Step `5` is for pressed or selected states.
+ * Steps `11` and `12`—which are designed for text
+ *
+ * Steps `6`, `7`, and `8` are designed for borders.
+ * - Step `6` is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators.
+ * - Step `7` is designed for subtle borders on interactive components.
+ * - Step `8` is designed for stronger borders on interactive components and focus rings. Most of the components use --focus-8 for the focus outline color.
+ *
+ * Step `9` has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because `9` is the purest step, it has a wide range of applications:
+ * - Website/App backgrounds
+ * - Website section backgrounds
+ * - Header backgrounds
+ * - Component backgrounds
+ * - Graphics/Logos
+ * - Overlays
+ * - Coloured shadows
+ * - Accent borders
+ *
+ * Step `10` is designed for component hover states, where step `9` is the component's normal state background.
+ *
+ * Most step 9 colors are designed for white foreground text. `Sky`, `Mint`, `Lime`, `Yellow`, and `Amber` are designed for dark foreground text and steps `9` and `10`.
+ *
+ * Steps `11` and `12` are designed for text.
+ * - Step `11` is designed for low-contrast text.
+ * - Step `12` is designed for high-contrast text.
+ */
+export declare function getColor(color: Color, opts?: {
+    mode?: 'light' | 'dark';
+    variant?: 'alpha' | 'solid';
+    type?: 'p3' | 'srgb';
+}): ColorSteps;
+export declare function getColorModes(color: Color, opts?: {
+    variant?: 'alpha' | 'solid';
+    type?: 'p3' | 'srgb';
+}): {
+    light: ColorSteps;
+    dark: ColorSteps;
+};

package/dist/utils.js

@@ -1,3 +1,4 @@
+import colors from "./index.js";
 export const LIGHT_SELECTOR = ':root, .light, .light-theme';
 export const DARK_SELECTOR = '.dark, .dark-theme';
 export const schemeSelector = (scheme) => scheme === 'light' ? LIGHT_SELECTOR : DARK_SELECTOR;
@@ -43,3 +44,56 @@ export function getMatchingGrayColor(accentColor) {
             return 'gray';
     }
 }
+/**
+ * Steps `1` and `2` are designed for app backgrounds and subtle component backgrounds.
+ * Appropriate applications include:
+ * - Main app background
+ * - Striped table background
+ * - Code block background
+ * - Card background
+ * - Sidebar background
+ * - Canvas area background
+ *
+ * Steps `3`, `4`, and `5` are designed for UI component backgrounds.
+ * - Step `3` is for normal states.
+ * - Step `4` is for hover states.
+ * - Step `5` is for pressed or selected states.
+ * Steps `11` and `12`—which are designed for text
+ *
+ * Steps `6`, `7`, and `8` are designed for borders.
+ * - Step `6` is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators.
+ * - Step `7` is designed for subtle borders on interactive components.
+ * - Step `8` is designed for stronger borders on interactive components and focus rings. Most of the components use --focus-8 for the focus outline color.
+ *
+ * Step `9` has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because `9` is the purest step, it has a wide range of applications:
+ * - Website/App backgrounds
+ * - Website section backgrounds
+ * - Header backgrounds
+ * - Component backgrounds
+ * - Graphics/Logos
+ * - Overlays
+ * - Coloured shadows
+ * - Accent borders
+ *
+ * Step `10` is designed for component hover states, where step `9` is the component's normal state background.
+ *
+ * Most step 9 colors are designed for white foreground text. `Sky`, `Mint`, `Lime`, `Yellow`, and `Amber` are designed for dark foreground text and steps `9` and `10`.
+ *
+ * Steps `11` and `12` are designed for text.
+ * - Step `11` is designed for low-contrast text.
+ * - Step `12` is designed for high-contrast text.
+ */
+export function getColor(color, opts) {
+    const { variant = 'solid', type = 'p3', mode = 'dark' } = opts ?? {};
+    const scales = colors[color][mode][type][variant];
+    return scales.reduce((acc, current, index) => {
+        const key = `step${index + 1}`;
+        acc[key] = current;
+        return acc;
+    }, {});
+}
+export function getColorModes(color, opts) {
+    const light = getColor(color, opts);
+    const dark = getColor(color, opts);
+    return { light, dark };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diskette/palette",
   "type": "module",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "bin": {
     "palette": "./dist/cli/cli.js"
   },