npm - @bhsd/codemirror-css-color-picker - Versions diffs - 7.1.1 → 8.0.0 - Mend

@bhsd/codemirror-css-color-picker 7.1.1 → 8.0.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 (7) hide show

package/dist/color.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
-import 'color-space/hsl.js';
-import type { WidgetOptions, RGB, ColorData } from './types';
+import type { WidgetOptions, ColorData } from './types';
 /**
  * Parses a CSS color function call expression (including `rgb()`, `rgba()`, `hsl()`, `hsla()`)
  * @param callExp the full text of the call expression, including function name and parentheses
  */
-export declare const parseCallExpression: (callExp: string) => ColorData | false | undefined;
+export declare const parseCallExpression: (callExp: string) => ColorData | false;
 /**
  * Parses a hex color literal (e.g. `#ff0000`, `#f00`, `#ff000080`, `#f008`)
  * @param colorLiteral the hex color literal text
@@ -13,9 +12,8 @@ export declare const parseColorLiteral: (colorLiteral: string) => ColorData | fa
 /**
  * Parses a named color (e.g. `red`, `blue`, `rebeccapurple`)
  * @param colorName the named color text
- * @param colors an object mapping color names to RGB values
  */
-export declare const parseNamedColor: (colorName: string, colors?: Record<string, RGB>) => ColorData | false;
+export declare const parseNamedColor: (colorName: string) => ColorData | false;
 export declare const getDelimiter: (legacy: boolean, spaced: boolean) => string;
 export declare const alphaToString: (alpha: number, legacy: boolean, spaced: boolean) => string;
-export declare const colorToString: ({ color, alpha, colorType, legacy, spaced }: WidgetOptions, value: string, colors?: Record<string, RGB>) => string | false;
+export declare const colorToString: ({ color, alpha, colorType, legacy, spaced }: WidgetOptions, value: string) => string | false;

package/dist/color.js ADDED Viewed

@@ -0,0 +1,84 @@
+import { intToHex, numToHex, rgba, hsla, colorsNamed } from '@bhsd/common';
+const parse = (color) => {
+    const [r, g, b, alpha] = rgba(color);
+    return alpha !== undefined && {
+        color: [r, g, b],
+        alpha,
+    };
+};
+/**
+ * Parses a CSS color function call expression (including `rgb()`, `rgba()`, `hsl()`, `hsla()`)
+ * @param callExp the full text of the call expression, including function name and parentheses
+ */
+export const parseCallExpression = (callExp) => {
+    const color = parse(callExp);
+    return color && {
+        ...color,
+        colorType: callExp.split('(', 1)[0].toLowerCase(),
+        legacy: callExp.includes(','),
+        spaced: /\s/u.test(callExp),
+    };
+};
+/**
+ * Parses a hex color literal (e.g. `#ff0000`, `#f00`, `#ff000080`, `#f008`)
+ * @param colorLiteral the hex color literal text
+ */
+export const parseColorLiteral = (colorLiteral) => {
+    const color = parse(colorLiteral), { length } = colorLiteral;
+    return color && {
+        ...color,
+        colorType: 'hex',
+        legacy: length === 4 || length === 7,
+        spaced: false,
+    };
+};
+/**
+ * Parses a named color (e.g. `red`, `blue`, `rebeccapurple`)
+ * @param colorName the named color text
+ */
+export const parseNamedColor = (colorName) => {
+    const color = parse(colorName);
+    return color && {
+        ...color,
+        colorType: 'named',
+        legacy: true,
+        spaced: false,
+    };
+};
+export const getDelimiter = (legacy, spaced) => legacy ? `,${spaced ? ' ' : ''}` : ' ';
+export const alphaToString = (alpha, legacy, spaced) => alpha === 1
+    ? ''
+    : (legacy ? `,${spaced ? ' ' : ''}` : ' / ')
+        + String(alpha === 0 ? alpha : Number(alpha.toFixed(2)));
+const hexToName = new Map(Object.entries(colorsNamed).map(([key, val]) => [`#${intToHex(val, 6)}`, key]));
+export const colorToString = ({ color, alpha, colorType, legacy, spaced }, value) => {
+    const currentColor = rgba(value).slice(0, 3);
+    if (currentColor.every((c, i) => c === Math.round(color[i]))) {
+        return false;
+    }
+    const delimiter = getDelimiter(legacy, spaced);
+    switch (colorType) {
+        case 'rgba':
+        case 'rgb':
+            return `${colorType}(${currentColor.join(delimiter)}${alphaToString(alpha, legacy, spaced)})`;
+        case 'hsla':
+        case 'hsl': {
+            const [h, s, l] = hsla(value);
+            return `${colorType}(${[h, `${s}%`, `${l}%`].join(delimiter)}${alphaToString(alpha, legacy, spaced)})`;
+        }
+        case 'named':
+            if (alpha === 1) {
+                // If the color is an exact match for another named color, prefer retaining name
+                const colorName = hexToName.get(value);
+                if (colorName) {
+                    return colorName;
+                }
+            }
+        // fall through
+        case 'hex':
+            // hex color literal
+            return value + (alpha === 1 ? '' : numToHex(alpha));
+        default:
+            throw new Error('Unknown color type');
+    }
+};

