feat: update skeleton variants

malangcat · malangcat · commit 485d73ac426e · 2025-01-05T04:57:53.000+09:00
diff --git a/docs/components/example/index.json b/docs/components/example/index.json
@@ -181,10 +181,8 @@
   "segmented-control-preview": "import { SegmentedControl, Segment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlPreview() {\n  return (\n    <SegmentedControl defaultValue=\"Hot\">\n      <Segment value=\"Hot\">Hot</Segment>\n      <Segment value=\"New\">New</Segment>\n    </SegmentedControl>\n  );\n}",
   "select-box-check-preview": "import { SelectBoxCheck, SelectBoxCheckGroup } from \"seed-design/ui/select-box\";\n\nexport default function SelectBoxCheckPreview() {\n  return (\n    <SelectBoxCheckGroup>\n      <SelectBoxCheck label=\"Culpa\" defaultChecked />\n      <SelectBoxCheck\n        label=\"Voluptate\"\n        description=\"Elit cupidatat dolore fugiat enim veniam culpa.\"\n      />\n      <SelectBoxCheck label=\"Eiusmod\" />\n    </SelectBoxCheckGroup>\n  );\n}",
   "select-box-radio-preview": "import { SelectBoxRadioGroup, SelectBoxRadio } from \"seed-design/ui/select-box\";\n\nexport default function SelectBoxRadioPreview() {\n  return (\n    <SelectBoxRadioGroup defaultValue=\"apple\" aria-label=\"과일\">\n      <SelectBoxRadio value=\"apple\" label=\"Culpa\" />\n      <SelectBoxRadio\n        value=\"voluptate\"\n        label=\"Voluptate\"\n        description=\"Elit cupidatat dolore fugiat enim veniam culpa.\"\n      />\n      <SelectBoxRadio value=\"eiusmod\" label=\"Eiusmod\" />\n    </SelectBoxRadioGroup>\n  );\n}",
-  "skeleton-circular": "import { Skeleton } from \"seed-design/ui/skeleton\";\n\nexport default function SkeletonCircle() {\n  return <Skeleton shape=\"circular\" width=\"s12\" height=\"s12\" />;\n}",
-  "skeleton-preview": "import { Flex } from \"seed-design/ui/layout\";\nimport { Skeleton } from \"seed-design/ui/skeleton\";\n\nexport default function SkeletonPreview() {\n  return (\n    <Flex gap=\"s4\" alignItems=\"center\">\n      <Skeleton shape=\"circular\" width=\"s12\" height=\"s12\" />\n      <Flex flexDirection=\"column\" gap=\"s2\">\n        <Skeleton shape=\"rounded\" height=\"s4\" width=\"250px\" />\n        <Skeleton shape=\"rounded\" height=\"s4\" width=\"250px\" />\n      </Flex>\n    </Flex>\n  );\n}",
-  "skeleton-rectangular": "import { Skeleton } from \"seed-design/ui/skeleton\";\n\nexport default function SkeletonRectangular() {\n  return <Skeleton shape=\"rectangular\" width=\"s12\" height=\"s12\" />;\n}",
-  "skeleton-rounded": "import { Skeleton } from \"seed-design/ui/skeleton\";\n\nexport default function SkeletonRounded() {\n  return <Skeleton shape=\"rounded\" width=\"s12\" height=\"s12\" />;\n}",
+  "skeleton-preview": "import { Flex } from \"seed-design/ui/layout\";\nimport { Skeleton } from \"seed-design/ui/skeleton\";\n\nexport default function SkeletonPreview() {\n  return (\n    <Flex gap=\"s4\" alignItems=\"center\">\n      <Skeleton radius=\"full\" width=\"s12\" height=\"s12\" />\n      <Flex flexDirection=\"column\" gap=\"s2\">\n        <Skeleton radius=\"8\" height=\"s4\" width=\"250px\" />\n        <Skeleton radius=\"8\" height=\"s4\" width=\"250px\" />\n      </Flex>\n    </Flex>\n  );\n}",
+  "skeleton-radius": "import { Skeleton } from \"seed-design/ui/skeleton\";\nimport { Flex } from \"seed-design/ui/layout\";\n\nexport default function SkeletonRadius() {\n  return (\n    <Flex gap=\"s4\" alignItems=\"center\">\n      <Skeleton radius=\"0\" width=\"s12\" height=\"s12\" />\n      <Skeleton radius=\"8\" width=\"s12\" height=\"s12\" />\n      <Skeleton radius=\"16\" width=\"s12\" height=\"s12\" />\n      <Skeleton radius=\"full\" width=\"s12\" height=\"s12\" />\n    </Flex>\n  );\n}",
   "switch-disabled": "import { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchDisabled() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n      <Switch disabled />\n      <Switch checked disabled />\n    </div>\n  );\n}",
   "switch-medium": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchMedium() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return <Switch size=\"medium\" checked={isChecked} onCheckedChange={setIsChecked} />;\n}",
   "switch-preview": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchPreview() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return <Switch checked={isChecked} onCheckedChange={setIsChecked} />;\n}",
