@fibery/ui-kit 1.34.0 → 1.34.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.34.0",
+  "version": "1.34.1",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -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/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,26 +58,24 @@ 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};
 `;
@@ -83,11 +83,26 @@ const Circle = styled.div<{containerSize: number}>`
 export type ToggleSize = "small" | "medium" | "large" | "extra-large";
 
 const toggleSize = {
-  small: 14,
-  medium: 16,
-  large: 18,
-  "extra-large": 20,
-} as const;
+  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;
@@ -116,17 +131,17 @@ export const Toggle: FC<ToggleProps> = ({
   wrapperClassName,
   ...rest
 }) => {
-  const height = toggleSize[size];
-  const width = height * 1.75;
   const outlineColor = getOutlineColor(backgroundColor);
 
   const circleTransformStyle = {
-    transform: `translateX(${value ? width - height : 0}px)`,
+    transform: `translateX(${value ? `calc(var(${toggleIconWidthVar}) - var(${toggleIconHeightVar}))` : 0})`,
   };
 
   return (
     <label
       className={cx(
+        toggleSize[size],
+        toggleSizeStyle,
         wrapperClassName,
         labelWrapperStyle,
         disabled
@@ -148,16 +163,9 @@ export const Toggle: FC<ToggleProps> = ({
     >
       {pending && <SpinnerIcon />}
       {!pending && (
-        <CircleContainer
-          containerSize={height}
-          containerWidth={width}
-          backgroundColor={backgroundColor}
-          disabled={disabled}
-        >
-          <Circle containerSize={height} style={circleTransformStyle} />
+        <CircleContainer backgroundColor={backgroundColor} disabled={disabled}>
+          <Circle style={circleTransformStyle} />
           <Input
-            containerSize={height}
-            containerWidth={width}
             outlineColor={outlineColor}
             onChange={onChange}
             className={className}