From 66b811359c97b7fe15fa7be8ef53309f67837e76 Mon Sep 17 00:00:00 2001 From: malangcat Date: Mon, 13 Jan 2025 17:36:17 +0900 Subject: [PATCH] feat: update checkbox design --- docs/public/rootage/components/checkbox.json | 45 +----- docs/public/rootage/parsed.json | 151 +----------------- packages/qvism-preset/src/recipes/checkbox.ts | 36 ----- packages/recipe/lib/checkbox.d.ts | 2 +- packages/recipe/lib/checkbox.mjs | 11 +- packages/rootage/components/checkbox.yaml | 33 +--- packages/stylesheet/checkbox.css | 30 +--- packages/vars/lib/component/checkbox.d.ts | 45 +----- packages/vars/lib/component/checkbox.mjs | 45 +----- 9 files changed, 45 insertions(+), 353 deletions(-) diff --git a/docs/public/rootage/components/checkbox.json b/docs/public/rootage/components/checkbox.json index 1b28cb84c..3e7adae7d 100644 --- a/docs/public/rootage/components/checkbox.json +++ b/docs/public/rootage/components/checkbox.json @@ -116,21 +116,6 @@ } } }, - "size=small": { - "enabled": { - "root": { - "minHeight": "$unit.s7" - }, - "label": { - "fontSize": "$font-size.s3", - "lineHeight": "$line-height.s3" - }, - "control": { - "size": "$unit.s4", - "cornerRadius": "$radius.s1" - } - } - }, "size=medium": { "enabled": { "root": { @@ -161,45 +146,31 @@ } } }, - "variant=ghost,size=small": { - "enabled": { - "icon": { - "size": "13.5px" - } - } - }, - "variant=ghost,size=medium": { - "enabled": { - "icon": { - "size": "15px" - } - } - }, - "variant=ghost,size=large": { + "variant=square,size=medium": { "enabled": { "icon": { - "size": "18px" + "size": "12px" } } }, - "variant=square,size=small": { + "variant=square,size=large": { "enabled": { "icon": { - "size": "10.5px" + "size": "14px" } } }, - "variant=square,size=medium": { + "variant=ghost,size=medium": { "enabled": { "icon": { - "size": "11.67px" + "size": "14px" } } }, - "variant=square,size=large": { + "variant=ghost,size=large": { "enabled": { "icon": { - "size": "14px" + "size": "18px" } } } diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json index fed7cad64..14a24dc41 100644 --- a/docs/public/rootage/parsed.json +++ b/docs/public/rootage/parsed.json @@ -13142,85 +13142,6 @@ } ] }, - { - "key": { - "size": "small" - }, - "state": [ - { - "key": [ - "enabled" - ], - "slot": [ - { - "key": "root", - "property": [ - { - "key": "minHeight", - "value": { - "type": "token", - "group": [ - "unit" - ], - "key": "s7" - } - } - ] - }, - { - "key": "label", - "property": [ - { - "key": "fontSize", - "value": { - "type": "token", - "group": [ - "font-size" - ], - "key": "s3" - } - }, - { - "key": "lineHeight", - "value": { - "type": "token", - "group": [ - "line-height" - ], - "key": "s3" - } - } - ] - }, - { - "key": "control", - "property": [ - { - "key": "size", - "value": { - "type": "token", - "group": [ - "unit" - ], - "key": "s4" - } - }, - { - "key": "cornerRadius", - "value": { - "type": "token", - "group": [ - "radius" - ], - "key": "s1" - } - } - ] - } - ] - } - ] - }, { "key": { "size": "medium" @@ -13381,35 +13302,7 @@ }, { "key": { - "variant": "ghost", - "size": "small" - }, - "state": [ - { - "key": [ - "enabled" - ], - "slot": [ - { - "key": "icon", - "property": [ - { - "key": "size", - "value": { - "type": "dimension", - "value": 13.5, - "unit": "px" - } - } - ] - } - ] - } - ] - }, - { - "key": { - "variant": "ghost", + "variant": "square", "size": "medium" }, "state": [ @@ -13425,35 +13318,7 @@ "key": "size", "value": { "type": "dimension", - "value": 15, - "unit": "px" - } - } - ] - } - ] - } - ] - }, - { - "key": { - "variant": "ghost", - "size": "large" - }, - "state": [ - { - "key": [ - "enabled" - ], - "slot": [ - { - "key": "icon", - "property": [ - { - "key": "size", - "value": { - "type": "dimension", - "value": 18, + "value": 12, "unit": "px" } } @@ -13466,7 +13331,7 @@ { "key": { "variant": "square", - "size": "small" + "size": "large" }, "state": [ { @@ -13481,7 +13346,7 @@ "key": "size", "value": { "type": "dimension", - "value": 10.5, + "value": 14, "unit": "px" } } @@ -13493,7 +13358,7 @@ }, { "key": { - "variant": "square", + "variant": "ghost", "size": "medium" }, "state": [ @@ -13509,7 +13374,7 @@ "key": "size", "value": { "type": "dimension", - "value": 11.67, + "value": 14, "unit": "px" } } @@ -13521,7 +13386,7 @@ }, { "key": { - "variant": "square", + "variant": "ghost", "size": "large" }, "state": [ @@ -13537,7 +13402,7 @@ "key": "size", "value": { "type": "dimension", - "value": 14, + "value": 18, "unit": "px" } } diff --git a/packages/qvism-preset/src/recipes/checkbox.ts b/packages/qvism-preset/src/recipes/checkbox.ts index 0c2ce825a..2dee218e4 100644 --- a/packages/qvism-preset/src/recipes/checkbox.ts +++ b/packages/qvism-preset/src/recipes/checkbox.ts @@ -171,35 +171,9 @@ const checkbox = defineRecipe({ marginBlockStart: "calc(16px - 0.59375rem)", // 수직 위치 보정, 16 - label.lineHeight / 2 }, }, - small: { - root: { - minHeight: vars.sizeSmall.enabled.root.minHeight, - }, - control: { - borderRadius: vars.sizeSmall.enabled.control.cornerRadius, - width: vars.sizeSmall.enabled.control.size, - height: vars.sizeSmall.enabled.control.size, - margin: `calc((${vars.sizeSmall.enabled.root.minHeight} - ${vars.sizeSmall.enabled.control.size}) / 2) 0`, // 수직 위치 보정 - }, - label: { - fontSize: vars.sizeSmall.enabled.label.fontSize, - lineHeight: vars.sizeSmall.enabled.label.lineHeight, - marginBlockStart: "calc(14px - 0.5625rem)", // 수직 위치 보정, 14 - label.lineHeight / 2 - }, - }, }, }, compoundVariants: [ - { - size: "small", - variant: "ghost", - css: { - icon: { - width: vars.variantGhostSizeSmall.enabled.icon.size, - height: vars.variantGhostSizeSmall.enabled.icon.size, - }, - }, - }, { size: "medium", variant: "ghost", @@ -220,16 +194,6 @@ const checkbox = defineRecipe({ }, }, }, - { - size: "small", - variant: "square", - css: { - icon: { - width: vars.variantSquareSizeSmall.enabled.icon.size, - height: vars.variantSquareSizeSmall.enabled.icon.size, - }, - }, - }, { size: "medium", variant: "square", diff --git a/packages/recipe/lib/checkbox.d.ts b/packages/recipe/lib/checkbox.d.ts index 6036ee9a8..657ffeb02 100644 --- a/packages/recipe/lib/checkbox.d.ts +++ b/packages/recipe/lib/checkbox.d.ts @@ -10,7 +10,7 @@ declare interface CheckboxVariant { /** * @default medium */ - size: "large" | "medium" | "small"; + size: "large" | "medium"; } declare type CheckboxVariantMap = { diff --git a/packages/recipe/lib/checkbox.mjs b/packages/recipe/lib/checkbox.mjs index 158727682..9f49f5c30 100644 --- a/packages/recipe/lib/checkbox.mjs +++ b/packages/recipe/lib/checkbox.mjs @@ -28,10 +28,6 @@ const defaultVariant = { }; const compoundVariants = [ - { - "size": "small", - "variant": "ghost" - }, { "size": "medium", "variant": "ghost" @@ -40,10 +36,6 @@ const compoundVariants = [ "size": "large", "variant": "ghost" }, - { - "size": "small", - "variant": "square" - }, { "size": "medium", "variant": "square" @@ -65,8 +57,7 @@ export const checkboxVariantMap = { ], "size": [ "large", - "medium", - "small" + "medium" ] }; diff --git a/packages/rootage/components/checkbox.yaml b/packages/rootage/components/checkbox.yaml index 61c353c63..d6cfb3c41 100644 --- a/packages/rootage/components/checkbox.yaml +++ b/packages/rootage/components/checkbox.yaml @@ -77,17 +77,6 @@ data: icon: color: $color.fg.disabled - size=small: - enabled: - root: - minHeight: $unit.s7 - label: - fontSize: $font-size.s3 - lineHeight: $line-height.s3 - control: - size: $unit.s4 - cornerRadius: $radius.s1 - size=medium: enabled: root: @@ -110,27 +99,19 @@ data: size: $unit.s6 cornerRadius: $radius.s1_5 - variant=ghost,size=small: + variant=square,size=medium: enabled: icon: - size: 13.5px + size: 12px + variant=square,size=large: + enabled: + icon: + size: 14px variant=ghost,size=medium: enabled: icon: - size: 15px + size: 14px variant=ghost,size=large: enabled: icon: size: 18px - variant=square,size=small: - enabled: - icon: - size: 10.5px - variant=square,size=medium: - enabled: - icon: - size: 11.67px - variant=square,size=large: - enabled: - icon: - size: 14px diff --git a/packages/stylesheet/checkbox.css b/packages/stylesheet/checkbox.css index 0f7a60355..54366bf11 100644 --- a/packages/stylesheet/checkbox.css +++ b/packages/stylesheet/checkbox.css @@ -133,39 +133,17 @@ line-height: var(--seed-v3-line-height-s4); margin-block-start: calc(16px - 0.59375rem); } -.checkbox__root--size_small { - min-height: var(--seed-v3-unit-s7); -} -.checkbox__control--size_small { - border-radius: var(--seed-v3-radius-s1); - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); - margin: calc((var(--seed-v3-unit-s7) - var(--seed-v3-unit-s4)) / 2) 0; -} -.checkbox__label--size_small { - font-size: var(--seed-v3-font-size-s3); - line-height: var(--seed-v3-line-height-s3); - margin-block-start: calc(14px - 0.5625rem); -} -.checkbox__icon--size_small-variant_ghost { - width: 13.5px; - height: 13.5px; -} .checkbox__icon--size_medium-variant_ghost { - width: 15px; - height: 15px; + width: 14px; + height: 14px; } .checkbox__icon--size_large-variant_ghost { width: 18px; height: 18px; } -.checkbox__icon--size_small-variant_square { - width: 10.5px; - height: 10.5px; -} .checkbox__icon--size_medium-variant_square { - width: 11.67px; - height: 11.67px; + width: 12px; + height: 12px; } .checkbox__icon--size_large-variant_square { width: 14px; diff --git a/packages/vars/lib/component/checkbox.d.ts b/packages/vars/lib/component/checkbox.d.ts index 42e016eba..1032c9497 100644 --- a/packages/vars/lib/component/checkbox.d.ts +++ b/packages/vars/lib/component/checkbox.d.ts @@ -110,21 +110,6 @@ export declare const vars: { } } }, - "sizeSmall": { - "enabled": { - "root": { - "minHeight": "var(--seed-v3-unit-s7)" - }, - "label": { - "fontSize": "var(--seed-v3-font-size-s3)", - "lineHeight": "var(--seed-v3-line-height-s3)" - }, - "control": { - "size": "var(--seed-v3-unit-s4)", - "cornerRadius": "var(--seed-v3-radius-s1)" - } - } - }, "sizeMedium": { "enabled": { "root": { @@ -155,45 +140,31 @@ export declare const vars: { } } }, - "variantGhostSizeSmall": { - "enabled": { - "icon": { - "size": "13.5px" - } - } - }, - "variantGhostSizeMedium": { - "enabled": { - "icon": { - "size": "15px" - } - } - }, - "variantGhostSizeLarge": { + "variantSquareSizeMedium": { "enabled": { "icon": { - "size": "18px" + "size": "12px" } } }, - "variantSquareSizeSmall": { + "variantSquareSizeLarge": { "enabled": { "icon": { - "size": "10.5px" + "size": "14px" } } }, - "variantSquareSizeMedium": { + "variantGhostSizeMedium": { "enabled": { "icon": { - "size": "11.67px" + "size": "14px" } } }, - "variantSquareSizeLarge": { + "variantGhostSizeLarge": { "enabled": { "icon": { - "size": "14px" + "size": "18px" } } } diff --git a/packages/vars/lib/component/checkbox.mjs b/packages/vars/lib/component/checkbox.mjs index b41f02e82..a84a98bf5 100644 --- a/packages/vars/lib/component/checkbox.mjs +++ b/packages/vars/lib/component/checkbox.mjs @@ -110,21 +110,6 @@ export const vars = { } } }, - "sizeSmall": { - "enabled": { - "root": { - "minHeight": "var(--seed-v3-unit-s7)" - }, - "label": { - "fontSize": "var(--seed-v3-font-size-s3)", - "lineHeight": "var(--seed-v3-line-height-s3)" - }, - "control": { - "size": "var(--seed-v3-unit-s4)", - "cornerRadius": "var(--seed-v3-radius-s1)" - } - } - }, "sizeMedium": { "enabled": { "root": { @@ -155,45 +140,31 @@ export const vars = { } } }, - "variantGhostSizeSmall": { - "enabled": { - "icon": { - "size": "13.5px" - } - } - }, - "variantGhostSizeMedium": { - "enabled": { - "icon": { - "size": "15px" - } - } - }, - "variantGhostSizeLarge": { + "variantSquareSizeMedium": { "enabled": { "icon": { - "size": "18px" + "size": "12px" } } }, - "variantSquareSizeSmall": { + "variantSquareSizeLarge": { "enabled": { "icon": { - "size": "10.5px" + "size": "14px" } } }, - "variantSquareSizeMedium": { + "variantGhostSizeMedium": { "enabled": { "icon": { - "size": "11.67px" + "size": "14px" } } }, - "variantSquareSizeLarge": { + "variantGhostSizeLarge": { "enabled": { "icon": { - "size": "14px" + "size": "18px" } } }