Skip to content

Commit

Permalink
refactor: refactor general tokens the same way as components tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@PKulkoRaccoonGang
PKulkoRaccoonGang committed Dec 28, 2022
1 parent b6bb04c commit 0196420
Show file tree
Hide file tree
Showing 39 changed files with 583 additions and 539 deletions.
4 changes: 2 additions & 2 deletions tokens/src/components/Alert.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
"x": { "value": "1.5rem", "source": "$alert-padding-x" }
},
"margin-bottom": { "value": "1rem", "source": "$alert-margin-bottom" },
"actions-gap": { "value": "{spacer.3.value}", "source": "$alert-actions-gap" },
"actions-gap": { "value": "{spacing.spacer.3.value}", "source": "$alert-actions-gap" },
"icon-space": { "value": ".8rem", "source": "$alert-icon-space" }
}
},
"typography": {
"alert": {
"font": {
"weight-link": { "value": "{font.weight.normal.value}", "source": "$alert-link-font-weight" },
"weight-link": { "value": "{typography.font.weight.normal.value}", "source": "$alert-link-font-weight" },
"size": { "value": ".875rem", "source": "$alert-font-size" }
},
"line-height": { "value": "1.5rem", "source": "$alert-line-height" }
Expand Down
4 changes: 2 additions & 2 deletions tokens/src/components/Annotation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
},
"typography": {
"annotation": {
"font-size": { "value": "{font.size.sm.value}", "source": "$annotation-font-size" },
"line-height": { "value": "{line-height.sm.value}", "source": "$annotation-line-height" }
"font-size": { "value": "{typography.font.size.sm.value}", "source": "$annotation-font-size" },
"line-height": { "value": "{typography.line-height.sm.value}", "source": "$annotation-line-height" }
}
},
"color": {
Expand Down
4 changes: 2 additions & 2 deletions tokens/src/components/Badge.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"badge": {
"font": {
"size": { "value": "75%", "source": "$badge-font-size" },
"weight": { "value": "{font.weight.bold.value}", "source": "$badge-font-weight" }
"weight": { "value": "{typography.font.weight.bold.value}", "source": "$badge-font-weight" }
}
}
},
Expand Down Expand Up @@ -222,7 +222,7 @@
"base": { "value": ".25rem", "source": "$badge-border-radius" },
"pill": { "value": "10rem", "source": "$badge-pill-border-radius" }
},
"focus-width": { "value": "{input.btn.focus.width.value}", "source": "$badge-focus-width" }
"focus-width": { "value": "{size.input.btn.focus-width.value}", "source": "$badge-focus-width" }
}
},
"transition": {
Expand Down
2 changes: 1 addition & 1 deletion tokens/src/components/Button/brand.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,4 +94,4 @@
}
}
}
}
}
32 changes: 16 additions & 16 deletions tokens/src/components/Button/core.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
"btn": {
"padding": {
"y": {
"base": { "value": "{input.btn.padding.y.value}", "source": "$btn-padding-y" },
"lg": { "value": "{input.btn.padding.lg.y.value}", "source": "$btn-padding-y-lg" },
"sm": { "value": "{input.btn.padding.sm.y.value}", "source": "$btn-padding-y-sm" }
"base": { "value": "{spacing.input.btn.padding.y.value}", "source": "$btn-padding-y" },
"lg": { "value": "{spacing.input.btn.padding.lg.y.value}", "source": "$btn-padding-y-lg" },
"sm": { "value": "{spacing.input.btn.padding.sm.y.value}", "source": "$btn-padding-y-sm" }
},
"x": {
"base": { "value": "{input.btn.padding.x.value}", "source": "$btn-padding-x" },
"lg": { "value": "{input.btn.padding.lg.x.value}", "source": "$btn-padding-x-lg" },
"sm": { "value": "{input.btn.padding.sm.x.value}", "source": "$btn-padding-x-sm" }
"base": { "value": "{spacing.input.btn.padding.x.value}", "source": "$btn-padding-x" },
"lg": { "value": "{spacing.input.btn.padding.lg.x.value}", "source": "$btn-padding-x-lg" },
"sm": { "value": "{spacing.input.btn.padding.sm.x.value}", "source": "$btn-padding-x-sm" }
}
},
"block": {
Expand All @@ -27,26 +27,26 @@
"typography": {
"btn": {
"font": {
"family": { "value": "{input.btn.font.family.value}", "source": "$btn-font-family" },
"family": { "value": "{typography.input.btn.font.family.value}", "source": "$btn-font-family" },
"size": {
"base": { "value": "{input.btn.font.size.base.value}", "source": "$btn-font-size" },
"sm": { "value": "{input.btn.font.size.sm.value}", "source": "$btn-font-size-sm" },
"lg": { "value": "{input.btn.font.size.lg.value}", "source": "$btn-font-size-lg" }
"base": { "value": "{typography.input.btn.font.size.base.value}", "source": "$btn-font-size" },
"sm": { "value": "{typography.input.btn.font.size.sm.value}", "source": "$btn-font-size-sm" },
"lg": { "value": "{typography.input.btn.font.size.lg.value}", "source": "$btn-font-size-lg" }
},
"weight": { "value": "{font.weight.normal.value}", "source": "$btn-font-weight" }
"weight": { "value": "{typography.font.weight.normal.value}", "source": "$btn-font-weight" }
},
"line-height": {
"base": { "value": "{input.btn.line.height.base.value}", "source": "$btn-line-height" },
"sm": { "value": "{input.btn.line.height.sm.value}", "source": "$btn-line-height-sm" },
"lg": { "value": "{input.btn.line.height.lg.value}", "source": "$btn-line-height-lg" }
"base": { "value": "{typography.input.btn.line-height.base.value}", "source": "$btn-line-height" },
"sm": { "value": "{typography.input.btn.line-height.sm.value}", "source": "$btn-line-height-sm" },
"lg": { "value": "{typography.input.btn.line-height.lg.value}", "source": "$btn-line-height-lg" }
}
}
},
"elevation": {
"btn": {
"box-shadow": {
"base": {
"value": "inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)",
"value": "none",
"source": "$btn-box-shadow"
},
"active": { "value": "none", "source": "$btn-active-box-shadow" }
Expand All @@ -61,7 +61,7 @@
"size": {
"btn": {
"border": {
"width": { "value": "{input.btn.border.width.value}", "source": "$btn-border-width" },
"width": { "value": "{size.input.btn.border-width.value}", "source": "$btn-border-width" },
"radius": {
"base": { "value": "{size.border.radius.base.value}", "source": "$btn-border-radius" },
"lg": { "value": "{size.border.radius.lg.value}", "source": "$btn-border-radius-lg" },
Expand Down
2 changes: 1 addition & 1 deletion tokens/src/components/Card.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
"typography": {
"footer": {
"text": {
"font-size": { "value": "{font.size.small.x.value}", "source": "$card-footer-text-font-size" }
"font-size": { "value": "{typography.font.size.small.x.value}", "source": "$card-footer-text-font-size" }
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions tokens/src/components/CloseButton.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"typography": {
"close-button": {
"font": {
"size": { "value": "calc({font.size.base.value} * 1.5)", "source": "$close-font-size" },
"weight": { "value": "{font.weight.bold.value}", "source": "$close-font-weight" }
"size": { "value": "calc({typography.font.size.base.value} * 1.5)", "source": "$close-font-size" },
"weight": { "value": "{typography.font.weight.bold.value}", "source": "$close-font-weight" }
}
}
},
Expand Down
2 changes: 1 addition & 1 deletion tokens/src/components/Code.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"kbd": {
"font-size": { "value": "{typography.code.font-size.value}", "source": "$kbd-font-size" },
"nested": {
"font-weight": { "value": "{font.weight.bold.value}", "source": "$nested-kbd-font-weight" }
"font-weight": { "value": "{typography.font.weight.bold.value}", "source": "$nested-kbd-font-weight" }
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion tokens/src/components/DataTable.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
},
"elevation": {
"data-table": {
"box-shadow": { "value": "{box-shadow.sm.value}", "source": "$data-table-box-shadow" }
"box-shadow": { "value": "{elevation.box-shadow.sm.value}", "source": "$data-table-box-shadow" }
}
},
"size": {
Expand Down
6 changes: 3 additions & 3 deletions tokens/src/components/Dropdown.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"color": {
"dropdown": {
"text": { "value": "{body.color.value}", "source": "$dropdown-color" },
"text": { "value": "{color.body.base.value}", "source": "$dropdown-color" },
"header": { "value": "{color.gray.500.value}", "source": "$dropdown-header-color" },
"bg": { "value": "{color.background.base.value}", "source": "$dropdown-bg" },
"border": {
Expand Down Expand Up @@ -29,7 +29,7 @@
},
"typography": {
"dropdown": {
"font-size": { "value": "{font.size.base.value}", "source": "$dropdown-font-size" }
"font-size": { "value": "{typography.font.size.base.value}", "source": "$dropdown-font-size" }
}
},
"size": {
Expand Down Expand Up @@ -65,7 +65,7 @@
}
},
"divider": {
"margin-y": { "value": "calc({spacer.base.value} / 2)", "source": "$dropdown-divider-margin-y" }
"margin-y": { "value": "calc({spacing.spacer.base.value} / 2)", "source": "$dropdown-divider-margin-y" }
},
"close-container": {
"top": { "value": ".625rem", "source": "$modal-close-container-top" }
Expand Down
2 changes: 1 addition & 1 deletion tokens/src/components/Dropzone.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"typography": {
"dropzone": {
"restriction-msg": {
"font-size": { "value": "{font.size.small.x.value}", "source": "$dropzone-restriction-msg-font-size" }
"font-size": { "value": "{typography.font.size.small.x.value}", "source": "$dropzone-restriction-msg-font-size" }
}
}
},
Expand Down
2 changes: 1 addition & 1 deletion tokens/src/components/Form/color.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"input": {
"base": { "value": "{color.gray.700.value}", "source": "$input-color" },
"placeholder": { "value": "{color.gray.500.value}", "source": "$input-placeholder-color" },
"plaintext": { "value": "{body.color.value}", "source": "$input-plaintext-color" },
"plaintext": { "value": "{color.body.base.value}", "source": "$input-plaintext-color" },
"border": { "value": "{color.gray.500.value}", "source": "$input-border-color" },
"bg": {
"base": { "value": "{color.background.base.value}", "source": "$input-bg" },
Expand Down
6 changes: 3 additions & 3 deletions tokens/src/components/Form/elevation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"form": {
"input": {
"base": { "value": "inset 0 1px 1px rgba(0, 0, 0, .075)", "source": "$input-box-shadow" },
"focus": { "value": "{input.btn.focus.box-shadow.value}", "source": "$input-focus-box-shadow" }
"focus": { "value": "{elevation.input.btn-focus.box-shadow.value}", "source": "$input-focus-box-shadow" }
},
"control": {
"indicator": {
Expand All @@ -23,7 +23,7 @@
"track": { "value": "inset 0 .25rem .25rem rgba(0, 0, 0, .1)", "source": "$custom-range-track-box-shadow" },
"thumb": {
"base": { "value": "0 .1rem .25rem rgba(0, 0, 0, .1)", "source": "$custom-range-thumb-box-shadow" },
"focus": { "value": "0 0 0 1px {body.bg.value}, {size.form.input.width.focus.value}", "source": "$custom-range-thumb-focus-box-shadow" }
"focus": { "value": "0 0 0 1px {color.body.bg.value}, {size.form.input.width.focus.value}", "source": "$custom-range-thumb-focus-box-shadow" }
}
},
"file": {
Expand All @@ -33,7 +33,7 @@
"select": {
"border": {
"base": { "value": "inset 0 1px 2px rgba(0, 0, 0, .075)", "source": "$custom-select-box-shadow" },
"focus": { "value": "{input.btn.focus.box-shadow.value}", "source": "$custom-select-focus-box-shadow" }
"focus": { "value": "{elevation.input.btn-focus.box-shadow.value}", "source": "$custom-select-focus-box-shadow" }
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions tokens/src/components/Form/size.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
"source": "$input-height"
},
"sm": {
"value": "calc({typography.form.input.line-height.sm.value} * 1em + {input.btn.padding.sm.y.value} * 2 + {size.form.input.height.border.value})",
"value": "calc({typography.form.input.line-height.sm.value} * 1em + {spacing.input.btn.padding.sm.y.value} * 2 + {size.form.input.height.border.value})",
"source": "$input-height-sm"
},
"lg": {
"value": "calc({typography.form.input.line-height.lg.value} * 1em + {input.btn.padding.lg.y.value} * 2 + {size.form.input.height.border.value})",
"value": "calc({typography.form.input.line-height.lg.value} * 1em + {spacing.input.btn.padding.lg.y.value} * 2 + {size.form.input.height.border.value})",
"source": "$input-height-lg"
},
"inner": {
Expand All @@ -34,7 +34,7 @@
"width": {
"hover": { "value": "0.063rem", "source": "$input-hover-width" },
"focus": { "value": "0.063rem", "source": "$input-focus-width" },
"border": { "value": "{input.btn.border.width.value}", "source": "$input-border-width" }
"border": { "value": "{size.input.btn.border-width.value}", "source": "$input-border-width" }
},
"radius": {
"border": {
Expand Down
12 changes: 6 additions & 6 deletions tokens/src/components/Form/spacing.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
"input": {
"padding": {
"y": {
"base": { "value": "{input.btn.padding.y.value}", "source": "$input-padding-y" },
"sm": { "value": "{input.btn.padding.sm.y.value}", "source": "$input-padding-y-sm" },
"lg": { "value": "{input.btn.padding.lg.y.value}", "source": "$input-padding-y-lg" }
"base": { "value": "{spacing.input.btn.padding.y.value}", "source": "$input-padding-y" },
"sm": { "value": "{spacing.input.btn.padding.sm.y.value}", "source": "$input-padding-y-sm" },
"lg": { "value": "{spacing.input.btn.padding.lg.y.value}", "source": "$input-padding-y-lg" }
},
"x": {
"base": { "value": "{input.btn.padding.x.value}", "source": "$input-padding-x" },
"sm": { "value": "{input.btn.padding.sm.x.value}", "source": "$input-padding-x-sm" },
"lg": { "value": "{input.btn.padding.lg.x.value}", "source": "$input-padding-x-lg" }
"base": { "value": "{spacing.input.btn.padding.x.value}", "source": "$input-padding-x" },
"sm": { "value": "{spacing.input.btn.padding.sm.x.value}", "source": "$input-padding-x-sm" },
"lg": { "value": "{spacing.input.btn.padding.lg.x.value}", "source": "$input-padding-x-lg" }
}
},
"check": {
Expand Down
22 changes: 11 additions & 11 deletions tokens/src/components/Form/typography.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@
"form": {
"input": {
"font": {
"family": { "value": "{input.btn.font.family.value}", "source": "$input-font-family" },
"family": { "value": "{typography.input.btn.font.family.value}", "source": "$input-font-family" },
"size": {
"base": { "value": "{input.btn.font.size.base.value}", "source": "$input-font-size" },
"sm": { "value": "{input.btn.font.size.sm.value}", "source": "$input-font-size-sm" },
"lg": { "value": "{input.btn.font.size.lg.value}", "source": "$input-font-size-lg" }
"base": { "value": "{typography.input.btn.font.size.base.value}", "source": "$input-font-size" },
"sm": { "value": "{typography.input.btn.font.size.sm.value}", "source": "$input-font-size-sm" },
"lg": { "value": "{typography.input.btn.font.size.lg.value}", "source": "$input-font-size-lg" }
},
"weight": { "value": "{font.weight.base.value}", "source": "$input-font-weight" }
"weight": { "value": "{typography.font.weight.base.value}", "source": "$input-font-weight" }
},
"line-height": {
"base": { "value": "{input.btn.line.height.base.value}", "source": "$input-line-height" },
"sm": { "value": "{input.btn.line.height.sm.value}", "source": "$input-line-height-sm" },
"lg": { "value": "{input.btn.line.height.lg.value}", "source": "$input-line-height-lg" }
"base": { "value": "{typography.input.btn.line-height.base.value}", "source": "$input-line-height" },
"sm": { "value": "{typography.input.btn.line-height.sm.value}", "source": "$input-line-height-sm" },
"lg": { "value": "{typography.input.btn.line-height.lg.value}", "source": "$input-line-height-lg" }
}
},
"control": {
Expand All @@ -40,13 +40,13 @@
},
"feedback": {
"font": {
"size": { "value": "{font.size.small.base.value}", "source": "$form-feedback-font-size" }
"size": { "value": "{typography.font.size.small.base.value}", "source": "$form-feedback-font-size" }
},
"tooltip": {
"font": {
"size": { "value": "{font.size.sm.value}", "source": "$form-feedback-tooltip-font-size" }
"size": { "value": "{typography.font.size.sm.value}", "source": "$form-feedback-tooltip-font-size" }
},
"line-height": { "value": "{line-height.base.value}", "source": "$form-feedback-tooltip-line-height" }
"line-height": { "value": "{typography.line-height.base.value}", "source": "$form-feedback-tooltip-line-height" }
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion tokens/src/components/IconButton.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"diameter": {
"md": { "value": "2.75rem", "source": "$btn-icon-diameter-md" },
"sm": { "value": "2.25rem", "source": "$btn-icon-diameter-sm" },
"inline": { "value": "calc({line-height.base.value} + .1em)", "source": "$btn-icon-diameter-inline" }
"inline": { "value": "calc({typography.line-height.base.value} + .1em)", "source": "$btn-icon-diameter-inline" }
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion tokens/src/components/Image.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"image": {
"figure-caption": { "value": "{color.gray.500.value}", "source": "$figure-caption-color" },
"thumbnail": {
"bg": { "value": "{body.bg.value}", "source": "$thumbnail-bg" },
"bg": { "value": "{color.body.bg.value}", "source": "$thumbnail-bg" },
"border": { "value": "{color.gray.200.value}", "source": "$thumbnail-border-color" }
}
}
Expand Down
4 changes: 2 additions & 2 deletions tokens/src/components/Nav.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
},
"active": {
"text": { "value": "{color.primary.500.value}", "source": "$nav-tabs-link-active-color" },
"bg": { "value": "{body.bg.value}", "source": "$nav-tabs-link-active-bg" }
"bg": { "value": "{color.body.bg.value}", "source": "$nav-tabs-link-active-bg" }
}
}
},
Expand Down Expand Up @@ -89,7 +89,7 @@
}
},
"divider": {
"margin-y": { "value": "calc({spacer.base.value} / 2)", "source": "$nav-divider-margin-y" }
"margin-y": { "value": "calc({spacing.spacer.base.value} / 2)", "source": "$nav-divider-margin-y" }
}
}
}
Expand Down
12 changes: 6 additions & 6 deletions tokens/src/components/Navbar.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,9 @@
"spacing": {
"navbar": {
"padding": {
"y": { "value": "calc({spacer.base.value} / 2)", "source": "$navbar-padding-y" },
"y": { "value": "calc({spacing.spacer.base.value} / 2)", "source": "$navbar-padding-y" },
"x": {
"base": { "value": "{spacer.base.value}", "source": "$navbar-padding-x" },
"base": { "value": "{spacing.spacer.base.value}", "source": "$navbar-padding-x" },
"nav-link": { "value": ".5rem", "source": "$navbar-nav-link-padding-x" }
}
},
Expand All @@ -120,16 +120,16 @@
"typography": {
"navbar": {
"brand": {
"font-size": { "value": "{font.size.lg.value}", "source": "$navbar-brand-font-size" }
"font-size": { "value": "{typography.font.size.lg.value}", "source": "$navbar-brand-font-size" }
},
"nav-link": {
"height": {
"value": "calc({font.size.base.value} * {line-height.base.value} + .5rem * 2)",
"value": "calc({typography.font.size.base.value} * {typography.line-height.base.value} + .5rem * 2)",
"source": "$nav-link-height"
}
},
"toggler": {
"font-size": { "value": "{font.size.lg.value}", "source": "$navbar-toggler-font-size" }
"font-size": { "value": "{typography.font.size.lg.value}", "source": "$navbar-toggler-font-size" }
}
}
},
Expand All @@ -142,7 +142,7 @@
},
"brand": {
"height": {
"value": "calc({typography.navbar.brand.font-size.value} * {line-height.base.value})",
"value": "calc({typography.navbar.brand.font-size.value} * {typography.line-height.base.value})",
"source": "$navbar-brand-height"
}
},
Expand Down
Loading

0 comments on commit 0196420

Please sign in to comment.