diff --git a/docs/components/example/skeleton-circular.tsx b/docs/components/example/skeleton-circular.tsx
diff --git a/docs/components/example/skeleton-preview.tsx b/docs/components/example/skeleton-preview.tsx
@@ -4,10 +4,10 @@ import { Skeleton } from "seed-design/ui/skeleton";
 export default function SkeletonPreview() {
   return (
     <Flex gap="s4" alignItems="center">
-      <Skeleton shape="circular" width="s12" height="s12" />
+      <Skeleton radius="full" width="s12" height="s12" />
       <Flex flexDirection="column" gap="s2">
-        <Skeleton shape="rounded" height="s4" width="250px" />
-        <Skeleton shape="rounded" height="s4" width="250px" />
+        <Skeleton radius="8" height="s4" width="250px" />
+        <Skeleton radius="8" height="s4" width="250px" />
       </Flex>
     </Flex>
   );
diff --git a/docs/components/example/skeleton-radius.tsx b/docs/components/example/skeleton-radius.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "seed-design/ui/skeleton";
+import { Flex } from "seed-design/ui/layout";
+
+export default function SkeletonRadius() {
+  return (
+    <Flex gap="s4" alignItems="center">
+      <Skeleton radius="0" width="s12" height="s12" />
+      <Skeleton radius="8" width="s12" height="s12" />
+      <Skeleton radius="16" width="s12" height="s12" />
+      <Skeleton radius="full" width="s12" height="s12" />
+    </Flex>
+  );
+}
diff --git a/docs/components/example/skeleton-rectangular.tsx b/docs/components/example/skeleton-rectangular.tsx
diff --git a/docs/components/example/skeleton-rounded.tsx b/docs/components/example/skeleton-rounded.tsx
diff --git a/docs/content/docs/react/components/skeleton.mdx b/docs/content/docs/react/components/skeleton.mdx
@@ -14,14 +14,6 @@ title: Skeleton
 
 ## 예제
 
-### Rounded
+### Radius
 
-<ComponentExample name="skeleton-rounded" />
-
-### Rectangular
-
-<ComponentExample name="skeleton-rectangular" />
-
-### Circular
-
-<ComponentExample name="skeleton-circular" />
+<ComponentExample name="skeleton-radius" />
diff --git a/docs/public/rootage/components/skeleton.json b/docs/public/rootage/components/skeleton.json
@@ -17,24 +17,31 @@
         }
       }
     },
