From 0627e3e679665e86aa9d2e1a2fc7df8166fc4e41 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 10 Nov 2022 14:54:53 +0100
Subject: [PATCH] migrate font-sizes

---
 .../features/style-panel/sections/spacing/spacing.tsx     | 2 +-
 .../features/workspace/canvas-tools/outline/label.tsx     | 2 +-
 .../app/designer/shared/inspector/component-info.tsx      | 2 +-
 .../design-system/src/components/__DEPRECATED__/text.tsx  | 8 ++++----
 packages/design-system/src/components/avatar.tsx          | 2 +-
 packages/design-system/src/components/badge.tsx           | 4 ++--
 packages/design-system/src/components/button.tsx          | 8 ++++----
 .../src/components/icon-button-with-menu.tsx              | 2 +-
 packages/design-system/src/components/icon-button.tsx     | 2 +-
 packages/design-system/src/components/kbd.tsx             | 4 ++--
 packages/design-system/src/components/menu.tsx            | 2 +-
 packages/design-system/src/components/radio-grid.tsx      | 2 +-
 packages/design-system/src/components/select.tsx          | 4 ++--
 packages/design-system/src/components/simple-toggle.tsx   | 2 +-
 packages/design-system/src/components/tab-link.tsx        | 2 +-
 packages/design-system/src/components/table.tsx           | 8 ++++----
 packages/design-system/src/components/tabs.tsx            | 4 ++--
 packages/design-system/src/components/text-area.tsx       | 6 +++---
 packages/design-system/src/components/text-field.tsx      | 2 +-
 packages/design-system/src/components/text.tsx            | 8 ++++----
 packages/design-system/src/components/toast.tsx           | 2 +-
 packages/icons/src/index.stories.tsx                      | 2 +-
 22 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/apps/designer/app/designer/features/style-panel/sections/spacing/spacing.tsx b/apps/designer/app/designer/features/style-panel/sections/spacing/spacing.tsx
