@fibery/ui-kit 1.33.6 → 1.34.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.33.6",
+  "version": "1.34.1",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -74,9 +74,9 @@
     "screenfull": "6.0.1",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
-    "@fibery/react": "1.4.0",
+    "@fibery/emoji-data": "2.6.0",
     "@fibery/helpers": "1.3.0",
-    "@fibery/emoji-data": "2.6.0"
+    "@fibery/react": "1.4.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -110,8 +110,8 @@
     "svgo": "2.8.0",
     "typescript": "5.4.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.0",
-    "@fibery/eslint-config": "8.6.0"
+    "@fibery/eslint-config": "8.6.0",
+    "@fibery/babel-preset": "7.4.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

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

@@ -3,31 +3,59 @@
 // so it's easier to find buttons with custom colors
 
 import {CSSProperties} from "@linaria/core";
-import {getDarkenColor, getOpacities, themeVars} from "../design-system";
+import {
+  getDarkenColor,
+  getEnumBackgroundColor,
+  getIconColor,
+  getOpacities,
+  getThemeValue,
+  themeVars,
+} from "../design-system";
 import {ButtonVariant} from "./base-button";
+import {ThemeMode} from "../theme-settings";
 
-export const makeButtonColors = (color: string, variant: ButtonVariant) => {
-  if (variant === "solid") {
-    return {
-      "--fibery-button-color": color,
-      "--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,
-    };
-  }
-
-  return {
-    "--fibery-button-color": "transparent",
-    "--fibery-button-hover-color": getOpacities(color).opacity15,
-    "--fibery-button-text-color": color,
-    "--fibery-button-text-active-color": getOpacities(color).opacity80,
-    "--fibery-button-focus-color": getOpacities(color).opacity30,
+export const makeButtonColors = (color: string, variant: ButtonVariant, mode: ThemeMode = "light"): CSSProperties => {
+  switch (variant) {
+    case "solid":
+      return {
+        "--fibery-button-color": color,
+        "--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,
+      };
+    case "ghost":
+      return {
+        "--fibery-button-color": "transparent",
+        "--fibery-button-hover-color": getOpacities(color).opacity15,
+        "--fibery-button-text-color": color,
+        "--fibery-button-text-active-color": getOpacities(color).opacity80,
+        "--fibery-button-focus-color": getOpacities(color).opacity30,
+      };
+    case "outline":
+      return {
+        "--fibery-button-color": "transparent",
+        "--fibery-button-hover-color": getOpacities(color).opacity15,
+        "--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,
+      };
+    default:
+    case "soft": {
+      const bgColor = getEnumBackgroundColor(mode, color) as string;
+      const textColor = getIconColor(mode, color) as string;
 
-    ...(variant === "outline"
-      ? {
-          "--fibery-button-border-color": getOpacities(color).opacity30,
-        }
-      : undefined),
-  } as CSSProperties;
+      return {
+        "--fibery-button-color": bgColor,
+        "--fibery-button-hover-color": getThemeValue(mode, {
+          light: getOpacities(color).opacity30,
+          dark: getOpacities(color).opacity45,
+        }),
+        "--fibery-button-text-color": textColor,
+        "--fibery-button-text-active-color": getOpacities(textColor).opacity80,
+        "--fibery-button-focus-color": getOpacities(color).opacity30,
+      };
+    }
+  }
 };

package/src/icons/ast/ArrowUpCircle.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ArrowUpCircle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.334Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M11.97 9.53a.75.75 0 1 0 1.06-1.06l-2.5-2.5a.75.75 0 0 0-1.06 0l-2.5 2.5a.75.75 0 0 0 1.06 1.06l1.22-1.22v5.19a.75.75 0 0 0 1.5 0V8.31l1.22 1.22Z"},"children":[]}],"metadata":""}]},"name":"arrow-up-circle"};
+
+export default ArrowUpCircle;

package/src/icons/ast/SlideMenu.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const SlideMenu: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.25 9.5a.75.75 0 0 0-.75-.75h-1a.75.75 0 0 0 0 1.5h1a.75.75 0 0 0 .75-.75Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M6.5 6.25a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1 0-1.5h1Z","style":"fill:#000;fill-opacity:1"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M15.25 3A2.75 2.75 0 0 1 18 5.75v8.5A2.75 2.75 0 0 1 15.25 17H4.75A2.75 2.75 0 0 1 2 14.25v-8.5A2.75 2.75 0 0 1 4.75 3h10.5Zm1.25 2.75c0-.69-.56-1.25-1.25-1.25h-5.5v11h5.5c.69 0 1.25-.56 1.25-1.25v-8.5ZM8.25 15.5v-11h-3.5c-.69 0-1.25.56-1.25 1.25v8.5c0 .69.56 1.25 1.25 1.25h3.5Z"},"children":[]}],"metadata":""}]},"name":"slide-menu"};
+const SlideMenu: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.25 9.5a.75.75 0 0 0-.75-.75h-1a.75.75 0 0 0 0 1.5h1a.75.75 0 0 0 .75-.75ZM6.5 6.25a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1 0-1.5h1Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M15.25 3A2.75 2.75 0 0 1 18 5.75v8.5A2.75 2.75 0 0 1 15.25 17H4.75A2.75 2.75 0 0 1 2 14.25v-8.5A2.75 2.75 0 0 1 4.75 3h10.5Zm1.25 2.75c0-.69-.56-1.25-1.25-1.25h-5.5v11h5.5c.69 0 1.25-.56 1.25-1.25v-8.5ZM8.25 15.5v-11h-3.5c-.69 0-1.25.56-1.25 1.25v8.5c0 .69.56 1.25 1.25 1.25h3.5Z"},"children":[]}],"metadata":""}]},"name":"slide-menu"};
 
 export default SlideMenu;

package/src/icons/ast/index.tsx

@@ -27,6 +27,7 @@ export { default as ArrowForward } from './ArrowForward';
 export { default as ArrowLeft } from './ArrowLeft';
 export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowTop } from './ArrowTop';
