@fibery/ui-kit 2.0.0 → 2.1.0

package/src/avatar.tsx

@@ -1,13 +1,14 @@
-import {css} from "@linaria/core";
+import {css, cx} from "@linaria/core";
 import memoize from "lodash/memoize";
 import {CSSProperties, FC, memo, useCallback, useMemo, useState} from "react";
-import {getDarkenColor, getObjectColorMemoized, textStyles, themeVars} from "./design-system";
+import {border, getDarkenColor, getObjectColorMemoized, space, textStyles, themeVars} from "./design-system";
 import {FibermojiPlaceholder} from "./fibermoji-placeholder";
 import {getShiftStyle} from "./icons/get-shift-style";
 import {useFeatures} from "./features";
+import {useTheme} from "./theme-provider";
 import {abbreviateName} from "./abbreviate-name";
 
-export const getContainerStyle = memoize((containerSize) => {
+export const getContainerStyle = memoize((containerSize: number) => {
   return {
     width: containerSize,
     height: containerSize,
@@ -23,7 +24,7 @@ const statusIconPositionByIndex = [
 ];
 
 const getStatusIconStyle = memoize(
-  (size, index): CSSProperties => {
+  (size: number, index: number): CSSProperties => {
     const iconSize = Math.ceil(size / 2);
     const position = statusIconPositionByIndex[index];
 
@@ -89,7 +90,7 @@ type AvatarImageProps = {
   placeholder?: React.ReactNode;
 };
 
-export const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
+const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
   size,
   containerSize,
   title,
@@ -188,17 +189,19 @@ type AvatarPlaceholderProps = {
   backgroundColor?: string;
 };
 
-export const AvatarPlaceholder: FC<AvatarPlaceholderProps> = memo(function AvatarPlaceholder(props) {
+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={avatarPlaceholderStaticClassName}
-      style={getAvatarPlaceholderStyle({size, backgroundColor, radius})}
+      style={getAvatarPlaceholderStyle({size, backgroundColor: displayBg, radius})}
     >
       {abbreviateName(title)}
     </div>
@@ -230,7 +233,7 @@ type NullUserAvatarProps = {
   containerSize: number;
 };
 
-export const NullUserAvatar: FC<NullUserAvatarProps> = memo(function NullUserAvatar({size, containerSize}) {
+const NullUserAvatar: FC<NullUserAvatarProps> = memo(function NullUserAvatar({size, containerSize}) {
   const dashSize = (Math.PI * size) / magicCoefficient / 12;
   return (
     <div style={getNullUserAvatarContainerStyle({containerSize})}>
@@ -248,3 +251,42 @@ export const NullUserAvatar: FC<NullUserAvatarProps> = memo(function NullUserAva
     </div>
   );
 });
+
+const avatarGroupCss = css`
+  display: flex;
+`;
+
+function AvatarGroup({className, ...props}: React.ComponentProps<"div">) {
+  return <div className={cx(avatarGroupCss, className)} {...props} />;
+}
+
+const avatarCss = css`
+  margin-left: -${space.s4}px;
+  &:first-of-type {
+    margin-left: 0;
+  }
+  z-index: 1;
+`;
+
+function Avatar({className, ...props}: React.ComponentProps<"div">) {
+  return <div className={cx(avatarCss, className)} {...props} />;
+}
+
+const avatarGroupCountCss = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fibery-avatar-group-count-size);
+  height: var(--fibery-avatar-group-count-size);
+  color: ${themeVars.accentTextColor};
+  font-size: calc(var(--fibery-avatar-group-count-size) * 0.5);
+  background-color: ${themeVars.badgeBgColor};
+  border-radius: ${border.radiusFull};
+`;
+
+function AvatarGroupCount({className, size, ...props}: {size: number} & React.ComponentProps<"div">) {
+  const style = {"--fibery-avatar-group-count-size": size + "px"} as CSSProperties;
+  return <div data-slot="avatar-group-count" style={style} className={cx(avatarGroupCountCss, className)} {...props} />;
+}
+
+export {AvatarGroup, Avatar, AvatarImage, AvatarPlaceholder, AvatarGroupCount, NullUserAvatar};

package/src/axis-header.tsx

@@ -2,7 +2,7 @@ import {css} from "@linaria/core";
 import {default as cn, default as cx} from "classnames";
 import {FC, ReactNode} from "react";
 import {CountBadge} from "./count-badge";
-import {border, opacity, space, textStyles, themeVars} from "./design-system";
+import {border, space, textStyles, themeVars} from "./design-system";
 const axisItemStyleX = css`
   grid-template-columns: auto 1fr auto;
 `;
@@ -63,7 +63,7 @@ const mainContainerWrapperStyle = css`
 const mainContainerWrapperCollapsedClassName = cx(
   mainContainerWrapperStyle,
   css`
-    opacity: ${opacity.opacity40};
+    opacity: ${themeVars.opacity40};
     display: flex;
     align-items: center;
     justify-content: flex-start;

package/src/banner/banner-action.tsx

@@ -0,0 +1,23 @@
+import {forwardRef} from "react";
+import {Button, ButtonProps} from "../button/button";
+import {useBannerContext} from "./banner-context";
+
+export const BannerAction = forwardRef<HTMLButtonElement, ButtonProps>(function BannerAction(
+  {children, className, ...props},
+  ref
+) {
+  const variant = useBannerContext();
+
+  return (
+    <Button
+      ref={ref}
+      size="small"
+      variant="outline"
+      color={variant === "primary" ? "accent" : "neutral"}
+      className={className}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+});

package/src/banner/banner-context.tsx

@@ -0,0 +1,4 @@
+import {createContext} from "@fibery/react/src/create-context";
+import {BannerVariant} from "./banner-variant";
+
+export const [BannerContextProvider, useBannerContext] = createContext<BannerVariant>("BannerContext", "neutral");

package/src/banner/banner-variant.ts

@@ -0,0 +1 @@
+export type BannerVariant = "neutral" | "primary" | "warning" | "error" | "success";

package/src/banner/banner.tsx

@@ -0,0 +1,101 @@
+import {css, cx, LinariaClassName} from "@linaria/core";
+import {ComponentPropsWithoutRef, forwardRef} from "react";
+import {IconButton} from "../button/icon-button";
+import {border, fontWeight, lineHeight, space, textStyles, themeVars} from "../design-system";
+import {iconColorVar, iconSizeVar} from "../icons/Icon";
+import CloseIcon from "../icons/react/Close";
+import {BannerVariant} from "./banner-variant";
+import {BannerContextProvider} from "./banner-context";
+
+export type BannerProps = {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+  variant?: BannerVariant;
+  onClose?: () => void;
+} & Omit<ComponentPropsWithoutRef<"div">, "title">;
+
+const bannerVariants: Record<BannerVariant, LinariaClassName> = {
+  neutral: css`
+    background-color: ${themeVars.colorBgBannerNeutral};
+    ${iconColorVar}: ${themeVars.colorIconBannerNeutral};
+    color: ${themeVars.colorTextBannerNeutral};
+  `,
+  primary: css`
+    background-color: ${themeVars.colorBgBannerPrimary};
+    ${iconColorVar}: ${themeVars.colorIconBannerAccent};
+    color: ${themeVars.colorTextBannerAccent};
+  `,
+  warning: css`
+    background-color: ${themeVars.colorBgBannerWarning};
+    ${iconColorVar}: ${themeVars.colorIconBannerWarning};
+    color: ${themeVars.colorTextBannerWarning};
+  `,
+  error: css`
+    background-color: ${themeVars.colorBgBannerError};
+    ${iconColorVar}: ${themeVars.colorIconBannerError};
+    color: ${themeVars.colorTextBannerError};
+  `,
+  success: css`
+    background-color: ${themeVars.colorBgBannerSuccess};
+    ${iconColorVar}: ${themeVars.colorIconBannerSuccess};
+    color: ${themeVars.colorTextBannerSuccess};
+  `,
+};
+
+const banner = css`
+  padding: ${space.s10}px ${space.s12}px;
+  display: flex;
+  align-items: center;
+  gap: ${space.s8}px;
+  border-radius: ${border.radius8}px;
+
+  ${iconSizeVar}: 16px;
+`;
+
+const bannerContent = css`
+  display: grid;
+  min-height: 24px;
+  align-items: center;
+  flex-grow: 1;
+  min-width: 0;
+  gap: ${space.s2}px;
+  padding-inline: ${space.s2}px;
+`;
+const bannerTitle = css`
+  ${textStyles.small};
+  font-weight: ${fontWeight.medium};
+  line-height: ${lineHeight.heading};
+  color: inherit;
+`;
+const bannerDescription = css`
+  ${textStyles.small};
+  font-weight: ${fontWeight.regular};
+  line-height: ${lineHeight.heading};
+  color: inherit;
+  opacity: 0.8;
+`;
+
+export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
+  {className, icon, title, description, action, onClose, variant = "neutral", ...props},
+  ref
+) {
+  return (
+    <BannerContextProvider value={variant}>
+      <div ref={ref} role="alert" className={cx(banner, bannerVariants[variant], className)} {...props}>
+        {icon}
+        <div className={bannerContent}>
+          <span className={bannerTitle}>{title}</span>
+          {description ? <span className={bannerDescription}>{description}</span> : null}
+        </div>
+        {action}
+        {onClose ? (
+          <IconButton size="small" onClick={onClose} aria-label="Hide banner">
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </div>
+    </BannerContextProvider>
+  );
+});

package/src/box.tsx

@@ -2,7 +2,7 @@ import {css} from "@linaria/core";
 import {styled} from "@linaria/react";
 import cx from "classnames";
 import {CSSProperties, forwardRef, HTMLProps, ReactNode, Ref, useCallback, useMemo, useState} from "react";
-import {border, getLinearGradient, getOpacities, space, textStyles, themeVars, transition} from "./design-system";
+import {alpha, border, getLinearGradient, space, textStyles, themeVars, transition} from "./design-system";
 import {useClickOutside} from "./popover/use-click-outside";
 
 export const getBg = (backgroundColors: string[]) => {
@@ -46,7 +46,9 @@ const getBorderRadius = (radius: BoxRadius | false) => {
 export const BoxRoot = styled.div<{radiusValue: BoxRadius | false}>`
   display: block;
   width: 100%;
-  transition: box-shadow ${transition}, background-color ${transition};
+  transition:
+    box-shadow ${transition},
+    background-color ${transition};
   border-radius: ${({radiusValue}) => getBorderRadius(radiusValue)};
   .${strokeContainer} {
     box-shadow: ${themeVars.shadowStrokeEntityBoxDefault};
@@ -266,22 +268,15 @@ export function getBoxColorCoding({backgroundColors}: {backgroundColors: string[
   const colorCodingStyle = colorCodingColor
     ? ({
         [colorCodingBackgroundCustomProperty]: colorCodingColor,
-        [colorCodingShadowEntityBoxDefaultCustomProperty]: `0px 2px 4px 0px ${
-          getOpacities(colorCodingColor).opacity10
-        }`,
-        [colorCodingShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 1px ${
-          getOpacities(colorCodingColor).opacity30
-        }`,
-        [colorCodingBackgroundHoverShadowCustomProperty]: `0px 4px 8px 0px ${getOpacities(colorCodingColor).opacity10}`,
-        [colorCodingFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${
-          getOpacities(colorCodingColor).opacity40
-        }`,
-        [colorCodingHoverFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${
-          getOpacities(colorCodingColor).opacity60
-        }`,
-        [colorCodingShadowStrokeEntityBoxSelectedCustomProperty]: `0 0 0 1px ${
-          getOpacities(colorCodingColor).opacity60
-        }, 0 0 0 3px ${getOpacities(colorCodingColor).opacity40}`,
+        [colorCodingShadowEntityBoxDefaultCustomProperty]: `0px 2px 4px 0px ${alpha(colorCodingColor, 0.1)}`,
+        [colorCodingShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 1px ${alpha(colorCodingColor, 0.3)}`,
+        [colorCodingBackgroundHoverShadowCustomProperty]: `0px 4px 8px 0px ${alpha(colorCodingColor, 0.1)}`,
+        [colorCodingFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${alpha(colorCodingColor, 0.4)}`,
+        [colorCodingHoverFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${alpha(colorCodingColor, 0.6)}`,
+        [colorCodingShadowStrokeEntityBoxSelectedCustomProperty]: `0 0 0 1px ${alpha(
+          colorCodingColor,
+          0.6
+        )}, 0 0 0 3px ${alpha(colorCodingColor, 0.4)}`,
       } as CSSProperties)
     : {};
   return {

package/src/breadcrumb.tsx

@@ -4,10 +4,13 @@ import ArrowRight from "./icons/react/ArrowRight";
 import {ComponentPropsWithoutRef, ElementType, forwardRef} from "react";
 import More from "./icons/react/More";
 
-export const Breadcrumb = ({...props}: React.ComponentProps<"nav">) => {
-  return <nav aria-label="breadcrumb" {...props} />;
+export const Breadcrumb = ({className, ...rest}: React.ComponentProps<"nav">) => {
+  return <nav aria-label="breadcrumb" className={className} {...rest} />;
 };
 
+const breadcrumbColor = `var(--breadcrumb-color, ${themeVars.colorTextButtonGhostNeutral})`;
+const breadcrumbHoverColor = `var(--breadcrumb-hover-color, ${themeVars.textColor})`;
+
 const olReset = css`
   margin: 0;
   padding: 0;
@@ -20,11 +23,11 @@ const listCss = css`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: ${themeVars.colorTextButtonGhostNeutral};
+  color: ${breadcrumbColor};
 `;
 
-export const BreadcrumbList = ({className, ...props}: React.ComponentProps<"ol">) => {
-  return <ol className={cx(olReset, listCss, className)} {...props} />;
+export const BreadcrumbList = ({className, ...rest}: React.ComponentProps<"ol">) => {
+  return <ol className={cx(olReset, listCss, className)} {...rest} />;
 };
 
 const itemCss = css`
@@ -32,14 +35,14 @@ const itemCss = css`
   align-items: center;
 `;
 
-export const BreadcrumbItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({className, ...props}, ref) => {
-  return <li ref={ref} className={cx(itemCss, className)} {...props} />;
+export const BreadcrumbItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({className, ...rest}, ref) => {
+  return <li ref={ref} className={cx(itemCss, className)} {...rest} />;
 });
 
 const linkCss = css`
-  color: ${themeVars.colorTextButtonGhostNeutral};
+  color: ${breadcrumbColor};
   &:hover {
-    color: ${themeVars.textColor};
+    color: ${breadcrumbHoverColor};
   }
   transition: color ${transition};
 `;
@@ -62,7 +65,7 @@ const liReset = css`
 export const BreadcrumbSeparator = ({children, className, ...props}: React.ComponentProps<"li">) => {
   return (
     <li role="presentation" aria-hidden="true" className={cx(liReset, className)} {...props}>
-      {children ?? <ArrowRight color={themeVars.colorTextButtonGhostNeutral} containerSize={16} iconSize={16} />}
+      {children ?? <ArrowRight color={breadcrumbColor} containerSize={16} iconSize={16} />}
     </li>
   );
 };
@@ -71,7 +74,7 @@ export const BreadcrumbEllipsis = forwardRef<HTMLSpanElement, React.ComponentPro
   ({className, ...props}, ref) => {
     return (
       <span ref={ref} role="presentation" aria-hidden="true" className={cx(className)} {...props}>
-        <More color={themeVars.colorTextButtonGhostNeutral} containerSize={16} iconSize={16} />
+        <More color={breadcrumbColor} containerSize={16} iconSize={16} />
       </span>
     );
   }

package/src/button/base-button.tsx

@@ -1,7 +1,7 @@
 import {css, CSSProperties, cx} from "@linaria/core";
 import {Slot} from "@radix-ui/react-slot";
 import {forwardRef} from "react";
-import {themeVars} from "../design-system";
+import {transitionDuration, themeVars} from "../design-system";
 import {iconColorVar} from "../icons/Icon";
 
 export type ButtonSize = "tiny" | "small" | "medium" | "large" | "xLarge";
@@ -27,7 +27,7 @@ export const baseButton = css`
   user-select: none;
 
   transition-property: border, background-color, color, opacity, box-shadow;
-  transition-duration: 0.15s;
+  transition-duration: ${transitionDuration.fast};
 
   color: var(--fibery-button-text-color);
   ${iconColorVar}: var(--fibery-button-text-color);

package/src/button/make-button-colors.ts

@@ -3,10 +3,10 @@
 // so it's easier to find buttons with custom colors
 
 import {CSSProperties} from "@linaria/core";
-import {getDarkenColor, getOpacities, ThemeColors, themeVars} from "../design-system";
+import {alpha, getDarkenColor, Theme, themeVars} from "../design-system";
 import {ButtonVariant} from "./base-button";
 
-export const makeButtonColors = (color: string, variant: ButtonVariant, theme: ThemeColors): CSSProperties => {
+export const makeButtonColors = (color: string, variant: ButtonVariant, theme: Theme): CSSProperties => {
   switch (variant) {
     case "solid":
       return {
@@ -14,24 +14,24 @@ export const makeButtonColors = (color: string, variant: ButtonVariant, theme: T
         "--fibery-button-hover-color": getDarkenColor(color),
         "--fibery-button-text-color": themeVars.buttonPrimaryTextColor,
         "--fibery-button-text-active-color": themeVars.buttonPrimaryTextColor,
-        "--fibery-button-focus-color": getOpacities(color).opacity30,
+        "--fibery-button-focus-color": alpha(color, 0.3),
       };
     case "ghost":
       return {
         "--fibery-button-color": "transparent",
-        "--fibery-button-hover-color": getOpacities(color).opacity15,
+        "--fibery-button-hover-color": alpha(color, 0.15),
         "--fibery-button-text-color": color,
-        "--fibery-button-text-active-color": getOpacities(color).opacity80,
-        "--fibery-button-focus-color": getOpacities(color).opacity30,
+        "--fibery-button-text-active-color": alpha(color, 0.8),
+        "--fibery-button-focus-color": alpha(color, 0.3),
       };
     case "outline":
       return {
         "--fibery-button-color": "transparent",
-        "--fibery-button-hover-color": getOpacities(color).opacity15,
+        "--fibery-button-hover-color": alpha(color, 0.15),
         "--fibery-button-text-color": color,
-        "--fibery-button-text-active-color": getOpacities(color).opacity80,
-        "--fibery-button-focus-color": getOpacities(color).opacity30,
-        "--fibery-button-border-color": getOpacities(color).opacity30,
+        "--fibery-button-text-active-color": alpha(color, 0.8),
+        "--fibery-button-focus-color": alpha(color, 0.3),
+        "--fibery-button-border-color": alpha(color, 0.3),
       };
     default:
     case "soft": {
@@ -41,12 +41,12 @@ export const makeButtonColors = (color: string, variant: ButtonVariant, theme: T
       return {
         "--fibery-button-color": bgColor,
         "--fibery-button-hover-color": theme.select({
-          light: getOpacities(color).opacity30,
-          dark: getOpacities(color).opacity45,
+          light: alpha(color, 0.3),
+          dark: alpha(color, 0.45),
         }),
         "--fibery-button-text-color": textColor,
-        "--fibery-button-text-active-color": getOpacities(textColor).opacity80,
-        "--fibery-button-focus-color": getOpacities(color).opacity30,
+        "--fibery-button-text-active-color": alpha(textColor, 0.8),
+        "--fibery-button-focus-color": alpha(color, 0.3),
       };
     }
   }

package/src/canvas-colors.ts

@@ -0,0 +1,133 @@
+import {Color} from "culori";
+import {hslFrom, oklchFrom, rgbFrom, serializeHexVariadic} from "./color-utils";
+import memoize from "lodash/memoize";
+
+export type ColorDef = [light: string, dark: string];
+export type CanvasColorRole = "bg" | "sticker" | "section" | "fg" | "ui";
+
+/** @deprecated sacrifice in favor of oklch-canvas */
+export const backgrounds: ColorDef[] = [
+  ["#1E1E1E", "#FDFDFD"],
+  ["#6E7A83", "#A4AAAF"],
+  ["#F24822", "#C05437"],
+  ["#FFA629", "#DF9E53"],
+  ["#FFCD29", "#E5C55E"],
+  ["#14AE5C", "#568B5C"],
+  ["#0D99FF", "#5288DB"],
+  ["#9747FF", "#7742E3"],
+  ["#FF7ED9", "#CE6DB2"],
+  ["#FDFDFD", "#1E1E1E"], //"#FAFAFB",
+  ["#C1C8CD", "#D8E1E8"],
+  ["#E5E8EB", "#F1F2F4"],
+  ["#FFC7C2", "#F3D8D4"],
+  ["#FCD19C", "#F5E0CD"],
+  ["#FFE8A3", "#F3E7AF"],
+  ["#AFF4C6", "#CFF0DD"],
+  ["#BDE3FF", "#D3DFF9"],
+  ["#E4CCFF", "#DDD8F7"],
+  ["#FFD7F3", "#F0D4E9"],
+];
+
+/** @deprecated sacrifice in favor of oklch-canvas */
+export const stickers: ColorDef[] = [
+  ["#AFBCCF", "#8E9AAA"],
+  ["#FFAFA3", "#D78C80"],
+  ["#FFC470", "#DDA75B"],
+  ["#FFD966", "#D4B755"],
+  ["#85E0A3", "#6FB888"],
+  ["#80CAFF", "#66AEDD"],
+  ["#D9B8FF", "#B292D4"],
+  ["#FFBDF2", "#D89FC3"],
+  ["#F1F2F4", "#C9CBCE"],
+  ["#FFE5E2", "#D8B5B2"],
+  ["#FFE9CF", "#D6C0A3"],
+  ["#FEF2CE", "#D3C8A5"],
+  ["#D7FFE5", "#A9D1B6"],
+  ["#DAEFFF", "#AFC9DD"],
+  ["#F0E3FF", "#C2B0D4"],
+  ["#FFE4F7", "#D8B7CF"],
+];
+
+/** @deprecated kill in favor of oklch-canvas */
+export const sections: ColorDef[] = [
+  ["#DDDDDD", "#2E2E2E"],
+  ["#EAEAEA", "#3B3B3B"],
+  ["#FFE2E0", "#8C4B48"],
+  ["#FFEAD6", "#8C6B48"],
+  ["#FFF3D6", "#8C7D48"],
+  ["#DDF8E2", "#488C60"],
+  ["#DBF0FF", "#48678C"],
+  ["#EAE1FF", "#5A488C"],
+  ["#FFD6F2", "#8C4874"],
+  ["#FFFFFF", "#FFFFFF"],
+  ["#F4F4F4", "#353535"],
+  ["#F9F9F9", "#4C4C4C"],
+  ["#FFF5F5", "#5E3530"],
+  ["#FFF7F0", "#543B29"],
+  ["#FFFBF0", "#554D2D"],
+  ["#EBFFEE", "#21462F"],
+  ["#F5FBFF", "#434E5D"],
+  ["#F8F5FF", "#3F3B4C"],
+  ["#FFF0FA", "#392630"],
+];
+
+const fmt = (color: Color): string => serializeHexVariadic(rgbFrom(color));
+
+export let darkFromLight = (light: string, role: CanvasColorRole): string => {
+  const lch = oklchFrom(light)!;
+  const hsl = hslFrom(light)!;
+  const c = lch.c ?? 0;
+  const isAchromatic = c < 0.008;
+
+  const {alpha} = lch;
+
+  switch (role) {
+    case "bg":
+      if (c < 0.03) {
+        if (lch.l < 0.3) {
+          return fmt({mode: "oklch", l: 0.99, c: 0, h: undefined, alpha});
+        }
+        if (lch.l > 0.97) {
+          return fmt({mode: "oklch", l: 0.24, c: 0, h: undefined, alpha});
+        }
+        return fmt({mode: "oklch", l: lch.l + (0.98 - lch.l) * 0.5, c: c * 0.5, h: lch.h, alpha});
+      }
+      if (c > 0.1) {
+        return fmt({mode: "oklch", l: lch.l - 0.06, c: c * 0.74, h: lch.h, alpha});
+      }
+      return fmt({mode: "oklch", l: lch.l, c: c * 0.55, h: lch.h, alpha});
+
+    case "sticker":
+      if (isAchromatic) {
+        return fmt({mode: "oklch", l: lch.l - 0.13, c: 0, h: undefined, alpha});
+      }
+      if (c > 0.06) {
+        return fmt({mode: "oklch", l: lch.l - 0.11, c: c * 0.9, h: lch.h, alpha});
+      }
+      return fmt({mode: "oklch", l: lch.l - 0.13, c: c * 1.2, h: lch.h, alpha});
+
+    case "section":
+      if (isAchromatic) {
+        if (lch.l > 0.999) {
+          return light;
+        }
+        return fmt({mode: "oklch", l: lch.l * 0.35, c: 0, h: undefined, alpha});
+      }
+      if ((hsl.l ?? 0) < 0.95) {
+        return fmt({mode: "hsl", h: hsl.h, s: 0.32, l: 0.42, alpha});
+      }
+      return fmt({mode: "oklch", l: 0.37, c: 0.045, h: lch.h, alpha});
+
+    case "fg":
+      // Dark text (#1E1E1E) on light bg → light text on dark bg.
+      // Invert lightness in oklch: dark becomes light, light stays capped.
+      return fmt({mode: "oklch", l: Math.min(1 - lch.l + 0.15, 0.95), c: c * 0.85, h: lch.h, alpha});
+
+    case "ui":
+      return light;
+
+    default:
+      throw new Error(role);
+  }
+};
+darkFromLight = memoize(darkFromLight, (fg, r) => fg.toUpperCase() + r);

package/src/card-container.tsx

@@ -407,7 +407,7 @@ const compactCardContainerClassName = css`
 type CompactCardContainerProps = {
   title: ReactNode;
   floating?: ReactNode;
-  backgroundColors?: string[];
+  backgroundColors?: string[] | null;
 };
 
 export const CompactCardContainer = ({title, floating, backgroundColors}: CompactCardContainerProps) => {

package/src/checkbox-multi-select.tsx

@@ -1,8 +1,8 @@
-import {useTheme} from "./theme-provider";
 import {css} from "@linaria/core";
 import {FC} from "react";
 import {Checkbox} from "./checkbox";
-import {layout, space, textStyles, ThemeColors} from "./design-system";
+import {layout, space, textStyles, Theme} from "./design-system";
+import {useTheme} from "./theme-provider";
 
 const labelStyle = css`
   ${textStyles.regular}
@@ -35,7 +35,7 @@ type Option = {
 };
 
 interface CheckboxMultiSelectProps {
-  theme: ThemeColors;
+  theme: Theme;
   color?: string;
   options: Option[];
 }
@@ -55,7 +55,7 @@ export const CheckboxMultiSelect: FC<CheckboxMultiSelectProps> = ({options, colo
               checked={checked}
               onChange={onToggle}
               disabled={disabled}
-              color={optionColor || color || (theme && theme.primary)}
+              color={optionColor || color || theme.colors.colorAccent}
             />
             <div className={labelStyle}>{label}</div>
           </label>