@fibery/ui-kit 1.40.2 → 1.40.4

package/src/palette-generator.ts

@@ -0,0 +1,166 @@
+import {
+  blackAScale,
+  indigoDarkScale,
+  indigoScale,
+  redDarkScale,
+  redScale,
+  slateDarkScale,
+  slateScale,
+  tealDarkScale,
+  tealScale,
+  whiteAScale,
+  yellowDarkScale,
+  yellowScale,
+} from "./palette";
+import {
+  BasedScale12,
+  DEFAULT_DARK_CURVES,
+  DEFAULT_LIGHT_CURVES,
+  generateBlackScale,
+  generateColorScale,
+  generateGrayScale,
+  generateInterpolatedScale,
+  generatePresetScale,
+  generateWhiteScale,
+  type InterpolatedScaleConfig,
+  type Scale12,
+  paletteFromHue,
+  paletteFromHueBoth,
+  SCALE_PRESETS,
+  type ScaleConfig,
+  type ScaleCurves,
+} from "./scale-generator";
+
+export type ColorScale = BasedScale12<string>;
+
+export interface ThemePalette {
+  key: string;
+  white: ColorScale;
+  black: ColorScale;
+  base: ColorScale;
+  baseDark: ColorScale;
+  accent: ColorScale;
+  accentDark: ColorScale;
+  red: ColorScale;
+  redDark: ColorScale;
+  teal: ColorScale;
+  tealDark: ColorScale;
+  yellow: ColorScale;
+  yellowDark: ColorScale;
+}
+
+export const defaultPaletteKey = "default";
+export function makeDefaultPalette(): ThemePalette {
+  return {
+    key: defaultPaletteKey,
+    white: whiteAScale,
+    black: blackAScale,
+    base: slateScale,
+    baseDark: slateDarkScale,
+    accent: indigoScale,
+    accentDark: indigoDarkScale,
+    red: redScale,
+    redDark: redDarkScale,
+    teal: tealScale,
+    tealDark: tealDarkScale,
+    yellow: yellowScale,
+    yellowDark: yellowDarkScale,
+  };
+}
+
+export type ThematicPrefs = {
+  baseHue?: number;
+  baseChroma?: number;
+  accentHue: number;
+  accentChroma: number;
+  contrast?: number;
+  whiteLuminosity?: number;
+  whiteChroma?: number;
+  blackLuminosity?: number;
+  blackChroma?: number;
+};
+
+function shiftHueTowards(hue: number, targetHue: number, amount: number): number {
+  // Find shortest path on hue circle
+  let diff = targetHue - hue;
+  if (diff > 180) {
+    diff -= 360;
+  } else if (diff < -180) {
+    diff += 360;
+  }
+  return (hue + diff * amount + 360) % 360;
+}
+
+export function makeThematicPalette(config: ThematicPrefs): ThemePalette {
+  const {baseHue = 0, baseChroma = 0, accentHue, accentChroma, contrast} = config;
+
+  const white = generateWhiteScale(baseHue, baseChroma, config.whiteLuminosity, config.whiteChroma);
+  const black = generateBlackScale(baseHue, baseChroma, config.blackLuminosity, config.blackChroma);
+
+  // Generate base/gray scales with tinted base colors
+  const base = generateGrayScale({hue: baseHue, chroma: baseChroma, mode: "light", contrast, base: white[0]});
+  const baseDark = generateGrayScale({hue: baseHue, chroma: baseChroma, mode: "dark", contrast, base: black[0]});
+
+  // Generate accent scales
+  const accent = generateColorScale({hue: accentHue, chroma: accentChroma, mode: "light", contrast});
+  const accentDark = generateColorScale({hue: accentHue, chroma: accentChroma, mode: "dark", contrast});
+
+  // Shift semantic hues towards base hue when baseChroma is high
+  const hueShift = Math.min(baseChroma * 2, 0.3); // max 30% shift at chroma 0.15+
+  const redHue = shiftHueTowards(SCALE_PRESETS.red.hue, baseHue, hueShift);
+  const tealHue = shiftHueTowards(SCALE_PRESETS.teal.hue, baseHue, hueShift);
+  const yellowHue = shiftHueTowards(SCALE_PRESETS.yellow.hue, baseHue, hueShift);
+
+  const red = generateColorScale({hue: redHue, chroma: SCALE_PRESETS.red.chroma, mode: "light", contrast});
+  const redDark = generateColorScale({hue: redHue, chroma: SCALE_PRESETS.red.chroma, mode: "dark", contrast});
+  const teal = generateColorScale({hue: tealHue, chroma: SCALE_PRESETS.teal.chroma, mode: "light", contrast});
+  const tealDark = generateColorScale({hue: tealHue, chroma: SCALE_PRESETS.teal.chroma, mode: "dark", contrast});
+  const yellow = generateColorScale({
+    hue: yellowHue,
+    chroma: SCALE_PRESETS.yellow.chroma,
+    mode: "light",
+    contrast,
+    curves: SCALE_PRESETS.yellow.lightCurves,
+  });
+  const yellowDark = generateColorScale({
+    hue: yellowHue,
+    chroma: SCALE_PRESETS.yellow.chroma,
+    mode: "dark",
+    contrast,
+    curves: SCALE_PRESETS.yellow.darkCurves,
+  });
+
+  return {
+    key: JSON.stringify(config),
+    white,
+    black,
+    base,
+    baseDark,
+    accent,
+    accentDark,
+    red,
+    redDark,
+    teal,
+    tealDark,
+    yellow,
+    yellowDark,
+  };
+}
+
+export {
+  generateBlackScale,
+  generateColorScale,
+  generateGrayScale,
+  generateInterpolatedScale,
+  generatePresetScale,
+  generateWhiteScale,
+  paletteFromHue,
+  paletteFromHueBoth,
+  SCALE_PRESETS,
+  DEFAULT_LIGHT_CURVES,
+  DEFAULT_DARK_CURVES,
+  type Scale12,
+  type ScaleConfig,
+  type ScaleCurves,
+  type InterpolatedScaleConfig,
+};

