@fibery/ui-kit 2.0.1 → 2.1.0

package/src/theme-styles.ts

@@ -1,35 +1,41 @@
 import {css} from "@linaria/core";
-import {createInlineStyles, getThemeColors, ThemeColors, ThemeStyles} from "./design-system";
+import {Styles, stylesFromTheme, Theme, ThemeDefs} from "./design-system";
 import {warmUserPalette} from "./palettes/warm-user";
-import {slateUserPalette} from "./palettes/slate-user";
+import {neutralUserPalette} from "./palettes/neutral-user";
 import {ThemeMode} from "./theme-settings";
+import {defsFromPalette} from "./design-system/colors";
+import {themeFromDefs} from "./design-system/theme";
+import {ThemePalette} from "./palette-generator";
 
-export const defaultPalette = slateUserPalette;
-export const defaultLightTheme = getThemeColors(null, "light", defaultPalette);
-export const defaultDarkTheme = getThemeColors(null, "dark", defaultPalette);
+type Pair<T> = readonly [light: T, dark: T];
 
-const warmPalette = warmUserPalette;
-const warmLightTheme = getThemeColors(null, "light", warmPalette);
-const warmDarkTheme = getThemeColors(null, "dark", warmPalette);
-
-export const defaultLightThemeStyles = createInlineStyles(defaultLightTheme);
-export const defaultDarkThemeStyles = createInlineStyles(defaultDarkTheme);
+function make(palette: ThemePalette): {
+  defs: ThemeDefs;
+  palette: ThemePalette;
+  themes: Pair<Theme>;
+  styles: Pair<Styles>;
+} {
+  const defs = defsFromPalette(palette);
+  const themeLight = themeFromDefs(defs, "light");
+  const themeDark = themeFromDefs(defs, "dark");
+  return {
+    defs,
+    palette,
+    themes: [themeLight, themeDark],
+    styles: [stylesFromTheme(themeLight), stylesFromTheme(themeDark)],
+  };
+}
 
-const warmLightThemeStyles = createInlineStyles(warmLightTheme);
-const warmDarkThemeStyles = createInlineStyles(warmDarkTheme);
+const neutral = make(neutralUserPalette);
+const warm = make(warmUserPalette);
 
-type GlobalTheme = [colors: ThemeColors, styles: ThemeStyles];
+export function locateThemeBundle(warmer: boolean) {
+  return warmer ? warm : neutral;
+}
 
