Merge pull request #439 from webstudio-is/migrate-tokens

Migrate fontSize & lineHeight and borderRadius tokens

apps/designer/app/designer/features/style-panel/sections/layout/shared/flex-grid.tsx

@@ -145,7 +145,7 @@ export const FlexGrid = ({
               blockSize: "calc(100% / 3)",
               maxBlockSize: "$spacing$4",
               background: "currentColor",
-              borderRadius: "calc($radii$1 / 2)",
+              borderRadius: "calc($borderRadius$4 / 2)",
             }}
           ></Flex>
         ))}

apps/designer/app/designer/features/style-panel/sections/spacing/spacing.tsx

@@ -42,7 +42,7 @@ const grid = {
 
 const styles = {
   spacingEdit: {
-    fontSize: "$1",
+    fontSize: "$fontSize$3",
     // @todo use a color from design system
     color: "rgb(217, 217, 217)",
     display: "flex",
@@ -58,7 +58,7 @@ const styles = {
       "$spacing$11 $spacing$3 $spacing$11 1fr $spacing$11 $spacing$3 $spacing$11",
   },
   input: {
-    fontSize: 10,
+    fontSize: "$fontSize$2",
     fontWeight: 400,
     fontFamily: "inherit",
     display: "block",
@@ -82,7 +82,7 @@ const styles = {
     width: "$spacing$13",
     margin: "auto",
     height: "100%",
-    borderRadius: "$1",
+    borderRadius: "$borderRadius$4",
   },
   marginGrid: {
     gridArea: "1 / 1 / -1 / -1",
@@ -91,13 +91,13 @@ const styles = {
     gridTemplateRows: "$spacing$11 minmax($spacing$9, 1fr) $spacing$11",
     height: 130,
     backgroundColor: "$gray6",
-    borderRadius: "$1",
+    borderRadius: "$borderRadius$4",
     px: 2,
   },
   text: {
     fontWeight: "bold",
     color: "$gray12",
-    fontSize: 8,
+    fontSize: "$fontSize$1",
     margin: "$spacing$3",
   },
   paddingGrid: {
@@ -107,7 +107,7 @@ const styles = {
     gridTemplateRows: "$spacing$11 minmax($spacing$9, 1fr) $spacing$11",
     border: "2px solid",
     borderColor: "$loContrast",
-    borderRadius: "$1",
+    borderRadius: "$borderRadius$4",
   },
 };
 

apps/designer/app/designer/features/style-panel/shared/property-name.tsx

@@ -21,8 +21,8 @@ export const PropertyName = ({ property, label, css }: PropertyProps) => {
               ? {
                   color: propertyNameColorForSelectedBreakpoint,
                   backgroundColor: "$colors$blue4",
-                  padding: "calc($radii$spacing$3 / 2) $radii$spacing$3",
-                  borderRadius: "$radii$1",
+                  padding: "calc($spacing$3 / 2) $spacing$3",
+                  borderRadius: "$borderRadius$4",
                 }
               : {
                   color: "$hiContrast",

apps/designer/app/designer/features/topbar/sync-status.tsx

@@ -14,7 +14,7 @@ const StyledCheckIcon = styled(CheckIcon, {
   width: iconSize,
   height: iconSize,
   background: "$green9",
-  borderRadius: "$radii$round",
+  borderRadius: "$borderRadius$round",
 });
 
 const ellipsisKeyframes = keyframes({

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$3",
     fontFamily: "$sans",
     lineHeight: 1,
     minWidth: "$spacing$13",

apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx

@@ -111,7 +111,7 @@ const Toolbar = ({ css, rootRef, state, onToggle }: ToolbarProps) => {
       onClick={onClickPreventDefault}
       css={{
         position: "absolute",
-        borderRadius: "$1",
+        borderRadius: "$borderRadius$4",
         padding: "$spacing$3 $spacing$5",
         pointerEvents: "auto",
         ...css,

apps/designer/app/designer/shared/image-manager/image-thumbnail.tsx

@@ -37,7 +37,7 @@ const ThumbnailContainer = styled(Box, {
   alignItems: "center",
   flexDirection: "column",
   border: "2px solid transparent",
-  borderRadius: "$1",
+  borderRadius: "$borderRadius$4",
   outline: 0,
   gap: "$spacing$3",
   overflow: "hidden",

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

codemod/migrate-tokens.ts

@@ -177,30 +177,83 @@ const spaceValues = new Map([
   ["8px", "5"],
 ]);
 
+const fontSizeProps = ["fontSize"];
+const fontSizeValues = new Map([
+  ["$1", "3"],
+  ["$2", "3"],
+  ["$3", "4"],
+  ["$4", "4"],
+  ["$5", "5"],
+  ["$6", "6"],
+  ["$7", "7"],
+  ["$8", "8"],
+  ["$9", "9"],
+  ["14px", "4"],
+]);
+
+const lineHeightProps = ["lineHeight"];
+const lineHeightValues = new Map([
+  ["15px", "3"],
+  ["16px", "3"],
+  ["20px", "4"],
+]);
+
+const borderRadiusProps = ["borderRadius"];
+const borderRadiusValues = new Map([
+  ["$1", "4"],
+  ["$2", "6"],
+  ["$3", "7"],
+  ["$round", "round"],
+  ["$pill", "pill"],
+]);
+
+const updateProperty = (
+  line: string,
+  props: Array<string>,
+  values: Map<string, string>,
+  group: string
+) => {
+  for (const prop of props) {
+    const regex = new RegExp(`${prop}: "(.+)"`, "g");
+    const match = regex.exec(line);
+    if (match && match[1]) {
+      let value = match[1];
+      for (const [key, nextValue] of values) {
+        if (value.includes(key) === false) continue;
+        // This is to allow the script to run multiple times
+        value = value.replaceAll(`$${group}$`, `__${group}__`);
+
+        value = value.replaceAll(key, `__${group}__${nextValue}`);
+      }
+
+      const next = `${prop}: "${value}"`;
+      line = line.replace(regex, next);
+    }
+  }
+  line = line.replaceAll(`__${group}__`, `$${group}$`);
+  return line;
+};
+
 const update = async ({ filePath, buffer }) => {
   let code = buffer.toString("utf-8");
   const lines = code.split("\n");
   const nextLines: Array<string> = [];
   let line: string = "";
   for (line of lines) {
-    for (const prop of spaceProps) {
-      const regex = new RegExp(`${prop}: "(.+)"`, "g");
-      const match = regex.exec(line);
-      if (match && match[1]) {
-        let value = match[1];
-        for (const [key, nextValue] of spaceValues) {
-          if (value.includes(key) === false) continue;
-          // This is to allow the script to run multiple times
-          value = value.replaceAll("$spacing$", `__spacing__`);
-
-          value = value.replaceAll(key, `__spacing__${nextValue}`);
-        }
-
-        const next = `${prop}: "${value}"`;
-        line = line.replace(regex, next);
-      }
-    }
-    line = line.replaceAll("__spacing__", "$spacing$");
+    line = updateProperty(line, spaceProps, spaceValues, "spacing");
+    line = updateProperty(line, fontSizeProps, fontSizeValues, "fontSize");
+    line = updateProperty(
+      line,
+      lineHeightProps,
+      lineHeightValues,
+      "lineHeight"
+    );
+    line = updateProperty(
+      line,
+      borderRadiusProps,
+      borderRadiusValues,
+      "borderRadius"
+    );
     nextLines.push(line);
   }
   await fs.writeFile(filePath, nextLines.join("\n"));

packages/design-system/src/components/__DEPRECATED__/text.tsx

@@ -12,37 +12,37 @@ export const __DEPRECATED__Text = styled("div", {
   variants: {
     size: {
       "1": {
-        fontSize: "$1",
+        fontSize: "$fontSize$3",
       },
       "2": {
-        fontSize: "$2",
+        fontSize: "$fontSize$3",
       },
       "3": {
-        fontSize: "$3",
+        fontSize: "$fontSize$4",
       },
       "4": {
-        fontSize: "$4",
+        fontSize: "$fontSize$4",
       },
       "5": {
-        fontSize: "$5",
+        fontSize: "$fontSize$5",
         letterSpacing: "-.015em",
       },
       "6": {
-        fontSize: "$6",
+        fontSize: "$fontSize$6",
         letterSpacing: "-.016em",
       },
       "7": {
-        fontSize: "$7",
+        fontSize: "$fontSize$7",
         letterSpacing: "-.031em",
         textIndent: "-.005em",
       },
       "8": {
-        fontSize: "$8",
+        fontSize: "$fontSize$8",
         letterSpacing: "-.034em",
         textIndent: "-.018em",
       },
       "9": {
-        fontSize: "$9",
+        fontSize: "$fontSize$9",
         letterSpacing: "-.055em",
         textIndent: "-.025em",
       },

packages/design-system/src/components/alert.tsx

@@ -11,7 +11,7 @@ export const Alert = styled("div", {
   },
 
   border: "1px solid",
-  borderRadius: "$2",
+  borderRadius: "$borderRadius$6",
 
   variants: {
     size: {

packages/design-system/src/components/avatar.tsx

@@ -138,7 +138,7 @@ const StyledAvatar = styled(AvatarPrimitive.Root, {
     },
     shape: {
       square: {
-        borderRadius: "$2",
+        borderRadius: "$borderRadius$6",
       },
       circle: {
         borderRadius: "50%",
@@ -201,23 +201,23 @@ const StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {
   variants: {
     size: {
       "1": {
-        fontSize: "10px",
-        lineHeight: "15px",
+        fontSize: "$fontSize$2",
+        lineHeight: "$lineHeight$3",
       },
       "2": {
-        fontSize: "$3",
+        fontSize: "$fontSize$4",
       },
       "3": {
-        fontSize: "$6",
+        fontSize: "$fontSize$6",
       },
       "4": {
-        fontSize: "$7",
+        fontSize: "$fontSize$7",
       },
       "5": {
-        fontSize: "$8",
+        fontSize: "$fontSize$8",
       },
       "6": {
-        fontSize: "$9",
+        fontSize: "$fontSize$9",
       },
     },
   },
@@ -287,7 +287,7 @@ export const Avatar = React.forwardRef<
               bottom: "0",
               right: "0",
               boxShadow: "0 0 0 3px $colors$loContrast",
-              borderRadius: "$round",
+              borderRadius: "$borderRadius$round",
               mr: "-$spacing$2",
               mb: "-$spacing$2",
             }}

packages/design-system/src/components/badge.tsx

@@ -33,7 +33,7 @@ export const Badge = styled("span", {
 
   // Custom
   backgroundColor: "$slate3",
-  borderRadius: "$pill",
+  borderRadius: "$borderRadius$pill",
   color: "$slate11",
   whiteSpace: "nowrap",
   fontVariantNumeric: "tabular-nums",
@@ -43,12 +43,12 @@ export const Badge = styled("span", {
       "1": {
         height: "$spacing$10",
         px: "$spacing$3",
-        fontSize: "$1",
+        fontSize: "$fontSize$3",
       },
       "2": {
         height: "$spacing$11",
         px: "$spacing$5",
-        fontSize: "$2",
+        fontSize: "$fontSize$3",
       },
     },
     variant: {

packages/design-system/src/components/banner.tsx

@@ -41,12 +41,12 @@ export const Banner = styled("div", {
     },
     rounded: {
       true: {
-        borderRadius: "$pill",
+        borderRadius: "$borderRadius$pill",
       },
     },
     border: {
       true: {
-        borderRadius: "$pill",
+        borderRadius: "$borderRadius$pill",
       },
     },
   },

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",
 
@@ -40,22 +40,22 @@ export const Button = styled("button", {
   variants: {
     size: {
       "1": {
-        borderRadius: "$1",
+        borderRadius: "$borderRadius$4",
         height: "$spacing$11",
         px: "$spacing$9",
-        fontSize: "$1",
+        fontSize: "$fontSize$3",
       },
       "2": {
-        borderRadius: "$2",
+        borderRadius: "$borderRadius$6",
         height: 28, // @todo waiting for the sizing scale
         px: "$spacing$9",
-        fontSize: "$3",
+        fontSize: "$fontSize$4",
       },
       "3": {
-        borderRadius: "$2",
+        borderRadius: "$borderRadius$6",
         height: "$spacing$17",
         px: "$spacing$10",
-        fontSize: "$4",
+        fontSize: "$fontSize$4",
       },
     },
     variant: {

packages/design-system/src/components/card.tsx

@@ -15,7 +15,7 @@ export const Card = styled("div", {
   textDecoration: "none",
   color: "inherit",
   flexShrink: 0,
-  borderRadius: "$3",
+  borderRadius: "$borderRadius$7",
   position: "relative",
 
   "&::before": {
@@ -27,7 +27,7 @@ export const Card = styled("div", {
     bottom: 0,
     left: 0,
     boxShadow: "inset 0 0 0 1px rgba(0,0,0,.1)",
-    borderRadius: "$3",
+    borderRadius: "$borderRadius$7",
     pointerEvents: "none",
   },
 

packages/design-system/src/components/checkbox.tsx

@@ -43,12 +43,12 @@ const StyledCheckbox = styled(CheckboxPrimitive.Root, {
       "1": {
         width: "$spacing$9",
         height: "$spacing$9",
-        borderRadius: "$1",
+        borderRadius: "$borderRadius$4",
       },
       "2": {
         width: "$spacing$11",
         height: "$spacing$11",
-        borderRadius: "$2",
+        borderRadius: "$borderRadius$6",
       },
     },
   },

packages/design-system/src/components/combobox.tsx

@@ -49,7 +49,7 @@ const Listbox = styled("ul", panelStyles, {
 const ListboxItem = styled("li", itemCss, {
   padding: "0 $spacing$5",
   margin: 0,
-  borderRadius: "$1",
+  borderRadius: "$borderRadius$4",
 });
 
 const ListboxItemBase: ForwardRefRenderFunction<

packages/design-system/src/components/context-menu.tsx

@@ -55,7 +55,7 @@ export const ContextMenuRadioItem = React.forwardRef<
               width: "$spacing$3",
               height: "$spacing$3",
               backgroundColor: "currentColor",
-              borderRadius: "$round",
+              borderRadius: "$borderRadius$round",
             }}
           />
         </Flex>

packages/design-system/src/components/heading.tsx

@@ -30,7 +30,11 @@ export const Heading = React.forwardRef<
 
   // This is the mapping of Heading Variants to Text css
   const textCss: Record<HeadingSizeVariants, CSS> = {
-    1: { fontWeight: 500, lineHeight: "20px", "@bp2": { lineHeight: "23px" } },
+    1: {
+      fontWeight: 500,
+      lineHeight: "$lineHeight$4",
+      "@bp2": { lineHeight: "23px" },
+    },
     2: { fontWeight: 500, lineHeight: "25px", "@bp2": { lineHeight: "30px" } },
     3: { fontWeight: 500, lineHeight: "33px", "@bp2": { lineHeight: "41px" } },
     4: { fontWeight: 500, lineHeight: "35px", "@bp2": { lineHeight: "55px" } },

packages/design-system/src/components/icon-button-with-menu.tsx

@@ -9,7 +9,7 @@ const StyledContent = styled(DropdownMenuPrimitive.Content, {
   maxHeight: 238,
   overflow: "auto",
   backgroundColor: "$colors$slate4",
-  borderRadius: "$radii$1",
+  borderRadius: "$borderRadius$4",
   padding: "$spacing$5",
   boxShadow:
     "0px 2px 7px rgba(0, 0, 0, 0.1), 0px 5px 17px rgba(0, 0, 0, 0.15), inset 0 0 1px 1px $colors$gray1, 0 0 0 1px $colors$gray8",
@@ -17,10 +17,10 @@ const StyledContent = styled(DropdownMenuPrimitive.Content, {
 
 const itemStyles = {
   all: "unset",
-  fontSize: "$2",
+  fontSize: "$fontSize$3",
   lineHeight: 1,
   color: "$colors$slate12",
-  borderRadius: "$radii$1",
+  borderRadius: "$borderRadius$4",
   display: "flex",
   alignItems: "center",
   height: "$spacing$11",

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,
@@ -51,17 +51,17 @@ export const IconButton = styled("button", {
         },
       },
       "2": {
-        borderRadius: "$1",
+        borderRadius: "$borderRadius$4",
         height: "$spacing$13",
         width: "$spacing$13",
       },
       "3": {
-        borderRadius: "$1",
+        borderRadius: "$borderRadius$4",
         height: "$spacing$17",
         width: "$spacing$17",
       },
       "4": {
-        borderRadius: "$2",
+        borderRadius: "$borderRadius$6",
         height: "$spacing$19",
         width: "$spacing$19",
       },

packages/design-system/src/components/kbd.tsx

@@ -26,19 +26,19 @@ export const Kbd = styled("kbd", {
   variants: {
     size: {
       "1": {
-        borderRadius: "$1",
+        borderRadius: "$borderRadius$4",
         px: "0.3em",
         height: "$spacing$9",
         minWidth: "1.6em",
-        fontSize: "$1",
+        fontSize: "$fontSize$3",
         lineHeight: "$spaces$3",
       },
       "2": {
-        borderRadius: "$2",
+        borderRadius: "$borderRadius$6",
         px: "0.5em",
         height: "$spacing$11",
         minWidth: "2em",
-        fontSize: "$2",
+        fontSize: "$fontSize$3",
         lineHeight: "$spaces$5",
       },
     },

packages/design-system/src/components/list.tsx

@@ -23,7 +23,7 @@ const ListItemBase = styled("li", {
   height: "$spacing$11",
   px: "$spacing$3",
   listStyle: "none",
-  borderRadius: "$1",
+  borderRadius: "$borderRadius$4",
   outline: 0,
   variants: {
     state: {

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$3",
   fontVariantNumeric: "tabular-nums",
   lineHeight: "1",
   cursor: "default",

packages/design-system/src/components/panel.tsx

@@ -3,7 +3,7 @@ import { css, styled } from "../stitches.config";
 export const panelStyles = css({
   overflow: "auto",
   backgroundColor: "$slate4",
-  borderRadius: "$1",
+  borderRadius: "$borderRadius$4",
   boxShadow:
     "0px 2px 7px rgba(0, 0, 0, 0.1), 0px 5px 17px rgba(0, 0, 0, 0.15), inset 0 0 1px 1px $colors$slate1, 0 0 0 1px $colors$slate7",
 });

packages/design-system/src/components/progress-bar.tsx

@@ -22,7 +22,7 @@ const StyledProgressBar = styled(ProgressPrimitive.Root, {
   position: "relative",
   height: "$spacing$3",
   overflow: "hidden",
-  borderRadius: "$pill",
+  borderRadius: "$borderRadius$pill",
 
   '&[data-state="indeterminate"]': {
     backgroundColor: "$slate4",
@@ -33,7 +33,7 @@ const StyledProgressBar = styled(ProgressPrimitive.Root, {
       animationTimingFunction: "cubic-bezier(0.65, 0, 0.35, 1)",
       backgroundColor: "$slate7",
       boxSizing: "border-box",
-      borderRadius: "$pill",
+      borderRadius: "$borderRadius$pill",
       content: '""',
       position: "absolute",
       top: 0,

packages/design-system/src/components/radio-card.tsx

@@ -10,7 +10,7 @@ const StyledRadioButton = styled("div", {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  borderRadius: "$round",
+  borderRadius: "$borderRadius$round",
   width: 25,
   height: 25,
   boxShadow: "inset 0 0 0 1px $colors$slate7",
@@ -19,7 +19,7 @@ const StyledRadioButton = styled("div", {
 });
 
 const StyledRadioIndicator = styled("div", {
-  borderRadius: "$round",
+  borderRadius: "$borderRadius$round",
   width: 15,
   height: 15,
   backgroundColor: "$blue9",
@@ -38,7 +38,7 @@ const StyledRadio = styled(RadioGroupPrimitive.Item, {
   },
   display: "flex",
   alignItems: "center",
-  borderRadius: "$2",
+  borderRadius: "$borderRadius$6",
   boxShadow: "inset 0 0 0 1px $colors$slate7",
   p: "$spacing$9",
   "@hover": {

packages/design-system/src/components/radio-grid.tsx

@@ -18,12 +18,12 @@ export const RadioGrid = styled(RadioGroupPrimitive.Item, {
   "&::after": {
     boxSizing: "border-box",
   },
-  borderRadius: "$2",
+  borderRadius: "$borderRadius$6",
   boxShadow: "inset 0 0 0 1px $colors$slate7",
   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

@@ -13,13 +13,13 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
   fontVariantNumeric: "tabular-nums",
   gap: "$spacing$5",
   flexShrink: 0,
-  borderRadius: "$1",
+  borderRadius: "$borderRadius$4",
   backgroundColor: "$loContrast",
   color: "$hiContrast",
   boxShadow: "inset 0 0 0 1px $colors$slate7",
   height: 28, // @todo waiting for the sizing scale
   px: "$spacing$5",
-  fontSize: "$1",
+  fontSize: "$fontSize$3",
   "&:focus": {
     boxShadow:
       "inset 0px 0px 0px 1px $colors$blue8, 0px 0px 0px 1px $colors$blue8",
@@ -62,7 +62,7 @@ const StyledIcon = styled(SelectPrimitive.Icon, {
 export const SelectContent = styled(SelectPrimitive.Content, {
   overflow: "hidden",
   backgroundColor: "$colors$slate4",
-  borderRadius: "$1",
+  borderRadius: "$borderRadius$4",
   boxShadow:
     "0px 2px 7px rgba(0, 0, 0, 0.1), 0px 5px 17px rgba(0, 0, 0, 0.15), inset 0 0 1px 1px $colors$slate1, 0 0 0 1px $colors$slate8",
 });
@@ -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",
@@ -82,7 +82,7 @@ const StyledItem = styled(SelectPrimitive.Item, {
   padding: "0 $spacing$5",
   position: "relative",
   userSelect: "none",
-  borderRadius: "$1",
+  borderRadius: "$borderRadius$4",
 
   "&[data-disabled]": {
     color: "$muted",

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",
@@ -56,10 +56,10 @@ export const SimpleToggle = styled(TogglePrimitive.Root, {
   variants: {
     shape: {
       circle: {
-        borderRadius: "$round",
+        borderRadius: "$borderRadius$round",
       },
       square: {
-        borderRadius: "$1",
+        borderRadius: "$borderRadius$4",
       },
     },
   },

packages/design-system/src/components/skeleton.tsx

@@ -29,32 +29,32 @@ export const Skeleton = styled("div", {
   variants: {
     variant: {
       avatar1: {
-        borderRadius: "$round",
+        borderRadius: "$borderRadius$round",
         height: "$spacing$9",
         width: "$spacing$9",
       },
       avatar2: {
-        borderRadius: "$round",
+        borderRadius: "$borderRadius$round",
         height: "$spacing$11",
         width: "$spacing$11",
       },
       avatar3: {
-        borderRadius: "$round",
+        borderRadius: "$borderRadius$round",
         height: "$spacing$13",
         width: "$spacing$13",
       },
       avatar4: {
-        borderRadius: "$round",
+        borderRadius: "$borderRadius$round",
         height: "$spacing$17",
         width: "$spacing$17",
       },
       avatar5: {
-        borderRadius: "$round",
+        borderRadius: "$borderRadius$round",
         height: "$spacing$19",
         width: "$spacing$19",
       },
       avatar6: {
-        borderRadius: "$round",
+        borderRadius: "$borderRadius$round",
         height: "$spacing$20",
         width: "$spacing$20",
       },
@@ -68,7 +68,7 @@ export const Skeleton = styled("div", {
         height: "$spacing$9",
       },
       button: {
-        borderRadius: "$1",
+        borderRadius: "$borderRadius$4",
         height: "$spacing$11",
         width: "$spacing$19",
       },

packages/design-system/src/components/slider.tsx

@@ -6,7 +6,7 @@ const SliderTrack = styled(SliderPrimitive.Track, {
   position: "relative",
   flexGrow: 1,
   backgroundColor: "$slate7",
-  borderRadius: "$pill",
+  borderRadius: "$borderRadius$pill",
   '&[data-orientation="horizontal"]': {
     height: 2,
   },
@@ -36,7 +36,7 @@ const SliderThumb = styled(SliderPrimitive.Thumb, {
   outline: "none",
   backgroundColor: "white",
   boxShadow: "0 0 1px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.15)",
-  borderRadius: "$round",
+  borderRadius: "$borderRadius$round",
 
   "&::after": {
     content: '""',
@@ -48,7 +48,7 @@ const SliderThumb = styled(SliderPrimitive.Thumb, {
     zIndex: -2,
     backgroundColor: "hsla(0,0%,0%,.035)",
     transform: "scale(1)",
-    borderRadius: "$round",
+    borderRadius: "$borderRadius$round",
     transition: "transform 200ms cubic-bezier(0.22, 1, 0.36, 1)",
   },
 

packages/design-system/src/components/switch.tsx

@@ -8,7 +8,7 @@ const StyledThumb = styled(SwitchPrimitive.Thumb, {
   width: 13,
   height: 13,
   backgroundColor: "white",
-  borderRadius: "$round",
+  borderRadius: "$borderRadius$round",
   boxShadow: "rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px;",
   transition: "transform 100ms cubic-bezier(0.22, 1, 0.36, 1)",
   transform: "translateX($spacing$1)",
@@ -41,7 +41,7 @@ const StyledSwitch = styled(SwitchPrimitive.Root, {
   WebkitTapHighlightColor: "rgba(0,0,0,0)",
 
   backgroundColor: "$slate6",
-  borderRadius: "$pill",
+  borderRadius: "$borderRadius$pill",
   position: "relative",
   "&:focus": {
     boxShadow: "0 0 0 2px $colors$slate8",

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$3",
   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$3",
     color: "$gray11",
   },
   [`& ${Td}`]: {
-    fontSize: "$1",
+    fontSize: "$fontSize$3",
     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$3",
   px: "$spacing$5",
   userSelect: "none",
   outline: "none",
@@ -29,7 +29,7 @@ export const TabsTrigger = styled(TabsPrimitive.Trigger, {
   },
   [`& > ${Text}`]: {
     color: "$gray9",
-    fontSize: "$fontSizes$1",
+    fontSize: "$fontSize$3",
     fontWeight: "500",
   },
   "@hover": {

packages/design-system/src/components/text-area.tsx

@@ -46,20 +46,20 @@ export const TextArea = styled("textarea", {
   variants: {
     size: {
       "1": {
-        borderRadius: "$1",
-        fontSize: "$1",
-        lineHeight: "16px",
+        borderRadius: "$borderRadius$4",
+        fontSize: "$fontSize$3",
+        lineHeight: "$lineHeight$3",
         px: "$spacing$3",
       },
       "2": {
-        borderRadius: "$1",
-        fontSize: "$2",
-        lineHeight: "20px",
+        borderRadius: "$borderRadius$4",
+        fontSize: "$fontSize$3",
+        lineHeight: "$lineHeight$4",
         px: "$spacing$3",
       },
       "3": {
-        borderRadius: "$2",
-        fontSize: "$3",
+        borderRadius: "$borderRadius$6",
+        fontSize: "$fontSize$4",
         lineHeight: "23px",
         px: "$spacing$5",
       },

packages/design-system/src/components/text-field.tsx

@@ -136,9 +136,9 @@ const TextFieldBase = styled("div", {
   fontVariantNumeric: "tabular-nums",
   gap: "$spacing$3",
   px: "$spacing$5",
-  borderRadius: "$1",
+  borderRadius: "$borderRadius$4",
   fontFamily: "$sans",
-  fontSize: "$1",
+  fontSize: "$fontSize$3",
   height: 28, // @todo waiting for the sizing scale
   lineHeight: 1,
   "&:focus-within": {

packages/design-system/src/components/text.tsx

@@ -14,33 +14,33 @@ export const Text = styled("div", {
     variant: {
       regular: {
         fontWeight: 400,
-        fontSize: "$1",
+        fontSize: "$fontSize$3",
         letterSpacing: "0.005em",
       },
       label: {
         fontWeight: 500,
-        fontSize: "$1",
+        fontSize: "$fontSize$3",
         letterSpacing: "0.005em",
       },
       tiny: {
         fontWeight: 400,
-        fontSize: 8,
+        fontSize: "$fontSize$1",
         letterSpacing: "0.01em",
       },
       title: {
         fontWeight: 700,
-        fontSize: "$1",
+        fontSize: "$fontSize$3",
         letterSpacing: "0.01em",
       },
       mono: {
         fontFamily: "$mono",
         fontWeight: 400,
-        fontSize: "$1",
+        fontSize: "$fontSize$3",
         textTransform: "uppercase",
       },
       unit: {
         fontWeight: 500,
-        fontSize: 10,
+        fontSize: "$fontSize$2",
         textTransform: "uppercase",
       },
     },

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/design-system/src/components/toggle-group.tsx

@@ -14,7 +14,7 @@ export const Item = styled(ToggleGroupPrimitive.Item, {
   color: "$hiContrast",
   display: "flex",
   whiteSpace: "nowrap",
-  fontSize: 15,
+  fontSize: "$fontSize$4",
   lineHeight: 1,
   alignItems: "center",
   justifyContent: "center",

packages/design-system/src/components/tooltip.tsx

@@ -18,7 +18,7 @@ type TooltipProps = ComponentProps<typeof TooltipPrimitive.Root> &
 const Content = styled(TooltipPrimitive.Content, {
   backgroundColor: "$hiContrast",
   color: "$loContrast",
-  borderRadius: "$1",
+  borderRadius: "$borderRadius$4",
   padding: "$spacing$3 $spacing$5",
   zIndex: "$1",
   position: "relative",

packages/design-system/src/components/tree/tree-node.tsx

@@ -165,7 +165,7 @@ const hoverStyle = {
   height: ITEM_HEIGHT,
   border: "solid $blue10",
   borderWidth: 2,
-  borderRadius: "$2",
+  borderRadius: "$borderRadius$6",
   pointerEvents: "none",
   boxSizing: "border-box",
 };

packages/design-system/src/components/verified-badge.tsx

@@ -6,7 +6,7 @@ import { CheckIcon } from "@webstudio-is/icons";
 const StyledVerifiedBadge = styled("div", Flex, {
   alignItems: "center",
   backgroundColor: "$blue9",
-  borderRadius: "$round",
+  borderRadius: "$borderRadius$round",
   color: "white",
   flexShrink: 0,
   justifyContent: "center",

packages/design-system/src/stitches.config.ts

@@ -254,24 +254,36 @@ const {
       1: "0.4",
     },
     spacing,
-    fontSizes: {
-      1: "12px",
-      2: "13px",
-      3: "15px",
-      4: "17px",
+    fontSize: {
+      1: "8px",
+      2: "10px",
+      3: "12px",
+      // Legacy - don't use unless specified in Figma
+      4: "14px",
       5: "19px",
       6: "21px",
       7: "27px",
       8: "35px",
       9: "59px",
     },
-    radii: {
-      1: "4px",
-      2: "6px",
-      3: "8px",
-      4: "12px",
+    lineHeight: {
+      1: "8px",
+      2: "12px",
+      3: "16px",
+      // Legacy - don't use unless specified in Figma
+      4: "20px",
+    },
+    borderRadius: {
+      1: "1px",
+      2: "2px",
+      3: "3px",
+      4: "4px",
+      5: "5px",
+      6: "6px",
       round: "50%",
       pill: "9999px",
+      // Legacy - don't use unless specified in Figma
+      7: "8px",
     },
     zIndices: {
       1: "100",

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