package/dist/css.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { NodeProp } from '@lezer/common';
+/**
+ * Discovers colors in CSS code
+ * @implements
+ */
+export const discoverColorsInCSS = (tree, { from, to, name: typeName }, doc) => {
+    switch (typeName) {
+        case 'UnquotedAttributeValue':
+        case 'AttributeValue': {
+            // CSS nested in an HTML attribute value
+            const overlayTree = tree.resolveInner(from, 0).tree?.prop(NodeProp.mounted)?.tree;
+            if (overlayTree?.type.name !== 'Styles') {
+                // Skip if the attribute value is not a style attribute, or if there is no mounted tree
+                return false;
+            }
+            const ret = [],
+            // Account for the quotation mark in AttributeValue
+            offset = from + (typeName === 'AttributeValue' ? 1 : 0);
+            overlayTree.iterate({
+                from: 0,
+                to: overlayTree.length,
+                enter({ name, from: overlayFrom, to: overlayTo }) {
+                    const widgetOptions = discoverColorsInCSS(tree, {
+                        from: offset + overlayFrom,
+                        to: offset + overlayTo,
+                        name,
+                    }, doc);
+                    if (widgetOptions) {
+                        if (Array.isArray(widgetOptions)) {
+                            throw new Error('Unexpected nested overlays');
+                        }
+                        ret.push(widgetOptions);
+                    }
+                },
+            });
+            return ret;
+        }
+        case 'CallExpression':
+        case 'ColorLiteral':
+        case 'ValueName':
+            return { from, to };
+        default:
+            return undefined;
+    }
+};

package/dist/index.d.ts CHANGED Viewed

@@ -1,14 +1,11 @@
-import namedColors from 'color-name';
 import type { Extension } from '@codemirror/state';
-import type { DiscoverColors, WidgetOptions, RGB } from './types';
-export { namedColors };
+import type { DiscoverColors, WidgetOptions } from './types';
 export type { DiscoverColors, WidgetOptions };
 export declare const wrapperClassName = "cm-css-color-picker-wrapper";
 /**
  * Factory function to create a color picker plugin with the given options
  * @param discoverColors the function to discover colors in a syntax node; return `false` to skip children
- * @param colors an optional object of color names mapping to RGB values
  */
-export declare const makeColorPicker: (discoverColors: DiscoverColors, colors?: Record<string, RGB>) => Extension;
+export declare const makeColorPicker: (discoverColors: DiscoverColors) => Extension;
 /** Default color picker plugin for CSS and HTML */
 export declare const colorPicker: Extension;

package/dist/index.js CHANGED Viewed

