Skip to content

Commit

Permalink
fix: ensure design tokens have a valid type attribute (#1992)
Browse files Browse the repository at this point in the history
Adds `type` attribute to all design tokens per W3C design tokens spec.
  • Loading branch information
PKulkoRaccoonGang authored and adamstankiewicz committed Feb 20, 2023
1 parent 645d1bc commit 2ee1f19
Show file tree
Hide file tree
Showing 75 changed files with 2,652 additions and 2,049 deletions.
144 changes: 70 additions & 74 deletions tokens/src/alias/color.json
Original file line number Diff line number Diff line change
@@ -1,107 +1,103 @@
{
"color": {
"bg": {
"base": { "value": "{color.white}" },
"active": { "value": "{color.primary.500}", "source": "$component-active-bg" }
"base": { "value": "{color.white}", "type": "color" },
"active": { "value": "{color.primary.500}", "type": "color", "source": "$component-active-bg" }
},
"text": {
"50":{
"black": {
"value": "{color.black}",
"type": "color",
"source": "$text-black-50",
"modify": [{
"type": "alpha",
"amount": 0.5
}]
"modify": [{ "type": "alpha", "amount": 0.5 }]
},
"white": {
"value": "{color.white}",
"type": "color",
"source": "$text-white-50",
"modify": [{
"type": "alpha",
"amount": 0.5
}]
"modify": [{ "type": "alpha", "amount": 0.5 }]
}
}
},
"active": { "value": "{color.white}", "source": "$component-active-color" },
"disabled": { "value": "{color.gray.500}" },
"active": { "value": "{color.white}", "type": "color", "source": "$component-active-color" },
"disabled": { "value": "{color.gray.500}", "type": "color" },
"input": {
"focus": { "value": "{color.primary.500}" }
"focus": { "value": "{color.primary.500}", "type": "color" }
},
"border": { "value": "{color.gray.200}", "source": "$border-color" },
"border": { "value": "{color.gray.200}", "type": "color", "source": "$border-color" },
"theme": {
"bg": {
"primary": { "value": "{color.primary.100}" },
"secondary": { "value": "{color.secondary.100}" },
"brand": { "value": "{color.brand.100}" },
"success": { "value": "{color.success.100}" },
"info": { "value": "{color.info.100}" },
"warning": { "value": "{color.warning.100}" },
"danger": { "value": "{color.danger.100}" },
"light": { "value": "{color.light.100}" },
"dark": { "value": "{color.dark.100}" },
"gray": { "value": "{color.gray.100}" }
"primary": { "value": "{color.primary.100}", "type": "color" },
"secondary": { "value": "{color.secondary.100}", "type": "color" },
"brand": { "value": "{color.brand.100}", "type": "color" },
"success": { "value": "{color.success.100}", "type": "color" },
"info": { "value": "{color.info.100}", "type": "color" },
"warning": { "value": "{color.warning.100}", "type": "color" },
"danger": { "value": "{color.danger.100}", "type": "color" },
"light": { "value": "{color.light.100}", "type": "color" },
"dark": { "value": "{color.dark.100}", "type": "color" },
"gray": { "value": "{color.gray.100}", "type": "color" }
},
"border": {
"primary": { "value": "{color.primary.200}" },
"secondary": { "value": "{color.secondary.200}" },
"brand": { "value": "{color.brand.200}" },
"success": { "value": "{color.success.200}" },
"info": { "value": "{color.info.200}" },
"warning": { "value": "{color.warning.200}" },
"danger": { "value": "{color.danger.200}" },
"light": { "value": "{color.light.200}" },
"dark": { "value": "{color.dark.200}" },
"gray": { "value": "{color.gray.200}" }
"primary": { "value": "{color.primary.200}", "type": "color" },
"secondary": { "value": "{color.secondary.200}", "type": "color" },
"brand": { "value": "{color.brand.200}", "type": "color" },
"success": { "value": "{color.success.200}", "type": "color" },
"info": { "value": "{color.info.200}", "type": "color" },
"warning": { "value": "{color.warning.200}", "type": "color" },
"danger": { "value": "{color.danger.200}", "type": "color" },
"light": { "value": "{color.light.200}", "type": "color" },
"dark": { "value": "{color.dark.200}", "type": "color" },
"gray": { "value": "{color.gray.200}", "type": "color" }
},
"focus": {
"primary": { "value": "{color.primary.300}" },
"secondary": { "value": "{color.secondary.300}" },
"brand": { "value": "{color.brand.300}" },
"success": { "value": "{color.success.300}" },
"info": { "value": "{color.info.300}" },
"warning": { "value": "{color.warning.300}" },
"danger": { "value": "{color.danger.300}" },
"light": { "value": "{color.light.300}" },
"dark": { "value": "{color.dark.300}" },
"gray": { "value": "{color.gray.300}" }
"primary": { "value": "{color.primary.300}", "type": "color" },
"secondary": { "value": "{color.secondary.300}", "type": "color" },
"brand": { "value": "{color.brand.300}", "type": "color" },
"success": { "value": "{color.success.300}", "type": "color" },
"info": { "value": "{color.info.300}", "type": "color" },
"warning": { "value": "{color.warning.300}", "type": "color" },
"danger": { "value": "{color.danger.300}", "type": "color" },
"light": { "value": "{color.light.300}", "type": "color" },
"dark": { "value": "{color.dark.300}", "type": "color" },
"gray": { "value": "{color.gray.300}", "type": "color" }
},
"default": {
"primary": { "value": "{color.primary.500}" },
"secondary": { "value": "{color.secondary.500}" },
"brand": { "value": "{color.brand.500}" },
"success": { "value": "{color.success.500}" },
"info": { "value": "{color.info.500}" },
"warning": { "value": "{color.warning.500}" },
"danger": { "value": "{color.danger.500}" },
"light": { "value": "{color.light.500}" },
"dark": { "value": "{color.dark.500}" },
"gray": { "value": "{color.gray.500}" }
"primary": { "value": "{color.primary.500}", "type": "color" },
"secondary": { "value": "{color.secondary.500}", "type": "color" },
"brand": { "value": "{color.brand.500}", "type": "color" },
"success": { "value": "{color.success.500}", "type": "color" },
"info": { "value": "{color.info.500}", "type": "color" },
"warning": { "value": "{color.warning.500}", "type": "color" },
"danger": { "value": "{color.danger.500}", "type": "color" },
"light": { "value": "{color.light.500}", "type": "color" },
"dark": { "value": "{color.dark.500}", "type": "color" },
"gray": { "value": "{color.gray.500}", "type": "color" }
},
"hover": {
"primary": { "value": "{color.primary.700}" },
"secondary": { "value": "{color.secondary.700}" },
"brand": { "value": "{color.brand.700}" },
"success": { "value": "{color.success.700}" },
"info": { "value": "{color.info.700}" },
"warning": { "value": "{color.warning.700}" },
"danger": { "value": "{color.danger.700}" },
"light": { "value": "{color.light.700}" },
"dark": { "value": "{color.dark.700}" },
"gray": { "value": "{color.gray.700}" }
"primary": { "value": "{color.primary.700}", "type": "color" },
"secondary": { "value": "{color.secondary.700}", "type": "color" },
"brand": { "value": "{color.brand.700}", "type": "color" },
"success": { "value": "{color.success.700}", "type": "color" },
"info": { "value": "{color.info.700}", "type": "color" },
"warning": { "value": "{color.warning.700}", "type": "color" },
"danger": { "value": "{color.danger.700}", "type": "color" },
"light": { "value": "{color.light.700}", "type": "color" },
"dark": { "value": "{color.dark.700}", "type": "color" },
"gray": { "value": "{color.gray.700}", "type": "color" }
},
"active": {
"primary": { "value": "{color.primary.900}" },
"secondary": { "value": "{color.secondary.900}" },
"brand": { "value": "{color.brand.900}" },
"success": { "value": "{color.success.900}" },
"info": { "value": "{color.info.900}" },
"warning": { "value": "{color.warning.900}" },
"danger": { "value": "{color.danger.900}" },
"light": { "value": "{color.light.900}" },
"dark": { "value": "{color.dark.900}" },
"gray": { "value": "{color.gray.900}" }
"primary": { "value": "{color.primary.900}", "type": "color" },
"secondary": { "value": "{color.secondary.900}", "type": "color" },
"brand": { "value": "{color.brand.900}", "type": "color" },
"success": { "value": "{color.success.900}", "type": "color" },
"info": { "value": "{color.info.900}", "type": "color" },
"warning": { "value": "{color.warning.900}", "type": "color" },
"danger": { "value": "{color.danger.900}", "type": "color" },
"light": { "value": "{color.light.900}", "type": "color" },
"dark": { "value": "{color.dark.900}", "type": "color" },
"gray": { "value": "{color.gray.900}", "type": "color" }
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions tokens/src/alias/size.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"size": {
"border": {
"width": { "value": "1px", "source": "$border-width" },
"width": { "value": "1px", "type": "dimension", "source": "$border-width" },
"radius": {
"base": { "value": "6px", "source": "$border-radius" },
"lg": { "value": "7px", "source": "$border-radius-lg" },
"sm": { "value": "4px", "source": "$border-radius-sm" }
"base": { "value": "6px", "type": "dimension", "source": "$border-radius" },
"lg": { "value": "7px", "type": "dimension", "source": "$border-radius-lg" },
"sm": { "value": "4px", "type": "dimension", "source": "$border-radius-sm" }
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions tokens/src/components/ActionRow.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
"spacing": {
"action-row": {
"gap": {
"x": { "value": ".5rem", "source": "$action-row-gap-x" },
"y": { "value": ".5rem", "source": "$action-row-gap-y" }
"x": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-x" },
"y": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-y" }
}
}
}
Expand Down
63 changes: 39 additions & 24 deletions tokens/src/components/Alert.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,60 +2,75 @@
"spacing": {
"alert": {
"padding": {
"y": { "value": "1.5rem", "source": "$alert-padding-y" },
"x": { "value": "1.5rem", "source": "$alert-padding-x" }
"y": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-y" },
"x": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-x" }
},
"margin-bottom": { "value": "1rem", "source": "$alert-margin-bottom" },
"actions-gap": { "value": "{spacing.spacer.3}", "source": "$alert-actions-gap" },
"icon-space": { "value": ".8rem", "source": "$alert-icon-space" }
"margin-bottom": { "value": "1rem", "type": "dimension", "source": "$alert-margin-bottom" },
"actions-gap": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$alert-actions-gap" },
"icon-space": { "value": ".8rem", "type": "dimension", "source": "$alert-icon-space" }
}
},
"typography": {
"alert": {
"font": {
"weight-link": { "value": "{typography.font.weight.normal}", "source": "$alert-link-font-weight" },
"size": { "value": ".875rem", "source": "$alert-font-size" }
"weight-link": {
"value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$alert-link-font-weight"
},
"size": { "value": ".875rem", "type": "dimension", "source": "$alert-font-size" }
},
"line-height": { "value": "1.5rem", "source": "$alert-line-height" }
"line-height": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" }
}
},
"color": {
"alert": {
"title": { "value": "{color.black}", "source": "$alert-title-color" },
"content": { "value": "{color.gray.700}", "source": "$alert-content-color" },
"title": { "value": "{color.black}", "type": "color", "source": "$alert-title-color" },
"content": { "value": "{color.gray.700}", "type": "color", "source": "$alert-content-color" },
"icon": {
"success": { "value": "{color.theme.default.success}", "source": "$alert-success-icon-color" },
"info": { "value": "{color.theme.default.info}", "source": "$alert-info-icon-color" },
"danger": { "value": "{color.theme.default.danger}", "source": "$alert-danger-icon-color" },
"warning": { "value": "{color.theme.default.warning}", "source": "$alert-warning-icon-color" }
"success": {
"value": "{color.theme.default.success}", "type": "color", "source": "$alert-success-icon-color"
},
"info": { "value": "{color.theme.default.info}", "type": "color", "source": "$alert-info-icon-color" },
"danger": {
"value": "{color.theme.default.danger}", "type": "color", "source": "$alert-danger-icon-color"
},
"warning": {
"value": "{color.theme.default.warning}", "type": "color", "source": "$alert-warning-icon-color"
}
},
"bg": {
"success": { "value": "{color.theme.bg.success}", "source": "$alert-success-bg" },
"info": { "value": "{color.theme.bg.info}", "source": "$alert-info-bg" },
"danger": { "value": "{color.theme.bg.danger}", "source": "$alert-danger-bg" },
"warning": { "value": "{color.theme.bg.warning}", "source": "$alert-warning-bg" }
"success": { "value": "{color.theme.bg.success}", "type": "color", "source": "$alert-success-bg" },
"info": { "value": "{color.theme.bg.info}", "type": "color", "source": "$alert-info-bg" },
"danger": { "value": "{color.theme.bg.danger}", "type": "color", "source": "$alert-danger-bg" },
"warning": { "value": "{color.theme.bg.warning}", "type": "color", "source": "$alert-warning-bg" }
},
"border": {
"success": { "value": "{color.theme.border.success}", "source": "$alert-success-border-color" },
"info": { "value": "{color.theme.border.info}", "source": "$alert-info-border-color" },
"danger": { "value": "{color.theme.border.danger}", "source": "$alert-danger-border-color" },
"warning": { "value": "{color.theme.border.warning}", "source": "$alert-warning-border-color" }
"success": {
"value": "{color.theme.border.success}", "type": "color", "source": "$alert-success-border-color"
},
"info": { "value": "{color.theme.border.info}", "type": "color", "source": "$alert-info-border-color" },
"danger": {
"value": "{color.theme.border.danger}", "type": "color", "source": "$alert-danger-border-color"
},
"warning": {
"value": "{color.theme.border.warning}", "type": "color", "source": "$alert-warning-border-color"
}
}
}
},
"elevation": {
"alert": {
"box-shadow": {
"value": "0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15)",
"type": "shadow",
"source": "$alert-box-shadow"
}
}
},
"size": {
"alert": {
"border": {
"radius": { "value": "{size.border.radius.base}", "source": "$alert-border-radius" },
"width": { "value": "0", "source": "$alert-border-width" }
"radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$alert-border-radius" },
"width": { "value": "0", "type": "dimension", "source": "$alert-border-width" }
}
}
}
Expand Down
37 changes: 20 additions & 17 deletions tokens/src/components/Annotation.json
Original file line number Diff line number Diff line change
@@ -1,51 +1,54 @@
{
"spacing": {
"annotation": {
"padding": { "value": ".5rem", "source": "$annotation-padding" },
"padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" },
"arrow-side": {
"margin": { "value": ".25rem", "source": "$annotation-arrow-side-margin" }
"margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" }
}
}
},
"elevation": {
"annotation": {
"box-shadow": {
"value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
"type": "shadow",
"source": "$annotation-box-shadow"
}
}
},
"typography": {
"annotation": {
"font-size": { "value": "{typography.font.size.sm}", "source": "$annotation-font-size" },
"line-height": { "value": "{typography.line-height.sm}", "source": "$annotation-line-height" }
"font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$annotation-font-size" },
"line-height": {
"value": "{typography.line-height.sm}", "type": "dimension", "source": "$annotation-line-height"
}
}
},
"color": {
"annotation": {
"text": {
"success": {"value": "{color.white}", "source": "$annotation-success-color"},
"warning": {"value": "{color.black}", "source": "$annotation-warning-color"},
"error": {"value": "{color.white}", "source": "$annotation-error-color"},
"light": {"value": "{color.primary.500}", "source": "$annotation-light-color"},
"dark": {"value": "{color.white}", "source": "$annotation-dark-color"}
"success": { "value": "{color.white}", "type": "color", "source": "$annotation-success-color"},
"warning": { "value": "{color.black}", "type": "color", "source": "$annotation-warning-color"},
"error": { "value": "{color.white}", "type": "color", "source": "$annotation-error-color"},
"light": { "value": "{color.primary.500}", "type": "color", "source": "$annotation-light-color"},
"dark": { "value": "{color.white}", "type": "color", "source": "$annotation-dark-color"}
},
"bg": {
"success": {"value": "{color.success.base}", "source": "$annotation-success-bg"},
"warning": {"value": "{color.accent.b}", "source": "$annotation-warning-bg"},
"error": {"value": "{color.danger.base}", "source": "$annotation-error-bg"},
"light": {"value": "{color.white}", "source": "$annotation-light-bg"},
"dark": {"value": "{color.dark.base}", "source": "$annotation-dark-bg"}
"success": { "value": "{color.success.base}", "type": "color", "source": "$annotation-success-bg"},
"warning": { "value": "{color.accent.b}", "type": "color", "source": "$annotation-warning-bg"},
"error": { "value": "{color.danger.base}", "type": "color", "source": "$annotation-error-bg"},
"light": { "value": "{color.white}", "type": "color", "source": "$annotation-light-bg"},
"dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg"}
}
}
},
"size": {
"annotation": {
"arrow-border": {
"width": { "value": ".5rem", "source": "$annotation-arrow-border-width" }
"width": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" }
},
"max-width": { "value": "18.75rem", "source": "$annotation-max-width" },
"border-radius": { "value": ".25rem", "source": "$annotation-border-radius" }
"max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" },
"border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" }
}
}
}
Loading

0 comments on commit 2ee1f19

Please sign in to comment.