+export { default as ArrowUpCircle } from './ArrowUpCircle';
 export { default as AskForInput } from './AskForInput';
 export { default as Atom } from './Atom';
 export { default as AutomationsCancelled } from './AutomationsCancelled';

package/src/icons/react/ArrowUpCircle.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import ArrowUpCircleSvg from '../ast/ArrowUpCircle';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const ArrowUpCircle = forwardRef<SVGSVGElement, IconBaseProps>(function ArrowUpCircle(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ArrowUpCircleSvg} />});
+
+export default ArrowUpCircle;

package/src/icons/react/index.tsx

@@ -27,6 +27,7 @@ export { default as ArrowForward } from './ArrowForward';
 export { default as ArrowLeft } from './ArrowLeft';
 export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowTop } from './ArrowTop';
+export { default as ArrowUpCircle } from './ArrowUpCircle';
 export { default as AskForInput } from './AskForInput';
 export { default as Atom } from './Atom';
 export { default as AutomationsCancelled } from './AutomationsCancelled';

package/src/toggle.tsx

@@ -6,7 +6,10 @@ import {layout, space, textStyles, transition} from "./design-system";
 import _ from "lodash";
 import SpinnerIcon from "./icons/react/Spinner";
 
-const Input = styled.input<{containerSize: number; containerWidth: number; outlineColor: string}>`
+const toggleIconHeightVar = "--fibery-toggle-icon-height";
+const toggleIconWidthVar = "--fibery-toggle-icon-width";
+
+const Input = styled.input<{outlineColor: string}>`
   position: absolute;
   cursor: pointer;
   top: 0;