@@ -1,410 +1,183 @@
-import { EditorView, WidgetType, ViewPlugin, Decoration } from "@codemirror/view";
-import { syntaxTree } from "@codemirror/language";
-import namedColors from "color-name";
-import { intToHex } from "@bhsd/common";
-import { NodeProp } from "@lezer/common";
-var discoverColorsInCSS = (tree, { from, to, name: typeName }, doc) => {
-  switch (typeName) {
-    case "UnquotedAttributeValue":
-    case "AttributeValue": {
-      const overlayTree = tree.resolveInner(from, 0).tree?.prop(NodeProp.mounted)?.tree;
-      if (overlayTree?.type.name !== "Styles") {
-        return false;
-      }
-      const ret = [], offset = from + (typeName === "AttributeValue" ? 1 : 0);
-      overlayTree.iterate({
-        from: 0,
-        to: overlayTree.length,
-        enter({ name, from: overlayFrom, to: overlayTo }) {
-          const widgetOptions = discoverColorsInCSS(
-            tree,
-            {
-              from: offset + overlayFrom,
-              to: offset + overlayTo,
-              name
-            },
-            doc
-          );
-          if (widgetOptions) {
-            if (Array.isArray(widgetOptions)) {
-              throw new Error("Unexpected nested overlays");
-            }
-            ret.push(widgetOptions);
-          }
+import { EditorView, WidgetType, ViewPlugin, Decoration } from '@codemirror/view';
+import { syntaxTree } from '@codemirror/language';
+import { intToHex } from '@bhsd/common';
+import { discoverColorsInCSS } from './css.js';
+import { colorToString, parseCallExpression, parseColorLiteral, parseNamedColor } from './color.js';
+export const wrapperClassName = 'cm-css-color-picker-wrapper';
+const pickerState = new WeakMap();
+class ColorPickerWidget extends WidgetType {
+    /** @class */
+    constructor(state, readOnly) {
+        super();
+        this.state = state;
+        this.readonly = readOnly;
+    }
+    /** @override */
+    eq(other) {
+        return other.readonly === this.readonly
+            && other.state.from === this.state.from
+            && other.state.to === this.state.to
+            && other.state.colorType === this.state.colorType
+            && other.state.color === this.state.color
+            && other.state.alpha === this.state.alpha
+            && other.state.legacy === this.state.legacy
+            && other.state.spaced === this.state.spaced;
+    }
+    /** @override */
+    toDOM() {
+        const picker = document.createElement('input');
+        picker.type = 'color';
+        picker.value = `#${this.state.color.map(c => intToHex(c)).join('')}`;
+        picker.style.opacity = String(this.state.alpha);
+        if (this.readonly || this.state.colorType === 'unknown') {
+            picker.disabled = true;
         }
-      });
-      return ret;
+        pickerState.set(picker, this.state);
+        const wrapper = document.createElement('span');
+        wrapper.className = wrapperClassName;
+        wrapper.append(picker);
+        return wrapper;
     }
-    case "CallExpression":
-    case "ColorLiteral":
-    case "ValueName":
-      return { from, to };
-    default:
-      return void 0;
-  }
-};
-import rgb2 from "color-space/rgb.js";
-import "color-space/hsl.js";
-var names = {};
-var color_parse_default = parse;
-var baseHues = {
-  red: 0,
-  orange: 60,
-  yellow: 120,
-  green: 180,
-  blue: 240,
-  purple: 300
-};
-function parse(cstr) {
-  var m, parts = [], alpha = 1, space;
-  if (typeof cstr === "number") {
-    return { space: "rgb", values: [cstr >>> 16, (cstr & 65280) >>> 8, cstr & 255], alpha: 1 };
-  }
-  if (typeof cstr === "number") return { space: "rgb", values: [cstr >>> 16, (cstr & 65280) >>> 8, cstr & 255], alpha: 1 };
-  cstr = String(cstr).toLowerCase();
-  if (names[cstr]) {
-    parts = names[cstr].slice();
-    space = "rgb";
-  } else if (cstr === "transparent") {
-    alpha = 0;
-    space = "rgb";
-    parts = [0, 0, 0];
-  } else if (cstr[0] === "#") {
-    var base = cstr.slice(1);
-    var size = base.length;
-    var isShort = size <= 4;
-    alpha = 1;
-    if (isShort) {
-      parts = [
-        parseInt(base[0] + base[0], 16),
-        parseInt(base[1] + base[1], 16),
-        parseInt(base[2] + base[2], 16)
-      ];
-      if (size === 4) {
-        alpha = parseInt(base[3] + base[3], 16) / 255;
-      }
-    } else {
-      parts = [
-        parseInt(base[0] + base[1], 16),
-        parseInt(base[2] + base[3], 16),
-        parseInt(base[4] + base[5], 16)
-      ];
-      if (size === 8) {
-        alpha = parseInt(base[6] + base[7], 16) / 255;
-      }
+    /** @override */
+    ignoreEvent(e) {
+        return e.type !== 'change';
     }
-    if (!parts[0]) parts[0] = 0;
-    if (!parts[1]) parts[1] = 0;
-    if (!parts[2]) parts[2] = 0;
-    space = "rgb";
-  } else if (m = /^((?:rgba?|hs[lvb]a?|hwba?|cmyk?|xy[zy]|gray|lab|lchu?v?|[ly]uv|lms|oklch|oklab|color))\s*\(([^\)]*)\)/.exec(cstr)) {
-    var name = m[1];
-    space = name.replace(/a$/, "");
-    var dims = space === "cmyk" ? 4 : space === "gray" ? 1 : 3;
-    parts = m[2].trim().split(/\s*[,\/]\s*|\s+/);
-    if (space === "color") space = parts.shift();
-    parts = parts.map(function(x, i) {
-      if (x[x.length - 1] === "%") {
-        x = parseFloat(x) / 100;
-        if (i === 3) return x;
-        if (space === "rgb") return x * 255;
-        if (space[0] === "h") return x * 100;
-        if (space[0] === "l" && !i) return x * 100;
-        if (space === "lab") return x * 125;
-        if (space === "lch") return i < 2 ? x * 150 : x * 360;
-        if (space[0] === "o" && !i) return x;
-        if (space === "oklab") return x * 0.4;
-        if (space === "oklch") return i < 2 ? x * 0.4 : x * 360;
-        return x;
-      }
-      if (space[i] === "h" || i === 2 && space[space.length - 1] === "h") {
-        if (baseHues[x] !== void 0) return baseHues[x];
-        if (x.endsWith("deg")) return parseFloat(x);
-        if (x.endsWith("turn")) return parseFloat(x) * 360;
-        if (x.endsWith("grad")) return parseFloat(x) * 360 / 400;
-        if (x.endsWith("rad")) return parseFloat(x) * 180 / Math.PI;
-      }
-      if (x === "none") return 0;
-      return parseFloat(x);
-    });
-    alpha = parts.length > dims ? parts.pop() : 1;
-  } else if (/[0-9](?:\s|\/|,)/.test(cstr)) {
-    parts = cstr.match(/([0-9]+)/g).map(function(value) {
-      return parseFloat(value);
-    });
-    space = cstr.match(/([a-z])/ig)?.join("")?.toLowerCase() || "rgb";
-  }
-  return {
-    space,
-    values: parts,
-    alpha
-  };
 }
-import rgb from "color-space/rgb.js";
-import hsl from "color-space/hsl.js";
-function rgba(color) {
-  if (Array.isArray(color) && color.raw) color = String.raw(...arguments);
-  if (color instanceof Number) color = +color;
-  var values, i, l;
-  var parsed = color_parse_default(color);
-  if (!parsed.space) return [];
-  const min = parsed.space[0] === "h" ? hsl.min : rgb.min;
-  const max = parsed.space[0] === "h" ? hsl.max : rgb.max;
-  values = Array(3);
-  values[0] = Math.min(Math.max(parsed.values[0], min[0]), max[0]);
-  values[1] = Math.min(Math.max(parsed.values[1], min[1]), max[1]);
-  values[2] = Math.min(Math.max(parsed.values[2], min[2]), max[2]);
-  if (parsed.space[0] === "h") {
-    values = hsl.rgb(values);
-  }
-  values.push(Math.min(Math.max(parsed.alpha, 0), 1));
-  return values;
-}
-import { numToHex } from "@bhsd/common";
-var rgbCallExpRegex = /^rgba?\(\s*(?:\d*\.)?\d+%?(?:\s|\s*,)\s*(?:\d*\.)?\d+%?(?:\s|\s*,)\s*(?:\d*\.)?\d+%?\s*(?:[,/]\s*(?:\d*\.)?\d+%?\s*)?\)$/iu;
-var hslCallExpRegex = /^hsla?\(\s*(?:\d*\.)?\d+(?:deg|g?rad|turn)?(?:\s|\s*,)\s*(?:\d*\.)?\d+%?(?:\s|\s*,)\s*(?:\d*\.)?\d+%?\s*(?:[,/]\s*(?:\d*\.)?\d+%?\s*)?\)$/iu;
-var hexRegex = /^#(?:[\da-f]{3,4}|(?:[\da-f]{2}){3,4})$/iu;
-var parseCallExpression = (callExp) => {
-  const fn = callExp.split("(", 1)[0].toLowerCase();
-  switch (fn) {
-    case "rgba":
-    case "rgb":
-      if (!rgbCallExpRegex.test(callExp)) {
-        return void 0;
-      }
-      break;
-    case "hsla":
-    case "hsl":
-      if (!hslCallExpRegex.test(callExp)) {
-        return void 0;
-      }
-      break;
-    default:
-      return void 0;
-  }
-  const [r, g, b, alpha] = rgba(callExp);
-  return alpha !== void 0 && {
-    colorType: fn,
-    color: [r, g, b].map(Math.round),
-    alpha,
-    legacy: callExp.includes(","),
-    spaced: /\s/u.test(callExp)
-  };
-};
-var parseColorLiteral = (colorLiteral) => {
-  if (!hexRegex.test(colorLiteral)) {
-    return false;
-  }
-  const [r, g, b, alpha] = rgba(colorLiteral), { length } = colorLiteral;
-  return alpha !== void 0 && {
-    colorType: "hex",
-    color: [r, g, b],
-    alpha,
-    legacy: length === 4 || length === 7,
-    spaced: false
-  };
-};
-var parseNamedColor = (colorName, colors) => {
-  const lcName = colorName.toLowerCase();
-  if (!colors || !Object.hasOwn(colors, lcName)) {
-    return false;
-  }
-  const color = colors[lcName];
-  return {
-    colorType: "named",
-    color,
-    alpha: 1,
-    legacy: true,
-    spaced: false
-  };
-};
-var getDelimiter = (legacy, spaced) => legacy ? `,${spaced ? " " : ""}` : " ";
-var alphaToString = (alpha, legacy, spaced) => alpha === 1 ? "" : (legacy ? `,${spaced ? " " : ""}` : " / ") + String(alpha === 0 ? alpha : Number(alpha.toFixed(2)));
-var colorToString = ({ color, alpha, colorType, legacy, spaced }, value, colors) => {
-  const currentColor = rgba(value).slice(0, 3);
-  if (currentColor.every((c, i) => c === Math.round(color[i]))) {
-    return false;
-  }
-  const delimiter = getDelimiter(legacy, spaced);
-  switch (colorType) {
-    case "rgba":
-    case "rgb":
-      return `${colorType}(${currentColor.join(delimiter)}${alphaToString(alpha, legacy, spaced)})`;
-    case "hsla":
-    case "hsl": {
-      const [h, s, l] = rgb2.hsl(currentColor.slice(0, 3));
-      return `${colorType}(${[Math.round(h), `${Math.round(s)}%`, `${Math.round(l)}%`].join(delimiter)}${alphaToString(alpha, legacy, spaced)})`;
-    }
-    case "named":
-      if (colors && alpha === 1) {
-        const colorName = Object.entries(colors).find(([, colorValues]) => colorValues.every((c, i) => c === currentColor[i]))?.[0];
-        if (colorName) {
-          return colorName;
-        }
-      }
-    // fall through
-    case "hex":
-      return value + (alpha === 1 ? "" : numToHex(alpha));
-    default:
-      throw new Error("Unknown color type");
-  }
-};
-var wrapperClassName = "cm-css-color-picker-wrapper";
-var pickerState = /* @__PURE__ */ new WeakMap();
-var ColorPickerWidget = class extends WidgetType {
-  /** @class */
-  constructor(state, readOnly) {
-    super();
-    this.state = state;
-    this.readonly = readOnly;
-  }
-  /** @override */
-  eq(other) {
-    return other.readonly === this.readonly && other.state.from === this.state.from && other.state.to === this.state.to && other.state.colorType === this.state.colorType && other.state.color === this.state.color && other.state.alpha === this.state.alpha && other.state.legacy === this.state.legacy && other.state.spaced === this.state.spaced;
-  }
-  /** @override */
-  toDOM() {
-    const picker = document.createElement("input");
-    picker.type = "color";
-    picker.value = `#${this.state.color.map((c) => intToHex(c)).join("")}`;
-    if (this.readonly || this.state.colorType === "unknown") {
-      picker.disabled = true;
+/**
+ * Compute color picker decorations
+ * @param view the editor view for which to compute decorations
+ * @param discoverColors the function to discover colors in a syntax node; return `false` to skip children
+ */
+const colorPickersDecorations = (view, discoverColors) => {
+    const widgets = [], { state, visibleRanges } = view, tree = syntaxTree(state);
+    for (const { from, to } of visibleRanges) {
+        tree.iterate({
+            from,
+            to,
+            enter(node) {
+                const widgetOptions = discoverColors(tree, node, state.doc);
+                if (!widgetOptions) {
+                    return widgetOptions;
+                }
+                for (const wo of Array.isArray(widgetOptions) ? widgetOptions : [widgetOptions]) {
+                    if (wo.colorType !== 'unknown') {
+                        const value = state.sliceDoc(wo.from, wo.to);
+                        let data;
+                        if (value.includes('(')) {
+                            data = parseCallExpression(value);
+                        }
+                        else if (value.startsWith('#')) {
+                            data = parseColorLiteral(value);
+                        }
+                        else {
+                            data = parseNamedColor(value);
+                        }
+                        if (!data) {
+                            continue;
+                        }
+                        Object.assign(wo, data);
+                    }
+                    widgets.push(Decoration.widget({
+                        widget: new ColorPickerWidget(wo, state.readOnly),
+                        side: 1,
+                    }).range(wo.from));
+                }
+                return undefined;
+            },
+        });
     }
-    pickerState.set(picker, this.state);
-    const wrapper = document.createElement("span");
-    wrapper.className = wrapperClassName;
-    wrapper.append(picker);
-    return wrapper;
-  }
-  /** @override */
-  ignoreEvent(e) {
-    return e.type !== "change";
-  }
-};
-var colorPickersDecorations = (view, discoverColors, colors) => {
-  const widgets = [], { state, visibleRanges } = view, tree = syntaxTree(state);
-  for (const { from, to } of visibleRanges) {
-    tree.iterate({
-      from,
-      to,
-      enter(node) {
-        const widgetOptions = discoverColors(tree, node, state.doc);
-        if (!widgetOptions) {
-          return widgetOptions;
-        }
-        for (const wo of Array.isArray(widgetOptions) ? widgetOptions : [widgetOptions]) {
-          if (wo.colorType !== "unknown") {
-            const value = state.sliceDoc(wo.from, wo.to);
-            let data;
-            if (value.includes("(")) {
-              data = parseCallExpression(value);
-            } else if (value.startsWith("#")) {
-              data = parseColorLiteral(value);
-            } else {
-              data = parseNamedColor(value, colors);
-            }
-            if (!data) {
-              continue;
-            }
-            Object.assign(wo, data);
-          }
-          widgets.push(
-            Decoration.widget({
-              widget: new ColorPickerWidget(wo, state.readOnly),
-              side: 1
-            }).range(wo.from)
-          );
-        }
-        return void 0;
-      }
-    });
-  }
-  return Decoration.set(widgets);
+    return Decoration.set(widgets);
 };
-var colorPickerTheme = EditorView.baseTheme({
-  [`.${wrapperClassName}`]: {
-    display: "inline-block",
-    marginLeft: "0.6ch",
-    marginRight: "0.6ch",
-    height: "1em",
-    width: "1em",
-    transform: "translateY(0.1em)",
-    '&>input[type="color"]': {
-      height: "100%",
-      width: "100%",
-      padding: 0,
-      appearance: "none",
-      border: "none",
-      borderRadius: 0,
-      outline: "1px solid #ddd",
-      "&:enabled": {
-        cursor: "pointer"
-      },
-      "&::-webkit-color-swatch-wrapper": {
-        padding: 0
-      },
-      "&::-webkit-color-swatch": {
-        border: "none",
-        borderRadius: 0
-      },
-      "&::-moz-color-swatch": {
-        border: "none",
-        borderRadius: 0
-      }
-    }
-  }
+const getBgImage = (fg, bg) => `linear-gradient(45deg, ${fg} 25%, transparent 25%, transparent 75%, ${fg} 75%),
+linear-gradient(45deg, ${fg} 25%, ${bg} 25%, ${bg} 75%, ${fg} 75%)`;
+const colorPickerTheme = EditorView.baseTheme({
+    [`.${wrapperClassName}`]: {
+        display: 'inline-block',
+        marginLeft: '0.6ch',
+        marginRight: '0.6ch',
+        height: '1em',
+        width: '1em',
+        outline: '1px solid #ddd',
+        position: 'relative',
+        transform: 'translateY(0.1em)',
+        backgroundSize: '0.4em 0.4em',
+        backgroundPosition: '0 0, 0.2em 0.2em',
+        '&>input[type="color"]': {
+            height: '100%',
+            width: '100%',
+            padding: 0,
+            appearance: 'none',
+            border: 'none',
+            borderRadius: 0,
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            '&:enabled': {
+                cursor: 'pointer',
+            },
+            '&::-webkit-color-swatch-wrapper': {
+                padding: 0,
+            },
+            '&::-webkit-color-swatch': {
+                border: 'none',
+                borderRadius: 0,
+            },
+            '&::-moz-color-swatch': {
+                border: 'none',
+                borderRadius: 0,
+            },
+        },
+    },
+    [`&light .${wrapperClassName}`]: {
+        backgroundImage: getBgImage('#aaa', '#fff'),
+    },
+    [`&dark .${wrapperClassName}`]: {
+        backgroundImage: getBgImage('#888', '#000'),
+    },
 });
-var makeColorPicker = (discoverColors, colors) => [
-  ViewPlugin.fromClass(
-    class ColorPickerViewPlugin {
-      /** @class */
-      constructor(view) {
-        this.readOnly = view.state.readOnly;
-        this.decorations = colorPickersDecorations(view, discoverColors, colors);
-      }
-      /** @implements */
-      update({ docChanged, viewportChanged, view }) {
-        const { readOnly } = view.state;
-        if (docChanged || viewportChanged || readOnly !== this.readOnly) {
-          this.readOnly = readOnly;
-          this.decorations = colorPickersDecorations(view, discoverColors, colors);
+/**
+ * Factory function to create a color picker plugin with the given options
+ * @param discoverColors the function to discover colors in a syntax node; return `false` to skip children
+ */
+export const makeColorPicker = (discoverColors) => [
+    ViewPlugin.fromClass(class ColorPickerViewPlugin {
+        /** @class */
+        constructor(view) {
+            this.readOnly = view.state.readOnly;
+            this.decorations = colorPickersDecorations(view, discoverColors);
         }
-      }
-    },
-    {
-      decorations(v) {
-        return v.decorations;
-      },
-      eventHandlers: {
-        change(e, view) {
-          const target = e.target;
-          if (target.nodeName !== "INPUT" || target.type !== "color" || !target.parentElement?.classList.contains(wrapperClassName)) {
-            return false;
-          }
-          const state = pickerState.get(target), insert = colorToString(state, target.value, colors);
-          if (insert) {
-            const { from, to } = state;
-            view.dispatch({
-              changes: { from, to, insert }
-            });
-          }
-          return true;
+        /** @implements */
+        update({ docChanged, viewportChanged, view }) {
+            const { readOnly } = view.state;
+            if (docChanged || viewportChanged || readOnly !== this.readOnly) {
+                this.readOnly = readOnly;
+                this.decorations = colorPickersDecorations(view, discoverColors);
+            }
         }
-      }
-    }
-  ),
-  colorPickerTheme
+    }, {
+        decorations(v) {
+            return v.decorations;
+        },
+        eventHandlers: {
+            change(e, view) {
+                const target = e.target;
+                if (target.nodeName !== 'INPUT'
+                    || target.type !== 'color'
+                    || !target.parentElement?.classList.contains(wrapperClassName)) {
+                    return false;
+                }
+                const state = pickerState.get(target), insert = colorToString(state, target.value);
+                if (insert) {
+                    const { from, to } = state;
+                    view.dispatch({
+                        changes: { from, to, insert },
+                    });
+                }
+                return true;
+            },
+        },
+    }),
+    colorPickerTheme,
 ];
-var colorPicker = /* @__PURE__ */ makeColorPicker(discoverColorsInCSS, namedColors);
-export {
-  colorPicker,
-  makeColorPicker,
-  namedColors,
-  wrapperClassName
-};
+/** Default color picker plugin for CSS and HTML */
+export const colorPicker = /* #__PURE__ */ makeColorPicker(discoverColorsInCSS);

package/dist/types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@bhsd/codemirror-css-color-picker",
-	"version": "7.1.1",
+	"version": "8.0.0",
 	"description": "Enables a color picker input next to CSS colors",
 	"homepage": "https://github.com/bhsd-harry/Codemirror-CSS-color-picker#readme",
 	"bugs": {
@@ -17,8 +17,7 @@
 	},
 	"type": "module",
 	"files": [
-		"/dist/index.js",
-		"/dist/*.d.ts"
+		"/dist/"
 	],
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -29,32 +28,29 @@
 		"lint:ts": "tsc --noEmit && eslint --cache .",
 		"lint:md": "markdownlint-cli2 '**/*.md'",
 		"lint": "npm run lint:ts && npm run lint:md",
-		"build": "tsc && node build.js && gsed '/^\\/\\/ /d' build/index.js > dist/index.js && eslint --no-config-lookup -c eslint.dist.mjs dist/index.js",
+		"build": "tsc && eslint --no-config-lookup -c eslint.dist.mjs dist/*.js",
 		"build:test": "tsc --project test/tsconfig.json && npm test",
 		"test": "mocha"
 	},
+	"peerDependencies": {
+		"@codemirror/language": "^6.0.0",
+		"@codemirror/view": "^6.0.0"
+	},
 	"dependencies": {
-		"@bhsd/common": "^2.2.1",
-		"@codemirror/language": "^6.12.3",
-		"@codemirror/state": "^6.6.0",
-		"@codemirror/view": "^6.42.1",
-		"color-name": "~2.0.2",
-		"color-space": "^2.3.2"
+		"@bhsd/common": "^3.0.0"
 	},
 	"devDependencies": {
-		"@bhsd/code-standard": "^2.5.0",
+		"@bhsd/code-standard": "^2.7.0",
+		"@codemirror/language": "^6.12.3",
 		"@codemirror/lang-css": "^6.3.1",
 		"@codemirror/lang-html": "^6.4.11",
-		"@types/color-name": "^2.0.0",
-		"@types/color-rgba": "^2.1.3",
+		"@codemirror/state": "^6.6.0",
+		"@codemirror/view": "^6.42.1",
 		"@types/mocha": "^10.0.10",
-		"@types/node": "^25.9.0",
-		"@typescript-eslint/parser": "^8.59.4",
-		"color-rgba": "^3.0.0",
 		"esbuild": "^0.28.0",
-		"eslint": "^10.4.0",
+		"eslint": "^10.4.1",
 		"markdownlint-cli2": "^0.22.1",
-		"mocha": "^11.7.5",
+		"mocha": "^11.7.6",
 		"typescript": "^6.0.3"
 	}
 }