refactor: borderRadius 8 유틸 스타일 분리

[#2]
boostcampwm2023 · Dec 4, 2023 · 68d5be9 · 68d5be9
1 parent 50aeb0b
commit 68d5be9
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/packages/frontend/src/components/editor/Editor.css.ts b/packages/frontend/src/components/editor/Editor.css.ts
@@ -4,6 +4,7 @@ import color from "../../design-system/tokens/color";
 import typography from "../../design-system/tokens/typography";
 import {
   border,
+  borderRadius,
   flexAlignCenter,
   flexColumn,
   flexJustifyCenter,
@@ -61,8 +62,8 @@ export const notice = style([
   widthFull,
   typography.$semantic.caption2Regular,
   border.all,
+  borderRadius,
   {
-    borderRadius: 8,
     marginTop: 14,
     gap: 5,
     padding: 14,

diff --git a/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts
@@ -4,12 +4,11 @@ import color from "../../../design-system/tokens/color";
 import typography from "../../../design-system/tokens/typography";
 import {
   border,
+  borderRadius,
   flexAlignCenter,
   flexCenter,
 } from "../../../design-system/tokens/utils.css";
 
-const BORDER_RADIUS = 8;
-
 export const container = style({
   width: 336,
 });
@@ -42,11 +41,12 @@ export const linkContainer = style([
 
 export const linkInput = style([
   border.all,
+  borderRadius,
   typography.$semantic.body2Regular,
   {
     flex: "1 0",
-    borderTopLeftRadius: BORDER_RADIUS,
-    borderBottomLeftRadius: BORDER_RADIUS,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
     padding: "9px 13px",
     color: "inherit",
     backgroundColor: color.$semantic.bgDefault,
@@ -56,12 +56,13 @@ export const linkInput = style([
 
 export const linkCopyButton = style([
   border.all,
+  borderRadius,
   typography.$semantic.body2Regular,
   {
     position: "relative",
     borderLeft: "none",
-    borderTopRightRadius: BORDER_RADIUS,
-    borderBottomRightRadius: BORDER_RADIUS,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
     padding: "9px 19px",
     color: "inherit",
     backgroundColor: color.$semantic.bgAlt,

diff --git a/packages/frontend/src/design-system/components/common/Button/Button.css.ts b/packages/frontend/src/design-system/components/common/Button/Button.css.ts
@@ -2,13 +2,14 @@ import { style, styleVariants } from "@vanilla-extract/css";
 
 import color from "../../../tokens/color";
 import typography from "../../../tokens/typography";
+import { borderRadius } from "../../../tokens/utils.css";
 
 export const buttonBase = style([
   typography.$semantic.title4Regular,
+  borderRadius,
   {
     height: 42,
     border: "1px solid transparent",
-    borderRadius: 8,
     padding: "8px 13px",
 
     ":disabled": {

diff --git a/packages/frontend/src/design-system/components/common/Modal/Modal.css.ts b/packages/frontend/src/design-system/components/common/Modal/Modal.css.ts
@@ -2,6 +2,7 @@ import { style } from "@vanilla-extract/css";
 
 import color from "../../../tokens/color";
 import {
+  borderRadius,
   boxShadow,
   flexAlignCenter,
   flexCenter,
@@ -26,9 +27,9 @@ export const container = style([
   boxShadow,
   flexColumn,
   flexAlignCenter,
+  borderRadius,
   {
     width: 427,
-    borderRadius: 8,
     padding: 27,
     backgroundColor: color.$semantic.bgDefault,
   },

diff --git a/packages/frontend/src/design-system/tokens/utils.css.ts b/packages/frontend/src/design-system/tokens/utils.css.ts
@@ -71,3 +71,7 @@ export const border = {
     border: `1px solid ${color.$semantic.border}`,
   }),
 };
+
+export const borderRadius = style({
+  borderRadius: 8,
+});