@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/components/ColorPicker/ColorPicker.scss

@@ -0,0 +1,441 @@
+@import "../../css/variables.module.scss";
+
+.excalidraw {
+  .focus-visible-none {
+    &:focus-visible {
+      outline: none !important;
+    }
+  }
+
+  .color-picker__heading {
+    padding: 0 0.5rem;
+    font-size: 0.75rem;
+    text-align: left;
+  }
+
+  .color-picker-container {
+    display: grid;
+    grid-template-columns: 1fr 20px 1.625rem;
+    padding: 0.25rem 0px;
+    align-items: center;
+
+    @include isMobile {
+      max-width: 175px;
+    }
+  }
+
+  .color-picker__top-picks {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .color-picker__button {
+    --radius: 0.25rem;
+
+    padding: 0;
+    margin: 0;
+    width: 1.35rem;
+    height: 1.35rem;
+    border: 1px solid var(--color-gray-30);
+    border-radius: var(--radius);
+    filter: var(--theme-filter);
+    background-color: var(--swatch-color);
+    background-position: left center;
+    position: relative;
+    font-family: inherit;
+    box-sizing: border-box;
+
+    &:hover {
+      &::after {
+        content: "";
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        box-shadow: 0 0 0 1px var(--color-gray-30);
+        border-radius: calc(var(--radius) + 1px);
+        filter: var(--theme-filter);
+      }
+    }
+
+    &.active {
+      .color-picker__button-outline {
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        box-shadow: 0 0 0 1px var(--color-primary-darkest);
+        z-index: 1; // due hover state so this has preference
+        border-radius: calc(var(--radius) + 1px);
+        filter: var(--theme-filter);
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: -4px;
+        right: -4px;
+        bottom: -4px;
+        left: -4px;
+        border: 3px solid var(--focus-highlight-color);
+        border-radius: calc(var(--radius) + 1px);
+      }
+
+      &.active {
+        .color-picker__button-outline {
+          display: none;
+        }
+      }
+    }
+
+    &--large {
+      --radius: 0.5rem;
+      width: 1.875rem;
+      height: 1.875rem;
+    }
+
+    &.is-transparent {
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==");
+    }
+
+    &--no-focus-visible {
+      border: 0;
+      &::after {
+        display: none;
+      }
+      &:focus-visible {
+        outline: none !important;
+      }
+    }
+
+    &.active-color {
+      border-radius: calc(var(--radius) + 1px);
+      width: 1.625rem;
+      height: 1.625rem;
+    }
+  }
+
+  .color-picker__button__hotkey-label {
+    position: absolute;
+    right: 4px;
+    bottom: 4px;
+    filter: none;
+    font-size: 11px;
+  }
+
+  .color-picker {
+    background: var(--popup-bg-color);
+    border: 0 solid transparentize($oc-white, 0.75);
+    box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
+    border-radius: 4px;
+    position: absolute;
+
+    :root[dir="ltr"] & {
+      left: -5.5px;
+    }
+
+    :root[dir="rtl"] & {
+      right: -5.5px;
+    }
+  }
+
+  .color-picker-control-container {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    column-gap: 0.5rem;
+  }
+
+  .color-picker-control-container + .popover {
+    position: static;
+  }
+
+  .color-picker-popover-container {
+    margin-top: -0.25rem;
+
+    :root[dir="ltr"] & {
+      margin-left: 0.5rem;
+    }
+
+    :root[dir="rtl"] & {
+      margin-left: -3rem;
+    }
+  }
+
+  .color-picker-triangle {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 9px 10px;
+    border-color: transparent transparent var(--popup-bg-color);
+    position: absolute;
+    top: 10px;
+
+    :root[dir="ltr"] & {
+      transform: rotate(270deg);
+      left: -14px;
+    }
+
+    :root[dir="rtl"] & {
+      transform: rotate(90deg);
+      right: -14px;
+    }
+  }
+
+  .color-picker-triangle-shadow {
+    border-color: transparent transparent transparentize($oc-black, 0.9);
+
+    :root[dir="ltr"] & {
+      left: -14px;
+    }
+
+    :root[dir="rtl"] & {
+      right: -16px;
+    }
+  }
+
+  .color-picker-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    outline: none;
+  }
+
+  .color-picker-content--default {
+    padding: 0.5rem;
+    display: grid;
+    grid-template-columns: repeat(5, 1.875rem);
+    grid-gap: 0.25rem;
+    border-radius: 4px;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--focus-highlight-color);
+    }
+  }
+
+  .color-picker-content--canvas {
+    display: flex;
+    flex-direction: column;
+    padding: 0.25rem;
+
+    &-title {
+      color: $oc-gray-6;
+      font-size: 12px;
+      padding: 0 0.25rem;
+    }
+
+    &-colors {
+      padding: 0.5rem 0;
+
+      .color-picker-swatch {
+        margin: 0 0.25rem;
+      }
+    }
+  }
+
+  .color-picker-content .color-input-container {
+    grid-column: 1 / span 5;
+  }
+
+  .color-picker-swatch {
+    position: relative;
+    height: 1.875rem;
+    width: 1.875rem;
+    cursor: pointer;
+    border-radius: 4px;
+    margin: 0;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+    background-color: currentColor !important;
+    filter: var(--theme-filter);
+
+    &:focus {
+      /* TODO: only show the border when the color is too light to see as a shadow */
+      box-shadow: 0 0 4px 1px currentColor;
+      border-color: var(--select-highlight-color);
+    }
+  }
+
+  .color-picker-transparent {
+    border-radius: 4px;
+    box-shadow: transparentize($oc-black, 0.9) 0 0 0 1px inset;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .color-picker-transparent,
+  .color-picker-label-swatch {
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
+      left center;
+  }
+
+  .color-picker-hash {
+    height: var(--default-button-size);
+    flex-shrink: 0;
+    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+    border: 1px solid var(--default-border-color);
+    border-right: 0;
+    box-sizing: border-box;
+
+    :root[dir="ltr"] & {
+      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+    }
+
+    :root[dir="rtl"] & {
+      border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+      border-right: 1px solid var(--default-border-color);
+      border-left: 0;
+    }
+
+    color: var(--input-label-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .color-input-container {
+    display: flex;
+
+    &:focus-within {
+      box-shadow: 0 0 0 1px var(--color-primary-darkest);
+      border-radius: var(--border-radius-lg);
+    }
+  }
+
+  .color-picker__input-label {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    gap: 8px;
+    align-items: center;
+    border: 1px solid var(--default-border-color);
+    border-radius: 8px;
+    padding: 0 12px;
+    margin: 8px;
+    box-sizing: border-box;
+
+    &:focus-within {
+      box-shadow: 0 0 0 1px var(--color-primary-darkest);
+      border-radius: var(--border-radius-lg);
+    }
+  }
+
+  .color-picker__input-hash {
+    padding: 0 0.25rem;
+  }
+
+  .color-picker-input {
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    font-size: 0.875rem;
+    font-family: inherit;
+    background-color: transparent;
+    color: var(--text-primary-color);
+    border: 0;
+    outline: none;
+    height: var(--default-button-size);
+    border: 1px solid var(--default-border-color);
+    border-left: 0;
+    letter-spacing: 0.4px;
+
+    :root[dir="ltr"] & {
+      border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+    }
+
+    :root[dir="rtl"] & {
+      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+      border-left: 1px solid var(--default-border-color);
+      border-right: 0;
+    }
+
+    padding: 0.5rem;
+    padding-left: 0.25rem;
+    appearance: none;
+
+    &:focus-visible {
+      box-shadow: none;
+    }
+  }
+
+  .color-picker-label-swatch-container {
+    border: 1px solid var(--default-border-color);
+    border-radius: var(--border-radius-lg);
+    width: var(--default-button-size);
+    height: var(--default-button-size);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .color-picker-label-swatch {
+    @include outlineButtonStyles;
+    background-color: var(--swatch-color) !important;
+    overflow: hidden;
+    position: relative;
+    filter: var(--theme-filter);
+    border: 0 !important;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--swatch-color);
+    }
+  }
+
+  .color-picker-keybinding {
+    position: absolute;
+    bottom: 2px;
+    font-size: 0.7em;
+
+    :root[dir="ltr"] & {
+      right: 2px;
+    }
+
+    :root[dir="rtl"] & {
+      left: 2px;
+    }
+
+    @include isMobile {
+      display: none;
+    }
+  }
+
+  .color-picker-type-canvasBackground .color-picker-keybinding {
+    color: #aaa;
+  }
+
+  .color-picker-type-elementBackground .color-picker-keybinding {
+    color: $oc-white;
+  }
+
+  .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
+    color: #aaa;
+  }
+
+  .color-picker-type-elementStroke .color-picker-keybinding {
+    color: #d4d4d4;
+  }
+
+  &.theme--dark {
+    .color-picker-type-elementBackground .color-picker-keybinding {
+      color: $oc-black;
+    }
+    .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
+      color: $oc-black;
+    }
+  }
+}

