refactor: Badge variant outlined → outline

daangn · Jan 16, 2025 · dfd4466 · dfd4466
1 parent 1aff2ed
commit dfd4466
Show file tree

Hide file tree

Showing 14 changed files with 77 additions and 77 deletions.
diff --git a/docs/components/example/badge-outline.tsx b/docs/components/example/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "seed-design/ui/badge";
+
+export default function BadgeOutline() {
+  return <Badge variant="outline">라벨</Badge>;
+}
diff --git a/docs/components/example/badge-outlined.tsx b/docs/components/example/badge-outlined.tsx
diff --git a/docs/components/example/index.json b/docs/components/example/index.json
@@ -37,7 +37,7 @@
   "badge-large": "import { Badge } from \"seed-design/ui/badge\";\n\nexport default function BadgeLarge() {\n  return <Badge size=\"large\">라벨</Badge>;\n}",
   "badge-medium": "import { Badge } from \"seed-design/ui/badge\";\n\nexport default function BadgeMedium() {\n  return <Badge size=\"medium\">라벨</Badge>;\n}",
   "badge-neutral": "import { Badge } from \"seed-design/ui/badge\";\n\nexport default function BadgeNeutral() {\n  return <Badge tone=\"neutral\">라벨</Badge>;\n}",
-  "badge-outlined": "import { Badge } from \"seed-design/ui/badge\";\n\nexport default function BadgeOutlined() {\n  return <Badge variant=\"outlined\">라벨</Badge>;\n}",
+  "badge-outline": "import { Badge } from \"seed-design/ui/badge\";\n\nexport default function BadgeOutline() {\n  return <Badge variant=\"outline\">라벨</Badge>;\n}",
   "badge-pill": "import { Badge } from \"seed-design/ui/badge\";\n\nexport default function BadgeRectangle() {\n  return <Badge shape=\"pill\">라벨</Badge>;\n}",
   "badge-positive": "import { Badge } from \"seed-design/ui/badge\";\n\nexport default function BadgePositive() {\n  return <Badge tone=\"positive\">라벨</Badge>;\n}",
   "badge-preview": "import { Badge } from \"seed-design/ui/badge\";\n\nexport default function BadgePreview() {\n  return <Badge>라벨</Badge>;\n}",

diff --git a/docs/content/docs/design/components/badge.mdx b/docs/content/docs/design/components/badge.mdx
@@ -12,7 +12,7 @@ description: TBD
 | 속성    | 값                                            | 기본값  |
 | ------- | --------------------------------------------- | ------- |
 | size    | medium, large                                 | medium  |
-| variant | weak, solid, outlined                         | weak    |
+| variant | weak, solid, outline                          | weak    |
 | tone    | neutral, brand, informative, positive, danger | neutral |
 
 ## 링크

diff --git a/docs/content/docs/react/components/badge.mdx b/docs/content/docs/react/components/badge.mdx
@@ -30,9 +30,9 @@ title: Badge
 
 <ComponentExample name="badge-solid" />
 
-### Outlined
+### Outline
 
-<ComponentExample name="badge-outlined" />
+<ComponentExample name="badge-outline" />
 
 ### Neutral
 
@@ -56,4 +56,4 @@ title: Badge
 
 ### asChild
 
-<ComponentExample name="badge-as-child" />
+<ComponentExample name="badge-as-child" />
diff --git a/docs/public/rootage/components/badge.json b/docs/public/rootage/components/badge.json
@@ -66,7 +66,7 @@
         }
       }
     },
