@fibery/ui-kit 2.0.1 → 2.1.1

package/src/animated-height-container.tsx

@@ -1,6 +1,6 @@
 import {useSize} from "@fibery/react/src/use-size";
 import React, {ComponentProps, forwardRef, useEffect, useRef, useState} from "react";
-import {duration, transition} from "./design-system";
+import {durations, transition} from "./design-system";
 import noop from "lodash/noop";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 
@@ -34,7 +34,7 @@ export const AnimatedHeightContainer = forwardRef<HTMLDivElement, AnimatedHeight
         setHeightMeasured(true);
       }
       if (heightMeasured && size.height !== previousHeight) {
-        timeoutId = window.setTimeout(() => setPreviousHeight(size.height), duration);
+        timeoutId = window.setTimeout(() => setPreviousHeight(size.height), durations.faster);
       }
 
       return () => clearTimeout(timeoutId);

package/src/antd/{AutoComplete.js → AutoComplete.ts}

@@ -31,4 +31,4 @@ const autoCompleteStyles = css`
     },
   }}
 `;
-export const AntAutoComplete = wrapWithPopupContainer(getWrapper(autoCompleteStyles), AutoComplete);
+export const AntAutoComplete = wrapWithPopupContainer(getWrapper(autoCompleteStyles), AutoComplete<string>);

package/src/antd/{Tabs.js → Tabs.tsx}

@@ -20,7 +20,7 @@ export const tabsStyles = css`
       overflow: "visible",
     },
     "& .ant-tabs-ink-bar": {
-      backgroundColor: themeVars.primary,
+      backgroundColor: themeVars.colorAccent,
       height: 2,
     },
     "& .ant-tabs-nav": {
@@ -40,13 +40,16 @@ export const tabsStyles = css`
       margin: `0 ${space.s8}px 0 0`,
     },
     ".ant-tabs-top > .ant-tabs-nav::before": {
-      borderBottom: `1px solid ${themeVars.filterGroupBorder}`,
+      borderBottom: themeVars.borderSolidFilterGroup,
     },
   }}
 `;
 
 function getWrapper() {
-  return forwardRef(function TabWrapper({children, className}, ref) {
+  return forwardRef<HTMLDivElement, {children: React.ReactNode; className?: string}>(function TabWrapper(
+    {children, className},
+    ref
+  ) {
     return (
       <div className={cx(className, tabsStyles)} ref={ref}>
         {children}
@@ -55,4 +58,4 @@ function getWrapper() {
   });
 }
 
-export const AntTabs = wrapWith(getWrapper(tabsStyles), Tabs);
+export const AntTabs = wrapWith(getWrapper(), Tabs);

package/src/antd/ant-upload.tsx

@@ -28,7 +28,7 @@ export const antUploadStyle = css`
       alignContent: "stretch",
     },
     "& .ant-upload:where(.ant-upload-drag), .ant-upload:where(.ant-upload-select-picture-card)": {
-      border: `1px dashed ${themeVars.separator}`,
+      border: `1px dashed ${themeVars.colorAccentBgStrong}`,
       position: "relative",
       backgroundColor: themeVars.transparent,
       borderRadius: border.radius6,
@@ -44,7 +44,7 @@ export const antUploadStyle = css`
       "&.ant-upload-disabled": {
         cursor: "not-allowed",
         "&:hover": {
-          border: `1px dashed ${themeVars.separator}`,
+          border: `1px dashed ${themeVars.colorAccentBgStrong}`,
         },
       },
       "& > .ant-upload": {
@@ -56,11 +56,11 @@ export const antUploadStyle = css`
         padding: space.s8,
       },
       "&.ant-upload-drag-hover": {
-        border: `1px dashed ${themeVars.primary}`,
+        border: `1px dashed ${themeVars.colorAccent}`,
         transition: "none",
       },
       "&:hover": {
-        border: `1px dashed ${themeVars.primary}`,
+        border: `1px dashed ${themeVars.colorAccent}`,
         transition: "none",
       },
     },

package/src/antd/input-number.tsx