package/dist/packages/excalidraw/components/ColorPicker/CustomColorList.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useAtom } from "jotai";
+import { useEffect, useRef } from "react";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
+import HotkeyLabel from "./HotkeyLabel";
+export const CustomColorList = ({ colors, color, onChange, label, }) => {
+    const [activeColorPickerSection, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
+    const btnRef = useRef(null);
+    useEffect(() => {
+        if (btnRef.current) {
+            btnRef.current.focus();
+        }
+    }, [color, activeColorPickerSection]);
+    return (_jsx("div", { className: "color-picker-content--default", children: colors.map((c, i) => {
+            return (_jsxs("button", { ref: color === c ? btnRef : undefined, tabIndex: -1, type: "button", className: clsx("color-picker__button color-picker__button--large", {
+                    active: color === c,
+                    "is-transparent": c === "transparent" || !c,
+                }), onClick: () => {
+                    onChange(c);
+                    setActiveColorPickerSection("custom");
+                }, title: c, "aria-label": label, style: { "--swatch-color": c }, children: [_jsx("div", { className: "color-picker__button-outline" }), _jsx(HotkeyLabel, { color: c, keyLabel: i + 1, isCustomColor: true })] }, i));
+        }) }));
+};

package/dist/packages/excalidraw/components/ColorPicker/HotkeyLabel.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { getContrastYIQ } from "./colorPickerUtils";
+const HotkeyLabel = ({ color, keyLabel, isCustomColor = false, isShade = false, }) => {
+    return (_jsxs("div", { className: "color-picker__button__hotkey-label", style: {
+            color: getContrastYIQ(color, isCustomColor),
+        }, children: [isShade && "⇧", keyLabel] }));
+};
+export default HotkeyLabel;

package/dist/packages/excalidraw/components/ColorPicker/Picker.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { t } from "../../i18n";
+import { ShadeList } from "./ShadeList";
+import PickerColorList from "./PickerColorList";
+import { useAtom } from "jotai";
+import { CustomColorList } from "./CustomColorList";
+import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
+import PickerHeading from "./PickerHeading";
+import { activeColorPickerSectionAtom, getColorNameAndShadeFromColor, getMostUsedCustomColors, isCustomColor, } from "./colorPickerUtils";
+import { DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX, DEFAULT_ELEMENT_STROKE_COLOR_INDEX, } from "../../colors";
+import { KEYS } from "../../keys";
+import { EVENT } from "../../constants";
+export const Picker = ({ color, onChange, label, type, elements, palette, updateData, children, onEyeDropperToggle, onEscape, }) => {
+    const [customColors] = React.useState(() => {
+        if (type === "canvasBackground") {
+            return [];
+        }
+        return getMostUsedCustomColors(elements, type, palette);
+    });
+    const [activeColorPickerSection, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
+    const colorObj = getColorNameAndShadeFromColor({
+        color,
+        palette,
+    });
+    useEffect(() => {
+        if (!activeColorPickerSection) {
+            const isCustom = isCustomColor({ color, palette });
+            const isCustomButNotInList = isCustom && !customColors.includes(color);
+            setActiveColorPickerSection(isCustomButNotInList
+                ? "hex"
+                : isCustom
+                    ? "custom"
+                    : colorObj?.shade != null
+                        ? "shades"
+                        : "baseColors");
+        }
+    }, [
+        activeColorPickerSection,
+        color,
+        palette,
+        setActiveColorPickerSection,
+        colorObj,
+        customColors,
+    ]);
+    const [activeShade, setActiveShade] = useState(colorObj?.shade ??
+        (type === "elementBackground"
+            ? DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX
+            : DEFAULT_ELEMENT_STROKE_COLOR_INDEX));
+    useEffect(() => {
+        if (colorObj?.shade != null) {
+            setActiveShade(colorObj.shade);
+        }
+        const keyup = (event) => {
+            if (event.key === KEYS.ALT) {
+                onEyeDropperToggle(false);
+            }
+        };
+        document.addEventListener(EVENT.KEYUP, keyup, { capture: true });
+        return () => {
+            document.removeEventListener(EVENT.KEYUP, keyup, { capture: true });
+        };
+    }, [colorObj, onEyeDropperToggle]);
+    const pickerRef = React.useRef(null);
+    return (_jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": t("labels.colorPicker"), children: _jsxs("div", { ref: pickerRef, onKeyDown: (event) => {
+                const handled = colorPickerKeyNavHandler({
+                    event,
+                    activeColorPickerSection,
+                    palette,
+                    color,
+                    onChange,
+                    onEyeDropperToggle,
+                    customColors,
+                    setActiveColorPickerSection,
+                    updateData,
+                    activeShade,
+                    onEscape,
+                });
+                if (handled) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            }, className: "color-picker-content", 
+            // to allow focusing by clicking but not by tabbing
+            tabIndex: -1, children: [!!customColors.length && (_jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.mostUsedCustomColors") }), _jsx(CustomColorList, { colors: customColors, color: color, label: t("colorPicker.mostUsedCustomColors"), onChange: onChange })] })), _jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.colors") }), _jsx(PickerColorList, { color: color, label: label, palette: palette, onChange: onChange, activeShade: activeShade })] }), _jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.shades") }), _jsx(ShadeList, { hex: color, onChange: onChange, palette: palette })] }), children] }) }));
+};

