@fibery/ui-kit 1.40.4 → 1.42.0

package/src/theme-styles.ts

@@ -1,22 +1,67 @@
 import {css} from "@linaria/core";
-import {createInlineTheme, getThemeColors, themeVars} from "./design-system";
-import {makeDefaultPalette} from "./palette-generator";
+import {createInlineStyles, getThemeColors, ThemeColors, ThemeStyles} from "./design-system";
+import {warmUserPalette} from "./palettes/warm-user";
+import {slateUserPalette} from "./palettes/slate-user";
+import {ThemeMode} from "./theme-settings";
 
-export const defaultPalette = makeDefaultPalette();
+export const defaultPalette = slateUserPalette;
+export const defaultLightTheme = getThemeColors(null, "light", defaultPalette);
+export const defaultDarkTheme = getThemeColors(null, "dark", defaultPalette);
 
-export const defaultLightTheme = getThemeColors(themeVars.brandColors.blue, "light", defaultPalette);
-export const defaultDarkTheme = getThemeColors(themeVars.brandColors.blue, "dark", defaultPalette);
+const warmPalette = warmUserPalette;
+const warmLightTheme = getThemeColors(null, "light", warmPalette);
+const warmDarkTheme = getThemeColors(null, "dark", warmPalette);
 
-export const defaultLightThemeStyles = createInlineTheme(defaultLightTheme, []);
-export const defaultDarkThemeStyles = createInlineTheme(defaultDarkTheme, []);
+export const defaultLightThemeStyles = createInlineStyles(defaultLightTheme);
+export const defaultDarkThemeStyles = createInlineStyles(defaultDarkTheme);
 
