@fibery/ui-kit 4.0.0 → 4.2.0

package/src/antd/input-number.tsx

@@ -23,64 +23,97 @@ const PrefixedInputNumber = forwardRef<HTMLInputElement, InputNumberPropsAny>(fu
 
 const inputNumberStyles = css`
   ${{
-    "& .ant-input-number": {
+    ":where(&) .ant-input-number": {
       boxSizing: "border-box",
       position: "relative",
       display: "inline-flex",
       alignItems: "stretch",
       width: "90px",
+    },
+    "& .ant-input-number": {
       height: "auto",
       border: "none",
       ...textStyles.regular,
       backgroundColor: themeVars.transparent,
     },
-    "& .ant-input-number-input-wrap": {
+    ":where(&) .ant-input-number-input-wrap": {
       flex: 1,
       minWidth: 0,
     },
-    "& .ant-input-number-input": {
-      ...inputOverrides.main,
+    ":where(&) .ant-input-number-input": {
       boxSizing: "border-box",
       width: "100%",
       height: "100%",
       appearance: "textfield",
     },
-    "& .ant-input-number-input:placeholder-shown": {
-      textOverflow: "ellipsis",
+    "& .ant-input-number-input": {
+      ...inputOverrides.main,
     },
-    "& .ant-input-number-input::-webkit-inner-spin-button, & .ant-input-number-input::-webkit-outer-spin-button": {
-      margin: 0,
-      appearance: "none",
+    ":where(&) .ant-input-number-input:placeholder-shown": {
+      textOverflow: "ellipsis",
     },
-    "& .ant-input-number-handler-wrap": {
+    ":where(&) .ant-input-number-input::-webkit-inner-spin-button, :where(&) .ant-input-number-input::-webkit-outer-spin-button":
+      {
+        margin: 0,
+        appearance: "none",
+      },
+    ":where(&) .ant-input-number-handler-wrap": {
       position: "absolute",
-      top: 1,
-      bottom: 1,
-      right: 1,
       width: 22,
-      backgroundColor: themeVars.transparent,
-      background: themeVars.transparent,
-      // antd hid the stepper arrows until hover/focus; reproduce that (dropped with the vendored CSS)
       opacity: 0,
       transition: `opacity ${transitionDuration.normal} linear ${transitionDuration.faster}`,
     },
-    "& .ant-input-number-handler-wrap:hover .ant-input-number-handler": {
+    ":where(&) .ant-input-number-handler-wrap:hover .ant-input-number-handler": {
       height: "40%",
     },
-    "& .ant-input-number:hover .ant-input-number-handler-wrap, & .ant-input-number-focused .ant-input-number-handler-wrap":
+    ":where(&) .ant-input-number:hover .ant-input-number-handler-wrap, :where(&) .ant-input-number-focused .ant-input-number-handler-wrap":
       {
         opacity: 1,
       },
-    "& .ant-input-number-focused": {boxShadow: "none"},
-    "& .ant-input-number-handler-up, & .ant-input-number-handler-down": {
+    ":where(&) .ant-input-number-handler-up, :where(&) .ant-input-number-handler-down": {
       cursor: "pointer",
     },
-    "& .ant-input-number-handler-up:hover, & .ant-input-number-handler-down:hover": {
+    ":where(&) .ant-input-number-handler-up:hover, :where(&) .ant-input-number-handler-down:hover": {
       height: "60% !important",
     },
-    "& .ant-input-number-handler-up-disabled, & .ant-input-number-handler-down-disabled": {
+    ":where(&) .ant-input-number-handler-up-disabled, :where(&) .ant-input-number-handler-down-disabled": {
       cursor: "not-allowed",
     },
+    ":where(&) .ant-input-number-handler-up-inner, :where(&) .ant-input-number-handler-down-inner": {
+      position: "absolute",
+      right: 4,
+      width: 12,
+      height: 12,
+      lineHeight: "12px",
+      transition: `all ${transitionDuration.faster} linear`,
+      userSelect: "none",
+    },
+    ":where(&) .ant-input-number-handler-up-inner": {
+      top: "50%",
+      marginTop: -5,
+    },
+    ":where(&) .ant-input-number-handler-down-inner": {
+      top: "50%",
+      transform: "translateY(-50%)",
+    },
+    ":where(&) .ant-input-number-handler": {
+      position: "relative",
+      display: "block",
+      width: "100%",
+      height: "50%",
+      overflow: "hidden",
+      lineHeight: 0,
+      textAlign: "center",
+      transition: `all ${transitionDuration.faster} linear`,
+    },
+    "& .ant-input-number-handler-wrap": {
+      top: 1,
+      bottom: 1,
+      right: 1,
+      backgroundColor: themeVars.transparent,
+      background: themeVars.transparent,
+    },
+    "& .ant-input-number-focused": {boxShadow: "none"},
     "& .ant-input-number-handler-up-disabled .ant-input-number-handler-up-inner, & .ant-input-number-handler-down-disabled .ant-input-number-handler-down-inner":
       {
         color: themeVars.disabledTextColor,
@@ -101,33 +134,10 @@ const inputNumberStyles = css`
       },
     "& .ant-input-number-handler-up-inner, &  .ant-input-number-handler-down-inner": {
       color: themeVars.iconColor,
-      position: "absolute",
-      right: 4,
-      width: 12,
-      height: 12,
-      lineHeight: "12px",
-      transition: `all ${transitionDuration.faster} linear`,
-      userSelect: "none",
-    },
-    "& .ant-input-number-handler-up-inner": {
-      top: "50%",
-      marginTop: -5,
-    },
-    "& .ant-input-number-handler-down-inner": {
-      top: "50%",
-      transform: "translateY(-50%)",
     },
     "& .ant-input-number-handler": {
-      position: "relative",
-      display: "block",
-      width: "100%",
-      height: "50%",
-      overflow: "hidden",
       color: themeVars.iconColor,
-      lineHeight: 0,
-      textAlign: "center",
       borderLeft: themeVars.borderSolidSeparator,
-      transition: `all ${transitionDuration.faster} linear`,
       "&:active": {
         backgroundColor: themeVars.transparent,
       },

package/src/antd/styles.ts

@@ -5,7 +5,7 @@ import {border, layout, shadows, space, textStyles, themeVars, transitions} from
 const inputVariables = {
   default: {
     "--input-border": `${themeVars.inputBorderColor} inset`,
-    "--input-hover-border": `0 0 0 1px ${themeVars.colorAccentStrokeHover} inset`,
+    "--input-hover-border": `${themeVars.inputBorderHoverColor} inset`,
     "--input-focus-border": `0 0 0 1px ${themeVars.colorAccentStrokeFocus} inset`,
     "--input-focus-shadow": `0 0 0 2px ${themeVars.colorAccentStroke}`,
   },
@@ -40,7 +40,7 @@ export const inputOverrides = {
     },
   },
   hover: {
-    boxShadow: `var(--input-hover-border, 0 0 0 1px ${themeVars.colorAccentStrokeHover}) !important`,
+    boxShadow: `var(--input-hover-border, ${themeVars.inputBorderHoverColor}) !important`,
     transition: `box-shadow ${transitions.faster}`,
   },
   focus: {
@@ -69,10 +69,12 @@ export const inputStyles = css`
   }
   ${{
     ...textStyles.regular,
-    "& .ant-input, & .ant-input-affix-wrapper, & .ant-input-group-wrapper, & .ant-input-wrapper": {
+    ":where(&) .ant-input, :where(&) .ant-input-affix-wrapper, :where(&) .ant-input-group-wrapper, :where(&) .ant-input-wrapper":
+      {
+        boxSizing: "border-box",
+      },
+    ":where(&) .ant-input-affix-wrapper": {
       boxSizing: "border-box",
-    },
-    "& .ant-input-affix-wrapper": {
       display: "inline-flex",
       alignItems: "center",
       width: "100%",
@@ -83,40 +85,40 @@ export const inputStyles = css`
       boxShadow: "none",
       backgroundColor: themeVars.transparent,
     },
-    "& .ant-input-affix-wrapper > input.ant-input": {
+    ":where(&) .ant-input-affix-wrapper > input.ant-input": {
       minWidth: 0,
       flex: 1,
       padding: "0 12px",
       border: "inherit",
       outline: "inherit",
     },
-    "& .ant-input-prefix, & .ant-input-suffix": {
+    ":where(&) .ant-input-prefix, :where(&) .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)": {
+    ":where(&) .ant-input-prefix > *:not(:last-child), :where(&) .ant-input-suffix > *:not(:last-child)": {
       marginRight: space.s8,
     },
-    "& .ant-input-suffix": {
+    ":where(&) .ant-input-suffix": {
       marginLeft: space.s6,
     },
-    "& .ant-input-clear-icon": {
+    ":where(&) .ant-input-clear-icon": {
       display: "inline-flex",
       alignItems: "center",
       color: themeVars.iconColor,
       cursor: "pointer",
       lineHeight: 1,
     },
-    "& .ant-input-clear-icon-hidden": {
+    ":where(&) .ant-input-clear-icon-hidden": {
       visibility: "hidden",
     },
-    "& .ant-input-group-wrapper": {
+    ":where(&) .ant-input-group-wrapper": {
       display: "inline-block",
       width: "100%",
     },
-    "& .ant-input-wrapper.ant-input-group": {
+    ":where(&) .ant-input-wrapper.ant-input-group": {
       display: "inline-flex",
       width: "100%",
       alignItems: "stretch",
@@ -130,9 +132,8 @@ export const inputStyles = css`
       "&:hover": inputOverrides.hover,
       "&:focus": inputOverrides.focus,
     },
-    "& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
-    "& .ant-input": {
-      ...inputOverrides.main,
+    ":where(&) .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
+    ":where(&) .ant-input": {
       // 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
@@ -140,8 +141,11 @@ export const inputStyles = css`
       width: "100%",
       minWidth: 0,
     },
+    "& .ant-input": {
+      ...inputOverrides.main,
+    },
     // antd source: long placeholders get ellipsis instead of wrap-clip.
-    "& .ant-input:placeholder-shown": {
+    ":where(&) .ant-input:placeholder-shown": {
       textOverflow: "ellipsis",
     },
     // bordered={false} → wrap with `ant-input-borderless` class; strip the box-shadow ring + bg.
@@ -155,7 +159,7 @@ export const inputStyles = css`
     // 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": {
+    ":where(&) .ant-input-affix-wrapper > .ant-input:focus": {
       boxShadow: "none !important",
     },
     "& .ant-input-status-error": inputVariables.error,
@@ -170,18 +174,22 @@ export const inputStyles = css`
     "& .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled)": {
       borderColor: "transparent",
     },
-    // 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 padding must beat inputOverrides.main's zero vertical padding so rc-textarea
+    // autosize measures the same row height as the rendered control.
     "& textarea.ant-input": {
       paddingTop: space.s8,
       paddingBottom: space.s8,
-      minHeight: layout.inputHeight,
+    },
+    // antd source: textarea defaults — 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.
+    ":where(&) textarea.ant-input": {
       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,

package/src/antd/tabs.tsx

@@ -16,16 +16,16 @@ const PrefixedTabs = forwardRef<HTMLDivElement, TabsPropsAny>(function PrefixedT
 export const tabsStyles = css`
   ${{
     width: "100%",
-    "& .ant-tabs": {
+    ":where(&) .ant-tabs": {
       boxSizing: "border-box",
       display: "flex",
       overflow: "visible",
       width: "100%",
     },
-    "& .ant-tabs-top, & .ant-tabs-bottom": {
+    ":where(&) .ant-tabs-top, :where(&) .ant-tabs-bottom": {
       flexDirection: "column",
     },
-    "& .ant-tabs-nav": {
+    ":where(&) .ant-tabs-nav": {
       display: "flex",
       flex: "none",
       alignItems: "center",
@@ -41,7 +41,7 @@ export const tabsStyles = css`
         content: "''",
       },
     },
-    "& .ant-tabs-nav-wrap": {
+    ":where(&) .ant-tabs-nav-wrap": {
       display: "flex",
       flex: "auto",
       overflow: "hidden",
@@ -53,7 +53,7 @@ export const tabsStyles = css`
       marginLeft: space.s12,
       marginRight: space.s12,
     },
-    "& .ant-tabs-nav-wrap::before, & .ant-tabs-nav-wrap::after": {
+    ":where(&) .ant-tabs-nav-wrap::before, :where(&) .ant-tabs-nav-wrap::after": {
       position: "absolute",
       zIndex: 1,
       opacity: 0,
@@ -61,27 +61,27 @@ export const tabsStyles = css`
       content: "''",
       pointerEvents: "none",
     },
-    "& .ant-tabs-nav-list": {
+    ":where(&) .ant-tabs-nav-list": {
       position: "relative",
       display: "flex",
       transition: `transform ${transitions.normal}`,
     },
-    "& .ant-tabs-nav-operations": {
+    ":where(&) .ant-tabs-nav-operations": {
       display: "flex",
       alignSelf: "stretch",
     },
-    "& .ant-tabs-nav-operations-hidden": {
+    ":where(&) .ant-tabs-nav-operations-hidden": {
       position: "absolute",
       visibility: "hidden",
       pointerEvents: "none",
     },
-    "& .ant-tabs-nav-more": {
+    ":where(&) .ant-tabs-nav-more": {
       position: "relative",
       padding: `${space.s8}px ${space.s16}px`,
       backgroundColor: themeVars.transparent,
       border: 0,
     },
-    "& .ant-tabs-nav-more::after": {
+    ":where(&) .ant-tabs-nav-more::after": {
       position: "absolute",
       right: 0,
       bottom: 0,
@@ -90,13 +90,13 @@ export const tabsStyles = css`
       transform: "translateY(100%)",
       content: "''",
     },
-    "& .ant-tabs-extra-content": {
+    ":where(&) .ant-tabs-extra-content": {
       flex: "none",
     },
-    "& .ant-tabs-centered .ant-tabs-nav-wrap:not([class*='ant-tabs-nav-wrap-ping'])": {
+    ":where(&) .ant-tabs-centered .ant-tabs-nav-wrap:not([class*='ant-tabs-nav-wrap-ping'])": {
       justifyContent: "center",
     },
-    "& .ant-tabs-ink-bar": {
+    ":where(&) .ant-tabs-ink-bar": {
       position: "absolute",
       bottom: 0,
       backgroundColor: themeVars.colorAccent,
@@ -104,12 +104,12 @@ export const tabsStyles = css`
       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":
+    ":where(&) .ant-tabs-tab, :where(&) .ant-tabs-tab:hover, :where(&) .ant-tabs-tab-btn:active, :where(&) .ant-tabs-tabpane, :where(&) .ant-tabs-tab-active .ant-tabs-tab-btn":
       {
         ...textStyles.regular,
         textShadow: "none",
       },
-    "& .ant-tabs-tab": {
+    ":where(&) .ant-tabs-tab": {
       position: "relative",
       display: "inline-flex",
       alignItems: "center",
@@ -118,53 +118,53 @@ export const tabsStyles = css`
       cursor: "pointer",
       outline: "none",
     },
-    "& .ant-tabs-tab + .ant-tabs-tab": {
+    ":where(&) .ant-tabs-tab + .ant-tabs-tab": {
       margin: `0 ${space.s8}px 0 0`,
     },
-    "& .ant-tabs-tab-btn": {
+    ":where(&) .ant-tabs-tab-btn": {
       outline: "none",
       transition: `all ${transitions.slow}`,
     },
-    "& .ant-tabs-tab-active .ant-tabs-tab-btn": {
+    ":where(&) .ant-tabs-tab-active .ant-tabs-tab-btn": {
       color: themeVars.colorAccent,
     },
-    "& .ant-tabs-content-holder": {
+    ":where(&) .ant-tabs-content-holder": {
       flex: "auto",
       minWidth: 0,
       minHeight: 0,
     },
-    "& .ant-tabs-content": {
+    ":where(&) .ant-tabs-content": {
       position: "relative",
       display: "flex",
       width: "100%",
     },
-    "& .ant-tabs-tabpane": {
+    ":where(&) .ant-tabs-tabpane": {
       flex: "none",
       width: "100%",
       outline: "none",
     },
-    "& .ant-tabs-tabpane-hidden": {
+    ":where(&) .ant-tabs-tabpane-hidden": {
       display: "none",
     },
-    "& .ant-tabs-switch-appear, & .ant-tabs-switch-enter": {
+    ":where(&) .ant-tabs-switch-appear, :where(&) .ant-tabs-switch-enter": {
       transition: "none",
     },
-    "& .ant-tabs-switch-appear-start, & .ant-tabs-switch-enter-start": {
+    ":where(&) .ant-tabs-switch-appear-start, :where(&) .ant-tabs-switch-enter-start": {
       opacity: 0,
     },
-    "& .ant-tabs-switch-appear-active, & .ant-tabs-switch-enter-active": {
+    ":where(&) .ant-tabs-switch-appear-active, :where(&) .ant-tabs-switch-enter-active": {
       opacity: 1,
       transition: `opacity ${transitions.slow}`,
     },
-    "& .ant-tabs-switch-leave": {
+    ":where(&) .ant-tabs-switch-leave": {
       position: "absolute",
       inset: 0,
       transition: "none",
     },
-    "& .ant-tabs-switch-leave-start": {
+    ":where(&) .ant-tabs-switch-leave-start": {
       opacity: 1,
     },
-    "& .ant-tabs-switch-leave-active": {
+    ":where(&) .ant-tabs-switch-leave-active": {
       opacity: 0,
       transition: `opacity ${transitions.slow}`,
     },

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/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-filter.ts

@@ -65,7 +65,7 @@ export function makeColorFilter(spec: ColorFilterSpec | undefined): ColorFilter
     if (!color) {
       return color;
     }
-    // oxlint-disable-next-line no-param-reassign
+    // eslint-disable-next-line no-param-reassign
     color = spec.swatches?.[color.toUpperCase()] ?? color;
 
     const parsed = oklchFrom(color);

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/comment.tsx

@@ -89,9 +89,9 @@ export const actionsClassName = css`
   right: 0;
   z-index: 1;
   padding: ${space.s2 + 1}px;
-  background-color: ${themeVars.actionMenuBg};
+  background-color: ${themeVars.colorBgFloatingPanel};
   border-radius: ${border.radius8}px;
-  box-shadow: ${themeVars.entityCardShadow};
+  box-shadow: ${themeVars.shadowFloatingPanel};
   gap: ${space.s2}px;
 
   .${defaultCommentStyle}:hover & {

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

@@ -7,6 +7,7 @@ import {fontWeight, space, themeVars} from "./design-system";
 type Props = {
   className?: string;
   count: number;
+  limit?: number;
 };
 
 const countStyle = css`
@@ -34,17 +35,8 @@ 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 <= COUNT_BADGE_LIMIT ? count : `${COUNT_BADGE_LIMIT}+`}
-    </span>
-  );
+export function CountBadge({className, count, limit = 99}: Props) {
+  return <span className={cx(countStyle, countBadgeStyle, className)}>{count <= limit ? count : `${limit}+`}</span>;
 }
 
 export function CountBadgeWithNoLimits({count, warning}: {count: number | string; warning?: boolean}) {