-    "variant=outlined": {
+    "variant=outline": {
       "enabled": {
         "root": {
           "borderWidth": "1px"
@@ -96,7 +96,7 @@
         }
       }
     },
-    "tone=neutral, variant=outlined": {
+    "tone=neutral, variant=outline": {
       "enabled": {
         "root": {
           "strokeColor": "$color.stroke.neutral"
@@ -126,7 +126,7 @@
         }
       }
     },
-    "tone=brand, variant=outlined": {
+    "tone=brand, variant=outline": {
       "enabled": {
         "root": {
           "strokeColor": "$color.stroke.brand"
@@ -156,7 +156,7 @@
         }
       }
     },
-    "tone=informative, variant=outlined": {
+    "tone=informative, variant=outline": {
       "enabled": {
         "root": {
           "strokeColor": "$color.stroke.informative"
@@ -186,7 +186,7 @@
         }
       }
     },
-    "tone=positive, variant=outlined": {
+    "tone=positive, variant=outline": {
       "enabled": {
         "root": {
           "strokeColor": "$color.stroke.positive"
@@ -216,7 +216,7 @@
         }
       }
     },
-    "tone=danger, variant=outlined": {
+    "tone=danger, variant=outline": {
       "enabled": {
         "root": {
           "strokeColor": "$color.stroke.danger"

diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json
@@ -10477,7 +10477,7 @@
         },
         {
           "key": {
-            "variant": "outlined"
+            "variant": "outline"
           },
           "state": [
             {
@@ -10614,7 +10614,7 @@
         {
           "key": {
             "tone": "neutral",
-            "variant": "outlined"
+            "variant": "outline"
           },
           "state": [
             {
@@ -10755,7 +10755,7 @@
         {
           "key": {
             "tone": "brand",
-            "variant": "outlined"
+            "variant": "outline"
           },
           "state": [
             {
@@ -10896,7 +10896,7 @@
         {
           "key": {
             "tone": "informative",
-            "variant": "outlined"
+            "variant": "outline"
           },
           "state": [
             {
@@ -11037,7 +11037,7 @@
         {
           "key": {
             "tone": "positive",
-            "variant": "outlined"
+            "variant": "outline"
           },
           "state": [
             {
@@ -11178,7 +11178,7 @@
         {
           "key": {
             "tone": "danger",
-            "variant": "outlined"
+            "variant": "outline"
           },
           "state": [
             {

diff --git a/packages/qvism-preset/src/recipes/badge.ts b/packages/qvism-preset/src/recipes/badge.ts
@@ -62,13 +62,13 @@ const badge = defineRecipe({
           fontWeight: vars.variantSolid.enabled.label.fontWeight,
         },
       },
-      outlined: {
+      outline: {
         root: {
           borderStyle: "solid",
-          borderWidth: vars.variantOutlined.enabled.root.borderWidth,
+          borderWidth: vars.variantOutline.enabled.root.borderWidth,
         },
         label: {
-          fontWeight: vars.variantOutlined.enabled.label.fontWeight,
+          fontWeight: vars.variantOutline.enabled.label.fontWeight,
         },
       },
     },
@@ -125,13 +125,13 @@ const badge = defineRecipe({
     },
     {
       tone: "neutral",
-      variant: "outlined",
+      variant: "outline",
       css: {
         root: {
-          borderColor: vars.toneNeutralVariantOutlined.enabled.root.strokeColor,
+          borderColor: vars.toneNeutralVariantOutline.enabled.root.strokeColor,
         },
         label: {
-          color: vars.toneNeutralVariantOutlined.enabled.label.color,
+          color: vars.toneNeutralVariantOutline.enabled.label.color,
         },
       },
     },
@@ -161,13 +161,13 @@ const badge = defineRecipe({
     },
     {
       tone: "brand",
-      variant: "outlined",
+      variant: "outline",
       css: {
         root: {
-          borderColor: vars.toneBrandVariantOutlined.enabled.root.strokeColor,
+          borderColor: vars.toneBrandVariantOutline.enabled.root.strokeColor,
         },
         label: {
-          color: vars.toneBrandVariantOutlined.enabled.label.color,
+          color: vars.toneBrandVariantOutline.enabled.label.color,
         },
       },
     },
@@ -197,13 +197,13 @@ const badge = defineRecipe({
     },
     {
       tone: "informative",
-      variant: "outlined",
+      variant: "outline",
       css: {
         root: {
-          borderColor: vars.toneInformativeVariantOutlined.enabled.root.strokeColor,
+          borderColor: vars.toneInformativeVariantOutline.enabled.root.strokeColor,
         },
         label: {
-          color: vars.toneInformativeVariantOutlined.enabled.label.color,
+          color: vars.toneInformativeVariantOutline.enabled.label.color,
         },
       },
     },
@@ -233,13 +233,13 @@ const badge = defineRecipe({
     },
     {
       tone: "positive",
-      variant: "outlined",
+      variant: "outline",
       css: {
         root: {
-          borderColor: vars.tonePositiveVariantOutlined.enabled.root.strokeColor,
+          borderColor: vars.tonePositiveVariantOutline.enabled.root.strokeColor,
         },
         label: {
-          color: vars.tonePositiveVariantOutlined.enabled.label.color,
+          color: vars.tonePositiveVariantOutline.enabled.label.color,
         },
       },
     },
@@ -269,13 +269,13 @@ const badge = defineRecipe({
     },
     {
       tone: "danger",
-      variant: "outlined",
+      variant: "outline",
       css: {
         root: {
-          borderColor: vars.toneDangerVariantOutlined.enabled.root.strokeColor,
+          borderColor: vars.toneDangerVariantOutline.enabled.root.strokeColor,
         },
         label: {
-          color: vars.toneDangerVariantOutlined.enabled.label.color,
+          color: vars.toneDangerVariantOutline.enabled.label.color,
         },
       },
     },

diff --git a/packages/recipe/lib/badge.d.ts b/packages/recipe/lib/badge.d.ts
@@ -10,7 +10,7 @@ declare interface BadgeVariant {
 /**
   * @default solid
   */
-  variant: "weak" | "solid" | "outlined";
+  variant: "weak" | "solid" | "outline";
 /**
   * @default neutral
   */

diff --git a/packages/recipe/lib/badge.mjs b/packages/recipe/lib/badge.mjs
@@ -39,7 +39,7 @@ const compoundVariants = [
   },
   {
     "tone": "neutral",
-    "variant": "outlined"
+    "variant": "outline"
   },
   {
     "tone": "brand",
@@ -51,7 +51,7 @@ const compoundVariants = [
   },
   {
     "tone": "brand",
-    "variant": "outlined"
+    "variant": "outline"
   },
   {
     "tone": "informative",
@@ -63,7 +63,7 @@ const compoundVariants = [
   },
   {
     "tone": "informative",
-    "variant": "outlined"
+    "variant": "outline"
   },
   {
     "tone": "positive",
@@ -75,7 +75,7 @@ const compoundVariants = [
   },
   {
     "tone": "positive",
-    "variant": "outlined"
+    "variant": "outline"
   },
   {
     "tone": "danger",
@@ -87,7 +87,7 @@ const compoundVariants = [
   },
   {
     "tone": "danger",
-    "variant": "outlined"
+    "variant": "outline"
   }
 ];
 
@@ -103,7 +103,7 @@ export const badgeVariantMap = {
   "variant": [
     "weak",
     "solid",
-    "outlined"
+    "outline"
   ],
   "tone": [
     "neutral",

diff --git a/packages/rootage/components/badge.yaml b/packages/rootage/components/badge.yaml
@@ -42,7 +42,7 @@ data:
     enabled:
       label:
         fontWeight: $font-weight.bold
-  variant=outlined:
+  variant=outline:
     enabled:
       root:
         borderWidth: 1px
@@ -60,7 +60,7 @@ data:
         color: $color.bg.neutral-inverted
       label:
         color: $color.fg.neutral-inverted
-  tone=neutral, variant=outlined:
+  tone=neutral, variant=outline:
     enabled:
       root:
         strokeColor: $color.stroke.neutral
@@ -78,7 +78,7 @@ data:
         color: $color.bg.brand-solid
       label:
         color: $color.palette.static-white
-  tone=brand, variant=outlined:
+  tone=brand, variant=outline:
     enabled:
       root:
         strokeColor: $color.stroke.brand
@@ -96,7 +96,7 @@ data:
         color: $color.bg.informative-solid
       label:
         color: $color.palette.static-white
-  tone=informative, variant=outlined:
+  tone=informative, variant=outline:
     enabled:
       root:
         strokeColor: $color.stroke.informative
@@ -114,7 +114,7 @@ data:
         color: $color.bg.positive-solid
       label:
         color: $color.palette.static-white
-  tone=positive, variant=outlined:
+  tone=positive, variant=outline:
     enabled:
       root:
         strokeColor: $color.stroke.positive
@@ -132,7 +132,7 @@ data:
         color: $color.bg.danger-solid
       label:
         color: $color.palette.static-white
-  tone=danger, variant=outlined:
+  tone=danger, variant=outline:
     enabled:
       root:
         strokeColor: $color.stroke.danger