-export const themeStyles = css`
+const warmLightThemeStyles = createInlineStyles(warmLightTheme);
+const warmDarkThemeStyles = createInlineStyles(warmDarkTheme);
+
+export function selectGlobalTheme(warm: boolean, dark: boolean): [colors: ThemeColors, styles: ThemeStyles] {
+  if (warm) {
+    return dark ? [warmDarkTheme, warmDarkThemeStyles] : [warmLightTheme, warmLightThemeStyles];
+  } else {
+    return dark ? [defaultDarkTheme, defaultDarkThemeStyles] : [defaultLightTheme, defaultLightThemeStyles];
+  }
+}
+
+const darkClassName = "dark-theme";
+const light2ClassName = "light-theme-and-dark-menu";
+const warmClassName = "warm-palette";
+
+export function chooseGlobalStyles(themeMode: ThemeMode, warm: boolean) {
+  const htmlElement = document.documentElement;
+  htmlElement.classList.toggle(darkClassName, themeMode === "dark");
+  htmlElement.classList.toggle(light2ClassName, themeMode === "light2");
+  htmlElement.classList.toggle(warmClassName, warm);
+
+  const colorScheme = themeMode === "dark" ? "dark" : "light";
+  htmlElement.style.colorScheme = colorScheme;
+
+  // Multiple color schemes (FIXME: missing, unknown implications) "light" | "dark" | "light dark" | "dark light"
+  // indicates that the first scheme is preferred by the document, but that the second scheme is acceptable if the user prefers it.
+  // see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/color-scheme#usage_notes
+  const colorSchemeMeta = document.querySelector('meta[name="color-scheme"]');
+  colorSchemeMeta?.setAttribute("content", colorScheme);
+
+  htmlElement.classList.add(globals);
+}
+
+export const globals = css`
   :global() {
     html:root {
       ${defaultLightThemeStyles}
       &.dark-theme {
         ${defaultDarkThemeStyles}
       }
+
+      &.warm-palette {
+        ${warmLightThemeStyles}
+        &.dark-theme {
+          ${warmDarkThemeStyles}
+        }
+      }
     }
   }
 `;

package/src/toast/toast.tsx

@@ -1,7 +1,7 @@
 import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css, cx} from "@linaria/core";
-import {useEffect, useRef, useCallback} from "react";
+import {useCallback, useEffect, useRef} from "react";
 import {space, themeVars} from "../design-system";
 import Spinner from "../icons/react/Spinner";
 import CheckCircleFilled from "../icons/react/CheckCircleFilled";
@@ -115,7 +115,6 @@ export const Toast: React.FC<ToastProps> = (props) => {
         clearTimeout(emergencyTimeout);
       };
     }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   }, [isOpen, onHideCb]);
 

package/src/toggle.tsx

@@ -2,7 +2,7 @@ import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
 import {ComponentProps, FC, ReactNode} from "react";
 import {space, textStyles, transition} from "./design-system";
-import _ from "lodash";
+import memoize from "lodash/memoize";
 import SpinnerIcon from "./icons/react/Spinner";
 import {mobileRootSelector} from "./mobile-styles";
 import {darkenChroma, getAlpha, produceColor, setAlpha} from "./color-utils";
@@ -48,7 +48,7 @@ const labelWrapperStyle = css`
   align-items: center;
 `;
 
-const getOutlineColor = _.memoize((color: string) => {
+const getOutlineColor = memoize((color: string) => {
   const alpha = getAlpha(color);
   if (alpha < 1) {
     return produceColor(color, (c) => setAlpha(c, Math.min(1, alpha + 0.3)));

package/src/tooltip.tsx

@@ -2,8 +2,9 @@ import {css, cx} from "@linaria/core";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import {forwardRef, type ReactNode, type SyntheticEvent} from "react";
 import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./design-system";
-import {ThemeProvider} from "./theme-provider";
+import {RadixPortalThemeProvider} from "./theme-provider";
 
+// FIXME consolidate as common util
 const isFlagPresent = (flag: string) => new RegExp(`[?&]${flag}\\b`).test(window.location.search);
 
 const preventDefaultAndStopPropagation = (e: SyntheticEvent) => {
@@ -205,7 +206,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
           {children}
         </TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal container={container}>
-          <ThemeProvider portal>
+          <RadixPortalThemeProvider>
             <TooltipPrimitive.Content
               ref={setContentElement}
               side={side}
@@ -216,7 +217,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
             >
               {content}
             </TooltipPrimitive.Content>
-          </ThemeProvider>
+          </RadixPortalThemeProvider>
         </TooltipPrimitive.Portal>
       </TooltipPrimitive.Root>
     );

package/src/type-badge.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 import cx from "classnames";
-import _ from "lodash";
+import isString from "lodash/isString";
 import {CSSProperties, forwardRef, memo, ReactNode} from "react";
 import {a11yColor} from "./a11y-color";
 import {
@@ -8,7 +8,6 @@ import {
   fontWeight,
   getDarkenColor,
   getTextColor,
-  getThemeValue,
   opacity,
   space,
   textStyles,
@@ -180,7 +179,7 @@ export const TypeBadge = memo(
   ) {
     const TagName = onClick ? "button" : "div";
     const title =
-      _.isString(children) && abbr ? (
+      isString(children) && abbr ? (
         noTooltip ? (
           makeAbbreviation(children)
         ) : (
@@ -196,13 +195,9 @@ export const TypeBadge = memo(
 
     const baseColor = color || theme.iconColor;
 
-    const textBadgeColor = getThemeValue(theme.mode, {
-      dark: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
-      light: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
-      light2: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
-    });
+    const textBadgeColor = a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12);
 
-    const backgroundBadgeColor = getThemeValue(theme.mode, {
+    const backgroundBadgeColor = theme.select({
       dark: getDarkenColor(baseColor),
       light: baseColor,
       light2: baseColor,
@@ -211,9 +206,7 @@ export const TypeBadge = memo(
     const resultingStyle = {
       ...style,
       [colorProp]: baseColor ? textBadgeColor : themeVars.inversedTextColor,
-      //[colorProp]: baseColor ? getTextColor(baseColor) : colors.inversedTextColor,
       [colorBackgroundProp]: backgroundBadgeColor || themeVars.shades.opacity25,
-      //[colorBackgroundProp]: baseColor || colors.shades.opacity25,
       [colorBorderProp]: backgroundBadgeColor,
       [colorDarkProp]: getDarkenColor(baseColor),
     } as CSSProperties;

package/src/unit/styles.ts

@@ -62,7 +62,6 @@ export const unitWithTitleClassName = css`
 `;
 
 export const invalidUnitClassName = css``;
-export const invalidUnitClassNameInForm = css``;
 
 export const clickableClassName = css`
   cursor: pointer;
