feat: migrate to new typescale (#755)

saleor · Feb 23, 2024 · 0484be7 · 0484be7
1 parent 92f5f36
commit 0484be7
Show file tree

Hide file tree

Showing 34 changed files with 285 additions and 539 deletions.
diff --git a/.storybook/components/FontWeights.tsx b/.storybook/components/FontWeights.tsx
@@ -0,0 +1,34 @@
+import { Unstyled } from "@storybook/blocks";
+import { Box, Text } from "~/components";
+import { useTheme } from "~/theme";
+
+export const FontWeightsPresentation = () => {
+  const { themeValues: vars } = useTheme();
+
+  return (
+    <Unstyled>
+      <Box display="flex" flexDirection="row" flexWrap="wrap" rowGap={7}>
+        {Object.entries(vars.fontWeight)
+          .sort(([_aKey, aValue], [_bKey, bValue]) =>
+            aValue.localeCompare(bValue, undefined, { numeric: true })
+          )
+          .map(([key, value]) => {
+            return (
+              <Box width="100%" key={key}>
+                <Box __fontSize="14px" __minWidth="100px">
+                  <Box
+                    display="inline-block"
+                    color="default1"
+                    __fontSize="15px"
+                  >
+                    {key}
+                  </Box>
+                </Box>
+                <Text fontWeight={key}>Some text</Text>
+              </Box>
+            );
+          })}
+      </Box>
+    </Unstyled>
+  );
+};
diff --git a/.storybook/components/Typography.tsx b/.storybook/components/Typography.tsx
@@ -0,0 +1,36 @@
+import { Unstyled } from "@storybook/blocks";
+import { Box, Text } from "~/components";
+import { useTheme } from "~/theme";
+
+export const TypographyPresentation = () => {
+  const { themeValues: vars } = useTheme();
+
+  return (
+    <Unstyled>
+      <Box display="flex" flexDirection="row" flexWrap="wrap" rowGap={7}>
+        {Object.entries(vars.fontSize)
+          .sort(([_aKey, aValue], [_bKey, bValue]) =>
+            aValue.localeCompare(bValue, undefined, { numeric: true })
+          )
+          .map(([key, value]) => {
+            return (
+              <Box width="100%" key={key}>
+                <Box __fontSize="14px" __minWidth="100px">
+                  <Box
+                    display="inline-block"
+                    color="default1"
+                    __fontSize="15px"
+                  >
+                    size: {key}
+                  </Box>
+                </Box>
+                <Text fontSize={key} lineHeight={key} letterSpacing={key}>
+                  Some text
+                </Text>
+              </Box>
+            );
+          })}
+      </Box>
+    </Unstyled>
+  );
+};
diff --git a/.storybook/components/index.tsx b/.storybook/components/index.tsx
@@ -1,5 +1,7 @@
+export { BorderRadiusPresentation } from "./BorderRadius";
 export { ColorPresentation } from "./Colors";
-export { SpacingsPresentation } from "./Spacings";
+export { FontWeightsPresentation } from "./FontWeights";
 export { IconsPresentation } from "./Icons";
-export { BorderRadiusPresentation } from "./BorderRadius";
 export { ShadowPresentation } from "./Shadow";
+export { SpacingsPresentation } from "./Spacings";
+export { TypographyPresentation } from "./Typography";
diff --git a/src/components/Avatar/Store/Store.tsx b/src/components/Avatar/Store/Store.tsx
@@ -2,7 +2,7 @@ import { DataAttributes } from "~/components/types";
 import { classNames } from "~/utils";
 
 import { Box, PropsWithBox } from "../../Box";
-import { Text } from "../../Text";
+import { convertSizeToScale, Text } from "../../Text";
 
 import { storeAvatar, StoreAvatarVariants } from "./Store.css";
 
@@ -37,7 +37,11 @@ export const Store = (props: StoreAvatarProps) => {
       data-macaw-ui-component="Avatar.Store"
       {...rest}
     >
-      <Text variant="bodyEmp" size={size} color="buttonDefaultPrimary">
+      <Text
+        size={convertSizeToScale(size)}
+        color="buttonDefaultPrimary"
+        fontWeight="medium"
+      >
         {initials}
       </Text>
     </Box>

diff --git a/src/components/Avatar/User/User.tsx b/src/components/Avatar/User/User.tsx
@@ -2,7 +2,7 @@ import { DataAttributes } from "~/components/types";
 import { classNames } from "~/utils";
 
 import { Box, PropsWithBox } from "../../Box";
-import { Text } from "../../Text";
+import { convertSizeToScale, Text } from "../../Text";
 
 import { userAvatar, UserAvatarVariants } from "./User.css";
 
@@ -37,7 +37,11 @@ export const User = (props: UserAvatarProps) => {
       data-macaw-ui-component="Avatar.User"
       {...rest}
     >
-      <Text variant="bodyEmp" size={size} color="buttonDefaultPrimary">
+      <Text
+        size={convertSizeToScale(size)}
+        color="buttonDefaultPrimary"
+        fontWeight="medium"
+      >
         {initials}
       </Text>
     </Box>

diff --git a/src/components/BaseInput/BaseInput.css.ts b/src/components/BaseInput/BaseInput.css.ts
@@ -144,13 +144,13 @@ export const spanRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        typeSize: "bodySmall",
+        typeSize: 1,
       }),
       medium: sprinkles({
-        typeSize: "bodyMedium",
+        typeSize: 2,
       }),
       large: sprinkles({
-        typeSize: "bodyLarge",
+        typeSize: 3,
       }),
     },
     disabled: {
@@ -179,8 +179,8 @@ export const inputRecipe = recipe({
     sprinkles({
       width: "100%",
       backgroundColor: "transparent",
-      fontSize: "bodyLarge",
-      lineHeight: "bodyLarge",
+      fontSize: 3,
+      lineHeight: 3,
       borderWidth: 0,
       outlineStyle: "none",
       padding: 0,
@@ -225,16 +225,16 @@ export const inputRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        fontSize: "bodySmall",
-        lineHeight: "captionMedium",
+        fontSize: 1,
+        lineHeight: 1,
       }),
       medium: sprinkles({
-        fontSize: "bodyMedium",
-        lineHeight: "bodySmall",
+        fontSize: 2,
+        lineHeight: 2,
       }),
       large: sprinkles({
-        fontSize: "bodyLarge",
-        lineHeight: "bodyLarge",
+        fontSize: 3,
+        lineHeight: 3,
       }),
     },
     error: {

diff --git a/src/components/BaseInput/HelperText.tsx b/src/components/BaseInput/HelperText.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Box, Text } from "..";
+import { Box, Text, convertSizeToScale } from "..";
 import { helperTextRecipe } from "./BaseInput.css";
 
 type HelperTextProps = {
@@ -12,8 +12,7 @@ export const HelperText = ({ size, error, children }: HelperTextProps) => {
   return (
     <Box className={helperTextRecipe({ size })}>
       <Text
-        variant="caption"
-        size={size}
+        size={convertSizeToScale(size)}
         color={error ? "critical1" : "default2"}
       >
         {children}

diff --git a/src/components/BaseSelect/LoadingListItem/LoadingListItem.tsx b/src/components/BaseSelect/LoadingListItem/LoadingListItem.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { List, Spinner, Text } from "~/components";
+import { List, Spinner, Text, convertSizeToScale } from "~/components";
 
 import { listItemStyle } from "../BaseSelect.css";
 
@@ -18,7 +18,7 @@ export const LoadingListItem = ({
     gap={1.5}
     color="default2"
   >
-    <Text size={size} color="default2">
+    <Text size={convertSizeToScale(size)} color="default2">
       {children}
     </Text>
     <Spinner />

diff --git a/src/components/BaseSelect/helpers.ts b/src/components/BaseSelect/helpers.ts
@@ -37,8 +37,8 @@ export const getListTextSize = (
   switch (size) {
     case "small":
     case "medium":
-      return "medium";
+      return 2;
     case "large":
-      return "large";
+      return 3;
   }
 };
diff --git a/src/components/Button/Button.css.ts b/src/components/Button/Button.css.ts
@@ -117,7 +117,7 @@ export const button = recipe({
         width: 6,
         borderRadius: 2,
         padding: 0.5,
-        typeSize: "buttonSmall",
+        typeSize: 1,
         gap: 1,
       }),
     },
@@ -131,7 +131,7 @@ export const button = recipe({
         width: 8,
         borderRadius: 3,
         padding: 1,
-        typeSize: "buttonMedium",
+        typeSize: 2,
         gap: 1,
       }),
     },
@@ -145,7 +145,7 @@ export const button = recipe({
         width: 10,
         borderRadius: 3,
         padding: 2,
-        typeSize: "buttonLarge",
+        typeSize: 3,
         gap: 2,
       }),
     },
@@ -159,7 +159,7 @@ export const button = recipe({
         borderRadius: 2,
         paddingX: 2,
         paddingY: 0,
-        typeSize: "buttonSmall",
+        typeSize: 1,
         gap: 1,
       }),
     },
@@ -173,7 +173,7 @@ export const button = recipe({
         borderRadius: 3,
         paddingX: 3,
         paddingY: 1,
-        typeSize: "buttonMedium",
+        typeSize: 2,
         gap: 1,
       }),
     },
@@ -187,7 +187,7 @@ export const button = recipe({
         borderRadius: 3,
         paddingX: 4,
         paddingY: 2,
-        typeSize: "buttonLarge",
+        typeSize: 3,
         gap: 2,
       }),
     },

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Checkbox>;
 export const Primary: Story = {
   args: {
     children: [
-      <Text variant="body">Option 1</Text>, // eslint-disable-line react/jsx-key
+      <Text size={2}>Option 1</Text>, // eslint-disable-line react/jsx-key
     ],
   },
 };
@@ -32,7 +32,7 @@ export const Disabled: Story = {
     disabled: true,
     children: [
       // eslint-disable-next-line react/jsx-key
-      <Text variant="body" color="defaultDisabled">
+      <Text size={2} color="defaultDisabled">
         Option 1
       </Text>,
     ],

diff --git a/src/components/Chip/Chip.stories.tsx b/src/components/Chip/Chip.stories.tsx
@@ -21,7 +21,7 @@ export const Primary: Story = {
     <Box display="grid" gridTemplateColumns={2} gap={5}>
       {/* Neutral */}
       <Chip {...props} color="default1" backgroundColor="default1">
-        <Text variant="caption" size="small" color="default1">
+        <Text size={1} color="default1">
           Example
         </Text>
       </Chip>
@@ -32,7 +32,7 @@ export const Primary: Story = {
         backgroundColor="critical1"
         borderColor="critical1"
       >
-        <Text color="critical1" size="small" variant="caption">
+        <Text color="critical1" size={1}>
           Example
         </Text>
       </Chip>
@@ -43,13 +43,13 @@ export const Primary: Story = {
         backgroundColor="success1"
         borderColor="success1"
       >
-        <Text color="success1" size="small" variant="caption">
+        <Text color="success1" size={1}>
           Example
         </Text>
       </Chip>
       {/* Blue */}
       <Chip {...props} backgroundColor="info1" borderColor="info1">
-        <Text color="info1" size="small" variant="caption">
+        <Text color="info1" size={1}>
           Example
         </Text>
       </Chip>

diff --git a/src/components/DropdownButton/DropdownButton.css.ts b/src/components/DropdownButton/DropdownButton.css.ts
@@ -53,27 +53,27 @@ export const dropdownButton = recipe({
         borderRadius: 2,
         paddingX: 2,
         paddingY: 1,
-        typeSize: "buttonSmall",
-        fontWeight: "bodyMedium",
-        lineHeight: "captionMedium",
+        typeSize: 1,
+        fontWeight: "medium",
+        lineHeight: 2,
         gap: 3,
       }),
       medium: sprinkles({
         height: 8,
         borderRadius: 3,
         paddingX: 2,
         paddingY: 1.5,
-        typeSize: "buttonMedium",
-        fontWeight: "bodyMedium",
+        typeSize: 2,
+        fontWeight: "medium",
         gap: 1,
       }),
       large: sprinkles({
         height: 10,
         borderRadius: 3,
         paddingX: 3,
         paddingY: 2,
-        typeSize: "buttonLarge",
-        fontWeight: "bodyMedium",
+        typeSize: 3,
+        fontWeight: "medium",
         gap: 2,
       }),
     },

diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
@@ -133,7 +133,7 @@ const InputNumberTemplate: Story = {
           type="number"
           value={value}
           onChange={(e) => setValue(e.target.value)}
-          endAdornment={<Text variant="caption">USD</Text>}
+          endAdornment={<Text size={1}>USD</Text>}
         />
       </Box>
     );
@@ -156,7 +156,7 @@ export const Number: Story = {
     type="number"
     value={value}
     onChange={(e) => setValue(e.target.value)}
-    endAdornment={<Text variant="caption">USD</Text>}
+    endAdornment={<Text size={1}>USD</Text>}
   />`,
       },
     },
@@ -180,7 +180,7 @@ export const NumberWithLabel: Story = {
     type="number"
     value={value}
     onChange={(e) => setValue(e.target.value)}
-    endAdornment={<Text variant="caption">USD</Text>}
+    endAdornment={<Text size={1}>USD</Text>}
   />`,
       },
     },