Remove typeSize (#770)

saleor · Mar 15, 2024 · fa11d14 · fa11d14
1 parent 42fac2b
commit fa11d14
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 22 deletions.
diff --git a/.changeset/early-elephants-watch.md b/.changeset/early-elephants-watch.md
@@ -0,0 +1,5 @@
+---
+"@saleor/macaw-ui": minor
+---
+
+Removed `typeSize` from `Box` and `sprinkles`. You should use `fontSize`, `letterSpacing` & `lineHeight` directly instead.
diff --git a/src/components/BaseInput/BaseInput.css.ts b/src/components/BaseInput/BaseInput.css.ts
@@ -144,13 +144,19 @@ export const spanRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        typeSize: 1,
+        fontSize: 1,
+        letterSpacing: 1,
+        lineHeight: 1,
       }),
       medium: sprinkles({
-        typeSize: 2,
+        fontSize: 2,
+        letterSpacing: 2,
+        lineHeight: 2,
       }),
       large: sprinkles({
-        typeSize: 3,
+        fontSize: 3,
+        letterSpacing: 3,
+        lineHeight: 3,
       }),
     },
     disabled: {

diff --git a/src/components/Button/Button.css.ts b/src/components/Button/Button.css.ts
@@ -117,7 +117,9 @@ export const button = recipe({
         width: 6,
         borderRadius: 2,
         padding: 0.5,
-        typeSize: 1,
+        fontSize: 1,
+        lineHeight: 1,
+        letterSpacing: 1,
         gap: 1,
       }),
     },
@@ -131,7 +133,9 @@ export const button = recipe({
         width: 8,
         borderRadius: 3,
         padding: 1,
-        typeSize: 2,
+        fontSize: 2,
+        lineHeight: 2,
+        letterSpacing: 2,
         gap: 1,
       }),
     },
@@ -145,7 +149,9 @@ export const button = recipe({
         width: 10,
         borderRadius: 3,
         padding: 2,
-        typeSize: 3,
+        fontSize: 3,
+        lineHeight: 3,
+        letterSpacing: 3,
         gap: 2,
       }),
     },
@@ -159,7 +165,9 @@ export const button = recipe({
         borderRadius: 2,
         paddingX: 2,
         paddingY: 0,
-        typeSize: 1,
+        fontSize: 1,
+        lineHeight: 1,
+        letterSpacing: 1,
         gap: 1,
       }),
     },
@@ -173,7 +181,9 @@ export const button = recipe({
         borderRadius: 3,
         paddingX: 3,
         paddingY: 1,
-        typeSize: 2,
+        fontSize: 2,
+        lineHeight: 2,
+        letterSpacing: 2,
         gap: 1,
       }),
     },
@@ -187,7 +197,9 @@ export const button = recipe({
         borderRadius: 3,
         paddingX: 4,
         paddingY: 2,
-        typeSize: 3,
+        fontSize: 3,
+        lineHeight: 2,
+        letterSpacing: 2,
         gap: 2,
       }),
     },

diff --git a/src/components/DropdownButton/DropdownButton.css.ts b/src/components/DropdownButton/DropdownButton.css.ts
@@ -53,17 +53,20 @@ export const dropdownButton = recipe({
         borderRadius: 2,
         paddingX: 2,
         paddingY: 1,
-        typeSize: 1,
-        fontWeight: "medium",
+        fontSize: 1,
         lineHeight: 2,
+        letterSpacing: 1,
+        fontWeight: "medium",
         gap: 3,
       }),
       medium: sprinkles({
         height: 8,
         borderRadius: 3,
         paddingX: 2,
         paddingY: 1.5,
-        typeSize: 2,
+        fontSize: 2,
+        lineHeight: 2,
+        letterSpacing: 2,
         fontWeight: "medium",
         gap: 1,
       }),
@@ -72,7 +75,9 @@ export const dropdownButton = recipe({
         borderRadius: 3,
         paddingX: 3,
         paddingY: 2,
-        typeSize: 3,
+        fontSize: 3,
+        lineHeight: 3,
+        letterSpacing: 3,
         fontWeight: "medium",
         gap: 2,
       }),

diff --git a/src/components/Multiselect/Common/Multiselect.css.ts b/src/components/Multiselect/Common/Multiselect.css.ts
@@ -56,13 +56,19 @@ export const multiselectInputRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        typeSize: 1,
+        fontSize: 1,
+        lineHeight: 1,
+        letterSpacing: 1,
       }),
       medium: sprinkles({
-        typeSize: 2,
+        fontSize: 2,
+        lineHeight: 2,
+        letterSpacing: 2,
       }),
       large: sprinkles({
-        typeSize: 2,
+        fontSize: 2,
+        lineHeight: 2,
+        letterSpacing: 2,
       }),
     },
     error: {

diff --git a/src/components/RadioGroup/Group.css.ts b/src/components/RadioGroup/Group.css.ts
@@ -17,13 +17,19 @@ export const groupLabelRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        typeSize: 1,
+        fontSize: 1,
+        letterSpacing: 1,
+        lineHeight: 1,
       }),
       medium: sprinkles({
-        typeSize: 2,
+        fontSize: 2,
+        letterSpacing: 2,
+        lineHeight: 2,
       }),
       large: sprinkles({
-        typeSize: 3,
+        fontSize: 3,
+        letterSpacing: 3,
+        lineHeight: 3,
       }),
     },
     disabled: {

diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -35,7 +35,9 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(
       ref={ref}
       margin={0}
       data-macaw-ui-component="Text"
-      typeSize={size}
+      fontSize={size}
+      letterSpacing={size}
+      lineHeight={size}
       fontWeight={fontWeight}
       {...rest}
     >

diff --git a/src/components/Tooltip/Tooltip.css.ts b/src/components/Tooltip/Tooltip.css.ts
@@ -8,7 +8,9 @@ export const content = sprinkles({
   backgroundColor: "default1",
   padding: 2,
   borderRadius: 3,
-  typeSize: 1,
+  fontSize: 1,
+  lineHeight: 1,
+  letterSpacing: 1,
   color: "default1",
   boxShadow: "defaultOverlay",
 });

diff --git a/src/theme/sprinkles.css.ts b/src/theme/sprinkles.css.ts
@@ -180,7 +180,6 @@ const responsiveProperties = defineProperties({
     marginX: ["marginLeft", "marginRight"],
     marginY: ["marginTop", "marginBottom"],
     placeItems: ["alignItems", "justifyContent"],
-    typeSize: ["fontSize", "lineHeight", "letterSpacing"],
     borderWidth: [
       "borderTopWidth",
       "borderBottomWidth",