-    "shape=rounded": {
+    "radius=0": {
       "enabled": {
         "root": {
-          "cornerRadius": "$radius.s1"
+          "cornerRadius": "0px"
         }
       }
     },
-    "shape=circular": {
+    "radius=8": {
       "enabled": {
         "root": {
-          "cornerRadius": "$radius.full"
+          "cornerRadius": "8px"
         }
       }
     },
-    "shape=rectangular": {
+    "radius=16": {
       "enabled": {
         "root": {
-          "cornerRadius": 0
+          "cornerRadius": "16px"
+        }
+      }
+    },
+    "radius=full": {
+      "enabled": {
+        "root": {
+          "cornerRadius": "$radius.full"
         }
       }
     }
diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json
@@ -19799,7 +19799,7 @@
         },
         {
           "key": {
-            "shape": "rounded"
+            "radius": "0"
           },
           "state": [
             {
@@ -19813,11 +19813,9 @@
                     {
                       "key": "cornerRadius",
                       "value": {
-                        "type": "token",
-                        "group": [
-                          "radius"
-                        ],
-                        "key": "s1"
+                        "type": "dimension",
+                        "value": 0,
+                        "unit": "px"
                       }
                     }
                   ]
@@ -19828,7 +19826,7 @@
         },
         {
           "key": {
-            "shape": "circular"
+            "radius": "8"
           },
           "state": [
             {
@@ -19842,11 +19840,9 @@
                     {
                       "key": "cornerRadius",
                       "value": {
-                        "type": "token",
-                        "group": [
-                          "radius"
-                        ],
-                        "key": "full"
+                        "type": "dimension",
+                        "value": 8,
+                        "unit": "px"
                       }
                     }
                   ]
@@ -19857,7 +19853,7 @@
         },
         {
           "key": {
-            "shape": "rectangular"
+            "radius": "16"
           },
           "state": [
             {
@@ -19871,8 +19867,38 @@
                     {
                       "key": "cornerRadius",
                       "value": {
-                        "type": "number",
-                        "value": 0
+                        "type": "dimension",
+                        "value": 16,
+                        "unit": "px"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "key": {
+            "radius": "full"
+          },
+          "state": [
+            {
+              "key": [
+                "enabled"
+              ],
+              "slot": [
+                {
+                  "key": "root",
+                  "property": [
+                    {
+                      "key": "cornerRadius",
+                      "value": {
+                        "type": "token",
+                        "group": [
+                          "radius"
+                        ],
+                        "key": "full"
                       }
                     }
                   ]
diff --git a/packages/qvism-preset/src/skeleton.ts b/packages/qvism-preset/src/skeleton.ts
@@ -29,20 +29,25 @@ const skeleton = defineRecipe({
     },
   },
   variants: {
-    shape: {
-      rounded: {
+    radius: {
+      0: {
         root: {
-          borderRadius: vars.shapeRounded.enabled.root.cornerRadius,
+          borderRadius: vars.radius0.enabled.root.cornerRadius,
         },
       },
-      circular: {
+      8: {
         root: {
-          borderRadius: vars.shapeCircular.enabled.root.cornerRadius,
+          borderRadius: vars.radius8.enabled.root.cornerRadius,
         },
       },
-      rectangular: {
+      16: {
         root: {
-          borderRadius: vars.shapeRectangular.enabled.root.cornerRadius,
+          borderRadius: vars.radius16.enabled.root.cornerRadius,
+        },
+      },
+      full: {
+        root: {
+          borderRadius: vars.radiusFull.enabled.root.cornerRadius,
         },
       },
     },
@@ -58,7 +63,7 @@ const skeleton = defineRecipe({
     },
   },
   defaultVariants: {
-    shape: "rounded",
+    radius: 8,
   },
 });
 
diff --git a/packages/recipe/lib/skeleton.d.ts b/packages/recipe/lib/skeleton.d.ts
@@ -1,8 +1,8 @@
 declare interface SkeletonVariant {
   /**
-  * @default rounded
+  * @default 8
   */
-  shape: "rounded" | "circular" | "rectangular";
+  radius: "0" | "8" | "16" | "full";
 }
 
 declare type SkeletonVariantMap = {
diff --git a/packages/recipe/lib/skeleton.mjs b/packages/recipe/lib/skeleton.mjs
@@ -10,16 +10,17 @@ const skeletonSlotNames = [
 ];
 
 const defaultVariant = {
-  "shape": "rounded"
+  "radius": 8
 };
 
 const compoundVariants = [];
 
 export const skeletonVariantMap = {
-  "shape": [
-    "rounded",
-    "circular",
-    "rectangular"
+  "radius": [
+    "0",
+    "8",
+    "16",
+    "full"
   ]
 };
 
diff --git a/packages/rootage/components/skeleton.yaml b/packages/rootage/components/skeleton.yaml
@@ -12,15 +12,19 @@ data:
         duration: 1.5s
         timingFunction: $timing-function.easing
         color: $gradient.shimmer
-  shape=rounded:
+  radius=0:
     enabled:
       root:
-        cornerRadius: $radius.s1
-  shape=circular:
+        cornerRadius: 0px
+  radius=8:
     enabled:
       root:
-        cornerRadius: $radius.full
-  shape=rectangular:
+        cornerRadius: 8px
+  radius=16:
+    enabled:
+      root:
+        cornerRadius: 16px
+  radius=full:
     enabled:
       root:
-        cornerRadius: 0
+        cornerRadius: $radius.full
diff --git a/packages/stylesheet/skeleton.css b/packages/stylesheet/skeleton.css
@@ -17,14 +17,17 @@
     animation-timing-function: var(--seed-v3-timing-function-easing);
     animation-iteration-count: infinite;
 }
-.skeleton__root--shape_rounded {
-    border-radius: var(--seed-v3-radius-s1);
+.skeleton__root--radius_0 {
+    border-radius: 0px;
 }
-.skeleton__root--shape_circular {
-    border-radius: var(--seed-v3-radius-full);
+.skeleton__root--radius_8 {
+    border-radius: 8px;
+}
+.skeleton__root--radius_16 {
+    border-radius: 16px;
 }
-.skeleton__root--shape_rectangular {
-    border-radius: 0;
+.skeleton__root--radius_full {
+    border-radius: var(--seed-v3-radius-full);
 }
 @keyframes shimmer {
     0% {
diff --git a/packages/vars/lib/component/skeleton.d.ts b/packages/vars/lib/component/skeleton.d.ts
@@ -11,24 +11,31 @@ export declare const vars: {
       }
     }
   },
-  "shapeRounded": {
+  "radius0": {
     "enabled": {
       "root": {
-        "cornerRadius": "var(--seed-v3-radius-s1)"
+        "cornerRadius": "0px"
       }
     }
   },
-  "shapeCircular": {
+  "radius8": {
     "enabled": {
       "root": {
-        "cornerRadius": "var(--seed-v3-radius-full)"
+        "cornerRadius": "8px"
       }
     }
   },
-  "shapeRectangular": {
+  "radius16": {
     "enabled": {
       "root": {
-        "cornerRadius": "0"
+        "cornerRadius": "16px"
+      }
+    }
+  },
+  "radiusFull": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-v3-radius-full)"
       }
     }
   }
diff --git a/packages/vars/lib/component/skeleton.mjs b/packages/vars/lib/component/skeleton.mjs

Original file line number	Diff line number	Diff line change
`@@ -17,24 +17,31 @@`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`	`},`
`20`		`- "shape=rounded": {`
	`20`	`+ "radius=0": {`
`21`	`21`	`"enabled": {`
`22`	`22`	`"root": {`
`23`		`- "cornerRadius": "$radius.s1"`
	`23`	`+ "cornerRadius": "0px"`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`	`},`
`27`		`- "shape=circular": {`
	`27`	`+ "radius=8": {`
`28`	`28`	`"enabled": {`
`29`	`29`	`"root": {`
`30`		`- "cornerRadius": "$radius.full"`
	`30`	`+ "cornerRadius": "8px"`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`	`},`
`34`		`- "shape=rectangular": {`
	`34`	`+ "radius=16": {`
`35`	`35`	`"enabled": {`
`36`	`36`	`"root": {`
`37`		`- "cornerRadius": 0`
	`37`	`+ "cornerRadius": "16px"`
	`38`	`+ }`
	`39`	`+ }`
	`40`	`+ },`
	`41`	`+ "radius=full": {`
	`42`	`+ "enabled": {`
	`43`	`+ "root": {`
	`44`	`+ "cornerRadius": "$radius.full"`
`38`	`45`	`}`
`39`	`46`	`}`
`40`	`47`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19799,7 +19799,7 @@`
`19799`	`19799`	`},`
`19800`	`19800`	`{`
`19801`	`19801`	`"key": {`
`19802`		`- "shape": "rounded"`
	`19802`	`+ "radius": "0"`
`19803`	`19803`	`},`
`19804`	`19804`	`"state": [`
`19805`	`19805`	`{`
`@@ -19813,11 +19813,9 @@`
`19813`	`19813`	`{`
`19814`	`19814`	`"key": "cornerRadius",`
`19815`	`19815`	`"value": {`
`19816`		`- "type": "token",`
`19817`		`- "group": [`
`19818`		`- "radius"`
`19819`		`- ],`
`19820`		`- "key": "s1"`
	`19816`	`+ "type": "dimension",`
	`19817`	`+ "value": 0,`
	`19818`	`+ "unit": "px"`
`19821`	`19819`	`}`
`19822`	`19820`	`}`
`19823`	`19821`	`]`
`@@ -19828,7 +19826,7 @@`
`19828`	`19826`	`},`
`19829`	`19827`	`{`
`19830`	`19828`	`"key": {`
`19831`		`- "shape": "circular"`
	`19829`	`+ "radius": "8"`
`19832`	`19830`	`},`
`19833`	`19831`	`"state": [`
`19834`	`19832`	`{`
`@@ -19842,11 +19840,9 @@`
`19842`	`19840`	`{`
`19843`	`19841`	`"key": "cornerRadius",`
`19844`	`19842`	`"value": {`
`19845`		`- "type": "token",`
`19846`		`- "group": [`
`19847`		`- "radius"`
`19848`		`- ],`
`19849`		`- "key": "full"`
	`19843`	`+ "type": "dimension",`
	`19844`	`+ "value": 8,`
	`19845`	`+ "unit": "px"`
`19850`	`19846`	`}`
`19851`	`19847`	`}`
`19852`	`19848`	`]`
`@@ -19857,7 +19853,7 @@`
`19857`	`19853`	`},`
`19858`	`19854`	`{`
`19859`	`19855`	`"key": {`
`19860`		`- "shape": "rectangular"`
	`19856`	`+ "radius": "16"`
`19861`	`19857`	`},`
`19862`	`19858`	`"state": [`
`19863`	`19859`	`{`
`@@ -19871,8 +19867,38 @@`
`19871`	`19867`	`{`
`19872`	`19868`	`"key": "cornerRadius",`
`19873`	`19869`	`"value": {`
`19874`		`- "type": "number",`
`19875`		`- "value": 0`
	`19870`	`+ "type": "dimension",`
	`19871`	`+ "value": 16,`
	`19872`	`+ "unit": "px"`
	`19873`	`+ }`
	`19874`	`+ }`
	`19875`	`+ ]`
	`19876`	`+ }`
	`19877`	`+ ]`
	`19878`	`+ }`
	`19879`	`+ ]`
	`19880`	`+ },`
	`19881`	`+ {`
	`19882`	`+ "key": {`
	`19883`	`+ "radius": "full"`
	`19884`	`+ },`
	`19885`	`+ "state": [`
	`19886`	`+ {`
	`19887`	`+ "key": [`
	`19888`	`+ "enabled"`
	`19889`	`+ ],`
	`19890`	`+ "slot": [`
	`19891`	`+ {`
	`19892`	`+ "key": "root",`
	`19893`	`+ "property": [`
	`19894`	`+ {`
	`19895`	`+ "key": "cornerRadius",`
	`19896`	`+ "value": {`
	`19897`	`+ "type": "token",`
	`19898`	`+ "group": [`
	`19899`	`+ "radius"`
	`19900`	`+ ],`
	`19901`	`+ "key": "full"`
`19876`	`19902`	`}`
`19877`	`19903`	`}`
`19878`	`19904`	`]`