From 5b7ecf2af4d2ccc44836a91d17bf69746e63c4c3 Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Thu, 9 Feb 2023 00:21:54 +0200 Subject: [PATCH] feat: deleted value in reference design tokens (#1989) --- tokens/src/alias/color.json | 136 +++++++-------- tokens/src/components/Alert.json | 32 ++-- tokens/src/components/Annotation.json | 24 +-- tokens/src/components/Avatar.json | 2 +- tokens/src/components/Badge.json | 84 +++++----- tokens/src/components/Breadcrumb.json | 16 +- tokens/src/components/Bubble.json | 16 +- tokens/src/components/Button/brand.json | 64 +++---- tokens/src/components/Button/core.json | 38 ++--- tokens/src/components/Button/danger.json | 64 +++---- tokens/src/components/Button/dark.json | 64 +++---- tokens/src/components/Button/info.json | 64 +++---- tokens/src/components/Button/light.json | 64 +++---- tokens/src/components/Button/primary.json | 64 +++---- tokens/src/components/Button/secondary.json | 64 +++---- tokens/src/components/Button/success.json | 64 +++---- tokens/src/components/Button/tertiary.json | 24 +-- tokens/src/components/Button/warning.json | 64 +++---- tokens/src/components/Card.json | 22 +-- tokens/src/components/Carousel.json | 12 +- tokens/src/components/Chip.json | 8 +- tokens/src/components/CloseButton.json | 8 +- tokens/src/components/Code.json | 10 +- tokens/src/components/Collapsible.json | 4 +- tokens/src/components/DataTable.json | 8 +- tokens/src/components/Dropdown.json | 34 ++-- tokens/src/components/Dropzone.json | 16 +- tokens/src/components/Form/color.json | 114 ++++++------- tokens/src/components/Form/elevation.json | 12 +- tokens/src/components/Form/other.json | 18 +- tokens/src/components/Form/size.json | 56 +++---- tokens/src/components/Form/spacing.json | 34 ++-- tokens/src/components/Form/typography.json | 40 ++--- tokens/src/components/IconButton.json | 22 +-- tokens/src/components/Image.json | 10 +- tokens/src/components/Menu.json | 2 +- tokens/src/components/Modal.json | 12 +- tokens/src/components/Nav.json | 30 ++-- tokens/src/components/Navbar.json | 48 +++--- tokens/src/components/Pagination.json | 38 ++--- tokens/src/components/Popover.json | 38 ++--- tokens/src/components/ProductTour.json | 18 +- tokens/src/components/ProgressBar.json | 10 +- tokens/src/components/Scrollable.json | 2 +- tokens/src/components/SearchField.json | 12 +- tokens/src/components/Sheet.json | 4 +- tokens/src/components/Spinner.json | 2 +- tokens/src/components/Tabs.json | 2 +- tokens/src/components/Toast.json | 10 +- tokens/src/components/Tooltip.json | 16 +- tokens/src/components/general/body.json | 4 +- tokens/src/components/general/headings.json | 2 +- tokens/src/components/general/hr.json | 6 +- tokens/src/components/general/input.json | 8 +- tokens/src/components/general/link.json | 36 ++-- tokens/src/components/general/list.json | 30 ++-- tokens/src/components/general/text.json | 6 +- tokens/src/global/color.json | 174 ++++++++++---------- tokens/src/global/spacing.json | 22 +-- tokens/src/global/typography.json | 16 +- 60 files changed, 962 insertions(+), 962 deletions(-) diff --git a/tokens/src/alias/color.json b/tokens/src/alias/color.json index 06949cab25..264b4da406 100644 --- a/tokens/src/alias/color.json +++ b/tokens/src/alias/color.json @@ -1,13 +1,13 @@ { "color": { "bg": { - "base": { "value": "{color.white.value}" }, - "active": { "value": "{color.primary.500.value}", "source": "$component-active-bg" } + "base": { "value": "{color.white}" }, + "active": { "value": "{color.primary.500}", "source": "$component-active-bg" } }, "text": { "50":{ "black": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$text-black-50", "modify": [{ "type": "alpha", @@ -15,7 +15,7 @@ }] }, "white": { - "value": "{color.white.value}", + "value": "{color.white}", "source": "$text-white-50", "modify": [{ "type": "alpha", @@ -24,84 +24,84 @@ } } }, - "active": { "value": "{color.white.value}", "source": "$component-active-color" }, - "disabled": { "value": "{color.gray.500.value}" }, + "active": { "value": "{color.white}", "source": "$component-active-color" }, + "disabled": { "value": "{color.gray.500}" }, "input": { - "focus": { "value": "{color.primary.500.value}" } + "focus": { "value": "{color.primary.500}" } }, - "border": { "value": "{color.gray.200.value}", "source": "$border-color" }, + "border": { "value": "{color.gray.200}", "source": "$border-color" }, "theme": { "bg": { - "primary": { "value": "{color.primary.100.value}" }, - "secondary": { "value": "{color.secondary.100.value}" }, - "brand": { "value": "{color.brand.100.value}" }, - "success": { "value": "{color.success.100.value}" }, - "info": { "value": "{color.info.100.value}" }, - "warning": { "value": "{color.warning.100.value}" }, - "danger": { "value": "{color.danger.100.value}" }, - "light": { "value": "{color.light.100.value}" }, - "dark": { "value": "{color.dark.100.value}" }, - "gray": { "value": "{color.gray.100.value}" } + "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}" } }, "border": { - "primary": { "value": "{color.primary.200.value}" }, - "secondary": { "value": "{color.secondary.200.value}" }, - "brand": { "value": "{color.brand.200.value}" }, - "success": { "value": "{color.success.200.value}" }, - "info": { "value": "{color.info.200.value}" }, - "warning": { "value": "{color.warning.200.value}" }, - "danger": { "value": "{color.danger.200.value}" }, - "light": { "value": "{color.light.200.value}" }, - "dark": { "value": "{color.dark.200.value}" }, - "gray": { "value": "{color.gray.200.value}" } + "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}" } }, "focus": { - "primary": { "value": "{color.primary.300.value}" }, - "secondary": { "value": "{color.secondary.300.value}" }, - "brand": { "value": "{color.brand.300.value}" }, - "success": { "value": "{color.success.300.value}" }, - "info": { "value": "{color.info.300.value}" }, - "warning": { "value": "{color.warning.300.value}" }, - "danger": { "value": "{color.danger.300.value}" }, - "light": { "value": "{color.light.300.value}" }, - "dark": { "value": "{color.dark.300.value}" }, - "gray": { "value": "{color.gray.300.value}" } + "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}" } }, "default": { - "primary": { "value": "{color.primary.500.value}" }, - "secondary": { "value": "{color.secondary.500.value}" }, - "brand": { "value": "{color.brand.500.value}" }, - "success": { "value": "{color.success.500.value}" }, - "info": { "value": "{color.info.500.value}" }, - "warning": { "value": "{color.warning.500.value}" }, - "danger": { "value": "{color.danger.500.value}" }, - "light": { "value": "{color.light.500.value}" }, - "dark": { "value": "{color.dark.500.value}" }, - "gray": { "value": "{color.gray.500.value}" } + "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}" } }, "hover": { - "primary": { "value": "{color.primary.700.value}" }, - "secondary": { "value": "{color.secondary.700.value}" }, - "brand": { "value": "{color.brand.700.value}" }, - "success": { "value": "{color.success.700.value}" }, - "info": { "value": "{color.info.700.value}" }, - "warning": { "value": "{color.warning.700.value}" }, - "danger": { "value": "{color.danger.700.value}" }, - "light": { "value": "{color.light.700.value}" }, - "dark": { "value": "{color.dark.700.value}" }, - "gray": { "value": "{color.gray.700.value}" } + "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}" } }, "active": { - "primary": { "value": "{color.primary.900.value}" }, - "secondary": { "value": "{color.secondary.900.value}" }, - "brand": { "value": "{color.brand.900.value}" }, - "success": { "value": "{color.success.900.value}" }, - "info": { "value": "{color.info.900.value}" }, - "warning": { "value": "{color.warning.900.value}" }, - "danger": { "value": "{color.danger.900.value}" }, - "light": { "value": "{color.light.900.value}" }, - "dark": { "value": "{color.dark.900.value}" }, - "gray": { "value": "{color.gray.900.value}" } + "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}" } } } } diff --git a/tokens/src/components/Alert.json b/tokens/src/components/Alert.json index e695b46cbe..b8ef45825a 100644 --- a/tokens/src/components/Alert.json +++ b/tokens/src/components/Alert.json @@ -6,14 +6,14 @@ "x": { "value": "1.5rem", "source": "$alert-padding-x" } }, "margin-bottom": { "value": "1rem", "source": "$alert-margin-bottom" }, - "actions-gap": { "value": "{spacing.spacer.3.value}", "source": "$alert-actions-gap" }, + "actions-gap": { "value": "{spacing.spacer.3}", "source": "$alert-actions-gap" }, "icon-space": { "value": ".8rem", "source": "$alert-icon-space" } } }, "typography": { "alert": { "font": { - "weight-link": { "value": "{typography.font.weight.normal.value}", "source": "$alert-link-font-weight" }, + "weight-link": { "value": "{typography.font.weight.normal}", "source": "$alert-link-font-weight" }, "size": { "value": ".875rem", "source": "$alert-font-size" } }, "line-height": { "value": "1.5rem", "source": "$alert-line-height" } @@ -21,25 +21,25 @@ }, "color": { "alert": { - "title": { "value": "{color.black.value}", "source": "$alert-title-color" }, - "content": { "value": "{color.gray.700.value}", "source": "$alert-content-color" }, + "title": { "value": "{color.black}", "source": "$alert-title-color" }, + "content": { "value": "{color.gray.700}", "source": "$alert-content-color" }, "icon": { - "success": { "value": "{color.theme.default.success.value}", "source": "$alert-success-icon-color" }, - "info": { "value": "{color.theme.default.info.value}", "source": "$alert-info-icon-color" }, - "danger": { "value": "{color.theme.default.danger.value}", "source": "$alert-danger-icon-color" }, - "warning": { "value": "{color.theme.default.warning.value}", "source": "$alert-warning-icon-color" } + "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" } }, "bg": { - "success": { "value": "{color.theme.bg.success.value}", "source": "$alert-success-bg" }, - "info": { "value": "{color.theme.bg.info.value}", "source": "$alert-info-bg" }, - "danger": { "value": "{color.theme.bg.danger.value}", "source": "$alert-danger-bg" }, - "warning": { "value": "{color.theme.bg.warning.value}", "source": "$alert-warning-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" } }, "border": { - "success": { "value": "{color.theme.border.success.value}", "source": "$alert-success-border-color" }, - "info": { "value": "{color.theme.border.info.value}", "source": "$alert-info-border-color" }, - "danger": { "value": "{color.theme.border.danger.value}", "source": "$alert-danger-border-color" }, - "warning": { "value": "{color.theme.border.warning.value}", "source": "$alert-warning-border-color" } + "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" } } } }, diff --git a/tokens/src/components/Annotation.json b/tokens/src/components/Annotation.json index e1d416b9fd..37ca8c44a1 100644 --- a/tokens/src/components/Annotation.json +++ b/tokens/src/components/Annotation.json @@ -17,25 +17,25 @@ }, "typography": { "annotation": { - "font-size": { "value": "{typography.font.size.sm.value}", "source": "$annotation-font-size" }, - "line-height": { "value": "{typography.line-height.sm.value}", "source": "$annotation-line-height" } + "font-size": { "value": "{typography.font.size.sm}", "source": "$annotation-font-size" }, + "line-height": { "value": "{typography.line-height.sm}", "source": "$annotation-line-height" } } }, "color": { "annotation": { "text": { - "success": {"value": "{color.white.value}", "source": "$annotation-success-color"}, - "warning": {"value": "{color.black.value}", "source": "$annotation-warning-color"}, - "error": {"value": "{color.white.value}", "source": "$annotation-error-color"}, - "light": {"value": "{color.primary.500.value}", "source": "$annotation-light-color"}, - "dark": {"value": "{color.white.value}", "source": "$annotation-dark-color"} + "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"} }, "bg": { - "success": {"value": "{color.success.base.value}", "source": "$annotation-success-bg"}, - "warning": {"value": "{color.accent.b.value}", "source": "$annotation-warning-bg"}, - "error": {"value": "{color.danger.base.value}", "source": "$annotation-error-bg"}, - "light": {"value": "{color.white.value}", "source": "$annotation-light-bg"}, - "dark": {"value": "{color.dark.base.value}", "source": "$annotation-dark-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"} } } }, diff --git a/tokens/src/components/Avatar.json b/tokens/src/components/Avatar.json index 717781f88e..0bee236b59 100644 --- a/tokens/src/components/Avatar.json +++ b/tokens/src/components/Avatar.json @@ -1,7 +1,7 @@ { "color": { "avatar": { - "border": { "value": "{color.light.300.value}", "source": "$avatar-color-border" } + "border": { "value": "{color.light.300}", "source": "$avatar-color-border" } } }, "size": { diff --git a/tokens/src/components/Badge.json b/tokens/src/components/Badge.json index 2522e00b6f..35ef798116 100644 --- a/tokens/src/components/Badge.json +++ b/tokens/src/components/Badge.json @@ -14,44 +14,44 @@ "badge": { "font": { "size": { "value": "75%", "source": "$badge-font-size" }, - "weight": { "value": "{typography.font.weight.bold.value}", "source": "$badge-font-weight" } + "weight": { "value": "{typography.font.weight.bold}", "source": "$badge-font-weight" } } } }, "color": { "badge": { "text": { - "primary": { "value": "{color.primary.base.value}", "source": "$badge-primary-color", "modify": [{ "type": "color-yiq" }] }, - "secondary": { "value": "{color.secondary.base.value}", "source": "$badge-secondary-color", "modify": [{ "type": "color-yiq" }] }, - "success": { "value": "{color.success.base.value}", "source": "$badge-success-color", "modify": [{ "type": "color-yiq" }] }, - "danger": { "value": "{color.danger.base.value}", "source": "$badge-danger-color", "modify": [{ "type": "color-yiq" }] }, - "warning": { "value": "{color.warning.base.value}", "source": "$badge-warning-color", "modify": [{ "type": "color-yiq" }] }, - "info": { "value": "{color.info.base.value}", "source": "$badge-info-color", "modify": [{ "type": "color-yiq" }] }, - "light": { "value": "{color.light.base.value}", "source": "$badge-light-color", "modify": [{ "type": "color-yiq" }] }, - "dark": { "value": "{color.dark.base.value}", "source": "$badge-dark-color", "modify": [{ "type": "color-yiq" }] } + "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" }] } }, "bg": { - "primary": { "value": "{color.primary.base.value}", "source": "$badge-primary-bg" }, - "secondary": { "value": "{color.secondary.base.value}", "source": "$badge-secondary-bg" }, - "success": { "value": "{color.success.base.value}", "source": "$badge-success-bg" }, - "warning": { "value": "{color.warning.base.value}", "source": "$badge-warning-bg" }, - "danger": { "value": "{color.danger.base.value}", "source": "$badge-danger-bg" }, - "info": { "value": "{color.info.base.value}", "source": "$badge-info-bg" }, - "light": { "value": "{color.light.base.value}", "source": "$badge-light-bg" }, - "dark": { "value": "{color.dark.base.value}", "source": "$badge-dark-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" } }, "focus": { - "primary": { "value": "{color.badge.text.primary.value}", "source": "$badge-primary-focus-color" }, - "secondary": { "value": "{color.badge.text.secondary.value}", "source": "$badge-secondary-focus-color" }, - "success": { "value": "{color.badge.text.success.value}", "source": "$badge-success-focus-color" }, - "warning": { "value": "{color.badge.text.warning.value}", "source": "$badge-warning-focus-color" }, - "danger": { "value": "{color.badge.text.danger.value}", "source": "$badge-danger-focus-color" }, - "info": { "value": "{color.badge.text.info.value}", "source": "$badge-info-focus-color" }, - "light": { "value": "{color.badge.text.light.value}", "source": "$badge-light-focus-color" }, - "dark": { "value": "{color.badge.text.dark.value}", "source": "$badge-dark-focus-color" }, + "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" }, "bg": { "primary": { - "value": "{color.badge.bg.primary.value}", + "value": "{color.badge.bg.primary}", "source": "$badge-primary-focus-bg", "modify": [ { @@ -61,7 +61,7 @@ ] }, "secondary": { - "value": "{color.badge.bg.secondary.value}", + "value": "{color.badge.bg.secondary}", "source": "$badge-secondary-focus-bg", "modify": [ { @@ -71,7 +71,7 @@ ] }, "success": { - "value": "{color.badge.bg.success.value}", + "value": "{color.badge.bg.success}", "source": "$badge-success-focus-bg", "modify": [ { @@ -81,7 +81,7 @@ ] }, "danger": { - "value": "{color.badge.bg.danger.value}", + "value": "{color.badge.bg.danger}", "source": "$badge-danger-focus-bg", "modify": [ { @@ -91,7 +91,7 @@ ] }, "warning": { - "value": "{color.badge.bg.warning.value}", + "value": "{color.badge.bg.warning}", "source": "$badge-warning-focus-bg", "modify": [ { @@ -101,7 +101,7 @@ ] }, "info": { - "value": "{color.badge.bg.info.value}", + "value": "{color.badge.bg.info}", "source": "$badge-info-focus-bg", "modify": [ { @@ -111,7 +111,7 @@ ] }, "light": { - "value": "{color.badge.bg.light.value}", + "value": "{color.badge.bg.light}", "source": "$badge-light-focus-bg", "modify": [ { @@ -121,7 +121,7 @@ ] }, "dark": { - "value": "{color.badge.bg.dark.value}", + "value": "{color.badge.bg.dark}", "source": "$badge-dark-focus-bg", "modify": [ { @@ -133,7 +133,7 @@ }, "box-shadow": { "primary": { - "value": "{color.badge.bg.primary.value}", + "value": "{color.badge.bg.primary}", "source": "$badge-primary-focus-box-shadow-color", "modify": [ { @@ -143,7 +143,7 @@ ] }, "secondary": { - "value": "{color.badge.bg.secondary.value}", + "value": "{color.badge.bg.secondary}", "source": "$badge-secondary-focus-box-shadow-color", "modify": [ { @@ -153,7 +153,7 @@ ] }, "success": { - "value": "{color.badge.bg.success.value}", + "value": "{color.badge.bg.success}", "source": "$badge-success-focus-box-shadow-color", "modify": [ { @@ -163,7 +163,7 @@ ] }, "danger": { - "value": "{color.badge.bg.danger.value}", + "value": "{color.badge.bg.danger}", "source": "$badge-danger-focus-box-shadow-color", "modify": [ { @@ -173,7 +173,7 @@ ] }, "warning": { - "value": "{color.badge.bg.warning.value}", + "value": "{color.badge.bg.warning}", "source": "$badge-warning-focus-box-shadow-color", "modify": [ { @@ -183,7 +183,7 @@ ] }, "info": { - "value": "{color.badge.bg.info.value}", + "value": "{color.badge.bg.info}", "source": "$badge-info-focus-box-shadow-color", "modify": [ { @@ -193,7 +193,7 @@ ] }, "light": { - "value": "{color.badge.bg.light.value}", + "value": "{color.badge.bg.light}", "source": "$badge-light-focus-box-shadow-color", "modify": [ { @@ -203,7 +203,7 @@ ] }, "dark": { - "value": "{color.badge.bg.dark.value}", + "value": "{color.badge.bg.dark}", "source": "$badge-dark-focus-box-shadow-color", "modify": [ { @@ -222,7 +222,7 @@ "base": { "value": ".25rem", "source": "$badge-border-radius" }, "pill": { "value": "10rem", "source": "$badge-pill-border-radius" } }, - "focus-width": { "value": "{size.input.btn.focus-width.value}", "source": "$badge-focus-width" } + "focus-width": { "value": "{size.input.btn.focus-width}", "source": "$badge-focus-width" } } }, "transition": { diff --git a/tokens/src/components/Breadcrumb.json b/tokens/src/components/Breadcrumb.json index 2d1b393443..38f821dd1d 100644 --- a/tokens/src/components/Breadcrumb.json +++ b/tokens/src/components/Breadcrumb.json @@ -1,14 +1,14 @@ { "color": { "breadcrumb": { - "bg": { "value": "{color.gray.200.value}", "source": "$breadcrumb-bg" }, - "base": { "value": "{color.primary.500.value}", "source": "$breadcrumb-color" }, - "divider": { "value": "{color.gray.600.value}", "source": "$breadcrumb-divider-color" }, - "active": { "value": "{color.gray.500.value}", "source": "$breadcrumb-active-color" }, + "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" }, "inverse": { - "base": { "value": "{color.white.value}", "source": "$breadcrumb-inverse-color" }, - "active": { "value": "{color.light.500.value}", "source": "$breadcrumb-inverse-active" }, - "spacer": { "value": "{color.light.700.value}", "source": "$breadcrumb-inverse-spacer" } + "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" } } } }, @@ -34,7 +34,7 @@ "breadcrumb": { "border": { "radius": { - "base": { "value": "{size.border.radius.base.value}", "source": "$breadcrumb-border-radius" }, + "base": { "value": "{size.border.radius.base}", "source": "$breadcrumb-border-radius" }, "focus": { "value": ".125rem", "source": "$breadcrumb-focus-border-radius" } }, "axis": { diff --git a/tokens/src/components/Bubble.json b/tokens/src/components/Bubble.json index 588d89316a..8b21f18066 100644 --- a/tokens/src/components/Bubble.json +++ b/tokens/src/components/Bubble.json @@ -2,16 +2,16 @@ "color": { "bubble": { "text": { - "success": {"value": "{color.white.value}", "source": "$bubble-success-color"}, - "warning": {"value": "{color.white.value}", "source": "$bubble-warning-color"}, - "error": {"value": "{color.white.value}", "source": "$bubble-error-color"}, - "primary": {"value": "{color.white.value}", "source": "$bubble-primary-color"} + "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"} }, "bg": { - "success": {"value": "{color.success.base.value}", "source": "$bubble-success-bg"}, - "warning": {"value": "{color.warning.base.value}", "source": "$bubble-warning-bg"}, - "error": {"value": "{color.danger.base.value}", "source": "$bubble-error-bg"}, - "primary": {"value": "{color.primary.base.value}", "source": "$bubble-primary-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"} } } }, diff --git a/tokens/src/components/Button/brand.json b/tokens/src/components/Button/brand.json index 29739c65b2..218f196c9c 100644 --- a/tokens/src/components/Button/brand.json +++ b/tokens/src/components/Button/brand.json @@ -2,94 +2,94 @@ "color": { "btn": { "text": { - "brand": { "value": "{color.btn.bg.brand.value}", "source": "$btn-brand-color", "modify": [{ "type": "color-yiq" }] }, - "outline-brand": { "value": "{color.brand.base.value}", "source": "$btn-brand-outline-color" }, - "inverse-brand": { "value": "{color.brand.base.value}", "source": "$btn-brand-inverse-color" }, - "inverse-outline-brand": { "value": "{color.white.value}", "source": "$btn-brand-inverse-outline-color" } + "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" } }, "bg": { - "brand": { "value": "{color.brand.base.value}", "source": "$btn-brand-bg" }, + "brand": { "value": "{color.brand.base}", "source": "$btn-brand-bg" }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand.value}", + "value": "{color.btn.text.inverse-brand}", "source": "$btn-brand-inverse-bg", "modify": [{ "type": "color-yiq" }] } }, "border": { - "brand": { "value": "{color.btn.bg.brand.value}", "source": "$btn-brand-border-color" }, - "outline-brand": { "value": "{color.brand.base.value}", "source": "$btn-brand-outline-border-color" }, - "inverse-outline-brand": { "value": "{color.white.value}", "source": "$btn-brand-inverse-outline-border-color" } + "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" } }, "hover": { "text": { "brand": { - "value": "{color.btn.hover.bg.brand.value}", + "value": "{color.btn.hover.bg.brand}", "source": "$btn-brand-hover-color", "modify": [{ "type": "color-yiq" }] }, - "outline-brand": { "value": "{color.theme.hover.brand.value}", "source": "$btn-brand-outline-hover-color" }, + "outline-brand": { "value": "{color.theme.hover.brand}", "source": "$btn-brand-outline-hover-color" }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand.value}", + "value": "{color.btn.text.inverse-brand}", "source": "$btn-brand-inverse-hover-color", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-brand": { "value": "{color.theme.hover.brand.value}", "source": "$btn-brand-inverse-outline-hover-color" } + "inverse-outline-brand": { "value": "{color.theme.hover.brand}", "source": "$btn-brand-inverse-outline-hover-color" } }, "bg": { - "brand": { "value": "{color.theme.hover.brand.value}", "source": "$btn-brand-hover-bg" }, - "outline-brand": { "value": "{color.brand.100.value}", "source": "$btn-brand-outline-hover-bg" }, + "brand": { "value": "{color.theme.hover.brand}", "source": "$btn-brand-hover-bg" }, + "outline-brand": { "value": "{color.brand.100}", "source": "$btn-brand-outline-hover-bg" }, "inverse-brand": { - "value": "{color.btn.bg.inverse-brand.value}", + "value": "{color.btn.bg.inverse-brand}", "source": "$btn-brand-inverse-hover-bg", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-brand": { "value": "{color.brand.100.value}", "source": "$btn-brand-inverse-outline-hover-bg" } + "inverse-outline-brand": { "value": "{color.brand.100}", "source": "$btn-brand-inverse-outline-hover-bg" } }, "border": { - "brand": { "value": "{color.theme.hover.brand.value}", "source": "$btn-brand-hover-border-color" }, - "outline-brand": { "value": "{color.brand.900.value}", "source": "$btn-brand-outline-hover-border-color" }, + "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" } } }, "active": { "text": { "brand": { - "value": "{color.btn.active.bg.brand.value}", + "value": "{color.btn.active.bg.brand}", "source": "$btn-brand-active-color", "modify": [{ "type": "color-yiq" }] }, "outline-brand": { - "value": "{color.btn.active.bg.outline-brand.value}", + "value": "{color.btn.active.bg.outline-brand}", "source": "$btn-brand-outline-active-color", "modify": [{ "type": "color-yiq" }] }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand.value}", + "value": "{color.btn.text.inverse-brand}", "source": "$btn-brand-inverse-active-color", "modify": [{ "type": "darken", "amount": 0.1 }] }, "inverse-outline-brand": { - "value": "{color.btn.active.bg.inverse-outline-brand.value}", + "value": "{color.btn.active.bg.inverse-outline-brand}", "source": "$btn-brand-inverse-outline-active-color", "modify": [{ "type": "color-yiq" }] } }, "bg": { - "brand": { "value": "{color.theme.active.brand.value}", "source": "$btn-brand-active-bg" }, - "outline-brand": { "value": "{color.theme.bg.brand.value}", "source": "$btn-brand-outline-active-bg" }, - "inverse-outline-brand": { "value": "{color.theme.bg.brand.value}", "source": "$btn-brand-inverse-outline-active-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" } }, "border": { - "brand": { "value": "{color.theme.active.brand.value}", "source": "$btn-brand-active-border-color" }, - "outline-brand": { "value": "{color.theme.active.brand.value}", "source": "$btn-brand-outline-active-border-color" }, + "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" } } }, "focus": { "border": { - "brand": { "value": "{color.theme.focus.brand.value}", "source": "$btn-brand-focus-border-color" }, - "outline-brand": { "value": "{color.theme.focus.brand.value}", "source": "$btn-brand-outline-focus-border-color" }, - "inverse-brand": { "value": "{color.white.value}", "source": "$btn-brand-inverse-focus-border-color" }, - "inverse-outline-brand": { "value": "{color.white.value}", "source": "$btn-brand-inverse-outline-focus-border-color" } + "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" } } } } diff --git a/tokens/src/components/Button/core.json b/tokens/src/components/Button/core.json index d59c082ce4..5e84428941 100644 --- a/tokens/src/components/Button/core.json +++ b/tokens/src/components/Button/core.json @@ -1,21 +1,21 @@ { "color": { "btn": { - "disabled-link": { "value": "{color.disabled.value}", "source": "$btn-link-disabled-color" } + "disabled-link": { "value": "{color.disabled}", "source": "$btn-link-disabled-color" } } }, "spacing": { "btn": { "padding": { "y": { - "base": { "value": "{spacing.input.btn.padding.y.value}", "source": "$btn-padding-y" }, - "lg": { "value": "{spacing.input.btn.padding.lg.y.value}", "source": "$btn-padding-y-lg" }, - "sm": { "value": "{spacing.input.btn.padding.sm.y.value}", "source": "$btn-padding-y-sm" } + "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" } }, "x": { - "base": { "value": "{spacing.input.btn.padding.x.value}", "source": "$btn-padding-x" }, - "lg": { "value": "{spacing.input.btn.padding.lg.x.value}", "source": "$btn-padding-x-lg" }, - "sm": { "value": "{spacing.input.btn.padding.sm.x.value}", "source": "$btn-padding-x-sm" } + "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" } } }, "block": { @@ -27,18 +27,18 @@ "typography": { "btn": { "font": { - "family": { "value": "{typography.input.btn.font.family.value}", "source": "$btn-font-family" }, + "family": { "value": "{typography.input.btn.font.family}", "source": "$btn-font-family" }, "size": { - "base": { "value": "{typography.input.btn.font.size.base.value}", "source": "$btn-font-size" }, - "sm": { "value": "{typography.input.btn.font.size.sm.value}", "source": "$btn-font-size-sm" }, - "lg": { "value": "{typography.input.btn.font.size.lg.value}", "source": "$btn-font-size-lg" } + "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" } }, - "weight": { "value": "{typography.font.weight.normal.value}", "source": "$btn-font-weight" } + "weight": { "value": "{typography.font.weight.normal}", "source": "$btn-font-weight" } }, "line-height": { - "base": { "value": "{typography.input.btn.line-height.base.value}", "source": "$btn-line-height" }, - "sm": { "value": "{typography.input.btn.line-height.sm.value}", "source": "$btn-line-height-sm" }, - "lg": { "value": "{typography.input.btn.line-height.lg.value}", "source": "$btn-line-height-lg" } + "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" } } } }, @@ -61,11 +61,11 @@ "size": { "btn": { "border": { - "width": { "value": "{size.input.btn.border-width.value}", "source": "$btn-border-width" }, + "width": { "value": "{size.input.btn.border-width}", "source": "$btn-border-width" }, "radius": { - "base": { "value": "{size.border.radius.base.value}", "source": "$btn-border-radius" }, - "lg": { "value": "{size.border.radius.lg.value}", "source": "$btn-border-radius-lg" }, - "sm": { "value": "{size.border.radius.sm.value}", "source": "$btn-border-radius-sm" } + "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" } } }, "focus-width": { "value": "2px", "source": "$btn-focus-width" } diff --git a/tokens/src/components/Button/danger.json b/tokens/src/components/Button/danger.json index 555e936f16..eab96e95f9 100644 --- a/tokens/src/components/Button/danger.json +++ b/tokens/src/components/Button/danger.json @@ -2,94 +2,94 @@ "color": { "btn": { "text": { - "danger": { "value": "{color.btn.bg.danger.value}", "source": "$btn-danger-color", "modify": [{ "type": "color-yiq" }] }, - "outline-danger": { "value": "{color.danger.base.value}", "source": "$btn-danger-outline-color" }, - "inverse-danger": { "value": "{color.danger.base.value}", "source": "$btn-danger-inverse-color" }, - "inverse-outline-danger": { "value": "{color.white.value}", "source": "$btn-danger-inverse-outline-color" } + "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" } }, "bg": { - "danger": { "value": "{color.danger.base.value}", "source": "$btn-danger-bg" }, + "danger": { "value": "{color.danger.base}", "source": "$btn-danger-bg" }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger.value}", + "value": "{color.btn.text.inverse-danger}", "source": "$btn-danger-inverse-bg", "modify": [{ "type": "color-yiq" }] } }, "border": { - "danger": { "value": "{color.btn.bg.danger.value}", "source": "$btn-danger-border-color" }, - "outline-danger": { "value": "{color.danger.base.value}", "source": "$btn-danger-outline-border-color" }, - "inverse-outline-danger": { "value": "{color.white.value}", "source": "$btn-danger-inverse-outline-border-color" } + "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" } }, "hover": { "text": { "danger": { - "value": "{color.btn.hover.bg.danger.value}", + "value": "{color.btn.hover.bg.danger}", "source": "$btn-danger-hover-color", "modify": [{ "type": "color-yiq" }] }, - "outline-danger": { "value": "{color.theme.hover.danger.value}", "source": "$btn-danger-outline-hover-color" }, + "outline-danger": { "value": "{color.theme.hover.danger}", "source": "$btn-danger-outline-hover-color" }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger.value}", + "value": "{color.btn.text.inverse-danger}", "source": "$btn-danger-inverse-hover-color", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-danger": { "value": "{color.theme.hover.danger.value}", "source": "$btn-danger-inverse-outline-hover-color" } + "inverse-outline-danger": { "value": "{color.theme.hover.danger}", "source": "$btn-danger-inverse-outline-hover-color" } }, "bg": { - "danger": { "value": "{color.theme.hover.danger.value}", "source": "$btn-danger-hover-bg" }, - "outline-danger": { "value": "{color.danger.100.value}", "source": "$btn-danger-outline-hover-bg" }, + "danger": { "value": "{color.theme.hover.danger}", "source": "$btn-danger-hover-bg" }, + "outline-danger": { "value": "{color.danger.100}", "source": "$btn-danger-outline-hover-bg" }, "inverse-danger": { - "value": "{color.btn.bg.inverse-danger.value}", + "value": "{color.btn.bg.inverse-danger}", "source": "$btn-danger-inverse-hover-bg", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-danger": { "value": "{color.danger.100.value}", "source": "$btn-danger-inverse-outline-hover-bg" } + "inverse-outline-danger": { "value": "{color.danger.100}", "source": "$btn-danger-inverse-outline-hover-bg" } }, "border": { - "danger": { "value": "{color.theme.hover.danger.value}", "source": "$btn-danger-hover-border-color" }, - "outline-danger": { "value": "{color.danger.900.value}", "source": "$btn-danger-outline-hover-border-color" }, + "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" } } }, "active": { "text": { "danger": { - "value": "{color.btn.active.bg.danger.value}", + "value": "{color.btn.active.bg.danger}", "source": "$btn-danger-active-color", "modify": [{ "type": "color-yiq" }] }, "outline-danger": { - "value": "{color.btn.active.bg.outline-danger.value}", + "value": "{color.btn.active.bg.outline-danger}", "source": "$btn-danger-outline-active-color", "modify": [{ "type": "color-yiq" }] }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger.value}", + "value": "{color.btn.text.inverse-danger}", "source": "$btn-danger-inverse-active-color", "modify": [{ "type": "darken", "amount": 0.1 }] }, "inverse-outline-danger": { - "value": "{color.btn.active.bg.inverse-outline-danger.value}", + "value": "{color.btn.active.bg.inverse-outline-danger}", "source": "$btn-danger-inverse-outline-active-color", "modify": [{ "type": "color-yiq" }] } }, "bg": { - "danger": { "value": "{color.theme.active.danger.value}", "source": "$btn-danger-active-bg" }, - "outline-danger": { "value": "{color.theme.bg.danger.value}", "source": "$btn-danger-outline-active-bg" }, - "inverse-outline-danger": { "value": "{color.theme.bg.danger.value}", "source": "$btn-danger-inverse-outline-active-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" } }, "border": { - "danger": { "value": "{color.theme.active.danger.value}", "source": "$btn-danger-active-border-color" }, - "outline-danger": { "value": "{color.theme.active.danger.value}", "source": "$btn-danger-outline-active-border-color" }, + "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" } } }, "focus": { "border": { - "danger": { "value": "{color.theme.focus.danger.value}", "source": "$btn-danger-focus-border-color" }, - "outline-danger": { "value": "{color.theme.focus.danger.value}", "source": "$btn-danger-outline-focus-border-color" }, - "inverse-danger": { "value": "{color.white.value}", "source": "$btn-danger-inverse-focus-border-color" }, - "inverse-outline-danger": { "value": "{color.white.value}", "source": "$btn-danger-inverse-outline-focus-border-color" } + "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" } } } } diff --git a/tokens/src/components/Button/dark.json b/tokens/src/components/Button/dark.json index e5bd0dd271..c8be895b90 100644 --- a/tokens/src/components/Button/dark.json +++ b/tokens/src/components/Button/dark.json @@ -2,94 +2,94 @@ "color": { "btn": { "text": { - "dark": { "value": "{color.btn.bg.dark.value}", "source": "$btn-dark-color", "modify": [{ "type": "color-yiq" }] }, - "outline-dark": { "value": "{color.dark.base.value}", "source": "$btn-dark-outline-color" }, - "inverse-dark": { "value": "{color.dark.base.value}", "source": "$btn-dark-inverse-color" }, - "inverse-outline-dark": { "value": "{color.white.value}", "source": "$btn-dark-inverse-outline-color" } + "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" } }, "bg": { - "dark": { "value": "{color.dark.base.value}", "source": "$btn-dark-bg" }, + "dark": { "value": "{color.dark.base}", "source": "$btn-dark-bg" }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark.value}", + "value": "{color.btn.text.inverse-dark}", "source": "$btn-dark-inverse-bg", "modify": [{ "type": "color-yiq" }] } }, "border": { - "dark": { "value": "{color.btn.bg.dark.value}", "source": "$btn-dark-border-color" }, - "outline-dark": { "value": "{color.dark.base.value}", "source": "$btn-dark-outline-border-color" }, - "inverse-outline-dark": { "value": "{color.white.value}", "source": "$btn-dark-inverse-outline-border-color" } + "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" } }, "hover": { "text": { "dark": { - "value": "{color.btn.hover.bg.dark.value}", + "value": "{color.btn.hover.bg.dark}", "source": "$btn-dark-hover-color", "modify": [{ "type": "color-yiq" }] }, - "outline-dark": { "value": "{color.theme.hover.dark.value}", "source": "$btn-dark-outline-hover-color" }, + "outline-dark": { "value": "{color.theme.hover.dark}", "source": "$btn-dark-outline-hover-color" }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark.value}", + "value": "{color.btn.text.inverse-dark}", "source": "$btn-dark-inverse-hover-color", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-dark": { "value": "{color.theme.hover.dark.value}", "source": "$btn-dark-inverse-outline-hover-color" } + "inverse-outline-dark": { "value": "{color.theme.hover.dark}", "source": "$btn-dark-inverse-outline-hover-color" } }, "bg": { - "dark": { "value": "{color.theme.hover.dark.value}", "source": "$btn-dark-hover-bg" }, - "outline-dark": { "value": "{color.dark.100.value}", "source": "$btn-dark-outline-hover-bg" }, + "dark": { "value": "{color.theme.hover.dark}", "source": "$btn-dark-hover-bg" }, + "outline-dark": { "value": "{color.dark.100}", "source": "$btn-dark-outline-hover-bg" }, "inverse-dark": { - "value": "{color.btn.bg.inverse-dark.value}", + "value": "{color.btn.bg.inverse-dark}", "source": "$btn-dark-inverse-hover-bg", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-dark": { "value": "{color.dark.100.value}", "source": "$btn-dark-inverse-outline-hover-bg" } + "inverse-outline-dark": { "value": "{color.dark.100}", "source": "$btn-dark-inverse-outline-hover-bg" } }, "border": { - "dark": { "value": "{color.theme.hover.dark.value}", "source": "$btn-dark-hover-border-color" }, - "outline-dark": { "value": "{color.dark.900.value}", "source": "$btn-dark-outline-hover-border-color" }, + "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" } } }, "active": { "text": { "dark": { - "value": "{color.btn.active.bg.dark.value}", + "value": "{color.btn.active.bg.dark}", "source": "$btn-dark-active-color", "modify": [{ "type": "color-yiq" }] }, "outline-dark": { - "value": "{color.btn.active.bg.outline-dark.value}", + "value": "{color.btn.active.bg.outline-dark}", "source": "$btn-dark-outline-active-color", "modify": [{ "type": "color-yiq" }] }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark.value}", + "value": "{color.btn.text.inverse-dark}", "source": "$btn-dark-inverse-active-color", "modify": [{ "type": "darken", "amount": 0.1 }] }, "inverse-outline-dark": { - "value": "{color.btn.active.bg.inverse-outline-dark.value}", + "value": "{color.btn.active.bg.inverse-outline-dark}", "source": "$btn-dark-inverse-outline-active-color", "modify": [{ "type": "color-yiq" }] } }, "bg": { - "dark": { "value": "{color.theme.active.dark.value}", "source": "$btn-dark-active-bg" }, - "outline-dark": { "value": "{color.theme.bg.dark.value}", "source": "$btn-dark-outline-active-bg" }, - "inverse-outline-dark": { "value": "{color.theme.bg.dark.value}", "source": "$btn-dark-inverse-outline-active-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" } }, "border": { - "dark": { "value": "{color.theme.active.dark.value}", "source": "$btn-dark-active-border-color" }, - "outline-dark": { "value": "{color.theme.active.dark.value}", "source": "$btn-dark-outline-active-border-color" }, + "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" } } }, "focus": { "border": { - "dark": { "value": "{color.theme.focus.dark.value}", "source": "$btn-dark-focus-border-color" }, - "outline-dark": { "value": "{color.theme.focus.dark.value}", "source": "$btn-dark-outline-focus-border-color" }, - "inverse-dark": { "value": "{color.white.value}", "source": "$btn-dark-inverse-focus-border-color" }, - "inverse-outline-dark": { "value": "{color.white.value}", "source": "$btn-dark-inverse-outline-focus-border-color" } + "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" } } } } diff --git a/tokens/src/components/Button/info.json b/tokens/src/components/Button/info.json index 7c1a067e8c..8805f5f9b0 100644 --- a/tokens/src/components/Button/info.json +++ b/tokens/src/components/Button/info.json @@ -2,94 +2,94 @@ "color": { "btn": { "text": { - "info": { "value": "{color.btn.bg.info.value}", "source": "$btn-info-color", "modify": [{ "type": "color-yiq" }] }, - "outline-info": { "value": "{color.info.base.value}", "source": "$btn-info-outline-color" }, - "inverse-info": { "value": "{color.info.base.value}", "source": "$btn-info-inverse-color" }, - "inverse-outline-info": { "value": "{color.white.value}", "source": "$btn-info-inverse-outline-color" } + "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" } }, "bg": { - "info": { "value": "{color.info.base.value}", "source": "$btn-info-bg" }, + "info": { "value": "{color.info.base}", "source": "$btn-info-bg" }, "inverse-info": { - "value": "{color.btn.text.inverse-info.value}", + "value": "{color.btn.text.inverse-info}", "source": "$btn-info-inverse-bg", "modify": [{ "type": "color-yiq" }] } }, "border": { - "info": { "value": "{color.btn.bg.info.value}", "source": "$btn-info-border-color" }, - "outline-info": { "value": "{color.info.base.value}", "source": "$btn-info-outline-border-color" }, - "inverse-outline-info": { "value": "{color.white.value}", "source": "$btn-info-inverse-outline-border-color" } + "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" } }, "hover": { "text": { "info": { - "value": "{color.btn.hover.bg.info.value}", + "value": "{color.btn.hover.bg.info}", "source": "$btn-info-hover-color", "modify": [{ "type": "color-yiq" }] }, - "outline-info": { "value": "{color.theme.hover.info.value}", "source": "$btn-info-outline-hover-color" }, + "outline-info": { "value": "{color.theme.hover.info}", "source": "$btn-info-outline-hover-color" }, "inverse-info": { - "value": "{color.btn.text.inverse-info.value}", + "value": "{color.btn.text.inverse-info}", "source": "$btn-info-inverse-hover-color", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-info": { "value": "{color.theme.hover.info.value}", "source": "$btn-info-inverse-outline-hover-color" } + "inverse-outline-info": { "value": "{color.theme.hover.info}", "source": "$btn-info-inverse-outline-hover-color" } }, "bg": { - "info": { "value": "{color.theme.hover.info.value}", "source": "$btn-info-hover-bg" }, - "outline-info": { "value": "{color.info.100.value}", "source": "$btn-info-outline-hover-bg" }, + "info": { "value": "{color.theme.hover.info}", "source": "$btn-info-hover-bg" }, + "outline-info": { "value": "{color.info.100}", "source": "$btn-info-outline-hover-bg" }, "inverse-info": { - "value": "{color.btn.bg.inverse-info.value}", + "value": "{color.btn.bg.inverse-info}", "source": "$btn-info-inverse-hover-bg", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-info": { "value": "{color.info.100.value}", "source": "$btn-info-inverse-outline-hover-bg" } + "inverse-outline-info": { "value": "{color.info.100}", "source": "$btn-info-inverse-outline-hover-bg" } }, "border": { - "info": { "value": "{color.theme.hover.info.value}", "source": "$btn-info-hover-border-color" }, - "outline-info": { "value": "{color.info.900.value}", "source": "$btn-info-outline-hover-border-color" }, + "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" } } }, "active": { "text": { "info": { - "value": "{color.btn.active.bg.info.value}", + "value": "{color.btn.active.bg.info}", "source": "$btn-info-active-color", "modify": [{ "type": "color-yiq" }] }, "outline-info": { - "value": "{color.btn.active.bg.outline-info.value}", + "value": "{color.btn.active.bg.outline-info}", "source": "$btn-info-outline-active-color", "modify": [{ "type": "color-yiq" }] }, "inverse-info": { - "value": "{color.btn.text.inverse-info.value}", + "value": "{color.btn.text.inverse-info}", "source": "$btn-info-inverse-active-color", "modify": [{ "type": "darken", "amount": 0.1 }] }, "inverse-outline-info": { - "value": "{color.btn.active.bg.inverse-outline-info.value}", + "value": "{color.btn.active.bg.inverse-outline-info}", "source": "$btn-info-inverse-outline-active-color", "modify": [{ "type": "color-yiq" }] } }, "bg": { - "info": { "value": "{color.theme.active.info.value}", "source": "$btn-info-active-bg" }, - "outline-info": { "value": "{color.theme.bg.info.value}", "source": "$btn-info-outline-active-bg" }, - "inverse-outline-info": { "value": "{color.theme.bg.info.value}", "source": "$btn-info-inverse-outline-active-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" } }, "border": { - "info": { "value": "{color.theme.active.info.value}", "source": "$btn-info-active-border-color" }, - "outline-info": { "value": "{color.theme.active.info.value}", "source": "$btn-info-outline-active-border-color" }, + "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" } } }, "focus": { "border": { - "info": { "value": "{color.theme.focus.info.value}", "source": "$btn-info-focus-border-color" }, - "outline-info": { "value": "{color.theme.focus.info.value}", "source": "$btn-info-outline-focus-border-color" }, - "inverse-info": { "value": "{color.white.value}", "source": "$btn-info-inverse-focus-border-color" }, - "inverse-outline-info": { "value": "{color.white.value}", "source": "$btn-info-inverse-outline-focus-border-color" } + "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" } } } } diff --git a/tokens/src/components/Button/light.json b/tokens/src/components/Button/light.json index 0da37271bf..024dc61ef8 100644 --- a/tokens/src/components/Button/light.json +++ b/tokens/src/components/Button/light.json @@ -2,94 +2,94 @@ "color": { "btn": { "text": { - "light": { "value": "{color.btn.bg.light.value}", "source": "$btn-light-color", "modify": [{ "type": "color-yiq" }] }, - "outline-light": { "value": "{color.light.base.value}", "source": "$btn-light-outline-color" }, - "inverse-light": { "value": "{color.light.base.value}", "source": "$btn-light-inverse-color" }, - "inverse-outline-light": { "value": "{color.white.value}", "source": "$btn-light-inverse-outline-color" } + "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" } }, "bg": { - "light": { "value": "{color.light.base.value}", "source": "$btn-light-bg" }, + "light": { "value": "{color.light.base}", "source": "$btn-light-bg" }, "inverse-light": { - "value": "{color.btn.text.inverse-light.value}", + "value": "{color.btn.text.inverse-light}", "source": "$btn-light-inverse-bg", "modify": [{ "type": "color-yiq" }] } }, "border": { - "light": { "value": "{color.btn.bg.light.value}", "source": "$btn-light-border-color" }, - "outline-light": { "value": "{color.light.base.value}", "source": "$btn-light-outline-border-color" }, - "inverse-outline-light": { "value": "{color.white.value}", "source": "$btn-light-inverse-outline-border-color" } + "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" } }, "hover": { "text": { "light": { - "value": "{color.btn.hover.bg.light.value}", + "value": "{color.btn.hover.bg.light}", "source": "$btn-light-hover-color", "modify": [{ "type": "color-yiq" }] }, - "outline-light": { "value": "{color.theme.hover.light.value}", "source": "$btn-light-outline-hover-color" }, + "outline-light": { "value": "{color.theme.hover.light}", "source": "$btn-light-outline-hover-color" }, "inverse-light": { - "value": "{color.btn.text.inverse-light.value}", + "value": "{color.btn.text.inverse-light}", "source": "$btn-light-inverse-hover-color", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-light": { "value": "{color.theme.hover.light.value}", "source": "$btn-light-inverse-outline-hover-color" } + "inverse-outline-light": { "value": "{color.theme.hover.light}", "source": "$btn-light-inverse-outline-hover-color" } }, "bg": { - "light": { "value": "{color.theme.hover.light.value}", "source": "$btn-light-hover-bg" }, - "outline-light": { "value": "{color.light.100.value}", "source": "$btn-light-outline-hover-bg" }, + "light": { "value": "{color.theme.hover.light}", "source": "$btn-light-hover-bg" }, + "outline-light": { "value": "{color.light.100}", "source": "$btn-light-outline-hover-bg" }, "inverse-light": { - "value": "{color.btn.bg.inverse-light.value}", + "value": "{color.btn.bg.inverse-light}", "source": "$btn-light-inverse-hover-bg", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-light": { "value": "{color.light.100.value}", "source": "$btn-light-inverse-outline-hover-bg" } + "inverse-outline-light": { "value": "{color.light.100}", "source": "$btn-light-inverse-outline-hover-bg" } }, "border": { - "light": { "value": "{color.theme.hover.light.value}", "source": "$btn-light-hover-border-color" }, - "outline-light": { "value": "{color.light.900.value}", "source": "$btn-light-outline-hover-border-color" }, + "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" } } }, "active": { "text": { "light": { - "value": "{color.btn.active.bg.light.value}", + "value": "{color.btn.active.bg.light}", "source": "$btn-light-active-color", "modify": [{ "type": "color-yiq" }] }, "outline-light": { - "value": "{color.btn.active.bg.outline-light.value}", + "value": "{color.btn.active.bg.outline-light}", "source": "$btn-light-outline-active-color", "modify": [{ "type": "color-yiq" }] }, "inverse-light": { - "value": "{color.btn.text.inverse-light.value}", + "value": "{color.btn.text.inverse-light}", "source": "$btn-light-inverse-active-color", "modify": [{ "type": "darken", "amount": 0.1 }] }, "inverse-outline-light": { - "value": "{color.btn.active.bg.inverse-outline-light.value}", + "value": "{color.btn.active.bg.inverse-outline-light}", "source": "$btn-light-inverse-outline-active-color", "modify": [{ "type": "color-yiq" }] } }, "bg": { - "light": { "value": "{color.theme.active.light.value}", "source": "$btn-light-active-bg" }, - "outline-light": { "value": "{color.theme.bg.light.value}", "source": "$btn-light-outline-active-bg" }, - "inverse-outline-light": { "value": "{color.theme.bg.light.value}", "source": "$btn-light-inverse-outline-active-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" } }, "border": { - "light": { "value": "{color.theme.active.light.value}", "source": "$btn-light-active-border-color" }, - "outline-light": { "value": "{color.theme.active.light.value}", "source": "$btn-light-outline-active-border-color" }, + "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" } } }, "focus": { "border": { - "light": { "value": "{color.theme.focus.light.value}", "source": "$btn-light-focus-border-color" }, - "outline-light": { "value": "{color.theme.focus.light.value}", "source": "$btn-light-outline-focus-border-color" }, - "inverse-light": { "value": "{color.white.value}", "source": "$btn-light-inverse-focus-border-color" }, - "inverse-outline-light": { "value": "{color.white.value}", "source": "$btn-light-inverse-outline-focus-border-color" } + "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" } } } } diff --git a/tokens/src/components/Button/primary.json b/tokens/src/components/Button/primary.json index abadd6c57a..edd7913765 100644 --- a/tokens/src/components/Button/primary.json +++ b/tokens/src/components/Button/primary.json @@ -2,94 +2,94 @@ "color": { "btn": { "text": { - "primary": { "value": "{color.btn.bg.primary.value}", "source": "$btn-primary-color", "modify": [{ "type": "color-yiq" }] }, - "outline-primary": { "value": "{color.primary.base.value}", "source": "$btn-primary-outline-color" }, - "inverse-primary": { "value": "{color.primary.base.value}", "source": "$btn-primary-inverse-color" }, - "inverse-outline-primary": { "value": "{color.white.value}", "source": "$btn-primary-inverse-outline-color" } + "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" } }, "bg": { - "primary": { "value": "{color.primary.base.value}", "source": "$btn-primary-bg" }, + "primary": { "value": "{color.primary.base}", "source": "$btn-primary-bg" }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary.value}", + "value": "{color.btn.text.inverse-primary}", "source": "$btn-primary-inverse-bg", "modify": [{ "type": "color-yiq" }] } }, "border": { - "primary": { "value": "{color.btn.bg.primary.value}", "source": "$btn-primary-border-color" }, - "outline-primary": { "value": "{color.primary.base.value}", "source": "$btn-primary-outline-border-color" }, - "inverse-outline-primary": { "value": "{color.white.value}", "source": "$btn-primary-inverse-outline-border-color" } + "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" } }, "hover": { "text": { "primary": { - "value": "{color.btn.hover.bg.primary.value}", + "value": "{color.btn.hover.bg.primary}", "source": "$btn-primary-hover-color", "modify": [{ "type": "color-yiq" }] }, - "outline-primary": { "value": "{color.theme.hover.primary.value}", "source": "$btn-primary-outline-hover-color" }, + "outline-primary": { "value": "{color.theme.hover.primary}", "source": "$btn-primary-outline-hover-color" }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary.value}", + "value": "{color.btn.text.inverse-primary}", "source": "$btn-primary-inverse-hover-color", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-primary": { "value": "{color.theme.hover.primary.value}", "source": "$btn-primary-inverse-outline-hover-color" } + "inverse-outline-primary": { "value": "{color.theme.hover.primary}", "source": "$btn-primary-inverse-outline-hover-color" } }, "bg": { - "primary": { "value": "{color.theme.hover.primary.value}", "source": "$btn-primary-hover-bg" }, - "outline-primary": { "value": "{color.primary.100.value}", "source": "$btn-primary-outline-hover-bg" }, + "primary": { "value": "{color.theme.hover.primary}", "source": "$btn-primary-hover-bg" }, + "outline-primary": { "value": "{color.primary.100}", "source": "$btn-primary-outline-hover-bg" }, "inverse-primary": { - "value": "{color.btn.bg.inverse-primary.value}", + "value": "{color.btn.bg.inverse-primary}", "source": "$btn-primary-inverse-hover-bg", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-primary": { "value": "{color.primary.100.value}", "source": "$btn-primary-inverse-outline-hover-bg" } + "inverse-outline-primary": { "value": "{color.primary.100}", "source": "$btn-primary-inverse-outline-hover-bg" } }, "border": { - "primary": { "value": "{color.theme.hover.primary.value}", "source": "$btn-primary-hover-border-color" }, - "outline-primary": { "value": "{color.primary.900.value}", "source": "$btn-primary-outline-hover-border-color" }, + "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" } } }, "active": { "text": { "primary": { - "value": "{color.btn.active.bg.primary.value}", + "value": "{color.btn.active.bg.primary}", "source": "$btn-primary-active-color", "modify": [{ "type": "color-yiq" }] }, "outline-primary": { - "value": "{color.btn.active.bg.outline-primary.value}", + "value": "{color.btn.active.bg.outline-primary}", "source": "$btn-primary-outline-active-color", "modify": [{ "type": "color-yiq" }] }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary.value}", + "value": "{color.btn.text.inverse-primary}", "source": "$btn-primary-inverse-active-color", "modify": [{ "type": "darken", "amount": 0.1 }] }, "inverse-outline-primary": { - "value": "{color.btn.active.bg.inverse-outline-primary.value}", + "value": "{color.btn.active.bg.inverse-outline-primary}", "source": "$btn-primary-inverse-outline-active-color", "modify": [{ "type": "color-yiq" }] } }, "bg": { - "primary": { "value": "{color.theme.active.primary.value}", "source": "$btn-primary-active-bg" }, - "outline-primary": { "value": "{color.theme.bg.primary.value}", "source": "$btn-primary-outline-active-bg" }, - "inverse-outline-primary": { "value": "{color.theme.bg.primary.value}", "source": "$btn-primary-inverse-outline-active-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" } }, "border": { - "primary": { "value": "{color.theme.active.primary.value}", "source": "$btn-primary-active-border-color" }, - "outline-primary": { "value": "{color.theme.active.primary.value}", "source": "$btn-primary-outline-active-border-color" }, + "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" } } }, "focus": { "border": { - "primary": { "value": "{color.theme.focus.primary.value}", "source": "$btn-primary-focus-border-color" }, - "outline-primary": { "value": "{color.theme.focus.primary.value}", "source": "$btn-primary-outline-focus-border-color" }, - "inverse-primary": { "value": "{color.white.value}", "source": "$btn-primary-inverse-focus-border-color" }, - "inverse-outline-primary": { "value": "{color.white.value}", "source": "$btn-primary-inverse-outline-focus-border-color" } + "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" } } } } diff --git a/tokens/src/components/Button/secondary.json b/tokens/src/components/Button/secondary.json index bf53cf25aa..0f983075d7 100644 --- a/tokens/src/components/Button/secondary.json +++ b/tokens/src/components/Button/secondary.json @@ -2,94 +2,94 @@ "color": { "btn": { "text": { - "secondary": { "value": "{color.btn.bg.secondary.value}", "source": "$btn-secondary-color", "modify": [{ "type": "color-yiq" }] }, - "outline-secondary": { "value": "{color.secondary.base.value}", "source": "$btn-secondary-outline-color" }, - "inverse-secondary": { "value": "{color.secondary.base.value}", "source": "$btn-secondary-inverse-color" }, - "inverse-outline-secondary": { "value": "{color.white.value}", "source": "$btn-secondary-inverse-outline-color" } + "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" } }, "bg": { - "secondary": { "value": "{color.secondary.base.value}", "source": "$btn-secondary-bg" }, + "secondary": { "value": "{color.secondary.base}", "source": "$btn-secondary-bg" }, "inverse-secondary": { - "value": "{color.btn.text.inverse-secondary.value}", + "value": "{color.btn.text.inverse-secondary}", "source": "$btn-secondary-inverse-bg", "modify": [{ "type": "color-yiq" }] } }, "border": { - "secondary": { "value": "{color.btn.bg.secondary.value}", "source": "$btn-secondary-border-color" }, - "outline-secondary": { "value": "{color.secondary.base.value}", "source": "$btn-secondary-outline-border-color" }, - "inverse-outline-secondary": { "value": "{color.white.value}", "source": "$btn-secondary-inverse-outline-border-color" } + "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" } }, "hover": { "text": { "secondary": { - "value": "{color.btn.hover.bg.secondary.value}", + "value": "{color.btn.hover.bg.secondary}", "source": "$btn-secondary-hover-color", "modify": [{ "type": "color-yiq" }] }, - "outline-secondary": { "value": "{color.theme.hover.secondary.value}", "source": "$btn-secondary-outline-hover-color" }, + "outline-secondary": { "value": "{color.theme.hover.secondary}", "source": "$btn-secondary-outline-hover-color" }, "inverse-secondary": { - "value": "{color.btn.text.inverse-secondary.value}", + "value": "{color.btn.text.inverse-secondary}", "source": "$btn-secondary-inverse-hover-color", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-secondary": { "value": "{color.theme.hover.secondary.value}", "source": "$btn-secondary-inverse-outline-hover-color" } + "inverse-outline-secondary": { "value": "{color.theme.hover.secondary}", "source": "$btn-secondary-inverse-outline-hover-color" } }, "bg": { - "secondary": { "value": "{color.theme.hover.secondary.value}", "source": "$btn-secondary-hover-bg" }, - "outline-secondary": { "value": "{color.secondary.100.value}", "source": "$btn-secondary-outline-hover-bg" }, + "secondary": { "value": "{color.theme.hover.secondary}", "source": "$btn-secondary-hover-bg" }, + "outline-secondary": { "value": "{color.secondary.100}", "source": "$btn-secondary-outline-hover-bg" }, "inverse-secondary": { - "value": "{color.btn.bg.inverse-secondary.value}", + "value": "{color.btn.bg.inverse-secondary}", "source": "$btn-secondary-inverse-hover-bg", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-secondary": { "value": "{color.secondary.100.value}", "source": "$btn-secondary-inverse-outline-hover-bg" } + "inverse-outline-secondary": { "value": "{color.secondary.100}", "source": "$btn-secondary-inverse-outline-hover-bg" } }, "border": { - "secondary": { "value": "{color.theme.hover.secondary.value}", "source": "$btn-secondary-hover-border-color" }, - "outline-secondary": { "value": "{color.secondary.900.value}", "source": "$btn-secondary-outline-hover-border-color" }, + "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" } } }, "active": { "text": { "secondary": { - "value": "{color.btn.active.bg.secondary.value}", + "value": "{color.btn.active.bg.secondary}", "source": "$btn-secondary-active-color", "modify": [{ "type": "color-yiq" }] }, "outline-secondary": { - "value": "{color.btn.active.bg.outline-secondary.value}", + "value": "{color.btn.active.bg.outline-secondary}", "source": "$btn-secondary-outline-active-color", "modify": [{ "type": "color-yiq" }] }, "inverse-secondary": { - "value": "{color.btn.text.inverse-secondary.value}", + "value": "{color.btn.text.inverse-secondary}", "source": "$btn-secondary-inverse-active-color", "modify": [{ "type": "darken", "amount": 0.1 }] }, "inverse-outline-secondary": { - "value": "{color.btn.active.bg.inverse-outline-secondary.value}", + "value": "{color.btn.active.bg.inverse-outline-secondary}", "source": "$btn-secondary-inverse-outline-active-color", "modify": [{ "type": "color-yiq" }] } }, "bg": { - "secondary": { "value": "{color.theme.active.secondary.value}", "source": "$btn-secondary-active-bg" }, - "outline-secondary": { "value": "{color.theme.bg.secondary.value}", "source": "$btn-secondary-outline-active-bg" }, - "inverse-outline-secondary": { "value": "{color.theme.bg.secondary.value}", "source": "$btn-secondary-inverse-outline-active-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" } }, "border": { - "secondary": { "value": "{color.theme.active.secondary.value}", "source": "$btn-secondary-active-border-color" }, - "outline-secondary": { "value": "{color.theme.active.secondary.value}", "source": "$btn-secondary-outline-active-border-color" }, + "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" } } }, "focus": { "border": { - "secondary": { "value": "{color.theme.focus.secondary.value}", "source": "$btn-secondary-focus-border-color" }, - "outline-secondary": { "value": "{color.theme.focus.secondary.value}", "source": "$btn-secondary-outline-focus-border-color" }, - "inverse-secondary": { "value": "{color.white.value}", "source": "$btn-secondary-inverse-focus-border-color" }, - "inverse-outline-secondary": { "value": "{color.white.value}", "source": "$btn-secondary-inverse-outline-focus-border-color" } + "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" } } } } diff --git a/tokens/src/components/Button/success.json b/tokens/src/components/Button/success.json index 70c2e94ecb..4749842390 100644 --- a/tokens/src/components/Button/success.json +++ b/tokens/src/components/Button/success.json @@ -2,94 +2,94 @@ "color": { "btn": { "text": { - "success": { "value": "{color.btn.bg.success.value}", "source": "$btn-success-color", "modify": [{ "type": "color-yiq" }] }, - "outline-success": { "value": "{color.success.base.value}", "source": "$btn-success-outline-color" }, - "inverse-success": { "value": "{color.success.base.value}", "source": "$btn-success-inverse-color" }, - "inverse-outline-success": { "value": "{color.white.value}", "source": "$btn-success-inverse-outline-color" } + "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" } }, "bg": { - "success": { "value": "{color.success.base.value}", "source": "$btn-success-bg" }, + "success": { "value": "{color.success.base}", "source": "$btn-success-bg" }, "inverse-success": { - "value": "{color.btn.text.inverse-success.value}", + "value": "{color.btn.text.inverse-success}", "source": "$btn-success-inverse-bg", "modify": [{ "type": "color-yiq" }] } }, "border": { - "success": { "value": "{color.btn.bg.success.value}", "source": "$btn-success-border-color" }, - "outline-success": { "value": "{color.success.base.value}", "source": "$btn-success-outline-border-color" }, - "inverse-outline-success": { "value": "{color.white.value}", "source": "$btn-success-inverse-outline-border-color" } + "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" } }, "hover": { "text": { "success": { - "value": "{color.btn.hover.bg.success.value}", + "value": "{color.btn.hover.bg.success}", "source": "$btn-success-hover-color", "modify": [{ "type": "color-yiq" }] }, - "outline-success": { "value": "{color.theme.hover.success.value}", "source": "$btn-success-outline-hover-color" }, + "outline-success": { "value": "{color.theme.hover.success}", "source": "$btn-success-outline-hover-color" }, "inverse-success": { - "value": "{color.btn.text.inverse-success.value}", + "value": "{color.btn.text.inverse-success}", "source": "$btn-success-inverse-hover-color", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-success": { "value": "{color.theme.hover.success.value}", "source": "$btn-success-inverse-outline-hover-color" } + "inverse-outline-success": { "value": "{color.theme.hover.success}", "source": "$btn-success-inverse-outline-hover-color" } }, "bg": { - "success": { "value": "{color.theme.hover.success.value}", "source": "$btn-success-hover-bg" }, - "outline-success": { "value": "{color.success.100.value}", "source": "$btn-success-outline-hover-bg" }, + "success": { "value": "{color.theme.hover.success}", "source": "$btn-success-hover-bg" }, + "outline-success": { "value": "{color.success.100}", "source": "$btn-success-outline-hover-bg" }, "inverse-success": { - "value": "{color.btn.bg.inverse-success.value}", + "value": "{color.btn.bg.inverse-success}", "source": "$btn-success-inverse-hover-bg", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-success": { "value": "{color.success.100.value}", "source": "$btn-success-inverse-outline-hover-bg" } + "inverse-outline-success": { "value": "{color.success.100}", "source": "$btn-success-inverse-outline-hover-bg" } }, "border": { - "success": { "value": "{color.theme.hover.success.value}", "source": "$btn-success-hover-border-color" }, - "outline-success": { "value": "{color.success.900.value}", "source": "$btn-success-outline-hover-border-color" }, + "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" } } }, "active": { "text": { "success": { - "value": "{color.btn.active.bg.success.value}", + "value": "{color.btn.active.bg.success}", "source": "$btn-success-active-color", "modify": [{ "type": "color-yiq" }] }, "outline-success": { - "value": "{color.btn.active.bg.outline-success.value}", + "value": "{color.btn.active.bg.outline-success}", "source": "$btn-success-outline-active-color", "modify": [{ "type": "color-yiq" }] }, "inverse-success": { - "value": "{color.btn.text.inverse-success.value}", + "value": "{color.btn.text.inverse-success}", "source": "$btn-success-inverse-active-color", "modify": [{ "type": "darken", "amount": 0.1 }] }, "inverse-outline-success": { - "value": "{color.btn.active.bg.inverse-outline-success.value}", + "value": "{color.btn.active.bg.inverse-outline-success}", "source": "$btn-success-inverse-outline-active-color", "modify": [{ "type": "color-yiq" }] } }, "bg": { - "success": { "value": "{color.theme.active.success.value}", "source": "$btn-success-active-bg" }, - "outline-success": { "value": "{color.theme.bg.success.value}", "source": "$btn-success-outline-active-bg" }, - "inverse-outline-success": { "value": "{color.theme.bg.success.value}", "source": "$btn-success-inverse-outline-active-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" } }, "border": { - "success": { "value": "{color.theme.active.success.value}", "source": "$btn-success-active-border-color" }, - "outline-success": { "value": "{color.theme.active.success.value}", "source": "$btn-success-outline-active-border-color" }, + "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" } } }, "focus": { "border": { - "success": { "value": "{color.theme.focus.success.value}", "source": "$btn-success-focus-border-color" }, - "outline-success": { "value": "{color.theme.focus.success.value}", "source": "$btn-success-outline-focus-border-color" }, - "inverse-success": { "value": "{color.white.value}", "source": "$btn-success-inverse-focus-border-color" }, - "inverse-outline-success": { "value": "{color.white.value}", "source": "$btn-success-inverse-outline-focus-border-color" } + "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" } } } } diff --git a/tokens/src/components/Button/tertiary.json b/tokens/src/components/Button/tertiary.json index 6cea4a2b56..2a5f65c6f7 100644 --- a/tokens/src/components/Button/tertiary.json +++ b/tokens/src/components/Button/tertiary.json @@ -2,8 +2,8 @@ "color": { "btn": { "text": { - "tertiary": { "value": "{color.gray.700.value}", "source": "$btn-tertiary-color" }, - "inverse-tertiary": { "value": "{color.white.value}", "source": "$btn-inverse-tertiary-color" } + "tertiary": { "value": "{color.gray.700}", "source": "$btn-tertiary-color" }, + "inverse-tertiary": { "value": "{color.white}", "source": "$btn-inverse-tertiary-color" } }, "bg": { "tertiary": { "value": "transparent", "source": "$btn-tertiary-bg" }, @@ -15,13 +15,13 @@ }, "hover": { "text": { - "tertiary": { "value": "{color.gray.700.value}", "source": "$btn-tertiary-hover-color" }, - "inverse-tertiary": { "value": "{color.white.value}", "source": "$btn-inverse-tertiary-hover-color" } + "tertiary": { "value": "{color.gray.700}", "source": "$btn-tertiary-hover-color" }, + "inverse-tertiary": { "value": "{color.white}", "source": "$btn-inverse-tertiary-hover-color" } }, "bg": { - "tertiary": { "value": "{color.light.500.value}", "source": "$btn-tertiary-hover-bg" }, + "tertiary": { "value": "{color.light.500}", "source": "$btn-tertiary-hover-bg" }, "inverse-tertiary": { - "value": "{color.white.value}", + "value": "{color.white}", "source": "$btn-inverse-tertiary-hover-bg", "modify": [{ "type": "alpha", @@ -36,12 +36,12 @@ }, "active": { "text": { - "tertiary": { "value": "{color.gray.700.value}", "source": "$btn-tertiary-active-color" }, - "inverse-tertiary": { "value": "{color.white.value}", "source": "$btn-inverse-tertiary-active-color" } + "tertiary": { "value": "{color.gray.700}", "source": "$btn-tertiary-active-color" }, + "inverse-tertiary": { "value": "{color.white}", "source": "$btn-inverse-tertiary-active-color" } }, "bg": { - "tertiary": { "value": "{color.light.500.value}", "source": "$btn-tertiary-active-bg" }, - "inverse-tertiary": { "value": "{color.btn.hover.bg.inverse-tertiary.value}", "source": "$btn-inverse-tertiary-active-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" } }, "border": { "tertiary": { "value": "transparent", "source": "$btn-tertiary-active-border-color" }, @@ -50,8 +50,8 @@ }, "focus": { "border": { - "tertiary": { "value": "{color.theme.focus.primary.value}", "source": "$btn-tertiary-focus-border-color" }, - "inverse-tertiary": { "value": "{color.white.value}", "source": "$btn-inverse-tertiary-focus-border-color" } + "tertiary": { "value": "{color.theme.focus.primary}", "source": "$btn-tertiary-focus-border-color" }, + "inverse-tertiary": { "value": "{color.white}", "source": "$btn-inverse-tertiary-focus-border-color" } } } } diff --git a/tokens/src/components/Button/warning.json b/tokens/src/components/Button/warning.json index a54cf1cce7..af7490b4f1 100644 --- a/tokens/src/components/Button/warning.json +++ b/tokens/src/components/Button/warning.json @@ -2,94 +2,94 @@ "color": { "btn": { "text": { - "warning": { "value": "{color.btn.bg.warning.value}", "source": "$btn-warning-color", "modify": [{ "type": "color-yiq" }] }, - "outline-warning": { "value": "{color.warning.base.value}", "source": "$btn-warning-outline-color" }, - "inverse-warning": { "value": "{color.warning.base.value}", "source": "$btn-warning-inverse-color" }, - "inverse-outline-warning": { "value": "{color.white.value}", "source": "$btn-warning-inverse-outline-color" } + "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" } }, "bg": { - "warning": { "value": "{color.warning.base.value}", "source": "$btn-warning-bg" }, + "warning": { "value": "{color.warning.base}", "source": "$btn-warning-bg" }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning.value}", + "value": "{color.btn.text.inverse-warning}", "source": "$btn-warning-inverse-bg", "modify": [{ "type": "color-yiq" }] } }, "border": { - "warning": { "value": "{color.btn.bg.warning.value}", "source": "$btn-warning-border-color" }, - "outline-warning": { "value": "{color.warning.base.value}", "source": "$btn-warning-outline-border-color" }, - "inverse-outline-warning": { "value": "{color.white.value}", "source": "$btn-warning-inverse-outline-border-color" } + "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" } }, "hover": { "text": { "warning": { - "value": "{color.btn.hover.bg.warning.value}", + "value": "{color.btn.hover.bg.warning}", "source": "$btn-warning-hover-color", "modify": [{ "type": "color-yiq" }] }, - "outline-warning": { "value": "{color.theme.hover.warning.value}", "source": "$btn-warning-outline-hover-color" }, + "outline-warning": { "value": "{color.theme.hover.warning}", "source": "$btn-warning-outline-hover-color" }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning.value}", + "value": "{color.btn.text.inverse-warning}", "source": "$btn-warning-inverse-hover-color", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-warning": { "value": "{color.theme.hover.warning.value}", "source": "$btn-warning-inverse-outline-hover-color" } + "inverse-outline-warning": { "value": "{color.theme.hover.warning}", "source": "$btn-warning-inverse-outline-hover-color" } }, "bg": { - "warning": { "value": "{color.theme.hover.warning.value}", "source": "$btn-warning-hover-bg" }, - "outline-warning": { "value": "{color.warning.100.value}", "source": "$btn-warning-outline-hover-bg" }, + "warning": { "value": "{color.theme.hover.warning}", "source": "$btn-warning-hover-bg" }, + "outline-warning": { "value": "{color.warning.100}", "source": "$btn-warning-outline-hover-bg" }, "inverse-warning": { - "value": "{color.btn.bg.inverse-warning.value}", + "value": "{color.btn.bg.inverse-warning}", "source": "$btn-warning-inverse-hover-bg", "modify": [{ "type": "darken", "amount": 0.075 }] }, - "inverse-outline-warning": { "value": "{color.warning.100.value}", "source": "$btn-warning-inverse-outline-hover-bg" } + "inverse-outline-warning": { "value": "{color.warning.100}", "source": "$btn-warning-inverse-outline-hover-bg" } }, "border": { - "warning": { "value": "{color.theme.hover.warning.value}", "source": "$btn-warning-hover-border-color" }, - "outline-warning": { "value": "{color.warning.900.value}", "source": "$btn-warning-outline-hover-border-color" }, + "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" } } }, "active": { "text": { "warning": { - "value": "{color.btn.active.bg.warning.value}", + "value": "{color.btn.active.bg.warning}", "source": "$btn-warning-active-color", "modify": [{ "type": "color-yiq" }] }, "outline-warning": { - "value": "{color.btn.active.bg.outline-warning.value}", + "value": "{color.btn.active.bg.outline-warning}", "source": "$btn-warning-outline-active-color", "modify": [{ "type": "color-yiq" }] }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning.value}", + "value": "{color.btn.text.inverse-warning}", "source": "$btn-warning-inverse-active-color", "modify": [{ "type": "darken", "amount": 0.1 }] }, "inverse-outline-warning": { - "value": "{color.btn.active.bg.inverse-outline-warning.value}", + "value": "{color.btn.active.bg.inverse-outline-warning}", "source": "$btn-warning-inverse-outline-active-color", "modify": [{ "type": "color-yiq" }] } }, "bg": { - "warning": { "value": "{color.theme.active.warning.value}", "source": "$btn-warning-active-bg" }, - "outline-warning": { "value": "{color.theme.bg.warning.value}", "source": "$btn-warning-outline-active-bg" }, - "inverse-outline-warning": { "value": "{color.theme.bg.warning.value}", "source": "$btn-warning-inverse-outline-active-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" } }, "border": { - "warning": { "value": "{color.theme.active.warning.value}", "source": "$btn-warning-active-border-color" }, - "outline-warning": { "value": "{color.theme.active.warning.value}", "source": "$btn-warning-outline-active-border-color" }, + "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" } } }, "focus": { "border": { - "warning": { "value": "{color.theme.focus.warning.value}", "source": "$btn-warning-focus-border-color" }, - "outline-warning": { "value": "{color.theme.focus.warning.value}", "source": "$btn-warning-outline-focus-border-color" }, - "inverse-warning": { "value": "{color.white.value}", "source": "$btn-warning-inverse-focus-border-color" }, - "inverse-outline-warning": { "value": "{color.white.value}", "source": "$btn-warning-inverse-outline-focus-border-color" } + "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" } } } } diff --git a/tokens/src/components/Card.json b/tokens/src/components/Card.json index 3f36767e2c..1dd003d2f4 100644 --- a/tokens/src/components/Card.json +++ b/tokens/src/components/Card.json @@ -2,10 +2,10 @@ "color": { "card": { "base": { "value": "inherit", "source": "$card-color" }, - "bg": { "value": "{color.bg.base.value}", "source": "$card-bg" }, + "bg": { "value": "{color.bg.base}", "source": "$card-bg" }, "border": { "base": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$card-border-color", "modify": [{ "type": "alpha", @@ -13,7 +13,7 @@ }] }, "focus": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$card-border-focus-color", "modify": [{ "type": "alpha", @@ -21,7 +21,7 @@ }] } }, - "divider-bg": { "value": "{color.light.400.value}", "source": "$card-divider-bg" } + "divider-bg": { "value": "{color.light.400}", "source": "$card-divider-bg" } } }, "spacing": { @@ -32,11 +32,11 @@ }, "margin": { "group": { "value": "12px", "source": "$card-group-margin" }, - "deck": { "value": "{spacing.card.margin.group.value}", "source": "$card-deck-margin" }, - "grid": { "value": "{spacing.card.margin.group.value}", "source": "$card-grid-margin" } + "deck": { "value": "{spacing.card.margin.group}", "source": "$card-deck-margin" }, + "grid": { "value": "{spacing.card.margin.group}", "source": "$card-grid-margin" } }, "columns": { - "margin": { "value": "{spacing.card.spacer.y.value}", "source": "$card-columns-margin" }, + "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" } }, @@ -61,9 +61,9 @@ "size": { "card": { "border": { - "width": { "value": "{size.border.width.value}", "source": "$card-border-width" }, + "width": { "value": "{size.border.width}", "source": "$card-border-width" }, "radius": { - "base": { "value": "{size.border.radius.base.value}", "source": "$card-border-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" } } @@ -72,7 +72,7 @@ "horizontal": { "width": { "max": { "value": "240px", "source": "$card-image-horizontal-max-width" }, - "min": { "value": "{size.card.image.horizontal.width.max.value}", "source": "$card-image-horizontal-min-width" } + "min": { "value": "{size.card.image.horizontal.width.max}", "source": "$card-image-horizontal-min-width" } } }, "vertical": { @@ -88,7 +88,7 @@ "typography": { "footer": { "text": { - "font-size": { "value": "{typography.font.size.small.x.value}", "source": "$card-footer-text-font-size" } + "font-size": { "value": "{typography.font.size.small.x}", "source": "$card-footer-text-font-size" } } } } diff --git a/tokens/src/components/Carousel.json b/tokens/src/components/Carousel.json index b72f58d7a6..f292b5caaf 100644 --- a/tokens/src/components/Carousel.json +++ b/tokens/src/components/Carousel.json @@ -2,16 +2,16 @@ "color": { "carousel": { "control": { - "base": { "value": "{color.white.value}", "source": "$carousel-control-color" }, + "base": { "value": "{color.white}", "source": "$carousel-control-color" }, "opacity": { "base": { "value": ".5", "source": "$carousel-control-opacity" }, "hover": { "value": ".9", "source": "$carousel-control-hover-opacity" } } }, "indicator": { - "active-bg": { "value": "{color.white.value}", "source": "$carousel-indicator-active-bg" } + "active-bg": { "value": "{color.white}", "source": "$carousel-indicator-active-bg" } }, - "caption": { "value": "{color.white.value}", "source": "$carousel-caption-color" } + "caption": { "value": "{color.white}", "source": "$carousel-caption-color" } } }, "size": { @@ -40,7 +40,7 @@ "transition": { "carousel": { "base": { - "value": "transform {transition.carousel.duration.value} ease-in-out", + "value": "transform {transition.carousel.duration} ease-in-out", "source": "$carousel-transition-duration" }, "duration": { "value": ".6s", "source": "$carousel-transition-duration" }, @@ -53,7 +53,7 @@ "control": { "bg": { "prev-icon": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base.value}' 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\")", + "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\")", "source": "$carousel-control-prev-icon-bg", "outputReferences": false, "modify": [{ @@ -63,7 +63,7 @@ }] }, "next-icon": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base.value}' 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\")", + "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\")", "source": "$carousel-control-next-icon-bg", "outputReferences": false, "modify": [{ diff --git a/tokens/src/components/Chip.json b/tokens/src/components/Chip.json index dec3137e18..7ce2f80cba 100644 --- a/tokens/src/components/Chip.json +++ b/tokens/src/components/Chip.json @@ -2,12 +2,12 @@ "color": { "chip": { "text": { - "light": { "value": "{color.black.value}", "source": "$chip-light-color" }, - "dark": { "value": "{color.white.value}", "source": "$chip-dark-color" } + "light": { "value": "{color.black}", "source": "$chip-light-color" }, + "dark": { "value": "{color.white}", "source": "$chip-dark-color" } }, "bg": { - "light": { "value": "{color.light.500.value}", "source": "$chip-light-bg" }, - "dark": { "value": "{color.dark.200.value}", "source": "$chip-dark-bg" } + "light": { "value": "{color.light.500}", "source": "$chip-light-bg" }, + "dark": { "value": "{color.dark.200}", "source": "$chip-dark-bg" } } } }, diff --git a/tokens/src/components/CloseButton.json b/tokens/src/components/CloseButton.json index f60e4786ed..3fc45dc258 100644 --- a/tokens/src/components/CloseButton.json +++ b/tokens/src/components/CloseButton.json @@ -1,18 +1,18 @@ { "color": { - "close-button": { "value": "{color.black.value}", "source": "$close-color" } + "close-button": { "value": "{color.black}", "source": "$close-color" } }, "typography": { "close-button": { "font": { - "size": { "value": "calc({typography.font.size.base.value} * 1.5)", "source": "$close-font-size" }, - "weight": { "value": "{typography.font.weight.bold.value}", "source": "$close-font-weight" } + "size": { "value": "calc({typography.font.size.base} * 1.5)", "source": "$close-font-size" }, + "weight": { "value": "{typography.font.weight.bold}", "source": "$close-font-weight" } } } }, "elevation": { "close-button": { - "text-shadow": { "value": "0 1px 0 {color.white.value}", "source": "$close-text-shadow" } + "text-shadow": { "value": "0 1px 0 {color.white}", "source": "$close-text-shadow" } } } } diff --git a/tokens/src/components/Code.json b/tokens/src/components/Code.json index 2dcf0e31ad..927f81be98 100644 --- a/tokens/src/components/Code.json +++ b/tokens/src/components/Code.json @@ -3,19 +3,19 @@ "code": { "base": { "value": "#E83E8C", "source": "$code-color" }, "kbd": { - "base": { "value": "{color.white.value}", "source": "$kbd-color" }, - "bg": { "value": "{color.gray.700.value}", "source": "$kbd-bg" } + "base": { "value": "{color.white}", "source": "$kbd-color" }, + "bg": { "value": "{color.gray.700}", "source": "$kbd-bg" } }, - "pre": { "value": "{color.gray.900.value}", "source": "$pre-color" } + "pre": { "value": "{color.gray.900}", "source": "$pre-color" } } }, "typography": { "code": { "font-size": { "value": "87.5%", "source": "$code-font-size" }, "kbd": { - "font-size": { "value": "{typography.code.font-size.value}", "source": "$kbd-font-size" }, + "font-size": { "value": "{typography.code.font-size}", "source": "$kbd-font-size" }, "nested": { - "font-weight": { "value": "{typography.font.weight.bold.value}", "source": "$nested-kbd-font-weight" } + "font-weight": { "value": "{typography.font.weight.bold}", "source": "$nested-kbd-font-weight" } } } } diff --git a/tokens/src/components/Collapsible.json b/tokens/src/components/Collapsible.json index b972f1e007..896ac718a5 100644 --- a/tokens/src/components/Collapsible.json +++ b/tokens/src/components/Collapsible.json @@ -5,11 +5,11 @@ "spacer": { "y": { "base": { "value": ".5rem", "source": "$collapsible-card-spacer-y" }, - "lg": { "value": "{spacing.card.spacer.y.value}", "source": "$collapsible-card-spacer-y-lg" } + "lg": { "value": "{spacing.card.spacer.y}", "source": "$collapsible-card-spacer-y-lg" } }, "x": { "base": { "value": ".5rem", "source": "$collapsible-card-spacer-x" }, - "lg": { "value": "{spacing.card.spacer.x.value}", "source": "$collapsible-card-spacer-x-lg" } + "lg": { "value": "{spacing.card.spacer.x}", "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" }, diff --git a/tokens/src/components/DataTable.json b/tokens/src/components/DataTable.json index 6bff9344f1..4800656cb3 100644 --- a/tokens/src/components/DataTable.json +++ b/tokens/src/components/DataTable.json @@ -2,9 +2,9 @@ "color": { "data-table": { "bg": { - "base": { "value": "{color.bg.base.value}", "source": "$data-table-background-color" }, + "base": { "value": "{color.bg.base}", "source": "$data-table-background-color" }, "is-loading": { - "value": "{color.white.value}", + "value": "{color.white}", "source": "$data-table-is-loading-bg", "modify": [ { @@ -14,12 +14,12 @@ ] } }, - "border": { "value": "{color.gray.200.value}", "source": "$data-table-border-color" } + "border": { "value": "{color.gray.200}", "source": "$data-table-border-color" } } }, "elevation": { "data-table": { - "box-shadow": { "value": "{elevation.box-shadow.sm.value}", "source": "$data-table-box-shadow" } + "box-shadow": { "value": "{elevation.box-shadow.sm}", "source": "$data-table-box-shadow" } } }, "size": { diff --git a/tokens/src/components/Dropdown.json b/tokens/src/components/Dropdown.json index 97dfb55b86..1ba938e674 100644 --- a/tokens/src/components/Dropdown.json +++ b/tokens/src/components/Dropdown.json @@ -1,46 +1,46 @@ { "color": { "dropdown": { - "text": { "value": "{color.body.base.value}", "source": "$dropdown-color" }, - "header": { "value": "{color.gray.500.value}", "source": "$dropdown-header-color" }, - "bg": { "value": "{color.bg.base.value}", "source": "$dropdown-bg" }, + "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" }, "border": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$dropdown-border-color", "modify": [{ "type": "alpha", "amount": 0.15 }] }, - "divider-bg": { "value": "{color.gray.100.value}", "source": "$dropdown-divider-bg" }, + "divider-bg": { "value": "{color.gray.100}", "source": "$dropdown-divider-bg" }, "link": { - "base": { "value": "{color.gray.900.value}", "source": "$dropdown-link-color" }, + "base": { "value": "{color.gray.900}", "source": "$dropdown-link-color" }, "hover": { - "base": { "value": "{color.gray.900.value}", "source": "$dropdown-link-hover-color" }, - "bg": { "value": "{color.light.300.value}", "source": "$dropdown-link-hover-bg" } + "base": { "value": "{color.gray.900}", "source": "$dropdown-link-hover-color" }, + "bg": { "value": "{color.light.300}", "source": "$dropdown-link-hover-bg" } }, "active": { - "base": { "value": "{color.active.value}", "source": "$dropdown-link-active-color" }, - "bg": { "value": "{color.bg.active.value}", "source": "$dropdown-link-active-bg" } + "base": { "value": "{color.active}", "source": "$dropdown-link-active-color" }, + "bg": { "value": "{color.bg.active}", "source": "$dropdown-link-active-bg" } }, - "disabled": { "value": "{color.disabled.value}", "source": "$dropdown-link-disabled-color" } + "disabled": { "value": "{color.disabled}", "source": "$dropdown-link-disabled-color" } } } }, "typography": { "dropdown": { - "font-size": { "value": "{typography.font.size.base.value}", "source": "$dropdown-font-size" } + "font-size": { "value": "{typography.font.size.base}", "source": "$dropdown-font-size" } } }, "size": { "dropdown": { "min-width": { "value": "18rem", "source": "$dropdown-min-width" }, "border": { - "width": { "value": "{size.border.width.value}", "source": "$dropdown-border-width" }, + "width": { "value": "{size.border.width}", "source": "$dropdown-border-width" }, "radius": { - "base": { "value": "{size.border.radius.base.value}", "source": "$dropdown-border-radius" }, + "base": { "value": "{size.border.radius.base}", "source": "$dropdown-border-radius" }, "inner": { - "value": "calc({size.dropdown.border.radius.base.value} - {size.dropdown.border.width.value})", + "value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})", "source": "$dropdown-inner-border-radius" } } @@ -60,12 +60,12 @@ "item": { "value": ".5rem", "source": "$dropdown-item-padding-y" } }, "header": { - "value": "{spacing.dropdown.padding.y.base.value} {spacing.dropdown.padding.x.item.value}", + "value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}", "source": "$dropdown-header-padding" } }, "divider": { - "margin-y": { "value": "calc({spacing.spacer.base.value} / 2)", "source": "$dropdown-divider-margin-y" } + "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "source": "$dropdown-divider-margin-y" } }, "close-container": { "top": { "value": ".625rem", "source": "$modal-close-container-top" } diff --git a/tokens/src/components/Dropzone.json b/tokens/src/components/Dropzone.json index e9228bd4d2..a2b45e2336 100644 --- a/tokens/src/components/Dropzone.json +++ b/tokens/src/components/Dropzone.json @@ -1,21 +1,21 @@ { "color": { "dropzone": { - "error-wrapper": { "value": "{color.danger.500.value}", "source": "$dropzone-error-wrapper-color" }, - "restriction-msg": { "value": "{color.gray.500.value}", "source": "$dropzone-restriction-msg-color" }, + "error-wrapper": { "value": "{color.danger.500}", "source": "$dropzone-error-wrapper-color" }, + "restriction-msg": { "value": "{color.gray.500}", "source": "$dropzone-restriction-msg-color" }, "border": { - "base": { "value": "{color.gray.500.value}", "source": "$dropzone-border-color-default" }, - "hover": { "value": "{color.info.300.value}", "source": "$dropzone-border-color-hover" }, - "focus": { "value": "{color.info.300.value}", "source": "$dropzone-border-color-focus" }, - "active": { "value": "{color.primary.500.value}", "source": "$dropzone-border-color-active" }, - "error": { "value": "{color.danger.300.value}", "source": "$dropzone-border-color-error" } + "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" } } } }, "typography": { "dropzone": { "restriction-msg": { - "font-size": { "value": "{typography.font.size.small.x.value}", "source": "$dropzone-restriction-msg-font-size" } + "font-size": { "value": "{typography.font.size.small.x}", "source": "$dropzone-restriction-msg-font-size" } } } }, diff --git a/tokens/src/components/Form/color.json b/tokens/src/components/Form/color.json index 2b7c7fc2a8..c87192d277 100644 --- a/tokens/src/components/Form/color.json +++ b/tokens/src/components/Form/color.json @@ -2,40 +2,40 @@ "color": { "form": { "input": { - "base": { "value": "{color.gray.700.value}", "source": "$input-color" }, - "placeholder": { "value": "{color.gray.500.value}", "source": "$input-placeholder-color" }, - "plaintext": { "value": "{color.body.base.value}", "source": "$input-plaintext-color" }, - "border": { "value": "{color.gray.500.value}", "source": "$input-border-color" }, + "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" }, "bg": { - "base": { "value": "{color.bg.base.value}", "source": "$input-bg" }, - "disabled": { "value": "{color.gray.100.value}", "source": "$input-disabled-bg" } + "base": { "value": "{color.bg.base}", "source": "$input-bg" }, + "disabled": { "value": "{color.gray.100}", "source": "$input-disabled-bg" } }, "group": { "addon": { - "base": { "value": "{color.form.input.base.value}", "source": "$input-group-addon-color" }, - "border": { "value": "{color.form.input.border.value}", "source": "$input-group-addon-border-color" }, - "bg": { "value": "{color.gray.100.value}", "source": "$input-group-addon-bg" } + "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" } } }, "focus": { - "base": { "value": "{color.form.input.base.value}", "source": "$input-focus-color" }, - "border": { "value": "{color.input.focus.value}", "source": "$input-focus-border-color" }, - "bg": { "value": "{color.form.input.bg.base.value}", "source": "$input-focus-bg" } + "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" } } }, "control": { "indicator": { - "border": { "value": "{color.gray.700.value}", "source": "$custom-control-indicator-border-color" }, + "border": { "value": "{color.gray.700}", "source": "$custom-control-indicator-border-color" }, "bg": { - "base": { "value": "{color.form.input.bg.base.value}", "source": "$custom-control-indicator-bg" }, - "disabled": { "value": "{color.form.input.bg.disabled.value}", "source": "$custom-control-indicator-disabled-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" } }, "checked": { - "base": { "value": "{color.bg.active.value}", "source": "$custom-control-indicator-checked-color" }, + "base": { "value": "{color.bg.active}", "source": "$custom-control-indicator-checked-color" }, "bg": { - "base": { "value": "{color.bg.active.value}", "source": "$custom-control-indicator-checked-bg" }, + "base": { "value": "{color.bg.active}", "source": "$custom-control-indicator-checked-bg" }, "disabled": { - "value": "{color.primary.500.value}", + "value": "{color.primary.500}", "source": "$custom-control-indicator-checked-disabled-bg", "modify": [{ "type": "alpha", @@ -44,24 +44,24 @@ } }, "border": { - "base": { "value": "{color.primary.500.value}", "source": "$custom-control-indicator-checked-border-color" }, - "focus": { "value": "{color.form.input.focus.border.value}", "source": "$custom-control-indicator-focus-border-color" } + "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" } } }, "active": { - "base": { "value": "{color.active.value}", "source": "$custom-control-indicator-active-color" }, - "bg": { "value": "{color.bg.active.value}", "source": "$custom-control-indicator-active-bg" }, + "base": { "value": "{color.active}", "source": "$custom-control-indicator-active-color" }, + "bg": { "value": "{color.bg.active}", "source": "$custom-control-indicator-active-bg" }, "border": { - "value": "{color.form.control.indicator.active.bg.value}", "source": "$custom-control-indicator-active-border-color" + "value": "{color.form.control.indicator.active.bg}", "source": "$custom-control-indicator-active-border-color" } } }, "label": { "base": { "value": "inherit", "source": "$custom-control-label-color" }, - "disabled": { "value": "{color.disabled.value}", "source": "$custom-control-label-disabled-color" }, + "disabled": { "value": "{color.disabled}", "source": "$custom-control-label-disabled-color" }, "floating": { "text": { - "value": "{color.form.input.bg.base.value}", + "value": "{color.form.input.bg.base}", "source": "$form-control-floating-label-text-bg", "modify": [{ "type": "alpha", @@ -73,10 +73,10 @@ "checkbox": { "indicator": { "indeterminate": { - "base": { "value": "{color.form.control.indicator.checked.base.value}", "source": "$custom-checkbox-indicator-indeterminate-color"}, - "bg": { "value": "{color.bg.active.value}", "source": "$custom-checkbox-indicator-indeterminate-bg" }, + "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" }, "border": { - "value": "{color.form.control.checkbox.indicator.indeterminate.bg.value}", "source": "$custom-checkbox-indicator-indeterminate-border-color" + "value": "{color.form.control.checkbox.indicator.indeterminate.bg}", "source": "$custom-checkbox-indicator-indeterminate-border-color" } } } @@ -84,36 +84,36 @@ "switch": { "indicator": { "checked": { - "bg": { "value": "{color.success.base.value}", "source": "$custom-switch-indicator-checked-bg" } + "bg": { "value": "{color.success.base}", "source": "$custom-switch-indicator-checked-bg" } } } }, "select": { - "base": { "value": "{color.form.input.base.value}", "source": "$custom-select-color" }, - "disabled": { "value": "{color.disabled.value}", "source": "$custom-select-disabled-color" }, + "base": { "value": "{color.form.input.base}", "source": "$custom-select-color" }, + "disabled": { "value": "{color.disabled}", "source": "$custom-select-disabled-color" }, "indicator": { "base": { "value": "{color.theme.hover.gray}", "source": "$custom-select-indicator-color" } }, "bg": { - "base": { "value": "{color.form.input.bg.base.value}", "source": "$custom-select-bg" }, - "disabled": { "value": "{color.gray.100.value}", "source": "$custom-select-disabled-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" } }, "border": { - "base": { "value": "{color.form.input.border.value}", "source": "$custom-select-border-color" }, - "focus": { "value": "{color.form.input.focus.border.value}", "source": "$custom-select-focus-border-color" } + "base": { "value": "{color.form.input.border}", "source": "$custom-select-border-color" }, + "focus": { "value": "{color.form.input.focus.border}", "source": "$custom-select-focus-border-color" } } }, "range": { "track": { - "bg": { "value": "{color.gray.300.value}", "source": "$custom-range-track-bg" } + "bg": { "value": "{color.gray.300}", "source": "$custom-range-track-bg" } }, "thumb": { "bg": { - "base": { "value": "{color.bg.active.value}", "source": "$custom-range-thumb-bg" }, - "disabled": { "value": "{color.disabled.value}", "source": "$custom-range-thumb-disabled-bg" }, + "base": { "value": "{color.bg.active}", "source": "$custom-range-thumb-bg" }, + "disabled": { "value": "{color.disabled}", "source": "$custom-range-thumb-disabled-bg" }, "active": { - "value": "{color.bg.active.value}", + "value": "{color.bg.active}", "source": "$custom-range-thumb-active-bg", "modify": [{ "type": "lighten", @@ -124,37 +124,37 @@ } }, "file": { - "base": { "value": "{color.form.input.base.value}", "source": "$custom-file-color" }, + "base": { "value": "{color.form.input.base}", "source": "$custom-file-color" }, "bg": { - "base": { "value": "{color.form.input.bg.base.value}", "source": "$custom-file-bg" }, - "disabled": { "value": "{color.form.input.bg.disabled.value}", "source": "$custom-file-disabled-bg" } + "base": { "value": "{color.form.input.bg.base}", "source": "$custom-file-bg" }, + "disabled": { "value": "{color.form.input.bg.disabled}", "source": "$custom-file-disabled-bg" } }, "button": { - "base": { "value": "{color.form.control.file.base.value}", "source": "$custom-file-button-color" }, - "bg": { "value": "{color.form.input.group.addon.bg.value}", "source": "$custom-file-button-bg" } + "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" } }, "border": { - "base": { "value": "{color.form.input.border.value}", "source": "$custom-file-border-color" }, - "focus": { "value": "{color.form.input.focus.border.value}", "source": "$custom-file-focus-border-color" } + "base": { "value": "{color.form.input.border}", "source": "$custom-file-border-color" }, + "focus": { "value": "{color.form.input.focus.border}", "source": "$custom-file-focus-border-color" } } } }, "feedback": { - "valid": { "value": "{color.success.base.value}", "source": "$form-feedback-valid-color" }, - "invalid": { "value": "{color.danger.base.value}", "source": "$form-feedback-invalid-color" }, + "valid": { "value": "{color.success.base}", "source": "$form-feedback-valid-color" }, + "invalid": { "value": "{color.danger.base}", "source": "$form-feedback-invalid-color" }, "icon": { - "valid": { "value": "{color.form.feedback.valid.value}", "source": "$form-feedback-icon-valid-color" }, - "invalid": { "value": "{color.form.feedback.invalid.value}", "source": "$form-feedback-icon-invalid-color" } + "valid": { "value": "{color.form.feedback.valid}", "source": "$form-feedback-icon-valid-color" }, + "invalid": { "value": "{color.form.feedback.invalid}", "source": "$form-feedback-icon-invalid-color" } }, "tooltip": { "valid": { - "value": "{color.form.feedback.valid.value}", + "value": "{color.form.feedback.valid}", "source": "$form-feedback-tooltip-valid-color", "modify": [{"type": "color-yiq"}] }, "bg": { "valid": { - "value": "{color.form.feedback.valid.value}", + "value": "{color.form.feedback.valid}", "source": "$form-feedback-tooltip-valid-bg", "modify": [{ "type": "alpha", @@ -162,7 +162,7 @@ }] }, "invalid": { - "value": "{color.form.feedback.invalid.value}", + "value": "{color.form.feedback.invalid}", "source": "$form-feedback-tooltip-invalid-bg", "modify": [{ "type": "alpha", @@ -173,7 +173,7 @@ "box-shadow": { "focus": { "valid": { - "value": "{color.form.feedback.valid.value}", + "value": "{color.form.feedback.valid}", "source": "$form-feedback-focus-box-shadow-valid-color", "modify": [{ "type": "alpha", @@ -181,7 +181,7 @@ }] }, "invalid": { - "value": "{color.form.feedback.invalid.value}", + "value": "{color.form.feedback.invalid}", "source": "$form-feedback-focus-box-shadow-invalid-color", "modify": [{ "type": "alpha", @@ -193,7 +193,7 @@ }, "checked": { "valid": { - "value": "{color.form.feedback.valid.value}", + "value": "{color.form.feedback.valid}", "source": "$form-feedback-checked-valid-color", "modify": [{ "type": "lighten", @@ -201,7 +201,7 @@ }] }, "invalid": { - "value": "{color.form.feedback.invalid.value}", + "value": "{color.form.feedback.invalid}", "source": "$form-feedback-checked-invalid-color", "modify": [{ "type": "lighten", diff --git a/tokens/src/components/Form/elevation.json b/tokens/src/components/Form/elevation.json index fd268afd71..12bfbd971e 100644 --- a/tokens/src/components/Form/elevation.json +++ b/tokens/src/components/Form/elevation.json @@ -3,11 +3,11 @@ "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.value}", "source": "$input-focus-box-shadow" } + "focus": { "value": "{elevation.input.btn-focus.box-shadow}", "source": "$input-focus-box-shadow" } }, "control": { "indicator": { - "base": { "value": "{elevation.form.input.base.value}", "source": "$custom-control-indicator-box-shadow" }, + "base": { "value": "{elevation.form.input.base}", "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" } @@ -23,17 +23,17 @@ "track": { "value": "inset 0 .25rem .25rem rgba(0, 0, 0, .1)", "source": "$custom-range-track-box-shadow" }, "thumb": { "base": { "value": "0 .1rem .25rem rgba(0, 0, 0, .1)", "source": "$custom-range-thumb-box-shadow" }, - "focus": { "value": "0 0 0 1px {color.body.bg.value}, {size.form.input.width.focus.value}", "source": "$custom-range-thumb-focus-box-shadow" } + "focus": { "value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}", "source": "$custom-range-thumb-focus-box-shadow" } } }, "file": { - "base": { "value": "{elevation.form.input.base.value}", "source": "$custom-file-box-shadow" }, - "focus": { "value": "{elevation.form.input.focus.value}", "source": "$custom-file-focus-box-shadow" } + "base": { "value": "{elevation.form.input.base}", "source": "$custom-file-box-shadow" }, + "focus": { "value": "{elevation.form.input.focus}", "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.value}", "source": "$custom-select-focus-box-shadow" } + "focus": { "value": "{elevation.input.btn-focus.box-shadow}", "source": "$custom-select-focus-box-shadow" } } } } diff --git a/tokens/src/components/Form/other.json b/tokens/src/components/Form/other.json index 9003f69dab..5a21e92302 100644 --- a/tokens/src/components/Form/other.json +++ b/tokens/src/components/Form/other.json @@ -15,7 +15,7 @@ "checkbox": { "indicator": { "icon-checked": { - "value": "url(\"data:image/svg+xml,\")", + "value": "url(\"data:image/svg+xml,\")", "source": "$custom-checkbox-indicator-icon-checked", "outputReferences": false, "modify": [ @@ -28,7 +28,7 @@ }, "indeterminate": { "icon": { - "value": "url(\"data:image/svg+xml,\")", + "value": "url(\"data:image/svg+xml,\")", "source": "$custom-checkbox-indicator-icon-indeterminate", "outputReferences": false, "modify": [ @@ -45,7 +45,7 @@ "radio": { "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.value}'/%3e%3c/svg%3e\")", + "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\")", "source": "$custom-radio-indicator-icon-checked", "outputReferences": false, "modify": [ @@ -61,7 +61,7 @@ "switch": { "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.value}'/%3e%3c/svg%3e\")", + "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\")", "source": "$custom-switch-indicator-icon-off", "outputReferences": false, "modify": [ @@ -73,7 +73,7 @@ ] }, "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.value}'/%3e%3c/svg%3e\")", + "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\")", "source": "$custom-switch-indicator-icon-on", "outputReferences": false, "modify": [ @@ -89,7 +89,7 @@ "select": { "indicator": { "icon": { - "value": "url('data:image/svg+xml,')", + "value": "url('data:image/svg+xml,')", "source": "$custom-select-indicator", "outputReferences": false, "modify": [ @@ -102,7 +102,7 @@ } }, "bg": { - "value": "{other.content.form.control.select.indicator.icon.value} no-repeat right {spacing.form.input.padding.y.base.value} center / {color.form.control.select.bg.base.value}", + "value": "{other.content.form.control.select.indicator.icon} no-repeat right {spacing.form.input.padding.y.base} center / {color.form.control.select.bg.base}", "source": "$custom-select-background" } } @@ -110,7 +110,7 @@ "feedback": { "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.value}' 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\")", + "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\")", "source": "$form-feedback-icon-valid", "outputReferences": false, "modify": [ @@ -122,7 +122,7 @@ ] }, "invalid": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid.value}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid.value}' 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\")", + "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\")", "source": "$form-feedback-icon-invalid", "outputReferences": false, "modify": [ diff --git a/tokens/src/components/Form/size.json b/tokens/src/components/Form/size.json index b84b3aa61e..432c57438f 100644 --- a/tokens/src/components/Form/size.json +++ b/tokens/src/components/Form/size.json @@ -4,43 +4,43 @@ "input": { "height": { "base": { - "value": "calc({typography.form.input.line-height.base.value} * 1em + {spacing.form.input.padding.y.base.value} * 2 + {size.form.input.height.border.value})", + "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})", "source": "$input-height" }, "sm": { - "value": "calc({typography.form.input.line-height.sm.value} * 1em + {spacing.input.btn.padding.sm.y.value} * 2 + {size.form.input.height.border.value})", + "value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})", "source": "$input-height-sm" }, "lg": { - "value": "calc({typography.form.input.line-height.lg.value} * 1em + {spacing.input.btn.padding.lg.y.value} * 2 + {size.form.input.height.border.value})", + "value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})", "source": "$input-height-lg" }, "inner": { "base": { - "value": "calc({typography.form.input.line-height.base.value} * 1em + {spacing.form.input.padding.y.base.value} * 2)", + "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", "source": "$input-height-inner" }, "half": { - "value": "calc({typography.form.input.line-height.base.value} * .5em + {spacing.form.input.padding.y.base.value})", + "value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})", "source": "$input-height-inner-half" }, "quarter": { - "value": "calc({typography.form.input.line-height.base.value} * .25em + calc({spacing.form.input.padding.y.base.value} / 2))", + "value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))", "source": "$input-height-inner-quarter" } }, - "border": { "value": "calc({size.form.input.width.border.value} * 2)", "source": "$input-height-border" } + "border": { "value": "calc({size.form.input.width.border} * 2)", "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.value}", "source": "$input-border-width" } + "border": { "value": "{size.input.btn.border-width}", "source": "$input-border-width" } }, "radius": { "border": { - "base": { "value": "{size.border.radius.base.value}", "source": "$input-border-radius" }, - "lg": { "value": "{size.border.radius.lg.value}", "source": "$input-border-radius-lg" }, - "sm": { "value": "{size.border.radius.sm.value}", "source": "$input-border-radius-sm" } + "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" } } } }, @@ -53,35 +53,35 @@ } }, "switch": { - "width": { "value": "calc({size.form.control.indicator.base.value} * 1.75)", "source": "$custom-switch-width" }, + "width": { "value": "calc({size.form.control.indicator.base} * 1.75)", "source": "$custom-switch-width" }, "indicator": { "base": { - "value": "calc({size.form.control.indicator.base.value} - {size.form.control.indicator.border.width.value} * 4)", + "value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)", "source": "$custom-switch-indicator-size" }, "border": { "radius": { - "value": "calc({size.form.control.indicator.base.value} / 2)", "source": "$custom-switch-indicator-border-radius" + "value": "calc({size.form.control.indicator.base} / 2)", "source": "$custom-switch-indicator-border-radius" } } } }, "select": { "height": { - "base": { "value": "{size.form.input.height.base.value}", "source": "$custom-select-height" }, - "lg": { "value": "{size.form.input.height.lg.value}", "source": "$custom-select-height-lg" }, - "sm": { "value": "{size.form.input.height.sm.value}", "source": "$custom-select-height-sm" } + "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" } }, "feedback": { - "icon": { "value": "{size.form.input.height.inner.half.value} {size.form.input.height.inner.half.value}", "source": "$custom-select-feedback-icon-size" } + "icon": { "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}", "source": "$custom-select-feedback-icon-size" } }, "border": { "width": { - "base": { "value": "{size.form.input.width.border.value}", "source": "$custom-select-border-width" }, - "focus": { "value": "{size.form.input.width.focus.value}", "source": "$custom-select-focus-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" } }, "radius": { - "value": "{size.border.radius.base.value}", "source": "$custom-select-border-radius" + "value": "{size.border.radius.base}", "source": "$custom-select-border-radius" } } }, @@ -95,25 +95,25 @@ }, "thumb": { "width": { "value": "1rem", "source": "$custom-range-thumb-width" }, - "height": { "value": "{size.form.control.range.thumb.width.value}", "source": "$custom-range-thumb-height" }, + "height": { "value": "{size.form.control.range.thumb.width}", "source": "$custom-range-thumb-height" }, "border": { "base": { "value": "0", "source": "$custom-range-thumb-border" }, "radius": { "value": "1rem", "source": "$custom-range-thumb-border-radius" } }, "focus": { - "width": { "value": "{size.form.input.width.focus.value}", "source": "$custom-range-thumb-focus-box-shadow-width" } + "width": { "value": "{size.form.input.width.focus}", "source": "$custom-range-thumb-focus-box-shadow-width" } } } }, "file": { - "width": { "value": "{size.form.input.width.border.value}", "source": "$custom-file-border-width" }, + "width": { "value": "{size.form.input.width.border}", "source": "$custom-file-border-width" }, "height": { - "base": { "value": "{size.form.input.height.base.value}", "source": "$custom-file-height" }, - "inner": { "value": "{size.form.input.height.inner.base.value}", "source": "$custom-file-height-inner" } + "base": { "value": "{size.form.input.height.base}", "source": "$custom-file-height" }, + "inner": { "value": "{size.form.input.height.inner.base}", "source": "$custom-file-height-inner" } }, "border": { "radius": { - "value": "{size.form.input.radius.border.base.value}", "source": "$custom-file-border-radius" + "value": "{size.form.input.radius.border.base}", "source": "$custom-file-border-radius" } } }, @@ -160,7 +160,7 @@ "feedback": { "tooltip": { "border": { - "radius": { "value": "{size.border.radius.base.value}", "source": "$form-feedback-tooltip-border-radius" } + "radius": { "value": "{size.border.radius.base}", "source": "$form-feedback-tooltip-border-radius" } } } } diff --git a/tokens/src/components/Form/spacing.json b/tokens/src/components/Form/spacing.json index 942690c1e6..13ffaed4b9 100644 --- a/tokens/src/components/Form/spacing.json +++ b/tokens/src/components/Form/spacing.json @@ -4,14 +4,14 @@ "input": { "padding": { "y": { - "base": { "value": "{spacing.input.btn.padding.y.value}", "source": "$input-padding-y" }, - "sm": { "value": "{spacing.input.btn.padding.sm.y.value}", "source": "$input-padding-y-sm" }, - "lg": { "value": "{spacing.input.btn.padding.lg.y.value}", "source": "$input-padding-y-lg" } + "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" } }, "x": { - "base": { "value": "{spacing.input.btn.padding.x.value}", "source": "$input-padding-x" }, - "sm": { "value": "{spacing.input.btn.padding.sm.x.value}", "source": "$input-padding-x-sm" }, - "lg": { "value": "{spacing.input.btn.padding.lg.x.value}", "source": "$input-padding-x-lg" } + "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" } } }, "check": { @@ -53,14 +53,14 @@ "select": { "padding": { "y": { - "base": { "value": "{spacing.form.input.padding.y.base.value}", "source": "$custom-select-padding-y" }, - "sm": { "value": "{spacing.form.input.padding.y.sm.value}", "source": "$custom-select-padding-y-sm" }, - "lg": { "value": "{spacing.form.input.padding.y.lg.value}", "source": "$custom-select-padding-y-lg" } + "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" } }, "x": { - "base": { "value": "{spacing.form.input.padding.x.base.value}", "source": "$custom-select-padding-x" }, - "sm": { "value": "{spacing.form.input.padding.x.sm.value}", "source": "$custom-select-padding-x-sm" }, - "lg": { "value": "{spacing.form.input.padding.x.lg.value}", "source": "$custom-select-padding-x-lg" } + "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" } } }, "indicator": { @@ -70,17 +70,17 @@ "icon": { "padding": { "right": { - "value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base.value}) * 3 / 4 + {spacing.form.control.select.padding.x.base.value} + {spacing.form.control.select.indicator.padding.value})", + "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})", "source": "$custom-select-feedback-icon-padding-right" } }, "position": { - "value": "center right calc({spacing.form.control.select.padding.x.base.value} + {spacing.form.control.select.indicator.padding.value})", + "value": "center right calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})", "source": "$custom-select-feedback-icon-position" } }, "margin": { - "top": { "value": "{spacing.form.text.margin.top.value}", "source": "$form-feedback-margin-top" } + "top": { "value": "{spacing.form.text.margin.top}", "source": "$form-feedback-margin-top" } }, "tooltip": { "padding": { @@ -95,8 +95,8 @@ }, "file": { "padding": { - "y": { "value": "{spacing.form.input.padding.y.base.value}", "source": "$custom-file-padding-y" }, - "x": { "value": "{spacing.form.input.padding.x.base.value}", "source": "$custom-file-padding-x" } + "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" } } } } diff --git a/tokens/src/components/Form/typography.json b/tokens/src/components/Form/typography.json index 963c59ff20..611b0bcd94 100644 --- a/tokens/src/components/Form/typography.json +++ b/tokens/src/components/Form/typography.json @@ -3,50 +3,50 @@ "form": { "input": { "font": { - "family": { "value": "{typography.input.btn.font.family.value}", "source": "$input-font-family" }, + "family": { "value": "{typography.input.btn.font.family}", "source": "$input-font-family" }, "size": { - "base": { "value": "{typography.input.btn.font.size.base.value}", "source": "$input-font-size" }, - "sm": { "value": "{typography.input.btn.font.size.sm.value}", "source": "$input-font-size-sm" }, - "lg": { "value": "{typography.input.btn.font.size.lg.value}", "source": "$input-font-size-lg" } + "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" } }, - "weight": { "value": "{typography.font.weight.base.value}", "source": "$input-font-weight" } + "weight": { "value": "{typography.font.weight.base}", "source": "$input-font-weight" } }, "line-height": { - "base": { "value": "{typography.input.btn.line-height.base.value}", "source": "$input-line-height" }, - "sm": { "value": "{typography.input.btn.line-height.sm.value}", "source": "$input-line-height-sm" }, - "lg": { "value": "{typography.input.btn.line-height.lg.value}", "source": "$input-line-height-lg" } + "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" } } }, "control": { "select": { "font": { - "family": { "value": "{typography.form.input.font.family.value}", "source": "$custom-select-font-family" }, + "family": { "value": "{typography.form.input.font.family}", "source": "$custom-select-font-family" }, "size": { - "base": { "value": "{typography.form.input.font.size.base.value}", "source": "$custom-select-font-size" }, - "sm": { "value": "{typography.form.input.font.size.sm.value}", "source": "$custom-select-font-size-sm" }, - "lg": { "value": "{typography.form.input.font.size.lg.value}", "source": "$custom-select-font-size-lg" } + "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" } }, - "weight": { "value": "{typography.form.input.font.weight.value}", "source": "$custom-select-font-weight" } + "weight": { "value": "{typography.form.input.font.weight}", "source": "$custom-select-font-weight" } }, - "line-height": { "value": "{typography.form.input.line-height.base.value}", "source": "$custom-select-line-height" } + "line-height": { "value": "{typography.form.input.line-height.base}", "source": "$custom-select-line-height" } }, "file": { - "line-height": { "value": "{typography.form.input.line-height.base.value}", "source": "$custom-file-line-height" }, + "line-height": { "value": "{typography.form.input.line-height.base}", "source": "$custom-file-line-height" }, "font": { - "family": { "value": "{typography.form.input.font.family.value}", "source": "$custom-file-font-family" }, - "weight": { "value": "{typography.form.input.font.weight.value}", "source": "$custom-file-font-weight" } + "family": { "value": "{typography.form.input.font.family}", "source": "$custom-file-font-family" }, + "weight": { "value": "{typography.form.input.font.weight}", "source": "$custom-file-font-weight" } } } }, "feedback": { "font": { - "size": { "value": "{typography.font.size.small.base.value}", "source": "$form-feedback-font-size" } + "size": { "value": "{typography.font.size.small.base}", "source": "$form-feedback-font-size" } }, "tooltip": { "font": { - "size": { "value": "{typography.font.size.sm.value}", "source": "$form-feedback-tooltip-font-size" } + "size": { "value": "{typography.font.size.sm}", "source": "$form-feedback-tooltip-font-size" } }, - "line-height": { "value": "{typography.line-height.base.value}", "source": "$form-feedback-tooltip-line-height" } + "line-height": { "value": "{typography.line-height.base}", "source": "$form-feedback-tooltip-line-height" } } } } diff --git a/tokens/src/components/IconButton.json b/tokens/src/components/IconButton.json index 63e8afac9e..2c41b66242 100644 --- a/tokens/src/components/IconButton.json +++ b/tokens/src/components/IconButton.json @@ -2,16 +2,16 @@ "color": { "icon-button": { "bg": { "value": "transparent", "source": "$btn-icon-bg" }, - "accent": { "value": "{color.white.value}", "source": "$btn-icon-accent-color" }, - "primary": { "value": "{color.primary.base.value}", "source": "$btn-icon-primary" }, - "secondary": { "value": "{color.secondary.base.value}", "source": "$btn-icon-secondary" }, - "brand": { "value": "{color.brand.base.value}", "source": "$btn-icon-brand" }, - "success": { "value": "{color.success.base.value}", "source": "$btn-icon-success" }, - "warning": { "value": "{color.warning.base.value}", "source": "$btn-icon-warning" }, - "danger": { "value": "{color.danger.base.value}", "source": "$btn-icon-danger" }, - "light": { "value": "{color.light.base.value}", "source": "$btn-icon-light" }, - "dark": { "value": "{color.dark.base.value}", "source": "$btn-icon-dark" }, - "black": { "value": "{color.black.value}", "source": "$btn-icon-black" } + "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" } } }, "size": { @@ -19,7 +19,7 @@ "diameter": { "md": { "value": "2.75rem", "source": "$btn-icon-diameter-md" }, "sm": { "value": "2.25rem", "source": "$btn-icon-diameter-sm" }, - "inline": { "value": "calc({typography.line-height.base.value} + .1em)", "source": "$btn-icon-diameter-inline" } + "inline": { "value": "calc({typography.line-height.base} + .1em)", "source": "$btn-icon-diameter-inline" } } } } diff --git a/tokens/src/components/Image.json b/tokens/src/components/Image.json index 8ebcdcf067..5d104bf127 100644 --- a/tokens/src/components/Image.json +++ b/tokens/src/components/Image.json @@ -1,10 +1,10 @@ { "color": { "image": { - "figure-caption": { "value": "{color.gray.500.value}", "source": "$figure-caption-color" }, + "figure-caption": { "value": "{color.gray.500}", "source": "$figure-caption-color" }, "thumbnail": { - "bg": { "value": "{color.body.bg.value}", "source": "$thumbnail-bg" }, - "border": { "value": "{color.gray.200.value}", "source": "$thumbnail-border-color" } + "bg": { "value": "{color.body.bg}", "source": "$thumbnail-bg" }, + "border": { "value": "{color.gray.200}", "source": "$thumbnail-border-color" } } } }, @@ -26,8 +26,8 @@ "image": { "thumbnail": { "border": { - "width": { "value": "{size.border.width.value}", "source": "$thumbnail-border-width" }, - "radius": { "value": "{size.border.radius.base.value}", "source": "$thumbnail-border-radius"} + "width": { "value": "{size.border.width}", "source": "$thumbnail-border-width" }, + "radius": { "value": "{size.border.radius.base}", "source": "$thumbnail-border-radius"} } } } diff --git a/tokens/src/components/Menu.json b/tokens/src/components/Menu.json index d4863c142d..1594fea2f7 100644 --- a/tokens/src/components/Menu.json +++ b/tokens/src/components/Menu.json @@ -1,7 +1,7 @@ { "color": { "menu": { - "bg-active": { "value": "{color.btn.active.bg.tertiary.value}", "source": "$active-background" }, + "bg-active": { "value": "{color.btn.active.bg.tertiary}", "source": "$active-background" }, "border": { "base": { "value": "transparent", "source": "$border" }, "active": { "value": "transparent", "source": "$active-border" }, diff --git a/tokens/src/components/Modal.json b/tokens/src/components/Modal.json index b65099c589..fe4d8ed832 100644 --- a/tokens/src/components/Modal.json +++ b/tokens/src/components/Modal.json @@ -2,9 +2,9 @@ "color": { "modal": { "content": { - "bg": { "value": "{color.bg.base.value}", "source": "$modal-content-bg" }, + "bg": { "value": "{color.bg.base}", "source": "$modal-content-bg" }, "border": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$modal-content-border-color", "modify": [{ "type": "alpha", @@ -12,7 +12,7 @@ }] } }, - "backdrop-bg": { "value": "{color.black.value}", "source": "$modal-backdrop-bg" } + "backdrop-bg": { "value": "{color.black}", "source": "$modal-backdrop-bg" } } }, "elevation": { @@ -37,7 +37,7 @@ "sm": { "value": "400px", "source": "$modal-sm" }, "content-border": { "width": { "value": "0px", "source": "$modal-content-border-width" }, - "radius": { "value": "{size.border.radius.lg.value}", "source": "$modal-content-border-radius" } + "radius": { "value": "{size.border.radius.lg}", "source": "$modal-content-border-radius" } } } }, @@ -48,11 +48,11 @@ "bottom": { "value": ".7rem", "source": "$modal-inner-padding-bottom" } }, "footer-padding": { - "base": { "value": "{spacing.modal.footer-padding.y.value} 1.5rem", "source": "$modal-footer-padding" }, + "base": { "value": "{spacing.modal.footer-padding.y} 1.5rem", "source": "$modal-footer-padding" }, "y": { "value": "1rem", "source": "$modal-footer-padding-y" } }, "header-padding": { - "base": { "value": "{spacing.modal.header-padding.y.value} 1.5rem", "source": "$modal-header-padding" }, + "base": { "value": "{spacing.modal.header-padding.y} 1.5rem", "source": "$modal-header-padding" }, "y": { "value": "1rem", "source": "$modal-header-padding-y" } }, "dialog-margin": { "value": "1.5rem", "source": "$modal-dialog-margin" } diff --git a/tokens/src/components/Nav.json b/tokens/src/components/Nav.json index 94d2ce2a99..658d45b791 100644 --- a/tokens/src/components/Nav.json +++ b/tokens/src/components/Nav.json @@ -4,10 +4,10 @@ "tabs-link": { "border": { "active": { - "value": "transparent transparent {color.primary.500.value}", "source": "$nav-tabs-link-active-border-color" + "value": "transparent transparent {color.primary.500}", "source": "$nav-tabs-link-active-border-color" }, "hover": { - "value": "transparent transparent {color.nav.tabs.border.value}", "source": "$nav-tabs-link-hover-border-color" + "value": "transparent transparent {color.nav.tabs.border}", "source": "$nav-tabs-link-hover-border-color" } } } @@ -17,33 +17,33 @@ "nav": { "link": { "text": { - "base": { "value": "{color.gray.700.value}", "source": "$nav-link-color" }, - "disabled": { "value": "{color.gray.300.value}", "source": "$nav-link-disabled-color" } + "base": { "value": "{color.gray.700}", "source": "$nav-link-color" }, + "disabled": { "value": "{color.gray.300}", "source": "$nav-link-disabled-color" } } }, "tabs": { - "border": { "value": "{color.light.400.value}", "source": "$nav-tabs-border-color" }, + "border": { "value": "{color.light.400}", "source": "$nav-tabs-border-color" }, "link": { "hover": { - "bg": { "value": "{color.light.400.value}", "source": "$nav-tabs-link-hover-bg" } + "bg": { "value": "{color.light.400}", "source": "$nav-tabs-link-hover-bg" } }, "active": { - "text": { "value": "{color.primary.500.value}", "source": "$nav-tabs-link-active-color" }, - "bg": { "value": "{color.body.bg.value}", "source": "$nav-tabs-link-active-bg" } + "text": { "value": "{color.primary.500}", "source": "$nav-tabs-link-active-color" }, + "bg": { "value": "{color.body.bg}", "source": "$nav-tabs-link-active-bg" } } } }, "pills": { "link": { "active": { - "text": { "value": "{color.active.value}", "source": "$nav-pills-link-active-color" }, - "bg": { "value": "{color.bg.active.value}", "source": "$nav-pills-link-active-bg" } + "text": { "value": "{color.active}", "source": "$nav-pills-link-active-color" }, + "bg": { "value": "{color.bg.active}", "source": "$nav-pills-link-active-bg" } } } }, - "divider": { "value": "{color.gray.100.value}", "source": "$nav-divider-color" }, + "divider": { "value": "{color.gray.100}", "source": "$nav-divider-color" }, "dark": { - "value": "{color.white.value}", + "value": "{color.white}", "source": "$navbar-dark-color", "modify": [{ "type": "alpha", @@ -51,7 +51,7 @@ }] }, "light": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$navbar-light-color", "modify": [{ "type": "alpha", @@ -70,7 +70,7 @@ "size": { "nav": { "pills": { - "border-radius": { "value": "{size.border.radius.base.value}", "source": "$nav-pills-border-radius" } + "border-radius": { "value": "{size.border.radius.base}", "source": "$nav-pills-border-radius" } }, "tabs": { "border": { @@ -89,7 +89,7 @@ } }, "divider": { - "margin-y": { "value": "calc({spacing.spacer.base.value} / 2)", "source": "$nav-divider-margin-y" } + "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "source": "$nav-divider-margin-y" } } } } diff --git a/tokens/src/components/Navbar.json b/tokens/src/components/Navbar.json index f263c57087..b0982da301 100644 --- a/tokens/src/components/Navbar.json +++ b/tokens/src/components/Navbar.json @@ -3,7 +3,7 @@ "navbar": { "dark": { "text": { - "value": "{color.white.value}", + "value": "{color.white}", "source": "$navbar-dark-color", "modify": [{ "type": "alpha", @@ -11,16 +11,16 @@ }] }, "hover": { - "value": "{color.white.value}", + "value": "{color.white}", "source": "$navbar-dark-hover-color", "modify": [{ "type": "alpha", "amount": 0.75 }] }, - "active": { "value": "{color.active.value}", "source": "$navbar-dark-active-color" }, + "active": { "value": "{color.active}", "source": "$navbar-dark-active-color" }, "disabled": { - "value": "{color.white.value}", + "value": "{color.white}", "source": "$navbar-dark-disabled-color", "modify": [{ "type": "alpha", @@ -29,7 +29,7 @@ }, "toggler": { "border": { - "value": "{color.white.value}", + "value": "{color.white}", "source": "$navbar-dark-toggler-border-color", "modify": [{ "type": "alpha", @@ -38,13 +38,13 @@ } }, "brand": { - "text": { "value": "{color.navbar.dark.active.value}", "source": "$navbar-dark-brand-color" }, - "hover": { "value": "{color.navbar.dark.active.value}", "source": "$navbar-dark-brand-hover-color" } + "text": { "value": "{color.navbar.dark.active}", "source": "$navbar-dark-brand-color" }, + "hover": { "value": "{color.navbar.dark.active}", "source": "$navbar-dark-brand-hover-color" } } }, "light": { "text": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$navbar-light-color", "modify": [{ "type": "alpha", @@ -52,7 +52,7 @@ }] }, "hover": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$navbar-light-hover-color", "modify": [{ "type": "alpha", @@ -60,7 +60,7 @@ }] }, "active": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$navbar-light-active-color", "modify": [{ "type": "alpha", @@ -68,7 +68,7 @@ }] }, "disabled": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$navbar-light-disabled-color", "modify": [{ "type": "alpha", @@ -77,7 +77,7 @@ }, "toggler": { "border": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$navbar-light-toggler-border-color", "modify": [{ "type": "alpha", @@ -86,8 +86,8 @@ } }, "brand": { - "text": { "value": "{color.navbar.light.active.value}", "source": "$navbar-light-brand-color" }, - "hover": { "value": "{color.navbar.light.active.value}", "source": "$navbar-light-brand-hover-color" } + "text": { "value": "{color.navbar.light.active}", "source": "$navbar-light-brand-color" }, + "hover": { "value": "{color.navbar.light.active}", "source": "$navbar-light-brand-hover-color" } } } } @@ -95,16 +95,16 @@ "spacing": { "navbar": { "padding": { - "y": { "value": "calc({spacing.spacer.base.value} / 2)", "source": "$navbar-padding-y" }, + "y": { "value": "calc({spacing.spacer.base} / 2)", "source": "$navbar-padding-y" }, "x": { - "base": { "value": "{spacing.spacer.base.value}", "source": "$navbar-padding-x" }, + "base": { "value": "{spacing.spacer.base}", "source": "$navbar-padding-x" }, "nav-link": { "value": ".5rem", "source": "$navbar-nav-link-padding-x" } } }, "brand": { "padding": { "y": { - "value": "calc(({typography.navbar.nav-link.height.value} - {size.navbar.brand.height.value}) / 2)", + "value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)", "source": "$navbar-brand-padding-y" } } @@ -120,16 +120,16 @@ "typography": { "navbar": { "brand": { - "font-size": { "value": "{typography.font.size.lg.value}", "source": "$navbar-brand-font-size" } + "font-size": { "value": "{typography.font.size.lg}", "source": "$navbar-brand-font-size" } }, "nav-link": { "height": { - "value": "calc({typography.font.size.base.value} * {typography.line-height.base.value} + .5rem * 2)", + "value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)", "source": "$nav-link-height" } }, "toggler": { - "font-size": { "value": "{typography.font.size.lg.value}", "source": "$navbar-toggler-font-size" } + "font-size": { "value": "{typography.font.size.lg}", "source": "$navbar-toggler-font-size" } } } }, @@ -142,13 +142,13 @@ }, "brand": { "height": { - "value": "calc({typography.navbar.brand.font-size.value} * {typography.line-height.base.value})", + "value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})", "source": "$navbar-brand-height" } }, "toggler": { "border-radius": { - "value": "{size.btn.border.radius.base.value}", "source": "$navbar-toggler-border-radius" + "value": "{size.btn.border.radius.base}", "source": "$navbar-toggler-border-radius" } } } @@ -158,7 +158,7 @@ "toggler": { "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.value}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")", + "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\")", "source": "$navbar-dark-toggler-icon-bg", "outputReferences": false, "modify": [{ @@ -170,7 +170,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.value}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")", + "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\")", "source": "$navbar-light-toggler-icon-bg", "outputReferences": false, "modify": [{ diff --git a/tokens/src/components/Pagination.json b/tokens/src/components/Pagination.json index 2e1a9f86b7..b2153b4547 100644 --- a/tokens/src/components/Pagination.json +++ b/tokens/src/components/Pagination.json @@ -2,27 +2,27 @@ "color": { "pagination": { "text": { - "base": { "value": "{color.link.base.value}", "source": "$pagination-color" }, - "inverse": { "value": "{color.white.value}", "source": "$pagination-color-inverse" }, - "hover": { "value": "{color.link.hover.value}", "source": "$pagination-hover-color" }, - "active": { "value": "{color.active.value}", "source": "$pagination-active-color" }, - "disabled": { "value": "{color.disabled.value}", "source": "$pagination-disabled-color" } + "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" } }, "bg": { - "base": { "value": "{color.bg.base.value}", "source": "$pagination-bg" }, - "hover": { "value": "{color.gray.100.value}", "source": "$pagination-hover-bg" }, - "active": { "value": "{color.bg.active.value}", "source": "$pagination-active-bg" }, - "disabled": { "value": "{color.white.value}", "source": "$pagination-disabled-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" } }, "border": { - "base": { "value": "{color.gray.200.value}", "source": "$pagination-border-color" }, - "hover": { "value": "{color.gray.200.value}", "source": "$pagination-hover-border-color" }, - "active": { "value": "{color.pagination.bg.active.value}", "source": "$pagination-active-border-color" }, - "disabled": { "value": "{color.gray.100.value}", "source": "$pagination-disabled-border-color" } + "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" } }, "focus": { - "base": { "value": "{color.primary.500.value}", "source": "$pagination-focus-color" }, - "text": { "value": "{color.black.value}", "source": "$pagination-focus-color-text" } + "base": { "value": "{color.primary.500}", "source": "$pagination-focus-color" }, + "text": { "value": "{color.black}", "source": "$pagination-focus-color-text" } } } }, @@ -66,10 +66,10 @@ } }, "border": { - "width": { "value": "{size.border.width.value}", "source": "$pagination-border-width" }, + "width": { "value": "{size.border.width}", "source": "$pagination-border-width" }, "radius": { - "sm": { "value": "{size.border.radius.sm.value}", "source": "$pagination-border-radius-sm" }, - "lg": { "value": "{size.border.radius.lg.value}", "source": "$pagination-border-radius-lg" } + "sm": { "value": "{size.border.radius.sm}", "source": "$pagination-border-radius-sm" }, + "lg": { "value": "{size.border.radius.lg}", "source": "$pagination-border-radius-lg" } } }, "reduced": { @@ -93,7 +93,7 @@ "elevation": { "pagination": { "focus": { - "box-shadow": { "value": "{elevation.input.btn-focus.box-shadow.value}", "source": "$pagination-focus-box-shadow" } + "box-shadow": { "value": "{elevation.input.btn-focus.box-shadow}", "source": "$pagination-focus-box-shadow" } } } } diff --git a/tokens/src/components/Popover.json b/tokens/src/components/Popover.json index 4a0ef7e1a9..ea1a24198e 100644 --- a/tokens/src/components/Popover.json +++ b/tokens/src/components/Popover.json @@ -1,18 +1,18 @@ { "typography": { "popover": { - "font-size": { "value": "{typography.font.size.sm.value}", "source": "$popover-font-size" } + "font-size": { "value": "{typography.font.size.sm}", "source": "$popover-font-size" } } }, "color": { "popover": { - "bg": { "value": "{color.bg.base.value}", "source": "$popover-bg" }, + "bg": { "value": "{color.bg.base}", "source": "$popover-bg" }, "border": { "value": "rgba(0, 0, 0, .2)", "source": "$popover-border-color" }, "header": { - "text": { "value": "{color.headings.base.value}", "source": "$popover-header-color" }, - "bg": { "value": "{color.white.value}", "source": "$popover-header-bg" }, + "text": { "value": "{color.headings.base}", "source": "$popover-header-color" }, + "bg": { "value": "{color.white}", "source": "$popover-header-bg" }, "bg-dark": { - "value": "{color.white.value}", + "value": "{color.white}", "source": "$popover-header-bg-dark", "modify": [{ "type": "darken", @@ -20,7 +20,7 @@ }] }, "border-bottom-dark": { - "value": "{color.white.value}", + "value": "{color.white}", "source": "$popover-header-border-bottom-darken", "modify": [{ "type": "darken", @@ -28,11 +28,11 @@ }] } }, - "body": { "value": "{color.body.base.value}", "source": "$popover-body-color" }, + "body": { "value": "{color.body.base}", "source": "$popover-body-color" }, "arrow": { - "base": { "value": "{color.popover.bg.value}", "source": "$popover-arrow-color" }, + "base": { "value": "{color.popover.bg}", "source": "$popover-arrow-color" }, "outer": { - "value": "{color.popover.border.value}", + "value": "{color.popover.border}", "source": "$popover-arrow-outer-color", "modify": [{ "type": "alpha", @@ -41,16 +41,16 @@ } }, "success": { - "bg": { "value": "{color.success.100.value}", "source": "$popover-success-bg" }, - "icon": { "value": "{color.success.500.value}", "source": "$popover-success-icon-color" } + "bg": { "value": "{color.success.100}", "source": "$popover-success-bg" }, + "icon": { "value": "{color.success.500}", "source": "$popover-success-icon-color" } }, "warning": { - "bg": { "value": "{color.warning.100.value}", "source": "$popover-warning-bg" }, - "icon": { "value": "{color.warning.500.value}", "source": "$popover-warning-icon-color" } + "bg": { "value": "{color.warning.100}", "source": "$popover-warning-bg" }, + "icon": { "value": "{color.warning.500}", "source": "$popover-warning-icon-color" } }, "danger": { - "bg": { "value": "{color.danger.100.value}", "source": "$popover-danger-bg" }, - "icon": { "value": "{color.warning.500.value}", "source": "$popover-danger-icon-color" } + "bg": { "value": "{color.danger.100}", "source": "$popover-danger-bg" }, + "icon": { "value": "{color.warning.500}", "source": "$popover-danger-icon-color" } } } }, @@ -58,8 +58,8 @@ "popover": { "max-width": { "value": "480px", "source": "$popover-max-width" }, "border": { - "width": { "value": "{size.border.width.value}", "source": "$popover-border-width" }, - "radius": { "value": "{size.border.radius.sm.value}", "source": "$popover-border-radius" } + "width": { "value": "{size.border.width}", "source": "$popover-border-width" }, + "radius": { "value": "{size.border.radius.sm}", "source": "$popover-border-radius" } }, "icon": { "height": { "value": "1rem", "source": "$popover-icon-height" }, @@ -90,8 +90,8 @@ }, "body": { "padding": { - "y": { "value": "{spacing.popover.header.padding.y.value}", "source": "$popover-body-padding-y" }, - "x": { "value": "{spacing.popover.header.padding.x.value}", "source": "$popover-body-padding-x" } + "y": { "value": "{spacing.popover.header.padding.y}", "source": "$popover-body-padding-y" }, + "x": { "value": "{spacing.popover.header.padding.x}", "source": "$popover-body-padding-x" } } }, "icon": { diff --git a/tokens/src/components/ProductTour.json b/tokens/src/components/ProductTour.json index 7c55b5d4fa..72555bbb98 100644 --- a/tokens/src/components/ProductTour.json +++ b/tokens/src/components/ProductTour.json @@ -2,12 +2,12 @@ "color": { "product-tour": { "checkpoint": { - "bg": { "value": "{color.light.300.value}", "source": "$checkpoint-background-color" }, - "body": { "value": "{color.gray.700.value}", "source": "$checkpoint-body-color" }, - "border": { "value": "{color.brand.500.value}", "source": "$checkpoint-border-color" }, - "breadcrumb": { "value": "{color.primary.500.value}", "source": "$checkpoint-breadcrumb-color" }, + "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" }, "box-shadow": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$checkpoint-box-shadow-color", "modify": [{ "type": "alpha", @@ -17,7 +17,7 @@ "arrow": { "border": { "top": { - "value": "{color.product-tour.checkpoint.bg.value}", + "value": "{color.product-tour.checkpoint.bg}", "source": "$checkpoint-arrow-border-top-color" }, "transparent": { @@ -39,15 +39,15 @@ }, "arrow": { "bottom": { - "value": "{size.product-tour.checkpoint.width.arrow.value} {size.product-tour.checkpoint.width.border.value}", + "value": "{size.product-tour.checkpoint.width.arrow} {size.product-tour.checkpoint.width.border}", "source": "$checkpoint-arrow-border-bottom" }, "top": { - "value": "{size.product-tour.checkpoint.width.arrow.value}", + "value": "{size.product-tour.checkpoint.width.arrow}", "source": "$checkpoint-arrow-border-top" }, "transparent": { - "value": "{size.product-tour.checkpoint.width.arrow.value}", + "value": "{size.product-tour.checkpoint.width.arrow}", "source": "$checkpoint-arrow-border-transparent" } } diff --git a/tokens/src/components/ProgressBar.json b/tokens/src/components/ProgressBar.json index e970b60379..ef24a55af4 100644 --- a/tokens/src/components/ProgressBar.json +++ b/tokens/src/components/ProgressBar.json @@ -2,19 +2,19 @@ "color": { "progress-bar": { "bg": { "value": "transparent", "source": "$progress-bg" }, - "border": { "value": "{color.gray.500.value}", "source": "$progress-bar-border-color" }, + "border": { "value": "{color.gray.500}", "source": "$progress-bar-border-color" }, "bar": { - "base": { "value": "{color.white.value}", "source": "$progress-bar-color" }, + "base": { "value": "{color.white}", "source": "$progress-bar-color" }, "bg": { - "base": { "value": "{color.accent.a.value}", "source": "$progress-bar-bg" }, - "annotated": { "value": "{color.dark.500.value}", "source": "$annotated-progress-bar-bg" } + "base": { "value": "{color.accent.a}", "source": "$progress-bar-bg" }, + "annotated": { "value": "{color.dark.500}", "source": "$annotated-progress-bar-bg" } } } } }, "typography": { "progress-bar": { - "font-size": { "value": "calc({typography.font.size.base.value} * .75)", "source": "$progress-font-size" } + "font-size": { "value": "calc({typography.font.size.base} * .75)", "source": "$progress-font-size" } } }, "size": { diff --git a/tokens/src/components/Scrollable.json b/tokens/src/components/Scrollable.json index 6025e7da51..adb164c47c 100644 --- a/tokens/src/components/Scrollable.json +++ b/tokens/src/components/Scrollable.json @@ -3,7 +3,7 @@ "scrollable": { "body": { "box-shadow": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$scrollable-body-box-shadow", "modify": [{ "type": "alpha", diff --git a/tokens/src/components/SearchField.json b/tokens/src/components/SearchField.json index c0ef3bbd38..0471b1005a 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.value}", "source": "$search-border-color" }, - "interaction": { "value": "{color.black.value}", "source": "$search-border-color-interaction" }, - "focus": { "value": "{color.black.value}", "source": "$search-border-focus-color" } + "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" } }, "button": { "bg": { - "primary": { "value": "{color.primary.500.value}", "source": "$search-btn-primary-bg" }, - "brand": { "value": "{color.brand.500.value}", "source": "$search-btn-brand-bg" } + "primary": { "value": "{color.primary.500}", "source": "$search-btn-primary-bg" }, + "brand": { "value": "{color.brand.500}", "source": "$search-btn-brand-bg" } } } } @@ -24,7 +24,7 @@ "radius": { "value": "0", "source": "$search-border-radius" } }, "search-input-height": { - "value": "calc({typography.form.input.line-height.base.value} * 1em + {spacing.form.input.padding.y.base.value} * 2)", + "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", "source": "$input-height-search" } } diff --git a/tokens/src/components/Sheet.json b/tokens/src/components/Sheet.json index acc39dac9c..a8a2ab0d18 100644 --- a/tokens/src/components/Sheet.json +++ b/tokens/src/components/Sheet.json @@ -3,7 +3,7 @@ "sheet": { "skrim": { "bg": { - "value": "{color.gray.300.value}", + "value": "{color.gray.300}", "source": "$sheet-skrim-bg", "modify": [{ "type": "alpha", @@ -12,7 +12,7 @@ }, "component": { "box-shadow": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$sheet-skrim-component-box-shadow", "modify": [{ "type": "alpha", diff --git a/tokens/src/components/Spinner.json b/tokens/src/components/Spinner.json index ae5cbc0f28..65d76f4419 100644 --- a/tokens/src/components/Spinner.json +++ b/tokens/src/components/Spinner.json @@ -3,7 +3,7 @@ "spinner": { "base": { "width": { "value": "2rem", "source": "$spinner-width" }, - "height": { "value": "{size.spinner.base.width.value}", "source": "$spinner-height" }, + "height": { "value": "{size.spinner.base.width}", "source": "$spinner-height" }, "border-width": { "value": ".25em", "source": "$spinner-border-width" } }, "sm": { diff --git a/tokens/src/components/Tabs.json b/tokens/src/components/Tabs.json index 5eda83088d..d6577dfb07 100644 --- a/tokens/src/components/Tabs.json +++ b/tokens/src/components/Tabs.json @@ -10,7 +10,7 @@ "typography": { "tabs": { "notification": { - "font-size": { "value": "{typography.font.size.xs.value}", "source": "$tab-notification-font-size" } + "font-size": { "value": "{typography.font.size.xs}", "source": "$tab-notification-font-size" } } } } diff --git a/tokens/src/components/Toast.json b/tokens/src/components/Toast.json index 2450baeba7..27bb618b68 100644 --- a/tokens/src/components/Toast.json +++ b/tokens/src/components/Toast.json @@ -2,9 +2,9 @@ "color": { "toast": { "base": { "value": "inherit", "source": "$toast-color" }, - "bg": { "value": "{color.gray.700.value}", "source": "$toast-background-color" }, + "bg": { "value": "{color.gray.700}", "source": "$toast-background-color" }, "border": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$toast-border-color", "modify": [{ "type": "alpha", @@ -12,10 +12,10 @@ }] }, "header": { - "text": { "value": "{color.white.value}", "source": "$toast-header-color" }, - "bg": { "value": "{color.gray.700.value}", "source": "$toast-header-background-color" }, + "text": { "value": "{color.white}", "source": "$toast-header-color" }, + "bg": { "value": "{color.gray.700}", "source": "$toast-header-background-color" }, "border": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$toast-header-border-color", "modify": [{ "type": "alpha", diff --git a/tokens/src/components/Tooltip.json b/tokens/src/components/Tooltip.json index 388a5de933..c983093e61 100644 --- a/tokens/src/components/Tooltip.json +++ b/tokens/src/components/Tooltip.json @@ -1,20 +1,20 @@ { "typography": { "tooltip": { - "font-size": { "value": "{typography.font.size.sm.value}", "source": "$tooltip-font-size" } + "font-size": { "value": "{typography.font.size.sm}", "source": "$tooltip-font-size" } } }, "color": { "tooltip": { - "text": { "value": "{color.white.value}", "source": "$tooltip-color" }, - "light": { "value": "{color.black.value}", "source": "$tooltip-color-light" }, + "text": { "value": "{color.white}", "source": "$tooltip-color" }, + "light": { "value": "{color.black}", "source": "$tooltip-color-light" }, "bg": { - "base": { "value": "{color.black.value}", "source": "$tooltip-bg" }, - "light": { "value": "{color.white.value}", "source": "$tooltip-bg-light" } + "base": { "value": "{color.black}", "source": "$tooltip-bg" }, + "light": { "value": "{color.white}", "source": "$tooltip-bg-light" } }, "arrow": { - "base": { "value": "{color.tooltip.bg.base.value}", "source": "$tooltip-arrow-color" }, - "light": { "value": "{color.white.value}", "source": "$tooltip-arrow-color-light" } + "base": { "value": "{color.tooltip.bg.base}", "source": "$tooltip-arrow-color" }, + "light": { "value": "{color.white}", "source": "$tooltip-arrow-color-light" } } } }, @@ -43,7 +43,7 @@ "height": { "value": ".4rem", "source": "$tooltip-arrow-height" }, "width": { "value": ".8rem", "source": "$tooltip-arrow-width" } }, - "border-radius": { "value": "{size.border.radius.base.value}", "source": "$tooltip-border-radius" } + "border-radius": { "value": "{size.border.radius.base}", "source": "$tooltip-border-radius" } } }, "other": { diff --git a/tokens/src/components/general/body.json b/tokens/src/components/general/body.json index e01b7cd31b..c95574a0c1 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.value}", "source": "$body-color" }, - "bg": { "value": "{color.bg.base.value}", "source": "$body-bg" } + "base": { "value": "{color.gray.700}", "source": "$body-color" }, + "bg": { "value": "{color.bg.base}", "source": "$body-bg" } } } } diff --git a/tokens/src/components/general/headings.json b/tokens/src/components/general/headings.json index f7c3910355..cd9b4ed704 100644 --- a/tokens/src/components/general/headings.json +++ b/tokens/src/components/general/headings.json @@ -1,7 +1,7 @@ { "color": { "headings": { - "base": { "value": "{color.black.value}", "source": "$headings-color" } + "base": { "value": "{color.black}", "source": "$headings-color" } } }, "typography": { diff --git a/tokens/src/components/general/hr.json b/tokens/src/components/general/hr.json index acb2451249..ab36e9af9f 100644 --- a/tokens/src/components/general/hr.json +++ b/tokens/src/components/general/hr.json @@ -2,15 +2,15 @@ "size": { "hr": { "border": { - "width": { "value": "{size.border.width.value}", "source": "$hr-border-width" }, - "margin-y": { "value": "{spacing.spacer.base.value}", "source": "$hr-margin-y" } + "width": { "value": "{size.border.width}", "source": "$hr-border-width" }, + "margin-y": { "value": "{spacing.spacer.base}", "source": "$hr-margin-y" } } } }, "color": { "hr": { "border": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$hr-border-color", "modify": [{ "type": "alpha", diff --git a/tokens/src/components/general/input.json b/tokens/src/components/general/input.json index 469c12811e..3e4f556650 100644 --- a/tokens/src/components/general/input.json +++ b/tokens/src/components/general/input.json @@ -1,7 +1,7 @@ { "color": { "input": { - "btn-focus": { "value": "{color.input.focus.value}", "source": "$input-btn-focus-color" } + "btn-focus": { "value": "{color.input.focus}", "source": "$input-btn-focus-color" } } }, "typography": { @@ -18,7 +18,7 @@ "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.value}", "source": "$input-btn-line-height-lg" } + "lg": { "value": "{typography.line-height.lg}", "source": "$input-btn-line-height-lg" } } } } @@ -44,7 +44,7 @@ "size": { "input": { "btn": { - "border-width": { "value": "{size.border.width.value}", "source": "$input-btn-border-width" }, + "border-width": { "value": "{size.border.width}", "source": "$input-btn-border-width" }, "focus-width": { "value": "1px", "source": "$input-btn-focus-width" } } } @@ -53,7 +53,7 @@ "input": { "btn-focus": { "box-shadow": { - "value": "0 0 0 {size.input.btn.focus-width.value} {color.input.btn-focus.value}", + "value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}", "source": "$input-btn-focus-box-shadow" } } diff --git a/tokens/src/components/general/link.json b/tokens/src/components/general/link.json index 8676bc5c02..5fcde3dc0a 100644 --- a/tokens/src/components/general/link.json +++ b/tokens/src/components/general/link.json @@ -1,9 +1,9 @@ { "color": { "link": { - "base": { "value": "{color.info.500.value}", "source": "$link-color" }, + "base": { "value": "{color.info.500}", "source": "$link-color" }, "hover": { - "value": "{color.link.base.value}", + "value": "{color.link.base}", "source": "$link-hover-color", "modify": [{ "type": "darken", @@ -11,9 +11,9 @@ }] }, "inline": { - "base": { "value": "{color.info.500.value}", "source": "$inline-link-color" }, + "base": { "value": "{color.info.500}", "source": "$inline-link-color" }, "decoration": { - "value": "{color.link.inline.base.value}", + "value": "{color.link.inline.base}", "source": "$inline-link-decoration-color", "modify": [{ "type": "alpha", @@ -22,7 +22,7 @@ }, "hover": { "base": { - "value": "{color.link.inline.base.value}", + "value": "{color.link.inline.base}", "source": "$inline-link-hover-color", "modify": [{ "type": "darken", @@ -30,7 +30,7 @@ }] }, "decoration": { - "value": "{color.link.inline.hover.base.value}", + "value": "{color.link.inline.hover.base}", "source": "$inline-link-hover-decoration-color", "modify": [{ "type": "alpha", @@ -40,9 +40,9 @@ } }, "muted": { - "base": { "value": "{color.primary.500.value}", "source": "$muted-link-color" }, + "base": { "value": "{color.primary.500}", "source": "$muted-link-color" }, "hover": { - "value": "{color.link.muted.base.value}", + "value": "{color.link.muted.base}", "source": "$muted-link-hover-color", "modify": [{ "type": "darken", @@ -50,9 +50,9 @@ }] }, "inline": { - "base": { "value": "{color.primary.500.value}", "source": "$muted-inline-link-color" }, + "base": { "value": "{color.primary.500}", "source": "$muted-inline-link-color" }, "decoration": { - "value": "{color.link.muted.inline.base.value}", + "value": "{color.link.muted.inline.base}", "source": "$muted-inline-link-decoration-color", "modify": [{ "type": "alpha", @@ -61,7 +61,7 @@ }, "hover": { "base": { - "value": "{color.link.muted.inline.base.value}", + "value": "{color.link.muted.inline.base}", "source": "$muted-inline-link-hover-color", "modify": [{ "type": "darken", @@ -69,7 +69,7 @@ }] }, "decoration": { - "value": "{color.link.muted.inline.hover.base.value}", + "value": "{color.link.muted.inline.hover.base}", "source": "$muted-inline-link-hover-decoration-color", "modify": [{ "type": "alpha", @@ -80,9 +80,9 @@ } }, "brand": { - "base": { "value": "{color.brand.500.value}", "source": "$brand-link-color" }, + "base": { "value": "{color.brand.500}", "source": "$brand-link-color" }, "hover": { - "value": "{color.link.brand.base.value}", + "value": "{color.link.brand.base}", "source": "$brand-link-hover-color", "modify": [{ "type": "darken", @@ -90,9 +90,9 @@ }] }, "inline": { - "base": { "value": "{color.brand.500.value}", "source": "$brand-inline-link-color" }, + "base": { "value": "{color.brand.500}", "source": "$brand-inline-link-color" }, "decoration": { - "value": "{color.link.brand.inline.base.value}", + "value": "{color.link.brand.inline.base}", "source": "$brand-inline-link-decoration-color", "modify": [{ "type": "alpha", @@ -101,7 +101,7 @@ }, "hover": { "base": { - "value": "{color.link.brand.inline.base.value}", + "value": "{color.link.brand.inline.base}", "source": "$brand-inline-link-hover-color", "modify": [{ "type": "darken", @@ -109,7 +109,7 @@ }] }, "decoration": { - "value": "{color.link.brand.inline.hover.base.value}", + "value": "{color.link.brand.inline.hover.base}", "source": "$brand-inline-link-hover-decoration-color", "modify": [{ "type": "alpha", diff --git a/tokens/src/components/general/list.json b/tokens/src/components/general/list.json index c6af33870b..f0f5a9d044 100644 --- a/tokens/src/components/general/list.json +++ b/tokens/src/components/general/list.json @@ -1,18 +1,18 @@ { "typography": { "dt": { - "font-weight": { "value": "{typography.font.weight.bold.value}", "source": "$dt-font-weight" } + "font-weight": { "value": "{typography.font.weight.bold}", "source": "$dt-font-weight" } } }, "color": { "list-group": { "base": { "value": "inherit", "source": "$list-group-color" }, "bg": { - "base": { "value": "{color.bg.base.value}", "source": "$list-group-bg" }, - "hover": { "value": "{color.gray.100.value}", "source": "$list-group-hover-bg" } + "base": { "value": "{color.bg.base}", "source": "$list-group-bg" }, + "hover": { "value": "{color.gray.100}", "source": "$list-group-hover-bg" } }, "border": { - "value": "{color.black.value}", + "value": "{color.black}", "source": "$list-group-border-color", "modify": [{ "type": "alpha", @@ -20,20 +20,20 @@ }] }, "active": { - "base": { "value": "{color.active.value}", "source": "$list-group-active-color" }, - "border": { "value": "{color.list-group.active.bg.value}", "source": "$list-group-active-border-color" }, - "bg": { "value": "{color.bg.active.value}", "source": "$list-group-active-bg" } + "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" } }, "disabled": { - "base": { "value": "{color.gray.600.value}", "source": "$list-group-disabled-color" }, - "bg": { "value": "{color.list-group.bg.base.value}", "source": "$list-group-disabled-bg" } + "base": { "value": "{color.gray.600}", "source": "$list-group-disabled-color" }, + "bg": { "value": "{color.list-group.bg.base}", "source": "$list-group-disabled-bg" } }, "action": { - "base": { "value": "{color.gray.700.value}", "source": "$list-group-action-color" }, - "hover": { "value": "{color.list-group.action.base.value}", "source": "$list-group-action-hover-color" }, + "base": { "value": "{color.gray.700}", "source": "$list-group-action-color" }, + "hover": { "value": "{color.list-group.action.base}", "source": "$list-group-action-hover-color" }, "active": { - "base": { "value": "{color.body.base.value}", "source": "$list-group-action-active-color" }, - "bg": { "value": "{color.gray.200.value}", "source": "$list-group-action-active-bg" } + "base": { "value": "{color.body.base}", "source": "$list-group-action-active-color" }, + "bg": { "value": "{color.gray.200}", "source": "$list-group-action-active-bg" } } } } @@ -52,8 +52,8 @@ "size": { "list-group": { "border": { - "width": { "value": "{size.border.width.value}", "source": "$list-group-border-width" }, - "radius": { "value": "{size.border.radius.base.value}", "source": "$list-group-border-radius" } + "width": { "value": "{size.border.width}", "source": "$list-group-border-width" }, + "radius": { "value": "{size.border.radius.base}", "source": "$list-group-border-radius" } } } } diff --git a/tokens/src/components/general/text.json b/tokens/src/components/general/text.json index 8543707367..b87144e6b9 100644 --- a/tokens/src/components/general/text.json +++ b/tokens/src/components/general/text.json @@ -1,6 +1,6 @@ { "color": { - "text-muted": { "value": "{color.gray.500.value}", "source": "$text-muted" }, + "text-muted": { "value": "{color.gray.500}", "source": "$text-muted" }, "mark-bg": { "value": "#FFF243", "source": "$mark-bg" } }, "spacing": { @@ -12,9 +12,9 @@ "typography": { "blockquote": { "small": { - "font-size": { "value": "{typography.font.size.small.base.value}", "source": "$blockquote-small-font-size" } + "font-size": { "value": "{typography.font.size.small.base}", "source": "$blockquote-small-font-size" } }, - "font-size": { "value": "calc({typography.font.size.base.value} * 1.25)", "source": "$blockquote-font-size" } + "font-size": { "value": "calc({typography.font.size.base} * 1.25)", "source": "$blockquote-font-size" } } } } diff --git a/tokens/src/global/color.json b/tokens/src/global/color.json index 50621bd6a3..02ed582cd1 100644 --- a/tokens/src/global/color.json +++ b/tokens/src/global/color.json @@ -17,7 +17,7 @@ "200": { "value": "#CCCCCC", "source": "$gray-200" }, "300": { "value": "#ADADAD", "source": "$gray-300" }, "400": { "value": "#8F8F8F", "source": "$gray-400" }, - "500": { "value": "{color.gray.base.value}", "source": "$gray-500" }, + "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" }, @@ -26,7 +26,7 @@ "primary": { "base": { "value": "#0A3055", "source": "$primary" }, "100": { - "value": "{color.primary.base.value}", + "value": "{color.primary.base}", "source": "$primary-100", "modify": [ { @@ -37,7 +37,7 @@ ] }, "200": { - "value": "{color.primary.base.value}", + "value": "{color.primary.base}", "source": "$primary-200", "modify": [ { @@ -48,7 +48,7 @@ ] }, "300": { - "value": "{color.primary.base.value}", + "value": "{color.primary.base}", "source": "$primary-300", "modify": [ { @@ -59,7 +59,7 @@ ] }, "400": { - "value": "{color.primary.base.value}", + "value": "{color.primary.base}", "source": "$primary-400", "modify": [ { @@ -69,9 +69,9 @@ } ] }, - "500": { "value": "{color.primary.base.value}", "source": "$primary-500" }, + "500": { "value": "{color.primary.base}", "source": "$primary-500" }, "600": { - "value": "{color.primary.base.value}", + "value": "{color.primary.base}", "source": "$primary-600", "modify": [ { @@ -82,7 +82,7 @@ ] }, "700": { - "value": "{color.primary.base.value}", + "value": "{color.primary.base}", "source": "$primary-700", "modify": [ { @@ -93,7 +93,7 @@ ] }, "800": { - "value": "{color.primary.base.value}", + "value": "{color.primary.base}", "source": "$primary-800", "modify": [ { @@ -104,7 +104,7 @@ ] }, "900": { - "value": "{color.primary.base.value}", + "value": "{color.primary.base}", "source": "$primary-900", "modify": [ { @@ -116,9 +116,9 @@ } }, "secondary": { - "base": { "value": "{color.gray.700.value}", "source": "$secondary" }, + "base": { "value": "{color.gray.700}", "source": "$secondary" }, "100": { - "value": "{color.secondary.base.value}", + "value": "{color.secondary.base}", "source": "$secondary-100", "modify": [ { @@ -129,7 +129,7 @@ ] }, "200": { - "value": "{color.secondary.base.value}", + "value": "{color.secondary.base}", "source": "$secondary-200", "modify": [ { @@ -140,7 +140,7 @@ ] }, "300": { - "value": "{color.secondary.base.value}", + "value": "{color.secondary.base}", "source": "$secondary-300", "modify": [ { @@ -151,7 +151,7 @@ ] }, "400": { - "value": "{color.secondary.base.value}", + "value": "{color.secondary.base}", "source": "$secondary-400", "modify": [ { @@ -161,9 +161,9 @@ } ] }, - "500": { "value": "{color.secondary.base.value}", "source": "$secondary-500"}, + "500": { "value": "{color.secondary.base}", "source": "$secondary-500"}, "600": { - "value": "{color.secondary.base.value}", + "value": "{color.secondary.base}", "source": "$secondary-600", "modify": [ { @@ -174,7 +174,7 @@ ] }, "700": { - "value": "{color.secondary.base.value}", + "value": "{color.secondary.base}", "source": "$secondary-700", "modify": [ { @@ -185,7 +185,7 @@ ] }, "800": { - "value": "{color.secondary.base.value}", + "value": "{color.secondary.base}", "source": "$secondary-800", "modify": [ { @@ -196,7 +196,7 @@ ] }, "900": { - "value": "{color.secondary.base.value}", + "value": "{color.secondary.base}", "source": "$secondary-900", "modify": [ { @@ -210,7 +210,7 @@ "brand": { "base": { "value": "#9D0054", "source": "$brand" }, "100": { - "value": "{color.brand.base.value}", + "value": "{color.brand.base}", "source": "$brand-100", "modify": [ { @@ -221,7 +221,7 @@ ] }, "200": { - "value": "{color.brand.base.value}", + "value": "{color.brand.base}", "source": "$brand-200", "modify": [ { @@ -232,7 +232,7 @@ ] }, "300": { - "value": "{color.brand.base.value}", + "value": "{color.brand.base}", "source": "$brand-300", "modify": [ { @@ -243,7 +243,7 @@ ] }, "400": { - "value": "{color.brand.base.value}", + "value": "{color.brand.base}", "source": "$brand-400", "modify": [ { @@ -253,9 +253,9 @@ } ] }, - "500": { "value": "{color.brand.base.value}", "source": "$brand-500" }, + "500": { "value": "{color.brand.base}", "source": "$brand-500" }, "600": { - "value": "{color.brand.base.value}", + "value": "{color.brand.base}", "source": "$brand-600", "modify": [ { @@ -266,7 +266,7 @@ ] }, "700": { - "value": "{color.brand.base.value}", + "value": "{color.brand.base}", "source": "$brand-700", "modify": [ { @@ -277,7 +277,7 @@ ] }, "800": { - "value": "{color.brand.base.value}", + "value": "{color.brand.base}", "source": "$brand-800", "modify": [ { @@ -288,7 +288,7 @@ ] }, "900": { - "value": "{color.brand.base.value}", + "value": "{color.brand.base}", "source": "$brand-900", "modify": [ { @@ -300,9 +300,9 @@ } }, "success": { - "base": { "value": "{color.green.value}", "source": "$success" }, + "base": { "value": "{color.green}", "source": "$success" }, "100": { - "value": "{color.success.base.value}", + "value": "{color.success.base}", "source": "$success-100", "modify": [ { @@ -313,7 +313,7 @@ ] }, "200": { - "value": "{color.success.base.value}", + "value": "{color.success.base}", "source": "$success-200", "modify": [ { @@ -324,7 +324,7 @@ ] }, "300": { - "value": "{color.success.base.value}", + "value": "{color.success.base}", "source": "$success-300", "modify": [ { @@ -335,7 +335,7 @@ ] }, "400": { - "value": "{color.success.base.value}", + "value": "{color.success.base}", "source": "$success-400", "modify": [ { @@ -345,9 +345,9 @@ } ] }, - "500": { "value": "{color.success.base.value}", "source": "$success-500" }, + "500": { "value": "{color.success.base}", "source": "$success-500" }, "600": { - "value": "{color.success.base.value}", + "value": "{color.success.base}", "source": "$success-600", "modify": [ { @@ -358,7 +358,7 @@ ] }, "700": { - "value": "{color.success.base.value}", + "value": "{color.success.base}", "source": "$success-700", "modify": [ { @@ -369,7 +369,7 @@ ] }, "800": { - "value": "{color.success.base.value}", + "value": "{color.success.base}", "source": "$success-800", "modify": [ { @@ -380,7 +380,7 @@ ] }, "900": { - "value": "{color.success.base.value}", + "value": "{color.success.base}", "source": "$success-900", "modify": [ { @@ -392,9 +392,9 @@ } }, "info": { - "base": { "value": "{color.teal.value}", "source": "$info" }, + "base": { "value": "{color.teal}", "source": "$info" }, "100": { - "value": "{color.info.base.value}", + "value": "{color.info.base}", "source": "$info-100", "modify": [ { @@ -405,7 +405,7 @@ ] }, "200": { - "value": "{color.info.base.value}", + "value": "{color.info.base}", "source": "$info-200", "modify": [ { @@ -416,7 +416,7 @@ ] }, "300": { - "value": "{color.info.base.value}", + "value": "{color.info.base}", "source": "$info-300", "modify": [ { @@ -427,7 +427,7 @@ ] }, "400": { - "value": "{color.info.base.value}", + "value": "{color.info.base}", "source": "$info-400", "modify": [ { @@ -437,9 +437,9 @@ } ] }, - "500": { "value": "{color.info.base.value}", "source": "$info-500" }, + "500": { "value": "{color.info.base}", "source": "$info-500" }, "600": { - "value": "{color.info.base.value}", + "value": "{color.info.base}", "source": "$info-600", "modify": [ { @@ -450,7 +450,7 @@ ] }, "700": { - "value": "{color.info.base.value}", + "value": "{color.info.base}", "source": "$info-700", "modify": [ { @@ -461,7 +461,7 @@ ] }, "800": { - "value": "{color.info.base.value}", + "value": "{color.info.base}", "source": "$info-800", "modify": [ { @@ -472,7 +472,7 @@ ] }, "900": { - "value": "{color.info.base.value}", + "value": "{color.info.base}", "source": "$info-900", "modify": [ { @@ -484,9 +484,9 @@ } }, "warning": { - "base": { "value": "{color.yellow.value}", "source": "$warning" }, + "base": { "value": "{color.yellow}", "source": "$warning" }, "100": { - "value": "{color.warning.base.value}", + "value": "{color.warning.base}", "source": "$warning-100", "modify": [ { @@ -497,7 +497,7 @@ ] }, "200": { - "value": "{color.warning.base.value}", + "value": "{color.warning.base}", "source": "$warning-200", "modify": [ { @@ -508,7 +508,7 @@ ] }, "300": { - "value": "{color.warning.base.value}", + "value": "{color.warning.base}", "source": "$warning-300", "modify": [ { @@ -519,7 +519,7 @@ ] }, "400": { - "value": "{color.warning.base.value}", + "value": "{color.warning.base}", "source": "$warning-400", "modify": [ { @@ -529,9 +529,9 @@ } ] }, - "500": { "value": "{color.warning.base.value}", "source": "$warning-500" }, + "500": { "value": "{color.warning.base}", "source": "$warning-500" }, "600": { - "value": "{color.warning.base.value}", + "value": "{color.warning.base}", "source": "$warning-600", "modify": [ { @@ -542,7 +542,7 @@ ] }, "700": { - "value": "{color.warning.base.value}", + "value": "{color.warning.base}", "source": "$warning-700", "modify": [ { @@ -553,7 +553,7 @@ ] }, "800": { - "value": "{color.warning.base.value}", + "value": "{color.warning.base}", "source": "$warning-800", "modify": [ { @@ -564,7 +564,7 @@ ] }, "900": { - "value": "{color.warning.base.value}", + "value": "{color.warning.base}", "source": "$warning-900", "modify": [ { @@ -576,9 +576,9 @@ } }, "danger": { - "base": { "value": "{color.red.value}", "source": "$danger" }, + "base": { "value": "{color.red}", "source": "$danger" }, "100": { - "value": "{color.danger.base.value}", + "value": "{color.danger.base}", "source": "$danger-100", "modify": [ { @@ -589,7 +589,7 @@ ] }, "200": { - "value": "{color.danger.base.value}", + "value": "{color.danger.base}", "source": "$danger-200", "modify": [ { @@ -600,7 +600,7 @@ ] }, "300": { - "value": "{color.danger.base.value}", + "value": "{color.danger.base}", "source": "$danger-300", "modify": [ { @@ -611,7 +611,7 @@ ] }, "400": { - "value": "{color.danger.base.value}", + "value": "{color.danger.base}", "source": "$danger-400", "modify": [ { @@ -621,9 +621,9 @@ } ] }, - "500": { "value": "{color.danger.base.value}", "source": "$danger-500" }, + "500": { "value": "{color.danger.base}", "source": "$danger-500" }, "600": { - "value": "{color.danger.base.value}", + "value": "{color.danger.base}", "source": "$danger-600", "modify": [ { @@ -634,7 +634,7 @@ ] }, "700": { - "value": "{color.danger.base.value}", + "value": "{color.danger.base}", "source": "$danger-700", "modify": [ { @@ -645,7 +645,7 @@ ] }, "800": { - "value": "{color.danger.base.value}", + "value": "{color.danger.base}", "source": "$danger-800", "modify": [ { @@ -656,7 +656,7 @@ ] }, "900": { - "value": "{color.danger.base.value}", + "value": "{color.danger.base}", "source": "$danger-900", "modify": [ { @@ -670,7 +670,7 @@ "light": { "base": { "value": "#E1DDDB", "source": "$light" }, "100": { - "value": "{color.light.base.value}", + "value": "{color.light.base}", "source": "$light-100", "modify": [ { @@ -681,7 +681,7 @@ ] }, "200": { - "value": "{color.light.base.value}", + "value": "{color.light.base}", "source": "$light-200", "modify": [ { @@ -692,7 +692,7 @@ ] }, "300": { - "value": "{color.light.base.value}", + "value": "{color.light.base}", "source": "$light-300", "modify": [ { @@ -703,7 +703,7 @@ ] }, "400": { - "value": "{color.light.base.value}", + "value": "{color.light.base}", "source": "$light-400", "modify": [ { @@ -713,9 +713,9 @@ } ] }, - "500": { "value": "{color.light.base.value}", "source": "$light-500" }, + "500": { "value": "{color.light.base}", "source": "$light-500" }, "600": { - "value": "{color.light.base.value}", + "value": "{color.light.base}", "source": "$light-600", "modify": [ { @@ -726,7 +726,7 @@ ] }, "700": { - "value": "{color.light.base.value}", + "value": "{color.light.base}", "source": "$light-700", "modify": [ { @@ -737,7 +737,7 @@ ] }, "800": { - "value": "{color.light.base.value}", + "value": "{color.light.base}", "source": "$light-800", "modify": [ { @@ -748,7 +748,7 @@ ] }, "900": { - "value": "{color.light.base.value}", + "value": "{color.light.base}", "source": "$light-900", "modify": [ { @@ -762,7 +762,7 @@ "dark": { "base": { "value": "#273F2F", "source": "$dark" }, "100": { - "value": "{color.dark.base.value}", + "value": "{color.dark.base}", "source": "$dark-100", "modify": [ { @@ -773,7 +773,7 @@ ] }, "200": { - "value": "{color.dark.base.value}", + "value": "{color.dark.base}", "source": "$dark-200", "modify": [ { @@ -784,7 +784,7 @@ ] }, "300": { - "value": "{color.dark.base.value}", + "value": "{color.dark.base}", "source": "$dark-300", "modify": [ { @@ -795,7 +795,7 @@ ] }, "400": { - "value": "{color.dark.base.value}", + "value": "{color.dark.base}", "source": "$dark-400", "modify": [ { @@ -805,9 +805,9 @@ } ] }, - "500": { "value": "{color.dark.base.value}", "source": "$dark-500" }, + "500": { "value": "{color.dark.base}", "source": "$dark-500" }, "600": { - "value": "{color.dark.base.value}", + "value": "{color.dark.base}", "source": "$dark-600", "modify": [ { @@ -818,7 +818,7 @@ ] }, "700": { - "value": "{color.dark.base.value}", + "value": "{color.dark.base}", "source": "$dark-700", "modify": [ { @@ -829,7 +829,7 @@ ] }, "800": { - "value": "{color.dark.base.value}", + "value": "{color.dark.base}", "source": "$dark-800", "modify": [ { @@ -840,7 +840,7 @@ ] }, "900": { - "value": "{color.dark.base.value}", + "value": "{color.dark.base}", "source": "$dark-900", "modify": [ { diff --git a/tokens/src/global/spacing.json b/tokens/src/global/spacing.json index 0ed8403eb9..b945053391 100644 --- a/tokens/src/global/spacing.json +++ b/tokens/src/global/spacing.json @@ -3,17 +3,17 @@ "spacer": { "base": { "value": "1rem", "source": "$spacer" }, "0": { "value": "0" }, - "1": { "value": "calc({spacing.spacer.base.value} * .25rem)" }, - "1,5": { "value": "calc({spacing.spacer.base.value} * .375rem)" }, - "2": { "value": "calc({spacing.spacer.base.value} * .5rem)" }, - "2,5": { "value": "calc({spacing.spacer.base.value} * .75rem)" }, - "3": { "value": "{spacing.spacer.base.value}" }, - "3,5": { "value": "calc({spacing.spacer.base.value} * 1.25rem)" }, - "4": { "value": "calc({spacing.spacer.base.value} * 1.5rem)" }, - "4,5": { "value": "calc({spacing.spacer.base.value} * 2rem)" }, - "5": { "value": "calc({spacing.spacer.base.value} * 3rem)" }, - "5,5": { "value": "calc({spacing.spacer.base.value} * 4rem)" }, - "6": { "value": "calc({spacing.spacer.base.value} * 5rem)" } + "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)" } } } } diff --git a/tokens/src/global/typography.json b/tokens/src/global/typography.json index b0fb07d5d8..2cdbfc5674 100644 --- a/tokens/src/global/typography.json +++ b/tokens/src/global/typography.json @@ -2,7 +2,7 @@ "typography": { "font": { "family": { - "base": { "value": "{typography.font.family.sans.serif.value}", "source": "$font-family-base" }, + "base": { "value": "{typography.font.family.sans.serif}", "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\"", @@ -32,13 +32,13 @@ "h6": { "value": ".75rem", "source": "$h6-font-size" }, "mobile": { "h1": { "value": "2.25rem", "source": "$h1-mobile-font-size" }, - "h2": { "value": "{typography.font.size.h2.value}", "source": "$h2-mobile-font-size" }, - "h3": { "value": "{typography.font.size.h3.value}", "source": "$h3-mobile-font-size" }, - "h4": { "value": "{typography.font.size.h4.value}", "source": "$h4-mobile-font-size" }, - "h5": { "value": "{typography.font.size.h5.value}", "source": "$h5-mobile-font-size" }, - "h6": { "value": "{typography.font.size.h6.value}", "source": "$h6-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" } }, - "lead": { "value": "calc({typography.font.size.base.value} * 1.25)", "source": "$lead-font-size" } + "lead": { "value": "calc({typography.font.size.base} * 1.25)", "source": "$lead-font-size" } }, "weight": { "lighter": { "value": "lighter", "source": "$font-weight-lighter" }, @@ -49,7 +49,7 @@ }, "bold": { "value": "700", "source": "$font-weight-bold" }, "bolder": { "value": "bolder", "source": "$font-weight-bolder" }, - "base": { "value": "{typography.font.weight.normal.value}", "source": "$font-weight-base" }, + "base": { "value": "{typography.font.weight.normal}", "source": "$font-weight-base" }, "lead": { "value": "inherit", "source": "$lead-font-weight" } } },