@@ -23,7 +23,7 @@ const inputNumberStyles = css`
       background: themeVars.transparent,
     },
     "& .ant-input-number-focused": {boxShadow: "none"},
-    "& .ant-input-number-handler-down": {borderTop: `1px solid ${themeVars.separatorColor} !important`},
+    "& .ant-input-number-handler-down": {borderTop: `${themeVars.borderSolidSeparator} !important`},
     "& .ant-input-number-input:hover": inputOverrides.hover,
     "& .ant-input-number-input:focus, & .ant-input-number-input:active, & .ant-input-number-focused .ant-input-number-input":
       inputOverrides.focus,
@@ -35,7 +35,7 @@ const inputNumberStyles = css`
     },
     "& .ant-input-number-handler": {
       color: themeVars.iconColor,
-      borderLeft: `1px solid ${themeVars.separatorColor}`,
+      borderLeft: themeVars.borderSolidSeparator,
       "&:active": {
         backgroundColor: themeVars.transparent,
       },

package/src/antd/input.tsx

@@ -3,7 +3,7 @@ import Input from "antd/lib/input";
 import "antd/lib/input/style/css";
 import {css} from "@linaria/core";
 import {mobileRootSelector} from "../mobile-styles";
-import {opacity, textStyles, themeVars} from "../design-system";
+import {textStyles, themeVars} from "../design-system";
 import {inputStyles} from "./styles";
 import {wrapWith} from "./utils";
 
@@ -33,7 +33,7 @@ export const transparentInputStyle = css`
     },
     "& input.ant-input-disabled, & textarea.ant-input-disabled": {
       WebkitTextFillColor: "currentColor",
-      opacity: opacity.opacity40,
+      opacity: themeVars.opacity40,
       backgroundColor: themeVars.transparent,
       cursor: "default",
     },

package/src/antd/styles.ts

@@ -4,14 +4,14 @@ import {border, layout, shadows, space, textStyles, themeVars, transition} from
 const inputVariables = {
   default: {
     "--input-border": `${themeVars.inputBorderColor} inset`,
-    "--input-hover-border": `0 0 0 1px ${themeVars.opacity.opacity40} inset`,
-    "--input-focus-border": `0 0 0 1px ${themeVars.opacity.opacity50} inset`,
-    "--input-focus-shadow": `0 0 0 2px ${themeVars.focus}`,
+    "--input-hover-border": `0 0 0 1px ${themeVars.colorAccentStrokeHover} inset`,
+    "--input-focus-border": `0 0 0 1px ${themeVars.colorAccentStrokeFocus} inset`,
+    "--input-focus-shadow": `0 0 0 2px ${themeVars.colorAccentStroke}`,
   },
   error: {
-    "--input-border": `0 0 0 1px ${themeVars.warning} inset`,
-    "--input-hover-border": `0 0 0 1px ${themeVars.warning} inset`,
-    "--input-focus-border": `0 0 0 1px ${themeVars.warning} inset`,
+    "--input-border": `${themeVars.inputBorderWarningColor} inset`,
+    "--input-hover-border": `${themeVars.inputBorderWarningColor} inset`,
+    "--input-focus-border": `${themeVars.inputBorderWarningColor} inset`,
     "--input-focus-shadow": `0 0 0 2px ${themeVars.warning}`,
   },
 };
@@ -39,11 +39,11 @@ export const inputOverrides = {
     },
   },
   hover: {
-    boxShadow: `var(--input-hover-border, 0 0 0 1px ${themeVars.opacity.opacity40}) !important`,
+    boxShadow: `var(--input-hover-border, 0 0 0 1px ${themeVars.colorAccentStrokeHover}) !important`,
     transition: `box-shadow ${transition}`,
   },
   focus: {
-    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.opacity.opacity25}), var(--input-focus-shadow) !important`,
+    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.colorAccentStroke}), var(--input-focus-shadow) !important`,
     transition: `box-shadow ${transition}`,
   },
   disabled: {

package/src/antd/utils.tsx

@@ -1,16 +1,5 @@
 import {ElementType, forwardRef, useCallback, useRef} from "react";
 
-export const createBodyNode = (className: string) => {
-  const node = document.createElement("div");
-  node.className = className;
-  document.body.appendChild(node);
-  return node;
-};
-
-export const removeBodyNode = (node: Node) => {
-  document.body.removeChild(node);
-};
-
 export const wrapWith = <C extends React.ElementType>(
   WrapperComponent: ElementType,
   Component: C
@@ -28,16 +17,16 @@ export const wrapWith = <C extends React.ElementType>(
 };
 
 export const wrapWithPopupContainer = <C extends React.ElementType>(Wrapper: ElementType, WrappedComponent: C) => {
-  return forwardRef(function ProvidePopupContainerGetter(props, forwardedRef) {
-    const wrapperRef = useRef();
-    const getPopupContainer = useCallback(() => {
-      return wrapperRef.current;
-    }, []);
-    return (
-      <Wrapper ref={wrapperRef}>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-        <WrappedComponent ref={forwardedRef} getPopupContainer={getPopupContainer} {...(props as any)} />
-      </Wrapper>
-    );
-  });
+  return forwardRef<React.ElementRef<C>, Omit<React.ComponentPropsWithoutRef<C>, "getPopupContainer">>(
+    function ProvidePopupContainerGetter(props, forwardedRef) {
+      const wrapperRef = useRef<HTMLDivElement>(null);
+      const getPopupContainer = useCallback(() => wrapperRef.current!, []);
+      return (
+        <Wrapper ref={wrapperRef}>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <WrappedComponent ref={forwardedRef} getPopupContainer={getPopupContainer} {...(props as any)} />
+        </Wrapper>
+      );
+    }
+  );
 };

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

@@ -40,6 +40,7 @@ export function getImageUrl(emoji: AppIcon) {
 
 interface UglyExternalIconImplProps {
   color?: string | null;
+  colorProcessed?: boolean;
   name: string;
   iconSize?: number;
   containerSize?: number;
@@ -48,6 +49,7 @@ interface UglyExternalIconImplProps {
 
 const UglyExternalIconImpl: FC<UglyExternalIconImplProps> = ({
   color,
+  colorProcessed,
   iconSize = 16,
   name,
   containerSize,
@@ -77,6 +79,7 @@ const UglyExternalIconImpl: FC<UglyExternalIconImplProps> = ({
       containerSize={containerSize}
       iconSize={iconSize}
       color={color}
+      colorProcessed={colorProcessed}
     >
       <use href={imageUrl} />
     </Icon>
@@ -103,14 +106,27 @@ const UglyExternalIcon = lazy(async () => {
 export interface AppIconWithFallbackProps {
   name: string;
   color?: string | null;
+  colorProcessed?: boolean;
   iconSize?: number;
   containerSize?: number;
 }
 
-export const AppIconWithFallback: FC<AppIconWithFallbackProps> = ({containerSize, name, color, iconSize}) => {
+export const AppIconWithFallback: FC<AppIconWithFallbackProps> = ({
+  containerSize,
+  name,
+  color,
+  colorProcessed,
+  iconSize,
+}) => {
   return (
     <Suspense fallback={<IconLoader containerSize={containerSize} />}>
-      <UglyExternalIcon containerSize={containerSize} color={color} name={name} iconSize={iconSize} />
+      <UglyExternalIcon
+        containerSize={containerSize}
+        color={color}
+        colorProcessed={colorProcessed}
+        name={name}
+        iconSize={iconSize}
+      />
     </Suspense>
   );
 };
@@ -123,22 +139,29 @@ interface AppIconProps {
   containerSize?: number;
 }
 
-export const AppIcon: FC<AppIconProps> = ({icon, color, isSelected, ...rest}) => {
+export const AppIcon: FC<AppIconProps> = ({icon, color: neutralColor, isSelected, ...rest}) => {
   const theme = useTheme();
+  const color = theme.fns.deneutralize(neutralColor);
   const isPhone = useIsPhone();
   const defaultIconSize = isPhone ? layout.mobileSidebarIconSize : layout.newMenuIconSize;
   const {iconSize = defaultIconSize, containerSize = defaultIconSize} = rest;
   const iconColor = theme.select({
-    dark: a11yColor(alpha(color, 0.95), theme.menuBg, 5),
-    light: a11yColor(alpha(color, 0.95), theme.whiteColor, 3),
-    light2: a11yColor(alpha(color, 0.95), theme.menuBg, 5),
+    dark: a11yColor(alpha(color, 0.95), theme.colors.menuBg, 5),
+    light: a11yColor(alpha(color, 0.95), theme.colors.whiteColor, 3),
+    light2: a11yColor(alpha(color, 0.95), theme.colors.menuBg, 5),
   });
 
   const bgColor = theme.fns.getAppIconBackground(color);
 
   return (
-    <AppIconWrapper color={bgColor as string} borderless={isSelected} containerSize={containerSize}>
-      <AppIconWithFallback name={icon} color={iconColor as string} containerSize={containerSize} iconSize={iconSize} />
+    <AppIconWrapper color={bgColor} borderless={isSelected} containerSize={containerSize}>
+      <AppIconWithFallback
+        name={icon}
+        color={iconColor}
+        colorProcessed
+        containerSize={containerSize}
+        iconSize={iconSize}
+      />
     </AppIconWrapper>
   );
 };

package/src/app-icon.tsx

@@ -3,7 +3,7 @@ import cx from "classnames";
 import {FC} from "react";
 import {a11yColor} from "./a11y-color";
 import {AppIconWithFallback} from "./app-icon-with-fallback";
-import {alpha, border} from "./design-system";
+import {alpha, border, themeVars} from "./design-system";
 import {useTheme} from "./theme-provider";
 
 interface AppIconProps {
@@ -14,20 +14,27 @@ interface AppIconProps {
   className?: string;
 }
 
-export const AppIcon: FC<AppIconProps> = ({color, icon, containerSize = 54, iconSize = 36, className}) => {
+export const AppIcon: FC<AppIconProps> = ({
+  color: neutralColor,
+  icon,
+  containerSize = 54,
+  iconSize = 36,
+  className,
+}) => {
   const theme = useTheme();
+  const color = theme.fns.deneutralize(neutralColor);
   const iconColor = theme.select({
-    dark: a11yColor(alpha(color, 0.95), theme.menuBg, 5),
-    light: a11yColor(alpha(color, 0.95), theme.whiteColor, 3),
-    light2: a11yColor(alpha(color, 0.95), theme.menuBg, 5),
+    dark: a11yColor(alpha(color, 0.95), theme.colors.menuBg, 5),
+    light: a11yColor(alpha(color, 0.95), theme.colors.whiteColor, 3),
+    light2: a11yColor(alpha(color, 0.95), theme.colors.menuBg, 5),
   });
 
   const bgColor = theme.fns.getAppIconBackground(color);
 
   const appIconGradientStyle = theme.select({
-    dark: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",
+    dark: `linear-gradient(180deg, ${themeVars.whiteA10}, transparent)`,
     light: "none",
-    light2: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",
+    light2: `linear-gradient(180deg, ${themeVars.whiteA10}, transparent)`,
   });
 
   return (
@@ -46,7 +53,13 @@ export const AppIcon: FC<AppIconProps> = ({color, icon, containerSize = 54, icon
         height: containerSize,
       }}
     >
-      <AppIconWithFallback containerSize={containerSize} color={iconColor as string} name={icon} iconSize={iconSize} />
+      <AppIconWithFallback
+        containerSize={containerSize}
+        color={iconColor as string}
+        colorProcessed
+        name={icon}
+        iconSize={iconSize}
+      />
     </div>
   );
 };

package/src/avatar.tsx

@@ -1,13 +1,14 @@
 import {css, cx} from "@linaria/core";
 import memoize from "lodash/memoize";
 import {CSSProperties, FC, memo, useCallback, useMemo, useState} from "react";
-import {getDarkenColor, getObjectColorMemoized, space, 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];
 
@@ -190,15 +191,17 @@ type AvatarPlaceholderProps = {
 
 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>
@@ -278,7 +281,7 @@ const avatarGroupCountCss = css`
   color: ${themeVars.accentTextColor};
   font-size: calc(var(--fibery-avatar-group-count-size) * 0.5);
   background-color: ${themeVars.badgeBgColor};
-  border-radius: 50%;
+  border-radius: ${border.radiusFull};
 `;
 
 function AvatarGroupCount({className, size, ...props}: {size: number} & React.ComponentProps<"div">) {

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

@@ -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};

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);