@fibery/ui-kit 1.33.6 → 1.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.33.6",
+  "version": "1.34.0",
   "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",

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

@@ -80,7 +80,16 @@ const Circle = styled.div<{containerSize: number}>`
   transition: transform ${transition};
 `;
 
-interface ToggleProps extends Omit<ComponentProps<"input">, "value"> {
+export type ToggleSize = "small" | "medium" | "large" | "extra-large";
+
+const toggleSize = {
+  small: 14,
+  medium: 16,
+  large: 18,
+  "extra-large": 20,
+} as const;
+
+type ToggleProps = Omit<ComponentProps<"input">, "value" | "size"> & {
   value?: boolean;
   label?: ReactNode;
   labelTitle?: string;
@@ -89,7 +98,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 +108,7 @@ export const Toggle: FC<ToggleProps> = ({
   pending,
   disabled = false,
   backgroundColor,
-  size = 16,
+  size = "medium",
   onChange,
   labelPosition = "last",
   labelMutedWhenDisabled = true,
@@ -106,11 +116,12 @@ export const Toggle: FC<ToggleProps> = ({
   wrapperClassName,
   ...rest
 }) => {
-  const width = size * 1.75;
+  const height = toggleSize[size];
+  const width = height * 1.75;
   const outlineColor = getOutlineColor(backgroundColor);
 
   const circleTransformStyle = {
-    transform: `translateX(${value ? width - size : 0}px)`,
+    transform: `translateX(${value ? width - height : 0}px)`,
   };
 
   return (
@@ -138,14 +149,14 @@ export const Toggle: FC<ToggleProps> = ({
       {pending && <SpinnerIcon />}
       {!pending && (
         <CircleContainer
-          containerSize={size}
+          containerSize={height}
           containerWidth={width}
           backgroundColor={backgroundColor}
           disabled={disabled}
         >
-          <Circle containerSize={size} style={circleTransformStyle} />
+          <Circle containerSize={height} style={circleTransformStyle} />
           <Input
-            containerSize={size}
+            containerSize={height}
             containerWidth={width}
             outlineColor={outlineColor}
             onChange={onChange}