migrate font-sizes

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",

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",

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",
         }}

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",

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",

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: {

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: {

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",

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,

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",
       },
     },

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",

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",

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",

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",

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",

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",
   },
 });

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": {

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",
       },

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": {

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: {

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)": {

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",
                   }}
                 >