@fibery/ui-kit 1.40.3 → 1.41.0

package/src/select/util.ts

@@ -1,5 +1,5 @@
 import {GroupBase as ReactSelectGroupBase, OptionsOrGroups, SelectInstance} from "react-select";
-import {isObject} from "lodash";
+import isObject from "lodash/isObject";
 import {Children, createContext, ReactNode, RefObject} from "react";
 
 /**

package/src/static-palettes.ts

@@ -0,0 +1,356 @@
+import {makeDefaultPalette, selectPalette, type ThemePalette} from "./palette-generator";
+
+export interface LabPalettes {
+  make: () => ThemePalette;
+}
+
+export const StaticPalettes: LabPalettes[] = [
+  // warm grays (hue ~50) + orange accent (hue 15)
+  {
+    make: () => {
+      const base = selectPalette({warmLook: true, isArchitect: false});
+      return {
+        ...base,
+        key: "clawd",
+        base: [
+          null,
+          "hsl(0, 0%, 100%)", // bg-000
+          "hsl(48, 33%, 97%)", // bg-100
+          "hsl(53, 29%, 95%)", // bg-200
+          "hsl(48, 25%, 92%)", // bg-300
+          "hsl(50, 21%, 89%)", // bg-400
+          "hsl(51, 17%, 85%)", // pictogram area
+          "hsl(51, 10%, 70%)",
+          "hsl(51, 6%, 57%)",
+          "hsl(51, 3%, 44%)", // text-500
+          "hsl(55, 3%, 34%)",
+          "hsl(60, 3%, 23%)", // text-200
+          "hsl(60, 3%, 8%)", // text-000
+        ],
+        baseDark: [
+          null,
+          "hsl(60, 3%, 8%)", // bg-300
+          "hsl(30, 3%, 12%)", // bg-200
+          "hsl(60, 3%, 15%)", // bg-100
+          "hsl(60, 2%, 18%)", // bg-000
+          "hsl(60, 3%, 23%)", // pictogram-200
+          "hsl(48, 3%, 29%)", // pictogram-100
+          "hsl(50, 4%, 37%)",
+          "hsl(49, 4%, 47%)",
+          "hsl(48, 5%, 59%)", // text-400
+          "hsl(50, 7%, 67%)",
+          "hsl(50, 9%, 74%)", // text-200
+          "hsl(48, 33%, 97%)", // text-000
+        ],
+        accent: [
+          null,
+          "hsl(15, 60%, 99%)",
+          "hsl(15, 85%, 97%)",
+          "hsl(15, 80%, 94%)",
+          "hsl(15, 75%, 91%)",
+          "hsl(15, 70%, 87%)",
+          "hsl(15, 66%, 82%)",
+          "hsl(15, 62%, 74%)",
+          "hsl(15, 60%, 67%)",
+          "hsl(15, 63%, 60%)", // accent-brand
+          "hsl(15, 57%, 53%)",
+          "hsl(15, 54%, 46%)",
+          "hsl(15, 50%, 18%)",
+        ],
+        accentDark: [
+          null,
+          "hsl(16, 22%, 10%)",
+          "hsl(16, 34%, 13%)",
+          "hsl(15, 42%, 18%)",
+          "hsl(15, 46%, 22%)",
+          "hsl(15, 48%, 26%)",
+          "hsl(15, 50%, 30%)",
+          "hsl(15, 53%, 38%)",
+          "hsl(15, 56%, 48%)",
+          "hsl(15, 63%, 60%)", // accent-brand
+          "hsl(15, 65%, 66%)",
+          "hsl(15, 72%, 78%)",
+          "hsl(15, 82%, 96%)",
+        ],
+      };
+    },
+  },
+  // Console theme — pure neutral blacks + teal accent (hue 158)
+  {
+    make: () => {
+      const base = selectPalette({warmLook: true, isArchitect: false});
+      return {
+        ...base,
+        key: "clawd-console",
+        base: [
+          null,
+          "hsl(0, 0%, 99%)",
+          "hsl(0, 0%, 97%)",
+          "hsl(0, 0%, 95%)",
+          "hsl(0, 0%, 92%)",
+          "hsl(0, 0%, 88%)",
+          "hsl(0, 0%, 83%)",
+          "hsl(0, 0%, 75%)",
+          "hsl(0, 0%, 65%)",
+          "hsl(0, 0%, 48%)",
+          "hsl(0, 0%, 35%)",
+          "hsl(0, 0%, 23%)",
+          "hsl(0, 0%, 6%)",
+        ],
+        baseDark: [
+          null,
+          "hsl(0, 0%, 6%)", // bg-000
+          "hsl(0, 0%, 10%)", // bg-100
+          "hsl(0, 0%, 14%)", // bg-200
+          "hsl(0, 0%, 17%)", // bg-300
+          "hsl(0, 0%, 19%)", // bg-400
+          "hsl(0, 0%, 23%)", // bg-500
+          "hsl(0, 0%, 33%)",
+          "hsl(0, 0%, 41%)",
+          "hsl(45, 1%, 48%)", // text-500
+          "hsl(50, 1%, 65%)", // text-400
+          "hsl(30, 1%, 72%)", // text-300
+          "hsl(60, 4%, 95%)", // text-100
+        ],
+        accent: [
+          null,
+          "hsl(158, 60%, 99%)",
+          "hsl(158, 70%, 96%)",
+          "hsl(158, 66%, 92%)",
+          "hsl(158, 62%, 87%)",
+          "hsl(158, 58%, 80%)",
+          "hsl(158, 55%, 72%)",
+          "hsl(158, 58%, 60%)",
+          "hsl(158, 64%, 46%)",
+          "hsl(158, 68%, 32%)", // accent-secondary-000
+          "hsl(158, 80%, 28%)", // accent-secondary-100
+          "hsl(158, 79%, 25%)", // accent-secondary-200
+          "hsl(160, 18%, 16%)", // accent-secondary-900
+        ],
+        accentDark: [
+          null,
+          "hsl(160, 18%, 8%)",
+          "hsl(158, 36%, 10%)",
+          "hsl(158, 52%, 13%)",
+          "hsl(158, 60%, 16%)",
+          "hsl(158, 66%, 19%)",
+          "hsl(158, 70%, 22%)",
+          "hsl(158, 76%, 26%)",
+          "hsl(158, 78%, 30%)",
+          "hsl(158, 68%, 32%)", // accent-secondary-000
+          "hsl(158, 60%, 42%)",
+          "hsl(158, 50%, 58%)",
+          "hsl(158, 45%, 92%)",
+        ],
+      };
+    },
+  },
+  // Console theme variant — neutral blacks + orange accent (hue 18, darker than claude's hue 15)
+  {
+    make: () => {
+      const base = selectPalette({warmLook: true, isArchitect: false});
+      return {
+        ...base,
+        key: "clawd-console-warm",
+        base: [
+          null,
+          "hsl(0, 0%, 99%)",
+          "hsl(0, 0%, 97%)",
+          "hsl(0, 0%, 95%)",
+          "hsl(0, 0%, 92%)",
+          "hsl(0, 0%, 88%)",
+          "hsl(0, 0%, 83%)",
+          "hsl(0, 0%, 75%)",
+          "hsl(0, 0%, 65%)",
+          "hsl(0, 0%, 48%)",
+          "hsl(0, 0%, 35%)",
+          "hsl(0, 0%, 23%)",
+          "hsl(0, 0%, 6%)",
+        ],
+        baseDark: [
+          null,
+          "hsl(0, 0%, 6%)", // bg-000
+          "hsl(0, 0%, 10%)", // bg-100
+          "hsl(0, 0%, 14%)", // bg-200
+          "hsl(0, 0%, 17%)", // bg-300
+          "hsl(0, 0%, 19%)", // bg-400
+          "hsl(0, 0%, 23%)", // bg-500
+          "hsl(0, 0%, 33%)",
+          "hsl(0, 0%, 41%)",
+          "hsl(45, 1%, 48%)", // text-500
+          "hsl(50, 1%, 65%)", // text-400
+          "hsl(30, 1%, 72%)", // text-300
+          "hsl(60, 4%, 95%)", // text-100
+        ],
+        accent: [
+          null,
+          "hsl(18, 55%, 99%)",
+          "hsl(18, 78%, 96%)",
+          "hsl(18, 72%, 92%)",
+          "hsl(18, 66%, 87%)",
+          "hsl(18, 60%, 81%)",
+          "hsl(18, 56%, 73%)",
+          "hsl(18, 54%, 63%)",
+          "hsl(18, 52%, 54%)",
+          "hsl(18, 50%, 48%)", // accent-main-000
+          "hsl(18, 57%, 44%)", // accent-main-100
+          "hsl(19, 58%, 40%)", // accent-main-200
+          "hsl(16, 22%, 20%)", // accent-main-900
+        ],
+        accentDark: [
+          null,
+          "hsl(16, 22%, 10%)",
+          "hsl(17, 30%, 14%)",
+          "hsl(17, 36%, 18%)",
+          "hsl(17, 40%, 22%)",
+          "hsl(18, 44%, 27%)",
+          "hsl(18, 48%, 32%)",
+          "hsl(18, 50%, 38%)",
+          "hsl(18, 53%, 44%)", // accent-main-100
+          "hsl(18, 50%, 48%)", // accent-main-000
+          "hsl(18, 54%, 56%)",
+          "hsl(18, 60%, 72%)",
+          "hsl(18, 72%, 96%)",
+        ],
+      };
+    },
+  },
+  {
+    make: () => {
+      const base = makeDefaultPalette();
+      return {
+        ...base,
+        key: "oops",
+        base: [
+          null,
+          "#ffe6f7",
+          "#ffccef",
+          "#ffb3e7",
+          "#ff99df",
+          "#ff80d7",
+          "#ff66cf",
+          "#ff4dc7",
+          "#ff33bf",
+          "#ff00aa",
+          "#e6009a",
+          "#cc0088",
+          "#990066",
+        ],
+        baseDark: [
+          null,
+          "#330022",
+          "#4d0033",
+          "#660044",
+          "#800055",
+          "#990066",
+          "#b30077",
+          "#cc0088",
+          "#e6009a",
+          "#ff00aa",
+          "#ff33bf",
+          "#ff66cf",
+          "#ffccef",
+        ],
+        accent: [
+          null,
+          "#e6ffff",
+          "#ccffff",
+          "#b3ffff",
+          "#99ffff",
+          "#80ffff",
+          "#66ffff",
+          "#4dffff",
+          "#33ffff",
+          "#00ffff",
+          "#00e6e6",
+          "#00cccc",
+          "#009999",
+        ],
+        accentDark: [
+          null,
+          "#003333",
+          "#004d4d",
+          "#006666",
+          "#008080",
+          "#009999",
+          "#00b3b3",
+          "#00cccc",
+          "#00e6e6",
+          "#00ffff",
+          "#33ffff",
+          "#66ffff",
+          "#ccffff",
+        ],
+      };
+    },
+  },
+  {
+    make: () => {
+      const base = makeDefaultPalette();
+      return {
+        ...base,
+        key: "shmoops",
+        base: [
+          null,
+          "#e6ffe6",
+          "#ccffcc",
+          "#99FF99",
+          "#66ff66",
+          "#33ff33",
+          "#00ff00",
+          "#00e600",
+          "#00CC00",
+          "#00b300",
+          "#009900",
+          "#007700",
+          "#005500",
+        ],
+        baseDark: [
+          null,
+          "#003300",
+          "#004d00",
+          "#006600",
+          "#008000",
+          "#009900",
+          "#00b300",
+          "#00cc00",
+          "#00e600",
+          "#00ff00",
+          "#33ff33",
+          "#66ff66",
+          "#ccffcc",
+        ],
+        accent: [
+          null,
+          "#fff5e6",
+          "#ffebcc",
+          "#ffd699",
+          "#ffc266",
+          "#ffad33",
+          "#ff9900",
+          "#e68a00",
+          "#cc7a00",
+          "#b36b00",
+          "#995c00",
+          "#804d00",
+          "#663d00",
+        ],
+        accentDark: [
+          null,
+          "#332400",
+          "#4d3600",
+          "#664800",
+          "#805a00",
+          "#996b00",
+          "#b37d00",
+          "#cc8f00",
+          "#e6a000",
+          "#ff9900",
+          "#ffad33",
+          "#ffc266",
+          "#ffebcc",
+        ],
+      };
+    },
+  },
+];

package/src/thematic-color-picker.tsx

@@ -0,0 +1,266 @@
+import {css} from "@linaria/core";
+import {useCallback, useEffect, useRef, useState} from "react";
+// @ts-expect-error - no types
+import {ColorWrap, EditableInput, Hue, Saturation} from "react-color/lib/components/common";
+import {Popover} from "./popover";
+import {getAlpha, produceColor, setAlpha} from "./color-utils";
+import {border, space} from "./design-system";
+
+const colorPickerPopupCss = css`
+  padding: ${space.s8}px;
+  width: 200px;
+`;
+
+const saturationWrapperCss = css`
+  position: relative;
+  height: 120px;
+`;
+
+const hueWrapperCss = css`
+  height: 12px;
+  position: relative;
+  margin-top: ${space.s8}px;
+`;
+
+const hexInputWrapperCss = css`
+  margin-top: ${space.s8}px;
+`;
+
+const hexInputStyle = {
+  input: {
+    width: "100%",
+    padding: `${space.s4}px ${space.s8}px`,
+    border: `1px solid var(--fibery-color-separator-color)`,
+    borderRadius: border.radius4,
+    background: "var(--fibery-color-bg-popup)",
+    color: "var(--fibery-color-text-color)",
+    fontSize: 11,
+    fontFamily: "monospace",
+  },
+};
+
+const colorPickerPopoverCss = css`
+  z-index: 999999;
+`;
+
+const SliderPointer = () => (
+  <div
+    className={css`
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: white;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+      transform: translate(-50%, -50%);
+    `}
+  />
+);
+
+const alphaSliderCss = css`
+  height: 12px;
+  position: relative;
+  margin-top: ${space.s8}px;
+  background: linear-gradient(to right, transparent, var(--alpha-color));
+  border-radius: ${border.radius4}px;
+`;
+
+const alphaTrackCss = css`
+  position: absolute;
+  inset: 0;
+  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;
+  border-radius: ${border.radius4}px;
+  z-index: -1;
+`;
+
+type ColorPickerInnerProps = {
+  hex: string;
+  onChange: (color: {hex: string}) => void;
+  hsl: {h: number; s: number; l: number};
+  hsv: {h: number; s: number; v: number};
+  originalColor: string;
+  onColorWithAlpha: (color: string) => void;
+};
+
+const ColorPickerInner = ColorWrap(
+  ({hex, onChange, hsl, hsv, originalColor, onColorWithAlpha}: ColorPickerInnerProps) => {
+    const alpha = getAlpha(originalColor);
+
+    const handleAlphaChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newAlpha = parseFloat(e.target.value);
+      const newColor = produceColor(hex, (c) => setAlpha(c, newAlpha));
+      onColorWithAlpha(newColor);
+    };
+
+    return (
+      <div className={colorPickerPopupCss}>
+        <div className={saturationWrapperCss}>
+          <Saturation hsl={hsl} hsv={hsv} onChange={onChange} pointer={SliderPointer} />
+        </div>
+        <div className={hueWrapperCss}>
+          <Hue hsl={hsl} onChange={onChange} pointer={SliderPointer} />
+        </div>
+        <div className={alphaSliderCss} style={{"--alpha-color": hex} as React.CSSProperties}>
+          <div className={alphaTrackCss} />
+          <input
+            type="range"
+            min={0}
+            max={1}
+            step={0.01}
+            value={alpha}
+            onChange={handleAlphaChange}
+            className={css`
+              width: 100%;
+              height: 100%;
+              opacity: 0;
+              cursor: pointer;
+            `}
+          />
+          <div
+            className={css`
+              position: absolute;
+              top: 50%;
+              transform: translate(-50%, -50%);
+              pointer-events: none;
+            `}
+            style={{left: `${alpha * 100}%`}}
+          >
+            <SliderPointer />
+          </div>
+        </div>
+        <div className={hexInputWrapperCss}>
+          <EditableInput
+            style={hexInputStyle}
+            value={alpha < 1 ? `${hex} ${Math.round(alpha * 100)}%` : hex}
+            onChange={(value: string | {hex: string}) => {
+              const input = typeof value === "string" ? value : value.hex;
+              const match = input.match(/^(#?[0-9a-fA-F]{6})\s*(\d+%)?$/);
+              if (match) {
+                const newHex = match[1].startsWith("#") ? match[1] : `#${match[1]}`;
+                const newAlpha = match[2] ? parseInt(match[2]) / 100 : alpha;
+                const newColor = produceColor(newHex, (c) => setAlpha(c, newAlpha));
+                onColorWithAlpha(newColor);
+              }
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+const CHECKERBOARD = "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px";
+
+function swatchStyle(color: string): React.CSSProperties {
+  const hasAlpha = getAlpha(color) < 1;
+  return hasAlpha ? {background: `linear-gradient(${color}, ${color}), ${CHECKERBOARD}`} : {background: color};
+}
+
+export const swatchCss = css`
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 1px solid var(--fibery-color-separator-color);
+`;
+
+export const swatchClickableCss = css`
+  cursor: pointer;
+  &:hover {
+    transform: scale(1.15);
+  }
+`;
+
+export function SwatchWithPicker({
+  color,
+  title,
+  onChange,
+  onHighlight,
+  onHighlightEnd,
+  isAltPressed,
+}: {
+  color: string;
+  title: string;
+  onChange?: (color: string) => void;
+  onHighlight?: () => void;
+  onHighlightEnd?: () => void;
+  isAltPressed?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [triggerEl, setTriggerEl] = useState<HTMLDivElement | null>(null);
+
+  const handleClose = useCallback(() => setOpen(false), []);
+
+  const handleColorChange = useCallback(
+    (newColor: {hex: string}) => {
+      const alpha = getAlpha(color);
+      const newColorWithAlpha = produceColor(newColor.hex, (c) => setAlpha(c, alpha));
+      onChange?.(newColorWithAlpha);
+    },
+    [onChange, color]
+  );
+
+  const handleColorWithAlpha = useCallback(
+    (newColor: string) => {
+      onChange?.(newColor);
+    },
+    [onChange]
+  );
+
+  const handleClick = useCallback(() => {
+    if (onChange) {
+      setOpen(true);
+    }
+  }, [onChange]);
+
+  const hoveredRef = useRef(false);
+  const wasHighlightingRef = useRef(false);
+
+  useEffect(() => {
+    const shouldHighlight = hoveredRef.current && isAltPressed;
+    if (shouldHighlight) {
+      onHighlight?.();
+      wasHighlightingRef.current = true;
+    } else if (wasHighlightingRef.current) {
+      onHighlightEnd?.();
+      wasHighlightingRef.current = false;
+    }
+  }, [isAltPressed, onHighlight, onHighlightEnd]);
+
+  return (
+    <>
+      <div
+        ref={setTriggerEl}
+        className={`${swatchCss} ${onChange ? swatchClickableCss : ""}`}
+        style={{...swatchStyle(color), ...(isAltPressed && onHighlight ? {cursor: "crosshair"} : undefined)}}
+        title={title}
+        onClick={handleClick}
+        onMouseEnter={() => {
+          hoveredRef.current = true;
+          if (isAltPressed) {
+            onHighlight?.();
+            wasHighlightingRef.current = true;
+          }
+        }}
+        onMouseLeave={() => {
+          hoveredRef.current = false;
+          if (wasHighlightingRef.current) {
+            onHighlightEnd?.();
+            wasHighlightingRef.current = false;
+          }
+        }}
+      />
+      <Popover.Root open={open} onClose={handleClose}>
+        <Popover.Trigger reference={triggerEl} />
+        <Popover.Portal>
+          <Popover.Content placement="top" offset={[0, 4]} popupContainerClassName={colorPickerPopoverCss}>
+            <ColorPickerInner
+              color={color}
+              onChange={handleColorChange}
+              originalColor={color}
+              onColorWithAlpha={handleColorWithAlpha}
+            />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </>
+  );
+}

package/src/thematic-constants.tsx

@@ -0,0 +1,27 @@
+import {type ThematicPrefs} from "./palette-generator";
+import type {ThemePreference} from "./theme-settings";
+import AppearanceLight from "./icons/react/AppearanceLight";
+import AppearanceDark from "./icons/react/AppearanceDark";
+import AppearanceAuto from "./icons/react/AppearanceAuto";
+
+export const defaultPrefs: ThematicPrefs = {
+  baseHue: 0,
+  baseChroma: 0,
+  accentHue: 264,
+  accentChroma: 0.16,
+  contrast: 1,
+};
+
+export const HIGHLIGHT_COLOR = "#ff00ff";
+
+export const themeIcons: Record<ThemePreference, React.ReactNode> = {
+  light: <AppearanceLight />,
+  dark: <AppearanceDark />,
+  auto: <AppearanceAuto />,
+};
+
+export const nextThemePref: Record<ThemePreference, ThemePreference> = {
+  light: "dark",
+  dark: "light",
+  auto: "light",
+};