feat: update skeleton variants

daangn · Jan 4, 2025 · 485d73a · 485d73a
1 parent 7ed4f5b
commit 485d73a
Show file tree

Hide file tree

Showing 16 changed files with 140 additions and 92 deletions.
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)"
       }
     }
   }