Skip to content

Commit

Permalink
feat: update checkbox design
Browse files Browse the repository at this point in the history
  • Loading branch information
@malangcat
malangcat committed Jan 13, 2025
1 parent fbf5f15 commit 66b8113
Show file tree
Hide file tree
Showing 9 changed files with 45 additions and 353 deletions.
45 changes: 8 additions & 37 deletions docs/public/rootage/components/checkbox.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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"
}
}
}
Expand Down
151 changes: 8 additions & 143 deletions docs/public/rootage/parsed.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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": [
Expand All @@ -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"
}
}
Expand All @@ -13466,7 +13331,7 @@
{
"key": {
"variant": "square",
"size": "small"
"size": "large"
},
"state": [
{
Expand All @@ -13481,7 +13346,7 @@
"key": "size",
"value": {
"type": "dimension",
"value": 10.5,
"value": 14,
"unit": "px"
}
}
Expand All @@ -13493,7 +13358,7 @@
},
{
"key": {
"variant": "square",
"variant": "ghost",
"size": "medium"
},
"state": [
Expand All @@ -13509,7 +13374,7 @@
"key": "size",
"value": {
"type": "dimension",
"value": 11.67,
"value": 14,
"unit": "px"
}
}
Expand All @@ -13521,7 +13386,7 @@
},
{
"key": {
"variant": "square",
"variant": "ghost",
"size": "large"
},
"state": [
Expand All @@ -13537,7 +13402,7 @@
"key": "size",
"value": {
"type": "dimension",
"value": 14,
"value": 18,
"unit": "px"
}
}
Expand Down
36 changes: 0 additions & 36 deletions packages/qvism-preset/src/recipes/checkbox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/recipe/lib/checkbox.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ declare interface CheckboxVariant {
/**
* @default medium
*/
size: "large" | "medium" | "small";
size: "large" | "medium";
}

declare type CheckboxVariantMap = {
Expand Down
11 changes: 1 addition & 10 deletions packages/recipe/lib/checkbox.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,6 @@ const defaultVariant = {
};

const compoundVariants = [
{
"size": "small",
"variant": "ghost"
},
{
"size": "medium",
"variant": "ghost"
Expand All @@ -40,10 +36,6 @@ const compoundVariants = [
"size": "large",
"variant": "ghost"
},
{
"size": "small",
"variant": "square"
},
{
"size": "medium",
"variant": "square"
Expand All @@ -65,8 +57,7 @@ export const checkboxVariantMap = {
],
"size": [
"large",
"medium",
"small"
"medium"
]
};

Expand Down
Loading

0 comments on commit 66b8113

Please sign in to comment.