-export function selectGlobalThemePair(warm: boolean): [light: GlobalTheme, dark: GlobalTheme] {
-  return warm
-    ? [
-        [warmLightTheme, warmLightThemeStyles],
-        [warmDarkTheme, warmDarkThemeStyles],
-      ]
-    : [
-        [defaultLightTheme, defaultLightThemeStyles],
-        [defaultDarkTheme, defaultDarkThemeStyles],
-      ];
+export function locateTheme(warmer: boolean, mode: ThemeMode): Theme {
+  const themes = warmer ? warm.themes : neutral.themes;
+  return themes[Number(mode === "dark")];
 }
 
 const darkClassName = "dark-theme";
@@ -58,15 +64,15 @@ export function chooseGlobalStyles(themeMode: ThemeMode, warm: boolean) {
 export const globals = css`
   :global() {
     html:root {
-      ${defaultLightThemeStyles}
+      ${neutral.styles[0]}
       &.dark-theme {
-        ${defaultDarkThemeStyles}
+        ${neutral.styles[1]}
       }
 
       &.warm-palette {
-        ${warmLightThemeStyles}
+        ${warm.styles[0]}
         &.dark-theme {
-          ${warmDarkThemeStyles}
+          ${warm.styles[1]}
         }
       }
     }

package/src/themed-ink.tsx

@@ -0,0 +1,26 @@
+import {CSSProperties, ReactNode} from "react";
+import {useTheme} from "./theme-provider";
+
+type ThemedInkProps = {
+  as?: "span" | "div";
+  fg?: string;
+  bg?: string;
+  style?: CSSProperties;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const ThemedInk = ({as: Tag = "span", fg, bg, style, ...rest}: ThemedInkProps) => {
+  const theme = useTheme();
+  const dn = theme.fns.deneutralize;
+  return (
+    <Tag
+      style={{
+        ...style,
+        ...(fg && {color: dn(fg)}),
+        ...(bg && {backgroundColor: dn(bg)}),
+      }}
+      {...rest}
+    />
+  );
+};

package/src/toast/toast-action.tsx

@@ -1,7 +1,7 @@
 import {css} from "@linaria/core";
 import {Action as RadixToastAction, type ToastActionProps} from "@radix-ui/react-toast";
 import {ElementRef, forwardRef} from "react";
-import {ButtonProps, Button} from "../button/button";
+import {Button, ButtonProps} from "../button/button";
 import {space} from "../design-system";
 import {makeButtonColors} from "../button/make-button-colors";
 import {useTheme} from "../theme-provider";
@@ -19,7 +19,7 @@ export const ToastAction = forwardRef<
   ButtonProps & {altText: ToastActionProps["altText"]}
 >(({children, altText, ...props}, ref) => {
   const theme = useTheme();
-  const buttonColors = theme.mode === "dark" ? makeButtonColors(theme.textColor, "outline", theme) : {};
+  const buttonColors = theme.mode === "dark" ? makeButtonColors(theme.colors.textColor, "outline", theme) : {};
   return (
     <RadixToastAction className={toastActionCss} ref={ref} altText={altText} asChild>
       <Button style={buttonColors} variant="outline" color="neutral" {...props}>

package/src/toggle-button/round-toggle-button.tsx

@@ -1,10 +1,11 @@
 import {ComponentRef, forwardRef} from "react";
 import {ToggleButton, ToggleButtonProps} from "./toggle-button";
 import {css, cx} from "@linaria/core";
+import {border} from "../design-system";
 
 const roundToggleButtonCss = css`
   &:is(&) {
-    border-radius: 100%;
+    border-radius: ${border.radiusFull};
     width: 28px;
     height: 28px;
     padding: 0;

package/src/toggle-button/toggle-button.tsx

@@ -1,7 +1,7 @@
 import {css, cx, CSSProperties} from "@linaria/core";
 import {Toggle, ToggleProps} from "@radix-ui/react-toggle";
 import {forwardRef} from "react";
-import {border, space, textStyles, themeVars} from "../design-system";
+import {border, transitionDuration, space, textStyles, themeVars} from "../design-system";
 import {iconColorVar, iconSizeVar} from "../icons/Icon";
 
 export const toggleButtonCss = css`
@@ -16,7 +16,7 @@ export const toggleButtonCss = css`
   border-radius: ${border.radius8}px;
 
   transition-property: border, background-color, color, opacity, box-shadow;
-  transition-duration: 0.15s;
+  transition-duration: ${transitionDuration.fast};
 
   color: var(--fibery-toggle-button-default-text-color);
   ${iconColorVar}: var(--fibery-toggle-button-default-icon-color);
@@ -114,7 +114,7 @@ export const toggleButtonContent = css`
   height: 100%;
 
   transition-property: opacity;
-  transition-duration: 0.15s;
+  transition-duration: ${transitionDuration.fast};
 
   .${toggleButtonCss}:is(:active, [aria-expanded="true"]) > & {
     opacity: 0.8;

package/src/toggle-on-off.tsx

@@ -1,19 +1,19 @@
-import {FC, ComponentProps, useMemo} from "react";
+import {ComponentProps, FC, useMemo} from "react";
 import {isValidColor} from "./color-utils";
-import {ThemeColors} from "./design-system";
+import {Theme} from "./design-system";
 import {useTheme} from "./theme-provider";
 import {Toggle} from "./toggle";
 import {useIsPhone} from "./use-is-phone";
 
-const getBackgroundColors = (accentColor: string | undefined, theme: ThemeColors) => {
+const getBackgroundColors = (accentColor: string | undefined, theme: Theme) => {
   return accentColor && isValidColor(accentColor)
     ? {
         enabledColor: accentColor,
-        disabledColor: theme.colorBgButtonSoftNeutralHover,
+        disabledColor: theme.colors.colorBgButtonSoftNeutralHover,
       }
     : {
-        enabledColor: theme.colorBgButtonSolidAccentDefault,
-        disabledColor: theme.colorBgButtonSoftNeutralHover,
+        enabledColor: theme.colors.colorBgButtonSolidAccentDefault,
+        disabledColor: theme.colors.colorBgButtonSoftNeutralHover,
       };
 };
 
@@ -41,5 +41,5 @@ interface ReduxFormToggleOnOffProps extends ToggleOnOffProps {
 
 export const ReduxFormToggleOnOff: FC<ReduxFormToggleOnOffProps> = ({input, ...rest}) => {
   const theme = useTheme();
-  return <ToggleOnOff color={theme.primaryBlue} {...input} {...rest} />;
+  return <ToggleOnOff color={theme.colors.colorAccent} {...input} {...rest} />;
 };

package/src/tooltip-if-overflown.tsx

@@ -21,11 +21,11 @@ export const useTruncated = () => {
 };
 
 export const TooltipIfOverflown: React.FC<
-  Omit<TooltipProps, "children"> & {children: (args: {setNode: SetNode}) => JSX.Element | null}
-> = ({children, ...tooltipProps}) => {
+  Omit<TooltipProps, "children"> & {force?: boolean; children: (args: {setNode: SetNode}) => JSX.Element | null}
+> = ({force, children, ...tooltipProps}) => {
   const {truncated, setNode} = useTruncated();
   return (
-    <Tooltip {...tooltipProps} disabled={!truncated}>
+    <Tooltip {...tooltipProps} disabled={!truncated && !force}>
       {children({setNode})}
     </Tooltip>
   );

package/src/tree-utils.ts

@@ -1,4 +1,4 @@
-import {$TSFixMe} from "@fibery/ui-kit/src/tsfixme";
+import {$TSFixMe} from "./tsfixme";
 
 export type ItemId = string | number;
 export interface TreeData {

package/src/type-badge-box.tsx

@@ -1,6 +1,6 @@
 import {makeAbbreviation} from "./type-badge";
 import {css, cx} from "@linaria/core";
-import {space} from "./design-system";
+import {space, themeVars} from "./design-system";
 import {ReactNode} from "react";
 
 type Props = {
@@ -32,7 +32,7 @@ export const TypeBadgeBox = ({width, height, typeObject, children, className}: P
         abbr.length > 1 &&
           css`
             & > div {
-              mask-image: linear-gradient(90deg, #000 60%, rgba(0, 0, 0, 0.4));
+              mask-image: linear-gradient(90deg, ${themeVars.whiteA100} 60%, ${themeVars.whiteA40});
             }
           `,
         className

package/src/type-badge.tsx

@@ -8,7 +8,6 @@ import {
   fontWeight,
   getDarkenColor,
   getTextColor,
-  opacity,
   space,
   textStyles,
   themeVars,
@@ -120,10 +119,10 @@ const clickableStyle = css`
   cursor: pointer;
 `;
 const fadedStyle = css`
-  opacity: ${opacity.opacity25};
+  opacity: ${themeVars.opacity25};
 `;
 const noColorStyle = css`
-  opacity: ${opacity.opacity60};
+  opacity: ${themeVars.opacity60};
 `;
 
 export const makeDescription = (typeObject: {description?: string | null}): string | null => {
@@ -138,10 +137,10 @@ export const makeAbbreviation = (title = "") =>
 
 type TypeBadgeProps = {
   color: string | null;
-  onMouseDown?: () => void;
+  onMouseDown?: React.MouseEventHandler;
   onMouseEnter?: React.MouseEventHandler;
   onMouseLeave?: React.MouseEventHandler;
-  onClick?: () => void;
+  onClick?: React.MouseEventHandler;
   children: ReactNode;
   selected?: boolean;
   abbr?: boolean;
@@ -193,7 +192,7 @@ export const TypeBadge = memo(
 
     const theme = useTheme();
 
-    const baseColor = color || theme.iconColor;
+    const baseColor = theme.fns.deneutralize(color || theme.colors.iconColor);
 
     const textBadgeColor = a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12);
 
@@ -205,8 +204,8 @@ export const TypeBadge = memo(
 
     const resultingStyle = {
       ...style,
-      [colorProp]: baseColor ? textBadgeColor : themeVars.inversedTextColor,
-      [colorBackgroundProp]: backgroundBadgeColor || themeVars.shades.opacity25,
+      [colorProp]: color ? textBadgeColor : themeVars.inversedTextColor,
+      [colorBackgroundProp]: backgroundBadgeColor || themeVars.colorPlaceholderSubtle,
       [colorBorderProp]: backgroundBadgeColor,
       [colorDarkProp]: getDarkenColor(baseColor),
     } as CSSProperties;
@@ -254,10 +253,10 @@ const getTypeObjectTitleForm = (typeObject: TypeObjectInfo, form: "singular" | "
 
 type TypeObjectBadgeParams = {
   typeObject: TypeObjectInfo;
-  onMouseDown?: () => void;
+  onMouseDown?: React.MouseEventHandler;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
-  onClick?: () => void;
+  onClick?: React.MouseEventHandler;
   abbr?: boolean;
   compact?: boolean;
   vertical?: boolean;

package/src/unit/maybe-unit-value.tsx

@@ -1,7 +1,7 @@
 import {LoadingUnitValue} from "./loading-unit-value";
 
 type Props = {
-  value?: string;
+  value?: React.ReactNode;
 };
 
 export const MaybeUnitValue: React.FC<Props> = ({value}) => {

package/src/unit/types.ts

@@ -9,7 +9,7 @@ export type UnitPrimitiveProps = {
   renderAsDiv?: boolean;
   // Content
   children?: ReactNode;
-  title?: string;
+  title?: ReactNode;
   fieldIcon?: string;
   description?: ReactNode;
   icons?: React.ReactNodeArray;

package/src/workflow-progress-icon.tsx

@@ -53,7 +53,7 @@ export const WorkflowProgressIcon: FC<WorkflowProgressIcon> = ({
 };
 
 const getPath = memoize(
-  (index, total, size) => {
+  (index: number, total: number, size: number) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore bad d3-shape typings
     return arc()

package/.oxlintrc.json

@@ -1,24 +0,0 @@
-{
-  "$schema": "../../node_modules/oxlint/configuration_schema.json",
-  "extends": ["../../.oxlintrc.json"],
-  "rules": {
-    "no-restricted-imports": [
-      "error",
-      {
-        "patterns": [
-          {
-            "group": ["@fibery/ui-kit/*"]
-          }
-        ]
-      }
-    ]
-  },
-  "overrides": [
-    {
-      "files": ["src/icons/**/*"],
-      "rules": {
-        "unicorn/filename-case": "off"
-      }
-    }
-  ]
-}

package/src/actions-menu/actions-menu-open-state-tracker.tsx

@@ -1,66 +0,0 @@
-import {createContext} from "@fibery/react/src/create-context";
-import {ReactNode, useCallback, useEffect, useId, useMemo, useState} from "react";
-
-type ContextValue = {
-  openMenus: Set<string>;
-  setOpenMenus: (value: Set<string>) => void;
-};
-
-const [Provider, useContext] = createContext<ContextValue>("ActionsMenuOpenStateTrackerContext", {
-  openMenus: new Set(),
-  setOpenMenus: () => {},
-});
-
-export const ActionsMenuOpenStateTrackerProvider = ({children}: {children: ReactNode}) => {
-  const [openMenus, setOpenMenus] = useState<Set<string>>(new Set());
-
-  const value = useMemo(() => {
-    return {
-      openMenus,
-      setOpenMenus,
-    };
-  }, [openMenus, setOpenMenus]);
-
-  return <Provider value={value}>{children}</Provider>;
-};
-
-export const useActionsMenuOpenStateTracker = () => {
-  const {openMenus, setOpenMenus} = useContext();
-
-  const menuId = useId();
-
-  const onAddMenu = useCallback(() => {
-    openMenus.add(menuId);
-    setOpenMenus(new Set(openMenus));
-  }, [menuId, openMenus, setOpenMenus]);
-
-  const onRemoveMenu = useCallback(() => {
-    if (openMenus.has(menuId)) {
-      openMenus.delete(menuId);
-      setOpenMenus(new Set(openMenus));
-    }
-  }, [menuId, openMenus, setOpenMenus]);
-
-  useEffect(() => {
-    return () => {
-      onRemoveMenu();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onMenuOpenChange = useCallback(
-    (open: boolean) => {
-      if (open) {
-        onAddMenu();
-      } else {
-        onRemoveMenu();
-      }
-    },
-    [onAddMenu, onRemoveMenu]
-  );
-
-  return {
-    hasOpenMenu: openMenus.size > 0,
-    onMenuOpenChange,
-  };
-};

package/src/design-system/alpha.test.ts

@@ -1,59 +0,0 @@
-import {getOpacities, transparent} from "./alpha";
-
-describe("getOpacities", () => {
-  test("color maps to alphas", () => {
-    expect(getOpacities("#f00")).toMatchInlineSnapshot(`
-      {
-        "opacity0": "rgba(255,0,0,0)",
-        "opacity10": "rgba(255,0,0,0.1)",
-        "opacity100": "rgb(255,0,0)",
-        "opacity15": "rgba(255,0,0,0.15)",
-        "opacity20": "rgba(255,0,0,0.2)",
-        "opacity25": "rgba(255,0,0,0.25)",
-        "opacity30": "rgba(255,0,0,0.3)",
-        "opacity35": "rgba(255,0,0,0.35)",
-        "opacity40": "rgba(255,0,0,0.4)",
-        "opacity45": "rgba(255,0,0,0.45)",
-        "opacity5": "rgba(255,0,0,0.05)",
-        "opacity50": "rgba(255,0,0,0.5)",
-        "opacity55": "rgba(255,0,0,0.55)",
-        "opacity60": "rgba(255,0,0,0.6)",
-        "opacity65": "rgba(255,0,0,0.65)",
-        "opacity70": "rgba(255,0,0,0.7)",
-        "opacity75": "rgba(255,0,0,0.75)",
-        "opacity80": "rgba(255,0,0,0.8)",
-        "opacity85": "rgba(255,0,0,0.85)",
-        "opacity90": "rgba(255,0,0,0.9)",
-        "opacity95": "rgba(255,0,0,0.95)",
-      }
-    `);
-  });
-
-  test("transparent is identity map", () => {
-    expect(getOpacities(transparent)).toMatchInlineSnapshot(`
-      {
-        "opacity0": "rgba(255, 255, 255, 0)",
-        "opacity10": "rgba(255, 255, 255, 0)",
-        "opacity100": "rgba(255, 255, 255, 0)",
-        "opacity15": "rgba(255, 255, 255, 0)",
-        "opacity20": "rgba(255, 255, 255, 0)",
-        "opacity25": "rgba(255, 255, 255, 0)",
-        "opacity30": "rgba(255, 255, 255, 0)",
-        "opacity35": "rgba(255, 255, 255, 0)",
-        "opacity40": "rgba(255, 255, 255, 0)",
-        "opacity45": "rgba(255, 255, 255, 0)",
-        "opacity5": "rgba(255, 255, 255, 0)",
-        "opacity50": "rgba(255, 255, 255, 0)",
-        "opacity55": "rgba(255, 255, 255, 0)",
-        "opacity60": "rgba(255, 255, 255, 0)",
-        "opacity65": "rgba(255, 255, 255, 0)",
-        "opacity70": "rgba(255, 255, 255, 0)",
-        "opacity75": "rgba(255, 255, 255, 0)",
-        "opacity80": "rgba(255, 255, 255, 0)",
-        "opacity85": "rgba(255, 255, 255, 0)",
-        "opacity90": "rgba(255, 255, 255, 0)",
-        "opacity95": "rgba(255, 255, 255, 0)",
-      }
-    `);
-  });
-});

package/src/design-system.test.ts

@@ -1,48 +0,0 @@
-import * as exports from "./design-system";
-
-test("exports", () => {
-  expect(Object.keys(exports).toSorted()).toEqual(
-    [
-      "border",
-      "cardTypeColors",
-      "createInlineStyles",
-      "dateFormat",
-      "dateTimeFormat",
-      "dropCursorColor",
-      "duration",
-      "easing",
-      "fontFamily",
-      "fontSize",
-      "fontWeight",
-      "getDarkenColor",
-      "getEnumTextColor",
-      "getLinearGradient",
-      "getObjectColorMemoized",
-      "alpha",
-      "getOpacities",
-      "getTextColor",
-      "getThemeColors",
-      "iconSize",
-      "layout",
-      "layoutVars",
-      "lineHeight",
-      "listRowSurfaceFontSizeVar",
-      "menuItemHeightVar",
-      "minPanelWidth",
-      "opacity",
-      "shadows",
-      "sidebarMenuIconSizeVar",
-      "sidebarMenuItemHeightVar",
-      "space",
-      "spaceNestedTreeInterval",
-      "spaceNestedTreeLevel",
-      "textStyles",
-      "themeVars",
-      "timeFormat",
-      "tooltipDelay",
-      "transition",
-      "typeSizes",
-      "viewBoxSize",
-    ].toSorted()
-  );
-});

package/src/error-alert/error-alert-action.tsx

@@ -1,12 +0,0 @@
-import {ButtonProps, Button} from "../button/button";
-
-export const ErrorAlertAction = ({
-  size = "small",
-  variant = "outline",
-  color = "neutral",
-  className,
-  ...rest
-}: ButtonProps) => {
-  return <Button size={size} variant={variant} color={color} className={className} {...rest} />;
-};
-export type ErrorAlertActionElement = React.ReactElement<typeof ErrorAlertAction>;

package/src/error-alert/error-alert.tsx

@@ -1,71 +0,0 @@
-import {css} from "@linaria/core";
-import {IconButton} from "../button/icon-button";
-import {border, fontWeight, layout, space, textStyles, themeVars, typeSizes} from "../design-system";
-import CloseIcon from "../icons/react/Close";
-import WarningFilledIcon from "../icons/react/WarningTriangleFilled";
-import {useTheme} from "../theme-provider";
-import {ErrorAlertActionElement} from "./error-alert-action";
-
-const errorAlert = css`
-  background-color: ${themeVars.errorBgColor};
-  padding: ${space.s12}px;
-  min-height: ${layout.itemHeight}px;
-  border-radius: ${border.radius8}px;
-  display: flex;
-  gap: ${space.s8}px;
-  align-items: center;
-`;
-
-const infoStyle = css`
-  color: ${themeVars.textColor};
-  flex-grow: 1;
-
-  display: flex;
-  flex-direction: column;
-  gap: ${space.s4}px;
-  padding: 0 ${space.s4}px;
-  justify-content: center;
-  align-items: flex-start;
-`;
-
-const messageStyle = css`
-  ${{
-    ...textStyles.regular,
-    fontSize: typeSizes[5],
-    fontWeight: fontWeight.medium,
-    color: themeVars.errorTextColor,
-  }};
-`;
-
-const descriptionStyle = css`
-  ${{
-    ...textStyles.small,
-    color: themeVars.errorTextColor,
-  }};
-`;
-
-export type ErrorAlertProps = {
-  message: string;
-  description?: React.ReactNode;
-  onClose?: () => void;
-  action?: ErrorAlertActionElement;
-};
-export const ErrorAlert: React.FC<ErrorAlertProps> = ({message, description, action, onClose}: ErrorAlertProps) => {
-  const theme = useTheme();
-
-  return (
-    <div className={errorAlert}>
-      <WarningFilledIcon color={theme.errorButtonColor} iconSize={16} containerSize={16} />
-      <div className={infoStyle}>
-        <span className={messageStyle}>{message}</span>
-        {description ? <span className={descriptionStyle}>{description}</span> : null}
-      </div>
-      {action}
-      {onClose ? (
-        <IconButton size="small" onClick={onClose} aria-label="Hide error">
-          <CloseIcon />
-        </IconButton>
-      ) : null}
-    </div>
-  );
-};