package/dist/packages/excalidraw/components/ColorPicker/PickerColorList.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useAtom } from "jotai";
+import { useEffect, useRef } from "react";
+import { activeColorPickerSectionAtom, colorPickerHotkeyBindings, getColorNameAndShadeFromColor, } from "./colorPickerUtils";
+import HotkeyLabel from "./HotkeyLabel";
+import { t } from "../../i18n";
+const PickerColorList = ({ palette, color, onChange, label, activeShade, }) => {
+    const colorObj = getColorNameAndShadeFromColor({
+        color: color || "transparent",
+        palette,
+    });
+    const [activeColorPickerSection, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
+    const btnRef = useRef(null);
+    useEffect(() => {
+        if (btnRef.current && activeColorPickerSection === "baseColors") {
+            btnRef.current.focus();
+        }
+    }, [colorObj?.colorName, activeColorPickerSection]);
+    return (_jsx("div", { className: "color-picker-content--default", children: Object.entries(palette).map(([key, value], index) => {
+            const color = (Array.isArray(value) ? value[activeShade] : value) || "transparent";
+            const keybinding = colorPickerHotkeyBindings[index];
+            const label = t(`colors.${key.replace(/\d+/, "")}`, null, "");
+            return (_jsxs("button", { ref: colorObj?.colorName === key ? btnRef : undefined, tabIndex: -1, type: "button", className: clsx("color-picker__button color-picker__button--large", {
+                    active: colorObj?.colorName === key,
+                    "is-transparent": color === "transparent" || !color,
+                }), onClick: () => {
+                    onChange(color);
+                    setActiveColorPickerSection("baseColors");
+                }, title: `${label}${color.startsWith("#") ? ` ${color}` : ""} — ${keybinding}`, "aria-label": `${label} — ${keybinding}`, style: color ? { "--swatch-color": color } : undefined, "data-testid": `color-${key}`, children: [_jsx("div", { className: "color-picker__button-outline" }), _jsx(HotkeyLabel, { color: color, keyLabel: keybinding })] }, key));
+        }) }));
+};
+export default PickerColorList;

package/dist/packages/excalidraw/components/ColorPicker/PickerHeading.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const PickerHeading = ({ children }) => (_jsx("div", { className: "color-picker__heading", children: children }));
+export default PickerHeading;

package/dist/packages/excalidraw/components/ColorPicker/ShadeList.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useAtom } from "jotai";
+import { useEffect, useRef } from "react";
+import { activeColorPickerSectionAtom, getColorNameAndShadeFromColor, } from "./colorPickerUtils";
+import HotkeyLabel from "./HotkeyLabel";
+import { t } from "../../i18n";
+export const ShadeList = ({ hex, onChange, palette }) => {
+    const colorObj = getColorNameAndShadeFromColor({
+        color: hex || "transparent",
+        palette,
+    });
+    const [activeColorPickerSection, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
+    const btnRef = useRef(null);
+    useEffect(() => {
+        if (btnRef.current && activeColorPickerSection === "shades") {
+            btnRef.current.focus();
+        }
+    }, [colorObj, activeColorPickerSection]);
+    if (colorObj) {
+        const { colorName, shade } = colorObj;
+        const shades = palette[colorName];
+        if (Array.isArray(shades)) {
+            return (_jsx("div", { className: "color-picker-content--default shades", children: shades.map((color, i) => (_jsxs("button", { ref: i === shade && activeColorPickerSection === "shades"
+                        ? btnRef
+                        : undefined, tabIndex: -1, type: "button", className: clsx("color-picker__button color-picker__button--large", { active: i === shade }), "aria-label": "Shade", title: `${colorName} - ${i + 1}`, style: color ? { "--swatch-color": color } : undefined, onClick: () => {
+                        onChange(color);
+                        setActiveColorPickerSection("shades");
+                    }, children: [_jsx("div", { className: "color-picker__button-outline" }), _jsx(HotkeyLabel, { color: color, keyLabel: i + 1, isShade: true })] }, i))) }));
+        }
+    }
+    return (_jsxs("div", { className: "color-picker-content--default", style: { position: "relative" }, tabIndex: -1, children: [_jsx("button", { type: "button", tabIndex: -1, className: "color-picker__button color-picker__button--large color-picker__button--no-focus-visible" }), _jsx("div", { tabIndex: -1, style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    textAlign: "center",
+                    fontSize: "0.75rem",
+                }, children: t("colorPicker.noShades") })] }));
+};

