From 31e4fad38a04367d493a80574f496ef6e8f43cee Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 14:36:18 +0100 Subject: [PATCH 01/20] make migration script more generic --- codemod/migrate-spacing.ts | 46 +++++++++++++++++++++++--------------- 1 file changed, 28 insertions(+), 18 deletions(-) diff --git a/codemod/migrate-spacing.ts b/codemod/migrate-spacing.ts index 13817442d3..7999d22410 100644 --- a/codemod/migrate-spacing.ts +++ b/codemod/migrate-spacing.ts @@ -177,30 +177,40 @@ const spaceValues = new Map([ ["8px", "5"], ]); +const updateProperty = ( + line: string, + props: Array, + values: Map, + 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 = []; 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"); nextLines.push(line); } await fs.writeFile(filePath, nextLines.join("\n")); From 330177b45b8f877b701421cb058c402c27f4bb49 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 14:49:24 +0100 Subject: [PATCH 02/20] prepare fontSizes migration --- codemod/{migrate-spacing.ts => migrate-tokens.ts} | 9 +++++++++ packages/design-system/src/stitches.config.ts | 13 ++++--------- 2 files changed, 13 insertions(+), 9 deletions(-) rename codemod/{migrate-spacing.ts => migrate-tokens.ts} (95%) diff --git a/codemod/migrate-spacing.ts b/codemod/migrate-tokens.ts similarity index 95% rename from codemod/migrate-spacing.ts rename to codemod/migrate-tokens.ts index 7999d22410..4b1b76f069 100644 --- a/codemod/migrate-spacing.ts +++ b/codemod/migrate-tokens.ts @@ -177,6 +177,14 @@ const spaceValues = new Map([ ["8px", "5"], ]); +const fontSizeProps = ["fontSize"]; +const fontSizeValues = new Map([ + ["$1", "1"], + ["$2", "3"], + ["$3", "4"], + ["$4", "1"], +]); + const updateProperty = ( line: string, props: Array, @@ -211,6 +219,7 @@ const update = async ({ filePath, buffer }) => { let line: string = ""; for (line of lines) { line = updateProperty(line, spaceProps, spaceValues, "spacing"); + line = updateProperty(line, fontSizeProps, fontSizeValues, "fontSizes"); nextLines.push(line); } await fs.writeFile(filePath, nextLines.join("\n")); diff --git a/packages/design-system/src/stitches.config.ts b/packages/design-system/src/stitches.config.ts index 2f2de88c48..a070222ab4 100644 --- a/packages/design-system/src/stitches.config.ts +++ b/packages/design-system/src/stitches.config.ts @@ -255,15 +255,10 @@ const { }, spacing, fontSizes: { - 1: "12px", - 2: "13px", - 3: "15px", - 4: "17px", - 5: "19px", - 6: "21px", - 7: "27px", - 8: "35px", - 9: "59px", + 1: "8px", + 2: "10px", + 3: "12px", + 4: "14px", }, radii: { 1: "4px", From d836413ef4ef52a45568c7cc2b7be512103fab35 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 14:54:39 +0100 Subject: [PATCH 03/20] more fontSize migration tweeks --- codemod/migrate-tokens.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/codemod/migrate-tokens.ts b/codemod/migrate-tokens.ts index 4b1b76f069..f3135a2a4d 100644 --- a/codemod/migrate-tokens.ts +++ b/codemod/migrate-tokens.ts @@ -182,7 +182,8 @@ const fontSizeValues = new Map([ ["$1", "1"], ["$2", "3"], ["$3", "4"], - ["$4", "1"], + ["$4", "4"], + ["14px", "4"], ]); const updateProperty = ( @@ -219,7 +220,7 @@ const update = async ({ filePath, buffer }) => { let line: string = ""; for (line of lines) { line = updateProperty(line, spaceProps, spaceValues, "spacing"); - line = updateProperty(line, fontSizeProps, fontSizeValues, "fontSizes"); + line = updateProperty(line, fontSizeProps, fontSizeValues, "fontSize"); nextLines.push(line); } await fs.writeFile(filePath, nextLines.join("\n")); From 0627e3e679665e86aa9d2e1a2fc7df8166fc4e41 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 14:54:53 +0100 Subject: [PATCH 04/20] 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 = ({ ${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", }} > From a8453c3d4f7566e95eab86ecc58cceac562c8994 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:01:22 +0100 Subject: [PATCH 05/20] bring some legacy tokens back for the current, legacy parts of UI --- packages/design-system/src/stitches.config.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/design-system/src/stitches.config.ts b/packages/design-system/src/stitches.config.ts index a070222ab4..dbad7e4bfb 100644 --- a/packages/design-system/src/stitches.config.ts +++ b/packages/design-system/src/stitches.config.ts @@ -254,11 +254,16 @@ const { 1: "0.4", }, spacing, - fontSizes: { + fontSize: { 1: "8px", 2: "10px", 3: "12px", 4: "14px", + // Legacy - don't use unless specified in Figma + 6: "21px", + 7: "27px", + 8: "35px", + 9: "59px", }, radii: { 1: "4px", From 3238b8fb2c3b36ce7781b08d8f8f26775aecc376 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:05:58 +0100 Subject: [PATCH 06/20] fix migration script for $1 --- codemod/migrate-tokens.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/codemod/migrate-tokens.ts b/codemod/migrate-tokens.ts index f3135a2a4d..90197b8307 100644 --- a/codemod/migrate-tokens.ts +++ b/codemod/migrate-tokens.ts @@ -179,7 +179,7 @@ const spaceValues = new Map([ const fontSizeProps = ["fontSize"]; const fontSizeValues = new Map([ - ["$1", "1"], + ["$1", "3"], ["$2", "3"], ["$3", "4"], ["$4", "4"], From 006c9f32f967f595ee3a70c6c0cb00a684b1db14 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:06:06 +0100 Subject: [PATCH 07/20] Revert "migrate font-sizes" This reverts commit 0627e3e679665e86aa9d2e1a2fc7df8166fc4e41. --- .../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 cc734ae940..14443e8e4e 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: "$fontSize$1", + 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 119eb4a7fe..a7a6ad6de7 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: "$fontSize$1", + 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 42b6600ef8..421168a928 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 = ({ ${Text}`]: { color: "$gray9", - fontSize: "$fontSizes$fontSize$1", + fontSize: "$fontSizes$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 090781c2e5..2b49e23f8b 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: "$fontSize$1", + fontSize: "$1", lineHeight: "16px", px: "$spacing$3", }, "2": { borderRadius: "$1", - fontSize: "$fontSize$3", + fontSize: "$2", lineHeight: "20px", px: "$spacing$3", }, "3": { borderRadius: "$2", - fontSize: "$fontSize$4", + fontSize: "$3", 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 14ce6f3074..c0951bdef7 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: "$fontSize$1", + 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 c65d44d983..0bf1ee98f0 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: "$fontSize$1", + fontSize: "$1", letterSpacing: "0.005em", }, label: { fontWeight: 500, - fontSize: "$fontSize$1", + fontSize: "$1", letterSpacing: "0.005em", }, tiny: { @@ -29,13 +29,13 @@ export const Text = styled("div", { }, title: { fontWeight: 700, - fontSize: "$fontSize$1", + fontSize: "$1", letterSpacing: "0.01em", }, mono: { fontFamily: "$mono", fontWeight: 400, - fontSize: "$fontSize$1", + fontSize: "$1", textTransform: "uppercase", }, unit: { diff --git a/packages/design-system/src/components/toast.tsx b/packages/design-system/src/components/toast.tsx index fca2c5a9e8..40f6d2a9af 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: "$fontSize$3", + fontSize: "$2", 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 cdf64063b6..d80133a6fe 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: "$fontSize$4", + fontSize: "14px", color: "#5a5a5a", }} > From e2b584d55d4ef70ddb0f51de80fa98da90a0ed3e Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:07:31 +0100 Subject: [PATCH 08/20] migrate font tokens --- .../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..07e76caa97 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$3", // @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..bcc4afa305 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$3", 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 = ({ ${Text}`]: { color: "$gray9", - fontSize: "$fontSizes$1", + fontSize: "$fontSizes$fontSize$3", 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..2fd1668783 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$3", 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..c9a5d90ffe 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$3", 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..ee7221475d 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$3", letterSpacing: "0.005em", }, label: { fontWeight: 500, - fontSize: "$1", + fontSize: "$fontSize$3", letterSpacing: "0.005em", }, tiny: { @@ -29,13 +29,13 @@ export const Text = styled("div", { }, title: { fontWeight: 700, - fontSize: "$1", + fontSize: "$fontSize$3", letterSpacing: "0.01em", }, mono: { fontFamily: "$mono", fontWeight: 400, - fontSize: "$1", + fontSize: "$fontSize$3", 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", }} > From ede1ab58a5d3a0daeb75cd3bce67ff9356955786 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:09:31 +0100 Subject: [PATCH 09/20] also migrate legacy font sizes to the new convention $fontSize$x --- codemod/migrate-tokens.ts | 5 +++++ packages/design-system/src/stitches.config.ts | 1 + 2 files changed, 6 insertions(+) diff --git a/codemod/migrate-tokens.ts b/codemod/migrate-tokens.ts index 90197b8307..1c16d3a120 100644 --- a/codemod/migrate-tokens.ts +++ b/codemod/migrate-tokens.ts @@ -183,6 +183,11 @@ const fontSizeValues = new Map([ ["$2", "3"], ["$3", "4"], ["$4", "4"], + ["$5", "5"], + ["$6", "6"], + ["$7", "7"], + ["$8", "8"], + ["$9", "9"], ["14px", "4"], ]); diff --git a/packages/design-system/src/stitches.config.ts b/packages/design-system/src/stitches.config.ts index dbad7e4bfb..f38da778a0 100644 --- a/packages/design-system/src/stitches.config.ts +++ b/packages/design-system/src/stitches.config.ts @@ -260,6 +260,7 @@ const { 3: "12px", 4: "14px", // Legacy - don't use unless specified in Figma + 5: "19px", 6: "21px", 7: "27px", 8: "35px", From 9976367f337d5988caf61eef2e3e66223f31ba8d Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:12:41 +0100 Subject: [PATCH 10/20] move legacy font sizes as well --- .../features/style-panel/sections/spacing/spacing.tsx | 4 ++-- .../src/components/__DEPRECATED__/text.tsx | 10 +++++----- packages/design-system/src/components/avatar.tsx | 10 +++++----- packages/design-system/src/components/text.tsx | 4 ++-- packages/design-system/src/components/toggle-group.tsx | 2 +- 5 files changed, 15 insertions(+), 15 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 07e76caa97..3ff4a0bc4f 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 @@ -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", @@ -97,7 +97,7 @@ const styles = { text: { fontWeight: "bold", color: "$gray12", - fontSize: 8, + fontSize: "$fontSize$1", margin: "$spacing$3", }, paddingGrid: { diff --git a/packages/design-system/src/components/__DEPRECATED__/text.tsx b/packages/design-system/src/components/__DEPRECATED__/text.tsx index c9f773a27a..6641cf1122 100644 --- a/packages/design-system/src/components/__DEPRECATED__/text.tsx +++ b/packages/design-system/src/components/__DEPRECATED__/text.tsx @@ -24,25 +24,25 @@ export const __DEPRECATED__Text = styled("div", { 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", }, diff --git a/packages/design-system/src/components/avatar.tsx b/packages/design-system/src/components/avatar.tsx index 03947b24f0..2eb59a711f 100644 --- a/packages/design-system/src/components/avatar.tsx +++ b/packages/design-system/src/components/avatar.tsx @@ -201,23 +201,23 @@ const StyledAvatarFallback = styled(AvatarPrimitive.Fallback, { variants: { size: { "1": { - fontSize: "10px", + fontSize: "$fontSize$2", lineHeight: "15px", }, "2": { 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", }, }, }, diff --git a/packages/design-system/src/components/text.tsx b/packages/design-system/src/components/text.tsx index ee7221475d..caf5e19374 100644 --- a/packages/design-system/src/components/text.tsx +++ b/packages/design-system/src/components/text.tsx @@ -24,7 +24,7 @@ export const Text = styled("div", { }, tiny: { fontWeight: 400, - fontSize: 8, + fontSize: "$fontSize$1", letterSpacing: "0.01em", }, title: { @@ -40,7 +40,7 @@ export const Text = styled("div", { }, unit: { fontWeight: 500, - fontSize: 10, + fontSize: "$fontSize$2", textTransform: "uppercase", }, }, diff --git a/packages/design-system/src/components/toggle-group.tsx b/packages/design-system/src/components/toggle-group.tsx index a4ba1953a0..b8a0d7e7fe 100644 --- a/packages/design-system/src/components/toggle-group.tsx +++ b/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", From 76e02bd7fc2c2c0cc86f82fe40f50ddbd9b527e0 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:13:30 +0100 Subject: [PATCH 11/20] keep 4th font size for now legacy --- packages/design-system/src/stitches.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-system/src/stitches.config.ts b/packages/design-system/src/stitches.config.ts index f38da778a0..410b4e9702 100644 --- a/packages/design-system/src/stitches.config.ts +++ b/packages/design-system/src/stitches.config.ts @@ -258,8 +258,8 @@ const { 1: "8px", 2: "10px", 3: "12px", - 4: "14px", // Legacy - don't use unless specified in Figma + 4: "14px", 5: "19px", 6: "21px", 7: "27px", From 0328035c5e5f90ef144b26c71ebef4323d1029c2 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:33:49 +0100 Subject: [PATCH 12/20] line-height migration script --- codemod/migrate-tokens.ts | 13 +++++++++++++ packages/design-system/src/stitches.config.ts | 7 +++++++ 2 files changed, 20 insertions(+) diff --git a/codemod/migrate-tokens.ts b/codemod/migrate-tokens.ts index 1c16d3a120..6d394c3b9a 100644 --- a/codemod/migrate-tokens.ts +++ b/codemod/migrate-tokens.ts @@ -191,6 +191,13 @@ const fontSizeValues = new Map([ ["14px", "4"], ]); +const lineHeightProps = ["lineHeight"]; +const lineHeightValues = new Map([ + ["15px", "$3"], + ["16px", "$3"], + ["20px", "$4"], +]); + const updateProperty = ( line: string, props: Array, @@ -226,6 +233,12 @@ const update = async ({ filePath, buffer }) => { for (line of lines) { line = updateProperty(line, spaceProps, spaceValues, "spacing"); line = updateProperty(line, fontSizeProps, fontSizeValues, "fontSize"); + line = updateProperty( + line, + lineHeightProps, + lineHeightValues, + "lineHeight" + ); nextLines.push(line); } await fs.writeFile(filePath, nextLines.join("\n")); diff --git a/packages/design-system/src/stitches.config.ts b/packages/design-system/src/stitches.config.ts index 410b4e9702..252e268db5 100644 --- a/packages/design-system/src/stitches.config.ts +++ b/packages/design-system/src/stitches.config.ts @@ -266,6 +266,13 @@ const { 8: "35px", 9: "59px", }, + lineHeight: { + 1: "8px", + 2: "12px", + 3: "16px", + // Legacy - don't use unless specified in Figma + 4: "20px", + }, radii: { 1: "4px", 2: "6px", From 7ee3a3565f416110f4a83d1fbf86703e450946b8 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:35:11 +0100 Subject: [PATCH 13/20] fix migration script for lineHeight --- codemod/migrate-tokens.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/codemod/migrate-tokens.ts b/codemod/migrate-tokens.ts index 6d394c3b9a..fd1780f25b 100644 --- a/codemod/migrate-tokens.ts +++ b/codemod/migrate-tokens.ts @@ -193,9 +193,9 @@ const fontSizeValues = new Map([ const lineHeightProps = ["lineHeight"]; const lineHeightValues = new Map([ - ["15px", "$3"], - ["16px", "$3"], - ["20px", "$4"], + ["15px", "3"], + ["16px", "3"], + ["20px", "4"], ]); const updateProperty = ( From dfb7a5754abdf4e69eafe5e7193a3e5da329e80b Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:40:02 +0100 Subject: [PATCH 14/20] migrate legal line-heights --- packages/design-system/src/components/avatar.tsx | 2 +- packages/design-system/src/components/heading.tsx | 6 +++++- packages/design-system/src/components/text-area.tsx | 4 ++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/design-system/src/components/avatar.tsx b/packages/design-system/src/components/avatar.tsx index 2eb59a711f..a9e12d6f6d 100644 --- a/packages/design-system/src/components/avatar.tsx +++ b/packages/design-system/src/components/avatar.tsx @@ -202,7 +202,7 @@ const StyledAvatarFallback = styled(AvatarPrimitive.Fallback, { size: { "1": { fontSize: "$fontSize$2", - lineHeight: "15px", + lineHeight: "$lineHeight$3", }, "2": { fontSize: "$fontSize$4", diff --git a/packages/design-system/src/components/heading.tsx b/packages/design-system/src/components/heading.tsx index c02b93aa71..8e7b62a097 100644 --- a/packages/design-system/src/components/heading.tsx +++ b/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 = { - 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" } }, diff --git a/packages/design-system/src/components/text-area.tsx b/packages/design-system/src/components/text-area.tsx index 2fd1668783..cab8d8d4ab 100644 --- a/packages/design-system/src/components/text-area.tsx +++ b/packages/design-system/src/components/text-area.tsx @@ -48,13 +48,13 @@ export const TextArea = styled("textarea", { "1": { borderRadius: "$1", fontSize: "$fontSize$3", - lineHeight: "16px", + lineHeight: "$lineHeight$3", px: "$spacing$3", }, "2": { borderRadius: "$1", fontSize: "$fontSize$3", - lineHeight: "20px", + lineHeight: "$lineHeight$4", px: "$spacing$3", }, "3": { From 0f641654ca779c1445216b44a9e72e440a45efb6 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:49:01 +0100 Subject: [PATCH 15/20] borderRadius migration --- codemod/migrate-tokens.ts | 15 +++++++++++++++ packages/design-system/src/stitches.config.ts | 14 +++++++++----- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/codemod/migrate-tokens.ts b/codemod/migrate-tokens.ts index fd1780f25b..0e0b821693 100644 --- a/codemod/migrate-tokens.ts +++ b/codemod/migrate-tokens.ts @@ -198,6 +198,15 @@ const lineHeightValues = new Map([ ["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, @@ -239,6 +248,12 @@ const update = async ({ filePath, buffer }) => { lineHeightValues, "lineHeight" ); + line = updateProperty( + line, + borderRadiusProps, + borderRadiusValues, + "borderRadius" + ); nextLines.push(line); } await fs.writeFile(filePath, nextLines.join("\n")); diff --git a/packages/design-system/src/stitches.config.ts b/packages/design-system/src/stitches.config.ts index 252e268db5..21a33479f6 100644 --- a/packages/design-system/src/stitches.config.ts +++ b/packages/design-system/src/stitches.config.ts @@ -273,13 +273,17 @@ const { // Legacy - don't use unless specified in Figma 4: "20px", }, - radii: { - 1: "4px", - 2: "6px", - 3: "8px", - 4: "12px", + 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", From 2f493baa5c2c73d0a68fa0271e058125408fd834 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:51:17 +0100 Subject: [PATCH 16/20] replace $radii --- codemod/migrate-tokens.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/codemod/migrate-tokens.ts b/codemod/migrate-tokens.ts index 0e0b821693..bf9492ce71 100644 --- a/codemod/migrate-tokens.ts +++ b/codemod/migrate-tokens.ts @@ -205,6 +205,7 @@ const borderRadiusValues = new Map([ ["$3", "7"], ["$round", "round"], ["$pill", "pill"], + ["$radii", "borderRadius"], ]); const updateProperty = ( From 4da17d0b02cca4c8ad98668e8b89b40a8d1790fb Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:54:03 +0100 Subject: [PATCH 17/20] fix replacement of $radii --- codemod/migrate-tokens.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/codemod/migrate-tokens.ts b/codemod/migrate-tokens.ts index bf9492ce71..b1d5c1f4d8 100644 --- a/codemod/migrate-tokens.ts +++ b/codemod/migrate-tokens.ts @@ -205,7 +205,7 @@ const borderRadiusValues = new Map([ ["$3", "7"], ["$round", "round"], ["$pill", "pill"], - ["$radii", "borderRadius"], + ["$radii$1", "borderRadius"], ]); const updateProperty = ( From 8982daa4677e655cef1498826bdbc654b5691f43 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 15:55:24 +0100 Subject: [PATCH 18/20] radii migration doesn't work, will do manually --- codemod/migrate-tokens.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/codemod/migrate-tokens.ts b/codemod/migrate-tokens.ts index b1d5c1f4d8..0e0b821693 100644 --- a/codemod/migrate-tokens.ts +++ b/codemod/migrate-tokens.ts @@ -205,7 +205,6 @@ const borderRadiusValues = new Map([ ["$3", "7"], ["$round", "round"], ["$pill", "pill"], - ["$radii$1", "borderRadius"], ]); const updateProperty = ( From af527e90f2c5b480cc69e0ed52c97f9a99e9181a Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 16:15:21 +0100 Subject: [PATCH 19/20] migrate border-radius --- .../sections/layout/shared/flex-grid.tsx | 2 +- .../style-panel/sections/spacing/spacing.tsx | 6 +++--- .../features/style-panel/shared/property-name.tsx | 4 ++-- .../app/designer/features/topbar/sync-status.tsx | 2 +- .../canvas-tools/text-toolbar/text-toolbar.tsx | 2 +- .../shared/image-manager/image-thumbnail.tsx | 2 +- packages/design-system/src/components/alert.tsx | 2 +- packages/design-system/src/components/avatar.tsx | 4 ++-- packages/design-system/src/components/badge.tsx | 2 +- packages/design-system/src/components/banner.tsx | 4 ++-- packages/design-system/src/components/button.tsx | 6 +++--- packages/design-system/src/components/card.tsx | 4 ++-- packages/design-system/src/components/checkbox.tsx | 4 ++-- packages/design-system/src/components/combobox.tsx | 2 +- .../design-system/src/components/context-menu.tsx | 2 +- .../src/components/icon-button-with-menu.tsx | 4 ++-- .../design-system/src/components/icon-button.tsx | 6 +++--- packages/design-system/src/components/kbd.tsx | 4 ++-- packages/design-system/src/components/list.tsx | 2 +- packages/design-system/src/components/panel.tsx | 2 +- .../design-system/src/components/progress-bar.tsx | 4 ++-- .../design-system/src/components/radio-card.tsx | 6 +++--- .../design-system/src/components/radio-grid.tsx | 2 +- packages/design-system/src/components/select.tsx | 6 +++--- .../design-system/src/components/simple-toggle.tsx | 4 ++-- packages/design-system/src/components/skeleton.tsx | 14 +++++++------- packages/design-system/src/components/slider.tsx | 6 +++--- packages/design-system/src/components/switch.tsx | 4 ++-- .../design-system/src/components/text-area.tsx | 6 +++--- .../design-system/src/components/text-field.tsx | 2 +- packages/design-system/src/components/tooltip.tsx | 2 +- .../src/components/tree/tree-node.tsx | 2 +- .../src/components/verified-badge.tsx | 2 +- 33 files changed, 63 insertions(+), 63 deletions(-) diff --git a/apps/designer/app/designer/features/style-panel/sections/layout/shared/flex-grid.tsx b/apps/designer/app/designer/features/style-panel/sections/layout/shared/flex-grid.tsx index 2372ca75fc..e1e417d771 100644 --- a/apps/designer/app/designer/features/style-panel/sections/layout/shared/flex-grid.tsx +++ b/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)", }} > ))} 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 3ff4a0bc4f..cb0328b750 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 @@ -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,7 +91,7 @@ const styles = { gridTemplateRows: "$spacing$11 minmax($spacing$9, 1fr) $spacing$11", height: 130, backgroundColor: "$gray6", - borderRadius: "$1", + borderRadius: "$borderRadius$4", px: 2, }, text: { @@ -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", }, }; diff --git a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx index 65e91276e4..d667541bad 100644 --- a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx +++ b/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", diff --git a/apps/designer/app/designer/features/topbar/sync-status.tsx b/apps/designer/app/designer/features/topbar/sync-status.tsx index 19bedba285..25b7ccde0f 100644 --- a/apps/designer/app/designer/features/topbar/sync-status.tsx +++ b/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({ diff --git a/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx b/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx index 18690c7406..e18848f437 100644 --- a/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx +++ b/apps/designer/app/designer/features/workspace/canvas-tools/text-toolbar/text-toolbar.tsx @@ -100,7 +100,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, diff --git a/apps/designer/app/designer/shared/image-manager/image-thumbnail.tsx b/apps/designer/app/designer/shared/image-manager/image-thumbnail.tsx index 8c46ab8958..8c07bc27db 100644 --- a/apps/designer/app/designer/shared/image-manager/image-thumbnail.tsx +++ b/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", diff --git a/packages/design-system/src/components/alert.tsx b/packages/design-system/src/components/alert.tsx index 65ab3dbc04..50bf4c0471 100644 --- a/packages/design-system/src/components/alert.tsx +++ b/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: { diff --git a/packages/design-system/src/components/avatar.tsx b/packages/design-system/src/components/avatar.tsx index a9e12d6f6d..3c069be182 100644 --- a/packages/design-system/src/components/avatar.tsx +++ b/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%", @@ -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", }} diff --git a/packages/design-system/src/components/badge.tsx b/packages/design-system/src/components/badge.tsx index c72cde3f84..f9d5bb0136 100644 --- a/packages/design-system/src/components/badge.tsx +++ b/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", diff --git a/packages/design-system/src/components/banner.tsx b/packages/design-system/src/components/banner.tsx index 24f55a2611..e80f4e41d2 100644 --- a/packages/design-system/src/components/banner.tsx +++ b/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", }, }, }, diff --git a/packages/design-system/src/components/button.tsx b/packages/design-system/src/components/button.tsx index ed69951acb..32171f8d8c 100644 --- a/packages/design-system/src/components/button.tsx +++ b/packages/design-system/src/components/button.tsx @@ -40,19 +40,19 @@ export const Button = styled("button", { variants: { size: { "1": { - borderRadius: "$1", + borderRadius: "$borderRadius$4", height: "$spacing$11", px: "$spacing$9", fontSize: "$fontSize$3", }, "2": { - borderRadius: "$2", + borderRadius: "$borderRadius$6", height: 28, // @todo waiting for the sizing scale px: "$spacing$9", fontSize: "$fontSize$4", }, "3": { - borderRadius: "$2", + borderRadius: "$borderRadius$6", height: "$spacing$17", px: "$spacing$10", fontSize: "$fontSize$4", diff --git a/packages/design-system/src/components/card.tsx b/packages/design-system/src/components/card.tsx index 33c969abac..5dec4e8410 100644 --- a/packages/design-system/src/components/card.tsx +++ b/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", }, diff --git a/packages/design-system/src/components/checkbox.tsx b/packages/design-system/src/components/checkbox.tsx index 880e9369ac..b45d2fdae9 100644 --- a/packages/design-system/src/components/checkbox.tsx +++ b/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", }, }, }, diff --git a/packages/design-system/src/components/combobox.tsx b/packages/design-system/src/components/combobox.tsx index 184f3a1359..2c72c7b4e8 100644 --- a/packages/design-system/src/components/combobox.tsx +++ b/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< diff --git a/packages/design-system/src/components/context-menu.tsx b/packages/design-system/src/components/context-menu.tsx index 8bcfdbca05..c7fba995a4 100644 --- a/packages/design-system/src/components/context-menu.tsx +++ b/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", }} /> 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 8252068e9c..20aa86a166 100644 --- a/packages/design-system/src/components/icon-button-with-menu.tsx +++ b/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", @@ -20,7 +20,7 @@ const itemStyles = { fontSize: "$fontSize$3", lineHeight: 1, color: "$colors$slate12", - borderRadius: "$radii$1", + borderRadius: "$borderRadius$4", display: "flex", alignItems: "center", height: "$spacing$11", diff --git a/packages/design-system/src/components/icon-button.tsx b/packages/design-system/src/components/icon-button.tsx index 52e9150468..f2e61c0934 100644 --- a/packages/design-system/src/components/icon-button.tsx +++ b/packages/design-system/src/components/icon-button.tsx @@ -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", }, diff --git a/packages/design-system/src/components/kbd.tsx b/packages/design-system/src/components/kbd.tsx index 80b4f24fe5..c591d75993 100644 --- a/packages/design-system/src/components/kbd.tsx +++ b/packages/design-system/src/components/kbd.tsx @@ -26,7 +26,7 @@ export const Kbd = styled("kbd", { variants: { size: { "1": { - borderRadius: "$1", + borderRadius: "$borderRadius$4", px: "0.3em", height: "$spacing$9", minWidth: "1.6em", @@ -34,7 +34,7 @@ export const Kbd = styled("kbd", { lineHeight: "$spaces$3", }, "2": { - borderRadius: "$2", + borderRadius: "$borderRadius$6", px: "0.5em", height: "$spacing$11", minWidth: "2em", diff --git a/packages/design-system/src/components/list.tsx b/packages/design-system/src/components/list.tsx index 5ebda09a86..38cf0e7796 100644 --- a/packages/design-system/src/components/list.tsx +++ b/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: { diff --git a/packages/design-system/src/components/panel.tsx b/packages/design-system/src/components/panel.tsx index 348cb789bc..1991542db7 100644 --- a/packages/design-system/src/components/panel.tsx +++ b/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", }); diff --git a/packages/design-system/src/components/progress-bar.tsx b/packages/design-system/src/components/progress-bar.tsx index 2b147e44d2..8a1224ceee 100644 --- a/packages/design-system/src/components/progress-bar.tsx +++ b/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, diff --git a/packages/design-system/src/components/radio-card.tsx b/packages/design-system/src/components/radio-card.tsx index 1624457f66..8c1cf56f62 100644 --- a/packages/design-system/src/components/radio-card.tsx +++ b/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": { diff --git a/packages/design-system/src/components/radio-grid.tsx b/packages/design-system/src/components/radio-grid.tsx index 6533e438dd..b3a4ce4ec2 100644 --- a/packages/design-system/src/components/radio-grid.tsx +++ b/packages/design-system/src/components/radio-grid.tsx @@ -18,7 +18,7 @@ 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", diff --git a/packages/design-system/src/components/select.tsx b/packages/design-system/src/components/select.tsx index cf5a334c3e..5aa1ec0132 100644 --- a/packages/design-system/src/components/select.tsx +++ b/packages/design-system/src/components/select.tsx @@ -13,7 +13,7 @@ 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", @@ -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", }); @@ -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", diff --git a/packages/design-system/src/components/simple-toggle.tsx b/packages/design-system/src/components/simple-toggle.tsx index 86e617c583..da05dc8cd9 100644 --- a/packages/design-system/src/components/simple-toggle.tsx +++ b/packages/design-system/src/components/simple-toggle.tsx @@ -56,10 +56,10 @@ export const SimpleToggle = styled(TogglePrimitive.Root, { variants: { shape: { circle: { - borderRadius: "$round", + borderRadius: "$borderRadius$round", }, square: { - borderRadius: "$1", + borderRadius: "$borderRadius$4", }, }, }, diff --git a/packages/design-system/src/components/skeleton.tsx b/packages/design-system/src/components/skeleton.tsx index 4b3e425249..e32b69ddd2 100644 --- a/packages/design-system/src/components/skeleton.tsx +++ b/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", }, diff --git a/packages/design-system/src/components/slider.tsx b/packages/design-system/src/components/slider.tsx index ed65c23a70..a38591ec9a 100644 --- a/packages/design-system/src/components/slider.tsx +++ b/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)", }, diff --git a/packages/design-system/src/components/switch.tsx b/packages/design-system/src/components/switch.tsx index 1f8231b920..3a0ad4f1ab 100644 --- a/packages/design-system/src/components/switch.tsx +++ b/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", diff --git a/packages/design-system/src/components/text-area.tsx b/packages/design-system/src/components/text-area.tsx index cab8d8d4ab..817601156a 100644 --- a/packages/design-system/src/components/text-area.tsx +++ b/packages/design-system/src/components/text-area.tsx @@ -46,19 +46,19 @@ export const TextArea = styled("textarea", { variants: { size: { "1": { - borderRadius: "$1", + borderRadius: "$borderRadius$4", fontSize: "$fontSize$3", lineHeight: "$lineHeight$3", px: "$spacing$3", }, "2": { - borderRadius: "$1", + borderRadius: "$borderRadius$4", fontSize: "$fontSize$3", lineHeight: "$lineHeight$4", px: "$spacing$3", }, "3": { - borderRadius: "$2", + borderRadius: "$borderRadius$6", 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 c9a5d90ffe..1af8181ce4 100644 --- a/packages/design-system/src/components/text-field.tsx +++ b/packages/design-system/src/components/text-field.tsx @@ -136,7 +136,7 @@ const TextFieldBase = styled("div", { fontVariantNumeric: "tabular-nums", gap: "$spacing$3", px: "$spacing$5", - borderRadius: "$1", + borderRadius: "$borderRadius$4", fontFamily: "$sans", fontSize: "$fontSize$3", height: 28, // @todo waiting for the sizing scale diff --git a/packages/design-system/src/components/tooltip.tsx b/packages/design-system/src/components/tooltip.tsx index 5db7ee8713..50ad81338d 100644 --- a/packages/design-system/src/components/tooltip.tsx +++ b/packages/design-system/src/components/tooltip.tsx @@ -18,7 +18,7 @@ type TooltipProps = ComponentProps & const Content = styled(TooltipPrimitive.Content, { backgroundColor: "$hiContrast", color: "$loContrast", - borderRadius: "$1", + borderRadius: "$borderRadius$4", padding: "$spacing$3 $spacing$5", zIndex: "$1", position: "relative", diff --git a/packages/design-system/src/components/tree/tree-node.tsx b/packages/design-system/src/components/tree/tree-node.tsx index de597fd683..66b6fafed1 100644 --- a/packages/design-system/src/components/tree/tree-node.tsx +++ b/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", }; diff --git a/packages/design-system/src/components/verified-badge.tsx b/packages/design-system/src/components/verified-badge.tsx index c9f067a355..e7bb4fe841 100644 --- a/packages/design-system/src/components/verified-badge.tsx +++ b/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", From d000697cee5cc27333c5dba00e58c3a6e1e1253b Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Thu, 10 Nov 2022 16:18:17 +0100 Subject: [PATCH 20/20] fix $fontSize$fontSize --- packages/design-system/src/components/tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-system/src/components/tabs.tsx b/packages/design-system/src/components/tabs.tsx index afa72a863e..1f961c0161 100644 --- a/packages/design-system/src/components/tabs.tsx +++ b/packages/design-system/src/components/tabs.tsx @@ -29,7 +29,7 @@ export const TabsTrigger = styled(TabsPrimitive.Trigger, { }, [`& > ${Text}`]: { color: "$gray9", - fontSize: "$fontSizes$fontSize$3", + fontSize: "$fontSize$3", fontWeight: "500", }, "@hover": {