@@ -14,9 +17,9 @@ const Input = styled.input<{containerSize: number; containerWidth: number; outli
   appearance: none;
   margin-right: 0;
   background-color: transparent;
-  height: ${({containerSize}) => containerSize}px;
-  width: ${({containerWidth}) => containerWidth}px;
-  border-radius: ${({containerSize}) => containerSize / 2}px;
+  height: var(${toggleIconHeightVar});
+  width: var(${toggleIconWidthVar});
+  border-radius: calc(var(${toggleIconHeightVar}) / 2);
 
   &:focus {
     outline: none;
@@ -28,7 +31,6 @@ const Input = styled.input<{containerSize: number; containerWidth: number; outli
 `;
 
 const Label = styled.div<{labelPosition: "last" | "first"; disabled?: boolean}>`
-  ${textStyles.regular}
   margin-left: ${({labelPosition}) => (labelPosition === "last" ? `${space.s8}px` : 0)};
   margin-right: ${({labelPosition}) => (labelPosition === "first" ? `${space.s8}px` : 0)};
   opacity: ${({disabled}) => (disabled ? 0.5 : 1)};
@@ -56,31 +58,53 @@ const getOutlineColor = _.memoize((color: string) => {
 });
 
 const CircleContainer = styled.div<{
-  containerSize: number;
-  containerWidth: number;
   backgroundColor: string;
   disabled?: boolean;
 }>`
   position: relative;
-  height: ${({containerSize}) => containerSize}px;
-  width: ${({containerWidth}) => containerWidth}px;
+  height: var(${toggleIconHeightVar});
+  width: var(${toggleIconWidthVar});
   flex-shrink: 0;
-  border-radius: ${({containerSize}) => containerSize / 2}px;
+  border-radius: calc(var(${toggleIconHeightVar}) / 2);
   background-color: ${({backgroundColor}) => backgroundColor};
   padding: ${space.s2}px;
   transition: background-color ${transition};
   opacity: ${({disabled}) => (disabled ? 0.5 : 1)};
 `;
 
-const Circle = styled.div<{containerSize: number}>`
-  height: ${({containerSize}) => containerSize - space.s2 * 2}px;
-  width: ${({containerSize}) => containerSize - space.s2 * 2}px;
-  border-radius: ${({containerSize}) => containerSize / 2 - space.s2}px;
+const Circle = styled.div`
+  height: calc(var(${toggleIconHeightVar}) - ${space.s2 * 2}px);
+  width: calc(var(${toggleIconHeightVar}) - ${space.s2 * 2}px);
+  border-radius: calc(var(${toggleIconHeightVar}) / 2 - ${space.s2}px);
   background-color: white;
   transition: transform ${transition};
 `;
 
-interface ToggleProps extends Omit<ComponentProps<"input">, "value"> {
+export type ToggleSize = "small" | "medium" | "large" | "extra-large";
+
+const toggleSize = {
+  small: css`
+    ${textStyles.small}
+    ${toggleIconHeightVar}: 14px;
+  `,
+  medium: css`
+    ${textStyles.regular}
+    ${toggleIconHeightVar}: 16px;
+  `,
+  large: css`
+    ${textStyles.regular}
+    ${toggleIconHeightVar}: 18px;
+  `,
+  "extra-large": css`
+    ${textStyles.regular}
+    ${toggleIconHeightVar}: 20px;
+  `,
+};
+const toggleSizeStyle = css`
+  ${toggleIconWidthVar}: calc(var(${toggleIconHeightVar}) * 1.75)
+`;
+
+type ToggleProps = Omit<ComponentProps<"input">, "value" | "size"> & {
   value?: boolean;
   label?: ReactNode;
   labelTitle?: string;
@@ -89,7 +113,8 @@ interface ToggleProps extends Omit<ComponentProps<"input">, "value"> {
   labelPosition?: "first" | "last";
   wrapperClassName?: string;
   pending?: boolean;
-}
+  size?: ToggleSize;
+};
 
 export const Toggle: FC<ToggleProps> = ({
   value,
@@ -98,7 +123,7 @@ export const Toggle: FC<ToggleProps> = ({
   pending,
   disabled = false,
   backgroundColor,
-  size = 16,
+  size = "medium",
   onChange,
   labelPosition = "last",
   labelMutedWhenDisabled = true,
@@ -106,16 +131,17 @@ export const Toggle: FC<ToggleProps> = ({
   wrapperClassName,
   ...rest
 }) => {
-  const width = size * 1.75;
   const outlineColor = getOutlineColor(backgroundColor);
 
   const circleTransformStyle = {
-    transform: `translateX(${value ? width - size : 0}px)`,
+    transform: `translateX(${value ? `calc(var(${toggleIconWidthVar}) - var(${toggleIconHeightVar}))` : 0})`,
   };
 
   return (
     <label
       className={cx(
+        toggleSize[size],
+        toggleSizeStyle,
         wrapperClassName,
         labelWrapperStyle,
         disabled
@@ -137,16 +163,9 @@ export const Toggle: FC<ToggleProps> = ({
     >
       {pending && <SpinnerIcon />}
       {!pending && (
-        <CircleContainer
-          containerSize={size}
-          containerWidth={width}
-          backgroundColor={backgroundColor}
-          disabled={disabled}
-        >
-          <Circle containerSize={size} style={circleTransformStyle} />
+        <CircleContainer backgroundColor={backgroundColor} disabled={disabled}>
+          <Circle style={circleTransformStyle} />
           <Input
-            containerSize={size}
-            containerWidth={width}
             outlineColor={outlineColor}
             onChange={onChange}
             className={className}