@@ -97,14 +96,6 @@ export const borderClassName = css`
   }
 
   &.${invalidUnitClassName} {
-    padding-left: 20px;
-    &:has(button) {
-      padding-left: 0;
-    }
-    & button {
-      padding-left: 20px;
-    }
-
     &::before {
       box-shadow: none;
       border: 1px solid ${themeVars.colorBorderButtonOutlineAccentDefault};
@@ -119,20 +110,6 @@ export const borderClassName = css`
       box-shadow: ${themeVars.inputBorderFocusColor} inset;
       border: none;
     }
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      width: 20px;
-      left: 4px;
-      right: 0;
-      bottom: 0;
-      background-image: url("./required-indicator.svg");
-      background-repeat: no-repeat;
-      background-size: 16px 16px;
-      background-position: center;
-      pointer-events: none;
-    }
   }
 `;
 

package/src/use-is-phone.tsx

@@ -20,8 +20,13 @@ function isVerticalMobileBreakpointDisabled() {
   ) {
     return true;
   }
-  const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.has("no-vertical-mobile-breakpoint");
+
+  if (globalThis.URLSearchParams) {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.has("no-vertical-mobile-breakpoint");
+  } else {
+    return false;
+  }
 }
 
 export const isPhoneApp = () =>

package/src/use-on-screen-keyboard-data.tsx

@@ -1,6 +1,6 @@
 import {ReactNode, useEffect, useState} from "react";
 import {createContext} from "@fibery/react/src/create-context";
-import _ from "lodash";
+import noop from "lodash/noop";
 import {isPhoneApp} from "./use-is-phone";
 import {keyboardHeightVar, mobileKeyboardOpenClassName} from "./mobile-styles";
 
@@ -23,7 +23,7 @@ export function OnScreenKeyboardContextProvider({children}: {children: ReactNode
   useEffect(() => {
     const viewport = window.visualViewport;
     if (!viewport || !isPhoneApp()) {
-      return _.noop;
+      return noop;
     }
 
     function viewportHandler() {

package/src/with-data.tsx

@@ -1,4 +1,5 @@
-import _ from "lodash";
+import mapValues from "lodash/mapValues";
+import noop from "lodash/noop";
 import {PureComponent, ComponentType} from "react";
 import {asError} from "./errors";
 import {$TSFixMe} from "./tsfixme";
@@ -25,7 +26,7 @@ type ProvidedState = Record<string, FetchState>;
 export function provideData<T>({sources}: {sources: Record<string, () => Promise<$TSFixMe>>}) {
   return (Component: ComponentType<T & ProvidedState>) =>
     class DataProvider extends PureComponent<T, ProvidedState> {
-      state = _.mapValues(
+      state = mapValues(
         sources,
         (): FetchState => ({
           fetchState: ":fetch-state/start",
@@ -66,7 +67,7 @@ export function provideData<T>({sources}: {sources: Record<string, () => Promise
       }
 
       componentWillUnmount() {
-        this.setStateIfMounted = _.noop;
+        this.setStateIfMounted = noop;
       }
 
       render() {

package/src/workflow-progress-icon.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 import {arc} from "d3-shape";
-import _ from "lodash";
+import memoize from "lodash/memoize";
 import {FC} from "react";
 import {themeVars} from "./design-system";
 
@@ -52,7 +52,7 @@ export const WorkflowProgressIcon: FC<WorkflowProgressIcon> = ({
   );
 };
 
-const getPath = _.memoize(
+const getPath = memoize(
   (index, total, size) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore bad d3-shape typings

package/.eslintignore

@@ -1,3 +0,0 @@
-*.d.ts
-src/icons/react
-src/icons/ast

package/.eslintrc

@@ -1,14 +0,0 @@
-{
-  "extends": "@fibery/eslint-config",
-  "rules": {
-    "no-restricted-imports": ["error", {"patterns": ["@fibery/ui-kit/*"]}]
-  },
-  "overrides": [
-    {
-      "files": ["src/icons/*"],
-      "rules": {
-        "unicorn/filename-case": "off"
-      }
-    }
-  ]
-}

package/src/__mocks__/createInlineTheme.js

@@ -1,3 +0,0 @@
-export function createInlineTheme() {
-  return {};
-}