diff --git a/docs/public/rootage/components/action-button.json b/docs/public/rootage/components/action-button.json index 4972a9144..c86017b4f 100644 --- a/docs/public/rootage/components/action-button.json +++ b/docs/public/rootage/components/action-button.json @@ -325,7 +325,7 @@ "size=xsmall": { "enabled": { "root": { - "minHeight": "$unit.s8", + "minHeight": "$dimension.s8", "cornerRadius": "$radius.full" }, "progressCircle": { @@ -337,15 +337,15 @@ "size=xsmall, layout=with text": { "enabled": { "root": { - "gap": "$unit.s1", - "paddingX": "$unit.s3_5", - "paddingY": "$unit.s1_5" + "gap": "$dimension.s1", + "paddingX": "$dimension.s3_5", + "paddingY": "$dimension.s1_5" }, "prefixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "suffixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "label": { "fontSize": "$font-size.s4" @@ -355,19 +355,19 @@ "size=xsmall, layout=icon only": { "enabled": { "root": { - "minWidth": "$unit.s8", - "paddingX": "$unit.s1_5", - "paddingY": "$unit.s1_5" + "minWidth": "$dimension.s8", + "paddingX": "$dimension.s1_5", + "paddingY": "$dimension.s1_5" }, "icon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" } } }, "size=small": { "enabled": { "root": { - "minHeight": "$unit.s9", + "minHeight": "$dimension.s9", "cornerRadius": "$radius.s2" }, "progressCircle": { @@ -379,15 +379,15 @@ "size=small, layout=with text": { "enabled": { "root": { - "gap": "$unit.s1", - "paddingX": "$unit.s3_5", - "paddingY": "$unit.s2" + "gap": "$dimension.s1", + "paddingX": "$dimension.s3_5", + "paddingY": "$dimension.s2" }, "prefixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "suffixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "label": { "fontSize": "$font-size.s4" @@ -397,19 +397,19 @@ "size=small, layout=icon only": { "enabled": { "root": { - "minWidth": "$unit.s9", - "paddingX": "$unit.s2", - "paddingY": "$unit.s2" + "minWidth": "$dimension.s9", + "paddingX": "$dimension.s2", + "paddingY": "$dimension.s2" }, "icon": { - "size": "$unit.s4" + "size": "$dimension.s4" } } }, "size=medium": { "enabled": { "root": { - "minHeight": "$unit.s10", + "minHeight": "$dimension.s10", "cornerRadius": "$radius.s2" }, "progressCircle": { @@ -421,15 +421,15 @@ "size=medium, layout=with text": { "enabled": { "root": { - "gap": "$unit.s1", - "paddingX": "$unit.s4", - "paddingY": "$unit.s2_5" + "gap": "$dimension.s1", + "paddingX": "$dimension.s4", + "paddingY": "$dimension.s2_5" }, "prefixIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "suffixIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "label": { "fontSize": "$font-size.s4" @@ -439,9 +439,9 @@ "size=medium, layout=icon only": { "enabled": { "root": { - "minWidth": "$unit.s10", - "paddingX": "$unit.s2_5", - "paddingY": "$unit.s2_5" + "minWidth": "$dimension.s10", + "paddingX": "$dimension.s2_5", + "paddingY": "$dimension.s2_5" }, "icon": { "size": "18px" @@ -451,7 +451,7 @@ "size=large": { "enabled": { "root": { - "minHeight": "$unit.s13", + "minHeight": "$dimension.s13", "cornerRadius": "$radius.s3" }, "progressCircle": { @@ -463,9 +463,9 @@ "size=large, layout=with text": { "enabled": { "root": { - "gap": "$unit.s2", - "paddingX": "$unit.s5", - "paddingY": "$unit.s3_5" + "gap": "$dimension.s2", + "paddingX": "$dimension.s5", + "paddingY": "$dimension.s3_5" }, "prefixIcon": { "size": "22px" @@ -481,9 +481,9 @@ "size=large, layout=icon only": { "enabled": { "root": { - "minWidth": "$unit.s13", - "paddingX": "$unit.s3_5", - "paddingY": "$unit.s3_5" + "minWidth": "$dimension.s13", + "paddingX": "$dimension.s3_5", + "paddingY": "$dimension.s3_5" }, "icon": { "size": "22px" diff --git a/docs/public/rootage/components/action-chip.json b/docs/public/rootage/components/action-chip.json index fb87e407c..ebc10108f 100644 --- a/docs/public/rootage/components/action-chip.json +++ b/docs/public/rootage/components/action-chip.json @@ -52,18 +52,18 @@ "size=small": { "enabled": { "root": { - "minHeight": "$unit.s8", - "paddingY": "$unit.s1_5", - "gap": "$unit.s1" + "minHeight": "$dimension.s8", + "paddingY": "$dimension.s1_5", + "gap": "$dimension.s1" }, "label": { "fontSize": "$font-size.s4" }, "prefixIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "suffixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "count": { "fontSize": "$font-size.s4" @@ -73,18 +73,18 @@ "size=medium": { "enabled": { "root": { - "minHeight": "$unit.s9", - "paddingY": "$unit.s2", - "gap": "$unit.s1" + "minHeight": "$dimension.s9", + "paddingY": "$dimension.s2", + "gap": "$dimension.s1" }, "label": { "fontSize": "$font-size.s4" }, "prefixIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "suffixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "count": { "fontSize": "$font-size.s4" @@ -94,34 +94,34 @@ "size=small,layout=with text": { "enabled": { "root": { - "paddingX": "$unit.s3" + "paddingX": "$dimension.s3" } } }, "size=small,layout=icon only": { "enabled": { "root": { - "minWidth": "$unit.s8" + "minWidth": "$dimension.s8" }, "icon": { - "size": "$unit.s4" + "size": "$dimension.s4" } } }, "size=medium,layout=with text": { "enabled": { "root": { - "paddingX": "$unit.s3_5" + "paddingX": "$dimension.s3_5" } } }, "size=medium,layout=icon only": { "enabled": { "root": { - "minWidth": "$unit.s9" + "minWidth": "$dimension.s9" }, "icon": { - "size": "$unit.s4" + "size": "$dimension.s4" } } } diff --git a/docs/public/rootage/components/action-sheet-close-button.json b/docs/public/rootage/components/action-sheet-close-button.json index 06d9c4340..9293f2a91 100644 --- a/docs/public/rootage/components/action-sheet-close-button.json +++ b/docs/public/rootage/components/action-sheet-close-button.json @@ -11,9 +11,9 @@ "color": "$color.bg.neutral-weak", "minHeight": "52px", "cornerRadius": "$radius.s3", - "paddingX": "$unit.s5", - "paddingY": "$unit.s3_5", - "gap": "$unit.s3" + "paddingX": "$dimension.s5", + "paddingY": "$dimension.s3_5", + "gap": "$dimension.s3" }, "label": { "color": "$color.fg.neutral", diff --git a/docs/public/rootage/components/action-sheet-item.json b/docs/public/rootage/components/action-sheet-item.json index 884890949..afde134c1 100644 --- a/docs/public/rootage/components/action-sheet-item.json +++ b/docs/public/rootage/components/action-sheet-item.json @@ -10,11 +10,11 @@ "root": { "color": "$color.bg.neutral-weak", "minHeight": "52px", - "paddingX": "$unit.s3_5", - "paddingY": "$unit.s4", + "paddingX": "$dimension.s3_5", + "paddingY": "$dimension.s4", "strokeBottomWidth": "1px", "strokeColor": "$color.stroke.neutral", - "gap": "$unit.s3" + "gap": "$dimension.s3" }, "prefixIcon": { "size": "22px" diff --git a/docs/public/rootage/components/action-sheet.json b/docs/public/rootage/components/action-sheet.json index c0dbefa0b..3b6faf77a 100644 --- a/docs/public/rootage/components/action-sheet.json +++ b/docs/public/rootage/components/action-sheet.json @@ -18,8 +18,8 @@ }, "content": { "color": "$color.bg.layer-floating", - "paddingX": "$horizontal-spacing.global-gutter", - "paddingY": "$unit.s4", + "paddingX": "$dimension.spacing-x.global-gutter", + "paddingY": "$dimension.s4", "cornerTopRadius": "$radius.s6", "enterDuration": "$duration.s6", "enterTimingFunction": "$timing-function.enter-expressive", @@ -27,13 +27,13 @@ "exitTimingFunction": "$timing-function.exit" }, "list": { - "gap": "$unit.s2_5" + "gap": "$dimension.s2_5" }, "group": { "cornerRadius": "$radius.s4" }, "footer": { - "paddingTop": "$unit.s2_5" + "paddingTop": "$dimension.s2_5" } } } diff --git a/docs/public/rootage/components/badge.json b/docs/public/rootage/components/badge.json index 1e7926600..f61c2be07 100644 --- a/docs/public/rootage/components/badge.json +++ b/docs/public/rootage/components/badge.json @@ -8,9 +8,9 @@ "size=large": { "enabled": { "root": { - "minHeight": "$unit.s6", - "paddingX": "$unit.s2", - "paddingY": "$unit.s1" + "minHeight": "$dimension.s6", + "paddingX": "$dimension.s2", + "paddingY": "$dimension.s1" }, "label": { "fontSize": "$font-size.s2", @@ -21,9 +21,9 @@ "size=medium": { "enabled": { "root": { - "minHeight": "$unit.s5", - "paddingX": "$unit.s1_5", - "paddingY": "$unit.s0_5" + "minHeight": "$dimension.s5", + "paddingX": "$dimension.s1_5", + "paddingY": "$dimension.s0_5" }, "label": { "fontSize": "$font-size.s1", diff --git a/docs/public/rootage/components/bottom-sheet.json b/docs/public/rootage/components/bottom-sheet.json index 39500ca71..5d646a249 100644 --- a/docs/public/rootage/components/bottom-sheet.json +++ b/docs/public/rootage/components/bottom-sheet.json @@ -25,15 +25,15 @@ "exitTimingFunction": "$timing-function.exit" }, "header": { - "gap": "$unit.s2", - "paddingX": "$horizontal-spacing.global-gutter", - "paddingTop": "$unit.s6", - "paddingBottom": "$unit.s4" + "gap": "$dimension.s2", + "paddingX": "$dimension.spacing-x.global-gutter", + "paddingTop": "$dimension.s6", + "paddingBottom": "$dimension.s4" }, "footer": { - "paddingX": "$horizontal-spacing.global-gutter", - "paddingTop": "$unit.s3", - "paddingBottom": "$unit.s4" + "paddingX": "$dimension.spacing-x.global-gutter", + "paddingTop": "$dimension.s3", + "paddingBottom": "$dimension.s4" }, "title": { "color": "$color.fg.neutral", @@ -52,8 +52,8 @@ "cornerRadius": "$radius.full", "targetSize": "44px", "size": "28px", - "fromTop": "$unit.s5", - "fromRight": "$unit.s5" + "fromTop": "$dimension.s5", + "fromRight": "$dimension.s5" }, "closeIcon": { "color": "$color.fg.neutral", diff --git a/docs/public/rootage/components/callout.json b/docs/public/rootage/components/callout.json index 61fd1906d..58ed1311d 100644 --- a/docs/public/rootage/components/callout.json +++ b/docs/public/rootage/components/callout.json @@ -8,15 +8,15 @@ "base": { "enabled": { "root": { - "padding": "$unit.s3_5", - "gap": "$unit.s3", + "padding": "$dimension.s3_5", + "gap": "$dimension.s3", "cornerRadius": "$radius.s2_5", "fontSize": "$font-size.s4", "lineHeight": "$line-height.s5", "minHeight": "50px" }, "icon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "title": { "fontWeight": "$font-weight.bold" @@ -25,13 +25,13 @@ "fontWeight": "$font-weight.regular" }, "dismissButton": { - "size": "$unit.s10" + "size": "$dimension.s10" }, "dismissIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "actionableIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" } } }, diff --git a/docs/public/rootage/components/checkbox.json b/docs/public/rootage/components/checkbox.json index 3e7adae7d..7bfbb71e7 100644 --- a/docs/public/rootage/components/checkbox.json +++ b/docs/public/rootage/components/checkbox.json @@ -11,7 +11,7 @@ "color": "$color.fg.neutral" }, "root": { - "gap": "$unit.s2" + "gap": "$dimension.s2" } } }, @@ -119,14 +119,14 @@ "size=medium": { "enabled": { "root": { - "minHeight": "$unit.s8" + "minHeight": "$dimension.s8" }, "label": { "fontSize": "$font-size.s4", "lineHeight": "$line-height.s4" }, "control": { - "size": "$unit.s5", + "size": "$dimension.s5", "cornerRadius": "$radius.s1" } } @@ -134,14 +134,14 @@ "size=large": { "enabled": { "root": { - "minHeight": "$unit.s9" + "minHeight": "$dimension.s9" }, "label": { "fontSize": "$font-size.s5", "lineHeight": "$line-height.s5" }, "control": { - "size": "$unit.s6", + "size": "$dimension.s6", "cornerRadius": "$radius.s1_5" } } diff --git a/docs/public/rootage/components/chip-tab.json b/docs/public/rootage/components/chip-tab.json index 4fa2052df..4450f5ab3 100644 --- a/docs/public/rootage/components/chip-tab.json +++ b/docs/public/rootage/components/chip-tab.json @@ -8,8 +8,8 @@ "base": { "enabled": { "root": { - "paddingX": "$unit.s3_5", - "paddingY": "$unit.s2", + "paddingX": "$dimension.s3_5", + "paddingY": "$dimension.s2", "cornerRadius": "$radius.full", "minHeight": "36px" }, diff --git a/docs/public/rootage/components/chip-tablist.json b/docs/public/rootage/components/chip-tablist.json index 203df3af0..bb7cfba91 100644 --- a/docs/public/rootage/components/chip-tablist.json +++ b/docs/public/rootage/components/chip-tablist.json @@ -8,7 +8,7 @@ "base": { "enabled": { "root": { - "paddingX": "$unit.s4" + "paddingX": "$dimension.s4" } } }, diff --git a/docs/public/rootage/components/control-chip.json b/docs/public/rootage/components/control-chip.json index d334bf9a5..688b9d60b 100644 --- a/docs/public/rootage/components/control-chip.json +++ b/docs/public/rootage/components/control-chip.json @@ -86,18 +86,18 @@ "size=small": { "enabled": { "root": { - "minHeight": "$unit.s8", - "paddingY": "$unit.s1_5", - "gap": "$unit.s1" + "minHeight": "$dimension.s8", + "paddingY": "$dimension.s1_5", + "gap": "$dimension.s1" }, "label": { "fontSize": "$font-size.s4" }, "prefixIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "suffixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "count": { "fontSize": "$font-size.s4" @@ -107,18 +107,18 @@ "size=medium": { "enabled": { "root": { - "minHeight": "$unit.s9", - "paddingY": "$unit.s2", - "gap": "$unit.s1" + "minHeight": "$dimension.s9", + "paddingY": "$dimension.s2", + "gap": "$dimension.s1" }, "label": { "fontSize": "$font-size.s4" }, "prefixIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "suffixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "count": { "fontSize": "$font-size.s4" @@ -128,34 +128,34 @@ "size=small,layout=with text": { "enabled": { "root": { - "paddingX": "$unit.s3" + "paddingX": "$dimension.s3" } } }, "size=small,layout=icon only": { "enabled": { "root": { - "minWidth": "$unit.s8" + "minWidth": "$dimension.s8" }, "icon": { - "size": "$unit.s4" + "size": "$dimension.s4" } } }, "size=medium,layout=with text": { "enabled": { "root": { - "paddingX": "$unit.s3_5" + "paddingX": "$dimension.s3_5" } } }, "size=medium,layout=icon only": { "enabled": { "root": { - "minWidth": "$unit.s9" + "minWidth": "$dimension.s9" }, "icon": { - "size": "$unit.s4" + "size": "$dimension.s4" } } } diff --git a/docs/public/rootage/components/dialog.json b/docs/public/rootage/components/dialog.json index b445e1cb6..c99ecf135 100644 --- a/docs/public/rootage/components/dialog.json +++ b/docs/public/rootage/components/dialog.json @@ -19,9 +19,9 @@ "content": { "color": "$color.bg.layer-default", "cornerRadius": "$radius.s5", - "marginX": "$unit.s8", - "paddingX": "$unit.s5", - "paddingY": "$unit.s5", + "marginX": "$dimension.s8", + "paddingX": "$dimension.s5", + "paddingY": "$dimension.s5", "maxWidth": "272px", "enterDuration": "$duration.s4", "enterTimingFunction": "$timing-function.enter-expressive", @@ -32,11 +32,11 @@ "exitOpacity": 0 }, "header": { - "gap": "$unit.s1_5" + "gap": "$dimension.s1_5" }, "footer": { - "paddingTop": "$unit.s4", - "gap": "$unit.s2" + "paddingTop": "$dimension.s4", + "gap": "$dimension.s2" }, "title": { "color": "$color.fg.neutral", diff --git a/docs/public/rootage/components/extended-fab.json b/docs/public/rootage/components/extended-fab.json index c28878347..91db89334 100644 --- a/docs/public/rootage/components/extended-fab.json +++ b/docs/public/rootage/components/extended-fab.json @@ -64,9 +64,9 @@ "enabled": { "root": { "minHeight": "40px", - "gap": "$unit.s1", - "paddingX": "$unit.s3_5", - "paddingY": "$unit.s2_5" + "gap": "$dimension.s1", + "paddingX": "$dimension.s3_5", + "paddingY": "$dimension.s2_5" }, "prefixIcon": { "size": "16px" @@ -82,9 +82,9 @@ "enabled": { "root": { "minHeight": "48px", - "gap": "$unit.s1", - "paddingX": "$unit.s4", - "paddingY": "$unit.s3" + "gap": "$dimension.s1", + "paddingX": "$dimension.s4", + "paddingY": "$dimension.s3" }, "prefixIcon": { "size": "16px" diff --git a/docs/public/rootage/components/help-bubble.json b/docs/public/rootage/components/help-bubble.json index 03987dafc..958007a1a 100644 --- a/docs/public/rootage/components/help-bubble.json +++ b/docs/public/rootage/components/help-bubble.json @@ -10,12 +10,12 @@ "root": { "color": "$color.bg.neutral-solid", "cornerRadius": "$radius.s3", - "paddingX": "$unit.s3", - "paddingY": "$unit.s3" + "paddingX": "$dimension.s3", + "paddingY": "$dimension.s3" }, "arrow": { "color": "$color.bg.neutral-solid", - "size": "$unit.s2_5" + "size": "$dimension.s2_5" }, "title": { "color": "$color.palette.static-white", diff --git a/docs/public/rootage/components/inline-banner.json b/docs/public/rootage/components/inline-banner.json index c6b503ee5..b045b1bbd 100644 --- a/docs/public/rootage/components/inline-banner.json +++ b/docs/public/rootage/components/inline-banner.json @@ -8,18 +8,18 @@ "base": { "enabled": { "root": { - "gap": "$unit.s4", - "paddingX": "$unit.s4" + "gap": "$dimension.s4", + "paddingX": "$dimension.s4" }, "content": { - "gap": "$unit.s2", - "paddingY": "$unit.s2_5", + "gap": "$dimension.s2", + "paddingY": "$dimension.s2_5", "fontSize": "$font-size.s4", "lineHeight": "$line-height.s4", - "minHeight": "$unit.s10" + "minHeight": "$dimension.s10" }, "icon": { - "size": "$unit.s4", + "size": "$dimension.s4", "marginY": "1.5px" }, "title": { @@ -29,19 +29,19 @@ "fontWeight": "$font-weight.medium" }, "linkLabel": { - "height": "$unit.s10", + "height": "$dimension.s10", "fontWeight": "$font-weight.regular", "fontSize": "$font-size.s2", "lineHeight": "$line-height.s2" }, "dismissButton": { - "size": "$unit.s10" + "size": "$dimension.s10" }, "dismissIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "actionableIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" } } }, diff --git a/docs/public/rootage/components/progress-circle.json b/docs/public/rootage/components/progress-circle.json index 036841805..0d482d805 100644 --- a/docs/public/rootage/components/progress-circle.json +++ b/docs/public/rootage/components/progress-circle.json @@ -8,7 +8,7 @@ "size=40": { "enabled": { "root": { - "size": "$unit.s10", + "size": "$dimension.s10", "thickness": "5px" } } @@ -16,7 +16,7 @@ "size=24": { "enabled": { "root": { - "size": "$unit.s6", + "size": "$dimension.s6", "thickness": "3px" } } diff --git a/docs/public/rootage/components/radio.json b/docs/public/rootage/components/radio.json index ced91d267..3264b291c 100644 --- a/docs/public/rootage/components/radio.json +++ b/docs/public/rootage/components/radio.json @@ -53,40 +53,40 @@ "size=large": { "enabled": { "root": { - "size": "$unit.s6" + "size": "$dimension.s6" }, "icon": { - "size": "$unit.s2_5" + "size": "$dimension.s2_5" } }, "disabled": { "icon": { - "size": "$unit.s3" + "size": "$dimension.s3" } } }, "size=medium": { "enabled": { "root": { - "size": "$unit.s5" + "size": "$dimension.s5" }, "icon": { - "size": "$unit.s2" + "size": "$dimension.s2" } }, "disabled": { "icon": { - "size": "$unit.s2_5" + "size": "$dimension.s2_5" } } }, "size=small": { "enabled": { "root": { - "size": "$unit.s4_5" + "size": "$dimension.s4_5" }, "icon": { - "size": "$unit.s2" + "size": "$dimension.s2" } } } diff --git a/docs/public/rootage/components/reaction-button.json b/docs/public/rootage/components/reaction-button.json index 5a70f5807..a229c7030 100644 --- a/docs/public/rootage/components/reaction-button.json +++ b/docs/public/rootage/components/reaction-button.json @@ -88,11 +88,11 @@ "size=xsmall": { "enabled": { "root": { - "minHeight": "$unit.s8", + "minHeight": "$dimension.s8", "cornerRadius": "$radius.full", - "gap": "$unit.s1", - "paddingX": "$unit.s3", - "paddingY": "$unit.s1_5" + "gap": "$dimension.s1", + "paddingX": "$dimension.s3", + "paddingY": "$dimension.s1_5" }, "prefixIcon": { "size": "18px" @@ -114,11 +114,11 @@ "size=small": { "enabled": { "root": { - "minHeight": "$unit.s9", + "minHeight": "$dimension.s9", "cornerRadius": "$radius.full", - "gap": "$unit.s1", - "paddingX": "$unit.s3_5", - "paddingY": "$unit.s2" + "gap": "$dimension.s1", + "paddingX": "$dimension.s3_5", + "paddingY": "$dimension.s2" }, "prefixIcon": { "size": "18px" diff --git a/docs/public/rootage/components/segment.json b/docs/public/rootage/components/segment.json index 6619348c9..181e2a7a7 100644 --- a/docs/public/rootage/components/segment.json +++ b/docs/public/rootage/components/segment.json @@ -8,9 +8,9 @@ "base": { "enabled": { "root": { - "height": "$unit.s8", + "height": "$dimension.s8", "cornerRadius": "$radius.full", - "paddingX": "$unit.s4", + "paddingX": "$dimension.s4", "minWidth": "86px" }, "label": { diff --git a/docs/public/rootage/components/segmented-control.json b/docs/public/rootage/components/segmented-control.json index b81666744..3ed77e7f9 100644 --- a/docs/public/rootage/components/segmented-control.json +++ b/docs/public/rootage/components/segmented-control.json @@ -8,7 +8,7 @@ "base": { "enabled": { "root": { - "padding": "$unit.s1", + "padding": "$dimension.s1", "cornerRadius": "$radius.full", "color": "$color.bg.neutral-weak" } diff --git a/docs/public/rootage/components/select-box.json b/docs/public/rootage/components/select-box.json index 6767fcc64..96d38a4eb 100644 --- a/docs/public/rootage/components/select-box.json +++ b/docs/public/rootage/components/select-box.json @@ -8,15 +8,15 @@ "base": { "enabled": { "root": { - "paddingX": "$unit.s4", - "paddingY": "$unit.s5", - "gap": "$unit.s2_5", + "paddingX": "$dimension.s4", + "paddingY": "$dimension.s5", + "gap": "$dimension.s2_5", "strokeWidth": "1px", "strokeColor": "$color.stroke.neutral", "cornerRadius": "$radius.s3" }, "content": { - "gap": "$unit.s0_5" + "gap": "$dimension.s0_5" }, "label": { "color": "$color.fg.neutral", @@ -31,24 +31,24 @@ "lineHeight": "$line-height.s4" }, "checkboxControl": { - "size": "$unit.s6", + "size": "$dimension.s6", "color": "$color.bg.layer-default", "strokeWidth": "1.25px", "strokeColor": "$color.stroke.control", "cornerRadius": "$radius.s1" }, "checkboxIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "radioControl": { - "size": "$unit.s6", + "size": "$dimension.s6", "color": "$color.bg.layer-default", "strokeWidth": "1.25px", "strokeColor": "$color.stroke.control", "cornerRadius": "$radius.full" }, "radioIcon": { - "size": "$unit.s2_5", + "size": "$dimension.s2_5", "cornerRadius": "$radius.full" } }, diff --git a/docs/public/rootage/components/snackbar.json b/docs/public/rootage/components/snackbar.json index e63d5e1ef..34e4564ac 100644 --- a/docs/public/rootage/components/snackbar.json +++ b/docs/public/rootage/components/snackbar.json @@ -8,8 +8,8 @@ "base": { "enabled": { "region": { - "paddingX": "$unit.s2", - "paddingY": "$unit.s2", + "paddingX": "$dimension.s2", + "paddingY": "$dimension.s2", "offsetDuration": "$duration.s4", "offsetTimingFunction": "$timing-function.easing" }, @@ -17,9 +17,9 @@ "color": "$color.bg.neutral-solid", "cornerRadius": "$radius.s2", "minHeight": "44px", - "paddingX": "$unit.s4", - "paddingY": "$unit.s2_5", - "gap": "$unit.s2", + "paddingX": "$dimension.s4", + "paddingY": "$dimension.s2_5", + "gap": "$dimension.s2", "enterOpacity": 0, "enterDuration": "$duration.s4", "enterTimingFunction": "$timing-function.enter", @@ -37,7 +37,7 @@ "size": "24px" }, "actionButton": { - "targetPaddingX": "$unit.s2", + "targetPaddingX": "$dimension.s2", "targetMinHeight": "44px", "color": "$color.fg.brand", "fontSize": "$font-size.s4", diff --git a/docs/public/rootage/components/tab.json b/docs/public/rootage/components/tab.json index e3cd9b394..a20186512 100644 --- a/docs/public/rootage/components/tab.json +++ b/docs/public/rootage/components/tab.json @@ -11,10 +11,10 @@ "color": "$color.fg.neutral-subtle" }, "notification": { - "size": "$unit.s1", + "size": "$dimension.s1", "cornerRadius": "$radius.full", "color": "$color.bg.brand-solid", - "marginLeft": "$unit.s0_5" + "marginLeft": "$dimension.s0_5" } }, "selected": { @@ -32,8 +32,8 @@ "enabled": { "root": { "minHeight": "44px", - "paddingX": "$unit.s2_5", - "paddingY": "$unit.s2_5" + "paddingX": "$dimension.s2_5", + "paddingY": "$dimension.s2_5" }, "label": { "fontSize": "$font-size.s5", @@ -45,8 +45,8 @@ "enabled": { "root": { "minHeight": "40px", - "paddingX": "$unit.s2_5", - "paddingY": "$unit.s2_5" + "paddingX": "$dimension.s2_5", + "paddingY": "$dimension.s2_5" }, "label": { "fontSize": "$font-size.s4", diff --git a/docs/public/rootage/components/tablist.json b/docs/public/rootage/components/tablist.json index 0ea19e277..d5fde8f4b 100644 --- a/docs/public/rootage/components/tablist.json +++ b/docs/public/rootage/components/tablist.json @@ -21,7 +21,7 @@ "layout=hug": { "enabled": { "root": { - "paddingX": "$unit.s4" + "paddingX": "$dimension.s4" } } }, diff --git a/docs/public/rootage/components/text-button.json b/docs/public/rootage/components/text-button.json index 10e9fb09a..b8070bda1 100644 --- a/docs/public/rootage/components/text-button.json +++ b/docs/public/rootage/components/text-button.json @@ -8,17 +8,17 @@ "base": { "enabled": { "root": { - "paddingY": "$unit.s0_5", + "paddingY": "$dimension.s0_5", "borderWidth": "0.125rem" }, "label": { "fontWeight": "$font-weight.regular" }, "prefixIcon": { - "marginXEnd": "$unit.s1" + "marginXEnd": "$dimension.s1" }, "suffixIcon": { - "marginXStart": "$unit.s0_5" + "marginXStart": "$dimension.s0_5" } }, "pressed": { @@ -67,10 +67,10 @@ "cornerRadius": "$radius.s1_5" }, "prefixIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "suffixIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "label": { "fontSize": "$font-size.s6", @@ -84,10 +84,10 @@ "cornerRadius": "$radius.s1_5" }, "prefixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "suffixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "label": { "fontSize": "$font-size.s5", @@ -101,10 +101,10 @@ "cornerRadius": "$radius.s1" }, "prefixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "suffixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "label": { "fontSize": "$font-size.s4", diff --git a/docs/public/rootage/components/text-field.json b/docs/public/rootage/components/text-field.json index 1354ce0ac..554574b91 100644 --- a/docs/public/rootage/components/text-field.json +++ b/docs/public/rootage/components/text-field.json @@ -104,8 +104,8 @@ "size=xlarge": { "enabled": { "header": { - "paddingBottom": "$unit.s3", - "gap": "$unit.s1_5" + "paddingBottom": "$dimension.s3", + "gap": "$dimension.s1_5" }, "label": { "fontSize": "$font-size.s5", @@ -118,9 +118,9 @@ "field": { "minHeight": "56px", "cornerRadius": "$radius.s2_5", - "gap": "$unit.s2", - "paddingX": "$unit.s4", - "paddingY": "$unit.s3" + "gap": "$dimension.s2", + "paddingX": "$dimension.s4", + "paddingY": "$dimension.s3" }, "value": { "fontSize": "$font-size.s6", @@ -131,18 +131,18 @@ "lineHeight": "$line-height.s6" }, "prefixIcon": { - "size": "$unit.s5" + "size": "$dimension.s5" }, "suffixText": { "fontSize": "$font-size.s6", "lineHeight": "$line-height.s6" }, "suffixIcon": { - "size": "$unit.s5" + "size": "$dimension.s5" }, "footer": { - "gap": "$unit.s3_5", - "paddingTop": "$unit.s2", + "gap": "$dimension.s3_5", + "paddingTop": "$dimension.s2", "minHeight": "20px" }, "description": { @@ -154,8 +154,8 @@ "lineHeight": "$line-height.s4" }, "errorIcon": { - "size": "$unit.s4", - "marginRight": "$unit.s1" + "size": "$dimension.s4", + "marginRight": "$dimension.s1" }, "characterCount": { "fontSize": "$font-size.s2", @@ -170,8 +170,8 @@ "size=large": { "enabled": { "header": { - "paddingBottom": "$unit.s3", - "gap": "$unit.s1_5" + "paddingBottom": "$dimension.s3", + "gap": "$dimension.s1_5" }, "label": { "fontSize": "$font-size.s5", @@ -184,9 +184,9 @@ "field": { "minHeight": "52px", "cornerRadius": "$radius.s2_5", - "gap": "$unit.s2", - "paddingX": "$unit.s4", - "paddingY": "$unit.s3" + "gap": "$dimension.s2", + "paddingX": "$dimension.s4", + "paddingY": "$dimension.s3" }, "value": { "fontSize": "$font-size.s5", @@ -197,18 +197,18 @@ "lineHeight": "$line-height.s5" }, "prefixIcon": { - "size": "$unit.s5" + "size": "$dimension.s5" }, "suffixText": { "fontSize": "$font-size.s5", "lineHeight": "$line-height.s5" }, "suffixIcon": { - "size": "$unit.s5" + "size": "$dimension.s5" }, "footer": { - "gap": "$unit.s3_5", - "paddingTop": "$unit.s2", + "gap": "$dimension.s3_5", + "paddingTop": "$dimension.s2", "minHeight": "20px" }, "description": { @@ -220,8 +220,8 @@ "lineHeight": "$line-height.s4" }, "errorIcon": { - "size": "$unit.s4", - "marginRight": "$unit.s1" + "size": "$dimension.s4", + "marginRight": "$dimension.s1" }, "characterCount": { "fontSize": "$font-size.s2", @@ -236,7 +236,7 @@ "size=medium": { "enabled": { "header": { - "paddingBottom": "$unit.s3" + "paddingBottom": "$dimension.s3" }, "label": { "fontSize": "$font-size.s4", @@ -249,9 +249,9 @@ "field": { "minHeight": "40px", "cornerRadius": "$radius.s2", - "gap": "$unit.s1_5", - "paddingX": "$unit.s3_5", - "paddingY": "$unit.s2_5" + "gap": "$dimension.s1_5", + "paddingX": "$dimension.s3_5", + "paddingY": "$dimension.s2_5" }, "value": { "fontSize": "$font-size.s4", @@ -262,19 +262,19 @@ "lineHeight": "$line-height.s4" }, "prefixIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "suffixText": { "fontSize": "$font-size.s4", "lineHeight": "$line-height.s4" }, "suffixIcon": { - "size": "$unit.s4" + "size": "$dimension.s4" }, "footer": { - "gap": "$unit.s3_5", - "paddingTop": "$unit.s2", - "minHeight": "$unit.s4" + "gap": "$dimension.s3_5", + "paddingTop": "$dimension.s2", + "minHeight": "$dimension.s4" }, "description": { "fontSize": "$font-size.s2", @@ -285,8 +285,8 @@ "lineHeight": "$line-height.s2" }, "errorIcon": { - "size": "$unit.s3_5", - "marginRight": "$unit.s1" + "size": "$dimension.s3_5", + "marginRight": "$dimension.s1" }, "characterCount": { "fontSize": "$font-size.s2", diff --git a/docs/public/rootage/components/toggle-button.json b/docs/public/rootage/components/toggle-button.json index 036992956..e77a29ca8 100644 --- a/docs/public/rootage/components/toggle-button.json +++ b/docs/public/rootage/components/toggle-button.json @@ -163,17 +163,17 @@ "size=xsmall": { "enabled": { "root": { - "minHeight": "$unit.s8", + "minHeight": "$dimension.s8", "cornerRadius": "$radius.full", - "gap": "$unit.s1", - "paddingX": "$unit.s3_5", - "paddingY": "$unit.s1_5" + "gap": "$dimension.s1", + "paddingX": "$dimension.s3_5", + "paddingY": "$dimension.s1_5" }, "prefixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "suffixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "label": { "fontSize": "$font-size.s4" @@ -187,17 +187,17 @@ "size=small": { "enabled": { "root": { - "minHeight": "$unit.s9", + "minHeight": "$dimension.s9", "cornerRadius": "$radius.full", - "gap": "$unit.s1", - "paddingX": "$unit.s4", - "paddingY": "$unit.s2" + "gap": "$dimension.s1", + "paddingX": "$dimension.s4", + "paddingY": "$dimension.s2" }, "prefixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "suffixIcon": { - "size": "$unit.s3_5" + "size": "$dimension.s3_5" }, "label": { "fontSize": "$font-size.s4" diff --git a/docs/public/rootage/components/top-navigation.json b/docs/public/rootage/components/top-navigation.json index 1ccf10cc9..d939c36a9 100644 --- a/docs/public/rootage/components/top-navigation.json +++ b/docs/public/rootage/components/top-navigation.json @@ -9,7 +9,7 @@ "enabled": { "root": { "minHeight": "44px", - "paddingX": "$unit.s4" + "paddingX": "$dimension.s4" }, "title": { "fontSize": "$font-size.s6-static", @@ -25,7 +25,7 @@ "enabled": { "root": { "minHeight": "56px", - "paddingX": "$unit.s4" + "paddingX": "$dimension.s4" }, "title": { "fontSize": "$font-size.s6-static", diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json index ce8d8d4c0..c2c82aaf1 100644 --- a/docs/public/rootage/parsed.json +++ b/docs/public/rootage/parsed.json @@ -5423,7 +5423,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s0_5" }, @@ -5443,7 +5443,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" }, @@ -5463,7 +5463,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" }, @@ -5483,7 +5483,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" }, @@ -5503,7 +5503,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" }, @@ -5523,7 +5523,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" }, @@ -5543,7 +5543,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" }, @@ -5563,7 +5563,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" }, @@ -5583,7 +5583,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4_5" }, @@ -5603,7 +5603,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" }, @@ -5623,7 +5623,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s6" }, @@ -5643,7 +5643,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s7" }, @@ -5663,7 +5663,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" }, @@ -5683,7 +5683,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s9" }, @@ -5703,7 +5703,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s10" }, @@ -5723,7 +5723,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s12" }, @@ -5743,7 +5743,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s13" }, @@ -5763,7 +5763,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s14" }, @@ -5783,7 +5783,7 @@ "token": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s16" }, @@ -5803,7 +5803,8 @@ "token": { "type": "token", "group": [ - "horizontal-spacing" + "dimension", + "spacing-x" ], "key": "between-chips" }, @@ -5813,7 +5814,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -5826,7 +5827,8 @@ "token": { "type": "token", "group": [ - "horizontal-spacing" + "dimension", + "spacing-x" ], "key": "global-gutter" }, @@ -5836,7 +5838,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -7504,7 +7506,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" } @@ -7565,7 +7567,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -7575,7 +7577,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -7585,7 +7587,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -7600,7 +7602,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -7615,7 +7617,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -7660,7 +7662,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" } @@ -7670,7 +7672,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -7680,7 +7682,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -7695,7 +7697,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -7724,7 +7726,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s9" } @@ -7785,7 +7787,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -7795,7 +7797,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -7805,7 +7807,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -7820,7 +7822,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -7835,7 +7837,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -7880,7 +7882,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s9" } @@ -7890,7 +7892,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -7900,7 +7902,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -7915,7 +7917,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -7944,7 +7946,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s10" } @@ -8005,7 +8007,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -8015,7 +8017,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -8025,7 +8027,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -8040,7 +8042,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -8055,7 +8057,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -8100,7 +8102,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s10" } @@ -8110,7 +8112,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -8120,7 +8122,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -8162,7 +8164,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s13" } @@ -8223,7 +8225,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -8233,7 +8235,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -8243,7 +8245,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -8314,7 +8316,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s13" } @@ -8324,7 +8326,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -8334,7 +8336,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -8614,7 +8616,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" } @@ -8624,7 +8626,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -8634,7 +8636,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -8664,7 +8666,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -8679,7 +8681,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -8723,7 +8725,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s9" } @@ -8733,7 +8735,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -8743,7 +8745,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -8773,7 +8775,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -8788,7 +8790,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -8833,7 +8835,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -8863,7 +8865,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" } @@ -8878,7 +8880,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -8908,7 +8910,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -8938,7 +8940,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s9" } @@ -8953,7 +8955,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -9015,7 +9017,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -9025,7 +9027,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -9035,7 +9037,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -9156,7 +9158,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -9166,7 +9168,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -9195,7 +9197,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -9472,7 +9474,8 @@ "value": { "type": "token", "group": [ - "horizontal-spacing" + "dimension", + "spacing-x" ], "key": "global-gutter" } @@ -9482,7 +9485,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -9547,7 +9550,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -9577,7 +9580,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -10195,7 +10198,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s6" } @@ -10205,7 +10208,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -10215,7 +10218,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -10269,7 +10272,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -10279,7 +10282,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -10289,7 +10292,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s0_5" } @@ -11377,7 +11380,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -11387,7 +11390,8 @@ "value": { "type": "token", "group": [ - "horizontal-spacing" + "dimension", + "spacing-x" ], "key": "global-gutter" } @@ -11397,7 +11401,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s6" } @@ -11407,7 +11411,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -11422,7 +11426,8 @@ "value": { "type": "token", "group": [ - "horizontal-spacing" + "dimension", + "spacing-x" ], "key": "global-gutter" } @@ -11432,7 +11437,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -11442,7 +11447,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -11586,7 +11591,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -11596,7 +11601,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -11653,7 +11658,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -11663,7 +11668,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -11716,7 +11721,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -11761,7 +11766,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s10" } @@ -11776,7 +11781,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -11791,7 +11796,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -12585,7 +12590,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -13098,7 +13103,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" } @@ -13138,7 +13143,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -13177,7 +13182,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s9" } @@ -13217,7 +13222,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s6" } @@ -13372,7 +13377,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -13382,7 +13387,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -13864,7 +13869,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -14369,7 +14374,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" } @@ -14379,7 +14384,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -14389,7 +14394,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -14419,7 +14424,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -14434,7 +14439,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -14478,7 +14483,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s9" } @@ -14488,7 +14493,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -14498,7 +14503,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -14528,7 +14533,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -14543,7 +14548,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -14588,7 +14593,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -14618,7 +14623,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" } @@ -14633,7 +14638,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -14663,7 +14668,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -14693,7 +14698,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s9" } @@ -14708,7 +14713,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -14832,7 +14837,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" } @@ -14842,7 +14847,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -14852,7 +14857,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -14936,7 +14941,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -14951,7 +14956,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -14961,7 +14966,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -15320,7 +15325,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -15330,7 +15335,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -15340,7 +15345,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -15425,7 +15430,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -15435,7 +15440,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -15445,7 +15450,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -15673,7 +15678,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -15683,7 +15688,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -15709,7 +15714,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -15924,7 +15929,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -15934,7 +15939,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -15949,7 +15954,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -15959,7 +15964,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -15989,7 +15994,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s10" } @@ -16004,7 +16009,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -16057,7 +16062,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s10" } @@ -16102,7 +16107,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s10" } @@ -16117,7 +16122,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -16132,7 +16137,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -17017,7 +17022,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s10" } @@ -17054,7 +17059,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s6" } @@ -17577,7 +17582,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s6" } @@ -17592,7 +17597,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -17614,7 +17619,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -17643,7 +17648,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -17658,7 +17663,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -17680,7 +17685,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -17709,7 +17714,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4_5" } @@ -17724,7 +17729,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -18200,7 +18205,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" } @@ -18220,7 +18225,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -18230,7 +18235,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -18240,7 +18245,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -18353,7 +18358,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s9" } @@ -18373,7 +18378,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -18383,7 +18388,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -18393,7 +18398,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -18510,7 +18515,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" } @@ -18530,7 +18535,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -18786,7 +18791,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -18840,7 +18845,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -18850,7 +18855,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -18860,7 +18865,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -18904,7 +18909,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s0_5" } @@ -19011,7 +19016,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s6" } @@ -19066,7 +19071,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -19081,7 +19086,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s6" } @@ -19136,7 +19141,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -19582,7 +19587,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -19592,7 +19597,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -19656,7 +19661,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -19666,7 +19671,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -19676,7 +19681,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -19804,7 +19809,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -20281,7 +20286,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -20312,7 +20317,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s0_5" } @@ -20395,7 +20400,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -20405,7 +20410,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -20467,7 +20472,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -20477,7 +20482,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -20608,7 +20613,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -20722,7 +20727,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s0_5" } @@ -20760,7 +20765,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -20775,7 +20780,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s0_5" } @@ -20996,7 +21001,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -21011,7 +21016,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -21080,7 +21085,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -21095,7 +21100,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -21164,7 +21169,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -21179,7 +21184,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -21772,7 +21777,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -21782,7 +21787,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -21865,7 +21870,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -21875,7 +21880,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -21885,7 +21890,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -21950,7 +21955,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -21990,7 +21995,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -22005,7 +22010,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -22015,7 +22020,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -22088,7 +22093,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -22098,7 +22103,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -22177,7 +22182,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -22187,7 +22192,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -22270,7 +22275,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -22280,7 +22285,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -22290,7 +22295,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -22355,7 +22360,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -22395,7 +22400,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s5" } @@ -22410,7 +22415,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -22420,7 +22425,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -22493,7 +22498,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -22503,7 +22508,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -22582,7 +22587,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3" } @@ -22665,7 +22670,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -22675,7 +22680,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -22685,7 +22690,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2_5" } @@ -22750,7 +22755,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -22790,7 +22795,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -22805,7 +22810,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -22815,7 +22820,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -22825,7 +22830,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -22890,7 +22895,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -22900,7 +22905,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -23773,7 +23778,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s8" } @@ -23793,7 +23798,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -23803,7 +23808,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -23813,7 +23818,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1_5" } @@ -23828,7 +23833,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -23843,7 +23848,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -23908,7 +23913,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s9" } @@ -23928,7 +23933,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s1" } @@ -23938,7 +23943,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -23948,7 +23953,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s2" } @@ -23963,7 +23968,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -23978,7 +23983,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s3_5" } @@ -24057,7 +24062,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } @@ -24140,7 +24145,7 @@ "value": { "type": "token", "group": [ - "unit" + "dimension" ], "key": "s4" } diff --git a/docs/public/rootage/unit.json b/docs/public/rootage/unit.json index 20cbe0dba..c905d343a 100644 --- a/docs/public/rootage/unit.json +++ b/docs/public/rootage/unit.json @@ -7,111 +7,111 @@ "data": { "collection": "global", "tokens": { - "$unit.s0_5": { + "$dimension.s0_5": { "values": { "default": "2px" } }, - "$unit.s1": { + "$dimension.s1": { "values": { "default": "4px" } }, - "$unit.s1_5": { + "$dimension.s1_5": { "values": { "default": "6px" } }, - "$unit.s2": { + "$dimension.s2": { "values": { "default": "8px" } }, - "$unit.s2_5": { + "$dimension.s2_5": { "values": { "default": "10px" } }, - "$unit.s3": { + "$dimension.s3": { "values": { "default": "12px" } }, - "$unit.s3_5": { + "$dimension.s3_5": { "values": { "default": "14px" } }, - "$unit.s4": { + "$dimension.s4": { "values": { "default": "16px" } }, - "$unit.s4_5": { + "$dimension.s4_5": { "values": { "default": "18px" } }, - "$unit.s5": { + "$dimension.s5": { "values": { "default": "20px" } }, - "$unit.s6": { + "$dimension.s6": { "values": { "default": "24px" } }, - "$unit.s7": { + "$dimension.s7": { "values": { "default": "28px" } }, - "$unit.s8": { + "$dimension.s8": { "values": { "default": "32px" } }, - "$unit.s9": { + "$dimension.s9": { "values": { "default": "36px" } }, - "$unit.s10": { + "$dimension.s10": { "values": { "default": "40px" } }, - "$unit.s12": { + "$dimension.s12": { "values": { "default": "48px" } }, - "$unit.s13": { + "$dimension.s13": { "values": { "default": "52px" } }, - "$unit.s14": { + "$dimension.s14": { "values": { "default": "56px" } }, - "$unit.s16": { + "$dimension.s16": { "values": { "default": "64px" } }, - "$horizontal-spacing.between-chips": { + "$dimension.spacing-x.between-chips": { "description": "Chip 사이의 수평 간격에 사용합니다.", "values": { - "default": "$unit.s2" + "default": "$dimension.s2" } }, - "$horizontal-spacing.global-gutter": { + "$dimension.spacing-x.global-gutter": { "description": "화면 전체에 적용되는 기본 수평 padding 값입니다.", "values": { - "default": "$unit.s4" + "default": "$dimension.s4" } } } diff --git a/examples/stackflow-spa/src/components/ComponentShowcase.css.ts b/examples/stackflow-spa/src/components/ComponentShowcase.css.ts index 5745c365d..637da6fc1 100644 --- a/examples/stackflow-spa/src/components/ComponentShowcase.css.ts +++ b/examples/stackflow-spa/src/components/ComponentShowcase.css.ts @@ -7,9 +7,9 @@ export const root = style({ justifyContent: "center", justifyItems: "start", - paddingBlock: vars.$unit.s4, - paddingInline: vars.$unit.s4, - gap: vars.$unit.s4, + paddingBlock: vars.$dimension.s4, + paddingInline: vars.$dimension.s4, + gap: vars.$dimension.s4, transformOrigin: "top left", }); diff --git a/examples/stackflow-spa/src/components/ControlPanel.css.ts b/examples/stackflow-spa/src/components/ControlPanel.css.ts index 80409ea83..e9f9c3bba 100644 --- a/examples/stackflow-spa/src/components/ControlPanel.css.ts +++ b/examples/stackflow-spa/src/components/ControlPanel.css.ts @@ -19,8 +19,8 @@ export const item = style({ justifyContent: "space-between", alignItems: "center", - paddingInline: vars.$unit.s4, - minHeight: vars.$unit.s13, + paddingInline: vars.$dimension.s4, + minHeight: vars.$dimension.s13, borderBottom: `1px solid ${vars.$color.stroke.neutral}`, }); diff --git a/examples/stackflow-spa/src/components/List.css.ts b/examples/stackflow-spa/src/components/List.css.ts index 2780c0601..239668540 100644 --- a/examples/stackflow-spa/src/components/List.css.ts +++ b/examples/stackflow-spa/src/components/List.css.ts @@ -11,8 +11,8 @@ export const item = style({ justifyContent: "space-between", alignItems: "center", - paddingInline: vars.$unit.s4, - minHeight: vars.$unit.s13, + paddingInline: vars.$dimension.s4, + minHeight: vars.$dimension.s13, borderBottom: `1px solid ${vars.$color.stroke.neutral}`, ":last-child": { @@ -38,6 +38,6 @@ export const icon = style({ justifyContent: "center", color: vars.$color.fg.neutralMuted, - width: vars.$unit.s4, - height: vars.$unit.s4, + width: vars.$dimension.s4, + height: vars.$dimension.s4, }); diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx index d4a054e33..361ad56e0 100644 --- a/packages/react/src/components/Box/Box.tsx +++ b/packages/react/src/components/Box/Box.tsx @@ -25,7 +25,7 @@ function handleSpacing(spacing: string | undefined) { return undefined; } // @ts-ignore - return vars.$unit[spacing] ?? vars.$horizontalSpacing[spacing] ?? undefined; + return vars.$dimension[spacing] ?? vars.$horizontalSpacing[spacing] ?? undefined; } function handleSize(size: string | undefined) { @@ -36,7 +36,7 @@ function handleSize(size: string | undefined) { return "100%"; } // @ts-ignore - return vars.$unit[size] ?? size; + return vars.$dimension[size] ?? size; } function handleRadius(radius: string | undefined) { diff --git a/packages/rootage/components/action-button.yaml b/packages/rootage/components/action-button.yaml index ea1a1fa09..12264d69d 100644 --- a/packages/rootage/components/action-button.yaml +++ b/packages/rootage/components/action-button.yaml @@ -212,7 +212,7 @@ data: size=xsmall: enabled: root: - minHeight: $unit.s8 + minHeight: $dimension.s8 cornerRadius: $radius.full progressCircle: size: 14px @@ -220,27 +220,27 @@ data: size=xsmall, layout=with text: enabled: root: - gap: $unit.s1 - paddingX: $unit.s3_5 - paddingY: $unit.s1_5 + gap: $dimension.s1 + paddingX: $dimension.s3_5 + paddingY: $dimension.s1_5 prefixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 suffixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 label: fontSize: $font-size.s4 size=xsmall, layout=icon only: enabled: root: - minWidth: $unit.s8 - paddingX: $unit.s1_5 - paddingY: $unit.s1_5 + minWidth: $dimension.s8 + paddingX: $dimension.s1_5 + paddingY: $dimension.s1_5 icon: - size: $unit.s3_5 + size: $dimension.s3_5 size=small: enabled: root: - minHeight: $unit.s9 + minHeight: $dimension.s9 cornerRadius: $radius.s2 progressCircle: size: 14px @@ -248,27 +248,27 @@ data: size=small, layout=with text: enabled: root: - gap: $unit.s1 - paddingX: $unit.s3_5 - paddingY: $unit.s2 + gap: $dimension.s1 + paddingX: $dimension.s3_5 + paddingY: $dimension.s2 prefixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 suffixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 label: fontSize: $font-size.s4 size=small, layout=icon only: enabled: root: - minWidth: $unit.s9 - paddingX: $unit.s2 - paddingY: $unit.s2 + minWidth: $dimension.s9 + paddingX: $dimension.s2 + paddingY: $dimension.s2 icon: - size: $unit.s4 + size: $dimension.s4 size=medium: enabled: root: - minHeight: $unit.s10 + minHeight: $dimension.s10 cornerRadius: $radius.s2 progressCircle: size: 16px @@ -276,27 +276,27 @@ data: size=medium, layout=with text: enabled: root: - gap: $unit.s1 - paddingX: $unit.s4 - paddingY: $unit.s2_5 + gap: $dimension.s1 + paddingX: $dimension.s4 + paddingY: $dimension.s2_5 prefixIcon: - size: $unit.s4 + size: $dimension.s4 suffixIcon: - size: $unit.s4 + size: $dimension.s4 label: fontSize: $font-size.s4 size=medium, layout=icon only: enabled: root: - minWidth: $unit.s10 - paddingX: $unit.s2_5 - paddingY: $unit.s2_5 + minWidth: $dimension.s10 + paddingX: $dimension.s2_5 + paddingY: $dimension.s2_5 icon: size: 18px size=large: enabled: root: - minHeight: $unit.s13 + minHeight: $dimension.s13 cornerRadius: $radius.s3 progressCircle: size: 18px @@ -304,9 +304,9 @@ data: size=large, layout=with text: enabled: root: - gap: $unit.s2 - paddingX: $unit.s5 - paddingY: $unit.s3_5 + gap: $dimension.s2 + paddingX: $dimension.s5 + paddingY: $dimension.s3_5 prefixIcon: size: 22px suffixIcon: @@ -316,8 +316,8 @@ data: size=large, layout=icon only: enabled: root: - minWidth: $unit.s13 - paddingX: $unit.s3_5 - paddingY: $unit.s3_5 + minWidth: $dimension.s13 + paddingX: $dimension.s3_5 + paddingY: $dimension.s3_5 icon: size: 22px diff --git a/packages/rootage/components/action-chip.yaml b/packages/rootage/components/action-chip.yaml index 5e10ceb7c..acff3feee 100644 --- a/packages/rootage/components/action-chip.yaml +++ b/packages/rootage/components/action-chip.yaml @@ -36,48 +36,48 @@ data: size=small: enabled: root: - minHeight: $unit.s8 - paddingY: $unit.s1_5 - gap: $unit.s1 + minHeight: $dimension.s8 + paddingY: $dimension.s1_5 + gap: $dimension.s1 label: fontSize: $font-size.s4 prefixIcon: - size: $unit.s4 + size: $dimension.s4 suffixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 count: fontSize: $font-size.s4 size=medium: enabled: root: - minHeight: $unit.s9 - paddingY: $unit.s2 - gap: $unit.s1 + minHeight: $dimension.s9 + paddingY: $dimension.s2 + gap: $dimension.s1 label: fontSize: $font-size.s4 prefixIcon: - size: $unit.s4 + size: $dimension.s4 suffixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 count: fontSize: $font-size.s4 size=small,layout=with text: enabled: root: - paddingX: $unit.s3 + paddingX: $dimension.s3 size=small,layout=icon only: enabled: root: - minWidth: $unit.s8 + minWidth: $dimension.s8 icon: - size: $unit.s4 + size: $dimension.s4 size=medium,layout=with text: enabled: root: - paddingX: $unit.s3_5 + paddingX: $dimension.s3_5 size=medium,layout=icon only: enabled: root: - minWidth: $unit.s9 + minWidth: $dimension.s9 icon: - size: $unit.s4 + size: $dimension.s4 diff --git a/packages/rootage/components/action-sheet-close-button.yaml b/packages/rootage/components/action-sheet-close-button.yaml index 0f8de25d7..4387673ec 100644 --- a/packages/rootage/components/action-sheet-close-button.yaml +++ b/packages/rootage/components/action-sheet-close-button.yaml @@ -10,9 +10,9 @@ data: color: $color.bg.neutral-weak minHeight: 52px cornerRadius: $radius.s3 - paddingX: $unit.s5 - paddingY: $unit.s3_5 - gap: $unit.s3 + paddingX: $dimension.s5 + paddingY: $dimension.s3_5 + gap: $dimension.s3 label: color: $color.fg.neutral fontSize: $font-size.s5 diff --git a/packages/rootage/components/action-sheet-item.yaml b/packages/rootage/components/action-sheet-item.yaml index ca4d0076a..e2524dbbe 100644 --- a/packages/rootage/components/action-sheet-item.yaml +++ b/packages/rootage/components/action-sheet-item.yaml @@ -9,11 +9,11 @@ data: root: color: $color.bg.neutral-weak minHeight: 52px - paddingX: $unit.s3_5 - paddingY: $unit.s4 + paddingX: $dimension.s3_5 + paddingY: $dimension.s4 strokeBottomWidth: 1px strokeColor: $color.stroke.neutral - gap: $unit.s3 + gap: $dimension.s3 prefixIcon: size: 22px label: diff --git a/packages/rootage/components/action-sheet.yaml b/packages/rootage/components/action-sheet.yaml index 78747a5fe..254d7074e 100644 --- a/packages/rootage/components/action-sheet.yaml +++ b/packages/rootage/components/action-sheet.yaml @@ -16,8 +16,8 @@ data: exitOpacity: 0 content: color: $color.bg.layer-floating - paddingX: $horizontal-spacing.global-gutter - paddingY: $unit.s4 + paddingX: $dimension.spacing-x.global-gutter + paddingY: $dimension.s4 cornerTopRadius: $radius.s6 enterDuration: $duration.s6 enterTimingFunction: $timing-function.enter-expressive @@ -25,8 +25,8 @@ data: exitDuration: $duration.s4 exitTimingFunction: $timing-function.exit list: - gap: $unit.s2_5 + gap: $dimension.s2_5 group: cornerRadius: $radius.s4 footer: - paddingTop: $unit.s2_5 + paddingTop: $dimension.s2_5 diff --git a/packages/rootage/components/badge.yaml b/packages/rootage/components/badge.yaml index 570b2b75c..9f35af538 100644 --- a/packages/rootage/components/badge.yaml +++ b/packages/rootage/components/badge.yaml @@ -7,18 +7,18 @@ data: size=large: enabled: root: - minHeight: $unit.s6 - paddingX: $unit.s2 - paddingY: $unit.s1 + minHeight: $dimension.s6 + paddingX: $dimension.s2 + paddingY: $dimension.s1 label: fontSize: $font-size.s2 lineHeight: $line-height.s2 size=medium: enabled: root: - minHeight: $unit.s5 - paddingX: $unit.s1_5 - paddingY: $unit.s0_5 + minHeight: $dimension.s5 + paddingX: $dimension.s1_5 + paddingY: $dimension.s0_5 label: fontSize: $font-size.s1 lineHeight: $line-height.s1 diff --git a/packages/rootage/components/bottom-sheet.yaml b/packages/rootage/components/bottom-sheet.yaml index 357625ba6..bdb6b2d76 100644 --- a/packages/rootage/components/bottom-sheet.yaml +++ b/packages/rootage/components/bottom-sheet.yaml @@ -23,14 +23,14 @@ data: exitDuration: $duration.s4 exitTimingFunction: $timing-function.exit header: - gap: $unit.s2 - paddingX: $horizontal-spacing.global-gutter - paddingTop: $unit.s6 - paddingBottom: $unit.s4 + gap: $dimension.s2 + paddingX: $dimension.spacing-x.global-gutter + paddingTop: $dimension.s6 + paddingBottom: $dimension.s4 footer: - paddingX: $horizontal-spacing.global-gutter - paddingTop: $unit.s3 - paddingBottom: $unit.s4 + paddingX: $dimension.spacing-x.global-gutter + paddingTop: $dimension.s3 + paddingBottom: $dimension.s4 title: color: $color.fg.neutral fontSize: $font-size.s8 @@ -46,8 +46,8 @@ data: cornerRadius: $radius.full targetSize: 44px size: 28px - fromTop: $unit.s5 - fromRight: $unit.s5 + fromTop: $dimension.s5 + fromRight: $dimension.s5 closeIcon: color: $color.fg.neutral size: 14px diff --git a/packages/rootage/components/callout.yaml b/packages/rootage/components/callout.yaml index aa85bdb53..e88f8f665 100644 --- a/packages/rootage/components/callout.yaml +++ b/packages/rootage/components/callout.yaml @@ -7,24 +7,24 @@ data: base: enabled: root: - padding: $unit.s3_5 - gap: $unit.s3 + padding: $dimension.s3_5 + gap: $dimension.s3 cornerRadius: $radius.s2_5 fontSize: $font-size.s4 lineHeight: $line-height.s5 minHeight: 50px icon: - size: $unit.s4 + size: $dimension.s4 title: fontWeight: $font-weight.bold description: fontWeight: $font-weight.regular dismissButton: - size: $unit.s10 + size: $dimension.s10 dismissIcon: - size: $unit.s4 + size: $dimension.s4 actionableIcon: - size: $unit.s4 + size: $dimension.s4 tone=neutral: enabled: diff --git a/packages/rootage/components/checkbox.yaml b/packages/rootage/components/checkbox.yaml index d6cfb3c41..84cf0b453 100644 --- a/packages/rootage/components/checkbox.yaml +++ b/packages/rootage/components/checkbox.yaml @@ -10,7 +10,7 @@ data: label: color: $color.fg.neutral root: - gap: $unit.s2 + gap: $dimension.s2 weight=default: enabled: @@ -80,23 +80,23 @@ data: size=medium: enabled: root: - minHeight: $unit.s8 + minHeight: $dimension.s8 label: fontSize: $font-size.s4 lineHeight: $line-height.s4 control: - size: $unit.s5 + size: $dimension.s5 cornerRadius: $radius.s1 size=large: enabled: root: - minHeight: $unit.s9 + minHeight: $dimension.s9 label: fontSize: $font-size.s5 lineHeight: $line-height.s5 control: - size: $unit.s6 + size: $dimension.s6 cornerRadius: $radius.s1_5 variant=square,size=medium: diff --git a/packages/rootage/components/chip-tab.yaml b/packages/rootage/components/chip-tab.yaml index 0ae935f5e..90879f3fc 100644 --- a/packages/rootage/components/chip-tab.yaml +++ b/packages/rootage/components/chip-tab.yaml @@ -7,8 +7,8 @@ data: base: enabled: root: - paddingX: $unit.s3_5 - paddingY: $unit.s2 + paddingX: $dimension.s3_5 + paddingY: $dimension.s2 cornerRadius: $radius.full minHeight: 36px label: diff --git a/packages/rootage/components/chip-tablist.yaml b/packages/rootage/components/chip-tablist.yaml index df8f4b98d..a992a072a 100644 --- a/packages/rootage/components/chip-tablist.yaml +++ b/packages/rootage/components/chip-tablist.yaml @@ -7,7 +7,7 @@ data: base: enabled: root: - paddingX: $unit.s4 + paddingX: $dimension.s4 variant=neutral solid: enabled: triggerList: diff --git a/packages/rootage/components/control-chip.yaml b/packages/rootage/components/control-chip.yaml index 7ac32c902..9478e62f6 100644 --- a/packages/rootage/components/control-chip.yaml +++ b/packages/rootage/components/control-chip.yaml @@ -59,48 +59,48 @@ data: size=small: enabled: root: - minHeight: $unit.s8 - paddingY: $unit.s1_5 - gap: $unit.s1 + minHeight: $dimension.s8 + paddingY: $dimension.s1_5 + gap: $dimension.s1 label: fontSize: $font-size.s4 prefixIcon: - size: $unit.s4 + size: $dimension.s4 suffixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 count: fontSize: $font-size.s4 size=medium: enabled: root: - minHeight: $unit.s9 - paddingY: $unit.s2 - gap: $unit.s1 + minHeight: $dimension.s9 + paddingY: $dimension.s2 + gap: $dimension.s1 label: fontSize: $font-size.s4 prefixIcon: - size: $unit.s4 + size: $dimension.s4 suffixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 count: fontSize: $font-size.s4 size=small,layout=with text: enabled: root: - paddingX: $unit.s3 + paddingX: $dimension.s3 size=small,layout=icon only: enabled: root: - minWidth: $unit.s8 + minWidth: $dimension.s8 icon: - size: $unit.s4 + size: $dimension.s4 size=medium,layout=with text: enabled: root: - paddingX: $unit.s3_5 + paddingX: $dimension.s3_5 size=medium,layout=icon only: enabled: root: - minWidth: $unit.s9 + minWidth: $dimension.s9 icon: - size: $unit.s4 + size: $dimension.s4 diff --git a/packages/rootage/components/dialog.yaml b/packages/rootage/components/dialog.yaml index 7bfa0e684..e39c5e335 100644 --- a/packages/rootage/components/dialog.yaml +++ b/packages/rootage/components/dialog.yaml @@ -17,9 +17,9 @@ data: content: color: $color.bg.layer-default cornerRadius: $radius.s5 - marginX: $unit.s8 - paddingX: $unit.s5 - paddingY: $unit.s5 + marginX: $dimension.s8 + paddingX: $dimension.s5 + paddingY: $dimension.s5 maxWidth: 272px enterDuration: $duration.s4 enterTimingFunction: $timing-function.enter-expressive @@ -29,10 +29,10 @@ data: exitTimingFunction: $timing-function.exit exitOpacity: 0 header: - gap: $unit.s1_5 + gap: $dimension.s1_5 footer: - paddingTop: $unit.s4 - gap: $unit.s2 + paddingTop: $dimension.s4 + gap: $dimension.s2 title: color: $color.fg.neutral fontSize: $font-size.s7 diff --git a/packages/rootage/components/extended-fab.yaml b/packages/rootage/components/extended-fab.yaml index 7fa2473e7..d679cc35c 100644 --- a/packages/rootage/components/extended-fab.yaml +++ b/packages/rootage/components/extended-fab.yaml @@ -42,9 +42,9 @@ data: enabled: root: minHeight: 40px - gap: $unit.s1 - paddingX: $unit.s3_5 - paddingY: $unit.s2_5 + gap: $dimension.s1 + paddingX: $dimension.s3_5 + paddingY: $dimension.s2_5 prefixIcon: size: 16px label: @@ -55,9 +55,9 @@ data: enabled: root: minHeight: 48px - gap: $unit.s1 - paddingX: $unit.s4 - paddingY: $unit.s3 + gap: $dimension.s1 + paddingX: $dimension.s4 + paddingY: $dimension.s3 prefixIcon: size: 16px label: diff --git a/packages/rootage/components/help-bubble.yaml b/packages/rootage/components/help-bubble.yaml index 37258b849..a87c72063 100644 --- a/packages/rootage/components/help-bubble.yaml +++ b/packages/rootage/components/help-bubble.yaml @@ -9,11 +9,11 @@ data: root: color: $color.bg.neutral-solid cornerRadius: $radius.s3 - paddingX: $unit.s3 - paddingY: $unit.s3 + paddingX: $dimension.s3 + paddingY: $dimension.s3 arrow: color: $color.bg.neutral-solid - size: $unit.s2_5 + size: $dimension.s2_5 title: color: $color.palette.static-white fontSize: $font-size.s3 diff --git a/packages/rootage/components/inline-banner.yaml b/packages/rootage/components/inline-banner.yaml index 7fcf921d8..5febd9581 100644 --- a/packages/rootage/components/inline-banner.yaml +++ b/packages/rootage/components/inline-banner.yaml @@ -7,32 +7,32 @@ data: base: enabled: root: - gap: $unit.s4 - paddingX: $unit.s4 + gap: $dimension.s4 + paddingX: $dimension.s4 content: - gap: $unit.s2 - paddingY: $unit.s2_5 + gap: $dimension.s2 + paddingY: $dimension.s2_5 fontSize: $font-size.s4 lineHeight: $line-height.s4 - minHeight: $unit.s10 + minHeight: $dimension.s10 icon: - size: $unit.s4 + size: $dimension.s4 marginY: 1.5px title: fontWeight: $font-weight.bold description: fontWeight: $font-weight.medium linkLabel: - height: $unit.s10 + height: $dimension.s10 fontWeight: $font-weight.regular fontSize: $font-size.s2 lineHeight: $line-height.s2 dismissButton: - size: $unit.s10 + size: $dimension.s10 dismissIcon: - size: $unit.s4 + size: $dimension.s4 actionableIcon: - size: $unit.s4 + size: $dimension.s4 variant=neutral weak: enabled: root: diff --git a/packages/rootage/components/progress-circle.yaml b/packages/rootage/components/progress-circle.yaml index f98ef8354..92613b06a 100644 --- a/packages/rootage/components/progress-circle.yaml +++ b/packages/rootage/components/progress-circle.yaml @@ -8,12 +8,12 @@ data: size=40: enabled: root: - size: $unit.s10 + size: $dimension.s10 thickness: 5px size=24: enabled: root: - size: $unit.s6 + size: $dimension.s6 thickness: 3px indeterminate=false: enabled: diff --git a/packages/rootage/components/radio.yaml b/packages/rootage/components/radio.yaml index a9a876d06..f7a237381 100644 --- a/packages/rootage/components/radio.yaml +++ b/packages/rootage/components/radio.yaml @@ -37,24 +37,24 @@ data: size=large: enabled: root: - size: $unit.s6 + size: $dimension.s6 icon: - size: $unit.s2_5 + size: $dimension.s2_5 disabled: icon: - size: $unit.s3 + size: $dimension.s3 size=medium: enabled: root: - size: $unit.s5 + size: $dimension.s5 icon: - size: $unit.s2 + size: $dimension.s2 disabled: icon: - size: $unit.s2_5 + size: $dimension.s2_5 size=small: enabled: root: - size: $unit.s4_5 + size: $dimension.s4_5 icon: - size: $unit.s2 + size: $dimension.s2 diff --git a/packages/rootage/components/reaction-button.yaml b/packages/rootage/components/reaction-button.yaml index 75077baee..a21acf68d 100644 --- a/packages/rootage/components/reaction-button.yaml +++ b/packages/rootage/components/reaction-button.yaml @@ -61,11 +61,11 @@ data: size=xsmall: enabled: root: - minHeight: $unit.s8 + minHeight: $dimension.s8 cornerRadius: $radius.full - gap: $unit.s1 - paddingX: $unit.s3 - paddingY: $unit.s1_5 + gap: $dimension.s1 + paddingX: $dimension.s3 + paddingY: $dimension.s1_5 prefixIcon: size: 18px label: @@ -80,11 +80,11 @@ data: size=small: enabled: root: - minHeight: $unit.s9 + minHeight: $dimension.s9 cornerRadius: $radius.full - gap: $unit.s1 - paddingX: $unit.s3_5 - paddingY: $unit.s2 + gap: $dimension.s1 + paddingX: $dimension.s3_5 + paddingY: $dimension.s2 prefixIcon: size: 18px label: diff --git a/packages/rootage/components/schema.json b/packages/rootage/components/schema.json index b4fa5ee43..03a5bf216 100644 --- a/packages/rootage/components/schema.json +++ b/packages/rootage/components/schema.json @@ -375,27 +375,27 @@ { "const": "$timing-function.exit", "title": "$timing-function.exit", "description": "default: 0.35, 0, 1, 1", "markdownDescription": "- default: `0.35, 0, 1, 1`" }, { "const": "$timing-function.enter-expressive", "title": "$timing-function.enter-expressive", "description": "default: 0.03, 0.4, 0.1, 1", "markdownDescription": "- default: `0.03, 0.4, 0.1, 1`" }, { "const": "$timing-function.exit-expressive", "title": "$timing-function.exit-expressive", "description": "default: 0.35, 0, 0.95, 0.55", "markdownDescription": "- default: `0.35, 0, 0.95, 0.55`" }, - { "const": "$unit.s0_5", "title": "$unit.s0_5", "description": "default: 2px", "markdownDescription": "- default: `2px`" }, - { "const": "$unit.s1", "title": "$unit.s1", "description": "default: 4px", "markdownDescription": "- default: `4px`" }, - { "const": "$unit.s1_5", "title": "$unit.s1_5", "description": "default: 6px", "markdownDescription": "- default: `6px`" }, - { "const": "$unit.s2", "title": "$unit.s2", "description": "default: 8px", "markdownDescription": "- default: `8px`" }, - { "const": "$unit.s2_5", "title": "$unit.s2_5", "description": "default: 10px", "markdownDescription": "- default: `10px`" }, - { "const": "$unit.s3", "title": "$unit.s3", "description": "default: 12px", "markdownDescription": "- default: `12px`" }, - { "const": "$unit.s3_5", "title": "$unit.s3_5", "description": "default: 14px", "markdownDescription": "- default: `14px`" }, - { "const": "$unit.s4", "title": "$unit.s4", "description": "default: 16px", "markdownDescription": "- default: `16px`" }, - { "const": "$unit.s4_5", "title": "$unit.s4_5", "description": "default: 18px", "markdownDescription": "- default: `18px`" }, - { "const": "$unit.s5", "title": "$unit.s5", "description": "default: 20px", "markdownDescription": "- default: `20px`" }, - { "const": "$unit.s6", "title": "$unit.s6", "description": "default: 24px", "markdownDescription": "- default: `24px`" }, - { "const": "$unit.s7", "title": "$unit.s7", "description": "default: 28px", "markdownDescription": "- default: `28px`" }, - { "const": "$unit.s8", "title": "$unit.s8", "description": "default: 32px", "markdownDescription": "- default: `32px`" }, - { "const": "$unit.s9", "title": "$unit.s9", "description": "default: 36px", "markdownDescription": "- default: `36px`" }, - { "const": "$unit.s10", "title": "$unit.s10", "description": "default: 40px", "markdownDescription": "- default: `40px`" }, - { "const": "$unit.s12", "title": "$unit.s12", "description": "default: 48px", "markdownDescription": "- default: `48px`" }, - { "const": "$unit.s13", "title": "$unit.s13", "description": "default: 52px", "markdownDescription": "- default: `52px`" }, - { "const": "$unit.s14", "title": "$unit.s14", "description": "default: 56px", "markdownDescription": "- default: `56px`" }, - { "const": "$unit.s16", "title": "$unit.s16", "description": "default: 64px", "markdownDescription": "- default: `64px`" }, - { "const": "$horizontal-spacing.between-chips", "title": "$horizontal-spacing.between-chips", "description": "default: $unit.s2", "markdownDescription": "- default: `$unit.s2`" }, - { "const": "$horizontal-spacing.global-gutter", "title": "$horizontal-spacing.global-gutter", "description": "default: $unit.s4", "markdownDescription": "- default: `$unit.s4`" } + { "const": "$dimension.s0_5", "title": "$dimension.s0_5", "description": "default: 2px", "markdownDescription": "- default: `2px`" }, + { "const": "$dimension.s1", "title": "$dimension.s1", "description": "default: 4px", "markdownDescription": "- default: `4px`" }, + { "const": "$dimension.s1_5", "title": "$dimension.s1_5", "description": "default: 6px", "markdownDescription": "- default: `6px`" }, + { "const": "$dimension.s2", "title": "$dimension.s2", "description": "default: 8px", "markdownDescription": "- default: `8px`" }, + { "const": "$dimension.s2_5", "title": "$dimension.s2_5", "description": "default: 10px", "markdownDescription": "- default: `10px`" }, + { "const": "$dimension.s3", "title": "$dimension.s3", "description": "default: 12px", "markdownDescription": "- default: `12px`" }, + { "const": "$dimension.s3_5", "title": "$dimension.s3_5", "description": "default: 14px", "markdownDescription": "- default: `14px`" }, + { "const": "$dimension.s4", "title": "$dimension.s4", "description": "default: 16px", "markdownDescription": "- default: `16px`" }, + { "const": "$dimension.s4_5", "title": "$dimension.s4_5", "description": "default: 18px", "markdownDescription": "- default: `18px`" }, + { "const": "$dimension.s5", "title": "$dimension.s5", "description": "default: 20px", "markdownDescription": "- default: `20px`" }, + { "const": "$dimension.s6", "title": "$dimension.s6", "description": "default: 24px", "markdownDescription": "- default: `24px`" }, + { "const": "$dimension.s7", "title": "$dimension.s7", "description": "default: 28px", "markdownDescription": "- default: `28px`" }, + { "const": "$dimension.s8", "title": "$dimension.s8", "description": "default: 32px", "markdownDescription": "- default: `32px`" }, + { "const": "$dimension.s9", "title": "$dimension.s9", "description": "default: 36px", "markdownDescription": "- default: `36px`" }, + { "const": "$dimension.s10", "title": "$dimension.s10", "description": "default: 40px", "markdownDescription": "- default: `40px`" }, + { "const": "$dimension.s12", "title": "$dimension.s12", "description": "default: 48px", "markdownDescription": "- default: `48px`" }, + { "const": "$dimension.s13", "title": "$dimension.s13", "description": "default: 52px", "markdownDescription": "- default: `52px`" }, + { "const": "$dimension.s14", "title": "$dimension.s14", "description": "default: 56px", "markdownDescription": "- default: `56px`" }, + { "const": "$dimension.s16", "title": "$dimension.s16", "description": "default: 64px", "markdownDescription": "- default: `64px`" }, + { "const": "$dimension.spacing-x.between-chips", "title": "$dimension.spacing-x.between-chips", "description": "default: $dimension.s2", "markdownDescription": "- default: `$dimension.s2`" }, + { "const": "$dimension.spacing-x.global-gutter", "title": "$dimension.spacing-x.global-gutter", "description": "default: $dimension.s4", "markdownDescription": "- default: `$dimension.s4`" } ] } } diff --git a/packages/rootage/components/segment.yaml b/packages/rootage/components/segment.yaml index 62a7a816a..1aca84540 100644 --- a/packages/rootage/components/segment.yaml +++ b/packages/rootage/components/segment.yaml @@ -8,9 +8,9 @@ data: base: enabled: root: - height: $unit.s8 + height: $dimension.s8 cornerRadius: $radius.full - paddingX: $unit.s4 + paddingX: $dimension.s4 minWidth: 86px label: fontSize: $font-size.s5 diff --git a/packages/rootage/components/segmented-control.yaml b/packages/rootage/components/segmented-control.yaml index 625b0c9e1..6475716c3 100644 --- a/packages/rootage/components/segmented-control.yaml +++ b/packages/rootage/components/segmented-control.yaml @@ -8,6 +8,6 @@ data: base: enabled: root: - padding: $unit.s1 + padding: $dimension.s1 cornerRadius: $radius.full color: $color.bg.neutral-weak diff --git a/packages/rootage/components/select-box.yaml b/packages/rootage/components/select-box.yaml index 0d9b71b18..eb0f9dfd2 100644 --- a/packages/rootage/components/select-box.yaml +++ b/packages/rootage/components/select-box.yaml @@ -7,14 +7,14 @@ data: base: enabled: root: - paddingX: $unit.s4 - paddingY: $unit.s5 - gap: $unit.s2_5 + paddingX: $dimension.s4 + paddingY: $dimension.s5 + gap: $dimension.s2_5 strokeWidth: 1px strokeColor: $color.stroke.neutral cornerRadius: $radius.s3 content: - gap: $unit.s0_5 + gap: $dimension.s0_5 label: color: $color.fg.neutral fontWeight: $font-weight.bold @@ -26,21 +26,21 @@ data: fontSize: $font-size.s4 lineHeight: $line-height.s4 checkboxControl: - size: $unit.s6 + size: $dimension.s6 color: $color.bg.layer-default strokeWidth: 1.25px strokeColor: $color.stroke.control cornerRadius: $radius.s1 checkboxIcon: - size: $unit.s3_5 + size: $dimension.s3_5 radioControl: - size: $unit.s6 + size: $dimension.s6 color: $color.bg.layer-default strokeWidth: 1.25px strokeColor: $color.stroke.control cornerRadius: $radius.full radioIcon: - size: $unit.s2_5 + size: $dimension.s2_5 cornerRadius: $radius.full enabled,pressed: diff --git a/packages/rootage/components/snackbar.yaml b/packages/rootage/components/snackbar.yaml index fb65f7190..c0ff7286b 100644 --- a/packages/rootage/components/snackbar.yaml +++ b/packages/rootage/components/snackbar.yaml @@ -8,17 +8,17 @@ data: enabled: # TODO: we might split region out to a separate component region: - paddingX: $unit.s2 - paddingY: $unit.s2 + paddingX: $dimension.s2 + paddingY: $dimension.s2 offsetDuration: $duration.s4 offsetTimingFunction: $timing-function.easing root: color: $color.bg.neutral-solid cornerRadius: $radius.s2 minHeight: 44px - paddingX: $unit.s4 - paddingY: $unit.s2_5 - gap: $unit.s2 + paddingX: $dimension.s4 + paddingY: $dimension.s2_5 + gap: $dimension.s2 enterOpacity: 0 enterDuration: $duration.s4 enterTimingFunction: $timing-function.enter @@ -33,7 +33,7 @@ data: prefixIcon: size: 24px actionButton: - targetPaddingX: $unit.s2 + targetPaddingX: $dimension.s2 targetMinHeight: 44px color: $color.fg.brand fontSize: $font-size.s4 diff --git a/packages/rootage/components/tab.yaml b/packages/rootage/components/tab.yaml index 29176e388..b8e342587 100644 --- a/packages/rootage/components/tab.yaml +++ b/packages/rootage/components/tab.yaml @@ -9,10 +9,10 @@ data: label: color: $color.fg.neutral-subtle notification: - size: $unit.s1 + size: $dimension.s1 cornerRadius: $radius.full color: $color.bg.brand-solid - marginLeft: $unit.s0_5 + marginLeft: $dimension.s0_5 selected: label: color: $color.fg.neutral @@ -23,8 +23,8 @@ data: enabled: root: minHeight: 44px - paddingX: $unit.s2_5 - paddingY: $unit.s2_5 + paddingX: $dimension.s2_5 + paddingY: $dimension.s2_5 label: fontSize: $font-size.s5 fontWeight: $font-weight.bold @@ -32,8 +32,8 @@ data: enabled: root: minHeight: 40px - paddingX: $unit.s2_5 - paddingY: $unit.s2_5 + paddingX: $dimension.s2_5 + paddingY: $dimension.s2_5 label: fontSize: $font-size.s4 fontWeight: $font-weight.bold diff --git a/packages/rootage/components/tablist.yaml b/packages/rootage/components/tablist.yaml index 63112d797..7a69aa672 100644 --- a/packages/rootage/components/tablist.yaml +++ b/packages/rootage/components/tablist.yaml @@ -16,7 +16,7 @@ data: layout=hug: enabled: root: - paddingX: $unit.s4 + paddingX: $dimension.s4 layout=fill: enabled: root: diff --git a/packages/rootage/components/text-button.yaml b/packages/rootage/components/text-button.yaml index 4e65d27e5..586d0ba65 100644 --- a/packages/rootage/components/text-button.yaml +++ b/packages/rootage/components/text-button.yaml @@ -7,14 +7,14 @@ data: base: enabled: root: - paddingY: $unit.s0_5 + paddingY: $dimension.s0_5 borderWidth: 0.125rem label: fontWeight: $font-weight.regular prefixIcon: - marginXEnd: $unit.s1 + marginXEnd: $dimension.s1 suffixIcon: - marginXStart: $unit.s0_5 + marginXStart: $dimension.s0_5 pressed: root: color: $color.palette.gray-200 @@ -43,9 +43,9 @@ data: root: cornerRadius: $radius.s1_5 prefixIcon: - size: $unit.s4 + size: $dimension.s4 suffixIcon: - size: $unit.s4 + size: $dimension.s4 label: fontSize: $font-size.s6 lineHeight: $line-height.s6 @@ -54,9 +54,9 @@ data: root: cornerRadius: $radius.s1_5 prefixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 suffixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 label: fontSize: $font-size.s5 lineHeight: $line-height.s5 @@ -65,9 +65,9 @@ data: root: cornerRadius: $radius.s1 prefixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 suffixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 label: fontSize: $font-size.s4 lineHeight: $line-height.s4 diff --git a/packages/rootage/components/text-field.yaml b/packages/rootage/components/text-field.yaml index da179fec1..02faf4f53 100644 --- a/packages/rootage/components/text-field.yaml +++ b/packages/rootage/components/text-field.yaml @@ -73,8 +73,8 @@ data: size=xlarge: enabled: header: - paddingBottom: $unit.s3 - gap: $unit.s1_5 + paddingBottom: $dimension.s3 + gap: $dimension.s1_5 label: fontSize: $font-size.s5 lineHeight: $line-height.s5 @@ -84,9 +84,9 @@ data: field: minHeight: 56px cornerRadius: $radius.s2_5 - gap: $unit.s2 - paddingX: $unit.s4 - paddingY: $unit.s3 + gap: $dimension.s2 + paddingX: $dimension.s4 + paddingY: $dimension.s3 value: fontSize: $font-size.s6 lineHeight: $line-height.s6 @@ -94,15 +94,15 @@ data: fontSize: $font-size.s6 lineHeight: $line-height.s6 prefixIcon: - size: $unit.s5 + size: $dimension.s5 suffixText: fontSize: $font-size.s6 lineHeight: $line-height.s6 suffixIcon: - size: $unit.s5 + size: $dimension.s5 footer: - gap: $unit.s3_5 - paddingTop: $unit.s2 + gap: $dimension.s3_5 + paddingTop: $dimension.s2 minHeight: 20px description: fontSize: $font-size.s4 @@ -111,8 +111,8 @@ data: fontSize: $font-size.s4 lineHeight: $line-height.s4 errorIcon: - size: $unit.s4 - marginRight: $unit.s1 + size: $dimension.s4 + marginRight: $dimension.s1 characterCount: fontSize: $font-size.s2 lineHeight: $line-height.s2 @@ -123,8 +123,8 @@ data: size=large: enabled: header: - paddingBottom: $unit.s3 - gap: $unit.s1_5 + paddingBottom: $dimension.s3 + gap: $dimension.s1_5 label: fontSize: $font-size.s5 lineHeight: $line-height.s5 @@ -134,9 +134,9 @@ data: field: minHeight: 52px cornerRadius: $radius.s2_5 - gap: $unit.s2 - paddingX: $unit.s4 - paddingY: $unit.s3 + gap: $dimension.s2 + paddingX: $dimension.s4 + paddingY: $dimension.s3 value: fontSize: $font-size.s5 lineHeight: $line-height.s5 @@ -144,15 +144,15 @@ data: fontSize: $font-size.s5 lineHeight: $line-height.s5 prefixIcon: - size: $unit.s5 + size: $dimension.s5 suffixText: fontSize: $font-size.s5 lineHeight: $line-height.s5 suffixIcon: - size: $unit.s5 + size: $dimension.s5 footer: - gap: $unit.s3_5 - paddingTop: $unit.s2 + gap: $dimension.s3_5 + paddingTop: $dimension.s2 minHeight: 20px description: fontSize: $font-size.s4 @@ -161,8 +161,8 @@ data: fontSize: $font-size.s4 lineHeight: $line-height.s4 errorIcon: - size: $unit.s4 - marginRight: $unit.s1 + size: $dimension.s4 + marginRight: $dimension.s1 characterCount: fontSize: $font-size.s2 lineHeight: $line-height.s2 @@ -173,7 +173,7 @@ data: size=medium: enabled: header: - paddingBottom: $unit.s3 + paddingBottom: $dimension.s3 label: fontSize: $font-size.s4 lineHeight: $line-height.s4 @@ -183,9 +183,9 @@ data: field: minHeight: 40px cornerRadius: $radius.s2 - gap: $unit.s1_5 - paddingX: $unit.s3_5 - paddingY: $unit.s2_5 + gap: $dimension.s1_5 + paddingX: $dimension.s3_5 + paddingY: $dimension.s2_5 value: fontSize: $font-size.s4 lineHeight: $line-height.s4 @@ -193,16 +193,16 @@ data: fontSize: $font-size.s4 lineHeight: $line-height.s4 prefixIcon: - size: $unit.s4 + size: $dimension.s4 suffixText: fontSize: $font-size.s4 lineHeight: $line-height.s4 suffixIcon: - size: $unit.s4 + size: $dimension.s4 footer: - gap: $unit.s3_5 - paddingTop: $unit.s2 - minHeight: $unit.s4 + gap: $dimension.s3_5 + paddingTop: $dimension.s2 + minHeight: $dimension.s4 description: fontSize: $font-size.s2 lineHeight: $line-height.s2 @@ -210,8 +210,8 @@ data: fontSize: $font-size.s2 lineHeight: $line-height.s2 errorIcon: - size: $unit.s3_5 - marginRight: $unit.s1 + size: $dimension.s3_5 + marginRight: $dimension.s1 characterCount: fontSize: $font-size.s2 lineHeight: $line-height.s2 diff --git a/packages/rootage/components/toggle-button.yaml b/packages/rootage/components/toggle-button.yaml index 191b3574a..e30c16c8a 100644 --- a/packages/rootage/components/toggle-button.yaml +++ b/packages/rootage/components/toggle-button.yaml @@ -106,15 +106,15 @@ data: size=xsmall: enabled: root: - minHeight: $unit.s8 + minHeight: $dimension.s8 cornerRadius: $radius.full - gap: $unit.s1 - paddingX: $unit.s3_5 - paddingY: $unit.s1_5 + gap: $dimension.s1 + paddingX: $dimension.s3_5 + paddingY: $dimension.s1_5 prefixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 suffixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 label: fontSize: $font-size.s4 progressCircle: @@ -123,15 +123,15 @@ data: size=small: enabled: root: - minHeight: $unit.s9 + minHeight: $dimension.s9 cornerRadius: $radius.full - gap: $unit.s1 - paddingX: $unit.s4 - paddingY: $unit.s2 + gap: $dimension.s1 + paddingX: $dimension.s4 + paddingY: $dimension.s2 prefixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 suffixIcon: - size: $unit.s3_5 + size: $dimension.s3_5 label: fontSize: $font-size.s4 progressCircle: diff --git a/packages/rootage/components/top-navigation.yaml b/packages/rootage/components/top-navigation.yaml index d67aaeb6a..868b7fc3b 100644 --- a/packages/rootage/components/top-navigation.yaml +++ b/packages/rootage/components/top-navigation.yaml @@ -9,7 +9,7 @@ data: enabled: root: minHeight: 44px - paddingX: $unit.s4 + paddingX: $dimension.s4 title: fontSize: $font-size.s6-static fontWeight: $font-weight.bold @@ -20,7 +20,7 @@ data: enabled: root: minHeight: 56px - paddingX: $unit.s4 + paddingX: $dimension.s4 title: fontSize: $font-size.s6-static fontWeight: $font-weight.bold diff --git a/packages/rootage/unit.yaml b/packages/rootage/unit.yaml index 038b703f1..782f32b69 100644 --- a/packages/rootage/unit.yaml +++ b/packages/rootage/unit.yaml @@ -5,68 +5,68 @@ metadata: data: collection: global tokens: - $unit.s0_5: + $dimension.s0_5: values: default: 2px - $unit.s1: + $dimension.s1: values: default: 4px - $unit.s1_5: + $dimension.s1_5: values: default: 6px - $unit.s2: + $dimension.s2: values: default: 8px - $unit.s2_5: + $dimension.s2_5: values: default: 10px - $unit.s3: + $dimension.s3: values: default: 12px - $unit.s3_5: + $dimension.s3_5: values: default: 14px - $unit.s4: + $dimension.s4: values: default: 16px - $unit.s4_5: + $dimension.s4_5: values: default: 18px - $unit.s5: + $dimension.s5: values: default: 20px - $unit.s6: + $dimension.s6: values: default: 24px - $unit.s7: + $dimension.s7: values: default: 28px - $unit.s8: + $dimension.s8: values: default: 32px - $unit.s9: + $dimension.s9: values: default: 36px - $unit.s10: + $dimension.s10: values: default: 40px - $unit.s12: + $dimension.s12: values: default: 48px - $unit.s13: + $dimension.s13: values: default: 52px - $unit.s14: + $dimension.s14: values: default: 56px - $unit.s16: + $dimension.s16: values: default: 64px - $horizontal-spacing.between-chips: + $dimension.spacing-x.between-chips: description: Chip 사이의 수평 간격에 사용합니다. values: - default: $unit.s2 - $horizontal-spacing.global-gutter: + default: $dimension.s2 + $dimension.spacing-x.global-gutter: description: 화면 전체에 적용되는 기본 수평 padding 값입니다. values: - default: $unit.s4 + default: $dimension.s4 diff --git a/packages/stylesheet/actionButton.css b/packages/stylesheet/actionButton.css index 5b2ebc0f5..6fd73fd22 100644 --- a/packages/stylesheet/actionButton.css +++ b/packages/stylesheet/actionButton.css @@ -307,7 +307,7 @@ --range-color: var(--seed-v3-color-fg-neutral); } .actionButton__root--size_xsmall { - height: var(--seed-v3-unit-s8); + height: var(--seed-v3-dimension-s8); border-radius: var(--seed-v3-radius-full); } .actionButton__progressIndicator--size_xsmall { @@ -315,7 +315,7 @@ --thickness: 2px; } .actionButton__root--size_small { - height: var(--seed-v3-unit-s9); + height: var(--seed-v3-dimension-s9); border-radius: var(--seed-v3-radius-s2); } .actionButton__progressIndicator--size_small { @@ -323,7 +323,7 @@ --thickness: 2px; } .actionButton__root--size_medium { - height: var(--seed-v3-unit-s10); + height: var(--seed-v3-dimension-s10); border-radius: var(--seed-v3-radius-s2); } .actionButton__progressIndicator--size_medium { @@ -331,7 +331,7 @@ --thickness: 2px; } .actionButton__root--size_large { - height: var(--seed-v3-unit-s13); + height: var(--seed-v3-dimension-s13); border-radius: var(--seed-v3-radius-s3); } .actionButton__progressIndicator--size_large { @@ -339,84 +339,84 @@ --thickness: 2px; } .actionButton__root--size_xsmall-layout_withText { - gap: var(--seed-v3-unit-s1); - padding-inline: var(--seed-v3-unit-s3_5); - padding-block: var(--seed-v3-unit-s1_5); + gap: var(--seed-v3-dimension-s1); + padding-inline: var(--seed-v3-dimension-s3_5); + padding-block: var(--seed-v3-dimension-s1_5); } .actionButton__label--size_xsmall-layout_withText { font-size: var(--seed-v3-font-size-s4); } .actionButton__prefixIcon--size_xsmall-layout_withText { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .actionButton__suffixIcon--size_xsmall-layout_withText { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .actionButton__root--size_xsmall-layout_iconOnly { - min-width: var(--seed-v3-unit-s8); - padding-inline: var(--seed-v3-unit-s1_5); - padding-block: var(--seed-v3-unit-s1_5); + min-width: var(--seed-v3-dimension-s8); + padding-inline: var(--seed-v3-dimension-s1_5); + padding-block: var(--seed-v3-dimension-s1_5); } .actionButton__icon--size_xsmall-layout_iconOnly { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .actionButton__root--size_small-layout_withText { - gap: var(--seed-v3-unit-s1); - padding-inline: var(--seed-v3-unit-s3_5); - padding-block: var(--seed-v3-unit-s2); + gap: var(--seed-v3-dimension-s1); + padding-inline: var(--seed-v3-dimension-s3_5); + padding-block: var(--seed-v3-dimension-s2); } .actionButton__label--size_small-layout_withText { font-size: var(--seed-v3-font-size-s4); } .actionButton__prefixIcon--size_small-layout_withText { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .actionButton__suffixIcon--size_small-layout_withText { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .actionButton__root--size_small-layout_iconOnly { - min-width: var(--seed-v3-unit-s9); - padding-inline: var(--seed-v3-unit-s2); - padding-block: var(--seed-v3-unit-s2); + min-width: var(--seed-v3-dimension-s9); + padding-inline: var(--seed-v3-dimension-s2); + padding-block: var(--seed-v3-dimension-s2); } .actionButton__icon--size_small-layout_iconOnly { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .actionButton__root--size_medium-layout_withText { - gap: var(--seed-v3-unit-s1); - padding-inline: var(--seed-v3-unit-s4); - padding-block: var(--seed-v3-unit-s2_5); + gap: var(--seed-v3-dimension-s1); + padding-inline: var(--seed-v3-dimension-s4); + padding-block: var(--seed-v3-dimension-s2_5); } .actionButton__label--size_medium-layout_withText { font-size: var(--seed-v3-font-size-s4); } .actionButton__prefixIcon--size_medium-layout_withText { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .actionButton__suffixIcon--size_medium-layout_withText { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .actionButton__root--size_medium-layout_iconOnly { - min-width: var(--seed-v3-unit-s10); - padding-inline: var(--seed-v3-unit-s2_5); - padding-block: var(--seed-v3-unit-s2_5); + min-width: var(--seed-v3-dimension-s10); + padding-inline: var(--seed-v3-dimension-s2_5); + padding-block: var(--seed-v3-dimension-s2_5); } .actionButton__icon--size_medium-layout_iconOnly { width: 18px; height: 18px; } .actionButton__root--size_large-layout_withText { - gap: var(--seed-v3-unit-s2); - padding-inline: var(--seed-v3-unit-s5); - padding-block: var(--seed-v3-unit-s3_5); + gap: var(--seed-v3-dimension-s2); + padding-inline: var(--seed-v3-dimension-s5); + padding-block: var(--seed-v3-dimension-s3_5); } .actionButton__label--size_large-layout_withText { font-size: var(--seed-v3-font-size-s6); @@ -430,9 +430,9 @@ height: 22px; } .actionButton__root--size_large-layout_iconOnly { - min-width: var(--seed-v3-unit-s13); - padding-inline: var(--seed-v3-unit-s3_5); - padding-block: var(--seed-v3-unit-s3_5); + min-width: var(--seed-v3-dimension-s13); + padding-inline: var(--seed-v3-dimension-s3_5); + padding-block: var(--seed-v3-dimension-s3_5); } .actionButton__icon--size_large-layout_iconOnly { width: 22px; diff --git a/packages/stylesheet/actionChip.css b/packages/stylesheet/actionChip.css index 5f2d8265c..f7c3210c7 100644 --- a/packages/stylesheet/actionChip.css +++ b/packages/stylesheet/actionChip.css @@ -55,60 +55,60 @@ font-weight: var(--seed-v3-font-weight-medium); } .actionChip__root--size_medium { - min-height: var(--seed-v3-unit-s9); - padding-block: var(--seed-v3-unit-s2); - gap: var(--seed-v3-unit-s1); + min-height: var(--seed-v3-dimension-s9); + padding-block: var(--seed-v3-dimension-s2); + gap: var(--seed-v3-dimension-s1); } .actionChip__label--size_medium { font-size: var(--seed-v3-font-size-s4); } .actionChip__prefixIcon--size_medium { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .actionChip__suffixIcon--size_medium { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .actionChip__count--size_medium { font-size: var(--seed-v3-font-size-s4); } .actionChip__root--size_small { - min-height: var(--seed-v3-unit-s8); - padding-block: var(--seed-v3-unit-s1_5); - gap: var(--seed-v3-unit-s1); + min-height: var(--seed-v3-dimension-s8); + padding-block: var(--seed-v3-dimension-s1_5); + gap: var(--seed-v3-dimension-s1); } .actionChip__label--size_small { font-size: var(--seed-v3-font-size-s4); } .actionChip__prefixIcon--size_small { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .actionChip__suffixIcon--size_small { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .actionChip__count--size_small { font-size: var(--seed-v3-font-size-s4); } .actionChip__root--size_medium-layout_withText { - padding-inline: var(--seed-v3-unit-s3_5); + padding-inline: var(--seed-v3-dimension-s3_5); } .actionChip__root--size_medium-layout_iconOnly { - min-width: var(--seed-v3-unit-s9); + min-width: var(--seed-v3-dimension-s9); } .actionChip__icon--size_medium-layout_iconOnly { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .actionChip__root--size_small-layout_withText { - padding-inline: var(--seed-v3-unit-s3); + padding-inline: var(--seed-v3-dimension-s3); } .actionChip__root--size_small-layout_iconOnly { - min-width: var(--seed-v3-unit-s8); + min-width: var(--seed-v3-dimension-s8); } .actionChip__icon--size_small-layout_iconOnly { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } \ No newline at end of file diff --git a/packages/stylesheet/actionSheet.css b/packages/stylesheet/actionSheet.css index a068590e0..7eafd9594 100644 --- a/packages/stylesheet/actionSheet.css +++ b/packages/stylesheet/actionSheet.css @@ -37,8 +37,8 @@ box-sizing: border-box; word-break: break-all; background: var(--seed-v3-color-bg-layer-floating); - padding-inline: var(--seed-v3-horizontal-spacing-global-gutter); - padding-block: var(--seed-v3-unit-s4); + padding-inline: var(--seed-v3-dimension-spacing-x-global-gutter); + padding-block: var(--seed-v3-dimension-s4); border-top-left-radius: var(--seed-v3-radius-s6); border-top-right-radius: var(--seed-v3-radius-s6); } @@ -65,7 +65,7 @@ display: flex; flex-direction: column; align-items: stretch; - gap: var(--seed-v3-unit-s2_5); + gap: var(--seed-v3-dimension-s2_5); } .actionSheet__group { display: flex; @@ -78,5 +78,5 @@ display: flex; flex-direction: column; align-items: stretch; - padding-top: var(--seed-v3-unit-s2_5); + padding-top: var(--seed-v3-dimension-s2_5); } \ No newline at end of file diff --git a/packages/stylesheet/actionSheetCloseButton.css b/packages/stylesheet/actionSheetCloseButton.css index 9e3b7fdbe..36a8c514d 100644 --- a/packages/stylesheet/actionSheetCloseButton.css +++ b/packages/stylesheet/actionSheetCloseButton.css @@ -4,8 +4,8 @@ justify-content: center; background-color: var(--seed-v3-color-bg-neutral-weak); min-height: 52px; - padding-inline: var(--seed-v3-unit-s5); - padding-block: var(--seed-v3-unit-s3_5); + padding-inline: var(--seed-v3-dimension-s5); + padding-block: var(--seed-v3-dimension-s3_5); border-radius: var(--seed-v3-radius-s3); } .actionSheetCloseButton__root:is(:active, [data-active]) { diff --git a/packages/stylesheet/actionSheetItem.css b/packages/stylesheet/actionSheetItem.css index 37987388e..ac38dabaa 100644 --- a/packages/stylesheet/actionSheetItem.css +++ b/packages/stylesheet/actionSheetItem.css @@ -4,9 +4,9 @@ justify-content: flex-start; background-color: var(--seed-v3-color-bg-neutral-weak); min-height: 52px; - padding-inline: var(--seed-v3-unit-s3_5); - padding-block: var(--seed-v3-unit-s4); - gap: var(--seed-v3-unit-s3); + padding-inline: var(--seed-v3-dimension-s3_5); + padding-block: var(--seed-v3-dimension-s4); + gap: var(--seed-v3-dimension-s3); box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-v3-color-stroke-neutral); } .actionSheetItem__root:is(:active, [data-active]) { diff --git a/packages/stylesheet/badge.css b/packages/stylesheet/badge.css index a9557021a..508378dee 100644 --- a/packages/stylesheet/badge.css +++ b/packages/stylesheet/badge.css @@ -10,18 +10,18 @@ text-decoration: none } .badge__root--size_medium { - min-height: var(--seed-v3-unit-s5); - padding-inline: var(--seed-v3-unit-s1_5); - padding-block: var(--seed-v3-unit-s0_5) + min-height: var(--seed-v3-dimension-s5); + padding-inline: var(--seed-v3-dimension-s1_5); + padding-block: var(--seed-v3-dimension-s0_5) } .badge__label--size_medium { font-size: var(--seed-v3-font-size-s1); line-height: var(--seed-v3-line-height-s1) } .badge__root--size_large { - min-height: var(--seed-v3-unit-s6); - padding-inline: var(--seed-v3-unit-s2); - padding-block: var(--seed-v3-unit-s1) + min-height: var(--seed-v3-dimension-s6); + padding-inline: var(--seed-v3-dimension-s2); + padding-block: var(--seed-v3-dimension-s1) } .badge__label--size_large { font-size: var(--seed-v3-font-size-s2); diff --git a/packages/stylesheet/bottomSheet.css b/packages/stylesheet/bottomSheet.css index 2f5054640..ac0d2d844 100644 --- a/packages/stylesheet/bottomSheet.css +++ b/packages/stylesheet/bottomSheet.css @@ -62,10 +62,10 @@ .bottomSheet__header { display: flex; flex-direction: column; - gap: var(--seed-v3-unit-s2); - padding-inline: var(--seed-v3-horizontal-spacing-global-gutter); - padding-top: var(--seed-v3-unit-s6); - padding-bottom: var(--seed-v3-unit-s4); + gap: var(--seed-v3-dimension-s2); + padding-inline: var(--seed-v3-dimension-spacing-x-global-gutter); + padding-top: var(--seed-v3-dimension-s6); + padding-bottom: var(--seed-v3-dimension-s4); } .bottomSheet__title { color: var(--seed-v3-color-fg-neutral); @@ -85,17 +85,17 @@ .bottomSheet__footer { display: flex; flex-direction: column; - padding-inline: var(--seed-v3-horizontal-spacing-global-gutter); - padding-top: var(--seed-v3-unit-s3); - padding-bottom: var(--seed-v3-unit-s4); + padding-inline: var(--seed-v3-dimension-spacing-x-global-gutter); + padding-top: var(--seed-v3-dimension-s3); + padding-bottom: var(--seed-v3-dimension-s4); } .bottomSheet__closeButton { position: absolute; display: flex; justify-content: center; align-items: center; - top: var(--seed-v3-unit-s5); - right: var(--seed-v3-unit-s5); + top: var(--seed-v3-dimension-s5); + right: var(--seed-v3-dimension-s5); border-radius: var(--seed-v3-radius-full); background: var(--seed-v3-color-palette-gray-300); width: 28px; diff --git a/packages/stylesheet/callout.css b/packages/stylesheet/callout.css index f7c8d0291..10ed3fea4 100644 --- a/packages/stylesheet/callout.css +++ b/packages/stylesheet/callout.css @@ -4,8 +4,8 @@ width: 100%; min-height: 50px; box-sizing: border-box; - padding: var(--seed-v3-unit-s3_5); - gap: var(--seed-v3-unit-s3); + padding: var(--seed-v3-dimension-s3_5); + gap: var(--seed-v3-dimension-s3); border-radius: var(--seed-v3-radius-s2_5); border: none; text-align: start; @@ -19,8 +19,8 @@ } .callout__icon { flex: none; - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .callout__title { font-weight: var(--seed-v3-font-weight-bold); @@ -43,8 +43,8 @@ } .callout__actionableIcon { flex: none; - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); margin-inline-start: auto; } .callout__dismissButton { @@ -52,9 +52,9 @@ display: flex; justify-content: center; align-items: center; - width: var(--seed-v3-unit-s10); - height: var(--seed-v3-unit-s10); - margin: calc((var(--seed-v3-unit-s10) - var(--seed-v3-unit-s4)) * -0.5); + width: var(--seed-v3-dimension-s10); + height: var(--seed-v3-dimension-s10); + margin: calc((var(--seed-v3-dimension-s10) - var(--seed-v3-dimension-s4)) * -0.5); margin-inline-start: auto; border: none; background-color: transparent; @@ -62,8 +62,8 @@ cursor: pointer; } .callout__dismissIcon { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .callout__root--tone_neutral { background-color: var(--seed-v3-color-bg-neutral-weak); diff --git a/packages/stylesheet/checkbox.css b/packages/stylesheet/checkbox.css index 54366bf11..8b91b959d 100644 --- a/packages/stylesheet/checkbox.css +++ b/packages/stylesheet/checkbox.css @@ -6,7 +6,7 @@ vertical-align: top; isolation: isolate; cursor: pointer; - gap: var(--seed-v3-unit-s2); + gap: var(--seed-v3-dimension-s2); } .checkbox__root:is(:disabled, [disabled], [data-disabled]) { cursor: not-allowed; @@ -106,13 +106,13 @@ color: var(--seed-v3-color-fg-disabled); } .checkbox__root--size_large { - min-height: var(--seed-v3-unit-s9); + min-height: var(--seed-v3-dimension-s9); } .checkbox__control--size_large { border-radius: var(--seed-v3-radius-s1_5); - width: var(--seed-v3-unit-s6); - height: var(--seed-v3-unit-s6); - margin: calc((var(--seed-v3-unit-s9) - var(--seed-v3-unit-s6)) / 2) 0; + width: var(--seed-v3-dimension-s6); + height: var(--seed-v3-dimension-s6); + margin: calc((var(--seed-v3-dimension-s9) - var(--seed-v3-dimension-s6)) / 2) 0; } .checkbox__label--size_large { font-size: var(--seed-v3-font-size-s5); @@ -120,13 +120,13 @@ margin-block-start: calc(18px - 0.65625rem); } .checkbox__root--size_medium { - min-height: var(--seed-v3-unit-s8); + min-height: var(--seed-v3-dimension-s8); } .checkbox__control--size_medium { border-radius: var(--seed-v3-radius-s1); - width: var(--seed-v3-unit-s5); - height: var(--seed-v3-unit-s5); - margin: calc((var(--seed-v3-unit-s8) - var(--seed-v3-unit-s5)) / 2) 0; + width: var(--seed-v3-dimension-s5); + height: var(--seed-v3-dimension-s5); + margin: calc((var(--seed-v3-dimension-s8) - var(--seed-v3-dimension-s5)) / 2) 0; } .checkbox__label--size_medium { font-size: var(--seed-v3-font-size-s4); diff --git a/packages/stylesheet/chipTab.css b/packages/stylesheet/chipTab.css index cd8abf633..73cea12a7 100644 --- a/packages/stylesheet/chipTab.css +++ b/packages/stylesheet/chipTab.css @@ -2,7 +2,7 @@ display: flex; justify-content: center; align-items: center; - padding: var(--seed-v3-unit-s2) var(--seed-v3-unit-s3_5); + padding: var(--seed-v3-dimension-s2) var(--seed-v3-dimension-s3_5); cursor: pointer; border: none; border-radius: var(--seed-v3-radius-full); diff --git a/packages/stylesheet/chipTabs.css b/packages/stylesheet/chipTabs.css index ccc9720a3..115997579 100644 --- a/packages/stylesheet/chipTabs.css +++ b/packages/stylesheet/chipTabs.css @@ -11,7 +11,7 @@ overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; - padding: 0px var(--seed-v3-unit-s4); + padding: 0px var(--seed-v3-dimension-s4); } .chipTabs__triggerList::-webkit-scrollbar { display: none; diff --git a/packages/stylesheet/controlChip.css b/packages/stylesheet/controlChip.css index bf83320bd..14c6755e8 100644 --- a/packages/stylesheet/controlChip.css +++ b/packages/stylesheet/controlChip.css @@ -84,60 +84,60 @@ color: var(--seed-v3-color-palette-static-white-alpha-800); } .controlChip__root--size_medium { - min-height: var(--seed-v3-unit-s9); - padding-block: var(--seed-v3-unit-s2); - gap: var(--seed-v3-unit-s1); + min-height: var(--seed-v3-dimension-s9); + padding-block: var(--seed-v3-dimension-s2); + gap: var(--seed-v3-dimension-s1); } .controlChip__label--size_medium { font-size: var(--seed-v3-font-size-s4); } .controlChip__prefixIcon--size_medium { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .controlChip__suffixIcon--size_medium { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .controlChip__count--size_medium { font-size: var(--seed-v3-font-size-s4); } .controlChip__root--size_small { - min-height: var(--seed-v3-unit-s8); - padding-block: var(--seed-v3-unit-s1_5); - gap: var(--seed-v3-unit-s1); + min-height: var(--seed-v3-dimension-s8); + padding-block: var(--seed-v3-dimension-s1_5); + gap: var(--seed-v3-dimension-s1); } .controlChip__label--size_small { font-size: var(--seed-v3-font-size-s4); } .controlChip__prefixIcon--size_small { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .controlChip__suffixIcon--size_small { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .controlChip__count--size_small { font-size: var(--seed-v3-font-size-s4); } .controlChip__root--size_medium-layout_withText { - padding-inline: var(--seed-v3-unit-s3_5); + padding-inline: var(--seed-v3-dimension-s3_5); } .controlChip__root--size_medium-layout_iconOnly { - min-width: var(--seed-v3-unit-s9); + min-width: var(--seed-v3-dimension-s9); } .controlChip__icon--size_medium-layout_iconOnly { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .controlChip__root--size_small-layout_withText { - padding-inline: var(--seed-v3-unit-s3); + padding-inline: var(--seed-v3-dimension-s3); } .controlChip__root--size_small-layout_iconOnly { - min-width: var(--seed-v3-unit-s8); + min-width: var(--seed-v3-dimension-s8); } .controlChip__icon--size_small-layout_iconOnly { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } \ No newline at end of file diff --git a/packages/stylesheet/dialog.css b/packages/stylesheet/dialog.css index 3e83655e0..537b7d902 100644 --- a/packages/stylesheet/dialog.css +++ b/packages/stylesheet/dialog.css @@ -38,8 +38,8 @@ word-break: break-all; background: var(--seed-v3-color-bg-layer-default); max-width: 272px; - margin: auto var(--seed-v3-unit-s8); - padding: var(--seed-v3-unit-s5) var(--seed-v3-unit-s5); + margin: auto var(--seed-v3-dimension-s8); + padding: var(--seed-v3-dimension-s5) var(--seed-v3-dimension-s5); border-radius: var(--seed-v3-radius-s5); } .dialog__content:is([data-transition-state='exit-active'],[data-transition-state='exit-done']) { @@ -64,7 +64,7 @@ .dialog__header { display: flex; flex-direction: column; - gap: var(--seed-v3-unit-s1_5); + gap: var(--seed-v3-dimension-s1_5); } .dialog__title { color: var(--seed-v3-color-fg-neutral); @@ -86,12 +86,12 @@ flex-wrap: wrap; justify-content: space-between; align-items: stretch; - padding-top: var(--seed-v3-unit-s4); - gap: var(--seed-v3-unit-s2); + padding-top: var(--seed-v3-dimension-s4); + gap: var(--seed-v3-dimension-s2); } .dialog__action { width: initial; - min-width: calc(50% - var(--seed-v3-unit-s2) / 2); + min-width: calc(50% - var(--seed-v3-dimension-s2) / 2); } .dialog__footer--footerLayout_horizontal { flex-direction: row-reverse; diff --git a/packages/stylesheet/extendedFab.css b/packages/stylesheet/extendedFab.css index 684097f48..bfcb0e3c0 100644 --- a/packages/stylesheet/extendedFab.css +++ b/packages/stylesheet/extendedFab.css @@ -52,10 +52,10 @@ color: var(--seed-v3-color-fg-neutral); } .extendedFab__root--size_small { - padding-inline: var(--seed-v3-unit-s3_5); - padding-block: var(--seed-v3-unit-s2_5); + padding-inline: var(--seed-v3-dimension-s3_5); + padding-block: var(--seed-v3-dimension-s2_5); min-height: 40px; - gap: var(--seed-v3-unit-s1); + gap: var(--seed-v3-dimension-s1); } .extendedFab__label--size_small { font-size: var(--seed-v3-font-size-s4); @@ -67,10 +67,10 @@ height: 16px; } .extendedFab__root--size_medium { - padding-inline: var(--seed-v3-unit-s4); - padding-block: var(--seed-v3-unit-s3); + padding-inline: var(--seed-v3-dimension-s4); + padding-block: var(--seed-v3-dimension-s3); min-height: 48px; - gap: var(--seed-v3-unit-s1); + gap: var(--seed-v3-dimension-s1); } .extendedFab__label--size_medium { font-size: var(--seed-v3-font-size-s5); diff --git a/packages/stylesheet/helpBubble.css b/packages/stylesheet/helpBubble.css index e1aa10255..0cba10561 100644 --- a/packages/stylesheet/helpBubble.css +++ b/packages/stylesheet/helpBubble.css @@ -13,8 +13,8 @@ display: flex; flex-direction: column; background: var(--seed-v3-color-bg-neutral-solid); - padding-inline: var(--seed-v3-unit-s3); - padding-block: var(--seed-v3-unit-s3); + padding-inline: var(--seed-v3-dimension-s3); + padding-block: var(--seed-v3-dimension-s3); border-radius: var(--seed-v3-radius-s3); word-break: keep-all; } diff --git a/packages/stylesheet/inlineBanner.css b/packages/stylesheet/inlineBanner.css index 679cc2f4d..a93924ed8 100644 --- a/packages/stylesheet/inlineBanner.css +++ b/packages/stylesheet/inlineBanner.css @@ -2,11 +2,11 @@ display: flex; align-items: center; justify-content: space-between; - gap: var(--seed-v3-unit-s4); + gap: var(--seed-v3-dimension-s4); width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - padding-inline: var(--seed-v3-unit-s4); + padding-inline: var(--seed-v3-dimension-s4); border: none; padding-block: 0; font: inherit; @@ -17,19 +17,19 @@ .inlineBanner__content { display: flex; align-items: flex-start; - gap: var(--seed-v3-unit-s2); + gap: var(--seed-v3-dimension-s2); box-sizing: border-box; - padding-block: var(--seed-v3-unit-s2_5); + padding-block: var(--seed-v3-dimension-s2_5); font-size: var(--seed-v3-font-size-s4); line-height: var(--seed-v3-line-height-s4); - min-height: var(--seed-v3-unit-s10); + min-height: var(--seed-v3-dimension-s10); text-align: start; } .inlineBanner__icon { flex: none; margin-block: 1.5px; - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .inlineBanner__title { font-weight: var(--seed-v3-font-weight-bold); @@ -44,7 +44,7 @@ flex: none; display: flex; align-items: center; - height: var(--seed-v3-unit-s10); + height: var(--seed-v3-dimension-s10); font-weight: var(--seed-v3-font-weight-regular); font-size: var(--seed-v3-font-size-s2); line-height: var(--seed-v3-line-height-s2); @@ -57,25 +57,25 @@ } .inlineBanner__actionableIcon { flex: none; - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .inlineBanner__dismissButton { flex: none; display: flex; justify-content: center; align-items: center; - width: var(--seed-v3-unit-s10); - height: var(--seed-v3-unit-s10); - margin: calc((var(--seed-v3-unit-s10) - var(--seed-v3-unit-s4)) * -0.5); + width: var(--seed-v3-dimension-s10); + height: var(--seed-v3-dimension-s10); + margin: calc((var(--seed-v3-dimension-s10) - var(--seed-v3-dimension-s4)) * -0.5); border: none; background-color: transparent; padding: 0; cursor: pointer; } .inlineBanner__dismissIcon { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .inlineBanner__root--variant_neutralWeak { background-color: var(--seed-v3-color-bg-neutral-weak); diff --git a/packages/stylesheet/progressCircle.css b/packages/stylesheet/progressCircle.css index 1148b2c7d..e02113bfa 100644 --- a/packages/stylesheet/progressCircle.css +++ b/packages/stylesheet/progressCircle.css @@ -36,11 +36,11 @@ } .progressCircle__root--tone_inherit {} .progressCircle__root--size_24 { - --size: var(--seed-v3-unit-s6); + --size: var(--seed-v3-dimension-s6); --thickness: 3px; } .progressCircle__root--size_40 { - --size: var(--seed-v3-unit-s10); + --size: var(--seed-v3-dimension-s10); --thickness: 5px; } .progressCircle__root--size_inherit {} diff --git a/packages/stylesheet/radio.css b/packages/stylesheet/radio.css index 54dfa07a4..e5315cf90 100644 --- a/packages/stylesheet/radio.css +++ b/packages/stylesheet/radio.css @@ -39,34 +39,34 @@ background-color: var(--seed-v3-color-palette-gray-300); } .radio__root--size_large { - width: var(--seed-v3-unit-s6); - height: var(--seed-v3-unit-s6); + width: var(--seed-v3-dimension-s6); + height: var(--seed-v3-dimension-s6); } .radio__icon--size_large { - width: var(--seed-v3-unit-s2_5); - height: var(--seed-v3-unit-s2_5); + width: var(--seed-v3-dimension-s2_5); + height: var(--seed-v3-dimension-s2_5); } .radio__icon--size_large:is(:disabled, [disabled], [data-disabled]) { - width: var(--seed-v3-unit-s3); - height: var(--seed-v3-unit-s3); + width: var(--seed-v3-dimension-s3); + height: var(--seed-v3-dimension-s3); } .radio__root--size_medium { - width: var(--seed-v3-unit-s5); - height: var(--seed-v3-unit-s5); + width: var(--seed-v3-dimension-s5); + height: var(--seed-v3-dimension-s5); } .radio__icon--size_medium { - width: var(--seed-v3-unit-s2); - height: var(--seed-v3-unit-s2); + width: var(--seed-v3-dimension-s2); + height: var(--seed-v3-dimension-s2); } .radio__icon--size_medium:is(:disabled, [disabled], [data-disabled]) { - width: var(--seed-v3-unit-s2_5); - height: var(--seed-v3-unit-s2_5); + width: var(--seed-v3-dimension-s2_5); + height: var(--seed-v3-dimension-s2_5); } .radio__root--size_small { - width: var(--seed-v3-unit-s4_5); - height: var(--seed-v3-unit-s4_5); + width: var(--seed-v3-dimension-s4_5); + height: var(--seed-v3-dimension-s4_5); } .radio__icon--size_small { - width: var(--seed-v3-unit-s2); - height: var(--seed-v3-unit-s2); + width: var(--seed-v3-dimension-s2); + height: var(--seed-v3-dimension-s2); } \ No newline at end of file diff --git a/packages/stylesheet/reactionButton.css b/packages/stylesheet/reactionButton.css index 361d918fe..c2f4e5945 100644 --- a/packages/stylesheet/reactionButton.css +++ b/packages/stylesheet/reactionButton.css @@ -96,11 +96,11 @@ display: flex; } .reactionButton__root--size_xsmall { - height: var(--seed-v3-unit-s8); + height: var(--seed-v3-dimension-s8); border-radius: var(--seed-v3-radius-full); - gap: var(--seed-v3-unit-s1); - padding-inline: var(--seed-v3-unit-s3); - padding-block: var(--seed-v3-unit-s1_5); + gap: var(--seed-v3-dimension-s1); + padding-inline: var(--seed-v3-dimension-s3); + padding-block: var(--seed-v3-dimension-s1_5); } .reactionButton__label--size_xsmall { font-size: var(--seed-v3-font-size-s3); @@ -119,11 +119,11 @@ --thickness: 2px; } .reactionButton__root--size_small { - height: var(--seed-v3-unit-s9); + height: var(--seed-v3-dimension-s9); border-radius: var(--seed-v3-radius-full); - gap: var(--seed-v3-unit-s1); - padding-inline: var(--seed-v3-unit-s3_5); - padding-block: var(--seed-v3-unit-s2); + gap: var(--seed-v3-dimension-s1); + padding-inline: var(--seed-v3-dimension-s3_5); + padding-block: var(--seed-v3-dimension-s2); } .reactionButton__label--size_small { font-size: var(--seed-v3-font-size-s3); diff --git a/packages/stylesheet/segmentedControl.css b/packages/stylesheet/segmentedControl.css index e28d52484..ba724c67e 100644 --- a/packages/stylesheet/segmentedControl.css +++ b/packages/stylesheet/segmentedControl.css @@ -4,7 +4,7 @@ min-width: fit-content; max-width: 100%; position: relative; - padding: var(--seed-v3-unit-s1); + padding: var(--seed-v3-dimension-s1); border-radius: var(--seed-v3-radius-full); background-color: var(--seed-v3-color-bg-neutral-weak); grid-auto-flow: column; @@ -15,7 +15,7 @@ .segmentedControl__segment { display: grid; min-width: 86px; - height: var(--seed-v3-unit-s8); + height: var(--seed-v3-dimension-s8); border-radius: var(--seed-v3-radius-full); overflow: hidden; user-select: none; @@ -32,7 +32,7 @@ } .segmentedControl__segmentLabel { grid-area: 1 / 1 / 1 / 1; - padding-inline: calc(var(--seed-v3-unit-s4) - 1px); + padding-inline: calc(var(--seed-v3-dimension-s4) - 1px); margin-block: auto; text-align: center; font-weight: var(--seed-v3-font-weight-medium); @@ -51,7 +51,7 @@ } .segmentedControl__segmentLabelPlaceholder { grid-area: 1 / 1 / 1 / 1; - padding-inline: var(--seed-v3-unit-s4); + padding-inline: var(--seed-v3-dimension-s4); text-align: center; font-weight: var(--seed-v3-font-weight-bold); font-size: var(--seed-v3-font-size-s5); @@ -62,9 +62,9 @@ } .segmentedControl__indicator { position: absolute; - inset-block: var(--seed-v3-unit-s1); - inset-inline-start: var(--seed-v3-unit-s1); - width: calc((100% - var(--seed-v3-unit-s1) * 2) / var(--seed-design-segmented-control-segment-count)); + inset-block: var(--seed-v3-dimension-s1); + inset-inline-start: var(--seed-v3-dimension-s1); + width: calc((100% - var(--seed-v3-dimension-s1) * 2) / var(--seed-design-segmented-control-segment-count)); transform: translateX(calc(var(--seed-design-segmented-control-current-segment-index) * 100%)); z-index: -1; border-radius: var(--seed-v3-radius-full); diff --git a/packages/stylesheet/selectBox.css b/packages/stylesheet/selectBox.css index b360477fd..9de8c696b 100644 --- a/packages/stylesheet/selectBox.css +++ b/packages/stylesheet/selectBox.css @@ -3,9 +3,9 @@ display: flex; align-items: center; justify-content: space-between; - gap: var(--seed-v3-unit-s2_5); - padding-inline: var(--seed-v3-unit-s4); - padding-block: var(--seed-v3-unit-s5); + gap: var(--seed-v3-dimension-s2_5); + padding-inline: var(--seed-v3-dimension-s4); + padding-block: var(--seed-v3-dimension-s5); border-radius: var(--seed-v3-radius-s3); box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-neutral); } @@ -22,7 +22,7 @@ .selectBox__content { display: flex; flex-direction: column; - gap: var(--seed-v3-unit-s0_5); + gap: var(--seed-v3-dimension-s0_5); } .selectBox__checkboxControl { flex: none; @@ -30,8 +30,8 @@ display: flex; align-items: center; justify-content: center; - width: var(--seed-v3-unit-s6); - height: var(--seed-v3-unit-s6); + width: var(--seed-v3-dimension-s6); + height: var(--seed-v3-dimension-s6); background-color: var(--seed-v3-color-bg-layer-default); border-style: solid; border-width: 1.25px; @@ -49,8 +49,8 @@ background-color: var(--seed-v3-color-bg-brand-solid-pressed); } .selectBox__checkboxIcon { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); display: none; } .selectBox__checkboxIcon:is(:checked, [data-checked]) { @@ -63,8 +63,8 @@ display: flex; align-items: center; justify-content: center; - width: var(--seed-v3-unit-s6); - height: var(--seed-v3-unit-s6); + width: var(--seed-v3-dimension-s6); + height: var(--seed-v3-dimension-s6); background-color: var(--seed-v3-color-bg-layer-default); border-style: solid; border-width: 1.25px; @@ -82,8 +82,8 @@ background-color: var(--seed-v3-color-bg-brand-solid-pressed); } .selectBox__radioIcon { - width: var(--seed-v3-unit-s2_5); - height: var(--seed-v3-unit-s2_5); + width: var(--seed-v3-dimension-s2_5); + height: var(--seed-v3-dimension-s2_5); border-radius: var(--seed-v3-radius-full); display: none; } diff --git a/packages/stylesheet/snackbar.css b/packages/stylesheet/snackbar.css index b4c6b9c88..fbd8b2732 100644 --- a/packages/stylesheet/snackbar.css +++ b/packages/stylesheet/snackbar.css @@ -6,10 +6,10 @@ width: 100%; background: var(--seed-v3-color-bg-neutral-solid); border-radius: var(--seed-v3-radius-s2); - padding-inline: var(--seed-v3-unit-s4); - padding-block: var(--seed-v3-unit-s2_5); + padding-inline: var(--seed-v3-dimension-s4); + padding-block: var(--seed-v3-dimension-s2_5); min-height: 44px; - gap: var(--seed-v3-unit-s2); + gap: var(--seed-v3-dimension-s2); animation: seed-enter; animation-timing-function: var(--seed-v3-timing-function-enter); animation-duration: var(--seed-v3-duration-s4); @@ -66,8 +66,8 @@ position: absolute; top: 50%; transform: translateY(-50%); - left: calc(-1 * var(--seed-v3-unit-s2)); - right: calc(-1 * var(--seed-v3-unit-s2)); + left: calc(-1 * var(--seed-v3-dimension-s2)); + right: calc(-1 * var(--seed-v3-dimension-s2)); min-height: 44px; background: transparent; } diff --git a/packages/stylesheet/snackbarRegion.css b/packages/stylesheet/snackbarRegion.css index 3701a808d..f68ae318a 100644 --- a/packages/stylesheet/snackbarRegion.css +++ b/packages/stylesheet/snackbarRegion.css @@ -6,8 +6,8 @@ left: calc(env(safe-area-inset-left, 0px)); right: calc(env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px)); - padding-inline: var(--seed-v3-unit-s2); - padding-block: var(--seed-v3-unit-s2); + padding-inline: var(--seed-v3-dimension-s2); + padding-block: var(--seed-v3-dimension-s2); transition-property: bottom; transition-duration: var(--seed-v3-duration-s4); transition-timing-function: var(--seed-v3-timing-function-easing) diff --git a/packages/stylesheet/tab.css b/packages/stylesheet/tab.css index 45bc5283d..67d781916 100644 --- a/packages/stylesheet/tab.css +++ b/packages/stylesheet/tab.css @@ -24,11 +24,11 @@ .tab__notification { position: absolute; top: 0; - right: calc(-1 * var(--seed-v3-unit-s1) - var(--seed-v3-unit-s0_5)); + right: calc(-1 * var(--seed-v3-dimension-s1) - var(--seed-v3-dimension-s0_5)); align-self: flex-start; background-color: var(--seed-v3-color-bg-brand-solid); - width: var(--seed-v3-unit-s1); - height: var(--seed-v3-unit-s1); + width: var(--seed-v3-dimension-s1); + height: var(--seed-v3-dimension-s1); border-radius: var(--seed-v3-radius-full); } .tab__root--layout_fill { @@ -36,8 +36,8 @@ } .tab__root--size_medium { min-height: 44px; - padding-inline: var(--seed-v3-unit-s2_5); - padding-block: var(--seed-v3-unit-s2_5); + padding-inline: var(--seed-v3-dimension-s2_5); + padding-block: var(--seed-v3-dimension-s2_5); } .tab__label--size_medium { font-size: var(--seed-v3-font-size-s5); @@ -45,8 +45,8 @@ } .tab__root--size_small { min-height: 40px; - padding-inline: var(--seed-v3-unit-s2_5); - padding-block: var(--seed-v3-unit-s2_5); + padding-inline: var(--seed-v3-dimension-s2_5); + padding-block: var(--seed-v3-dimension-s2_5); } .tab__label--size_small { font-size: var(--seed-v3-font-size-s4); diff --git a/packages/stylesheet/tabs.css b/packages/stylesheet/tabs.css index 9184fd82d..c7ab0ab51 100644 --- a/packages/stylesheet/tabs.css +++ b/packages/stylesheet/tabs.css @@ -51,7 +51,7 @@ width: calc(var(--seed-design-tabs-indicator-width, 0px) - 32px); } .tabs__triggerList--layout_hug { - padding: 0px var(--seed-v3-unit-s4); + padding: 0px var(--seed-v3-dimension-s4); justify-content: flex-start; } .tabs__indicator--layout_hug { diff --git a/packages/stylesheet/textButton.css b/packages/stylesheet/textButton.css index c9c46b08d..e8dabd18d 100644 --- a/packages/stylesheet/textButton.css +++ b/packages/stylesheet/textButton.css @@ -1,7 +1,7 @@ .textButton__root { display: inline-flex; align-items: center; - padding-block: var(--seed-v3-unit-s0_5); + padding-block: var(--seed-v3-dimension-s0_5); padding-inline: 0; background-color: transparent; box-sizing: border-box; @@ -29,10 +29,10 @@ font-weight: var(--seed-v3-font-weight-regular); } .textButton__prefixIcon { - margin-inline-end: var(--seed-v3-unit-s1); + margin-inline-end: var(--seed-v3-dimension-s1); } .textButton__suffixIcon { - margin-inline-start: var(--seed-v3-unit-s0_5); + margin-inline-start: var(--seed-v3-dimension-s0_5); } .textButton__root--tone_brand { color: var(--seed-v3-color-fg-brand); @@ -51,12 +51,12 @@ border-radius: var(--seed-v3-radius-s1_5); } .textButton__prefixIcon--size_large { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .textButton__suffixIcon--size_large { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .textButton__label--size_large { font-size: var(--seed-v3-font-size-s6); @@ -67,12 +67,12 @@ border-radius: var(--seed-v3-radius-s1_5); } .textButton__prefixIcon--size_medium { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .textButton__suffixIcon--size_medium { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .textButton__label--size_medium { font-size: var(--seed-v3-font-size-s5); @@ -83,12 +83,12 @@ border-radius: var(--seed-v3-radius-s1); } .textButton__prefixIcon--size_small { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .textButton__suffixIcon--size_small { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .textButton__label--size_small { font-size: var(--seed-v3-font-size-s4); diff --git a/packages/stylesheet/textField.css b/packages/stylesheet/textField.css index f83d084df..f7829ab5c 100644 --- a/packages/stylesheet/textField.css +++ b/packages/stylesheet/textField.css @@ -127,8 +127,8 @@ font-weight: var(--seed-v3-font-weight-regular); } .textField__header--size_xlarge { - padding-bottom: var(--seed-v3-unit-s3); - gap: var(--seed-v3-unit-s1_5); + padding-bottom: var(--seed-v3-dimension-s3); + gap: var(--seed-v3-dimension-s1_5); } .textField__label--size_xlarge { font-size: var(--seed-v3-font-size-s5); @@ -141,11 +141,11 @@ .textField__field--size_xlarge { min-height: 56px; border-radius: var(--seed-v3-radius-s2_5); - gap: var(--seed-v3-unit-s2); - padding-inline: var(--seed-v3-unit-s4); + gap: var(--seed-v3-dimension-s2); + padding-inline: var(--seed-v3-dimension-s4); } .textField__value--size_xlarge { - padding-block: var(--seed-v3-unit-s3); + padding-block: var(--seed-v3-dimension-s3); font-size: var(--seed-v3-font-size-s6); line-height: var(--seed-v3-line-height-s6); } @@ -154,20 +154,20 @@ line-height: var(--seed-v3-line-height-s6); } .textField__prefixIcon--size_xlarge { - width: var(--seed-v3-unit-s5); - height: var(--seed-v3-unit-s5); + width: var(--seed-v3-dimension-s5); + height: var(--seed-v3-dimension-s5); } .textField__suffixText--size_xlarge { font-size: var(--seed-v3-font-size-s6); line-height: var(--seed-v3-line-height-s6); } .textField__suffixIcon--size_xlarge { - width: var(--seed-v3-unit-s5); - height: var(--seed-v3-unit-s5); + width: var(--seed-v3-dimension-s5); + height: var(--seed-v3-dimension-s5); } .textField__footer--size_xlarge { - gap: var(--seed-v3-unit-s3_5); - padding-top: var(--seed-v3-unit-s2); + gap: var(--seed-v3-dimension-s3_5); + padding-top: var(--seed-v3-dimension-s2); min-height: 20px; } .textField__description--size_xlarge { @@ -179,9 +179,9 @@ line-height: var(--seed-v3-line-height-s4); } .textField__errorIcon--size_xlarge { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); - margin-right: var(--seed-v3-unit-s1); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); + margin-right: var(--seed-v3-dimension-s1); } .textField__characterCount--size_xlarge { font-size: var(--seed-v3-font-size-s2); @@ -192,8 +192,8 @@ line-height: var(--seed-v3-line-height-s2); } .textField__header--size_large { - padding-bottom: var(--seed-v3-unit-s3); - gap: var(--seed-v3-unit-s1_5); + padding-bottom: var(--seed-v3-dimension-s3); + gap: var(--seed-v3-dimension-s1_5); } .textField__label--size_large { font-size: var(--seed-v3-font-size-s5); @@ -206,11 +206,11 @@ .textField__field--size_large { min-height: 52px; border-radius: var(--seed-v3-radius-s2_5); - gap: var(--seed-v3-unit-s2); - padding-inline: var(--seed-v3-unit-s4); + gap: var(--seed-v3-dimension-s2); + padding-inline: var(--seed-v3-dimension-s4); } .textField__value--size_large { - padding-block: var(--seed-v3-unit-s3); + padding-block: var(--seed-v3-dimension-s3); font-size: var(--seed-v3-font-size-s5); line-height: var(--seed-v3-line-height-s5); } @@ -219,20 +219,20 @@ line-height: var(--seed-v3-line-height-s5); } .textField__prefixIcon--size_large { - width: var(--seed-v3-unit-s5); - height: var(--seed-v3-unit-s5); + width: var(--seed-v3-dimension-s5); + height: var(--seed-v3-dimension-s5); } .textField__suffixText--size_large { font-size: var(--seed-v3-font-size-s5); line-height: var(--seed-v3-line-height-s5); } .textField__suffixIcon--size_large { - width: var(--seed-v3-unit-s5); - height: var(--seed-v3-unit-s5); + width: var(--seed-v3-dimension-s5); + height: var(--seed-v3-dimension-s5); } .textField__footer--size_large { - gap: var(--seed-v3-unit-s3_5); - padding-top: var(--seed-v3-unit-s2); + gap: var(--seed-v3-dimension-s3_5); + padding-top: var(--seed-v3-dimension-s2); min-height: 20px; } .textField__description--size_large { @@ -244,9 +244,9 @@ line-height: var(--seed-v3-line-height-s4); } .textField__errorIcon--size_large { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); - margin-right: var(--seed-v3-unit-s1); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); + margin-right: var(--seed-v3-dimension-s1); } .textField__characterCount--size_large { font-size: var(--seed-v3-font-size-s2); @@ -257,7 +257,7 @@ line-height: var(--seed-v3-line-height-s2); } .textField__header--size_medium { - padding-bottom: var(--seed-v3-unit-s3); + padding-bottom: var(--seed-v3-dimension-s3); } .textField__label--size_medium { font-size: var(--seed-v3-font-size-s4); @@ -270,11 +270,11 @@ .textField__field--size_medium { min-height: 40px; border-radius: var(--seed-v3-radius-s2); - gap: var(--seed-v3-unit-s1_5); - padding-inline: var(--seed-v3-unit-s3_5); + gap: var(--seed-v3-dimension-s1_5); + padding-inline: var(--seed-v3-dimension-s3_5); } .textField__value--size_medium { - padding-block: var(--seed-v3-unit-s2_5); + padding-block: var(--seed-v3-dimension-s2_5); font-size: var(--seed-v3-font-size-s4); line-height: var(--seed-v3-line-height-s4); } @@ -283,21 +283,21 @@ line-height: var(--seed-v3-line-height-s4); } .textField__prefixIcon--size_medium { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .textField__suffixText--size_medium { font-size: var(--seed-v3-font-size-s4); line-height: var(--seed-v3-line-height-s4); } .textField__suffixIcon--size_medium { - width: var(--seed-v3-unit-s4); - height: var(--seed-v3-unit-s4); + width: var(--seed-v3-dimension-s4); + height: var(--seed-v3-dimension-s4); } .textField__footer--size_medium { - gap: var(--seed-v3-unit-s3_5); - padding-top: var(--seed-v3-unit-s2); - min-height: var(--seed-v3-unit-s4); + gap: var(--seed-v3-dimension-s3_5); + padding-top: var(--seed-v3-dimension-s2); + min-height: var(--seed-v3-dimension-s4); } .textField__description--size_medium { font-size: var(--seed-v3-font-size-s2); @@ -308,9 +308,9 @@ line-height: var(--seed-v3-line-height-s2); } .textField__errorIcon--size_medium { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); - margin-right: var(--seed-v3-unit-s1); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); + margin-right: var(--seed-v3-dimension-s1); } .textField__characterCount--size_medium { font-size: var(--seed-v3-font-size-s2); diff --git a/packages/stylesheet/toggleButton.css b/packages/stylesheet/toggleButton.css index a5545d765..ab6463aa1 100644 --- a/packages/stylesheet/toggleButton.css +++ b/packages/stylesheet/toggleButton.css @@ -164,44 +164,44 @@ --range-color: var(--seed-v3-color-fg-neutral); } .toggleButton__root--size_xsmall { - height: var(--seed-v3-unit-s8); + height: var(--seed-v3-dimension-s8); border-radius: var(--seed-v3-radius-full); - gap: var(--seed-v3-unit-s1); - padding-inline: var(--seed-v3-unit-s3_5); - padding-block: var(--seed-v3-unit-s1_5); + gap: var(--seed-v3-dimension-s1); + padding-inline: var(--seed-v3-dimension-s3_5); + padding-block: var(--seed-v3-dimension-s1_5); } .toggleButton__label--size_xsmall { font-size: var(--seed-v3-font-size-s4); } .toggleButton__prefixIcon--size_xsmall { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .toggleButton__suffixIcon--size_xsmall { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .toggleButton__progressIndicator--size_xsmall { --size: 14px; --thickness: 2px; } .toggleButton__root--size_small { - height: var(--seed-v3-unit-s9); + height: var(--seed-v3-dimension-s9); border-radius: var(--seed-v3-radius-full); - gap: var(--seed-v3-unit-s1); - padding-inline: var(--seed-v3-unit-s4); - padding-block: var(--seed-v3-unit-s2); + gap: var(--seed-v3-dimension-s1); + padding-inline: var(--seed-v3-dimension-s4); + padding-block: var(--seed-v3-dimension-s2); } .toggleButton__label--size_small { font-size: var(--seed-v3-font-size-s4); } .toggleButton__prefixIcon--size_small { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .toggleButton__suffixIcon--size_small { - width: var(--seed-v3-unit-s3_5); - height: var(--seed-v3-unit-s3_5); + width: var(--seed-v3-dimension-s3_5); + height: var(--seed-v3-dimension-s3_5); } .toggleButton__progressIndicator--size_small { --size: 14px; diff --git a/packages/stylesheet/token.css b/packages/stylesheet/token.css index 3e7c1e918..bd5dbc65a 100644 --- a/packages/stylesheet/token.css +++ b/packages/stylesheet/token.css @@ -58,27 +58,27 @@ --seed-v3-timing-function-exit: cubic-bezier(0.35, 0, 1, 1); --seed-v3-timing-function-enter-expressive: cubic-bezier(0.03, 0.4, 0.1, 1); --seed-v3-timing-function-exit-expressive: cubic-bezier(0.35, 0, 0.95, 0.55); - --seed-v3-unit-s0_5: 2px; - --seed-v3-unit-s1: 4px; - --seed-v3-unit-s1_5: 6px; - --seed-v3-unit-s2: 8px; - --seed-v3-unit-s2_5: 10px; - --seed-v3-unit-s3: 12px; - --seed-v3-unit-s3_5: 14px; - --seed-v3-unit-s4: 16px; - --seed-v3-unit-s4_5: 18px; - --seed-v3-unit-s5: 20px; - --seed-v3-unit-s6: 24px; - --seed-v3-unit-s7: 28px; - --seed-v3-unit-s8: 32px; - --seed-v3-unit-s9: 36px; - --seed-v3-unit-s10: 40px; - --seed-v3-unit-s12: 48px; - --seed-v3-unit-s13: 52px; - --seed-v3-unit-s14: 56px; - --seed-v3-unit-s16: 64px; - --seed-v3-horizontal-spacing-between-chips: var(--seed-v3-unit-s2); - --seed-v3-horizontal-spacing-global-gutter: var(--seed-v3-unit-s4); + --seed-v3-dimension-s0_5: 2px; + --seed-v3-dimension-s1: 4px; + --seed-v3-dimension-s1_5: 6px; + --seed-v3-dimension-s2: 8px; + --seed-v3-dimension-s2_5: 10px; + --seed-v3-dimension-s3: 12px; + --seed-v3-dimension-s3_5: 14px; + --seed-v3-dimension-s4: 16px; + --seed-v3-dimension-s4_5: 18px; + --seed-v3-dimension-s5: 20px; + --seed-v3-dimension-s6: 24px; + --seed-v3-dimension-s7: 28px; + --seed-v3-dimension-s8: 32px; + --seed-v3-dimension-s9: 36px; + --seed-v3-dimension-s10: 40px; + --seed-v3-dimension-s12: 48px; + --seed-v3-dimension-s13: 52px; + --seed-v3-dimension-s14: 56px; + --seed-v3-dimension-s16: 64px; + --seed-v3-dimension-spacing-x-between-chips: var(--seed-v3-dimension-s2); + --seed-v3-dimension-spacing-x-global-gutter: var(--seed-v3-dimension-s4); } :root[data-seed][data-seed="light-only"][data-seed-scale-color="dark"], diff --git a/packages/stylesheet/topNavigation.css b/packages/stylesheet/topNavigation.css index 1eebd1821..5da32caab 100644 --- a/packages/stylesheet/topNavigation.css +++ b/packages/stylesheet/topNavigation.css @@ -66,7 +66,7 @@ } .topNavigation__container--theme_cupertino { height: 44px; - padding-inline: var(--seed-v3-unit-s4); + padding-inline: var(--seed-v3-dimension-s4); } [data-stackflow-activity-is-active="false"] .topNavigation__container--theme_cupertino { opacity: calc(pow(var(--stackflow-swipe-back-ratio, 1), 2)); @@ -123,7 +123,7 @@ } .topNavigation__container--theme_android { height: 56px; - padding-inline: var(--seed-v3-unit-s4); + padding-inline: var(--seed-v3-dimension-s4); } .topNavigation__iconButton--theme_android { width: 40px; diff --git a/packages/vars/lib/component/action-button.d.ts b/packages/vars/lib/component/action-button.d.ts index fa8f08ac8..1e1488491 100644 --- a/packages/vars/lib/component/action-button.d.ts +++ b/packages/vars/lib/component/action-button.d.ts @@ -319,7 +319,7 @@ export declare const vars: { "sizeXsmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)", + "minHeight": "var(--seed-v3-dimension-s8)", "cornerRadius": "var(--seed-v3-radius-full)" }, "progressCircle": { @@ -331,15 +331,15 @@ export declare const vars: { "sizeXsmallLayoutWithText": { "enabled": { "root": { - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s1_5)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s1_5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -349,19 +349,19 @@ export declare const vars: { "sizeXsmallLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s8)", - "paddingX": "var(--seed-v3-unit-s1_5)", - "paddingY": "var(--seed-v3-unit-s1_5)" + "minWidth": "var(--seed-v3-dimension-s8)", + "paddingX": "var(--seed-v3-dimension-s1_5)", + "paddingY": "var(--seed-v3-dimension-s1_5)" }, "icon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" } } }, "sizeSmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)", + "minHeight": "var(--seed-v3-dimension-s9)", "cornerRadius": "var(--seed-v3-radius-s2)" }, "progressCircle": { @@ -373,15 +373,15 @@ export declare const vars: { "sizeSmallLayoutWithText": { "enabled": { "root": { - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s2)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s2)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -391,19 +391,19 @@ export declare const vars: { "sizeSmallLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s9)", - "paddingX": "var(--seed-v3-unit-s2)", - "paddingY": "var(--seed-v3-unit-s2)" + "minWidth": "var(--seed-v3-dimension-s9)", + "paddingX": "var(--seed-v3-dimension-s2)", + "paddingY": "var(--seed-v3-dimension-s2)" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } }, "sizeMedium": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s10)", + "minHeight": "var(--seed-v3-dimension-s10)", "cornerRadius": "var(--seed-v3-radius-s2)" }, "progressCircle": { @@ -415,15 +415,15 @@ export declare const vars: { "sizeMediumLayoutWithText": { "enabled": { "root": { - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -433,9 +433,9 @@ export declare const vars: { "sizeMediumLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s10)", - "paddingX": "var(--seed-v3-unit-s2_5)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "minWidth": "var(--seed-v3-dimension-s10)", + "paddingX": "var(--seed-v3-dimension-s2_5)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "icon": { "size": "18px" @@ -445,7 +445,7 @@ export declare const vars: { "sizeLarge": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s13)", + "minHeight": "var(--seed-v3-dimension-s13)", "cornerRadius": "var(--seed-v3-radius-s3)" }, "progressCircle": { @@ -457,9 +457,9 @@ export declare const vars: { "sizeLargeLayoutWithText": { "enabled": { "root": { - "gap": "var(--seed-v3-unit-s2)", - "paddingX": "var(--seed-v3-unit-s5)", - "paddingY": "var(--seed-v3-unit-s3_5)" + "gap": "var(--seed-v3-dimension-s2)", + "paddingX": "var(--seed-v3-dimension-s5)", + "paddingY": "var(--seed-v3-dimension-s3_5)" }, "prefixIcon": { "size": "22px" @@ -475,9 +475,9 @@ export declare const vars: { "sizeLargeLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s13)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s3_5)" + "minWidth": "var(--seed-v3-dimension-s13)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s3_5)" }, "icon": { "size": "22px" diff --git a/packages/vars/lib/component/action-button.mjs b/packages/vars/lib/component/action-button.mjs index ad714a5aa..cca99e276 100644 --- a/packages/vars/lib/component/action-button.mjs +++ b/packages/vars/lib/component/action-button.mjs @@ -319,7 +319,7 @@ export const vars = { "sizeXsmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)", + "minHeight": "var(--seed-v3-dimension-s8)", "cornerRadius": "var(--seed-v3-radius-full)" }, "progressCircle": { @@ -331,15 +331,15 @@ export const vars = { "sizeXsmallLayoutWithText": { "enabled": { "root": { - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s1_5)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s1_5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -349,19 +349,19 @@ export const vars = { "sizeXsmallLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s8)", - "paddingX": "var(--seed-v3-unit-s1_5)", - "paddingY": "var(--seed-v3-unit-s1_5)" + "minWidth": "var(--seed-v3-dimension-s8)", + "paddingX": "var(--seed-v3-dimension-s1_5)", + "paddingY": "var(--seed-v3-dimension-s1_5)" }, "icon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" } } }, "sizeSmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)", + "minHeight": "var(--seed-v3-dimension-s9)", "cornerRadius": "var(--seed-v3-radius-s2)" }, "progressCircle": { @@ -373,15 +373,15 @@ export const vars = { "sizeSmallLayoutWithText": { "enabled": { "root": { - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s2)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s2)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -391,19 +391,19 @@ export const vars = { "sizeSmallLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s9)", - "paddingX": "var(--seed-v3-unit-s2)", - "paddingY": "var(--seed-v3-unit-s2)" + "minWidth": "var(--seed-v3-dimension-s9)", + "paddingX": "var(--seed-v3-dimension-s2)", + "paddingY": "var(--seed-v3-dimension-s2)" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } }, "sizeMedium": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s10)", + "minHeight": "var(--seed-v3-dimension-s10)", "cornerRadius": "var(--seed-v3-radius-s2)" }, "progressCircle": { @@ -415,15 +415,15 @@ export const vars = { "sizeMediumLayoutWithText": { "enabled": { "root": { - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -433,9 +433,9 @@ export const vars = { "sizeMediumLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s10)", - "paddingX": "var(--seed-v3-unit-s2_5)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "minWidth": "var(--seed-v3-dimension-s10)", + "paddingX": "var(--seed-v3-dimension-s2_5)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "icon": { "size": "18px" @@ -445,7 +445,7 @@ export const vars = { "sizeLarge": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s13)", + "minHeight": "var(--seed-v3-dimension-s13)", "cornerRadius": "var(--seed-v3-radius-s3)" }, "progressCircle": { @@ -457,9 +457,9 @@ export const vars = { "sizeLargeLayoutWithText": { "enabled": { "root": { - "gap": "var(--seed-v3-unit-s2)", - "paddingX": "var(--seed-v3-unit-s5)", - "paddingY": "var(--seed-v3-unit-s3_5)" + "gap": "var(--seed-v3-dimension-s2)", + "paddingX": "var(--seed-v3-dimension-s5)", + "paddingY": "var(--seed-v3-dimension-s3_5)" }, "prefixIcon": { "size": "22px" @@ -475,9 +475,9 @@ export const vars = { "sizeLargeLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s13)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s3_5)" + "minWidth": "var(--seed-v3-dimension-s13)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s3_5)" }, "icon": { "size": "22px" diff --git a/packages/vars/lib/component/action-chip.d.ts b/packages/vars/lib/component/action-chip.d.ts index e4f6d23c1..817bb3642 100644 --- a/packages/vars/lib/component/action-chip.d.ts +++ b/packages/vars/lib/component/action-chip.d.ts @@ -46,18 +46,18 @@ export declare const vars: { "sizeSmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)", - "paddingY": "var(--seed-v3-unit-s1_5)", - "gap": "var(--seed-v3-unit-s1)" + "minHeight": "var(--seed-v3-dimension-s8)", + "paddingY": "var(--seed-v3-dimension-s1_5)", + "gap": "var(--seed-v3-dimension-s1)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "count": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -67,18 +67,18 @@ export declare const vars: { "sizeMedium": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)", - "paddingY": "var(--seed-v3-unit-s2)", - "gap": "var(--seed-v3-unit-s1)" + "minHeight": "var(--seed-v3-dimension-s9)", + "paddingY": "var(--seed-v3-dimension-s2)", + "gap": "var(--seed-v3-dimension-s1)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "count": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -88,34 +88,34 @@ export declare const vars: { "sizeSmallLayoutWithText": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s3)" + "paddingX": "var(--seed-v3-dimension-s3)" } } }, "sizeSmallLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s8)" + "minWidth": "var(--seed-v3-dimension-s8)" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } }, "sizeMediumLayoutWithText": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s3_5)" + "paddingX": "var(--seed-v3-dimension-s3_5)" } } }, "sizeMediumLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s9)" + "minWidth": "var(--seed-v3-dimension-s9)" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } } diff --git a/packages/vars/lib/component/action-chip.mjs b/packages/vars/lib/component/action-chip.mjs index 72acf41be..c661ea810 100644 --- a/packages/vars/lib/component/action-chip.mjs +++ b/packages/vars/lib/component/action-chip.mjs @@ -46,18 +46,18 @@ export const vars = { "sizeSmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)", - "paddingY": "var(--seed-v3-unit-s1_5)", - "gap": "var(--seed-v3-unit-s1)" + "minHeight": "var(--seed-v3-dimension-s8)", + "paddingY": "var(--seed-v3-dimension-s1_5)", + "gap": "var(--seed-v3-dimension-s1)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "count": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -67,18 +67,18 @@ export const vars = { "sizeMedium": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)", - "paddingY": "var(--seed-v3-unit-s2)", - "gap": "var(--seed-v3-unit-s1)" + "minHeight": "var(--seed-v3-dimension-s9)", + "paddingY": "var(--seed-v3-dimension-s2)", + "gap": "var(--seed-v3-dimension-s1)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "count": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -88,34 +88,34 @@ export const vars = { "sizeSmallLayoutWithText": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s3)" + "paddingX": "var(--seed-v3-dimension-s3)" } } }, "sizeSmallLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s8)" + "minWidth": "var(--seed-v3-dimension-s8)" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } }, "sizeMediumLayoutWithText": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s3_5)" + "paddingX": "var(--seed-v3-dimension-s3_5)" } } }, "sizeMediumLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s9)" + "minWidth": "var(--seed-v3-dimension-s9)" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } } diff --git a/packages/vars/lib/component/action-sheet-close-button.d.ts b/packages/vars/lib/component/action-sheet-close-button.d.ts index a48cbd758..5369f3186 100644 --- a/packages/vars/lib/component/action-sheet-close-button.d.ts +++ b/packages/vars/lib/component/action-sheet-close-button.d.ts @@ -5,9 +5,9 @@ export declare const vars: { "color": "var(--seed-v3-color-bg-neutral-weak)", "minHeight": "52px", "cornerRadius": "var(--seed-v3-radius-s3)", - "paddingX": "var(--seed-v3-unit-s5)", - "paddingY": "var(--seed-v3-unit-s3_5)", - "gap": "var(--seed-v3-unit-s3)" + "paddingX": "var(--seed-v3-dimension-s5)", + "paddingY": "var(--seed-v3-dimension-s3_5)", + "gap": "var(--seed-v3-dimension-s3)" }, "label": { "color": "var(--seed-v3-color-fg-neutral)", diff --git a/packages/vars/lib/component/action-sheet-close-button.mjs b/packages/vars/lib/component/action-sheet-close-button.mjs index 4ec6eddf8..1d56e124d 100644 --- a/packages/vars/lib/component/action-sheet-close-button.mjs +++ b/packages/vars/lib/component/action-sheet-close-button.mjs @@ -5,9 +5,9 @@ export const vars = { "color": "var(--seed-v3-color-bg-neutral-weak)", "minHeight": "52px", "cornerRadius": "var(--seed-v3-radius-s3)", - "paddingX": "var(--seed-v3-unit-s5)", - "paddingY": "var(--seed-v3-unit-s3_5)", - "gap": "var(--seed-v3-unit-s3)" + "paddingX": "var(--seed-v3-dimension-s5)", + "paddingY": "var(--seed-v3-dimension-s3_5)", + "gap": "var(--seed-v3-dimension-s3)" }, "label": { "color": "var(--seed-v3-color-fg-neutral)", diff --git a/packages/vars/lib/component/action-sheet-item.d.ts b/packages/vars/lib/component/action-sheet-item.d.ts index 25d47db4a..613903cec 100644 --- a/packages/vars/lib/component/action-sheet-item.d.ts +++ b/packages/vars/lib/component/action-sheet-item.d.ts @@ -4,11 +4,11 @@ export declare const vars: { "root": { "color": "var(--seed-v3-color-bg-neutral-weak)", "minHeight": "52px", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s4)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s4)", "strokeBottomWidth": "1px", "strokeColor": "var(--seed-v3-color-stroke-neutral)", - "gap": "var(--seed-v3-unit-s3)" + "gap": "var(--seed-v3-dimension-s3)" }, "prefixIcon": { "size": "22px" diff --git a/packages/vars/lib/component/action-sheet-item.mjs b/packages/vars/lib/component/action-sheet-item.mjs index a39e5ead8..99a689d62 100644 --- a/packages/vars/lib/component/action-sheet-item.mjs +++ b/packages/vars/lib/component/action-sheet-item.mjs @@ -4,11 +4,11 @@ export const vars = { "root": { "color": "var(--seed-v3-color-bg-neutral-weak)", "minHeight": "52px", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s4)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s4)", "strokeBottomWidth": "1px", "strokeColor": "var(--seed-v3-color-stroke-neutral)", - "gap": "var(--seed-v3-unit-s3)" + "gap": "var(--seed-v3-dimension-s3)" }, "prefixIcon": { "size": "22px" diff --git a/packages/vars/lib/component/action-sheet.d.ts b/packages/vars/lib/component/action-sheet.d.ts index 74b89a9fc..68ad99094 100644 --- a/packages/vars/lib/component/action-sheet.d.ts +++ b/packages/vars/lib/component/action-sheet.d.ts @@ -12,8 +12,8 @@ export declare const vars: { }, "content": { "color": "var(--seed-v3-color-bg-layer-floating)", - "paddingX": "var(--seed-v3-horizontal-spacing-global-gutter)", - "paddingY": "var(--seed-v3-unit-s4)", + "paddingX": "var(--seed-v3-dimension-spacing-x-global-gutter)", + "paddingY": "var(--seed-v3-dimension-s4)", "cornerTopRadius": "var(--seed-v3-radius-s6)", "enterDuration": "var(--seed-v3-duration-s6)", "enterTimingFunction": "var(--seed-v3-timing-function-enter-expressive)", @@ -21,13 +21,13 @@ export declare const vars: { "exitTimingFunction": "var(--seed-v3-timing-function-exit)" }, "list": { - "gap": "var(--seed-v3-unit-s2_5)" + "gap": "var(--seed-v3-dimension-s2_5)" }, "group": { "cornerRadius": "var(--seed-v3-radius-s4)" }, "footer": { - "paddingTop": "var(--seed-v3-unit-s2_5)" + "paddingTop": "var(--seed-v3-dimension-s2_5)" } } } diff --git a/packages/vars/lib/component/action-sheet.mjs b/packages/vars/lib/component/action-sheet.mjs index 2297c9d08..bd2a1e46a 100644 --- a/packages/vars/lib/component/action-sheet.mjs +++ b/packages/vars/lib/component/action-sheet.mjs @@ -12,8 +12,8 @@ export const vars = { }, "content": { "color": "var(--seed-v3-color-bg-layer-floating)", - "paddingX": "var(--seed-v3-horizontal-spacing-global-gutter)", - "paddingY": "var(--seed-v3-unit-s4)", + "paddingX": "var(--seed-v3-dimension-spacing-x-global-gutter)", + "paddingY": "var(--seed-v3-dimension-s4)", "cornerTopRadius": "var(--seed-v3-radius-s6)", "enterDuration": "var(--seed-v3-duration-s6)", "enterTimingFunction": "var(--seed-v3-timing-function-enter-expressive)", @@ -21,13 +21,13 @@ export const vars = { "exitTimingFunction": "var(--seed-v3-timing-function-exit)" }, "list": { - "gap": "var(--seed-v3-unit-s2_5)" + "gap": "var(--seed-v3-dimension-s2_5)" }, "group": { "cornerRadius": "var(--seed-v3-radius-s4)" }, "footer": { - "paddingTop": "var(--seed-v3-unit-s2_5)" + "paddingTop": "var(--seed-v3-dimension-s2_5)" } } } diff --git a/packages/vars/lib/component/badge.d.ts b/packages/vars/lib/component/badge.d.ts index 4fff8cf42..65f820ad3 100644 --- a/packages/vars/lib/component/badge.d.ts +++ b/packages/vars/lib/component/badge.d.ts @@ -2,9 +2,9 @@ export declare const vars: { "sizeLarge": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s6)", - "paddingX": "var(--seed-v3-unit-s2)", - "paddingY": "var(--seed-v3-unit-s1)" + "minHeight": "var(--seed-v3-dimension-s6)", + "paddingX": "var(--seed-v3-dimension-s2)", + "paddingY": "var(--seed-v3-dimension-s1)" }, "label": { "fontSize": "var(--seed-v3-font-size-s2)", @@ -15,9 +15,9 @@ export declare const vars: { "sizeMedium": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s5)", - "paddingX": "var(--seed-v3-unit-s1_5)", - "paddingY": "var(--seed-v3-unit-s0_5)" + "minHeight": "var(--seed-v3-dimension-s5)", + "paddingX": "var(--seed-v3-dimension-s1_5)", + "paddingY": "var(--seed-v3-dimension-s0_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s1)", diff --git a/packages/vars/lib/component/badge.mjs b/packages/vars/lib/component/badge.mjs index 8ba759c9e..6bb7e51e0 100644 --- a/packages/vars/lib/component/badge.mjs +++ b/packages/vars/lib/component/badge.mjs @@ -2,9 +2,9 @@ export const vars = { "sizeLarge": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s6)", - "paddingX": "var(--seed-v3-unit-s2)", - "paddingY": "var(--seed-v3-unit-s1)" + "minHeight": "var(--seed-v3-dimension-s6)", + "paddingX": "var(--seed-v3-dimension-s2)", + "paddingY": "var(--seed-v3-dimension-s1)" }, "label": { "fontSize": "var(--seed-v3-font-size-s2)", @@ -15,9 +15,9 @@ export const vars = { "sizeMedium": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s5)", - "paddingX": "var(--seed-v3-unit-s1_5)", - "paddingY": "var(--seed-v3-unit-s0_5)" + "minHeight": "var(--seed-v3-dimension-s5)", + "paddingX": "var(--seed-v3-dimension-s1_5)", + "paddingY": "var(--seed-v3-dimension-s0_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s1)", diff --git a/packages/vars/lib/component/bottom-sheet.d.ts b/packages/vars/lib/component/bottom-sheet.d.ts index 2b1fab36d..94ff4eb89 100644 --- a/packages/vars/lib/component/bottom-sheet.d.ts +++ b/packages/vars/lib/component/bottom-sheet.d.ts @@ -19,15 +19,15 @@ export declare const vars: { "exitTimingFunction": "var(--seed-v3-timing-function-exit)" }, "header": { - "gap": "var(--seed-v3-unit-s2)", - "paddingX": "var(--seed-v3-horizontal-spacing-global-gutter)", - "paddingTop": "var(--seed-v3-unit-s6)", - "paddingBottom": "var(--seed-v3-unit-s4)" + "gap": "var(--seed-v3-dimension-s2)", + "paddingX": "var(--seed-v3-dimension-spacing-x-global-gutter)", + "paddingTop": "var(--seed-v3-dimension-s6)", + "paddingBottom": "var(--seed-v3-dimension-s4)" }, "footer": { - "paddingX": "var(--seed-v3-horizontal-spacing-global-gutter)", - "paddingTop": "var(--seed-v3-unit-s3)", - "paddingBottom": "var(--seed-v3-unit-s4)" + "paddingX": "var(--seed-v3-dimension-spacing-x-global-gutter)", + "paddingTop": "var(--seed-v3-dimension-s3)", + "paddingBottom": "var(--seed-v3-dimension-s4)" }, "title": { "color": "var(--seed-v3-color-fg-neutral)", @@ -46,8 +46,8 @@ export declare const vars: { "cornerRadius": "var(--seed-v3-radius-full)", "targetSize": "44px", "size": "28px", - "fromTop": "var(--seed-v3-unit-s5)", - "fromRight": "var(--seed-v3-unit-s5)" + "fromTop": "var(--seed-v3-dimension-s5)", + "fromRight": "var(--seed-v3-dimension-s5)" }, "closeIcon": { "color": "var(--seed-v3-color-fg-neutral)", diff --git a/packages/vars/lib/component/bottom-sheet.mjs b/packages/vars/lib/component/bottom-sheet.mjs index 0bce02fc5..cb4a4c094 100644 --- a/packages/vars/lib/component/bottom-sheet.mjs +++ b/packages/vars/lib/component/bottom-sheet.mjs @@ -19,15 +19,15 @@ export const vars = { "exitTimingFunction": "var(--seed-v3-timing-function-exit)" }, "header": { - "gap": "var(--seed-v3-unit-s2)", - "paddingX": "var(--seed-v3-horizontal-spacing-global-gutter)", - "paddingTop": "var(--seed-v3-unit-s6)", - "paddingBottom": "var(--seed-v3-unit-s4)" + "gap": "var(--seed-v3-dimension-s2)", + "paddingX": "var(--seed-v3-dimension-spacing-x-global-gutter)", + "paddingTop": "var(--seed-v3-dimension-s6)", + "paddingBottom": "var(--seed-v3-dimension-s4)" }, "footer": { - "paddingX": "var(--seed-v3-horizontal-spacing-global-gutter)", - "paddingTop": "var(--seed-v3-unit-s3)", - "paddingBottom": "var(--seed-v3-unit-s4)" + "paddingX": "var(--seed-v3-dimension-spacing-x-global-gutter)", + "paddingTop": "var(--seed-v3-dimension-s3)", + "paddingBottom": "var(--seed-v3-dimension-s4)" }, "title": { "color": "var(--seed-v3-color-fg-neutral)", @@ -46,8 +46,8 @@ export const vars = { "cornerRadius": "var(--seed-v3-radius-full)", "targetSize": "44px", "size": "28px", - "fromTop": "var(--seed-v3-unit-s5)", - "fromRight": "var(--seed-v3-unit-s5)" + "fromTop": "var(--seed-v3-dimension-s5)", + "fromRight": "var(--seed-v3-dimension-s5)" }, "closeIcon": { "color": "var(--seed-v3-color-fg-neutral)", diff --git a/packages/vars/lib/component/callout.d.ts b/packages/vars/lib/component/callout.d.ts index c1e3e1d77..fb9a312a8 100644 --- a/packages/vars/lib/component/callout.d.ts +++ b/packages/vars/lib/component/callout.d.ts @@ -2,15 +2,15 @@ export declare const vars: { "base": { "enabled": { "root": { - "padding": "var(--seed-v3-unit-s3_5)", - "gap": "var(--seed-v3-unit-s3)", + "padding": "var(--seed-v3-dimension-s3_5)", + "gap": "var(--seed-v3-dimension-s3)", "cornerRadius": "var(--seed-v3-radius-s2_5)", "fontSize": "var(--seed-v3-font-size-s4)", "lineHeight": "var(--seed-v3-line-height-s5)", "minHeight": "50px" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "title": { "fontWeight": "var(--seed-v3-font-weight-bold)" @@ -19,13 +19,13 @@ export declare const vars: { "fontWeight": "var(--seed-v3-font-weight-regular)" }, "dismissButton": { - "size": "var(--seed-v3-unit-s10)" + "size": "var(--seed-v3-dimension-s10)" }, "dismissIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "actionableIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } }, diff --git a/packages/vars/lib/component/callout.mjs b/packages/vars/lib/component/callout.mjs index d887abc73..a1574a50a 100644 --- a/packages/vars/lib/component/callout.mjs +++ b/packages/vars/lib/component/callout.mjs @@ -2,15 +2,15 @@ export const vars = { "base": { "enabled": { "root": { - "padding": "var(--seed-v3-unit-s3_5)", - "gap": "var(--seed-v3-unit-s3)", + "padding": "var(--seed-v3-dimension-s3_5)", + "gap": "var(--seed-v3-dimension-s3)", "cornerRadius": "var(--seed-v3-radius-s2_5)", "fontSize": "var(--seed-v3-font-size-s4)", "lineHeight": "var(--seed-v3-line-height-s5)", "minHeight": "50px" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "title": { "fontWeight": "var(--seed-v3-font-weight-bold)" @@ -19,13 +19,13 @@ export const vars = { "fontWeight": "var(--seed-v3-font-weight-regular)" }, "dismissButton": { - "size": "var(--seed-v3-unit-s10)" + "size": "var(--seed-v3-dimension-s10)" }, "dismissIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "actionableIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } }, diff --git a/packages/vars/lib/component/checkbox.d.ts b/packages/vars/lib/component/checkbox.d.ts index 1032c9497..8fabb4157 100644 --- a/packages/vars/lib/component/checkbox.d.ts +++ b/packages/vars/lib/component/checkbox.d.ts @@ -5,7 +5,7 @@ export declare const vars: { "color": "var(--seed-v3-color-fg-neutral)" }, "root": { - "gap": "var(--seed-v3-unit-s2)" + "gap": "var(--seed-v3-dimension-s2)" } } }, @@ -113,14 +113,14 @@ export declare const vars: { "sizeMedium": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)" + "minHeight": "var(--seed-v3-dimension-s8)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)", "lineHeight": "var(--seed-v3-line-height-s4)" }, "control": { - "size": "var(--seed-v3-unit-s5)", + "size": "var(--seed-v3-dimension-s5)", "cornerRadius": "var(--seed-v3-radius-s1)" } } @@ -128,14 +128,14 @@ export declare const vars: { "sizeLarge": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)" + "minHeight": "var(--seed-v3-dimension-s9)" }, "label": { "fontSize": "var(--seed-v3-font-size-s5)", "lineHeight": "var(--seed-v3-line-height-s5)" }, "control": { - "size": "var(--seed-v3-unit-s6)", + "size": "var(--seed-v3-dimension-s6)", "cornerRadius": "var(--seed-v3-radius-s1_5)" } } diff --git a/packages/vars/lib/component/checkbox.mjs b/packages/vars/lib/component/checkbox.mjs index a84a98bf5..9bf9b2e59 100644 --- a/packages/vars/lib/component/checkbox.mjs +++ b/packages/vars/lib/component/checkbox.mjs @@ -5,7 +5,7 @@ export const vars = { "color": "var(--seed-v3-color-fg-neutral)" }, "root": { - "gap": "var(--seed-v3-unit-s2)" + "gap": "var(--seed-v3-dimension-s2)" } } }, @@ -113,14 +113,14 @@ export const vars = { "sizeMedium": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)" + "minHeight": "var(--seed-v3-dimension-s8)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)", "lineHeight": "var(--seed-v3-line-height-s4)" }, "control": { - "size": "var(--seed-v3-unit-s5)", + "size": "var(--seed-v3-dimension-s5)", "cornerRadius": "var(--seed-v3-radius-s1)" } } @@ -128,14 +128,14 @@ export const vars = { "sizeLarge": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)" + "minHeight": "var(--seed-v3-dimension-s9)" }, "label": { "fontSize": "var(--seed-v3-font-size-s5)", "lineHeight": "var(--seed-v3-line-height-s5)" }, "control": { - "size": "var(--seed-v3-unit-s6)", + "size": "var(--seed-v3-dimension-s6)", "cornerRadius": "var(--seed-v3-radius-s1_5)" } } diff --git a/packages/vars/lib/component/chip-tab.d.ts b/packages/vars/lib/component/chip-tab.d.ts index 837008adb..dbb077ce5 100644 --- a/packages/vars/lib/component/chip-tab.d.ts +++ b/packages/vars/lib/component/chip-tab.d.ts @@ -2,8 +2,8 @@ export declare const vars: { "base": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s2)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s2)", "cornerRadius": "var(--seed-v3-radius-full)", "minHeight": "36px" }, diff --git a/packages/vars/lib/component/chip-tab.mjs b/packages/vars/lib/component/chip-tab.mjs index 338e68343..e280047d6 100644 --- a/packages/vars/lib/component/chip-tab.mjs +++ b/packages/vars/lib/component/chip-tab.mjs @@ -2,8 +2,8 @@ export const vars = { "base": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s2)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s2)", "cornerRadius": "var(--seed-v3-radius-full)", "minHeight": "36px" }, diff --git a/packages/vars/lib/component/chip-tablist.d.ts b/packages/vars/lib/component/chip-tablist.d.ts index 3ad54994b..b1748875d 100644 --- a/packages/vars/lib/component/chip-tablist.d.ts +++ b/packages/vars/lib/component/chip-tablist.d.ts @@ -2,7 +2,7 @@ export declare const vars: { "base": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s4)" + "paddingX": "var(--seed-v3-dimension-s4)" } } }, diff --git a/packages/vars/lib/component/chip-tablist.mjs b/packages/vars/lib/component/chip-tablist.mjs index bfa4aaffe..85ba0d28d 100644 --- a/packages/vars/lib/component/chip-tablist.mjs +++ b/packages/vars/lib/component/chip-tablist.mjs @@ -2,7 +2,7 @@ export const vars = { "base": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s4)" + "paddingX": "var(--seed-v3-dimension-s4)" } } }, diff --git a/packages/vars/lib/component/control-chip.d.ts b/packages/vars/lib/component/control-chip.d.ts index 1e49e8b05..c01cd5a5f 100644 --- a/packages/vars/lib/component/control-chip.d.ts +++ b/packages/vars/lib/component/control-chip.d.ts @@ -80,18 +80,18 @@ export declare const vars: { "sizeSmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)", - "paddingY": "var(--seed-v3-unit-s1_5)", - "gap": "var(--seed-v3-unit-s1)" + "minHeight": "var(--seed-v3-dimension-s8)", + "paddingY": "var(--seed-v3-dimension-s1_5)", + "gap": "var(--seed-v3-dimension-s1)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "count": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -101,18 +101,18 @@ export declare const vars: { "sizeMedium": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)", - "paddingY": "var(--seed-v3-unit-s2)", - "gap": "var(--seed-v3-unit-s1)" + "minHeight": "var(--seed-v3-dimension-s9)", + "paddingY": "var(--seed-v3-dimension-s2)", + "gap": "var(--seed-v3-dimension-s1)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "count": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -122,34 +122,34 @@ export declare const vars: { "sizeSmallLayoutWithText": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s3)" + "paddingX": "var(--seed-v3-dimension-s3)" } } }, "sizeSmallLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s8)" + "minWidth": "var(--seed-v3-dimension-s8)" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } }, "sizeMediumLayoutWithText": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s3_5)" + "paddingX": "var(--seed-v3-dimension-s3_5)" } } }, "sizeMediumLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s9)" + "minWidth": "var(--seed-v3-dimension-s9)" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } } diff --git a/packages/vars/lib/component/control-chip.mjs b/packages/vars/lib/component/control-chip.mjs index 16e3d554b..c512b4239 100644 --- a/packages/vars/lib/component/control-chip.mjs +++ b/packages/vars/lib/component/control-chip.mjs @@ -80,18 +80,18 @@ export const vars = { "sizeSmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)", - "paddingY": "var(--seed-v3-unit-s1_5)", - "gap": "var(--seed-v3-unit-s1)" + "minHeight": "var(--seed-v3-dimension-s8)", + "paddingY": "var(--seed-v3-dimension-s1_5)", + "gap": "var(--seed-v3-dimension-s1)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "count": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -101,18 +101,18 @@ export const vars = { "sizeMedium": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)", - "paddingY": "var(--seed-v3-unit-s2)", - "gap": "var(--seed-v3-unit-s1)" + "minHeight": "var(--seed-v3-dimension-s9)", + "paddingY": "var(--seed-v3-dimension-s2)", + "gap": "var(--seed-v3-dimension-s1)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "count": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -122,34 +122,34 @@ export const vars = { "sizeSmallLayoutWithText": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s3)" + "paddingX": "var(--seed-v3-dimension-s3)" } } }, "sizeSmallLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s8)" + "minWidth": "var(--seed-v3-dimension-s8)" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } }, "sizeMediumLayoutWithText": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s3_5)" + "paddingX": "var(--seed-v3-dimension-s3_5)" } } }, "sizeMediumLayoutIconOnly": { "enabled": { "root": { - "minWidth": "var(--seed-v3-unit-s9)" + "minWidth": "var(--seed-v3-dimension-s9)" }, "icon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } } diff --git a/packages/vars/lib/component/dialog.d.ts b/packages/vars/lib/component/dialog.d.ts index f81224991..40ada0cd8 100644 --- a/packages/vars/lib/component/dialog.d.ts +++ b/packages/vars/lib/component/dialog.d.ts @@ -13,9 +13,9 @@ export declare const vars: { "content": { "color": "var(--seed-v3-color-bg-layer-default)", "cornerRadius": "var(--seed-v3-radius-s5)", - "marginX": "var(--seed-v3-unit-s8)", - "paddingX": "var(--seed-v3-unit-s5)", - "paddingY": "var(--seed-v3-unit-s5)", + "marginX": "var(--seed-v3-dimension-s8)", + "paddingX": "var(--seed-v3-dimension-s5)", + "paddingY": "var(--seed-v3-dimension-s5)", "maxWidth": "272px", "enterDuration": "var(--seed-v3-duration-s4)", "enterTimingFunction": "var(--seed-v3-timing-function-enter-expressive)", @@ -26,11 +26,11 @@ export declare const vars: { "exitOpacity": "0" }, "header": { - "gap": "var(--seed-v3-unit-s1_5)" + "gap": "var(--seed-v3-dimension-s1_5)" }, "footer": { - "paddingTop": "var(--seed-v3-unit-s4)", - "gap": "var(--seed-v3-unit-s2)" + "paddingTop": "var(--seed-v3-dimension-s4)", + "gap": "var(--seed-v3-dimension-s2)" }, "title": { "color": "var(--seed-v3-color-fg-neutral)", diff --git a/packages/vars/lib/component/dialog.mjs b/packages/vars/lib/component/dialog.mjs index 8c3305fc3..070e3f531 100644 --- a/packages/vars/lib/component/dialog.mjs +++ b/packages/vars/lib/component/dialog.mjs @@ -13,9 +13,9 @@ export const vars = { "content": { "color": "var(--seed-v3-color-bg-layer-default)", "cornerRadius": "var(--seed-v3-radius-s5)", - "marginX": "var(--seed-v3-unit-s8)", - "paddingX": "var(--seed-v3-unit-s5)", - "paddingY": "var(--seed-v3-unit-s5)", + "marginX": "var(--seed-v3-dimension-s8)", + "paddingX": "var(--seed-v3-dimension-s5)", + "paddingY": "var(--seed-v3-dimension-s5)", "maxWidth": "272px", "enterDuration": "var(--seed-v3-duration-s4)", "enterTimingFunction": "var(--seed-v3-timing-function-enter-expressive)", @@ -26,11 +26,11 @@ export const vars = { "exitOpacity": "0" }, "header": { - "gap": "var(--seed-v3-unit-s1_5)" + "gap": "var(--seed-v3-dimension-s1_5)" }, "footer": { - "paddingTop": "var(--seed-v3-unit-s4)", - "gap": "var(--seed-v3-unit-s2)" + "paddingTop": "var(--seed-v3-dimension-s4)", + "gap": "var(--seed-v3-dimension-s2)" }, "title": { "color": "var(--seed-v3-color-fg-neutral)", diff --git a/packages/vars/lib/component/extended-fab.d.ts b/packages/vars/lib/component/extended-fab.d.ts index 55c4f2bda..62f91a05d 100644 --- a/packages/vars/lib/component/extended-fab.d.ts +++ b/packages/vars/lib/component/extended-fab.d.ts @@ -47,9 +47,9 @@ export declare const vars: { "enabled": { "root": { "minHeight": "40px", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "prefixIcon": { "size": "16px" @@ -65,9 +65,9 @@ export declare const vars: { "enabled": { "root": { "minHeight": "48px", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s3)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s3)" }, "prefixIcon": { "size": "16px" diff --git a/packages/vars/lib/component/extended-fab.mjs b/packages/vars/lib/component/extended-fab.mjs index 4db1b9950..41704074b 100644 --- a/packages/vars/lib/component/extended-fab.mjs +++ b/packages/vars/lib/component/extended-fab.mjs @@ -47,9 +47,9 @@ export const vars = { "enabled": { "root": { "minHeight": "40px", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "prefixIcon": { "size": "16px" @@ -65,9 +65,9 @@ export const vars = { "enabled": { "root": { "minHeight": "48px", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s3)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s3)" }, "prefixIcon": { "size": "16px" diff --git a/packages/vars/lib/component/help-bubble.d.ts b/packages/vars/lib/component/help-bubble.d.ts index 1660f7670..9f988ad34 100644 --- a/packages/vars/lib/component/help-bubble.d.ts +++ b/packages/vars/lib/component/help-bubble.d.ts @@ -4,12 +4,12 @@ export declare const vars: { "root": { "color": "var(--seed-v3-color-bg-neutral-solid)", "cornerRadius": "var(--seed-v3-radius-s3)", - "paddingX": "var(--seed-v3-unit-s3)", - "paddingY": "var(--seed-v3-unit-s3)" + "paddingX": "var(--seed-v3-dimension-s3)", + "paddingY": "var(--seed-v3-dimension-s3)" }, "arrow": { "color": "var(--seed-v3-color-bg-neutral-solid)", - "size": "var(--seed-v3-unit-s2_5)" + "size": "var(--seed-v3-dimension-s2_5)" }, "title": { "color": "var(--seed-v3-color-palette-static-white)", diff --git a/packages/vars/lib/component/help-bubble.mjs b/packages/vars/lib/component/help-bubble.mjs index 8666fac76..9a8442269 100644 --- a/packages/vars/lib/component/help-bubble.mjs +++ b/packages/vars/lib/component/help-bubble.mjs @@ -4,12 +4,12 @@ export const vars = { "root": { "color": "var(--seed-v3-color-bg-neutral-solid)", "cornerRadius": "var(--seed-v3-radius-s3)", - "paddingX": "var(--seed-v3-unit-s3)", - "paddingY": "var(--seed-v3-unit-s3)" + "paddingX": "var(--seed-v3-dimension-s3)", + "paddingY": "var(--seed-v3-dimension-s3)" }, "arrow": { "color": "var(--seed-v3-color-bg-neutral-solid)", - "size": "var(--seed-v3-unit-s2_5)" + "size": "var(--seed-v3-dimension-s2_5)" }, "title": { "color": "var(--seed-v3-color-palette-static-white)", diff --git a/packages/vars/lib/component/inline-banner.d.ts b/packages/vars/lib/component/inline-banner.d.ts index 0b523770e..ccc342c26 100644 --- a/packages/vars/lib/component/inline-banner.d.ts +++ b/packages/vars/lib/component/inline-banner.d.ts @@ -2,18 +2,18 @@ export declare const vars: { "base": { "enabled": { "root": { - "gap": "var(--seed-v3-unit-s4)", - "paddingX": "var(--seed-v3-unit-s4)" + "gap": "var(--seed-v3-dimension-s4)", + "paddingX": "var(--seed-v3-dimension-s4)" }, "content": { - "gap": "var(--seed-v3-unit-s2)", - "paddingY": "var(--seed-v3-unit-s2_5)", + "gap": "var(--seed-v3-dimension-s2)", + "paddingY": "var(--seed-v3-dimension-s2_5)", "fontSize": "var(--seed-v3-font-size-s4)", "lineHeight": "var(--seed-v3-line-height-s4)", - "minHeight": "var(--seed-v3-unit-s10)" + "minHeight": "var(--seed-v3-dimension-s10)" }, "icon": { - "size": "var(--seed-v3-unit-s4)", + "size": "var(--seed-v3-dimension-s4)", "marginY": "1.5px" }, "title": { @@ -23,19 +23,19 @@ export declare const vars: { "fontWeight": "var(--seed-v3-font-weight-medium)" }, "linkLabel": { - "height": "var(--seed-v3-unit-s10)", + "height": "var(--seed-v3-dimension-s10)", "fontWeight": "var(--seed-v3-font-weight-regular)", "fontSize": "var(--seed-v3-font-size-s2)", "lineHeight": "var(--seed-v3-line-height-s2)" }, "dismissButton": { - "size": "var(--seed-v3-unit-s10)" + "size": "var(--seed-v3-dimension-s10)" }, "dismissIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "actionableIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } }, diff --git a/packages/vars/lib/component/inline-banner.mjs b/packages/vars/lib/component/inline-banner.mjs index f024b8ee2..73599c3b7 100644 --- a/packages/vars/lib/component/inline-banner.mjs +++ b/packages/vars/lib/component/inline-banner.mjs @@ -2,18 +2,18 @@ export const vars = { "base": { "enabled": { "root": { - "gap": "var(--seed-v3-unit-s4)", - "paddingX": "var(--seed-v3-unit-s4)" + "gap": "var(--seed-v3-dimension-s4)", + "paddingX": "var(--seed-v3-dimension-s4)" }, "content": { - "gap": "var(--seed-v3-unit-s2)", - "paddingY": "var(--seed-v3-unit-s2_5)", + "gap": "var(--seed-v3-dimension-s2)", + "paddingY": "var(--seed-v3-dimension-s2_5)", "fontSize": "var(--seed-v3-font-size-s4)", "lineHeight": "var(--seed-v3-line-height-s4)", - "minHeight": "var(--seed-v3-unit-s10)" + "minHeight": "var(--seed-v3-dimension-s10)" }, "icon": { - "size": "var(--seed-v3-unit-s4)", + "size": "var(--seed-v3-dimension-s4)", "marginY": "1.5px" }, "title": { @@ -23,19 +23,19 @@ export const vars = { "fontWeight": "var(--seed-v3-font-weight-medium)" }, "linkLabel": { - "height": "var(--seed-v3-unit-s10)", + "height": "var(--seed-v3-dimension-s10)", "fontWeight": "var(--seed-v3-font-weight-regular)", "fontSize": "var(--seed-v3-font-size-s2)", "lineHeight": "var(--seed-v3-line-height-s2)" }, "dismissButton": { - "size": "var(--seed-v3-unit-s10)" + "size": "var(--seed-v3-dimension-s10)" }, "dismissIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "actionableIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" } } }, diff --git a/packages/vars/lib/component/progress-circle.d.ts b/packages/vars/lib/component/progress-circle.d.ts index 263b99700..22c157739 100644 --- a/packages/vars/lib/component/progress-circle.d.ts +++ b/packages/vars/lib/component/progress-circle.d.ts @@ -2,7 +2,7 @@ export declare const vars: { "size40": { "enabled": { "root": { - "size": "var(--seed-v3-unit-s10)", + "size": "var(--seed-v3-dimension-s10)", "thickness": "5px" } } @@ -10,7 +10,7 @@ export declare const vars: { "size24": { "enabled": { "root": { - "size": "var(--seed-v3-unit-s6)", + "size": "var(--seed-v3-dimension-s6)", "thickness": "3px" } } diff --git a/packages/vars/lib/component/progress-circle.mjs b/packages/vars/lib/component/progress-circle.mjs index 0902dba33..3c40b34c4 100644 --- a/packages/vars/lib/component/progress-circle.mjs +++ b/packages/vars/lib/component/progress-circle.mjs @@ -2,7 +2,7 @@ export const vars = { "size40": { "enabled": { "root": { - "size": "var(--seed-v3-unit-s10)", + "size": "var(--seed-v3-dimension-s10)", "thickness": "5px" } } @@ -10,7 +10,7 @@ export const vars = { "size24": { "enabled": { "root": { - "size": "var(--seed-v3-unit-s6)", + "size": "var(--seed-v3-dimension-s6)", "thickness": "3px" } } diff --git a/packages/vars/lib/component/radio.d.ts b/packages/vars/lib/component/radio.d.ts index faf57e62e..a012e2d49 100644 --- a/packages/vars/lib/component/radio.d.ts +++ b/packages/vars/lib/component/radio.d.ts @@ -47,40 +47,40 @@ export declare const vars: { "sizeLarge": { "enabled": { "root": { - "size": "var(--seed-v3-unit-s6)" + "size": "var(--seed-v3-dimension-s6)" }, "icon": { - "size": "var(--seed-v3-unit-s2_5)" + "size": "var(--seed-v3-dimension-s2_5)" } }, "disabled": { "icon": { - "size": "var(--seed-v3-unit-s3)" + "size": "var(--seed-v3-dimension-s3)" } } }, "sizeMedium": { "enabled": { "root": { - "size": "var(--seed-v3-unit-s5)" + "size": "var(--seed-v3-dimension-s5)" }, "icon": { - "size": "var(--seed-v3-unit-s2)" + "size": "var(--seed-v3-dimension-s2)" } }, "disabled": { "icon": { - "size": "var(--seed-v3-unit-s2_5)" + "size": "var(--seed-v3-dimension-s2_5)" } } }, "sizeSmall": { "enabled": { "root": { - "size": "var(--seed-v3-unit-s4_5)" + "size": "var(--seed-v3-dimension-s4_5)" }, "icon": { - "size": "var(--seed-v3-unit-s2)" + "size": "var(--seed-v3-dimension-s2)" } } } diff --git a/packages/vars/lib/component/radio.mjs b/packages/vars/lib/component/radio.mjs index 00c896b35..a217f6741 100644 --- a/packages/vars/lib/component/radio.mjs +++ b/packages/vars/lib/component/radio.mjs @@ -47,40 +47,40 @@ export const vars = { "sizeLarge": { "enabled": { "root": { - "size": "var(--seed-v3-unit-s6)" + "size": "var(--seed-v3-dimension-s6)" }, "icon": { - "size": "var(--seed-v3-unit-s2_5)" + "size": "var(--seed-v3-dimension-s2_5)" } }, "disabled": { "icon": { - "size": "var(--seed-v3-unit-s3)" + "size": "var(--seed-v3-dimension-s3)" } } }, "sizeMedium": { "enabled": { "root": { - "size": "var(--seed-v3-unit-s5)" + "size": "var(--seed-v3-dimension-s5)" }, "icon": { - "size": "var(--seed-v3-unit-s2)" + "size": "var(--seed-v3-dimension-s2)" } }, "disabled": { "icon": { - "size": "var(--seed-v3-unit-s2_5)" + "size": "var(--seed-v3-dimension-s2_5)" } } }, "sizeSmall": { "enabled": { "root": { - "size": "var(--seed-v3-unit-s4_5)" + "size": "var(--seed-v3-dimension-s4_5)" }, "icon": { - "size": "var(--seed-v3-unit-s2)" + "size": "var(--seed-v3-dimension-s2)" } } } diff --git a/packages/vars/lib/component/reaction-button.d.ts b/packages/vars/lib/component/reaction-button.d.ts index 1190d61cd..1bb45540e 100644 --- a/packages/vars/lib/component/reaction-button.d.ts +++ b/packages/vars/lib/component/reaction-button.d.ts @@ -82,11 +82,11 @@ export declare const vars: { "sizeXsmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)", + "minHeight": "var(--seed-v3-dimension-s8)", "cornerRadius": "var(--seed-v3-radius-full)", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3)", - "paddingY": "var(--seed-v3-unit-s1_5)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3)", + "paddingY": "var(--seed-v3-dimension-s1_5)" }, "prefixIcon": { "size": "18px" @@ -108,11 +108,11 @@ export declare const vars: { "sizeSmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)", + "minHeight": "var(--seed-v3-dimension-s9)", "cornerRadius": "var(--seed-v3-radius-full)", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s2)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s2)" }, "prefixIcon": { "size": "18px" diff --git a/packages/vars/lib/component/reaction-button.mjs b/packages/vars/lib/component/reaction-button.mjs index 9c33c69f5..d59321818 100644 --- a/packages/vars/lib/component/reaction-button.mjs +++ b/packages/vars/lib/component/reaction-button.mjs @@ -82,11 +82,11 @@ export const vars = { "sizeXsmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)", + "minHeight": "var(--seed-v3-dimension-s8)", "cornerRadius": "var(--seed-v3-radius-full)", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3)", - "paddingY": "var(--seed-v3-unit-s1_5)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3)", + "paddingY": "var(--seed-v3-dimension-s1_5)" }, "prefixIcon": { "size": "18px" @@ -108,11 +108,11 @@ export const vars = { "sizeSmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)", + "minHeight": "var(--seed-v3-dimension-s9)", "cornerRadius": "var(--seed-v3-radius-full)", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s2)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s2)" }, "prefixIcon": { "size": "18px" diff --git a/packages/vars/lib/component/segment.d.ts b/packages/vars/lib/component/segment.d.ts index b49ef93e9..9e6c3deff 100644 --- a/packages/vars/lib/component/segment.d.ts +++ b/packages/vars/lib/component/segment.d.ts @@ -2,9 +2,9 @@ export declare const vars: { "base": { "enabled": { "root": { - "height": "var(--seed-v3-unit-s8)", + "height": "var(--seed-v3-dimension-s8)", "cornerRadius": "var(--seed-v3-radius-full)", - "paddingX": "var(--seed-v3-unit-s4)", + "paddingX": "var(--seed-v3-dimension-s4)", "minWidth": "86px" }, "label": { diff --git a/packages/vars/lib/component/segment.mjs b/packages/vars/lib/component/segment.mjs index f0e10f553..4e8a26b6a 100644 --- a/packages/vars/lib/component/segment.mjs +++ b/packages/vars/lib/component/segment.mjs @@ -2,9 +2,9 @@ export const vars = { "base": { "enabled": { "root": { - "height": "var(--seed-v3-unit-s8)", + "height": "var(--seed-v3-dimension-s8)", "cornerRadius": "var(--seed-v3-radius-full)", - "paddingX": "var(--seed-v3-unit-s4)", + "paddingX": "var(--seed-v3-dimension-s4)", "minWidth": "86px" }, "label": { diff --git a/packages/vars/lib/component/segmented-control.d.ts b/packages/vars/lib/component/segmented-control.d.ts index 2ac302cd3..340d6ddb8 100644 --- a/packages/vars/lib/component/segmented-control.d.ts +++ b/packages/vars/lib/component/segmented-control.d.ts @@ -2,7 +2,7 @@ export declare const vars: { "base": { "enabled": { "root": { - "padding": "var(--seed-v3-unit-s1)", + "padding": "var(--seed-v3-dimension-s1)", "cornerRadius": "var(--seed-v3-radius-full)", "color": "var(--seed-v3-color-bg-neutral-weak)" } diff --git a/packages/vars/lib/component/segmented-control.mjs b/packages/vars/lib/component/segmented-control.mjs index 331247d36..8789214da 100644 --- a/packages/vars/lib/component/segmented-control.mjs +++ b/packages/vars/lib/component/segmented-control.mjs @@ -2,7 +2,7 @@ export const vars = { "base": { "enabled": { "root": { - "padding": "var(--seed-v3-unit-s1)", + "padding": "var(--seed-v3-dimension-s1)", "cornerRadius": "var(--seed-v3-radius-full)", "color": "var(--seed-v3-color-bg-neutral-weak)" } diff --git a/packages/vars/lib/component/select-box.d.ts b/packages/vars/lib/component/select-box.d.ts index 44e7823b4..f2d0772d7 100644 --- a/packages/vars/lib/component/select-box.d.ts +++ b/packages/vars/lib/component/select-box.d.ts @@ -2,15 +2,15 @@ export declare const vars: { "base": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s5)", - "gap": "var(--seed-v3-unit-s2_5)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s5)", + "gap": "var(--seed-v3-dimension-s2_5)", "strokeWidth": "1px", "strokeColor": "var(--seed-v3-color-stroke-neutral)", "cornerRadius": "var(--seed-v3-radius-s3)" }, "content": { - "gap": "var(--seed-v3-unit-s0_5)" + "gap": "var(--seed-v3-dimension-s0_5)" }, "label": { "color": "var(--seed-v3-color-fg-neutral)", @@ -25,24 +25,24 @@ export declare const vars: { "lineHeight": "var(--seed-v3-line-height-s4)" }, "checkboxControl": { - "size": "var(--seed-v3-unit-s6)", + "size": "var(--seed-v3-dimension-s6)", "color": "var(--seed-v3-color-bg-layer-default)", "strokeWidth": "1.25px", "strokeColor": "var(--seed-v3-color-stroke-control)", "cornerRadius": "var(--seed-v3-radius-s1)" }, "checkboxIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "radioControl": { - "size": "var(--seed-v3-unit-s6)", + "size": "var(--seed-v3-dimension-s6)", "color": "var(--seed-v3-color-bg-layer-default)", "strokeWidth": "1.25px", "strokeColor": "var(--seed-v3-color-stroke-control)", "cornerRadius": "var(--seed-v3-radius-full)" }, "radioIcon": { - "size": "var(--seed-v3-unit-s2_5)", + "size": "var(--seed-v3-dimension-s2_5)", "cornerRadius": "var(--seed-v3-radius-full)" } }, diff --git a/packages/vars/lib/component/select-box.mjs b/packages/vars/lib/component/select-box.mjs index b4a69b703..7110bfc8a 100644 --- a/packages/vars/lib/component/select-box.mjs +++ b/packages/vars/lib/component/select-box.mjs @@ -2,15 +2,15 @@ export const vars = { "base": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s5)", - "gap": "var(--seed-v3-unit-s2_5)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s5)", + "gap": "var(--seed-v3-dimension-s2_5)", "strokeWidth": "1px", "strokeColor": "var(--seed-v3-color-stroke-neutral)", "cornerRadius": "var(--seed-v3-radius-s3)" }, "content": { - "gap": "var(--seed-v3-unit-s0_5)" + "gap": "var(--seed-v3-dimension-s0_5)" }, "label": { "color": "var(--seed-v3-color-fg-neutral)", @@ -25,24 +25,24 @@ export const vars = { "lineHeight": "var(--seed-v3-line-height-s4)" }, "checkboxControl": { - "size": "var(--seed-v3-unit-s6)", + "size": "var(--seed-v3-dimension-s6)", "color": "var(--seed-v3-color-bg-layer-default)", "strokeWidth": "1.25px", "strokeColor": "var(--seed-v3-color-stroke-control)", "cornerRadius": "var(--seed-v3-radius-s1)" }, "checkboxIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "radioControl": { - "size": "var(--seed-v3-unit-s6)", + "size": "var(--seed-v3-dimension-s6)", "color": "var(--seed-v3-color-bg-layer-default)", "strokeWidth": "1.25px", "strokeColor": "var(--seed-v3-color-stroke-control)", "cornerRadius": "var(--seed-v3-radius-full)" }, "radioIcon": { - "size": "var(--seed-v3-unit-s2_5)", + "size": "var(--seed-v3-dimension-s2_5)", "cornerRadius": "var(--seed-v3-radius-full)" } }, diff --git a/packages/vars/lib/component/snackbar.d.ts b/packages/vars/lib/component/snackbar.d.ts index c643747b8..89d9bbb4b 100644 --- a/packages/vars/lib/component/snackbar.d.ts +++ b/packages/vars/lib/component/snackbar.d.ts @@ -2,8 +2,8 @@ export declare const vars: { "base": { "enabled": { "region": { - "paddingX": "var(--seed-v3-unit-s2)", - "paddingY": "var(--seed-v3-unit-s2)", + "paddingX": "var(--seed-v3-dimension-s2)", + "paddingY": "var(--seed-v3-dimension-s2)", "offsetDuration": "var(--seed-v3-duration-s4)", "offsetTimingFunction": "var(--seed-v3-timing-function-easing)" }, @@ -11,9 +11,9 @@ export declare const vars: { "color": "var(--seed-v3-color-bg-neutral-solid)", "cornerRadius": "var(--seed-v3-radius-s2)", "minHeight": "44px", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s2_5)", - "gap": "var(--seed-v3-unit-s2)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s2_5)", + "gap": "var(--seed-v3-dimension-s2)", "enterOpacity": "0", "enterDuration": "var(--seed-v3-duration-s4)", "enterTimingFunction": "var(--seed-v3-timing-function-enter)", @@ -31,7 +31,7 @@ export declare const vars: { "size": "24px" }, "actionButton": { - "targetPaddingX": "var(--seed-v3-unit-s2)", + "targetPaddingX": "var(--seed-v3-dimension-s2)", "targetMinHeight": "44px", "color": "var(--seed-v3-color-fg-brand)", "fontSize": "var(--seed-v3-font-size-s4)", diff --git a/packages/vars/lib/component/snackbar.mjs b/packages/vars/lib/component/snackbar.mjs index 4e0118c4a..911c242aa 100644 --- a/packages/vars/lib/component/snackbar.mjs +++ b/packages/vars/lib/component/snackbar.mjs @@ -2,8 +2,8 @@ export const vars = { "base": { "enabled": { "region": { - "paddingX": "var(--seed-v3-unit-s2)", - "paddingY": "var(--seed-v3-unit-s2)", + "paddingX": "var(--seed-v3-dimension-s2)", + "paddingY": "var(--seed-v3-dimension-s2)", "offsetDuration": "var(--seed-v3-duration-s4)", "offsetTimingFunction": "var(--seed-v3-timing-function-easing)" }, @@ -11,9 +11,9 @@ export const vars = { "color": "var(--seed-v3-color-bg-neutral-solid)", "cornerRadius": "var(--seed-v3-radius-s2)", "minHeight": "44px", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s2_5)", - "gap": "var(--seed-v3-unit-s2)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s2_5)", + "gap": "var(--seed-v3-dimension-s2)", "enterOpacity": "0", "enterDuration": "var(--seed-v3-duration-s4)", "enterTimingFunction": "var(--seed-v3-timing-function-enter)", @@ -31,7 +31,7 @@ export const vars = { "size": "24px" }, "actionButton": { - "targetPaddingX": "var(--seed-v3-unit-s2)", + "targetPaddingX": "var(--seed-v3-dimension-s2)", "targetMinHeight": "44px", "color": "var(--seed-v3-color-fg-brand)", "fontSize": "var(--seed-v3-font-size-s4)", diff --git a/packages/vars/lib/component/tab.d.ts b/packages/vars/lib/component/tab.d.ts index 0864f60c6..05735c8d9 100644 --- a/packages/vars/lib/component/tab.d.ts +++ b/packages/vars/lib/component/tab.d.ts @@ -5,10 +5,10 @@ export declare const vars: { "color": "var(--seed-v3-color-fg-neutral-subtle)" }, "notification": { - "size": "var(--seed-v3-unit-s1)", + "size": "var(--seed-v3-dimension-s1)", "cornerRadius": "var(--seed-v3-radius-full)", "color": "var(--seed-v3-color-bg-brand-solid)", - "marginLeft": "var(--seed-v3-unit-s0_5)" + "marginLeft": "var(--seed-v3-dimension-s0_5)" } }, "selected": { @@ -26,8 +26,8 @@ export declare const vars: { "enabled": { "root": { "minHeight": "44px", - "paddingX": "var(--seed-v3-unit-s2_5)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "paddingX": "var(--seed-v3-dimension-s2_5)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s5)", @@ -39,8 +39,8 @@ export declare const vars: { "enabled": { "root": { "minHeight": "40px", - "paddingX": "var(--seed-v3-unit-s2_5)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "paddingX": "var(--seed-v3-dimension-s2_5)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)", diff --git a/packages/vars/lib/component/tab.mjs b/packages/vars/lib/component/tab.mjs index 0c0472199..2fff26789 100644 --- a/packages/vars/lib/component/tab.mjs +++ b/packages/vars/lib/component/tab.mjs @@ -5,10 +5,10 @@ export const vars = { "color": "var(--seed-v3-color-fg-neutral-subtle)" }, "notification": { - "size": "var(--seed-v3-unit-s1)", + "size": "var(--seed-v3-dimension-s1)", "cornerRadius": "var(--seed-v3-radius-full)", "color": "var(--seed-v3-color-bg-brand-solid)", - "marginLeft": "var(--seed-v3-unit-s0_5)" + "marginLeft": "var(--seed-v3-dimension-s0_5)" } }, "selected": { @@ -26,8 +26,8 @@ export const vars = { "enabled": { "root": { "minHeight": "44px", - "paddingX": "var(--seed-v3-unit-s2_5)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "paddingX": "var(--seed-v3-dimension-s2_5)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s5)", @@ -39,8 +39,8 @@ export const vars = { "enabled": { "root": { "minHeight": "40px", - "paddingX": "var(--seed-v3-unit-s2_5)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "paddingX": "var(--seed-v3-dimension-s2_5)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)", diff --git a/packages/vars/lib/component/tablist.d.ts b/packages/vars/lib/component/tablist.d.ts index c4ff763c2..3f3627a08 100644 --- a/packages/vars/lib/component/tablist.d.ts +++ b/packages/vars/lib/component/tablist.d.ts @@ -15,7 +15,7 @@ export declare const vars: { "layoutHug": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s4)" + "paddingX": "var(--seed-v3-dimension-s4)" } } }, diff --git a/packages/vars/lib/component/tablist.mjs b/packages/vars/lib/component/tablist.mjs index 43b228a32..4c8527242 100644 --- a/packages/vars/lib/component/tablist.mjs +++ b/packages/vars/lib/component/tablist.mjs @@ -15,7 +15,7 @@ export const vars = { "layoutHug": { "enabled": { "root": { - "paddingX": "var(--seed-v3-unit-s4)" + "paddingX": "var(--seed-v3-dimension-s4)" } } }, diff --git a/packages/vars/lib/component/text-button.d.ts b/packages/vars/lib/component/text-button.d.ts index 3ec36e7bb..e351f4eea 100644 --- a/packages/vars/lib/component/text-button.d.ts +++ b/packages/vars/lib/component/text-button.d.ts @@ -2,17 +2,17 @@ export declare const vars: { "base": { "enabled": { "root": { - "paddingY": "var(--seed-v3-unit-s0_5)", + "paddingY": "var(--seed-v3-dimension-s0_5)", "borderWidth": "0.125rem" }, "label": { "fontWeight": "var(--seed-v3-font-weight-regular)" }, "prefixIcon": { - "marginXEnd": "var(--seed-v3-unit-s1)" + "marginXEnd": "var(--seed-v3-dimension-s1)" }, "suffixIcon": { - "marginXStart": "var(--seed-v3-unit-s0_5)" + "marginXStart": "var(--seed-v3-dimension-s0_5)" } }, "pressed": { @@ -61,10 +61,10 @@ export declare const vars: { "cornerRadius": "var(--seed-v3-radius-s1_5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "label": { "fontSize": "var(--seed-v3-font-size-s6)", @@ -78,10 +78,10 @@ export declare const vars: { "cornerRadius": "var(--seed-v3-radius-s1_5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s5)", @@ -95,10 +95,10 @@ export declare const vars: { "cornerRadius": "var(--seed-v3-radius-s1)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)", diff --git a/packages/vars/lib/component/text-button.mjs b/packages/vars/lib/component/text-button.mjs index e63a0beb7..3a57a6b4e 100644 --- a/packages/vars/lib/component/text-button.mjs +++ b/packages/vars/lib/component/text-button.mjs @@ -2,17 +2,17 @@ export const vars = { "base": { "enabled": { "root": { - "paddingY": "var(--seed-v3-unit-s0_5)", + "paddingY": "var(--seed-v3-dimension-s0_5)", "borderWidth": "0.125rem" }, "label": { "fontWeight": "var(--seed-v3-font-weight-regular)" }, "prefixIcon": { - "marginXEnd": "var(--seed-v3-unit-s1)" + "marginXEnd": "var(--seed-v3-dimension-s1)" }, "suffixIcon": { - "marginXStart": "var(--seed-v3-unit-s0_5)" + "marginXStart": "var(--seed-v3-dimension-s0_5)" } }, "pressed": { @@ -61,10 +61,10 @@ export const vars = { "cornerRadius": "var(--seed-v3-radius-s1_5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "label": { "fontSize": "var(--seed-v3-font-size-s6)", @@ -78,10 +78,10 @@ export const vars = { "cornerRadius": "var(--seed-v3-radius-s1_5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s5)", @@ -95,10 +95,10 @@ export const vars = { "cornerRadius": "var(--seed-v3-radius-s1)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)", diff --git a/packages/vars/lib/component/text-field.d.ts b/packages/vars/lib/component/text-field.d.ts index f01bdfd66..cb5031d28 100644 --- a/packages/vars/lib/component/text-field.d.ts +++ b/packages/vars/lib/component/text-field.d.ts @@ -98,8 +98,8 @@ export declare const vars: { "sizeXlarge": { "enabled": { "header": { - "paddingBottom": "var(--seed-v3-unit-s3)", - "gap": "var(--seed-v3-unit-s1_5)" + "paddingBottom": "var(--seed-v3-dimension-s3)", + "gap": "var(--seed-v3-dimension-s1_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s5)", @@ -112,9 +112,9 @@ export declare const vars: { "field": { "minHeight": "56px", "cornerRadius": "var(--seed-v3-radius-s2_5)", - "gap": "var(--seed-v3-unit-s2)", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s3)" + "gap": "var(--seed-v3-dimension-s2)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s3)" }, "value": { "fontSize": "var(--seed-v3-font-size-s6)", @@ -125,18 +125,18 @@ export declare const vars: { "lineHeight": "var(--seed-v3-line-height-s6)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s5)" + "size": "var(--seed-v3-dimension-s5)" }, "suffixText": { "fontSize": "var(--seed-v3-font-size-s6)", "lineHeight": "var(--seed-v3-line-height-s6)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s5)" + "size": "var(--seed-v3-dimension-s5)" }, "footer": { - "gap": "var(--seed-v3-unit-s3_5)", - "paddingTop": "var(--seed-v3-unit-s2)", + "gap": "var(--seed-v3-dimension-s3_5)", + "paddingTop": "var(--seed-v3-dimension-s2)", "minHeight": "20px" }, "description": { @@ -148,8 +148,8 @@ export declare const vars: { "lineHeight": "var(--seed-v3-line-height-s4)" }, "errorIcon": { - "size": "var(--seed-v3-unit-s4)", - "marginRight": "var(--seed-v3-unit-s1)" + "size": "var(--seed-v3-dimension-s4)", + "marginRight": "var(--seed-v3-dimension-s1)" }, "characterCount": { "fontSize": "var(--seed-v3-font-size-s2)", @@ -164,8 +164,8 @@ export declare const vars: { "sizeLarge": { "enabled": { "header": { - "paddingBottom": "var(--seed-v3-unit-s3)", - "gap": "var(--seed-v3-unit-s1_5)" + "paddingBottom": "var(--seed-v3-dimension-s3)", + "gap": "var(--seed-v3-dimension-s1_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s5)", @@ -178,9 +178,9 @@ export declare const vars: { "field": { "minHeight": "52px", "cornerRadius": "var(--seed-v3-radius-s2_5)", - "gap": "var(--seed-v3-unit-s2)", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s3)" + "gap": "var(--seed-v3-dimension-s2)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s3)" }, "value": { "fontSize": "var(--seed-v3-font-size-s5)", @@ -191,18 +191,18 @@ export declare const vars: { "lineHeight": "var(--seed-v3-line-height-s5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s5)" + "size": "var(--seed-v3-dimension-s5)" }, "suffixText": { "fontSize": "var(--seed-v3-font-size-s5)", "lineHeight": "var(--seed-v3-line-height-s5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s5)" + "size": "var(--seed-v3-dimension-s5)" }, "footer": { - "gap": "var(--seed-v3-unit-s3_5)", - "paddingTop": "var(--seed-v3-unit-s2)", + "gap": "var(--seed-v3-dimension-s3_5)", + "paddingTop": "var(--seed-v3-dimension-s2)", "minHeight": "20px" }, "description": { @@ -214,8 +214,8 @@ export declare const vars: { "lineHeight": "var(--seed-v3-line-height-s4)" }, "errorIcon": { - "size": "var(--seed-v3-unit-s4)", - "marginRight": "var(--seed-v3-unit-s1)" + "size": "var(--seed-v3-dimension-s4)", + "marginRight": "var(--seed-v3-dimension-s1)" }, "characterCount": { "fontSize": "var(--seed-v3-font-size-s2)", @@ -230,7 +230,7 @@ export declare const vars: { "sizeMedium": { "enabled": { "header": { - "paddingBottom": "var(--seed-v3-unit-s3)" + "paddingBottom": "var(--seed-v3-dimension-s3)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)", @@ -243,9 +243,9 @@ export declare const vars: { "field": { "minHeight": "40px", "cornerRadius": "var(--seed-v3-radius-s2)", - "gap": "var(--seed-v3-unit-s1_5)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "gap": "var(--seed-v3-dimension-s1_5)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "value": { "fontSize": "var(--seed-v3-font-size-s4)", @@ -256,19 +256,19 @@ export declare const vars: { "lineHeight": "var(--seed-v3-line-height-s4)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixText": { "fontSize": "var(--seed-v3-font-size-s4)", "lineHeight": "var(--seed-v3-line-height-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "footer": { - "gap": "var(--seed-v3-unit-s3_5)", - "paddingTop": "var(--seed-v3-unit-s2)", - "minHeight": "var(--seed-v3-unit-s4)" + "gap": "var(--seed-v3-dimension-s3_5)", + "paddingTop": "var(--seed-v3-dimension-s2)", + "minHeight": "var(--seed-v3-dimension-s4)" }, "description": { "fontSize": "var(--seed-v3-font-size-s2)", @@ -279,8 +279,8 @@ export declare const vars: { "lineHeight": "var(--seed-v3-line-height-s2)" }, "errorIcon": { - "size": "var(--seed-v3-unit-s3_5)", - "marginRight": "var(--seed-v3-unit-s1)" + "size": "var(--seed-v3-dimension-s3_5)", + "marginRight": "var(--seed-v3-dimension-s1)" }, "characterCount": { "fontSize": "var(--seed-v3-font-size-s2)", diff --git a/packages/vars/lib/component/text-field.mjs b/packages/vars/lib/component/text-field.mjs index 124f77834..d782bc463 100644 --- a/packages/vars/lib/component/text-field.mjs +++ b/packages/vars/lib/component/text-field.mjs @@ -98,8 +98,8 @@ export const vars = { "sizeXlarge": { "enabled": { "header": { - "paddingBottom": "var(--seed-v3-unit-s3)", - "gap": "var(--seed-v3-unit-s1_5)" + "paddingBottom": "var(--seed-v3-dimension-s3)", + "gap": "var(--seed-v3-dimension-s1_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s5)", @@ -112,9 +112,9 @@ export const vars = { "field": { "minHeight": "56px", "cornerRadius": "var(--seed-v3-radius-s2_5)", - "gap": "var(--seed-v3-unit-s2)", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s3)" + "gap": "var(--seed-v3-dimension-s2)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s3)" }, "value": { "fontSize": "var(--seed-v3-font-size-s6)", @@ -125,18 +125,18 @@ export const vars = { "lineHeight": "var(--seed-v3-line-height-s6)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s5)" + "size": "var(--seed-v3-dimension-s5)" }, "suffixText": { "fontSize": "var(--seed-v3-font-size-s6)", "lineHeight": "var(--seed-v3-line-height-s6)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s5)" + "size": "var(--seed-v3-dimension-s5)" }, "footer": { - "gap": "var(--seed-v3-unit-s3_5)", - "paddingTop": "var(--seed-v3-unit-s2)", + "gap": "var(--seed-v3-dimension-s3_5)", + "paddingTop": "var(--seed-v3-dimension-s2)", "minHeight": "20px" }, "description": { @@ -148,8 +148,8 @@ export const vars = { "lineHeight": "var(--seed-v3-line-height-s4)" }, "errorIcon": { - "size": "var(--seed-v3-unit-s4)", - "marginRight": "var(--seed-v3-unit-s1)" + "size": "var(--seed-v3-dimension-s4)", + "marginRight": "var(--seed-v3-dimension-s1)" }, "characterCount": { "fontSize": "var(--seed-v3-font-size-s2)", @@ -164,8 +164,8 @@ export const vars = { "sizeLarge": { "enabled": { "header": { - "paddingBottom": "var(--seed-v3-unit-s3)", - "gap": "var(--seed-v3-unit-s1_5)" + "paddingBottom": "var(--seed-v3-dimension-s3)", + "gap": "var(--seed-v3-dimension-s1_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s5)", @@ -178,9 +178,9 @@ export const vars = { "field": { "minHeight": "52px", "cornerRadius": "var(--seed-v3-radius-s2_5)", - "gap": "var(--seed-v3-unit-s2)", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s3)" + "gap": "var(--seed-v3-dimension-s2)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s3)" }, "value": { "fontSize": "var(--seed-v3-font-size-s5)", @@ -191,18 +191,18 @@ export const vars = { "lineHeight": "var(--seed-v3-line-height-s5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s5)" + "size": "var(--seed-v3-dimension-s5)" }, "suffixText": { "fontSize": "var(--seed-v3-font-size-s5)", "lineHeight": "var(--seed-v3-line-height-s5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s5)" + "size": "var(--seed-v3-dimension-s5)" }, "footer": { - "gap": "var(--seed-v3-unit-s3_5)", - "paddingTop": "var(--seed-v3-unit-s2)", + "gap": "var(--seed-v3-dimension-s3_5)", + "paddingTop": "var(--seed-v3-dimension-s2)", "minHeight": "20px" }, "description": { @@ -214,8 +214,8 @@ export const vars = { "lineHeight": "var(--seed-v3-line-height-s4)" }, "errorIcon": { - "size": "var(--seed-v3-unit-s4)", - "marginRight": "var(--seed-v3-unit-s1)" + "size": "var(--seed-v3-dimension-s4)", + "marginRight": "var(--seed-v3-dimension-s1)" }, "characterCount": { "fontSize": "var(--seed-v3-font-size-s2)", @@ -230,7 +230,7 @@ export const vars = { "sizeMedium": { "enabled": { "header": { - "paddingBottom": "var(--seed-v3-unit-s3)" + "paddingBottom": "var(--seed-v3-dimension-s3)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)", @@ -243,9 +243,9 @@ export const vars = { "field": { "minHeight": "40px", "cornerRadius": "var(--seed-v3-radius-s2)", - "gap": "var(--seed-v3-unit-s1_5)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s2_5)" + "gap": "var(--seed-v3-dimension-s1_5)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s2_5)" }, "value": { "fontSize": "var(--seed-v3-font-size-s4)", @@ -256,19 +256,19 @@ export const vars = { "lineHeight": "var(--seed-v3-line-height-s4)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "suffixText": { "fontSize": "var(--seed-v3-font-size-s4)", "lineHeight": "var(--seed-v3-line-height-s4)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s4)" + "size": "var(--seed-v3-dimension-s4)" }, "footer": { - "gap": "var(--seed-v3-unit-s3_5)", - "paddingTop": "var(--seed-v3-unit-s2)", - "minHeight": "var(--seed-v3-unit-s4)" + "gap": "var(--seed-v3-dimension-s3_5)", + "paddingTop": "var(--seed-v3-dimension-s2)", + "minHeight": "var(--seed-v3-dimension-s4)" }, "description": { "fontSize": "var(--seed-v3-font-size-s2)", @@ -279,8 +279,8 @@ export const vars = { "lineHeight": "var(--seed-v3-line-height-s2)" }, "errorIcon": { - "size": "var(--seed-v3-unit-s3_5)", - "marginRight": "var(--seed-v3-unit-s1)" + "size": "var(--seed-v3-dimension-s3_5)", + "marginRight": "var(--seed-v3-dimension-s1)" }, "characterCount": { "fontSize": "var(--seed-v3-font-size-s2)", diff --git a/packages/vars/lib/component/toggle-button.d.ts b/packages/vars/lib/component/toggle-button.d.ts index b5cd67229..0f4fee6f0 100644 --- a/packages/vars/lib/component/toggle-button.d.ts +++ b/packages/vars/lib/component/toggle-button.d.ts @@ -157,17 +157,17 @@ export declare const vars: { "sizeXsmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)", + "minHeight": "var(--seed-v3-dimension-s8)", "cornerRadius": "var(--seed-v3-radius-full)", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s1_5)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s1_5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -181,17 +181,17 @@ export declare const vars: { "sizeSmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)", + "minHeight": "var(--seed-v3-dimension-s9)", "cornerRadius": "var(--seed-v3-radius-full)", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s2)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s2)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" diff --git a/packages/vars/lib/component/toggle-button.mjs b/packages/vars/lib/component/toggle-button.mjs index e3d9727fb..dbe6e47e2 100644 --- a/packages/vars/lib/component/toggle-button.mjs +++ b/packages/vars/lib/component/toggle-button.mjs @@ -157,17 +157,17 @@ export const vars = { "sizeXsmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s8)", + "minHeight": "var(--seed-v3-dimension-s8)", "cornerRadius": "var(--seed-v3-radius-full)", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s3_5)", - "paddingY": "var(--seed-v3-unit-s1_5)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s3_5)", + "paddingY": "var(--seed-v3-dimension-s1_5)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" @@ -181,17 +181,17 @@ export const vars = { "sizeSmall": { "enabled": { "root": { - "minHeight": "var(--seed-v3-unit-s9)", + "minHeight": "var(--seed-v3-dimension-s9)", "cornerRadius": "var(--seed-v3-radius-full)", - "gap": "var(--seed-v3-unit-s1)", - "paddingX": "var(--seed-v3-unit-s4)", - "paddingY": "var(--seed-v3-unit-s2)" + "gap": "var(--seed-v3-dimension-s1)", + "paddingX": "var(--seed-v3-dimension-s4)", + "paddingY": "var(--seed-v3-dimension-s2)" }, "prefixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "suffixIcon": { - "size": "var(--seed-v3-unit-s3_5)" + "size": "var(--seed-v3-dimension-s3_5)" }, "label": { "fontSize": "var(--seed-v3-font-size-s4)" diff --git a/packages/vars/lib/component/top-navigation.d.ts b/packages/vars/lib/component/top-navigation.d.ts index c4d679ad0..e46bbc677 100644 --- a/packages/vars/lib/component/top-navigation.d.ts +++ b/packages/vars/lib/component/top-navigation.d.ts @@ -3,7 +3,7 @@ export declare const vars: { "enabled": { "root": { "minHeight": "44px", - "paddingX": "var(--seed-v3-unit-s4)" + "paddingX": "var(--seed-v3-dimension-s4)" }, "title": { "fontSize": "var(--seed-v3-font-size-s6-static)", @@ -19,7 +19,7 @@ export declare const vars: { "enabled": { "root": { "minHeight": "56px", - "paddingX": "var(--seed-v3-unit-s4)" + "paddingX": "var(--seed-v3-dimension-s4)" }, "title": { "fontSize": "var(--seed-v3-font-size-s6-static)", diff --git a/packages/vars/lib/component/top-navigation.mjs b/packages/vars/lib/component/top-navigation.mjs index ef1c1a8fd..3e02e5254 100644 --- a/packages/vars/lib/component/top-navigation.mjs +++ b/packages/vars/lib/component/top-navigation.mjs @@ -3,7 +3,7 @@ export const vars = { "enabled": { "root": { "minHeight": "44px", - "paddingX": "var(--seed-v3-unit-s4)" + "paddingX": "var(--seed-v3-dimension-s4)" }, "title": { "fontSize": "var(--seed-v3-font-size-s6-static)", @@ -19,7 +19,7 @@ export const vars = { "enabled": { "root": { "minHeight": "56px", - "paddingX": "var(--seed-v3-unit-s4)" + "paddingX": "var(--seed-v3-dimension-s4)" }, "title": { "fontSize": "var(--seed-v3-font-size-s6-static)", diff --git a/packages/vars/lib/dimension.d.ts b/packages/vars/lib/dimension.d.ts new file mode 100644 index 000000000..d483a9588 --- /dev/null +++ b/packages/vars/lib/dimension.d.ts @@ -0,0 +1,21 @@ +export declare const s0_5 = "var(--seed-v3-dimension-s0_5)"; +export declare const s1 = "var(--seed-v3-dimension-s1)"; +export declare const s1_5 = "var(--seed-v3-dimension-s1_5)"; +export declare const s2 = "var(--seed-v3-dimension-s2)"; +export declare const s2_5 = "var(--seed-v3-dimension-s2_5)"; +export declare const s3 = "var(--seed-v3-dimension-s3)"; +export declare const s3_5 = "var(--seed-v3-dimension-s3_5)"; +export declare const s4 = "var(--seed-v3-dimension-s4)"; +export declare const s4_5 = "var(--seed-v3-dimension-s4_5)"; +export declare const s5 = "var(--seed-v3-dimension-s5)"; +export declare const s6 = "var(--seed-v3-dimension-s6)"; +export declare const s7 = "var(--seed-v3-dimension-s7)"; +export declare const s8 = "var(--seed-v3-dimension-s8)"; +export declare const s9 = "var(--seed-v3-dimension-s9)"; +export declare const s10 = "var(--seed-v3-dimension-s10)"; +export declare const s12 = "var(--seed-v3-dimension-s12)"; +export declare const s13 = "var(--seed-v3-dimension-s13)"; +export declare const s14 = "var(--seed-v3-dimension-s14)"; +export declare const s16 = "var(--seed-v3-dimension-s16)"; + +export * as spacingX from "./dimension/spacing-x"; diff --git a/packages/vars/lib/dimension.mjs b/packages/vars/lib/dimension.mjs new file mode 100644 index 000000000..1fca19710 --- /dev/null +++ b/packages/vars/lib/dimension.mjs @@ -0,0 +1,21 @@ +export const s0_5 = "var(--seed-v3-dimension-s0_5)"; +export const s1 = "var(--seed-v3-dimension-s1)"; +export const s1_5 = "var(--seed-v3-dimension-s1_5)"; +export const s2 = "var(--seed-v3-dimension-s2)"; +export const s2_5 = "var(--seed-v3-dimension-s2_5)"; +export const s3 = "var(--seed-v3-dimension-s3)"; +export const s3_5 = "var(--seed-v3-dimension-s3_5)"; +export const s4 = "var(--seed-v3-dimension-s4)"; +export const s4_5 = "var(--seed-v3-dimension-s4_5)"; +export const s5 = "var(--seed-v3-dimension-s5)"; +export const s6 = "var(--seed-v3-dimension-s6)"; +export const s7 = "var(--seed-v3-dimension-s7)"; +export const s8 = "var(--seed-v3-dimension-s8)"; +export const s9 = "var(--seed-v3-dimension-s9)"; +export const s10 = "var(--seed-v3-dimension-s10)"; +export const s12 = "var(--seed-v3-dimension-s12)"; +export const s13 = "var(--seed-v3-dimension-s13)"; +export const s14 = "var(--seed-v3-dimension-s14)"; +export const s16 = "var(--seed-v3-dimension-s16)"; + +export * as spacingX from "./dimension/spacing-x.mjs"; \ No newline at end of file diff --git a/packages/vars/lib/dimension/spacing-x.d.ts b/packages/vars/lib/dimension/spacing-x.d.ts new file mode 100644 index 000000000..3bc7bbe20 --- /dev/null +++ b/packages/vars/lib/dimension/spacing-x.d.ts @@ -0,0 +1,2 @@ +export declare const betweenChips = "var(--seed-v3-dimension-spacing-x-between-chips)"; +export declare const globalGutter = "var(--seed-v3-dimension-spacing-x-global-gutter)"; \ No newline at end of file diff --git a/packages/vars/lib/dimension/spacing-x.mjs b/packages/vars/lib/dimension/spacing-x.mjs new file mode 100644 index 000000000..c4eb845d2 --- /dev/null +++ b/packages/vars/lib/dimension/spacing-x.mjs @@ -0,0 +1,2 @@ +export const betweenChips = "var(--seed-v3-dimension-spacing-x-between-chips)"; +export const globalGutter = "var(--seed-v3-dimension-spacing-x-global-gutter)"; \ No newline at end of file diff --git a/packages/vars/lib/horizontal-spacing.d.ts b/packages/vars/lib/horizontal-spacing.d.ts deleted file mode 100644 index f8503d82b..000000000 --- a/packages/vars/lib/horizontal-spacing.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export declare const betweenChips = "var(--seed-v3-horizontal-spacing-between-chips)"; -export declare const globalGutter = "var(--seed-v3-horizontal-spacing-global-gutter)"; \ No newline at end of file diff --git a/packages/vars/lib/horizontal-spacing.mjs b/packages/vars/lib/horizontal-spacing.mjs deleted file mode 100644 index ecb124e43..000000000 --- a/packages/vars/lib/horizontal-spacing.mjs +++ /dev/null @@ -1,2 +0,0 @@ -export const betweenChips = "var(--seed-v3-horizontal-spacing-between-chips)"; -export const globalGutter = "var(--seed-v3-horizontal-spacing-global-gutter)"; \ No newline at end of file diff --git a/packages/vars/lib/index.d.ts b/packages/vars/lib/index.d.ts index ce01bc1ec..fee3a9328 100644 --- a/packages/vars/lib/index.d.ts +++ b/packages/vars/lib/index.d.ts @@ -19,13 +19,12 @@ export type FontWeight = keyof TokenObject["$fontWeight"]; export type Gradient = keyof TokenObject["$gradient"]; -export type HorizontalSpacing = keyof TokenObject["$horizontalSpacing"]; - export type LineHeight = keyof TokenObject["$lineHeight"]; export type Radius = keyof TokenObject["$radius"]; export type TimingFunction = keyof TokenObject["$timingFunction"]; -export type Unit = keyof TokenObject["$unit"]; +export type Dimension = keyof TokenObject["$dimension"]; +export type SpacingX = keyof TokenObject["$dimension"]["spacingX"]; diff --git a/packages/vars/lib/vars.d.ts b/packages/vars/lib/vars.d.ts index 52e22bbe2..c47f0ab9b 100644 --- a/packages/vars/lib/vars.d.ts +++ b/packages/vars/lib/vars.d.ts @@ -3,8 +3,7 @@ export * as $duration from "./duration"; export * as $fontSize from "./font-size"; export * as $fontWeight from "./font-weight"; export * as $gradient from "./gradient"; -export * as $horizontalSpacing from "./horizontal-spacing"; export * as $lineHeight from "./line-height"; export * as $radius from "./radius"; export * as $timingFunction from "./timing-function"; -export * as $unit from "./unit"; +export * as $dimension from "./dimension"; diff --git a/packages/vars/lib/vars.mjs b/packages/vars/lib/vars.mjs index 249ace366..f3e09b0c3 100644 --- a/packages/vars/lib/vars.mjs +++ b/packages/vars/lib/vars.mjs @@ -3,8 +3,7 @@ export * as $duration from "./duration.mjs"; export * as $fontSize from "./font-size.mjs"; export * as $fontWeight from "./font-weight.mjs"; export * as $gradient from "./gradient.mjs"; -export * as $horizontalSpacing from "./horizontal-spacing.mjs"; export * as $lineHeight from "./line-height.mjs"; export * as $radius from "./radius.mjs"; export * as $timingFunction from "./timing-function.mjs"; -export * as $unit from "./unit.mjs"; +export * as $dimension from "./unit.mjs"; diff --git a/tools/rootage/README.md b/tools/rootage/README.md index 5bea4a732..f53552f2d 100644 --- a/tools/rootage/README.md +++ b/tools/rootage/README.md @@ -33,14 +33,13 @@ data: - <모드 1> - <모드 2> # 추가 모드... - ``` - `kind`: `"TokenCollections"`로 고정됩니다. - `metadata`: 리소스의 `id`와 `name`을 포함합니다. 이 정보는 api url 등에 활용될 수 있습니다. - `data`: 각 컬렉션 선언의 배열이며, 각 선언은 `name`과 `modes`를 포함합니다. - - `name`: 컬렉션의 이름. - - `modes`: 지원되는 모드의 배열. + - `name`: 컬렉션의 이름. + - `modes`: 지원되는 모드의 배열. ### **예제** @@ -58,7 +57,6 @@ data: modes: - theme-light - theme-dark - ``` 이 예제에서는 두 가지 컬렉션을 정의합니다: @@ -83,16 +81,15 @@ data: <토큰 이름>: values: <모드>: <값> - ``` - `kind`: `"Tokens"`로 고정됩니다. - `metadata`: 리소스의 `id`와 `name`을 포함합니다. 이 정보는 api url 등에 활용될 수 있습니다. - `data.collection`: 토큰들이 속한 컬렉션의 이름입니다. - `data.tokens`: 토큰 이름과 그 값의 매핑들을 나열합니다. - - `<토큰 이름>`: 토큰 이름 규칙을 따르는 이름을 선언합니다. - - `<모드>`: 어떤 모드에 대한 값인지 정의합니다. 컬렉션에 명시된 모든 모드에 대해 작성되어야 합니다. - - `<값>`: 디자인 값을 작성하거나 다른 토큰을 참조할 수 있습니다. + - `<토큰 이름>`: 토큰 이름 규칙을 따르는 이름을 선언합니다. + - `<모드>`: 어떤 모드에 대한 값인지 정의합니다. 컬렉션에 명시된 모든 모드에 대해 작성되어야 합니다. + - `<값>`: 디자인 값을 작성하거나 다른 토큰을 참조할 수 있습니다. **토큰 이름 규칙** @@ -130,7 +127,6 @@ data: values: theme-light: "$color.palette.gray-200" theme-dark: "$color.palette.gray-300" - ``` 이 예제에서는 `color` 컬렉션 내에서 색상을 토큰으로 정의합니다. @@ -164,12 +160,12 @@ data: - `kind`: `"ComponentSpec"`로 고정됩니다. - `metadata`: 리소스의 `id`와 `name`을 포함합니다. 이 정보는 api url 등에 활용될 수 있습니다. - `data`: 컴포넌트의 디자인 사양을 정의하는 객체입니다. - - `base`: 모든 Variant에 적용되는 기본 디자인을 정의합니다. - - `=`: Variant를 정의하는 문자열입니다(예: `size=small`). - - `<상태 이름>`: 상호 작용 상태(예: `enabled`, `hover`, `pressed`). - - `<슬롯 이름>`: 디자인 속성을 적용할 요소나 슬롯(예: `root`, `icon`). - - `<속성>`: 디자인 속성(예: `color`, `size`, `borderRadius`). - - `<값>`: 속성에 대한 값으로, 디자인 값을 작성하거나 다른 토큰을 참조할 수 있습니다. + - `base`: 모든 Variant에 적용되는 기본 디자인을 정의합니다. + - `=`: Variant를 정의하는 문자열입니다(예: `size=small`). + - `<상태 이름>`: 상호 작용 상태(예: `enabled`, `hover`, `pressed`). + - `<슬롯 이름>`: 디자인 속성을 적용할 요소나 슬롯(예: `root`, `icon`). + - `<속성>`: 디자인 속성(예: `color`, `size`, `borderRadius`). + - `<값>`: 속성에 대한 값으로, 디자인 값을 작성하거나 다른 토큰을 참조할 수 있습니다. **Variant 표현** @@ -209,29 +205,28 @@ data: size=small: enabled: root: - size: $unit.x10 + size: $dimension.x10 icon: - size: $unit.x5 + size: $dimension.x5 size=medium: enabled: root: - size: $unit.x12 + size: $dimension.x12 icon: - size: $unit.x6 - + size: $dimension.x6 ``` 이 예제에서는 Floating Action Button (`Fab`) 컴포넌트의 디자인 사양을 정의합니다. - `base` 디자인은 모든 Variant에 적용되는 속성을 정의합니다. - - `enabled` 상태에서: - - `root` 슬롯은 layer-floating 배경 색상과 full radius를 가집니다. - - `icon` 슬롯은 neutral 전경 색상을 가집니다. - - `pressed` 상태에서: - - `root` 슬롯은 눌린 상태의 배경 색상으로 변경됩니다. + - `enabled` 상태에서: + - `root` 슬롯은 layer-floating 배경 색상과 full radius를 가집니다. + - `icon` 슬롯은 neutral 전경 색상을 가집니다. + - `pressed` 상태에서: + - `root` 슬롯은 눌린 상태의 배경 색상으로 변경됩니다. - Variant는 `size` 키를 기반으로 `small`과 `medium`을 각각 정의합니다: - - 각 Variant는 `enabled` 상태의 속성을 재정의합니다. - - `root`와 `icon` 슬롯은 Variant에 따라 특정 크기를 가집니다. + - 각 Variant는 `enabled` 상태의 속성을 재정의합니다. + - `root`와 `icon` 슬롯은 Variant에 따라 특정 크기를 가집니다. ### **상태 표현 및 우선순위 예시** @@ -263,46 +258,45 @@ data: color: $color.bg.disabled label: color: $color.fg.disabled - ``` - 컴포넌트가 `enabled` 상태인 경우: - - `enabled` 스타일이 적용됩니다. + - `enabled` 스타일이 적용됩니다. - 컴포넌트가 `enabled`이면서 `pressed` 상태인 경우: - - `enabled,pressed` 스타일이 적용됩니다. + - `enabled,pressed` 스타일이 적용됩니다. - 컴포넌트가 `enabled`, `pressed`, `selected` 상태인 경우: - - 아래에 선언된 `pressed,selected` 스타일이 `enabled,selected`보다 우선하여 적용됩니다. + - 아래에 선언된 `pressed,selected` 스타일이 `enabled,selected`보다 우선하여 적용됩니다. - 컴포넌트가 `disabled` 상태인 경우: - - 모든 `enabled` 관련 스타일보다 `disabled` 스타일이 우선하여 적용됩니다. + - 모든 `enabled` 관련 스타일보다 `disabled` 스타일이 우선하여 적용됩니다. ## **허용되는 값** `<값>` 에는 아래와 같은 유형이 대입될 수 있습니다. - **Color** - - 16진수 색상 코드: - - `#rrggbb` (24비트 RGB) - - `#rrggbbaa` (24비트 RGB + 8비트 알파) + - 16진수 색상 코드: + - `#rrggbb` (24비트 RGB) + - `#rrggbbaa` (24비트 RGB + 8비트 알파) - **Dimension** - - https://tr.designtokens.org/format/#dimension - - px: `${number}px` (예: `16px`) - - Android에서 대응되는 단위는 dp, iOS에서는 pt입니다. - - rem: `${number}rem` (예: `1rem`) - - 사용자가 설정한 시스템 기본 폰트 크기의 배수를 나타냅니다. Android에서 1rem에 해당하는 값은 16sp입니다. + - https://tr.designtokens.org/format/#dimension + - px: `${number}px` (예: `16px`) + - Android에서 대응되는 단위는 dp, iOS에서는 pt입니다. + - rem: `${number}rem` (예: `1rem`) + - 사용자가 설정한 시스템 기본 폰트 크기의 배수를 나타냅니다. Android에서 1rem에 해당하는 값은 16sp입니다. - **Duration** - - 밀리초: `${number}ms` (예: `200ms`) - - 초: `${number}s` (예: `0.5s`) + - 밀리초: `${number}ms` (예: `200ms`) + - 초: `${number}s` (예: `0.5s`) - **Number** - - 단위 없는 숫자 (예: `0.5`, `1`, `100`) + - 단위 없는 숫자 (예: `0.5`, `1`, `100`) - **Cubic-bezier** - - `{ type: "cubicBezier", value: [p1x, p1y, p2x, p2y] }` 형태로 `type`을 명시해야 합니다. + - `{ type: "cubicBezier", value: [p1x, p1y, p2x, p2y] }` 형태로 `type`을 명시해야 합니다. - **Shadow** - - `{ type: "shadow", value: [{ color, offsetX, offsetY, blur, spread }] }` 형태로 `type`을 명시해야 합니다. + - `{ type: "shadow", value: [{ color, offsetX, offsetY, blur, spread }] }` 형태로 `type`을 명시해야 합니다. - **Gradient** - - `{ type: "gradient", value: [{ color, position }] }` 형태로 `type` 을 명시해야 합니다. - - position은 [0, 1] 범위의 실수입니다. + - `{ type: "gradient", value: [{ color, position }] }` 형태로 `type` 을 명시해야 합니다. + - position은 [0, 1] 범위의 실수입니다. - **Reference** - - `$`로 시작하는 토큰 이름, 예: `$token-name` + - `$`로 시작하는 토큰 이름, 예: `$token-name` ### **값 작성 방법** @@ -317,7 +311,6 @@ $animation.ease-in-out: default: type: cubicBezier value: [0.42, 0, 0.58, 1] - ``` ### **Shadow 예제** @@ -333,4 +326,4 @@ $shadow.default: offsetY: 2px blur: 4px spread: 0px -``` \ No newline at end of file +``` diff --git a/tools/rootage/core/src/languages/css.test.ts b/tools/rootage/core/src/languages/css.test.ts index 0c5303139..9e1e21d55 100644 --- a/tools/rootage/core/src/languages/css.test.ts +++ b/tools/rootage/core/src/languages/css.test.ts @@ -114,7 +114,7 @@ test("getTokenCss should generate css code", () => { data: { collection: "global", tokens: { - "$unit.s1": { + "$dimension.s1": { values: { default: "4px", }, diff --git a/tools/rootage/core/src/languages/jsonschema.test.ts b/tools/rootage/core/src/languages/jsonschema.test.ts index d32528439..e264074e6 100644 --- a/tools/rootage/core/src/languages/jsonschema.test.ts +++ b/tools/rootage/core/src/languages/jsonschema.test.ts @@ -44,7 +44,7 @@ test("getJsonSchema should generate jsonschema for component spec", () => { data: { collection: "global", tokens: { - "$unit.s1_5": { + "$dimension.s1_5": { values: { default: "6px", }, @@ -246,7 +246,7 @@ test("getJsonSchema should generate jsonschema for component spec", () => { { \\"const\\": \\"$color.palette.gray-00\\", \\"title\\": \\"$color.palette.gray-00\\", \\"description\\": \\"light: #ffffff\\\\ndark: #000000\\", \\"markdownDescription\\": \\"- light: \`#ffffff\`\\\\n\\\\n- dark: \`#000000\`\\" }, { \\"const\\": \\"$color.palette.gray-100\\", \\"title\\": \\"$color.palette.gray-100\\", \\"description\\": \\"light: #f8f9fa\\\\ndark: #212529\\", \\"markdownDescription\\": \\"- light: \`#f8f9fa\`\\\\n\\\\n- dark: \`#212529\`\\" }, { \\"const\\": \\"$color.bg.layer-1\\", \\"title\\": \\"$color.bg.layer-1\\", \\"description\\": \\"light: $color.palette.gray-00\\\\ndark: $color.palette.gray-00\\", \\"markdownDescription\\": \\"- light: \`$color.palette.gray-00\`\\\\n\\\\n- dark: \`$color.palette.gray-00\`\\" }, - { \\"const\\": \\"$unit.s1_5\\", \\"title\\": \\"$unit.s1_5\\", \\"description\\": \\"default: 6px\\", \\"markdownDescription\\": \\"- default: \`6px\`\\" } + { \\"const\\": \\"$dimension.s1_5\\", \\"title\\": \\"$dimension.s1_5\\", \\"description\\": \\"default: 6px\\", \\"markdownDescription\\": \\"- default: \`6px\`\\" } ] } } @@ -295,7 +295,7 @@ test("getJsonSchema should generate valid json", () => { data: { collection: "global", tokens: { - "$unit.s1_5": { + "$dimension.s1_5": { values: { default: "6px", }, diff --git a/tools/rootage/core/src/languages/typescript.test.ts b/tools/rootage/core/src/languages/typescript.test.ts index df9cc54fb..ef9af7a57 100644 --- a/tools/rootage/core/src/languages/typescript.test.ts +++ b/tools/rootage/core/src/languages/typescript.test.ts @@ -45,7 +45,7 @@ test("getTokenMjs should generate esm definitions", () => { data: { collection: "global", tokens: { - "$unit.s1_5": { + "$dimension.s1_5": { values: { default: "6px", }, @@ -117,7 +117,7 @@ test("getTokenDts should generate typescript definitions", () => { data: { collection: "global", tokens: { - "$unit.s1_5": { + "$dimension.s1_5": { values: { default: "6px", },