From c19f5ddf21ecab182e290c3e8aa84e65792537f6 Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Wed, 15 Feb 2023 15:36:49 +0200
Subject: [PATCH] fix: ensure design tokens have a valid type attribute (#1992)
Adds `type` attribute to all design tokens per W3C design tokens spec.
---
tokens/src/alias/color.json | 144 ++--
tokens/src/alias/size.json | 8 +-
tokens/src/components/ActionRow.json | 4 +-
tokens/src/components/Alert.json | 63 +-
tokens/src/components/Annotation.json | 37 +-
tokens/src/components/Avatar.json | 20 +-
tokens/src/components/AvatarButton.json | 6 +-
tokens/src/components/Badge.json | 248 ++++---
tokens/src/components/Breadcrumb.json | 38 +-
tokens/src/components/Bubble.json | 20 +-
tokens/src/components/Button/brand.json | 111 ++-
tokens/src/components/Button/core.json | 77 +-
tokens/src/components/Button/danger.json | 114 ++-
tokens/src/components/Button/dark.json | 101 ++-
tokens/src/components/Button/info.json | 105 ++-
tokens/src/components/Button/light.json | 109 ++-
tokens/src/components/Button/primary.json | 123 +++-
tokens/src/components/Button/secondary.json | 139 +++-
tokens/src/components/Button/success.json | 123 +++-
tokens/src/components/Button/tertiary.json | 64 +-
tokens/src/components/Button/warning.json | 125 +++-
tokens/src/components/Card.json | 76 +-
tokens/src/components/Carousel.json | 45 +-
tokens/src/components/Chip.json | 24 +-
tokens/src/components/CloseButton.json | 12 +-
tokens/src/components/Code.json | 23 +-
tokens/src/components/Collapsible.json | 22 +-
tokens/src/components/Container.json | 10 +-
tokens/src/components/DataTable.json | 32 +-
tokens/src/components/Dropdown.json | 64 +-
tokens/src/components/Dropzone.json | 36 +-
tokens/src/components/Form/color.json | 227 +++---
tokens/src/components/Form/elevation.json | 62 +-
tokens/src/components/Form/other.json | 78 +--
tokens/src/components/Form/size.json | 150 ++--
tokens/src/components/Form/spacing.json | 108 ++-
tokens/src/components/Form/transition.json | 7 +-
tokens/src/components/Form/typography.json | 108 ++-
tokens/src/components/Icon.json | 8 +-
tokens/src/components/IconButton.json | 32 +-
tokens/src/components/Image.json | 18 +-
tokens/src/components/Menu.json | 8 +-
tokens/src/components/Modal.json | 53 +-
tokens/src/components/Nav.json | 56 +-
tokens/src/components/Navbar.json | 95 ++-
tokens/src/components/Pagination.json | 88 ++-
tokens/src/components/Popover.json | 79 ++-
tokens/src/components/ProductTour.json | 27 +-
tokens/src/components/ProgressBar.json | 34 +-
tokens/src/components/Scrollable.json | 6 +-
tokens/src/components/SearchField.json | 21 +-
tokens/src/components/SelectableBox.json | 6 +-
tokens/src/components/Sheet.json | 16 +-
tokens/src/components/Spinner.json | 12 +-
tokens/src/components/Stack.json | 2 +-
tokens/src/components/Sticky.json | 4 +-
tokens/src/components/Tabs.json | 8 +-
tokens/src/components/Toast.json | 37 +-
tokens/src/components/Tooltip.json | 35 +-
tokens/src/components/general/body.json | 4 +-
tokens/src/components/general/caret.json | 6 +-
tokens/src/components/general/headings.json | 10 +-
tokens/src/components/general/hr.json | 10 +-
tokens/src/components/general/input.json | 37 +-
tokens/src/components/general/link.json | 112 ++-
tokens/src/components/general/list.json | 48 +-
tokens/src/components/general/text.json | 20 +-
tokens/src/global/breakpoints.json | 12 +-
tokens/src/global/color.json | 740 +++++---------------
tokens/src/global/display.json | 22 +-
tokens/src/global/elevation.json | 62 +-
tokens/src/global/other.json | 2 +-
tokens/src/global/spacing.json | 26 +-
tokens/src/global/transition.json | 6 +-
tokens/src/global/typography.json | 76 +-
75 files changed, 2652 insertions(+), 2049 deletions(-)
diff --git a/tokens/src/alias/color.json b/tokens/src/alias/color.json
index 264b4da406..3534456898 100644
--- a/tokens/src/alias/color.json
+++ b/tokens/src/alias/color.json
@@ -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" }
}
}
}
diff --git a/tokens/src/alias/size.json b/tokens/src/alias/size.json
index 870277ec58..c69114eca4 100644
--- a/tokens/src/alias/size.json
+++ b/tokens/src/alias/size.json
@@ -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" }
}
}
}
diff --git a/tokens/src/components/ActionRow.json b/tokens/src/components/ActionRow.json
index c68856c705..9d5f437371 100644
--- a/tokens/src/components/ActionRow.json
+++ b/tokens/src/components/ActionRow.json
@@ -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" }
}
}
}
diff --git a/tokens/src/components/Alert.json b/tokens/src/components/Alert.json
index b8ef45825a..6e2b4b4328 100644
--- a/tokens/src/components/Alert.json
+++ b/tokens/src/components/Alert.json
@@ -2,44 +2,58 @@
"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"
+ }
}
}
},
@@ -47,6 +61,7 @@
"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"
}
}
@@ -54,8 +69,8 @@
"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" }
}
}
}
diff --git a/tokens/src/components/Annotation.json b/tokens/src/components/Annotation.json
index 37ca8c44a1..2c072afe28 100644
--- a/tokens/src/components/Annotation.json
+++ b/tokens/src/components/Annotation.json
@@ -1,9 +1,9 @@
{
"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" }
}
}
},
@@ -11,41 +11,44 @@
"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" }
}
}
}
diff --git a/tokens/src/components/Avatar.json b/tokens/src/components/Avatar.json
index 0bee236b59..659d184bd3 100644
--- a/tokens/src/components/Avatar.json
+++ b/tokens/src/components/Avatar.json
@@ -1,21 +1,21 @@
{
"color": {
"avatar": {
- "border": { "value": "{color.light.300}", "source": "$avatar-color-border" }
+ "border": { "value": "{color.light.300}", "type": "color", "source": "$avatar-color-border" }
}
},
"size": {
"avatar": {
- "base": { "value": "3rem", "source": "$avatar-size" },
- "xs": { "value": "1.5rem", "source": "$avatar-size-xs" },
- "sm": { "value": "2.25rem", "source": "$avatar-size-sm" },
- "lg": { "value": "4rem", "source": "$avatar-size-lg" },
- "xl": { "value": "6rem", "source": "$avatar-size-xl" },
- "xxl": { "value": "11.5rem", "source": "$avatar-size-xxl" },
- "huge": { "value": "18.75rem", "source": "$avatar-size-huge" },
+ "base": { "value": "3rem", "type": "dimension", "source": "$avatar-size" },
+ "xs": { "value": "1.5rem", "type": "dimension", "source": "$avatar-size-xs" },
+ "sm": { "value": "2.25rem", "type": "dimension", "source": "$avatar-size-sm" },
+ "lg": { "value": "4rem", "type": "dimension", "source": "$avatar-size-lg" },
+ "xl": { "value": "6rem", "type": "dimension", "source": "$avatar-size-xl" },
+ "xxl": { "value": "11.5rem", "type": "dimension", "source": "$avatar-size-xxl" },
+ "huge": { "value": "18.75rem", "type": "dimension", "source": "$avatar-size-huge" },
"border": {
- "base": { "value": "1px", "source": "$avatar-border" },
- "radius": { "value": "100%", "source": "$avatar-border-radius" }
+ "base": { "value": "1px", "type": "dimension", "source": "$avatar-border" },
+ "radius": { "value": "100%", "type": "percentage", "source": "$avatar-border-radius" }
}
}
}
diff --git a/tokens/src/components/AvatarButton.json b/tokens/src/components/AvatarButton.json
index 0e10faad41..ac2e311a28 100644
--- a/tokens/src/components/AvatarButton.json
+++ b/tokens/src/components/AvatarButton.json
@@ -2,9 +2,9 @@
"spacing": {
"avatar-button": {
"padding-left": {
- "base": { "value": ".25em", "source": "$avatar-button-padding-left" },
- "sm": { "value": ".25em", "source": "$avatar-button-padding-left-sm" },
- "lg": { "value": ".25em", "source": "$avatar-button-padding-left-lg" }
+ "base": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left" },
+ "sm": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left-sm" },
+ "lg": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left-lg" }
}
}
}
diff --git a/tokens/src/components/Badge.json b/tokens/src/components/Badge.json
index 35ef798116..dab6a7613b 100644
--- a/tokens/src/components/Badge.json
+++ b/tokens/src/components/Badge.json
@@ -3,214 +3,202 @@
"badge": {
"padding": {
"x": {
- "base": { "value": ".5rem", "source": "$badge-padding-x" },
- "pill": { "value": ".6em", "source": "$badge-pill-padding-x" }
+ "base": { "value": ".5rem", "type": "dimension", "source": "$badge-padding-x" },
+ "pill": { "value": ".6em", "type": "dimension", "source": "$badge-pill-padding-x" }
},
- "y": { "value": ".125rem", "source": "$badge-padding-y" }
+ "y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" }
}
}
},
"typography": {
"badge": {
"font": {
- "size": { "value": "75%", "source": "$badge-font-size" },
- "weight": { "value": "{typography.font.weight.bold}", "source": "$badge-font-weight" }
+ "size": { "value": "75%", "type": "percentage", "source": "$badge-font-size" },
+ "weight": {
+ "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$badge-font-weight"
+ }
}
}
},
"color": {
"badge": {
"text": {
- "primary": { "value": "{color.primary.base}", "source": "$badge-primary-color", "modify": [{ "type": "color-yiq" }] },
- "secondary": { "value": "{color.secondary.base}", "source": "$badge-secondary-color", "modify": [{ "type": "color-yiq" }] },
- "success": { "value": "{color.success.base}", "source": "$badge-success-color", "modify": [{ "type": "color-yiq" }] },
- "danger": { "value": "{color.danger.base}", "source": "$badge-danger-color", "modify": [{ "type": "color-yiq" }] },
- "warning": { "value": "{color.warning.base}", "source": "$badge-warning-color", "modify": [{ "type": "color-yiq" }] },
- "info": { "value": "{color.info.base}", "source": "$badge-info-color", "modify": [{ "type": "color-yiq" }] },
- "light": { "value": "{color.light.base}", "source": "$badge-light-color", "modify": [{ "type": "color-yiq" }] },
- "dark": { "value": "{color.dark.base}", "source": "$badge-dark-color", "modify": [{ "type": "color-yiq" }] }
+ "primary": {
+ "value": "{color.primary.base}",
+ "type": "color",
+ "source": "$badge-primary-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "secondary": {
+ "value": "{color.secondary.base}",
+ "type": "color",
+ "source": "$badge-secondary-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "success": {
+ "value": "{color.success.base}",
+ "type": "color",
+ "source": "$badge-success-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "danger": {
+ "value": "{color.danger.base}",
+ "type": "color",
+ "source": "$badge-danger-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "warning": {
+ "value": "{color.warning.base}",
+ "type": "color",
+ "source": "$badge-warning-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "info": {
+ "value": "{color.info.base}",
+ "type": "color",
+ "source": "$badge-info-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "light": {
+ "value": "{color.light.base}",
+ "type": "color",
+ "source": "$badge-light-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "dark": {
+ "value": "{color.dark.base}",
+ "type": "color",
+ "source": "$badge-dark-color",
+ "modify": [{ "type": "color-yiq" }]
+ }
},
"bg": {
- "primary": { "value": "{color.primary.base}", "source": "$badge-primary-bg" },
- "secondary": { "value": "{color.secondary.base}", "source": "$badge-secondary-bg" },
- "success": { "value": "{color.success.base}", "source": "$badge-success-bg" },
- "warning": { "value": "{color.warning.base}", "source": "$badge-warning-bg" },
- "danger": { "value": "{color.danger.base}", "source": "$badge-danger-bg" },
- "info": { "value": "{color.info.base}", "source": "$badge-info-bg" },
- "light": { "value": "{color.light.base}", "source": "$badge-light-bg" },
- "dark": { "value": "{color.dark.base}", "source": "$badge-dark-bg" }
+ "primary": { "value": "{color.primary.base}", "type": "color", "source": "$badge-primary-bg" },
+ "secondary": { "value": "{color.secondary.base}", "type": "color", "source": "$badge-secondary-bg" },
+ "success": { "value": "{color.success.base}", "type": "color", "source": "$badge-success-bg" },
+ "warning": { "value": "{color.warning.base}", "type": "color", "source": "$badge-warning-bg" },
+ "danger": { "value": "{color.danger.base}", "type": "color", "source": "$badge-danger-bg" },
+ "info": { "value": "{color.info.base}", "type": "color", "source": "$badge-info-bg" },
+ "light": { "value": "{color.light.base}", "type": "color", "source": "$badge-light-bg" },
+ "dark": { "value": "{color.dark.base}", "type": "color", "source": "$badge-dark-bg" }
},
"focus": {
- "primary": { "value": "{color.badge.text.primary}", "source": "$badge-primary-focus-color" },
- "secondary": { "value": "{color.badge.text.secondary}", "source": "$badge-secondary-focus-color" },
- "success": { "value": "{color.badge.text.success}", "source": "$badge-success-focus-color" },
- "warning": { "value": "{color.badge.text.warning}", "source": "$badge-warning-focus-color" },
- "danger": { "value": "{color.badge.text.danger}", "source": "$badge-danger-focus-color" },
- "info": { "value": "{color.badge.text.info}", "source": "$badge-info-focus-color" },
- "light": { "value": "{color.badge.text.light}", "source": "$badge-light-focus-color" },
- "dark": { "value": "{color.badge.text.dark}", "source": "$badge-dark-focus-color" },
+ "primary": {
+ "value": "{color.badge.text.primary}", "type": "color", "source": "$badge-primary-focus-color"
+ },
+ "secondary": {
+ "value": "{color.badge.text.secondary}", "type": "color", "source": "$badge-secondary-focus-color"
+ },
+ "success": {
+ "value": "{color.badge.text.success}", "type": "color", "source": "$badge-success-focus-color"
+ },
+ "warning": {
+ "value": "{color.badge.text.warning}", "type": "color", "source": "$badge-warning-focus-color"
+ },
+ "danger": {
+ "value": "{color.badge.text.danger}", "type": "color", "source": "$badge-danger-focus-color"
+ },
+ "info": { "value": "{color.badge.text.info}", "type": "color", "source": "$badge-info-focus-color" },
+ "light": { "value": "{color.badge.text.light}", "type": "color", "source": "$badge-light-focus-color" },
+ "dark": { "value": "{color.badge.text.dark}", "type": "color", "source": "$badge-dark-focus-color" },
"bg": {
"primary": {
"value": "{color.badge.bg.primary}",
+ "type": "color",
"source": "$badge-primary-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ]
+ "modify": [{ "type": "darken", "amount": 0.1 }]
},
"secondary": {
"value": "{color.badge.bg.secondary}",
+ "type": "color",
"source": "$badge-secondary-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ]
+ "modify": [{ "type": "darken", "amount": 0.1 }]
},
"success": {
"value": "{color.badge.bg.success}",
+ "type": "color",
"source": "$badge-success-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ]
+ "modify": [{ "type": "darken", "amount": 0.1 }]
},
"danger": {
"value": "{color.badge.bg.danger}",
+ "type": "color",
"source": "$badge-danger-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ]
+ "modify": [{ "type": "darken", "amount": 0.1 }]
},
"warning": {
"value": "{color.badge.bg.warning}",
+ "type": "color",
"source": "$badge-warning-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ]
+ "modify": [{ "type": "darken", "amount": 0.1 }]
},
"info": {
"value": "{color.badge.bg.info}",
+ "type": "color",
"source": "$badge-info-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ]
+ "modify": [{ "type": "darken", "amount": 0.1 }]
},
"light": {
"value": "{color.badge.bg.light}",
+ "type": "color",
"source": "$badge-light-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ]
+ "modify": [{ "type": "darken", "amount": 0.1 }]
},
"dark": {
"value": "{color.badge.bg.dark}",
+ "type": "color",
"source": "$badge-dark-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ]
+ "modify": [{ "type": "darken", "amount": 0.1 }]
}
},
"box-shadow": {
"primary": {
"value": "{color.badge.bg.primary}",
+ "type": "color",
"source": "$badge-primary-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ]
+ "modify": [{ "type": "alpha", "amount": 0.05 }]
},
"secondary": {
"value": "{color.badge.bg.secondary}",
+ "type": "color",
"source": "$badge-secondary-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ]
+ "modify": [{ "type": "alpha", "amount": 0.05 }]
},
"success": {
"value": "{color.badge.bg.success}",
+ "type": "color",
"source": "$badge-success-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ]
+ "modify": [{ "type": "alpha", "amount": 0.05 }]
},
"danger": {
"value": "{color.badge.bg.danger}",
+ "type": "color",
"source": "$badge-danger-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ]
+ "modify": [{ "type": "alpha", "amount": 0.05 }]
},
"warning": {
"value": "{color.badge.bg.warning}",
+ "type": "color",
"source": "$badge-warning-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ]
+ "modify": [{ "type": "alpha", "amount": 0.05 }]
},
"info": {
"value": "{color.badge.bg.info}",
+ "type": "color",
"source": "$badge-info-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ]
+ "modify": [{ "type": "alpha", "amount": 0.05 }]
},
"light": {
"value": "{color.badge.bg.light}",
+ "type": "color",
"source": "$badge-light-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ]
+ "modify": [{ "type": "alpha", "amount": 0.05 }]
},
"dark": {
"value": "{color.badge.bg.dark}",
+ "type": "color",
"source": "$badge-dark-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ]
+ "modify": [{ "type": "alpha", "amount": 0.05 }]
}
}
}
@@ -219,13 +207,15 @@
"size": {
"badge": {
"border-radius": {
- "base": { "value": ".25rem", "source": "$badge-border-radius" },
- "pill": { "value": "10rem", "source": "$badge-pill-border-radius" }
+ "base": { "value": ".25rem", "type": "dimension", "source": "$badge-border-radius" },
+ "pill": { "value": "10rem", "type": "dimension", "source": "$badge-pill-border-radius" }
},
- "focus-width": { "value": "{size.input.btn.focus-width}", "source": "$badge-focus-width" }
+ "focus-width": {
+ "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width"
+ }
}
},
"transition": {
- "badge": { "value": "none", "source": "$badge-transition" }
+ "badge": { "value": "none", "type": "transition", "source": "$badge-transition" }
}
}
diff --git a/tokens/src/components/Breadcrumb.json b/tokens/src/components/Breadcrumb.json
index 38f821dd1d..a37867f9ef 100644
--- a/tokens/src/components/Breadcrumb.json
+++ b/tokens/src/components/Breadcrumb.json
@@ -1,32 +1,32 @@
{
"color": {
"breadcrumb": {
- "bg": { "value": "{color.gray.200}", "source": "$breadcrumb-bg" },
- "base": { "value": "{color.primary.500}", "source": "$breadcrumb-color" },
- "divider": { "value": "{color.gray.600}", "source": "$breadcrumb-divider-color" },
- "active": { "value": "{color.gray.500}", "source": "$breadcrumb-active-color" },
+ "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" },
+ "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
+ "divider": { "value": "{color.gray.600}", "type": "color", "source": "$breadcrumb-divider-color" },
+ "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
"inverse": {
- "base": { "value": "{color.white}", "source": "$breadcrumb-inverse-color" },
- "active": { "value": "{color.light.500}", "source": "$breadcrumb-inverse-active" },
- "spacer": { "value": "{color.light.700}", "source": "$breadcrumb-inverse-spacer" }
+ "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" },
+ "active": { "value": "{color.light.500}", "type": "color", "source": "$breadcrumb-inverse-active" },
+ "spacer": { "value": "{color.light.700}", "type": "color", "source": "$breadcrumb-inverse-spacer" }
}
}
},
"typography": {
"breadcrumb": {
- "font-size": { "value": "inherit", "source": "$breadcrumb-font-size" }
+ "font-size": { "value": "inherit", "type": "dimension", "source": "$breadcrumb-font-size" }
}
},
"spacing": {
"breadcrumb": {
"padding": {
- "y": { "value": ".75rem", "source": "$breadcrumb-padding-y" },
- "x": { "value": "1rem", "source": "$breadcrumb-padding-x" },
- "item": { "value": ".5rem", "source": "$breadcrumb-item-padding" }
+ "y": { "value": ".75rem", "type": "dimension", "source": "$breadcrumb-padding-y" },
+ "x": { "value": "1rem", "type": "dimension", "source": "$breadcrumb-padding-x" },
+ "item": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-item-padding" }
},
"margin": {
- "bottom": { "value": "1rem", "source": "$breadcrumb-margin-bottom" },
- "left": { "value": ".5rem", "source": "$breadcrumb-margin-left" }
+ "bottom": { "value": "1rem", "type": "dimension", "source": "$breadcrumb-margin-bottom" },
+ "left": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-margin-left" }
}
}
},
@@ -34,14 +34,16 @@
"breadcrumb": {
"border": {
"radius": {
- "base": { "value": "{size.border.radius.base}", "source": "$breadcrumb-border-radius" },
- "focus": { "value": ".125rem", "source": "$breadcrumb-focus-border-radius" }
+ "base": {
+ "value": "{size.border.radius.base}", "type": "dimension", "source": "$breadcrumb-border-radius"
+ },
+ "focus": { "value": ".125rem", "type": "dimension", "source": "$breadcrumb-focus-border-radius" }
},
"axis": {
- "x-focus": { "value": ".25rem", "source": "$breadcrumb-border-focus-axis-x" },
- "y-focus": { "value": ".5rem", "source": "$breadcrumb-border-focus-axis-y" }
+ "x-focus": { "value": ".25rem", "type": "dimension", "source": "$breadcrumb-border-focus-axis-x" },
+ "y-focus": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-border-focus-axis-y" }
},
- "width-focus": { "value": ".0625rem", "source": "$breadcrumb-border-focus-width" }
+ "width-focus": { "value": ".0625rem", "type": "dimension", "source": "$breadcrumb-border-focus-width" }
}
}
}
diff --git a/tokens/src/components/Bubble.json b/tokens/src/components/Bubble.json
index 8b21f18066..617285b4f0 100644
--- a/tokens/src/components/Bubble.json
+++ b/tokens/src/components/Bubble.json
@@ -2,24 +2,24 @@
"color": {
"bubble": {
"text": {
- "success": {"value": "{color.white}", "source": "$bubble-success-color"},
- "warning": {"value": "{color.white}", "source": "$bubble-warning-color"},
- "error": {"value": "{color.white}", "source": "$bubble-error-color"},
- "primary": {"value": "{color.white}", "source": "$bubble-primary-color"}
+ "success": { "value": "{color.white}", "type": "color", "source": "$bubble-success-color"},
+ "warning": { "value": "{color.white}", "type": "color", "source": "$bubble-warning-color"},
+ "error": { "value": "{color.white}", "type": "color", "source": "$bubble-error-color"},
+ "primary": { "value": "{color.white}", "type": "color", "source": "$bubble-primary-color"}
},
"bg": {
- "success": {"value": "{color.success.base}", "source": "$bubble-success-bg"},
- "warning": {"value": "{color.warning.base}", "source": "$bubble-warning-bg"},
- "error": {"value": "{color.danger.base}", "source": "$bubble-error-bg"},
- "primary": {"value": "{color.primary.base}", "source": "$bubble-primary-bg"}
+ "success": { "value": "{color.success.base}", "type": "color", "source": "$bubble-success-bg"},
+ "warning": { "value": "{color.warning.base}", "type": "color", "source": "$bubble-warning-bg"},
+ "error": { "value": "{color.danger.base}", "type": "color", "source": "$bubble-error-bg"},
+ "primary": { "value": "{color.primary.base}", "type": "color", "source": "$bubble-primary-bg"}
}
}
},
"spacing": {
"bubble": {
"expandable-padding": {
- "y": { "value": "0", "source": "$bubble-expandable-padding-y" },
- "x": { "value": ".25rem", "source": "$bubble-expandable-padding-x" }
+ "y": { "value": "0", "type": "dimension", "source": "$bubble-expandable-padding-y" },
+ "x": { "value": ".25rem", "type": "dimension", "source": "$bubble-expandable-padding-x" }
}
}
}
diff --git a/tokens/src/components/Button/brand.json b/tokens/src/components/Button/brand.json
index 218f196c9c..06f4214351 100644
--- a/tokens/src/components/Button/brand.json
+++ b/tokens/src/components/Button/brand.json
@@ -2,94 +2,153 @@
"color": {
"btn": {
"text": {
- "brand": { "value": "{color.btn.bg.brand}", "source": "$btn-brand-color", "modify": [{ "type": "color-yiq" }] },
- "outline-brand": { "value": "{color.brand.base}", "source": "$btn-brand-outline-color" },
- "inverse-brand": { "value": "{color.brand.base}", "source": "$btn-brand-inverse-color" },
- "inverse-outline-brand": { "value": "{color.white}", "source": "$btn-brand-inverse-outline-color" }
+ "brand": {
+ "value": "{color.btn.bg.brand}",
+ "type": "color",
+ "source": "$btn-brand-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "outline-brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-outline-color" },
+ "inverse-brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-inverse-color" },
+ "inverse-outline-brand": {
+ "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-color"
+ }
},
"bg": {
- "brand": { "value": "{color.brand.base}", "source": "$btn-brand-bg" },
+ "brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-bg" },
"inverse-brand": {
"value": "{color.btn.text.inverse-brand}",
+ "type": "color",
"source": "$btn-brand-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"border": {
- "brand": { "value": "{color.btn.bg.brand}", "source": "$btn-brand-border-color" },
- "outline-brand": { "value": "{color.brand.base}", "source": "$btn-brand-outline-border-color" },
- "inverse-outline-brand": { "value": "{color.white}", "source": "$btn-brand-inverse-outline-border-color" }
+ "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-border-color" },
+ "outline-brand": {
+ "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-outline-border-color"
+ },
+ "inverse-outline-brand": {
+ "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-border-color"
+ }
},
"hover": {
"text": {
"brand": {
"value": "{color.btn.hover.bg.brand}",
+ "type": "color",
"source": "$btn-brand-hover-color",
"modify": [{ "type": "color-yiq" }]
},
- "outline-brand": { "value": "{color.theme.hover.brand}", "source": "$btn-brand-outline-hover-color" },
+ "outline-brand": {
+ "value": "{color.theme.hover.brand}",
+ "type": "color",
+ "source": "$btn-brand-outline-hover-color"
+ },
"inverse-brand": {
"value": "{color.btn.text.inverse-brand}",
+ "type": "color",
"source": "$btn-brand-inverse-hover-color",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-brand": { "value": "{color.theme.hover.brand}", "source": "$btn-brand-inverse-outline-hover-color" }
+ "inverse-outline-brand": {
+ "value": "{color.theme.hover.brand}",
+ "type": "color",
+ "source": "$btn-brand-inverse-outline-hover-color"
+ }
},
"bg": {
- "brand": { "value": "{color.theme.hover.brand}", "source": "$btn-brand-hover-bg" },
- "outline-brand": { "value": "{color.brand.100}", "source": "$btn-brand-outline-hover-bg" },
+ "brand": { "value": "{color.theme.hover.brand}", "type": "color", "source": "$btn-brand-hover-bg" },
+ "outline-brand": { "value": "{color.brand.100}", "type": "color", "source": "$btn-brand-outline-hover-bg" },
"inverse-brand": {
"value": "{color.btn.bg.inverse-brand}",
+ "type": "color",
"source": "$btn-brand-inverse-hover-bg",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-brand": { "value": "{color.brand.100}", "source": "$btn-brand-inverse-outline-hover-bg" }
+ "inverse-outline-brand": {
+ "value": "{color.brand.100}", "type": "color", "source": "$btn-brand-inverse-outline-hover-bg"
+ }
},
"border": {
- "brand": { "value": "{color.theme.hover.brand}", "source": "$btn-brand-hover-border-color" },
- "outline-brand": { "value": "{color.brand.900}", "source": "$btn-brand-outline-hover-border-color" },
- "inverse-outline-brand": { "value": "transparent", "source": "$btn-brand-inverse-outline-hover-border-color" }
+ "brand": {
+ "value": "{color.theme.hover.brand}", "type": "color", "source": "$btn-brand-hover-border-color"
+ },
+ "outline-brand": {
+ "value": "{color.brand.900}", "type": "color", "source": "$btn-brand-outline-hover-border-color"
+ },
+ "inverse-outline-brand": {
+ "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-hover-border-color"
+ }
}
},
"active": {
"text": {
"brand": {
"value": "{color.btn.active.bg.brand}",
+ "type": "color",
"source": "$btn-brand-active-color",
"modify": [{ "type": "color-yiq" }]
},
"outline-brand": {
"value": "{color.btn.active.bg.outline-brand}",
+ "type": "color",
"source": "$btn-brand-outline-active-color",
"modify": [{ "type": "color-yiq" }]
},
"inverse-brand": {
"value": "{color.btn.text.inverse-brand}",
+ "type": "color",
"source": "$btn-brand-inverse-active-color",
"modify": [{ "type": "darken", "amount": 0.1 }]
},
"inverse-outline-brand": {
"value": "{color.btn.active.bg.inverse-outline-brand}",
+ "type": "color",
"source": "$btn-brand-inverse-outline-active-color",
"modify": [{ "type": "color-yiq" }] }
},
"bg": {
- "brand": { "value": "{color.theme.active.brand}", "source": "$btn-brand-active-bg" },
- "outline-brand": { "value": "{color.theme.bg.brand}", "source": "$btn-brand-outline-active-bg" },
- "inverse-outline-brand": { "value": "{color.theme.bg.brand}", "source": "$btn-brand-inverse-outline-active-bg" }
+ "brand": {
+ "value": "{color.theme.active.brand}", "type": "color", "source": "$btn-brand-active-bg"
+ },
+ "outline-brand": {
+ "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-outline-active-bg"
+ },
+ "inverse-outline-brand": {
+ "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-inverse-outline-active-bg"
+ }
},
"border": {
- "brand": { "value": "{color.theme.active.brand}", "source": "$btn-brand-active-border-color" },
- "outline-brand": { "value": "{color.theme.active.brand}", "source": "$btn-brand-outline-active-border-color" },
- "inverse-outline-brand": { "value": "transparent", "source": "$btn-brand-inverse-outline-active-border-color" }
+ "brand": {
+ "value": "{color.theme.active.brand}", "type": "color", "source": "$btn-brand-active-border-color"
+ },
+ "outline-brand": {
+ "value": "{color.theme.active.brand}",
+ "type": "color",
+ "source": "$btn-brand-outline-active-border-color"
+ },
+ "inverse-outline-brand": {
+ "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-active-border-color"
+ }
}
},
"focus": {
"border": {
- "brand": { "value": "{color.theme.focus.brand}", "source": "$btn-brand-focus-border-color" },
- "outline-brand": { "value": "{color.theme.focus.brand}", "source": "$btn-brand-outline-focus-border-color" },
- "inverse-brand": { "value": "{color.white}", "source": "$btn-brand-inverse-focus-border-color" },
- "inverse-outline-brand": { "value": "{color.white}", "source": "$btn-brand-inverse-outline-focus-border-color" }
+ "brand": {
+ "value": "{color.theme.focus.brand}", "type": "color", "source": "$btn-brand-focus-border-color"
+ },
+ "outline-brand": {
+ "value": "{color.theme.focus.brand}",
+ "type": "color",
+ "source": "$btn-brand-outline-focus-border-color"
+ },
+ "inverse-brand": {
+ "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-focus-border-color"
+ },
+ "inverse-outline-brand": {
+ "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-focus-border-color"
+ }
}
}
}
diff --git a/tokens/src/components/Button/core.json b/tokens/src/components/Button/core.json
index 5e84428941..8e5f11ecec 100644
--- a/tokens/src/components/Button/core.json
+++ b/tokens/src/components/Button/core.json
@@ -1,44 +1,70 @@
{
"color": {
"btn": {
- "disabled-link": { "value": "{color.disabled}", "source": "$btn-link-disabled-color" }
+ "disabled-link": { "value": "{color.disabled}", "type": "color", "source": "$btn-link-disabled-color" }
}
},
"spacing": {
"btn": {
"padding": {
"y": {
- "base": { "value": "{spacing.input.btn.padding.y}", "source": "$btn-padding-y" },
- "lg": { "value": "{spacing.input.btn.padding.lg.y}", "source": "$btn-padding-y-lg" },
- "sm": { "value": "{spacing.input.btn.padding.sm.y}", "source": "$btn-padding-y-sm" }
+ "base": {
+ "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$btn-padding-y"
+ },
+ "lg": {
+ "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$btn-padding-y-lg"
+ },
+ "sm": {
+ "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$btn-padding-y-sm"
+ }
},
"x": {
- "base": { "value": "{spacing.input.btn.padding.x}", "source": "$btn-padding-x" },
- "lg": { "value": "{spacing.input.btn.padding.lg.x}", "source": "$btn-padding-x-lg" },
- "sm": { "value": "{spacing.input.btn.padding.sm.x}", "source": "$btn-padding-x-sm" }
+ "base": { "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$btn-padding-x" },
+ "lg": {
+ "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$btn-padding-x-lg"
+ },
+ "sm": {
+ "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$btn-padding-x-sm"
+ }
}
},
"block": {
- "spacing-y": { "value": ".5rem", "source": "$btn-block-spacing-y" }
+ "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" }
},
- "focus-gap": { "value": "1px", "source": "$btn-focus-gap" }
+ "focus-gap": { "value": "1px", "type": "dimension", "source": "$btn-focus-gap" }
}
},
"typography": {
"btn": {
"font": {
- "family": { "value": "{typography.input.btn.font.family}", "source": "$btn-font-family" },
+ "family": {
+ "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$btn-font-family"
+ },
"size": {
- "base": { "value": "{typography.input.btn.font.size.base}", "source": "$btn-font-size" },
- "sm": { "value": "{typography.input.btn.font.size.sm}", "source": "$btn-font-size-sm" },
- "lg": { "value": "{typography.input.btn.font.size.lg}", "source": "$btn-font-size-lg" }
+ "base": {
+ "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$btn-font-size"
+ },
+ "sm": {
+ "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$btn-font-size-sm"
+ },
+ "lg": {
+ "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$btn-font-size-lg"
+ }
},
- "weight": { "value": "{typography.font.weight.normal}", "source": "$btn-font-weight" }
+ "weight": {
+ "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$btn-font-weight"
+ }
},
"line-height": {
- "base": { "value": "{typography.input.btn.line-height.base}", "source": "$btn-line-height" },
- "sm": { "value": "{typography.input.btn.line-height.sm}", "source": "$btn-line-height-sm" },
- "lg": { "value": "{typography.input.btn.line-height.lg}", "source": "$btn-line-height-lg" }
+ "base": {
+ "value": "{typography.input.btn.line-height.base}", "type": "dimension", "source": "$btn-line-height"
+ },
+ "sm": {
+ "value": "{typography.input.btn.line-height.sm}", "type": "dimension", "source": "$btn-line-height-sm"
+ },
+ "lg": {
+ "value": "{typography.input.btn.line-height.lg}", "type": "dimension", "source": "$btn-line-height-lg"
+ }
}
}
},
@@ -47,31 +73,32 @@
"box-shadow": {
"base": {
"value": "none",
+ "type": "shadow",
"source": "$btn-box-shadow"
},
- "active": { "value": "none", "source": "$btn-active-box-shadow" }
+ "active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" }
}
}
},
"other": {
"btn": {
- "disabled-opacity": { "value": ".65", "source": "$btn-disabled-opacity" }
+ "disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" }
}
},
"size": {
"btn": {
"border": {
- "width": { "value": "{size.input.btn.border-width}", "source": "$btn-border-width" },
+ "width": { "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$btn-border-width" },
"radius": {
- "base": { "value": "{size.border.radius.base}", "source": "$btn-border-radius" },
- "lg": { "value": "{size.border.radius.lg}", "source": "$btn-border-radius-lg" },
- "sm": { "value": "{size.border.radius.sm}", "source": "$btn-border-radius-sm" }
+ "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$btn-border-radius" },
+ "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$btn-border-radius-lg" },
+ "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$btn-border-radius-sm" }
}
},
- "focus-width": { "value": "2px", "source": "$btn-focus-width" }
+ "focus-width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" }
}
},
"transition": {
- "btn": { "value": "none", "source": "$btn-transition" }
+ "btn": { "value": "none", "type": "transition", "source": "$btn-transition" }
}
}
diff --git a/tokens/src/components/Button/danger.json b/tokens/src/components/Button/danger.json
index eab96e95f9..be1c0a2dfb 100644
--- a/tokens/src/components/Button/danger.json
+++ b/tokens/src/components/Button/danger.json
@@ -2,94 +2,156 @@
"color": {
"btn": {
"text": {
- "danger": { "value": "{color.btn.bg.danger}", "source": "$btn-danger-color", "modify": [{ "type": "color-yiq" }] },
- "outline-danger": { "value": "{color.danger.base}", "source": "$btn-danger-outline-color" },
- "inverse-danger": { "value": "{color.danger.base}", "source": "$btn-danger-inverse-color" },
- "inverse-outline-danger": { "value": "{color.white}", "source": "$btn-danger-inverse-outline-color" }
+ "danger": {
+ "value": "{color.btn.bg.danger}",
+ "type": "color",
+ "source": "$btn-danger-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "outline-danger": {
+ "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-color"
+ },
+ "inverse-danger": {
+ "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-color"
+ },
+ "inverse-outline-danger": {
+ "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-color"
+ }
},
"bg": {
- "danger": { "value": "{color.danger.base}", "source": "$btn-danger-bg" },
+ "danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-bg" },
"inverse-danger": {
"value": "{color.btn.text.inverse-danger}",
+ "type": "color",
"source": "$btn-danger-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"border": {
- "danger": { "value": "{color.btn.bg.danger}", "source": "$btn-danger-border-color" },
- "outline-danger": { "value": "{color.danger.base}", "source": "$btn-danger-outline-border-color" },
- "inverse-outline-danger": { "value": "{color.white}", "source": "$btn-danger-inverse-outline-border-color" }
+ "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-border-color" },
+ "outline-danger": {
+ "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-border-color"
+ },
+ "inverse-outline-danger": {
+ "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-border-color"
+ }
},
"hover": {
"text": {
"danger": {
"value": "{color.btn.hover.bg.danger}",
+ "type": "color",
"source": "$btn-danger-hover-color",
"modify": [{ "type": "color-yiq" }]
},
- "outline-danger": { "value": "{color.theme.hover.danger}", "source": "$btn-danger-outline-hover-color" },
+ "outline-danger": {
+ "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-outline-hover-color"
+ },
"inverse-danger": {
"value": "{color.btn.text.inverse-danger}",
+ "type": "color",
"source": "$btn-danger-inverse-hover-color",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-danger": { "value": "{color.theme.hover.danger}", "source": "$btn-danger-inverse-outline-hover-color" }
+ "inverse-outline-danger": {
+ "value": "{color.theme.hover.danger}",
+ "type": "color",
+ "source": "$btn-danger-inverse-outline-hover-color"
+ }
},
"bg": {
- "danger": { "value": "{color.theme.hover.danger}", "source": "$btn-danger-hover-bg" },
- "outline-danger": { "value": "{color.danger.100}", "source": "$btn-danger-outline-hover-bg" },
+ "danger": { "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-hover-bg" },
+ "outline-danger": {
+ "value": "{color.danger.100}", "type": "color", "source": "$btn-danger-outline-hover-bg"
+ },
"inverse-danger": {
"value": "{color.btn.bg.inverse-danger}",
+ "type": "color",
"source": "$btn-danger-inverse-hover-bg",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-danger": { "value": "{color.danger.100}", "source": "$btn-danger-inverse-outline-hover-bg" }
+ "inverse-outline-danger": {
+ "value": "{color.danger.100}", "type": "color", "source": "$btn-danger-inverse-outline-hover-bg"
+ }
},
"border": {
- "danger": { "value": "{color.theme.hover.danger}", "source": "$btn-danger-hover-border-color" },
- "outline-danger": { "value": "{color.danger.900}", "source": "$btn-danger-outline-hover-border-color" },
- "inverse-outline-danger": { "value": "transparent", "source": "$btn-danger-inverse-outline-hover-border-color" }
+ "danger": {
+ "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-hover-border-color"
+ },
+ "outline-danger": {
+ "value": "{color.danger.900}", "type": "color", "source": "$btn-danger-outline-hover-border-color"
+ },
+ "inverse-outline-danger": {
+ "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-hover-border-color"
+ }
}
},
"active": {
"text": {
"danger": {
"value": "{color.btn.active.bg.danger}",
+ "type": "color",
"source": "$btn-danger-active-color",
"modify": [{ "type": "color-yiq" }]
},
"outline-danger": {
"value": "{color.btn.active.bg.outline-danger}",
+ "type": "color",
"source": "$btn-danger-outline-active-color",
"modify": [{ "type": "color-yiq" }]
},
"inverse-danger": {
"value": "{color.btn.text.inverse-danger}",
+ "type": "color",
"source": "$btn-danger-inverse-active-color",
"modify": [{ "type": "darken", "amount": 0.1 }]
},
"inverse-outline-danger": {
"value": "{color.btn.active.bg.inverse-outline-danger}",
+ "type": "color",
"source": "$btn-danger-inverse-outline-active-color",
"modify": [{ "type": "color-yiq" }] }
},
"bg": {
- "danger": { "value": "{color.theme.active.danger}", "source": "$btn-danger-active-bg" },
- "outline-danger": { "value": "{color.theme.bg.danger}", "source": "$btn-danger-outline-active-bg" },
- "inverse-outline-danger": { "value": "{color.theme.bg.danger}", "source": "$btn-danger-inverse-outline-active-bg" }
+ "danger": {
+ "value": "{color.theme.active.danger}", "type": "color", "source": "$btn-danger-active-bg"
+ },
+ "outline-danger": {
+ "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-outline-active-bg"
+ },
+ "inverse-outline-danger": {
+ "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-inverse-outline-active-bg"
+ }
},
"border": {
- "danger": { "value": "{color.theme.active.danger}", "source": "$btn-danger-active-border-color" },
- "outline-danger": { "value": "{color.theme.active.danger}", "source": "$btn-danger-outline-active-border-color" },
- "inverse-outline-danger": { "value": "transparent", "source": "$btn-danger-inverse-outline-active-border-color" }
+ "danger": {
+ "value": "{color.theme.active.danger}", "type": "color", "source": "$btn-danger-active-border-color"
+ },
+ "outline-danger": {
+ "value": "{color.theme.active.danger}",
+ "type": "color",
+ "source": "$btn-danger-outline-active-border-color"
+ },
+ "inverse-outline-danger": {
+ "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-active-border-color" }
}
},
"focus": {
"border": {
- "danger": { "value": "{color.theme.focus.danger}", "source": "$btn-danger-focus-border-color" },
- "outline-danger": { "value": "{color.theme.focus.danger}", "source": "$btn-danger-outline-focus-border-color" },
- "inverse-danger": { "value": "{color.white}", "source": "$btn-danger-inverse-focus-border-color" },
- "inverse-outline-danger": { "value": "{color.white}", "source": "$btn-danger-inverse-outline-focus-border-color" }
+ "danger": {
+ "value": "{color.theme.focus.danger}", "type": "color", "source": "$btn-danger-focus-border-color"
+ },
+ "outline-danger": {
+ "value": "{color.theme.focus.danger}",
+ "type": "color",
+ "source": "$btn-danger-outline-focus-border-color"
+ },
+ "inverse-danger": {
+ "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-focus-border-color"
+ },
+ "inverse-outline-danger": {
+ "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-focus-border-color"
+ }
}
}
}
diff --git a/tokens/src/components/Button/dark.json b/tokens/src/components/Button/dark.json
index c8be895b90..d8c17d96e6 100644
--- a/tokens/src/components/Button/dark.json
+++ b/tokens/src/components/Button/dark.json
@@ -2,94 +2,143 @@
"color": {
"btn": {
"text": {
- "dark": { "value": "{color.btn.bg.dark}", "source": "$btn-dark-color", "modify": [{ "type": "color-yiq" }] },
- "outline-dark": { "value": "{color.dark.base}", "source": "$btn-dark-outline-color" },
- "inverse-dark": { "value": "{color.dark.base}", "source": "$btn-dark-inverse-color" },
- "inverse-outline-dark": { "value": "{color.white}", "source": "$btn-dark-inverse-outline-color" }
+ "dark": {
+ "value": "{color.btn.bg.dark}",
+ "type": "color",
+ "source": "$btn-dark-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "outline-dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-outline-color" },
+ "inverse-dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-inverse-color" },
+ "inverse-outline-dark": {
+ "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-color"
+ }
},
"bg": {
- "dark": { "value": "{color.dark.base}", "source": "$btn-dark-bg" },
+ "dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-bg" },
"inverse-dark": {
"value": "{color.btn.text.inverse-dark}",
+ "type": "color",
"source": "$btn-dark-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"border": {
- "dark": { "value": "{color.btn.bg.dark}", "source": "$btn-dark-border-color" },
- "outline-dark": { "value": "{color.dark.base}", "source": "$btn-dark-outline-border-color" },
- "inverse-outline-dark": { "value": "{color.white}", "source": "$btn-dark-inverse-outline-border-color" }
+ "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-border-color" },
+ "outline-dark": {
+ "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-outline-border-color"
+ },
+ "inverse-outline-dark": {
+ "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-border-color"
+ }
},
"hover": {
"text": {
"dark": {
"value": "{color.btn.hover.bg.dark}",
+ "type": "color",
"source": "$btn-dark-hover-color",
"modify": [{ "type": "color-yiq" }]
},
- "outline-dark": { "value": "{color.theme.hover.dark}", "source": "$btn-dark-outline-hover-color" },
+ "outline-dark": {
+ "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-outline-hover-color"
+ },
"inverse-dark": {
"value": "{color.btn.text.inverse-dark}",
+ "type": "color",
"source": "$btn-dark-inverse-hover-color",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-dark": { "value": "{color.theme.hover.dark}", "source": "$btn-dark-inverse-outline-hover-color" }
+ "inverse-outline-dark": {
+ "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-inverse-outline-hover-color"
+ }
},
"bg": {
- "dark": { "value": "{color.theme.hover.dark}", "source": "$btn-dark-hover-bg" },
- "outline-dark": { "value": "{color.dark.100}", "source": "$btn-dark-outline-hover-bg" },
+ "dark": { "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-hover-bg" },
+ "outline-dark": { "value": "{color.dark.100}", "type": "color", "source": "$btn-dark-outline-hover-bg" },
"inverse-dark": {
"value": "{color.btn.bg.inverse-dark}",
+ "type": "color",
"source": "$btn-dark-inverse-hover-bg",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-dark": { "value": "{color.dark.100}", "source": "$btn-dark-inverse-outline-hover-bg" }
+ "inverse-outline-dark": {
+ "value": "{color.dark.100}", "type": "color", "source": "$btn-dark-inverse-outline-hover-bg"
+ }
},
"border": {
- "dark": { "value": "{color.theme.hover.dark}", "source": "$btn-dark-hover-border-color" },
- "outline-dark": { "value": "{color.dark.900}", "source": "$btn-dark-outline-hover-border-color" },
- "inverse-outline-dark": { "value": "transparent", "source": "$btn-dark-inverse-outline-hover-border-color" }
+ "dark": {
+ "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-hover-border-color"
+ },
+ "outline-dark": {
+ "value": "{color.dark.900}", "type": "color", "source": "$btn-dark-outline-hover-border-color"
+ },
+ "inverse-outline-dark": {
+ "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-hover-border-color"
+ }
}
},
"active": {
"text": {
"dark": {
"value": "{color.btn.active.bg.dark}",
+ "type": "color",
"source": "$btn-dark-active-color",
"modify": [{ "type": "color-yiq" }]
},
"outline-dark": {
"value": "{color.btn.active.bg.outline-dark}",
+ "type": "color",
"source": "$btn-dark-outline-active-color",
"modify": [{ "type": "color-yiq" }]
},
"inverse-dark": {
"value": "{color.btn.text.inverse-dark}",
+ "type": "color",
"source": "$btn-dark-inverse-active-color",
"modify": [{ "type": "darken", "amount": 0.1 }]
},
"inverse-outline-dark": {
"value": "{color.btn.active.bg.inverse-outline-dark}",
+ "type": "color",
"source": "$btn-dark-inverse-outline-active-color",
"modify": [{ "type": "color-yiq" }] }
},
"bg": {
- "dark": { "value": "{color.theme.active.dark}", "source": "$btn-dark-active-bg" },
- "outline-dark": { "value": "{color.theme.bg.dark}", "source": "$btn-dark-outline-active-bg" },
- "inverse-outline-dark": { "value": "{color.theme.bg.dark}", "source": "$btn-dark-inverse-outline-active-bg" }
+ "dark": { "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-active-bg" },
+ "outline-dark": {
+ "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-outline-active-bg"
+ },
+ "inverse-outline-dark": {
+ "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-inverse-outline-active-bg"
+ }
},
"border": {
- "dark": { "value": "{color.theme.active.dark}", "source": "$btn-dark-active-border-color" },
- "outline-dark": { "value": "{color.theme.active.dark}", "source": "$btn-dark-outline-active-border-color" },
- "inverse-outline-dark": { "value": "transparent", "source": "$btn-dark-inverse-outline-active-border-color" }
+ "dark": {
+ "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-active-border-color"
+ },
+ "outline-dark": {
+ "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-outline-active-border-color"
+ },
+ "inverse-outline-dark": {
+ "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-active-border-color"
+ }
}
},
"focus": {
"border": {
- "dark": { "value": "{color.theme.focus.dark}", "source": "$btn-dark-focus-border-color" },
- "outline-dark": { "value": "{color.theme.focus.dark}", "source": "$btn-dark-outline-focus-border-color" },
- "inverse-dark": { "value": "{color.white}", "source": "$btn-dark-inverse-focus-border-color" },
- "inverse-outline-dark": { "value": "{color.white}", "source": "$btn-dark-inverse-outline-focus-border-color" }
+ "dark": {
+ "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-focus-border-color"
+ },
+ "outline-dark": {
+ "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-outline-focus-border-color"
+ },
+ "inverse-dark": {
+ "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-focus-border-color"
+ },
+ "inverse-outline-dark": {
+ "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-focus-border-color"
+ }
}
}
}
diff --git a/tokens/src/components/Button/info.json b/tokens/src/components/Button/info.json
index 8805f5f9b0..fa086fb1bf 100644
--- a/tokens/src/components/Button/info.json
+++ b/tokens/src/components/Button/info.json
@@ -2,94 +2,147 @@
"color": {
"btn": {
"text": {
- "info": { "value": "{color.btn.bg.info}", "source": "$btn-info-color", "modify": [{ "type": "color-yiq" }] },
- "outline-info": { "value": "{color.info.base}", "source": "$btn-info-outline-color" },
- "inverse-info": { "value": "{color.info.base}", "source": "$btn-info-inverse-color" },
- "inverse-outline-info": { "value": "{color.white}", "source": "$btn-info-inverse-outline-color" }
+ "info": {
+ "value": "{color.btn.bg.info}",
+ "type": "color",
+ "source": "$btn-info-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "outline-info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-color" },
+ "inverse-info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-inverse-color" },
+ "inverse-outline-info": {
+ "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-color"
+ }
},
"bg": {
- "info": { "value": "{color.info.base}", "source": "$btn-info-bg" },
+ "info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-bg" },
"inverse-info": {
"value": "{color.btn.text.inverse-info}",
+ "type": "color",
"source": "$btn-info-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"border": {
- "info": { "value": "{color.btn.bg.info}", "source": "$btn-info-border-color" },
- "outline-info": { "value": "{color.info.base}", "source": "$btn-info-outline-border-color" },
- "inverse-outline-info": { "value": "{color.white}", "source": "$btn-info-inverse-outline-border-color" }
+ "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-border-color" },
+ "outline-info": {
+ "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-border-color"
+ },
+ "inverse-outline-info": {
+ "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-border-color"
+ }
},
"hover": {
"text": {
"info": {
"value": "{color.btn.hover.bg.info}",
+ "type": "color",
"source": "$btn-info-hover-color",
"modify": [{ "type": "color-yiq" }]
},
- "outline-info": { "value": "{color.theme.hover.info}", "source": "$btn-info-outline-hover-color" },
+ "outline-info": {
+ "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-outline-hover-color"
+ },
"inverse-info": {
"value": "{color.btn.text.inverse-info}",
+ "type": "color",
"source": "$btn-info-inverse-hover-color",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-info": { "value": "{color.theme.hover.info}", "source": "$btn-info-inverse-outline-hover-color" }
+ "inverse-outline-info": {
+ "value": "{color.theme.hover.info}",
+ "type": "color",
+ "source": "$btn-info-inverse-outline-hover-color"
+ }
},
"bg": {
- "info": { "value": "{color.theme.hover.info}", "source": "$btn-info-hover-bg" },
- "outline-info": { "value": "{color.info.100}", "source": "$btn-info-outline-hover-bg" },
+ "info": { "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-hover-bg" },
+ "outline-info": { "value": "{color.info.100}", "type": "color", "source": "$btn-info-outline-hover-bg" },
"inverse-info": {
"value": "{color.btn.bg.inverse-info}",
+ "type": "color",
"source": "$btn-info-inverse-hover-bg",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-info": { "value": "{color.info.100}", "source": "$btn-info-inverse-outline-hover-bg" }
+ "inverse-outline-info": {
+ "value": "{color.info.100}", "type": "color", "source": "$btn-info-inverse-outline-hover-bg"
+ }
},
"border": {
- "info": { "value": "{color.theme.hover.info}", "source": "$btn-info-hover-border-color" },
- "outline-info": { "value": "{color.info.900}", "source": "$btn-info-outline-hover-border-color" },
- "inverse-outline-info": { "value": "transparent", "source": "$btn-info-inverse-outline-hover-border-color" }
+ "info": {
+ "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-hover-border-color"
+ },
+ "outline-info": {
+ "value": "{color.info.900}", "type": "color", "source": "$btn-info-outline-hover-border-color"
+ },
+ "inverse-outline-info": {
+ "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-hover-border-color"
+ }
}
},
"active": {
"text": {
"info": {
"value": "{color.btn.active.bg.info}",
+ "type": "color",
"source": "$btn-info-active-color",
"modify": [{ "type": "color-yiq" }]
},
"outline-info": {
"value": "{color.btn.active.bg.outline-info}",
+ "type": "color",
"source": "$btn-info-outline-active-color",
"modify": [{ "type": "color-yiq" }]
},
"inverse-info": {
"value": "{color.btn.text.inverse-info}",
+ "type": "color",
"source": "$btn-info-inverse-active-color",
"modify": [{ "type": "darken", "amount": 0.1 }]
},
"inverse-outline-info": {
"value": "{color.btn.active.bg.inverse-outline-info}",
+ "type": "color",
"source": "$btn-info-inverse-outline-active-color",
"modify": [{ "type": "color-yiq" }] }
},
"bg": {
- "info": { "value": "{color.theme.active.info}", "source": "$btn-info-active-bg" },
- "outline-info": { "value": "{color.theme.bg.info}", "source": "$btn-info-outline-active-bg" },
- "inverse-outline-info": { "value": "{color.theme.bg.info}", "source": "$btn-info-inverse-outline-active-bg" }
+ "info": { "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-bg" },
+ "outline-info": {
+ "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-outline-active-bg"
+ },
+ "inverse-outline-info": {
+ "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-inverse-outline-active-bg"
+ }
},
"border": {
- "info": { "value": "{color.theme.active.info}", "source": "$btn-info-active-border-color" },
- "outline-info": { "value": "{color.theme.active.info}", "source": "$btn-info-outline-active-border-color" },
- "inverse-outline-info": { "value": "transparent", "source": "$btn-info-inverse-outline-active-border-color" }
+ "info": {
+ "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-border-color"
+ },
+ "outline-info": {
+ "value": "{color.theme.active.info}",
+ "type": "color",
+ "source": "$btn-info-outline-active-border-color"
+ },
+ "inverse-outline-info": {
+ "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-active-border-color"
+ }
}
},
"focus": {
"border": {
- "info": { "value": "{color.theme.focus.info}", "source": "$btn-info-focus-border-color" },
- "outline-info": { "value": "{color.theme.focus.info}", "source": "$btn-info-outline-focus-border-color" },
- "inverse-info": { "value": "{color.white}", "source": "$btn-info-inverse-focus-border-color" },
- "inverse-outline-info": { "value": "{color.white}", "source": "$btn-info-inverse-outline-focus-border-color" }
+ "info": {
+ "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-focus-border-color"
+ },
+ "outline-info": {
+ "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-outline-focus-border-color"
+ },
+ "inverse-info": {
+ "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-focus-border-color"
+ },
+ "inverse-outline-info": {
+ "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-focus-border-color"
+ }
}
}
}
diff --git a/tokens/src/components/Button/light.json b/tokens/src/components/Button/light.json
index 024dc61ef8..8dc026c591 100644
--- a/tokens/src/components/Button/light.json
+++ b/tokens/src/components/Button/light.json
@@ -2,94 +2,151 @@
"color": {
"btn": {
"text": {
- "light": { "value": "{color.btn.bg.light}", "source": "$btn-light-color", "modify": [{ "type": "color-yiq" }] },
- "outline-light": { "value": "{color.light.base}", "source": "$btn-light-outline-color" },
- "inverse-light": { "value": "{color.light.base}", "source": "$btn-light-inverse-color" },
- "inverse-outline-light": { "value": "{color.white}", "source": "$btn-light-inverse-outline-color" }
+ "light": {
+ "value": "{color.btn.bg.light}",
+ "type": "color",
+ "source": "$btn-light-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "outline-light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-outline-color" },
+ "inverse-light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-inverse-color" },
+ "inverse-outline-light": {
+ "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-color"
+ }
},
"bg": {
- "light": { "value": "{color.light.base}", "source": "$btn-light-bg" },
+ "light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-bg" },
"inverse-light": {
"value": "{color.btn.text.inverse-light}",
+ "type": "color",
"source": "$btn-light-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"border": {
- "light": { "value": "{color.btn.bg.light}", "source": "$btn-light-border-color" },
- "outline-light": { "value": "{color.light.base}", "source": "$btn-light-outline-border-color" },
- "inverse-outline-light": { "value": "{color.white}", "source": "$btn-light-inverse-outline-border-color" }
+ "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-border-color" },
+ "outline-light": {
+ "value": "{color.light.base}", "type": "color", "source": "$btn-light-outline-border-color"
+ },
+ "inverse-outline-light": {
+ "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-border-color"
+ }
},
"hover": {
"text": {
"light": {
"value": "{color.btn.hover.bg.light}",
+ "type": "color",
"source": "$btn-light-hover-color",
"modify": [{ "type": "color-yiq" }]
},
- "outline-light": { "value": "{color.theme.hover.light}", "source": "$btn-light-outline-hover-color" },
+ "outline-light": {
+ "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-outline-hover-color"
+ },
"inverse-light": {
"value": "{color.btn.text.inverse-light}",
+ "type": "color",
"source": "$btn-light-inverse-hover-color",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-light": { "value": "{color.theme.hover.light}", "source": "$btn-light-inverse-outline-hover-color" }
+ "inverse-outline-light": {
+ "value": "{color.theme.hover.light}",
+ "type": "color",
+ "source": "$btn-light-inverse-outline-hover-color"
+ }
},
"bg": {
- "light": { "value": "{color.theme.hover.light}", "source": "$btn-light-hover-bg" },
- "outline-light": { "value": "{color.light.100}", "source": "$btn-light-outline-hover-bg" },
+ "light": { "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-hover-bg" },
+ "outline-light": {
+ "value": "{color.light.100}", "type": "color", "source": "$btn-light-outline-hover-bg"
+ },
"inverse-light": {
"value": "{color.btn.bg.inverse-light}",
+ "type": "color",
"source": "$btn-light-inverse-hover-bg",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-light": { "value": "{color.light.100}", "source": "$btn-light-inverse-outline-hover-bg" }
+ "inverse-outline-light": {
+ "value": "{color.light.100}", "type": "color", "source": "$btn-light-inverse-outline-hover-bg"
+ }
},
"border": {
- "light": { "value": "{color.theme.hover.light}", "source": "$btn-light-hover-border-color" },
- "outline-light": { "value": "{color.light.900}", "source": "$btn-light-outline-hover-border-color" },
- "inverse-outline-light": { "value": "transparent", "source": "$btn-light-inverse-outline-hover-border-color" }
+ "light": {
+ "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-hover-border-color"
+ },
+ "outline-light": {
+ "value": "{color.light.900}", "type": "color", "source": "$btn-light-outline-hover-border-color"
+ },
+ "inverse-outline-light": {
+ "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-hover-border-color"
+ }
}
},
"active": {
"text": {
"light": {
"value": "{color.btn.active.bg.light}",
+ "type": "color",
"source": "$btn-light-active-color",
"modify": [{ "type": "color-yiq" }]
},
"outline-light": {
"value": "{color.btn.active.bg.outline-light}",
+ "type": "color",
"source": "$btn-light-outline-active-color",
"modify": [{ "type": "color-yiq" }]
},
"inverse-light": {
"value": "{color.btn.text.inverse-light}",
+ "type": "color",
"source": "$btn-light-inverse-active-color",
"modify": [{ "type": "darken", "amount": 0.1 }]
},
"inverse-outline-light": {
"value": "{color.btn.active.bg.inverse-outline-light}",
+ "type": "color",
"source": "$btn-light-inverse-outline-active-color",
"modify": [{ "type": "color-yiq" }] }
},
"bg": {
- "light": { "value": "{color.theme.active.light}", "source": "$btn-light-active-bg" },
- "outline-light": { "value": "{color.theme.bg.light}", "source": "$btn-light-outline-active-bg" },
- "inverse-outline-light": { "value": "{color.theme.bg.light}", "source": "$btn-light-inverse-outline-active-bg" }
+ "light": { "value": "{color.theme.active.light}", "type": "color", "source": "$btn-light-active-bg" },
+ "outline-light": {
+ "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-outline-active-bg"
+ },
+ "inverse-outline-light": {
+ "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-inverse-outline-active-bg"
+ }
},
"border": {
- "light": { "value": "{color.theme.active.light}", "source": "$btn-light-active-border-color" },
- "outline-light": { "value": "{color.theme.active.light}", "source": "$btn-light-outline-active-border-color" },
- "inverse-outline-light": { "value": "transparent", "source": "$btn-light-inverse-outline-active-border-color" }
+ "light": {
+ "value": "{color.theme.active.light}", "type": "color", "source": "$btn-light-active-border-color"
+ },
+ "outline-light": {
+ "value": "{color.theme.active.light}",
+ "type": "color",
+ "source": "$btn-light-outline-active-border-color"
+ },
+ "inverse-outline-light": {
+ "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-active-border-color"
+ }
}
},
"focus": {
"border": {
- "light": { "value": "{color.theme.focus.light}", "source": "$btn-light-focus-border-color" },
- "outline-light": { "value": "{color.theme.focus.light}", "source": "$btn-light-outline-focus-border-color" },
- "inverse-light": { "value": "{color.white}", "source": "$btn-light-inverse-focus-border-color" },
- "inverse-outline-light": { "value": "{color.white}", "source": "$btn-light-inverse-outline-focus-border-color" }
+ "light": {
+ "value": "{color.theme.focus.light}", "type": "color", "source": "$btn-light-focus-border-color"
+ },
+ "outline-light": {
+ "value": "{color.theme.focus.light}",
+ "type": "color",
+ "source": "$btn-light-outline-focus-border-color"
+ },
+ "inverse-light": {
+ "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-focus-border-color"
+ },
+ "inverse-outline-light": {
+ "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-focus-border-color"
+ }
}
}
}
diff --git a/tokens/src/components/Button/primary.json b/tokens/src/components/Button/primary.json
index edd7913765..771ad112ca 100644
--- a/tokens/src/components/Button/primary.json
+++ b/tokens/src/components/Button/primary.json
@@ -2,94 +2,165 @@
"color": {
"btn": {
"text": {
- "primary": { "value": "{color.btn.bg.primary}", "source": "$btn-primary-color", "modify": [{ "type": "color-yiq" }] },
- "outline-primary": { "value": "{color.primary.base}", "source": "$btn-primary-outline-color" },
- "inverse-primary": { "value": "{color.primary.base}", "source": "$btn-primary-inverse-color" },
- "inverse-outline-primary": { "value": "{color.white}", "source": "$btn-primary-inverse-outline-color" }
+ "primary": {
+ "value": "{color.btn.bg.primary}",
+ "type": "color",
+ "source": "$btn-primary-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "outline-primary": {
+ "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-outline-color"
+ },
+ "inverse-primary": {
+ "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-inverse-color"
+ },
+ "inverse-outline-primary": {
+ "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-color"
+ }
},
"bg": {
- "primary": { "value": "{color.primary.base}", "source": "$btn-primary-bg" },
+ "primary": { "value": "{color.primary.base.value}", "type": "color", "source": "$btn-primary-bg" },
"inverse-primary": {
"value": "{color.btn.text.inverse-primary}",
+ "type": "color",
"source": "$btn-primary-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"border": {
- "primary": { "value": "{color.btn.bg.primary}", "source": "$btn-primary-border-color" },
- "outline-primary": { "value": "{color.primary.base}", "source": "$btn-primary-outline-border-color" },
- "inverse-outline-primary": { "value": "{color.white}", "source": "$btn-primary-inverse-outline-border-color" }
+ "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-border-color" },
+ "outline-primary": {
+ "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-outline-border-color"
+ },
+ "inverse-outline-primary": {
+ "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-border-color"
+ }
},
"hover": {
"text": {
"primary": {
"value": "{color.btn.hover.bg.primary}",
+ "type": "color",
"source": "$btn-primary-hover-color",
"modify": [{ "type": "color-yiq" }]
},
- "outline-primary": { "value": "{color.theme.hover.primary}", "source": "$btn-primary-outline-hover-color" },
+ "outline-primary": {
+ "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-outline-hover-color"
+ },
"inverse-primary": {
"value": "{color.btn.text.inverse-primary}",
+ "type": "color",
"source": "$btn-primary-inverse-hover-color",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-primary": { "value": "{color.theme.hover.primary}", "source": "$btn-primary-inverse-outline-hover-color" }
+ "inverse-outline-primary": {
+ "value": "{color.theme.hover.primary}",
+ "type": "color",
+ "source": "$btn-primary-inverse-outline-hover-color"
+ }
},
"bg": {
- "primary": { "value": "{color.theme.hover.primary}", "source": "$btn-primary-hover-bg" },
- "outline-primary": { "value": "{color.primary.100}", "source": "$btn-primary-outline-hover-bg" },
+ "primary": {
+ "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-hover-bg"
+ },
+ "outline-primary": {
+ "value": "{color.primary.100}", "type": "color", "source": "$btn-primary-outline-hover-bg"
+ },
"inverse-primary": {
"value": "{color.btn.bg.inverse-primary}",
+ "type": "color",
"source": "$btn-primary-inverse-hover-bg",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-primary": { "value": "{color.primary.100}", "source": "$btn-primary-inverse-outline-hover-bg" }
+ "inverse-outline-primary": {
+ "value": "{color.primary.100}", "type": "color", "source": "$btn-primary-inverse-outline-hover-bg"
+ }
},
"border": {
- "primary": { "value": "{color.theme.hover.primary}", "source": "$btn-primary-hover-border-color" },
- "outline-primary": { "value": "{color.primary.900}", "source": "$btn-primary-outline-hover-border-color" },
- "inverse-outline-primary": { "value": "transparent", "source": "$btn-primary-inverse-outline-hover-border-color" }
+ "primary": {
+ "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-hover-border-color"
+ },
+ "outline-primary": {
+ "value": "{color.primary.900}", "type": "color", "source": "$btn-primary-outline-hover-border-color"
+ },
+ "inverse-outline-primary": {
+ "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-hover-border-color"
+ }
}
},
"active": {
"text": {
"primary": {
"value": "{color.btn.active.bg.primary}",
+ "type": "color",
"source": "$btn-primary-active-color",
"modify": [{ "type": "color-yiq" }]
},
"outline-primary": {
"value": "{color.btn.active.bg.outline-primary}",
+ "type": "color",
"source": "$btn-primary-outline-active-color",
"modify": [{ "type": "color-yiq" }]
},
"inverse-primary": {
"value": "{color.btn.text.inverse-primary}",
+ "type": "color",
"source": "$btn-primary-inverse-active-color",
"modify": [{ "type": "darken", "amount": 0.1 }]
},
"inverse-outline-primary": {
"value": "{color.btn.active.bg.inverse-outline-primary}",
+ "type": "color",
"source": "$btn-primary-inverse-outline-active-color",
"modify": [{ "type": "color-yiq" }] }
},
"bg": {
- "primary": { "value": "{color.theme.active.primary}", "source": "$btn-primary-active-bg" },
- "outline-primary": { "value": "{color.theme.bg.primary}", "source": "$btn-primary-outline-active-bg" },
- "inverse-outline-primary": { "value": "{color.theme.bg.primary}", "source": "$btn-primary-inverse-outline-active-bg" }
+ "primary": {
+ "value": "{color.theme.active.primary}", "type": "color", "source": "$btn-primary-active-bg"
+ },
+ "outline-primary": {
+ "value": "{color.theme.bg.primary}", "type": "color", "source": "$btn-primary-outline-active-bg"
+ },
+ "inverse-outline-primary": {
+ "value": "{color.theme.bg.primary}",
+ "type": "color",
+ "source": "$btn-primary-inverse-outline-active-bg"
+ }
},
"border": {
- "primary": { "value": "{color.theme.active.primary}", "source": "$btn-primary-active-border-color" },
- "outline-primary": { "value": "{color.theme.active.primary}", "source": "$btn-primary-outline-active-border-color" },
- "inverse-outline-primary": { "value": "transparent", "source": "$btn-primary-inverse-outline-active-border-color" }
+ "primary": {
+ "value": "{color.theme.active.primary}",
+ "type": "color",
+ "source": "$btn-primary-active-border-color"
+ },
+ "outline-primary": {
+ "value": "{color.theme.active.primary}",
+ "type": "color",
+ "source": "$btn-primary-outline-active-border-color"
+ },
+ "inverse-outline-primary": {
+ "value": "transparent",
+ "type": "color",
+ "source": "$btn-primary-inverse-outline-active-border-color"
+ }
}
},
"focus": {
"border": {
- "primary": { "value": "{color.theme.focus.primary}", "source": "$btn-primary-focus-border-color" },
- "outline-primary": { "value": "{color.theme.focus.primary}", "source": "$btn-primary-outline-focus-border-color" },
- "inverse-primary": { "value": "{color.white}", "source": "$btn-primary-inverse-focus-border-color" },
- "inverse-outline-primary": { "value": "{color.white}", "source": "$btn-primary-inverse-outline-focus-border-color" }
+ "primary": {
+ "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-primary-focus-border-color"
+ },
+ "outline-primary": {
+ "value": "{color.theme.focus.primary}",
+ "type": "color",
+ "source": "$btn-primary-outline-focus-border-color"
+ },
+ "inverse-primary": {
+ "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-focus-border-color"
+ },
+ "inverse-outline-primary": {
+ "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-focus-border-color"
+ }
}
}
}
diff --git a/tokens/src/components/Button/secondary.json b/tokens/src/components/Button/secondary.json
index 0f983075d7..d9f899b53c 100644
--- a/tokens/src/components/Button/secondary.json
+++ b/tokens/src/components/Button/secondary.json
@@ -2,94 +2,181 @@
"color": {
"btn": {
"text": {
- "secondary": { "value": "{color.btn.bg.secondary}", "source": "$btn-secondary-color", "modify": [{ "type": "color-yiq" }] },
- "outline-secondary": { "value": "{color.secondary.base}", "source": "$btn-secondary-outline-color" },
- "inverse-secondary": { "value": "{color.secondary.base}", "source": "$btn-secondary-inverse-color" },
- "inverse-outline-secondary": { "value": "{color.white}", "source": "$btn-secondary-inverse-outline-color" }
+ "secondary": {
+ "value": "{color.btn.bg.secondary}",
+ "type": "color",
+ "source": "$btn-secondary-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "outline-secondary": {
+ "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-outline-color"
+ },
+ "inverse-secondary": {
+ "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-inverse-color"
+ },
+ "inverse-outline-secondary": {
+ "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-color"
+ }
},
"bg": {
- "secondary": { "value": "{color.secondary.base}", "source": "$btn-secondary-bg" },
+ "secondary": {
+ "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-bg"
+ },
"inverse-secondary": {
"value": "{color.btn.text.inverse-secondary}",
+ "type": "color",
"source": "$btn-secondary-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"border": {
- "secondary": { "value": "{color.btn.bg.secondary}", "source": "$btn-secondary-border-color" },
- "outline-secondary": { "value": "{color.secondary.base}", "source": "$btn-secondary-outline-border-color" },
- "inverse-outline-secondary": { "value": "{color.white}", "source": "$btn-secondary-inverse-outline-border-color" }
+ "secondary": {
+ "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-border-color"
+ },
+ "outline-secondary": {
+ "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-outline-border-color"
+ },
+ "inverse-outline-secondary": {
+ "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-border-color"
+ }
},
"hover": {
"text": {
"secondary": {
"value": "{color.btn.hover.bg.secondary}",
+ "type": "color",
"source": "$btn-secondary-hover-color",
"modify": [{ "type": "color-yiq" }]
},
- "outline-secondary": { "value": "{color.theme.hover.secondary}", "source": "$btn-secondary-outline-hover-color" },
+ "outline-secondary": {
+ "value": "{color.theme.hover.secondary}",
+ "type": "color",
+ "source": "$btn-secondary-outline-hover-color"
+ },
"inverse-secondary": {
"value": "{color.btn.text.inverse-secondary}",
+ "type": "color",
"source": "$btn-secondary-inverse-hover-color",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-secondary": { "value": "{color.theme.hover.secondary}", "source": "$btn-secondary-inverse-outline-hover-color" }
+ "inverse-outline-secondary": {
+ "value": "{color.theme.hover.secondary}",
+ "type": "color",
+ "source": "$btn-secondary-inverse-outline-hover-color"
+ }
},
"bg": {
- "secondary": { "value": "{color.theme.hover.secondary}", "source": "$btn-secondary-hover-bg" },
- "outline-secondary": { "value": "{color.secondary.100}", "source": "$btn-secondary-outline-hover-bg" },
+ "secondary": {
+ "value": "{color.theme.hover.secondary}", "type": "color", "source": "$btn-secondary-hover-bg"
+ },
+ "outline-secondary": {
+ "value": "{color.secondary.100}", "type": "color", "source": "$btn-secondary-outline-hover-bg"
+ },
"inverse-secondary": {
"value": "{color.btn.bg.inverse-secondary}",
+ "type": "color",
"source": "$btn-secondary-inverse-hover-bg",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-secondary": { "value": "{color.secondary.100}", "source": "$btn-secondary-inverse-outline-hover-bg" }
+ "inverse-outline-secondary": {
+ "value": "{color.secondary.100}",
+ "type": "color",
+ "source": "$btn-secondary-inverse-outline-hover-bg"
+ }
},
"border": {
- "secondary": { "value": "{color.theme.hover.secondary}", "source": "$btn-secondary-hover-border-color" },
- "outline-secondary": { "value": "{color.secondary.900}", "source": "$btn-secondary-outline-hover-border-color" },
- "inverse-outline-secondary": { "value": "transparent", "source": "$btn-secondary-inverse-outline-hover-border-color" }
+ "secondary": {
+ "value": "{color.theme.hover.secondary}",
+ "type": "color",
+ "source": "$btn-secondary-hover-border-color"
+ },
+ "outline-secondary": {
+ "value": "{color.secondary.900}",
+ "type": "color",
+ "source": "$btn-secondary-outline-hover-border-color"
+ },
+ "inverse-outline-secondary": {
+ "value": "transparent",
+ "type": "color",
+ "source": "$btn-secondary-inverse-outline-hover-border-color"
+ }
}
},
"active": {
"text": {
"secondary": {
"value": "{color.btn.active.bg.secondary}",
+ "type": "color",
"source": "$btn-secondary-active-color",
"modify": [{ "type": "color-yiq" }]
},
"outline-secondary": {
"value": "{color.btn.active.bg.outline-secondary}",
+ "type": "color",
"source": "$btn-secondary-outline-active-color",
"modify": [{ "type": "color-yiq" }]
},
"inverse-secondary": {
"value": "{color.btn.text.inverse-secondary}",
+ "type": "color",
"source": "$btn-secondary-inverse-active-color",
"modify": [{ "type": "darken", "amount": 0.1 }]
},
"inverse-outline-secondary": {
"value": "{color.btn.active.bg.inverse-outline-secondary}",
+ "type": "color",
"source": "$btn-secondary-inverse-outline-active-color",
"modify": [{ "type": "color-yiq" }] }
},
"bg": {
- "secondary": { "value": "{color.theme.active.secondary}", "source": "$btn-secondary-active-bg" },
- "outline-secondary": { "value": "{color.theme.bg.secondary}", "source": "$btn-secondary-outline-active-bg" },
- "inverse-outline-secondary": { "value": "{color.theme.bg.secondary}", "source": "$btn-secondary-inverse-outline-active-bg" }
+ "secondary": {
+ "value": "{color.theme.active.secondary}", "type": "color", "source": "$btn-secondary-active-bg"
+ },
+ "outline-secondary": {
+ "value": "{color.theme.bg.secondary}", "type": "color", "source": "$btn-secondary-outline-active-bg"
+ },
+ "inverse-outline-secondary": {
+ "value": "{color.theme.bg.secondary}",
+ "type": "color",
+ "source": "$btn-secondary-inverse-outline-active-bg"
+ }
},
"border": {
- "secondary": { "value": "{color.theme.active.secondary}", "source": "$btn-secondary-active-border-color" },
- "outline-secondary": { "value": "{color.theme.active.secondary}", "source": "$btn-secondary-outline-active-border-color" },
- "inverse-outline-secondary": { "value": "transparent", "source": "$btn-secondary-inverse-outline-active-border-color" }
+ "secondary": {
+ "value": "{color.theme.active.secondary}",
+ "type": "color",
+ "source": "$btn-secondary-active-border-color"
+ },
+ "outline-secondary": {
+ "value": "{color.theme.active.secondary}",
+ "type": "color",
+ "source": "$btn-secondary-outline-active-border-color"
+ },
+ "inverse-outline-secondary": {
+ "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-outline-active-border-color"
+ }
}
},
"focus": {
"border": {
- "secondary": { "value": "{color.theme.focus.secondary}", "source": "$btn-secondary-focus-border-color" },
- "outline-secondary": { "value": "{color.theme.focus.secondary}", "source": "$btn-secondary-outline-focus-border-color" },
- "inverse-secondary": { "value": "{color.white}", "source": "$btn-secondary-inverse-focus-border-color" },
- "inverse-outline-secondary": { "value": "{color.white}", "source": "$btn-secondary-inverse-outline-focus-border-color" }
+ "secondary": {
+ "value": "{color.theme.focus.secondary}",
+ "type": "color",
+ "source": "$btn-secondary-focus-border-color"
+ },
+ "outline-secondary": {
+ "value": "{color.theme.focus.secondary}",
+ "type": "color",
+ "source": "$btn-secondary-outline-focus-border-color"
+ },
+ "inverse-secondary": {
+ "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-focus-border-color"
+ },
+ "inverse-outline-secondary": {
+ "value": "{color.white}",
+ "type": "color",
+ "source": "$btn-secondary-inverse-outline-focus-border-color"
+ }
}
}
}
diff --git a/tokens/src/components/Button/success.json b/tokens/src/components/Button/success.json
index 4749842390..a27dc9831c 100644
--- a/tokens/src/components/Button/success.json
+++ b/tokens/src/components/Button/success.json
@@ -2,94 +2,165 @@
"color": {
"btn": {
"text": {
- "success": { "value": "{color.btn.bg.success}", "source": "$btn-success-color", "modify": [{ "type": "color-yiq" }] },
- "outline-success": { "value": "{color.success.base}", "source": "$btn-success-outline-color" },
- "inverse-success": { "value": "{color.success.base}", "source": "$btn-success-inverse-color" },
- "inverse-outline-success": { "value": "{color.white}", "source": "$btn-success-inverse-outline-color" }
+ "success": {
+ "value": "{color.btn.bg.success}",
+ "type": "color",
+ "source": "$btn-success-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "outline-success": {
+ "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-color"
+ },
+ "inverse-success": {
+ "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-color"
+ },
+ "inverse-outline-success": {
+ "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-color"
+ }
},
"bg": {
- "success": { "value": "{color.success.base}", "source": "$btn-success-bg" },
+ "success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-bg" },
"inverse-success": {
"value": "{color.btn.text.inverse-success}",
+ "type": "color",
"source": "$btn-success-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"border": {
- "success": { "value": "{color.btn.bg.success}", "source": "$btn-success-border-color" },
- "outline-success": { "value": "{color.success.base}", "source": "$btn-success-outline-border-color" },
- "inverse-outline-success": { "value": "{color.white}", "source": "$btn-success-inverse-outline-border-color" }
+ "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-border-color" },
+ "outline-success": {
+ "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-border-color"
+ },
+ "inverse-outline-success": {
+ "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-border-color"
+ }
},
"hover": {
"text": {
"success": {
"value": "{color.btn.hover.bg.success}",
+ "type": "color",
"source": "$btn-success-hover-color",
"modify": [{ "type": "color-yiq" }]
},
- "outline-success": { "value": "{color.theme.hover.success}", "source": "$btn-success-outline-hover-color" },
+ "outline-success": {
+ "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-outline-hover-color"
+ },
"inverse-success": {
"value": "{color.btn.text.inverse-success}",
+ "type": "color",
"source": "$btn-success-inverse-hover-color",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-success": { "value": "{color.theme.hover.success}", "source": "$btn-success-inverse-outline-hover-color" }
+ "inverse-outline-success": {
+ "value": "{color.theme.hover.success}",
+ "type": "color",
+ "source": "$btn-success-inverse-outline-hover-color"
+ }
},
"bg": {
- "success": { "value": "{color.theme.hover.success}", "source": "$btn-success-hover-bg" },
- "outline-success": { "value": "{color.success.100}", "source": "$btn-success-outline-hover-bg" },
+ "success": {
+ "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-bg"
+ },
+ "outline-success": {
+ "value": "{color.success.100}", "type": "color", "source": "$btn-success-outline-hover-bg"
+ },
"inverse-success": {
"value": "{color.btn.bg.inverse-success}",
+ "type": "color",
"source": "$btn-success-inverse-hover-bg",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-success": { "value": "{color.success.100}", "source": "$btn-success-inverse-outline-hover-bg" }
+ "inverse-outline-success": {
+ "value": "{color.success.100}", "type": "color", "source": "$btn-success-inverse-outline-hover-bg"
+ }
},
"border": {
- "success": { "value": "{color.theme.hover.success}", "source": "$btn-success-hover-border-color" },
- "outline-success": { "value": "{color.success.900}", "source": "$btn-success-outline-hover-border-color" },
- "inverse-outline-success": { "value": "transparent", "source": "$btn-success-inverse-outline-hover-border-color" }
+ "success": {
+ "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-border-color"
+ },
+ "outline-success": {
+ "value": "{color.success.900}", "type": "color", "source": "$btn-success-outline-hover-border-color"
+ },
+ "inverse-outline-success": {
+ "value": "transparent", "type": "color", "source": "$btn-success-inverse-outline-hover-border-color"
+ }
}
},
"active": {
"text": {
"success": {
"value": "{color.btn.active.bg.success}",
+ "type": "color",
"source": "$btn-success-active-color",
"modify": [{ "type": "color-yiq" }]
},
"outline-success": {
"value": "{color.btn.active.bg.outline-success}",
+ "type": "color",
"source": "$btn-success-outline-active-color",
"modify": [{ "type": "color-yiq" }]
},
"inverse-success": {
"value": "{color.btn.text.inverse-success}",
+ "type": "color",
"source": "$btn-success-inverse-active-color",
"modify": [{ "type": "darken", "amount": 0.1 }]
},
"inverse-outline-success": {
"value": "{color.btn.active.bg.inverse-outline-success}",
+ "type": "color",
"source": "$btn-success-inverse-outline-active-color",
"modify": [{ "type": "color-yiq" }] }
},
"bg": {
- "success": { "value": "{color.theme.active.success}", "source": "$btn-success-active-bg" },
- "outline-success": { "value": "{color.theme.bg.success}", "source": "$btn-success-outline-active-bg" },
- "inverse-outline-success": { "value": "{color.theme.bg.success}", "source": "$btn-success-inverse-outline-active-bg" }
+ "success": {
+ "value": "{color.theme.active.success}", "type": "color", "source": "$btn-success-active-bg"
+ },
+ "outline-success": {
+ "value": "{color.theme.bg.success}", "type": "color", "source": "$btn-success-outline-active-bg"
+ },
+ "inverse-outline-success": {
+ "value": "{color.theme.bg.success}",
+ "type": "color",
+ "source": "$btn-success-inverse-outline-active-bg"
+ }
},
"border": {
- "success": { "value": "{color.theme.active.success}", "source": "$btn-success-active-border-color" },
- "outline-success": { "value": "{color.theme.active.success}", "source": "$btn-success-outline-active-border-color" },
- "inverse-outline-success": { "value": "transparent", "source": "$btn-success-inverse-outline-active-border-color" }
+ "success": {
+ "value": "{color.theme.active.success}",
+ "type": "color",
+ "source": "$btn-success-active-border-color"
+ },
+ "outline-success": {
+ "value": "{color.theme.active.success}",
+ "type": "color",
+ "source": "$btn-success-outline-active-border-color"
+ },
+ "inverse-outline-success": {
+ "value": "transparent",
+ "type": "color",
+ "source": "$btn-success-inverse-outline-active-border-color"
+ }
}
},
"focus": {
"border": {
- "success": { "value": "{color.theme.focus.success}", "source": "$btn-success-focus-border-color" },
- "outline-success": { "value": "{color.theme.focus.success}", "source": "$btn-success-outline-focus-border-color" },
- "inverse-success": { "value": "{color.white}", "source": "$btn-success-inverse-focus-border-color" },
- "inverse-outline-success": { "value": "{color.white}", "source": "$btn-success-inverse-outline-focus-border-color" }
+ "success": {
+ "value": "{color.theme.focus.success}", "type": "color", "source": "$btn-success-focus-border-color"
+ },
+ "outline-success": {
+ "value": "{color.theme.focus.success}",
+ "type": "color",
+ "source": "$btn-success-outline-focus-border-color"
+ },
+ "inverse-success": {
+ "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-focus-border-color"
+ },
+ "inverse-outline-success": {
+ "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-focus-border-color"
+ }
}
}
}
diff --git a/tokens/src/components/Button/tertiary.json b/tokens/src/components/Button/tertiary.json
index 2a5f65c6f7..fb2237f42d 100644
--- a/tokens/src/components/Button/tertiary.json
+++ b/tokens/src/components/Button/tertiary.json
@@ -2,56 +2,74 @@
"color": {
"btn": {
"text": {
- "tertiary": { "value": "{color.gray.700}", "source": "$btn-tertiary-color" },
- "inverse-tertiary": { "value": "{color.white}", "source": "$btn-inverse-tertiary-color" }
+ "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-color" },
+ "inverse-tertiary": {
+ "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-color"
+ }
},
"bg": {
- "tertiary": { "value": "transparent", "source": "$btn-tertiary-bg" },
- "inverse-tertiary": { "value": "transparent", "source": "$btn-inverse-tertiary-bg" }
+ "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-bg" },
+ "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-bg" }
},
"border": {
- "tertiary": { "value": "transparent", "source": "$btn-tertiary-border-color" },
- "inverse-tertiary": { "value": "transparent", "source": "$btn-inverse-tertiary-border-color" }
+ "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-border-color" },
+ "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-border-color" }
},
"hover": {
"text": {
- "tertiary": { "value": "{color.gray.700}", "source": "$btn-tertiary-hover-color" },
- "inverse-tertiary": { "value": "{color.white}", "source": "$btn-inverse-tertiary-hover-color" }
+ "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-hover-color" },
+ "inverse-tertiary": {
+ "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-hover-color"
+ }
},
"bg": {
- "tertiary": { "value": "{color.light.500}", "source": "$btn-tertiary-hover-bg" },
+ "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-hover-bg" },
"inverse-tertiary": {
"value": "{color.white}",
+ "type": "color",
"source": "$btn-inverse-tertiary-hover-bg",
- "modify": [{
- "type": "alpha",
- "amount": 0.1
- }]
+ "modify": [{ "type": "alpha", "amount": 0.1 }]
}
},
"border": {
- "tertiary": { "value": "transparent", "source": "$btn-tertiary-hover-border-color" },
- "inverse-tertiary": { "value": "transparent", "source": "$btn-inverse-tertiary-hover-border-color" }
+ "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-hover-border-color" },
+ "inverse-tertiary": {
+ "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-hover-border-color"
+ }
}
},
"active": {
"text": {
- "tertiary": { "value": "{color.gray.700}", "source": "$btn-tertiary-active-color" },
- "inverse-tertiary": { "value": "{color.white}", "source": "$btn-inverse-tertiary-active-color" }
+ "tertiary": {
+ "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-active-color"
+ },
+ "inverse-tertiary": {
+ "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-active-color"
+ }
},
"bg": {
- "tertiary": { "value": "{color.light.500}", "source": "$btn-tertiary-active-bg" },
- "inverse-tertiary": { "value": "{color.btn.hover.bg.inverse-tertiary}", "source": "$btn-inverse-tertiary-active-bg" }
+ "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-active-bg" },
+ "inverse-tertiary": {
+ "value": "{color.btn.hover.bg.inverse-tertiary}",
+ "type": "color",
+ "source": "$btn-inverse-tertiary-active-bg"
+ }
},
"border": {
- "tertiary": { "value": "transparent", "source": "$btn-tertiary-active-border-color" },
- "inverse-tertiary": { "value": "transparent", "source": "$btn-inverse-tertiary-active-border-color" }
+ "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-active-border-color" },
+ "inverse-tertiary": {
+ "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-active-border-color"
+ }
}
},
"focus": {
"border": {
- "tertiary": { "value": "{color.theme.focus.primary}", "source": "$btn-tertiary-focus-border-color" },
- "inverse-tertiary": { "value": "{color.white}", "source": "$btn-inverse-tertiary-focus-border-color" }
+ "tertiary": {
+ "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-tertiary-focus-border-color"
+ },
+ "inverse-tertiary": {
+ "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-focus-border-color"
+ }
}
}
}
diff --git a/tokens/src/components/Button/warning.json b/tokens/src/components/Button/warning.json
index af7490b4f1..c5a5904920 100644
--- a/tokens/src/components/Button/warning.json
+++ b/tokens/src/components/Button/warning.json
@@ -2,94 +2,167 @@
"color": {
"btn": {
"text": {
- "warning": { "value": "{color.btn.bg.warning}", "source": "$btn-warning-color", "modify": [{ "type": "color-yiq" }] },
- "outline-warning": { "value": "{color.warning.base}", "source": "$btn-warning-outline-color" },
- "inverse-warning": { "value": "{color.warning.base}", "source": "$btn-warning-inverse-color" },
- "inverse-outline-warning": { "value": "{color.white}", "source": "$btn-warning-inverse-outline-color" }
+ "warning": {
+ "value": "{color.btn.bg.warning}",
+ "type": "color",
+ "source": "$btn-warning-color",
+ "modify": [{ "type": "color-yiq" }]
+ },
+ "outline-warning": {
+ "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-color"
+ },
+ "inverse-warning": {
+ "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-inverse-color"
+ },
+ "inverse-outline-warning": {
+ "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-color"
+ }
},
"bg": {
- "warning": { "value": "{color.warning.base}", "source": "$btn-warning-bg" },
+ "warning": { "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-bg" },
"inverse-warning": {
"value": "{color.btn.text.inverse-warning}",
+ "type": "color",
"source": "$btn-warning-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"border": {
- "warning": { "value": "{color.btn.bg.warning}", "source": "$btn-warning-border-color" },
- "outline-warning": { "value": "{color.warning.base}", "source": "$btn-warning-outline-border-color" },
- "inverse-outline-warning": { "value": "{color.white}", "source": "$btn-warning-inverse-outline-border-color" }
+ "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-border-color" },
+ "outline-warning": {
+ "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-border-color"
+ },
+ "inverse-outline-warning": {
+ "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-border-color"
+ }
},
"hover": {
"text": {
"warning": {
"value": "{color.btn.hover.bg.warning}",
+ "type": "color",
"source": "$btn-warning-hover-color",
"modify": [{ "type": "color-yiq" }]
},
- "outline-warning": { "value": "{color.theme.hover.warning}", "source": "$btn-warning-outline-hover-color" },
+ "outline-warning": {
+ "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-outline-hover-color"
+ },
"inverse-warning": {
"value": "{color.btn.text.inverse-warning}",
+ "type": "color",
"source": "$btn-warning-inverse-hover-color",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-warning": { "value": "{color.theme.hover.warning}", "source": "$btn-warning-inverse-outline-hover-color" }
+ "inverse-outline-warning": {
+ "value": "{color.theme.hover.warning}",
+ "type": "color",
+ "source": "$btn-warning-inverse-outline-hover-color"
+ }
},
"bg": {
- "warning": { "value": "{color.theme.hover.warning}", "source": "$btn-warning-hover-bg" },
- "outline-warning": { "value": "{color.warning.100}", "source": "$btn-warning-outline-hover-bg" },
+ "warning": {
+ "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-bg"
+ },
+ "outline-warning": {
+ "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-outline-hover-bg"
+ },
"inverse-warning": {
"value": "{color.btn.bg.inverse-warning}",
+ "type": "color",
"source": "$btn-warning-inverse-hover-bg",
"modify": [{ "type": "darken", "amount": 0.075 }]
},
- "inverse-outline-warning": { "value": "{color.warning.100}", "source": "$btn-warning-inverse-outline-hover-bg" }
+ "inverse-outline-warning": {
+ "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-inverse-outline-hover-bg"
+ }
},
"border": {
- "warning": { "value": "{color.theme.hover.warning}", "source": "$btn-warning-hover-border-color" },
- "outline-warning": { "value": "{color.warning.900}", "source": "$btn-warning-outline-hover-border-color" },
- "inverse-outline-warning": { "value": "transparent", "source": "$btn-warning-inverse-outline-hover-border-color" }
+ "warning": {
+ "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-border-color"
+ },
+ "outline-warning": {
+ "value": "{color.warning.900}", "type": "color", "source": "$btn-warning-outline-hover-border-color"
+ },
+ "inverse-outline-warning": {
+ "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-hover-border-color"
+ }
}
},
"active": {
"text": {
"warning": {
"value": "{color.btn.active.bg.warning}",
+ "type": "color",
"source": "$btn-warning-active-color",
"modify": [{ "type": "color-yiq" }]
},
"outline-warning": {
"value": "{color.btn.active.bg.outline-warning}",
+ "type": "color",
"source": "$btn-warning-outline-active-color",
"modify": [{ "type": "color-yiq" }]
},
"inverse-warning": {
"value": "{color.btn.text.inverse-warning}",
+ "type": "color",
"source": "$btn-warning-inverse-active-color",
"modify": [{ "type": "darken", "amount": 0.1 }]
},
"inverse-outline-warning": {
"value": "{color.btn.active.bg.inverse-outline-warning}",
+ "type": "color",
"source": "$btn-warning-inverse-outline-active-color",
"modify": [{ "type": "color-yiq" }] }
},
"bg": {
- "warning": { "value": "{color.theme.active.warning}", "source": "$btn-warning-active-bg" },
- "outline-warning": { "value": "{color.theme.bg.warning}", "source": "$btn-warning-outline-active-bg" },
- "inverse-outline-warning": { "value": "{color.theme.bg.warning}", "source": "$btn-warning-inverse-outline-active-bg" }
+ "warning": {
+ "value": "{color.theme.active.warning}", "type": "color", "source": "$btn-warning-active-bg"
+ },
+ "outline-warning": {
+ "value": "{color.theme.bg.warning}", "type": "color", "source": "$btn-warning-outline-active-bg"
+ },
+ "inverse-outline-warning": {
+ "value": "{color.theme.bg.warning}",
+ "type": "color",
+ "source": "$btn-warning-inverse-outline-active-bg"
+ }
},
"border": {
- "warning": { "value": "{color.theme.active.warning}", "source": "$btn-warning-active-border-color" },
- "outline-warning": { "value": "{color.theme.active.warning}", "source": "$btn-warning-outline-active-border-color" },
- "inverse-outline-warning": { "value": "transparent", "source": "$btn-warning-inverse-outline-active-border-color" }
+ "warning": {
+ "value": "{color.theme.active.warning}",
+ "type": "color",
+ "source": "$btn-warning-active-border-color"
+ },
+ "outline-warning": {
+ "value": "{color.theme.active.warning}",
+ "type": "color",
+ "source": "$btn-warning-outline-active-border-color"
+ },
+ "inverse-outline-warning": {
+ "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-active-border-color"
+ }
}
},
"focus": {
"border": {
- "warning": { "value": "{color.theme.focus.warning}", "source": "$btn-warning-focus-border-color" },
- "outline-warning": { "value": "{color.theme.focus.warning}", "source": "$btn-warning-outline-focus-border-color" },
- "inverse-warning": { "value": "{color.white}", "source": "$btn-warning-inverse-focus-border-color" },
- "inverse-outline-warning": { "value": "{color.white}", "source": "$btn-warning-inverse-outline-focus-border-color" }
+ "warning": {
+ "value": "{color.theme.focus.warning}",
+ "type": "color",
+ "source": "$btn-warning-focus-border-color"
+ },
+ "outline-warning": {
+ "value": "{color.theme.focus.warning}",
+ "type": "color",
+ "source": "$btn-warning-outline-focus-border-color"
+ },
+ "inverse-warning": {
+ "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-focus-border-color"
+ },
+ "inverse-outline-warning": {
+ "value": "{color.white}",
+ "type": "color",
+ "source": "$btn-warning-inverse-outline-focus-border-color"
+ }
}
}
}
diff --git a/tokens/src/components/Card.json b/tokens/src/components/Card.json
index 1dd003d2f4..82fd5554ef 100644
--- a/tokens/src/components/Card.json
+++ b/tokens/src/components/Card.json
@@ -1,59 +1,55 @@
{
"color": {
"card": {
- "base": { "value": "inherit", "source": "$card-color" },
- "bg": { "value": "{color.bg.base}", "source": "$card-bg" },
+ "base": { "value": "inherit", "type": "color", "source": "$card-color" },
+ "bg": { "value": "{color.bg.base}", "type": "color", "source": "$card-bg" },
"border": {
"base": {
- "value": "{color.black}",
+ "value": "{color.black}",
+ "type": "color",
"source": "$card-border-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.125
- }]
+ "modify": [{ "type": "alpha", "amount": 0.125 }]
},
"focus": {
- "value": "{color.black}",
+ "value": "{color.black}",
+ "type": "color",
"source": "$card-border-focus-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.5
- }]
+ "modify": [{ "type": "alpha", "amount": 0.5 }]
}
},
- "divider-bg": { "value": "{color.light.400}", "source": "$card-divider-bg" }
+ "divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" }
}
},
"spacing": {
"card": {
"spacer": {
- "x": { "value": "1.25rem", "source": "$card-spacer-x" },
- "y": { "value": ".75rem", "source": "$card-spacer-y" }
+ "x": { "value": "1.25rem", "type": "dimension", "source": "$card-spacer-x" },
+ "y": { "value": ".75rem", "type": "dimension", "source": "$card-spacer-y" }
},
"margin": {
- "group": { "value": "12px", "source": "$card-group-margin" },
- "deck": { "value": "{spacing.card.margin.group}", "source": "$card-deck-margin" },
- "grid": { "value": "{spacing.card.margin.group}", "source": "$card-grid-margin" }
+ "group": { "value": "12px", "type": "dimension", "source": "$card-group-margin" },
+ "deck": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-deck-margin" },
+ "grid": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-grid-margin" }
},
"columns": {
- "margin": { "value": "{spacing.card.spacer.y}", "source": "$card-columns-margin" },
- "count": { "value": "3", "source": "$card-columns-count" },
- "gap": { "value": "1.25rem", "source": "$card-columns-gap" }
+ "margin": { "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$card-columns-margin" },
+ "count": { "value": "3", "type": "dimension", "source": "$card-columns-count" },
+ "gap": { "value": "1.25rem", "type": "dimension", "source": "$card-columns-gap" }
},
"footer": {
- "action-gap": { "value": ".5rem", "source": "$card-footer-actions-gap" }
+ "action-gap": { "value": ".5rem", "type": "dimension", "source": "$card-footer-actions-gap" }
},
"loading-skeleton": {
- "spacer": { "value": ".313rem", "source": "$loading-skeleton-spacer" }
+ "spacer": { "value": ".313rem", "type": "dimension", "source": "$loading-skeleton-spacer" }
},
"logo": {
"left-offset": {
- "base": { "value": "1.5rem", "source": "$card-logo-left-offset" },
- "horizontal": { "value": ".4375rem", "source": "$card-logo-left-offset-horizontal" }
+ "base": { "value": "1.5rem", "type": "dimension", "source": "$card-logo-left-offset" },
+ "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-left-offset-horizontal" }
},
"bottom-offset": {
- "base": { "value": "1rem", "source": "$card-logo-bottom-offset" },
- "horizontal": { "value": ".4375rem", "source": "$card-logo-bottom-offset-horizontal" }
+ "base": { "value": "1rem", "type": "dimension", "source": "$card-logo-bottom-offset" },
+ "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-bottom-offset-horizontal" }
}
}
}
@@ -61,34 +57,40 @@
"size": {
"card": {
"border": {
- "width": { "value": "{size.border.width}", "source": "$card-border-width" },
+ "width": { "value": "{size.border.width}", "type": "dimension", "source": "$card-border-width" },
"radius": {
- "base": { "value": "{size.border.radius.base}", "source": "$card-border-radius" },
- "image": { "value": ".3125rem", "source": "$card-image-border-radius" },
- "logo": { "value": ".25rem", "source": "$card-logo-border-radius" }
+ "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$card-border-radius" },
+ "image": { "value": ".3125rem", "type": "dimension", "source": "$card-image-border-radius" },
+ "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" }
}
},
"image": {
"horizontal": {
"width": {
- "max": { "value": "240px", "source": "$card-image-horizontal-max-width" },
- "min": { "value": "{size.card.image.horizontal.width.max}", "source": "$card-image-horizontal-min-width" }
+ "max": { "value": "240px", "type": "dimension", "source": "$card-image-horizontal-max-width" },
+ "min": {
+ "value": "{size.card.image.horizontal.width.max}",
+ "type": "dimension",
+ "source": "$card-image-horizontal-min-width"
+ }
}
},
"vertical": {
- "max-height": { "value": "140px", "source": "$card-image-vertical-max-height" }
+ "max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" }
}
},
"logo": {
- "width": { "value": "7.25rem", "source": "$card-logo-width" },
- "height": { "value": "4.125rem", "source": "$card-logo-height" }
+ "width": { "value": "7.25rem", "type": "dimension", "source": "$card-logo-width" },
+ "height": { "value": "4.125rem", "type": "dimension", "source": "$card-logo-height" }
}
}
},
"typography": {
"footer": {
"text": {
- "font-size": { "value": "{typography.font.size.small.x}", "source": "$card-footer-text-font-size" }
+ "font-size": {
+ "value": "{typography.font.size.small.x}", "type": "dimension", "source": "$card-footer-text-font-size"
+ }
}
}
}
diff --git a/tokens/src/components/Carousel.json b/tokens/src/components/Carousel.json
index f292b5caaf..086f6ef667 100644
--- a/tokens/src/components/Carousel.json
+++ b/tokens/src/components/Carousel.json
@@ -2,50 +2,51 @@
"color": {
"carousel": {
"control": {
- "base": { "value": "{color.white}", "source": "$carousel-control-color" },
+ "base": { "value": "{color.white}", "type": "color", "source": "$carousel-control-color" },
"opacity": {
- "base": { "value": ".5", "source": "$carousel-control-opacity" },
- "hover": { "value": ".9", "source": "$carousel-control-hover-opacity" }
+ "base": { "value": ".5", "type": "ratio", "source": "$carousel-control-opacity" },
+ "hover": { "value": ".9", "type": "ratio", "source": "$carousel-control-hover-opacity" }
}
},
"indicator": {
- "active-bg": { "value": "{color.white}", "source": "$carousel-indicator-active-bg" }
+ "active-bg": { "value": "{color.white}", "type": "color", "source": "$carousel-indicator-active-bg" }
},
- "caption": { "value": "{color.white}", "source": "$carousel-caption-color" }
+ "caption": { "value": "{color.white}", "type": "color", "source": "$carousel-caption-color" }
}
},
"size": {
"carousel": {
"control": {
"width": {
- "base": { "value": "15%", "source": "$carousel-control-width" },
- "icon": { "value": "20px", "source": "$carousel-control-icon-width" }
+ "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" },
+ "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" }
}
},
"indicator": {
- "width": { "value": "30px", "source": "$carousel-indicator-width" },
+ "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" },
"height": {
- "base": { "value": "3px", "source": "$carousel-indicator-height" },
- "area-hit": { "value": "3px", "source": "$carousel-indicator-hit-area-height" }
+ "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" },
+ "area-hit": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
}
},
- "caption-width": { "value": "70%", "source": "$carousel-caption-width" }
+ "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" }
}
},
"spacing": {
"carousel": {
- "indicator-spacer": { "value": "3px", "source": "$carousel-indicator-spacer" }
+ "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" }
}
},
"transition": {
"carousel": {
"base": {
"value": "transform {transition.carousel.duration} ease-in-out",
+ "type": "transition",
"source": "$carousel-transition-duration"
},
- "duration": { "value": ".6s", "source": "$carousel-transition-duration" },
- "indicator": { "value": "opacity .6s ease", "source": "$carousel-indicator-transition" },
- "control": { "value": "opacity .15s ease", "source": "$carousel-control-transition" }
+ "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" },
+ "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" },
+ "control": { "value": "opacity .15s ease", "type": "transition", "source": "$carousel-control-transition" }
}
},
"content": {
@@ -54,23 +55,17 @@
"bg": {
"prev-icon": {
"value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\")",
+ "type": "file",
"source": "$carousel-control-prev-icon-bg",
"outputReferences": false,
- "modify": [{
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
},
"next-icon": {
"value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\")",
+ "type": "file",
"source": "$carousel-control-next-icon-bg",
"outputReferences": false,
- "modify": [{
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
}
}
}
diff --git a/tokens/src/components/Chip.json b/tokens/src/components/Chip.json
index 7ce2f80cba..a59a1972b3 100644
--- a/tokens/src/components/Chip.json
+++ b/tokens/src/components/Chip.json
@@ -2,35 +2,35 @@
"color": {
"chip": {
"text": {
- "light": { "value": "{color.black}", "source": "$chip-light-color" },
- "dark": { "value": "{color.white}", "source": "$chip-dark-color" }
+ "light": { "value": "{color.black}", "type": "color", "source": "$chip-light-color" },
+ "dark": { "value": "{color.white}", "type": "color", "source": "$chip-dark-color" }
},
"bg": {
- "light": { "value": "{color.light.500}", "source": "$chip-light-bg" },
- "dark": { "value": "{color.dark.200}", "source": "$chip-dark-bg" }
+ "light": { "value": "{color.light.500}", "type": "color", "source": "$chip-light-bg" },
+ "dark": { "value": "{color.dark.200}", "type": "color", "source": "$chip-dark-bg" }
}
}
},
"spacing": {
"chip": {
- "margin": { "value": ".125rem", "source": "$chip-margin" },
+ "margin": { "value": ".125rem", "type": "dimension", "source": "$chip-margin" },
"padding": {
- "y": { "value": ".125rem", "source": "$chip-padding-y" },
- "x": { "value": ".5rem", "source": "$chip-padding-x" },
- "icon": { "value": ".25rem", "source": "$chip-icon-padding" },
- "to-icon": { "value": "3px", "source": "$chip-padding-to-icon" }
+ "y": { "value": ".125rem", "type": "dimension", "source": "$chip-padding-y" },
+ "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" },
+ "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-padding" },
+ "to-icon": { "value": "3px", "type": "dimension", "source": "$chip-padding-to-icon" }
}
}
},
"other": {
"chip": {
- "opacity-disabled": { "value": ".3", "source": "$chip-disable-opacity" }
+ "opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" }
}
},
"size": {
"chip": {
- "border-radius": { "value": ".25rem", "source": "$chip-border-radius" },
- "icon": { "value": "1.25rem", "source": "$chip-icon-size" }
+ "border-radius": { "value": ".25rem", "type": "dimension", "source": "$chip-border-radius" },
+ "icon": { "value": "1.25rem", "type": "dimension", "source": "$chip-icon-size" }
}
}
}
diff --git a/tokens/src/components/CloseButton.json b/tokens/src/components/CloseButton.json
index 3fc45dc258..a9fbe76040 100644
--- a/tokens/src/components/CloseButton.json
+++ b/tokens/src/components/CloseButton.json
@@ -1,18 +1,22 @@
{
"color": {
- "close-button": { "value": "{color.black}", "source": "$close-color" }
+ "close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" }
},
"typography": {
"close-button": {
"font": {
- "size": { "value": "calc({typography.font.size.base} * 1.5)", "source": "$close-font-size" },
- "weight": { "value": "{typography.font.weight.bold}", "source": "$close-font-weight" }
+ "size": {
+ "value": "calc({typography.font.size.base} * 1.5)", "type": "dimension", "source": "$close-font-size"
+ },
+ "weight": {
+ "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$close-font-weight"
+ }
}
}
},
"elevation": {
"close-button": {
- "text-shadow": { "value": "0 1px 0 {color.white}", "source": "$close-text-shadow" }
+ "text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow", "source": "$close-text-shadow" }
}
}
}
diff --git a/tokens/src/components/Code.json b/tokens/src/components/Code.json
index 927f81be98..df8b3fa31f 100644
--- a/tokens/src/components/Code.json
+++ b/tokens/src/components/Code.json
@@ -1,21 +1,23 @@
{
"color": {
"code": {
- "base": { "value": "#E83E8C", "source": "$code-color" },
+ "base": { "value": "#E83E8C", "type": "color", "source": "$code-color" },
"kbd": {
- "base": { "value": "{color.white}", "source": "$kbd-color" },
- "bg": { "value": "{color.gray.700}", "source": "$kbd-bg" }
+ "base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" },
+ "bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" }
},
- "pre": { "value": "{color.gray.900}", "source": "$pre-color" }
+ "pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" }
}
},
"typography": {
"code": {
- "font-size": { "value": "87.5%", "source": "$code-font-size" },
+ "font-size": { "value": "87.5%", "type": "percentage", "source": "$code-font-size" },
"kbd": {
- "font-size": { "value": "{typography.code.font-size}", "source": "$kbd-font-size" },
+ "font-size": { "value": "{typography.code.font-size}", "type": "dimension", "source": "$kbd-font-size" },
"nested": {
- "font-weight": { "value": "{typography.font.weight.bold}", "source": "$nested-kbd-font-weight" }
+ "font-weight": {
+ "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$nested-kbd-font-weight"
+ }
}
}
}
@@ -24,8 +26,8 @@
"code": {
"kbd": {
"padding": {
- "y": { "value": ".2rem", "source": "$kbd-padding-y" },
- "x": { "value": ".4rem", "source": "$kbd-padding-x" }
+ "y": { "value": ".2rem", "type": "dimension", "source": "$kbd-padding-y" },
+ "x": { "value": ".4rem", "type": "dimension", "source": "$kbd-padding-x" }
}
}
}
@@ -34,7 +36,7 @@
"code": {
"pre": {
"scrollable": {
- "max-height": { "value": "340px", "source": "$pre-scrollable-max-height" }
+ "max-height": { "value": "340px", "type": "dimension", "source": "$pre-scrollable-max-height" }
}
}
}
@@ -44,6 +46,7 @@
"kbd": {
"box-shadow": {
"value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)",
+ "type": "shadow",
"source": "$kbd-box-shadow"
}
}
diff --git a/tokens/src/components/Collapsible.json b/tokens/src/components/Collapsible.json
index 896ac718a5..924347154c 100644
--- a/tokens/src/components/Collapsible.json
+++ b/tokens/src/components/Collapsible.json
@@ -4,19 +4,23 @@
"card": {
"spacer": {
"y": {
- "base": { "value": ".5rem", "source": "$collapsible-card-spacer-y" },
- "lg": { "value": "{spacing.card.spacer.y}", "source": "$collapsible-card-spacer-y-lg" }
+ "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-y" },
+ "lg": {
+ "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$collapsible-card-spacer-y-lg"
+ }
},
"x": {
- "base": { "value": ".5rem", "source": "$collapsible-card-spacer-x" },
- "lg": { "value": "{spacing.card.spacer.x}", "source": "$collapsible-card-spacer-x-lg" }
+ "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-x" },
+ "lg": {
+ "value": "{spacing.card.spacer.x}", "type": "dimension", "source": "$collapsible-card-spacer-x-lg"
+ }
},
- "left-body": { "value": ".75rem", "source": "$collapsible-card-body-spacer-left" },
- "icon": { "value": "2.5rem", "source": "$collapsible-card-spacer-icon" },
+ "left-body": { "value": ".75rem", "type": "dimension", "source": "$collapsible-card-body-spacer-left" },
+ "icon": { "value": "2.5rem", "type": "dimension", "source": "$collapsible-card-spacer-icon" },
"basic": {
- "y": { "value": ".5rem", "source": "$collapsible-basic-spacer-y" },
- "x": { "value": ".5rem", "source": "$collapsible-basic-spacer-x" },
- "icon": { "value": ".625rem", "source": "$collapsible-basic-spacer-icon" }
+ "y": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-y" },
+ "x": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-x" },
+ "icon": { "value": ".625rem", "type": "dimension", "source": "$collapsible-basic-spacer-icon" }
}
}
}
diff --git a/tokens/src/components/Container.json b/tokens/src/components/Container.json
index 312fa72830..4f9b676d6a 100644
--- a/tokens/src/components/Container.json
+++ b/tokens/src/components/Container.json
@@ -2,11 +2,11 @@
"size": {
"container": {
"max-width": {
- "xs": { "value": "464px", "source": "$max-width-xs" },
- "sm": { "value": "708px", "source": "$max-width-sm" },
- "md": { "value": "952px", "source": "$max-width-md" },
- "lg": { "value": "1192px", "source": "$max-width-lg" },
- "xl": { "value": "1440px", "source": "$max-width-xl" }
+ "xs": { "value": "464px", "type": "dimension", "source": "$max-width-xs" },
+ "sm": { "value": "708px", "type": "dimension", "source": "$max-width-sm" },
+ "md": { "value": "952px", "type": "dimension", "source": "$max-width-md" },
+ "lg": { "value": "1192px", "type": "dimension", "source": "$max-width-lg" },
+ "xl": { "value": "1440px", "type": "dimension", "source": "$max-width-xl" }
}
}
}
diff --git a/tokens/src/components/DataTable.json b/tokens/src/components/DataTable.json
index 4800656cb3..152f4a5fa9 100644
--- a/tokens/src/components/DataTable.json
+++ b/tokens/src/components/DataTable.json
@@ -2,33 +2,29 @@
"color": {
"data-table": {
"bg": {
- "base": { "value": "{color.bg.base}", "source": "$data-table-background-color" },
+ "base": { "value": "{color.bg.base}", "type": "color", "source": "$data-table-background-color" },
"is-loading": {
"value": "{color.white}",
+ "type": "color",
"source": "$data-table-is-loading-bg",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.7
- }
- ]
+ "modify": [{ "type": "alpha", "amount": 0.7 }]
}
},
- "border": { "value": "{color.gray.200}", "source": "$data-table-border-color" }
+ "border": { "value": "{color.gray.200}", "type": "color", "source": "$data-table-border-color" }
}
},
"elevation": {
"data-table": {
- "box-shadow": { "value": "{elevation.box-shadow.sm}", "source": "$data-table-box-shadow" }
+ "box-shadow": { "value": "{elevation.box-shadow.sm}", "source": "$data-table-box-shadow", "type": "shadow" }
}
},
"size": {
"data-table": {
- "border": { "value": "1px", "source": "$data-table-border" },
+ "border": { "value": "1px", "type": "dimension", "source": "$data-table-border" },
"dropdown": {
"pagination": {
- "max-height": { "value": "60vh", "source": "$data-table-pagination-dropdown-max-height" },
- "min-width": { "value": "6rem", "source": "$data-table-pagination-dropdown-min-width" }
+ "max-height": { "value": "60vh", "type": "dimension", "source": "$data-table-pagination-dropdown-max-height" },
+ "min-width": { "value": "6rem", "type": "dimension", "source": "$data-table-pagination-dropdown-min-width" }
}
}
}
@@ -36,13 +32,13 @@
"spacing": {
"data-table": {
"padding": {
- "x": { "value": ".75rem", "source": "$data-table-padding-x" },
- "y": { "value": ".75rem", "source": "$data-table-padding-y" },
- "small": { "value": ".5rem", "source": "$data-table-padding-small" },
- "cell": { "value": ".75rem", "source": "$data-table-cell-padding" },
- "head-cell": { "value": ".5rem .75rem", "source": "$data-table-head-cell-padding" }
+ "x": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-x" },
+ "y": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-y" },
+ "small": { "value": ".5rem", "type": "dimension", "source": "$data-table-padding-small" },
+ "cell": { "value": ".75rem", "type": "dimension", "source": "$data-table-cell-padding" },
+ "head-cell": { "value": ".5rem .75rem", "type": "dimension", "source": "$data-table-head-cell-padding" }
},
- "footer-position": { "value": "center", "source": "$data-table-footer-position" }
+ "footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-position" }
}
}
}
diff --git a/tokens/src/components/Dropdown.json b/tokens/src/components/Dropdown.json
index 1ba938e674..6eefa5a6de 100644
--- a/tokens/src/components/Dropdown.json
+++ b/tokens/src/components/Dropdown.json
@@ -1,46 +1,49 @@
{
"color": {
"dropdown": {
- "text": { "value": "{color.body.base}", "source": "$dropdown-color" },
- "header": { "value": "{color.gray.500}", "source": "$dropdown-header-color" },
- "bg": { "value": "{color.bg.base}", "source": "$dropdown-bg" },
+ "text": { "value": "{color.body.base}", "type": "color", "source": "$dropdown-color" },
+ "header": { "value": "{color.gray.500}", "type": "color", "source": "$dropdown-header-color" },
+ "bg": { "value": "{color.bg.base}", "type": "color", "source": "$dropdown-bg" },
"border": {
- "value": "{color.black}",
+ "value": "{color.black}",
+ "type": "color",
"source": "$dropdown-border-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.15
- }]
+ "modify": [{ "type": "alpha", "amount": 0.15 }]
},
- "divider-bg": { "value": "{color.gray.100}", "source": "$dropdown-divider-bg" },
+ "divider-bg": { "value": "{color.gray.100}", "type": "color", "source": "$dropdown-divider-bg" },
"link": {
- "base": { "value": "{color.gray.900}", "source": "$dropdown-link-color" },
+ "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" },
"hover": {
- "base": { "value": "{color.gray.900}", "source": "$dropdown-link-hover-color" },
- "bg": { "value": "{color.light.300}", "source": "$dropdown-link-hover-bg" }
+ "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-hover-color" },
+ "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" }
},
"active": {
- "base": { "value": "{color.active}", "source": "$dropdown-link-active-color" },
- "bg": { "value": "{color.bg.active}", "source": "$dropdown-link-active-bg" }
+ "base": { "value": "{color.active}", "type": "color", "source": "$dropdown-link-active-color" },
+ "bg": { "value": "{color.bg.active}", "type": "color", "source": "$dropdown-link-active-bg" }
},
- "disabled": { "value": "{color.disabled}", "source": "$dropdown-link-disabled-color" }
+ "disabled": { "value": "{color.disabled}", "type": "color", "source": "$dropdown-link-disabled-color" }
}
}
},
"typography": {
"dropdown": {
- "font-size": { "value": "{typography.font.size.base}", "source": "$dropdown-font-size" }
+ "font-size": {
+ "value": "{typography.font.size.base}", "type": "dimension", "source": "$dropdown-font-size"
+ }
}
},
"size": {
"dropdown": {
- "min-width": { "value": "18rem", "source": "$dropdown-min-width" },
+ "min-width": { "value": "18rem", "type": "dimension", "source": "$dropdown-min-width" },
"border": {
- "width": { "value": "{size.border.width}", "source": "$dropdown-border-width" },
+ "width": { "value": "{size.border.width}", "type": "dimension", "source": "$dropdown-border-width" },
"radius": {
- "base": { "value": "{size.border.radius.base}", "source": "$dropdown-border-radius" },
+ "base": {
+ "value": "{size.border.radius.base}", "type": "dimension", "source": "$dropdown-border-radius"
+ },
"inner": {
"value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})",
+ "type": "dimension",
"source": "$dropdown-inner-border-radius"
}
}
@@ -49,33 +52,38 @@
},
"spacing": {
"dropdown": {
- "spacer": { "value": ".125rem", "source": "$dropdown-spacer" },
+ "spacer": { "value": ".125rem", "type": "dimension", "source": "$dropdown-spacer" },
"padding": {
"x": {
- "base": { "value": "0", "source": "$dropdown-padding-x" },
- "item": { "value": "1rem", "source": "$dropdown-item-padding-x" }
+ "base": { "value": "0", "type": "dimension", "source": "$dropdown-padding-x" },
+ "item": { "value": "1rem", "type": "dimension", "source": "$dropdown-item-padding-x" }
},
"y": {
- "base": { "value": ".25rem", "source": "$dropdown-padding-y" },
- "item": { "value": ".5rem", "source": "$dropdown-item-padding-y" }
+ "base": { "value": ".25rem", "type": "dimension", "source": "$dropdown-padding-y" },
+ "item": { "value": ".5rem", "type": "dimension", "source": "$dropdown-item-padding-y" }
},
"header": {
"value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}",
+ "type": "dimension",
"source": "$dropdown-header-padding"
}
},
"divider": {
- "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "source": "$dropdown-divider-margin-y" }
+ "margin-y": {
+ "value": "calc({spacing.spacer.base} / 2)",
+ "type": "dimension",
+ "source": "$dropdown-divider-margin-y"
+ }
},
"close-container": {
- "top": { "value": ".625rem", "source": "$modal-close-container-top" }
+ "top": { "value": ".625rem", "type": "dimension", "source": "$modal-close-container-top" }
}
}
},
"elevation": {
"dropdown": {
- "box-shadow": { "value": "0 .5rem 1rem rgba(0, 0, 0, .175)", "source": "$dropdown-box-shadow" },
- "zindex": { "value": "1000", "source": "$zindex-dropdown" }
+ "box-shadow": { "value": "0 .5rem 1rem rgba(0, 0, 0, .175)", "type": "shadow", "source": "$dropdown-box-shadow" },
+ "zindex": { "value": "1000", "type": "ratio", "source": "$zindex-dropdown" }
}
}
}
diff --git a/tokens/src/components/Dropzone.json b/tokens/src/components/Dropzone.json
index a2b45e2336..a86d0d53ec 100644
--- a/tokens/src/components/Dropzone.json
+++ b/tokens/src/components/Dropzone.json
@@ -1,33 +1,41 @@
{
"color": {
"dropzone": {
- "error-wrapper": { "value": "{color.danger.500}", "source": "$dropzone-error-wrapper-color" },
- "restriction-msg": { "value": "{color.gray.500}", "source": "$dropzone-restriction-msg-color" },
+ "error-wrapper": {
+ "value": "{color.danger.500}", "type": "color", "source": "$dropzone-error-wrapper-color"
+ },
+ "restriction-msg": {
+ "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color"
+ },
"border": {
- "base": { "value": "{color.gray.500}", "source": "$dropzone-border-color-default" },
- "hover": { "value": "{color.info.300}", "source": "$dropzone-border-color-hover" },
- "focus": { "value": "{color.info.300}", "source": "$dropzone-border-color-focus" },
- "active": { "value": "{color.primary.500}", "source": "$dropzone-border-color-active" },
- "error": { "value": "{color.danger.300}", "source": "$dropzone-border-color-error" }
+ "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" },
+ "hover": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-hover" },
+ "focus": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-focus" },
+ "active": { "value": "{color.primary.500}", "type": "color", "source": "$dropzone-border-color-active" },
+ "error": { "value": "{color.danger.300}", "type": "color", "source": "$dropzone-border-color-error" }
}
}
},
"typography": {
"dropzone": {
"restriction-msg": {
- "font-size": { "value": "{typography.font.size.small.x}", "source": "$dropzone-restriction-msg-font-size" }
+ "font-size": {
+ "value": "{typography.font.size.small.x}",
+ "type": "dimension",
+ "source": "$dropzone-restriction-msg-font-size"
+ }
}
}
},
"spacing": {
"dropzone": {
- "padding": { "value": "1.5rem", "source": "$dropzone-padding" },
+ "padding": { "value": "1.5rem", "type": "dimension", "source": "$dropzone-padding" },
"border": {
- "base": { "value": "1px", "source": "$dropzone-border-default" },
- "hover": { "value": "2px", "source": "$dropzone-border-hover" },
- "focus": { "value": "2px", "source": "$dropzone-border-focus" },
- "active": { "value": "2px", "source": "$dropzone-border-active" },
- "error": { "value": "2px", "source": "$dropzone-border-error" }
+ "base": { "value": "1px", "type": "dimension", "source": "$dropzone-border-default" },
+ "hover": { "value": "2px", "type": "dimension", "source": "$dropzone-border-hover" },
+ "focus": { "value": "2px", "type": "dimension", "source": "$dropzone-border-focus" },
+ "active": { "value": "2px", "type": "dimension", "source": "$dropzone-border-active" },
+ "error": { "value": "2px", "type": "dimension", "source": "$dropzone-border-error" }
}
}
}
diff --git a/tokens/src/components/Form/color.json b/tokens/src/components/Form/color.json
index c87192d277..00f26307d4 100644
--- a/tokens/src/components/Form/color.json
+++ b/tokens/src/components/Form/color.json
@@ -2,81 +2,117 @@
"color": {
"form": {
"input": {
- "base": { "value": "{color.gray.700}", "source": "$input-color" },
- "placeholder": { "value": "{color.gray.500}", "source": "$input-placeholder-color" },
- "plaintext": { "value": "{color.body.base}", "source": "$input-plaintext-color" },
- "border": { "value": "{color.gray.500}", "source": "$input-border-color" },
+ "base": { "value": "{color.gray.700}", "type": "color", "source": "$input-color" },
+ "placeholder": { "value": "{color.gray.500}", "type": "color", "source": "$input-placeholder-color" },
+ "plaintext": { "value": "{color.body.base}", "type": "color", "source": "$input-plaintext-color" },
+ "border": { "value": "{color.gray.500}", "type": "color", "source": "$input-border-color" },
"bg": {
- "base": { "value": "{color.bg.base}", "source": "$input-bg" },
- "disabled": { "value": "{color.gray.100}", "source": "$input-disabled-bg" }
+ "base": { "value": "{color.bg.base}", "type": "color", "source": "$input-bg" },
+ "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$input-disabled-bg" }
},
"group": {
"addon": {
- "base": { "value": "{color.form.input.base}", "source": "$input-group-addon-color" },
- "border": { "value": "{color.form.input.border}", "source": "$input-group-addon-border-color" },
- "bg": { "value": "{color.gray.100}", "source": "$input-group-addon-bg" }
+ "base": { "value": "{color.form.input.base}", "type": "color", "source": "$input-group-addon-color" },
+ "border": {
+ "value": "{color.form.input.border}", "type": "color", "source": "$input-group-addon-border-color"
+ },
+ "bg": { "value": "{color.gray.100}", "type": "color", "source": "$input-group-addon-bg" }
}
},
"focus": {
- "base": { "value": "{color.form.input.base}", "source": "$input-focus-color" },
- "border": { "value": "{color.input.focus}", "source": "$input-focus-border-color" },
- "bg": { "value": "{color.form.input.bg.base}", "source": "$input-focus-bg" }
+ "base": { "value": "{color.form.input.base}", "type": "color", "source": "$input-focus-color" },
+ "border": { "value": "{color.input.focus}", "type": "color", "source": "$input-focus-border-color" },
+ "bg": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$input-focus-bg" }
}
},
"control": {
"indicator": {
- "border": { "value": "{color.gray.700}", "source": "$custom-control-indicator-border-color" },
+ "border": {
+ "value": "{color.gray.700}", "type": "color", "source": "$custom-control-indicator-border-color"
+ },
"bg": {
- "base": { "value": "{color.form.input.bg.base}", "source": "$custom-control-indicator-bg" },
- "disabled": { "value": "{color.form.input.bg.disabled}", "source": "$custom-control-indicator-disabled-bg" }
+ "base": {
+ "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-control-indicator-bg"
+ },
+ "disabled": {
+ "value": "{color.form.input.bg.disabled}",
+ "type": "color",
+ "source": "$custom-control-indicator-disabled-bg"
+ }
},
"checked": {
- "base": { "value": "{color.bg.active}", "source": "$custom-control-indicator-checked-color" },
+ "base": {
+ "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-color"
+ },
"bg": {
- "base": { "value": "{color.bg.active}", "source": "$custom-control-indicator-checked-bg" },
+ "base": {
+ "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-bg"
+ },
"disabled": {
"value": "{color.primary.500}",
+ "type": "color",
"source": "$custom-control-indicator-checked-disabled-bg",
- "modify": [{
- "type": "alpha",
- "amount": 0.5
- }]
+ "modify": [{ "type": "alpha", "amount": 0.5 }]
}
},
"border": {
- "base": { "value": "{color.primary.500}", "source": "$custom-control-indicator-checked-border-color" },
- "focus": { "value": "{color.form.input.focus.border}", "source": "$custom-control-indicator-focus-border-color" }
+ "base": {
+ "value": "{color.primary.500}",
+ "type": "color",
+ "source": "$custom-control-indicator-checked-border-color"
+ },
+ "focus": {
+ "value": "{color.form.input.focus.border}",
+ "type": "color",
+ "source": "$custom-control-indicator-focus-border-color"
+ }
}
},
"active": {
- "base": { "value": "{color.active}", "source": "$custom-control-indicator-active-color" },
- "bg": { "value": "{color.bg.active}", "source": "$custom-control-indicator-active-bg" },
+ "base": {
+ "value": "{color.active}", "type": "color", "source": "$custom-control-indicator-active-color"
+ },
+ "bg": {
+ "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-active-bg"
+ },
"border": {
- "value": "{color.form.control.indicator.active.bg}", "source": "$custom-control-indicator-active-border-color"
+ "value": "{color.form.control.indicator.active.bg}",
+ "type": "color",
+ "source": "$custom-control-indicator-active-border-color"
}
}
},
"label": {
- "base": { "value": "inherit", "source": "$custom-control-label-color" },
- "disabled": { "value": "{color.disabled}", "source": "$custom-control-label-disabled-color" },
+ "base": { "value": "inherit", "type": "color", "source": "$custom-control-label-color" },
+ "disabled": {
+ "value": "{color.disabled}", "type": "color", "source": "$custom-control-label-disabled-color"
+ },
"floating": {
"text": {
"value": "{color.form.input.bg.base}",
+ "type": "color",
"source": "$form-control-floating-label-text-bg",
- "modify": [{
- "type": "alpha",
- "amount": 0.1
- }]
+ "modify": [{ "type": "alpha", "amount": 0.1 }]
}
}
},
"checkbox": {
"indicator": {
"indeterminate": {
- "base": { "value": "{color.form.control.indicator.checked.base}", "source": "$custom-checkbox-indicator-indeterminate-color"},
- "bg": { "value": "{color.bg.active}", "source": "$custom-checkbox-indicator-indeterminate-bg" },
+ "base": {
+ "value": "{color.form.control.indicator.checked.base}",
+ "type": "color",
+ "source": "$custom-checkbox-indicator-indeterminate-color"
+ },
+ "bg": {
+ "value": "{color.bg.active}",
+ "type": "color",
+ "source": "$custom-checkbox-indicator-indeterminate-bg"
+ },
"border": {
- "value": "{color.form.control.checkbox.indicator.indeterminate.bg}", "source": "$custom-checkbox-indicator-indeterminate-border-color"
+ "value": "{color.form.control.checkbox.indicator.indeterminate.bg}",
+ "type": "color",
+ "source": "$custom-checkbox-indicator-indeterminate-border-color"
}
}
}
@@ -84,109 +120,132 @@
"switch": {
"indicator": {
"checked": {
- "bg": { "value": "{color.success.base}", "source": "$custom-switch-indicator-checked-bg" }
+ "bg": {
+ "value": "{color.success.base}",
+ "type": "color",
+ "source": "$custom-switch-indicator-checked-bg"
+ }
}
}
},
"select": {
- "base": { "value": "{color.form.input.base}", "source": "$custom-select-color" },
- "disabled": { "value": "{color.disabled}", "source": "$custom-select-disabled-color" },
+ "base": { "value": "{color.form.input.base}", "type": "color", "source": "$custom-select-color" },
+ "disabled": { "value": "{color.disabled}", "type": "color", "source": "$custom-select-disabled-color" },
"indicator": {
- "base": { "value": "{color.theme.hover.gray}", "source": "$custom-select-indicator-color" }
+ "base": { "value": "{color.theme.hover.gray}", "type": "color", "source": "$custom-select-indicator-color" }
},
"bg": {
- "base": { "value": "{color.form.input.bg.base}", "source": "$custom-select-bg" },
- "disabled": { "value": "{color.gray.100}", "source": "$custom-select-disabled-bg" },
- "size": { "value": "24px 24px", "source": "$custom-select-bg-size" }
+ "base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-select-bg" },
+ "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$custom-select-disabled-bg" },
+ "size": { "value": "24px 24px", "type": "dimension", "source": "$custom-select-bg-size" }
},
"border": {
- "base": { "value": "{color.form.input.border}", "source": "$custom-select-border-color" },
- "focus": { "value": "{color.form.input.focus.border}", "source": "$custom-select-focus-border-color" }
+ "base": {
+ "value": "{color.form.input.border}", "type": "color", "source": "$custom-select-border-color"
+ },
+ "focus": {
+ "value": "{color.form.input.focus.border}",
+ "type": "color",
+ "source": "$custom-select-focus-border-color"
+ }
}
},
"range": {
"track": {
- "bg": { "value": "{color.gray.300}", "source": "$custom-range-track-bg" }
+ "bg": { "value": "{color.gray.300}", "type": "color", "source": "$custom-range-track-bg" }
},
"thumb": {
"bg": {
- "base": { "value": "{color.bg.active}", "source": "$custom-range-thumb-bg" },
- "disabled": { "value": "{color.disabled}", "source": "$custom-range-thumb-disabled-bg" },
+ "base": { "value": "{color.bg.active}", "type": "color", "source": "$custom-range-thumb-bg" },
+ "disabled": {
+ "value": "{color.disabled}", "type": "color", "source": "$custom-range-thumb-disabled-bg"
+ },
"active": {
"value": "{color.bg.active}",
+ "type": "color",
"source": "$custom-range-thumb-active-bg",
- "modify": [{
- "type": "lighten",
- "amount": "0.35"
- }]
+ "modify": [{ "type": "lighten", "amount": "0.35" }]
}
}
}
},
"file": {
- "base": { "value": "{color.form.input.base}", "source": "$custom-file-color" },
+ "base": { "value": "{color.form.input.base}", "type": "color", "source": "$custom-file-color" },
"bg": {
- "base": { "value": "{color.form.input.bg.base}", "source": "$custom-file-bg" },
- "disabled": { "value": "{color.form.input.bg.disabled}", "source": "$custom-file-disabled-bg" }
+ "base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-file-bg" },
+ "disabled": {
+ "value": "{color.form.input.bg.disabled}", "type": "color", "source": "$custom-file-disabled-bg"
+ }
},
"button": {
- "base": { "value": "{color.form.control.file.base}", "source": "$custom-file-button-color" },
- "bg": { "value": "{color.form.input.group.addon.bg}", "source": "$custom-file-button-bg" }
+ "base": {
+ "value": "{color.form.control.file.base}", "type": "color", "source": "$custom-file-button-color"
+ },
+ "bg": {
+ "value": "{color.form.input.group.addon.bg}", "type": "color", "source": "$custom-file-button-bg"
+ }
},
"border": {
- "base": { "value": "{color.form.input.border}", "source": "$custom-file-border-color" },
- "focus": { "value": "{color.form.input.focus.border}", "source": "$custom-file-focus-border-color" }
+ "base": {
+ "value": "{color.form.input.border}", "type": "color", "source": "$custom-file-border-color"
+ },
+ "focus": {
+ "value": "{color.form.input.focus.border}",
+ "type": "color",
+ "source": "$custom-file-focus-border-color"
+ }
}
}
},
"feedback": {
- "valid": { "value": "{color.success.base}", "source": "$form-feedback-valid-color" },
- "invalid": { "value": "{color.danger.base}", "source": "$form-feedback-invalid-color" },
+ "valid": { "value": "{color.success.base}", "type": "color", "source": "$form-feedback-valid-color" },
+ "invalid": { "value": "{color.danger.base}", "type": "color", "source": "$form-feedback-invalid-color" },
"icon": {
- "valid": { "value": "{color.form.feedback.valid}", "source": "$form-feedback-icon-valid-color" },
- "invalid": { "value": "{color.form.feedback.invalid}", "source": "$form-feedback-icon-invalid-color" }
+ "valid": {
+ "value": "{color.form.feedback.valid}",
+ "type": "color",
+ "source": "$form-feedback-icon-valid-color"
+ },
+ "invalid": {
+ "value": "{color.form.feedback.invalid}",
+ "type": "color",
+ "source": "$form-feedback-icon-invalid-color"
+ }
},
"tooltip": {
"valid": {
"value": "{color.form.feedback.valid}",
+ "type": "color",
"source": "$form-feedback-tooltip-valid-color",
"modify": [{"type": "color-yiq"}]
},
"bg": {
"valid": {
"value": "{color.form.feedback.valid}",
+ "type": "color",
"source": "$form-feedback-tooltip-valid-bg",
- "modify": [{
- "type": "alpha",
- "amount": 0.9
- }]
+ "modify": [{ "type": "alpha", "amount": 0.9 }]
},
"invalid": {
"value": "{color.form.feedback.invalid}",
+ "type": "color",
"source": "$form-feedback-tooltip-invalid-bg",
- "modify": [{
- "type": "alpha",
- "amount": 0.9
- }]
+ "modify": [{ "type": "alpha", "amount": 0.9 }]
}
},
"box-shadow": {
"focus": {
"valid": {
"value": "{color.form.feedback.valid}",
+ "type": "color",
"source": "$form-feedback-focus-box-shadow-valid-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.25
- }]
+ "modify": [{ "type": "alpha", "amount": 0.25 }]
},
"invalid": {
"value": "{color.form.feedback.invalid}",
+ "type": "color",
"source": "$form-feedback-focus-box-shadow-invalid-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.25
- }]
+ "modify": [{ "type": "alpha", "amount": 0.25 }]
}
}
}
@@ -194,19 +253,15 @@
"checked": {
"valid": {
"value": "{color.form.feedback.valid}",
+ "type": "color",
"source": "$form-feedback-checked-valid-color",
- "modify": [{
- "type": "lighten",
- "amount": 0.1
- }]
+ "modify": [{ "type": "lighten", "amount": 0.1 }]
},
"invalid": {
"value": "{color.form.feedback.invalid}",
+ "type": "color",
"source": "$form-feedback-checked-invalid-color",
- "modify": [{
- "type": "lighten",
- "amount": 0.1
- }]
+ "modify": [{ "type": "lighten", "amount": 0.1 }]
}
}
}
diff --git a/tokens/src/components/Form/elevation.json b/tokens/src/components/Form/elevation.json
index 12bfbd971e..cacf533819 100644
--- a/tokens/src/components/Form/elevation.json
+++ b/tokens/src/components/Form/elevation.json
@@ -2,38 +2,72 @@
"elevation": {
"form": {
"input": {
- "base": { "value": "inset 0 1px 1px rgba(0, 0, 0, .075)", "source": "$input-box-shadow" },
- "focus": { "value": "{elevation.input.btn-focus.box-shadow}", "source": "$input-focus-box-shadow" }
+ "base": { "value": "inset 0 1px 1px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$input-box-shadow" },
+ "focus": {
+ "value": "{elevation.input.btn-focus.box-shadow}",
+ "type": "shadow",
+ "source": "$input-focus-box-shadow"
+ }
},
"control": {
"indicator": {
- "base": { "value": "{elevation.form.input.base}", "source": "$custom-control-indicator-box-shadow" },
+ "base": {
+ "value": "{elevation.form.input.base}",
+ "type": "shadow",
+ "source": "$custom-control-indicator-box-shadow"
+ },
"checked": {
- "base": { "value": "none", "source": "$custom-control-indicator-checked-box-shadow" },
- "focus": { "value": "0 0 0 4px rgba(0, 0, 0, .1)", "source": "$custom-control-indicator-focus-box-shadow" }
+ "base": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-checked-box-shadow" },
+ "focus": {
+ "value": "0 0 0 4px rgba(0, 0, 0, .1)",
+ "type": "shadow",
+ "source": "$custom-control-indicator-focus-box-shadow"
+ }
},
- "active": { "value": "none", "source": "$custom-control-indicator-active-box-shadow" }
+ "active": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-active-box-shadow" }
},
"checkbox": {
"indicator": {
- "indeterminate": { "value": "none", "source": "$custom-checkbox-indicator-indeterminate-box-shadow" }
+ "indeterminate": {
+ "value": "none", "type": "shadow", "source": "$custom-checkbox-indicator-indeterminate-box-shadow"
+ }
}
},
"range": {
- "track": { "value": "inset 0 .25rem .25rem rgba(0, 0, 0, .1)", "source": "$custom-range-track-box-shadow" },
+ "track": {
+ "value": "inset 0 .25rem .25rem rgba(0, 0, 0, .1)",
+ "type": "shadow",
+ "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 {color.body.bg}, {size.form.input.width.focus}", "source": "$custom-range-thumb-focus-box-shadow" }
+ "base": {
+ "value": "0 .1rem .25rem rgba(0, 0, 0, .1)", "type": "shadow", "source": "$custom-range-thumb-box-shadow"
+ },
+ "focus": {
+ "value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}",
+ "type": "shadow",
+ "source": "$custom-range-thumb-focus-box-shadow"
+ }
}
},
"file": {
- "base": { "value": "{elevation.form.input.base}", "source": "$custom-file-box-shadow" },
- "focus": { "value": "{elevation.form.input.focus}", "source": "$custom-file-focus-box-shadow" }
+ "base": {
+ "value": "{elevation.form.input.base}", "type": "shadow", "source": "$custom-file-box-shadow"
+ },
+ "focus": {
+ "value": "{elevation.form.input.focus}", "type": "shadow", "source": "$custom-file-focus-box-shadow"
+ }
},
"select": {
"border": {
- "base": { "value": "inset 0 1px 2px rgba(0, 0, 0, .075)", "source": "$custom-select-box-shadow" },
- "focus": { "value": "{elevation.input.btn-focus.box-shadow}", "source": "$custom-select-focus-box-shadow" }
+ "base": {
+ "value": "inset 0 1px 2px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$custom-select-box-shadow"
+ },
+ "focus": {
+ "value": "{elevation.input.btn-focus.box-shadow}",
+ "type": "shadow",
+ "source": "$custom-select-focus-box-shadow"
+ }
}
}
}
diff --git a/tokens/src/components/Form/other.json b/tokens/src/components/Form/other.json
index 5a21e92302..df43362782 100644
--- a/tokens/src/components/Form/other.json
+++ b/tokens/src/components/Form/other.json
@@ -2,11 +2,11 @@
"other": {
"form": {
"control": {
- "cursor": { "value": "auto", "source": "$custom-control-cursor" },
- "range-track-cursor": { "value": "pointer", "source": "$custom-range-track-cursor" }
+ "cursor": { "value": "auto", "type": "cursorStyle", "source": "$custom-control-cursor" },
+ "range-track-cursor": { "value": "pointer", "type": "cursorStyle", "source": "$custom-range-track-cursor" }
},
"feedback": {
- "tooltip-opacity": { "value": ".9", "source": "$form-feedback-tooltip-opacity" }
+ "tooltip-opacity": { "value": ".9", "type": "ratio", "source": "$form-feedback-tooltip-opacity" }
}
},
"content": {
@@ -16,28 +16,18 @@
"indicator": {
"icon-checked": {
"value": "url(\"data:image/svg+xml,\")",
+ "type": "file",
"source": "$custom-checkbox-indicator-icon-checked",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
},
"indeterminate": {
"icon": {
"value": "url(\"data:image/svg+xml,\")",
+ "type": "file",
"source": "$custom-checkbox-indicator-icon-indeterminate",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
}
}
}
@@ -46,15 +36,10 @@
"indicator": {
"icon-checked": {
"value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")",
+ "type": "file",
"source": "$custom-radio-indicator-icon-checked",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
}
}
},
@@ -62,27 +47,17 @@
"indicator": {
"icon-off": {
"value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")",
+ "type": "file",
"source": "$custom-switch-indicator-icon-off",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
},
"icon-on": {
"value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")",
+ "type": "file",
"source": "$custom-switch-indicator-icon-on",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
}
}
},
@@ -90,19 +65,15 @@
"indicator": {
"icon": {
"value": "url('data:image/svg+xml,')",
+ "type": "file",
"source": "$custom-select-indicator",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
}
},
"bg": {
"value": "{other.content.form.control.select.indicator.icon} no-repeat right {spacing.form.input.padding.y.base} center / {color.form.control.select.bg.base}",
+ "type": "background",
"source": "$custom-select-background"
}
}
@@ -111,27 +82,18 @@
"icon": {
"valid": {
"value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")",
+ "type": "file",
"source": "$form-feedback-icon-valid",
"outputReferences": false,
"modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ]
+ { "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
},
"invalid": {
"value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")",
+ "type": "file",
"source": "$form-feedback-icon-invalid",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ]
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
}
}
}
diff --git a/tokens/src/components/Form/size.json b/tokens/src/components/Form/size.json
index 432c57438f..54942c288f 100644
--- a/tokens/src/components/Form/size.json
+++ b/tokens/src/components/Form/size.json
@@ -5,162 +5,226 @@
"height": {
"base": {
"value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})",
+ "type": "dimension",
"source": "$input-height"
},
"sm": {
"value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})",
+ "type": "dimension",
"source": "$input-height-sm"
},
"lg": {
"value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})",
+ "type": "dimension",
"source": "$input-height-lg"
},
"inner": {
"base": {
"value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
+ "type": "dimension",
"source": "$input-height-inner"
},
"half": {
"value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})",
+ "type": "dimension",
"source": "$input-height-inner-half"
},
"quarter": {
"value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))",
+ "type": "dimension",
"source": "$input-height-inner-quarter"
}
},
- "border": { "value": "calc({size.form.input.width.border} * 2)", "source": "$input-height-border" }
+ "border": {
+ "value": "calc({size.form.input.width.border} * 2)",
+ "type": "dimension",
+ "source": "$input-height-border"
+ }
},
"width": {
- "hover": { "value": "0.063rem", "source": "$input-hover-width" },
- "focus": { "value": "0.063rem", "source": "$input-focus-width" },
- "border": { "value": "{size.input.btn.border-width}", "source": "$input-border-width" }
+ "hover": { "value": "0.063rem", "type": "dimension", "source": "$input-hover-width" },
+ "focus": { "value": "0.063rem", "type": "dimension", "source": "$input-focus-width" },
+ "border": {
+ "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$input-border-width"
+ }
},
"radius": {
"border": {
- "base": { "value": "{size.border.radius.base}", "source": "$input-border-radius" },
- "lg": { "value": "{size.border.radius.lg}", "source": "$input-border-radius-lg" },
- "sm": { "value": "{size.border.radius.sm}", "source": "$input-border-radius-sm" }
+ "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$input-border-radius" },
+ "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$input-border-radius-lg" },
+ "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$input-border-radius-sm" }
}
}
},
"control": {
"indicator": {
- "base": { "value": "1.25rem", "source": "$custom-control-indicator-size" },
- "bg": { "value": "100%", "source": "$custom-control-indicator-bg-size" },
+ "base": { "value": "1.25rem", "type": "dimension", "source": "$custom-control-indicator-size" },
+ "bg": { "value": "100%", "type": "percentage", "source": "$custom-control-indicator-bg-size" },
"border": {
- "width": { "value": "0.125rem", "source": "$custom-control-indicator-border-width" }
+ "width": { "value": "0.125rem", "type": "dimension", "source": "$custom-control-indicator-border-width" }
}
},
"switch": {
- "width": { "value": "calc({size.form.control.indicator.base} * 1.75)", "source": "$custom-switch-width" },
+ "width": {
+ "value": "calc({size.form.control.indicator.base} * 1.75)",
+ "type": "dimension",
+ "source": "$custom-switch-width"
+ },
"indicator": {
"base": {
"value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)",
+ "type": "dimension",
"source": "$custom-switch-indicator-size"
},
"border": {
"radius": {
- "value": "calc({size.form.control.indicator.base} / 2)", "source": "$custom-switch-indicator-border-radius"
+ "value": "calc({size.form.control.indicator.base} / 2)",
+ "type": "dimension",
+ "source": "$custom-switch-indicator-border-radius"
}
}
}
},
"select": {
"height": {
- "base": { "value": "{size.form.input.height.base}", "source": "$custom-select-height" },
- "lg": { "value": "{size.form.input.height.lg}", "source": "$custom-select-height-lg" },
- "sm": { "value": "{size.form.input.height.sm}", "source": "$custom-select-height-sm" }
+ "base": {
+ "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-select-height"
+ },
+ "lg": {
+ "value": "{size.form.input.height.lg}", "type": "dimension", "source": "$custom-select-height-lg"
+ },
+ "sm": {
+ "value": "{size.form.input.height.sm}", "type": "dimension", "source": "$custom-select-height-sm"
+ }
},
"feedback": {
- "icon": { "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}", "source": "$custom-select-feedback-icon-size" }
+ "icon": {
+ "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}",
+ "type": "dimension",
+ "source": "$custom-select-feedback-icon-size" }
},
"border": {
"width": {
- "base": { "value": "{size.form.input.width.border}", "source": "$custom-select-border-width" },
- "focus": { "value": "{size.form.input.width.focus}", "source": "$custom-select-focus-width" }
+ "base": {
+ "value": "{size.form.input.width.border}",
+ "type": "dimension",
+ "source": "$custom-select-border-width"
+ },
+ "focus": {
+ "value": "{size.form.input.width.focus}",
+ "type": "dimension",
+ "source": "$custom-select-focus-width"
+ }
},
"radius": {
- "value": "{size.border.radius.base}", "source": "$custom-select-border-radius"
+ "value": "{size.border.radius.base}", "type": "dimension", "source": "$custom-select-border-radius"
}
}
},
"range": {
"track": {
- "width": { "value": "100%", "source": "$custom-range-track-width" },
- "height": { "value": ".5rem", "source": "$custom-range-track-height" },
+ "width": { "value": "100%", "type": "percentage", "source": "$custom-range-track-width" },
+ "height": { "value": ".5rem", "type": "dimension", "source": "$custom-range-track-height" },
"border": {
- "radius": { "value": "1rem", "source": "$custom-range-track-border-radius" }
+ "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-track-border-radius" }
}
},
"thumb": {
- "width": { "value": "1rem", "source": "$custom-range-thumb-width" },
- "height": { "value": "{size.form.control.range.thumb.width}", "source": "$custom-range-thumb-height" },
+ "width": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-width" },
+ "height": {
+ "value": "{size.form.control.range.thumb.width}",
+ "type": "dimension",
+ "source": "$custom-range-thumb-height"
+ },
"border": {
- "base": { "value": "0", "source": "$custom-range-thumb-border" },
- "radius": { "value": "1rem", "source": "$custom-range-thumb-border-radius" }
+ "base": { "value": "0", "type": "dimension", "source": "$custom-range-thumb-border" },
+ "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-border-radius" }
},
"focus": {
- "width": { "value": "{size.form.input.width.focus}", "source": "$custom-range-thumb-focus-box-shadow-width" }
+ "width": {
+ "value": "{size.form.input.width.focus}",
+ "type": "dimension",
+ "source": "$custom-range-thumb-focus-box-shadow-width"
+ }
}
}
},
"file": {
- "width": { "value": "{size.form.input.width.border}", "source": "$custom-file-border-width" },
+ "width": {
+ "value": "{size.form.input.width.border}", "type": "dimension", "source": "$custom-file-border-width"
+ },
"height": {
- "base": { "value": "{size.form.input.height.base}", "source": "$custom-file-height" },
- "inner": { "value": "{size.form.input.height.inner.base}", "source": "$custom-file-height-inner" }
+ "base": {
+ "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-file-height"
+ },
+ "inner": {
+ "value": "{size.form.input.height.inner.base}",
+ "type": "dimension",
+ "source": "$custom-file-height-inner"
+ }
},
"border": {
"radius": {
- "value": "{size.form.input.radius.border.base}", "source": "$custom-file-border-radius"
+ "value": "{size.form.input.radius.border.base}",
+ "type": "dimension",
+ "source": "$custom-file-border-radius"
}
}
},
"icon": {
- "width": { "value": "2rem", "source": "$form-control-icon-width" }
+ "width": { "value": "2rem", "type": "dimension", "source": "$form-control-icon-width" }
},
"border": {
"checkbox": {
"indicator": {
- "radius": { "value": "0", "source": "$custom-checkbox-indicator-border-radius" }
+ "radius": { "value": "0", "type": "dimension", "source": "$custom-checkbox-indicator-border-radius" }
}
},
"radio": {
"indicator": {
- "radius": { "value": "50%", "source": "$custom-radio-indicator-border-radius" }
+ "radius": { "value": "50%", "type": "percentage", "source": "$custom-radio-indicator-border-radius" }
}
}
}
},
"grid": {
- "gutter-width": { "value": "0.625rem", "source": "$form-grid-gutter-width" }
+ "gutter-width": { "value": "0.625rem", "type": "dimension", "source": "$form-grid-gutter-width" }
},
"autosuggest": {
"icon": {
- "width": { "value": "2.4rem", "source": "$form-autosuggest-icon-width" },
- "height": { "value": "{size.form.autosuggest.icon.width}", "source": "$form-autosuggest-icon-height" }
+ "width": { "value": "2.4rem", "type": "dimension", "source": "$form-autosuggest-icon-width" },
+ "height": {
+ "value": "{size.form.autosuggest.icon.width}", "type": "dimension", "source": "$form-autosuggest-icon-height"
+ }
},
"spinner": {
- "width": { "value": "1.25rem", "source": "$form-autosuggest-spinner-width" },
- "height": { "value": "{size.form.autosuggest.spinner.width}", "source": "$form-autosuggest-spinner-height" }
+ "width": { "value": "1.25rem", "type": "dimension", "source": "$form-autosuggest-spinner-width" },
+ "height": {
+ "value": "{size.form.autosuggest.spinner.width}",
+ "type": "dimension",
+ "source": "$form-autosuggest-spinner-height"
+ }
},
"border": {
- "width": { "value": ".125rem", "source": "$form-autosuggest-border-width" }
+ "width": { "value": ".125rem", "type": "dimension", "source": "$form-autosuggest-border-width" }
}
},
"border": {
"radius": {
"check": {
- "focus": { "value": ".0625rem", "source": "$form-check-focus-border-radius" }
+ "focus": { "value": ".0625rem", "type": "dimension", "source": "$form-check-focus-border-radius" }
},
- "width": { "value": ".125rem", "source": "$form-check-border-width" }
+ "width": { "value": ".125rem", "type": "dimension", "source": "$form-check-border-width" }
}
},
"feedback": {
"tooltip": {
"border": {
- "radius": { "value": "{size.border.radius.base}", "source": "$form-feedback-tooltip-border-radius" }
+ "radius": {
+ "value": "{size.border.radius.base}",
+ "type": "dimension",
+ "source": "$form-feedback-tooltip-border-radius"
+ }
}
}
}
diff --git a/tokens/src/components/Form/spacing.json b/tokens/src/components/Form/spacing.json
index 13ffaed4b9..207ceab897 100644
--- a/tokens/src/components/Form/spacing.json
+++ b/tokens/src/components/Form/spacing.json
@@ -4,99 +4,149 @@
"input": {
"padding": {
"y": {
- "base": { "value": "{spacing.input.btn.padding.y}", "source": "$input-padding-y" },
- "sm": { "value": "{spacing.input.btn.padding.sm.y}", "source": "$input-padding-y-sm" },
- "lg": { "value": "{spacing.input.btn.padding.lg.y}", "source": "$input-padding-y-lg" }
+ "base": {
+ "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$input-padding-y"
+ },
+ "sm": {
+ "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$input-padding-y-sm"
+ },
+ "lg": {
+ "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$input-padding-y-lg"
+ }
},
"x": {
- "base": { "value": "{spacing.input.btn.padding.x}", "source": "$input-padding-x" },
- "sm": { "value": "{spacing.input.btn.padding.sm.x}", "source": "$input-padding-x-sm" },
- "lg": { "value": "{spacing.input.btn.padding.lg.x}", "source": "$input-padding-x-lg" }
+ "base": {
+ "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$input-padding-x"
+ },
+ "sm": {
+ "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$input-padding-x-sm"
+ },
+ "lg": {
+ "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$input-padding-x-lg"
+ }
}
},
"check": {
- "gutter" : { "value": "1.25rem", "source": "$form-check-input-gutter" },
+ "gutter" : { "value": "1.25rem", "type": "dimension", "source": "$form-check-input-gutter" },
"margin": {
"x": {
- "base": { "value": ".25rem", "source": "$form-check-input-margin-x" },
- "inline": { "value": ".3125rem", "source": "$form-check-inline-input-margin-x" }
+ "base": { "value": ".25rem", "type": "dimension", "source": "$form-check-input-margin-x" },
+ "inline": { "value": ".3125rem", "type": "dimension", "source": "$form-check-inline-input-margin-x" }
},
- "y": { "value": ".3rem", "source": "$form-check-input-margin-y" }
+ "y": { "value": ".3rem", "type": "dimension", "source": "$form-check-input-margin-y" }
}
}
},
"text": {
"margin": {
- "top": { "value": ".25rem", "source": "$form-text-margin-top" }
+ "top": { "value": ".25rem", "type": "dimension", "source": "$form-text-margin-top" }
}
},
"check": {
"inline": {
"margin": {
- "x": { "value": ".75rem", "source": "$form-check-inline-margin-x" }
+ "x": { "value": ".75rem", "type": "dimension", "source": "$form-check-inline-margin-x" }
}
},
"position": {
- "axis": { "value": ".375rem", "source": "$form-check-position-axis" }
+ "axis": { "value": ".375rem", "type": "dimension", "source": "$form-check-position-axis" }
}
},
"group": {
"margin": {
- "bottom": { "value": "1rem", "source": "$form-group-margin-bottom" }
+ "bottom": { "value": "1rem", "type": "dimension", "source": "$form-group-margin-bottom" }
}
},
"control": {
- "gutter": { "value": ".5rem", "source": "$custom-control-gutter" },
+ "gutter": { "value": ".5rem", "type": "dimension", "source": "$custom-control-gutter" },
"spacer": {
- "x": { "value": "1rem", "source": "$custom-control-spacer-x" }
+ "x": { "value": "1rem", "type": "dimension", "source": "$custom-control-spacer-x" }
},
"select": {
"padding": {
"y": {
- "base": { "value": "{spacing.form.input.padding.y.base}", "source": "$custom-select-padding-y" },
- "sm": { "value": "{spacing.form.input.padding.y.sm}", "source": "$custom-select-padding-y-sm" },
- "lg": { "value": "{spacing.form.input.padding.y.lg}", "source": "$custom-select-padding-y-lg" }
+ "base": {
+ "value": "{spacing.form.input.padding.y.base}",
+ "type": "dimension",
+ "source": "$custom-select-padding-y"
+ },
+ "sm": {
+ "value": "{spacing.form.input.padding.y.sm}",
+ "type": "dimension",
+ "source": "$custom-select-padding-y-sm"
+ },
+ "lg": {
+ "value": "{spacing.form.input.padding.y.lg}",
+ "type": "dimension",
+ "source": "$custom-select-padding-y-lg"
+ }
},
"x": {
- "base": { "value": "{spacing.form.input.padding.x.base}", "source": "$custom-select-padding-x" },
- "sm": { "value": "{spacing.form.input.padding.x.sm}", "source": "$custom-select-padding-x-sm" },
- "lg": { "value": "{spacing.form.input.padding.x.lg}", "source": "$custom-select-padding-x-lg" }
+ "base": {
+ "value": "{spacing.form.input.padding.x.base}",
+ "type": "dimension",
+ "source": "$custom-select-padding-x"
+ },
+ "sm": {
+ "value": "{spacing.form.input.padding.x.sm}",
+ "type": "dimension",
+ "source": "$custom-select-padding-x-sm"
+ },
+ "lg": {
+ "value": "{spacing.form.input.padding.x.lg}",
+ "type": "dimension",
+ "source": "$custom-select-padding-x-lg"
+ }
}
},
"indicator": {
- "padding": { "value": "1rem", "source": "$custom-select-indicator-padding" }
+ "padding": { "value": "1rem", "type": "dimension", "source": "$custom-select-indicator-padding" }
},
"feedback": {
"icon": {
"padding": {
"right": {
"value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
+ "type": "dimension",
"source": "$custom-select-feedback-icon-padding-right"
}
},
"position": {
"value": "center right calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
+ "type": "dimension",
"source": "$custom-select-feedback-icon-position"
}
},
"margin": {
- "top": { "value": "{spacing.form.text.margin.top}", "source": "$form-feedback-margin-top" }
+ "top": {
+ "value": "{spacing.form.text.margin.top}",
+ "type": "dimension",
+ "source": "$form-feedback-margin-top"
+ }
},
"tooltip": {
"padding": {
- "y": { "value": ".25rem", "source": "$form-feedback-tooltip-padding-y" },
- "x": { "value": ".5rem", "source": "$form-feedback-tooltip-padding-x" }
+ "y": { "value": ".25rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-y" },
+ "x": { "value": ".5rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-x" }
}
}
},
"icon": {
- "padding": { "value": ".5625rem", "source": "$select-icon-padding" }
+ "padding": { "value": ".5625rem", "type": "dimension", "source": "$select-icon-padding" }
}
},
"file": {
"padding": {
- "y": { "value": "{spacing.form.input.padding.y.base}", "source": "$custom-file-padding-y" },
- "x": { "value": "{spacing.form.input.padding.x.base}", "source": "$custom-file-padding-x" }
+ "y": {
+ "value": "{spacing.form.input.padding.y.base}",
+ "type": "dimension",
+ "source": "$custom-file-padding-y"
+ },
+ "x": {
+ "value": "{spacing.form.input.padding.x.base}",
+ "type": "dimension",
+ "source": "$custom-file-padding-x"
+ }
}
}
}
diff --git a/tokens/src/components/Form/transition.json b/tokens/src/components/Form/transition.json
index a2b2c0a8d8..0cd752e9f9 100644
--- a/tokens/src/components/Form/transition.json
+++ b/tokens/src/components/Form/transition.json
@@ -1,9 +1,14 @@
{
"transition": {
"form": {
- "input": { "value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out", "source": "$input-transition" },
+ "input": {
+ "value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out",
+ "type": "transition",
+ "source": "$input-transition"
+ },
"control": {
"value": "background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out",
+ "type": "transition",
"source": "$custom-forms-transition"
}
}
diff --git a/tokens/src/components/Form/typography.json b/tokens/src/components/Form/typography.json
index 611b0bcd94..5974f22657 100644
--- a/tokens/src/components/Form/typography.json
+++ b/tokens/src/components/Form/typography.json
@@ -3,50 +3,118 @@
"form": {
"input": {
"font": {
- "family": { "value": "{typography.input.btn.font.family}", "source": "$input-font-family" },
+ "family": {
+ "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$input-font-family"
+ },
"size": {
- "base": { "value": "{typography.input.btn.font.size.base}", "source": "$input-font-size" },
- "sm": { "value": "{typography.input.btn.font.size.sm}", "source": "$input-font-size-sm" },
- "lg": { "value": "{typography.input.btn.font.size.lg}", "source": "$input-font-size-lg" }
+ "base": {
+ "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$input-font-size"
+ },
+ "sm": {
+ "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$input-font-size-sm"
+ },
+ "lg": {
+ "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$input-font-size-lg"
+ }
},
- "weight": { "value": "{typography.font.weight.base}", "source": "$input-font-weight" }
+ "weight": {
+ "value": "{typography.font.weight.base}", "type": "fontWeight", "source": "$input-font-weight"
+ }
},
"line-height": {
- "base": { "value": "{typography.input.btn.line-height.base}", "source": "$input-line-height" },
- "sm": { "value": "{typography.input.btn.line-height.sm}", "source": "$input-line-height-sm" },
- "lg": { "value": "{typography.input.btn.line-height.lg}", "source": "$input-line-height-lg" }
+ "base": {
+ "value": "{typography.input.btn.line-height.base}",
+ "type": "dimension",
+ "source": "$input-line-height"
+ },
+ "sm": {
+ "value": "{typography.input.btn.line-height.sm}",
+ "type": "dimension",
+ "source": "$input-line-height-sm"
+ },
+ "lg": {
+ "value": "{typography.input.btn.line-height.lg}",
+ "type": "dimension",
+ "source": "$input-line-height-lg"
+ }
}
},
"control": {
"select": {
"font": {
- "family": { "value": "{typography.form.input.font.family}", "source": "$custom-select-font-family" },
+ "family": {
+ "value": "{typography.form.input.font.family}",
+ "type": "fontFamily",
+ "source": "$custom-select-font-family"
+ },
"size": {
- "base": { "value": "{typography.form.input.font.size.base}", "source": "$custom-select-font-size" },
- "sm": { "value": "{typography.form.input.font.size.sm}", "source": "$custom-select-font-size-sm" },
- "lg": { "value": "{typography.form.input.font.size.lg}", "source": "$custom-select-font-size-lg" }
+ "base": {
+ "value": "{typography.form.input.font.size.base}",
+ "type": "dimension",
+ "source": "$custom-select-font-size"
+ },
+ "sm": {
+ "value": "{typography.form.input.font.size.sm}",
+ "type": "dimension",
+ "source": "$custom-select-font-size-sm"
+ },
+ "lg": {
+ "value": "{typography.form.input.font.size.lg}",
+ "type": "dimension",
+ "source": "$custom-select-font-size-lg"
+ }
},
- "weight": { "value": "{typography.form.input.font.weight}", "source": "$custom-select-font-weight" }
+ "weight": {
+ "value": "{typography.form.input.font.weight}",
+ "type": "fontWeight",
+ "source": "$custom-select-font-weight"
+ }
},
- "line-height": { "value": "{typography.form.input.line-height.base}", "source": "$custom-select-line-height" }
+ "line-height": {
+ "value": "{typography.form.input.line-height.base}",
+ "type": "dimension",
+ "source": "$custom-select-line-height"
+ }
},
"file": {
- "line-height": { "value": "{typography.form.input.line-height.base}", "source": "$custom-file-line-height" },
+ "line-height": {
+ "value": "{typography.form.input.line-height.base}",
+ "type": "dimension",
+ "source": "$custom-file-line-height"
+ },
"font": {
- "family": { "value": "{typography.form.input.font.family}", "source": "$custom-file-font-family" },
- "weight": { "value": "{typography.form.input.font.weight}", "source": "$custom-file-font-weight" }
+ "family": { "value": "{typography.form.input.font.family}",
+ "type": "fontFamily",
+ "source": "$custom-file-font-family" },
+ "weight": {
+ "value": "{typography.form.input.font.weight}",
+ "type": "fontWeight",
+ "source": "$custom-file-font-weight"
+ }
}
}
},
"feedback": {
"font": {
- "size": { "value": "{typography.font.size.small.base}", "source": "$form-feedback-font-size" }
+ "size": {
+ "value": "{typography.font.size.small.base}",
+ "type": "dimension",
+ "source": "$form-feedback-font-size"
+ }
},
"tooltip": {
"font": {
- "size": { "value": "{typography.font.size.sm}", "source": "$form-feedback-tooltip-font-size" }
+ "size": {
+ "value": "{typography.font.size.sm}",
+ "type": "dimension",
+ "source": "$form-feedback-tooltip-font-size"
+ }
},
- "line-height": { "value": "{typography.line-height.base}", "source": "$form-feedback-tooltip-line-height" }
+ "line-height": {
+ "value": "{typography.line-height.base}",
+ "type": "dimension",
+ "source": "$form-feedback-tooltip-line-height"
+ }
}
}
}
diff --git a/tokens/src/components/Icon.json b/tokens/src/components/Icon.json
index be80dcce72..3a690d4537 100644
--- a/tokens/src/components/Icon.json
+++ b/tokens/src/components/Icon.json
@@ -1,10 +1,10 @@
{
"size": {
"icon": {
- "inline": { "value": ".8em", "source": "$icon-inline" },
- "sm": { "value": "1.25rem", "source": "$icon-sm" },
- "md": { "value": "1.5rem", "source": "$icon-md" },
- "lg": { "value": "1.75rem", "source": "$icon-lg" }
+ "inline": { "value": ".8em", "type": "dimension", "source": "$icon-inline" },
+ "sm": { "value": "1.25rem", "type": "dimension", "source": "$icon-sm" },
+ "md": { "value": "1.5rem", "type": "dimension", "source": "$icon-md" },
+ "lg": { "value": "1.75rem", "type": "dimension", "source": "$icon-lg" }
}
}
}
diff --git a/tokens/src/components/IconButton.json b/tokens/src/components/IconButton.json
index 2c41b66242..e5e92b727e 100644
--- a/tokens/src/components/IconButton.json
+++ b/tokens/src/components/IconButton.json
@@ -1,25 +1,29 @@
{
"color": {
"icon-button": {
- "bg": { "value": "transparent", "source": "$btn-icon-bg" },
- "accent": { "value": "{color.white}", "source": "$btn-icon-accent-color" },
- "primary": { "value": "{color.primary.base}", "source": "$btn-icon-primary" },
- "secondary": { "value": "{color.secondary.base}", "source": "$btn-icon-secondary" },
- "brand": { "value": "{color.brand.base}", "source": "$btn-icon-brand" },
- "success": { "value": "{color.success.base}", "source": "$btn-icon-success" },
- "warning": { "value": "{color.warning.base}", "source": "$btn-icon-warning" },
- "danger": { "value": "{color.danger.base}", "source": "$btn-icon-danger" },
- "light": { "value": "{color.light.base}", "source": "$btn-icon-light" },
- "dark": { "value": "{color.dark.base}", "source": "$btn-icon-dark" },
- "black": { "value": "{color.black}", "source": "$btn-icon-black" }
+ "bg": { "value": "transparent", "type": "color", "source": "$btn-icon-bg" },
+ "accent": { "value": "{color.white}", "type": "color", "source": "$btn-icon-accent-color" },
+ "primary": { "value": "{color.primary.base}", "type": "color", "source": "$btn-icon-primary" },
+ "secondary": { "value": "{color.secondary.base}", "type": "color", "source": "$btn-icon-secondary" },
+ "brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-icon-brand" },
+ "success": { "value": "{color.success.base}", "type": "color", "source": "$btn-icon-success" },
+ "warning": { "value": "{color.warning.base}", "type": "color", "source": "$btn-icon-warning" },
+ "danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-icon-danger" },
+ "light": { "value": "{color.light.base}", "type": "color", "source": "$btn-icon-light" },
+ "dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-icon-dark" },
+ "black": { "value": "{color.black}", "type": "color", "source": "$btn-icon-black" }
}
},
"size": {
"icon-button": {
"diameter": {
- "md": { "value": "2.75rem", "source": "$btn-icon-diameter-md" },
- "sm": { "value": "2.25rem", "source": "$btn-icon-diameter-sm" },
- "inline": { "value": "calc({typography.line-height.base} + .1em)", "source": "$btn-icon-diameter-inline" }
+ "md": { "value": "2.75rem", "type": "dimension", "source": "$btn-icon-diameter-md" },
+ "sm": { "value": "2.25rem", "type": "dimension", "source": "$btn-icon-diameter-sm" },
+ "inline": {
+ "value": "calc({typography.line-height.base} + .1em)",
+ "type": "dimension",
+ "source": "$btn-icon-diameter-inline"
+ }
}
}
}
diff --git a/tokens/src/components/Image.json b/tokens/src/components/Image.json
index 5d104bf127..8cde6871ea 100644
--- a/tokens/src/components/Image.json
+++ b/tokens/src/components/Image.json
@@ -1,24 +1,24 @@
{
"color": {
"image": {
- "figure-caption": { "value": "{color.gray.500}", "source": "$figure-caption-color" },
+ "figure-caption": { "value": "{color.gray.500}", "type": "color", "source": "$figure-caption-color" },
"thumbnail": {
- "bg": { "value": "{color.body.bg}", "source": "$thumbnail-bg" },
- "border": { "value": "{color.gray.200}", "source": "$thumbnail-border-color" }
+ "bg": { "value": "{color.body.bg}", "type": "color", "source": "$thumbnail-bg" },
+ "border": { "value": "{color.gray.200}", "type": "color", "source": "$thumbnail-border-color" }
}
}
},
"typography": {
"image": {
"figure-caption": {
- "font-size": { "value": "90%", "source": "$figure-caption-font-size" }
+ "font-size": { "value": "90%", "type": "percentage", "source": "$figure-caption-font-size" }
}
}
},
"elevation": {
"image": {
"thumbnail": {
- "box-shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)", "source": "$thumbnail-box-shadow" }
+ "box-shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$thumbnail-box-shadow" }
}
}
},
@@ -26,8 +26,10 @@
"image": {
"thumbnail": {
"border": {
- "width": { "value": "{size.border.width}", "source": "$thumbnail-border-width" },
- "radius": { "value": "{size.border.radius.base}", "source": "$thumbnail-border-radius"}
+ "width": { "value": "{size.border.width}", "type": "dimension", "source": "$thumbnail-border-width" },
+ "radius": {
+ "value": "{size.border.radius.base}", "type": "dimension", "source": "$thumbnail-border-radius"
+ }
}
}
}
@@ -35,7 +37,7 @@
"spacing": {
"image": {
"thumbnail": {
- "padding": { "value": ".25rem", "source": "$thumbnail-padding" }
+ "padding": { "value": ".25rem", "type": "dimension", "source": "$thumbnail-padding" }
}
}
}
diff --git a/tokens/src/components/Menu.json b/tokens/src/components/Menu.json
index 1594fea2f7..158cd99781 100644
--- a/tokens/src/components/Menu.json
+++ b/tokens/src/components/Menu.json
@@ -1,11 +1,11 @@
{
"color": {
"menu": {
- "bg-active": { "value": "{color.btn.active.bg.tertiary}", "source": "$active-background" },
+ "bg-active": { "value": "{color.btn.active.bg.tertiary}", "type": "color", "source": "$active-background" },
"border": {
- "base": { "value": "transparent", "source": "$border" },
- "active": { "value": "transparent", "source": "$active-border" },
- "hover": { "value": "transparent", "source": "$hover-border" }
+ "base": { "value": "transparent", "type": "color", "source": "$border" },
+ "active": { "value": "transparent", "type": "color", "source": "$active-border" },
+ "hover": { "value": "transparent", "type": "color", "source": "$hover-border" }
}
}
}
diff --git a/tokens/src/components/Modal.json b/tokens/src/components/Modal.json
index fe4d8ed832..425392f2b8 100644
--- a/tokens/src/components/Modal.json
+++ b/tokens/src/components/Modal.json
@@ -2,17 +2,15 @@
"color": {
"modal": {
"content": {
- "bg": { "value": "{color.bg.base}", "source": "$modal-content-bg" },
+ "bg": { "value": "{color.bg.base}", "type": "color", "source": "$modal-content-bg" },
"border": {
"value": "{color.black}",
+ "type": "color",
"source": "$modal-content-border-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.2
- }]
+ "modify": [{ "type": "alpha", "amount": 0.2 }]
}
},
- "backdrop-bg": { "value": "{color.black}", "source": "$modal-backdrop-bg" }
+ "backdrop-bg": { "value": "{color.black}", "type": "color", "source": "$modal-backdrop-bg" }
}
},
"elevation": {
@@ -21,46 +19,57 @@
"box-shadow": {
"sm-up": {
"value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$modal-content-box-shadow-sm-up"
}
}
},
- "backdrop-zindex": { "value": "1040", "source": "$zindex-modal-backdrop" },
- "zindex": { "value": "1050", "source": "$zindex-modal" }
+ "backdrop-zindex": { "value": "1040", "type": "ratio", "source": "$zindex-modal-backdrop" },
+ "zindex": { "value": "1050", "type": "ratio", "source": "$zindex-modal" }
}
},
"size": {
"modal": {
- "xl": { "value": "1140px", "source": "$modal-xl" },
- "lg": { "value": "800px", "source": "$modal-lg" },
- "md": { "value": "500px", "source": "$modal-md" },
- "sm": { "value": "400px", "source": "$modal-sm" },
+ "xl": { "value": "1140px", "type": "dimension", "source": "$modal-xl" },
+ "lg": { "value": "800px", "type": "dimension", "source": "$modal-lg" },
+ "md": { "value": "500px", "type": "dimension", "source": "$modal-md" },
+ "sm": { "value": "400px", "type": "dimension", "source": "$modal-sm" },
"content-border": {
- "width": { "value": "0px", "source": "$modal-content-border-width" },
- "radius": { "value": "{size.border.radius.lg}", "source": "$modal-content-border-radius" }
+ "width": { "value": "0px", "type": "dimension", "source": "$modal-content-border-width" },
+ "radius": {
+ "value": "{size.border.radius.lg}", "type": "dimension", "source": "$modal-content-border-radius"
+ }
}
}
},
"spacing": {
"modal": {
"inner-padding": {
- "base": { "value": "1.5rem", "source": "$modal-inner-padding" },
- "bottom": { "value": ".7rem", "source": "$modal-inner-padding-bottom" }
+ "base": { "value": "1.5rem", "type": "dimension", "source": "$modal-inner-padding" },
+ "bottom": { "value": ".7rem", "type": "dimension", "source": "$modal-inner-padding-bottom" }
},
"footer-padding": {
- "base": { "value": "{spacing.modal.footer-padding.y} 1.5rem", "source": "$modal-footer-padding" },
- "y": { "value": "1rem", "source": "$modal-footer-padding-y" }
+ "base": {
+ "value": "{spacing.modal.footer-padding.y} 1.5rem",
+ "type": "dimension",
+ "source": "$modal-footer-padding"
+ },
+ "y": { "value": "1rem", "type": "dimension", "source": "$modal-footer-padding-y" }
},
"header-padding": {
- "base": { "value": "{spacing.modal.header-padding.y} 1.5rem", "source": "$modal-header-padding" },
- "y": { "value": "1rem", "source": "$modal-header-padding-y" }
+ "base": {
+ "value": "{spacing.modal.header-padding.y} 1.5rem",
+ "type": "dimension",
+ "source": "$modal-header-padding"
+ },
+ "y": { "value": "1rem", "type": "dimension", "source": "$modal-header-padding-y" }
},
- "dialog-margin": { "value": "1.5rem", "source": "$modal-dialog-margin" }
+ "dialog-margin": { "value": "1.5rem", "type": "dimension", "source": "$modal-dialog-margin" }
}
},
"other": {
"modal": {
- "opacity": { "value": ".5", "source": "$modal-backdrop-opacity" }
+ "opacity": { "value": ".5", "type": "ratio", "source": "$modal-backdrop-opacity" }
}
}
}
diff --git a/tokens/src/components/Nav.json b/tokens/src/components/Nav.json
index 658d45b791..3b72b52ec2 100644
--- a/tokens/src/components/Nav.json
+++ b/tokens/src/components/Nav.json
@@ -4,10 +4,14 @@
"tabs-link": {
"border": {
"active": {
- "value": "transparent transparent {color.primary.500}", "source": "$nav-tabs-link-active-border-color"
+ "value": "transparent transparent {color.primary.500}",
+ "type": "color",
+ "source": "$nav-tabs-link-active-border-color"
},
"hover": {
- "value": "transparent transparent {color.nav.tabs.border}", "source": "$nav-tabs-link-hover-border-color"
+ "value": "transparent transparent {color.nav.tabs.border}",
+ "type": "color",
+ "source": "$nav-tabs-link-hover-border-color"
}
}
}
@@ -17,65 +21,63 @@
"nav": {
"link": {
"text": {
- "base": { "value": "{color.gray.700}", "source": "$nav-link-color" },
- "disabled": { "value": "{color.gray.300}", "source": "$nav-link-disabled-color" }
+ "base": { "value": "{color.gray.700}", "type": "color", "source": "$nav-link-color" },
+ "disabled": { "value": "{color.gray.300}", "type": "color", "source": "$nav-link-disabled-color" }
}
},
"tabs": {
- "border": { "value": "{color.light.400}", "source": "$nav-tabs-border-color" },
+ "border": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" },
"link": {
"hover": {
- "bg": { "value": "{color.light.400}", "source": "$nav-tabs-link-hover-bg" }
+ "bg": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-link-hover-bg" }
},
"active": {
- "text": { "value": "{color.primary.500}", "source": "$nav-tabs-link-active-color" },
- "bg": { "value": "{color.body.bg}", "source": "$nav-tabs-link-active-bg" }
+ "text": { "value": "{color.primary.500}", "type": "color", "source": "$nav-tabs-link-active-color" },
+ "bg": { "value": "{color.body.bg}", "type": "color", "source": "$nav-tabs-link-active-bg" }
}
}
},
"pills": {
"link": {
"active": {
- "text": { "value": "{color.active}", "source": "$nav-pills-link-active-color" },
- "bg": { "value": "{color.bg.active}", "source": "$nav-pills-link-active-bg" }
+ "text": { "value": "{color.active}", "type": "color", "source": "$nav-pills-link-active-color" },
+ "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" }
}
}
},
- "divider": { "value": "{color.gray.100}", "source": "$nav-divider-color" },
+ "divider": { "value": "{color.gray.100}", "type": "color", "source": "$nav-divider-color" },
"dark": {
"value": "{color.white}",
+ "type": "color",
"source": "$navbar-dark-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.5
- }]
+ "modify": [{ "type": "alpha", "amount": 0.5 }]
},
"light": {
"value": "{color.black}",
+ "type": "color",
"source": "$navbar-light-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.5
- }]
+ "modify": [{ "type": "alpha", "amount": 0.5 }]
}
}
},
"typography": {
"nav": {
"link": {
- "font-weight": { "value": "500", "source": "$nav-link-font-weight" }
+ "font-weight": { "value": "500", "type": "fontWeight", "source": "$nav-link-font-weight" }
}
}
},
"size": {
"nav": {
"pills": {
- "border-radius": { "value": "{size.border.radius.base}", "source": "$nav-pills-border-radius" }
+ "border-radius": {
+ "value": "{size.border.radius.base}", "type": "dimension", "source": "$nav-pills-border-radius"
+ }
},
"tabs": {
"border": {
- "width": { "value": "2px", "source": "$nav-tabs-border-width" },
- "radius": { "value": "0", "source": "$nav-tabs-border-radius" }
+ "width": { "value": "2px", "type": "dimension", "source": "$nav-tabs-border-width" },
+ "radius": { "value": "0", "type": "dimension", "source": "$nav-tabs-border-radius" }
}
}
}
@@ -84,12 +86,14 @@
"nav": {
"link": {
"padding": {
- "y": { "value": ".5rem", "source": "$nav-link-padding-y" },
- "x": { "value": "1rem", "source": "$nav-link-padding-x" }
+ "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" },
+ "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" }
}
},
"divider": {
- "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "source": "$nav-divider-margin-y" }
+ "margin-y": {
+ "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y"
+ }
}
}
}
diff --git a/tokens/src/components/Navbar.json b/tokens/src/components/Navbar.json
index b0982da301..60ed7c2146 100644
--- a/tokens/src/components/Navbar.json
+++ b/tokens/src/components/Navbar.json
@@ -4,90 +4,76 @@
"dark": {
"text": {
"value": "{color.white}",
+ "type": "color",
"source": "$navbar-dark-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.5
- }]
+ "modify": [{ "type": "alpha", "amount": 0.5 }]
},
"hover": {
"value": "{color.white}",
+ "type": "color",
"source": "$navbar-dark-hover-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.75
- }]
+ "modify": [{ "type": "alpha", "amount": 0.75 }]
},
- "active": { "value": "{color.active}", "source": "$navbar-dark-active-color" },
+ "active": { "value": "{color.active}", "type": "color", "source": "$navbar-dark-active-color" },
"disabled": {
"value": "{color.white}",
+ "type": "color",
"source": "$navbar-dark-disabled-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.25
- }]
+ "modify": [{ "type": "alpha", "amount": 0.25 }]
},
"toggler": {
"border": {
"value": "{color.white}",
+ "type": "color",
"source": "$navbar-dark-toggler-border-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.1
- }]
+ "modify": [{ "type": "alpha", "amount": 0.1 }]
}
},
"brand": {
- "text": { "value": "{color.navbar.dark.active}", "source": "$navbar-dark-brand-color" },
- "hover": { "value": "{color.navbar.dark.active}", "source": "$navbar-dark-brand-hover-color" }
+ "text": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-color" },
+ "hover": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-hover-color" }
}
},
"light": {
"text": {
"value": "{color.black}",
+ "type": "color",
"source": "$navbar-light-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.5
- }]
+ "modify": [{ "type": "alpha", "amount": 0.5 }]
},
"hover": {
"value": "{color.black}",
+ "type": "color",
"source": "$navbar-light-hover-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.7
- }]
+ "modify": [{ "type": "alpha", "amount": 0.7 }]
},
"active": {
"value": "{color.black}",
+ "type": "color",
"source": "$navbar-light-active-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.9
- }]
+ "modify": [{ "type": "alpha", "amount": 0.9 }]
},
"disabled": {
"value": "{color.black}",
+ "type": "color",
"source": "$navbar-light-disabled-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.3
- }]
+ "modify": [{ "type": "alpha", "amount": 0.3 }]
},
"toggler": {
"border": {
"value": "{color.black}",
+ "type": "color",
"source": "$navbar-light-toggler-border-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.1
- }]
+ "modify": [{ "type": "alpha", "amount": 0.1 }]
}
},
"brand": {
- "text": { "value": "{color.navbar.light.active}", "source": "$navbar-light-brand-color" },
- "hover": { "value": "{color.navbar.light.active}", "source": "$navbar-light-brand-hover-color" }
+ "text": {
+ "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-color"
+ },
+ "hover": {
+ "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-hover-color"
+ }
}
}
}
@@ -95,24 +81,25 @@
"spacing": {
"navbar": {
"padding": {
- "y": { "value": "calc({spacing.spacer.base} / 2)", "source": "$navbar-padding-y" },
+ "y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$navbar-padding-y" },
"x": {
- "base": { "value": "{spacing.spacer.base}", "source": "$navbar-padding-x" },
- "nav-link": { "value": ".5rem", "source": "$navbar-nav-link-padding-x" }
+ "base": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$navbar-padding-x" },
+ "nav-link": { "value": ".5rem", "type": "dimension", "source": "$navbar-nav-link-padding-x" }
}
},
"brand": {
"padding": {
"y": {
"value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)",
+ "type": "dimension",
"source": "$navbar-brand-padding-y"
}
}
},
"toggler": {
"padding": {
- "y": { "value": ".25rem", "source": "$navbar-toggler-padding-y" },
- "x": { "value": ".75rem", "source": "$navbar-toggler-padding-x" }
+ "y": { "value": ".25rem", "type": "dimension", "source": "$navbar-toggler-padding-y" },
+ "x": { "value": ".75rem", "type": "dimension", "source": "$navbar-toggler-padding-x" }
}
}
}
@@ -120,16 +107,21 @@
"typography": {
"navbar": {
"brand": {
- "font-size": { "value": "{typography.font.size.lg}", "source": "$navbar-brand-font-size" }
+ "font-size": {
+ "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-brand-font-size"
+ }
},
"nav-link": {
"height": {
"value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)",
+ "type": "dimension",
"source": "$nav-link-height"
}
},
"toggler": {
- "font-size": { "value": "{typography.font.size.lg}", "source": "$navbar-toggler-font-size" }
+ "font-size": {
+ "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-toggler-font-size"
+ }
}
}
},
@@ -137,18 +129,19 @@
"navbar": {
"nav": {
"scroll": {
- "max-height": { "value": "75vh", "source": "$navbar-nav-scroll-max-height" }
+ "max-height": { "value": "75vh", "type": "dimension", "source": "$navbar-nav-scroll-max-height" }
}
},
"brand": {
"height": {
"value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})",
+ "type": "dimension",
"source": "$navbar-brand-height"
}
},
"toggler": {
"border-radius": {
- "value": "{size.btn.border.radius.base}", "source": "$navbar-toggler-border-radius"
+ "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$navbar-toggler-border-radius"
}
}
}
@@ -159,6 +152,7 @@
"dark": {
"icon-bg": {
"value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")",
+ "type": "file",
"source": "$navbar-dark-toggler-icon-bg",
"outputReferences": false,
"modify": [{
@@ -171,6 +165,7 @@
"light": {
"icon-bg": {
"value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")",
+ "type": "file",
"source": "$navbar-light-toggler-icon-bg",
"outputReferences": false,
"modify": [{
diff --git a/tokens/src/components/Pagination.json b/tokens/src/components/Pagination.json
index b2153b4547..b3dc52c728 100644
--- a/tokens/src/components/Pagination.json
+++ b/tokens/src/components/Pagination.json
@@ -2,98 +2,110 @@
"color": {
"pagination": {
"text": {
- "base": { "value": "{color.link.base}", "source": "$pagination-color" },
- "inverse": { "value": "{color.white}", "source": "$pagination-color-inverse" },
- "hover": { "value": "{color.link.hover}", "source": "$pagination-hover-color" },
- "active": { "value": "{color.active}", "source": "$pagination-active-color" },
- "disabled": { "value": "{color.disabled}", "source": "$pagination-disabled-color" }
+ "base": { "value": "{color.link.base}", "type": "color", "source": "$pagination-color" },
+ "inverse": { "value": "{color.white}", "type": "color", "source": "$pagination-color-inverse" },
+ "hover": { "value": "{color.link.hover}", "type": "color", "source": "$pagination-hover-color" },
+ "active": { "value": "{color.active}", "type": "color", "source": "$pagination-active-color" },
+ "disabled": { "value": "{color.disabled}", "type": "color", "source": "$pagination-disabled-color" }
},
"bg": {
- "base": { "value": "{color.bg.base}", "source": "$pagination-bg" },
- "hover": { "value": "{color.gray.100}", "source": "$pagination-hover-bg" },
- "active": { "value": "{color.bg.active}", "source": "$pagination-active-bg" },
- "disabled": { "value": "{color.white}", "source": "$pagination-disabled-bg" }
+ "base": { "value": "{color.bg.base}", "type": "color", "source": "$pagination-bg" },
+ "hover": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-hover-bg" },
+ "active": { "value": "{color.bg.active}", "type": "color", "source": "$pagination-active-bg" },
+ "disabled": { "value": "{color.white}", "type": "color", "source": "$pagination-disabled-bg" }
},
"border": {
- "base": { "value": "{color.gray.200}", "source": "$pagination-border-color" },
- "hover": { "value": "{color.gray.200}", "source": "$pagination-hover-border-color" },
- "active": { "value": "{color.pagination.bg.active}", "source": "$pagination-active-border-color" },
- "disabled": { "value": "{color.gray.100}", "source": "$pagination-disabled-border-color" }
+ "base": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-border-color" },
+ "hover": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-hover-border-color" },
+ "active": {
+ "value": "{color.pagination.bg.active}", "type": "color", "source": "$pagination-active-border-color"
+ },
+ "disabled": {
+ "value": "{color.gray.100}", "type": "color", "source": "$pagination-disabled-border-color"
+ }
},
"focus": {
- "base": { "value": "{color.primary.500}", "source": "$pagination-focus-color" },
- "text": { "value": "{color.black}", "source": "$pagination-focus-color-text" }
+ "base": { "value": "{color.primary.500}", "type": "color", "source": "$pagination-focus-color" },
+ "text": { "value": "{color.black}", "type": "color", "source": "$pagination-focus-color-text" }
}
}
},
"typography": {
"pagination": {
"font-size": {
- "sm": { "value": ".875rem", "source": "$pagination-font-size-sm" }
+ "sm": { "value": ".875rem", "type": "dimension", "source": "$pagination-font-size-sm" }
},
- "line-height": { "value": "1.5rem", "source": "$pagination-line-height" }
+ "line-height": { "value": "1.5rem", "type": "dimension", "source": "$pagination-line-height" }
}
},
"spacing": {
"pagination": {
"padding": {
"y": {
- "base": { "value": ".625rem", "source": "$pagination-padding-y" },
- "sm": { "value": ".8rem", "source": "$pagination-padding-y-sm" },
- "lg": { "value": ".75rem", "source": "$pagination-padding-y-lg" }
+ "base": { "value": ".625rem", "type": "dimension", "source": "$pagination-padding-y" },
+ "sm": { "value": ".8rem", "type": "dimension", "source": "$pagination-padding-y-sm" },
+ "lg": { "value": ".75rem", "type": "dimension", "source": "$pagination-padding-y-lg" }
},
"x": {
- "base": { "value": "1rem", "source": "$pagination-padding-x" },
- "sm": { "value": ".6rem", "source": "$pagination-padding-x-sm" },
- "lg": { "value": "1.5rem", "source": "$pagination-padding-x-lg" }
+ "base": { "value": "1rem", "type": "dimension", "source": "$pagination-padding-x" },
+ "sm": { "value": ".6rem", "type": "dimension", "source": "$pagination-padding-x-sm" },
+ "lg": { "value": "1.5rem", "type": "dimension", "source": "$pagination-padding-x-lg" }
}
},
"margin": {
- "x": { "value": ".5rem", "source": "$pagination-margin-x" }
+ "x": { "value": ".5rem", "type": "dimension", "source": "$pagination-margin-x" }
}
}
},
"size": {
"pagination": {
"icon": {
- "width": { "value": "2.25rem", "source": "$pagination-icon-width" },
- "height": { "value": "2.25rem", "source": "$pagination-icon-height" }
+ "width": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-width" },
+ "height": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-height" }
},
"secondary": {
"height": {
- "base": { "value": "2.75rem", "source": "$pagination-secondary-height" },
- "sm": { "value": "2.25rem", "source": "$pagination-secondary-height-sm" }
+ "base": { "value": "2.75rem", "type": "dimension", "source": "$pagination-secondary-height" },
+ "sm": { "value": "2.25rem", "type": "dimension", "source": "$pagination-secondary-height-sm" }
}
},
"border": {
- "width": { "value": "{size.border.width}", "source": "$pagination-border-width" },
+ "width": { "value": "{size.border.width}", "type": "dimension", "source": "$pagination-border-width" },
"radius": {
- "sm": { "value": "{size.border.radius.sm}", "source": "$pagination-border-radius-sm" },
- "lg": { "value": "{size.border.radius.lg}", "source": "$pagination-border-radius-lg" }
+ "sm": {
+ "value": "{size.border.radius.sm}", "type": "dimension", "source": "$pagination-border-radius-sm"
+ },
+ "lg": {
+ "value": "{size.border.radius.lg}", "type": "dimension", "source": "$pagination-border-radius-lg"
+ }
}
},
"reduced": {
"dropdown": {
- "max-height": { "value": "60vh", "source": "$pagination-reduced-dropdown-max-height" },
- "min-width": { "value": "6rem", "source": "$pagination-reduced-dropdown-min-width" }
+ "max-height": { "value": "60vh", "type": "dimension", "source": "$pagination-reduced-dropdown-max-height" },
+ "min-width": { "value": "6rem", "type": "dimension", "source": "$pagination-reduced-dropdown-min-width" }
}
},
"toggle": {
"border": {
- "base": { "value": ".3125rem", "source": "$pagination-toggle-border" },
- "sm": { "value": ".25rem", "source": "$pagination-toggle-border-sm" }
+ "base": { "value": ".3125rem", "type": "dimension", "source": "$pagination-toggle-border" },
+ "sm": { "value": ".25rem", "type": "dimension", "source": "$pagination-toggle-border-sm" }
}
},
"focus": {
- "border-width": { "value": ".125rem", "source": "$pagination-focus-border-width" },
- "outline": { "value": "0", "source": "$pagination-focus-outline" }
+ "border-width": { "value": ".125rem", "type": "dimension", "source": "$pagination-focus-border-width" },
+ "outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" }
}
}
},
"elevation": {
"pagination": {
"focus": {
- "box-shadow": { "value": "{elevation.input.btn-focus.box-shadow}", "source": "$pagination-focus-box-shadow" }
+ "box-shadow": {
+ "value": "{elevation.input.btn-focus.box-shadow}",
+ "type": "shadow",
+ "source": "$pagination-focus-box-shadow"
+ }
}
}
}
diff --git a/tokens/src/components/Popover.json b/tokens/src/components/Popover.json
index ea1a24198e..3498575711 100644
--- a/tokens/src/components/Popover.json
+++ b/tokens/src/components/Popover.json
@@ -1,73 +1,67 @@
{
"typography": {
"popover": {
- "font-size": { "value": "{typography.font.size.sm}", "source": "$popover-font-size" }
+ "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$popover-font-size" }
}
},
"color": {
"popover": {
- "bg": { "value": "{color.bg.base}", "source": "$popover-bg" },
- "border": { "value": "rgba(0, 0, 0, .2)", "source": "$popover-border-color" },
+ "bg": { "value": "{color.bg.base}", "type": "color", "source": "$popover-bg" },
+ "border": { "value": "rgba(0, 0, 0, .2)", "type": "color", "source": "$popover-border-color" },
"header": {
- "text": { "value": "{color.headings.base}", "source": "$popover-header-color" },
- "bg": { "value": "{color.white}", "source": "$popover-header-bg" },
+ "text": { "value": "{color.headings.base}", "type": "color", "source": "$popover-header-color" },
+ "bg": { "value": "{color.white}", "type": "color", "source": "$popover-header-bg" },
"bg-dark": {
"value": "{color.white}",
+ "type": "color",
"source": "$popover-header-bg-dark",
- "modify": [{
- "type": "darken",
- "amount": 0.5
- }]
+ "modify": [{ "type": "darken", "amount": 0.5 }]
},
"border-bottom-dark": {
"value": "{color.white}",
+ "type": "color",
"source": "$popover-header-border-bottom-darken",
- "modify": [{
- "type": "darken",
- "amount": 0.05
- }]
+ "modify": [{ "type": "darken", "amount": 0.05 }]
}
},
- "body": { "value": "{color.body.base}", "source": "$popover-body-color" },
+ "body": { "value": "{color.body.base}", "type": "color", "source": "$popover-body-color" },
"arrow": {
- "base": { "value": "{color.popover.bg}", "source": "$popover-arrow-color" },
+ "base": { "value": "{color.popover.bg}", "type": "color", "source": "$popover-arrow-color" },
"outer": {
"value": "{color.popover.border}",
+ "type": "color",
"source": "$popover-arrow-outer-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.05
- }]
+ "modify": [{ "type": "alpha", "amount": 0.05 }]
}
},
"success": {
- "bg": { "value": "{color.success.100}", "source": "$popover-success-bg" },
- "icon": { "value": "{color.success.500}", "source": "$popover-success-icon-color" }
+ "bg": { "value": "{color.success.100}", "type": "color", "source": "$popover-success-bg" },
+ "icon": { "value": "{color.success.500}", "type": "color", "source": "$popover-success-icon-color" }
},
"warning": {
- "bg": { "value": "{color.warning.100}", "source": "$popover-warning-bg" },
- "icon": { "value": "{color.warning.500}", "source": "$popover-warning-icon-color" }
+ "bg": { "value": "{color.warning.100}", "type": "color", "source": "$popover-warning-bg" },
+ "icon": { "value": "{color.warning.500}", "type": "color", "source": "$popover-warning-icon-color" }
},
"danger": {
- "bg": { "value": "{color.danger.100}", "source": "$popover-danger-bg" },
- "icon": { "value": "{color.warning.500}", "source": "$popover-danger-icon-color" }
+ "bg": { "value": "{color.danger.100}", "type": "color", "source": "$popover-danger-bg" },
+ "icon": { "value": "{color.warning.500}", "type": "color", "source": "$popover-danger-icon-color" }
}
}
},
"size": {
"popover": {
- "max-width": { "value": "480px", "source": "$popover-max-width" },
+ "max-width": { "value": "480px", "type": "dimension", "source": "$popover-max-width" },
"border": {
- "width": { "value": "{size.border.width}", "source": "$popover-border-width" },
- "radius": { "value": "{size.border.radius.sm}", "source": "$popover-border-radius" }
+ "width": { "value": "{size.border.width}", "type": "color", "source": "$popover-border-width" },
+ "radius": { "value": "{size.border.radius.sm}", "type": "color", "source": "$popover-border-radius" }
},
"icon": {
- "height": { "value": "1rem", "source": "$popover-icon-height" },
- "width": { "value": "1rem", "source": "$popover-icon-width" }
+ "height": { "value": "1rem", "type": "dimension", "source": "$popover-icon-height" },
+ "width": { "value": "1rem", "type": "dimension", "source": "$popover-icon-width" }
},
"arrow": {
- "width": { "value": "1rem", "source": "$popover-arrow-width" },
- "height": { "value": ".5rem", "source": "$popover-arrow-height" }
+ "width": { "value": "1rem", "type": "dimension", "source": "$popover-arrow-width" },
+ "height": { "value": ".5rem", "type": "dimension", "source": "$popover-arrow-height" }
}
}
},
@@ -75,27 +69,36 @@
"popover": {
"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": "$popover-box-shadow"
},
- "zindex": { "value": "1060", "source": "$zindex-popover" }
+ "zindex": { "value": "1060", "type": "ratio", "source": "$zindex-popover" }
}
},
"spacing": {
"popover": {
"header": {
"padding": {
- "y": { "value": ".5rem", "source": "$popover-header-padding-y" },
- "x": { "value": "1rem", "source": "$popover-header-padding-x" }
+ "y": { "value": ".5rem", "type": "dimension", "source": "$popover-header-padding-y" },
+ "x": { "value": "1rem", "type": "dimension", "source": "$popover-header-padding-x" }
}
},
"body": {
"padding": {
- "y": { "value": "{spacing.popover.header.padding.y}", "source": "$popover-body-padding-y" },
- "x": { "value": "{spacing.popover.header.padding.x}", "source": "$popover-body-padding-x" }
+ "y": {
+ "value": "{spacing.popover.header.padding.y}",
+ "type": "dimension",
+ "source": "$popover-body-padding-y"
+ },
+ "x": {
+ "value": "{spacing.popover.header.padding.x}",
+ "type": "dimension",
+ "source": "$popover-body-padding-x"
+ }
}
},
"icon": {
- "margin-right": { "value": ".5rem", "source": "$popover-icon-margin-right" }
+ "margin-right": { "value": ".5rem", "type": "dimension", "source": "$popover-icon-margin-right" }
}
}
}
diff --git a/tokens/src/components/ProductTour.json b/tokens/src/components/ProductTour.json
index 72555bbb98..50baac986a 100644
--- a/tokens/src/components/ProductTour.json
+++ b/tokens/src/components/ProductTour.json
@@ -2,26 +2,26 @@
"color": {
"product-tour": {
"checkpoint": {
- "bg": { "value": "{color.light.300}", "source": "$checkpoint-background-color" },
- "body": { "value": "{color.gray.700}", "source": "$checkpoint-body-color" },
- "border": { "value": "{color.brand.500}", "source": "$checkpoint-border-color" },
- "breadcrumb": { "value": "{color.primary.500}", "source": "$checkpoint-breadcrumb-color" },
+ "bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" },
+ "body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" },
+ "border": { "value": "{color.brand.500}", "type": "color", "source": "$checkpoint-border-color" },
+ "breadcrumb": { "value": "{color.primary.500}", "type": "color", "source": "$checkpoint-breadcrumb-color" },
"box-shadow": {
"value": "{color.black}",
+ "type": "color",
"source": "$checkpoint-box-shadow-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.3
- }]
+ "modify": [{ "type": "alpha", "amount": 0.3 }]
},
"arrow": {
"border": {
"top": {
"value": "{color.product-tour.checkpoint.bg}",
+ "type": "color",
"source": "$checkpoint-arrow-border-top-color"
},
"transparent": {
"value": "transparent",
+ "type": "color",
"source": "$checkpoint-arrow-border-color-transparent"
}
}
@@ -33,21 +33,24 @@
"product-tour": {
"checkpoint": {
"width": {
- "border": { "value": "8px", "source": "$checkpoint-border-width" },
- "arrow": { "value": "15px", "source": "$checkpoint-arrow-width" },
- "max": { "value": "480px", "source": "$checkpoint-max-width" }
+ "border": { "value": "8px", "type": "dimension", "source": "$checkpoint-border-width" },
+ "arrow": { "value": "15px", "type": "dimension", "source": "$checkpoint-arrow-width" },
+ "max": { "value": "480px", "type": "dimension", "source": "$checkpoint-max-width" }
},
"arrow": {
"bottom": {
"value": "{size.product-tour.checkpoint.width.arrow} {size.product-tour.checkpoint.width.border}",
+ "type": "dimension",
"source": "$checkpoint-arrow-border-bottom"
},
"top": {
"value": "{size.product-tour.checkpoint.width.arrow}",
+ "type": "dimension",
"source": "$checkpoint-arrow-border-top"
},
"transparent": {
"value": "{size.product-tour.checkpoint.width.arrow}",
+ "type": "dimension",
"source": "$checkpoint-arrow-border-transparent"
}
}
@@ -57,7 +60,7 @@
"elevation": {
"product-tour": {
"checkpoint": {
- "zindex": { "value": "1060", "source": "$checkpoint-z-index" }
+ "zindex": { "value": "1060", "type": "ratio", "source": "$checkpoint-z-index" }
}
}
}
diff --git a/tokens/src/components/ProgressBar.json b/tokens/src/components/ProgressBar.json
index ef24a55af4..5b90879298 100644
--- a/tokens/src/components/ProgressBar.json
+++ b/tokens/src/components/ProgressBar.json
@@ -1,52 +1,56 @@
{
"color": {
"progress-bar": {
- "bg": { "value": "transparent", "source": "$progress-bg" },
- "border": { "value": "{color.gray.500}", "source": "$progress-bar-border-color" },
+ "bg": { "value": "transparent", "type": "color", "source": "$progress-bg" },
+ "border": { "value": "{color.gray.500}", "type": "color", "source": "$progress-bar-border-color" },
"bar": {
- "base": { "value": "{color.white}", "source": "$progress-bar-color" },
+ "base": { "value": "{color.white}", "type": "color", "source": "$progress-bar-color" },
"bg": {
- "base": { "value": "{color.accent.a}", "source": "$progress-bar-bg" },
- "annotated": { "value": "{color.dark.500}", "source": "$annotated-progress-bar-bg" }
+ "base": { "value": "{color.accent.a}", "type": "color", "source": "$progress-bar-bg" },
+ "annotated": { "value": "{color.dark.500}", "type": "color", "source": "$annotated-progress-bar-bg" }
}
}
}
},
"typography": {
"progress-bar": {
- "font-size": { "value": "calc({typography.font.size.base} * .75)", "source": "$progress-font-size" }
+ "font-size": {
+ "value": "calc({typography.font.size.base} * .75)", "type": "dimension", "source": "$progress-font-size"
+ }
}
},
"size": {
"progress-bar": {
"height": {
- "base": { "value": "1rem", "source": "$progress-height" },
- "annotated": { "value": ".3125rem", "source": "$annotated-progress-height" }
+ "base": { "value": "1rem", "type": "dimension", "source": "$progress-height" },
+ "annotated": { "value": ".3125rem", "type": "dimension", "source": "$annotated-progress-height" }
},
"border": {
- "width": { "value": "1px", "source": "$progress-bar-border-width" },
- "radius": { "value": "0", "source": "$progress-border-radius" }
+ "width": { "value": "1px", "type": "dimension", "source": "$progress-bar-border-width" },
+ "radius": { "value": "0", "type": "dimension", "source": "$progress-border-radius" }
},
- "threshold-circle": { "value": ".5625rem", "source": "$progress-threshold-circle" }
+ "threshold-circle": { "value": ".5625rem", "type": "dimension", "source": "$progress-threshold-circle" }
}
},
"elevation": {
"progress-bar": {
- "box-shadow": { "value": "none", "source": "$progress-box-shadow" }
+ "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" }
}
},
"spacing": {
"progress-bar": {
"hint": {
- "annotation-gap": { "value": ".5rem", "source": "$progress-hint-annotation-gap" }
+ "annotation-gap": { "value": ".5rem", "type": "dimension", "source": "$progress-hint-annotation-gap" }
}
}
},
"transition": {
"progress-bar": {
"bar": {
- "animation-timing": { "value": "1s linear infinite", "source": "$progress-bar-animation-timing" },
- "transition": { "value": "width .6s ease", "source": "$progress-bar-transition" }
+ "animation-timing": {
+ "value": "1s linear infinite", "type": "transition", "source": "$progress-bar-animation-timing"
+ },
+ "transition": { "value": "width .6s ease", "type": "transition", "source": "$progress-bar-transition" }
}
}
}
diff --git a/tokens/src/components/Scrollable.json b/tokens/src/components/Scrollable.json
index adb164c47c..12d6f06b55 100644
--- a/tokens/src/components/Scrollable.json
+++ b/tokens/src/components/Scrollable.json
@@ -4,11 +4,9 @@
"body": {
"box-shadow": {
"value": "{color.black}",
+ "type": "shadow",
"source": "$scrollable-body-box-shadow",
- "modify": [{
- "type": "alpha",
- "amount": 0.55
- }]
+ "modify": [{ "type": "alpha", "amount": 0.55 }]
}
}
}
diff --git a/tokens/src/components/SearchField.json b/tokens/src/components/SearchField.json
index 0471b1005a..985e34551f 100644
--- a/tokens/src/components/SearchField.json
+++ b/tokens/src/components/SearchField.json
@@ -2,14 +2,14 @@
"color": {
"search-field": {
"border": {
- "base": { "value": "{color.gray.500}", "source": "$search-border-color" },
- "interaction": { "value": "{color.black}", "source": "$search-border-color-interaction" },
- "focus": { "value": "{color.black}", "source": "$search-border-focus-color" }
+ "base": { "value": "{color.gray.500}", "type": "color", "source": "$search-border-color" },
+ "interaction": { "value": "{color.black}", "type": "color", "source": "$search-border-color-interaction" },
+ "focus": { "value": "{color.black}", "type": "color", "source": "$search-border-focus-color" }
},
"button": {
"bg": {
- "primary": { "value": "{color.primary.500}", "source": "$search-btn-primary-bg" },
- "brand": { "value": "{color.brand.500}", "source": "$search-btn-brand-bg" }
+ "primary": { "value": "{color.primary.500}", "type": "color", "source": "$search-btn-primary-bg" },
+ "brand": { "value": "{color.brand.500}", "type": "color", "source": "$search-btn-brand-bg" }
}
}
}
@@ -18,25 +18,26 @@
"search-field": {
"border": {
"width": {
- "base": { "value": ".0625rem", "source": "$search-border-width" },
- "focus": { "value": ".3125rem", "source": "$search-border-focus-width" }
+ "base": { "value": ".0625rem", "type": "dimension", "source": "$search-border-width" },
+ "focus": { "value": ".3125rem", "type": "dimension", "source": "$search-border-focus-width" }
},
- "radius": { "value": "0", "source": "$search-border-radius" }
+ "radius": { "value": "0", "type": "dimension", "source": "$search-border-radius" }
},
"search-input-height": {
"value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
+ "type": "dimension",
"source": "$input-height-search"
}
}
},
"spacing": {
"search-field": {
- "margin-button": { "value": ".5rem", "source": "$search-button-margin" }
+ "margin-button": { "value": ".5rem", "type": "dimension", "source": "$search-button-margin" }
}
},
"other": {
"search-field": {
- "disabled-opacity": { "value": ".3", "source": "$search-disabled-opacity" }
+ "disabled-opacity": { "value": ".3", "type": "ratio", "source": "$search-disabled-opacity" }
}
}
}
diff --git a/tokens/src/components/SelectableBox.json b/tokens/src/components/SelectableBox.json
index fc98dd798c..aa4c0a71ab 100644
--- a/tokens/src/components/SelectableBox.json
+++ b/tokens/src/components/SelectableBox.json
@@ -1,9 +1,9 @@
{
"spacing": {
"selectable-box": {
- "padding": { "value": "1rem", "source": "$selectable-box-padding" },
- "border-radius": { "value": ".25rem", "source": "$selectable-box-border-radius" },
- "box-space": { "value": ".75rem", "source": "$selectable-box-space" }
+ "padding": { "value": "1rem", "type": "dimension", "source": "$selectable-box-padding" },
+ "border-radius": { "value": ".25rem", "type": "dimension", "source": "$selectable-box-border-radius" },
+ "box-space": { "value": ".75rem", "type": "dimension", "source": "$selectable-box-space" }
}
}
}
diff --git a/tokens/src/components/Sheet.json b/tokens/src/components/Sheet.json
index a8a2ab0d18..bd6a3cb1e5 100644
--- a/tokens/src/components/Sheet.json
+++ b/tokens/src/components/Sheet.json
@@ -4,20 +4,16 @@
"skrim": {
"bg": {
"value": "{color.gray.300}",
+ "type": "color",
"source": "$sheet-skrim-bg",
- "modify": [{
- "type": "alpha",
- "amount": 0.5
- }]
+ "modify": [{ "type": "alpha", "amount": 0.5 }]
},
"component": {
"box-shadow": {
"value": "{color.black}",
+ "type": "color",
"source": "$sheet-skrim-component-box-shadow",
- "modify": [{
- "type": "alpha",
- "amount": 0.15
- }]
+ "modify": [{ "type": "alpha", "amount": 0.15 }]
}
}
}
@@ -26,8 +22,8 @@
"elevation": {
"sheet": {
"zindex": {
- "backdrop": { "value": "1031", "source": "$zindex-sheet-backdrop" },
- "main": { "value": "1032", "source": "$zindex-sheet" }
+ "backdrop": { "value": "1031", "type": "ratio", "source": "$zindex-sheet-backdrop" },
+ "main": { "value": "1032", "type": "ratio", "source": "$zindex-sheet" }
}
}
}
diff --git a/tokens/src/components/Spinner.json b/tokens/src/components/Spinner.json
index 65d76f4419..a67d8fabe9 100644
--- a/tokens/src/components/Spinner.json
+++ b/tokens/src/components/Spinner.json
@@ -2,14 +2,14 @@
"size": {
"spinner": {
"base": {
- "width": { "value": "2rem", "source": "$spinner-width" },
- "height": { "value": "{size.spinner.base.width}", "source": "$spinner-height" },
- "border-width": { "value": ".25em", "source": "$spinner-border-width" }
+ "width": { "value": "2rem", "type": "dimension", "source": "$spinner-width" },
+ "height": { "value": "{size.spinner.base.width}", "type": "dimension", "source": "$spinner-height" },
+ "border-width": { "value": ".25em", "type": "dimension", "source": "$spinner-border-width" }
},
"sm": {
- "width": { "value": "1rem", "source": "$spinner-width-sm" },
- "height": { "value": "{size.spinner.sm.width}", "source": "$spinner-height-sm" },
- "border-width": { "value": ".2em", "source": "$spinner-border-width-sm" }
+ "width": { "value": "1rem", "type": "dimension", "source": "$spinner-width-sm" },
+ "height": { "value": "{size.spinner.sm.width}", "type": "dimension", "source": "$spinner-height-sm" },
+ "border-width": { "value": ".2em", "type": "dimension", "source": "$spinner-border-width-sm" }
}
}
}
diff --git a/tokens/src/components/Stack.json b/tokens/src/components/Stack.json
index 2e3d50c058..8faa1f01ff 100644
--- a/tokens/src/components/Stack.json
+++ b/tokens/src/components/Stack.json
@@ -1,7 +1,7 @@
{
"size": {
"stack": {
- "gap": { "value": "0", "source": "$stack-gap" }
+ "gap": { "value": "0", "type": "dimension", "source": "$stack-gap" }
}
}
}
diff --git a/tokens/src/components/Sticky.json b/tokens/src/components/Sticky.json
index c42312928b..d8dec48f6f 100644
--- a/tokens/src/components/Sticky.json
+++ b/tokens/src/components/Sticky.json
@@ -4,10 +4,12 @@
"shadow": {
"top": {
"value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$sticky-shadow-top"
},
"bottom": {
"value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$sticky-shadow-bottom"
}
}
@@ -15,7 +17,7 @@
},
"spacing": {
"sticky": {
- "offset": { "value": "0", "source": "$sticky-offset" }
+ "offset": { "value": "0", "type": "dimension", "source": "$sticky-offset" }
}
}
}
diff --git a/tokens/src/components/Tabs.json b/tokens/src/components/Tabs.json
index d6577dfb07..47a480abb6 100644
--- a/tokens/src/components/Tabs.json
+++ b/tokens/src/components/Tabs.json
@@ -2,15 +2,17 @@
"size": {
"tabs": {
"notification": {
- "height": { "value": "1rem", "source": "$tab-notification-height" },
- "width": { "value": "1rem", "source": "$tab-notification-width" }
+ "height": { "value": "1rem", "type": "dimension", "source": "$tab-notification-height" },
+ "width": { "value": "1rem", "type": "dimension", "source": "$tab-notification-width" }
}
}
},
"typography": {
"tabs": {
"notification": {
- "font-size": { "value": "{typography.font.size.xs}", "source": "$tab-notification-font-size" }
+ "font-size": {
+ "value": "{typography.font.size.xs}", "type": "dimension", "source": "$tab-notification-font-size"
+ }
}
}
}
diff --git a/tokens/src/components/Toast.json b/tokens/src/components/Toast.json
index 27bb618b68..dec1b7447a 100644
--- a/tokens/src/components/Toast.json
+++ b/tokens/src/components/Toast.json
@@ -1,62 +1,59 @@
{
"color": {
"toast": {
- "base": { "value": "inherit", "source": "$toast-color" },
- "bg": { "value": "{color.gray.700}", "source": "$toast-background-color" },
+ "base": { "value": "inherit", "type": "color", "source": "$toast-color" },
+ "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-background-color" },
"border": {
"value": "{color.black}",
+ "type": "color",
"source": "$toast-border-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.1
- }]
+ "modify": [{ "type": "alpha", "amount": 0.1 }]
},
"header": {
- "text": { "value": "{color.white}", "source": "$toast-header-color" },
- "bg": { "value": "{color.gray.700}", "source": "$toast-header-background-color" },
+ "text": { "value": "{color.white}", "type": "color", "source": "$toast-header-color" },
+ "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-header-background-color" },
"border": {
"value": "{color.black}",
+ "type": "color",
"source": "$toast-header-border-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.5
- }]
+ "modify": [{ "type": "alpha", "amount": 0.5 }]
}
}
}
},
"typography": {
"toast": {
- "font-size": { "value": ".875rem", "source": "$toast-font-size" }
+ "font-size": { "value": ".875rem", "type": "dimension", "source": "$toast-font-size" }
}
},
"elevation": {
"toast": {
"box-shadow": {
"value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$toast-box-shadow"
}
}
},
"size": {
"toast": {
- "max-width": { "value": "400px", "source": "$toast-max-width" },
+ "max-width": { "value": "400px", "type": "dimension", "source": "$toast-max-width" },
"border": {
- "width": { "value": "1px", "source": "$toast-border-width" },
- "radius": { "value": ".25rem", "source": "$toast-border-radius" }
+ "width": { "value": "1px", "type": "dimension", "source": "$toast-border-width" },
+ "radius": { "value": ".25rem", "type": "dimension", "source": "$toast-border-radius" }
}
}
},
"spacing": {
"toast": {
"padding": {
- "x": { "value": ".75rem", "source": "$toast-padding-x" },
- "y": { "value": ".25rem", "source": "$toast-padding-y" }
+ "x": { "value": ".75rem", "type": "dimension", "source": "$toast-padding-x" },
+ "y": { "value": ".25rem", "type": "dimension", "source": "$toast-padding-y" }
},
"container": {
"gutter": {
- "lg": { "value": "1.25rem", "source": "$toast-container-gutter-lg" },
- "sm": { "value": ".625rem", "source": "$toast-container-gutter-sm" }
+ "lg": { "value": "1.25rem", "type": "dimension", "source": "$toast-container-gutter-lg" },
+ "sm": { "value": ".625rem", "type": "dimension", "source": "$toast-container-gutter-sm" }
}
}
}
diff --git a/tokens/src/components/Tooltip.json b/tokens/src/components/Tooltip.json
index c983093e61..2207ee23eb 100644
--- a/tokens/src/components/Tooltip.json
+++ b/tokens/src/components/Tooltip.json
@@ -1,54 +1,57 @@
{
"typography": {
"tooltip": {
- "font-size": { "value": "{typography.font.size.sm}", "source": "$tooltip-font-size" }
+ "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$tooltip-font-size" }
}
},
"color": {
"tooltip": {
- "text": { "value": "{color.white}", "source": "$tooltip-color" },
- "light": { "value": "{color.black}", "source": "$tooltip-color-light" },
+ "text": { "value": "{color.white}", "type": "color", "source": "$tooltip-color" },
+ "light": { "value": "{color.black}", "type": "color", "source": "$tooltip-color-light" },
"bg": {
- "base": { "value": "{color.black}", "source": "$tooltip-bg" },
- "light": { "value": "{color.white}", "source": "$tooltip-bg-light" }
+ "base": { "value": "{color.black}", "type": "color", "source": "$tooltip-bg" },
+ "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-bg-light" }
},
"arrow": {
- "base": { "value": "{color.tooltip.bg.base}", "source": "$tooltip-arrow-color" },
- "light": { "value": "{color.white}", "source": "$tooltip-arrow-color-light" }
+ "base": { "value": "{color.tooltip.bg.base}", "type": "color", "source": "$tooltip-arrow-color" },
+ "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-arrow-color-light" }
}
}
},
"spacing": {
"tooltip": {
"padding": {
- "y": { "value": ".5rem", "source": "$tooltip-padding-y" },
- "x": { "value": ".5rem", "source": "$tooltip-padding-x" }
+ "y": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-y" },
+ "x": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-x" }
},
- "margin": { "value": "0", "source": "$tooltip-margin" }
+ "margin": { "value": "0", "type": "dimension", "source": "$tooltip-margin" }
}
},
"elevation": {
"tooltip": {
"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": "$tooltip-box-shadow"
},
- "zindex": { "value": "1070", "source": "$zindex-tooltip" }
+ "zindex": { "value": "1070", "type": "ratio", "source": "$zindex-tooltip" }
}
},
"size": {
"tooltip": {
- "max-width": { "value": "200px", "source": "$tooltip-max-width" },
+ "max-width": { "value": "200px", "type": "dimension", "source": "$tooltip-max-width" },
"arrow": {
- "height": { "value": ".4rem", "source": "$tooltip-arrow-height" },
- "width": { "value": ".8rem", "source": "$tooltip-arrow-width" }
+ "height": { "value": ".4rem", "type": "dimension", "source": "$tooltip-arrow-height" },
+ "width": { "value": ".8rem", "type": "dimension", "source": "$tooltip-arrow-width" }
},
- "border-radius": { "value": "{size.border.radius.base}", "source": "$tooltip-border-radius" }
+ "border-radius": {
+ "value": "{size.border.radius.base}", "type": "dimension", "source": "$tooltip-border-radius"
+ }
}
},
"other": {
"tooltip": {
- "opacity": { "value": "1", "source": "$tooltip-opacity" }
+ "opacity": { "value": "1", "type": "ratio", "source": "$tooltip-opacity" }
}
}
}
diff --git a/tokens/src/components/general/body.json b/tokens/src/components/general/body.json
index c95574a0c1..39f2dce270 100644
--- a/tokens/src/components/general/body.json
+++ b/tokens/src/components/general/body.json
@@ -1,8 +1,8 @@
{
"color": {
"body": {
- "base": { "value": "{color.gray.700}", "source": "$body-color" },
- "bg": { "value": "{color.bg.base}", "source": "$body-bg" }
+ "base": { "value": "{color.gray.700}", "type": "color", "source": "$body-color" },
+ "bg": { "value": "{color.bg.base}", "type": "color", "source": "$body-bg" }
}
}
}
diff --git a/tokens/src/components/general/caret.json b/tokens/src/components/general/caret.json
index 5853056ae2..b9e9fdac9c 100644
--- a/tokens/src/components/general/caret.json
+++ b/tokens/src/components/general/caret.json
@@ -1,13 +1,13 @@
{
"size": {
"caret": {
- "width": { "value": ".3em", "source": "$caret-width" }
+ "width": { "value": ".3em", "type": "dimension", "source": "$caret-width" }
}
},
"spacing": {
"caret": {
- "base": { "value": ".255em", "source": "$caret-spacing" },
- "vertical-align": { "value": ".255em", "source": "$caret-vertical-align" }
+ "base": { "value": ".255em", "type": "dimension", "source": "$caret-spacing" },
+ "vertical-align": { "value": ".255em", "type": "dimension", "source": "$caret-vertical-align" }
}
}
}
diff --git a/tokens/src/components/general/headings.json b/tokens/src/components/general/headings.json
index cd9b4ed704..4bcc184689 100644
--- a/tokens/src/components/general/headings.json
+++ b/tokens/src/components/general/headings.json
@@ -1,21 +1,21 @@
{
"color": {
"headings": {
- "base": { "value": "{color.black}", "source": "$headings-color" }
+ "base": { "value": "{color.black}", "type": "color", "source": "$headings-color" }
}
},
"typography": {
"headings": {
"font": {
- "family": { "value": "inherit", "source": "$headings-font-family" },
- "weight": { "value": "{typography.font.weight.bold}", "source": "$headings-font-weight" }
+ "family": { "value": "inherit", "type": "fontFamily", "source": "$headings-font-family" },
+ "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$headings-font-weight" }
},
- "line-height": { "value": "1.25", "source": "$headings-line-height" }
+ "line-height": { "value": "1.25", "type": "dimension", "source": "$headings-line-height" }
}
},
"spacing": {
"headings": {
- "margin-bottom": { "value": ".5rem", "source": "$headings-margin-bottom" }
+ "margin-bottom": { "value": ".5rem", "type": "dimension", "source": "$headings-margin-bottom" }
}
}
}
diff --git a/tokens/src/components/general/hr.json b/tokens/src/components/general/hr.json
index ab36e9af9f..38e328347c 100644
--- a/tokens/src/components/general/hr.json
+++ b/tokens/src/components/general/hr.json
@@ -2,8 +2,8 @@
"size": {
"hr": {
"border": {
- "width": { "value": "{size.border.width}", "source": "$hr-border-width" },
- "margin-y": { "value": "{spacing.spacer.base}", "source": "$hr-margin-y" }
+ "width": { "value": "{size.border.width}", "type": "dimension", "source": "$hr-border-width" },
+ "margin-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$hr-margin-y" }
}
}
},
@@ -11,11 +11,9 @@
"hr": {
"border": {
"value": "{color.black}",
+ "type": "color",
"source": "$hr-border-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.1
- }]
+ "modify": [{ "type": "alpha", "amount": 0.1 }]
}
}
}
diff --git a/tokens/src/components/general/input.json b/tokens/src/components/general/input.json
index 3e4f556650..06a11d4a92 100644
--- a/tokens/src/components/general/input.json
+++ b/tokens/src/components/general/input.json
@@ -1,24 +1,26 @@
{
"color": {
"input": {
- "btn-focus": { "value": "{color.input.focus}", "source": "$input-btn-focus-color" }
+ "btn-focus": { "value": "{color.input.focus}", "type": "color", "source": "$input-btn-focus-color" }
}
},
"typography": {
"input": {
"btn": {
"font": {
- "family": { "value": "inherit", "source": "$input-btn-font-family" },
+ "family": { "value": "inherit", "type": "fontFamily", "source": "$input-btn-font-family" },
"size": {
- "base": { "value": "1.125rem", "source": "$input-btn-font-size" },
- "sm": { "value": ".875rem", "source": "$input-btn-font-size-sm" },
- "lg": { "value": "1.325rem", "source": "$input-btn-font-size-lg" }
+ "base": { "value": "1.125rem", "type": "dimension", "source": "$input-btn-font-size" },
+ "sm": { "value": ".875rem", "type": "dimension", "source": "$input-btn-font-size-sm" },
+ "lg": { "value": "1.325rem", "type": "dimension", "source": "$input-btn-font-size-lg" }
}
},
"line-height": {
- "base": { "value": "1.3333", "source": "$input-btn-line-height" },
- "sm": { "value": "1.4286", "source": "$input-btn-line-height-sm" },
- "lg": { "value": "{typography.line-height.lg}", "source": "$input-btn-line-height-lg" }
+ "base": { "value": "1.3333", "type": "dimension", "source": "$input-btn-line-height" },
+ "sm": { "value": "1.4286", "type": "dimension", "source": "$input-btn-line-height-sm" },
+ "lg": {
+ "value": "{typography.line-height.lg}", "type": "dimension", "source": "$input-btn-line-height-lg"
+ }
}
}
}
@@ -27,15 +29,15 @@
"input": {
"btn": {
"padding": {
- "y": { "value": ".5625rem", "source": "$input-btn-padding-y" },
- "x": { "value": "1rem", "source": "$input-btn-padding-x" },
+ "y": { "value": ".5625rem", "type": "dimension", "source": "$input-btn-padding-y" },
+ "x": { "value": "1rem", "type": "dimension", "source": "$input-btn-padding-x" },
"sm": {
- "y": { "value": ".4375rem", "source": "$input-btn-padding-y-sm" },
- "x": { "value": ".75rem", "source": "$input-btn-padding-x-sm" }
+ "y": { "value": ".4375rem", "type": "dimension", "source": "$input-btn-padding-y-sm" },
+ "x": { "value": ".75rem", "type": "dimension", "source": "$input-btn-padding-x-sm" }
},
"lg": {
- "y": { "value": ".6875rem", "source": "$input-btn-padding-y-lg" },
- "x": { "value": "1.25rem", "source": "$input-btn-padding-x-lg" }
+ "y": { "value": ".6875rem", "type": "dimension", "source": "$input-btn-padding-y-lg" },
+ "x": { "value": "1.25rem", "type": "dimension", "source": "$input-btn-padding-x-lg" }
}
}
}
@@ -44,8 +46,10 @@
"size": {
"input": {
"btn": {
- "border-width": { "value": "{size.border.width}", "source": "$input-btn-border-width" },
- "focus-width": { "value": "1px", "source": "$input-btn-focus-width" }
+ "border-width": {
+ "value": "{size.border.width}", "type": "dimension", "source": "$input-btn-border-width"
+ },
+ "focus-width": { "value": "1px", "type": "dimension", "source": "$input-btn-focus-width" }
}
}
},
@@ -54,6 +58,7 @@
"btn-focus": {
"box-shadow": {
"value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}",
+ "type": "shadow",
"source": "$input-btn-focus-box-shadow"
}
}
diff --git a/tokens/src/components/general/link.json b/tokens/src/components/general/link.json
index 5fcde3dc0a..9dc6a93434 100644
--- a/tokens/src/components/general/link.json
+++ b/tokens/src/components/general/link.json
@@ -1,120 +1,96 @@
{
"color": {
"link": {
- "base": { "value": "{color.info.500}", "source": "$link-color" },
+ "base": { "value": "{color.info.500}", "type": "color", "source": "$link-color" },
"hover": {
"value": "{color.link.base}",
+ "type": "color",
"source": "$link-hover-color",
- "modify": [{
- "type": "darken",
- "amount": 0.15
- }]
+ "modify": [{ "type": "darken", "amount": 0.15 }]
},
"inline": {
- "base": { "value": "{color.info.500}", "source": "$inline-link-color" },
+ "base": { "value": "{color.info.500}", "type": "color", "source": "$inline-link-color" },
"decoration": {
"value": "{color.link.inline.base}",
+ "type": "color",
"source": "$inline-link-decoration-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.3
- }]
+ "modify": [{ "type": "alpha", "amount": 0.3 }]
},
"hover": {
"base": {
"value": "{color.link.inline.base}",
+ "type": "color",
"source": "$inline-link-hover-color",
- "modify": [{
- "type": "darken",
- "amount": 0.15
- }]
+ "modify": [{ "type": "darken", "amount": 0.15 }]
},
"decoration": {
"value": "{color.link.inline.hover.base}",
+ "type": "color",
"source": "$inline-link-hover-decoration-color",
- "modify": [{
- "type": "alpha",
- "amount": 1
- }]
+ "modify": [{ "type": "alpha", "amount": 1 }]
}
}
},
"muted": {
- "base": { "value": "{color.primary.500}", "source": "$muted-link-color" },
+ "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-link-color" },
"hover": {
"value": "{color.link.muted.base}",
+ "type": "color",
"source": "$muted-link-hover-color",
- "modify": [{
- "type": "darken",
- "amount": 0.15
- }]
+ "modify": [{ "type": "darken", "amount": 0.15}]
},
"inline": {
- "base": { "value": "{color.primary.500}", "source": "$muted-inline-link-color" },
+ "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-inline-link-color" },
"decoration": {
"value": "{color.link.muted.inline.base}",
+ "type": "color",
"source": "$muted-inline-link-decoration-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.3
- }]
+ "modify": [{ "type": "alpha", "amount": 0.3 }]
},
"hover": {
"base": {
"value": "{color.link.muted.inline.base}",
+ "type": "color",
"source": "$muted-inline-link-hover-color",
- "modify": [{
- "type": "darken",
- "amount": 0.15
- }]
+ "modify": [{ "type": "darken", "amount": 0.15 }]
},
"decoration": {
"value": "{color.link.muted.inline.hover.base}",
+ "type": "color",
"source": "$muted-inline-link-hover-decoration-color",
- "modify": [{
- "type": "alpha",
- "amount": 1
- }]
+ "modify": [{ "type": "alpha", "amount": 1 }]
}
}
}
},
"brand": {
- "base": { "value": "{color.brand.500}", "source": "$brand-link-color" },
+ "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-link-color" },
"hover": {
"value": "{color.link.brand.base}",
+ "type": "color",
"source": "$brand-link-hover-color",
- "modify": [{
- "type": "darken",
- "amount": 0.15
- }]
+ "modify": [{ "type": "darken", "amount": 0.15 }]
},
"inline": {
- "base": { "value": "{color.brand.500}", "source": "$brand-inline-link-color" },
+ "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-inline-link-color" },
"decoration": {
"value": "{color.link.brand.inline.base}",
+ "type": "color",
"source": "$brand-inline-link-decoration-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.3
- }]
+ "modify": [{ "type": "alpha", "amount": 0.3 }]
},
"hover": {
"base": {
"value": "{color.link.brand.inline.base}",
+ "type": "color",
"source": "$brand-inline-link-hover-color",
- "modify": [{
- "type": "darken",
- "amount": 0.15
- }]
+ "modify": [{ "type": "darken", "amount": 0.15 }]
},
"decoration": {
"value": "{color.link.brand.inline.hover.base}",
+ "type": "color",
"source": "$brand-inline-link-hover-decoration-color",
- "modify": [{
- "type": "alpha",
- "amount": 1
- }]
+ "modify": [{ "type": "alpha", "amount": 1 }]
}
}
}
@@ -124,26 +100,26 @@
"typography": {
"link": {
"decoration": {
- "base": { "value": "none", "source": "$link-decoration" },
- "hover": { "value": "underline", "source": "$link-hover-decoration" },
+ "base": { "value": "none", "type": "textDecoration", "source": "$link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$link-hover-decoration" },
"inline": {
- "base": { "value": "underline", "source": "$inline-link-decoration" },
- "hover": { "value": "underline", "source": "$inline-link-hover-decoration" }
+ "base": { "value": "underline", "type": "textDecoration", "source": "$inline-link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$inline-link-hover-decoration" }
},
"muted": {
- "base": { "value": "none", "source": "$muted-link-decoration" },
- "hover": { "value": "underline", "source": "$muted-link-hover-decoration" },
+ "base": { "value": "none", "type": "textDecoration", "source": "$muted-link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-link-hover-decoration" },
"inline": {
- "base": { "value": "underline", "source": "$muted-inline-link-decoration" },
- "hover": { "value": "underline", "source": "$muted-inline-link-hover-decoration" }
+ "base": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-hover-decoration" }
}
},
"brand": {
- "base": { "value": "none", "source": "$brand-link-decoration" },
- "hover": { "value": "underline", "source": "$brand-link-hover-decoration" },
+ "base": { "value": "none", "type": "textDecoration", "source": "$brand-link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-link-hover-decoration" },
"inline": {
- "base": { "value": "underline", "source": "$brand-inline-link-decoration" },
- "hover": { "value": "underline", "source": "$brand-inline-link-hover-decoration" }
+ "base": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-decoration" },
+ "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-hover-decoration" }
}
}
}
@@ -152,7 +128,9 @@
"other": {
"link": {
"emphasized-hover": {
- "darken-percentage": { "value": "15%", "source": "$emphasized-link-hover-darken-percentage" }
+ "darken-percentage": {
+ "value": "15%", "type": "percentage", "source": "$emphasized-link-hover-darken-percentage"
+ }
}
}
}
diff --git a/tokens/src/components/general/list.json b/tokens/src/components/general/list.json
index f0f5a9d044..4dc246a97b 100644
--- a/tokens/src/components/general/list.json
+++ b/tokens/src/components/general/list.json
@@ -1,50 +1,54 @@
{
"typography": {
"dt": {
- "font-weight": { "value": "{typography.font.weight.bold}", "source": "$dt-font-weight" }
+ "font-weight": {
+ "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$dt-font-weight"
+ }
}
},
"color": {
"list-group": {
- "base": { "value": "inherit", "source": "$list-group-color" },
+ "base": { "value": "inherit", "type": "color", "source": "$list-group-color" },
"bg": {
- "base": { "value": "{color.bg.base}", "source": "$list-group-bg" },
- "hover": { "value": "{color.gray.100}", "source": "$list-group-hover-bg" }
+ "base": { "value": "{color.bg.base}", "type": "color", "source": "$list-group-bg" },
+ "hover": { "value": "{color.gray.100}", "type": "color", "source": "$list-group-hover-bg" }
},
"border": {
"value": "{color.black}",
+ "type": "color",
"source": "$list-group-border-color",
- "modify": [{
- "type": "alpha",
- "amount": 0.125
- }]
+ "modify": [{ "type": "alpha", "amount": 0.125 }]
},
"active": {
- "base": { "value": "{color.active}", "source": "$list-group-active-color" },
- "border": { "value": "{color.list-group.active.bg}", "source": "$list-group-active-border-color" },
- "bg": { "value": "{color.bg.active}", "source": "$list-group-active-bg" }
+ "base": { "value": "{color.active}", "type": "color", "source": "$list-group-active-color" },
+ "border": {
+ "value": "{color.list-group.active.bg}", "type": "color", "source": "$list-group-active-border-color"
+ },
+ "bg": { "value": "{color.bg.active}", "type": "color", "source": "$list-group-active-bg" }
},
"disabled": {
- "base": { "value": "{color.gray.600}", "source": "$list-group-disabled-color" },
- "bg": { "value": "{color.list-group.bg.base}", "source": "$list-group-disabled-bg" }
+ "base": { "value": "{color.gray.600}", "type": "color", "source": "$list-group-disabled-color" },
+ "bg": { "value": "{color.list-group.bg.base}", "type": "color", "source": "$list-group-disabled-bg" }
},
"action": {
- "base": { "value": "{color.gray.700}", "source": "$list-group-action-color" },
- "hover": { "value": "{color.list-group.action.base}", "source": "$list-group-action-hover-color" },
+ "base": { "value": "{color.gray.700}", "type": "color", "source": "$list-group-action-color" },
+ "hover": {
+ "value": "{color.list-group.action.base}", "type": "color", "source": "$list-group-action-hover-color"
+ },
"active": {
- "base": { "value": "{color.body.base}", "source": "$list-group-action-active-color" },
- "bg": { "value": "{color.gray.200}", "source": "$list-group-action-active-bg" }
+ "base": { "value": "{color.body.base}", "type": "color", "source": "$list-group-action-active-color" },
+ "bg": { "value": "{color.gray.200}", "type": "color", "source": "$list-group-action-active-bg" }
}
}
}
},
"spacing": {
"list": {
- "inline-padding": { "value": ".5rem", "source": "$list-inline-padding" },
+ "inline-padding": { "value": ".5rem", "type": "dimension", "source": "$list-inline-padding" },
"group-item": {
"padding": {
- "y": { "value": ".75rem", "source": "$list-group-item-padding-y" },
- "x": { "value": "1.25rem", "source": "$list-group-item-padding-x" }
+ "y": { "value": ".75rem", "type": "dimension", "source": "$list-group-item-padding-y" },
+ "x": { "value": "1.25rem", "type": "dimension", "source": "$list-group-item-padding-x" }
}
}
}
@@ -52,8 +56,8 @@
"size": {
"list-group": {
"border": {
- "width": { "value": "{size.border.width}", "source": "$list-group-border-width" },
- "radius": { "value": "{size.border.radius.base}", "source": "$list-group-border-radius" }
+ "width": { "value": "{size.border.width}", "type": "dimension", "source": "$list-group-border-width" },
+ "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$list-group-border-radius" }
}
}
}
diff --git a/tokens/src/components/general/text.json b/tokens/src/components/general/text.json
index b87144e6b9..6fb012fb1e 100644
--- a/tokens/src/components/general/text.json
+++ b/tokens/src/components/general/text.json
@@ -1,20 +1,28 @@
{
"color": {
- "text-muted": { "value": "{color.gray.500}", "source": "$text-muted" },
- "mark-bg": { "value": "#FFF243", "source": "$mark-bg" }
+ "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" },
+ "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" }
},
"spacing": {
"paragraph": {
- "margin-bottom": { "value": "1rem", "source": "$paragraph-margin-bottom" }
+ "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$paragraph-margin-bottom" }
},
- "mark-padding": { "value": ".2em", "source": "$mark-padding" }
+ "mark-padding": { "value": ".2em", "type": "dimension", "source": "$mark-padding" }
},
"typography": {
"blockquote": {
"small": {
- "font-size": { "value": "{typography.font.size.small.base}", "source": "$blockquote-small-font-size" }
+ "font-size": {
+ "value": "{typography.font.size.small.base}",
+ "type": "dimension",
+ "source": "$blockquote-small-font-size"
+ }
},
- "font-size": { "value": "calc({typography.font.size.base} * 1.25)", "source": "$blockquote-font-size" }
+ "font-size": {
+ "value": "calc({typography.font.size.base} * 1.25)",
+ "type": "dimension",
+ "source": "$blockquote-font-size"
+ }
}
}
}
diff --git a/tokens/src/global/breakpoints.json b/tokens/src/global/breakpoints.json
index 057e10ec16..6cc1b4ae30 100644
--- a/tokens/src/global/breakpoints.json
+++ b/tokens/src/global/breakpoints.json
@@ -1,12 +1,12 @@
{
"size": {
"breakpoint": {
- "xs": { "value": "0" },
- "sm": { "value": "576px" },
- "md": { "value": "768px" },
- "lg": { "value": "992px" },
- "xl": { "value": "1200px" },
- "xxl": { "value": "1400px" }
+ "xs": { "value": "0", "type": "dimension" },
+ "sm": { "value": "576px", "type": "dimension" },
+ "md": { "value": "768px", "type": "dimension" },
+ "lg": { "value": "992px", "type": "dimension" },
+ "xl": { "value": "1200px", "type": "dimension" },
+ "xxl": { "value": "1400px", "type": "dimension" }
}
}
}
diff --git a/tokens/src/global/color.json b/tokens/src/global/color.json
index 02ed582cd1..89529b5311 100644
--- a/tokens/src/global/color.json
+++ b/tokens/src/global/color.json
@@ -1,854 +1,494 @@
{
"color": {
- "white": { "value": "#FFFFFF", "source": "$white" },
- "black": { "value": "#000000", "source": "$black" },
- "blue": { "value": "#23419F", "source": "$blue" },
- "red": { "value": "#C32D3A", "source": "$red" },
- "green": { "value": "#178253", "source": "$green" },
- "yellow": { "value": "#FFD900", "source": "$yellow" },
- "teal": { "value": "#006DAA", "source": "$teal" },
+ "white": { "value": "#FFFFFF", "type": "color", "source": "$white" },
+ "black": { "value": "#000000", "type": "color", "source": "$black" },
+ "blue": { "value": "#23419F", "type": "color", "source": "$blue" },
+ "red": { "value": "#C32D3A", "type": "color", "source": "$red" },
+ "green": { "value": "#178253", "type": "color", "source": "$green" },
+ "yellow": { "value": "#FFD900", "type": "color", "source": "$yellow" },
+ "teal": { "value": "#006DAA", "type": "color", "source": "$teal" },
"accent": {
- "a": { "value": "#00BBF9", "source": "$accent-a" },
- "b": { "value": "#FFEE88", "source": "$accent-b" }
+ "a": { "value": "#00BBF9", "type": "color", "source": "$accent-a" },
+ "b": { "value": "#FFEE88", "type": "color", "source": "$accent-b" }
},
"gray": {
- "base": { "value": "#707070", "source": "$gray" },
- "100": { "value": "#EBEBEB", "source": "$gray-100" },
- "200": { "value": "#CCCCCC", "source": "$gray-200" },
- "300": { "value": "#ADADAD", "source": "$gray-300" },
- "400": { "value": "#8F8F8F", "source": "$gray-400" },
- "500": { "value": "{color.gray.base}", "source": "$gray-500" },
- "600": { "value": "#5C5C5C", "source": "$gray-600" },
- "700": { "value": "#454545", "source": "$gray-700" },
- "800": { "value": "#333333", "source": "$gray-800" },
- "900": { "value": "#212529", "source": "$gray-900" }
+ "base": { "value": "#707070", "type": "color", "source": "$gray" },
+ "100": { "value": "#EBEBEB", "type": "color", "source": "$gray-100" },
+ "200": { "value": "#CCCCCC", "type": "color", "source": "$gray-200" },
+ "300": { "value": "#ADADAD", "type": "color", "source": "$gray-300" },
+ "400": { "value": "#8F8F8F", "type": "color", "source": "$gray-400" },
+ "500": { "value": "{color.gray.base}", "type": "color", "source": "$gray-500" },
+ "600": { "value": "#5C5C5C", "type": "color", "source": "$gray-600" },
+ "700": { "value": "#454545", "type": "color", "source": "$gray-700" },
+ "800": { "value": "#333333", "type": "color", "source": "$gray-800" },
+ "900": { "value": "#212529", "type": "color", "source": "$gray-900" }
},
"primary": {
- "base": { "value": "#0A3055", "source": "$primary" },
+ "base": { "value": "#0A3055", "type": "color", "source": "$primary" },
"100": {
"value": "{color.primary.base}",
+ "type": "color",
"source": "$primary-100",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.94"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }]
},
"200": {
"value": "{color.primary.base}",
+ "type": "color",
"source": "$primary-200",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.75"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }]
},
"300": {
"value": "{color.primary.base}",
+ "type": "color",
"source": "$primary-300",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.50"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50"}]
},
"400": {
"value": "{color.primary.base}",
+ "type": "color",
"source": "$primary-400",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.25"
- }
- ]
- },
- "500": { "value": "{color.primary.base}", "source": "$primary-500" },
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }]
+ },
+ "500": { "value": "{color.primary.base}", "type": "color", "source": "$primary-500" },
"600": {
"value": "{color.primary.base}",
+ "type": "color",
"source": "$primary-600",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.10"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }]
},
"700": {
"value": "{color.primary.base}",
+ "type": "color",
"source": "$primary-700",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.20"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }]
},
"800": {
"value": "{color.primary.base}",
+ "type": "color",
"source": "$primary-800",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.25"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }]
},
"900": {
"value": "{color.primary.base}",
+ "type": "color",
"source": "$primary-900",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.30"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }]
}
},
"secondary": {
- "base": { "value": "{color.gray.700}", "source": "$secondary" },
+ "base": { "value": "{color.gray.700}", "type": "color", "source": "$secondary" },
"100": {
"value": "{color.secondary.base}",
+ "type": "color",
"source": "$secondary-100",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.94"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }]
},
"200": {
"value": "{color.secondary.base}",
+ "type": "color",
"source": "$secondary-200",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.75"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }]
},
"300": {
"value": "{color.secondary.base}",
+ "type": "color",
"source": "$secondary-300",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.50"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }]
},
"400": {
"value": "{color.secondary.base}",
+ "type": "color",
"source": "$secondary-400",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.25"
- }
- ]
- },
- "500": { "value": "{color.secondary.base}", "source": "$secondary-500"},
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }]
+ },
+ "500": { "value": "{color.secondary.base}", "type": "color", "source": "$secondary-500"},
"600": {
"value": "{color.secondary.base}",
+ "type": "color",
"source": "$secondary-600",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.10"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }]
},
"700": {
"value": "{color.secondary.base}",
+ "type": "color",
"source": "$secondary-700",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.20"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }]
},
"800": {
"value": "{color.secondary.base}",
+ "type": "color",
"source": "$secondary-800",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.25"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }]
},
"900": {
"value": "{color.secondary.base}",
+ "type": "color",
"source": "$secondary-900",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.30"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }]
}
},
"brand": {
- "base": { "value": "#9D0054", "source": "$brand" },
+ "base": { "value": "#9D0054", "type": "color", "source": "$brand" },
"100": {
"value": "{color.brand.base}",
+ "type": "color",
"source": "$brand-100",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.94"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }]
},
"200": {
"value": "{color.brand.base}",
+ "type": "color",
"source": "$brand-200",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.75"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }]
},
"300": {
"value": "{color.brand.base}",
+ "type": "color",
"source": "$brand-300",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.50"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }]
},
"400": {
"value": "{color.brand.base}",
+ "type": "color",
"source": "$brand-400",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.25"
- }
- ]
- },
- "500": { "value": "{color.brand.base}", "source": "$brand-500" },
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }]
+ },
+ "500": { "value": "{color.brand.base}", "type": "color", "source": "$brand-500" },
"600": {
"value": "{color.brand.base}",
+ "type": "color",
"source": "$brand-600",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.10"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }]
},
"700": {
"value": "{color.brand.base}",
+ "type": "color",
"source": "$brand-700",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.20"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }]
},
"800": {
"value": "{color.brand.base}",
+ "type": "color",
"source": "$brand-800",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.25"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }]
},
"900": {
"value": "{color.brand.base}",
+ "type": "color",
"source": "$brand-900",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.30"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }]
}
},
"success": {
- "base": { "value": "{color.green}", "source": "$success" },
+ "base": { "value": "{color.green}", "type": "color", "source": "$success" },
"100": {
"value": "{color.success.base}",
+ "type": "color",
"source": "$success-100",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.94"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }]
},
"200": {
"value": "{color.success.base}",
+ "type": "color",
"source": "$success-200",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.75"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }]
},
"300": {
"value": "{color.success.base}",
+ "type": "color",
"source": "$success-300",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.50"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }]
},
"400": {
"value": "{color.success.base}",
+ "type": "color",
"source": "$success-400",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.25"
- }
- ]
- },
- "500": { "value": "{color.success.base}", "source": "$success-500" },
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }]
+ },
+ "500": { "value": "{color.success.base}", "type": "color", "source": "$success-500" },
"600": {
"value": "{color.success.base}",
+ "type": "color",
"source": "$success-600",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.10"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }]
},
"700": {
"value": "{color.success.base}",
+ "type": "color",
"source": "$success-700",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.20"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }]
},
"800": {
"value": "{color.success.base}",
+ "type": "color",
"source": "$success-800",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.25"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }]
},
"900": {
"value": "{color.success.base}",
+ "type": "color",
"source": "$success-900",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.30"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }]
}
},
"info": {
- "base": { "value": "{color.teal}", "source": "$info" },
+ "base": { "value": "{color.teal}", "type": "color", "source": "$info" },
"100": {
"value": "{color.info.base}",
+ "type": "color",
"source": "$info-100",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.94"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }]
},
"200": {
"value": "{color.info.base}",
+ "type": "color",
"source": "$info-200",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.75"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }]
},
"300": {
"value": "{color.info.base}",
+ "type": "color",
"source": "$info-300",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.50"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }]
},
"400": {
"value": "{color.info.base}",
+ "type": "color",
"source": "$info-400",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.25"
- }
- ]
- },
- "500": { "value": "{color.info.base}", "source": "$info-500" },
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }]
+ },
+ "500": { "value": "{color.info.base}", "type": "color", "source": "$info-500" },
"600": {
"value": "{color.info.base}",
+ "type": "color",
"source": "$info-600",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.10"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }]
},
"700": {
"value": "{color.info.base}",
+ "type": "color",
"source": "$info-700",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.20"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }]
},
"800": {
"value": "{color.info.base}",
+ "type": "color",
"source": "$info-800",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.25"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25"}]
},
"900": {
"value": "{color.info.base}",
+ "type": "color",
"source": "$info-900",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.30"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }]
}
},
"warning": {
- "base": { "value": "{color.yellow}", "source": "$warning" },
+ "base": { "value": "{color.yellow}", "type": "color", "source": "$warning" },
"100": {
"value": "{color.warning.base}",
+ "type": "color",
"source": "$warning-100",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.94"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }]
},
"200": {
"value": "{color.warning.base}",
+ "type": "color",
"source": "$warning-200",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.75"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }]
},
"300": {
"value": "{color.warning.base}",
+ "type": "color",
"source": "$warning-300",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.50"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }]
},
"400": {
"value": "{color.warning.base}",
+ "type": "color",
"source": "$warning-400",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.25"
- }
- ]
- },
- "500": { "value": "{color.warning.base}", "source": "$warning-500" },
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }]
+ },
+ "500": { "value": "{color.warning.base}", "type": "color", "source": "$warning-500" },
"600": {
"value": "{color.warning.base}",
+ "type": "color",
"source": "$warning-600",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.10"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }]
},
"700": {
"value": "{color.warning.base}",
+ "type": "color",
"source": "$warning-700",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.20"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }]
},
"800": {
"value": "{color.warning.base}",
+ "type": "color",
"source": "$warning-800",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.25"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }]
},
"900": {
"value": "{color.warning.base}",
+ "type": "color",
"source": "$warning-900",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.30"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }]
}
},
"danger": {
- "base": { "value": "{color.red}", "source": "$danger" },
+ "base": { "value": "{color.red}", "type": "color", "source": "$danger" },
"100": {
"value": "{color.danger.base}",
+ "type": "color",
"source": "$danger-100",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.94"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }]
},
"200": {
"value": "{color.danger.base}",
+ "type": "color",
"source": "$danger-200",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.75"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }]
},
"300": {
"value": "{color.danger.base}",
+ "type": "color",
"source": "$danger-300",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.50"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }]
},
"400": {
"value": "{color.danger.base}",
+ "type": "color",
"source": "$danger-400",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.25"
- }
- ]
- },
- "500": { "value": "{color.danger.base}", "source": "$danger-500" },
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }]
+ },
+ "500": { "value": "{color.danger.base}", "type": "color", "source": "$danger-500" },
"600": {
"value": "{color.danger.base}",
+ "type": "color",
"source": "$danger-600",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.10"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }]
},
"700": {
"value": "{color.danger.base}",
+ "type": "color",
"source": "$danger-700",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.20"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }]
},
"800": {
"value": "{color.danger.base}",
+ "type": "color",
"source": "$danger-800",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.25"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }]
},
"900": {
"value": "{color.danger.base}",
+ "type": "color",
"source": "$danger-900",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.30"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }]
}
},
"light": {
- "base": { "value": "#E1DDDB", "source": "$light" },
+ "base": { "value": "#E1DDDB", "type": "color", "source": "$light" },
"100": {
"value": "{color.light.base}",
+ "type": "color",
"source": "$light-100",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.94"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }]
},
"200": {
"value": "{color.light.base}",
+ "type": "color",
"source": "$light-200",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.75"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }]
},
"300": {
"value": "{color.light.base}",
+ "type": "color",
"source": "$light-300",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.50"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }]
},
"400": {
"value": "{color.light.base}",
+ "type": "color",
"source": "$light-400",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.25"
- }
- ]
- },
- "500": { "value": "{color.light.base}", "source": "$light-500" },
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }]
+ },
+ "500": { "value": "{color.light.base}", "type": "color", "source": "$light-500" },
"600": {
"value": "{color.light.base}",
+ "type": "color",
"source": "$light-600",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.10"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }]
},
"700": {
"value": "{color.light.base}",
+ "type": "color",
"source": "$light-700",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.20"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }]
},
"800": {
"value": "{color.light.base}",
+ "type": "color",
"source": "$light-800",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.25"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }]
},
"900": {
"value": "{color.light.base}",
+ "type": "color",
"source": "$light-900",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.30"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }]
}
},
"dark": {
- "base": { "value": "#273F2F", "source": "$dark" },
+ "base": { "value": "#273F2F", "type": "color", "source": "$dark" },
"100": {
"value": "{color.dark.base}",
+ "type": "color",
"source": "$dark-100",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.94"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }]
},
"200": {
"value": "{color.dark.base}",
+ "type": "color",
"source": "$dark-200",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.75"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }]
},
"300": {
"value": "{color.dark.base}",
+ "type": "color",
"source": "$dark-300",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.50"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }]
},
"400": {
"value": "{color.dark.base}",
+ "type": "color",
"source": "$dark-400",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.25"
- }
- ]
- },
- "500": { "value": "{color.dark.base}", "source": "$dark-500" },
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }]
+ },
+ "500": { "value": "{color.dark.base}", "type": "color", "source": "$dark-500" },
"600": {
"value": "{color.dark.base}",
+ "type": "color",
"source": "$dark-600",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.10"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }]
},
"700": {
"value": "{color.dark.base}",
+ "type": "color",
"source": "$dark-700",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.20"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }]
},
"800": {
"value": "{color.dark.base}",
+ "type": "color",
"source": "$dark-800",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.25"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }]
},
"900": {
"value": "{color.dark.base}",
+ "type": "color",
"source": "$dark-900",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.30"
- }
- ]
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }]
}
}
}
diff --git a/tokens/src/global/display.json b/tokens/src/global/display.json
index 5c2472a737..51f493a818 100644
--- a/tokens/src/global/display.json
+++ b/tokens/src/global/display.json
@@ -2,19 +2,19 @@
"typography": {
"display": {
"line-height": {
- "base": { "value": "1", "source": "$display-line-height" },
- "mobile": { "value": "3.5rem", "source": "$display-mobile-line-height" }
+ "base": { "value": "1", "type": "dimension", "source": "$display-line-height" },
+ "mobile": { "value": "3.5rem", "type": "dimension", "source": "$display-mobile-line-height" }
},
- "1": { "value": "3.75rem", "source": "$display1-size" },
- "2": { "value": "4.875rem", "source": "$display2-size" },
- "3": { "value": "5.625rem", "source": "$display3-size" },
- "4": { "value": "7.5rem", "source": "$display4-size" },
- "mobile": { "value": "3.25rem", "source": "$display-mobile-size" },
+ "1": { "value": "3.75rem", "type": "dimension", "source": "$display1-size" },
+ "2": { "value": "4.875rem", "type": "dimension", "source": "$display2-size" },
+ "3": { "value": "5.625rem", "type": "dimension", "source": "$display3-size" },
+ "4": { "value": "7.5rem", "type": "dimension", "source": "$display4-size" },
+ "mobile": { "value": "3.25rem", "type": "dimension", "source": "$display-mobile-size" },
"weight": {
- "1": { "value": "{typography.font.weight.bold}", "source": "$display1-weight" },
- "2": { "value": "{typography.font.weight.bold}", "source": "$display2-weight" },
- "3": { "value": "{typography.font.weight.bold}", "source": "$display3-weight" },
- "4": { "value": "{typography.font.weight.bold}", "source": "$display4-weight" }
+ "1": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display1-weight" },
+ "2": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display2-weight" },
+ "3": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display3-weight" },
+ "4": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display4-weight" }
}
}
}
diff --git a/tokens/src/global/elevation.json b/tokens/src/global/elevation.json
index e5db1b094c..99b9ff3eca 100644
--- a/tokens/src/global/elevation.json
+++ b/tokens/src/global/elevation.json
@@ -4,153 +4,183 @@
"level": {
"1": {
"value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$level-1-box-shadow"
},
"2": {
"value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$level-2-box-shadow"
},
"3": {
"value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$level-3-box-shadow"
},
"4": {
"value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$level-4-box-shadow"
},
"5": {
"value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$level-5-box-shadow"
}
},
- "base": { "value": "0 .125rem .25rem rgba(0, 0, 0, .3)", "source": "$box-shadow" },
- "sm": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", "source": "$box-shadow-sm" },
- "lg": { "value": "0 .25rem .5rem rgba(0, 0, 0, .3)", "source": "$box-shadow-lg" },
+ "base": { "value": "0 .125rem .25rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow" },
+ "sm": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", "type": "shadow", "source": "$box-shadow-sm" },
+ "lg": { "value": "0 .25rem .5rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow-lg" },
"down": {
"1": {
"value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-down-1"
},
"2": {
"value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-down-2"
},
"3": {
"value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-down-3"
},
"4": {
"value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-down-4"
},
"5": {
"value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-down-5"
}
},
"left": {
"1": {
"value": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-left-1"
},
"2": {
"value": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-left-2"
},
"3": {
"value": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-left-3"
},
"4": {
"value": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-left-4"
},
"5": {
"value": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-left-5"
}
},
"up": {
"1": {
"value": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-up-1"
},
"2": {
"value": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-up-2"
},
"3": {
"value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-up-3"
},
"4": {
"value": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-up-4"
},
"5": {
"value": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-up-5"
}
},
"right": {
"1": {
"value": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-right-1"
},
"2": {
"value": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-right-2"
},
"3": {
"value": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-right-3"
},
"4": {
"value": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-right-4"
},
"5": {
"value": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-right-5"
}
},
"centered": {
"1": {
"value": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-centered-1"
},
"2": {
"value": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-centered-2"
},
"3": {
"value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-centered-3"
},
"4": {
"value": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-centered-4"
},
"5": {
"value": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)",
+ "type": "shadow",
"source": "$box-shadow-centered-5"
}
}
},
"zindex": {
- "0": { "value": 0 },
- "200": { "value": 200 },
- "400": { "value": 400 },
- "600": { "value": 600 },
- "800": { "value": 800 },
- "1000": { "value": 1000 },
- "1200": { "value": 1200 },
- "1400": { "value": 1400 },
- "1600": { "value": 1600 },
- "1800": { "value": 1800 },
- "2000": { "value": 2000 },
- "sticky": { "value": 1020, "source": "$zindex-sticky" },
- "fixed": { "value": 1030, "source": "$zindex-fixed" }
+ "0": { "value": 0, "type": "ratio" },
+ "200": { "value": 200, "type": "ratio" },
+ "400": { "value": 400, "type": "ratio" },
+ "600": { "value": 600, "type": "ratio" },
+ "800": { "value": 800, "type": "ratio" },
+ "1000": { "value": 1000, "type": "ratio" },
+ "1200": { "value": 1200, "type": "ratio" },
+ "1400": { "value": 1400, "type": "ratio" },
+ "1600": { "value": 1600, "type": "ratio" },
+ "1800": { "value": 1800, "type": "ratio" },
+ "2000": { "value": 2000, "type": "ratio" },
+ "sticky": { "value": 1020, "type": "ratio", "source": "$zindex-sticky" },
+ "fixed": { "value": 1030, "type": "ratio", "source": "$zindex-fixed" }
}
}
}
diff --git a/tokens/src/global/other.json b/tokens/src/global/other.json
index 2406863493..4b9aa0d167 100644
--- a/tokens/src/global/other.json
+++ b/tokens/src/global/other.json
@@ -2,5 +2,5 @@
"yiq-text-dark": "#454545",
"yiq-text-light": "#FFFFFF",
"yiq-contrasted-threshold": 150,
- "theme-interval": { "value": "8%", "source": "$theme-color-interval" }
+ "theme-interval": { "value": "8%", "type": "percentage", "source": "$theme-color-interval" }
}
diff --git a/tokens/src/global/spacing.json b/tokens/src/global/spacing.json
index b945053391..7ef069a797 100644
--- a/tokens/src/global/spacing.json
+++ b/tokens/src/global/spacing.json
@@ -1,19 +1,19 @@
{
"spacing": {
"spacer": {
- "base": { "value": "1rem", "source": "$spacer" },
- "0": { "value": "0" },
- "1": { "value": "calc({spacing.spacer.base} * .25rem)" },
- "1,5": { "value": "calc({spacing.spacer.base} * .375rem)" },
- "2": { "value": "calc({spacing.spacer.base} * .5rem)" },
- "2,5": { "value": "calc({spacing.spacer.base} * .75rem)" },
- "3": { "value": "{spacing.spacer.base}" },
- "3,5": { "value": "calc({spacing.spacer.base} * 1.25rem)" },
- "4": { "value": "calc({spacing.spacer.base} * 1.5rem)" },
- "4,5": { "value": "calc({spacing.spacer.base} * 2rem)" },
- "5": { "value": "calc({spacing.spacer.base} * 3rem)" },
- "5,5": { "value": "calc({spacing.spacer.base} * 4rem)" },
- "6": { "value": "calc({spacing.spacer.base} * 5rem)" }
+ "base": { "value": "1rem", "type": "dimension", "source": "$spacer" },
+ "0": { "value": "0", "type": "dimension" },
+ "1": { "value": "calc({spacing.spacer.base} * .25rem)", "type": "dimension" },
+ "1,5": { "value": "calc({spacing.spacer.base} * .375rem)", "type": "dimension" },
+ "2": { "value": "calc({spacing.spacer.base} * .5rem)", "type": "dimension" },
+ "2,5": { "value": "calc({spacing.spacer.base} * .75rem)", "type": "dimension" },
+ "3": { "value": "{spacing.spacer.base}", "type": "dimension" },
+ "3,5": { "value": "calc({spacing.spacer.base} * 1.25rem)", "type": "dimension"},
+ "4": { "value": "calc({spacing.spacer.base} * 1.5rem)", "type": "dimension" },
+ "4,5": { "value": "calc({spacing.spacer.base} * 2rem)", "type": "dimension" },
+ "5": { "value": "calc({spacing.spacer.base} * 3rem)", "type": "dimension" },
+ "5,5": { "value": "calc({spacing.spacer.base} * 4rem)", "type": "dimension"},
+ "6": { "value": "calc({spacing.spacer.base} * 5rem)", "type": "dimension" }
}
}
}
diff --git a/tokens/src/global/transition.json b/tokens/src/global/transition.json
index dc99d7551b..2f157d4a90 100644
--- a/tokens/src/global/transition.json
+++ b/tokens/src/global/transition.json
@@ -1,7 +1,7 @@
{
"transition": {
- "base": { "value": "all .2s ease-in-out", "source": "$transition-base" },
- "fade": { "value": "opacity .15s linear", "source": "$transition-fade" },
- "collapse": { "value": "height .35s ease", "source": "$transition-collapse" }
+ "base": { "value": "all .2s ease-in-out", "type": "transition", "source": "$transition-base" },
+ "fade": { "value": "opacity .15s linear", "type": "transition", "source": "$transition-fade" },
+ "collapse": { "value": "height .35s ease", "type": "transition", "source": "$transition-collapse" }
}
}
diff --git a/tokens/src/global/typography.json b/tokens/src/global/typography.json
index 2cdbfc5674..8d5cbdeb75 100644
--- a/tokens/src/global/typography.json
+++ b/tokens/src/global/typography.json
@@ -2,61 +2,75 @@
"typography": {
"font": {
"family": {
- "base": { "value": "{typography.font.family.sans.serif}", "source": "$font-family-base" },
+ "base": {
+ "value": "{typography.font.family.sans.serif}",
+ "type": "fontFamily",
+ "source": "$font-family-base"
+ },
"sans": {
"serif": {
"value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
+ "type": "fontFamily",
"source": "$font-family-sans-serif"
}
},
"serif": { "value": "serif", "source": "$font-family-serif" },
"monospace": {
"value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
+ "type": "fontFamily",
"source": "$font-family-monospace"
}
},
"size": {
- "base": { "value": "1.125rem", "source": "$font-size-base" },
- "lg": { "value": "1.4063rem", "source": "$font-size-lg" },
- "sm": { "value": ".875rem", "source": "$font-size-sm" },
- "xs": { "value": ".75rem", "source": "$font-size-xs" },
+ "base": { "value": "1.125rem", "type": "dimension", "source": "$font-size-base" },
+ "lg": { "value": "1.4063rem", "type": "dimension", "source": "$font-size-lg" },
+ "sm": { "value": ".875rem", "type": "dimension", "source": "$font-size-sm" },
+ "xs": { "value": ".75rem", "type": "dimension", "source": "$font-size-xs" },
"small": {
- "base": { "value": "87.5%", "source": "$small-font-size" },
- "x": { "value": "75%", "source": "$x-small-font-size" }
+ "base": { "value": "87.5%", "type": "percentage", "source": "$small-font-size" },
+ "x": { "value": "75%", "type": "percentage", "source": "$x-small-font-size" }
},
- "h1": { "value": "2.5rem", "source": "$h1-font-size" },
- "h2": { "value": "2rem", "source": "$h2-font-size" },
- "h3": { "value": "1.375rem", "source": "$h3-font-size" },
- "h4": { "value": "1.125rem", "source": "$h4-font-size" },
- "h5": { "value": ".875rem", "source": "$h5-font-size" },
- "h6": { "value": ".75rem", "source": "$h6-font-size" },
+ "h1": { "value": "2.5rem", "type": "dimension", "source": "$h1-font-size" },
+ "h2": { "value": "2rem", "type": "dimension", "source": "$h2-font-size" },
+ "h3": { "value": "1.375rem", "type": "dimension", "source": "$h3-font-size" },
+ "h4": { "value": "1.125rem", "type": "dimension", "source": "$h4-font-size" },
+ "h5": { "value": ".875rem", "type": "dimension", "source": "$h5-font-size" },
+ "h6": { "value": ".75rem", "type": "dimension", "source": "$h6-font-size" },
"mobile": {
- "h1": { "value": "2.25rem", "source": "$h1-mobile-font-size" },
- "h2": { "value": "{typography.font.size.h2}", "source": "$h2-mobile-font-size" },
- "h3": { "value": "{typography.font.size.h3}", "source": "$h3-mobile-font-size" },
- "h4": { "value": "{typography.font.size.h4}", "source": "$h4-mobile-font-size" },
- "h5": { "value": "{typography.font.size.h5}", "source": "$h5-mobile-font-size" },
- "h6": { "value": "{typography.font.size.h6}", "source": "$h6-mobile-font-size" }
+ "h1": { "value": "2.25rem", "type": "dimension", "source": "$h1-mobile-font-size" },
+ "h2": { "value": "{typography.font.size.h2}", "type": "dimension", "source": "$h2-mobile-font-size" },
+ "h3": { "value": "{typography.font.size.h3}", "type": "dimension", "source": "$h3-mobile-font-size" },
+ "h4": { "value": "{typography.font.size.h4}", "type": "dimension", "source": "$h4-mobile-font-size" },
+ "h5": { "value": "{typography.font.size.h5}", "type": "dimension", "source": "$h5-mobile-font-size" },
+ "h6": { "value": "{typography.font.size.h6}", "type": "dimension", "source": "$h6-mobile-font-size" }
},
- "lead": { "value": "calc({typography.font.size.base} * 1.25)", "source": "$lead-font-size" }
+ "lead": {
+ "value": "calc({typography.font.size.base} * 1.25)",
+ "type": "dimension",
+ "source": "$lead-font-size"
+ }
},
"weight": {
- "lighter": { "value": "lighter", "source": "$font-weight-lighter" },
- "light": { "value": "300", "source": "$font-weight-light" },
- "normal": { "value": "400", "source": "$font-weight-normal" },
+ "lighter": { "value": "lighter", "type": "fontWeight", "source": "$font-weight-lighter" },
+ "light": { "value": "300", "type": "fontWeight", "source": "$font-weight-light" },
+ "normal": { "value": "400", "type": "fontWeight", "source": "$font-weight-normal" },
"semi": {
- "bold": { "value": "500", "source": "$font-weight-semi-bold" }
+ "bold": { "value": "500", "type": "fontWeight", "source": "$font-weight-semi-bold" }
+ },
+ "bold": { "value": "700", "type": "fontWeight", "source": "$font-weight-bold" },
+ "bolder": { "value": "bolder", "type": "fontWeight", "source": "$font-weight-bolder" },
+ "base": {
+ "value": "{typography.font.weight.normal}",
+ "type": "fontWeight",
+ "source": "$font-weight-base"
},
- "bold": { "value": "700", "source": "$font-weight-bold" },
- "bolder": { "value": "bolder", "source": "$font-weight-bolder" },
- "base": { "value": "{typography.font.weight.normal}", "source": "$font-weight-base" },
- "lead": { "value": "inherit", "source": "$lead-font-weight" }
+ "lead": { "value": "inherit", "type": "fontWeight", "source": "$lead-font-weight" }
}
},
"line-height": {
- "base": { "value": "1.5556", "source": "$line-height-base" },
- "lg": { "value": "1.5", "source": "$line-height-lg" },
- "sm": { "value": "1.5", "source": "$line-height-sm" }
+ "base": { "value": "1.5556", "type": "dimension", "source": "$line-height-base" },
+ "lg": { "value": "1.5", "type": "dimension", "source": "$line-height-lg" },
+ "sm": { "value": "1.5", "type": "dimension", "source": "$line-height-sm" }
}
}
}