diff --git a/docs/components/example/index.json b/docs/components/example/index.json
index c92d9f35d..d7ac75b06 100644
--- 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 \n Hot\n New\n \n );\n}",
"select-box-check-preview": "import { SelectBoxCheck, SelectBoxCheckGroup } from \"seed-design/ui/select-box\";\n\nexport default function SelectBoxCheckPreview() {\n return (\n \n \n \n \n \n );\n}",
"select-box-radio-preview": "import { SelectBoxRadioGroup, SelectBoxRadio } from \"seed-design/ui/select-box\";\n\nexport default function SelectBoxRadioPreview() {\n return (\n \n \n \n \n \n );\n}",
- "skeleton-circular": "import { Skeleton } from \"seed-design/ui/skeleton\";\n\nexport default function SkeletonCircle() {\n return ;\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 \n \n \n \n \n \n \n );\n}",
- "skeleton-rectangular": "import { Skeleton } from \"seed-design/ui/skeleton\";\n\nexport default function SkeletonRectangular() {\n return ;\n}",
- "skeleton-rounded": "import { Skeleton } from \"seed-design/ui/skeleton\";\n\nexport default function SkeletonRounded() {\n return ;\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 \n \n \n \n \n \n \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 \n \n \n \n \n \n );\n}",
"switch-disabled": "import { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchDisabled() {\n return (\n
\n \n \n
\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 ;\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 ;\n}",
diff --git a/docs/components/example/skeleton-circular.tsx b/docs/components/example/skeleton-circular.tsx
deleted file mode 100644
index 4d5639ffc..000000000
--- a/docs/components/example/skeleton-circular.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Skeleton } from "seed-design/ui/skeleton";
-
-export default function SkeletonCircle() {
- return ;
-}
diff --git a/docs/components/example/skeleton-preview.tsx b/docs/components/example/skeleton-preview.tsx
index 53d01baeb..95fb07b38 100644
--- 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 (
-
+
-
-
+
+
);
diff --git a/docs/components/example/skeleton-radius.tsx b/docs/components/example/skeleton-radius.tsx
new file mode 100644
index 000000000..64033d586
--- /dev/null
+++ 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 (
+
+
+
+
+
+
+ );
+}
diff --git a/docs/components/example/skeleton-rectangular.tsx b/docs/components/example/skeleton-rectangular.tsx
deleted file mode 100644
index 87a6f813f..000000000
--- a/docs/components/example/skeleton-rectangular.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Skeleton } from "seed-design/ui/skeleton";
-
-export default function SkeletonRectangular() {
- return ;
-}
diff --git a/docs/components/example/skeleton-rounded.tsx b/docs/components/example/skeleton-rounded.tsx
deleted file mode 100644
index 3123f362e..000000000
--- a/docs/components/example/skeleton-rounded.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Skeleton } from "seed-design/ui/skeleton";
-
-export default function SkeletonRounded() {
- return ;
-}
diff --git a/docs/content/docs/react/components/skeleton.mdx b/docs/content/docs/react/components/skeleton.mdx
index 6ae523b56..c80505c5e 100644
--- a/docs/content/docs/react/components/skeleton.mdx
+++ b/docs/content/docs/react/components/skeleton.mdx
@@ -14,14 +14,6 @@ title: Skeleton
## 예제
-### Rounded
+### Radius
-
-
-### Rectangular
-
-
-
-### Circular
-
-
+
diff --git a/docs/public/rootage/components/skeleton.json b/docs/public/rootage/components/skeleton.json
index bcc40a5a7..f54e9b3fd 100644
--- 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
index 18b5d76ef..8eca56caf 100644
--- 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
index 3f97bc351..25562de6c 100644
--- 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
index 45bca4fc5..04267de9a 100644
--- 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
index e72724d75..f558d6404 100644
--- 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
index 7b9544c34..924061593 100644
--- 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
index 35737e2af..ea826eee0 100644
--- 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
index bd4bd2bac..b03c586e5 100644
--- 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
index c4d209305..a456f825b 100644
--- a/packages/vars/lib/component/skeleton.mjs
+++ b/packages/vars/lib/component/skeleton.mjs
@@ -11,24 +11,31 @@ export 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)"
}
}
}