From 0e1ef04c3ede3eacc8d209c90e268fa03d7f23cc Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Tue, 27 Aug 2024 22:46:33 +0300
Subject: [PATCH] refactor: corrected header
---
lib/build-tokens.js | 6 +-
styles/css/core/custom-media-breakpoints.css | 6 +
styles/css/core/variables.css | 6 +
styles/css/themes/light/utility-classes.css | 6 +
styles/css/themes/light/variables.css | 6 +
tokens/src/core/alias/size.json | 30 +-
tokens/src/core/components/ActionRow.json | 10 +-
tokens/src/core/components/Alert.json | 53 +-
tokens/src/core/components/Annotation.json | 35 +-
tokens/src/core/components/Avatar.json | 54 +-
tokens/src/core/components/AvatarButton.json | 15 +-
tokens/src/core/components/Badge.json | 47 +-
tokens/src/core/components/Breadcrumb.json | 25 +-
tokens/src/core/components/Bubble.json | 10 +-
tokens/src/core/components/Button/core.json | 122 +-
tokens/src/core/components/Card.json | 150 +--
tokens/src/core/components/Carousel.json | 62 +-
tokens/src/core/components/Chip.json | 55 +-
tokens/src/core/components/ChipCarousel.json | 15 +-
tokens/src/core/components/CloseButton.json | 12 +-
tokens/src/core/components/Code.json | 32 +-
tokens/src/core/components/Collapsible.json | 45 +-
tokens/src/core/components/ColorPicker.json | 10 +-
tokens/src/core/components/Container.json | 25 +-
tokens/src/core/components/DataTable.json | 46 +-
tokens/src/core/components/Dropdown.json | 70 +-
tokens/src/core/components/Dropzone.json | 15 +-
tokens/src/core/components/Form/other.json | 20 +-
tokens/src/core/components/Form/size.json | 204 +---
tokens/src/core/components/Form/spacing.json | 145 +--
.../src/core/components/Form/typography.json | 108 +-
tokens/src/core/components/Icon.json | 25 +-
tokens/src/core/components/IconButton.json | 15 +-
tokens/src/core/components/Image.json | 20 +-
tokens/src/core/components/Menu.json | 62 +-
tokens/src/core/components/Modal.json | 75 +-
tokens/src/core/components/Nav.json | 61 +-
tokens/src/core/components/Navbar.json | 60 +-
tokens/src/core/components/Pagination.json | 100 +-
tokens/src/core/components/Popover.json | 70 +-
tokens/src/core/components/ProductTour.json | 30 +-
tokens/src/core/components/ProgressBar.json | 45 +-
tokens/src/core/components/SearchField.json | 25 +-
tokens/src/core/components/SelectableBox.json | 15 +-
tokens/src/core/components/Sheet.json | 10 +-
tokens/src/core/components/Spinner.json | 35 +-
tokens/src/core/components/Stack.json | 5 +-
tokens/src/core/components/Stepper.json | 50 +-
tokens/src/core/components/Sticky.json | 5 +-
tokens/src/core/components/Tab.json | 35 +-
tokens/src/core/components/Tabs.json | 15 +-
tokens/src/core/components/Toast.json | 40 +-
tokens/src/core/components/Tooltip.json | 45 +-
tokens/src/core/components/general/caret.json | 15 +-
.../src/core/components/general/headings.json | 23 +-
tokens/src/core/components/general/hr.json | 10 +-
tokens/src/core/components/general/input.json | 76 +-
tokens/src/core/components/general/link.json | 60 +-
tokens/src/core/components/general/list.json | 30 +-
tokens/src/core/components/general/text.json | 20 +-
tokens/src/themes/light/alias/color.json | 19 +-
tokens/src/themes/light/components/Alert.json | 70 +-
.../themes/light/components/Annotation.json | 50 +-
.../src/themes/light/components/Avatar.json | 4 +-
tokens/src/themes/light/components/Badge.json | 272 +----
.../themes/light/components/Breadcrumb.json | 25 +-
.../src/themes/light/components/Bubble.json | 40 +-
.../themes/light/components/Button/brand.json | 57 +-
.../themes/light/components/Button/core.json | 20 +-
.../light/components/Button/danger.json | 67 +-
.../themes/light/components/Button/dark.json | 57 +-
.../themes/light/components/Button/info.json | 57 +-
.../themes/light/components/Button/light.json | 57 +-
.../light/components/Button/primary.json | 57 +-
.../light/components/Button/secondary.json | 57 +-
.../light/components/Button/success.json | 57 +-
.../light/components/Button/tertiary.json | 162 +--
.../light/components/Button/warning.json | 57 +-
tokens/src/themes/light/components/Card.json | 42 +-
.../src/themes/light/components/Carousel.json | 41 +-
tokens/src/themes/light/components/Chip.json | 60 +-
.../themes/light/components/CloseButton.json | 10 +-
tokens/src/themes/light/components/Code.json | 25 +-
.../themes/light/components/DataTable.json | 22 +-
.../src/themes/light/components/Dropdown.json | 64 +-
.../src/themes/light/components/Dropzone.json | 35 +-
.../themes/light/components/Form/color.json | 304 +----
.../light/components/Form/elevation.json | 65 +-
.../themes/light/components/Form/other.json | 96 +-
.../themes/light/components/IconButton.json | 1013 ++++-------------
tokens/src/themes/light/components/Image.json | 19 +-
tokens/src/themes/light/components/Menu.json | 50 +-
tokens/src/themes/light/components/Modal.json | 22 +-
tokens/src/themes/light/components/Nav.json | 185 +--
.../src/themes/light/components/Navbar.json | 104 +-
.../themes/light/components/PageBanner.json | 40 +-
.../themes/light/components/Pagination.json | 85 +-
.../src/themes/light/components/Popover.json | 86 +-
.../themes/light/components/ProductTour.json | 37 +-
.../themes/light/components/ProgressBar.json | 30 +-
.../themes/light/components/Scrollable.json | 7 +-
.../themes/light/components/SearchField.json | 35 +-
tokens/src/themes/light/components/Sheet.json | 14 +-
.../src/themes/light/components/Stepper.json | 30 +-
tokens/src/themes/light/components/Toast.json | 34 +-
.../src/themes/light/components/Tooltip.json | 35 +-
.../themes/light/components/general/body.json | 10 +-
.../light/components/general/headings.json | 5 +-
.../themes/light/components/general/hr.json | 7 +-
.../light/components/general/input.json | 5 +-
.../themes/light/components/general/link.json | 114 +-
.../themes/light/components/general/list.json | 67 +-
.../themes/light/components/general/text.json | 20 +-
tokens/src/themes/light/global/color.json | 56 +-
tokens/style-dictionary.js | 53 +-
tokens/utils.js | 48 +
116 files changed, 1397 insertions(+), 5285 deletions(-)
diff --git a/lib/build-tokens.js b/lib/build-tokens.js
index af2272cfeb..19f9199d09 100755
--- a/lib/build-tokens.js
+++ b/lib/build-tokens.js
@@ -1,10 +1,6 @@
const path = require('path');
const minimist = require('minimist');
-const {
- initializeStyleDictionary,
- createCustomCSSVariables,
- colorTransform,
-} = require('../tokens/style-dictionary');
+const { initializeStyleDictionary, createCustomCSSVariables, colorTransform } = require('../tokens/style-dictionary');
const { createIndexCssFile } = require('../tokens/utils');
/**
diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css
index 00db050fdb..71df821c71 100644
--- a/styles/css/core/custom-media-breakpoints.css
+++ b/styles/css/core/custom-media-breakpoints.css
@@ -1,3 +1,9 @@
+/*
+ * IMPORTANT: This file is the result of assembling design tokens.
+ * Do not edit directly.
+ * Generated on Tue, 27 Aug 2024 17:14:44 GMT
+ */
+
@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem);
@custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px);
@custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px);
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index e314d7e39e..056692268f 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -1,3 +1,9 @@
+/*
+ * IMPORTANT: This file is the result of assembling design tokens.
+ * Do not edit directly.
+ * Generated on Tue, 27 Aug 2024 17:14:44 GMT
+ */
+
:root {
--pgn-theme-interval: 8%;
--pgn-other-form-control-custom-file-content: Browse;
diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css
index af85f92e60..d3aee7ed00 100644
--- a/styles/css/themes/light/utility-classes.css
+++ b/styles/css/themes/light/utility-classes.css
@@ -1,3 +1,9 @@
+/*
+ * IMPORTANT: This file is the result of assembling design tokens.
+ * Do not edit directly.
+ * Generated on Tue, 27 Aug 2024 17:14:44 GMT
+ */
+
.bg-accent-a {
background-color: var(--pgn-color-accent-a) !important;
}
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index 97329a27fd..895537aa53 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -1,3 +1,9 @@
+/*
+ * IMPORTANT: This file is the result of assembling design tokens.
+ * Do not edit directly.
+ * Generated on Tue, 27 Aug 2024 17:14:44 GMT
+ */
+
:root {
--pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
--pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json
index fe83f98a95..d4cf3baef7 100644
--- a/tokens/src/core/alias/size.json
+++ b/tokens/src/core/alias/size.json
@@ -2,35 +2,15 @@
"$type": "dimension",
"size": {
"border": {
- "width": {
- "source": "$border-width",
- "$value": "1px",
- "$description": "Default border width."
- },
+ "width": { "source": "$border-width", "$value": "1px", "$description": "Default border width." },
"radius": {
- "base": {
- "source": "$border-radius",
- "$value": ".375rem",
- "$description": "Default border radius."
- },
- "lg": {
- "source": "$border-radius-lg",
- "$value": ".425rem",
- "$description": "Large border radius."
- },
- "sm": {
- "source": "$border-radius-sm",
- "$value": ".25rem",
- "$description": "Small border radius."
- }
+ "base": { "source": "$border-radius", "$value": ".375rem", "$description": "Default border radius." },
+ "lg": { "source": "$border-radius-lg", "$value": ".425rem", "$description": "Large border radius." },
+ "sm": { "source": "$border-radius-sm", "$value": ".25rem", "$description": "Small border radius." }
}
},
"rounded": {
- "pill": {
- "source": "$rounded-pill",
- "$value": "50rem",
- "$description": "Pill border radius."
- }
+ "pill": { "source": "$rounded-pill", "$value": "50rem", "$description": "Pill border radius." }
}
}
}
diff --git a/tokens/src/core/components/ActionRow.json b/tokens/src/core/components/ActionRow.json
index 32d311ece9..2c65294d17 100644
--- a/tokens/src/core/components/ActionRow.json
+++ b/tokens/src/core/components/ActionRow.json
@@ -3,14 +3,8 @@
"spacing": {
"action-row": {
"gap": {
- "x": {
- "source": "$action-row-gap-x",
- "$value": ".5rem"
- },
- "y": {
- "source": "$action-row-gap-y",
- "$value": ".5rem"
- }
+ "x": { "source": "$action-row-gap-x", "$value": ".5rem" },
+ "y": { "source": "$action-row-gap-y", "$value": ".5rem" }
}
}
}
diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json
index 6ca4f1aa04..133b336cc8 100644
--- a/tokens/src/core/components/Alert.json
+++ b/tokens/src/core/components/Alert.json
@@ -3,62 +3,29 @@
"$type": "dimension",
"alert": {
"padding": {
- "y": {
- "source": "$alert-padding-y",
- "$value": "1.5rem"
- },
- "x": {
- "source": "$alert-padding-x",
- "$value": "1.5rem"
- }
+ "y": { "source": "$alert-padding-y", "$value": "1.5rem" },
+ "x": { "source": "$alert-padding-x", "$value": "1.5rem" }
},
- "margin-bottom": {
- "source": "$alert-margin-bottom",
- "$value": "1rem"
- },
- "actions-gap": {
- "source": "$alert-actions-gap",
- "$value": "{spacing.spacer.3}"
- },
- "icon-space": {
- "source": "$alert-icon-space",
- "$value": ".8rem"
- }
+ "margin-bottom": { "source": "$alert-margin-bottom", "$value": "1rem" },
+ "actions-gap": { "source": "$alert-actions-gap", "$value": "{spacing.spacer.3}" },
+ "icon-space": { "source": "$alert-icon-space", "$value": ".8rem" }
}
},
"typography": {
"alert": {
"font": {
- "weight-link": {
- "source": "$alert-link-font-weight",
- "$value": "{typography.font.weight.normal}",
- "$type": "fontWeight"
- },
- "size": {
- "source": "$alert-font-size",
- "$value": ".875rem",
- "$type": "dimension"
- }
+ "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" },
+ "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" }
},
- "line-height": {
- "source": "$alert-line-height",
- "$value": "1.5rem",
- "$type": "dimension"
- }
+ "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "dimension" }
}
},
"size": {
"$type": "dimension",
"alert": {
"border": {
- "radius": {
- "source": "$alert-border-radius",
- "$value": "{size.border.radius.base}"
- },
- "width": {
- "source": "$alert-border-width",
- "$value": "0"
- }
+ "radius": { "source": "$alert-border-radius", "$value": "{size.border.radius.base}" },
+ "width": { "source": "$alert-border-width", "$value": "0" }
}
}
}
diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json
index fe3272f836..4a20f37204 100644
--- a/tokens/src/core/components/Annotation.json
+++ b/tokens/src/core/components/Annotation.json
@@ -2,46 +2,25 @@
"$type": "dimension",
"spacing": {
"annotation": {
- "padding": {
- "source": "$annotation-padding",
- "$value": ".5rem"
- },
+ "padding": { "source": "$annotation-padding", "$value": ".5rem" },
"arrow-side": {
- "margin": {
- "source": "$annotation-arrow-side-margin",
- "$value": ".25rem"
- }
+ "margin": { "source": "$annotation-arrow-side-margin", "$value": ".25rem" }
}
}
},
"typography": {
"annotation": {
- "font-size": {
- "source": "$annotation-font-size",
- "$value": "{typography.font.size.sm}"
- },
- "line-height": {
- "source": "$annotation-line-height",
- "$value": "{typography.line-height.sm}"
- }
+ "font-size": { "source": "$annotation-font-size", "$value": "{typography.font.size.sm}" },
+ "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}" }
}
},
"size": {
"annotation": {
"arrow-border": {
- "width": {
- "source": "$annotation-arrow-border-width",
- "$value": ".5rem"
- }
+ "width": { "source": "$annotation-arrow-border-width", "$value": ".5rem" }
},
- "max-width": {
- "source": "$annotation-max-width",
- "$value": "18.75rem"
- },
- "border-radius": {
- "source": "$annotation-border-radius",
- "$value": ".25rem"
- }
+ "max-width": { "source": "$annotation-max-width", "$value": "18.75rem" },
+ "border-radius": { "source": "$annotation-border-radius", "$value": ".25rem" }
}
}
}
diff --git a/tokens/src/core/components/Avatar.json b/tokens/src/core/components/Avatar.json
index 1fe8ed60af..58bd3176ed 100644
--- a/tokens/src/core/components/Avatar.json
+++ b/tokens/src/core/components/Avatar.json
@@ -1,52 +1,16 @@
{
"size": {
"avatar": {
- "base": {
- "source": "$avatar-size",
- "$value": "3rem",
- "$type": "dimension"
- },
- "xs": {
- "source": "$avatar-size-xs",
- "$value": "1.5rem",
- "$type": "dimension"
- },
- "sm": {
- "source": "$avatar-size-sm",
- "$value": "2.25rem",
- "$type": "dimension"
- },
- "lg": {
- "source": "$avatar-size-lg",
- "$value": "4rem",
- "$type": "dimension"
- },
- "xl": {
- "source": "$avatar-size-xl",
- "$value": "6rem",
- "$type": "dimension"
- },
- "xxl": {
- "source": "$avatar-size-xxl",
- "$value": "11.5rem",
- "$type": "dimension"
- },
- "huge": {
- "source": "$avatar-size-huge",
- "$value": "18.75rem",
- "$type": "dimension"
- },
+ "base": { "source": "$avatar-size", "$value": "3rem", "$type": "dimension" },
+ "xs": { "source": "$avatar-size-xs", "$value": "1.5rem", "$type": "dimension" },
+ "sm": { "source": "$avatar-size-sm", "$value": "2.25rem", "$type": "dimension" },
+ "lg": { "source": "$avatar-size-lg", "$value": "4rem", "$type": "dimension" },
+ "xl": { "source": "$avatar-size-xl", "$value": "6rem", "$type": "dimension" },
+ "xxl": { "source": "$avatar-size-xxl", "$value": "11.5rem", "$type": "dimension" },
+ "huge": { "source": "$avatar-size-huge", "$value": "18.75rem", "$type": "dimension" },
"border": {
- "base": {
- "source": "$avatar-border",
- "$value": "1px",
- "$type": "dimension"
- },
- "radius": {
- "source": "$avatar-border-radius",
- "$value": "100%",
- "$type": "percentage"
- }
+ "base": { "source": "$avatar-border", "$value": "1px", "$type": "dimension" },
+ "radius": { "source": "$avatar-border-radius", "$value": "100%", "$type": "percentage" }
}
}
}
diff --git a/tokens/src/core/components/AvatarButton.json b/tokens/src/core/components/AvatarButton.json
index 069c82c668..e9c77a5baf 100644
--- a/tokens/src/core/components/AvatarButton.json
+++ b/tokens/src/core/components/AvatarButton.json
@@ -3,18 +3,9 @@
"spacing": {
"avatar-button": {
"padding-left": {
- "base": {
- "source": "$avatar-button-padding-left",
- "$value": ".25em"
- },
- "sm": {
- "source": "$avatar-button-padding-left-sm",
- "$value": ".25em"
- },
- "lg": {
- "source": "$avatar-button-padding-left-lg",
- "$value": ".25em"
- }
+ "base": { "source": "$avatar-button-padding-left", "$value": ".25em" },
+ "sm": { "source": "$avatar-button-padding-left-sm", "$value": ".25em" },
+ "lg": { "source": "$avatar-button-padding-left-lg", "$value": ".25em" }
}
}
}
diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json
index ecb9ee5376..61cbc94e7a 100644
--- a/tokens/src/core/components/Badge.json
+++ b/tokens/src/core/components/Badge.json
@@ -4,35 +4,18 @@
"badge": {
"padding": {
"x": {
- "base": {
- "source": "$badge-padding-x",
- "$value": ".5rem"
- },
- "pill": {
- "source": "$badge-pill-padding-x",
- "$value": ".6em"
- }
+ "base": { "source": "$badge-padding-x", "$value": ".5rem" },
+ "pill": { "source": "$badge-pill-padding-x", "$value": ".6em" }
},
- "y": {
- "source": "$badge-padding-y",
- "$value": ".125rem"
- }
+ "y": { "source": "$badge-padding-y", "$value": ".125rem" }
}
}
},
"typography": {
"badge": {
"font": {
- "size": {
- "source": "$badge-font-size",
- "$value": "75%",
- "$type": "percentage"
- },
- "weight": {
- "source": "$badge-font-weight",
- "$value": "{typography.font.weight.bold}",
- "$type": "fontWeight"
- }
+ "size": { "source": "$badge-font-size", "$value": "75%", "$type": "percentage" },
+ "weight": { "source": "$badge-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
}
}
},
@@ -40,26 +23,14 @@
"$type": "dimension",
"badge": {
"border-radius": {
- "base": {
- "source": "$badge-border-radius",
- "$value": ".25rem"
- },
- "pill": {
- "source": "$badge-pill-border-radius",
- "$value": "10rem"
- }
+ "base": { "source": "$badge-border-radius", "$value": ".25rem" },
+ "pill": { "source": "$badge-pill-border-radius", "$value": "10rem" }
},
- "focus-width": {
- "source": "$badge-focus-width",
- "$value": "{size.input.btn.focus-width}"
- }
+ "focus-width": { "source": "$badge-focus-width", "$value": "{size.input.btn.focus-width}" }
}
},
"transition": {
"$type": "transition",
- "badge": {
- "source": "$badge-transition",
- "$value": "none"
- }
+ "badge": { "source": "$badge-transition", "$value": "none" }
}
}
diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json
index 84f041c281..f4aea97731 100644
--- a/tokens/src/core/components/Breadcrumb.json
+++ b/tokens/src/core/components/Breadcrumb.json
@@ -3,10 +3,7 @@
"spacing": {
"breadcrumb": {
"margin": {
- "left": {
- "source": "$breadcrumb-margin-left",
- "$value": ".5rem"
- }
+ "left": { "source": "$breadcrumb-margin-left", "$value": ".5rem" }
}
}
},
@@ -14,25 +11,13 @@
"breadcrumb": {
"border": {
"radius": {
- "focus": {
- "source": "$breadcrumb-focus-border-radius",
- "$value": ".125rem"
- }
+ "focus": { "source": "$breadcrumb-focus-border-radius", "$value": ".125rem" }
},
"axis": {
- "x-focus": {
- "source": "$breadcrumb-border-focus-axis-x",
- "$value": ".25rem"
- },
- "y-focus": {
- "source": "$breadcrumb-border-focus-axis-y",
- "$value": ".5rem"
- }
+ "x-focus": { "source": "$breadcrumb-border-focus-axis-x", "$value": ".25rem" },
+ "y-focus": { "source": "$breadcrumb-border-focus-axis-y", "$value": ".5rem" }
},
- "width-focus": {
- "source": "$breadcrumb-border-focus-width",
- "$value": ".0625rem"
- }
+ "width-focus": { "source": "$breadcrumb-border-focus-width", "$value": ".0625rem" }
}
}
}
diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json
index ba57fc309e..1fa4f035f5 100644
--- a/tokens/src/core/components/Bubble.json
+++ b/tokens/src/core/components/Bubble.json
@@ -3,14 +3,8 @@
"spacing": {
"bubble": {
"expandable-padding": {
- "y": {
- "source": "$bubble-expandable-padding-y",
- "$value": "0"
- },
- "x": {
- "source": "$bubble-expandable-padding-x",
- "$value": ".25rem"
- }
+ "y": { "source": "$bubble-expandable-padding-y", "$value": "0" },
+ "x": { "source": "$bubble-expandable-padding-x", "$value": ".25rem" }
}
}
}
diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json
index 0ce7ff8c7b..bcfcc5bc6c 100644
--- a/tokens/src/core/components/Button/core.json
+++ b/tokens/src/core/components/Button/core.json
@@ -4,45 +4,21 @@
"btn": {
"padding": {
"y": {
- "base": {
- "source": "$btn-padding-y",
- "$value": "{spacing.input.btn.padding.y}"
- },
- "lg": {
- "source": "$btn-padding-y-lg",
- "$value": "{spacing.input.btn.padding.lg.y}"
- },
- "sm": {
- "source": "$btn-padding-y-sm",
- "$value": "{spacing.input.btn.padding.sm.y}"
- }
+ "base": { "source": "$btn-padding-y", "$value": "{spacing.input.btn.padding.y}" },
+ "lg": { "source": "$btn-padding-y-lg", "$value": "{spacing.input.btn.padding.lg.y}" },
+ "sm": { "source": "$btn-padding-y-sm", "$value": "{spacing.input.btn.padding.sm.y}" }
},
"x": {
- "base": {
- "source": "$btn-padding-x",
- "$value": "{spacing.input.btn.padding.x}"
- },
- "lg": {
- "source": "$btn-padding-x-lg",
- "$value": "{spacing.input.btn.padding.lg.x}"
- },
- "sm": {
- "source": "$btn-padding-x-sm",
- "$value": "{spacing.input.btn.padding.sm.x}"
- }
+ "base": { "source": "$btn-padding-x", "$value": "{spacing.input.btn.padding.x}" },
+ "lg": { "source": "$btn-padding-x-lg", "$value": "{spacing.input.btn.padding.lg.x}" },
+ "sm": { "source": "$btn-padding-x-sm", "$value": "{spacing.input.btn.padding.sm.x}" }
}
},
"block": {
- "spacing-y": {
- "source": "$btn-block-spacing-y",
- "$value": ".5rem"
- }
+ "spacing-y": { "source": "$btn-block-spacing-y", "$value": ".5rem" }
},
"focus": {
- "gap": {
- "source": "$btn-focus-gap",
- "$value": "{size.btn.focus.width}"
- },
+ "gap": { "source": "$btn-focus-gap", "$value": "{size.btn.focus.width}" },
"border-gap": {
"source": "$btn-focus-border-gap",
"$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})"
@@ -57,46 +33,20 @@
"typography": {
"btn": {
"font": {
- "family": {
- "source": "$btn-font-family",
- "$value": "{typography.input.btn.font.family}",
- "$type": "fontFamily"
- },
+ "family": { "source": "$btn-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" },
"size": {
"$type": "dimension",
- "base": {
- "source": "$btn-font-size",
- "$value": "{typography.input.btn.font.size.base}"
- },
- "sm": {
- "source": "$btn-font-size-sm",
- "$value": "{typography.input.btn.font.size.sm}"
- },
- "lg": {
- "source": "$btn-font-size-lg",
- "$value": "{typography.input.btn.font.size.lg}"
- }
+ "base": { "source": "$btn-font-size", "$value": "{typography.input.btn.font.size.base}" },
+ "sm": { "source": "$btn-font-size-sm", "$value": "{typography.input.btn.font.size.sm}" },
+ "lg": { "source": "$btn-font-size-lg", "$value": "{typography.input.btn.font.size.lg}" }
},
- "weight": {
- "source": "$btn-font-weight",
- "$value": "{typography.font.weight.normal}",
- "$type": "fontWeight"
- }
+ "weight": { "source": "$btn-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" }
},
"line-height": {
"$type": "dimension",
- "base": {
- "source": "$btn-line-height",
- "$value": "{typography.input.btn.line-height.base}"
- },
- "sm": {
- "source": "$btn-line-height-sm",
- "$value": "{typography.input.btn.line-height.sm}"
- },
- "lg": {
- "source": "$btn-line-height-lg",
- "$value": "{typography.input.btn.line-height.lg}"
- }
+ "base": { "source": "$btn-line-height", "$value": "{typography.input.btn.line-height.base}" },
+ "sm": { "source": "$btn-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" },
+ "lg": { "source": "$btn-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" }
}
}
},
@@ -104,52 +54,28 @@
"$type": "dimension",
"btn": {
"border": {
- "width": {
- "source": "$btn-border-width",
- "$value": "{size.input.btn.border-width}"
- },
+ "width": { "source": "$btn-border-width", "$value": "{size.input.btn.border-width}" },
"radius": {
- "base": {
- "source": "$btn-border-radius",
- "$value": "{size.border.radius.base}"
- },
- "lg": {
- "source": "$btn-border-radius-lg",
- "$value": "{size.border.radius.lg}"
- },
- "sm": {
- "source": "$btn-border-radius-sm",
- "$value": "{size.border.radius.sm}"
- }
+ "base": { "source": "$btn-border-radius", "$value": "{size.border.radius.base}" },
+ "lg": { "source": "$btn-border-radius-lg", "$value": "{size.border.radius.lg}" },
+ "sm": { "source": "$btn-border-radius-sm", "$value": "{size.border.radius.sm}" }
}
},
"focus": {
- "width": {
- "source": "$btn-focus-width",
- "$value": "2px"
- },
+ "width": { "source": "$btn-focus-width", "$value": "2px" },
"border-radius": {
"base": {
"source": "$btn-focus-border-radius",
"$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})"
},
- "lg": {
- "source": "$btn-focus-border-radius-lg",
- "$value": "{size.btn.focus.border-radius.base}"
- },
- "sm": {
- "source": "$btn-focus-border-radius-sm",
- "$value": "{size.btn.border.radius.base}"
- }
+ "lg": { "source": "$btn-focus-border-radius-lg", "$value": "{size.btn.focus.border-radius.base}" },
+ "sm": { "source": "$btn-focus-border-radius-sm", "$value": "{size.btn.border.radius.base}" }
}
}
}
},
"transition": {
"$type": "transition",
- "btn": {
- "source": "$btn-transition",
- "$value": "none"
- }
+ "btn": { "source": "$btn-transition", "$value": "none" }
}
}
diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json
index 4eff49026c..52e9a46ddc 100644
--- a/tokens/src/core/components/Card.json
+++ b/tokens/src/core/components/Card.json
@@ -3,170 +3,80 @@
"spacing": {
"card": {
"spacer": {
- "x": {
- "source": "$card-spacer-x",
- "$value": "1.25rem"
- },
- "y": {
- "source": "$card-spacer-y",
- "$value": ".75rem"
- }
+ "x": { "source": "$card-spacer-x", "$value": "1.25rem" },
+ "y": { "source": "$card-spacer-y", "$value": ".75rem" }
},
"margin": {
- "group": {
- "source": "$card-group-margin",
- "$value": "12px"
- },
- "deck": {
- "source": "$card-deck-margin",
- "$value": "{spacing.card.margin.group}"
- },
- "deck-bottom": {
- "source": "$card-deck-margin-bottom",
- "$value": "{spacing.spacer.3}"
- },
- "grid": {
- "source": "$card-grid-margin",
- "$value": "{spacing.card.margin.group}"
- },
- "grid-bottom": {
- "source": "$card-grid-margin-bottom",
- "$value": "{spacing.spacer.3}"
- }
+ "group": { "source": "$card-group-margin", "$value": "12px" },
+ "deck": { "source": "$card-deck-margin", "$value": "{spacing.card.margin.group}" },
+ "deck-bottom": { "source": "$card-deck-margin-bottom", "$value": "{spacing.spacer.3}" },
+ "grid": { "source": "$card-grid-margin", "$value": "{spacing.card.margin.group}" },
+ "grid-bottom": { "source": "$card-grid-margin-bottom", "$value": "{spacing.spacer.3}" }
},
"columns": {
- "margin": {
- "source": "$card-columns-margin",
- "$value": "{spacing.card.spacer.y}"
- },
- "count": {
- "source": "$card-columns-count",
- "$value": "3"
- },
- "gap": {
- "source": "$card-columns-gap",
- "$value": "1.25rem"
- }
+ "margin": { "source": "$card-columns-margin", "$value": "{spacing.card.spacer.y}" },
+ "count": { "source": "$card-columns-count", "$value": "3" },
+ "gap": { "source": "$card-columns-gap", "$value": "1.25rem" }
},
"footer": {
- "action-gap": {
- "source": "$card-footer-actions-gap",
- "$value": ".5rem"
- }
+ "action-gap": { "source": "$card-footer-actions-gap", "$value": ".5rem" }
},
"loading-skeleton": {
- "spacer": {
- "source": "$loading-skeleton-spacer",
- "$value": ".313rem"
- }
+ "spacer": { "source": "$loading-skeleton-spacer", "$value": ".313rem" }
},
"logo": {
"left-offset": {
- "base": {
- "source": "$card-logo-left-offset",
- "$value": "1.5rem"
- },
- "horizontal": {
- "source": "$card-logo-left-offset-horizontal",
- "$value": ".4375rem"
- }
+ "base": { "source": "$card-logo-left-offset", "$value": "1.5rem" },
+ "horizontal": { "source": "$card-logo-left-offset-horizontal", "$value": ".4375rem" }
},
"bottom-offset": {
- "base": {
- "source": "$card-logo-bottom-offset",
- "$value": "1rem"
- },
- "horizontal": {
- "source": "$card-logo-bottom-offset-horizontal",
- "$value": ".4375rem"
- }
+ "base": { "source": "$card-logo-bottom-offset", "$value": "1rem" },
+ "horizontal": { "source": "$card-logo-bottom-offset-horizontal", "$value": ".4375rem" }
}
},
"focus": {
- "border-offset": {
- "source": "$card-focus-border-offset",
- "$value": "5px"
- }
+ "border-offset": { "source": "$card-focus-border-offset", "$value": "5px" }
}
}
},
"size": {
"card": {
"border": {
- "width": {
- "source": "$card-border-width",
- "$value": "{size.border.width}"
- },
+ "width": { "source": "$card-border-width", "$value": "{size.border.width}" },
"radius": {
- "base": {
- "source": "$card-border-radius",
- "$value": "{size.border.radius.base}"
- },
- "logo": {
- "source": "$card-logo-border-radius",
- "$value": ".25rem"
- },
- "inner": {
- "source": "$card-inner-border-radius",
- "$value": "calc({size.card.border.radius.base} - {size.card.border.width})"
- }
+ "base": { "source": "$card-border-radius", "$value": "{size.border.radius.base}" },
+ "logo": { "source": "$card-logo-border-radius", "$value": ".25rem" },
+ "inner": { "source": "$card-inner-border-radius", "$value": "calc({size.card.border.radius.base} - {size.card.border.width})" }
}
},
"focus": {
"border": {
- "width": {
- "source": "$card-focus-border-width",
- "$value": "2px"
- },
- "radius": {
- "source": "$card-focus-border-radius",
- "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})"
- }
+ "width": { "source": "$card-focus-border-width", "$value": "2px" },
+ "radius": { "source": "$card-focus-border-radius", "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})" }
}
},
"image": {
"horizontal": {
"width": {
- "max": {
- "source": "$card-image-horizontal-max-width",
- "$value": "240px"
- },
- "min": {
- "source": "$card-image-horizontal-min-width",
- "$value": "{size.card.image.horizontal.width.max}"
- }
+ "max": { "source": "$card-image-horizontal-max-width", "$value": "240px" },
+ "min": { "source": "$card-image-horizontal-min-width", "$value": "{size.card.image.horizontal.width.max}" }
}
},
"vertical": {
- "max-height": {
- "source": "$card-image-vertical-max-height",
- "$value": "140px"
- }
+ "max-height": { "source": "$card-image-vertical-max-height", "$value": "140px" }
},
- "border-radius": {
- "source": "$card-image-border-radius",
- "$value": "{size.card.border.radius.base}"
- }
+ "border-radius": { "source": "$card-image-border-radius", "$value": "{size.card.border.radius.base}" }
},
"logo": {
- "width": {
- "source": "$card-logo-width",
- "$value": "7.25rem"
- },
- "height": {
- "source": "$card-logo-height",
- "$value": "4.125rem"
- }
+ "width": { "source": "$card-logo-width", "$value": "7.25rem" },
+ "height": { "source": "$card-logo-height", "$value": "4.125rem" }
}
}
},
"typography": {
"footer": {
"text": {
- "font-size": {
- "source": "$card-footer-text-font-size",
- "$value": "{typography.font.size.small.x}"
- }
+ "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.small.x}" }
}
}
}
diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
index 871d50d7c5..07248dda1c 100644
--- a/tokens/src/core/components/Carousel.json
+++ b/tokens/src/core/components/Carousel.json
@@ -3,73 +3,33 @@
"carousel": {
"control": {
"width": {
- "base": {
- "source": "$carousel-control-width",
- "$value": "15%",
- "$type": "percentage"
- },
- "icon": {
- "source": "$carousel-control-icon-width",
- "$value": "20px",
- "$type": "dimension"
- }
+ "base": { "source": "$carousel-control-width", "$value": "15%", "$type": "percentage" },
+ "icon": { "source": "$carousel-control-icon-width", "$value": "20px", "$type": "dimension" }
}
},
"indicator": {
"$type": "dimension",
- "width": {
- "source": "$carousel-indicator-width",
- "$value": "30px"
- },
+ "width": { "source": "$carousel-indicator-width", "$value": "30px" },
"height": {
- "base": {
- "source": "$carousel-indicator-height",
- "$value": "3px"
- },
- "area-hit": {
- "source": "$carousel-indicator-hit-area-height",
- "$value": "10px"
- }
+ "base": { "source": "$carousel-indicator-height", "$value": "3px" },
+ "area-hit": { "source": "$carousel-indicator-hit-area-height", "$value": "10px" }
}
},
- "caption-width": {
- "source": "$carousel-caption-width",
- "$value": "70%",
- "$type": "percentage"
- }
+ "caption-width": { "source": "$carousel-caption-width", "$value": "70%", "$type": "percentage" }
}
},
"spacing": {
"$type": "dimension",
"carousel": {
- "indicator-spacer": {
- "source": "$carousel-indicator-spacer",
- "$value": "3px"
- }
+ "indicator-spacer": { "source": "$carousel-indicator-spacer", "$value": "3px" }
}
},
"transition": {
"carousel": {
- "base": {
- "source": "$carousel-transition",
- "$value": "transform {transition.carousel.duration} ease-in-out",
- "$type": "transition"
- },
- "duration": {
- "source": "$carousel-transition-duration",
- "$value": ".6s",
- "$type": "duration"
- },
- "indicator": {
- "source": "$carousel-indicator-transition",
- "$value": "opacity .6s ease",
- "$type": "transition"
- },
- "control": {
- "source": "$carousel-control-transition",
- "$value": "opacity .15s ease",
- "$type": "transition"
- }
+ "base": { "source": "$carousel-transition", "$value": "transform {transition.carousel.duration} ease-in-out", "$type": "transition" },
+ "duration": { "source": "$carousel-transition-duration", "$value": ".6s", "$type": "duration" },
+ "indicator": { "source": "$carousel-indicator-transition", "$value": "opacity .6s ease", "$type": "transition" },
+ "control": { "source": "$carousel-control-transition", "$value": "opacity .15s ease", "$type": "transition" }
}
}
}
diff --git a/tokens/src/core/components/Chip.json b/tokens/src/core/components/Chip.json
index d6336153bf..09cac920be 100644
--- a/tokens/src/core/components/Chip.json
+++ b/tokens/src/core/components/Chip.json
@@ -3,63 +3,30 @@
"spacing": {
"chip": {
"margin": {
- "base": {
- "source": "$chip-margin",
- "$value": ".125rem"
- },
- "icon": {
- "source": "$chip-icon-margin",
- "$value": ".25rem"
- }
+ "base": { "source": "$chip-margin", "$value": ".125rem" },
+ "icon": { "source": "$chip-icon-margin", "$value": ".25rem" }
},
"padding": {
- "y": {
- "source": "$chip-padding-y",
- "$value": "1px"
- },
- "x": {
- "source": "$chip-padding-x",
- "$value": ".5rem"
- }
+ "y": { "source": "$chip-padding-y", "$value": "1px" },
+ "x": { "source": "$chip-padding-x", "$value": ".5rem" }
},
"outline": {
"selected-distance": {
- "light": {
- "source": "$chip-light-selected-outline-distance",
- "$value": "3px"
- },
- "dark": {
- "source": "$chip-dark-selected-outline-distance",
- "$value": "3px"
- }
+ "light": { "source": "$chip-light-selected-outline-distance", "$value": "3px" },
+ "dark": { "source": "$chip-dark-selected-outline-distance", "$value": "3px" }
},
"focus-distance": {
- "light": {
- "source": "$chip-light-focus-outline-distance",
- "$value": ".313rem"
- },
- "dark": {
- "source": "$chip-dark-focus-outline-distance",
- "$value": ".313rem"
- }
+ "light": { "source": "$chip-light-focus-outline-distance", "$value": ".313rem" },
+ "dark": { "source": "$chip-dark-focus-outline-distance", "$value": ".313rem" }
},
- "width": {
- "source": "$chip-outline-width",
- "$value": "3px"
- }
+ "width": { "source": "$chip-outline-width", "$value": "3px" }
}
}
},
"size": {
"chip": {
- "border-radius": {
- "source": "$chip-border-radius",
- "$value": ".375rem"
- },
- "icon": {
- "source": "$chip-icon-size",
- "$value": "1.5rem"
- }
+ "border-radius": { "source": "$chip-border-radius", "$value": ".375rem" },
+ "icon": { "source": "$chip-icon-size", "$value": "1.5rem" }
}
}
}
diff --git a/tokens/src/core/components/ChipCarousel.json b/tokens/src/core/components/ChipCarousel.json
index 227f846d51..4769b322c7 100644
--- a/tokens/src/core/components/ChipCarousel.json
+++ b/tokens/src/core/components/ChipCarousel.json
@@ -2,20 +2,11 @@
"$type": "dimension",
"spacing": {
"chip-carousel": {
- "controls-top-offset": {
- "source": "$chip-carousel-controls-top-offset",
- "$value": ".375rem"
- },
+ "controls-top-offset": { "source": "$chip-carousel-controls-top-offset", "$value": ".375rem" },
"container": {
"padding": {
- "x": {
- "source": "$chip-carousel-container-padding-x",
- "$value": ".625rem"
- },
- "y": {
- "source": "$chip-carousel-container-padding-y",
- "$value": ".313rem"
- }
+ "x": { "source": "$chip-carousel-container-padding-x", "$value": ".625rem" },
+ "y": { "source": "$chip-carousel-container-padding-y", "$value": ".313rem" }
}
}
}
diff --git a/tokens/src/core/components/CloseButton.json b/tokens/src/core/components/CloseButton.json
index 17a8b99f60..6308930b30 100644
--- a/tokens/src/core/components/CloseButton.json
+++ b/tokens/src/core/components/CloseButton.json
@@ -2,16 +2,8 @@
"typography": {
"close-button": {
"font": {
- "size": {
- "source": "$close-font-size",
- "$value": "calc({typography.font.size.base} * 1.5)",
- "$type": "dimension"
- },
- "weight": {
- "source": "$close-font-weight",
- "$value": "{typography.font.weight.bold}",
- "$type": "fontWeight"
- }
+ "size": { "source": "$close-font-size", "$value": "calc({typography.font.size.base} * 1.5)", "$type": "dimension" },
+ "weight": { "source": "$close-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
}
}
}
diff --git a/tokens/src/core/components/Code.json b/tokens/src/core/components/Code.json
index d6ba56fb2e..3ba3025295 100644
--- a/tokens/src/core/components/Code.json
+++ b/tokens/src/core/components/Code.json
@@ -1,23 +1,12 @@
{
"typography": {
"code": {
- "font-size": {
- "source": "$code-font-size",
- "$value": "87.5%",
- "$type": "percentage"
- },
+ "font-size": { "source": "$code-font-size", "$value": "87.5%", "$type": "percentage" },
"kbd": {
- "font-size": {
- "source": "$kbd-font-size",
- "$value": "{typography.code.font-size}",
- "$type": "dimension"
- },
+ "font-size": { "source": "$kbd-font-size", "$value": "{typography.code.font-size}", "$type": "dimension" },
"nested": {
"$type": "fontWeight",
- "font-weight": {
- "source": "$nested-kbd-font-weight",
- "$value": "{typography.font.weight.bold}"
- }
+ "font-weight": { "source": "$nested-kbd-font-weight", "$value": "{typography.font.weight.bold}" }
}
}
}
@@ -27,14 +16,8 @@
"code": {
"kbd": {
"padding": {
- "y": {
- "source": "$kbd-padding-y",
- "$value": ".2rem"
- },
- "x": {
- "source": "$kbd-padding-x",
- "$value": ".4rem"
- }
+ "y": { "source": "$kbd-padding-y", "$value": ".2rem" },
+ "x": { "source": "$kbd-padding-x", "$value": ".4rem" }
}
}
}
@@ -44,10 +27,7 @@
"code": {
"pre": {
"scrollable": {
- "max-height": {
- "source": "$pre-scrollable-max-height",
- "$value": "340px"
- }
+ "max-height": { "source": "$pre-scrollable-max-height", "$value": "340px" }
}
}
}
diff --git a/tokens/src/core/components/Collapsible.json b/tokens/src/core/components/Collapsible.json
index 9cd2431ad3..dac86793b5 100644
--- a/tokens/src/core/components/Collapsible.json
+++ b/tokens/src/core/components/Collapsible.json
@@ -5,46 +5,19 @@
"card": {
"spacer": {
"y": {
- "base": {
- "source": "$collapsible-card-spacer-y",
- "$value": ".5rem"
- },
- "lg": {
- "source": "$collapsible-card-spacer-y-lg",
- "$value": "{spacing.card.spacer.y}"
- }
+ "base": { "source": "$collapsible-card-spacer-y", "$value": ".5rem" },
+ "lg": { "source": "$collapsible-card-spacer-y-lg", "$value": "{spacing.card.spacer.y}" }
},
"x": {
- "base": {
- "source": "$collapsible-card-spacer-x",
- "$value": ".5rem"
- },
- "lg": {
- "source": "$collapsible-card-spacer-x-lg",
- "$value": "{spacing.card.spacer.x}"
- }
- },
- "left-body": {
- "source": "$collapsible-card-body-spacer-left",
- "$value": ".75rem"
- },
- "icon": {
- "source": "$collapsible-card-spacer-icon",
- "$value": "2.5rem"
+ "base": { "source": "$collapsible-card-spacer-x", "$value": ".5rem" },
+ "lg": { "source": "$collapsible-card-spacer-x-lg", "$value": "{spacing.card.spacer.x}" }
},
+ "left-body": { "source": "$collapsible-card-body-spacer-left", "$value": ".75rem" },
+ "icon": { "source": "$collapsible-card-spacer-icon", "$value": "2.5rem" },
"basic": {
- "y": {
- "source": "$collapsible-basic-spacer-y",
- "$value": ".5rem"
- },
- "x": {
- "source": "$collapsible-basic-spacer-x",
- "$value": ".5rem"
- },
- "icon": {
- "source": "$collapsible-basic-spacer-icon",
- "$value": ".625rem"
- }
+ "y": { "source": "$collapsible-basic-spacer-y", "$value": ".5rem" },
+ "x": { "source": "$collapsible-basic-spacer-x", "$value": ".5rem" },
+ "icon": { "source": "$collapsible-basic-spacer-icon", "$value": ".625rem" }
}
}
}
diff --git a/tokens/src/core/components/ColorPicker.json b/tokens/src/core/components/ColorPicker.json
index 48e9430916..809d85b9eb 100644
--- a/tokens/src/core/components/ColorPicker.json
+++ b/tokens/src/core/components/ColorPicker.json
@@ -2,14 +2,8 @@
"$type": "dimension",
"size": {
"color-picker": {
- "sm": {
- "source": "$picker-size-sm",
- "$value": "2rem"
- },
- "md": {
- "source": "$picker-size-md",
- "$value": "calc(1.3333em + 1.125rem + 2px)"
- }
+ "sm": { "source": "$picker-size-sm", "$value": "2rem" },
+ "md": { "source": "$picker-size-md", "$value": "calc(1.3333em + 1.125rem + 2px)" }
}
}
}
diff --git a/tokens/src/core/components/Container.json b/tokens/src/core/components/Container.json
index f7548879ed..52424d636f 100644
--- a/tokens/src/core/components/Container.json
+++ b/tokens/src/core/components/Container.json
@@ -3,26 +3,11 @@
"size": {
"container": {
"max-width": {
- "xs": {
- "source": "$max-width-xs",
- "$value": "464px"
- },
- "sm": {
- "source": "$max-width-sm",
- "$value": "708px"
- },
- "md": {
- "source": "$max-width-md",
- "$value": "952px"
- },
- "lg": {
- "source": "$max-width-lg",
- "$value": "1192px"
- },
- "xl": {
- "source": "$max-width-xl",
- "$value": "1440px"
- }
+ "xs": { "source": "$max-width-xs", "$value": "464px" },
+ "sm": { "source": "$max-width-sm", "$value": "708px" },
+ "md": { "source": "$max-width-md", "$value": "952px" },
+ "lg": { "source": "$max-width-lg", "$value": "1192px" },
+ "xl": { "source": "$max-width-xl", "$value": "1440px" }
}
}
}
diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json
index 75959fbe87..b09fddb01d 100644
--- a/tokens/src/core/components/DataTable.json
+++ b/tokens/src/core/components/DataTable.json
@@ -2,27 +2,15 @@
"size": {
"$type": "dimension",
"data-table": {
- "border": {
- "source": "$data-table-border",
- "$value": "2px"
- },
+ "border": { "source": "$data-table-border", "$value": "2px" },
"dropdown": {
"pagination": {
- "max-height": {
- "source": "$data-table-pagination-dropdown-max-height",
- "$value": "60vh"
- },
- "min-width": {
- "source": "$data-table-pagination-dropdown-min-width",
- "$value": "6rem"
- }
+ "max-height": { "source": "$data-table-pagination-dropdown-max-height", "$value": "60vh" },
+ "min-width": { "source": "$data-table-pagination-dropdown-min-width", "$value": "6rem" }
}
},
"layout": {
- "sidebar-width": {
- "source": "$data-table-layout-sidebar-width",
- "$value": "12rem"
- }
+ "sidebar-width": { "source": "$data-table-layout-sidebar-width", "$value": "12rem" }
}
}
},
@@ -30,28 +18,12 @@
"data-table": {
"padding": {
"$type": "dimension",
- "x": {
- "source": "$data-table-padding-x",
- "$value": ".75rem"
- },
- "y": {
- "source": "$data-table-padding-y",
- "$value": ".75rem"
- },
- "small": {
- "source": "$data-table-padding-small",
- "$value": ".5rem"
- },
- "cell": {
- "source": "$data-table-cell-padding",
- "$value": ".5rem .75rem"
- }
+ "x": { "source": "$data-table-padding-x", "$value": ".75rem" },
+ "y": { "source": "$data-table-padding-y", "$value": ".75rem" },
+ "small": { "source": "$data-table-padding-small", "$value": ".5rem" },
+ "cell": { "source": "$data-table-cell-padding", "$value": ".5rem .75rem" }
},
- "footer-position": {
- "source": "$data-table-footer-position",
- "$value": "center",
- "$type": "position"
- }
+ "footer-position": { "source": "$data-table-footer-position", "$value": "center", "$type": "position" }
}
}
}
diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json
index dd18c8069d..1299b3ce0c 100644
--- a/tokens/src/core/components/Dropdown.json
+++ b/tokens/src/core/components/Dropdown.json
@@ -1,36 +1,21 @@
{
"typography": {
"dropdown": {
- "font-size": {
- "source": "$dropdown-font-size",
- "$value": "{typography.font.size.base}",
- "$type": "dimension"
- },
+ "font-size": { "source": "$dropdown-font-size", "$value": "{typography.font.size.base}", "$type": "dimension" },
"item": {
"$type": "textDecoration",
- "text-decoration": {
- "$value": "none"
- }
+ "text-decoration": { "$value": "none" }
}
}
},
"size": {
"$type": "dimension",
"dropdown": {
- "min-width": {
- "source": "$dropdown-min-width",
- "$value": "18rem"
- },
+ "min-width": { "source": "$dropdown-min-width", "$value": "18rem" },
"border": {
- "width": {
- "source": "$dropdown-border-width",
- "$value": "{size.border.width}"
- },
+ "width": { "source": "$dropdown-border-width", "$value": "{size.border.width}" },
"radius": {
- "base": {
- "source": "$dropdown-border-radius",
- "$value": "{size.border.radius.base}"
- },
+ "base": { "source": "$dropdown-border-radius", "$value": "{size.border.radius.base}" },
"inner": {
"source": "$dropdown-inner-border-radius",
"$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})"
@@ -42,57 +27,30 @@
"spacing": {
"$type": "dimension",
"dropdown": {
- "spacer": {
- "source": "$dropdown-spacer",
- "$value": ".125rem"
- },
+ "spacer": { "source": "$dropdown-spacer", "$value": ".125rem" },
"padding": {
"x": {
- "base": {
- "source": "$dropdown-padding-x",
- "$value": "0"
- },
- "item": {
- "source": "$dropdown-item-padding-x",
- "$value": "1rem"
- }
+ "base": { "source": "$dropdown-padding-x", "$value": "0" },
+ "item": { "source": "$dropdown-item-padding-x", "$value": "1rem" }
},
"y": {
- "base": {
- "source": "$dropdown-padding-y",
- "$value": ".5rem"
- },
- "item": {
- "source": "$dropdown-item-padding-y",
- "$value": ".25rem"
- }
+ "base": { "source": "$dropdown-padding-y", "$value": ".5rem" },
+ "item": { "source": "$dropdown-item-padding-y", "$value": ".25rem" }
},
- "header": {
- "source": "$dropdown-header-padding",
- "$value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}"
- }
+ "header": { "source": "$dropdown-header-padding", "$value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}" }
},
"divider": {
- "margin-y": {
- "source": "$dropdown-divider-margin-y",
- "$value": "calc({spacing.spacer.base} / 2)"
- }
+ "margin-y": { "source": "$dropdown-divider-margin-y", "$value": "calc({spacing.spacer.base} / 2)" }
},
"close-container": {
- "top": {
- "source": "$modal-close-container-top",
- "$value": ".625rem"
- }
+ "top": { "source": "$modal-close-container-top", "$value": ".625rem" }
}
}
},
"elevation": {
"$type": "ratio",
"dropdown": {
- "zindex": {
- "source": "$zindex-dropdown",
- "$value": "1000"
- }
+ "zindex": { "source": "$zindex-dropdown", "$value": "1000" }
}
}
}
diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json
index a97a008879..f3927f9aeb 100644
--- a/tokens/src/core/components/Dropzone.json
+++ b/tokens/src/core/components/Dropzone.json
@@ -3,24 +3,15 @@
"typography": {
"dropzone": {
"restriction-msg": {
- "font-size": {
- "source": "$dropzone-restriction-msg-font-size",
- "$value": "{typography.font.size.small.x}"
- }
+ "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.small.x}" }
}
}
},
"spacing": {
"dropzone": {
- "padding": {
- "source": "$dropzone-padding",
- "$value": "1.5rem"
- },
+ "padding": { "source": "$dropzone-padding", "$value": "1.5rem" },
"border": {
- "base": {
- "source": "$dropzone-border-default",
- "$value": "1px"
- }
+ "base": { "source": "$dropzone-border-default", "$value": "1px" }
}
}
}
diff --git a/tokens/src/core/components/Form/other.json b/tokens/src/core/components/Form/other.json
index 415a9ffe4f..aa14828016 100644
--- a/tokens/src/core/components/Form/other.json
+++ b/tokens/src/core/components/Form/other.json
@@ -2,24 +2,12 @@
"other": {
"form": {
"control": {
- "cursor": {
- "source": "$custom-control-cursor",
- "$value": "auto",
- "$type": "cursorStyle"
- },
- "range-track-cursor": {
- "source": "$custom-range-track-cursor",
- "$value": "pointer",
- "$type": "cursorStyle"
- },
+ "cursor": { "source": "$custom-control-cursor", "$value": "auto", "$type": "cursorStyle" },
+ "range-track-cursor": { "source": "$custom-range-track-cursor", "$value": "pointer", "$type": "cursorStyle" },
"custom-file": {
"$type": "text",
- "lang": {
- "$value": "en"
- },
- "content": {
- "$value": "Browse"
- }
+ "lang": { "$value": "en" },
+ "content": { "$value": "Browse" }
}
}
}
diff --git a/tokens/src/core/components/Form/size.json b/tokens/src/core/components/Form/size.json
index f0994467f1..dcf0e043e5 100644
--- a/tokens/src/core/components/Form/size.json
+++ b/tokens/src/core/components/Form/size.json
@@ -30,68 +30,33 @@
"$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))"
}
},
- "border": {
- "source": "$input-height-border",
- "$value": "calc({size.form.input.width.border} * 2)"
- }
+ "border": { "source": "$input-height-border", "$value": "calc({size.form.input.width.border} * 2)" }
},
"width": {
- "hover": {
- "source": "$input-hover-width",
- "$value": "0.063rem"
- },
- "focus": {
- "source": "$input-focus-width",
- "$value": "0.063rem"
- },
- "border": {
- "source": "$input-border-width",
- "$value": "{size.input.btn.border-width}"
- }
+ "hover": { "source": "$input-hover-width", "$value": "0.063rem" },
+ "focus": { "source": "$input-focus-width", "$value": "0.063rem" },
+ "border": { "source": "$input-border-width", "$value": "{size.input.btn.border-width}" }
},
"radius": {
"border": {
- "base": {
- "source": "$input-border-radius",
- "$value": "{size.border.radius.base}"
- },
- "lg": {
- "source": "$input-border-radius-lg",
- "$value": "{size.border.radius.lg}"
- },
- "sm": {
- "source": "$input-border-radius-sm",
- "$value": "{size.border.radius.sm}"
- }
+ "base": { "source": "$input-border-radius", "$value": "{size.border.radius.base}" },
+ "lg": { "source": "$input-border-radius-lg", "$value": "{size.border.radius.lg}" },
+ "sm": { "source": "$input-border-radius-sm", "$value": "{size.border.radius.sm}" }
}
}
},
"control": {
"indicator": {
- "base": {
- "source": "$custom-control-indicator-size",
- "$value": "1.25rem",
- "$type": "dimension"
- },
- "bg": {
- "source": "$custom-control-indicator-bg-size",
- "$value": "100%",
- "$type": "percentage"
- },
+ "base": { "source": "$custom-control-indicator-size", "$value": "1.25rem", "$type": "dimension" },
+ "bg": { "source": "$custom-control-indicator-bg-size", "$value": "100%", "$type": "percentage" },
"border": {
"$type": "dimension",
- "width": {
- "source": "$custom-control-indicator-border-width",
- "$value": "0.125rem"
- }
+ "width": { "source": "$custom-control-indicator-border-width", "$value": "0.125rem" }
}
},
"switch": {
"$type": "dimension",
- "width": {
- "source": "$custom-switch-width",
- "$value": "calc({size.form.control.indicator.base} * 1.75)"
- },
+ "width": { "source": "$custom-switch-width", "$value": "calc({size.form.control.indicator.base} * 1.75)" },
"indicator": {
"base": {
"source": "$custom-switch-indicator-size",
@@ -108,18 +73,9 @@
"select": {
"$type": "dimension",
"height": {
- "base": {
- "source": "$custom-select-height",
- "$value": "{size.form.input.height.base}"
- },
- "lg": {
- "source": "$custom-select-height-lg",
- "$value": "{size.form.input.height.lg}"
- },
- "sm": {
- "source": "$custom-select-height-sm",
- "$value": "{size.form.input.height.sm}"
- }
+ "base": { "source": "$custom-select-height", "$value": "{size.form.input.height.base}" },
+ "lg": { "source": "$custom-select-height-lg", "$value": "{size.form.input.height.lg}" },
+ "sm": { "source": "$custom-select-height-sm", "$value": "{size.form.input.height.sm}" }
},
"feedback": {
"icon": {
@@ -129,175 +85,95 @@
},
"border": {
"width": {
- "base": {
- "source": "$custom-select-border-width",
- "$value": "{size.form.input.width.border}"
- }
+ "base": { "source": "$custom-select-border-width", "$value": "{size.form.input.width.border}" }
},
- "radius": {
- "source": "$custom-select-border-radius",
- "$value": "{size.border.radius.base}"
- }
+ "radius": { "source": "$custom-select-border-radius", "$value": "{size.border.radius.base}" }
}
},
"range": {
"track": {
- "width": {
- "source": "$custom-range-track-width",
- "$value": "100%",
- "$type": "percentage"
- },
- "height": {
- "source": "$custom-range-track-height",
- "$value": ".5rem",
- "$type": "dimension"
- },
+ "width": { "source": "$custom-range-track-width", "$value": "100%", "$type": "percentage" },
+ "height": { "source": "$custom-range-track-height", "$value": ".5rem", "$type": "dimension" },
"border": {
"$type": "dimension",
- "radius": {
- "source": "$custom-range-track-border-radius",
- "$value": "1rem"
- }
+ "radius": { "source": "$custom-range-track-border-radius", "$value": "1rem" }
}
},
"thumb": {
"$type": "dimension",
- "width": {
- "source": "$custom-range-thumb-width",
- "$value": "1rem"
- },
- "height": {
- "source": "$custom-range-thumb-height",
- "$value": "{size.form.control.range.thumb.width}"
- },
+ "width": { "source": "$custom-range-thumb-width", "$value": "1rem" },
+ "height": { "source": "$custom-range-thumb-height", "$value": "{size.form.control.range.thumb.width}" },
"border": {
- "base": {
- "source": "$custom-range-thumb-border",
- "$value": "0"
- },
- "radius": {
- "source": "$custom-range-thumb-border-radius",
- "$value": "1rem"
- }
+ "base": { "source": "$custom-range-thumb-border", "$value": "0" },
+ "radius": { "source": "$custom-range-thumb-border-radius", "$value": "1rem" }
},
"focus": {
- "width": {
- "source": "$custom-range-thumb-focus-box-shadow-width",
- "$value": "{size.form.input.width.focus}"
- }
+ "width": { "source": "$custom-range-thumb-focus-box-shadow-width", "$value": "{size.form.input.width.focus}" }
}
}
},
"file": {
"$type": "dimension",
- "width": {
- "source": "$custom-file-border-width",
- "$value": "{size.form.input.width.border}"
- },
+ "width": { "source": "$custom-file-border-width", "$value": "{size.form.input.width.border}" },
"height": {
- "base": {
- "source": "$custom-file-height",
- "$value": "{size.form.input.height.base}"
- },
- "inner": {
- "source": "$custom-file-height-inner",
- "$value": "{size.form.input.height.inner.base}"
- }
+ "base": { "source": "$custom-file-height", "$value": "{size.form.input.height.base}" },
+ "inner": { "source": "$custom-file-height-inner", "$value": "{size.form.input.height.inner.base}" }
},
"border": {
- "radius": {
- "source": "$custom-file-border-radius",
- "$value": "{size.form.input.radius.border.base}"
- }
+ "radius": { "source": "$custom-file-border-radius", "$value": "{size.form.input.radius.border.base}" }
}
},
"icon": {
"$type": "dimension",
- "width": {
- "source": "$form-control-icon-width",
- "$value": "2rem"
- }
+ "width": { "source": "$form-control-icon-width", "$value": "2rem" }
},
"border": {
"checkbox": {
"$type": "dimension",
"indicator": {
- "radius": {
- "source": "$custom-checkbox-indicator-border-radius",
- "$value": "0"
- }
+ "radius": { "source": "$custom-checkbox-indicator-border-radius", "$value": "0" }
}
},
"radio": {
"$type": "percentage",
"indicator": {
- "radius": {
- "source": "$custom-radio-indicator-border-radius",
- "$value": "50%"
- }
+ "radius": { "source": "$custom-radio-indicator-border-radius", "$value": "50%" }
}
}
}
},
"grid": {
"$type": "dimension",
- "gutter-width": {
- "source": "$form-grid-gutter-width",
- "$value": "0.625rem"
- }
+ "gutter-width": { "source": "$form-grid-gutter-width", "$value": "0.625rem" }
},
"autosuggest": {
"$type": "dimension",
"icon": {
- "width": {
- "source": "$form-autosuggest-icon-width",
- "$value": "2.4rem"
- },
- "height": {
- "source": "$form-autosuggest-icon-height",
- "$value": "{size.form.autosuggest.icon.width}"
- }
+ "width": { "source": "$form-autosuggest-icon-width", "$value": "2.4rem" },
+ "height": { "source": "$form-autosuggest-icon-height", "$value": "{size.form.autosuggest.icon.width}" }
},
"spinner": {
- "width": {
- "source": "$form-autosuggest-spinner-width",
- "$value": "1.25rem"
- },
- "height": {
- "source": "$form-autosuggest-spinner-height",
- "$value": "{size.form.autosuggest.spinner.width}"
- }
+ "width": { "source": "$form-autosuggest-spinner-width", "$value": "1.25rem" },
+ "height": { "source": "$form-autosuggest-spinner-height", "$value": "{size.form.autosuggest.spinner.width}" }
},
"border": {
- "width": {
- "source": "$form-autosuggest-border-width",
- "$value": ".125rem"
- }
+ "width": { "source": "$form-autosuggest-border-width", "$value": ".125rem" }
}
},
"border": {
"$type": "dimension",
"radius": {
"check": {
- "focus": {
- "source": "$form-check-focus-border-radius",
- "$value": ".0625rem"
- }
+ "focus": { "source": "$form-check-focus-border-radius", "$value": ".0625rem" }
},
- "width": {
- "source": "$form-check-border-width",
- "$value": ".125rem"
- }
+ "width": { "source": "$form-check-border-width", "$value": ".125rem" }
}
},
"feedback": {
"$type": "dimension",
"tooltip": {
"border": {
- "radius": {
- "source": "$form-feedback-tooltip-border-radius",
- "$value": "{size.border.radius.base}"
- }
+ "radius": { "source": "$form-feedback-tooltip-border-radius", "$value": "{size.border.radius.base}" }
}
}
}
diff --git a/tokens/src/core/components/Form/spacing.json b/tokens/src/core/components/Form/spacing.json
index 087b9b9216..b69b650bff 100644
--- a/tokens/src/core/components/Form/spacing.json
+++ b/tokens/src/core/components/Form/spacing.json
@@ -5,136 +5,67 @@
"input": {
"padding": {
"y": {
- "base": {
- "source": "$input-padding-y",
- "$value": "{spacing.input.btn.padding.y}"
- },
- "sm": {
- "source": "$input-padding-y-sm",
- "$value": "{spacing.input.btn.padding.sm.y}"
- },
- "lg": {
- "source": "$input-padding-y-lg",
- "$value": "{spacing.input.btn.padding.lg.y}"
- }
+ "base": { "source": "$input-padding-y", "$value": "{spacing.input.btn.padding.y}" },
+ "sm": { "source": "$input-padding-y-sm", "$value": "{spacing.input.btn.padding.sm.y}" },
+ "lg": { "source": "$input-padding-y-lg", "$value": "{spacing.input.btn.padding.lg.y}" }
},
"x": {
- "base": {
- "source": "$input-padding-x",
- "$value": "{spacing.input.btn.padding.x}"
- },
- "sm": {
- "source": "$input-padding-x-sm",
- "$value": "{spacing.input.btn.padding.sm.x}"
- },
- "lg": {
- "source": "$input-padding-x-lg",
- "$value": "{spacing.input.btn.padding.lg.x}"
- }
+ "base": { "source": "$input-padding-x", "$value": "{spacing.input.btn.padding.x}" },
+ "sm": { "source": "$input-padding-x-sm", "$value": "{spacing.input.btn.padding.sm.x}" },
+ "lg": { "source": "$input-padding-x-lg", "$value": "{spacing.input.btn.padding.lg.x}" }
}
},
"check": {
- "gutter": {
- "source": "$form-check-input-gutter",
- "$value": "1.25rem"
- },
+ "gutter": { "source": "$form-check-input-gutter", "$value": "1.25rem" },
"margin": {
"x": {
- "base": {
- "source": "$form-check-input-margin-x",
- "$value": ".25rem"
- },
- "inline": {
- "source": "$form-check-inline-input-margin-x",
- "$value": ".3125rem"
- }
+ "base": { "source": "$form-check-input-margin-x", "$value": ".25rem" },
+ "inline": { "source": "$form-check-inline-input-margin-x", "$value": ".3125rem" }
},
- "y": {
- "source": "$form-check-input-margin-y",
- "$value": ".3rem"
- }
+ "y": { "source": "$form-check-input-margin-y", "$value": ".3rem" }
}
}
},
"text": {
"margin": {
- "top": {
- "source": "$form-text-margin-top",
- "$value": ".25rem"
- }
+ "top": { "source": "$form-text-margin-top", "$value": ".25rem" }
}
},
"check": {
"inline": {
"margin": {
- "x": {
- "source": "$form-check-inline-margin-x",
- "$value": ".75rem"
- }
+ "x": { "source": "$form-check-inline-margin-x", "$value": ".75rem" }
}
},
"position": {
- "axis": {
- "source": "$form-check-position-axis",
- "$value": ".375rem"
- }
+ "axis": { "source": "$form-check-position-axis", "$value": ".375rem" }
}
},
"group": {
"margin": {
- "bottom": {
- "source": "$form-group-margin-bottom",
- "$value": "1rem"
- }
+ "bottom": { "source": "$form-group-margin-bottom", "$value": "1rem" }
}
},
"control": {
- "gutter": {
- "source": "$custom-control-gutter",
- "$value": ".5rem"
- },
+ "gutter": { "source": "$custom-control-gutter", "$value": ".5rem" },
"spacer": {
- "x": {
- "source": "$custom-control-spacer-x",
- "$value": "1rem"
- }
+ "x": { "source": "$custom-control-spacer-x", "$value": "1rem" }
},
"select": {
"padding": {
"y": {
- "base": {
- "source": "$custom-select-padding-y",
- "$value": "{spacing.form.input.padding.y.base}"
- },
- "sm": {
- "source": "$custom-select-padding-y-sm",
- "$value": "{spacing.form.input.padding.y.sm}"
- },
- "lg": {
- "source": "$custom-select-padding-y-lg",
- "$value": "{spacing.form.input.padding.y.lg}"
- }
+ "base": { "source": "$custom-select-padding-y", "$value": "{spacing.form.input.padding.y.base}" },
+ "sm": { "source": "$custom-select-padding-y-sm", "$value": "{spacing.form.input.padding.y.sm}" },
+ "lg": { "source": "$custom-select-padding-y-lg", "$value": "{spacing.form.input.padding.y.lg}" }
},
"x": {
- "base": {
- "source": "$custom-select-padding-x",
- "$value": "{spacing.form.input.padding.x.base}"
- },
- "sm": {
- "source": "$custom-select-padding-x-sm",
- "$value": "{spacing.form.input.padding.x.sm}"
- },
- "lg": {
- "source": "$custom-select-padding-x-lg",
- "$value": "{spacing.form.input.padding.x.lg}"
- }
+ "base": { "source": "$custom-select-padding-x", "$value": "{spacing.form.input.padding.x.base}" },
+ "sm": { "source": "$custom-select-padding-x-sm", "$value": "{spacing.form.input.padding.x.sm}" },
+ "lg": { "source": "$custom-select-padding-x-lg", "$value": "{spacing.form.input.padding.x.lg}" }
}
},
"indicator": {
- "padding": {
- "source": "$custom-select-indicator-padding",
- "$value": "1rem"
- }
+ "padding": { "source": "$custom-select-indicator-padding", "$value": "1rem" }
},
"feedback": {
"icon": {
@@ -150,41 +81,23 @@
}
},
"margin": {
- "top": {
- "source": "$form-feedback-margin-top",
- "$value": "{spacing.form.text.margin.top}"
- }
+ "top": { "source": "$form-feedback-margin-top", "$value": "{spacing.form.text.margin.top}" }
},
"tooltip": {
"padding": {
- "y": {
- "source": "$form-feedback-tooltip-padding-y",
- "$value": ".25rem"
- },
- "x": {
- "source": "$form-feedback-tooltip-padding-x",
- "$value": ".5rem"
- }
+ "y": { "source": "$form-feedback-tooltip-padding-y", "$value": ".25rem" },
+ "x": { "source": "$form-feedback-tooltip-padding-x", "$value": ".5rem" }
}
}
},
"icon": {
- "padding": {
- "source": "$select-icon-padding",
- "$value": ".5625rem"
- }
+ "padding": { "source": "$select-icon-padding", "$value": ".5625rem" }
}
},
"file": {
"padding": {
- "y": {
- "source": "$custom-file-padding-y",
- "$value": "{spacing.form.input.padding.y.base}"
- },
- "x": {
- "source": "$custom-file-padding-x",
- "$value": "{spacing.form.input.padding.x.base}"
- }
+ "y": { "source": "$custom-file-padding-y", "$value": "{spacing.form.input.padding.y.base}" },
+ "x": { "source": "$custom-file-padding-x", "$value": "{spacing.form.input.padding.x.base}" }
}
}
}
diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json
index e61e2723ee..da1a0e8e6a 100644
--- a/tokens/src/core/components/Form/typography.json
+++ b/tokens/src/core/components/Form/typography.json
@@ -3,122 +3,54 @@
"form": {
"input": {
"font": {
- "family": {
- "source": "$input-font-family",
- "$value": "{typography.input.btn.font.family}",
- "$type": "fontFamily"
- },
+ "family": { "source": "$input-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" },
"size": {
"$type": "dimension",
- "base": {
- "source": "$input-font-size",
- "$value": "{typography.input.btn.font.size.base}"
- },
- "sm": {
- "source": "$input-font-size-sm",
- "$value": "{typography.input.btn.font.size.sm}"
- },
- "lg": {
- "source": "$input-font-size-lg",
- "$value": "{typography.input.btn.font.size.lg}"
- }
+ "base": { "source": "$input-font-size", "$value": "{typography.input.btn.font.size.base}" },
+ "sm": { "source": "$input-font-size-sm", "$value": "{typography.input.btn.font.size.sm}" },
+ "lg": { "source": "$input-font-size-lg", "$value": "{typography.input.btn.font.size.lg}" }
},
- "weight": {
- "source": "$input-font-weight",
- "$value": "{typography.font.weight.base}",
- "$type": "fontWeight"
- }
+ "weight": { "source": "$input-font-weight", "$value": "{typography.font.weight.base}", "$type": "fontWeight" }
},
"line-height": {
"$type": "dimension",
- "base": {
- "source": "$input-line-height",
- "$value": "{typography.input.btn.line-height.base}"
- },
- "sm": {
- "source": "$input-line-height-sm",
- "$value": "{typography.input.btn.line-height.sm}"
- },
- "lg": {
- "source": "$input-line-height-lg",
- "$value": "{typography.input.btn.line-height.lg}"
- }
+ "base": { "source": "$input-line-height", "$value": "{typography.input.btn.line-height.base}" },
+ "sm": { "source": "$input-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" },
+ "lg": { "source": "$input-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" }
}
},
"control": {
"select": {
"font": {
- "family": {
- "source": "$custom-select-font-family",
- "$value": "{typography.form.input.font.family}",
- "$type": "fontFamily"
- },
+ "family": { "source": "$custom-select-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" },
"size": {
"$type": "dimension",
- "base": {
- "source": "$custom-select-font-size",
- "$value": "{typography.form.input.font.size.base}"
- },
- "sm": {
- "source": "$custom-select-font-size-sm",
- "$value": "{typography.form.input.font.size.sm}"
- },
- "lg": {
- "source": "$custom-select-font-size-lg",
- "$value": "{typography.form.input.font.size.lg}"
- }
+ "base": { "source": "$custom-select-font-size", "$value": "{typography.form.input.font.size.base}" },
+ "sm": { "source": "$custom-select-font-size-sm", "$value": "{typography.form.input.font.size.sm}" },
+ "lg": { "source": "$custom-select-font-size-lg", "$value": "{typography.form.input.font.size.lg}" }
},
- "weight": {
- "source": "$custom-select-font-weight",
- "$value": "{typography.form.input.font.weight}",
- "$type": "fontWeight"
- }
+ "weight": { "source": "$custom-select-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" }
},
- "line-height": {
- "source": "$custom-select-line-height",
- "$value": "{typography.form.input.line-height.base}",
- "$type": "dimension"
- }
+ "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" }
},
"file": {
- "line-height": {
- "source": "$custom-file-line-height",
- "$value": "{typography.form.input.line-height.base}",
- "$type": "dimension"
- },
+ "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" },
"font": {
- "family": {
- "source": "$custom-file-font-family",
- "$value": "{typography.form.input.font.family}",
- "$type": "fontFamily"
- },
- "weight": {
- "source": "$custom-file-font-weight",
- "$value": "{typography.form.input.font.weight}",
- "$type": "fontWeight"
- }
+ "family": { "source": "$custom-file-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" },
+ "weight": { "source": "$custom-file-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" }
}
}
},
"feedback": {
"$type": "dimension",
"font": {
- "size": {
- "source": "$form-feedback-font-size",
- "$value": "{typography.font.size.small.base}"
- }
+ "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.small.base}" }
},
"tooltip": {
"font": {
- "size": {
- "source": "$form-feedback-tooltip-font-size",
- "$value": "{typography.font.size.sm}"
- }
+ "size": { "source": "$form-feedback-tooltip-font-size", "$value": "{typography.font.size.sm}" }
},
- "line-height": {
- "source": "$form-feedback-tooltip-line-height",
- "$value": "{typography.line-height.base}"
- }
+ "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}" }
}
}
}
diff --git a/tokens/src/core/components/Icon.json b/tokens/src/core/components/Icon.json
index 388673c966..8d03d79d60 100644
--- a/tokens/src/core/components/Icon.json
+++ b/tokens/src/core/components/Icon.json
@@ -2,26 +2,11 @@
"$type": "dimension",
"size": {
"icon": {
- "inline": {
- "source": "$icon-inline",
- "$value": ".8em"
- },
- "xs": {
- "source": "$icon-xs",
- "$value": "1rem"
- },
- "sm": {
- "source": "$icon-sm",
- "$value": "1.25rem"
- },
- "md": {
- "source": "$icon-md",
- "$value": "1.5rem"
- },
- "lg": {
- "source": "$icon-lg",
- "$value": "1.75rem"
- }
+ "inline": { "source": "$icon-inline", "$value": ".8em" },
+ "xs": { "source": "$icon-xs", "$value": "1rem" },
+ "sm": { "source": "$icon-sm", "$value": "1.25rem" },
+ "md": { "source": "$icon-md", "$value": "1.5rem" },
+ "lg": { "source": "$icon-lg", "$value": "1.75rem" }
}
}
}
diff --git a/tokens/src/core/components/IconButton.json b/tokens/src/core/components/IconButton.json
index 6d723d9c55..7ef43c7fe5 100644
--- a/tokens/src/core/components/IconButton.json
+++ b/tokens/src/core/components/IconButton.json
@@ -3,18 +3,9 @@
"size": {
"icon-button": {
"diameter": {
- "md": {
- "source": "$btn-icon-diameter-md",
- "$value": "2.75rem"
- },
- "sm": {
- "source": "$btn-icon-diameter-sm",
- "$value": "2.25rem"
- },
- "inline": {
- "source": "$btn-icon-diameter-inline",
- "$value": "calc({typography.line-height.base} * 1em + .1em)"
- }
+ "md": { "source": "$btn-icon-diameter-md", "$value": "2.75rem" },
+ "sm": { "source": "$btn-icon-diameter-sm", "$value": "2.25rem" },
+ "inline": { "source": "$btn-icon-diameter-inline", "$value": "calc({typography.line-height.base} * 1em + .1em)" }
}
}
}
diff --git a/tokens/src/core/components/Image.json b/tokens/src/core/components/Image.json
index aa2a189e00..0e62fd3bc8 100644
--- a/tokens/src/core/components/Image.json
+++ b/tokens/src/core/components/Image.json
@@ -3,10 +3,7 @@
"$type": "percentage",
"image": {
"figure-caption": {
- "font-size": {
- "source": "$figure-caption-font-size",
- "$value": "90%"
- }
+ "font-size": { "source": "$figure-caption-font-size", "$value": "90%" }
}
}
},
@@ -15,14 +12,8 @@
"image": {
"thumbnail": {
"border": {
- "width": {
- "source": "$thumbnail-border-width",
- "$value": "{size.border.width}"
- },
- "radius": {
- "source": "$thumbnail-border-radius",
- "$value": "{size.border.radius.base}"
- }
+ "width": { "source": "$thumbnail-border-width", "$value": "{size.border.width}" },
+ "radius": { "source": "$thumbnail-border-radius", "$value": "{size.border.radius.base}" }
}
}
}
@@ -31,10 +22,7 @@
"$type": "dimension",
"image": {
"thumbnail": {
- "padding": {
- "source": "$thumbnail-padding",
- "$value": ".25rem"
- }
+ "padding": { "source": "$thumbnail-padding", "$value": ".25rem" }
}
}
}
diff --git a/tokens/src/core/components/Menu.json b/tokens/src/core/components/Menu.json
index 49cf09727c..a9ed30dc57 100644
--- a/tokens/src/core/components/Menu.json
+++ b/tokens/src/core/components/Menu.json
@@ -4,25 +4,13 @@
"menu": {
"item": {
"padding": {
- "x": {
- "source": "$menu-item-padding-x",
- "$value": "{spacing.btn.padding.x.base}"
- },
- "y": {
- "source": "$menu-item-padding-y",
- "$value": "{spacing.btn.padding.y.base}"
- }
+ "x": { "source": "$menu-item-padding-x", "$value": "{spacing.btn.padding.x.base}" },
+ "y": { "source": "$menu-item-padding-y", "$value": "{spacing.btn.padding.y.base}" }
},
"icon": {
"margin": {
- "left": {
- "source": "$menu-item-icon-margin-left",
- "$value": ".25em"
- },
- "right": {
- "source": "$menu-item-icon-margin-right",
- "$value": "{spacing.menu.item.icon.margin.left}"
- }
+ "left": { "source": "$menu-item-icon-margin-left", "$value": ".25em" },
+ "right": { "source": "$menu-item-icon-margin-right", "$value": "{spacing.menu.item.icon.margin.left}" }
}
}
}
@@ -33,16 +21,8 @@
"select": {
"btn-link": {
"text-decoration": {
- "line": {
- "source": "$menu-select-btn-link-text-decoration-line",
- "$value": "underline",
- "$type": "textDecoration"
- },
- "thickness": {
- "source": "$menu-select-btn-link-text-decoration-thickness",
- "$value": ".125rem",
- "$type": "dimension"
- }
+ "line": { "source": "$menu-select-btn-link-text-decoration-line", "$value": "underline", "$type": "textDecoration" },
+ "thickness": { "source": "$menu-select-btn-link-text-decoration-thickness", "$value": ".125rem", "$type": "dimension" }
}
}
}
@@ -52,35 +32,17 @@
"$type": "dimension",
"menu": {
"base": {
- "border-radius": {
- "source": "$menu-border-radius",
- "$value": ".25em"
- },
- "max-height": {
- "source": "$menu-max-height",
- "$value": "16.813rem"
- }
+ "border-radius": { "source": "$menu-border-radius", "$value": ".25em" },
+ "max-height": { "source": "$menu-max-height", "$value": "16.813rem" }
},
"item": {
- "height": {
- "source": "$menu-item-height",
- "$value": "3rem"
- },
+ "height": { "source": "$menu-item-height", "$value": "3rem" },
"width": {
- "base": {
- "source": "$menu-item-width",
- "$value": "19rem"
- },
- "xs": {
- "source": "$menu-item-width-xs",
- "$value": "13.438rem"
- }
+ "base": { "source": "$menu-item-width", "$value": "19rem" },
+ "xs": { "source": "$menu-item-width-xs", "$value": "13.438rem" }
},
"border": {
- "width": {
- "source": "$menu-item-border-width",
- "$value": "{size.btn.border.width}"
- }
+ "width": { "source": "$menu-item-border-width", "$value": "{size.btn.border.width}" }
}
}
}
diff --git a/tokens/src/core/components/Modal.json b/tokens/src/core/components/Modal.json
index fda53a1221..6acdb2d145 100644
--- a/tokens/src/core/components/Modal.json
+++ b/tokens/src/core/components/Modal.json
@@ -2,44 +2,20 @@
"elevation": {
"$type": "ratio",
"modal": {
- "backdrop-zindex": {
- "source": "$zindex-modal-backdrop",
- "$value": "1040"
- },
- "zindex": {
- "source": "$zindex-modal",
- "$value": "1050"
- }
+ "backdrop-zindex": { "source": "$zindex-modal-backdrop", "$value": "1040" },
+ "zindex": { "source": "$zindex-modal", "$value": "1050" }
}
},
"size": {
"$type": "dimension",
"modal": {
- "xl": {
- "source": "$modal-xl",
- "$value": "1140px"
- },
- "lg": {
- "source": "$modal-lg",
- "$value": "800px"
- },
- "md": {
- "source": "$modal-md",
- "$value": "500px"
- },
- "sm": {
- "source": "$modal-sm",
- "$value": "400px"
- },
+ "xl": { "source": "$modal-xl", "$value": "1140px" },
+ "lg": { "source": "$modal-lg", "$value": "800px" },
+ "md": { "source": "$modal-md", "$value": "500px" },
+ "sm": { "source": "$modal-sm", "$value": "400px" },
"content-border": {
- "width": {
- "source": "$modal-content-border-width",
- "$value": "0px"
- },
- "radius": {
- "source": "$modal-content-border-radius",
- "$value": "{size.border.radius.lg}"
- }
+ "width": { "source": "$modal-content-border-width", "$value": "0px" },
+ "radius": { "source": "$modal-content-border-radius", "$value": "{size.border.radius.lg}" }
}
}
},
@@ -47,39 +23,18 @@
"$type": "dimension",
"modal": {
"inner-padding": {
- "base": {
- "source": "$modal-inner-padding",
- "$value": "1.5rem"
- },
- "bottom": {
- "source": "$modal-inner-padding-bottom",
- "$value": ".7rem"
- }
+ "base": { "source": "$modal-inner-padding", "$value": "1.5rem" },
+ "bottom": { "source": "$modal-inner-padding-bottom", "$value": ".7rem" }
},
"footer-padding": {
- "base": {
- "source": "$modal-footer-padding",
- "$value": "{spacing.modal.footer-padding.y} 1.5rem"
- },
- "y": {
- "source": "$modal-footer-padding-y",
- "$value": "1rem"
- }
+ "base": { "source": "$modal-footer-padding", "$value": "{spacing.modal.footer-padding.y} 1.5rem" },
+ "y": { "source": "$modal-footer-padding-y", "$value": "1rem" }
},
"header-padding": {
- "base": {
- "source": "$modal-header-padding",
- "$value": "{spacing.modal.header-padding.y} 1.5rem"
- },
- "y": {
- "source": "$modal-header-padding-y",
- "$value": "1rem"
- }
+ "base": { "source": "$modal-header-padding", "$value": "{spacing.modal.header-padding.y} 1.5rem" },
+ "y": { "source": "$modal-header-padding-y", "$value": "1rem" }
},
- "dialog-margin": {
- "source": "$modal-dialog-margin",
- "$value": "1.5rem"
- }
+ "dialog-margin": { "source": "$modal-dialog-margin", "$value": "1.5rem" }
}
}
}
diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json
index 72b95837e2..6daea697dc 100644
--- a/tokens/src/core/components/Nav.json
+++ b/tokens/src/core/components/Nav.json
@@ -2,15 +2,8 @@
"typography": {
"nav": {
"link": {
- "font-weight": {
- "source": "$nav-link-font-weight",
- "$value": "500",
- "$type": "fontWeight"
- },
- "text-decoration": {
- "$value": "none",
- "$type": "textDecoration"
- }
+ "font-weight": { "source": "$nav-link-font-weight", "$value": "500", "$type": "fontWeight" },
+ "text-decoration": { "$value": "none", "$type": "textDecoration" }
}
}
},
@@ -18,47 +11,26 @@
"$type": "dimension",
"nav": {
"pills": {
- "border-radius": {
- "source": "$nav-pills-border-radius",
- "$value": "{size.border.radius.base}"
- },
+ "border-radius": { "source": "$nav-pills-border-radius", "$value": "{size.border.radius.base}" },
"link": {
- "border-width": {
- "source": "$nav-pills-link-border-width",
- "$value": "1px"
- }
+ "border-width": { "source": "$nav-pills-link-border-width", "$value": "1px" }
},
"inverse-link": {
- "border-width": {
- "source": "$nav-inverse-pills-link-border-width",
- "$value": "{size.nav.pills.link.border-width}"
- }
+ "border-width": { "source": "$nav-inverse-pills-link-border-width", "$value": "{size.nav.pills.link.border-width}" }
}
},
"tabs": {
"link": {
"border-bottom": {
- "width": {
- "source": "$nav-tabs-link-border-bottom-width",
- "$value": ".188rem"
- }
+ "width": { "source": "$nav-tabs-link-border-bottom-width", "$value": ".188rem" }
}
},
"inverse-link": {
- "active-border-bottom-width": {
- "source": "$nav-inverse-tabs-link-active-border-bottom-width",
- "$value": "{size.nav.tabs.link.border-bottom.width}"
- }
+ "active-border-bottom-width": { "source": "$nav-inverse-tabs-link-active-border-bottom-width", "$value": "{size.nav.tabs.link.border-bottom.width}" }
},
"border": {
- "width": {
- "source": "$nav-tabs-border-width",
- "$value": "2px"
- },
- "radius": {
- "source": "$nav-tabs-border-radius",
- "$value": "0"
- }
+ "width": { "source": "$nav-tabs-border-width", "$value": "2px" },
+ "radius": { "source": "$nav-tabs-border-radius", "$value": "0" }
}
}
}
@@ -68,19 +40,10 @@
"nav": {
"link": {
"padding": {
- "y": {
- "source": "$nav-link-padding-y",
- "$value": ".5rem"
- },
- "x": {
- "source": "$nav-link-padding-x",
- "$value": "1rem"
- }
+ "y": { "source": "$nav-link-padding-y", "$value": ".5rem" },
+ "x": { "source": "$nav-link-padding-x", "$value": "1rem" }
},
- "distance-to-border": {
- "source": "$nav-tabs-link-distance-to-border",
- "$value": "4px"
- }
+ "distance-to-border": { "source": "$nav-tabs-link-distance-to-border", "$value": "4px" }
}
}
}
diff --git a/tokens/src/core/components/Navbar.json b/tokens/src/core/components/Navbar.json
index f865691dc5..575bbafff0 100644
--- a/tokens/src/core/components/Navbar.json
+++ b/tokens/src/core/components/Navbar.json
@@ -3,39 +3,21 @@
"spacing": {
"navbar": {
"padding": {
- "y": {
- "source": "$navbar-padding-y",
- "$value": "calc({spacing.spacer.base} / 2)"
- },
+ "y": { "source": "$navbar-padding-y", "$value": "calc({spacing.spacer.base} / 2)" },
"x": {
- "base": {
- "source": "$navbar-padding-x",
- "$value": "{spacing.spacer.base}"
- },
- "nav-link": {
- "source": "$navbar-nav-link-padding-x",
- "$value": ".5rem"
- }
+ "base": { "source": "$navbar-padding-x", "$value": "{spacing.spacer.base}" },
+ "nav-link": { "source": "$navbar-nav-link-padding-x", "$value": ".5rem" }
}
},
"brand": {
"padding": {
- "y": {
- "source": "$navbar-brand-padding-y",
- "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)"
- }
+ "y": { "source": "$navbar-brand-padding-y", "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)" }
}
},
"toggler": {
"padding": {
- "y": {
- "source": "$navbar-toggler-padding-y",
- "$value": ".25rem"
- },
- "x": {
- "source": "$navbar-toggler-padding-x",
- "$value": ".75rem"
- }
+ "y": { "source": "$navbar-toggler-padding-y", "$value": ".25rem" },
+ "x": { "source": "$navbar-toggler-padding-x", "$value": ".75rem" }
}
}
}
@@ -43,22 +25,13 @@
"typography": {
"navbar": {
"brand": {
- "font-size": {
- "source": "$navbar-brand-font-size",
- "$value": "{typography.font.size.lg}"
- }
+ "font-size": { "source": "$navbar-brand-font-size", "$value": "{typography.font.size.lg}" }
},
"nav-link": {
- "height": {
- "source": "$nav-link-height",
- "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)"
- }
+ "height": { "source": "$nav-link-height", "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)" }
},
"toggler": {
- "font-size": {
- "source": "$navbar-toggler-font-size",
- "$value": "{typography.font.size.lg}"
- }
+ "font-size": { "source": "$navbar-toggler-font-size", "$value": "{typography.font.size.lg}" }
}
}
},
@@ -66,23 +39,14 @@
"navbar": {
"nav": {
"scroll": {
- "max-height": {
- "source": "$navbar-nav-scroll-max-height",
- "$value": "75vh"
- }
+ "max-height": { "source": "$navbar-nav-scroll-max-height", "$value": "75vh" }
}
},
"brand": {
- "height": {
- "source": "$navbar-brand-height",
- "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})"
- }
+ "height": { "source": "$navbar-brand-height", "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})" }
},
"toggler": {
- "border-radius": {
- "source": "$navbar-toggler-border-radius",
- "$value": "{size.btn.border.radius.base}"
- }
+ "border-radius": { "source": "$navbar-toggler-border-radius", "$value": "{size.btn.border.radius.base}" }
}
}
}
diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json
index 0f5402f498..2d28cec0c5 100644
--- a/tokens/src/core/components/Pagination.json
+++ b/tokens/src/core/components/Pagination.json
@@ -3,47 +3,23 @@
"typography": {
"pagination": {
"font-size": {
- "sm": {
- "source": "$pagination-font-size-sm",
- "$value": ".875rem"
- }
+ "sm": { "source": "$pagination-font-size-sm", "$value": ".875rem" }
},
- "line-height": {
- "source": "$pagination-line-height",
- "$value": "1.5rem"
- }
+ "line-height": { "source": "$pagination-line-height", "$value": "1.5rem" }
}
},
"spacing": {
"pagination": {
"padding": {
"y": {
- "base": {
- "source": "$pagination-padding-y",
- "$value": ".625rem"
- },
- "sm": {
- "source": "$pagination-padding-y-sm",
- "$value": ".8rem"
- },
- "lg": {
- "source": "$pagination-padding-y-lg",
- "$value": ".75rem"
- }
+ "base": { "source": "$pagination-padding-y", "$value": ".625rem" },
+ "sm": { "source": "$pagination-padding-y-sm", "$value": ".8rem" },
+ "lg": { "source": "$pagination-padding-y-lg", "$value": ".75rem" }
},
"x": {
- "base": {
- "source": "$pagination-padding-x",
- "$value": "1rem"
- },
- "sm": {
- "source": "$pagination-padding-x-sm",
- "$value": ".6rem"
- },
- "lg": {
- "source": "$pagination-padding-x-lg",
- "$value": "1.5rem"
- }
+ "base": { "source": "$pagination-padding-x", "$value": "1rem" },
+ "sm": { "source": "$pagination-padding-x-sm", "$value": ".6rem" },
+ "lg": { "source": "$pagination-padding-x-lg", "$value": "1.5rem" }
}
}
}
@@ -51,72 +27,36 @@
"size": {
"pagination": {
"icon": {
- "width": {
- "source": "$pagination-icon-width",
- "$value": "2.25rem"
- },
- "height": {
- "source": "$pagination-icon-height",
- "$value": "2.25rem"
- }
+ "width": { "source": "$pagination-icon-width", "$value": "2.25rem" },
+ "height": { "source": "$pagination-icon-height", "$value": "2.25rem" }
},
"secondary": {
"height": {
- "base": {
- "source": "$pagination-secondary-height",
- "$value": "2.75rem"
- },
- "sm": {
- "source": "$pagination-secondary-height-sm",
- "$value": "2.25rem"
- }
+ "base": { "source": "$pagination-secondary-height", "$value": "2.75rem" },
+ "sm": { "source": "$pagination-secondary-height-sm", "$value": "2.25rem" }
}
},
"border": {
- "width": {
- "source": "$pagination-border-width",
- "$value": "{size.border.width}"
- },
+ "width": { "source": "$pagination-border-width", "$value": "{size.border.width}" },
"radius": {
- "sm": {
- "source": "$pagination-border-radius-sm",
- "$value": "{size.border.radius.sm}"
- },
- "lg": {
- "source": "$pagination-border-radius-lg",
- "$value": "{size.border.radius.lg}"
- }
+ "sm": { "source": "$pagination-border-radius-sm", "$value": "{size.border.radius.sm}" },
+ "lg": { "source": "$pagination-border-radius-lg", "$value": "{size.border.radius.lg}" }
}
},
"reduced": {
"dropdown": {
- "max-height": {
- "source": "$pagination-reduced-dropdown-max-height",
- "$value": "60vh"
- },
- "min-width": {
- "source": "$pagination-reduced-dropdown-min-width",
- "$value": "6rem"
- }
+ "max-height": { "source": "$pagination-reduced-dropdown-max-height", "$value": "60vh" },
+ "min-width": { "source": "$pagination-reduced-dropdown-min-width", "$value": "6rem" }
}
},
"toggle": {
"border": {
- "base": {
- "source": "$pagination-toggle-border",
- "$value": ".3125rem"
- },
- "sm": {
- "source": "$pagination-toggle-border-sm",
- "$value": ".25rem"
- }
+ "base": { "source": "$pagination-toggle-border", "$value": ".3125rem" },
+ "sm": { "source": "$pagination-toggle-border-sm", "$value": ".25rem" }
}
},
"focus": {
- "outline": {
- "source": "$pagination-focus-outline",
- "$value": "0"
- }
+ "outline": { "source": "$pagination-focus-outline", "$value": "0" }
}
}
}
diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json
index 54aba2468a..de243f5e09 100644
--- a/tokens/src/core/components/Popover.json
+++ b/tokens/src/core/components/Popover.json
@@ -2,58 +2,31 @@
"typography": {
"$type": "dimension",
"popover": {
- "font-size": {
- "source": "$popover-font-size",
- "$value": "{typography.font.size.sm}"
- }
+ "font-size": { "source": "$popover-font-size", "$value": "{typography.font.size.sm}" }
}
},
"size": {
"$type": "dimension",
"popover": {
- "max-width": {
- "source": "$popover-max-width",
- "$value": "480px"
- },
+ "max-width": { "source": "$popover-max-width", "$value": "480px" },
"border": {
- "width": {
- "source": "$popover-border-width",
- "$value": "{size.border.width}"
- },
- "radius": {
- "source": "$popover-border-radius",
- "$value": "{size.border.radius.sm}"
- }
+ "width": { "source": "$popover-border-width", "$value": "{size.border.width}" },
+ "radius": { "source": "$popover-border-radius", "$value": "{size.border.radius.sm}" }
},
"icon": {
- "height": {
- "source": "$popover-icon-height",
- "$value": "1rem"
- },
- "width": {
- "source": "$popover-icon-width",
- "$value": "1rem"
- }
+ "height": { "source": "$popover-icon-height", "$value": "1rem" },
+ "width": { "source": "$popover-icon-width", "$value": "1rem" }
},
"arrow": {
- "width": {
- "source": "$popover-arrow-width",
- "$value": "1rem"
- },
- "height": {
- "source": "$popover-arrow-height",
- "$value": ".5rem"
- }
+ "width": { "source": "$popover-arrow-width", "$value": "1rem" },
+ "height": { "source": "$popover-arrow-height", "$value": ".5rem" }
}
}
},
"elevation": {
"$type": "ratio",
"popover": {
- "zindex": {
- "source": "$zindex-popover",
- "$value": "1060"
- }
+ "zindex": { "source": "$zindex-popover", "$value": "1060" }
}
},
"spacing": {
@@ -61,33 +34,18 @@
"popover": {
"header": {
"padding": {
- "y": {
- "source": "$popover-header-padding-y",
- "$value": ".5rem"
- },
- "x": {
- "source": "$popover-header-padding-x",
- "$value": "1rem"
- }
+ "y": { "source": "$popover-header-padding-y", "$value": ".5rem" },
+ "x": { "source": "$popover-header-padding-x", "$value": "1rem" }
}
},
"body": {
"padding": {
- "y": {
- "source": "$popover-body-padding-y",
- "$value": "{spacing.popover.header.padding.y}"
- },
- "x": {
- "source": "$popover-body-padding-x",
- "$value": "{spacing.popover.header.padding.x}"
- }
+ "y": { "source": "$popover-body-padding-y", "$value": "{spacing.popover.header.padding.y}" },
+ "x": { "source": "$popover-body-padding-x", "$value": "{spacing.popover.header.padding.x}" }
}
},
"icon": {
- "margin-right": {
- "source": "$popover-icon-margin-right",
- "$value": ".5rem"
- }
+ "margin-right": { "source": "$popover-icon-margin-right", "$value": ".5rem" }
}
}
}
diff --git a/tokens/src/core/components/ProductTour.json b/tokens/src/core/components/ProductTour.json
index 3ae503b471..7fa18169f0 100644
--- a/tokens/src/core/components/ProductTour.json
+++ b/tokens/src/core/components/ProductTour.json
@@ -4,28 +4,13 @@
"product-tour": {
"checkpoint": {
"width": {
- "border": {
- "source": "$checkpoint-border-width",
- "$value": "8px"
- },
- "arrow": {
- "source": "$checkpoint-arrow-width",
- "$value": "15px"
- },
- "max": {
- "source": "$checkpoint-max-width",
- "$value": "480px"
- }
+ "border": { "source": "$checkpoint-border-width", "$value": "8px" },
+ "arrow": { "source": "$checkpoint-arrow-width", "$value": "15px" },
+ "max": { "source": "$checkpoint-max-width", "$value": "480px" }
},
"arrow": {
- "top": {
- "source": "$checkpoint-arrow-border-top",
- "$value": "{size.product-tour.checkpoint.width.arrow}"
- },
- "transparent": {
- "source": "$checkpoint-arrow-border-transparent",
- "$value": "{size.product-tour.checkpoint.width.arrow}"
- }
+ "top": { "source": "$checkpoint-arrow-border-top", "$value": "{size.product-tour.checkpoint.width.arrow}" },
+ "transparent": { "source": "$checkpoint-arrow-border-transparent", "$value": "{size.product-tour.checkpoint.width.arrow}" }
}
}
}
@@ -34,10 +19,7 @@
"$type": "ratio",
"product-tour": {
"checkpoint": {
- "zindex": {
- "source": "$checkpoint-z-index",
- "$value": "1060"
- }
+ "zindex": { "source": "$checkpoint-z-index", "$value": "1060" }
}
}
}
diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json
index 307e0a3167..d2c948d875 100644
--- a/tokens/src/core/components/ProgressBar.json
+++ b/tokens/src/core/components/ProgressBar.json
@@ -2,49 +2,28 @@
"typography": {
"$type": "dimension",
"progress-bar": {
- "font-size": {
- "source": "$progress-font-size",
- "$value": "calc({typography.font.size.base} * .75)"
- }
+ "font-size": { "source": "$progress-font-size", "$value": "calc({typography.font.size.base} * .75)" }
}
},
"size": {
"$type": "dimension",
"progress-bar": {
"height": {
- "base": {
- "source": "$progress-height",
- "$value": "1rem"
- },
- "annotated": {
- "source": "$annotated-progress-height",
- "$value": ".3125rem"
- }
+ "base": { "source": "$progress-height", "$value": "1rem" },
+ "annotated": { "source": "$annotated-progress-height", "$value": ".3125rem" }
},
"border": {
- "width": {
- "source": "$progress-bar-border-width",
- "$value": "1px"
- },
- "radius": {
- "source": "$progress-border-radius",
- "$value": "0"
- }
+ "width": { "source": "$progress-bar-border-width", "$value": "1px" },
+ "radius": { "source": "$progress-border-radius", "$value": "0" }
},
- "threshold-circle": {
- "source": "$progress-threshold-circle",
- "$value": ".5625rem"
- }
+ "threshold-circle": { "source": "$progress-threshold-circle", "$value": ".5625rem" }
}
},
"spacing": {
"$type": "dimension",
"progress-bar": {
"hint": {
- "annotation-gap": {
- "source": "$progress-hint-annotation-gap",
- "$value": ".5rem"
- }
+ "annotation-gap": { "source": "$progress-hint-annotation-gap", "$value": ".5rem" }
}
}
},
@@ -52,14 +31,8 @@
"$type": "transition",
"progress-bar": {
"bar": {
- "animation-timing": {
- "source": "$progress-bar-animation-timing",
- "$value": "1s linear infinite"
- },
- "transition": {
- "source": "$progress-bar-transition",
- "$value": "width .6s ease"
- }
+ "animation-timing": { "source": "$progress-bar-animation-timing", "$value": "1s linear infinite" },
+ "transition": { "source": "$progress-bar-transition", "$value": "width .6s ease" }
}
}
}
diff --git a/tokens/src/core/components/SearchField.json b/tokens/src/core/components/SearchField.json
index 0e1170d3fc..31e5f8eede 100644
--- a/tokens/src/core/components/SearchField.json
+++ b/tokens/src/core/components/SearchField.json
@@ -4,32 +4,17 @@
"search-field": {
"border": {
"width": {
- "base": {
- "source": "$search-border-width",
- "$value": ".0625rem"
- },
- "focus": {
- "source": "$search-border-focus-width",
- "$value": ".3125rem"
- }
+ "base": { "source": "$search-border-width", "$value": ".0625rem" },
+ "focus": { "source": "$search-border-focus-width", "$value": ".3125rem" }
},
- "radius": {
- "source": "$search-border-radius",
- "$value": "0"
- }
+ "radius": { "source": "$search-border-radius", "$value": "0" }
},
- "search-input-height": {
- "source": "$input-height-search",
- "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)"
- }
+ "search-input-height": { "source": "$input-height-search", "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" }
}
},
"spacing": {
"search-field": {
- "margin-button": {
- "source": "$search-button-margin",
- "$value": ".5rem"
- }
+ "margin-button": { "source": "$search-button-margin", "$value": ".5rem" }
}
}
}
diff --git a/tokens/src/core/components/SelectableBox.json b/tokens/src/core/components/SelectableBox.json
index bf54815ed9..fb4b97aaab 100644
--- a/tokens/src/core/components/SelectableBox.json
+++ b/tokens/src/core/components/SelectableBox.json
@@ -2,18 +2,9 @@
"$type": "dimension",
"spacing": {
"selectable-box": {
- "padding": {
- "source": "$selectable-box-padding",
- "$value": "1rem"
- },
- "border-radius": {
- "source": "$selectable-box-border-radius",
- "$value": ".25rem"
- },
- "box-space": {
- "source": "$selectable-box-space",
- "$value": ".75rem"
- }
+ "padding": { "source": "$selectable-box-padding", "$value": "1rem" },
+ "border-radius": { "source": "$selectable-box-border-radius", "$value": ".25rem" },
+ "box-space": { "source": "$selectable-box-space", "$value": ".75rem" }
}
}
}
diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json
index 40c116dba5..059eed5bb2 100644
--- a/tokens/src/core/components/Sheet.json
+++ b/tokens/src/core/components/Sheet.json
@@ -3,14 +3,8 @@
"elevation": {
"sheet": {
"zindex": {
- "backdrop": {
- "source": "$zindex-sheet-backdrop",
- "$value": "1031"
- },
- "main": {
- "source": "$zindex-sheet",
- "$value": "1032"
- }
+ "backdrop": { "source": "$zindex-sheet-backdrop", "$value": "1031" },
+ "main": { "source": "$zindex-sheet", "$value": "1032" }
}
}
}
diff --git a/tokens/src/core/components/Spinner.json b/tokens/src/core/components/Spinner.json
index b7e780d290..6b46b6f0fa 100644
--- a/tokens/src/core/components/Spinner.json
+++ b/tokens/src/core/components/Spinner.json
@@ -3,39 +3,18 @@
"size": {
"spinner": {
"base": {
- "width": {
- "source": "$spinner-width",
- "$value": "2rem"
- },
- "height": {
- "source": "$spinner-height",
- "$value": "{size.spinner.base.width}"
- },
- "border-width": {
- "source": "$spinner-border-width",
- "$value": ".25em"
- }
+ "width": { "source": "$spinner-width", "$value": "2rem" },
+ "height": { "source": "$spinner-height", "$value": "{size.spinner.base.width}" },
+ "border-width": { "source": "$spinner-border-width", "$value": ".25em" }
},
"sm": {
- "width": {
- "source": "$spinner-width-sm",
- "$value": "1rem"
- },
- "height": {
- "source": "$spinner-height-sm",
- "$value": "{size.spinner.sm.width}"
- },
- "border-width": {
- "source": "$spinner-border-width-sm",
- "$value": ".2em"
- }
+ "width": { "source": "$spinner-width-sm", "$value": "1rem" },
+ "height": { "source": "$spinner-height-sm", "$value": "{size.spinner.sm.width}" },
+ "border-width": { "source": "$spinner-border-width-sm", "$value": ".2em" }
}
}
},
"spacing": {
- "vertical-align": {
- "source": "$spinner-vertical-align",
- "$value": ".125em"
- }
+ "vertical-align": { "source": "$spinner-vertical-align", "$value": ".125em" }
}
}
diff --git a/tokens/src/core/components/Stack.json b/tokens/src/core/components/Stack.json
index 13a392432a..7b1cdf9c50 100644
--- a/tokens/src/core/components/Stack.json
+++ b/tokens/src/core/components/Stack.json
@@ -2,10 +2,7 @@
"$type": "dimension",
"size": {
"stack": {
- "gap": {
- "source": "$stack-gap",
- "$value": "0"
- }
+ "gap": { "source": "$stack-gap", "$value": "0" }
}
}
}
diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json
index 327c650204..2590069543 100644
--- a/tokens/src/core/components/Stepper.json
+++ b/tokens/src/core/components/Stepper.json
@@ -4,35 +4,17 @@
"stepper": {
"header": {
"padding": {
- "y": {
- "source": "$stepper-header-padding-y",
- "$value": ".75rem"
- },
- "x": {
- "source": "$stepper-header-padding-x",
- "$value": "{spacing.spacer.base}"
- }
+ "y": { "source": "$stepper-header-padding-y", "$value": ".75rem" },
+ "x": { "source": "$stepper-header-padding-x", "$value": "{spacing.spacer.base}" }
},
"step": {
- "padding": {
- "source": "$stepper-header-step-padding",
- "$value": ".25rem"
- },
+ "padding": { "source": "$stepper-header-step-padding", "$value": ".25rem" },
"list": {
"padding": {
- "y": {
- "source": "$stepper-header-step-list-padding-y",
- "$value": ".25rem"
- },
- "x": {
- "source": "$stepper-header-step-list-padding-x",
- "$value": "0"
- }
+ "y": { "source": "$stepper-header-step-list-padding-y", "$value": ".25rem" },
+ "x": { "source": "$stepper-header-step-list-padding-x", "$value": "0" }
},
- "margin": {
- "source": "$stepper-header-step-list-margin",
- "$value": "0"
- }
+ "margin": { "source": "$stepper-header-step-list-margin", "$value": "0" }
}
}
}
@@ -41,29 +23,17 @@
"size": {
"stepper": {
"header": {
- "height-min": {
- "source": "$stepper-header-min-height",
- "$value": "5.13rem"
- }
+ "height-min": { "source": "$stepper-header-min-height", "$value": "5.13rem" }
},
"step": {
- "width-min": {
- "source": "$stepper-header-step-min-width",
- "$value": "0"
- },
- "bubble-error-shadow-width": {
- "source": "$stepper-header-step-error-bubble-shadow-width",
- "$value": "3px"
- }
+ "width-min": { "source": "$stepper-header-step-min-width", "$value": "0" },
+ "bubble-error-shadow-width": { "source": "$stepper-header-step-error-bubble-shadow-width", "$value": "3px" }
}
}
},
"typography": {
"spacer": {
- "line-height": {
- "source": "$stepper-header-line-height",
- "$value": "1px"
- }
+ "line-height": { "source": "$stepper-header-line-height", "$value": "1px" }
}
}
}
diff --git a/tokens/src/core/components/Sticky.json b/tokens/src/core/components/Sticky.json
index ad8f333ea3..001b481d66 100644
--- a/tokens/src/core/components/Sticky.json
+++ b/tokens/src/core/components/Sticky.json
@@ -2,10 +2,7 @@
"$type": "dimension",
"spacing": {
"sticky": {
- "offset": {
- "source": "$sticky-offset",
- "$value": "0"
- }
+ "offset": { "source": "$sticky-offset", "$value": "0" }
}
}
}
diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json
index 9f01b0ecb6..233bdd72b6 100644
--- a/tokens/src/core/components/Tab.json
+++ b/tokens/src/core/components/Tab.json
@@ -3,38 +3,17 @@
"spacing": {
"tab": {
"more-link-dropdown-toggle": {
- "padding-x": {
- "source": "$tab-more-link-dropdown-toggle-padding-x",
- "$value": ".7rem"
- },
- "padding-y": {
- "source": "$tab-more-link-dropdown-toggle-padding-y",
- "$value": "{spacing.spacer.base}"
- }
+ "padding-x": { "source": "$tab-more-link-dropdown-toggle-padding-x", "$value": ".7rem" },
+ "padding-y": { "source": "$tab-more-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" }
},
"inverse-pills-link-dropdown-toggle": {
- "padding-x": {
- "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x",
- "$value": ".625rem"
- },
- "padding-y": {
- "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y",
- "$value": "{spacing.spacer.base}"
- }
+ "padding-x": { "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x", "$value": ".625rem" },
+ "padding-y": { "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" }
},
"inverse-tabs-link-dropdown-toggle": {
- "padding-x": {
- "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x",
- "$value": ".625rem"
- },
- "padding-y": {
- "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y",
- "$value": "{spacing.spacer.base}"
- },
- "distance": {
- "source": "$tab-inverse-pills-link-dropdown-distance",
- "$value": "5px"
- }
+ "padding-x": { "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x", "$value": ".625rem" },
+ "padding-y": { "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" },
+ "distance": { "source": "$tab-inverse-pills-link-dropdown-distance", "$value": "5px" }
}
}
}
diff --git a/tokens/src/core/components/Tabs.json b/tokens/src/core/components/Tabs.json
index 164c330ae0..93d7ce5d53 100644
--- a/tokens/src/core/components/Tabs.json
+++ b/tokens/src/core/components/Tabs.json
@@ -3,24 +3,15 @@
"size": {
"tabs": {
"notification": {
- "height": {
- "source": "$tab-notification-height",
- "$value": "1rem"
- },
- "width": {
- "source": "$tab-notification-width",
- "$value": "1rem"
- }
+ "height": { "source": "$tab-notification-height", "$value": "1rem" },
+ "width": { "source": "$tab-notification-width", "$value": "1rem" }
}
}
},
"typography": {
"tabs": {
"notification": {
- "font-size": {
- "source": "$tab-notification-font-size",
- "$value": "{typography.font.size.xs}"
- }
+ "font-size": { "source": "$tab-notification-font-size", "$value": "{typography.font.size.xs}" }
}
}
}
diff --git a/tokens/src/core/components/Toast.json b/tokens/src/core/components/Toast.json
index ef7511a4a0..6b46867ab7 100644
--- a/tokens/src/core/components/Toast.json
+++ b/tokens/src/core/components/Toast.json
@@ -2,52 +2,28 @@
"$type": "dimension",
"typography": {
"toast": {
- "font-size": {
- "source": "$toast-font-size",
- "$value": ".875rem"
- }
+ "font-size": { "source": "$toast-font-size", "$value": ".875rem" }
}
},
"size": {
"toast": {
- "max-width": {
- "source": "$toast-max-width",
- "$value": "400px"
- },
+ "max-width": { "source": "$toast-max-width", "$value": "400px" },
"border": {
- "width": {
- "source": "$toast-border-width",
- "$value": "1px"
- },
- "radius": {
- "source": "$toast-border-radius",
- "$value": ".25rem"
- }
+ "width": { "source": "$toast-border-width", "$value": "1px" },
+ "radius": { "source": "$toast-border-radius", "$value": ".25rem" }
}
}
},
"spacing": {
"toast": {
"padding": {
- "x": {
- "source": "$toast-padding-x",
- "$value": ".75rem"
- },
- "y": {
- "source": "$toast-padding-y",
- "$value": ".25rem"
- }
+ "x": { "source": "$toast-padding-x", "$value": ".75rem" },
+ "y": { "source": "$toast-padding-y", "$value": ".25rem" }
},
"container": {
"gutter": {
- "lg": {
- "source": "$toast-container-gutter-lg",
- "$value": "1.25rem"
- },
- "sm": {
- "source": "$toast-container-gutter-sm",
- "$value": ".625rem"
- }
+ "lg": { "source": "$toast-container-gutter-lg", "$value": "1.25rem" },
+ "sm": { "source": "$toast-container-gutter-sm", "$value": ".625rem" }
}
}
}
diff --git a/tokens/src/core/components/Tooltip.json b/tokens/src/core/components/Tooltip.json
index 9cbc9c09bf..1df0b65bdc 100644
--- a/tokens/src/core/components/Tooltip.json
+++ b/tokens/src/core/components/Tooltip.json
@@ -2,61 +2,34 @@
"typography": {
"$type": "dimension",
"tooltip": {
- "font-size": {
- "source": "$tooltip-font-size",
- "$value": "{typography.font.size.sm}"
- }
+ "font-size": { "source": "$tooltip-font-size", "$value": "{typography.font.size.sm}" }
}
},
"spacing": {
"$type": "dimension",
"tooltip": {
"padding": {
- "y": {
- "source": "$tooltip-padding-y",
- "$value": ".5rem"
- },
- "x": {
- "source": "$tooltip-padding-x",
- "$value": ".5rem"
- }
+ "y": { "source": "$tooltip-padding-y", "$value": ".5rem" },
+ "x": { "source": "$tooltip-padding-x", "$value": ".5rem" }
},
- "margin": {
- "source": "$tooltip-margin",
- "$value": "0"
- }
+ "margin": { "source": "$tooltip-margin", "$value": "0" }
}
},
"elevation": {
"$type": "ratio",
"tooltip": {
- "zindex": {
- "source": "$zindex-tooltip",
- "$value": "1070"
- }
+ "zindex": { "source": "$zindex-tooltip", "$value": "1070" }
}
},
"size": {
"$type": "dimension",
"tooltip": {
- "max-width": {
- "source": "$tooltip-max-width",
- "$value": "200px"
- },
+ "max-width": { "source": "$tooltip-max-width", "$value": "200px" },
"arrow": {
- "height": {
- "source": "$tooltip-arrow-height",
- "$value": ".4rem"
- },
- "width": {
- "source": "$tooltip-arrow-width",
- "$value": ".8rem"
- }
+ "height": { "source": "$tooltip-arrow-height", "$value": ".4rem" },
+ "width": { "source": "$tooltip-arrow-width", "$value": ".8rem" }
},
- "border-radius": {
- "source": "$tooltip-border-radius",
- "$value": "{size.border.radius.base}"
- }
+ "border-radius": { "source": "$tooltip-border-radius", "$value": "{size.border.radius.base}" }
}
}
}
diff --git a/tokens/src/core/components/general/caret.json b/tokens/src/core/components/general/caret.json
index 7770844e1e..0a09e81e67 100644
--- a/tokens/src/core/components/general/caret.json
+++ b/tokens/src/core/components/general/caret.json
@@ -2,22 +2,13 @@
"$type": "dimension",
"size": {
"caret": {
- "width": {
- "source": "$caret-width",
- "$value": ".3em"
- }
+ "width": { "source": "$caret-width", "$value": ".3em" }
}
},
"spacing": {
"caret": {
- "base": {
- "source": "$caret-spacing",
- "$value": ".255em"
- },
- "vertical-align": {
- "source": "$caret-vertical-align",
- "$value": ".255em"
- }
+ "base": { "source": "$caret-spacing", "$value": ".255em" },
+ "vertical-align": { "source": "$caret-vertical-align", "$value": ".255em" }
}
}
}
diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json
index 61abf746b1..40312e767b 100644
--- a/tokens/src/core/components/general/headings.json
+++ b/tokens/src/core/components/general/headings.json
@@ -2,31 +2,16 @@
"typography": {
"headings": {
"font": {
- "family": {
- "source": "$headings-font-family",
- "$value": "inherit",
- "$type": "fontFamily"
- },
- "weight": {
- "source": "$headings-font-weight",
- "$value": "{typography.font.weight.bold}",
- "$type": "fontWeight"
- }
+ "family": { "source": "$headings-font-family", "$value": "inherit", "$type": "fontFamily" },
+ "weight": { "source": "$headings-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
},
- "line-height": {
- "source": "$headings-line-height",
- "$value": "1.25",
- "$type": "dimension"
- }
+ "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "dimension" }
}
},
"spacing": {
"$type": "dimension",
"headings": {
- "margin-bottom": {
- "source": "$headings-margin-bottom",
- "$value": ".5rem"
- }
+ "margin-bottom": { "source": "$headings-margin-bottom", "$value": ".5rem" }
}
}
}
diff --git a/tokens/src/core/components/general/hr.json b/tokens/src/core/components/general/hr.json
index 84fc96109a..0464dd5d84 100644
--- a/tokens/src/core/components/general/hr.json
+++ b/tokens/src/core/components/general/hr.json
@@ -3,14 +3,8 @@
"size": {
"hr": {
"border": {
- "width": {
- "source": "$hr-border-width",
- "$value": "{size.border.width}"
- },
- "margin-y": {
- "source": "$hr-margin-y",
- "$value": "{spacing.spacer.base}"
- }
+ "width": { "source": "$hr-border-width", "$value": "{size.border.width}" },
+ "margin-y": { "source": "$hr-margin-y", "$value": "{spacing.spacer.base}" }
}
}
}
diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json
index 36042d0f11..f0fabce75c 100644
--- a/tokens/src/core/components/general/input.json
+++ b/tokens/src/core/components/general/input.json
@@ -3,41 +3,19 @@
"input": {
"btn": {
"font": {
- "family": {
- "source": "$input-btn-font-family",
- "$value": "inherit",
- "$type": "fontFamily"
- },
+ "family": { "source": "$input-btn-font-family", "$value": "inherit", "$type": "fontFamily" },
"size": {
"$type": "dimension",
- "base": {
- "source": "$input-btn-font-size",
- "$value": "1.125rem"
- },
- "sm": {
- "source": "$input-btn-font-size-sm",
- "$value": ".875rem"
- },
- "lg": {
- "source": "$input-btn-font-size-lg",
- "$value": "1.325rem"
- }
+ "base": { "source": "$input-btn-font-size", "$value": "1.125rem" },
+ "sm": { "source": "$input-btn-font-size-sm", "$value": ".875rem" },
+ "lg": { "source": "$input-btn-font-size-lg", "$value": "1.325rem" }
}
},
"line-height": {
"$type": "dimension",
- "base": {
- "source": "$input-btn-line-height",
- "$value": "1.3333"
- },
- "sm": {
- "source": "$input-btn-line-height-sm",
- "$value": "1.4286"
- },
- "lg": {
- "source": "$input-btn-line-height-lg",
- "$value": "{typography.line-height.lg}"
- }
+ "base": { "source": "$input-btn-line-height", "$value": "1.3333" },
+ "sm": { "source": "$input-btn-line-height-sm", "$value": "1.4286" },
+ "lg": { "source": "$input-btn-line-height-lg", "$value": "{typography.line-height.lg}" }
}
}
}
@@ -47,33 +25,15 @@
"input": {
"btn": {
"padding": {
- "y": {
- "source": "$input-btn-padding-y",
- "$value": ".5625rem"
- },
- "x": {
- "source": "$input-btn-padding-x",
- "$value": "1rem"
- },
+ "y": { "source": "$input-btn-padding-y", "$value": ".5625rem" },
+ "x": { "source": "$input-btn-padding-x", "$value": "1rem" },
"sm": {
- "y": {
- "source": "$input-btn-padding-y-sm",
- "$value": ".4375rem"
- },
- "x": {
- "source": "$input-btn-padding-x-sm",
- "$value": ".75rem"
- }
+ "y": { "source": "$input-btn-padding-y-sm", "$value": ".4375rem" },
+ "x": { "source": "$input-btn-padding-x-sm", "$value": ".75rem" }
},
"lg": {
- "y": {
- "source": "$input-btn-padding-y-lg",
- "$value": ".6875rem"
- },
- "x": {
- "source": "$input-btn-padding-x-lg",
- "$value": "1.25rem"
- }
+ "y": { "source": "$input-btn-padding-y-lg", "$value": ".6875rem" },
+ "x": { "source": "$input-btn-padding-x-lg", "$value": "1.25rem" }
}
}
}
@@ -83,14 +43,8 @@
"$type": "dimension",
"input": {
"btn": {
- "border-width": {
- "source": "$input-btn-border-width",
- "$value": "{size.border.width}"
- },
- "focus-width": {
- "source": "$input-btn-focus-width",
- "$value": "1px"
- }
+ "border-width": { "source": "$input-btn-border-width", "$value": "{size.border.width}" },
+ "focus-width": { "source": "$input-btn-focus-width", "$value": "1px" }
}
}
}
diff --git a/tokens/src/core/components/general/link.json b/tokens/src/core/components/general/link.json
index f6ce3e2cf0..e72197e63b 100644
--- a/tokens/src/core/components/general/link.json
+++ b/tokens/src/core/components/general/link.json
@@ -3,62 +3,26 @@
"typography": {
"link": {
"decoration": {
- "base": {
- "source": "$link-decoration",
- "$value": "none"
- },
- "hover": {
- "source": "$link-hover-decoration",
- "$value": "underline"
- },
+ "base": { "source": "$link-decoration", "$value": "none" },
+ "hover": { "source": "$link-hover-decoration", "$value": "underline" },
"inline": {
- "base": {
- "source": "$inline-link-decoration",
- "$value": "underline"
- },
- "hover": {
- "source": "$inline-link-hover-decoration",
- "$value": "underline"
- }
+ "base": { "source": "$inline-link-decoration", "$value": "underline" },
+ "hover": { "source": "$inline-link-hover-decoration", "$value": "underline" }
},
"muted": {
- "base": {
- "source": "$muted-link-decoration",
- "$value": "none"
- },
- "hover": {
- "source": "$muted-link-hover-decoration",
- "$value": "underline"
- },
+ "base": { "source": "$muted-link-decoration", "$value": "none" },
+ "hover": { "source": "$muted-link-hover-decoration", "$value": "underline" },
"inline": {
- "base": {
- "source": "$muted-inline-link-decoration",
- "$value": "underline"
- },
- "hover": {
- "source": "$muted-inline-link-hover-decoration",
- "$value": "underline"
- }
+ "base": { "source": "$muted-inline-link-decoration", "$value": "underline" },
+ "hover": { "source": "$muted-inline-link-hover-decoration", "$value": "underline" }
}
},
"brand": {
- "base": {
- "source": "$brand-link-decoration",
- "$value": "none"
- },
- "hover": {
- "source": "$brand-link-hover-decoration",
- "$value": "underline"
- },
+ "base": { "source": "$brand-link-decoration", "$value": "none" },
+ "hover": { "source": "$brand-link-hover-decoration", "$value": "underline" },
"inline": {
- "base": {
- "source": "$brand-inline-link-decoration",
- "$value": "underline"
- },
- "hover": {
- "source": "$brand-inline-link-hover-decoration",
- "$value": "underline"
- }
+ "base": { "source": "$brand-inline-link-decoration", "$value": "underline" },
+ "hover": { "source": "$brand-inline-link-hover-decoration", "$value": "underline" }
}
}
}
diff --git a/tokens/src/core/components/general/list.json b/tokens/src/core/components/general/list.json
index 0a04eacbb3..071f3b6a05 100644
--- a/tokens/src/core/components/general/list.json
+++ b/tokens/src/core/components/general/list.json
@@ -2,29 +2,17 @@
"typography": {
"$type": "fontWeight",
"dt": {
- "font-weight": {
- "source": "$dt-font-weight",
- "$value": "{typography.font.weight.bold}"
- }
+ "font-weight": { "source": "$dt-font-weight", "$value": "{typography.font.weight.bold}" }
}
},
"spacing": {
"$type": "dimension",
"list": {
- "inline-padding": {
- "source": "$list-inline-padding",
- "$value": ".5rem"
- },
+ "inline-padding": { "source": "$list-inline-padding", "$value": ".5rem" },
"group-item": {
"padding": {
- "y": {
- "source": "$list-group-item-padding-y",
- "$value": ".75rem"
- },
- "x": {
- "source": "$list-group-item-padding-x",
- "$value": "1.25rem"
- }
+ "y": { "source": "$list-group-item-padding-y", "$value": ".75rem" },
+ "x": { "source": "$list-group-item-padding-x", "$value": "1.25rem" }
}
}
}
@@ -33,14 +21,8 @@
"$type": "dimension",
"list-group": {
"border": {
- "width": {
- "source": "$list-group-border-width",
- "$value": "{size.border.width}"
- },
- "radius": {
- "source": "$list-group-border-radius",
- "$value": "{size.border.radius.base}"
- }
+ "width": { "source": "$list-group-border-width", "$value": "{size.border.width}" },
+ "radius": { "source": "$list-group-border-radius", "$value": "{size.border.radius.base}" }
}
}
}
diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json
index 797fb5e3e4..45ce22da9a 100644
--- a/tokens/src/core/components/general/text.json
+++ b/tokens/src/core/components/general/text.json
@@ -2,28 +2,16 @@
"$type": "dimension",
"spacing": {
"paragraph": {
- "margin-bottom": {
- "source": "$paragraph-margin-bottom",
- "$value": "1rem"
- }
+ "margin-bottom": { "source": "$paragraph-margin-bottom", "$value": "1rem" }
},
- "mark-padding": {
- "source": "$mark-padding",
- "$value": ".2em"
- }
+ "mark-padding": { "source": "$mark-padding", "$value": ".2em" }
},
"typography": {
"blockquote": {
"small": {
- "font-size": {
- "source": "$blockquote-small-font-size",
- "$value": "{typography.font.size.small.base}"
- }
+ "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.small.base}" }
},
- "font-size": {
- "source": "$blockquote-font-size",
- "$value": "calc({typography.font.size.base} * 1.25)"
- }
+ "font-size": { "source": "$blockquote-font-size", "$value": "calc({typography.font.size.base} * 1.25)" }
}
}
}
diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json
index 2ca2230790..88571fd5c9 100644
--- a/tokens/src/themes/light/alias/color.json
+++ b/tokens/src/themes/light/alias/color.json
@@ -2,10 +2,7 @@
"$type": "color",
"color": {
"bg": {
- "base": {
- "$value": "{color.white}",
- "$description": "Basic background color."
- },
+ "base": { "$value": "{color.white}", "$description": "Basic background color." },
"active": {
"source": "$component-active-bg",
"$value": "{color.primary.500}",
@@ -16,23 +13,13 @@
"50": {
"black": {
"source": "$text-black-50",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.5
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.5 }],
"$value": "{color.black}",
"$description": "Black text color with transparency of 50%."
},
"white": {
"source": "$text-white-50",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.5
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.5 }],
"$value": "{color.white}",
"$description": "White text color with transparency of 50%."
}
diff --git a/tokens/src/themes/light/components/Alert.json b/tokens/src/themes/light/components/Alert.json
index e3f2f734fd..4a5359008e 100644
--- a/tokens/src/themes/light/components/Alert.json
+++ b/tokens/src/themes/light/components/Alert.json
@@ -2,67 +2,25 @@
"$type": "color",
"color": {
"alert": {
- "title": {
- "source": "$alert-title-color",
- "$value": "{color.black}"
- },
- "content": {
- "source": "$alert-content-color",
- "$value": "{color.gray.700}"
- },
+ "title": { "source": "$alert-title-color", "$value": "{color.black}" },
+ "content": { "source": "$alert-content-color", "$value": "{color.gray.700}" },
"icon": {
- "success": {
- "source": "$alert-success-icon-color",
- "$value": "{color.theme.default.success}"
- },
- "info": {
- "source": "$alert-info-icon-color",
- "$value": "{color.theme.default.info}"
- },
- "danger": {
- "source": "$alert-danger-icon-color",
- "$value": "{color.theme.default.danger}"
- },
- "warning": {
- "source": "$alert-warning-icon-color",
- "$value": "{color.theme.default.warning}"
- }
+ "success": { "source": "$alert-success-icon-color", "$value": "{color.theme.default.success}" },
+ "info": { "source": "$alert-info-icon-color", "$value": "{color.theme.default.info}" },
+ "danger": { "source": "$alert-danger-icon-color", "$value": "{color.theme.default.danger}" },
+ "warning": { "source": "$alert-warning-icon-color", "$value": "{color.theme.default.warning}" }
},
"bg": {
- "success": {
- "source": "$alert-success-bg",
- "$value": "{color.theme.bg.success}"
- },
- "info": {
- "source": "$alert-info-bg",
- "$value": "{color.theme.bg.info}"
- },
- "danger": {
- "source": "$alert-danger-bg",
- "$value": "{color.theme.bg.danger}"
- },
- "warning": {
- "source": "$alert-warning-bg",
- "$value": "{color.theme.bg.warning}"
- }
+ "success": { "source": "$alert-success-bg", "$value": "{color.theme.bg.success}" },
+ "info": { "source": "$alert-info-bg", "$value": "{color.theme.bg.info}" },
+ "danger": { "source": "$alert-danger-bg", "$value": "{color.theme.bg.danger}" },
+ "warning": { "source": "$alert-warning-bg", "$value": "{color.theme.bg.warning}" }
},
"border": {
- "success": {
- "source": "$alert-success-border-color",
- "$value": "{color.theme.border.success}"
- },
- "info": {
- "source": "$alert-info-border-color",
- "$value": "{color.theme.border.info}"
- },
- "danger": {
- "source": "$alert-danger-border-color",
- "$value": "{color.theme.border.danger}"
- },
- "warning": {
- "source": "$alert-warning-border-color",
- "$value": "{color.theme.border.warning}"
- }
+ "success": { "source": "$alert-success-border-color", "$value": "{color.theme.border.success}" },
+ "info": { "source": "$alert-info-border-color", "$value": "{color.theme.border.info}" },
+ "danger": { "source": "$alert-danger-border-color", "$value": "{color.theme.border.danger}" },
+ "warning": { "source": "$alert-warning-border-color", "$value": "{color.theme.border.warning}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json
index 9cc0143d7f..c24ae26a72 100644
--- a/tokens/src/themes/light/components/Annotation.json
+++ b/tokens/src/themes/light/components/Annotation.json
@@ -12,48 +12,18 @@
"$type": "color",
"annotation": {
"text": {
- "success": {
- "source": "$annotation-success-color",
- "$value": "{color.white}"
- },
- "warning": {
- "source": "$annotation-warning-color",
- "$value": "{color.black}"
- },
- "error": {
- "source": "$annotation-error-color",
- "$value": "{color.white}"
- },
- "light": {
- "source": "$annotation-light-color",
- "$value": "{color.primary.500}"
- },
- "dark": {
- "source": "$annotation-dark-color",
- "$value": "{color.white}"
- }
+ "success": { "source": "$annotation-success-color", "$value": "{color.white}" },
+ "warning": { "source": "$annotation-warning-color", "$value": "{color.black}" },
+ "error": { "source": "$annotation-error-color", "$value": "{color.white}" },
+ "light": { "source": "$annotation-light-color", "$value": "{color.primary.500}" },
+ "dark": { "source": "$annotation-dark-color", "$value": "{color.white}" }
},
"bg": {
- "success": {
- "source": "$annotation-success-bg",
- "$value": "{color.success.base}"
- },
- "warning": {
- "source": "$annotation-warning-bg",
- "$value": "{color.accent.b}"
- },
- "error": {
- "source": "$annotation-error-bg",
- "$value": "{color.danger.base}"
- },
- "light": {
- "source": "$annotation-light-bg",
- "$value": "{color.white}"
- },
- "dark": {
- "source": "$annotation-dark-bg",
- "$value": "{color.dark.base}"
- }
+ "success": { "source": "$annotation-success-bg", "$value": "{color.success.base}" },
+ "warning": { "source": "$annotation-warning-bg", "$value": "{color.accent.b}" },
+ "error": { "source": "$annotation-error-bg", "$value": "{color.danger.base}" },
+ "light": { "source": "$annotation-light-bg", "$value": "{color.white}" },
+ "dark": { "source": "$annotation-dark-bg", "$value": "{color.dark.base}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Avatar.json b/tokens/src/themes/light/components/Avatar.json
index 8ae2570651..6ad6de32bd 100644
--- a/tokens/src/themes/light/components/Avatar.json
+++ b/tokens/src/themes/light/components/Avatar.json
@@ -2,9 +2,7 @@
"$type": "color",
"color": {
"avatar": {
- "border": {
- "$value": "{color.light.300}"
- }
+ "border": { "$value": "{color.light.300}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Badge.json b/tokens/src/themes/light/components/Badge.json
index 6316902d44..09417ba9c8 100644
--- a/tokens/src/themes/light/components/Badge.json
+++ b/tokens/src/themes/light/components/Badge.json
@@ -3,307 +3,115 @@
"color": {
"badge": {
"text": {
- "primary": {
- "source": "$badge-primary-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
- "$value": "{color.primary.base}"
- },
- "secondary": {
- "source": "$badge-secondary-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
- "$value": "{color.secondary.base}"
- },
- "success": {
- "source": "$badge-success-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
- "$value": "{color.success.base}"
- },
- "danger": {
- "source": "$badge-danger-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
- "$value": "{color.danger.base}"
- },
- "warning": {
- "source": "$badge-warning-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
- "$value": "{color.warning.base}"
- },
- "info": {
- "source": "$badge-info-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
- "$value": "{color.info.base}"
- },
- "light": {
- "source": "$badge-light-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
- "$value": "{color.light.base}"
- },
- "dark": {
- "source": "$badge-dark-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
- "$value": "{color.dark.base}"
- }
+ "primary": { "source": "$badge-primary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.primary.base}" },
+ "secondary": { "source": "$badge-secondary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.secondary.base}" },
+ "success": { "source": "$badge-success-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.success.base}" },
+ "danger": { "source": "$badge-danger-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.danger.base}" },
+ "warning": { "source": "$badge-warning-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.warning.base}" },
+ "info": { "source": "$badge-info-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.info.base}" },
+ "light": { "source": "$badge-light-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.light.base}" },
+ "dark": { "source": "$badge-dark-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.dark.base}" }
},
"bg": {
- "primary": {
- "source": "$badge-primary-bg",
- "$value": "{color.primary.base}"
- },
- "secondary": {
- "source": "$badge-secondary-bg",
- "$value": "{color.secondary.base}"
- },
- "success": {
- "source": "$badge-success-bg",
- "$value": "{color.success.base}"
- },
- "warning": {
- "source": "$badge-warning-bg",
- "$value": "{color.warning.base}"
- },
- "danger": {
- "source": "$badge-danger-bg",
- "$value": "{color.danger.base}"
- },
- "info": {
- "source": "$badge-info-bg",
- "$value": "{color.info.base}"
- },
- "light": {
- "source": "$badge-light-bg",
- "$value": "{color.light.base}"
- },
- "dark": {
- "source": "$badge-dark-bg",
- "$value": "{color.dark.base}"
- }
+ "primary": { "source": "$badge-primary-bg", "$value": "{color.primary.base}" },
+ "secondary": { "source": "$badge-secondary-bg", "$value": "{color.secondary.base}" },
+ "success": { "source": "$badge-success-bg", "$value": "{color.success.base}" },
+ "warning": { "source": "$badge-warning-bg", "$value": "{color.warning.base}" },
+ "danger": { "source": "$badge-danger-bg", "$value": "{color.danger.base}" },
+ "info": { "source": "$badge-info-bg", "$value": "{color.info.base}" },
+ "light": { "source": "$badge-light-bg", "$value": "{color.light.base}" },
+ "dark": { "source": "$badge-dark-bg", "$value": "{color.dark.base}" }
},
"focus": {
- "primary": {
- "source": "$badge-primary-focus-color",
- "$value": "{color.badge.text.primary}"
- },
- "secondary": {
- "source": "$badge-secondary-focus-color",
- "$value": "{color.badge.text.secondary}"
- },
- "success": {
- "source": "$badge-success-focus-color",
- "$value": "{color.badge.text.success}"
- },
- "warning": {
- "source": "$badge-warning-focus-color",
- "$value": "{color.badge.text.warning}"
- },
- "danger": {
- "source": "$badge-danger-focus-color",
- "$value": "{color.badge.text.danger}"
- },
- "info": {
- "source": "$badge-info-focus-color",
- "$value": "{color.badge.text.info}"
- },
- "light": {
- "source": "$badge-light-focus-color",
- "$value": "{color.badge.text.light}"
- },
- "dark": {
- "source": "$badge-dark-focus-color",
- "$value": "{color.badge.text.dark}"
- },
+ "primary": { "source": "$badge-primary-focus-color", "$value": "{color.badge.text.primary}" },
+ "secondary": { "source": "$badge-secondary-focus-color", "$value": "{color.badge.text.secondary}" },
+ "success": { "source": "$badge-success-focus-color", "$value": "{color.badge.text.success}" },
+ "warning": { "source": "$badge-warning-focus-color", "$value": "{color.badge.text.warning}" },
+ "danger": { "source": "$badge-danger-focus-color", "$value": "{color.badge.text.danger}" },
+ "info": { "source": "$badge-info-focus-color", "$value": "{color.badge.text.info}" },
+ "light": { "source": "$badge-light-focus-color", "$value": "{color.badge.text.light}" },
+ "dark": { "source": "$badge-dark-focus-color", "$value": "{color.badge.text.dark}" },
"bg": {
"primary": {
"source": "$badge-primary-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.badge.bg.primary}"
},
"secondary": {
"source": "$badge-secondary-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.badge.bg.secondary}"
},
"success": {
"source": "$badge-success-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.badge.bg.success}"
},
"danger": {
"source": "$badge-danger-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.badge.bg.danger}"
},
"warning": {
"source": "$badge-warning-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.badge.bg.warning}"
},
"info": {
"source": "$badge-info-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.badge.bg.info}"
},
"light": {
"source": "$badge-light-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.badge.bg.light}"
},
"dark": {
"source": "$badge-dark-focus-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.badge.bg.dark}"
}
},
"box-shadow": {
"primary": {
"source": "$badge-primary-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.05 }],
"$value": "{color.badge.bg.primary}"
},
"secondary": {
"source": "$badge-secondary-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.05 }],
"$value": "{color.badge.bg.secondary}"
},
"success": {
"source": "$badge-success-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.05 }],
"$value": "{color.badge.bg.success}"
},
"danger": {
"source": "$badge-danger-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.05 }],
"$value": "{color.badge.bg.danger}"
},
"warning": {
"source": "$badge-warning-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.05 }],
"$value": "{color.badge.bg.warning}"
},
"info": {
"source": "$badge-info-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.05 }],
"$value": "{color.badge.bg.info}"
},
"light": {
"source": "$badge-light-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.05 }],
"$value": "{color.badge.bg.light}"
},
"dark": {
"source": "$badge-dark-focus-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.05 }],
"$value": "{color.badge.bg.dark}"
}
}
diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json
index df8ddf2d34..42929bfe92 100644
--- a/tokens/src/themes/light/components/Breadcrumb.json
+++ b/tokens/src/themes/light/components/Breadcrumb.json
@@ -2,27 +2,12 @@
"$type": "color",
"color": {
"breadcrumb": {
- "base": {
- "source": "$breadcrumb-color",
- "$value": "{color.primary.500}"
- },
- "active": {
- "source": "$breadcrumb-active-color",
- "$value": "{color.gray.500}"
- },
+ "base": { "source": "$breadcrumb-color", "$value": "{color.primary.500}" },
+ "active": { "source": "$breadcrumb-active-color", "$value": "{color.gray.500}" },
"inverse": {
- "base": {
- "source": "$breadcrumb-inverse-color",
- "$value": "{color.white}"
- },
- "active": {
- "source": "$breadcrumb-inverse-active",
- "$value": "{color.light.500}"
- },
- "spacer": {
- "source": "$breadcrumb-inverse-spacer",
- "$value": "{color.light.700}"
- }
+ "base": { "source": "$breadcrumb-inverse-color", "$value": "{color.white}" },
+ "active": { "source": "$breadcrumb-inverse-active", "$value": "{color.light.500}" },
+ "spacer": { "source": "$breadcrumb-inverse-spacer", "$value": "{color.light.700}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Bubble.json b/tokens/src/themes/light/components/Bubble.json
index ebb63c4092..c36f397309 100644
--- a/tokens/src/themes/light/components/Bubble.json
+++ b/tokens/src/themes/light/components/Bubble.json
@@ -3,40 +3,16 @@
"color": {
"bubble": {
"text": {
- "success": {
- "source": "$bubble-success-color",
- "$value": "{color.white}"
- },
- "warning": {
- "source": "$bubble-warning-color",
- "$value": "{color.white}"
- },
- "error": {
- "source": "$bubble-error-color",
- "$value": "{color.white}"
- },
- "primary": {
- "source": "$bubble-primary-color",
- "$value": "{color.white}"
- }
+ "success": { "source": "$bubble-success-color", "$value": "{color.white}" },
+ "warning": { "source": "$bubble-warning-color", "$value": "{color.white}" },
+ "error": { "source": "$bubble-error-color", "$value": "{color.white}" },
+ "primary": { "source": "$bubble-primary-color", "$value": "{color.white}" }
},
"bg": {
- "success": {
- "source": "$bubble-success-bg",
- "$value": "{color.success.base}"
- },
- "warning": {
- "source": "$bubble-warning-bg",
- "$value": "{color.warning.base}"
- },
- "error": {
- "source": "$bubble-error-bg",
- "$value": "{color.danger.base}"
- },
- "primary": {
- "source": "$bubble-primary-bg",
- "$value": "{color.primary.base}"
- }
+ "success": { "source": "$bubble-success-bg", "$value": "{color.success.base}" },
+ "warning": { "source": "$bubble-warning-bg", "$value": "{color.warning.base}" },
+ "error": { "source": "$bubble-error-bg", "$value": "{color.danger.base}" },
+ "primary": { "source": "$bubble-primary-bg", "$value": "{color.primary.base}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json
index 67ef7787d8..f03f60bd19 100644
--- a/tokens/src/themes/light/components/Button/brand.json
+++ b/tokens/src/themes/light/components/Button/brand.json
@@ -5,11 +5,7 @@
"text": {
"brand": {
"source": "$btn-brand-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.bg.brand}"
},
"outline-brand": {
@@ -36,11 +32,7 @@
},
"inverse-brand": {
"source": "$btn-brand-inverse-bg",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.text.inverse-brand}"
},
"inverse-outline-brand": {
@@ -70,11 +62,7 @@
"text": {
"brand": {
"source": "$btn-brand-hover-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.hover.bg.brand}"
},
"outline-brand": {
@@ -83,12 +71,7 @@
},
"inverse-brand": {
"source": "$btn-brand-inverse-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.text.inverse-brand}"
},
"inverse-outline-brand": {
@@ -107,12 +90,7 @@
},
"inverse-brand": {
"source": "$btn-brand-inverse-hover-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.bg.inverse-brand}"
},
"inverse-outline-brand": {
@@ -143,39 +121,22 @@
"text": {
"brand": {
"source": "$btn-brand-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.brand}"
},
"outline-brand": {
"source": "$btn-brand-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.outline-brand}"
},
"inverse-brand": {
"source": "$btn-brand-inverse-active-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.btn.text.inverse-brand}"
},
"inverse-outline-brand": {
"source": "$btn-brand-inverse-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.inverse-outline-brand}"
}
},
diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json
index 6e0feb689f..8b29b583ef 100644
--- a/tokens/src/themes/light/components/Button/core.json
+++ b/tokens/src/themes/light/components/Button/core.json
@@ -2,34 +2,22 @@
"color": {
"$type": "color",
"btn": {
- "disabled-link": {
- "source": "$btn-link-disabled-color",
- "$value": "{color.disabled}"
- }
+ "disabled-link": { "source": "$btn-link-disabled-color", "$value": "{color.disabled}" }
}
},
"elevation": {
"$type": "shadow",
"btn": {
"box-shadow": {
- "base": {
- "source": "$btn-box-shadow",
- "$value": "none"
- },
- "active": {
- "source": "$btn-active-box-shadow",
- "$value": "none"
- }
+ "base": { "source": "$btn-box-shadow", "$value": "none" },
+ "active": { "source": "$btn-active-box-shadow", "$value": "none" }
}
}
},
"other": {
"$type": "ratio",
"btn": {
- "disabled-opacity": {
- "source": "$btn-disabled-opacity",
- "$value": ".65"
- }
+ "disabled-opacity": { "source": "$btn-disabled-opacity", "$value": ".65" }
}
}
}
diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json
index b2bfcca609..f5c0cc8ec3 100644
--- a/tokens/src/themes/light/components/Button/danger.json
+++ b/tokens/src/themes/light/components/Button/danger.json
@@ -5,17 +5,10 @@
"text": {
"danger": {
"source": "$btn-danger-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.bg.danger}"
},
- "outline-danger": {
- "source": "$btn-danger-outline-color",
- "$value": "{color.danger.base}"
- },
+ "outline-danger": { "source": "$btn-danger-outline-color", "$value": "{color.danger.base}" },
"inverse-danger": {
"source": "$btn-danger-inverse-color",
"$value": "{color.danger.base}"
@@ -26,21 +19,14 @@
}
},
"bg": {
- "danger": {
- "source": "$btn-danger-bg",
- "$value": "{color.danger.base}"
- },
+ "danger": { "source": "$btn-danger-bg", "$value": "{color.danger.base}" },
"outline-danger": {
"source": "$btn-danger-outline-bg",
"$value": "inherit"
},
"inverse-danger": {
"source": "$btn-danger-inverse-bg",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.text.inverse-danger}"
},
"inverse-outline-danger": {
@@ -70,11 +56,7 @@
"text": {
"danger": {
"source": "$btn-danger-hover-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.hover.bg.danger}"
},
"outline-danger": {
@@ -83,12 +65,7 @@
},
"inverse-danger": {
"source": "$btn-danger-inverse-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.text.inverse-danger}"
},
"inverse-outline-danger": {
@@ -107,12 +84,7 @@
},
"inverse-danger": {
"source": "$btn-danger-inverse-hover-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.bg.inverse-danger}"
},
"inverse-outline-danger": {
@@ -143,39 +115,22 @@
"text": {
"danger": {
"source": "$btn-danger-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.danger}"
},
"outline-danger": {
"source": "$btn-danger-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.outline-danger}"
},
"inverse-danger": {
"source": "$btn-danger-inverse-active-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.btn.text.inverse-danger}"
},
"inverse-outline-danger": {
"source": "$btn-danger-inverse-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.inverse-outline-danger}"
}
},
diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json
index 741cf4d3e7..c57a7bdf8b 100644
--- a/tokens/src/themes/light/components/Button/dark.json
+++ b/tokens/src/themes/light/components/Button/dark.json
@@ -5,11 +5,7 @@
"text": {
"dark": {
"source": "$btn-dark-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.bg.dark}"
},
"outline-dark": {
@@ -36,11 +32,7 @@
},
"inverse-dark": {
"source": "$btn-dark-inverse-bg",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.text.inverse-dark}"
},
"inverse-outline-dark": {
@@ -70,11 +62,7 @@
"text": {
"dark": {
"source": "$btn-dark-hover-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.hover.bg.dark}"
},
"outline-dark": {
@@ -83,12 +71,7 @@
},
"inverse-dark": {
"source": "$btn-dark-inverse-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.text.inverse-dark}"
},
"inverse-outline-dark": {
@@ -107,12 +90,7 @@
},
"inverse-dark": {
"source": "$btn-dark-inverse-hover-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.bg.inverse-dark}"
},
"inverse-outline-dark": {
@@ -143,39 +121,22 @@
"text": {
"dark": {
"source": "$btn-dark-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.dark}"
},
"outline-dark": {
"source": "$btn-dark-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.outline-dark}"
},
"inverse-dark": {
"source": "$btn-dark-inverse-active-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.btn.text.inverse-dark}"
},
"inverse-outline-dark": {
"source": "$btn-dark-inverse-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.inverse-outline-dark}"
}
},
diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json
index 263c989351..b67c84e4ff 100644
--- a/tokens/src/themes/light/components/Button/info.json
+++ b/tokens/src/themes/light/components/Button/info.json
@@ -5,11 +5,7 @@
"text": {
"info": {
"source": "$btn-info-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.bg.info}"
},
"outline-info": {
@@ -36,11 +32,7 @@
},
"inverse-info": {
"source": "$btn-info-inverse-bg",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.text.inverse-info}"
},
"inverse-outline-info": {
@@ -70,11 +62,7 @@
"text": {
"info": {
"source": "$btn-info-hover-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.hover.bg.info}"
},
"outline-info": {
@@ -83,12 +71,7 @@
},
"inverse-info": {
"source": "$btn-info-inverse-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.text.inverse-info}"
},
"inverse-outline-info": {
@@ -107,12 +90,7 @@
},
"inverse-info": {
"source": "$btn-info-inverse-hover-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.bg.inverse-info}"
},
"inverse-outline-info": {
@@ -143,39 +121,22 @@
"text": {
"info": {
"source": "$btn-info-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.info}"
},
"outline-info": {
"source": "$btn-info-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.outline-info}"
},
"inverse-info": {
"source": "$btn-info-inverse-active-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.btn.text.inverse-info}"
},
"inverse-outline-info": {
"source": "$btn-info-inverse-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.inverse-outline-info}"
}
},
diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json
index c60f1f8c2c..5837658231 100644
--- a/tokens/src/themes/light/components/Button/light.json
+++ b/tokens/src/themes/light/components/Button/light.json
@@ -5,11 +5,7 @@
"text": {
"light": {
"source": "$btn-light-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.bg.light}"
},
"outline-light": {
@@ -32,11 +28,7 @@
},
"inverse-light": {
"source": "$btn-light-inverse-bg",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.text.inverse-light}"
},
"outline-light": {
@@ -70,11 +62,7 @@
"text": {
"light": {
"source": "$btn-light-hover-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.hover.bg.light}"
},
"outline-light": {
@@ -83,12 +71,7 @@
},
"inverse-light": {
"source": "$btn-light-inverse-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.text.inverse-light}"
},
"inverse-outline-light": {
@@ -107,12 +90,7 @@
},
"inverse-light": {
"source": "$btn-light-inverse-hover-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.bg.inverse-light}"
},
"inverse-outline-light": {
@@ -143,39 +121,22 @@
"text": {
"light": {
"source": "$btn-light-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.light}"
},
"outline-light": {
"source": "$btn-light-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.outline-light}"
},
"inverse-light": {
"source": "$btn-light-inverse-active-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.btn.text.inverse-light}"
},
"inverse-outline-light": {
"source": "$btn-light-inverse-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.inverse-outline-light}"
}
},
diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json
index 2144823277..bc9ad182d4 100644
--- a/tokens/src/themes/light/components/Button/primary.json
+++ b/tokens/src/themes/light/components/Button/primary.json
@@ -5,11 +5,7 @@
"text": {
"primary": {
"source": "$btn-primary-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.bg.primary}"
},
"outline-primary": {
@@ -40,11 +36,7 @@
},
"inverse-primary": {
"source": "$btn-primary-inverse-bg",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.text.inverse-primary}"
}
},
@@ -70,11 +62,7 @@
"text": {
"primary": {
"source": "$btn-primary-hover-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.hover.bg.primary}"
},
"outline-primary": {
@@ -83,12 +71,7 @@
},
"inverse-primary": {
"source": "$btn-primary-inverse-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.text.inverse-primary}"
},
"inverse-outline-primary": {
@@ -107,12 +90,7 @@
},
"inverse-primary": {
"source": "$btn-primary-inverse-hover-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.bg.inverse-primary}"
},
"inverse-outline-primary": {
@@ -143,39 +121,22 @@
"text": {
"primary": {
"source": "$btn-primary-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.primary}"
},
"outline-primary": {
"source": "$btn-primary-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.outline-primary}"
},
"inverse-primary": {
"source": "$btn-primary-inverse-active-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.btn.text.inverse-primary}"
},
"inverse-outline-primary": {
"source": "$btn-primary-inverse-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.inverse-outline-primary}"
}
},
diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json
index 0ef720101f..e6c4532c96 100644
--- a/tokens/src/themes/light/components/Button/secondary.json
+++ b/tokens/src/themes/light/components/Button/secondary.json
@@ -5,11 +5,7 @@
"text": {
"secondary": {
"source": "$btn-secondary-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.bg.secondary}"
},
"outline-secondary": {
@@ -40,11 +36,7 @@
},
"inverse-secondary": {
"source": "$btn-secondary-inverse-bg",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.text.inverse-secondary}"
}
},
@@ -70,11 +62,7 @@
"text": {
"secondary": {
"source": "$btn-secondary-hover-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.hover.bg.secondary}"
},
"outline-secondary": {
@@ -83,12 +71,7 @@
},
"inverse-secondary": {
"source": "$btn-secondary-inverse-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.text.inverse-secondary}"
},
"inverse-outline-secondary": {
@@ -107,12 +90,7 @@
},
"inverse-secondary": {
"source": "$btn-secondary-inverse-hover-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.bg.inverse-secondary}"
},
"inverse-outline-secondary": {
@@ -143,39 +121,22 @@
"text": {
"secondary": {
"source": "$btn-secondary-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.secondary}"
},
"outline-secondary": {
"source": "$btn-secondary-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.outline-secondary}"
},
"inverse-secondary": {
"source": "$btn-secondary-inverse-active-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.btn.text.inverse-secondary}"
},
"inverse-outline-secondary": {
"source": "$btn-secondary-inverse-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.inverse-outline-secondary}"
}
},
diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json
index 8d8be39394..b04fa33702 100644
--- a/tokens/src/themes/light/components/Button/success.json
+++ b/tokens/src/themes/light/components/Button/success.json
@@ -5,11 +5,7 @@
"text": {
"success": {
"source": "$btn-success-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.bg.success}"
},
"outline-success": {
@@ -36,11 +32,7 @@
},
"inverse-success": {
"source": "$btn-success-inverse-bg",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.text.inverse-success}"
},
"inverse-outline-success": {
@@ -70,11 +62,7 @@
"text": {
"success": {
"source": "$btn-success-hover-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.hover.bg.success}"
},
"outline-success": {
@@ -83,12 +71,7 @@
},
"inverse-success": {
"source": "$btn-success-inverse-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.text.inverse-success}"
},
"inverse-outline-success": {
@@ -107,12 +90,7 @@
},
"inverse-success": {
"source": "$btn-success-inverse-hover-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.bg.inverse-success}"
},
"inverse-outline-success": {
@@ -143,39 +121,22 @@
"text": {
"success": {
"source": "$btn-success-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.success}"
},
"outline-success": {
"source": "$btn-success-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.outline-success}"
},
"inverse-success": {
"source": "$btn-success-inverse-active-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.btn.text.inverse-success}"
},
"inverse-outline-success": {
"source": "$btn-success-inverse-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.inverse-outline-success}"
}
},
diff --git a/tokens/src/themes/light/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json
index ea506d852b..e42352b352 100644
--- a/tokens/src/themes/light/components/Button/tertiary.json
+++ b/tokens/src/themes/light/components/Button/tertiary.json
@@ -3,177 +3,79 @@
"color": {
"btn": {
"text": {
- "tertiary": {
- "source": "$btn-tertiary-color",
- "$value": "{color.gray.700}"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-color",
- "$value": "{color.white}"
- }
+ "tertiary": { "source": "$btn-tertiary-color", "$value": "{color.gray.700}" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-color", "$value": "{color.white}" }
},
"bg": {
- "tertiary": {
- "source": "$btn-tertiary-bg",
- "$value": "transparent"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-bg",
- "$value": "transparent"
- }
+ "tertiary": { "source": "$btn-tertiary-bg", "$value": "transparent" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-bg", "$value": "transparent" }
},
"border": {
- "tertiary": {
- "source": "$btn-tertiary-border-color",
- "$value": "transparent"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-border-color",
- "$value": "transparent"
- }
+ "tertiary": { "source": "$btn-tertiary-border-color", "$value": "transparent" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-border-color", "$value": "transparent" }
},
"hover": {
"text": {
- "tertiary": {
- "source": "$btn-tertiary-hover-color",
- "$value": "{color.gray.700}"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-hover-color",
- "$value": "{color.white}"
- }
+ "tertiary": { "source": "$btn-tertiary-hover-color", "$value": "{color.gray.700}" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-color", "$value": "{color.white}" }
},
"bg": {
- "tertiary": {
- "source": "$btn-tertiary-hover-bg",
- "$value": "{color.light.500}"
- },
+ "tertiary": { "source": "$btn-tertiary-hover-bg", "$value": "{color.light.500}" },
"inverse-tertiary": {
"source": "$btn-inverse-tertiary-hover-bg",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.1 }],
"$value": "{color.white}"
}
},
"border": {
- "tertiary": {
- "source": "$btn-tertiary-hover-border-color",
- "$value": "transparent"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-hover-border-color",
- "$value": "transparent"
- }
+ "tertiary": { "source": "$btn-tertiary-hover-border-color", "$value": "transparent" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-border-color", "$value": "transparent" }
}
},
"active": {
"text": {
- "tertiary": {
- "source": "$btn-tertiary-active-color",
- "$value": "{color.gray.700}"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-active-color",
- "$value": "{color.white}"
- }
+ "tertiary": { "source": "$btn-tertiary-active-color", "$value": "{color.gray.700}" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-color", "$value": "{color.white}" }
},
"bg": {
- "tertiary": {
- "source": "$btn-tertiary-active-bg",
- "$value": "{color.light.500}"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-active-bg",
- "$value": "{color.btn.hover.bg.inverse-tertiary}"
- }
+ "tertiary": { "source": "$btn-tertiary-active-bg", "$value": "{color.light.500}" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-bg", "$value": "{color.btn.hover.bg.inverse-tertiary}" }
},
"border": {
- "tertiary": {
- "source": "$btn-tertiary-active-border-color",
- "$value": "transparent"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-active-border-color",
- "$value": "transparent"
- }
+ "tertiary": { "source": "$btn-tertiary-active-border-color", "$value": "transparent" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-border-color", "$value": "transparent" }
}
},
"focus": {
"text": {
- "tertiary": {
- "source": "$btn-tertiary-focus-color",
- "$value": "{color.btn.text.tertiary}"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-focus-color",
- "$value": "{color.btn.text.inverse-tertiary}"
- }
+ "tertiary": { "source": "$btn-tertiary-focus-color", "$value": "{color.btn.text.tertiary}" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-color", "$value": "{color.btn.text.inverse-tertiary}" }
},
"border": {
- "tertiary": {
- "source": "$btn-tertiary-focus-border-color",
- "$value": "{color.btn.border.tertiary}"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-focus-border-color",
- "$value": "transparent"
- }
+ "tertiary": { "source": "$btn-tertiary-focus-border-color", "$value": "{color.btn.border.tertiary}" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-border-color", "$value": "transparent" }
},
"bg": {
- "tertiary": {
- "source": "$btn-tertiary-focus-bg",
- "$value": "inherit"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-focus-bg",
- "$value": "inherit"
- }
+ "tertiary": { "source": "$btn-tertiary-focus-bg", "$value": "inherit" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-bg", "$value": "inherit" }
},
"outline": {
- "tertiary": {
- "source": "$btn-tertiary-focus-outline-color",
- "$value": "{color.theme.focus.primary}"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-focus-outline-color",
- "$value": "{color.white}"
- }
+ "tertiary": { "source": "$btn-tertiary-focus-outline-color", "$value": "{color.theme.focus.primary}" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-outline-color", "$value": "{color.white}" }
}
},
"disabled": {
"text": {
- "tertiary": {
- "source": "$btn-tertiary-disabled-color",
- "$value": "{color.btn.text.tertiary}"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-disabled-color",
- "$value": "{color.btn.text.inverse-tertiary}"
- }
+ "tertiary": { "source": "$btn-tertiary-disabled-color", "$value": "{color.btn.text.tertiary}" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-color", "$value": "{color.btn.text.inverse-tertiary}" }
},
"bg": {
- "tertiary": {
- "source": "$btn-tertiary-disabled-bg",
- "$value": "inherit"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-disabled-bg",
- "$value": "inherit"
- }
+ "tertiary": { "source": "$btn-tertiary-disabled-bg", "$value": "inherit" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-bg", "$value": "inherit" }
},
"border": {
- "tertiary": {
- "source": "$btn-tertiary-disabled-border-color",
- "$value": "{color.btn.border.tertiary}"
- },
- "inverse-tertiary": {
- "source": "$btn-inverse-tertiary-disabled-border-color",
- "$value": "{color.btn.border.inverse-tertiary}"
- }
+ "tertiary": { "source": "$btn-tertiary-disabled-border-color", "$value": "{color.btn.border.tertiary}" },
+ "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-border-color", "$value": "{color.btn.border.inverse-tertiary}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json
index 28d0d0b22d..f6b3c6929a 100644
--- a/tokens/src/themes/light/components/Button/warning.json
+++ b/tokens/src/themes/light/components/Button/warning.json
@@ -5,11 +5,7 @@
"text": {
"warning": {
"source": "$btn-warning-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.bg.warning}"
},
"outline-warning": {
@@ -36,11 +32,7 @@
},
"inverse-warning": {
"source": "$btn-warning-inverse-bg",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.text.inverse-warning}"
},
"inverse-outline-warning": {
@@ -70,11 +62,7 @@
"text": {
"warning": {
"source": "$btn-warning-hover-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.hover.bg.warning}"
},
"outline-warning": {
@@ -83,12 +71,7 @@
},
"inverse-warning": {
"source": "$btn-warning-inverse-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.text.inverse-warning}"
},
"inverse-outline-warning": {
@@ -107,12 +90,7 @@
},
"inverse-warning": {
"source": "$btn-warning-inverse-hover-bg",
- "modify": [
- {
- "type": "darken",
- "amount": 0.075
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.075 }],
"$value": "{color.btn.bg.inverse-warning}"
},
"inverse-outline-warning": {
@@ -143,39 +121,22 @@
"text": {
"warning": {
"source": "$btn-warning-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.warning}"
},
"outline-warning": {
"source": "$btn-warning-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.outline-warning}"
},
"inverse-warning": {
"source": "$btn-warning-inverse-active-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.1 }],
"$value": "{color.btn.text.inverse-warning}"
},
"inverse-outline-warning": {
"source": "$btn-warning-inverse-outline-active-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.btn.active.bg.inverse-outline-warning}"
}
},
diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json
index eadb849324..7c7e77a4e3 100644
--- a/tokens/src/themes/light/components/Card.json
+++ b/tokens/src/themes/light/components/Card.json
@@ -2,50 +2,24 @@
"$type": "color",
"color": {
"card": {
- "base": {
- "source": "$card-color",
- "$value": "inherit"
- },
+ "base": { "source": "$card-color", "$value": "inherit" },
"bg": {
- "base": {
- "source": "$card-bg",
- "$value": "{color.bg.base}"
- },
- "dark": {
- "source": "$card-bg-dark",
- "$value": "{color.primary.500}"
- },
- "muted": {
- "source": "$card-bg-muted",
- "$value": "{color.light.200}"
- }
+ "base": { "source": "$card-bg", "$value": "{color.bg.base}" },
+ "dark": { "source": "$card-bg-dark", "$value": "{color.primary.500}" },
+ "muted": { "source": "$card-bg-muted", "$value": "{color.light.200}" }
},
"border": {
"base": {
"source": "$card-border-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.125
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.125 }],
"$value": "{color.black}"
},
"focus": {
- "base": {
- "source": "$card-border-focus-color",
- "$value": "{color.primary.500}"
- },
- "dark": {
- "source": "$card-border-focus-color-dark",
- "$value": "{color.theme.focus.primary}"
- }
+ "base": { "source": "$card-border-focus-color", "$value": "{color.primary.500}" },
+ "dark": { "source": "$card-border-focus-color-dark", "$value": "{color.theme.focus.primary}" }
}
},
- "divider-bg": {
- "source": "$card-divider-bg",
- "$value": "{color.light.400}"
- }
+ "divider-bg": { "source": "$card-divider-bg", "$value": "{color.light.400}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Carousel.json b/tokens/src/themes/light/components/Carousel.json
index 12b442ab4e..fd4e5a58f4 100644
--- a/tokens/src/themes/light/components/Carousel.json
+++ b/tokens/src/themes/light/components/Carousel.json
@@ -3,21 +3,12 @@
"$type": "color",
"carousel": {
"control": {
- "base": {
- "source": "$carousel-control-color",
- "$value": "{color.white}"
- }
+ "base": { "source": "$carousel-control-color", "$value": "{color.white}" }
},
"indicator": {
- "active-bg": {
- "source": "$carousel-indicator-active-bg",
- "$value": "{color.white}"
- }
+ "active-bg": { "source": "$carousel-indicator-active-bg", "$value": "{color.white}" }
},
- "caption": {
- "source": "$carousel-caption-color",
- "$value": "{color.white}"
- }
+ "caption": { "source": "$carousel-caption-color", "$value": "{color.white}" }
}
},
"content": {
@@ -28,25 +19,13 @@
"prev-icon": {
"source": "$carousel-control-prev-icon-bg",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$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\")"
},
"next-icon": {
"source": "$carousel-control-next-icon-bg",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$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\")"
}
}
@@ -58,14 +37,8 @@
"carousel": {
"control": {
"opacity": {
- "base": {
- "source": "$carousel-control-opacity",
- "$value": ".5"
- },
- "hover": {
- "source": "$carousel-control-hover-opacity",
- "$value": ".9"
- }
+ "base": { "source": "$carousel-control-opacity", "$value": ".5" },
+ "hover": { "source": "$carousel-control-hover-opacity", "$value": ".9" }
}
}
}
diff --git a/tokens/src/themes/light/components/Chip.json b/tokens/src/themes/light/components/Chip.json
index 065bf4d66e..291598a431 100644
--- a/tokens/src/themes/light/components/Chip.json
+++ b/tokens/src/themes/light/components/Chip.json
@@ -3,72 +3,36 @@
"$type": "color",
"chip": {
"text": {
- "light": {
- "source": "$chip-light-color",
- "$value": "{color.black}"
- },
- "dark": {
- "source": "$chip-dark-color",
- "$value": "{color.white}"
- }
+ "light": { "source": "$chip-light-color", "$value": "{color.black}" },
+ "dark": { "source": "$chip-dark-color", "$value": "{color.white}" }
},
"bg": {
- "light": {
- "source": "$chip-light-bg-color",
- "$value": "{color.white}"
- },
- "dark": {
- "source": "$chip-dark-bg",
- "$value": "{color.primary.300}"
- }
+ "light": { "source": "$chip-light-bg-color", "$value": "{color.white}" },
+ "dark": { "source": "$chip-dark-bg", "$value": "{color.primary.300}" }
},
"border": {
- "base": {
- "source": "$chip-border-color",
- "$value": "{color.light.800}"
- },
+ "base": { "source": "$chip-border-color", "$value": "{color.light.800}" },
"focus": {
"selected": {
- "dark": {
- "source": "$chip-dark-selected-focus-border-color",
- "$value": "{color.chip.outline.dark}"
- },
- "light": {
- "source": "$chip-light-selected-focus-border-color",
- "$value": "{color.dark.500}"
- }
+ "dark": { "source": "$chip-dark-selected-focus-border-color", "$value": "{color.chip.outline.dark}" },
+ "light": { "source": "$chip-light-selected-focus-border-color", "$value": "{color.dark.500}" }
}
}
},
"label": {
- "base": {
- "source": "$chip-label-color",
- "$value": "{color.primary.700}"
- },
- "dark": {
- "source": "$chip-dark-label-color",
- "$value": "{color.chip.outline.dark}"
- }
+ "base": { "source": "$chip-label-color", "$value": "{color.primary.700}" },
+ "dark": { "source": "$chip-dark-label-color", "$value": "{color.chip.outline.dark}" }
},
"outline": {
- "dark": {
- "source": "$chip-dark-outline-color",
- "$value": "{color.white}"
- },
- "light": {
- "source": "$chip-light-outline-color",
- "$value": "{color.chip.label.base}"
- }
+ "dark": { "source": "$chip-dark-outline-color", "$value": "{color.white}" },
+ "light": { "source": "$chip-light-outline-color", "$value": "{color.chip.label.base}" }
}
}
},
"other": {
"$type": "ratio",
"chip": {
- "opacity-disabled": {
- "source": "$chip-disable-opacity",
- "$value": ".3"
- }
+ "opacity-disabled": { "source": "$chip-disable-opacity", "$value": ".3" }
}
}
}
diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json
index 658dafcb9e..f7994d321c 100644
--- a/tokens/src/themes/light/components/CloseButton.json
+++ b/tokens/src/themes/light/components/CloseButton.json
@@ -1,18 +1,12 @@
{
"color": {
"$type": "color",
- "close-button": {
- "source": "$close-color",
- "$value": "{color.black}"
- }
+ "close-button": { "source": "$close-color", "$value": "{color.black}" }
},
"elevation": {
"$type": "shadow",
"close-button": {
- "text-shadow": {
- "source": "$close-text-shadow",
- "$value": "0 1px 0 {color.white}"
- }
+ "text-shadow": { "source": "$close-text-shadow", "$value": "0 1px 0 {color.white}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json
index 5101ce576f..07785b9754 100644
--- a/tokens/src/themes/light/components/Code.json
+++ b/tokens/src/themes/light/components/Code.json
@@ -2,34 +2,19 @@
"color": {
"$type": "color",
"code": {
- "base": {
- "source": "$code-color",
- "$value": "#E83E8C"
- },
+ "base": { "source": "$code-color", "$value": "#E83E8C" },
"kbd": {
- "base": {
- "source": "$kbd-color",
- "$value": "{color.white}"
- },
- "bg": {
- "source": "$kbd-bg",
- "$value": "{color.gray.700}"
- }
+ "base": { "source": "$kbd-color", "$value": "{color.white}" },
+ "bg": { "source": "$kbd-bg", "$value": "{color.gray.700}" }
},
- "pre": {
- "source": "$pre-color",
- "$value": "{color.gray.900}"
- }
+ "pre": { "source": "$pre-color", "$value": "{color.gray.900}" }
}
},
"elevation": {
"$type": "shadow",
"code": {
"kbd": {
- "box-shadow": {
- "source": "$kbd-box-shadow",
- "$value": "none"
- }
+ "box-shadow": { "source": "$kbd-box-shadow", "$value": "none" }
}
}
}
diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json
index 386e446f7e..fae700aa26 100644
--- a/tokens/src/themes/light/components/DataTable.json
+++ b/tokens/src/themes/light/components/DataTable.json
@@ -3,34 +3,20 @@
"$type": "color",
"data-table": {
"bg": {
- "base": {
- "source": "$data-table-background-color",
- "$value": "{color.bg.base}"
- },
+ "base": { "source": "$data-table-background-color", "$value": "{color.bg.base}" },
"is-loading": {
"source": "$data-table-is-loading-bg",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.7
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.7 }],
"$value": "{color.white}"
}
},
- "border": {
- "source": "$data-table-border-color",
- "$value": "{color.light.300}"
- }
+ "border": { "source": "$data-table-border-color", "$value": "{color.light.300}" }
}
},
"elevation": {
"$type": "shadow",
"data-table": {
- "box-shadow": {
- "source": "$data-table-box-shadow",
- "$value": "{elevation.box-shadow.sm}"
- }
+ "box-shadow": { "source": "$data-table-box-shadow", "$value": "{elevation.box-shadow.sm}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json
index c642d433dc..ba760ef4c0 100644
--- a/tokens/src/themes/light/components/Dropdown.json
+++ b/tokens/src/themes/light/components/Dropdown.json
@@ -2,77 +2,37 @@
"color": {
"$type": "color",
"dropdown": {
- "text": {
- "source": "$dropdown-color",
- "$value": "{color.body.base}"
- },
- "header": {
- "source": "$dropdown-header-color",
- "$value": "{color.gray.500}"
- },
- "bg": {
- "source": "$dropdown-bg",
- "$value": "{color.bg.base}"
- },
+ "text": { "source": "$dropdown-color", "$value": "{color.body.base}" },
+ "header": { "source": "$dropdown-header-color", "$value": "{color.gray.500}" },
+ "bg": { "source": "$dropdown-bg", "$value": "{color.bg.base}" },
"border": {
"source": "$dropdown-border-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.15
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.15 }],
"$value": "{color.black}"
},
- "divider-bg": {
- "source": "$dropdown-divider-bg",
- "$value": "{color.gray.100}"
- },
+ "divider-bg": { "source": "$dropdown-divider-bg", "$value": "{color.gray.100}" },
"link": {
- "base": {
- "source": "$dropdown-link-color",
- "$value": "{color.gray.900}"
- },
+ "base": { "source": "$dropdown-link-color", "$value": "{color.gray.900}" },
"hover": {
"base": {
"source": "$dropdown-link-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.5
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.5 }],
"$value": "{color.gray.900}"
},
- "bg": {
- "source": "$dropdown-link-hover-bg",
- "$value": "{color.light.300}"
- }
+ "bg": { "source": "$dropdown-link-hover-bg", "$value": "{color.light.300}" }
},
"active": {
- "base": {
- "source": "$dropdown-link-active-color",
- "$value": "{color.active}"
- },
- "bg": {
- "source": "$dropdown-link-active-bg",
- "$value": "{color.bg.active}"
- }
+ "base": { "source": "$dropdown-link-active-color", "$value": "{color.active}" },
+ "bg": { "source": "$dropdown-link-active-bg", "$value": "{color.bg.active}" }
},
- "disabled": {
- "source": "$dropdown-link-disabled-color",
- "$value": "{color.disabled}"
- }
+ "disabled": { "source": "$dropdown-link-disabled-color", "$value": "{color.disabled}" }
}
}
},
"elevation": {
"$type": "shadow",
"dropdown": {
- "box-shadow": {
- "source": "$dropdown-box-shadow",
- "$value": "none"
- }
+ "box-shadow": { "source": "$dropdown-box-shadow", "$value": "none" }
}
}
}
diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json
index c6f4bdb016..c757e73342 100644
--- a/tokens/src/themes/light/components/Dropzone.json
+++ b/tokens/src/themes/light/components/Dropzone.json
@@ -2,41 +2,20 @@
"color": {
"$type": "color",
"dropzone": {
- "error-wrapper": {
- "source": "$dropzone-error-wrapper-color",
- "$value": "{color.danger.500}"
- },
- "restriction-msg": {
- "source": "$dropzone-restriction-msg-color",
- "$value": "{color.gray.500}"
- },
+ "error-wrapper": { "source": "$dropzone-error-wrapper-color", "$value": "{color.danger.500}" },
+ "restriction-msg": { "source": "$dropzone-restriction-msg-color", "$value": "{color.gray.500}" },
"border": {
- "base": {
- "source": "$dropzone-border-color-default",
- "$value": "{color.gray.500}"
- }
+ "base": { "source": "$dropzone-border-color-default", "$value": "{color.gray.500}" }
}
}
},
"elevation": {
"$type": "shadow",
"dropzone": {
- "hover": {
- "source": "$dropzone-box-shadow-hover",
- "$value": "inset 0 0 0 2px {color.info.300}"
- },
- "focus": {
- "source": "$dropzone-box-shadow-focus",
- "$value": "inset 0 0 0 2px {color.info.300}"
- },
- "active": {
- "source": "$dropzone-box-shadow-active",
- "$value": "inset 0 0 0 2px {color.primary.500}"
- },
- "error": {
- "source": "$dropzone-box-shadow-error",
- "$value": "inset 0 0 0 2px {color.danger.300}"
- }
+ "hover": { "source": "$dropzone-box-shadow-hover", "$value": "inset 0 0 0 2px {color.info.300}" },
+ "focus": { "source": "$dropzone-box-shadow-focus", "$value": "inset 0 0 0 2px {color.info.300}" },
+ "active": { "source": "$dropzone-box-shadow-active", "$value": "inset 0 0 0 2px {color.primary.500}" },
+ "error": { "source": "$dropzone-box-shadow-error", "$value": "inset 0 0 0 2px {color.danger.300}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json
index 36b54d0c83..261f97bddd 100644
--- a/tokens/src/themes/light/components/Form/color.json
+++ b/tokens/src/themes/light/components/Form/color.json
@@ -3,154 +3,66 @@
"form": {
"input": {
"$type": "color",
- "base": {
- "source": "$input-color",
- "$value": "{color.gray.700}"
- },
- "placeholder": {
- "source": "$input-placeholder-color",
- "$value": "{color.gray.500}"
- },
- "plaintext": {
- "source": "$input-plaintext-color",
- "$value": "{color.body.base}"
- },
- "border": {
- "source": "$input-border-color",
- "$value": "{color.gray.500}"
- },
+ "base": { "source": "$input-color", "$value": "{color.gray.700}" },
+ "placeholder": { "source": "$input-placeholder-color", "$value": "{color.gray.500}" },
+ "plaintext": { "source": "$input-plaintext-color", "$value": "{color.body.base}" },
+ "border": { "source": "$input-border-color", "$value": "{color.gray.500}" },
"bg": {
- "base": {
- "source": "$input-bg",
- "$value": "{color.bg.base}"
- },
- "disabled": {
- "source": "$input-disabled-bg",
- "$value": "{color.gray.100}"
- }
+ "base": { "source": "$input-bg", "$value": "{color.bg.base}" },
+ "disabled": { "source": "$input-disabled-bg", "$value": "{color.gray.100}" }
},
"group": {
"addon": {
- "base": {
- "source": "$input-group-addon-color",
- "$value": "{color.form.input.base}"
- },
- "border": {
- "source": "$input-group-addon-border-color",
- "$value": "{color.form.input.border}"
- },
- "bg": {
- "source": "$input-group-addon-bg",
- "$value": "{color.gray.100}"
- }
+ "base": { "source": "$input-group-addon-color", "$value": "{color.form.input.base}" },
+ "border": { "source": "$input-group-addon-border-color", "$value": "{color.form.input.border}" },
+ "bg": { "source": "$input-group-addon-bg", "$value": "{color.gray.100}" }
}
},
"focus": {
- "base": {
- "source": "$input-focus-color",
- "$value": "{color.form.input.base}"
- },
- "border": {
- "source": "$input-focus-border-color",
- "$value": "{color.input.focus}"
- },
- "bg": {
- "source": "$input-focus-bg",
- "$value": "{color.form.input.bg.base}"
- }
+ "base": { "source": "$input-focus-color", "$value": "{color.form.input.base}" },
+ "border": { "source": "$input-focus-border-color", "$value": "{color.input.focus}" },
+ "bg": { "source": "$input-focus-bg", "$value": "{color.form.input.bg.base}" }
}
},
"control": {
"indicator": {
"$type": "color",
- "border": {
- "source": "$custom-control-indicator-border-color",
- "$value": "{color.gray.700}"
- },
+ "border": { "source": "$custom-control-indicator-border-color", "$value": "{color.gray.700}" },
"bg": {
- "base": {
- "source": "$custom-control-indicator-bg",
- "$value": "{color.form.input.bg.base}"
- },
- "disabled": {
- "source": "$custom-control-indicator-disabled-bg",
- "$value": "{color.form.input.bg.disabled}"
- }
+ "base": { "source": "$custom-control-indicator-bg", "$value": "{color.form.input.bg.base}" },
+ "disabled": { "source": "$custom-control-indicator-disabled-bg", "$value": "{color.form.input.bg.disabled}" }
},
"checked": {
- "base": {
- "source": "$custom-control-indicator-checked-color",
- "$value": "{color.bg.active}"
- },
- "valid": {
- "source": "$custom-control-indicator-checked-valid-color",
- "$value": "{color.success.base}"
- },
- "invalid": {
- "source": "$custom-control-indicator-checked-invalid-color",
- "$value": "{color.danger.base}"
- },
+ "base": { "source": "$custom-control-indicator-checked-color", "$value": "{color.bg.active}" },
+ "valid": { "source": "$custom-control-indicator-checked-valid-color", "$value": "{color.success.base}" },
+ "invalid": { "source": "$custom-control-indicator-checked-invalid-color", "$value": "{color.danger.base}" },
"bg": {
- "base": {
- "source": "$custom-control-indicator-checked-bg",
- "$value": "{color.bg.active}"
- },
+ "base": { "source": "$custom-control-indicator-checked-bg", "$value": "{color.bg.active}" },
"disabled": {
"source": "$custom-control-indicator-checked-disabled-bg",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.5
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.5 }],
"$value": "{color.primary.base}"
}
},
"border": {
- "base": {
- "source": "$custom-control-indicator-checked-border-color",
- "$value": "{color.form.control.indicator.checked.base}"
- },
- "focus": {
- "source": "$custom-control-indicator-focus-border-color",
- "$value": "{color.form.input.focus.border}"
- }
+ "base": { "source": "$custom-control-indicator-checked-border-color", "$value": "{color.form.control.indicator.checked.base}" },
+ "focus": { "source": "$custom-control-indicator-focus-border-color", "$value": "{color.form.input.focus.border}" }
}
},
"active": {
- "base": {
- "source": "$custom-control-indicator-active-color",
- "$value": "{color.active}"
- },
- "bg": {
- "source": "$custom-control-indicator-active-bg",
- "$value": "{color.bg.active}"
- },
- "border": {
- "source": "$custom-control-indicator-active-border-color",
- "$value": "{color.form.control.indicator.active.bg}"
- }
+ "base": { "source": "$custom-control-indicator-active-color", "$value": "{color.active}" },
+ "bg": { "source": "$custom-control-indicator-active-bg", "$value": "{color.bg.active}" },
+ "border": { "source": "$custom-control-indicator-active-border-color", "$value": "{color.form.control.indicator.active.bg}" }
}
},
"label": {
"$type": "color",
- "base": {
- "source": "$custom-control-label-color",
- "$value": "inherit"
- },
- "disabled": {
- "source": "$custom-control-label-disabled-color",
- "$value": "{color.disabled}"
- },
+ "base": { "source": "$custom-control-label-color", "$value": "inherit" },
+ "disabled": { "source": "$custom-control-label-disabled-color", "$value": "{color.disabled}" },
"floating": {
"text": {
"source": "$form-control-floating-label-text-bg",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.1 }],
"$value": "{color.form.input.bg.base}"
}
}
@@ -159,18 +71,9 @@
"$type": "color",
"indicator": {
"indeterminate": {
- "base": {
- "source": "$custom-checkbox-indicator-indeterminate-color",
- "$value": "{color.form.control.indicator.checked.base}"
- },
- "bg": {
- "source": "$custom-checkbox-indicator-indeterminate-bg",
- "$value": "{color.bg.active}"
- },
- "border": {
- "source": "$custom-checkbox-indicator-indeterminate-border-color",
- "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}"
- }
+ "base": { "source": "$custom-checkbox-indicator-indeterminate-color", "$value": "{color.form.control.indicator.checked.base}" },
+ "bg": { "source": "$custom-checkbox-indicator-indeterminate-bg", "$value": "{color.bg.active}" },
+ "border": { "source": "$custom-checkbox-indicator-indeterminate-border-color", "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}" }
}
}
},
@@ -178,10 +81,7 @@
"$type": "color",
"indicator": {
"checked": {
- "bg": {
- "source": "$custom-switch-indicator-checked-bg",
- "$value": "{color.success.base}"
- }
+ "bg": { "source": "$custom-switch-indicator-checked-bg", "$value": "{color.success.base}" }
}
}
},
@@ -198,10 +98,7 @@
},
"indicator": {
"$type": "color",
- "base": {
- "source": "$custom-select-indicator-color",
- "$value": "{color.theme.hover.gray}"
- }
+ "base": { "source": "$custom-select-indicator-color", "$value": "{color.theme.hover.gray}" }
},
"bg": {
"base": {
@@ -222,42 +119,22 @@
},
"border": {
"$type": "color",
- "base": {
- "source": "$custom-select-border-color",
- "$value": "{color.form.input.border}"
- },
- "focus": {
- "source": "$custom-select-focus-border-color",
- "$value": "{color.form.input.focus.border}"
- }
+ "base": { "source": "$custom-select-border-color", "$value": "{color.form.input.border}" },
+ "focus": { "source": "$custom-select-focus-border-color", "$value": "{color.form.input.focus.border}" }
}
},
"range": {
"$type": "color",
"track": {
- "bg": {
- "source": "$custom-range-track-bg",
- "$value": "{color.gray.300}"
- }
+ "bg": { "source": "$custom-range-track-bg", "$value": "{color.gray.300}" }
},
"thumb": {
"bg": {
- "base": {
- "source": "$custom-range-thumb-bg",
- "$value": "{color.bg.active}"
- },
- "disabled": {
- "source": "$custom-range-thumb-disabled-bg",
- "$value": "{color.disabled}"
- },
+ "base": { "source": "$custom-range-thumb-bg", "$value": "{color.bg.active}" },
+ "disabled": { "source": "$custom-range-thumb-disabled-bg", "$value": "{color.disabled}" },
"active": {
"source": "$custom-range-thumb-active-bg",
- "modify": [
- {
- "type": "lighten",
- "amount": "0.35"
- }
- ],
+ "modify": [{ "type": "lighten", "amount": "0.35" }],
"$value": "{color.bg.active}"
}
}
@@ -265,91 +142,44 @@
},
"file": {
"$type": "color",
- "base": {
- "source": "$custom-file-color",
- "$value": "{color.form.input.base}"
- },
+ "base": { "source": "$custom-file-color", "$value": "{color.form.input.base}" },
"bg": {
- "base": {
- "source": "$custom-file-bg",
- "$value": "{color.form.input.bg.base}"
- },
- "disabled": {
- "source": "$custom-file-disabled-bg",
- "$value": "{color.form.input.bg.disabled}"
- }
+ "base": { "source": "$custom-file-bg", "$value": "{color.form.input.bg.base}" },
+ "disabled": { "source": "$custom-file-disabled-bg", "$value": "{color.form.input.bg.disabled}" }
},
"button": {
- "base": {
- "source": "$custom-file-button-color",
- "$value": "{color.form.control.file.base}"
- },
- "bg": {
- "source": "$custom-file-button-bg",
- "$value": "{color.form.input.group.addon.bg}"
- }
+ "base": { "source": "$custom-file-button-color", "$value": "{color.form.control.file.base}" },
+ "bg": { "source": "$custom-file-button-bg", "$value": "{color.form.input.group.addon.bg}" }
},
"border": {
- "base": {
- "source": "$custom-file-border-color",
- "$value": "{color.form.input.border}"
- },
- "focus": {
- "source": "$custom-file-focus-border-color",
- "$value": "{color.form.input.focus.border}"
- }
+ "base": { "source": "$custom-file-border-color", "$value": "{color.form.input.border}" },
+ "focus": { "source": "$custom-file-focus-border-color", "$value": "{color.form.input.focus.border}" }
}
}
},
"feedback": {
"$type": "color",
- "valid": {
- "source": "$form-feedback-valid-color",
- "$value": "{color.success.base}"
- },
- "invalid": {
- "source": "$form-feedback-invalid-color",
- "$value": "{color.danger.base}"
- },
+ "valid": { "source": "$form-feedback-valid-color", "$value": "{color.success.base}" },
+ "invalid": { "source": "$form-feedback-invalid-color", "$value": "{color.danger.base}" },
"icon": {
- "valid": {
- "source": "$form-feedback-icon-valid-color",
- "$value": "{color.form.feedback.valid}"
- },
- "invalid": {
- "source": "$form-feedback-icon-invalid-color",
- "$value": "{color.form.feedback.invalid}"
- }
+ "valid": { "source": "$form-feedback-icon-valid-color", "$value": "{color.form.feedback.valid}" },
+ "invalid": { "source": "$form-feedback-icon-invalid-color", "$value": "{color.form.feedback.invalid}" }
},
"tooltip": {
"valid": {
"source": "$form-feedback-tooltip-valid-color",
- "modify": [
- {
- "type": "color-yiq"
- }
- ],
+ "modify": [{ "type": "color-yiq" }],
"$value": "{color.form.feedback.valid}"
},
"bg": {
"valid": {
"source": "$form-feedback-tooltip-valid-bg",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.9
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.9 }],
"$value": "{color.form.feedback.valid}"
},
"invalid": {
"source": "$form-feedback-tooltip-invalid-bg",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.9
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.9 }],
"$value": "{color.form.feedback.invalid}"
}
},
@@ -357,22 +187,12 @@
"focus": {
"valid": {
"source": "$form-feedback-focus-box-shadow-valid-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.25
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.25 }],
"$value": "{color.form.feedback.valid}"
},
"invalid": {
"source": "$form-feedback-focus-box-shadow-invalid-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.25
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.25 }],
"$value": "{color.form.feedback.invalid}"
}
}
@@ -381,22 +201,12 @@
"checked": {
"valid": {
"source": "$form-feedback-checked-valid-color",
- "modify": [
- {
- "type": "lighten",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "lighten", "amount": 0.1 }],
"$value": "{color.form.feedback.valid}"
},
"invalid": {
"source": "$form-feedback-checked-invalid-color",
- "modify": [
- {
- "type": "lighten",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "lighten", "amount": 0.1 }],
"$value": "{color.form.feedback.invalid}"
}
}
diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
index 3ad3c6a081..19c3dc837b 100644
--- a/tokens/src/themes/light/components/Form/elevation.json
+++ b/tokens/src/themes/light/components/Form/elevation.json
@@ -3,54 +3,27 @@
"elevation": {
"form": {
"input": {
- "base": {
- "source": "$input-box-shadow",
- "$value": "none"
- },
- "focus": {
- "source": "$input-focus-box-shadow",
- "$value": "0 0 0 1px {color.primary.500}"
- }
+ "base": { "source": "$input-box-shadow", "$value": "none" },
+ "focus": { "source": "$input-focus-box-shadow", "$value": "0 0 0 1px {color.primary.500}" }
},
"control": {
"indicator": {
- "base": {
- "source": "$custom-control-indicator-box-shadow",
- "$value": "{elevation.form.input.base}"
- },
+ "base": { "source": "$custom-control-indicator-box-shadow", "$value": "{elevation.form.input.base}" },
"checked": {
- "base": {
- "source": "$custom-control-indicator-checked-box-shadow",
- "$value": "none"
- },
- "focus": {
- "source": "$custom-control-indicator-focus-box-shadow",
- "$value": "0 0 0 4px rgba(0, 0, 0, .1)"
- }
+ "base": { "source": "$custom-control-indicator-checked-box-shadow", "$value": "none" },
+ "focus": { "source": "$custom-control-indicator-focus-box-shadow", "$value": "0 0 0 4px rgba(0, 0, 0, .1)" }
},
- "active": {
- "source": "$custom-control-indicator-active-box-shadow",
- "$value": "none"
- }
+ "active": { "source": "$custom-control-indicator-active-box-shadow", "$value": "none" }
},
"checkbox": {
"indicator": {
- "indeterminate": {
- "source": "$custom-checkbox-indicator-indeterminate-box-shadow",
- "$value": "none"
- }
+ "indeterminate": { "source": "$custom-checkbox-indicator-indeterminate-box-shadow", "$value": "none" }
}
},
"range": {
- "track": {
- "source": "$custom-range-track-box-shadow",
- "$value": "none"
- },
+ "track": { "source": "$custom-range-track-box-shadow", "$value": "none" },
"thumb": {
- "base": {
- "source": "$custom-range-thumb-box-shadow",
- "$value": "none"
- },
+ "base": { "source": "$custom-range-thumb-box-shadow", "$value": "none" },
"focus": {
"source": "$custom-range-thumb-focus-box-shadow",
"$value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}"
@@ -58,25 +31,13 @@
}
},
"file": {
- "base": {
- "source": "$custom-file-box-shadow",
- "$value": "{elevation.form.input.base}"
- },
- "focus": {
- "source": "$custom-file-focus-box-shadow",
- "$value": "{elevation.form.input.focus}"
- }
+ "base": { "source": "$custom-file-box-shadow", "$value": "{elevation.form.input.base}" },
+ "focus": { "source": "$custom-file-focus-box-shadow", "$value": "{elevation.form.input.focus}" }
},
"select": {
"border": {
- "base": {
- "source": "$custom-select-box-shadow",
- "$value": "none"
- },
- "focus": {
- "source": "$custom-select-focus-box-shadow",
- "$value": "{elevation.input.btn-focus.box-shadow}"
- }
+ "base": { "source": "$custom-select-box-shadow", "$value": "none" },
+ "focus": { "source": "$custom-select-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json
index 00bc6b1945..781d427b6a 100644
--- a/tokens/src/themes/light/components/Form/other.json
+++ b/tokens/src/themes/light/components/Form/other.json
@@ -19,37 +19,19 @@
"base": {
"source": "$custom-checkbox-indicator-icon-checked",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$value": "url(\"data:image/svg+xml,\")"
},
"valid": {
"source": "$custom-checkbox-indicator-icon-valid-checked",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$value": "url(\"data:image/svg+xml,\")"
},
"invalid": {
"source": "$custom-checkbox-indicator-icon-invalid-checked",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$value": "url(\"data:image/svg+xml,\")"
}
},
@@ -57,13 +39,7 @@
"icon": {
"source": "$custom-checkbox-indicator-icon-indeterminate",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$value": "url(\"data:image/svg+xml,\")"
}
}
@@ -76,37 +52,19 @@
"base": {
"source": "$custom-radio-indicator-icon-checked",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$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\")"
},
"valid": {
"source": "$custom-radio-indicator-icon-valid-checked",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$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.valid}'/%3e%3c/svg%3e\")"
},
"invalid": {
"source": "$custom-radio-indicator-icon-invalid-checked",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$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.invalid}'/%3e%3c/svg%3e\")"
}
}
@@ -118,25 +76,13 @@
"icon-off": {
"source": "$custom-switch-indicator-icon-off",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$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\")"
},
"icon-on": {
"source": "$custom-switch-indicator-icon-on",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$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\")"
}
}
@@ -147,13 +93,7 @@
"icon": {
"source": "$custom-select-indicator",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$value": "url('data:image/svg+xml,')"
}
},
@@ -170,25 +110,13 @@
"valid": {
"source": "$form-feedback-icon-valid",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$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\")"
},
"invalid": {
"source": "$form-feedback-icon-invalid",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$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\")"
}
}
diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json
index 6147e55941..e6d1f9f50a 100644
--- a/tokens/src/themes/light/components/IconButton.json
+++ b/tokens/src/themes/light/components/IconButton.json
@@ -3,802 +3,367 @@
"$type": "color",
"icon-button": {
"bg": {
- "base": {
- "source": "$btn-icon-bg",
- "$value": "transparent"
- },
+ "base": { "source": "$btn-icon-bg", "$value": "transparent" },
"primary": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- },
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.bg.base}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- }
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" }
},
"active": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- }
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.bg.base}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
}
},
"secondary": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.secondary.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- },
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.secondary.base}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- }
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" }
},
"active": {
- "base": {
- "$value": "{color.secondary.base}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.secondary.active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.secondary.active.base}"
- }
+ "base": { "$value": "{color.secondary.base}" },
+ "hover": { "$value": "{color.icon-button.bg.secondary.active.base}" },
+ "focus": { "$value": "{color.icon-button.bg.secondary.active.base}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
}
},
"brand": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.brand.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- },
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.brand.base}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- }
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" }
},
"active": {
- "base": {
- "$value": "{color.brand.base}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.brand.active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.brand.active.base}"
- }
+ "base": { "$value": "{color.brand.base}" },
+ "hover": { "$value": "{color.icon-button.bg.brand.active.base}" },
+ "focus": { "$value": "{color.icon-button.bg.brand.active.base}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
}
},
"success": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.success.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- },
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.success.base}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- }
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" }
},
"active": {
- "base": {
- "$value": "{color.success.base}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.success.active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.success.active.base}"
- }
+ "base": { "$value": "{color.success.base}" },
+ "hover": { "$value": "{color.icon-button.bg.success.active.base}" },
+ "focus": { "$value": "{color.icon-button.bg.success.active.base}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
}
},
"warning": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.warning.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- },
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.warning.base}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- }
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" }
},
"active": {
- "base": {
- "$value": "{color.warning.base}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.warning.active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.warning.active.base}"
- }
+ "base": { "$value": "{color.warning.base}" },
+ "hover": { "$value": "{color.icon-button.bg.warning.active.base}" },
+ "focus": { "$value": "{color.icon-button.bg.warning.active.base}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
}
},
"danger": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.danger.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- },
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.danger.base}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- }
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" }
},
"active": {
- "base": {
- "$value": "{color.danger.base}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.danger.active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.danger.active.base}"
- }
+ "base": { "$value": "{color.danger.base}" },
+ "hover": { "$value": "{color.icon-button.bg.danger.active.base}" },
+ "focus": { "$value": "{color.icon-button.bg.danger.active.base}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
}
},
"light": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.light.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- },
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.light.base}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- }
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" }
},
"active": {
- "base": {
- "$value": "{color.light.base}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.light.active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.light.active.base}"
- }
+ "base": { "$value": "{color.light.base}" },
+ "hover": { "$value": "{color.icon-button.bg.light.active.base}" },
+ "focus": { "$value": "{color.icon-button.bg.light.active.base}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
}
},
"dark": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.dark.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- },
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.dark.base}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- }
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" }
},
"active": {
- "base": {
- "$value": "{color.dark.base}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.dark.active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.dark.active.base}"
- }
+ "base": { "$value": "{color.dark.base}" },
+ "hover": { "$value": "{color.icon-button.bg.dark.active.base}" },
+ "focus": { "$value": "{color.icon-button.bg.dark.active.base}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
}
},
"black": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.black}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- },
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.black}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- }
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" }
},
"active": {
- "base": {
- "$value": "{color.black}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.black.active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.black.active.base}"
- }
+ "base": { "$value": "{color.black}" },
+ "hover": { "$value": "{color.icon-button.bg.black.active.base}" },
+ "focus": { "$value": "{color.icon-button.bg.black.active.base}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
}
}
},
"text": {
"primary": {
- "base": {
- "$value": "{color.primary.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- },
+ "base": { "$value": "{color.primary.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.base}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.bg.base}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.icon-button.bg.base}"
- },
- "hover": {
- "$value": "{color.icon-button.bg.base}"
- },
- "focus": {
- "$value": "{color.icon-button.bg.base}"
- }
+ "base": { "$value": "{color.icon-button.bg.base}" },
+ "hover": { "$value": "{color.icon-button.bg.base}" },
+ "focus": { "$value": "{color.icon-button.bg.base}" }
}
},
"secondary": {
- "base": {
- "$value": "{color.secondary.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.text.secondary.base}"
- },
+ "base": { "$value": "{color.secondary.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.text.secondary.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.secondary.base}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.secondary.base}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.secondary.base}"
- },
- "hover": {
- "$value": "{color.icon-button.text.secondary.inverse-active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.text.secondary.inverse-active.base}"
- }
+ "base": { "$value": "{color.secondary.base}" },
+ "hover": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" },
+ "focus": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" }
}
},
"brand": {
- "base": {
- "$value": "{color.brand.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.text.brand.base}"
- },
+ "base": { "$value": "{color.brand.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.text.brand.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.brand.base}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.brand.base}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.brand.base}"
- },
- "hover": {
- "$value": "{color.icon-button.text.brand.inverse-active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.text.brand.inverse-active.base}"
- }
+ "base": { "$value": "{color.brand.base}" },
+ "hover": { "$value": "{color.icon-button.text.brand.inverse-active.base}" },
+ "focus": { "$value": "{color.icon-button.text.brand.inverse-active.base}" }
}
},
"success": {
- "base": {
- "$value": "{color.success.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.text.success.base}"
- },
+ "base": { "$value": "{color.success.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.text.success.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.success.base}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.success.base}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.success.base}"
- },
- "hover": {
- "$value": "{color.icon-button.text.success.inverse-active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.text.success.inverse-active.base}"
- }
+ "base": { "$value": "{color.success.base}" },
+ "hover": { "$value": "{color.icon-button.text.success.inverse-active.base}" },
+ "focus": { "$value": "{color.icon-button.text.success.inverse-active.base}" }
}
},
"warning": {
- "base": {
- "$value": "{color.warning.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.text.warning.base}"
- },
+ "base": { "$value": "{color.warning.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.text.warning.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.warning.base}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.warning.base}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.warning.base}"
- },
- "hover": {
- "$value": "{color.icon-button.text.warning.inverse-active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.text.warning.inverse-active.base}"
- }
+ "base": { "$value": "{color.warning.base}" },
+ "hover": { "$value": "{color.icon-button.text.warning.inverse-active.base}" },
+ "focus": { "$value": "{color.icon-button.text.warning.inverse-active.base}" }
}
},
"danger": {
- "base": {
- "$value": "{color.danger.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.text.danger.base}"
- },
+ "base": { "$value": "{color.danger.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.text.danger.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.danger.base}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.danger.base}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.danger.base}"
- },
- "hover": {
- "$value": "{color.icon-button.text.danger.inverse-active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.text.danger.inverse-active.base}"
- }
+ "base": { "$value": "{color.danger.base}" },
+ "hover": { "$value": "{color.icon-button.text.danger.inverse-active.base}" },
+ "focus": { "$value": "{color.icon-button.text.danger.inverse-active.base}" }
}
},
"light": {
- "base": {
- "$value": "{color.light.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.text.light.base}"
- },
+ "base": { "$value": "{color.light.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.text.light.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.light.base}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.light.base}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.light.base}"
- },
- "hover": {
- "$value": "{color.icon-button.text.light.inverse-active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.text.light.inverse-active.base}"
- }
+ "base": { "$value": "{color.light.base}" },
+ "hover": { "$value": "{color.icon-button.text.light.inverse-active.base}" },
+ "focus": { "$value": "{color.icon-button.text.light.inverse-active.base}" }
}
},
"dark": {
- "base": {
- "$value": "{color.dark.base}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.text.dark.base}"
- },
+ "base": { "$value": "{color.dark.base}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.text.dark.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.dark.base}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.dark.base}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.dark.base}"
- },
- "hover": {
- "$value": "{color.icon-button.text.dark.inverse-active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.text.dark.inverse-active.base}"
- }
+ "base": { "$value": "{color.dark.base}" },
+ "hover": { "$value": "{color.icon-button.text.dark.inverse-active.base}" },
+ "focus": { "$value": "{color.icon-button.text.dark.inverse-active.base}" }
}
},
"black": {
- "base": {
- "$value": "{color.black}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.text.black.base}"
- },
+ "base": { "$value": "{color.black}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.text.black.base}" },
"inverse": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.black}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.black}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"active": {
- "base": {
- "$value": "{color.icon-button.accent}"
- },
- "hover": {
- "$value": "{color.icon-button.accent}"
- },
- "focus": {
- "$value": "{color.icon-button.accent}"
- }
+ "base": { "$value": "{color.icon-button.accent}" },
+ "hover": { "$value": "{color.icon-button.accent}" },
+ "focus": { "$value": "{color.icon-button.accent}" }
},
"inverse-active": {
- "base": {
- "$value": "{color.black}"
- },
- "hover": {
- "$value": "{color.icon-button.text.black.inverse-active.base}"
- },
- "focus": {
- "$value": "{color.icon-button.text.black.inverse-active.base}"
- }
+ "base": { "$value": "{color.black}" },
+ "hover": { "$value": "{color.icon-button.text.black.inverse-active.base}" },
+ "focus": { "$value": "{color.icon-button.text.black.inverse-active.base}" }
}
}
},
@@ -817,130 +382,58 @@
"icon-button": {
"box-shadow": {
"primary": {
- "base": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.bg.base}"
- },
- "inverse": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}"
- },
- "active": {
- "$value": "none"
- },
- "inverse-active": {
- "$value": "none"
- }
+ "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.bg.base}" },
+ "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+ "active": { "$value": "none" },
+ "inverse-active": { "$value": "none" }
},
"secondary": {
- "base": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}"
- },
- "inverse": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}"
- },
- "active": {
- "$value": "none"
- },
- "inverse-active": {
- "$value": "none"
- }
+ "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}" },
+ "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+ "active": { "$value": "none" },
+ "inverse-active": { "$value": "none" }
},
"brand": {
- "base": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}"
- },
- "inverse": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}"
- },
- "active": {
- "$value": "none"
- },
- "inverse-active": {
- "$value": "none"
- }
+ "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}" },
+ "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+ "active": { "$value": "none" },
+ "inverse-active": { "$value": "none" }
},
"success": {
- "base": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}"
- },
- "inverse": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}"
- },
- "active": {
- "$value": "none"
- },
- "inverse-active": {
- "$value": "none"
- }
+ "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}" },
+ "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+ "active": { "$value": "none" },
+ "inverse-active": { "$value": "none" }
},
"warning": {
- "base": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}"
- },
- "inverse": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}"
- },
- "active": {
- "$value": "none"
- },
- "inverse-active": {
- "$value": "none"
- }
+ "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}" },
+ "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+ "active": { "$value": "none" },
+ "inverse-active": { "$value": "none" }
},
"danger": {
- "base": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}"
- },
- "inverse": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}"
- },
- "active": {
- "$value": "none"
- },
- "inverse-active": {
- "$value": "none"
- }
+ "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}" },
+ "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+ "active": { "$value": "none" },
+ "inverse-active": { "$value": "none" }
},
"light": {
- "base": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}"
- },
- "inverse": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}"
- },
- "active": {
- "$value": "none"
- },
- "inverse-active": {
- "$value": "none"
- }
+ "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}" },
+ "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+ "active": { "$value": "none" },
+ "inverse-active": { "$value": "none" }
},
"dark": {
- "base": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}"
- },
- "inverse": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}"
- },
- "active": {
- "$value": "none"
- },
- "inverse-active": {
- "$value": "none"
- }
+ "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}" },
+ "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+ "active": { "$value": "none" },
+ "inverse-active": { "$value": "none" }
},
"black": {
- "base": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}"
- },
- "inverse": {
- "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}"
- },
- "active": {
- "$value": "none"
- },
- "inverse-active": {
- "$value": "none"
- }
+ "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}" },
+ "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+ "active": { "$value": "none" },
+ "inverse-active": { "$value": "none" }
}
}
}
diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json
index 0dd433e4c3..8c4df0f914 100644
--- a/tokens/src/themes/light/components/Image.json
+++ b/tokens/src/themes/light/components/Image.json
@@ -2,18 +2,10 @@
"color": {
"$type": "color",
"image": {
- "figure-caption": {
- "source": "$figure-caption-color",
- "$value": "{color.gray.500}"
- },
+ "figure-caption": { "source": "$figure-caption-color", "$value": "{color.gray.500}" },
"thumbnail": {
- "bg": {
- "source": "$thumbnail-bg",
- "$value": "{color.body.bg}"
- },
- "border": {
- "source": "$thumbnail-border-color",
- "$value": "{color.gray.200}"
+ "bg": { "source": "$thumbnail-bg", "$value": "{color.body.bg}" },
+ "border": { "source": "$thumbnail-border-color", "$value": "{color.gray.200}"
}
}
}
@@ -22,10 +14,7 @@
"$type": "shadow",
"image": {
"thumbnail": {
- "box-shadow": {
- "source": "$thumbnail-box-shadow",
- "$value": "none"
- }
+ "box-shadow": { "source": "$thumbnail-box-shadow", "$value": "none" }
}
}
}
diff --git a/tokens/src/themes/light/components/Menu.json b/tokens/src/themes/light/components/Menu.json
index 3ae9d164a6..74d45ae499 100644
--- a/tokens/src/themes/light/components/Menu.json
+++ b/tokens/src/themes/light/components/Menu.json
@@ -2,59 +2,29 @@
"elevation": {
"$type": "shadow",
"menu": {
- "box-shadow": {
- "source": "$menu-box-shadow",
- "$value": "{elevation.box-shadow.base}"
- }
+ "box-shadow": { "source": "$menu-box-shadow", "$value": "{elevation.box-shadow.base}" }
}
},
"color": {
"$type": "color",
"menu": {
- "bg": {
- "source": "$menu-bg",
- "$value": "{color.white}"
- },
+ "bg": { "source": "$menu-bg", "$value": "{color.white}" },
"item": {
- "color": {
- "source": "$menu-item-color",
- "$value": "{color.body.base}"
- },
- "bg": {
- "source": "$menu-item-bg",
- "$value": "transparent"
- },
- "border": {
- "source": "$menu-item-border-color",
- "$value": "{color.menu.item.bg}"
- },
+ "color": { "source": "$menu-item-color", "$value": "{color.body.base}" },
+ "bg": { "source": "$menu-item-bg", "$value": "transparent" },
+ "border": { "source": "$menu-item-border-color", "$value": "{color.menu.item.bg}" },
"hover": {
- "color": {
- "source": "$menu-item-hover-color",
- "$value": "{color.btn.text.tertiary}"
- },
- "bg": {
- "source": "$menu-item-hover-bg",
- "$value": "{color.btn.hover.bg.tertiary}"
- },
- "border": {
- "source": "$menu-item-hover-border-color",
- "$value": "{color.menu.item.bg}"
- }
+ "color": { "source": "$menu-item-hover-color", "$value": "{color.btn.text.tertiary}" },
+ "bg": { "source": "$menu-item-hover-bg", "$value": "{color.btn.hover.bg.tertiary}" },
+ "border": { "source": "$menu-item-hover-border-color", "$value": "{color.menu.item.bg}" }
},
"focus": {
- "bg": {
- "source": "$menu-item-focus-bg",
- "$value": "{color.btn.active.bg.tertiary}"
- }
+ "bg": { "source": "$menu-item-focus-bg", "$value": "{color.btn.active.bg.tertiary}" }
}
},
"select": {
"btn-link": {
- "color": {
- "source": "$menu-select-btn-link-color",
- "$value": "{color.primary.500}"
- }
+ "color": { "source": "$menu-select-btn-link-color", "$value": "{color.primary.500}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json
index 378f10905a..13b21f679d 100644
--- a/tokens/src/themes/light/components/Modal.json
+++ b/tokens/src/themes/light/components/Modal.json
@@ -3,25 +3,14 @@
"$type": "color",
"modal": {
"content": {
- "bg": {
- "source": "$modal-content-bg",
- "$value": "{color.bg.base}"
- },
+ "bg": { "source": "$modal-content-bg", "$value": "{color.bg.base}" },
"border": {
"source": "$modal-content-border-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.2
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.2 }],
"$value": "{color.black}"
}
},
- "backdrop-bg": {
- "source": "$modal-backdrop-bg",
- "$value": "{color.black}"
- }
+ "backdrop-bg": { "source": "$modal-backdrop-bg", "$value": "{color.black}" }
}
},
"elevation": {
@@ -39,10 +28,7 @@
},
"other": {
"modal": {
- "opacity": {
- "source": "$modal-backdrop-opacity",
- "$value": ".5"
- }
+ "opacity": { "source": "$modal-backdrop-opacity", "$value": ".5" }
}
}
}
diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json
index 5640bd41fa..f5c4b83a87 100644
--- a/tokens/src/themes/light/components/Nav.json
+++ b/tokens/src/themes/light/components/Nav.json
@@ -4,10 +4,7 @@
"nav": {
"tabs-link": {
"border": {
- "active": {
- "source": "$nav-tabs-link-active-border-color",
- "$value": "{color.primary.500}"
- },
+ "active": { "source": "$nav-tabs-link-active-border-color", "$value": "{color.primary.500}" },
"hover": {
"source": "$nav-tabs-link-hover-border-color",
"$value": "transparent transparent {color.nav.tabs.base.border.base}"
@@ -24,77 +21,35 @@
"nav": {
"link": {
"text": {
- "base": {
- "source": "$nav-link-color",
- "$value": "{color.gray.700}"
- },
- "disabled": {
- "source": "$nav-link-disabled-color",
- "$value": "{color.gray.300}"
- }
+ "base": { "source": "$nav-link-color", "$value": "{color.gray.700}" },
+ "disabled": { "source": "$nav-link-disabled-color", "$value": "{color.gray.300}" }
},
- "border": {
- "source": "$nav-tabs-link-border-color",
- "$value": "transparent"
- }
+ "border": { "source": "$nav-tabs-link-border-color", "$value": "transparent" }
},
"tabs": {
"base": {
"text": {
- "disabled": {
- "source": "$nav-tabs-disabled-bg",
- "$value": "{color.nav.tabs.base.bg.hover}"
- }
- },
- "bg": {
- "hover": {
- "source": "$nav-tabs-hover-bg",
- "$value": "transparent"
- }
+ "disabled": { "source": "$nav-tabs-disabled-bg", "$value": "{color.nav.tabs.base.bg.hover}" }
},
+ "bg": { "hover": { "source": "$nav-tabs-hover-bg", "$value": "transparent" } },
"border": {
- "base": {
- "source": "$nav-tabs-border-color",
- "$value": "{color.light.400}"
- },
- "focus": {
- "source": "$nav-tabs-focus-border-color",
- "$value": "{color.nav.tabs.base.bg.hover}"
- }
+ "base": { "source": "$nav-tabs-border-color", "$value": "{color.light.400}" },
+ "focus": { "source": "$nav-tabs-focus-border-color", "$value": "{color.nav.tabs.base.bg.hover}" }
},
"link": {
- "hover": {
- "bg": {
- "source": "$nav-tabs-link-hover-bg",
- "$value": "{color.light.400}"
- }
- },
+ "hover": { "bg": { "source": "$nav-tabs-link-hover-bg", "$value": "{color.light.400}" } },
"active": {
- "text": {
- "source": "$nav-tabs-link-active-color",
- "$value": "{color.primary.500}"
- },
- "bg": {
- "source": "$nav-tabs-link-active-bg",
- "$value": "transparent"
- }
+ "text": { "source": "$nav-tabs-link-active-color", "$value": "{color.primary.500}" },
+ "bg": { "source": "$nav-tabs-link-active-bg", "$value": "transparent" }
},
"disabled": {
- "border": {
- "source": "$nav-tabs-link-disabled-border-color",
- "$value": "{color.nav.link.border}"
- }
+ "border": { "source": "$nav-tabs-link-disabled-border-color", "$value": "{color.nav.link.border}" }
}
}
},
"inverse": {
"link": {
- "text": {
- "base": {
- "source": "$nav-inverse-tabs-link-color",
- "$value": "{color.white}"
- }
- },
+ "text": { "base": { "source": "$nav-inverse-tabs-link-color", "$value": "{color.white}" } },
"border": {
"bottom": {
"source": "$nav-inverse-tabs-link-border-bottom-color",
@@ -140,92 +95,35 @@
"base": {
"link": {
"active": {
- "text": {
- "source": "$nav-pills-link-active-color",
- "$value": "{color.active}"
- },
- "bg": {
- "source": "$nav-pills-link-active-bg",
- "$value": "{color.bg.active}"
- },
- "border": {
- "source": "$nav-pills-link-active-border-color",
- "$value": "{color.white}"
- }
+ "text": { "source": "$nav-pills-link-active-color", "$value": "{color.active}" },
+ "bg": { "source": "$nav-pills-link-active-bg", "$value": "{color.bg.active}" },
+ "border": { "source": "$nav-pills-link-active-border-color", "$value": "{color.white}" }
},
- "border": {
- "source": "$nav-pills-link-border-color",
- "$value": "{color.nav.tabs.base.border.base}"
- }
+ "border": { "source": "$nav-pills-link-border-color", "$value": "{color.nav.tabs.base.border.base}" }
}
},
"inverse": {
"link": {
"text": {
- "base": {
- "source": "$nav-inverse-pills-link-color",
- "$value": "{color.white}"
- },
- "focus": {
- "source": "$nav-inverse-pills-link-focus-color",
- "$value": "{color.nav.pills.inverse.link.text.base}"
- },
- "active": {
- "source": "$nav-inverse-pills-link-active-color",
- "$value": "{color.primary.500}"
- },
- "hover": {
- "source": "$nav-inverse-pills-link-hover-color",
- "$value": "{color.nav.pills.inverse.link.text.base}"
- },
- "active-focus": {
- "source": "$nav-inverse-pills-link-active-focus-color",
- "$value": "{color.nav.pills.inverse.link.text.active}"
- },
- "active-hover": {
- "source": "$nav-inverse-pills-link-active-hover-color",
- "$value": "{color.nav.pills.inverse.link.text.base}"
- }
+ "base": { "source": "$nav-inverse-pills-link-color", "$value": "{color.white}" },
+ "focus": { "source": "$nav-inverse-pills-link-focus-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+ "active": { "source": "$nav-inverse-pills-link-active-color", "$value": "{color.primary.500}" },
+ "hover": { "source": "$nav-inverse-pills-link-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+ "active-focus": { "source": "$nav-inverse-pills-link-active-focus-color", "$value": "{color.nav.pills.inverse.link.text.active}" },
+ "active-hover": { "source": "$nav-inverse-pills-link-active-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" }
},
"border": {
- "base": {
- "source": "$nav-inverse-pills-link-border-color",
- "$value": "{color.dark.300}"
- },
- "active": {
- "source": "$nav-inverse-pills-link-active-border-color",
- "$value": "{color.nav.pills.inverse.link.text.base}"
- },
- "active-hover": {
- "source": "$nav-inverse-pills-link-active-hover-border-color",
- "$value": "{color.nav.pills.inverse.link.border.base}"
- },
- "active-focus": {
- "source": "$nav-inverse-pills-link-active-focus-border-color",
- "$value": "{color.primary.base}"
- },
- "focus-hover": {
- "source": "$nav-inverse-pills-link-active-focus-hover-border-color",
- "$value": "{color.nav.pills.inverse.link.border.active-focus}"
- }
+ "base": { "source": "$nav-inverse-pills-link-border-color", "$value": "{color.dark.300}" },
+ "active": { "source": "$nav-inverse-pills-link-active-border-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+ "active-hover": { "source": "$nav-inverse-pills-link-active-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.base}" },
+ "active-focus": { "source": "$nav-inverse-pills-link-active-focus-border-color", "$value": "{color.primary.base}" },
+ "focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.active-focus}" }
},
"bg": {
- "hover": {
- "source": "$nav-inverse-pills-link-hover-bg",
- "$value": "{color.nav.pills.inverse.link.border.base}"
- },
- "active": {
- "source": "$nav-inverse-pills-link-active-bg",
- "$value": "{color.nav.pills.inverse.link.text.base}"
- },
- "active-hover": {
- "source": "$nav-inverse-pills-link-active-hover-bg",
- "$value": "{color.nav.pills.inverse.link.border.base}"
- },
- "active-focus-hover": {
- "source": "$nav-inverse-pills-link-active-focus-hover-bg",
- "$value": "{color.nav.pills.inverse.link.text.base}"
- }
+ "hover": { "source": "$nav-inverse-pills-link-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" },
+ "active": { "source": "$nav-inverse-pills-link-active-bg", "$value": "{color.nav.pills.inverse.link.text.base}" },
+ "active-hover": { "source": "$nav-inverse-pills-link-active-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" },
+ "active-focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-bg", "$value": "{color.nav.pills.inverse.link.text.base}" }
}
},
"tab-content-color": {
@@ -234,28 +132,15 @@
}
}
},
- "divider": {
- "source": "$nav-divider-color",
- "$value": "{color.gray.100}"
- },
+ "divider": { "source": "$nav-divider-color", "$value": "{color.gray.100}" },
"dark": {
"source": "$navbar-dark-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.5
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.5 }],
"$value": "{color.white}"
},
"light": {
"source": "$navbar-light-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.5
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.5 }],
"$value": "{color.black}"
}
}
diff --git a/tokens/src/themes/light/components/Navbar.json b/tokens/src/themes/light/components/Navbar.json
index 5c1aad57be..5b157599c3 100644
--- a/tokens/src/themes/light/components/Navbar.json
+++ b/tokens/src/themes/light/components/Navbar.json
@@ -5,123 +5,63 @@
"dark": {
"text": {
"source": "$navbar-dark-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.5
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.5 }],
"$value": "{color.white}"
},
"hover": {
"source": "$navbar-dark-hover-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.75
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.75 }],
"$value": "{color.white}"
},
- "active": {
- "source": "$navbar-dark-active-color",
- "$value": "{color.active}"
- },
+ "active": { "source": "$navbar-dark-active-color", "$value": "{color.active}" },
"disabled": {
"source": "$navbar-dark-disabled-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.25
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.25 }],
"$value": "{color.white}"
},
"toggler": {
"border": {
"source": "$navbar-dark-toggler-border-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.1 }],
"$value": "{color.white}"
}
},
"brand": {
- "text": {
- "source": "$navbar-dark-brand-color",
- "$value": "{color.navbar.dark.active}"
- },
- "hover": {
- "source": "$navbar-dark-brand-hover-color",
- "$value": "{color.navbar.dark.active}"
- }
+ "text": { "source": "$navbar-dark-brand-color", "$value": "{color.navbar.dark.active}" },
+ "hover": { "source": "$navbar-dark-brand-hover-color", "$value": "{color.navbar.dark.active}" }
}
},
"light": {
"text": {
"source": "$navbar-light-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.5
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.5 }],
"$value": "{color.black}"
},
"hover": {
"source": "$navbar-light-hover-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.7
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.7 }],
"$value": "{color.black}"
},
"active": {
"source": "$navbar-light-active-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.9
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.9 }],
"$value": "{color.black}"
},
"disabled": {
"source": "$navbar-light-disabled-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.3
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.3 }],
"$value": "{color.black}"
},
"toggler": {
"border": {
"source": "$navbar-light-toggler-border-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.1 }],
"$value": "{color.black}"
}
},
"brand": {
- "text": {
- "source": "$navbar-light-brand-color",
- "$value": "{color.navbar.light.active}"
- },
- "hover": {
- "source": "$navbar-light-brand-hover-color",
- "$value": "{color.navbar.light.active}"
- }
+ "text": { "source": "$navbar-light-brand-color", "$value": "{color.navbar.light.active}" },
+ "hover": { "source": "$navbar-light-brand-hover-color", "$value": "{color.navbar.light.active}" }
}
}
}
@@ -134,13 +74,7 @@
"icon-bg": {
"source": "$navbar-dark-toggler-icon-bg",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$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\")"
}
},
@@ -148,13 +82,7 @@
"icon-bg": {
"source": "$navbar-light-toggler-icon-bg",
"outputReferences": false,
- "modify": [
- {
- "type": "str-replace",
- "toReplace": "#",
- "replaceWith": "%23"
- }
- ],
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
"$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\")"
}
}
diff --git a/tokens/src/themes/light/components/PageBanner.json b/tokens/src/themes/light/components/PageBanner.json
index 6c15e45c66..46a4c8534f 100644
--- a/tokens/src/themes/light/components/PageBanner.json
+++ b/tokens/src/themes/light/components/PageBanner.json
@@ -3,42 +3,22 @@
"color": {
"page-banner": {
"bg": {
- "dark": {
- "$value": "{color.dark.500}"
- },
- "light": {
- "$value": "{color.light.400}"
- },
+ "dark": { "$value": "{color.dark.500}" },
+ "light": { "$value": "{color.light.400}" },
"accent": {
- "a": {
- "$value": "{color.accent.a}"
- },
- "b": {
- "$value": "{color.accent.b}"
- }
+ "a": { "$value": "{color.accent.a}" },
+ "b": { "$value": "{color.accent.b}" }
},
- "warning": {
- "$value": "{color.warning.100}"
- }
+ "warning": { "$value": "{color.warning.100}" }
},
"text": {
- "dark": {
- "$value": "{color.white}"
- },
- "light": {
- "$value": "{color.black}"
- },
+ "dark": { "$value": "{color.white}" },
+ "light": { "$value": "{color.black}" },
"accent": {
- "a": {
- "$value": "{color.black}"
- },
- "b": {
- "$value": "{color.black}"
- }
+ "a": { "$value": "{color.black}" },
+ "b": { "$value": "{color.black}" }
},
- "warning": {
- "$value": "{color.black}"
- }
+ "warning": { "$value": "{color.black}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json
index 3f2b244bc9..d879de7302 100644
--- a/tokens/src/themes/light/components/Pagination.json
+++ b/tokens/src/themes/light/components/Pagination.json
@@ -3,78 +3,30 @@
"$type": "color",
"pagination": {
"text": {
- "base": {
- "source": "$pagination-color",
- "$value": "{color.link.base}"
- },
- "inverse": {
- "source": "$pagination-color-inverse",
- "$value": "{color.white}"
- },
- "hover": {
- "source": "$pagination-hover-color",
- "$value": "{color.link.hover}"
- },
- "active": {
- "source": "$pagination-active-color",
- "$value": "{color.active}"
- },
- "disabled": {
- "source": "$pagination-disabled-color",
- "$value": "{color.disabled}"
- }
+ "base": { "source": "$pagination-color", "$value": "{color.link.base}" },
+ "inverse": { "source": "$pagination-color-inverse", "$value": "{color.white}" },
+ "hover": { "source": "$pagination-hover-color", "$value": "{color.link.hover}" },
+ "active": { "source": "$pagination-active-color", "$value": "{color.active}" },
+ "disabled": { "source": "$pagination-disabled-color", "$value": "{color.disabled}" }
},
"bg": {
- "base": {
- "source": "$pagination-bg",
- "$value": "{color.bg.base}"
- },
- "hover": {
- "source": "$pagination-hover-bg",
- "$value": "{color.gray.100}"
- },
- "active": {
- "source": "$pagination-active-bg",
- "$value": "{color.bg.active}"
- },
- "disabled": {
- "source": "$pagination-disabled-bg",
- "$value": "{color.white}"
- }
+ "base": { "source": "$pagination-bg", "$value": "{color.bg.base}" },
+ "hover": { "source": "$pagination-hover-bg", "$value": "{color.gray.100}" },
+ "active": { "source": "$pagination-active-bg", "$value": "{color.bg.active}" },
+ "disabled": { "source": "$pagination-disabled-bg", "$value": "{color.white}" }
},
"border": {
- "base": {
- "source": "$pagination-border-color",
- "$value": "{color.gray.200}"
- },
- "hover": {
- "source": "$pagination-hover-border-color",
- "$value": "{color.gray.200}"
- },
- "active": {
- "source": "$pagination-active-border-color",
- "$value": "{color.pagination.bg.active}"
- },
- "disabled": {
- "source": "$pagination-disabled-border-color",
- "$value": "{color.gray.100}"
- }
+ "base": { "source": "$pagination-border-color", "$value": "{color.gray.200}" },
+ "hover": { "source": "$pagination-hover-border-color", "$value": "{color.gray.200}" },
+ "active": { "source": "$pagination-active-border-color", "$value": "{color.pagination.bg.active}" },
+ "disabled": { "source": "$pagination-disabled-border-color", "$value": "{color.gray.100}" }
},
"focus": {
- "base": {
- "source": "$pagination-focus-color",
- "$value": "{color.primary.500}"
- },
- "text": {
- "source": "$pagination-focus-color-text",
- "$value": "{color.black}"
- }
+ "base": { "source": "$pagination-focus-color", "$value": "{color.primary.500}" },
+ "text": { "source": "$pagination-focus-color-text", "$value": "{color.black}" }
},
"dropdown": {
- "text-inverse": {
- "source": "$pagination-dropdown-color-inverse",
- "$value": "{color.white}"
- }
+ "text-inverse": { "source": "$pagination-dropdown-color-inverse", "$value": "{color.white}" }
}
}
},
@@ -82,10 +34,7 @@
"$type": "shadow",
"pagination": {
"focus": {
- "box-shadow": {
- "source": "$pagination-focus-box-shadow",
- "$value": "{elevation.input.btn-focus.box-shadow}"
- }
+ "box-shadow": { "source": "$pagination-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
}
}
}
diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json
index b59607938f..0741490cfc 100644
--- a/tokens/src/themes/light/components/Popover.json
+++ b/tokens/src/themes/light/components/Popover.json
@@ -2,103 +2,49 @@
"color": {
"$type": "color",
"popover": {
- "bg": {
- "source": "$popover-bg",
- "$value": "{color.bg.base}"
- },
- "border": {
- "source": "$popover-border-color",
- "$value": "rgba(0, 0, 0, .2)"
- },
+ "bg": { "source": "$popover-bg", "$value": "{color.bg.base}" },
+ "border": { "source": "$popover-border-color", "$value": "rgba(0, 0, 0, .2)" },
"header": {
- "text": {
- "source": "$popover-header-color",
- "$value": "{color.headings.base}"
- },
- "bg": {
- "source": "$popover-header-bg",
- "$value": "{color.white}"
- },
+ "text": { "source": "$popover-header-color", "$value": "{color.headings.base}" },
+ "bg": { "source": "$popover-header-bg", "$value": "{color.white}" },
"bg-dark": {
"source": "$popover-header-bg-dark",
- "modify": [
- {
- "type": "darken",
- "amount": 0.5
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.5 }],
"$value": "{color.white}"
},
"border-bottom-dark": {
"source": "$popover-header-border-bottom-darken",
- "modify": [
- {
- "type": "darken",
- "amount": 0.05
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.05 }],
"$value": "{color.white}"
}
},
- "body": {
- "source": "$popover-body-color",
- "$value": "{color.body.base}"
- },
+ "body": { "source": "$popover-body-color", "$value": "{color.body.base}" },
"arrow": {
- "base": {
- "source": "$popover-arrow-color",
- "$value": "{color.popover.bg}"
- },
+ "base": { "source": "$popover-arrow-color", "$value": "{color.popover.bg}" },
"outer": {
"source": "$popover-arrow-outer-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.05
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.05 }],
"$value": "{color.popover.border}"
}
},
"success": {
- "bg": {
- "source": "$popover-success-bg",
- "$value": "{color.success.100}"
- },
- "icon": {
- "source": "$popover-success-icon-color",
- "$value": "{color.success.500}"
- }
+ "bg": { "source": "$popover-success-bg", "$value": "{color.success.100}" },
+ "icon": { "source": "$popover-success-icon-color", "$value": "{color.success.500}" }
},
"warning": {
- "bg": {
- "source": "$popover-warning-bg",
- "$value": "{color.warning.100}"
- },
- "icon": {
- "source": "$popover-warning-icon-color",
- "$value": "{color.warning.500}"
- }
+ "bg": { "source": "$popover-warning-bg", "$value": "{color.warning.100}" },
+ "icon": { "source": "$popover-warning-icon-color", "$value": "{color.warning.500}" }
},
"danger": {
- "bg": {
- "source": "$popover-danger-bg",
- "$value": "{color.danger.100}"
- },
- "icon": {
- "source": "$popover-danger-icon-color",
- "$value": "{color.danger.500}"
- }
+ "bg": { "source": "$popover-danger-bg", "$value": "{color.danger.100}" },
+ "icon": { "source": "$popover-danger-icon-color", "$value": "{color.danger.500}" }
}
}
},
"elevation": {
"$type": "shadow",
"popover": {
- "box-shadow": {
- "source": "$popover-box-shadow",
- "$value": "none"
- }
+ "box-shadow": { "source": "$popover-box-shadow", "$value": "none" }
}
}
}
diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json
index 3f816bf5ac..fa9b86c932 100644
--- a/tokens/src/themes/light/components/ProductTour.json
+++ b/tokens/src/themes/light/components/ProductTour.json
@@ -3,42 +3,19 @@
"color": {
"product-tour": {
"checkpoint": {
- "bg": {
- "source": "$checkpoint-background-color",
- "$value": "{color.light.300}"
- },
- "body": {
- "source": "$checkpoint-body-color",
- "$value": "{color.gray.700}"
- },
- "border": {
- "source": "$checkpoint-border-color",
- "$value": "{color.brand.base}"
- },
- "breadcrumb": {
- "source": "$checkpoint-breadcrumb-color",
- "$value": "{color.primary.base}"
- },
+ "bg": { "source": "$checkpoint-background-color", "$value": "{color.light.300}" },
+ "body": { "source": "$checkpoint-body-color", "$value": "{color.gray.700}" },
+ "border": { "source": "$checkpoint-border-color", "$value": "{color.brand.base}" },
+ "breadcrumb": { "source": "$checkpoint-breadcrumb-color", "$value": "{color.primary.base}" },
"box-shadow": {
"source": "$checkpoint-box-shadow-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.3
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.3 }],
"$value": "{color.black}"
},
"arrow": {
"border": {
- "top": {
- "source": "$checkpoint-arrow-border-top-color",
- "$value": "{color.product-tour.checkpoint.bg}"
- },
- "transparent": {
- "source": "$checkpoint-arrow-border-color-transparent",
- "$value": "transparent"
- }
+ "top": { "source": "$checkpoint-arrow-border-top-color", "$value": "{color.product-tour.checkpoint.bg}" },
+ "transparent": { "source": "$checkpoint-arrow-border-color-transparent", "$value": "transparent" }
}
}
}
diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json
index 2807bc0f12..5bc0329299 100644
--- a/tokens/src/themes/light/components/ProgressBar.json
+++ b/tokens/src/themes/light/components/ProgressBar.json
@@ -2,28 +2,13 @@
"color": {
"$type": "color",
"progress-bar": {
- "bg": {
- "source": "$progress-bg",
- "$value": "transparent"
- },
- "border": {
- "source": "$progress-bar-border-color",
- "$value": "{color.gray.500}"
- },
+ "bg": { "source": "$progress-bg", "$value": "transparent" },
+ "border": { "source": "$progress-bar-border-color", "$value": "{color.gray.500}" },
"bar": {
- "base": {
- "source": "$progress-bar-color",
- "$value": "{color.white}"
- },
+ "base": { "source": "$progress-bar-color", "$value": "{color.white}" },
"bg": {
- "base": {
- "source": "$progress-bar-bg",
- "$value": "{color.accent.a}"
- },
- "annotated": {
- "source": "$annotated-progress-bar-bg",
- "$value": "{color.dark.500}"
- }
+ "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" },
+ "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" }
}
}
}
@@ -31,10 +16,7 @@
"elevation": {
"$type": "shadow",
"progress-bar": {
- "box-shadow": {
- "source": "$progress-box-shadow",
- "$value": "none"
- }
+ "box-shadow": { "source": "$progress-box-shadow", "$value": "none" }
}
}
}
diff --git a/tokens/src/themes/light/components/Scrollable.json b/tokens/src/themes/light/components/Scrollable.json
index a36be1026e..96dbe3f5b7 100644
--- a/tokens/src/themes/light/components/Scrollable.json
+++ b/tokens/src/themes/light/components/Scrollable.json
@@ -5,12 +5,7 @@
"body": {
"box-shadow": {
"source": "$scrollable-body-box-shadow",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.55
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.55 }],
"$value": "{color.black}"
}
}
diff --git a/tokens/src/themes/light/components/SearchField.json b/tokens/src/themes/light/components/SearchField.json
index caea66835a..8df063f176 100644
--- a/tokens/src/themes/light/components/SearchField.json
+++ b/tokens/src/themes/light/components/SearchField.json
@@ -3,44 +3,23 @@
"$type": "color",
"search-field": {
"border": {
- "base": {
- "source": "$search-border-color",
- "$value": "{color.gray.500}"
- },
- "interaction": {
- "source": "$search-border-color-interaction",
- "$value": "{color.black}"
- },
- "focus": {
- "source": "$search-border-focus-color",
- "$value": "{color.black}"
- }
+ "base": { "source": "$search-border-color", "$value": "{color.gray.500}" },
+ "interaction": { "source": "$search-border-color-interaction", "$value": "{color.black}" },
+ "focus": { "source": "$search-border-focus-color", "$value": "{color.black}" }
},
"button": {
"bg": {
- "primary": {
- "source": "$search-btn-primary-bg",
- "$value": "{color.primary.500}"
- },
- "brand": {
- "source": "$search-btn-brand-bg",
- "$value": "{color.brand.500}"
- }
+ "primary": { "source": "$search-btn-primary-bg", "$value": "{color.primary.500}" },
+ "brand": { "source": "$search-btn-brand-bg", "$value": "{color.brand.500}" }
}
},
- "form-bg": {
- "source": "$search-form-background-color",
- "$value": "{color.white}"
- }
+ "form-bg": { "source": "$search-form-background-color", "$value": "{color.white}" }
}
},
"other": {
"$type": "ratio",
"search-field": {
- "disabled-opacity": {
- "source": "$search-disabled-opacity",
- "$value": ".3"
- }
+ "disabled-opacity": { "source": "$search-disabled-opacity", "$value": ".3" }
}
}
}
diff --git a/tokens/src/themes/light/components/Sheet.json b/tokens/src/themes/light/components/Sheet.json
index eafeffbaf6..c9ac340f02 100644
--- a/tokens/src/themes/light/components/Sheet.json
+++ b/tokens/src/themes/light/components/Sheet.json
@@ -5,23 +5,13 @@
"skrim": {
"bg": {
"source": "$sheet-skrim-bg",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.5
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.5 }],
"$value": "{color.gray.300}"
},
"component": {
"box-shadow": {
"source": "$sheet-skrim-component-box-shadow",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.15
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.15 }],
"$value": "{color.black}"
}
}
diff --git a/tokens/src/themes/light/components/Stepper.json b/tokens/src/themes/light/components/Stepper.json
index 99c65c5f3a..797d79ac12 100644
--- a/tokens/src/themes/light/components/Stepper.json
+++ b/tokens/src/themes/light/components/Stepper.json
@@ -4,34 +4,16 @@
"stepper": {
"header": {
"bg": {
- "base": {
- "source": "$stepper-header-bg",
- "$value": "transparent"
- },
- "line": {
- "source": "$stepper-header-line-bg",
- "$value": "{color.light.base}"
- }
+ "base": { "source": "$stepper-header-bg", "$value": "transparent" },
+ "line": { "source": "$stepper-header-line-bg", "$value": "{color.light.base}" }
},
"step": {
- "base": {
- "source": "$stepper-header-step-color",
- "$value": "{color.primary.base}"
- },
+ "base": { "source": "$stepper-header-step-color", "$value": "{color.primary.base}" },
"bg": {
- "base": {
- "source": "$stepper-header-step-bg",
- "$value": "{color.stepper.header.bg.base}"
- },
- "active": {
- "source": "$stepper-header-active-step-bg",
- "$value": "{color.gray.500}"
- }
- },
- "border": {
- "source": "$stepper-header-step-border",
- "$value": "none"
+ "base": { "source": "$stepper-header-step-bg", "$value": "{color.stepper.header.bg.base}" },
+ "active": { "source": "$stepper-header-active-step-bg", "$value": "{color.gray.500}" }
},
+ "border": { "source": "$stepper-header-step-border", "$value": "none" },
"bubble-error": {
"source": "$stepper-header-step-error-bubble-color",
"$value": "{color.danger.base}"
diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json
index 790bd34350..abc5d7f77a 100644
--- a/tokens/src/themes/light/components/Toast.json
+++ b/tokens/src/themes/light/components/Toast.json
@@ -2,41 +2,19 @@
"color": {
"$type": "color",
"toast": {
- "base": {
- "source": "$toast-color",
- "$value": "inherit"
- },
- "bg": {
- "source": "$toast-background-color",
- "$value": "{color.gray.700}"
- },
+ "base": { "source": "$toast-color", "$value": "inherit" },
+ "bg": { "source": "$toast-background-color", "$value": "{color.gray.700}" },
"border": {
"source": "$toast-border-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.1 }],
"$value": "{color.black}"
},
"header": {
- "text": {
- "source": "$toast-header-color",
- "$value": "{color.white}"
- },
- "bg": {
- "source": "$toast-header-background-color",
- "$value": "{color.gray.700}"
- },
+ "text": { "source": "$toast-header-color", "$value": "{color.white}" },
+ "bg": { "source": "$toast-header-background-color", "$value": "{color.gray.700}" },
"border": {
"source": "$toast-header-border-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.5
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.5 }],
"$value": "{color.black}"
}
}
diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json
index a0bdc5894b..174eea3cd5 100644
--- a/tokens/src/themes/light/components/Tooltip.json
+++ b/tokens/src/themes/light/components/Tooltip.json
@@ -2,33 +2,15 @@
"color": {
"$type": "color",
"tooltip": {
- "text": {
- "source": "$tooltip-color",
- "$value": "{color.white}"
- },
- "light": {
- "source": "$tooltip-color-light",
- "$value": "{color.black}"
- },
+ "text": { "source": "$tooltip-color", "$value": "{color.white}" },
+ "light": { "source": "$tooltip-color-light", "$value": "{color.black}" },
"bg": {
- "base": {
- "source": "$tooltip-bg",
- "$value": "{color.black}"
- },
- "light": {
- "source": "$tooltip-bg-light",
- "$value": "{color.white}"
- }
+ "base": { "source": "$tooltip-bg", "$value": "{color.black}" },
+ "light": { "source": "$tooltip-bg-light", "$value": "{color.white}" }
},
"arrow": {
- "base": {
- "source": "$tooltip-arrow-color",
- "$value": "{color.tooltip.bg.base}"
- },
- "light": {
- "source": "$tooltip-arrow-color-light",
- "$value": "{color.white}"
- }
+ "base": { "source": "$tooltip-arrow-color", "$value": "{color.tooltip.bg.base}" },
+ "light": { "source": "$tooltip-arrow-color-light", "$value": "{color.white}" }
}
}
},
@@ -44,10 +26,7 @@
"other": {
"$type": "ratio",
"tooltip": {
- "opacity": {
- "source": "$tooltip-opacity",
- "$value": "1"
- }
+ "opacity": { "source": "$tooltip-opacity", "$value": "1" }
}
}
}
diff --git a/tokens/src/themes/light/components/general/body.json b/tokens/src/themes/light/components/general/body.json
index 1a35561b67..33ad10fbb5 100644
--- a/tokens/src/themes/light/components/general/body.json
+++ b/tokens/src/themes/light/components/general/body.json
@@ -2,14 +2,8 @@
"$type": "color",
"color": {
"body": {
- "base": {
- "source": "$body-color",
- "$value": "{color.gray.700}"
- },
- "bg": {
- "source": "$body-bg",
- "$value": "{color.bg.base}"
- }
+ "base": { "source": "$body-color", "$value": "{color.gray.700}" },
+ "bg": { "source": "$body-bg", "$value": "{color.bg.base}" }
}
}
}
diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json
index 4fdaa5a08f..9deb1db864 100644
--- a/tokens/src/themes/light/components/general/headings.json
+++ b/tokens/src/themes/light/components/general/headings.json
@@ -2,10 +2,7 @@
"$type": "color",
"color": {
"headings": {
- "base": {
- "source": "$headings-color",
- "$value": "{color.black}"
- }
+ "base": { "source": "$headings-color", "$value": "{color.black}" }
}
}
}
diff --git a/tokens/src/themes/light/components/general/hr.json b/tokens/src/themes/light/components/general/hr.json
index 69911892f6..de64b7d924 100644
--- a/tokens/src/themes/light/components/general/hr.json
+++ b/tokens/src/themes/light/components/general/hr.json
@@ -4,12 +4,7 @@
"hr": {
"border": {
"source": "$hr-border-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.1
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.1 }],
"$value": "{color.black}"
}
}
diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json
index 76b14db86c..f6b3c23188 100644
--- a/tokens/src/themes/light/components/general/input.json
+++ b/tokens/src/themes/light/components/general/input.json
@@ -2,10 +2,7 @@
"color": {
"$type": "color",
"input": {
- "btn-focus": {
- "source": "$input-btn-focus-color",
- "$value": "{color.bg.active}"
- }
+ "btn-focus": { "source": "$input-btn-focus-color", "$value": "{color.bg.active}" }
}
},
"elevation": {
diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json
index 1682479b87..3669afa336 100644
--- a/tokens/src/themes/light/components/general/link.json
+++ b/tokens/src/themes/light/components/general/link.json
@@ -2,161 +2,83 @@
"color": {
"$type": "color",
"link": {
- "base": {
- "source": "$link-color",
- "$value": "{color.info.500}"
- },
+ "base": { "source": "$link-color", "$value": "{color.info.500}" },
"hover": {
"source": "$link-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.15
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.15 }],
"$value": "{color.link.base}"
},
"inline": {
- "base": {
- "source": "$inline-link-color",
- "$value": "{color.info.500}"
- },
+ "base": { "source": "$inline-link-color", "$value": "{color.info.500}" },
"decoration": {
"source": "$inline-link-decoration-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.3
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.3 }],
"$value": "{color.link.inline.base}"
},
"hover": {
"base": {
"source": "$inline-link-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.15
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.15 }],
"$value": "{color.link.inline.base}"
},
"decoration": {
"source": "$inline-link-hover-decoration-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 1
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 1 }],
"$value": "{color.link.inline.hover.base}"
}
}
},
"muted": {
- "base": {
- "source": "$muted-link-color",
- "$value": "{color.primary.500}"
- },
+ "base": { "source": "$muted-link-color", "$value": "{color.primary.500}" },
"hover": {
"source": "$muted-link-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.15
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.15 }],
"$value": "{color.link.muted.base}"
},
"inline": {
- "base": {
- "source": "$muted-inline-link-color",
- "$value": "{color.primary.500}"
- },
+ "base": { "source": "$muted-inline-link-color", "$value": "{color.primary.500}" },
"decoration": {
"source": "$muted-inline-link-decoration-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.3
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.3 }],
"$value": "{color.link.muted.inline.base}"
},
"hover": {
"base": {
"source": "$muted-inline-link-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.15
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.15 }],
"$value": "{color.link.muted.inline.base}"
},
"decoration": {
"source": "$muted-inline-link-hover-decoration-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 1
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 1 }],
"$value": "{color.link.muted.inline.hover.base}"
}
}
}
},
"brand": {
- "base": {
- "source": "$brand-link-color",
- "$value": "{color.brand.500}"
- },
+ "base": { "source": "$brand-link-color", "$value": "{color.brand.500}" },
"hover": {
"source": "$brand-link-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.15
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.15 }],
"$value": "{color.link.brand.base}"
},
"inline": {
- "base": {
- "source": "$brand-inline-link-color",
- "$value": "{color.brand.500}"
- },
+ "base": { "source": "$brand-inline-link-color", "$value": "{color.brand.500}" },
"decoration": {
"source": "$brand-inline-link-decoration-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.3
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.3 }],
"$value": "{color.link.brand.inline.base}"
},
"hover": {
"base": {
"source": "$brand-inline-link-hover-color",
- "modify": [
- {
- "type": "darken",
- "amount": 0.15
- }
- ],
+ "modify": [{ "type": "darken", "amount": 0.15 }],
"$value": "{color.link.brand.inline.base}"
},
"decoration": {
"source": "$brand-inline-link-hover-decoration-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 1
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 1 }],
"$value": "{color.link.brand.inline.hover.base}"
}
}
diff --git a/tokens/src/themes/light/components/general/list.json b/tokens/src/themes/light/components/general/list.json
index 6e5416cb27..3b490c8859 100644
--- a/tokens/src/themes/light/components/general/list.json
+++ b/tokens/src/themes/light/components/general/list.json
@@ -2,72 +2,31 @@
"$type": "color",
"color": {
"list-group": {
- "base": {
- "source": "$list-group-color",
- "$value": "inherit"
- },
+ "base": { "source": "$list-group-color", "$value": "inherit" },
"bg": {
- "base": {
- "source": "$list-group-bg",
- "$value": "{color.white}"
- },
- "hover": {
- "source": "$list-group-hover-bg",
- "$value": "{color.gray.100}"
- }
+ "base": { "source": "$list-group-bg", "$value": "{color.white}" },
+ "hover": { "source": "$list-group-hover-bg", "$value": "{color.gray.100}" }
},
"border": {
"source": "$list-group-border-color",
- "modify": [
- {
- "type": "alpha",
- "amount": 0.125
- }
- ],
+ "modify": [{ "type": "alpha", "amount": 0.125 }],
"$value": "{color.black}"
},
"active": {
- "base": {
- "source": "$list-group-active-color",
- "$value": "{color.active}"
- },
- "border": {
- "source": "$list-group-active-border-color",
- "$value": "{color.list-group.active.bg}"
- },
- "bg": {
- "source": "$list-group-active-bg",
- "$value": "{color.bg.active}"
- }
+ "base": { "source": "$list-group-active-color", "$value": "{color.active}" },
+ "border": { "source": "$list-group-active-border-color", "$value": "{color.list-group.active.bg}" },
+ "bg": { "source": "$list-group-active-bg", "$value": "{color.bg.active}" }
},
"disabled": {
- "base": {
- "source": "$list-group-disabled-color",
- "$value": "{color.gray.600}"
- },
- "bg": {
- "source": "$list-group-disabled-bg",
- "$value": "{color.list-group.bg.base}"
- }
+ "base": { "source": "$list-group-disabled-color", "$value": "{color.gray.600}" },
+ "bg": { "source": "$list-group-disabled-bg", "$value": "{color.list-group.bg.base}" }
},
"action": {
- "base": {
- "source": "$list-group-action-color",
- "$value": "{color.gray.700}"
- },
- "hover": {
- "source": "$list-group-action-hover-color",
- "$value": "{color.list-group.action.base}"
- },
+ "base": { "source": "$list-group-action-color", "$value": "{color.gray.700}" },
+ "hover": { "source": "$list-group-action-hover-color", "$value": "{color.list-group.action.base}" },
"active": {
- "base": {
- "source": "$list-group-action-active-color",
- "$value": "{color.body.base}"
- },
- "bg": {
- "source": "$list-group-action-active-bg",
- "$value": "{color.gray.200}"
- }
+ "base": { "source": "$list-group-action-active-color", "$value": "{color.body.base}" },
+ "bg": { "source": "$list-group-action-active-bg", "$value": "{color.gray.200}" }
}
}
}
diff --git a/tokens/src/themes/light/components/general/text.json b/tokens/src/themes/light/components/general/text.json
index 41f41815d8..cfc64e42aa 100644
--- a/tokens/src/themes/light/components/general/text.json
+++ b/tokens/src/themes/light/components/general/text.json
@@ -1,23 +1,11 @@
{
"$type": "color",
"color": {
- "text-muted": {
- "source": "$text-muted",
- "$value": "{color.gray.500}"
- },
- "mark-bg": {
- "source": "$mark-bg",
- "$value": "#FFF243"
- },
+ "text-muted": { "source": "$text-muted", "$value": "{color.gray.500}" },
+ "mark-bg": { "source": "$mark-bg", "$value": "#FFF243" },
"blockquote": {
- "small": {
- "source": "$blockquote-small-color",
- "$value": "{color.gray.500}"
- }
+ "small": { "source": "$blockquote-small-color", "$value": "{color.gray.500}" }
},
- "yiq-light": {
- "source": "$yiq-text-light",
- "$value": "{color.white}"
- }
+ "yiq-light": { "source": "$yiq-text-light", "$value": "{color.white}" }
}
}
diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json
index d8952dba65..0998797a94 100644
--- a/tokens/src/themes/light/global/color.json
+++ b/tokens/src/themes/light/global/color.json
@@ -207,13 +207,7 @@
},
"600": {
"source": "$primary-600",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.10"
- }
- ],
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
"actions": {
"default": "{color.action.default.primary.600}"
},
@@ -222,13 +216,7 @@
},
"700": {
"source": "$primary-700",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.20"
- }
- ],
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
"actions": {
"default": "{color.action.default.primary.700}"
},
@@ -237,13 +225,7 @@
},
"800": {
"source": "$primary-800",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.25"
- }
- ],
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
"actions": {
"default": "{color.action.default.primary.800}"
},
@@ -252,13 +234,7 @@
},
"900": {
"source": "$primary-900",
- "modify": [
- {
- "type": "mix",
- "otherColor": "black",
- "amount": "0.30"
- }
- ],
+ "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
"actions": {
"default": "{color.action.default.primary.900}"
},
@@ -277,13 +253,7 @@
"secondary": {
"100": {
"source": "$secondary-100",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.94"
- }
- ],
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
"actions": {
"default": "{color.action.default.secondary.100}"
},
@@ -292,13 +262,7 @@
},
"200": {
"source": "$secondary-200",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.75"
- }
- ],
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
"actions": {
"default": "{color.action.default.secondary.200}"
},
@@ -307,13 +271,7 @@
},
"300": {
"source": "$secondary-300",
- "modify": [
- {
- "type": "mix",
- "otherColor": "white",
- "amount": "0.50"
- }
- ],
+ "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
"actions": {
"default": "{color.action.default.secondary.300}"
},
diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
index f2006fa7ed..1a25ff759a 100644
--- a/tokens/style-dictionary.js
+++ b/tokens/style-dictionary.js
@@ -5,8 +5,26 @@ const toml = require('js-toml');
const chroma = require('chroma-js');
const { colorYiq, darken, lighten } = require('./sass-helpers');
const cssUtilities = require('./css-utilities');
-const { composeBreakpointName } = require('./utils');
+const { composeBreakpointName, createCustomHeader } = require('./utils');
+/**
+ * Transforms a color token based on various modifications.
+ *
+ * @param {Object} token - The token object containing color information and modifications.
+ * @param {string} token.name - The name of the color token.
+ * @param {string} token.$value - The initial color value of the token.
+ * @param {Object} token.original - The original token object containing the original value.
+ * @param {string} token.original.$value - The original color value before any modifications.
+ * @param {Array} [token.modify=[]] - An array of modification objects to apply to the color.
+ * @param {string} token.modify.type - The type of modification to apply (e.g., 'mix', 'darken', 'lighten').
+ * @param {number} token.modify.amount - The amount by which to modify the color (e.g., percentage or value).
+ * @param {string} [token.modify.otherColor] - The other color to mix with, if applicable.
+ * @param {string} [token.modify.light] - The light color for YIQ modification.
+ * @param {string} [token.modify.dark] - The dark color for YIQ modification.
+ * @param {number} [token.modify.threshold] - The threshold for YIQ modification.
+ * @param {Object} theme - The theme object containing additional information for color transformations.
+ * @returns {string} - The transformed color value in hexadecimal format, including alpha if applicable.
+ */
const colorTransform = (token, theme) => {
const {
name: tokenName,
@@ -65,7 +83,8 @@ const colorTransform = (token, theme) => {
const createCustomCSSVariables = async ({
formatterArgs,
themeVariant,
-}) => {
+}, StyleDictionary) => {
+ // eslint-disable-next-line import/no-unresolved
const { sortByReference, usesReferences, getReferences } = (await import('style-dictionary/utils'));
const { dictionary, options, file } = formatterArgs;
const outputTokens = themeVariant
@@ -87,11 +106,18 @@ const createCustomCSSVariables = async ({
return ` --${token.name}: ${$value};`;
}).join('\n');
- return `:root {\n${variables}\n}\n`;
+ return `${createCustomHeader(StyleDictionary, file).join('\n')}\n:root {\n${variables}\n}\n`;
};
+/**
+ * Initializes and configures Style Dictionary with custom transforms, formatters, filters, and parsers.
+ *
+ * @returns {Promise