package/dist/packages/excalidraw/components/ColorPicker/TopPicks.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { DEFAULT_CANVAS_BACKGROUND_PICKS, DEFAULT_ELEMENT_BACKGROUND_PICKS, DEFAULT_ELEMENT_STROKE_PICKS, } from "../../colors";
+export const TopPicks = ({ onChange, type, activeColor, topPicks, }) => {
+    let colors;
+    if (type === "elementStroke") {
+        colors = DEFAULT_ELEMENT_STROKE_PICKS;
+    }
+    if (type === "elementBackground") {
+        colors = DEFAULT_ELEMENT_BACKGROUND_PICKS;
+    }
+    if (type === "canvasBackground") {
+        colors = DEFAULT_CANVAS_BACKGROUND_PICKS;
+    }
+    // this one can overwrite defaults
+    if (topPicks) {
+        colors = topPicks;
+    }
+    if (!colors) {
+        console.error("Invalid type for TopPicks");
+        return null;
+    }
+    return (_jsx("div", { className: "color-picker__top-picks", children: colors.map((color) => (_jsx("button", { className: clsx("color-picker__button", {
+                active: color === activeColor,
+                "is-transparent": color === "transparent" || !color,
+            }), style: { "--swatch-color": color }, type: "button", title: color, onClick: () => onChange(color), "data-testid": `color-top-pick-${color}`, children: _jsx("div", { className: "color-picker__button-outline" }) }, color))) }));
+};