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)" } } }