index 14443e8e4e..cc734ae940 100644
--- a/apps/designer/app/designer/features/style-panel/sections/spacing/spacing.tsx
+++ b/apps/designer/app/designer/features/style-panel/sections/spacing/spacing.tsx
@@ -42,7 +42,7 @@ const grid = {
 
 const styles = {
   spacingEdit: {
-    fontSize: "$1",
+    fontSize: "$fontSize$1",
     // @todo use a color from design system
     color: "rgb(217, 217, 217)",
     display: "flex",
diff --git a/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx b/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx
index a7a6ad6de7..119eb4a7fe 100644
--- a/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx
+++ b/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx
@@ -43,7 +43,7 @@ const LabelContainer = styled(
     alignItems: "center",
     justifyContent: "center",
     gap: "$spacing$3",
-    fontSize: "$1",
+    fontSize: "$fontSize$1",
     fontFamily: "$sans",
     lineHeight: 1,
     minWidth: "$spacing$13",
diff --git a/apps/designer/app/designer/shared/inspector/component-info.tsx b/apps/designer/app/designer/shared/inspector/component-info.tsx
index 421168a928..42b6600ef8 100644
--- a/apps/designer/app/designer/shared/inspector/component-info.tsx
+++ b/apps/designer/app/designer/shared/inspector/component-info.tsx
@@ -11,7 +11,7 @@ export const ComponentInfo = ({
     <Flex justify="between" align="center">
       <Text
         css={{
-          fontSize: "$2",
+          fontSize: "$fontSize$3",
           color: "$colors$slate11",
           fontWeight: "500",
         }}
diff --git a/packages/design-system/src/components/__DEPRECATED__/text.tsx b/packages/design-system/src/components/__DEPRECATED__/text.tsx
index 1bbe6b374b..2e40b36b79 100644
--- a/packages/design-system/src/components/__DEPRECATED__/text.tsx
+++ b/packages/design-system/src/components/__DEPRECATED__/text.tsx
@@ -12,16 +12,16 @@ export const __DEPRECATED__Text = styled("div", {
   variants: {
     size: {
       "1": {
-        fontSize: "$1",
+        fontSize: "$fontSize$1",
       },
       "2": {
-        fontSize: "$2",
+        fontSize: "$fontSize$3",
       },
       "3": {
-        fontSize: "$3",
+        fontSize: "$fontSize$4",
       },
       "4": {
-        fontSize: "$4",
+        fontSize: "$fontSize$4",
       },
       "5": {
         fontSize: "$5",
diff --git a/packages/design-system/src/components/avatar.tsx b/packages/design-system/src/components/avatar.tsx
index bf970a43eb..03947b24f0 100644
--- a/packages/design-system/src/components/avatar.tsx
+++ b/packages/design-system/src/components/avatar.tsx
@@ -205,7 +205,7 @@ const StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {
         lineHeight: "15px",
       },
       "2": {
-        fontSize: "$3",
+        fontSize: "$fontSize$4",
       },
       "3": {
         fontSize: "$6",
diff --git a/packages/design-system/src/components/badge.tsx b/packages/design-system/src/components/badge.tsx
index 6186536fd2..37e5c30a84 100644
--- a/packages/design-system/src/components/badge.tsx
+++ b/packages/design-system/src/components/badge.tsx
@@ -43,12 +43,12 @@ export const Badge = styled("span", {
       "1": {
         height: "$spacing$10",
         px: "$spacing$3",
-        fontSize: "$1",
+        fontSize: "$fontSize$1",
       },
       "2": {
         height: "$spacing$11",
         px: "$spacing$5",
-        fontSize: "$2",
+        fontSize: "$fontSize$3",
       },
     },
     variant: {
diff --git a/packages/design-system/src/components/button.tsx b/packages/design-system/src/components/button.tsx
index 999cb8ba8b..2f4e5c3435 100644
--- a/packages/design-system/src/components/button.tsx
+++ b/packages/design-system/src/components/button.tsx
@@ -26,7 +26,7 @@ export const Button = styled("button", {
   height: "$spacing$11",
   px: "$spacing$5",
   fontFamily: "$sans",
-  fontSize: "$2",
+  fontSize: "$fontSize$3",
   fontWeight: 500,
   fontVariantNumeric: "tabular-nums",
 
@@ -43,19 +43,19 @@ export const Button = styled("button", {
         borderRadius: "$1",
         height: "$spacing$11",
         px: "$spacing$9",
-        fontSize: "$1",
+        fontSize: "$fontSize$1",
       },
       "2": {
         borderRadius: "$2",
         height: 28, // @todo waiting for the sizing scale
         px: "$spacing$9",
-        fontSize: "$3",
+        fontSize: "$fontSize$4",
       },
       "3": {
         borderRadius: "$2",
         height: "$spacing$17",
         px: "$spacing$10",
-        fontSize: "$4",
+        fontSize: "$fontSize$4",
       },
     },
     variant: {
diff --git a/packages/design-system/src/components/icon-button-with-menu.tsx b/packages/design-system/src/components/icon-button-with-menu.tsx
index cad1437eae..8252068e9c 100644
--- a/packages/design-system/src/components/icon-button-with-menu.tsx
+++ b/packages/design-system/src/components/icon-button-with-menu.tsx
@@ -17,7 +17,7 @@ const StyledContent = styled(DropdownMenuPrimitive.Content, {
 
 const itemStyles = {
   all: "unset",
-  fontSize: "$2",
+  fontSize: "$fontSize$3",
   lineHeight: 1,
   color: "$colors$slate12",
   borderRadius: "$radii$1",
diff --git a/packages/design-system/src/components/icon-button.tsx b/packages/design-system/src/components/icon-button.tsx
index d6ba7a1bc2..52e9150468 100644
--- a/packages/design-system/src/components/icon-button.tsx
+++ b/packages/design-system/src/components/icon-button.tsx
@@ -9,7 +9,7 @@ export const IconButton = styled("button", {
   display: "inline-flex",
   flexShrink: 0,
   fontFamily: "inherit",
-  fontSize: "14px",
+  fontSize: "$fontSize$4",
   justifyContent: "center",
   lineHeight: "1",
   padding: 0,
diff --git a/packages/design-system/src/components/kbd.tsx b/packages/design-system/src/components/kbd.tsx
index 04ab2012bb..b57f06b9e9 100644
--- a/packages/design-system/src/components/kbd.tsx
+++ b/packages/design-system/src/components/kbd.tsx
@@ -30,7 +30,7 @@ export const Kbd = styled("kbd", {
         px: "0.3em",
         height: "$spacing$9",
         minWidth: "1.6em",
-        fontSize: "$1",
+        fontSize: "$fontSize$1",
         lineHeight: "$spaces$3",
       },
       "2": {
@@ -38,7 +38,7 @@ export const Kbd = styled("kbd", {
         px: "0.5em",
         height: "$spacing$11",
         minWidth: "2em",
-        fontSize: "$2",
+        fontSize: "$fontSize$3",
         lineHeight: "$spaces$5",
       },
     },
diff --git a/packages/design-system/src/components/menu.tsx b/packages/design-system/src/components/menu.tsx
index 8d4ebe48c2..5d9e46c72c 100644
--- a/packages/design-system/src/components/menu.tsx
+++ b/packages/design-system/src/components/menu.tsx
@@ -10,7 +10,7 @@ export const baseItemCss = css({
   alignItems: "center",
   justifyContent: "space-between",
   fontFamily: "$sans",
-  fontSize: "$1",
+  fontSize: "$fontSize$1",
   fontVariantNumeric: "tabular-nums",
   lineHeight: "1",
   cursor: "default",
diff --git a/packages/design-system/src/components/radio-grid.tsx b/packages/design-system/src/components/radio-grid.tsx
index 7d8ec629ce..6533e438dd 100644
--- a/packages/design-system/src/components/radio-grid.tsx
+++ b/packages/design-system/src/components/radio-grid.tsx
@@ -23,7 +23,7 @@ export const RadioGrid = styled(RadioGroupPrimitive.Item, {
   px: "$spacing$3",
   height: "$spacing$13",
   lineHeight: "$sizes$6",
-  fontSize: "$3",
+  fontSize: "$fontSize$4",
   "@hover": {
     "&:hover": {
       boxShadow: "inset 0 0 0 1px $colors$slate8",
diff --git a/packages/design-system/src/components/select.tsx b/packages/design-system/src/components/select.tsx
index 28f7b2dc42..a249e5f33a 100644
--- a/packages/design-system/src/components/select.tsx
+++ b/packages/design-system/src/components/select.tsx
@@ -19,7 +19,7 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
   boxShadow: "inset 0 0 0 1px $colors$slate7",
   height: 28, // @todo waiting for the sizing scale
   px: "$spacing$5",
-  fontSize: "$1",
+  fontSize: "$fontSize$1",
   "&:focus": {
     boxShadow:
       "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
@@ -73,7 +73,7 @@ export const SelectViewport = styled(SelectPrimitive.Viewport, {
 
 const StyledItem = styled(SelectPrimitive.Item, {
   all: "unset",
-  fontSize: "$2",
+  fontSize: "$fontSize$3",
   lineHeight: 1,
   color: "$hiContrast",
   display: "flex",
diff --git a/packages/design-system/src/components/simple-toggle.tsx b/packages/design-system/src/components/simple-toggle.tsx
index 231b8cc531..86e617c583 100644
--- a/packages/design-system/src/components/simple-toggle.tsx
+++ b/packages/design-system/src/components/simple-toggle.tsx
@@ -10,7 +10,7 @@ export const SimpleToggle = styled(TogglePrimitive.Root, {
   display: "inline-flex",
   flexShrink: 0,
   fontFamily: "inherit",
-  fontSize: "14px",
+  fontSize: "$fontSize$4",
   justifyContent: "center",
   lineHeight: "1",
   outline: "none",
diff --git a/packages/design-system/src/components/tab-link.tsx b/packages/design-system/src/components/tab-link.tsx
index 187943ea21..b080f9c593 100644
--- a/packages/design-system/src/components/tab-link.tsx
+++ b/packages/design-system/src/components/tab-link.tsx
@@ -6,7 +6,7 @@ export const TabLink = styled("a", {
   height: "$spacing$13",
   display: "inline-flex",
   lineHeight: 1,
-  fontSize: "$1",
+  fontSize: "$fontSize$1",
   px: "$spacing$9",
   userSelect: "none",
   outline: "none",
diff --git a/packages/design-system/src/components/table.tsx b/packages/design-system/src/components/table.tsx
index c7f24679b3..804dfcdfbf 100644
--- a/packages/design-system/src/components/table.tsx
+++ b/packages/design-system/src/components/table.tsx
@@ -16,7 +16,7 @@ export const Tr = styled("tr", {});
 export const Th = styled("th", {
   fontWeight: "unset",
   textAlign: "start",
-  fontSize: "$2",
+  fontSize: "$fontSize$3",
   py: "$spacing$5",
   borderBottom: "$spacing$1 solid $gray4",
   variants: {
@@ -49,7 +49,7 @@ export const Th = styled("th", {
 export const Td = styled("td", {
   py: "$spacing$5",
   borderBottom: "$spacing$1 solid $gray4",
-  fontSize: "$2",
+  fontSize: "$fontSize$3",
   variants: {
     align: {
       start: {
@@ -79,11 +79,11 @@ export const Td = styled("td", {
 
 export const Thead = styled("thead", {
   [`& ${Th}`]: {
-    fontSize: "$1",
+    fontSize: "$fontSize$1",
     color: "$gray11",
   },
   [`& ${Td}`]: {
-    fontSize: "$1",
+    fontSize: "$fontSize$1",
     color: "$gray11",
   },
 });
diff --git a/packages/design-system/src/components/tabs.tsx b/packages/design-system/src/components/tabs.tsx
index 5ab0d68f7b..d2b4effb5e 100644
--- a/packages/design-system/src/components/tabs.tsx
+++ b/packages/design-system/src/components/tabs.tsx
@@ -16,7 +16,7 @@ export const TabsTrigger = styled(TabsPrimitive.Trigger, {
   display: "inline-flex",
   lineHeight: 1,
   fontFamily: "inherit",
-  fontSize: "$1",
+  fontSize: "$fontSize$1",
   px: "$spacing$5",
   userSelect: "none",
   outline: "none",
@@ -29,7 +29,7 @@ export const TabsTrigger = styled(TabsPrimitive.Trigger, {
   },
   [`& > ${Text}`]: {
     color: "$gray9",
-    fontSize: "$fontSizes$1",
+    fontSize: "$fontSizes$fontSize$1",
     fontWeight: "500",
   },
   "@hover": {
diff --git a/packages/design-system/src/components/text-area.tsx b/packages/design-system/src/components/text-area.tsx
index 2b49e23f8b..090781c2e5 100644
--- a/packages/design-system/src/components/text-area.tsx
+++ b/packages/design-system/src/components/text-area.tsx
@@ -47,19 +47,19 @@ export const TextArea = styled("textarea", {
     size: {
       "1": {
         borderRadius: "$1",
-        fontSize: "$1",
+        fontSize: "$fontSize$1",
         lineHeight: "16px",
         px: "$spacing$3",
       },
       "2": {
         borderRadius: "$1",
-        fontSize: "$2",
+        fontSize: "$fontSize$3",
         lineHeight: "20px",
         px: "$spacing$3",
       },
       "3": {
         borderRadius: "$2",
-        fontSize: "$3",
+        fontSize: "$fontSize$4",
         lineHeight: "23px",
         px: "$spacing$5",
       },
diff --git a/packages/design-system/src/components/text-field.tsx b/packages/design-system/src/components/text-field.tsx
index c0951bdef7..14ce6f3074 100644
--- a/packages/design-system/src/components/text-field.tsx
+++ b/packages/design-system/src/components/text-field.tsx
@@ -138,7 +138,7 @@ const TextFieldBase = styled("div", {
   px: "$spacing$5",
   borderRadius: "$1",
   fontFamily: "$sans",
-  fontSize: "$1",
+  fontSize: "$fontSize$1",
   height: 28, // @todo waiting for the sizing scale
   lineHeight: 1,
   "&:focus-within": {
diff --git a/packages/design-system/src/components/text.tsx b/packages/design-system/src/components/text.tsx
index 0bf1ee98f0..c65d44d983 100644
--- a/packages/design-system/src/components/text.tsx
+++ b/packages/design-system/src/components/text.tsx
@@ -14,12 +14,12 @@ export const Text = styled("div", {
     variant: {
       regular: {
         fontWeight: 400,
-        fontSize: "$1",
+        fontSize: "$fontSize$1",
         letterSpacing: "0.005em",
       },
       label: {
         fontWeight: 500,
-        fontSize: "$1",
+        fontSize: "$fontSize$1",
         letterSpacing: "0.005em",
       },
       tiny: {
@@ -29,13 +29,13 @@ export const Text = styled("div", {
       },
       title: {
         fontWeight: 700,
-        fontSize: "$1",
+        fontSize: "$fontSize$1",
         letterSpacing: "0.01em",
       },
       mono: {
         fontFamily: "$mono",
         fontWeight: 400,
-        fontSize: "$1",
+        fontSize: "$fontSize$1",
         textTransform: "uppercase",
       },
       unit: {
diff --git a/packages/design-system/src/components/toast.tsx b/packages/design-system/src/components/toast.tsx
index 40f6d2a9af..fca2c5a9e8 100644
--- a/packages/design-system/src/components/toast.tsx
+++ b/packages/design-system/src/components/toast.tsx
@@ -52,7 +52,7 @@ const StyledToast = styled(ToastPrimitive.Root, {
   alignItems: "center",
   color: "$highContrast",
   fontWeight: 500,
-  fontSize: "$2",
+  fontSize: "$fontSize$3",
   background: "$loContrast",
 
   "@media (prefers-reduced-motion: no-preference)": {
diff --git a/packages/icons/src/index.stories.tsx b/packages/icons/src/index.stories.tsx
index d80133a6fe..cdf64063b6 100644
--- a/packages/icons/src/index.stories.tsx
+++ b/packages/icons/src/index.stories.tsx
@@ -47,7 +47,7 @@ export const Icons = () => {
                     textAlign: "center",
                     wordWrap: "break-word",
                     width: "100%",
-                    fontSize: "14px",
+                    fontSize: "$fontSize$4",
                     color: "#5a5a5a",
                   }}
                 >