@fibery/ui-kit 3.0.0 → 4.0.0

package/src/antd/input.tsx

@@ -1,14 +1,91 @@
-import {css} from "@linaria/core";
-import Input from "antd/lib/input";
-import "antd/lib/input/style/css";
+import {css, cx} from "@linaria/core";
+import RcInput from "rc-input";
+import type {InputProps, InputRef} from "rc-input";
+import RcTextArea from "rc-textarea";
+import type {TextAreaProps} from "rc-textarea";
+import type {ResizableTextAreaRef} from "rc-textarea/lib/ResizableTextArea";
+import {forwardRef, useImperativeHandle, useMemo, useRef} from "react";
 
-import {tabularNumsOff, textStyles, themeVars} from "../design-system";
+import {space, tabularNumsOff, textStyles, themeVars} from "../design-system";
+import CloseCircleFilledIcon from "../icons/react/cross-circle";
 import {mobileRootSelector} from "../mobile-styles";
 import {getWrapper} from "./get-wrapper";
 import {inputStyles} from "./styles";
 import {wrapWith} from "./utils";
 
-const TextArea = Input.TextArea;
+const clearIconNode = <CloseCircleFilledIcon />;
+
+export type {InputRef};
+
+export interface InputFocusOptions extends FocusOptions {
+  cursor?: "start" | "end" | "all";
+}
+
+export interface TextAreaRef {
+  focus: (options?: InputFocusOptions) => void;
+  blur: () => void;
+  resizableTextArea?: ResizableTextAreaRef;
+}
+
+type AntInputProps = Omit<InputProps, "status"> & {
+  status?: "error";
+  bordered?: boolean;
+};
+
+const Input = forwardRef<InputRef, AntInputProps>(function Input(
+  {status, className, allowClear, bordered = true, ...props},
+  ref
+) {
+  const statusClass = status === "error" ? "ant-input-status-error" : undefined;
+  const allowClearProp = useMemo(() => {
+    if (allowClear === true) {
+      return {clearIcon: clearIconNode};
+    }
+    return allowClear;
+  }, [allowClear]);
+  return (
+    <RcInput
+      prefixCls="ant-input"
+      ref={ref}
+      allowClear={allowClearProp}
+      className={cx(className, statusClass, !bordered && "ant-input-borderless")}
+      {...props}
+    />
+  );
+});
+
+type AntTextAreaProps = Omit<TextAreaProps, "status"> & {
+  status?: "error";
+};
+
+const TextArea = forwardRef<TextAreaRef, AntTextAreaProps>(function TextArea({status, className, ...props}, ref) {
+  const innerRef = useRef<RcTextArea>(null);
+  useImperativeHandle(ref, () => ({
+    focus: (options) => {
+      const textarea = innerRef.current?.resizableTextArea?.textArea;
+      if (!textarea) {
+        return;
+      }
+      textarea.focus(options);
+      const len = textarea.value.length;
+      if (options?.cursor === "start") {
+        textarea.setSelectionRange(0, 0);
+      } else if (options?.cursor === "end") {
+        textarea.setSelectionRange(len, len);
+      } else if (options?.cursor === "all") {
+        textarea.setSelectionRange(0, len);
+      }
+    },
+    blur: () => innerRef.current?.blur(),
+    get resizableTextArea() {
+      return innerRef.current?.resizableTextArea;
+    },
+  }));
+  const statusClass = status === "error" ? "ant-input-status-error" : undefined;
+  return (
+    <RcTextArea prefixCls="ant-input" ref={innerRef} className={cx("ant-input", className, statusClass)} {...props} />
+  );
+});
 
 export const transparentInputStyle = css`
   ${{
@@ -18,6 +95,7 @@ export const transparentInputStyle = css`
     "& input, & textarea, & .ant-input-affix-wrapper": {
       padding: 0,
       border: "none",
+      outline: "none",
       width: "100%",
       resize: "none",
       borderRadius: 0,
@@ -29,6 +107,50 @@ export const transparentInputStyle = css`
         ...textStyles.big,
       },
     },
+    "& .ant-input-affix-wrapper": {
+      display: "inline-flex",
+      alignItems: "center",
+      position: "relative",
+      minWidth: 0,
+    },
+    "& .ant-input-affix-wrapper > .ant-input": {
+      flex: 1,
+      minWidth: 0,
+      fontSize: "inherit",
+      border: "none",
+      outline: "none",
+    },
+    "& .ant-input-affix-wrapper > .ant-input:focus": {
+      boxShadow: "none !important",
+    },
+    "& .ant-input-affix-wrapper::before": {
+      width: 0,
+      visibility: "hidden",
+      content: "'\\a0'",
+    },
+    "& .ant-input-prefix, & .ant-input-suffix": {
+      display: "flex",
+      flex: "none",
+      alignItems: "center",
+    },
+    "& .ant-input-prefix > *:not(:last-child), & .ant-input-suffix > *:not(:last-child)": {
+      marginRight: space.s8,
+    },
+    "& .ant-input-prefix": {
+      marginRight: space.s4,
+    },
+    "& .ant-input-suffix": {
+      marginLeft: space.s4,
+    },
+    "& .ant-input-clear-icon": {
+      display: "inline-flex",
+      alignItems: "center",
+      lineHeight: 1,
+      cursor: "pointer",
+    },
+    "& .ant-input-clear-icon-hidden": {
+      visibility: "hidden",
+    },
     "& textarea.ant-input": {
       fontVariant: "inherit",
     },
@@ -54,8 +176,5 @@ export const StyledTextArea = wrapWith(InputWrapper, TextArea);
 
 export const TransparentInputWrapper = getWrapper(transparentInputStyle);
 
-export type TextAreaRef = React.ElementRef<typeof TextArea>;
 export const AntTransparentTextArea = wrapWith(TransparentInputWrapper, TextArea);
-
-export type InputRef = React.ElementRef<typeof Input>;
 export const AntTransparentInput = wrapWith(TransparentInputWrapper, Input);

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,22 +170,15 @@ 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,
@@ -129,7 +188,6 @@ export const inputStyles = css`
     "&& 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/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/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/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}) {