package/src/palette.ts

@@ -1,5 +1,10 @@
-export const slate = {
-  slateBase: "hsl(0, 0%, 100%)",
+import type {ColorScale} from "./palette-generator";
+import {throwError} from "./errors";
+
+const base = "hsl(0, 0%, 100%)";
+
+const slate = {
+  slateBase: base,
   slate1: "hsl(206, 0%, 99%)",
   slate2: "hsl(210, 0%, 97%)",
   slate3: "hsl(209, 0%, 96%)",
@@ -14,6 +19,9 @@ export const slate = {
   slate12: "hsl(200, 0%, 9%)",
 } as const;
 
+/**
+ * @deprecated use themeVars
+ */
 export const slateDark = {
   slateBase: "hsl(0, 0%, 5%)",
   slate1: "hsl(200, 0%, 9%)",
@@ -30,6 +38,9 @@ export const slateDark = {
   slate12: "hsl(210, 0%, 93%)",
 } as const;
 
+/**
+ * @deprecated use themeVars
+ */
 export const teal = {
   teal1: "hsl(165, 60%, 99%)",
   teal2: "hsl(169, 65%, 97%)",
@@ -45,6 +56,9 @@ export const teal = {
   teal12: "hsl(170, 50%, 13%)",
 } as const;
 
+/**
+ * @deprecated use themeVars
+ */
 export const tealDark = {
   teal1: "hsl(168, 48%, 6%)",
   teal2: "hsl(169, 78%, 7%)",
@@ -60,6 +74,9 @@ export const tealDark = {
   teal12: "hsl(166, 73%, 93%)",
 } as const;
 
+/**
+ * @deprecated use themeVars
+ */
 export const indigo = {
   indigo1: "hsl(220, 60%, 99%)",
   indigo2: "hsl(220, 90%, 99%)",
@@ -75,6 +92,9 @@ export const indigo = {
   indigo12: "hsl(220, 62%, 17%)",
 } as const;
 
+/**
+ * @deprecated use themeVars
+ */
 export const indigoDark = {
   indigo1: "hsl(222, 24%, 10%)",
   indigo2: "hsl(222, 36%, 13%)",
@@ -90,6 +110,9 @@ export const indigoDark = {
   indigo12: "hsl(222, 83%, 96%)",
 } as const;
 
+/**
+ * @deprecated use themeVars
+ */
 export const red = {
   red1: "hsl(359, 100%, 99%)",
   red2: "hsl(359, 100%, 99%)",
@@ -105,6 +128,9 @@ export const red = {
   red12: "hsl(354, 50%, 15%)",
 } as const;
 
+/**
+ * @deprecated use themeVars
+ */
 export const redDark = {
   red1: "hsl(353, 23%, 10%)",
   red2: "hsl(357, 34%, 12%)",
@@ -120,36 +146,6 @@ export const redDark = {
   red12: "hsl(351, 89%, 96%)",
 } as const;
 
-export const blue = {
-  blue1: "hsl(206, 100%, 99%)",
-  blue2: "hsl(210, 100%, 98%)",
-  blue3: "hsl(209, 100%, 96%)",
-  blue4: "hsl(210, 99%, 94%)",
-  blue5: "hsl(209, 95%, 90%)",
-  blue6: "hsl(209, 81%, 84%)",
-  blue7: "hsl(208, 77%, 77%)",
-  blue8: "hsl(206, 82%, 65%)",
-  blue9: "hsl(206, 100%, 50%)",
-  blue10: "hsl(208, 100%, 47%)",
-  blue11: "hsl(211, 100%, 43%)",
-  blue12: "hsl(211, 100%, 15%)",
-} as const;
-
-export const blueDark = {
-  blue1: "hsl(212, 35%, 9%)",
-  blue2: "hsl(216, 50%, 12%)",
-  blue3: "hsl(214, 59%, 15%)",
-  blue4: "hsl(214, 66%, 18%)",
-  blue5: "hsl(213, 71%, 20%)",
-  blue6: "hsl(212, 77%, 23%)",
-  blue7: "hsl(211, 85%, 27%)",
-  blue8: "hsl(211, 90%, 34%)",
-  blue9: "hsl(206, 100%, 50%)",
-  blue10: "hsl(209, 100%, 61%)",
-  blue11: "hsl(210, 100%, 66%)",
-  blue12: "hsl(206, 98%, 96%)",
-} as const;
-
 export const yellow = {
   yellow1: "hsl(60, 54%, 98%)",
   yellow2: "hsl(52, 100%, 95%)",
@@ -165,6 +161,9 @@ export const yellow = {
   yellow12: "hsl(40, 55%, 13%)",
 } as const;
 
+/**
+ * @deprecated use themeVars
+ */
 export const yellowDark = {
   yellow1: "hsl(45, 100%, 5%)",
   yellow2: "hsl(46, 100%, 7%)",
@@ -180,6 +179,9 @@ export const yellowDark = {
   yellow12: "hsl(53, 100%, 91%)",
 } as const;
 
+/**
+ * @deprecated use themeVars
+ */
 export const blackA = {
   blackA0: "#000000",
   blackA1: "hsla(0, 0%, 0%, 0.01)",
@@ -196,6 +198,9 @@ export const blackA = {
   blackA12: "hsla(0, 0%, 0%, 0.91)",
 } as const;
 
+/**
+ * @deprecated use themeVars
+ */
 export const whiteA = {
   whiteA0: "#FFFFFF",
   whiteA1: "hsla(0, 0%, 100%, 0)",
@@ -212,26 +217,37 @@ export const whiteA = {
   whiteA12: "hsla(0, 0%, 100%, 0.92)",
 } as const;
 
-export const opacity = {
-  opacity100: 1,
-  opacity95: 0.95,
-  opacity90: 0.9,
-  opacity85: 0.85,
-  opacity80: 0.8,
-  opacity75: 0.75,
-  opacity70: 0.7,
-  opacity65: 0.65,
-  opacity60: 0.6,
-  opacity55: 0.55,
-  opacity50: 0.5,
-  opacity45: 0.45,
-  opacity40: 0.4,
-  opacity35: 0.35,
-  opacity30: 0.3,
-  opacity25: 0.25,
-  opacity20: 0.2,
-  opacity15: 0.15,
-  opacity10: 0.1,
-  opacity5: 0.05,
-  opacity0: 0,
-} as const;
+/**
+ * Converts a Radix color object ({prefix1, prefix2, ...}) to a ColorScale array.
+ * Index 0 uses prefixBase if available, otherwise prefixStep1.
+ */
+export function toColorScale<K extends string>(radixScale: Record<string, string>, prefix: K): ColorScale {
+  return [
+    radixScale[`${prefix}0`] ?? radixScale[`${prefix}Base`] ?? base,
+    radixScale[`${prefix}1`],
+    radixScale[`${prefix}2`],
+    radixScale[`${prefix}3`],
+    radixScale[`${prefix}4`],
+    radixScale[`${prefix}5`],
+    radixScale[`${prefix}6`],
+    radixScale[`${prefix}7`],
+    radixScale[`${prefix}8`],
+    radixScale[`${prefix}9`],
+    radixScale[`${prefix}10`],
+    radixScale[`${prefix}11`],
+    radixScale[`${prefix}12`],
+  ].map((x, i) => x ?? throwError(prefix + i)) as unknown as ColorScale;
+}
+
+export const whiteAScale = toColorScale(whiteA, "whiteA");
+export const blackAScale = toColorScale(blackA, "blackA");
+export const slateScale = toColorScale(slate, "slate");
+export const slateDarkScale = toColorScale(slateDark, "slate");
+export const indigoScale = toColorScale(indigo, "indigo");
+export const indigoDarkScale = toColorScale(indigoDark, "indigo");
+export const redScale = toColorScale(red, "red");
+export const redDarkScale = toColorScale(redDark, "red");
+export const tealScale = toColorScale(teal, "teal");
+export const tealDarkScale = toColorScale(tealDark, "teal");
+export const yellowScale = toColorScale(yellow, "yellow");
+export const yellowDarkScale = toColorScale(yellowDark, "yellow");

package/src/platform.ts

@@ -1,6 +1,3 @@
-import {UAParser} from "ua-parser-js";
-
 export const isMac = navigator.platform.startsWith("Mac");
 export const isWindows = navigator.platform.startsWith("Win");
 export const isLinux = navigator.platform.startsWith("Linux");
-export const isMobile = new UAParser(navigator.userAgent).getDevice().type === "mobile";

package/src/popover/index.tsx

@@ -28,11 +28,11 @@ import {
 } from "../mobile-styles";
 import {createPortal} from "react-dom";
 import {usePopper} from "react-popper";
-import {createInlineTheme, space, textStyles, themeVars, transition} from "../design-system";
+import {space, textStyles, themeVars, transition} from "../design-system";
 import {IconButton} from "../button/icon-button";
 import CloseIcon from "../icons/react/Close";
 import ArrowLeftIcon from "../icons/react/ArrowLeft";
-import {useTheme} from "../theme-provider";
+import {ThemeProvider} from "../theme-provider";
 import {$TSFixMe} from "../tsfixme";
 import {useIsPhone} from "../use-is-phone";
 import {usePopupModifiers} from "./popup-modifiers-context";
@@ -101,8 +101,6 @@ export function MobilePopup({
   onClose?: () => void;
   onNavigateBack?: () => void;
 }) {
-  const theme = useTheme();
-
   const {title: contextTitle, headerSlot} = useMobilePopup();
 
   const headerContent = headerSlot ?? (
@@ -165,7 +163,7 @@ export function MobilePopup({
     </>
   );
 
-  return (
+  const res = (
     <div
       className={cx(
         css`
@@ -184,7 +182,6 @@ export function MobilePopup({
           `
       )}
       style={{
-        ...createInlineTheme(theme),
         ...mobilePopupStyle,
         ...(height ? {gridTemplateRows: `1fr ${height}`} : {}),
       }}
@@ -216,6 +213,7 @@ export function MobilePopup({
       )}
     </div>
   );
+  return <ThemeProvider portal>{res}</ThemeProvider>;
 }
 
 type PortalProps = {
@@ -238,20 +236,14 @@ type TriggerProps = {
 const Trigger = ({asChild = false, reference, children, onMouseDown, ...props}: TriggerProps) => {
   const {setTriggerElement, disabled, open, onOpen, onClose} = useContext();
 
-  const onMouseDownCb: React.MouseEventHandler<HTMLElement> = composeEventHandlers(
-    onMouseDown,
-    (e) => {
-      if (disabled) {
-        return;
-      }
-      if (e.button === 0) {
-        open ? onClose?.(e as unknown as Event) : onOpen?.();
-      }
-    },
-    {
-      checkForDefaultPrevented: false,
+  const onMouseDownCb: React.MouseEventHandler<HTMLElement> = composeEventHandlers(onMouseDown, (e) => {
+    if (disabled) {
+      return;
     }
-  );
+    if (e.button === 0) {
+      open ? onClose?.(e as unknown as Event) : onOpen?.();
+    }
+  });
 
   useEffect(() => {
     if (reference) {
@@ -264,13 +256,14 @@ const Trigger = ({asChild = false, reference, children, onMouseDown, ...props}:
     return null;
   }
 
-  if (asChild && isValidElement(children)) {
-    return cloneElement(children, {
-      ref: setTriggerElement,
+  if (asChild && isValidElement<React.HTMLAttributes<HTMLElement>>(children)) {
+    return cloneElement<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>(children, {
       "aria-expanded": open,
       "aria-haspopup": true,
-      onMouseDown: onMouseDownCb,
       ...props,
+      ref: setTriggerElement,
+      className: cx(children.props.className, props.className),
+      onMouseDown: onMouseDownCb,
     });
   }
 
@@ -349,7 +342,6 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
   const {open, onClose, triggerElement, popupElement, setPopupElement} = useContext();
 
   const popupModifiers = usePopupModifiers();
-  const theme = useTheme();
   const isPhone = useIsPhone();
 
   // We get infinite popup renders if this is not in a separate memo
@@ -433,8 +425,8 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
   };
 
   const contentStyles = useMemo(() => {
-    return {...styles.popper, ...createInlineTheme(theme), ...popupStyle};
-  }, [popupStyle, styles.popper, theme]);
+    return {...styles.popper, ...popupStyle};
+  }, [popupStyle, styles.popper]);
 
   if (!open) {
     return null;
@@ -459,7 +451,7 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
     );
   }
   return (
-    <>
+    <ThemeProvider portal>
       {renderBackdrop && <Backdrop className={backdropClassName} />}
       <div
         ref={setPopupElement}
@@ -478,7 +470,7 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
           {children}
         </div>
       </div>
-    </>
+    </ThemeProvider>
   );
 });
 

package/src/progress.tsx

@@ -1,13 +1,13 @@
 import {Line, Circle, ProgressProps} from "rc-progress";
 import {FC} from "react";
 
-interface CircleProgressProps extends ProgressProps {}
+type CircleProgressProps = ProgressProps;
 
 export const CircleProgress: FC<CircleProgressProps> = (props) => {
   return <Circle trailWidth={12} strokeWidth={12} {...props} />;
 };
 
-interface ProgressBarProps extends ProgressProps {}
+type ProgressBarProps = ProgressProps;
 
 export const ProgressBar: FC<ProgressBarProps> = (props) => {
   return <Line className={props.className} trailWidth={8} strokeWidth={8} {...props} />;

package/src/reactions/reaction-button.tsx

@@ -1,7 +1,8 @@
 import {css} from "@linaria/core";
-import {Fragment, ReactEventHandler, ReactNode, useCallback, useState, useRef} from "react";
+import {Fragment, ReactEventHandler, ReactNode, useCallback, useRef, useState} from "react";
 import {createPortal} from "react-dom";
 import {fontSize, fontWeight, space, themeVars} from "../design-system";
+import {ThemeProvider} from "../theme-provider";
 import {Emoji} from "../emoji-picker/emoji";
 import {ToggleButton} from "../toggle-button/toggle-button";
 import {Tooltip} from "../tooltip";
@@ -10,7 +11,7 @@ import {mobileRootSelector, safeAreaInsetBottomVar} from "../mobile-styles";
 import {useLongPress} from "../use-long-press";
 import {getWordDivider} from "./get-word-divider";
 import {EmojiTooltipDescription, EmojiTooltipTitle} from "./tootltip";
-import {TabNavLink, TabNavRoot, TabNavList, tabButton} from "../tab-nav/tab-nav";
+import {tabButton, TabNavLink, TabNavList, TabNavRoot} from "../tab-nav/tab-nav";
 import {AvatarImage} from "../avatar";
 import {getPopupContainerElement} from "../utils-dom";
 
@@ -46,7 +47,12 @@ const overlayClassName = css`
 `;
 
 function TouchOverlay({onClick}: {onClick: () => void}) {
-  return createPortal(<div className={overlayClassName} onClick={onClick} />, getPopupContainerElement());
+  return createPortal(
+    <ThemeProvider portal>
+      <div className={overlayClassName} onClick={onClick} />
+    </ThemeProvider>,
+    getPopupContainerElement()
+  );
 }
 
 function MobileOverlay({content, onClose}: {content: ReactNode; onClose: () => void}) {
@@ -57,7 +63,7 @@ function MobileOverlay({content, onClose}: {content: ReactNode; onClose: () => v
     },
     [onClose]
   );
-  return createPortal(
+  const res = (
     <div className={overlayClassName}>
       <div
         onPointerDown={handleClose}
@@ -79,9 +85,9 @@ function MobileOverlay({content, onClose}: {content: ReactNode; onClose: () => v
       >
         {content}
       </div>
-    </div>,
-    getPopupContainerElement()
+    </div>
   );
+  return createPortal(<ThemeProvider portal>{res}</ThemeProvider>, getPopupContainerElement());
 }
 
 const navLinkClassName = css`