@fibery/ui-kit 3.0.0 → 4.1.0

package/src/antd/styles.ts

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 
-import {border, layout, shadows, space, textStyles, themeVars, transition} from "../design-system";
+import {border, layout, shadows, space, textStyles, themeVars, transitions} from "../design-system";
 
 const inputVariables = {
   default: {
@@ -32,7 +32,7 @@ export const inputOverrides = {
     paddingRight: space.s12,
     border: 0,
     borderColor: themeVars.transparent,
-    transition: `box-shadow ${transition}`,
+    transition: `box-shadow ${transitions.faster}`,
     boxShadow: `var(--input-border, ${themeVars.inputBorderColor})`,
     letterSpacing: 0,
     "&::placeholder": {
@@ -41,18 +41,18 @@ export const inputOverrides = {
   },
   hover: {
     boxShadow: `var(--input-hover-border, 0 0 0 1px ${themeVars.colorAccentStrokeHover}) !important`,
-    transition: `box-shadow ${transition}`,
+    transition: `box-shadow ${transitions.faster}`,
   },
   focus: {
     boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.colorAccentStroke}), var(--input-focus-shadow) !important`,
-    transition: `box-shadow ${transition}`,
+    transition: `box-shadow ${transitions.faster}`,
   },
   disabled: {
     color: `${themeVars.textColor}`,
     backgroundColor: `${themeVars.inputDisabledBgColor} !important`,
     borderColor: themeVars.transparent,
     boxShadow: `${themeVars.inputDisabledBorderColor} !important`,
-    transition: `box-shadow ${transition}`,
+    transition: `box-shadow ${transitions.faster}`,
     WebkitTextFillColor: "currentColor",
     cursor: "default",
     "&:hover": {
@@ -69,6 +69,58 @@ export const inputStyles = css`
   }
   ${{
     ...textStyles.regular,
+    "& .ant-input, & .ant-input-affix-wrapper, & .ant-input-group-wrapper, & .ant-input-wrapper": {
+      boxSizing: "border-box",
+    },
+    "& .ant-input-affix-wrapper": {
+      display: "inline-flex",
+      alignItems: "center",
+      width: "100%",
+      position: "relative",
+      font: "inherit",
+      padding: 0,
+      border: "none",
+      boxShadow: "none",
+      backgroundColor: themeVars.transparent,
+    },
+    "& .ant-input-affix-wrapper > input.ant-input": {
+      minWidth: 0,
+      flex: 1,
+      padding: "0 12px",
+      border: "inherit",
+      outline: "inherit",
+    },
+    "& .ant-input-prefix, & .ant-input-suffix": {
+      display: "flex",
+      flex: "none",
+      alignItems: "center",
+    },
+    // antd source: spacing between adjacent icons when prefix/suffix holds multiple nodes.
+    "& .ant-input-prefix > *:not(:last-child), & .ant-input-suffix > *:not(:last-child)": {
+      marginRight: space.s8,
+    },
+    "& .ant-input-suffix": {
+      marginLeft: space.s6,
+    },
+    "& .ant-input-clear-icon": {
+      display: "inline-flex",
+      alignItems: "center",
+      color: themeVars.iconColor,
+      cursor: "pointer",
+      lineHeight: 1,
+    },
+    "& .ant-input-clear-icon-hidden": {
+      visibility: "hidden",
+    },
+    "& .ant-input-group-wrapper": {
+      display: "inline-block",
+      width: "100%",
+    },
+    "& .ant-input-wrapper.ant-input-group": {
+      display: "inline-flex",
+      width: "100%",
+      alignItems: "stretch",
+    },
     "& .ant-input-group-addon": {
       backgroundColor: themeVars.transparent,
       border: "none",
@@ -79,23 +131,37 @@ export const inputStyles = css`
       "&:focus": inputOverrides.focus,
     },
     "& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
-    "& .ant-input": inputOverrides.main,
+    "& .ant-input": {
+      ...inputOverrides.main,
+      // antd source: .ant-input { width: 100%; min-width: 0 } — without it, bare <AntInput>
+      // doesn't fill its container and can't shrink inside a flex parent. AutoComplete's
+      // .ant-select-selection-search .ant-input rule (two-class selector) beats this on
+      // specificity for combobox inputs, so the nested-AntAutoComplete case is unaffected.
+      width: "100%",
+      minWidth: 0,
+    },
+    // antd source: long placeholders get ellipsis instead of wrap-clip.
+    "& .ant-input:placeholder-shown": {
+      textOverflow: "ellipsis",
+    },
+    // bordered={false} → wrap with `ant-input-borderless` class; strip the box-shadow ring + bg.
+    // antd source covers base + hover/focus/disabled with the same declarations.
+    // !important needed to beat inputOverrides.main's !important on backgroundColor/boxShadow.
+    "& .ant-input.ant-input-borderless, & .ant-input.ant-input-borderless:hover, & .ant-input.ant-input-borderless:focus, & .ant-input.ant-input-borderless:disabled, & .ant-input.ant-input-borderless[disabled]":
+      {
+        boxShadow: "none !important",
+        backgroundColor: `${themeVars.transparent} !important`,
+      },
+    // antd source: inner input inside affix-wrapper must not paint its own focus ring —
+    // the wrapper owns the visual focus state. Without this prefix/suffix usage shows a
+    // double ring.
+    "& .ant-input-affix-wrapper > .ant-input:focus": {
+      boxShadow: "none !important",
+    },
     "& .ant-input-status-error": inputVariables.error,
     "& .ant-input[readonly].ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
     "& .ant-input:hover[readonly].ant-input:hover[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
     "& .ant-input-affix-wrapper:hover .ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
-    "& .ant-input-affix-wrapper > input.ant-input": {
-      padding: "0 12px",
-      border: "inherit",
-      outline: "inherit",
-    },
-    "& .ant-input-affix-wrapper": {
-      font: "inherit",
-      padding: 0,
-      border: "none",
-      boxShadow: "none",
-      backgroundColor: themeVars.transparent,
-    },
     "& .ant-input-affix-wrapper.ant-input-affix-wrapper-readonly": {
       border: "none !important",
       outline: "none !important",
@@ -104,32 +170,26 @@ export const inputStyles = css`
     "& .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled)": {
       borderColor: "transparent",
     },
-    "& .ant-cascader-picker:focus .ant-cascader-input, & .ant-cascader-picker:focus:hover .ant-cascader-input":
-      inputOverrides.focus,
-    "& .ant-select-auto-complete.ant-select": {
-      ...textStyles.regular,
-      "&  .ant-select-selection--single": {height: layout.inputHeight},
-      "& .ant-input": inputOverrides.main,
-      "& .ant-input.ant-input:hover": inputOverrides.hover,
-      "& .ant-input.ant-input:focus": inputOverrides.focus,
-      "& .ant-input.ant-input-disabled": inputOverrides.disabled,
-    },
+    // antd source: textarea defaults — min-height anchors empty <AntTextArea> to a sane
+    // height, max-width prevents user-resize from blowing out the container, and
+    // vertical-align: bottom matches the baseline of a single-line <input> next to it.
     "& textarea.ant-input": {
       paddingTop: space.s8,
       paddingBottom: space.s8,
-    },
-    "& .ant-select-disabled .ant-select-selection": {
-      backgroundColor: themeVars.transparent,
+      minHeight: layout.inputHeight,
+      maxWidth: "100%",
+      verticalAlign: "bottom",
     },
     "&& input:hover:not(:focus):not(:disabled), && textarea:hover:not(:focus):not(:disabled), && .ant-input:hover:not(:focus):not(:disabled)":
       inputOverrides.hover,
+    "&& .ant-input-affix-wrapper > input.ant-input:focus, && .ant-input-affix-wrapper > input.ant-input:active":
+      inputOverrides.focus,
     "&& input:focus, && textarea:focus, && input:active, && textarea:active": inputOverrides.focus,
     "&& .ant-input-disabled, && .ant-input-disabled:hover, && .ant-input-disabled:focus, && .ant-input-disabled:active":
       inputOverrides.disabled,
     "&& input::placeholder, && textarea::placeholder": {
       color: themeVars.inputPlaceholderTextColor,
     },
-    "& .ant-input-affix-wrapper .ant-input-prefix": {left: space.s6},
     "& .ant-input-affix-wrapper .ant-input:not(:first-child)": {paddingLeft: space.s6 + space.s24 + space.s8}, // Match TitlePreview spacing
   }}
 `;

package/src/antd/tabs.tsx

@@ -1,32 +1,108 @@
-import {css, cx} from "@linaria/core";
-import Tabs from "antd/lib/tabs";
+import {css} from "@linaria/core";
+import Tabs from "rc-tabs";
+import type {ComponentProps} from "react";
 import {forwardRef} from "react";
-import "antd/lib/tabs/style/css";
 
-import {textStyles, space, themeVars} from "../design-system";
+import {textStyles, space, themeVars, transitions} from "../design-system";
+import {getWrapper} from "./get-wrapper";
 import {wrapWith} from "./utils";
 
+type TabsPropsAny = ComponentProps<typeof Tabs>;
+
+const PrefixedTabs = forwardRef<HTMLDivElement, TabsPropsAny>(function PrefixedTabs(props, ref) {
+  return <Tabs prefixCls="ant-tabs" {...props} ref={ref} />;
+});
+
 export const tabsStyles = css`
   ${{
     width: "100%",
-    "& .ant-tabs-bar": {
+    "& .ant-tabs": {
+      boxSizing: "border-box",
+      display: "flex",
+      overflow: "visible",
+      width: "100%",
+    },
+    "& .ant-tabs-top, & .ant-tabs-bottom": {
+      flexDirection: "column",
+    },
+    "& .ant-tabs-nav": {
+      display: "flex",
+      flex: "none",
+      alignItems: "center",
       margin: 0,
+      width: "100%",
+      position: "relative",
+      "&::before": {
+        position: "absolute",
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderBottom: themeVars.borderSolidFilterGroup,
+        content: "''",
+      },
     },
     "& .ant-tabs-nav-wrap": {
+      display: "flex",
+      flex: "auto",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      position: "relative",
+      alignSelf: "stretch",
+      transform: "translate(0)",
       marginBottom: 1,
       marginLeft: space.s12,
       marginRight: space.s12,
     },
-    "& .ant-tabs": {
-      overflow: "visible",
+    "& .ant-tabs-nav-wrap::before, & .ant-tabs-nav-wrap::after": {
+      position: "absolute",
+      zIndex: 1,
+      opacity: 0,
+      transition: `opacity ${transitions.slow}`,
+      content: "''",
+      pointerEvents: "none",
+    },
+    "& .ant-tabs-nav-list": {
+      position: "relative",
+      display: "flex",
+      transition: `transform ${transitions.normal}`,
+    },
+    "& .ant-tabs-nav-operations": {
+      display: "flex",
+      alignSelf: "stretch",
+    },
+    "& .ant-tabs-nav-operations-hidden": {
+      position: "absolute",
+      visibility: "hidden",
+      pointerEvents: "none",
+    },
+    "& .ant-tabs-nav-more": {
+      position: "relative",
+      padding: `${space.s8}px ${space.s16}px`,
+      backgroundColor: themeVars.transparent,
+      border: 0,
+    },
+    "& .ant-tabs-nav-more::after": {
+      position: "absolute",
+      right: 0,
+      bottom: 0,
+      left: 0,
+      height: 5,
+      transform: "translateY(100%)",
+      content: "''",
+    },
+    "& .ant-tabs-extra-content": {
+      flex: "none",
+    },
+    "& .ant-tabs-centered .ant-tabs-nav-wrap:not([class*='ant-tabs-nav-wrap-ping'])": {
+      justifyContent: "center",
     },
     "& .ant-tabs-ink-bar": {
+      position: "absolute",
+      bottom: 0,
       backgroundColor: themeVars.colorAccent,
       height: 2,
-    },
-    "& .ant-tabs-nav": {
-      margin: 0,
-      width: "100%",
+      pointerEvents: "none",
+      transition: `left ${transitions.faster}, right ${transitions.faster}, width ${transitions.faster}`,
     },
     "& .ant-tabs-tab, & .ant-tabs-tab:hover, & .ant-tabs-tab-btn:active, & .ant-tabs-tabpane, & .ant-tabs-tab-active .ant-tabs-tab-btn":
       {
@@ -34,29 +110,65 @@ export const tabsStyles = css`
         textShadow: "none",
       },
     "& .ant-tabs-tab": {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
       padding: "12px 12px",
       margin: `0 ${space.s8}px 0 0`,
+      cursor: "pointer",
+      outline: "none",
     },
     "& .ant-tabs-tab + .ant-tabs-tab": {
       margin: `0 ${space.s8}px 0 0`,
     },
-    ".ant-tabs-top > .ant-tabs-nav::before": {
-      borderBottom: themeVars.borderSolidFilterGroup,
+    "& .ant-tabs-tab-btn": {
+      outline: "none",
+      transition: `all ${transitions.slow}`,
+    },
+    "& .ant-tabs-tab-active .ant-tabs-tab-btn": {
+      color: themeVars.colorAccent,
+    },
+    "& .ant-tabs-content-holder": {
+      flex: "auto",
+      minWidth: 0,
+      minHeight: 0,
+    },
+    "& .ant-tabs-content": {
+      position: "relative",
+      display: "flex",
+      width: "100%",
+    },
+    "& .ant-tabs-tabpane": {
+      flex: "none",
+      width: "100%",
+      outline: "none",
+    },
+    "& .ant-tabs-tabpane-hidden": {
+      display: "none",
+    },
+    "& .ant-tabs-switch-appear, & .ant-tabs-switch-enter": {
+      transition: "none",
+    },
+    "& .ant-tabs-switch-appear-start, & .ant-tabs-switch-enter-start": {
+      opacity: 0,
+    },
+    "& .ant-tabs-switch-appear-active, & .ant-tabs-switch-enter-active": {
+      opacity: 1,
+      transition: `opacity ${transitions.slow}`,
+    },
+    "& .ant-tabs-switch-leave": {
+      position: "absolute",
+      inset: 0,
+      transition: "none",
+    },
+    "& .ant-tabs-switch-leave-start": {
+      opacity: 1,
+    },
+    "& .ant-tabs-switch-leave-active": {
+      opacity: 0,
+      transition: `opacity ${transitions.slow}`,
     },
   }}
 `;
 
-function getWrapper() {
-  return forwardRef<HTMLDivElement, {children: React.ReactNode; className?: string}>(function TabWrapper(
-    {children, className},
-    ref
-  ) {
-    return (
-      <div className={cx(className, tabsStyles)} ref={ref}>
-        {children}
-      </div>
-    );
-  });
-}
-
-export const AntTabs = wrapWith(getWrapper(), Tabs);
+export const AntTabs = wrapWith(getWrapper(tabsStyles), PrefixedTabs);

package/src/app-icon-with-fallback.tsx

@@ -1,11 +1,9 @@
 import {css} from "@linaria/core";
-import fromPairs from "lodash/fromPairs";
 import type {FC} from "react";
 import {lazy, Suspense} from "react";
 
 import {AppIconWrapper} from "./app-icon-wrapper";
 import {alpha, iconSize, layout} from "./design-system";
-import {isFlagPresent} from "./flags";
 import {Icon} from "./icons/icon";
 import {useTheme} from "./theme-provider";
 import {useIsPhone} from "./use-is-phone";
@@ -94,7 +92,7 @@ type UglyExternalIconProps = Omit<UglyExternalIconImplProps, "appIconsLookup">;
 
 const UglyExternalIcon = lazy(async () => {
   const appIcons = await import("./app-icons.json");
-  const appIconsLookup = fromPairs(
+  const appIconsLookup = Object.fromEntries(
     appIcons.default.flatMap((appIcon) => appIcon.short_names.map((shortName) => [shortName, appIcon]))
   );
 
@@ -146,12 +144,10 @@ export const AppIcon: FC<AppIconProps> = ({icon, color: neutralColor, isSelected
   const isPhone = useIsPhone();
   const defaultIconSize = isPhone ? layout.mobileSidebarIconSize : layout.newMenuIconSize;
   const {iconSize = defaultIconSize, containerSize = defaultIconSize} = rest;
-  const {fg, bg} = theme.fns.icon(neutralColor);
-
-  const bgColor = !isFlagPresent("no-sidebar-app-icon-bg") ? alpha(fg, 0.2) : bg;
+  const {fg} = theme.fns.icon(neutralColor);
 
   return (
-    <AppIconWrapper color={bgColor} borderless={isSelected} containerSize={containerSize}>
+    <AppIconWrapper color={alpha(fg, 0.2)} borderless={isSelected} containerSize={containerSize}>
       <AppIconWithFallback name={icon} color={fg} colorProcessed containerSize={containerSize} iconSize={iconSize} />
     </AppIconWrapper>
   );

package/src/app-icon-wrapper.tsx

@@ -3,20 +3,12 @@ import cn from "classnames";
 import type {ReactNode} from "react";
 
 import {border, layout} from "./design-system";
-import {isFlagPresent} from "./flags";
-import {useTheme} from "./theme-provider";
 import {useIsPhone} from "./use-is-phone";
 
 const appIconContainerStyle = css`
   border-radius: ${border.radius4}px;
 `;
 
-const appIconGradientStyle = css`
-  ${{
-    backgroundImage: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",
-  }}
-`;
-
 export const AppIconWrapper = ({
   children,
   color,
@@ -28,16 +20,12 @@ export const AppIconWrapper = ({
   borderless?: boolean;
   containerSize?: number;
 }) => {
-  const theme = useTheme();
   const isPhone = useIsPhone();
   const {containerSize = isPhone ? layout.mobileSidebarIconSize : layout.newMenuIconSize} = rest;
   return (
     <div
       style={{backgroundColor: borderless ? "transparent" : color, width: containerSize, height: containerSize}}
-      className={cn(
-        appIconContainerStyle,
-        !borderless && isFlagPresent("no-sidebar-app-icon-bg") && theme.mode === "dark" && appIconGradientStyle
-      )}
+      className={cn(appIconContainerStyle)}
     >
       {children}
     </div>

package/src/avatar.tsx

@@ -3,12 +3,9 @@ import {css, cx} from "@linaria/core";
 import type {CSSProperties, FC} from "react";
 import {memo, useCallback, useMemo, useState} from "react";
 
-import {abbreviateName} from "./abbreviate-name";
-import {border, getDarkenColor, getObjectColorMemoized, space, textClasses, themeVars} from "./design-system";
-import {useFeatures} from "./features";
-import {FibermojiPlaceholder} from "./fibermoji-placeholder";
+import {border, space, themeVars} from "./design-system";
+import {FibermojiPlaceholder as AvatarPlaceholder} from "./fibermoji-placeholder";
 import {getShiftStyle} from "./icons/get-shift-style";
-import {useTheme} from "./theme-provider";
 
 export const getContainerStyle = memoize((containerSize: number) => {
   return {
@@ -167,57 +164,6 @@ const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
   );
 });
 
-const avatarPlaceholderStaticClassName = css`
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: -0.2px;
-`;
-
-const getAvatarPlaceholderStyle = ({
-  size,
-  backgroundColor,
-  radius,
-}: {
-  size: number;
-  backgroundColor: string;
-  radius?: number;
-}) => ({
-  backgroundColor: getDarkenColor(backgroundColor),
-  color: themeVars.whiteColor,
-  lineHeight: `${size}px`,
-  fontSize: size / 2.222222,
-  width: size,
-  height: size,
-  borderRadius: radius ?? "50%",
-});
-
-type AvatarPlaceholderProps = {
-  size: number;
-  title?: string;
-  radius?: number;
-  hasAccess?: boolean;
-  backgroundColor?: string;
-};
-
-const AvatarPlaceholder: FC<AvatarPlaceholderProps> = memo(function AvatarPlaceholder(props) {
-  const features = useFeatures<{enableFibermojiAvatars: boolean}>();
-  const theme = useTheme();
-  if (features.enableFibermojiAvatars) {
-    return <FibermojiPlaceholder {...props} />;
-  }
-
-  const {size, title, radius, backgroundColor = getObjectColorMemoized(title)} = props;
-  const displayBg = theme.fns.deneutralize(backgroundColor);
-  return (
-    <div
-      className={cx(textClasses.regular, avatarPlaceholderStaticClassName)}
-      style={getAvatarPlaceholderStyle({size, backgroundColor: displayBg, radius})}
-    >
-      {abbreviateName(title)}
-    </div>
-  );
-});
-
 const getNullUserAvatarContainerStyle = ({containerSize}: {containerSize: number}) => ({
   width: containerSize,
   height: containerSize,

package/src/breadcrumb.tsx

@@ -64,10 +64,14 @@ const liReset = css`
   padding: 0;
 `;
 
+const separatorIconCss = css`
+  --fibery-icon-size: var(--breadcrumb-separator-size, 16px);
+`;
+
 export const BreadcrumbSeparator = ({children, className, ...props}: React.ComponentProps<"li">) => {
   return (
     <li role="presentation" aria-hidden="true" className={cx(liReset, className)} {...props}>
-      {children ?? <ArrowRight color={breadcrumbColor} containerSize={16} iconSize={16} />}
+      {children ?? <ArrowRight color={breadcrumbColor} className={separatorIconCss} />}
     </li>
   );
 };

package/src/color-adjuster.ts

@@ -7,6 +7,11 @@ export type AdjustSpec = {
   achromaticTint?: {h: number; c: number};
   strengths?: {common?: number; l?: number; c?: number; h?: number};
   lFade?: {lo?: number; hi?: number};
+  // Linear strength ramp from `min` at c=0 to 1 at c=hi, then 1 above.
+  // Softens pastels (Notion imports, vizydrop "Fibery" preset) without touching saturated swatches.
+  cFade?: {hi: number; min: number};
+  // Inputs with c ≤ greyC skip cFade so designer cool-greys keep full warmth.
+  greyC?: number;
 };
 
 const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
@@ -60,6 +65,21 @@ function makeStrengthFromL(lo: number, hi: number) {
   };
 }
 
+function makeStrengthFromC(spec: AdjustSpec["cFade"]) {
+  if (!spec || spec.min >= 1 || spec.hi <= 0) {
+    return function strengthFromC(_c: number) {
+      return 1;
+    };
+  }
+  const {hi, min} = spec;
+  return function strengthFromC(c: number) {
+    if (c >= hi) {
+      return 1;
+    }
+    return lerp(min, 1, c / hi);
+  };
+}
+
 export function makeAdjust(adjuster: AdjustSpec) {
   const derive = makeDerive(adjuster);
   const sCommon = adjuster.strengths?.common ?? 1;
@@ -70,14 +90,17 @@ export function makeAdjust(adjuster: AdjustSpec) {
     adjuster.lFade?.lo ?? WARM_L_LO_DEFAULT,
     adjuster.lFade?.hi ?? WARM_L_HI_DEFAULT
   );
+  const strengthFromC = makeStrengthFromC(adjuster.cFade);
+  const greyC = adjuster.greyC ?? 0;
   return function adjust(color: Oklch): Oklch {
     const hue = color.h ?? 0;
+    const isGrey = color.h === null || color.c <= greyC;
 
     const mulL = 1 + (derive(hue, (p) => p.mul.l) - 1) * sL;
     const powC = 1 + (derive(hue, (p) => p.pow.c) - 1) * sC;
     const addH = derive(hue, (p) => p.add.h) * sH;
 
-    const strength = strengthFromL(color.l);
+    const strength = strengthFromL(color.l) * (isGrey ? 1 : strengthFromC(color.c));
 
     const l = Math.min(lerp(color.l, color.l * mulL, strength), 0.999);
     let c: number;

package/src/color-utils.test.ts

@@ -1,5 +1,5 @@
 // oxlint-disable typescript/consistent-type-imports
-import {cssFromUnsafe, getColorDistance, getLuminance, isValidColor} from "./color-utils";
+import {cssFromUnsafe, getColorDistance, getLuminance, isValidColor, invalidColorFallback} from "./color-utils";
 
 describe("color-utils", () => {
   describe("cssFromUnsafe", () => {
@@ -21,7 +21,7 @@ describe("color-utils", () => {
     });
 
     it("returns fallback for invalid color", () => {
-      expect(cssFromUnsafe("invalid")).toMatchInlineSnapshot(`"rgb(73, 120, 212)"`);
+      expect(cssFromUnsafe("invalid")).toEqual(invalidColorFallback);
     });
   });
 

package/src/color-utils.ts

@@ -27,8 +27,8 @@ export const oklchFrom = converter("oklch");
 const mapToSrgb = toGamut("rgb", "oklch");
 
 export const isValidColor = (color: string) => parse(color) !== undefined;
-
-export function colorFromUnsafe(color: string, fallback = "hsl(220, 62%, 56%)"): Color {
+export const invalidColorFallback = "rgb(94, 94, 94)";
+export function colorFromUnsafe(color: string, fallback = invalidColorFallback): Color {
   const parsed = parse(resolveColorArg(color, "colorFromUnsafe") ?? "") ?? parse(fallback)!;
   if (!parsed) {
     throw new Error(`Failed to parse fallback color ${fallback}`);

package/src/copy-to-clipboard.ts

@@ -1,8 +1,19 @@
-export const copyToClipboard = (text: string) => window.navigator.clipboard.writeText(text);
-export const copyUrlToClipboard = ({url, label}: {url: string; label?: string}) => {
+function checkClipboard() {
+  if (!navigator.clipboard) {
+    throw new Error("Clipboard disabled by browser permissions policy");
+  }
+}
+
+export const copyToClipboard = async (text: string) => {
+  checkClipboard();
+  await navigator.clipboard.writeText(text);
+};
+
+export const copyUrlToClipboard = async ({url, label}: {url: string; label?: string}) => {
+  checkClipboard();
   const htmlString = `<a href="${url}" target="_blank">${label || url}</a>`;
 
-  return window.navigator.clipboard.write([
+  await navigator.clipboard.write([
     new ClipboardItem({
       "text/html": new Blob([htmlString], {type: "text/html"}),
       "text/plain": url,

package/src/count-badge.tsx

@@ -34,8 +34,17 @@ const warningStyle = css`
   color: ${themeVars.textColor};
 `;
 
+const countBadgeLimitOverride = Number.parseInt(
+  new URLSearchParams(window.location.search).get("count-badge-limit") ?? ""
+);
+const COUNT_BADGE_LIMIT = Number.isInteger(countBadgeLimitOverride) ? countBadgeLimitOverride : 99;
+
 export function CountBadge({className, count}: Props) {
-  return <span className={cx(countStyle, countBadgeStyle, className)}>{count <= 99 ? count : "99+"}</span>;
+  return (
+    <span className={cx(countStyle, countBadgeStyle, className)}>
+      {count <= COUNT_BADGE_LIMIT ? count : `${COUNT_BADGE_LIMIT}+`}
+    </span>
+  );
 }
 
 export function CountBadgeWithNoLimits({count, warning}: {count: number | string; warning?: boolean}) {