diff --git a/json-key-order-linter.js b/json-key-order-linter.js
new file mode 100644
index 0000000000..73c2550ebd
--- /dev/null
+++ b/json-key-order-linter.js
@@ -0,0 +1,149 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+
+const folderPath = 'tokens/';
+
+const KEY_ORDERS = {
+ main: ['$type', '$value', '$description', 'outputReferences', 'modify', 'source'],
+};
+
+const shouldFix = process.argv.includes('--fix');
+let warningsCount = 0;
+let processedFileCount = 0;
+
+/**
+ * Reorders the keys in an object based on a specified key order.
+ * @param {Object} obj - The object to reorder.
+ * @param {string[]} desiredKeyOrder - The desired order for the keys.
+ * @returns {Object} - An object containing the reordered object and
+ * a flag indicating if the key order was mismatched and mismatched keys.
+ */
+function reorderObjectKeys(obj, desiredKeyOrder) {
+ const reorderedObject = {};
+ const originalKeyList = Object.keys(obj);
+ let isKeyOrderMismatched = false;
+ const mismatchedKeysList = [];
+
+ desiredKeyOrder.forEach((key) => {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ reorderedObject[key] = obj[key];
+ }
+ });
+
+ originalKeyList.forEach((key) => {
+ if (!Object.prototype.hasOwnProperty.call(reorderedObject, key)) {
+ reorderedObject[key] = obj[key];
+ }
+ });
+
+ if (JSON.stringify(originalKeyList) !== JSON.stringify(Object.keys(reorderedObject))) {
+ isKeyOrderMismatched = true;
+ mismatchedKeysList.push(...originalKeyList.filter((key, index) => key !== Object.keys(reorderedObject)[index]));
+ }
+
+ return { reorderedObject, isKeyOrderMismatched, mismatchedKeys: mismatchedKeysList };
+}
+
+/**
+ * Recursively reorders keys in JSON data based on specified key orders for nested objects.
+ * @param {*} data - The JSON data (object, array, or primitive) to process.
+ * @param {string} currentPath - The path to the current data within the JSON structure.
+ * @returns {Object} - An object containing the reordered data and
+ * a flag indicating if any key order mismatches were found.
+ */
+function reorderKeysInJson(data, currentPath = '') {
+ if (Array.isArray(data)) {
+ return data.map((item, index) => reorderKeysInJson(item, `${currentPath}[${index}]`));
+ }
+
+ if (typeof data === 'object' && data !== null) {
+ const {
+ reorderedObject: reorderedData, isKeyOrderMismatched: mainMismatch, mismatchedKeys: mainMismatchedKeys,
+ } = reorderObjectKeys(data, KEY_ORDERS.main);
+ let hasAnyKeyOrderMismatch = mainMismatch;
+ const mismatches = mainMismatch ? { [currentPath]: mainMismatchedKeys } : {};
+
+ Object.keys(reorderedData).forEach((key) => {
+ if (KEY_ORDERS.main.includes(key)) {
+ reorderedData[key] = data[key];
+ return;
+ }
+
+ const result = reorderKeysInJson(reorderedData[key], `${currentPath}.${key}`);
+ reorderedData[key] = typeof result === 'object' && result !== null ? result.reorderedData || result : result;
+ if (result.isKeyOrderMismatched) {
+ Object.assign(mismatches, result.mismatches);
+ hasAnyKeyOrderMismatch = true;
+ }
+ });
+
+ return {
+ reorderedData,
+ isKeyOrderMismatched: hasAnyKeyOrderMismatch,
+ mismatches,
+ };
+ }
+
+ return data;
+}
+
+/**
+ * Processes all JSON files in a given directory path, reordering keys in each file based on predefined key orders.
+ * @param {string} directoryPath - The path of the directory containing JSON files.
+ */
+function processJsonFilesInDirectory(directoryPath) {
+ fs.readdirSync(directoryPath).forEach((fileName) => {
+ const filePath = path.join(directoryPath, fileName);
+ const fileStats = fs.statSync(filePath);
+
+ if (fileStats.isDirectory()) {
+ processJsonFilesInDirectory(filePath);
+ } else if (fileStats.isFile() && path.extname(fileName) === '.json') {
+ try {
+ let fileContent = fs.readFileSync(filePath, 'utf-8');
+ const jsonData = JSON.parse(fileContent);
+
+ const { reorderedData, isKeyOrderMismatched, mismatches } = reorderKeysInJson(jsonData);
+
+ if (isKeyOrderMismatched) {
+ warningsCount++;
+ if (shouldFix) {
+ fs.writeFileSync(filePath, JSON.stringify(reorderedData, null, 2), 'utf-8');
+ } else {
+ console.warn(chalk.yellow(`Warning: Key order mismatch in ${filePath}.`));
+ console.warn(chalk.red('Mismatched keys by path:'));
+ Object.entries(mismatches).forEach(([keyPath, keys]) => {
+ console.warn(chalk.cyan(` Path: ${keyPath.slice(1)}`));
+ console.warn(chalk.magenta(` Mismatched keys: ${keys.join(', ')}`));
+ console.warn();
+ });
+ }
+ }
+
+ if (!fileContent.endsWith('\n')) {
+ fileContent += '\n';
+ fs.writeFileSync(filePath, fileContent, 'utf-8');
+ }
+
+ processedFileCount++;
+ } catch (error) {
+ console.error(chalk.red(`Error processing file ${filePath}:`), error);
+ }
+ }
+ });
+}
+
+processJsonFilesInDirectory(folderPath);
+
+let statusMessage;
+
+if (shouldFix) {
+ statusMessage = chalk.green(`Processed ${processedFileCount} files. ${warningsCount} files were updated.`);
+} else if (warningsCount > 0) {
+ statusMessage = chalk.yellow(`Processed ${processedFileCount} files. ${warningsCount} files have key order mismatches.`);
+} else {
+ statusMessage = chalk.green(`Processed ${processedFileCount} files. All files are in correct order.`);
+}
+
+console.log(statusMessage);
diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json
index 62763473d1..dbb41c54b8 100644
--- a/tokens/src/core/alias/size.json
+++ b/tokens/src/core/alias/size.json
@@ -2,15 +2,35 @@
"size": {
"$type": "dimension",
"border": {
- "width": { "source": "$border-width", "$value": "1px", "$description": "Default border width." },
+ "width": {
+ "$value": "1px",
+ "$description": "Default border width.",
+ "source": "$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": {
+ "$value": ".375rem",
+ "$description": "Default border radius.",
+ "source": "$border-radius"
+ },
+ "lg": {
+ "$value": ".425rem",
+ "$description": "Large border radius.",
+ "source": "$border-radius-lg"
+ },
+ "sm": {
+ "$value": ".25rem",
+ "$description": "Small border radius.",
+ "source": "$border-radius-sm"
+ }
}
},
"rounded": {
- "pill": { "source": "$rounded-pill", "$value": "50rem", "$description": "Pill border radius." }
+ "pill": {
+ "$value": "50rem",
+ "$description": "Pill border radius.",
+ "source": "$rounded-pill"
+ }
}
}
}
diff --git a/tokens/src/core/components/ActionRow.json b/tokens/src/core/components/ActionRow.json
index 4dd026a3b6..04ac8aa01d 100644
--- a/tokens/src/core/components/ActionRow.json
+++ b/tokens/src/core/components/ActionRow.json
@@ -3,8 +3,14 @@
"$type": "dimension",
"action-row": {
"gap": {
- "x": { "source": "$action-row-gap-x", "$value": ".5rem" },
- "y": { "source": "$action-row-gap-y", "$value": ".5rem" }
+ "x": {
+ "$value": ".5rem",
+ "source": "$action-row-gap-x"
+ },
+ "y": {
+ "$value": ".5rem",
+ "source": "$action-row-gap-y"
+ }
}
}
}
diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json
index aafa21a782..2d309a7b28 100644
--- a/tokens/src/core/components/Alert.json
+++ b/tokens/src/core/components/Alert.json
@@ -3,29 +3,62 @@
"$type": "dimension",
"alert": {
"padding": {
- "y": { "source": "$alert-padding-y", "$value": "1.5rem" },
- "x": { "source": "$alert-padding-x", "$value": "1.5rem" }
+ "y": {
+ "$value": "1.5rem",
+ "source": "$alert-padding-y"
+ },
+ "x": {
+ "$value": "1.5rem",
+ "source": "$alert-padding-x"
+ }
},
- "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": {
+ "$value": "1rem",
+ "source": "$alert-margin-bottom"
+ },
+ "actions-gap": {
+ "$value": "{spacing.spacer.3}",
+ "source": "$alert-actions-gap"
+ },
+ "icon-space": {
+ "$value": ".8rem",
+ "source": "$alert-icon-space"
+ }
}
},
"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": {
+ "$type": "fontWeight",
+ "$value": "{typography.font.weight.normal}",
+ "source": "$alert-link-font-weight"
+ },
+ "size": {
+ "$type": "dimension",
+ "$value": ".875rem",
+ "source": "$alert-font-size"
+ }
},
- "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "number" }
+ "line-height": {
+ "$type": "number",
+ "$value": "1.5rem",
+ "source": "$alert-line-height"
+ }
}
},
"size": {
"$type": "dimension",
"alert": {
"border": {
- "radius": { "source": "$alert-border-radius", "$value": "{size.border.radius.base}" },
- "width": { "source": "$alert-border-width", "$value": "0" }
+ "radius": {
+ "$value": "{size.border.radius.base}",
+ "source": "$alert-border-radius"
+ },
+ "width": {
+ "$value": "0",
+ "source": "$alert-border-width"
+ }
}
}
}
diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json
index bd86bd7be2..728cac401f 100644
--- a/tokens/src/core/components/Annotation.json
+++ b/tokens/src/core/components/Annotation.json
@@ -2,26 +2,49 @@
"spacing": {
"$type": "dimension",
"annotation": {
- "padding": { "source": "$annotation-padding", "$value": ".5rem" },
+ "padding": {
+ "$value": ".5rem",
+ "source": "$annotation-padding"
+ },
"arrow-side": {
- "margin": { "source": "$annotation-arrow-side-margin", "$value": ".25rem" }
+ "margin": {
+ "$value": ".25rem",
+ "source": "$annotation-arrow-side-margin"
+ }
}
}
},
"typography": {
"annotation": {
- "font-size": { "source": "$annotation-font-size", "$value": "{typography.font.size.sm}", "$type": "dimension" },
- "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}", "$type": "number" }
+ "font-size": {
+ "$type": "dimension",
+ "$value": "{typography.font.size.sm}",
+ "source": "$annotation-font-size"
+ },
+ "line-height": {
+ "$type": "number",
+ "$value": "{typography.line-height.sm}",
+ "source": "$annotation-line-height"
+ }
}
},
"size": {
"$type": "dimension",
"annotation": {
"arrow-border": {
- "width": { "source": "$annotation-arrow-border-width", "$value": ".5rem" }
+ "width": {
+ "$value": ".5rem",
+ "source": "$annotation-arrow-border-width"
+ }
},
- "max-width": { "source": "$annotation-max-width", "$value": "18.75rem" },
- "border-radius": { "source": "$annotation-border-radius", "$value": ".25rem" }
+ "max-width": {
+ "$value": "18.75rem",
+ "source": "$annotation-max-width"
+ },
+ "border-radius": {
+ "$value": ".25rem",
+ "source": "$annotation-border-radius"
+ }
}
}
}
diff --git a/tokens/src/core/components/Avatar.json b/tokens/src/core/components/Avatar.json
index 58bd3176ed..fb71335d19 100644
--- a/tokens/src/core/components/Avatar.json
+++ b/tokens/src/core/components/Avatar.json
@@ -1,16 +1,52 @@
{
"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": {
+ "$type": "dimension",
+ "$value": "3rem",
+ "source": "$avatar-size"
+ },
+ "xs": {
+ "$type": "dimension",
+ "$value": "1.5rem",
+ "source": "$avatar-size-xs"
+ },
+ "sm": {
+ "$type": "dimension",
+ "$value": "2.25rem",
+ "source": "$avatar-size-sm"
+ },
+ "lg": {
+ "$type": "dimension",
+ "$value": "4rem",
+ "source": "$avatar-size-lg"
+ },
+ "xl": {
+ "$type": "dimension",
+ "$value": "6rem",
+ "source": "$avatar-size-xl"
+ },
+ "xxl": {
+ "$type": "dimension",
+ "$value": "11.5rem",
+ "source": "$avatar-size-xxl"
+ },
+ "huge": {
+ "$type": "dimension",
+ "$value": "18.75rem",
+ "source": "$avatar-size-huge"
+ },
"border": {
- "base": { "source": "$avatar-border", "$value": "1px", "$type": "dimension" },
- "radius": { "source": "$avatar-border-radius", "$value": "100%", "$type": "percentage" }
+ "base": {
+ "$type": "dimension",
+ "$value": "1px",
+ "source": "$avatar-border"
+ },
+ "radius": {
+ "$type": "percentage",
+ "$value": "100%",
+ "source": "$avatar-border-radius"
+ }
}
}
}
diff --git a/tokens/src/core/components/AvatarButton.json b/tokens/src/core/components/AvatarButton.json
index c5635bf79c..468c381921 100644
--- a/tokens/src/core/components/AvatarButton.json
+++ b/tokens/src/core/components/AvatarButton.json
@@ -3,9 +3,18 @@
"$type": "dimension",
"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": {
+ "$value": ".25em",
+ "source": "$avatar-button-padding-left"
+ },
+ "sm": {
+ "$value": ".25em",
+ "source": "$avatar-button-padding-left-sm"
+ },
+ "lg": {
+ "$value": ".25em",
+ "source": "$avatar-button-padding-left-lg"
+ }
}
}
}
diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json
index 61cbc94e7a..5964afc473 100644
--- a/tokens/src/core/components/Badge.json
+++ b/tokens/src/core/components/Badge.json
@@ -4,18 +4,35 @@
"badge": {
"padding": {
"x": {
- "base": { "source": "$badge-padding-x", "$value": ".5rem" },
- "pill": { "source": "$badge-pill-padding-x", "$value": ".6em" }
+ "base": {
+ "$value": ".5rem",
+ "source": "$badge-padding-x"
+ },
+ "pill": {
+ "$value": ".6em",
+ "source": "$badge-pill-padding-x"
+ }
},
- "y": { "source": "$badge-padding-y", "$value": ".125rem" }
+ "y": {
+ "$value": ".125rem",
+ "source": "$badge-padding-y"
+ }
}
}
},
"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": {
+ "$type": "percentage",
+ "$value": "75%",
+ "source": "$badge-font-size"
+ },
+ "weight": {
+ "$type": "fontWeight",
+ "$value": "{typography.font.weight.bold}",
+ "source": "$badge-font-weight"
+ }
}
}
},
@@ -23,14 +40,26 @@
"$type": "dimension",
"badge": {
"border-radius": {
- "base": { "source": "$badge-border-radius", "$value": ".25rem" },
- "pill": { "source": "$badge-pill-border-radius", "$value": "10rem" }
+ "base": {
+ "$value": ".25rem",
+ "source": "$badge-border-radius"
+ },
+ "pill": {
+ "$value": "10rem",
+ "source": "$badge-pill-border-radius"
+ }
},
- "focus-width": { "source": "$badge-focus-width", "$value": "{size.input.btn.focus-width}" }
+ "focus-width": {
+ "$value": "{size.input.btn.focus-width}",
+ "source": "$badge-focus-width"
+ }
}
},
"transition": {
"$type": "transition",
- "badge": { "source": "$badge-transition", "$value": "none" }
+ "badge": {
+ "$value": "none",
+ "source": "$badge-transition"
+ }
}
}
diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json
index c3d34ad7c2..6b394dbfad 100644
--- a/tokens/src/core/components/Breadcrumb.json
+++ b/tokens/src/core/components/Breadcrumb.json
@@ -3,7 +3,10 @@
"$type": "dimension",
"breadcrumb": {
"margin": {
- "left": { "source": "$breadcrumb-margin-left", "$value": ".5rem" }
+ "left": {
+ "$value": ".5rem",
+ "source": "$breadcrumb-margin-left"
+ }
}
}
},
@@ -12,13 +15,25 @@
"breadcrumb": {
"border": {
"radius": {
- "focus": { "source": "$breadcrumb-focus-border-radius", "$value": ".125rem" }
+ "focus": {
+ "$value": ".125rem",
+ "source": "$breadcrumb-focus-border-radius"
+ }
},
"axis": {
- "x-focus": { "source": "$breadcrumb-border-focus-axis-x", "$value": ".25rem" },
- "y-focus": { "source": "$breadcrumb-border-focus-axis-y", "$value": ".5rem" }
+ "x-focus": {
+ "$value": ".25rem",
+ "source": "$breadcrumb-border-focus-axis-x"
+ },
+ "y-focus": {
+ "$value": ".5rem",
+ "source": "$breadcrumb-border-focus-axis-y"
+ }
},
- "width-focus": { "source": "$breadcrumb-border-focus-width", "$value": ".0625rem" }
+ "width-focus": {
+ "$value": ".0625rem",
+ "source": "$breadcrumb-border-focus-width"
+ }
}
}
}
diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json
index 587265277c..1762e7714d 100644
--- a/tokens/src/core/components/Bubble.json
+++ b/tokens/src/core/components/Bubble.json
@@ -3,8 +3,14 @@
"$type": "dimension",
"bubble": {
"expandable-padding": {
- "y": { "source": "$bubble-expandable-padding-y", "$value": "0" },
- "x": { "source": "$bubble-expandable-padding-x", "$value": ".25rem" }
+ "y": {
+ "$value": "0",
+ "source": "$bubble-expandable-padding-y"
+ },
+ "x": {
+ "$value": ".25rem",
+ "source": "$bubble-expandable-padding-x"
+ }
}
}
}
diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json
index 93a9a7366f..a9333472b8 100644
--- a/tokens/src/core/components/Button/core.json
+++ b/tokens/src/core/components/Button/core.json
@@ -4,28 +4,52 @@
"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": {
+ "$value": "{spacing.input.btn.padding.y}",
+ "source": "$btn-padding-y"
+ },
+ "lg": {
+ "$value": "{spacing.input.btn.padding.lg.y}",
+ "source": "$btn-padding-y-lg"
+ },
+ "sm": {
+ "$value": "{spacing.input.btn.padding.sm.y}",
+ "source": "$btn-padding-y-sm"
+ }
},
"x": {
- "base": { "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": {
+ "$value": "{spacing.input.btn.padding.x}",
+ "source": "$btn-padding-x"
+ },
+ "lg": {
+ "$value": "{spacing.input.btn.padding.lg.x}",
+ "source": "$btn-padding-x-lg"
+ },
+ "sm": {
+ "$value": "{spacing.input.btn.padding.sm.x}",
+ "source": "$btn-padding-x-sm"
+ }
}
},
"block": {
- "spacing-y": { "source": "$btn-block-spacing-y", "$value": ".5rem" }
+ "spacing-y": {
+ "$value": ".5rem",
+ "source": "$btn-block-spacing-y"
+ }
},
"focus": {
- "gap": { "source": "$btn-focus-gap", "$value": "{size.btn.focus.width}" },
+ "gap": {
+ "$value": "{size.btn.focus.width}",
+ "source": "$btn-focus-gap"
+ },
"border-gap": {
- "source": "$btn-focus-border-gap",
- "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})"
+ "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
+ "source": "$btn-focus-border-gap"
},
"distance-to-border": {
- "source": "$btn-focus-distance-to-border",
- "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})"
+ "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})",
+ "source": "$btn-focus-distance-to-border"
}
}
}
@@ -33,20 +57,46 @@
"typography": {
"btn": {
"font": {
- "family": { "source": "$btn-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" },
+ "family": {
+ "$type": "fontFamily",
+ "$value": "{typography.input.btn.font.family}",
+ "source": "$btn-font-family"
+ },
"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": {
+ "$value": "{typography.input.btn.font.size.base}",
+ "source": "$btn-font-size"
+ },
+ "sm": {
+ "$value": "{typography.input.btn.font.size.sm}",
+ "source": "$btn-font-size-sm"
+ },
+ "lg": {
+ "$value": "{typography.input.btn.font.size.lg}",
+ "source": "$btn-font-size-lg"
+ }
},
- "weight": { "source": "$btn-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" }
+ "weight": {
+ "$type": "fontWeight",
+ "$value": "{typography.font.weight.normal}",
+ "source": "$btn-font-weight"
+ }
},
"line-height": {
"$type": "number",
- "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": {
+ "$value": "{typography.input.btn.line-height.base}",
+ "source": "$btn-line-height"
+ },
+ "sm": {
+ "$value": "{typography.input.btn.line-height.sm}",
+ "source": "$btn-line-height-sm"
+ },
+ "lg": {
+ "$value": "{typography.input.btn.line-height.lg}",
+ "source": "$btn-line-height-lg"
+ }
}
}
},
@@ -54,28 +104,52 @@
"$type": "dimension",
"btn": {
"border": {
- "width": { "source": "$btn-border-width", "$value": "{size.input.btn.border-width}" },
+ "width": {
+ "$value": "{size.input.btn.border-width}",
+ "source": "$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": {
+ "$value": "{size.border.radius.base}",
+ "source": "$btn-border-radius"
+ },
+ "lg": {
+ "$value": "{size.border.radius.lg}",
+ "source": "$btn-border-radius-lg"
+ },
+ "sm": {
+ "$value": "{size.border.radius.sm}",
+ "source": "$btn-border-radius-sm"
+ }
}
},
"focus": {
- "width": { "source": "$btn-focus-width", "$value": "2px" },
+ "width": {
+ "$value": "2px",
+ "source": "$btn-focus-width"
+ },
"border-radius": {
"base": {
- "source": "$btn-focus-border-radius",
- "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})"
+ "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
+ "source": "$btn-focus-border-radius"
},
- "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": {
+ "$value": "{size.btn.focus.border-radius.base}",
+ "source": "$btn-focus-border-radius-lg"
+ },
+ "sm": {
+ "$value": "{size.btn.border.radius.base}",
+ "source": "$btn-focus-border-radius-sm"
+ }
}
}
}
},
"transition": {
"$type": "transition",
- "btn": { "source": "$btn-transition", "$value": "none" }
+ "btn": {
+ "$value": "none",
+ "source": "$btn-transition"
+ }
}
}
diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json
index 5bb50e01b1..fb1299fb22 100644
--- a/tokens/src/core/components/Card.json
+++ b/tokens/src/core/components/Card.json
@@ -3,39 +3,91 @@
"$type": "dimension",
"card": {
"spacer": {
- "x": { "source": "$card-spacer-x", "$value": "1.25rem" },
- "y": { "source": "$card-spacer-y", "$value": ".75rem" }
+ "x": {
+ "$value": "1.25rem",
+ "source": "$card-spacer-x"
+ },
+ "y": {
+ "$value": ".75rem",
+ "source": "$card-spacer-y"
+ }
},
"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": {
+ "$value": "12px",
+ "source": "$card-group-margin"
+ },
+ "deck": {
+ "$value": "{spacing.card.margin.group}",
+ "source": "$card-deck-margin"
+ },
+ "deck-bottom": {
+ "$value": "{spacing.spacer.3}",
+ "source": "$card-deck-margin-bottom"
+ },
+ "grid": {
+ "$value": "{spacing.card.margin.group}",
+ "source": "$card-grid-margin"
+ },
+ "grid-bottom": {
+ "$value": "{spacing.spacer.3}",
+ "source": "$card-grid-margin-bottom"
+ }
},
"columns": {
- "margin": { "source": "$card-columns-margin", "$value": "{spacing.card.spacer.y}" },
- "count": { "source": "$card-columns-count", "$value": "3", "$type": "number" },
- "gap": { "source": "$card-columns-gap", "$value": "1.25rem" }
+ "margin": {
+ "$value": "{spacing.card.spacer.y}",
+ "source": "$card-columns-margin"
+ },
+ "count": {
+ "$type": "number",
+ "$value": "3",
+ "source": "$card-columns-count"
+ },
+ "gap": {
+ "$value": "1.25rem",
+ "source": "$card-columns-gap"
+ }
},
"footer": {
- "action-gap": { "source": "$card-footer-actions-gap", "$value": ".5rem" }
+ "action-gap": {
+ "$value": ".5rem",
+ "source": "$card-footer-actions-gap"
+ }
},
"loading-skeleton": {
- "spacer": { "source": "$loading-skeleton-spacer", "$value": ".313rem" }
+ "spacer": {
+ "$value": ".313rem",
+ "source": "$loading-skeleton-spacer"
+ }
},
"logo": {
"left-offset": {
- "base": { "source": "$card-logo-left-offset", "$value": "1.5rem" },
- "horizontal": { "source": "$card-logo-left-offset-horizontal", "$value": ".4375rem" }
+ "base": {
+ "$value": "1.5rem",
+ "source": "$card-logo-left-offset"
+ },
+ "horizontal": {
+ "$value": ".4375rem",
+ "source": "$card-logo-left-offset-horizontal"
+ }
},
"bottom-offset": {
- "base": { "source": "$card-logo-bottom-offset", "$value": "1rem" },
- "horizontal": { "source": "$card-logo-bottom-offset-horizontal", "$value": ".4375rem" }
+ "base": {
+ "$value": "1rem",
+ "source": "$card-logo-bottom-offset"
+ },
+ "horizontal": {
+ "$value": ".4375rem",
+ "source": "$card-logo-bottom-offset-horizontal"
+ }
}
},
"focus": {
- "border-offset": { "source": "$card-focus-border-offset", "$value": "5px" }
+ "border-offset": {
+ "$value": "5px",
+ "source": "$card-focus-border-offset"
+ }
}
}
},
@@ -43,34 +95,70 @@
"$type": "dimension",
"card": {
"border": {
- "width": { "source": "$card-border-width", "$value": "{size.border.width}" },
+ "width": {
+ "$value": "{size.border.width}",
+ "source": "$card-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": {
+ "$value": "{size.border.radius.base}",
+ "source": "$card-border-radius"
+ },
+ "logo": {
+ "$value": ".25rem",
+ "source": "$card-logo-border-radius"
+ },
+ "inner": {
+ "$value": "calc({size.card.border.radius.base} - {size.card.border.width})",
+ "source": "$card-inner-border-radius"
+ }
}
},
"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": {
+ "$value": "2px",
+ "source": "$card-focus-border-width"
+ },
+ "radius": {
+ "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})",
+ "source": "$card-focus-border-radius"
+ }
}
},
"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": {
+ "$value": "240px",
+ "source": "$card-image-horizontal-max-width"
+ },
+ "min": {
+ "$value": "{size.card.image.horizontal.width.max}",
+ "source": "$card-image-horizontal-min-width"
+ }
}
},
"vertical": {
- "max-height": { "source": "$card-image-vertical-max-height", "$value": "140px" }
+ "max-height": {
+ "$value": "140px",
+ "source": "$card-image-vertical-max-height"
+ }
},
- "border-radius": { "source": "$card-image-border-radius", "$value": "{size.card.border.radius.base}" }
+ "border-radius": {
+ "$value": "{size.card.border.radius.base}",
+ "source": "$card-image-border-radius"
+ }
},
"logo": {
- "width": { "source": "$card-logo-width", "$value": "7.25rem" },
- "height": { "source": "$card-logo-height", "$value": "4.125rem" }
+ "width": {
+ "$value": "7.25rem",
+ "source": "$card-logo-width"
+ },
+ "height": {
+ "$value": "4.125rem",
+ "source": "$card-logo-height"
+ }
}
}
},
@@ -78,7 +166,10 @@
"$type": "dimension",
"footer": {
"text": {
- "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.xs}" }
+ "font-size": {
+ "$value": "{typography.font.size.xs}",
+ "source": "$card-footer-text-font-size"
+ }
}
}
}
diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
index da74f2a87a..a2ffd739c8 100644
--- a/tokens/src/core/components/Carousel.json
+++ b/tokens/src/core/components/Carousel.json
@@ -3,60 +3,88 @@
"carousel": {
"control": {
"width": {
- "base": { "source": "$carousel-control-width", "$value": "15%", "$type": "percentage" },
- "icon": { "source": "$carousel-control-icon-width", "$value": "20px", "$type": "dimension" }
+ "base": {
+ "$type": "percentage",
+ "$value": "15%",
+ "source": "$carousel-control-width"
+ },
+ "icon": {
+ "$type": "dimension",
+ "$value": "20px",
+ "source": "$carousel-control-icon-width"
+ }
}
},
"indicator": {
"$type": "dimension",
- "width": { "source": "$carousel-indicator-width", "$value": "30px" },
+ "width": {
+ "$value": "30px",
+ "source": "$carousel-indicator-width"
+ },
"height": {
- "base": { "source": "$carousel-indicator-height", "$value": "3px" },
- "area-hit": { "source": "$carousel-indicator-hit-area-height", "$value": "10px" }
+ "base": {
+ "$value": "3px",
+ "source": "$carousel-indicator-height"
+ },
+ "area-hit": {
+ "$value": "10px",
+ "source": "$carousel-indicator-hit-area-height"
+ }
}
},
- "caption-width": { "source": "$carousel-caption-width", "$value": "70%", "$type": "percentage" }
+ "caption-width": {
+ "$type": "percentage",
+ "$value": "70%",
+ "source": "$carousel-caption-width"
+ }
}
},
"spacing": {
"$type": "dimension",
"carousel": {
- "indicator-spacer": { "source": "$carousel-indicator-spacer", "$value": "3px" }
+ "indicator-spacer": {
+ "$value": "3px",
+ "source": "$carousel-indicator-spacer"
+ }
}
},
"transition": {
"$type": "transition",
"carousel": {
"base": {
- "source": "$carousel-transition",
"$value": {
"property": "transform",
"duration": "{transition.carousel.duration}",
"timingFunction": "ease-in-out",
"delay": "0ms",
"behavior": "normal"
- }
+ },
+ "source": "$carousel-transition"
+ },
+ "duration": {
+ "$type": "duration",
+ "$value": ".6s",
+ "source": "$carousel-transition-duration"
},
- "duration": { "source": "$carousel-transition-duration", "$value": ".6s", "$type": "duration" },
"indicator": {
- "source": "$carousel-indicator-transition",
"$value": {
"property": "opacity",
"duration": "{transition.carousel.duration}",
"timingFunction": "ease",
"delay": "0ms",
"behavior": "normal"
- }
+ },
+ "source": "$carousel-indicator-transition"
},
"control": {
- "source": "$carousel-control-transition",
"$value": {
"property": "opacity",
"duration": ".15s",
"timingFunction": "ease",
"delay": "0ms",
"behavior": "normal"
- }
+ },
+ "source": "$carousel-control-transition"
}
}
}
diff --git a/tokens/src/core/components/Chip.json b/tokens/src/core/components/Chip.json
index a6699c402e..c0a685f33b 100644
--- a/tokens/src/core/components/Chip.json
+++ b/tokens/src/core/components/Chip.json
@@ -3,31 +3,64 @@
"$type": "dimension",
"chip": {
"margin": {
- "base": { "source": "$chip-margin", "$value": ".125rem" },
- "icon": { "source": "$chip-icon-margin", "$value": ".25rem" }
+ "base": {
+ "$value": ".125rem",
+ "source": "$chip-margin"
+ },
+ "icon": {
+ "$value": ".25rem",
+ "source": "$chip-icon-margin"
+ }
},
"padding": {
- "y": { "source": "$chip-padding-y", "$value": "1px" },
- "x": { "source": "$chip-padding-x", "$value": ".5rem" }
+ "y": {
+ "$value": "1px",
+ "source": "$chip-padding-y"
+ },
+ "x": {
+ "$value": ".5rem",
+ "source": "$chip-padding-x"
+ }
},
"outline": {
"selected-distance": {
- "light": { "source": "$chip-light-selected-outline-distance", "$value": "3px" },
- "dark": { "source": "$chip-dark-selected-outline-distance", "$value": "3px" }
+ "light": {
+ "$value": "3px",
+ "source": "$chip-light-selected-outline-distance"
+ },
+ "dark": {
+ "$value": "3px",
+ "source": "$chip-dark-selected-outline-distance"
+ }
},
"focus-distance": {
- "light": { "source": "$chip-light-focus-outline-distance", "$value": ".313rem" },
- "dark": { "source": "$chip-dark-focus-outline-distance", "$value": ".313rem" }
+ "light": {
+ "$value": ".313rem",
+ "source": "$chip-light-focus-outline-distance"
+ },
+ "dark": {
+ "$value": ".313rem",
+ "source": "$chip-dark-focus-outline-distance"
+ }
},
- "width": { "source": "$chip-outline-width", "$value": "3px" }
+ "width": {
+ "$value": "3px",
+ "source": "$chip-outline-width"
+ }
}
}
},
"size": {
"$type": "dimension",
"chip": {
- "border-radius": { "source": "$chip-border-radius", "$value": ".375rem" },
- "icon": { "source": "$chip-icon-size", "$value": "1.5rem" }
+ "border-radius": {
+ "$value": ".375rem",
+ "source": "$chip-border-radius"
+ },
+ "icon": {
+ "$value": "1.5rem",
+ "source": "$chip-icon-size"
+ }
}
}
}
diff --git a/tokens/src/core/components/ChipCarousel.json b/tokens/src/core/components/ChipCarousel.json
index ccb1edafd4..f1af5afeae 100644
--- a/tokens/src/core/components/ChipCarousel.json
+++ b/tokens/src/core/components/ChipCarousel.json
@@ -2,11 +2,20 @@
"spacing": {
"$type": "dimension",
"chip-carousel": {
- "controls-top-offset": { "source": "$chip-carousel-controls-top-offset", "$value": ".375rem" },
+ "controls-top-offset": {
+ "$value": ".375rem",
+ "source": "$chip-carousel-controls-top-offset"
+ },
"container": {
"padding": {
- "x": { "source": "$chip-carousel-container-padding-x", "$value": ".625rem" },
- "y": { "source": "$chip-carousel-container-padding-y", "$value": ".313rem" }
+ "x": {
+ "$value": ".625rem",
+ "source": "$chip-carousel-container-padding-x"
+ },
+ "y": {
+ "$value": ".313rem",
+ "source": "$chip-carousel-container-padding-y"
+ }
}
}
}
diff --git a/tokens/src/core/components/CloseButton.json b/tokens/src/core/components/CloseButton.json
index 6308930b30..12277a1df2 100644
--- a/tokens/src/core/components/CloseButton.json
+++ b/tokens/src/core/components/CloseButton.json
@@ -2,8 +2,16 @@
"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": {
+ "$type": "dimension",
+ "$value": "calc({typography.font.size.base} * 1.5)",
+ "source": "$close-font-size"
+ },
+ "weight": {
+ "$type": "fontWeight",
+ "$value": "{typography.font.weight.bold}",
+ "source": "$close-font-weight"
+ }
}
}
}
diff --git a/tokens/src/core/components/Code.json b/tokens/src/core/components/Code.json
index 4e03d1613c..6fc1ac5b1f 100644
--- a/tokens/src/core/components/Code.json
+++ b/tokens/src/core/components/Code.json
@@ -1,12 +1,23 @@
{
"typography": {
"code": {
- "font-size": { "source": "$code-font-size", "$value": "{typography.font.size.sm}", "$type": "percentage" },
+ "font-size": {
+ "$type": "percentage",
+ "$value": "{typography.font.size.sm}",
+ "source": "$code-font-size"
+ },
"kbd": {
- "font-size": { "source": "$kbd-font-size", "$value": "{typography.code.font-size}", "$type": "dimension" },
+ "font-size": {
+ "$type": "dimension",
+ "$value": "{typography.code.font-size}",
+ "source": "$kbd-font-size"
+ },
"nested": {
"$type": "fontWeight",
- "font-weight": { "source": "$nested-kbd-font-weight", "$value": "{typography.font.weight.bold}" }
+ "font-weight": {
+ "$value": "{typography.font.weight.bold}",
+ "source": "$nested-kbd-font-weight"
+ }
}
}
}
@@ -16,8 +27,14 @@
"code": {
"kbd": {
"padding": {
- "y": { "source": "$kbd-padding-y", "$value": ".2rem" },
- "x": { "source": "$kbd-padding-x", "$value": ".4rem" }
+ "y": {
+ "$value": ".2rem",
+ "source": "$kbd-padding-y"
+ },
+ "x": {
+ "$value": ".4rem",
+ "source": "$kbd-padding-x"
+ }
}
}
}
@@ -27,7 +44,10 @@
"code": {
"pre": {
"scrollable": {
- "max-height": { "source": "$pre-scrollable-max-height", "$value": "340px" }
+ "max-height": {
+ "$value": "340px",
+ "source": "$pre-scrollable-max-height"
+ }
}
}
}
diff --git a/tokens/src/core/components/Collapsible.json b/tokens/src/core/components/Collapsible.json
index 91cc84d3f9..239bb8c2b8 100644
--- a/tokens/src/core/components/Collapsible.json
+++ b/tokens/src/core/components/Collapsible.json
@@ -5,19 +5,46 @@
"card": {
"spacer": {
"y": {
- "base": { "source": "$collapsible-card-spacer-y", "$value": ".5rem" },
- "lg": { "source": "$collapsible-card-spacer-y-lg", "$value": "{spacing.card.spacer.y}" }
+ "base": {
+ "$value": ".5rem",
+ "source": "$collapsible-card-spacer-y"
+ },
+ "lg": {
+ "$value": "{spacing.card.spacer.y}",
+ "source": "$collapsible-card-spacer-y-lg"
+ }
},
"x": {
- "base": { "source": "$collapsible-card-spacer-x", "$value": ".5rem" },
- "lg": { "source": "$collapsible-card-spacer-x-lg", "$value": "{spacing.card.spacer.x}" }
+ "base": {
+ "$value": ".5rem",
+ "source": "$collapsible-card-spacer-x"
+ },
+ "lg": {
+ "$value": "{spacing.card.spacer.x}",
+ "source": "$collapsible-card-spacer-x-lg"
+ }
+ },
+ "left-body": {
+ "$value": ".75rem",
+ "source": "$collapsible-card-body-spacer-left"
+ },
+ "icon": {
+ "$value": "2.5rem",
+ "source": "$collapsible-card-spacer-icon"
},
- "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": {
+ "$value": ".5rem",
+ "source": "$collapsible-basic-spacer-y"
+ },
+ "x": {
+ "$value": ".5rem",
+ "source": "$collapsible-basic-spacer-x"
+ },
+ "icon": {
+ "$value": ".625rem",
+ "source": "$collapsible-basic-spacer-icon"
+ }
}
}
}
diff --git a/tokens/src/core/components/ColorPicker.json b/tokens/src/core/components/ColorPicker.json
index 35ed3a43a8..8a6cbbe471 100644
--- a/tokens/src/core/components/ColorPicker.json
+++ b/tokens/src/core/components/ColorPicker.json
@@ -2,8 +2,14 @@
"size": {
"$type": "dimension",
"color-picker": {
- "sm": { "source": "$picker-size-sm", "$value": "2rem" },
- "md": { "source": "$picker-size-md", "$value": "calc(1.3333em + 1.125rem + 2px)" }
+ "sm": {
+ "$value": "2rem",
+ "source": "$picker-size-sm"
+ },
+ "md": {
+ "$value": "calc(1.3333em + 1.125rem + 2px)",
+ "source": "$picker-size-md"
+ }
}
}
}
diff --git a/tokens/src/core/components/Container.json b/tokens/src/core/components/Container.json
index fc72b78a5e..a760172e2b 100644
--- a/tokens/src/core/components/Container.json
+++ b/tokens/src/core/components/Container.json
@@ -3,11 +3,26 @@
"$type": "dimension",
"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": {
+ "$value": "464px",
+ "source": "$max-width-xs"
+ },
+ "sm": {
+ "$value": "708px",
+ "source": "$max-width-sm"
+ },
+ "md": {
+ "$value": "952px",
+ "source": "$max-width-md"
+ },
+ "lg": {
+ "$value": "1192px",
+ "source": "$max-width-lg"
+ },
+ "xl": {
+ "$value": "1440px",
+ "source": "$max-width-xl"
+ }
}
}
}
diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json
index 75bf84d8e2..b95a910d93 100644
--- a/tokens/src/core/components/DataTable.json
+++ b/tokens/src/core/components/DataTable.json
@@ -2,15 +2,27 @@
"size": {
"$type": "dimension",
"data-table": {
- "border": { "source": "$data-table-border", "$value": "2px" },
+ "border": {
+ "$value": "2px",
+ "source": "$data-table-border"
+ },
"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": {
+ "$value": "60vh",
+ "source": "$data-table-pagination-dropdown-max-height"
+ },
+ "min-width": {
+ "$value": "6rem",
+ "source": "$data-table-pagination-dropdown-min-width"
+ }
}
},
"layout": {
- "sidebar-width": { "source": "$data-table-layout-sidebar-width", "$value": "12rem" }
+ "sidebar-width": {
+ "$value": "12rem",
+ "source": "$data-table-layout-sidebar-width"
+ }
}
}
},
@@ -18,18 +30,31 @@
"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" },
+ "x": {
+ "$value": ".75rem",
+ "source": "$data-table-padding-x"
+ },
+ "y": {
+ "$value": ".75rem",
+ "source": "$data-table-padding-y"
+ },
+ "small": {
+ "$value": ".5rem",
+ "source": "$data-table-padding-small"
+ },
"cell": {
- "source": "$data-table-cell-padding",
"$value": {
"x": ".5rem",
"y": ".75rem"
- }
+ },
+ "source": "$data-table-cell-padding"
}
},
- "footer-position": { "source": "$data-table-footer-position", "$value": "center", "$type": "position" }
+ "footer-position": {
+ "$type": "position",
+ "$value": "center",
+ "source": "$data-table-footer-position"
+ }
}
}
}
diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json
index a709995611..50742875b9 100644
--- a/tokens/src/core/components/Dropdown.json
+++ b/tokens/src/core/components/Dropdown.json
@@ -1,24 +1,39 @@
{
"typography": {
"dropdown": {
- "font-size": { "source": "$dropdown-font-size", "$value": "{typography.font.size.base}", "$type": "dimension" },
+ "font-size": {
+ "$type": "dimension",
+ "$value": "{typography.font.size.base}",
+ "source": "$dropdown-font-size"
+ },
"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": {
+ "$value": "18rem",
+ "source": "$dropdown-min-width"
+ },
"border": {
- "width": { "source": "$dropdown-border-width", "$value": "{size.border.width}" },
+ "width": {
+ "$value": "{size.border.width}",
+ "source": "$dropdown-border-width"
+ },
"radius": {
- "base": { "source": "$dropdown-border-radius", "$value": "{size.border.radius.base}" },
+ "base": {
+ "$value": "{size.border.radius.base}",
+ "source": "$dropdown-border-radius"
+ },
"inner": {
- "source": "$dropdown-inner-border-radius",
- "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})"
+ "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})",
+ "source": "$dropdown-inner-border-radius"
}
}
}
@@ -27,36 +42,60 @@
"spacing": {
"$type": "dimension",
"dropdown": {
- "spacer": { "source": "$dropdown-spacer", "$value": ".125rem" },
+ "spacer": {
+ "$value": ".125rem",
+ "source": "$dropdown-spacer"
+ },
"padding": {
"x": {
- "base": { "source": "$dropdown-padding-x", "$value": "0" },
- "item": { "source": "$dropdown-item-padding-x", "$value": "1rem" }
+ "base": {
+ "$value": "0",
+ "source": "$dropdown-padding-x"
+ },
+ "item": {
+ "$value": "1rem",
+ "source": "$dropdown-item-padding-x"
+ }
},
"y": {
- "base": { "source": "$dropdown-padding-y", "$value": ".5rem" },
- "item": { "source": "$dropdown-item-padding-y", "$value": ".25rem" }
+ "base": {
+ "$value": ".5rem",
+ "source": "$dropdown-padding-y"
+ },
+ "item": {
+ "$value": ".25rem",
+ "source": "$dropdown-item-padding-y"
+ }
},
"header": {
- "source": "$dropdown-header-padding",
"$value": {
"x": "{spacing.dropdown.padding.x.item}",
"y": ".5rem"
- }
+ },
+ "source": "$dropdown-header-padding"
}
},
"divider": {
- "margin-y": { "source": "$dropdown-divider-margin-y", "$value": "calc({spacing.spacer.base} / 2)" }
+ "margin-y": {
+ "$value": "calc({spacing.spacer.base} / 2)",
+ "source": "$dropdown-divider-margin-y"
+ }
},
"close-container": {
- "top": { "source": "$modal-close-container-top", "$value": ".625rem" }
+ "top": {
+ "$value": ".625rem",
+ "source": "$modal-close-container-top"
+ }
}
}
},
"elevation": {
"$type": "ratio",
"dropdown": {
- "zindex": { "source": "$zindex-dropdown", "$value": "1000" }
+ "zindex": {
+ "$value": "1000",
+ "source": "$zindex-dropdown"
+ }
}
}
}
diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json
index 9cfcb28071..63a433b9f1 100644
--- a/tokens/src/core/components/Dropzone.json
+++ b/tokens/src/core/components/Dropzone.json
@@ -3,16 +3,25 @@
"$type": "dimension",
"dropzone": {
"restriction-msg": {
- "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.xs}" }
+ "font-size": {
+ "$value": "{typography.font.size.xs}",
+ "source": "$dropzone-restriction-msg-font-size"
+ }
}
}
},
"spacing": {
"$type": "dimension",
"dropzone": {
- "padding": { "source": "$dropzone-padding", "$value": "1.5rem" },
+ "padding": {
+ "$value": "1.5rem",
+ "source": "$dropzone-padding"
+ },
"border": {
- "base": { "source": "$dropzone-border-default", "$value": "1px" }
+ "base": {
+ "$value": "1px",
+ "source": "$dropzone-border-default"
+ }
}
}
}
diff --git a/tokens/src/core/components/Form/other.json b/tokens/src/core/components/Form/other.json
index aa14828016..8c1ef8fb32 100644
--- a/tokens/src/core/components/Form/other.json
+++ b/tokens/src/core/components/Form/other.json
@@ -2,12 +2,24 @@
"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": {
+ "$type": "cursorStyle",
+ "$value": "auto",
+ "source": "$custom-control-cursor"
+ },
+ "range-track-cursor": {
+ "$type": "cursorStyle",
+ "$value": "pointer",
+ "source": "$custom-range-track-cursor"
+ },
"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 dcf0e043e5..c90aea3a6f 100644
--- a/tokens/src/core/components/Form/size.json
+++ b/tokens/src/core/components/Form/size.json
@@ -5,67 +5,102 @@
"$type": "dimension",
"height": {
"base": {
- "source": "$input-height",
- "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})"
+ "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})",
+ "source": "$input-height"
},
"sm": {
- "source": "$input-height-sm",
- "$value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})"
+ "$value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})",
+ "source": "$input-height-sm"
},
"lg": {
- "source": "$input-height-lg",
- "$value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})"
+ "$value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})",
+ "source": "$input-height-lg"
},
"inner": {
"base": {
- "source": "$input-height-inner",
- "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)"
+ "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
+ "source": "$input-height-inner"
},
"half": {
- "source": "$input-height-inner-half",
- "$value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})"
+ "$value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})",
+ "source": "$input-height-inner-half"
},
"quarter": {
- "source": "$input-height-inner-quarter",
- "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))"
+ "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))",
+ "source": "$input-height-inner-quarter"
}
},
- "border": { "source": "$input-height-border", "$value": "calc({size.form.input.width.border} * 2)" }
+ "border": {
+ "$value": "calc({size.form.input.width.border} * 2)",
+ "source": "$input-height-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}" }
+ "hover": {
+ "$value": "0.063rem",
+ "source": "$input-hover-width"
+ },
+ "focus": {
+ "$value": "0.063rem",
+ "source": "$input-focus-width"
+ },
+ "border": {
+ "$value": "{size.input.btn.border-width}",
+ "source": "$input-border-width"
+ }
},
"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": {
+ "$value": "{size.border.radius.base}",
+ "source": "$input-border-radius"
+ },
+ "lg": {
+ "$value": "{size.border.radius.lg}",
+ "source": "$input-border-radius-lg"
+ },
+ "sm": {
+ "$value": "{size.border.radius.sm}",
+ "source": "$input-border-radius-sm"
+ }
}
}
},
"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": {
+ "$type": "dimension",
+ "$value": "1.25rem",
+ "source": "$custom-control-indicator-size"
+ },
+ "bg": {
+ "$type": "percentage",
+ "$value": "100%",
+ "source": "$custom-control-indicator-bg-size"
+ },
"border": {
"$type": "dimension",
- "width": { "source": "$custom-control-indicator-border-width", "$value": "0.125rem" }
+ "width": {
+ "$value": "0.125rem",
+ "source": "$custom-control-indicator-border-width"
+ }
}
},
"switch": {
"$type": "dimension",
- "width": { "source": "$custom-switch-width", "$value": "calc({size.form.control.indicator.base} * 1.75)" },
+ "width": {
+ "$value": "calc({size.form.control.indicator.base} * 1.75)",
+ "source": "$custom-switch-width"
+ },
"indicator": {
"base": {
- "source": "$custom-switch-indicator-size",
- "$value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)"
+ "$value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)",
+ "source": "$custom-switch-indicator-size"
},
"border": {
"radius": {
- "source": "$custom-switch-indicator-border-radius",
- "$value": "calc({size.form.control.indicator.base} / 2)"
+ "$value": "calc({size.form.control.indicator.base} / 2)",
+ "source": "$custom-switch-indicator-border-radius"
}
}
}
@@ -73,107 +108,196 @@
"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": {
+ "$value": "{size.form.input.height.base}",
+ "source": "$custom-select-height"
+ },
+ "lg": {
+ "$value": "{size.form.input.height.lg}",
+ "source": "$custom-select-height-lg"
+ },
+ "sm": {
+ "$value": "{size.form.input.height.sm}",
+ "source": "$custom-select-height-sm"
+ }
},
"feedback": {
"icon": {
- "source": "$custom-select-feedback-icon-size",
- "$value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}"
+ "$value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}",
+ "source": "$custom-select-feedback-icon-size"
}
},
"border": {
"width": {
- "base": { "source": "$custom-select-border-width", "$value": "{size.form.input.width.border}" }
+ "base": {
+ "$value": "{size.form.input.width.border}",
+ "source": "$custom-select-border-width"
+ }
},
- "radius": { "source": "$custom-select-border-radius", "$value": "{size.border.radius.base}" }
+ "radius": {
+ "$value": "{size.border.radius.base}",
+ "source": "$custom-select-border-radius"
+ }
}
},
"range": {
"track": {
- "width": { "source": "$custom-range-track-width", "$value": "100%", "$type": "percentage" },
- "height": { "source": "$custom-range-track-height", "$value": ".5rem", "$type": "dimension" },
+ "width": {
+ "$type": "percentage",
+ "$value": "100%",
+ "source": "$custom-range-track-width"
+ },
+ "height": {
+ "$type": "dimension",
+ "$value": ".5rem",
+ "source": "$custom-range-track-height"
+ },
"border": {
"$type": "dimension",
- "radius": { "source": "$custom-range-track-border-radius", "$value": "1rem" }
+ "radius": {
+ "$value": "1rem",
+ "source": "$custom-range-track-border-radius"
+ }
}
},
"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": {
+ "$value": "1rem",
+ "source": "$custom-range-thumb-width"
+ },
+ "height": {
+ "$value": "{size.form.control.range.thumb.width}",
+ "source": "$custom-range-thumb-height"
+ },
"border": {
- "base": { "source": "$custom-range-thumb-border", "$value": "0" },
- "radius": { "source": "$custom-range-thumb-border-radius", "$value": "1rem" }
+ "base": {
+ "$value": "0",
+ "source": "$custom-range-thumb-border"
+ },
+ "radius": {
+ "$value": "1rem",
+ "source": "$custom-range-thumb-border-radius"
+ }
},
"focus": {
- "width": { "source": "$custom-range-thumb-focus-box-shadow-width", "$value": "{size.form.input.width.focus}" }
+ "width": {
+ "$value": "{size.form.input.width.focus}",
+ "source": "$custom-range-thumb-focus-box-shadow-width"
+ }
}
}
},
"file": {
"$type": "dimension",
- "width": { "source": "$custom-file-border-width", "$value": "{size.form.input.width.border}" },
+ "width": {
+ "$value": "{size.form.input.width.border}",
+ "source": "$custom-file-border-width"
+ },
"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": {
+ "$value": "{size.form.input.height.base}",
+ "source": "$custom-file-height"
+ },
+ "inner": {
+ "$value": "{size.form.input.height.inner.base}",
+ "source": "$custom-file-height-inner"
+ }
},
"border": {
- "radius": { "source": "$custom-file-border-radius", "$value": "{size.form.input.radius.border.base}" }
+ "radius": {
+ "$value": "{size.form.input.radius.border.base}",
+ "source": "$custom-file-border-radius"
+ }
}
},
"icon": {
"$type": "dimension",
- "width": { "source": "$form-control-icon-width", "$value": "2rem" }
+ "width": {
+ "$value": "2rem",
+ "source": "$form-control-icon-width"
+ }
},
"border": {
"checkbox": {
"$type": "dimension",
"indicator": {
- "radius": { "source": "$custom-checkbox-indicator-border-radius", "$value": "0" }
+ "radius": {
+ "$value": "0",
+ "source": "$custom-checkbox-indicator-border-radius"
+ }
}
},
"radio": {
"$type": "percentage",
"indicator": {
- "radius": { "source": "$custom-radio-indicator-border-radius", "$value": "50%" }
+ "radius": {
+ "$value": "50%",
+ "source": "$custom-radio-indicator-border-radius"
+ }
}
}
}
},
"grid": {
"$type": "dimension",
- "gutter-width": { "source": "$form-grid-gutter-width", "$value": "0.625rem" }
+ "gutter-width": {
+ "$value": "0.625rem",
+ "source": "$form-grid-gutter-width"
+ }
},
"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": {
+ "$value": "2.4rem",
+ "source": "$form-autosuggest-icon-width"
+ },
+ "height": {
+ "$value": "{size.form.autosuggest.icon.width}",
+ "source": "$form-autosuggest-icon-height"
+ }
},
"spinner": {
- "width": { "source": "$form-autosuggest-spinner-width", "$value": "1.25rem" },
- "height": { "source": "$form-autosuggest-spinner-height", "$value": "{size.form.autosuggest.spinner.width}" }
+ "width": {
+ "$value": "1.25rem",
+ "source": "$form-autosuggest-spinner-width"
+ },
+ "height": {
+ "$value": "{size.form.autosuggest.spinner.width}",
+ "source": "$form-autosuggest-spinner-height"
+ }
},
"border": {
- "width": { "source": "$form-autosuggest-border-width", "$value": ".125rem" }
+ "width": {
+ "$value": ".125rem",
+ "source": "$form-autosuggest-border-width"
+ }
}
},
"border": {
"$type": "dimension",
"radius": {
"check": {
- "focus": { "source": "$form-check-focus-border-radius", "$value": ".0625rem" }
+ "focus": {
+ "$value": ".0625rem",
+ "source": "$form-check-focus-border-radius"
+ }
},
- "width": { "source": "$form-check-border-width", "$value": ".125rem" }
+ "width": {
+ "$value": ".125rem",
+ "source": "$form-check-border-width"
+ }
}
},
"feedback": {
"$type": "dimension",
"tooltip": {
"border": {
- "radius": { "source": "$form-feedback-tooltip-border-radius", "$value": "{size.border.radius.base}" }
+ "radius": {
+ "$value": "{size.border.radius.base}",
+ "source": "$form-feedback-tooltip-border-radius"
+ }
}
}
}
diff --git a/tokens/src/core/components/Form/spacing.json b/tokens/src/core/components/Form/spacing.json
index 065a110f54..059bc97fc0 100644
--- a/tokens/src/core/components/Form/spacing.json
+++ b/tokens/src/core/components/Form/spacing.json
@@ -5,104 +5,191 @@
"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": {
+ "$value": "{spacing.input.btn.padding.y}",
+ "source": "$input-padding-y"
+ },
+ "sm": {
+ "$value": "{spacing.input.btn.padding.sm.y}",
+ "source": "$input-padding-y-sm"
+ },
+ "lg": {
+ "$value": "{spacing.input.btn.padding.lg.y}",
+ "source": "$input-padding-y-lg"
+ }
},
"x": {
- "base": { "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": {
+ "$value": "{spacing.input.btn.padding.x}",
+ "source": "$input-padding-x"
+ },
+ "sm": {
+ "$value": "{spacing.input.btn.padding.sm.x}",
+ "source": "$input-padding-x-sm"
+ },
+ "lg": {
+ "$value": "{spacing.input.btn.padding.lg.x}",
+ "source": "$input-padding-x-lg"
+ }
}
},
"check": {
- "gutter": { "source": "$form-check-input-gutter", "$value": "1.25rem" },
+ "gutter": {
+ "$value": "1.25rem",
+ "source": "$form-check-input-gutter"
+ },
"margin": {
"x": {
- "base": { "source": "$form-check-input-margin-x", "$value": ".25rem" },
- "inline": { "source": "$form-check-inline-input-margin-x", "$value": ".3125rem" }
+ "base": {
+ "$value": ".25rem",
+ "source": "$form-check-input-margin-x"
+ },
+ "inline": {
+ "$value": ".3125rem",
+ "source": "$form-check-inline-input-margin-x"
+ }
},
- "y": { "source": "$form-check-input-margin-y", "$value": ".3rem" }
+ "y": {
+ "$value": ".3rem",
+ "source": "$form-check-input-margin-y"
+ }
}
}
},
"text": {
"margin": {
- "top": { "source": "$form-text-margin-top", "$value": ".25rem" }
+ "top": {
+ "$value": ".25rem",
+ "source": "$form-text-margin-top"
+ }
}
},
"check": {
"inline": {
"margin": {
- "x": { "source": "$form-check-inline-margin-x", "$value": ".75rem" }
+ "x": {
+ "$value": ".75rem",
+ "source": "$form-check-inline-margin-x"
+ }
}
},
"position": {
- "axis": { "source": "$form-check-position-axis", "$value": ".375rem" }
+ "axis": {
+ "$value": ".375rem",
+ "source": "$form-check-position-axis"
+ }
}
},
"group": {
"margin": {
- "bottom": { "source": "$form-group-margin-bottom", "$value": "1rem" }
+ "bottom": {
+ "$value": "1rem",
+ "source": "$form-group-margin-bottom"
+ }
}
},
"control": {
- "gutter": { "source": "$custom-control-gutter", "$value": ".5rem" },
+ "gutter": {
+ "$value": ".5rem",
+ "source": "$custom-control-gutter"
+ },
"spacer": {
- "x": { "source": "$custom-control-spacer-x", "$value": "1rem" }
+ "x": {
+ "$value": "1rem",
+ "source": "$custom-control-spacer-x"
+ }
},
"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": {
+ "$value": "{spacing.form.input.padding.y.base}",
+ "source": "$custom-select-padding-y"
+ },
+ "sm": {
+ "$value": "{spacing.form.input.padding.y.sm}",
+ "source": "$custom-select-padding-y-sm"
+ },
+ "lg": {
+ "$value": "{spacing.form.input.padding.y.lg}",
+ "source": "$custom-select-padding-y-lg"
+ }
},
"x": {
- "base": { "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": {
+ "$value": "{spacing.form.input.padding.x.base}",
+ "source": "$custom-select-padding-x"
+ },
+ "sm": {
+ "$value": "{spacing.form.input.padding.x.sm}",
+ "source": "$custom-select-padding-x-sm"
+ },
+ "lg": {
+ "$value": "{spacing.form.input.padding.x.lg}",
+ "source": "$custom-select-padding-x-lg"
+ }
}
},
"indicator": {
- "padding": { "source": "$custom-select-indicator-padding", "$value": "1rem" }
+ "padding": {
+ "$value": "1rem",
+ "source": "$custom-select-indicator-padding"
+ }
},
"feedback": {
"icon": {
"padding": {
"right": {
- "source": "$custom-select-feedback-icon-padding-right",
- "$value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})"
+ "$value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
+ "source": "$custom-select-feedback-icon-padding-right"
}
},
"position": {
- "source": "$custom-select-feedback-icon-position",
"$value": {
"position-y": "center",
"position-x": "right",
"offset-x": "calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
"offset-y": "0"
- }
+ },
+ "source": "$custom-select-feedback-icon-position"
}
},
"margin": {
- "top": { "source": "$form-feedback-margin-top", "$value": "{spacing.form.text.margin.top}" }
+ "top": {
+ "$value": "{spacing.form.text.margin.top}",
+ "source": "$form-feedback-margin-top"
+ }
},
"tooltip": {
"padding": {
- "y": { "source": "$form-feedback-tooltip-padding-y", "$value": ".25rem" },
- "x": { "source": "$form-feedback-tooltip-padding-x", "$value": ".5rem" }
+ "y": {
+ "$value": ".25rem",
+ "source": "$form-feedback-tooltip-padding-y"
+ },
+ "x": {
+ "$value": ".5rem",
+ "source": "$form-feedback-tooltip-padding-x"
+ }
}
}
},
"icon": {
- "padding": { "source": "$select-icon-padding", "$value": ".5625rem" }
+ "padding": {
+ "$value": ".5625rem",
+ "source": "$select-icon-padding"
+ }
}
},
"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": {
+ "$value": "{spacing.form.input.padding.y.base}",
+ "source": "$custom-file-padding-y"
+ },
+ "x": {
+ "$value": "{spacing.form.input.padding.x.base}",
+ "source": "$custom-file-padding-x"
+ }
}
}
}
diff --git a/tokens/src/core/components/Form/transition.json b/tokens/src/core/components/Form/transition.json
index 14b7c2afc5..bf07eefc51 100644
--- a/tokens/src/core/components/Form/transition.json
+++ b/tokens/src/core/components/Form/transition.json
@@ -3,7 +3,6 @@
"$type": "transition",
"form": {
"input": {
- "source": "$input-transition",
"$value": [
{
"property": "border-color",
@@ -19,10 +18,10 @@
"delay": "0s",
"behavior": "normal"
}
- ]
+ ],
+ "source": "$input-transition"
},
"control": {
- "source": "$custom-forms-transition",
"$value": [
{
"property": "background-color",
@@ -45,7 +44,8 @@
"delay": "0s",
"behavior": "normal"
}
- ]
+ ],
+ "source": "$custom-forms-transition"
}
}
}
diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json
index dd4973969b..b6159e53c4 100644
--- a/tokens/src/core/components/Form/typography.json
+++ b/tokens/src/core/components/Form/typography.json
@@ -3,54 +3,123 @@
"form": {
"input": {
"font": {
- "family": { "source": "$input-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" },
+ "family": {
+ "$type": "fontFamily",
+ "$value": "{typography.input.btn.font.family}",
+ "source": "$input-font-family"
+ },
"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": {
+ "$value": "{typography.input.btn.font.size.base}",
+ "source": "$input-font-size"
+ },
+ "sm": {
+ "$value": "{typography.input.btn.font.size.sm}",
+ "source": "$input-font-size-sm"
+ },
+ "lg": {
+ "$value": "{typography.input.btn.font.size.lg}",
+ "source": "$input-font-size-lg"
+ }
},
- "weight": { "source": "$input-font-weight", "$value": "{typography.font.weight.base}", "$type": "fontWeight" }
+ "weight": {
+ "$type": "fontWeight",
+ "$value": "{typography.font.weight.base}",
+ "source": "$input-font-weight"
+ }
},
"line-height": {
"$type": "number",
- "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": {
+ "$value": "{typography.input.btn.line-height.base}",
+ "source": "$input-line-height"
+ },
+ "sm": {
+ "$value": "{typography.input.btn.line-height.sm}",
+ "source": "$input-line-height-sm"
+ },
+ "lg": {
+ "$value": "{typography.input.btn.line-height.lg}",
+ "source": "$input-line-height-lg"
+ }
}
},
"control": {
"select": {
"font": {
- "family": { "source": "$custom-select-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" },
+ "family": {
+ "$type": "fontFamily",
+ "$value": "{typography.form.input.font.family}",
+ "source": "$custom-select-font-family"
+ },
"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": {
+ "$value": "{typography.form.input.font.size.base}",
+ "source": "$custom-select-font-size"
+ },
+ "sm": {
+ "$value": "{typography.form.input.font.size.sm}",
+ "source": "$custom-select-font-size-sm"
+ },
+ "lg": {
+ "$value": "{typography.form.input.font.size.lg}",
+ "source": "$custom-select-font-size-lg"
+ }
},
- "weight": { "source": "$custom-select-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" }
+ "weight": {
+ "$type": "fontWeight",
+ "$value": "{typography.form.input.font.weight}",
+ "source": "$custom-select-font-weight"
+ }
},
- "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" }
+ "line-height": {
+ "$type": "number",
+ "$value": "{typography.form.input.line-height.base}",
+ "source": "$custom-select-line-height"
+ }
},
"file": {
- "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" },
+ "line-height": {
+ "$type": "number",
+ "$value": "{typography.form.input.line-height.base}",
+ "source": "$custom-file-line-height"
+ },
"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": {
+ "$type": "fontFamily",
+ "$value": "{typography.form.input.font.family}",
+ "source": "$custom-file-font-family"
+ },
+ "weight": {
+ "$type": "fontWeight",
+ "$value": "{typography.form.input.font.weight}",
+ "source": "$custom-file-font-weight"
+ }
}
}
},
"feedback": {
"$type": "dimension",
"font": {
- "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.sm}" }
+ "size": {
+ "$value": "{typography.font.size.sm}",
+ "source": "$form-feedback-font-size"
+ }
},
"tooltip": {
"font": {
- "size": { "source": "$form-feedback-tooltip-font-size", "$value": "{typography.font.size.sm}" }
+ "size": {
+ "$value": "{typography.font.size.sm}",
+ "source": "$form-feedback-tooltip-font-size"
+ }
},
- "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}", "$type": "number" }
+ "line-height": {
+ "$type": "number",
+ "$value": "{typography.line-height.base}",
+ "source": "$form-feedback-tooltip-line-height"
+ }
}
}
}
diff --git a/tokens/src/core/components/Icon.json b/tokens/src/core/components/Icon.json
index 775992bfe5..bfbe6c4bc8 100644
--- a/tokens/src/core/components/Icon.json
+++ b/tokens/src/core/components/Icon.json
@@ -2,11 +2,26 @@
"size": {
"$type": "dimension",
"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": {
+ "$value": ".8em",
+ "source": "$icon-inline"
+ },
+ "xs": {
+ "$value": "1rem",
+ "source": "$icon-xs"
+ },
+ "sm": {
+ "$value": "1.25rem",
+ "source": "$icon-sm"
+ },
+ "md": {
+ "$value": "1.5rem",
+ "source": "$icon-md"
+ },
+ "lg": {
+ "$value": "1.75rem",
+ "source": "$icon-lg"
+ }
}
}
}
diff --git a/tokens/src/core/components/IconButton.json b/tokens/src/core/components/IconButton.json
index 57c3b225be..e6c6465afd 100644
--- a/tokens/src/core/components/IconButton.json
+++ b/tokens/src/core/components/IconButton.json
@@ -3,9 +3,18 @@
"$type": "dimension",
"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": {
+ "$value": "2.75rem",
+ "source": "$btn-icon-diameter-md"
+ },
+ "sm": {
+ "$value": "2.25rem",
+ "source": "$btn-icon-diameter-sm"
+ },
+ "inline": {
+ "$value": "calc({typography.line-height.base} * 1em + .1em)",
+ "source": "$btn-icon-diameter-inline"
+ }
}
}
}
diff --git a/tokens/src/core/components/Image.json b/tokens/src/core/components/Image.json
index 0e62fd3bc8..7cfec96306 100644
--- a/tokens/src/core/components/Image.json
+++ b/tokens/src/core/components/Image.json
@@ -3,7 +3,10 @@
"$type": "percentage",
"image": {
"figure-caption": {
- "font-size": { "source": "$figure-caption-font-size", "$value": "90%" }
+ "font-size": {
+ "$value": "90%",
+ "source": "$figure-caption-font-size"
+ }
}
}
},
@@ -12,8 +15,14 @@
"image": {
"thumbnail": {
"border": {
- "width": { "source": "$thumbnail-border-width", "$value": "{size.border.width}" },
- "radius": { "source": "$thumbnail-border-radius", "$value": "{size.border.radius.base}" }
+ "width": {
+ "$value": "{size.border.width}",
+ "source": "$thumbnail-border-width"
+ },
+ "radius": {
+ "$value": "{size.border.radius.base}",
+ "source": "$thumbnail-border-radius"
+ }
}
}
}
@@ -22,7 +31,10 @@
"$type": "dimension",
"image": {
"thumbnail": {
- "padding": { "source": "$thumbnail-padding", "$value": ".25rem" }
+ "padding": {
+ "$value": ".25rem",
+ "source": "$thumbnail-padding"
+ }
}
}
}
diff --git a/tokens/src/core/components/Menu.json b/tokens/src/core/components/Menu.json
index a9ed30dc57..55b90bba96 100644
--- a/tokens/src/core/components/Menu.json
+++ b/tokens/src/core/components/Menu.json
@@ -4,13 +4,25 @@
"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": {
+ "$value": "{spacing.btn.padding.x.base}",
+ "source": "$menu-item-padding-x"
+ },
+ "y": {
+ "$value": "{spacing.btn.padding.y.base}",
+ "source": "$menu-item-padding-y"
+ }
},
"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": {
+ "$value": ".25em",
+ "source": "$menu-item-icon-margin-left"
+ },
+ "right": {
+ "$value": "{spacing.menu.item.icon.margin.left}",
+ "source": "$menu-item-icon-margin-right"
+ }
}
}
}
@@ -21,8 +33,16 @@
"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": {
+ "$type": "textDecoration",
+ "$value": "underline",
+ "source": "$menu-select-btn-link-text-decoration-line"
+ },
+ "thickness": {
+ "$type": "dimension",
+ "$value": ".125rem",
+ "source": "$menu-select-btn-link-text-decoration-thickness"
+ }
}
}
}
@@ -32,17 +52,35 @@
"$type": "dimension",
"menu": {
"base": {
- "border-radius": { "source": "$menu-border-radius", "$value": ".25em" },
- "max-height": { "source": "$menu-max-height", "$value": "16.813rem" }
+ "border-radius": {
+ "$value": ".25em",
+ "source": "$menu-border-radius"
+ },
+ "max-height": {
+ "$value": "16.813rem",
+ "source": "$menu-max-height"
+ }
},
"item": {
- "height": { "source": "$menu-item-height", "$value": "3rem" },
+ "height": {
+ "$value": "3rem",
+ "source": "$menu-item-height"
+ },
"width": {
- "base": { "source": "$menu-item-width", "$value": "19rem" },
- "xs": { "source": "$menu-item-width-xs", "$value": "13.438rem" }
+ "base": {
+ "$value": "19rem",
+ "source": "$menu-item-width"
+ },
+ "xs": {
+ "$value": "13.438rem",
+ "source": "$menu-item-width-xs"
+ }
},
"border": {
- "width": { "source": "$menu-item-border-width", "$value": "{size.btn.border.width}" }
+ "width": {
+ "$value": "{size.btn.border.width}",
+ "source": "$menu-item-border-width"
+ }
}
}
}
diff --git a/tokens/src/core/components/Modal.json b/tokens/src/core/components/Modal.json
index 542cc4f3f0..aa177f3685 100644
--- a/tokens/src/core/components/Modal.json
+++ b/tokens/src/core/components/Modal.json
@@ -2,20 +2,44 @@
"elevation": {
"$type": "ratio",
"modal": {
- "backdrop-zindex": { "source": "$zindex-modal-backdrop", "$value": "1040" },
- "zindex": { "source": "$zindex-modal", "$value": "1050" }
+ "backdrop-zindex": {
+ "$value": "1040",
+ "source": "$zindex-modal-backdrop"
+ },
+ "zindex": {
+ "$value": "1050",
+ "source": "$zindex-modal"
+ }
}
},
"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": {
+ "$value": "1140px",
+ "source": "$modal-xl"
+ },
+ "lg": {
+ "$value": "800px",
+ "source": "$modal-lg"
+ },
+ "md": {
+ "$value": "500px",
+ "source": "$modal-md"
+ },
+ "sm": {
+ "$value": "400px",
+ "source": "$modal-sm"
+ },
"content-border": {
- "width": { "source": "$modal-content-border-width", "$value": "0px" },
- "radius": { "source": "$modal-content-border-radius", "$value": "{size.border.radius.lg}" }
+ "width": {
+ "$value": "0px",
+ "source": "$modal-content-border-width"
+ },
+ "radius": {
+ "$value": "{size.border.radius.lg}",
+ "source": "$modal-content-border-radius"
+ }
}
}
},
@@ -23,30 +47,45 @@
"$type": "dimension",
"modal": {
"inner-padding": {
- "base": { "source": "$modal-inner-padding", "$value": "1.5rem" },
- "bottom": { "source": "$modal-inner-padding-bottom", "$value": ".7rem" }
+ "base": {
+ "$value": "1.5rem",
+ "source": "$modal-inner-padding"
+ },
+ "bottom": {
+ "$value": ".7rem",
+ "source": "$modal-inner-padding-bottom"
+ }
},
"footer-padding": {
"base": {
- "source": "$modal-footer-padding",
"$value": {
"x": "1.5rem",
"y": "{spacing.modal.footer-padding.y}"
- }
+ },
+ "source": "$modal-footer-padding"
},
- "y": { "source": "$modal-footer-padding-y", "$value": "1rem" }
+ "y": {
+ "$value": "1rem",
+ "source": "$modal-footer-padding-y"
+ }
},
"header-padding": {
"base": {
- "source": "$modal-header-padding",
"$value": {
"x": "1.5rem",
"y": "{spacing.modal.header-padding.y}"
- }
+ },
+ "source": "$modal-header-padding"
},
- "y": { "source": "$modal-header-padding-y", "$value": "1rem" }
+ "y": {
+ "$value": "1rem",
+ "source": "$modal-header-padding-y"
+ }
},
- "dialog-margin": { "source": "$modal-dialog-margin", "$value": "1.5rem" }
+ "dialog-margin": {
+ "$value": "1.5rem",
+ "source": "$modal-dialog-margin"
+ }
}
}
}
diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json
index 6daea697dc..72ca1c1778 100644
--- a/tokens/src/core/components/Nav.json
+++ b/tokens/src/core/components/Nav.json
@@ -2,8 +2,15 @@
"typography": {
"nav": {
"link": {
- "font-weight": { "source": "$nav-link-font-weight", "$value": "500", "$type": "fontWeight" },
- "text-decoration": { "$value": "none", "$type": "textDecoration" }
+ "font-weight": {
+ "$type": "fontWeight",
+ "$value": "500",
+ "source": "$nav-link-font-weight"
+ },
+ "text-decoration": {
+ "$type": "textDecoration",
+ "$value": "none"
+ }
}
}
},
@@ -11,26 +18,47 @@
"$type": "dimension",
"nav": {
"pills": {
- "border-radius": { "source": "$nav-pills-border-radius", "$value": "{size.border.radius.base}" },
+ "border-radius": {
+ "$value": "{size.border.radius.base}",
+ "source": "$nav-pills-border-radius"
+ },
"link": {
- "border-width": { "source": "$nav-pills-link-border-width", "$value": "1px" }
+ "border-width": {
+ "$value": "1px",
+ "source": "$nav-pills-link-border-width"
+ }
},
"inverse-link": {
- "border-width": { "source": "$nav-inverse-pills-link-border-width", "$value": "{size.nav.pills.link.border-width}" }
+ "border-width": {
+ "$value": "{size.nav.pills.link.border-width}",
+ "source": "$nav-inverse-pills-link-border-width"
+ }
}
},
"tabs": {
"link": {
"border-bottom": {
- "width": { "source": "$nav-tabs-link-border-bottom-width", "$value": ".188rem" }
+ "width": {
+ "$value": ".188rem",
+ "source": "$nav-tabs-link-border-bottom-width"
+ }
}
},
"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": {
+ "$value": "{size.nav.tabs.link.border-bottom.width}",
+ "source": "$nav-inverse-tabs-link-active-border-bottom-width"
+ }
},
"border": {
- "width": { "source": "$nav-tabs-border-width", "$value": "2px" },
- "radius": { "source": "$nav-tabs-border-radius", "$value": "0" }
+ "width": {
+ "$value": "2px",
+ "source": "$nav-tabs-border-width"
+ },
+ "radius": {
+ "$value": "0",
+ "source": "$nav-tabs-border-radius"
+ }
}
}
}
@@ -40,10 +68,19 @@
"nav": {
"link": {
"padding": {
- "y": { "source": "$nav-link-padding-y", "$value": ".5rem" },
- "x": { "source": "$nav-link-padding-x", "$value": "1rem" }
+ "y": {
+ "$value": ".5rem",
+ "source": "$nav-link-padding-y"
+ },
+ "x": {
+ "$value": "1rem",
+ "source": "$nav-link-padding-x"
+ }
},
- "distance-to-border": { "source": "$nav-tabs-link-distance-to-border", "$value": "4px" }
+ "distance-to-border": {
+ "$value": "4px",
+ "source": "$nav-tabs-link-distance-to-border"
+ }
}
}
}
diff --git a/tokens/src/core/components/Navbar.json b/tokens/src/core/components/Navbar.json
index 2ea5f56ca0..72295414ba 100644
--- a/tokens/src/core/components/Navbar.json
+++ b/tokens/src/core/components/Navbar.json
@@ -3,21 +3,39 @@
"$type": "dimension",
"navbar": {
"padding": {
- "y": { "source": "$navbar-padding-y", "$value": "calc({spacing.spacer.base} / 2)" },
+ "y": {
+ "$value": "calc({spacing.spacer.base} / 2)",
+ "source": "$navbar-padding-y"
+ },
"x": {
- "base": { "source": "$navbar-padding-x", "$value": "{spacing.spacer.base}" },
- "nav-link": { "source": "$navbar-nav-link-padding-x", "$value": ".5rem" }
+ "base": {
+ "$value": "{spacing.spacer.base}",
+ "source": "$navbar-padding-x"
+ },
+ "nav-link": {
+ "$value": ".5rem",
+ "source": "$navbar-nav-link-padding-x"
+ }
}
},
"brand": {
"padding": {
- "y": { "source": "$navbar-brand-padding-y", "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)" }
+ "y": {
+ "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)",
+ "source": "$navbar-brand-padding-y"
+ }
}
},
"toggler": {
"padding": {
- "y": { "source": "$navbar-toggler-padding-y", "$value": ".25rem" },
- "x": { "source": "$navbar-toggler-padding-x", "$value": ".75rem" }
+ "y": {
+ "$value": ".25rem",
+ "source": "$navbar-toggler-padding-y"
+ },
+ "x": {
+ "$value": ".75rem",
+ "source": "$navbar-toggler-padding-x"
+ }
}
}
}
@@ -26,13 +44,22 @@
"$type": "dimension",
"navbar": {
"brand": {
- "font-size": { "source": "$navbar-brand-font-size", "$value": "{typography.font.size.lg}" }
+ "font-size": {
+ "$value": "{typography.font.size.lg}",
+ "source": "$navbar-brand-font-size"
+ }
},
"nav-link": {
- "height": { "source": "$nav-link-height", "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)" }
+ "height": {
+ "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)",
+ "source": "$nav-link-height"
+ }
},
"toggler": {
- "font-size": { "source": "$navbar-toggler-font-size", "$value": "{typography.font.size.lg}" }
+ "font-size": {
+ "$value": "{typography.font.size.lg}",
+ "source": "$navbar-toggler-font-size"
+ }
}
}
},
@@ -41,14 +68,23 @@
"navbar": {
"nav": {
"scroll": {
- "max-height": { "source": "$navbar-nav-scroll-max-height", "$value": "75vh" }
+ "max-height": {
+ "$value": "75vh",
+ "source": "$navbar-nav-scroll-max-height"
+ }
}
},
"brand": {
- "height": { "source": "$navbar-brand-height", "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})" }
+ "height": {
+ "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})",
+ "source": "$navbar-brand-height"
+ }
},
"toggler": {
- "border-radius": { "source": "$navbar-toggler-border-radius", "$value": "{size.btn.border.radius.base}" }
+ "border-radius": {
+ "$value": "{size.btn.border.radius.base}",
+ "source": "$navbar-toggler-border-radius"
+ }
}
}
}
diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json
index dc1460a37f..3567bc6d2b 100644
--- a/tokens/src/core/components/Pagination.json
+++ b/tokens/src/core/components/Pagination.json
@@ -3,9 +3,16 @@
"pagination": {
"font-size": {
"$type": "dimension",
- "sm": { "source": "$pagination-font-size-sm", "$value": ".875rem" }
+ "sm": {
+ "$value": ".875rem",
+ "source": "$pagination-font-size-sm"
+ }
},
- "line-height": { "source": "$pagination-line-height", "$value": "1.5rem", "$type": "number" }
+ "line-height": {
+ "$type": "number",
+ "$value": "1.5rem",
+ "source": "$pagination-line-height"
+ }
}
},
"spacing": {
@@ -13,14 +20,32 @@
"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": {
+ "$value": ".625rem",
+ "source": "$pagination-padding-y"
+ },
+ "sm": {
+ "$value": ".8rem",
+ "source": "$pagination-padding-y-sm"
+ },
+ "lg": {
+ "$value": ".75rem",
+ "source": "$pagination-padding-y-lg"
+ }
},
"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": {
+ "$value": "1rem",
+ "source": "$pagination-padding-x"
+ },
+ "sm": {
+ "$value": ".6rem",
+ "source": "$pagination-padding-x-sm"
+ },
+ "lg": {
+ "$value": "1.5rem",
+ "source": "$pagination-padding-x-lg"
+ }
}
}
}
@@ -29,36 +54,72 @@
"$type": "dimension",
"pagination": {
"icon": {
- "width": { "source": "$pagination-icon-width", "$value": "2.25rem" },
- "height": { "source": "$pagination-icon-height", "$value": "2.25rem" }
+ "width": {
+ "$value": "2.25rem",
+ "source": "$pagination-icon-width"
+ },
+ "height": {
+ "$value": "2.25rem",
+ "source": "$pagination-icon-height"
+ }
},
"secondary": {
"height": {
- "base": { "source": "$pagination-secondary-height", "$value": "2.75rem" },
- "sm": { "source": "$pagination-secondary-height-sm", "$value": "2.25rem" }
+ "base": {
+ "$value": "2.75rem",
+ "source": "$pagination-secondary-height"
+ },
+ "sm": {
+ "$value": "2.25rem",
+ "source": "$pagination-secondary-height-sm"
+ }
}
},
"border": {
- "width": { "source": "$pagination-border-width", "$value": "{size.border.width}" },
+ "width": {
+ "$value": "{size.border.width}",
+ "source": "$pagination-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": {
+ "$value": "{size.border.radius.sm}",
+ "source": "$pagination-border-radius-sm"
+ },
+ "lg": {
+ "$value": "{size.border.radius.lg}",
+ "source": "$pagination-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": {
+ "$value": "60vh",
+ "source": "$pagination-reduced-dropdown-max-height"
+ },
+ "min-width": {
+ "$value": "6rem",
+ "source": "$pagination-reduced-dropdown-min-width"
+ }
}
},
"toggle": {
"border": {
- "base": { "source": "$pagination-toggle-border", "$value": ".3125rem" },
- "sm": { "source": "$pagination-toggle-border-sm", "$value": ".25rem" }
+ "base": {
+ "$value": ".3125rem",
+ "source": "$pagination-toggle-border"
+ },
+ "sm": {
+ "$value": ".25rem",
+ "source": "$pagination-toggle-border-sm"
+ }
}
},
"focus": {
- "outline": { "source": "$pagination-focus-outline", "$value": "0" }
+ "outline": {
+ "$value": "0",
+ "source": "$pagination-focus-outline"
+ }
}
}
}
diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json
index de243f5e09..52ca95ecea 100644
--- a/tokens/src/core/components/Popover.json
+++ b/tokens/src/core/components/Popover.json
@@ -2,31 +2,58 @@
"typography": {
"$type": "dimension",
"popover": {
- "font-size": { "source": "$popover-font-size", "$value": "{typography.font.size.sm}" }
+ "font-size": {
+ "$value": "{typography.font.size.sm}",
+ "source": "$popover-font-size"
+ }
}
},
"size": {
"$type": "dimension",
"popover": {
- "max-width": { "source": "$popover-max-width", "$value": "480px" },
+ "max-width": {
+ "$value": "480px",
+ "source": "$popover-max-width"
+ },
"border": {
- "width": { "source": "$popover-border-width", "$value": "{size.border.width}" },
- "radius": { "source": "$popover-border-radius", "$value": "{size.border.radius.sm}" }
+ "width": {
+ "$value": "{size.border.width}",
+ "source": "$popover-border-width"
+ },
+ "radius": {
+ "$value": "{size.border.radius.sm}",
+ "source": "$popover-border-radius"
+ }
},
"icon": {
- "height": { "source": "$popover-icon-height", "$value": "1rem" },
- "width": { "source": "$popover-icon-width", "$value": "1rem" }
+ "height": {
+ "$value": "1rem",
+ "source": "$popover-icon-height"
+ },
+ "width": {
+ "$value": "1rem",
+ "source": "$popover-icon-width"
+ }
},
"arrow": {
- "width": { "source": "$popover-arrow-width", "$value": "1rem" },
- "height": { "source": "$popover-arrow-height", "$value": ".5rem" }
+ "width": {
+ "$value": "1rem",
+ "source": "$popover-arrow-width"
+ },
+ "height": {
+ "$value": ".5rem",
+ "source": "$popover-arrow-height"
+ }
}
}
},
"elevation": {
"$type": "ratio",
"popover": {
- "zindex": { "source": "$zindex-popover", "$value": "1060" }
+ "zindex": {
+ "$value": "1060",
+ "source": "$zindex-popover"
+ }
}
},
"spacing": {
@@ -34,18 +61,33 @@
"popover": {
"header": {
"padding": {
- "y": { "source": "$popover-header-padding-y", "$value": ".5rem" },
- "x": { "source": "$popover-header-padding-x", "$value": "1rem" }
+ "y": {
+ "$value": ".5rem",
+ "source": "$popover-header-padding-y"
+ },
+ "x": {
+ "$value": "1rem",
+ "source": "$popover-header-padding-x"
+ }
}
},
"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": {
+ "$value": "{spacing.popover.header.padding.y}",
+ "source": "$popover-body-padding-y"
+ },
+ "x": {
+ "$value": "{spacing.popover.header.padding.x}",
+ "source": "$popover-body-padding-x"
+ }
}
},
"icon": {
- "margin-right": { "source": "$popover-icon-margin-right", "$value": ".5rem" }
+ "margin-right": {
+ "$value": ".5rem",
+ "source": "$popover-icon-margin-right"
+ }
}
}
}
diff --git a/tokens/src/core/components/ProductTour.json b/tokens/src/core/components/ProductTour.json
index 7fa18169f0..57a56962b6 100644
--- a/tokens/src/core/components/ProductTour.json
+++ b/tokens/src/core/components/ProductTour.json
@@ -4,13 +4,28 @@
"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": {
+ "$value": "8px",
+ "source": "$checkpoint-border-width"
+ },
+ "arrow": {
+ "$value": "15px",
+ "source": "$checkpoint-arrow-width"
+ },
+ "max": {
+ "$value": "480px",
+ "source": "$checkpoint-max-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}" }
+ "top": {
+ "$value": "{size.product-tour.checkpoint.width.arrow}",
+ "source": "$checkpoint-arrow-border-top"
+ },
+ "transparent": {
+ "$value": "{size.product-tour.checkpoint.width.arrow}",
+ "source": "$checkpoint-arrow-border-transparent"
+ }
}
}
}
@@ -19,7 +34,10 @@
"$type": "ratio",
"product-tour": {
"checkpoint": {
- "zindex": { "source": "$checkpoint-z-index", "$value": "1060" }
+ "zindex": {
+ "$value": "1060",
+ "source": "$checkpoint-z-index"
+ }
}
}
}
diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json
index 09a2edd5db..0221b353b6 100644
--- a/tokens/src/core/components/ProgressBar.json
+++ b/tokens/src/core/components/ProgressBar.json
@@ -2,28 +2,49 @@
"typography": {
"$type": "dimension",
"progress-bar": {
- "font-size": { "source": "$progress-font-size", "$value": "calc({typography.font.size.base} * .75)" }
+ "font-size": {
+ "$value": "calc({typography.font.size.base} * .75)",
+ "source": "$progress-font-size"
+ }
}
},
"size": {
"$type": "dimension",
"progress-bar": {
"height": {
- "base": { "source": "$progress-height", "$value": "1rem" },
- "annotated": { "source": "$annotated-progress-height", "$value": ".3125rem" }
+ "base": {
+ "$value": "1rem",
+ "source": "$progress-height"
+ },
+ "annotated": {
+ "$value": ".3125rem",
+ "source": "$annotated-progress-height"
+ }
},
"border": {
- "width": { "source": "$progress-bar-border-width", "$value": "1px" },
- "radius": { "source": "$progress-border-radius", "$value": "0" }
+ "width": {
+ "$value": "1px",
+ "source": "$progress-bar-border-width"
+ },
+ "radius": {
+ "$value": "0",
+ "source": "$progress-border-radius"
+ }
},
- "threshold-circle": { "source": "$progress-threshold-circle", "$value": ".5625rem" }
+ "threshold-circle": {
+ "$value": ".5625rem",
+ "source": "$progress-threshold-circle"
+ }
}
},
"spacing": {
"$type": "dimension",
"progress-bar": {
"hint": {
- "annotation-gap": { "source": "$progress-hint-annotation-gap", "$value": ".5rem" }
+ "annotation-gap": {
+ "$value": ".5rem",
+ "source": "$progress-hint-annotation-gap"
+ }
}
}
},
@@ -31,23 +52,23 @@
"$type": "transition",
"progress-bar": {
"animation-timing": {
- "source": "$progress-bar-animation-timing",
"$value": {
"duration": "1s",
"timing-function": "linear",
"delay": "0s",
"iteration-count": "infinite"
- }
+ },
+ "source": "$progress-bar-animation-timing"
},
"transition": {
- "source": "$progress-bar-transition",
"$value": {
"property": "width",
"duration": ".6s",
"timing-function": "ease",
"delay": "0s",
"behavior": "normal"
- }
+ },
+ "source": "$progress-bar-transition"
}
}
}
diff --git a/tokens/src/core/components/SearchField.json b/tokens/src/core/components/SearchField.json
index 795c27de0f..d7e6a7cd04 100644
--- a/tokens/src/core/components/SearchField.json
+++ b/tokens/src/core/components/SearchField.json
@@ -4,18 +4,33 @@
"search-field": {
"border": {
"width": {
- "base": { "source": "$search-border-width", "$value": ".0625rem" },
- "focus": { "source": "$search-border-focus-width", "$value": ".3125rem" }
+ "base": {
+ "$value": ".0625rem",
+ "source": "$search-border-width"
+ },
+ "focus": {
+ "$value": ".3125rem",
+ "source": "$search-border-focus-width"
+ }
},
- "radius": { "source": "$search-border-radius", "$value": "0" }
+ "radius": {
+ "$value": "0",
+ "source": "$search-border-radius"
+ }
},
- "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": {
+ "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
+ "source": "$input-height-search"
+ }
}
},
"spacing": {
"$type": "dimension",
"search-field": {
- "margin-button": { "source": "$search-button-margin", "$value": ".5rem" }
+ "margin-button": {
+ "$value": ".5rem",
+ "source": "$search-button-margin"
+ }
}
}
}
diff --git a/tokens/src/core/components/SelectableBox.json b/tokens/src/core/components/SelectableBox.json
index b3b89e747b..632bd2c981 100644
--- a/tokens/src/core/components/SelectableBox.json
+++ b/tokens/src/core/components/SelectableBox.json
@@ -2,9 +2,18 @@
"spacing": {
"$type": "dimension",
"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": {
+ "$value": "1rem",
+ "source": "$selectable-box-padding"
+ },
+ "border-radius": {
+ "$value": ".25rem",
+ "source": "$selectable-box-border-radius"
+ },
+ "box-space": {
+ "$value": ".75rem",
+ "source": "$selectable-box-space"
+ }
}
}
}
diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json
index 103e8f7f2c..9697679c25 100644
--- a/tokens/src/core/components/Sheet.json
+++ b/tokens/src/core/components/Sheet.json
@@ -3,8 +3,14 @@
"$type": "ratio",
"sheet": {
"zindex": {
- "backdrop": { "source": "$zindex-sheet-backdrop", "$value": "1031" },
- "main": { "source": "$zindex-sheet", "$value": "1032" }
+ "backdrop": {
+ "$value": "1031",
+ "source": "$zindex-sheet-backdrop"
+ },
+ "main": {
+ "$value": "1032",
+ "source": "$zindex-sheet"
+ }
}
}
}
diff --git a/tokens/src/core/components/Spinner.json b/tokens/src/core/components/Spinner.json
index 4a086b811d..f42bfea44d 100644
--- a/tokens/src/core/components/Spinner.json
+++ b/tokens/src/core/components/Spinner.json
@@ -3,19 +3,40 @@
"$type": "dimension",
"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": {
+ "$value": "2rem",
+ "source": "$spinner-width"
+ },
+ "height": {
+ "$value": "{size.spinner.base.width}",
+ "source": "$spinner-height"
+ },
+ "border-width": {
+ "$value": ".25em",
+ "source": "$spinner-border-width"
+ }
},
"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": {
+ "$value": "1rem",
+ "source": "$spinner-width-sm"
+ },
+ "height": {
+ "$value": "{size.spinner.sm.width}",
+ "source": "$spinner-height-sm"
+ },
+ "border-width": {
+ "$value": ".2em",
+ "source": "$spinner-border-width-sm"
+ }
}
}
},
"spacing": {
"$type": "dimension",
- "vertical-align": { "source": "$spinner-vertical-align", "$value": ".125em" }
+ "vertical-align": {
+ "$value": ".125em",
+ "source": "$spinner-vertical-align"
+ }
}
}
diff --git a/tokens/src/core/components/Stack.json b/tokens/src/core/components/Stack.json
index 1a51bc842c..f32d79e330 100644
--- a/tokens/src/core/components/Stack.json
+++ b/tokens/src/core/components/Stack.json
@@ -2,7 +2,10 @@
"size": {
"$type": "dimension",
"stack": {
- "gap": { "source": "$stack-gap", "$value": "0" }
+ "gap": {
+ "$value": "0",
+ "source": "$stack-gap"
+ }
}
}
}
diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json
index f292871793..3b5e3f1123 100644
--- a/tokens/src/core/components/Stepper.json
+++ b/tokens/src/core/components/Stepper.json
@@ -4,17 +4,35 @@
"stepper": {
"header": {
"padding": {
- "y": { "source": "$stepper-header-padding-y", "$value": ".75rem" },
- "x": { "source": "$stepper-header-padding-x", "$value": "{spacing.spacer.base}" }
+ "y": {
+ "$value": ".75rem",
+ "source": "$stepper-header-padding-y"
+ },
+ "x": {
+ "$value": "{spacing.spacer.base}",
+ "source": "$stepper-header-padding-x"
+ }
},
"step": {
- "padding": { "source": "$stepper-header-step-padding", "$value": ".25rem" },
+ "padding": {
+ "$value": ".25rem",
+ "source": "$stepper-header-step-padding"
+ },
"list": {
"padding": {
- "y": { "source": "$stepper-header-step-list-padding-y", "$value": ".25rem" },
- "x": { "source": "$stepper-header-step-list-padding-x", "$value": "0" }
+ "y": {
+ "$value": ".25rem",
+ "source": "$stepper-header-step-list-padding-y"
+ },
+ "x": {
+ "$value": "0",
+ "source": "$stepper-header-step-list-padding-x"
+ }
},
- "margin": { "source": "$stepper-header-step-list-margin", "$value": "0" }
+ "margin": {
+ "$value": "0",
+ "source": "$stepper-header-step-list-margin"
+ }
}
}
}
@@ -24,17 +42,30 @@
"$type": "dimension",
"stepper": {
"header": {
- "height-min": { "source": "$stepper-header-min-height", "$value": "5.13rem" }
+ "height-min": {
+ "$value": "5.13rem",
+ "source": "$stepper-header-min-height"
+ }
},
"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": {
+ "$value": "0",
+ "source": "$stepper-header-step-min-width"
+ },
+ "bubble-error-shadow-width": {
+ "$value": "3px",
+ "source": "$stepper-header-step-error-bubble-shadow-width"
+ }
}
}
},
"typography": {
"spacer": {
- "line-height": { "source": "$stepper-header-line-height", "$value": "1px", "$type": "number" }
+ "line-height": {
+ "$type": "number",
+ "$value": "1px",
+ "source": "$stepper-header-line-height"
+ }
}
}
}
diff --git a/tokens/src/core/components/Sticky.json b/tokens/src/core/components/Sticky.json
index e85f22aca8..953426a84e 100644
--- a/tokens/src/core/components/Sticky.json
+++ b/tokens/src/core/components/Sticky.json
@@ -2,7 +2,10 @@
"spacing": {
"$type": "dimension",
"sticky": {
- "offset": { "source": "$sticky-offset", "$value": "0" }
+ "offset": {
+ "$value": "0",
+ "source": "$sticky-offset"
+ }
}
}
}
diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json
index 6bc272e388..5dfc20fb72 100644
--- a/tokens/src/core/components/Tab.json
+++ b/tokens/src/core/components/Tab.json
@@ -3,17 +3,38 @@
"$type": "dimension",
"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": {
+ "$value": ".7rem",
+ "source": "$tab-more-link-dropdown-toggle-padding-x"
+ },
+ "padding-y": {
+ "$value": "{spacing.spacer.base}",
+ "source": "$tab-more-link-dropdown-toggle-padding-y"
+ }
},
"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": {
+ "$value": ".625rem",
+ "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x"
+ },
+ "padding-y": {
+ "$value": "{spacing.spacer.base}",
+ "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y"
+ }
},
"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": {
+ "$value": ".625rem",
+ "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x"
+ },
+ "padding-y": {
+ "$value": "{spacing.spacer.base}",
+ "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y"
+ },
+ "distance": {
+ "$value": "5px",
+ "source": "$tab-inverse-pills-link-dropdown-distance"
+ }
}
}
}
diff --git a/tokens/src/core/components/Tabs.json b/tokens/src/core/components/Tabs.json
index 7670ff130a..f3d7088535 100644
--- a/tokens/src/core/components/Tabs.json
+++ b/tokens/src/core/components/Tabs.json
@@ -3,8 +3,14 @@
"$type": "dimension",
"tabs": {
"notification": {
- "height": { "source": "$tab-notification-height", "$value": "1rem" },
- "width": { "source": "$tab-notification-width", "$value": "1rem" }
+ "height": {
+ "$value": "1rem",
+ "source": "$tab-notification-height"
+ },
+ "width": {
+ "$value": "1rem",
+ "source": "$tab-notification-width"
+ }
}
}
},
@@ -12,7 +18,10 @@
"$type": "dimension",
"tabs": {
"notification": {
- "font-size": { "source": "$tab-notification-font-size", "$value": "{typography.font.size.xs}" }
+ "font-size": {
+ "$value": "{typography.font.size.xs}",
+ "source": "$tab-notification-font-size"
+ }
}
}
}
diff --git a/tokens/src/core/components/Toast.json b/tokens/src/core/components/Toast.json
index 5da5d6e1fe..9175627000 100644
--- a/tokens/src/core/components/Toast.json
+++ b/tokens/src/core/components/Toast.json
@@ -2,16 +2,28 @@
"typography": {
"$type": "dimension",
"toast": {
- "font-size": { "source": "$toast-font-size", "$value": ".875rem" }
+ "font-size": {
+ "$value": ".875rem",
+ "source": "$toast-font-size"
+ }
}
},
"size": {
"$type": "dimension",
"toast": {
- "max-width": { "source": "$toast-max-width", "$value": "400px" },
+ "max-width": {
+ "$value": "400px",
+ "source": "$toast-max-width"
+ },
"border": {
- "width": { "source": "$toast-border-width", "$value": "1px" },
- "radius": { "source": "$toast-border-radius", "$value": ".25rem" }
+ "width": {
+ "$value": "1px",
+ "source": "$toast-border-width"
+ },
+ "radius": {
+ "$value": ".25rem",
+ "source": "$toast-border-radius"
+ }
}
}
},
@@ -19,13 +31,25 @@
"$type": "dimension",
"toast": {
"padding": {
- "x": { "source": "$toast-padding-x", "$value": ".75rem" },
- "y": { "source": "$toast-padding-y", "$value": ".25rem" }
+ "x": {
+ "$value": ".75rem",
+ "source": "$toast-padding-x"
+ },
+ "y": {
+ "$value": ".25rem",
+ "source": "$toast-padding-y"
+ }
},
"container": {
"gutter": {
- "lg": { "source": "$toast-container-gutter-lg", "$value": "1.25rem" },
- "sm": { "source": "$toast-container-gutter-sm", "$value": ".625rem" }
+ "lg": {
+ "$value": "1.25rem",
+ "source": "$toast-container-gutter-lg"
+ },
+ "sm": {
+ "$value": ".625rem",
+ "source": "$toast-container-gutter-sm"
+ }
}
}
}
diff --git a/tokens/src/core/components/Tooltip.json b/tokens/src/core/components/Tooltip.json
index 1df0b65bdc..1e7746c2c8 100644
--- a/tokens/src/core/components/Tooltip.json
+++ b/tokens/src/core/components/Tooltip.json
@@ -2,34 +2,61 @@
"typography": {
"$type": "dimension",
"tooltip": {
- "font-size": { "source": "$tooltip-font-size", "$value": "{typography.font.size.sm}" }
+ "font-size": {
+ "$value": "{typography.font.size.sm}",
+ "source": "$tooltip-font-size"
+ }
}
},
"spacing": {
"$type": "dimension",
"tooltip": {
"padding": {
- "y": { "source": "$tooltip-padding-y", "$value": ".5rem" },
- "x": { "source": "$tooltip-padding-x", "$value": ".5rem" }
+ "y": {
+ "$value": ".5rem",
+ "source": "$tooltip-padding-y"
+ },
+ "x": {
+ "$value": ".5rem",
+ "source": "$tooltip-padding-x"
+ }
},
- "margin": { "source": "$tooltip-margin", "$value": "0" }
+ "margin": {
+ "$value": "0",
+ "source": "$tooltip-margin"
+ }
}
},
"elevation": {
"$type": "ratio",
"tooltip": {
- "zindex": { "source": "$zindex-tooltip", "$value": "1070" }
+ "zindex": {
+ "$value": "1070",
+ "source": "$zindex-tooltip"
+ }
}
},
"size": {
"$type": "dimension",
"tooltip": {
- "max-width": { "source": "$tooltip-max-width", "$value": "200px" },
+ "max-width": {
+ "$value": "200px",
+ "source": "$tooltip-max-width"
+ },
"arrow": {
- "height": { "source": "$tooltip-arrow-height", "$value": ".4rem" },
- "width": { "source": "$tooltip-arrow-width", "$value": ".8rem" }
+ "height": {
+ "$value": ".4rem",
+ "source": "$tooltip-arrow-height"
+ },
+ "width": {
+ "$value": ".8rem",
+ "source": "$tooltip-arrow-width"
+ }
},
- "border-radius": { "source": "$tooltip-border-radius", "$value": "{size.border.radius.base}" }
+ "border-radius": {
+ "$value": "{size.border.radius.base}",
+ "source": "$tooltip-border-radius"
+ }
}
}
}
diff --git a/tokens/src/core/components/general/caret.json b/tokens/src/core/components/general/caret.json
index cb713a455c..7ff90504c0 100644
--- a/tokens/src/core/components/general/caret.json
+++ b/tokens/src/core/components/general/caret.json
@@ -2,14 +2,23 @@
"size": {
"$type": "dimension",
"caret": {
- "width": { "source": "$caret-width", "$value": ".3em" }
+ "width": {
+ "$value": ".3em",
+ "source": "$caret-width"
+ }
}
},
"spacing": {
"$type": "dimension",
"caret": {
- "base": { "source": "$caret-spacing", "$value": ".255em" },
- "vertical-align": { "source": "$caret-vertical-align", "$value": ".255em" }
+ "base": {
+ "$value": ".255em",
+ "source": "$caret-spacing"
+ },
+ "vertical-align": {
+ "$value": ".255em",
+ "source": "$caret-vertical-align"
+ }
}
}
}
diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json
index c631e3d2d6..7735f84ba3 100644
--- a/tokens/src/core/components/general/headings.json
+++ b/tokens/src/core/components/general/headings.json
@@ -2,16 +2,31 @@
"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": {
+ "$type": "fontFamily",
+ "$value": "inherit",
+ "source": "$headings-font-family"
+ },
+ "weight": {
+ "$type": "fontWeight",
+ "$value": "{typography.font.weight.bold}",
+ "source": "$headings-font-weight"
+ }
},
- "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "number" }
+ "line-height": {
+ "$type": "number",
+ "$value": "1.25",
+ "source": "$headings-line-height"
+ }
}
},
"spacing": {
"$type": "dimension",
"headings": {
- "margin-bottom": { "source": "$headings-margin-bottom", "$value": ".5rem" }
+ "margin-bottom": {
+ "$value": ".5rem",
+ "source": "$headings-margin-bottom"
+ }
}
}
}
diff --git a/tokens/src/core/components/general/hr.json b/tokens/src/core/components/general/hr.json
index baeb366d2d..6d1211d536 100644
--- a/tokens/src/core/components/general/hr.json
+++ b/tokens/src/core/components/general/hr.json
@@ -3,8 +3,14 @@
"$type": "dimension",
"hr": {
"border": {
- "width": { "source": "$hr-border-width", "$value": "{size.border.width}" },
- "margin-y": { "source": "$hr-margin-y", "$value": "{spacing.spacer.base}" }
+ "width": {
+ "$value": "{size.border.width}",
+ "source": "$hr-border-width"
+ },
+ "margin-y": {
+ "$value": "{spacing.spacer.base}",
+ "source": "$hr-margin-y"
+ }
}
}
}
diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json
index 0bdc756950..aed40b80a9 100644
--- a/tokens/src/core/components/general/input.json
+++ b/tokens/src/core/components/general/input.json
@@ -3,19 +3,41 @@
"input": {
"btn": {
"font": {
- "family": { "source": "$input-btn-font-family", "$value": "inherit", "$type": "fontFamily" },
+ "family": {
+ "$type": "fontFamily",
+ "$value": "inherit",
+ "source": "$input-btn-font-family"
+ },
"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": {
+ "$value": "1.125rem",
+ "source": "$input-btn-font-size"
+ },
+ "sm": {
+ "$value": ".875rem",
+ "source": "$input-btn-font-size-sm"
+ },
+ "lg": {
+ "$value": "1.325rem",
+ "source": "$input-btn-font-size-lg"
+ }
}
},
"line-height": {
"$type": "number",
- "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": {
+ "$value": "1.3333",
+ "source": "$input-btn-line-height"
+ },
+ "sm": {
+ "$value": "1.4286",
+ "source": "$input-btn-line-height-sm"
+ },
+ "lg": {
+ "$value": "{typography.line-height.lg}",
+ "source": "$input-btn-line-height-lg"
+ }
}
}
}
@@ -25,15 +47,33 @@
"input": {
"btn": {
"padding": {
- "y": { "source": "$input-btn-padding-y", "$value": ".5625rem" },
- "x": { "source": "$input-btn-padding-x", "$value": "1rem" },
+ "y": {
+ "$value": ".5625rem",
+ "source": "$input-btn-padding-y"
+ },
+ "x": {
+ "$value": "1rem",
+ "source": "$input-btn-padding-x"
+ },
"sm": {
- "y": { "source": "$input-btn-padding-y-sm", "$value": ".4375rem" },
- "x": { "source": "$input-btn-padding-x-sm", "$value": ".75rem" }
+ "y": {
+ "$value": ".4375rem",
+ "source": "$input-btn-padding-y-sm"
+ },
+ "x": {
+ "$value": ".75rem",
+ "source": "$input-btn-padding-x-sm"
+ }
},
"lg": {
- "y": { "source": "$input-btn-padding-y-lg", "$value": ".6875rem" },
- "x": { "source": "$input-btn-padding-x-lg", "$value": "1.25rem" }
+ "y": {
+ "$value": ".6875rem",
+ "source": "$input-btn-padding-y-lg"
+ },
+ "x": {
+ "$value": "1.25rem",
+ "source": "$input-btn-padding-x-lg"
+ }
}
}
}
@@ -43,8 +83,14 @@
"$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": {
+ "$value": "{size.border.width}",
+ "source": "$input-btn-border-width"
+ },
+ "focus-width": {
+ "$value": "1px",
+ "source": "$input-btn-focus-width"
+ }
}
}
}
diff --git a/tokens/src/core/components/general/link.json b/tokens/src/core/components/general/link.json
index 8b6e4d34bb..a9e7a34a45 100644
--- a/tokens/src/core/components/general/link.json
+++ b/tokens/src/core/components/general/link.json
@@ -3,26 +3,62 @@
"link": {
"decoration": {
"$type": "textDecoration",
- "base": { "source": "$link-decoration", "$value": "none" },
- "hover": { "source": "$link-hover-decoration", "$value": "underline" },
+ "base": {
+ "$value": "none",
+ "source": "$link-decoration"
+ },
+ "hover": {
+ "$value": "underline",
+ "source": "$link-hover-decoration"
+ },
"inline": {
- "base": { "source": "$inline-link-decoration", "$value": "underline" },
- "hover": { "source": "$inline-link-hover-decoration", "$value": "underline" }
+ "base": {
+ "$value": "underline",
+ "source": "$inline-link-decoration"
+ },
+ "hover": {
+ "$value": "underline",
+ "source": "$inline-link-hover-decoration"
+ }
},
"muted": {
- "base": { "source": "$muted-link-decoration", "$value": "none" },
- "hover": { "source": "$muted-link-hover-decoration", "$value": "underline" },
+ "base": {
+ "$value": "none",
+ "source": "$muted-link-decoration"
+ },
+ "hover": {
+ "$value": "underline",
+ "source": "$muted-link-hover-decoration"
+ },
"inline": {
- "base": { "source": "$muted-inline-link-decoration", "$value": "underline" },
- "hover": { "source": "$muted-inline-link-hover-decoration", "$value": "underline" }
+ "base": {
+ "$value": "underline",
+ "source": "$muted-inline-link-decoration"
+ },
+ "hover": {
+ "$value": "underline",
+ "source": "$muted-inline-link-hover-decoration"
+ }
}
},
"brand": {
- "base": { "source": "$brand-link-decoration", "$value": "none" },
- "hover": { "source": "$brand-link-hover-decoration", "$value": "underline" },
+ "base": {
+ "$value": "none",
+ "source": "$brand-link-decoration"
+ },
+ "hover": {
+ "$value": "underline",
+ "source": "$brand-link-hover-decoration"
+ },
"inline": {
- "base": { "source": "$brand-inline-link-decoration", "$value": "underline" },
- "hover": { "source": "$brand-inline-link-hover-decoration", "$value": "underline" }
+ "base": {
+ "$value": "underline",
+ "source": "$brand-inline-link-decoration"
+ },
+ "hover": {
+ "$value": "underline",
+ "source": "$brand-inline-link-hover-decoration"
+ }
}
}
}
diff --git a/tokens/src/core/components/general/list.json b/tokens/src/core/components/general/list.json
index 071f3b6a05..0180a82cc1 100644
--- a/tokens/src/core/components/general/list.json
+++ b/tokens/src/core/components/general/list.json
@@ -2,17 +2,29 @@
"typography": {
"$type": "fontWeight",
"dt": {
- "font-weight": { "source": "$dt-font-weight", "$value": "{typography.font.weight.bold}" }
+ "font-weight": {
+ "$value": "{typography.font.weight.bold}",
+ "source": "$dt-font-weight"
+ }
}
},
"spacing": {
"$type": "dimension",
"list": {
- "inline-padding": { "source": "$list-inline-padding", "$value": ".5rem" },
+ "inline-padding": {
+ "$value": ".5rem",
+ "source": "$list-inline-padding"
+ },
"group-item": {
"padding": {
- "y": { "source": "$list-group-item-padding-y", "$value": ".75rem" },
- "x": { "source": "$list-group-item-padding-x", "$value": "1.25rem" }
+ "y": {
+ "$value": ".75rem",
+ "source": "$list-group-item-padding-y"
+ },
+ "x": {
+ "$value": "1.25rem",
+ "source": "$list-group-item-padding-x"
+ }
}
}
}
@@ -21,8 +33,14 @@
"$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": {
+ "$value": "{size.border.width}",
+ "source": "$list-group-border-width"
+ },
+ "radius": {
+ "$value": "{size.border.radius.base}",
+ "source": "$list-group-border-radius"
+ }
}
}
}
diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json
index 4a2f13eb2d..ad0f2c2617 100644
--- a/tokens/src/core/components/general/text.json
+++ b/tokens/src/core/components/general/text.json
@@ -2,17 +2,29 @@
"spacing": {
"$type": "dimension",
"paragraph": {
- "margin-bottom": { "source": "$paragraph-margin-bottom", "$value": "1rem" }
+ "margin-bottom": {
+ "$value": "1rem",
+ "source": "$paragraph-margin-bottom"
+ }
},
- "mark-padding": { "source": "$mark-padding", "$value": ".2em" }
+ "mark-padding": {
+ "$value": ".2em",
+ "source": "$mark-padding"
+ }
},
"typography": {
"$type": "dimension",
"blockquote": {
"small": {
- "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.sm}" }
+ "font-size": {
+ "$value": "{typography.font.size.sm}",
+ "source": "$blockquote-small-font-size"
+ }
},
- "font-size": { "source": "$blockquote-font-size", "$value": "calc({typography.font.size.base} * 1.25)" }
+ "font-size": {
+ "$value": "calc({typography.font.size.base} * 1.25)",
+ "source": "$blockquote-font-size"
+ }
}
}
}
diff --git a/tokens/src/core/global/elevation.json b/tokens/src/core/global/elevation.json
index df668415a4..b002837105 100644
--- a/tokens/src/core/global/elevation.json
+++ b/tokens/src/core/global/elevation.json
@@ -47,14 +47,14 @@
"$description": "z-index of level 2000."
},
"sticky": {
- "source": "$zindex-sticky",
"$value": 1020,
- "$description": "z-index for sticky element."
+ "$description": "z-index for sticky element.",
+ "source": "$zindex-sticky"
},
"fixed": {
- "source": "$zindex-fixed",
"$value": 1030,
- "$description": "z-index of for fixed element."
+ "$description": "z-index of for fixed element.",
+ "source": "$zindex-fixed"
}
}
}
diff --git a/tokens/src/core/global/other.json b/tokens/src/core/global/other.json
index 5ea9056694..8c722fde59 100644
--- a/tokens/src/core/global/other.json
+++ b/tokens/src/core/global/other.json
@@ -2,7 +2,7 @@
"yiq-contrasted-threshold": 128,
"theme-interval": {
"$type": "percentage",
- "source": "$theme-color-interval",
- "$value": "8%"
+ "$value": "8%",
+ "source": "$theme-color-interval"
}
}
diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json
index fb48d6a6b3..f2e9bbd50c 100644
--- a/tokens/src/core/global/spacing.json
+++ b/tokens/src/core/global/spacing.json
@@ -31,9 +31,9 @@
"$description": "Space value of level 6"
},
"base": {
- "source": "$spacer",
"$value": "1rem",
- "$description": "Basic space value"
+ "$description": "Basic space value",
+ "source": "$spacer"
},
"1.5": {
"$value": "calc({spacing.spacer.base} * .375)",
@@ -58,32 +58,32 @@
},
"label": {
"margin-bottom": {
- "source": "$label-margin-bottom",
"$value": ".5rem",
- "$description": "Margin bottom for label."
+ "$description": "Margin bottom for label.",
+ "source": "$label-margin-bottom"
}
},
"table": {
"cell": {
"padding": {
"base": {
- "source": "$table-cell-padding",
"$value": ".75rem",
- "$description": "Padding for tables."
+ "$description": "Padding for tables.",
+ "source": "$table-cell-padding"
},
"sm": {
- "source": "$table-cell-padding-sm",
"$value": ".3rem",
- "$description": "Padding sm for tables."
+ "$description": "Padding sm for tables.",
+ "source": "$table-cell-padding-sm"
}
}
}
},
"grid": {
"gutter-width": {
- "source": "$grid-gutter-width",
"$value": "24px",
- "$description": "Grid gutter width value."
+ "$description": "Grid gutter width value.",
+ "source": "$grid-gutter-width"
}
}
}
diff --git a/tokens/src/core/global/transition.json b/tokens/src/core/global/transition.json
index 657ee85e2f..035b91793d 100644
--- a/tokens/src/core/global/transition.json
+++ b/tokens/src/core/global/transition.json
@@ -2,7 +2,6 @@
"transition": {
"$type": "transition",
"base": {
- "source": "$transition-base",
"$value": {
"property": "all",
"duration": ".2s",
@@ -10,10 +9,10 @@
"delay": "0s",
"behavior": "normal"
},
- "$description": "Generic transition for any property change"
+ "$description": "Generic transition for any property change",
+ "source": "$transition-base"
},
"fade": {
- "source": "$transition-fade",
"$value": {
"property": "opacity",
"duration": ".15s",
@@ -21,11 +20,11 @@
"delay": "0s",
"behavior": "normal"
},
- "$description": "Opacity transition that takes 150ms"
+ "$description": "Opacity transition that takes 150ms",
+ "source": "$transition-fade"
},
"collapse": {
"height": {
- "source": "$transition-collapse",
"$value": {
"property": "height",
"duration": ".35s",
@@ -33,10 +32,10 @@
"delay": "0s",
"behavior": "normal"
},
- "$description": "Collapse transition for height that takes 350ms"
+ "$description": "Collapse transition for height that takes 350ms",
+ "source": "$transition-collapse"
},
"width": {
- "source": "$transition-collapse-width",
"$value": {
"property": "width",
"duration": ".35s",
@@ -44,7 +43,8 @@
"delay": "0s",
"behavior": "normal"
},
- "$description": "Collapse transition for width that takes 350ms"
+ "$description": "Collapse transition for width that takes 350ms",
+ "source": "$transition-collapse-width"
}
}
}
diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json
index 0dec9157f8..84526b567e 100644
--- a/tokens/src/core/global/typography.json
+++ b/tokens/src/core/global/typography.json
@@ -4,155 +4,175 @@
"family": {
"$type": "fontFamily",
"base": {
- "source": "$font-family-base",
"$value": "{typography.font.family.sans.serif}",
- "$description": "Basic font family."
+ "$description": "Basic font family.",
+ "source": "$font-family-base"
},
"sans": {
"serif": {
- "source": "$font-family-sans-serif",
- "$value": ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial",
- "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
- "$description": "Sans-serif font family."
+ "$value": [
+ "-apple-system",
+ "BlinkMacSystemFont",
+ "Segoe UI",
+ "Roboto",
+ "Helvetica Neue",
+ "Arial",
+ "Noto Sans",
+ "sans-serif",
+ "Apple Color Emoji",
+ "Segoe UI Emoji",
+ "Segoe UI Symbol",
+ "Noto Color Emoji"
+ ],
+ "$description": "Sans-serif font family.",
+ "source": "$font-family-sans-serif"
}
},
"serif": {
- "source": "$font-family-serif",
"$value": "serif",
- "$description": "Serif font family."
+ "$description": "Serif font family.",
+ "source": "$font-family-serif"
},
"monospace": {
- "source": "$font-family-monospace",
- "$value": ["SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
- "$description": "Monospace font family."
+ "$value": [
+ "SFMono-Regular",
+ "Menlo",
+ "Monaco",
+ "Consolas",
+ "Liberation Mono",
+ "Courier New",
+ "monospace"
+ ],
+ "$description": "Monospace font family.",
+ "source": "$font-family-monospace"
}
},
"size": {
"$type": "dimension",
"base": {
- "source": "$font-size-base",
"$value": "1.125rem",
- "$description": "Base font size."
+ "$description": "Base font size.",
+ "source": "$font-size-base"
},
"lg": {
- "source": "$lead-font-size",
"$value": "calc({typography.font.size.base} * 1.25)",
- "$description": "Lead text font size."
+ "$description": "Lead text font size.",
+ "source": "$lead-font-size"
},
"sm": {
- "source": "$small-font-size",
"$value": "87.5%",
- "$description": "Small font size."
+ "$description": "Small font size.",
+ "source": "$small-font-size"
},
"xs": {
- "source": "$x-small-font-size",
"$value": "75%",
- "$description": "X-small font size."
+ "$description": "X-small font size.",
+ "source": "$x-small-font-size"
},
"micro": {
- "source": "$micro-font-size",
- "$value": ".688rem",
"$type": "dimension",
- "$description": "Micro utils text font size."
+ "$value": ".688rem",
+ "$description": "Micro utils text font size.",
+ "source": "$micro-font-size"
},
"h1": {
"base": {
- "source": "$h1-font-size",
"$value": "2.5rem",
- "$description": "Base font size of heading level 1."
+ "$description": "Base font size of heading level 1.",
+ "source": "$h1-font-size"
},
"mobile": {
- "source": "$h1-mobile-font-size",
"$value": "2.25rem",
- "$description": "Mobile font size of heading level 1."
+ "$description": "Mobile font size of heading level 1.",
+ "source": "$h1-mobile-font-size"
}
},
"h2": {
"base": {
- "source": "$h2-font-size",
"$value": "2rem",
- "$description": "Font size of heading level 2."
+ "$description": "Font size of heading level 2.",
+ "source": "$h2-font-size"
},
"mobile": {
- "source": "$h2-mobile-font-size",
"$value": "{typography.font.size.h2.base}",
- "$description": "Mobile font size of heading level 2."
+ "$description": "Mobile font size of heading level 2.",
+ "source": "$h2-mobile-font-size"
}
},
"h3": {
"base": {
- "source": "$h3-font-size",
"$value": "1.375rem",
- "$description": "Font size of heading level 3."
+ "$description": "Font size of heading level 3.",
+ "source": "$h3-font-size"
},
"mobile": {
- "source": "$h3-mobile-font-size",
"$value": "{typography.font.size.h3.base}",
- "$description": "Mobile font size of heading level 3."
+ "$description": "Mobile font size of heading level 3.",
+ "source": "$h3-mobile-font-size"
}
},
"h4": {
"base": {
- "source": "$h4-font-size",
"$value": "1.125rem",
- "$description": "Font size of heading level 4."
+ "$description": "Font size of heading level 4.",
+ "source": "$h4-font-size"
},
"mobile": {
- "source": "$h4-mobile-font-size",
"$value": "{typography.font.size.h4.base}",
- "$description": "Mobile font size of heading level 4."
+ "$description": "Mobile font size of heading level 4.",
+ "source": "$h4-mobile-font-size"
}
},
"h5": {
"base": {
- "source": "$h5-font-size",
"$value": ".875rem",
- "$description": "Font size of heading level 5."
+ "$description": "Font size of heading level 5.",
+ "source": "$h5-font-size"
},
"mobile": {
- "source": "$h5-mobile-font-size",
"$value": "{typography.font.size.h5.base}",
- "$description": "Mobile font size of heading level 5."
+ "$description": "Mobile font size of heading level 5.",
+ "source": "$h5-mobile-font-size"
}
},
"h6": {
"base": {
- "source": "$h6-font-size",
"$value": ".75rem",
- "$description": "Font size of heading level 6."
+ "$description": "Font size of heading level 6.",
+ "source": "$h6-font-size"
},
"mobile": {
- "source": "$h6-mobile-font-size",
"$value": "{typography.font.size.h6.base}",
- "$description": "Mobile font size of heading level 6."
+ "$description": "Mobile font size of heading level 6.",
+ "source": "$h6-mobile-font-size"
}
},
"display": {
"1": {
- "source": "$display1-size",
"$value": "3.75rem",
- "$description": "Font size for heading of level 1."
+ "$description": "Font size for heading of level 1.",
+ "source": "$display1-size"
},
"2": {
- "source": "$display2-size",
"$value": "4.875rem",
- "$description": "Font size for heading of level 2."
+ "$description": "Font size for heading of level 2.",
+ "source": "$display2-size"
},
"3": {
- "source": "$display3-size",
"$value": "5.625rem",
- "$description": "Font size for heading of level 3."
+ "$description": "Font size for heading of level 3.",
+ "source": "$display3-size"
},
"4": {
- "source": "$display4-size",
"$value": "7.5rem",
- "$description": "Font size for heading of level 4."
+ "$description": "Font size for heading of level 4.",
+ "source": "$display4-size"
},
"mobile": {
"1": {
- "source": "$display-mobile-size",
"$value": "3.25rem",
- "$description": "Mobile font size for heading of level 1."
+ "$description": "Mobile font size for heading of level 1.",
+ "source": "$display-mobile-size"
},
"2": {
"$value": "{typography.font.size.display.mobile.1}",
@@ -172,72 +192,72 @@
"weight": {
"$type": "fontWeight",
"lighter": {
- "source": "$font-weight-lighter",
"$value": "lighter",
- "$description": "Lighter font weight."
+ "$description": "Lighter font weight.",
+ "source": "$font-weight-lighter"
},
"light": {
- "source": "$font-weight-light",
"$value": "300",
- "$description": "Light font weight."
+ "$description": "Light font weight.",
+ "source": "$font-weight-light"
},
"normal": {
- "source": "$font-weight-normal",
"$value": "400",
- "$description": "Normal font weight."
+ "$description": "Normal font weight.",
+ "source": "$font-weight-normal"
},
"semi": {
"bold": {
- "source": "$font-weight-semi-bold",
"$value": "500",
- "$description": "Semi-bold font weight."
+ "$description": "Semi-bold font weight.",
+ "source": "$font-weight-semi-bold"
}
},
"bold": {
- "source": "$font-weight-bold",
"$value": "700",
- "$description": "Bold font weight."
+ "$description": "Bold font weight.",
+ "source": "$font-weight-bold"
},
"bolder": {
- "source": "$font-weight-bolder",
"$value": "bolder",
- "$description": "Bolder font weight."
+ "$description": "Bolder font weight.",
+ "source": "$font-weight-bolder"
},
"base": {
- "source": "$font-weight-base",
"$value": "{typography.font.weight.normal}",
- "$description": "Basic font weight."
+ "$description": "Basic font weight.",
+ "source": "$font-weight-base"
},
"lead": {
- "source": "$lead-font-weight",
"$value": "inherit",
- "$description": "Lead text font weight."
+ "$description": "Lead text font weight.",
+ "source": "$lead-font-weight"
},
"table-th": {
- "source": "$table-th-font-weight",
"$value": "bold",
- "$description": "Table th font weight."
+ "$description": "Table th font weight.",
+ "source": "$table-th-font-weight"
},
"display": {
"1": {
- "source": "$display1-weight",
"$value": "{typography.font.weight.bold}",
- "$description": "Font weight of display level 1."
+ "$description": "Font weight of display level 1.",
+ "source": "$display1-weight"
},
"2": {
- "source": "$display2-weight",
"$value": "{typography.font.weight.bold}",
- "$description": "Font weight of display level 2."
+ "$description": "Font weight of display level 2.",
+ "source": "$display2-weight"
},
"3": {
- "source": "$display3-weight",
"$value": "{typography.font.weight.bold}",
- "$description": "Font weight of display level 3."
+ "$description": "Font weight of display level 3.",
+ "source": "$display3-weight"
},
"4": {
- "source": "$display4-weight",
"$value": "{typography.font.weight.bold}",
- "$description": "Font weight of display level 4."
+ "$description": "Font weight of display level 4.",
+ "source": "$display4-weight"
}
}
}
@@ -245,42 +265,42 @@
"line-height": {
"$type": "number",
"base": {
- "source": "$line-height-base",
"$value": "1.5556",
- "$description": "Basic line height."
+ "$description": "Basic line height.",
+ "source": "$line-height-base"
},
"lg": {
- "source": "$line-height-lg",
"$value": "1.5",
- "$description": "Large line height."
+ "$description": "Large line height.",
+ "source": "$line-height-lg"
},
"sm": {
- "source": "$line-height-sm",
"$value": "1.5",
- "$description": "Small line height."
+ "$description": "Small line height.",
+ "source": "$line-height-sm"
},
"micro": {
- "source": "$micro-line-height",
"$value": ".938rem",
- "$description": "Micro utils line height."
+ "$description": "Micro utils line height.",
+ "source": "$micro-line-height"
},
"display": {
"base": {
- "source": "$display-line-height",
"$value": "1",
- "$description": "Standard display line height."
+ "$description": "Standard display line height.",
+ "source": "$display-line-height"
},
"mobile": {
- "source": "$display-mobile-line-height",
"$value": "3.5rem",
- "$description": "Mobile display line height."
+ "$description": "Mobile display line height.",
+ "source": "$display-mobile-line-height"
}
}
},
"print-page-size": {
- "source": "$print-page-size",
+ "$type": "dimension",
"$value": "a3",
- "$type": "dimension"
+ "source": "$print-page-size"
}
}
}
diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json
index e945ebcfe6..0351fba5b6 100644
--- a/tokens/src/themes/light/alias/color.json
+++ b/tokens/src/themes/light/alias/color.json
@@ -2,33 +2,46 @@
"color": {
"$type": "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}",
- "$description": "Active background color."
+ "$description": "Active background color.",
+ "source": "$component-active-bg"
}
},
"text": {
"50": {
"black": {
- "source": "$text-black-50",
- "modify": [{ "type": "alpha", "amount": 0.5 }],
"$value": "{color.black}",
- "$description": "Black text color with transparency of 50%."
+ "$description": "Black text color with transparency of 50%.",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.5
+ }
+ ],
+ "source": "$text-black-50"
},
"white": {
- "source": "$text-white-50",
- "modify": [{ "type": "alpha", "amount": 0.5 }],
"$value": "{color.white}",
- "$description": "White text color with transparency of 50%."
+ "$description": "White text color with transparency of 50%.",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.5
+ }
+ ],
+ "source": "$text-white-50"
}
}
},
"active": {
- "source": "$component-active-color",
"$value": "{color.white}",
- "$description": "Color for active element."
+ "$description": "Color for active element.",
+ "source": "$component-active-color"
},
"disabled": {
"$value": "{color.gray.500}",
@@ -42,20 +55,20 @@
},
"table": {
"caption": {
- "source": "$table-caption-color",
"$value": "{color.text-muted}",
- "$description": "Table caption color."
+ "$description": "Table caption color.",
+ "source": "$table-caption-color"
},
"border": {
- "source": "$table-border-color",
"$value": "{color.border}",
- "$description": "Table border color."
+ "$description": "Table border color.",
+ "source": "$table-border-color"
}
},
"border": {
- "source": "$border-color",
"$value": "{color.gray.200}",
- "$description": "Border color."
+ "$description": "Border color.",
+ "source": "$border-color"
},
"theme": {
"bg": {
diff --git a/tokens/src/themes/light/components/Alert.json b/tokens/src/themes/light/components/Alert.json
index ffb40b3c53..9c6e36d01a 100644
--- a/tokens/src/themes/light/components/Alert.json
+++ b/tokens/src/themes/light/components/Alert.json
@@ -2,25 +2,67 @@
"color": {
"$type": "color",
"alert": {
- "title": { "source": "$alert-title-color", "$value": "{color.black}" },
- "content": { "source": "$alert-content-color", "$value": "{color.gray.700}" },
+ "title": {
+ "$value": "{color.black}",
+ "source": "$alert-title-color"
+ },
+ "content": {
+ "$value": "{color.gray.700}",
+ "source": "$alert-content-color"
+ },
"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": {
+ "$value": "{color.theme.default.success}",
+ "source": "$alert-success-icon-color"
+ },
+ "info": {
+ "$value": "{color.theme.default.info}",
+ "source": "$alert-info-icon-color"
+ },
+ "danger": {
+ "$value": "{color.theme.default.danger}",
+ "source": "$alert-danger-icon-color"
+ },
+ "warning": {
+ "$value": "{color.theme.default.warning}",
+ "source": "$alert-warning-icon-color"
+ }
},
"bg": {
- "success": { "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": {
+ "$value": "{color.theme.bg.success}",
+ "source": "$alert-success-bg"
+ },
+ "info": {
+ "$value": "{color.theme.bg.info}",
+ "source": "$alert-info-bg"
+ },
+ "danger": {
+ "$value": "{color.theme.bg.danger}",
+ "source": "$alert-danger-bg"
+ },
+ "warning": {
+ "$value": "{color.theme.bg.warning}",
+ "source": "$alert-warning-bg"
+ }
},
"border": {
- "success": { "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": {
+ "$value": "{color.theme.border.success}",
+ "source": "$alert-success-border-color"
+ },
+ "info": {
+ "$value": "{color.theme.border.info}",
+ "source": "$alert-info-border-color"
+ },
+ "danger": {
+ "$value": "{color.theme.border.danger}",
+ "source": "$alert-danger-border-color"
+ },
+ "warning": {
+ "$value": "{color.theme.border.warning}",
+ "source": "$alert-warning-border-color"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json
index 2bad75960e..2833299995 100644
--- a/tokens/src/themes/light/components/Annotation.json
+++ b/tokens/src/themes/light/components/Annotation.json
@@ -3,7 +3,6 @@
"$type": "shadow",
"annotation": {
"box-shadow": {
- "source": "$annotation-box-shadow",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -17,7 +16,8 @@
"offsetY": "2px",
"blur": "8px"
}
- ]
+ ],
+ "source": "$annotation-box-shadow"
}
}
},
@@ -25,18 +25,48 @@
"$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": {
+ "$value": "{color.white}",
+ "source": "$annotation-success-color"
+ },
+ "warning": {
+ "$value": "{color.black}",
+ "source": "$annotation-warning-color"
+ },
+ "error": {
+ "$value": "{color.white}",
+ "source": "$annotation-error-color"
+ },
+ "light": {
+ "$value": "{color.primary.500}",
+ "source": "$annotation-light-color"
+ },
+ "dark": {
+ "$value": "{color.white}",
+ "source": "$annotation-dark-color"
+ }
},
"bg": {
- "success": { "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": {
+ "$value": "{color.success.base}",
+ "source": "$annotation-success-bg"
+ },
+ "warning": {
+ "$value": "{color.accent.b}",
+ "source": "$annotation-warning-bg"
+ },
+ "error": {
+ "$value": "{color.danger.base}",
+ "source": "$annotation-error-bg"
+ },
+ "light": {
+ "$value": "{color.white}",
+ "source": "$annotation-light-bg"
+ },
+ "dark": {
+ "$value": "{color.dark.base}",
+ "source": "$annotation-dark-bg"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Badge.json b/tokens/src/themes/light/components/Badge.json
index 0eca2c6651..33d179b63e 100644
--- a/tokens/src/themes/light/components/Badge.json
+++ b/tokens/src/themes/light/components/Badge.json
@@ -3,116 +3,308 @@
"$type": "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": {
+ "$value": "{color.primary.base}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$badge-primary-color"
+ },
+ "secondary": {
+ "$value": "{color.secondary.base}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$badge-secondary-color"
+ },
+ "success": {
+ "$value": "{color.success.base}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$badge-success-color"
+ },
+ "danger": {
+ "$value": "{color.danger.base}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$badge-danger-color"
+ },
+ "warning": {
+ "$value": "{color.warning.base}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$badge-warning-color"
+ },
+ "info": {
+ "$value": "{color.info.base}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$badge-info-color"
+ },
+ "light": {
+ "$value": "{color.light.base}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$badge-light-color"
+ },
+ "dark": {
+ "$value": "{color.dark.base}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$badge-dark-color"
+ }
},
"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": {
+ "$value": "{color.primary.base}",
+ "source": "$badge-primary-bg"
+ },
+ "secondary": {
+ "$value": "{color.secondary.base}",
+ "source": "$badge-secondary-bg"
+ },
+ "success": {
+ "$value": "{color.success.base}",
+ "source": "$badge-success-bg"
+ },
+ "warning": {
+ "$value": "{color.warning.base}",
+ "source": "$badge-warning-bg"
+ },
+ "danger": {
+ "$value": "{color.danger.base}",
+ "source": "$badge-danger-bg"
+ },
+ "info": {
+ "$value": "{color.info.base}",
+ "source": "$badge-info-bg"
+ },
+ "light": {
+ "$value": "{color.light.base}",
+ "source": "$badge-light-bg"
+ },
+ "dark": {
+ "$value": "{color.dark.base}",
+ "source": "$badge-dark-bg"
+ }
},
"focus": {
- "primary": { "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": {
+ "$value": "{color.badge.text.primary}",
+ "source": "$badge-primary-focus-color"
+ },
+ "secondary": {
+ "$value": "{color.badge.text.secondary}",
+ "source": "$badge-secondary-focus-color"
+ },
+ "success": {
+ "$value": "{color.badge.text.success}",
+ "source": "$badge-success-focus-color"
+ },
+ "warning": {
+ "$value": "{color.badge.text.warning}",
+ "source": "$badge-warning-focus-color"
+ },
+ "danger": {
+ "$value": "{color.badge.text.danger}",
+ "source": "$badge-danger-focus-color"
+ },
+ "info": {
+ "$value": "{color.badge.text.info}",
+ "source": "$badge-info-focus-color"
+ },
+ "light": {
+ "$value": "{color.badge.text.light}",
+ "source": "$badge-light-focus-color"
+ },
+ "dark": {
+ "$value": "{color.badge.text.dark}",
+ "source": "$badge-dark-focus-color"
+ },
"bg": {
"primary": {
- "source": "$badge-primary-focus-bg",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.badge.bg.primary}"
+ "$value": "{color.badge.bg.primary}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$badge-primary-focus-bg"
},
"secondary": {
- "source": "$badge-secondary-focus-bg",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.badge.bg.secondary}"
+ "$value": "{color.badge.bg.secondary}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$badge-secondary-focus-bg"
},
"success": {
- "source": "$badge-success-focus-bg",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.badge.bg.success}"
+ "$value": "{color.badge.bg.success}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$badge-success-focus-bg"
},
"danger": {
- "source": "$badge-danger-focus-bg",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.badge.bg.danger}"
+ "$value": "{color.badge.bg.danger}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$badge-danger-focus-bg"
},
"warning": {
- "source": "$badge-warning-focus-bg",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.badge.bg.warning}"
+ "$value": "{color.badge.bg.warning}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$badge-warning-focus-bg"
},
"info": {
- "source": "$badge-info-focus-bg",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.badge.bg.info}"
+ "$value": "{color.badge.bg.info}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$badge-info-focus-bg"
},
"light": {
- "source": "$badge-light-focus-bg",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.badge.bg.light}"
+ "$value": "{color.badge.bg.light}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$badge-light-focus-bg"
},
"dark": {
- "source": "$badge-dark-focus-bg",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.badge.bg.dark}"
+ "$value": "{color.badge.bg.dark}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$badge-dark-focus-bg"
}
},
"box-shadow": {
"primary": {
- "source": "$badge-primary-focus-box-shadow-color",
- "modify": [{ "type": "alpha", "amount": 0.05 }],
- "$value": "{color.badge.bg.primary}"
+ "$value": "{color.badge.bg.primary}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.05
+ }
+ ],
+ "source": "$badge-primary-focus-box-shadow-color"
},
"secondary": {
- "source": "$badge-secondary-focus-box-shadow-color",
- "modify": [{ "type": "alpha", "amount": 0.05 }],
- "$value": "{color.badge.bg.secondary}"
+ "$value": "{color.badge.bg.secondary}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.05
+ }
+ ],
+ "source": "$badge-secondary-focus-box-shadow-color"
},
"success": {
- "source": "$badge-success-focus-box-shadow-color",
- "modify": [{ "type": "alpha", "amount": 0.05 }],
- "$value": "{color.badge.bg.success}"
+ "$value": "{color.badge.bg.success}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.05
+ }
+ ],
+ "source": "$badge-success-focus-box-shadow-color"
},
"danger": {
- "source": "$badge-danger-focus-box-shadow-color",
- "modify": [{ "type": "alpha", "amount": 0.05 }],
- "$value": "{color.badge.bg.danger}"
+ "$value": "{color.badge.bg.danger}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.05
+ }
+ ],
+ "source": "$badge-danger-focus-box-shadow-color"
},
"warning": {
- "source": "$badge-warning-focus-box-shadow-color",
- "modify": [{ "type": "alpha", "amount": 0.05 }],
- "$value": "{color.badge.bg.warning}"
+ "$value": "{color.badge.bg.warning}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.05
+ }
+ ],
+ "source": "$badge-warning-focus-box-shadow-color"
},
"info": {
- "source": "$badge-info-focus-box-shadow-color",
- "modify": [{ "type": "alpha", "amount": 0.05 }],
- "$value": "{color.badge.bg.info}"
+ "$value": "{color.badge.bg.info}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.05
+ }
+ ],
+ "source": "$badge-info-focus-box-shadow-color"
},
"light": {
- "source": "$badge-light-focus-box-shadow-color",
- "modify": [{ "type": "alpha", "amount": 0.05 }],
- "$value": "{color.badge.bg.light}"
+ "$value": "{color.badge.bg.light}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.05
+ }
+ ],
+ "source": "$badge-light-focus-box-shadow-color"
},
"dark": {
- "source": "$badge-dark-focus-box-shadow-color",
- "modify": [{ "type": "alpha", "amount": 0.05 }],
- "$value": "{color.badge.bg.dark}"
+ "$value": "{color.badge.bg.dark}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.05
+ }
+ ],
+ "source": "$badge-dark-focus-box-shadow-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json
index e745bc3616..e7f49af471 100644
--- a/tokens/src/themes/light/components/Breadcrumb.json
+++ b/tokens/src/themes/light/components/Breadcrumb.json
@@ -2,12 +2,27 @@
"color": {
"$type": "color",
"breadcrumb": {
- "base": { "source": "$breadcrumb-color", "$value": "{color.primary.500}" },
- "active": { "source": "$breadcrumb-active-color", "$value": "{color.gray.500}" },
+ "base": {
+ "$value": "{color.primary.500}",
+ "source": "$breadcrumb-color"
+ },
+ "active": {
+ "$value": "{color.gray.500}",
+ "source": "$breadcrumb-active-color"
+ },
"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": {
+ "$value": "{color.white}",
+ "source": "$breadcrumb-inverse-color"
+ },
+ "active": {
+ "$value": "{color.light.500}",
+ "source": "$breadcrumb-inverse-active"
+ },
+ "spacer": {
+ "$value": "{color.light.700}",
+ "source": "$breadcrumb-inverse-spacer"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Bubble.json b/tokens/src/themes/light/components/Bubble.json
index eabea9b6cd..45f4d61c87 100644
--- a/tokens/src/themes/light/components/Bubble.json
+++ b/tokens/src/themes/light/components/Bubble.json
@@ -3,16 +3,40 @@
"$type": "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": {
+ "$value": "{color.white}",
+ "source": "$bubble-success-color"
+ },
+ "warning": {
+ "$value": "{color.white}",
+ "source": "$bubble-warning-color"
+ },
+ "error": {
+ "$value": "{color.white}",
+ "source": "$bubble-error-color"
+ },
+ "primary": {
+ "$value": "{color.white}",
+ "source": "$bubble-primary-color"
+ }
},
"bg": {
- "success": { "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": {
+ "$value": "{color.success.base}",
+ "source": "$bubble-success-bg"
+ },
+ "warning": {
+ "$value": "{color.warning.base}",
+ "source": "$bubble-warning-bg"
+ },
+ "error": {
+ "$value": "{color.danger.base}",
+ "source": "$bubble-error-bg"
+ },
+ "primary": {
+ "$value": "{color.primary.base}",
+ "source": "$bubble-primary-bg"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json
index 23b6357841..0798a40207 100644
--- a/tokens/src/themes/light/components/Button/brand.json
+++ b/tokens/src/themes/light/components/Button/brand.json
@@ -4,306 +4,345 @@
"btn": {
"text": {
"brand": {
- "source": "$btn-brand-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.bg.brand}"
+ "$value": "{color.btn.bg.brand}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-brand-color"
},
"outline-brand": {
- "source": "$btn-brand-outline-color",
- "$value": "{color.brand.base}"
+ "$value": "{color.brand.base}",
+ "source": "$btn-brand-outline-color"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-color",
- "$value": "{color.brand.base}"
+ "$value": "{color.brand.base}",
+ "source": "$btn-brand-inverse-color"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-brand-inverse-outline-color"
}
},
"bg": {
"brand": {
- "source": "$btn-brand-bg",
- "$value": "{color.brand.base}"
+ "$value": "{color.brand.base}",
+ "source": "$btn-brand-bg"
},
"outline-brand": {
- "source": "$btn-brand-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-brand-outline-bg"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-bg",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.text.inverse-brand}"
+ "$value": "{color.btn.text.inverse-brand}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-brand-inverse-bg"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-bg",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-brand-inverse-outline-bg"
}
},
"border": {
"brand": {
- "source": "$btn-brand-border-color",
- "$value": "{color.btn.bg.brand}"
+ "$value": "{color.btn.bg.brand}",
+ "source": "$btn-brand-border-color"
},
"outline-brand": {
- "source": "$btn-brand-outline-border-color",
- "$value": "{color.brand.base}"
+ "$value": "{color.brand.base}",
+ "source": "$btn-brand-outline-border-color"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-brand-inverse-outline-border-color"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-brand-inverse-border-color"
}
},
"hover": {
"text": {
"brand": {
- "source": "$btn-brand-hover-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.hover.bg.brand}"
+ "$value": "{color.btn.hover.bg.brand}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-brand-hover-color"
},
"outline-brand": {
- "source": "$btn-brand-outline-hover-color",
- "$value": "{color.theme.hover.brand}"
+ "$value": "{color.theme.hover.brand}",
+ "source": "$btn-brand-outline-hover-color"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-hover-color",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.text.inverse-brand}"
+ "$value": "{color.btn.text.inverse-brand}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-brand-inverse-hover-color"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-hover-color",
- "$value": "{color.theme.hover.brand}"
+ "$value": "{color.theme.hover.brand}",
+ "source": "$btn-brand-inverse-outline-hover-color"
}
},
"bg": {
"brand": {
- "source": "$btn-brand-hover-bg",
- "$value": "{color.theme.hover.brand}"
+ "$value": "{color.theme.hover.brand}",
+ "source": "$btn-brand-hover-bg"
},
"outline-brand": {
- "source": "$btn-brand-outline-hover-bg",
- "$value": "{color.brand.100}"
+ "$value": "{color.brand.100}",
+ "source": "$btn-brand-outline-hover-bg"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-hover-bg",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.bg.inverse-brand}"
+ "$value": "{color.btn.bg.inverse-brand}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-brand-inverse-hover-bg"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-hover-bg",
- "$value": "{color.brand.100}"
+ "$value": "{color.brand.100}",
+ "source": "$btn-brand-inverse-outline-hover-bg"
}
},
"border": {
"brand": {
- "source": "$btn-brand-hover-border-color",
- "$value": "{color.theme.hover.brand}"
+ "$value": "{color.theme.hover.brand}",
+ "source": "$btn-brand-hover-border-color"
},
"outline-brand": {
- "source": "$btn-brand-outline-hover-border-color",
- "$value": "{color.brand.900}"
+ "$value": "{color.brand.900}",
+ "source": "$btn-brand-outline-hover-border-color"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-brand-inverse-outline-hover-border-color"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-brand-inverse-hover-border-color"
}
}
},
"active": {
"text": {
"brand": {
- "source": "$btn-brand-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.brand}"
+ "$value": "{color.btn.active.bg.brand}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-brand-active-color"
},
"outline-brand": {
- "source": "$btn-brand-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.outline-brand}"
+ "$value": "{color.btn.active.bg.outline-brand}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-brand-outline-active-color"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-active-color",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.btn.text.inverse-brand}"
+ "$value": "{color.btn.text.inverse-brand}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$btn-brand-inverse-active-color"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.inverse-outline-brand}"
+ "$value": "{color.btn.active.bg.inverse-outline-brand}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-brand-inverse-outline-active-color"
}
},
"bg": {
"brand": {
- "source": "$btn-brand-active-bg",
- "$value": "{color.theme.active.brand}"
+ "$value": "{color.theme.active.brand}",
+ "source": "$btn-brand-active-bg"
},
"outline-brand": {
- "source": "$btn-brand-outline-active-bg",
- "$value": "{color.theme.bg.brand}"
+ "$value": "{color.theme.bg.brand}",
+ "source": "$btn-brand-outline-active-bg"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-active-bg",
- "$value": "{color.theme.bg.brand}"
+ "$value": "{color.theme.bg.brand}",
+ "source": "$btn-brand-inverse-outline-active-bg"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-active-bg",
- "$value": "{color.gray.100}"
+ "$value": "{color.gray.100}",
+ "source": "$btn-brand-inverse-active-bg"
}
},
"border": {
"brand": {
- "source": "$btn-brand-active-border-color",
- "$value": "{color.theme.active.brand}"
+ "$value": "{color.theme.active.brand}",
+ "source": "$btn-brand-active-border-color"
},
"outline-brand": {
- "source": "$btn-brand-outline-active-border-color",
- "$value": "{color.theme.active.brand}"
+ "$value": "{color.theme.active.brand}",
+ "source": "$btn-brand-outline-active-border-color"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-brand-inverse-active-border-color"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-brand-inverse-outline-active-border-color"
}
}
},
"focus": {
"text": {
"brand": {
- "source": "$btn-brand-focus-color",
- "$value": "{color.btn.text.brand}"
+ "$value": "{color.btn.text.brand}",
+ "source": "$btn-brand-focus-color"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-focus-color",
- "$value": "{color.btn.text.inverse-brand}"
+ "$value": "{color.btn.text.inverse-brand}",
+ "source": "$btn-brand-inverse-focus-color"
},
"outline-brand": {
- "source": "$btn-brand-outline-focus-color",
- "$value": "{color.btn.text.outline-brand}"
+ "$value": "{color.btn.text.outline-brand}",
+ "source": "$btn-brand-outline-focus-color"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-focus-color",
- "$value": "{color.btn.text.inverse-outline-brand}"
+ "$value": "{color.btn.text.inverse-outline-brand}",
+ "source": "$btn-brand-inverse-outline-focus-color"
}
},
"border": {
"brand": {
- "source": "$btn-brand-focus-border-color",
- "$value": "{color.btn.border.brand}"
+ "$value": "{color.btn.border.brand}",
+ "source": "$btn-brand-focus-border-color"
},
"outline-brand": {
- "source": "$btn-brand-outline-focus-border-color",
- "$value": "{color.btn.border.outline-brand}"
+ "$value": "{color.btn.border.outline-brand}",
+ "source": "$btn-brand-outline-focus-border-color"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-focus-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-brand-inverse-focus-border-color"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-focus-border-color",
- "$value": "{color.btn.border.inverse-outline-brand}"
+ "$value": "{color.btn.border.inverse-outline-brand}",
+ "source": "$btn-brand-inverse-outline-focus-border-color"
}
},
"bg": {
"brand": {
- "source": "$btn-brand-focus-bg",
- "$value": "{color.btn.bg.brand}"
+ "$value": "{color.btn.bg.brand}",
+ "source": "$btn-brand-focus-bg"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-focus-bg",
- "$value": "{color.btn.bg.inverse-brand}"
+ "$value": "{color.btn.bg.inverse-brand}",
+ "source": "$btn-brand-inverse-focus-bg"
},
"outline-brand": {
- "source": "$btn-brand-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-brand-outline-focus-bg"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-brand-inverse-outline-focus-bg"
}
},
"outline": {
"brand": {
- "source": "$btn-brand-focus-outline-color",
- "$value": "{color.theme.focus.brand}"
+ "$value": "{color.theme.focus.brand}",
+ "source": "$btn-brand-focus-outline-color"
},
"outline-brand": {
- "source": "$btn-brand-outline-focus-outline-color",
- "$value": "{color.theme.focus.brand}"
+ "$value": "{color.theme.focus.brand}",
+ "source": "$btn-brand-outline-focus-outline-color"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-focus-outline-color",
- "$value": "{color.btn.focus.border.inverse-brand}"
+ "$value": "{color.btn.focus.border.inverse-brand}",
+ "source": "$btn-brand-inverse-focus-outline-color"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-focus-outline-color",
- "$value": "{color.btn.focus.border.inverse-outline-brand}"
+ "$value": "{color.btn.focus.border.inverse-outline-brand}",
+ "source": "$btn-brand-inverse-outline-focus-outline-color"
}
}
},
"disabled": {
"text": {
"brand": {
- "source": "$btn-brand-disabled-color",
- "$value": "{color.btn.text.brand}"
+ "$value": "{color.btn.text.brand}",
+ "source": "$btn-brand-disabled-color"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-disabled-color",
- "$value": "{color.brand.500}"
+ "$value": "{color.brand.500}",
+ "source": "$btn-brand-inverse-disabled-color"
},
"outline-brand": {
- "source": "$btn-brand-outline-disabled-color",
- "$value": "{color.btn.hover.text.outline-brand}"
+ "$value": "{color.btn.hover.text.outline-brand}",
+ "source": "$btn-brand-outline-disabled-color"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-disabled-color",
- "$value": "{color.btn.text.inverse-outline-brand}"
+ "$value": "{color.btn.text.inverse-outline-brand}",
+ "source": "$btn-brand-inverse-outline-disabled-color"
}
},
"bg": {
"brand": {
- "source": "$btn-brand-disabled-bg",
- "$value": "{color.btn.bg.brand}"
+ "$value": "{color.btn.bg.brand}",
+ "source": "$btn-brand-disabled-bg"
},
"outline-brand": {
- "source": "$btn-brand-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-brand-outline-disabled-bg"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-disabled-bg",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-brand-inverse-disabled-bg"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-disabled-bg",
- "$value": "{color.btn.bg.inverse-outline-brand}"
+ "$value": "{color.btn.bg.inverse-outline-brand}",
+ "source": "$btn-brand-inverse-outline-disabled-bg"
}
},
"border": {
"brand": {
- "source": "$btn-brand-disabled-border-color",
- "$value": "{color.btn.border.brand}"
+ "$value": "{color.btn.border.brand}",
+ "source": "$btn-brand-disabled-border-color"
},
"outline-brand": {
- "source": "$btn-brand-outline-disabled-border-color",
- "$value": "{color.btn.border.outline-brand}"
+ "$value": "{color.btn.border.outline-brand}",
+ "source": "$btn-brand-outline-disabled-border-color"
},
"inverse-brand": {
- "source": "$btn-brand-inverse-disabled-border-color",
- "$value": "{color.btn.disabled.bg.inverse-brand}"
+ "$value": "{color.btn.disabled.bg.inverse-brand}",
+ "source": "$btn-brand-inverse-disabled-border-color"
},
"inverse-outline-brand": {
- "source": "$btn-brand-inverse-outline-disabled-border-color",
- "$value": "{color.btn.text.inverse-outline-brand}"
+ "$value": "{color.btn.text.inverse-outline-brand}",
+ "source": "$btn-brand-inverse-outline-disabled-border-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json
index 8b29b583ef..d7147bb7d5 100644
--- a/tokens/src/themes/light/components/Button/core.json
+++ b/tokens/src/themes/light/components/Button/core.json
@@ -2,22 +2,34 @@
"color": {
"$type": "color",
"btn": {
- "disabled-link": { "source": "$btn-link-disabled-color", "$value": "{color.disabled}" }
+ "disabled-link": {
+ "$value": "{color.disabled}",
+ "source": "$btn-link-disabled-color"
+ }
}
},
"elevation": {
"$type": "shadow",
"btn": {
"box-shadow": {
- "base": { "source": "$btn-box-shadow", "$value": "none" },
- "active": { "source": "$btn-active-box-shadow", "$value": "none" }
+ "base": {
+ "$value": "none",
+ "source": "$btn-box-shadow"
+ },
+ "active": {
+ "$value": "none",
+ "source": "$btn-active-box-shadow"
+ }
}
}
},
"other": {
"$type": "ratio",
"btn": {
- "disabled-opacity": { "source": "$btn-disabled-opacity", "$value": ".65" }
+ "disabled-opacity": {
+ "$value": ".65",
+ "source": "$btn-disabled-opacity"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json
index 92ec188b21..5491462af9 100644
--- a/tokens/src/themes/light/components/Button/danger.json
+++ b/tokens/src/themes/light/components/Button/danger.json
@@ -4,300 +4,345 @@
"btn": {
"text": {
"danger": {
- "source": "$btn-danger-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.bg.danger}"
+ "$value": "{color.btn.bg.danger}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-danger-color"
+ },
+ "outline-danger": {
+ "$value": "{color.danger.base}",
+ "source": "$btn-danger-outline-color"
},
- "outline-danger": { "source": "$btn-danger-outline-color", "$value": "{color.danger.base}" },
"inverse-danger": {
- "source": "$btn-danger-inverse-color",
- "$value": "{color.danger.base}"
+ "$value": "{color.danger.base}",
+ "source": "$btn-danger-inverse-color"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-danger-inverse-outline-color"
}
},
"bg": {
- "danger": { "source": "$btn-danger-bg", "$value": "{color.danger.base}" },
+ "danger": {
+ "$value": "{color.danger.base}",
+ "source": "$btn-danger-bg"
+ },
"outline-danger": {
- "source": "$btn-danger-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-danger-outline-bg"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-bg",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.text.inverse-danger}"
+ "$value": "{color.btn.text.inverse-danger}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-danger-inverse-bg"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-bg",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-danger-inverse-outline-bg"
}
},
"border": {
"danger": {
- "source": "$btn-danger-border-color",
- "$value": "{color.btn.bg.danger}"
+ "$value": "{color.btn.bg.danger}",
+ "source": "$btn-danger-border-color"
},
"outline-danger": {
- "source": "$btn-danger-outline-border-color",
- "$value": "{color.danger.base}"
+ "$value": "{color.danger.base}",
+ "source": "$btn-danger-outline-border-color"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-danger-inverse-border-color"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-danger-inverse-outline-border-color"
}
},
"hover": {
"text": {
"danger": {
- "source": "$btn-danger-hover-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.hover.bg.danger}"
+ "$value": "{color.btn.hover.bg.danger}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-danger-hover-color"
},
"outline-danger": {
- "source": "$btn-danger-outline-hover-color",
- "$value": "{color.theme.hover.danger}"
+ "$value": "{color.theme.hover.danger}",
+ "source": "$btn-danger-outline-hover-color"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-hover-color",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.text.inverse-danger}"
+ "$value": "{color.btn.text.inverse-danger}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-danger-inverse-hover-color"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-hover-color",
- "$value": "{color.theme.hover.danger}"
+ "$value": "{color.theme.hover.danger}",
+ "source": "$btn-danger-inverse-outline-hover-color"
}
},
"bg": {
"danger": {
- "source": "$btn-danger-hover-bg",
- "$value": "{color.theme.hover.danger}"
+ "$value": "{color.theme.hover.danger}",
+ "source": "$btn-danger-hover-bg"
},
"outline-danger": {
- "source": "$btn-danger-outline-hover-bg",
- "$value": "{color.danger.100}"
+ "$value": "{color.danger.100}",
+ "source": "$btn-danger-outline-hover-bg"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-hover-bg",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.bg.inverse-danger}"
+ "$value": "{color.btn.bg.inverse-danger}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-danger-inverse-hover-bg"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-hover-bg",
- "$value": "{color.danger.100}"
+ "$value": "{color.danger.100}",
+ "source": "$btn-danger-inverse-outline-hover-bg"
}
},
"border": {
"danger": {
- "source": "$btn-danger-hover-border-color",
- "$value": "{color.theme.hover.danger}"
+ "$value": "{color.theme.hover.danger}",
+ "source": "$btn-danger-hover-border-color"
},
"outline-danger": {
- "source": "$btn-danger-outline-hover-border-color",
- "$value": "{color.danger.900}"
+ "$value": "{color.danger.900}",
+ "source": "$btn-danger-outline-hover-border-color"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-danger-inverse-hover-border-color"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-danger-inverse-outline-hover-border-color"
}
}
},
"active": {
"text": {
"danger": {
- "source": "$btn-danger-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.danger}"
+ "$value": "{color.btn.active.bg.danger}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-danger-active-color"
},
"outline-danger": {
- "source": "$btn-danger-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.outline-danger}"
+ "$value": "{color.btn.active.bg.outline-danger}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-danger-outline-active-color"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-active-color",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.btn.text.inverse-danger}"
+ "$value": "{color.btn.text.inverse-danger}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$btn-danger-inverse-active-color"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.inverse-outline-danger}"
+ "$value": "{color.btn.active.bg.inverse-outline-danger}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-danger-inverse-outline-active-color"
}
},
"bg": {
"danger": {
- "source": "$btn-danger-active-bg",
- "$value": "{color.theme.active.danger}"
+ "$value": "{color.theme.active.danger}",
+ "source": "$btn-danger-active-bg"
},
"outline-danger": {
- "source": "$btn-danger-outline-active-bg",
- "$value": "{color.theme.bg.danger}"
+ "$value": "{color.theme.bg.danger}",
+ "source": "$btn-danger-outline-active-bg"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-active-bg",
- "$value": "{color.gray.100}"
+ "$value": "{color.gray.100}",
+ "source": "$btn-danger-inverse-active-bg"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-active-bg",
- "$value": "{color.theme.bg.danger}"
+ "$value": "{color.theme.bg.danger}",
+ "source": "$btn-danger-inverse-outline-active-bg"
}
},
"border": {
"danger": {
- "source": "$btn-danger-active-border-color",
- "$value": "{color.theme.active.danger}"
+ "$value": "{color.theme.active.danger}",
+ "source": "$btn-danger-active-border-color"
},
"outline-danger": {
- "source": "$btn-danger-outline-active-border-color",
- "$value": "{color.theme.active.danger}"
+ "$value": "{color.theme.active.danger}",
+ "source": "$btn-danger-outline-active-border-color"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-danger-inverse-active-border-color"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-danger-inverse-outline-active-border-color"
}
}
},
"focus": {
"text": {
"danger": {
- "source": "$btn-danger-focus-color",
- "$value": "{color.btn.text.danger}"
+ "$value": "{color.btn.text.danger}",
+ "source": "$btn-danger-focus-color"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-focus-color",
- "$value": "{color.btn.text.inverse-danger}"
+ "$value": "{color.btn.text.inverse-danger}",
+ "source": "$btn-danger-inverse-focus-color"
},
"outline-danger": {
- "source": "$btn-danger-outline-focus-color",
- "$value": "{color.btn.text.outline-danger}"
+ "$value": "{color.btn.text.outline-danger}",
+ "source": "$btn-danger-outline-focus-color"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-focus-color",
- "$value": "{color.btn.text.inverse-outline-danger}"
+ "$value": "{color.btn.text.inverse-outline-danger}",
+ "source": "$btn-danger-inverse-outline-focus-color"
}
},
"border": {
"danger": {
- "source": "$btn-danger-focus-border-color",
- "$value": "{color.btn.focus.bg.danger}"
+ "$value": "{color.btn.focus.bg.danger}",
+ "source": "$btn-danger-focus-border-color"
},
"outline-danger": {
- "source": "$btn-danger-outline-focus-border-color",
- "$value": "{color.btn.border.outline-danger}"
+ "$value": "{color.btn.border.outline-danger}",
+ "source": "$btn-danger-outline-focus-border-color"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-focus-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-danger-inverse-focus-border-color"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-focus-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-danger-inverse-outline-focus-border-color"
}
},
"bg": {
"danger": {
- "source": "$btn-danger-focus-bg",
- "$value": "{color.btn.bg.danger}"
+ "$value": "{color.btn.bg.danger}",
+ "source": "$btn-danger-focus-bg"
},
"outline-danger": {
- "source": "$btn-danger-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-danger-outline-focus-bg"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-focus-bg",
- "$value": "{color.btn.bg.inverse-danger}"
+ "$value": "{color.btn.bg.inverse-danger}",
+ "source": "$btn-danger-inverse-focus-bg"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-danger-inverse-outline-focus-bg"
}
},
"outline": {
"danger": {
- "source": "$btn-danger-focus-outline-color",
- "$value": "{color.theme.focus.danger}"
+ "$value": "{color.theme.focus.danger}",
+ "source": "$btn-danger-focus-outline-color"
},
"outline-danger": {
- "source": "$btn-danger-outline-focus-outline-color",
- "$value": "{color.theme.focus.danger}"
+ "$value": "{color.theme.focus.danger}",
+ "source": "$btn-danger-outline-focus-outline-color"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-focus-outline-color",
- "$value": "{color.btn.focus.border.inverse-danger}"
+ "$value": "{color.btn.focus.border.inverse-danger}",
+ "source": "$btn-danger-inverse-focus-outline-color"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-focus-outline-color",
- "$value": "{color.btn.focus.border.inverse-danger}"
+ "$value": "{color.btn.focus.border.inverse-danger}",
+ "source": "$btn-danger-inverse-outline-focus-outline-color"
}
}
},
"disabled": {
"text": {
"danger": {
- "source": "$btn-danger-disabled-color",
- "$value": "{color.btn.text.danger}"
+ "$value": "{color.btn.text.danger}",
+ "source": "$btn-danger-disabled-color"
},
"outline-danger": {
- "source": "$btn-danger-outline-disabled-color",
- "$value": "{color.btn.hover.text.outline-danger}"
+ "$value": "{color.btn.hover.text.outline-danger}",
+ "source": "$btn-danger-outline-disabled-color"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-disabled-color",
- "$value": "{color.danger.base}"
+ "$value": "{color.danger.base}",
+ "source": "$btn-danger-inverse-disabled-color"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-disabled-color",
- "$value": "{color.btn.text.inverse-outline-danger}"
+ "$value": "{color.btn.text.inverse-outline-danger}",
+ "source": "$btn-danger-inverse-outline-disabled-color"
}
},
"bg": {
"danger": {
- "source": "$btn-danger-disabled-bg",
- "$value": "{color.btn.bg.danger}"
+ "$value": "{color.btn.bg.danger}",
+ "source": "$btn-danger-disabled-bg"
},
"outline-danger": {
- "source": "$btn-danger-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-danger-outline-disabled-bg"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-disabled-bg",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-danger-inverse-disabled-bg"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-danger-inverse-outline-disabled-bg"
}
},
"border": {
"danger": {
- "source": "$btn-danger-disabled-border-color",
- "$value": "{color.btn.border.danger}"
+ "$value": "{color.btn.border.danger}",
+ "source": "$btn-danger-disabled-border-color"
},
"outline-danger": {
- "source": "$btn-danger-outline-disabled-border-color",
- "$value": "{color.btn.border.outline-danger}"
+ "$value": "{color.btn.border.outline-danger}",
+ "source": "$btn-danger-outline-disabled-border-color"
},
"inverse-danger": {
- "source": "$btn-danger-inverse-disabled-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-danger-inverse-disabled-border-color"
},
"inverse-outline-danger": {
- "source": "$btn-danger-inverse-outline-disabled-border-color",
- "$value": "{color.btn.border.inverse-outline-danger}"
+ "$value": "{color.btn.border.inverse-outline-danger}",
+ "source": "$btn-danger-inverse-outline-disabled-border-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json
index 1256ed603c..248cd52eff 100644
--- a/tokens/src/themes/light/components/Button/dark.json
+++ b/tokens/src/themes/light/components/Button/dark.json
@@ -4,306 +4,345 @@
"btn": {
"text": {
"dark": {
- "source": "$btn-dark-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.bg.dark}"
+ "$value": "{color.btn.bg.dark}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-dark-color"
},
"outline-dark": {
- "source": "$btn-dark-outline-color",
- "$value": "{color.dark.base}"
+ "$value": "{color.dark.base}",
+ "source": "$btn-dark-outline-color"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-color",
- "$value": "{color.dark.base}"
+ "$value": "{color.dark.base}",
+ "source": "$btn-dark-inverse-color"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-dark-inverse-outline-color"
}
},
"bg": {
"dark": {
- "source": "$btn-dark-bg",
- "$value": "{color.dark.base}"
+ "$value": "{color.dark.base}",
+ "source": "$btn-dark-bg"
},
"outline-dark": {
- "source": "$btn-dark-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-dark-outline-bg"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-bg",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.text.inverse-dark}"
+ "$value": "{color.btn.text.inverse-dark}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-dark-inverse-bg"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-bg",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-dark-inverse-outline-bg"
}
},
"border": {
"dark": {
- "source": "$btn-dark-border-color",
- "$value": "{color.btn.bg.dark}"
+ "$value": "{color.btn.bg.dark}",
+ "source": "$btn-dark-border-color"
},
"outline-dark": {
- "source": "$btn-dark-outline-border-color",
- "$value": "{color.dark.base}"
+ "$value": "{color.dark.base}",
+ "source": "$btn-dark-outline-border-color"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-dark-inverse-border-color"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-dark-inverse-outline-border-color"
}
},
"hover": {
"text": {
"dark": {
- "source": "$btn-dark-hover-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.hover.bg.dark}"
+ "$value": "{color.btn.hover.bg.dark}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-dark-hover-color"
},
"outline-dark": {
- "source": "$btn-dark-outline-hover-color",
- "$value": "{color.theme.hover.dark}"
+ "$value": "{color.theme.hover.dark}",
+ "source": "$btn-dark-outline-hover-color"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-hover-color",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.text.inverse-dark}"
+ "$value": "{color.btn.text.inverse-dark}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-dark-inverse-hover-color"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-hover-color",
- "$value": "{color.theme.hover.dark}"
+ "$value": "{color.theme.hover.dark}",
+ "source": "$btn-dark-inverse-outline-hover-color"
}
},
"bg": {
"dark": {
- "source": "$btn-dark-hover-bg",
- "$value": "{color.theme.hover.dark}"
+ "$value": "{color.theme.hover.dark}",
+ "source": "$btn-dark-hover-bg"
},
"outline-dark": {
- "source": "$btn-dark-outline-hover-bg",
- "$value": "{color.dark.100}"
+ "$value": "{color.dark.100}",
+ "source": "$btn-dark-outline-hover-bg"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-hover-bg",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.bg.inverse-dark}"
+ "$value": "{color.btn.bg.inverse-dark}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-dark-inverse-hover-bg"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-hover-bg",
- "$value": "{color.dark.100}"
+ "$value": "{color.dark.100}",
+ "source": "$btn-dark-inverse-outline-hover-bg"
}
},
"border": {
"dark": {
- "source": "$btn-dark-hover-border-color",
- "$value": "{color.theme.hover.dark}"
+ "$value": "{color.theme.hover.dark}",
+ "source": "$btn-dark-hover-border-color"
},
"outline-dark": {
- "source": "$btn-dark-outline-hover-border-color",
- "$value": "{color.dark.900}"
+ "$value": "{color.dark.900}",
+ "source": "$btn-dark-outline-hover-border-color"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-dark-inverse-hover-border-color"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-dark-inverse-outline-hover-border-color"
}
}
},
"active": {
"text": {
"dark": {
- "source": "$btn-dark-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.dark}"
+ "$value": "{color.btn.active.bg.dark}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-dark-active-color"
},
"outline-dark": {
- "source": "$btn-dark-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.outline-dark}"
+ "$value": "{color.btn.active.bg.outline-dark}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-dark-outline-active-color"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-active-color",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.btn.text.inverse-dark}"
+ "$value": "{color.btn.text.inverse-dark}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$btn-dark-inverse-active-color"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.inverse-outline-dark}"
+ "$value": "{color.btn.active.bg.inverse-outline-dark}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-dark-inverse-outline-active-color"
}
},
"bg": {
"dark": {
- "source": "$btn-dark-active-bg",
- "$value": "{color.theme.active.dark}"
+ "$value": "{color.theme.active.dark}",
+ "source": "$btn-dark-active-bg"
},
"outline-dark": {
- "source": "$btn-dark-outline-active-bg",
- "$value": "{color.theme.bg.dark}"
+ "$value": "{color.theme.bg.dark}",
+ "source": "$btn-dark-outline-active-bg"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-active-bg",
- "$value": "{color.gray.100}"
+ "$value": "{color.gray.100}",
+ "source": "$btn-dark-inverse-active-bg"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-active-bg",
- "$value": "{color.theme.bg.dark}"
+ "$value": "{color.theme.bg.dark}",
+ "source": "$btn-dark-inverse-outline-active-bg"
}
},
"border": {
"dark": {
- "source": "$btn-dark-active-border-color",
- "$value": "{color.theme.active.dark}"
+ "$value": "{color.theme.active.dark}",
+ "source": "$btn-dark-active-border-color"
},
"outline-dark": {
- "source": "$btn-dark-outline-active-border-color",
- "$value": "{color.theme.active.dark}"
+ "$value": "{color.theme.active.dark}",
+ "source": "$btn-dark-outline-active-border-color"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-dark-inverse-active-border-color"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-dark-inverse-outline-active-border-color"
}
}
},
"focus": {
"text": {
"dark": {
- "source": "$btn-dark-focus-color",
- "$value": "{color.btn.text.dark}"
+ "$value": "{color.btn.text.dark}",
+ "source": "$btn-dark-focus-color"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-focus-color",
- "$value": "{color.btn.text.inverse-dark}"
+ "$value": "{color.btn.text.inverse-dark}",
+ "source": "$btn-dark-inverse-focus-color"
},
"outline-dark": {
- "source": "$btn-dark-outline-focus-color",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-dark-outline-focus-color"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-focus-color",
- "$value": "{color.btn.text.inverse-outline-dark}"
+ "$value": "{color.btn.text.inverse-outline-dark}",
+ "source": "$btn-dark-inverse-outline-focus-color"
}
},
"border": {
"dark": {
- "source": "$btn-dark-focus-border-color",
- "$value": "{color.btn.focus.bg.dark}"
+ "$value": "{color.btn.focus.bg.dark}",
+ "source": "$btn-dark-focus-border-color"
},
"outline-dark": {
- "source": "$btn-dark-outline-focus-border-color",
- "$value": "{color.btn.border.outline-dark}"
+ "$value": "{color.btn.border.outline-dark}",
+ "source": "$btn-dark-outline-focus-border-color"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-focus-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-dark-inverse-focus-border-color"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-focus-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-dark-inverse-outline-focus-border-color"
}
},
"bg": {
"dark": {
- "source": "$btn-dark-focus-bg",
- "$value": "{color.btn.bg.dark}"
+ "$value": "{color.btn.bg.dark}",
+ "source": "$btn-dark-focus-bg"
},
"outline-dark": {
- "source": "$btn-dark-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-dark-outline-focus-bg"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-focus-bg",
- "$value": "{color.btn.bg.inverse-dark}"
+ "$value": "{color.btn.bg.inverse-dark}",
+ "source": "$btn-dark-inverse-focus-bg"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-dark-inverse-outline-focus-bg"
}
},
"outline": {
"dark": {
- "source": "$btn-dark-focus-outline-color",
- "$value": "{color.theme.focus.dark}"
+ "$value": "{color.theme.focus.dark}",
+ "source": "$btn-dark-focus-outline-color"
},
"outline-dark": {
- "source": "$btn-dark-outline-focus-outline-color",
- "$value": "{color.theme.focus.dark}"
+ "$value": "{color.theme.focus.dark}",
+ "source": "$btn-dark-outline-focus-outline-color"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-focus-outline-color",
- "$value": "{color.btn.focus.border.inverse-dark}"
+ "$value": "{color.btn.focus.border.inverse-dark}",
+ "source": "$btn-dark-inverse-focus-outline-color"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-focus-border-color",
- "$value": "{color.btn.focus.border.inverse-outline-dark}"
+ "$value": "{color.btn.focus.border.inverse-outline-dark}",
+ "source": "$btn-dark-inverse-outline-focus-border-color"
}
}
},
"disabled": {
"text": {
"dark": {
- "source": "$btn-dark-disabled-color",
- "$value": "{color.btn.text.dark}"
+ "$value": "{color.btn.text.dark}",
+ "source": "$btn-dark-disabled-color"
},
"outline-dark": {
- "source": "$btn-dark-outline-disabled-color",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-dark-outline-disabled-color"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-disabled-color",
- "$value": "{color.btn.text.inverse-dark}"
+ "$value": "{color.btn.text.inverse-dark}",
+ "source": "$btn-dark-inverse-disabled-color"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-disabled-color",
- "$value": "{color.btn.text.inverse-outline-dark}"
+ "$value": "{color.btn.text.inverse-outline-dark}",
+ "source": "$btn-dark-inverse-outline-disabled-color"
}
},
"bg": {
"dark": {
- "source": "$btn-dark-disabled-bg",
- "$value": "{color.btn.bg.dark}"
+ "$value": "{color.btn.bg.dark}",
+ "source": "$btn-dark-disabled-bg"
},
"outline-dark": {
- "source": "$btn-dark-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-dark-outline-disabled-bg"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-dark-inverse-disabled-bg"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-dark-inverse-outline-disabled-bg"
}
},
"border": {
"dark": {
- "source": "$btn-dark-disabled-border-color",
- "$value": "{color.btn.border.dark}"
+ "$value": "{color.btn.border.dark}",
+ "source": "$btn-dark-disabled-border-color"
},
"outline-dark": {
- "source": "$btn-dark-outline-disabled-border-color",
- "$value": "{color.btn.hover.text.outline-dark}"
+ "$value": "{color.btn.hover.text.outline-dark}",
+ "source": "$btn-dark-outline-disabled-border-color"
},
"inverse-dark": {
- "source": "$btn-dark-inverse-disabled-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-dark-inverse-disabled-border-color"
},
"inverse-outline-dark": {
- "source": "$btn-dark-inverse-outline-disabled-border-color",
- "$value": "{color.btn.focus.border.inverse-outline-dark}"
+ "$value": "{color.btn.focus.border.inverse-outline-dark}",
+ "source": "$btn-dark-inverse-outline-disabled-border-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json
index 91d38cfe14..e403ffc2ef 100644
--- a/tokens/src/themes/light/components/Button/info.json
+++ b/tokens/src/themes/light/components/Button/info.json
@@ -4,306 +4,345 @@
"btn": {
"text": {
"info": {
- "source": "$btn-info-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.bg.info}"
+ "$value": "{color.btn.bg.info}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-info-color"
},
"outline-info": {
- "source": "$btn-info-outline-color",
- "$value": "{color.info.base}"
+ "$value": "{color.info.base}",
+ "source": "$btn-info-outline-color"
},
"inverse-info": {
- "source": "$btn-info-inverse-color",
- "$value": "{color.info.base}"
+ "$value": "{color.info.base}",
+ "source": "$btn-info-inverse-color"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-info-inverse-outline-color"
}
},
"bg": {
"info": {
- "source": "$btn-info-bg",
- "$value": "{color.info.base}"
+ "$value": "{color.info.base}",
+ "source": "$btn-info-bg"
},
"outline-info": {
- "source": "$btn-info-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-info-outline-bg"
},
"inverse-info": {
- "source": "$btn-info-inverse-bg",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.text.inverse-info}"
+ "$value": "{color.btn.text.inverse-info}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-info-inverse-bg"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-info-inverse-outline-bg"
}
},
"border": {
"info": {
- "source": "$btn-info-border-color",
- "$value": "{color.btn.bg.info}"
+ "$value": "{color.btn.bg.info}",
+ "source": "$btn-info-border-color"
},
"outline-info": {
- "source": "$btn-info-outline-border-color",
- "$value": "{color.info.base}"
+ "$value": "{color.info.base}",
+ "source": "$btn-info-outline-border-color"
},
"inverse-info": {
- "source": "$btn-info-inverse-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-info-inverse-border-color"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-info-inverse-outline-border-color"
}
},
"hover": {
"text": {
"info": {
- "source": "$btn-info-hover-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.hover.bg.info}"
+ "$value": "{color.btn.hover.bg.info}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-info-hover-color"
},
"outline-info": {
- "source": "$btn-info-outline-hover-color",
- "$value": "{color.theme.hover.info}"
+ "$value": "{color.theme.hover.info}",
+ "source": "$btn-info-outline-hover-color"
},
"inverse-info": {
- "source": "$btn-info-inverse-hover-color",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.text.inverse-info}"
+ "$value": "{color.btn.text.inverse-info}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-info-inverse-hover-color"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-hover-color",
- "$value": "{color.theme.hover.info}"
+ "$value": "{color.theme.hover.info}",
+ "source": "$btn-info-inverse-outline-hover-color"
}
},
"bg": {
"info": {
- "source": "$btn-info-hover-bg",
- "$value": "{color.theme.hover.info}"
+ "$value": "{color.theme.hover.info}",
+ "source": "$btn-info-hover-bg"
},
"outline-info": {
- "source": "$btn-info-outline-hover-bg",
- "$value": "{color.info.100}"
+ "$value": "{color.info.100}",
+ "source": "$btn-info-outline-hover-bg"
},
"inverse-info": {
- "source": "$btn-info-inverse-hover-bg",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.bg.inverse-info}"
+ "$value": "{color.btn.bg.inverse-info}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-info-inverse-hover-bg"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-hover-bg",
- "$value": "{color.info.100}"
+ "$value": "{color.info.100}",
+ "source": "$btn-info-inverse-outline-hover-bg"
}
},
"border": {
"info": {
- "source": "$btn-info-hover-border-color",
- "$value": "{color.theme.hover.info}"
+ "$value": "{color.theme.hover.info}",
+ "source": "$btn-info-hover-border-color"
},
"outline-info": {
- "source": "$btn-info-outline-hover-border-color",
- "$value": "{color.info.900}"
+ "$value": "{color.info.900}",
+ "source": "$btn-info-outline-hover-border-color"
},
"inverse-info": {
- "source": "$btn-info-inverse-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-info-inverse-hover-border-color"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-info-inverse-outline-hover-border-color"
}
}
},
"active": {
"text": {
"info": {
- "source": "$btn-info-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.info}"
+ "$value": "{color.btn.active.bg.info}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-info-active-color"
},
"outline-info": {
- "source": "$btn-info-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.outline-info}"
+ "$value": "{color.btn.active.bg.outline-info}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-info-outline-active-color"
},
"inverse-info": {
- "source": "$btn-info-inverse-active-color",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.btn.text.inverse-info}"
+ "$value": "{color.btn.text.inverse-info}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$btn-info-inverse-active-color"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.inverse-outline-info}"
+ "$value": "{color.btn.active.bg.inverse-outline-info}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-info-inverse-outline-active-color"
}
},
"bg": {
"info": {
- "source": "$btn-info-active-bg",
- "$value": "{color.theme.active.info}"
+ "$value": "{color.theme.active.info}",
+ "source": "$btn-info-active-bg"
},
"outline-info": {
- "source": "$btn-info-outline-active-bg",
- "$value": "{color.theme.bg.info}"
+ "$value": "{color.theme.bg.info}",
+ "source": "$btn-info-outline-active-bg"
},
"inverse-info": {
- "source": "$btn-info-inverse-active-bg",
- "$value": "{color.gray.100}"
+ "$value": "{color.gray.100}",
+ "source": "$btn-info-inverse-active-bg"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-active-bg",
- "$value": "{color.theme.bg.info}"
+ "$value": "{color.theme.bg.info}",
+ "source": "$btn-info-inverse-outline-active-bg"
}
},
"border": {
"info": {
- "source": "$btn-info-active-border-color",
- "$value": "{color.theme.active.info}"
+ "$value": "{color.theme.active.info}",
+ "source": "$btn-info-active-border-color"
},
"outline-info": {
- "source": "$btn-info-outline-active-border-color",
- "$value": "{color.theme.active.info}"
+ "$value": "{color.theme.active.info}",
+ "source": "$btn-info-outline-active-border-color"
},
"inverse-info": {
- "source": "$btn-info-inverse-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-info-inverse-active-border-color"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-info-inverse-outline-active-border-color"
}
}
},
"focus": {
"text": {
"info": {
- "source": "$btn-info-focus-color",
- "$value": "{color.btn.text.info}"
+ "$value": "{color.btn.text.info}",
+ "source": "$btn-info-focus-color"
},
"outline-info": {
- "source": "$btn-info-outline-focus-color",
- "$value": "{color.btn.text.outline-info}"
+ "$value": "{color.btn.text.outline-info}",
+ "source": "$btn-info-outline-focus-color"
},
"inverse-info": {
- "source": "$btn-info-inverse-focus-color",
- "$value": "{color.btn.text.inverse-info}"
+ "$value": "{color.btn.text.inverse-info}",
+ "source": "$btn-info-inverse-focus-color"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-focus-color",
- "$value": "{color.btn.text.inverse-outline-info}"
+ "$value": "{color.btn.text.inverse-outline-info}",
+ "source": "$btn-info-inverse-outline-focus-color"
}
},
"border": {
"info": {
- "source": "$btn-info-focus-border-color",
- "$value": "{color.btn.border.info}"
+ "$value": "{color.btn.border.info}",
+ "source": "$btn-info-focus-border-color"
},
"outline-info": {
- "source": "$btn-info-outline-focus-border-color",
- "$value": "{color.btn.border.outline-info}"
+ "$value": "{color.btn.border.outline-info}",
+ "source": "$btn-info-outline-focus-border-color"
},
"inverse-info": {
- "source": "$btn-info-inverse-focus-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-info-inverse-focus-border-color"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-focus-border-color",
- "$value": "{color.btn.border.inverse-outline-info}"
+ "$value": "{color.btn.border.inverse-outline-info}",
+ "source": "$btn-info-inverse-outline-focus-border-color"
}
},
"bg": {
"info": {
- "source": "$btn-info-focus-bg",
- "$value": "{color.btn.bg.info}"
+ "$value": "{color.btn.bg.info}",
+ "source": "$btn-info-focus-bg"
},
"outline-info": {
- "source": "$btn-info-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-info-outline-focus-bg"
},
"inverse-info": {
- "source": "$btn-info-inverse-focus-bg",
- "$value": "{color.btn.bg.inverse-info}"
+ "$value": "{color.btn.bg.inverse-info}",
+ "source": "$btn-info-inverse-focus-bg"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-info-inverse-outline-focus-bg"
}
},
"outline": {
"info": {
- "source": "$btn-info-focus-outline-color",
- "$value": "{color.theme.focus.info}"
+ "$value": "{color.theme.focus.info}",
+ "source": "$btn-info-focus-outline-color"
},
"outline-info": {
- "source": "$btn-info-outline-focus-outline-color",
- "$value": "{color.theme.focus.info}"
+ "$value": "{color.theme.focus.info}",
+ "source": "$btn-info-outline-focus-outline-color"
},
"inverse-info": {
- "source": "$btn-info-inverse-focus-outline-color",
- "$value": "{color.btn.focus.border.inverse-info}"
+ "$value": "{color.btn.focus.border.inverse-info}",
+ "source": "$btn-info-inverse-focus-outline-color"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-focus-outline-color",
- "$value": "{color.btn.focus.border.inverse-outline-info}"
+ "$value": "{color.btn.focus.border.inverse-outline-info}",
+ "source": "$btn-info-inverse-outline-focus-outline-color"
}
}
},
"disabled": {
"text": {
"info": {
- "source": "$btn-info-disabled-color",
- "$value": "{color.btn.text.info}"
+ "$value": "{color.btn.text.info}",
+ "source": "$btn-info-disabled-color"
},
"outline-info": {
- "source": "$btn-info-outline-disabled-color",
- "$value": "{color.btn.text.outline-info}"
+ "$value": "{color.btn.text.outline-info}",
+ "source": "$btn-info-outline-disabled-color"
},
"inverse-info": {
- "source": "$btn-info-inverse-disabled-color",
- "$value": "{color.info.base}"
+ "$value": "{color.info.base}",
+ "source": "$btn-info-inverse-disabled-color"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-disabled-color",
- "$value": "{color.btn.text.inverse-outline-info}"
+ "$value": "{color.btn.text.inverse-outline-info}",
+ "source": "$btn-info-inverse-outline-disabled-color"
}
},
"bg": {
"info": {
- "source": "$btn-info-disabled-bg",
- "$value": "{color.btn.bg.info}"
+ "$value": "{color.btn.bg.info}",
+ "source": "$btn-info-disabled-bg"
},
"outline-info": {
- "source": "$btn-info-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-info-outline-disabled-bg"
},
"inverse-info": {
- "source": "$btn-info-inverse-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-info-inverse-disabled-bg"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-info-inverse-outline-disabled-bg"
}
},
"border": {
"info": {
- "source": "$btn-info-disabled-border-color",
- "$value": "{color.btn.bg.info}"
+ "$value": "{color.btn.bg.info}",
+ "source": "$btn-info-disabled-border-color"
},
"outline-info": {
- "source": "$btn-info-outline-disabled-border-color",
- "$value": "{color.btn.border.outline-info}"
+ "$value": "{color.btn.border.outline-info}",
+ "source": "$btn-info-outline-disabled-border-color"
},
"inverse-info": {
- "source": "$btn-info-inverse-disabled-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-info-inverse-disabled-border-color"
},
"inverse-outline-info": {
- "source": "$btn-info-inverse-outline-disabled-border-color",
- "$value": "{color.btn.border.inverse-outline-info}"
+ "$value": "{color.btn.border.inverse-outline-info}",
+ "source": "$btn-info-inverse-outline-disabled-border-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json
index f7e76f50d8..85a701534a 100644
--- a/tokens/src/themes/light/components/Button/light.json
+++ b/tokens/src/themes/light/components/Button/light.json
@@ -4,306 +4,345 @@
"btn": {
"text": {
"light": {
- "source": "$btn-light-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.bg.light}"
+ "$value": "{color.btn.bg.light}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-light-color"
},
"outline-light": {
- "source": "$btn-light-outline-color",
- "$value": "{color.light.base}"
+ "$value": "{color.light.base}",
+ "source": "$btn-light-outline-color"
},
"inverse-light": {
- "source": "$btn-light-inverse-color",
- "$value": "{color.light.base}"
+ "$value": "{color.light.base}",
+ "source": "$btn-light-inverse-color"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-light-inverse-outline-color"
}
},
"bg": {
"light": {
- "source": "$btn-light-bg",
- "$value": "{color.light.base}"
+ "$value": "{color.light.base}",
+ "source": "$btn-light-bg"
},
"inverse-light": {
- "source": "$btn-light-inverse-bg",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.text.inverse-light}"
+ "$value": "{color.btn.text.inverse-light}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-light-inverse-bg"
},
"outline-light": {
- "source": "$btn-light-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-light-outline-bg"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-light-inverse-outline-bg"
}
},
"border": {
"light": {
- "source": "$btn-light-border-color",
- "$value": "{color.btn.bg.light}"
+ "$value": "{color.btn.bg.light}",
+ "source": "$btn-light-border-color"
},
"outline-light": {
- "source": "$btn-light-outline-border-color",
- "$value": "{color.light.base}"
+ "$value": "{color.light.base}",
+ "source": "$btn-light-outline-border-color"
},
"inverse-light": {
- "source": "$btn-light-inverse-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-light-inverse-border-color"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-light-inverse-outline-border-color"
}
},
"hover": {
"text": {
"light": {
- "source": "$btn-light-hover-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.hover.bg.light}"
+ "$value": "{color.btn.hover.bg.light}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-light-hover-color"
},
"outline-light": {
- "source": "$btn-light-outline-hover-color",
- "$value": "{color.theme.hover.light}"
+ "$value": "{color.theme.hover.light}",
+ "source": "$btn-light-outline-hover-color"
},
"inverse-light": {
- "source": "$btn-light-inverse-hover-color",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.text.inverse-light}"
+ "$value": "{color.btn.text.inverse-light}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-light-inverse-hover-color"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-hover-color",
- "$value": "{color.theme.hover.light}"
+ "$value": "{color.theme.hover.light}",
+ "source": "$btn-light-inverse-outline-hover-color"
}
},
"bg": {
"light": {
- "source": "$btn-light-hover-bg",
- "$value": "{color.theme.hover.light}"
+ "$value": "{color.theme.hover.light}",
+ "source": "$btn-light-hover-bg"
},
"outline-light": {
- "source": "$btn-light-outline-hover-bg",
- "$value": "{color.light.100}"
+ "$value": "{color.light.100}",
+ "source": "$btn-light-outline-hover-bg"
},
"inverse-light": {
- "source": "$btn-light-inverse-hover-bg",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.bg.inverse-light}"
+ "$value": "{color.btn.bg.inverse-light}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-light-inverse-hover-bg"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-hover-bg",
- "$value": "{color.light.100}"
+ "$value": "{color.light.100}",
+ "source": "$btn-light-inverse-outline-hover-bg"
}
},
"border": {
"light": {
- "source": "$btn-light-hover-border-color",
- "$value": "{color.theme.hover.light}"
+ "$value": "{color.theme.hover.light}",
+ "source": "$btn-light-hover-border-color"
},
"outline-light": {
- "source": "$btn-light-outline-hover-border-color",
- "$value": "{color.light.900}"
+ "$value": "{color.light.900}",
+ "source": "$btn-light-outline-hover-border-color"
},
"inverse-light": {
- "source": "$btn-light-inverse-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-light-inverse-hover-border-color"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-light-inverse-outline-hover-border-color"
}
}
},
"active": {
"text": {
"light": {
- "source": "$btn-light-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.light}"
+ "$value": "{color.btn.active.bg.light}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-light-active-color"
},
"outline-light": {
- "source": "$btn-light-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.outline-light}"
+ "$value": "{color.btn.active.bg.outline-light}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-light-outline-active-color"
},
"inverse-light": {
- "source": "$btn-light-inverse-active-color",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.btn.text.inverse-light}"
+ "$value": "{color.btn.text.inverse-light}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$btn-light-inverse-active-color"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.inverse-outline-light}"
+ "$value": "{color.btn.active.bg.inverse-outline-light}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-light-inverse-outline-active-color"
}
},
"bg": {
"light": {
- "source": "$btn-light-active-bg",
- "$value": "{color.theme.active.light}"
+ "$value": "{color.theme.active.light}",
+ "source": "$btn-light-active-bg"
},
"outline-light": {
- "source": "$btn-light-outline-active-bg",
- "$value": "{color.theme.bg.light}"
+ "$value": "{color.theme.bg.light}",
+ "source": "$btn-light-outline-active-bg"
},
"inverse-light": {
- "source": "$btn-light-inverse-active-bg",
- "$value": "{color.gray.100}"
+ "$value": "{color.gray.100}",
+ "source": "$btn-light-inverse-active-bg"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-active-bg",
- "$value": "{color.theme.bg.light}"
+ "$value": "{color.theme.bg.light}",
+ "source": "$btn-light-inverse-outline-active-bg"
}
},
"border": {
"light": {
- "source": "$btn-light-active-border-color",
- "$value": "{color.theme.active.light}"
+ "$value": "{color.theme.active.light}",
+ "source": "$btn-light-active-border-color"
},
"outline-light": {
- "source": "$btn-light-outline-active-border-color",
- "$value": "{color.theme.active.light}"
+ "$value": "{color.theme.active.light}",
+ "source": "$btn-light-outline-active-border-color"
},
"inverse-light": {
- "source": "$btn-light-inverse-active-border-color",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-light-inverse-active-border-color"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-light-inverse-outline-active-border-color"
}
}
},
"focus": {
"text": {
"light": {
- "source": "$btn-light-focus-color",
- "$value": "{color.btn.text.light}"
+ "$value": "{color.btn.text.light}",
+ "source": "$btn-light-focus-color"
},
"outline-light": {
- "source": "$btn-light-outline-focus-color",
- "$value": "{color.btn.text.outline-light}"
+ "$value": "{color.btn.text.outline-light}",
+ "source": "$btn-light-outline-focus-color"
},
"inverse-light": {
- "source": "$btn-light-inverse-focus-color",
- "$value": "{color.btn.text.inverse-light}"
+ "$value": "{color.btn.text.inverse-light}",
+ "source": "$btn-light-inverse-focus-color"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-focus-color",
- "$value": "{color.btn.text.inverse-outline-light}"
+ "$value": "{color.btn.text.inverse-outline-light}",
+ "source": "$btn-light-inverse-outline-focus-color"
}
},
"border": {
"light": {
- "source": "$btn-light-focus-border-color",
- "$value": "{color.btn.border.light}"
+ "$value": "{color.btn.border.light}",
+ "source": "$btn-light-focus-border-color"
},
"outline-light": {
- "source": "$btn-light-outline-focus-border-color",
- "$value": "{color.btn.border.outline-light}"
+ "$value": "{color.btn.border.outline-light}",
+ "source": "$btn-light-outline-focus-border-color"
},
"inverse-light": {
- "source": "$btn-light-inverse-focus-border-color",
- "$value": "{color.btn.border.inverse-light}"
+ "$value": "{color.btn.border.inverse-light}",
+ "source": "$btn-light-inverse-focus-border-color"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-focus-border-color",
- "$value": "{color.btn.border.inverse-outline-light}"
+ "$value": "{color.btn.border.inverse-outline-light}",
+ "source": "$btn-light-inverse-outline-focus-border-color"
}
},
"bg": {
"light": {
- "source": "$btn-light-focus-bg",
- "$value": "{color.btn.bg.light}"
+ "$value": "{color.btn.bg.light}",
+ "source": "$btn-light-focus-bg"
},
"outline-light": {
- "source": "$btn-light-outline-focus-bg",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-light-outline-focus-bg"
},
"inverse-light": {
- "source": "$btn-light-inverse-focus-bg",
- "$value": "{color.btn.bg.inverse-light}"
+ "$value": "{color.btn.bg.inverse-light}",
+ "source": "$btn-light-inverse-focus-bg"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-light-inverse-outline-focus-bg"
}
},
"outline": {
"light": {
- "source": "$btn-light-focus-outline-color",
- "$value": "{color.primary.300}"
+ "$value": "{color.primary.300}",
+ "source": "$btn-light-focus-outline-color"
},
"outline-light": {
- "source": "$btn-light-outline-focus-outline-color",
- "$value": "{color.theme.focus.light}"
+ "$value": "{color.theme.focus.light}",
+ "source": "$btn-light-outline-focus-outline-color"
},
"inverse-light": {
- "source": "$btn-light-inverse-focus-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-light-inverse-focus-outline-color"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-focus-outline-color",
- "$value": "{color.btn.focus.border.inverse-outline-light}"
+ "$value": "{color.btn.focus.border.inverse-outline-light}",
+ "source": "$btn-light-inverse-outline-focus-outline-color"
}
}
},
"disabled": {
"text": {
"light": {
- "source": "$btn-light-disabled-color",
- "$value": "{color.btn.text.light}"
+ "$value": "{color.btn.text.light}",
+ "source": "$btn-light-disabled-color"
},
"outline-light": {
- "source": "$btn-light-outline-disabled-color",
- "$value": "{color.btn.hover.text.outline-light}"
+ "$value": "{color.btn.hover.text.outline-light}",
+ "source": "$btn-light-outline-disabled-color"
},
"inverse-light": {
- "source": "$btn-light-inverse-disabled-color",
- "$value": "{color.btn.text.inverse-light}"
+ "$value": "{color.btn.text.inverse-light}",
+ "source": "$btn-light-inverse-disabled-color"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-disabled-color",
- "$value": "{color.btn.text.inverse-outline-light}"
+ "$value": "{color.btn.text.inverse-outline-light}",
+ "source": "$btn-light-inverse-outline-disabled-color"
}
},
"bg": {
"light": {
- "source": "$btn-light-disabled-bg",
- "$value": "{color.btn.bg.light}"
+ "$value": "{color.btn.bg.light}",
+ "source": "$btn-light-disabled-bg"
},
"outline-light": {
- "source": "$btn-light-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-light-outline-disabled-bg"
},
"inverse-light": {
- "source": "$btn-light-inverse-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-light-inverse-disabled-bg"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-light-inverse-outline-disabled-bg"
}
},
"border": {
"light": {
- "source": "$btn-light-disabled-border-color",
- "$value": "{color.btn.border.light}"
+ "$value": "{color.btn.border.light}",
+ "source": "$btn-light-disabled-border-color"
},
"outline-light": {
- "source": "$btn-light-outline-disabled-border-color",
- "$value": "{color.btn.hover.text.outline-light}"
+ "$value": "{color.btn.hover.text.outline-light}",
+ "source": "$btn-light-outline-disabled-border-color"
},
"inverse-light": {
- "source": "$btn-light-inverse-disabled-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-light-inverse-disabled-border-color"
},
"inverse-outline-light": {
- "source": "$btn-light-inverse-outline-disabled-border-color",
- "$value": "{color.btn.border.inverse-outline-light}"
+ "$value": "{color.btn.border.inverse-outline-light}",
+ "source": "$btn-light-inverse-outline-disabled-border-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json
index 1344fbb04b..d405b123ad 100644
--- a/tokens/src/themes/light/components/Button/primary.json
+++ b/tokens/src/themes/light/components/Button/primary.json
@@ -4,306 +4,345 @@
"btn": {
"text": {
"primary": {
- "source": "$btn-primary-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.bg.primary}"
+ "$value": "{color.btn.bg.primary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-primary-color"
},
"outline-primary": {
- "source": "$btn-primary-outline-color",
- "$value": "{color.primary.base}"
+ "$value": "{color.primary.base}",
+ "source": "$btn-primary-outline-color"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-color",
- "$value": "{color.primary.base}"
+ "$value": "{color.primary.base}",
+ "source": "$btn-primary-inverse-color"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-primary-inverse-outline-color"
}
},
"bg": {
"primary": {
- "source": "$btn-primary-bg",
- "$value": "{color.primary.base}"
+ "$value": "{color.primary.base}",
+ "source": "$btn-primary-bg"
},
"outline-primary": {
- "source": "$btn-primary-outline-bg",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-primary-outline-bg"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-bg",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-primary-inverse-outline-bg"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-bg",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.text.inverse-primary}"
+ "$value": "{color.btn.text.inverse-primary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-primary-inverse-bg"
}
},
"border": {
"primary": {
- "source": "$btn-primary-border-color",
- "$value": "{color.btn.bg.primary}"
+ "$value": "{color.btn.bg.primary}",
+ "source": "$btn-primary-border-color"
},
"outline-primary": {
- "source": "$btn-primary-outline-border-color",
- "$value": "{color.primary.base}"
+ "$value": "{color.primary.base}",
+ "source": "$btn-primary-outline-border-color"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-primary-inverse-outline-border-color"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-primary-inverse-border-color"
}
},
"hover": {
"text": {
"primary": {
- "source": "$btn-primary-hover-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.hover.bg.primary}"
+ "$value": "{color.btn.hover.bg.primary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-primary-hover-color"
},
"outline-primary": {
- "source": "$btn-primary-outline-hover-color",
- "$value": "{color.theme.hover.primary}"
+ "$value": "{color.theme.hover.primary}",
+ "source": "$btn-primary-outline-hover-color"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-hover-color",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.text.inverse-primary}"
+ "$value": "{color.btn.text.inverse-primary}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-primary-inverse-hover-color"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-hover-color",
- "$value": "{color.theme.hover.primary}"
+ "$value": "{color.theme.hover.primary}",
+ "source": "$btn-primary-inverse-outline-hover-color"
}
},
"bg": {
"primary": {
- "source": "$btn-primary-hover-bg",
- "$value": "{color.theme.hover.primary}"
+ "$value": "{color.theme.hover.primary}",
+ "source": "$btn-primary-hover-bg"
},
"outline-primary": {
- "source": "$btn-primary-outline-hover-bg",
- "$value": "{color.primary.100}"
+ "$value": "{color.primary.100}",
+ "source": "$btn-primary-outline-hover-bg"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-hover-bg",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.bg.inverse-primary}"
+ "$value": "{color.btn.bg.inverse-primary}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-primary-inverse-hover-bg"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-hover-bg",
- "$value": "{color.primary.100}"
+ "$value": "{color.primary.100}",
+ "source": "$btn-primary-inverse-outline-hover-bg"
}
},
"border": {
"primary": {
- "source": "$btn-primary-hover-border-color",
- "$value": "{color.theme.hover.primary}"
+ "$value": "{color.theme.hover.primary}",
+ "source": "$btn-primary-hover-border-color"
},
"outline-primary": {
- "source": "$btn-primary-outline-hover-border-color",
- "$value": "{color.primary.900}"
+ "$value": "{color.primary.900}",
+ "source": "$btn-primary-outline-hover-border-color"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-primary-inverse-outline-hover-border-color"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-primary-inverse-hover-border-color"
}
}
},
"active": {
"text": {
"primary": {
- "source": "$btn-primary-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.primary}"
+ "$value": "{color.btn.active.bg.primary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-primary-active-color"
},
"outline-primary": {
- "source": "$btn-primary-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.outline-primary}"
+ "$value": "{color.btn.active.bg.outline-primary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-primary-outline-active-color"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-active-color",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.btn.text.inverse-primary}"
+ "$value": "{color.btn.text.inverse-primary}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$btn-primary-inverse-active-color"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.inverse-outline-primary}"
+ "$value": "{color.btn.active.bg.inverse-outline-primary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-primary-inverse-outline-active-color"
}
},
"bg": {
"primary": {
- "source": "$btn-primary-active-bg",
- "$value": "{color.theme.active.primary}"
+ "$value": "{color.theme.active.primary}",
+ "source": "$btn-primary-active-bg"
},
"outline-primary": {
- "source": "$btn-primary-outline-active-bg",
- "$value": "{color.theme.bg.primary}"
+ "$value": "{color.theme.bg.primary}",
+ "source": "$btn-primary-outline-active-bg"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-active-bg",
- "$value": "{color.theme.bg.primary}"
+ "$value": "{color.theme.bg.primary}",
+ "source": "$btn-primary-inverse-outline-active-bg"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-active-bg",
- "$value": "{color.gray.100}"
+ "$value": "{color.gray.100}",
+ "source": "$btn-primary-inverse-active-bg"
}
},
"border": {
"primary": {
- "source": "$btn-primary-active-border-color",
- "$value": "{color.theme.active.primary}"
+ "$value": "{color.theme.active.primary}",
+ "source": "$btn-primary-active-border-color"
},
"outline-primary": {
- "source": "$btn-primary-outline-active-border-color",
- "$value": "{color.theme.active.primary}"
+ "$value": "{color.theme.active.primary}",
+ "source": "$btn-primary-outline-active-border-color"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-primary-inverse-outline-active-border-color"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-primary-inverse-active-border-color"
}
}
},
"focus": {
"text": {
"primary": {
- "source": "$btn-primary-focus-color",
- "$value": "{color.btn.text.primary}"
+ "$value": "{color.btn.text.primary}",
+ "source": "$btn-primary-focus-color"
},
"outline-primary": {
- "source": "$btn-primary-outline-focus-color",
- "$value": "{color.btn.text.outline-primary}"
+ "$value": "{color.btn.text.outline-primary}",
+ "source": "$btn-primary-outline-focus-color"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-focus-color",
- "$value": "{color.btn.text.inverse-primary}"
+ "$value": "{color.btn.text.inverse-primary}",
+ "source": "$btn-primary-inverse-focus-color"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-focus-color",
- "$value": "{color.btn.text.inverse-outline-primary}"
+ "$value": "{color.btn.text.inverse-outline-primary}",
+ "source": "$btn-primary-inverse-outline-focus-color"
}
},
"border": {
"primary": {
- "source": "$btn-primary-focus-border-color",
- "$value": "{color.btn.border.primary}"
+ "$value": "{color.btn.border.primary}",
+ "source": "$btn-primary-focus-border-color"
},
"outline-primary": {
- "source": "$btn-primary-outline-focus-border-color",
- "$value": "{color.btn.border.outline-primary}"
+ "$value": "{color.btn.border.outline-primary}",
+ "source": "$btn-primary-outline-focus-border-color"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-focus-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-primary-inverse-focus-border-color"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-focus-border-color",
- "$value": "{color.btn.border.inverse-outline-primary}"
+ "$value": "{color.btn.border.inverse-outline-primary}",
+ "source": "$btn-primary-inverse-outline-focus-border-color"
}
},
"outline": {
"primary": {
- "source": "$btn-primary-focus-focus-outline-color",
- "$value": "{color.theme.focus.primary}"
+ "$value": "{color.theme.focus.primary}",
+ "source": "$btn-primary-focus-focus-outline-color"
},
"outline-primary": {
- "source": "$btn-primary-outline-focus-outline-color",
- "$value": "{color.theme.focus.primary}"
+ "$value": "{color.theme.focus.primary}",
+ "source": "$btn-primary-outline-focus-outline-color"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-focus-outline-color",
- "$value": "{color.btn.focus.border.inverse-primary}"
+ "$value": "{color.btn.focus.border.inverse-primary}",
+ "source": "$btn-primary-inverse-focus-outline-color"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-focus-outline-color",
- "$value": "{color.btn.border.inverse-outline-primary}"
+ "$value": "{color.btn.border.inverse-outline-primary}",
+ "source": "$btn-primary-inverse-outline-focus-outline-color"
}
},
"bg": {
"primary": {
- "source": "$btn-primary-focus-bg",
- "$value": "{color.btn.bg.primary}"
+ "$value": "{color.btn.bg.primary}",
+ "source": "$btn-primary-focus-bg"
},
"outline-primary": {
- "source": "$btn-primary-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-primary-outline-focus-bg"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-focus-bg",
- "$value": "{color.btn.bg.inverse-primary}"
+ "$value": "{color.btn.bg.inverse-primary}",
+ "source": "$btn-primary-inverse-focus-bg"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-primary-inverse-outline-focus-bg"
}
}
},
"disabled": {
"text": {
"primary": {
- "source": "$btn-primary-disabled-color",
- "$value": "{color.btn.text.primary}"
+ "$value": "{color.btn.text.primary}",
+ "source": "$btn-primary-disabled-color"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-disabled-color",
- "$value": "{color.primary.500}"
+ "$value": "{color.primary.500}",
+ "source": "$btn-primary-inverse-disabled-color"
},
"outline-primary": {
- "source": "$btn-primary-outline-disabled-color",
- "$value": "{color.btn.hover.text.outline-primary}"
+ "$value": "{color.btn.hover.text.outline-primary}",
+ "source": "$btn-primary-outline-disabled-color"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-disabled-color",
- "$value": "{color.btn.text.inverse-outline-primary}"
+ "$value": "{color.btn.text.inverse-outline-primary}",
+ "source": "$btn-primary-inverse-outline-disabled-color"
}
},
"bg": {
"primary": {
- "source": "$btn-primary-disabled-bg",
- "$value": "{color.btn.bg.primary}"
+ "$value": "{color.btn.bg.primary}",
+ "source": "$btn-primary-disabled-bg"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-disabled-bg",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-primary-inverse-disabled-bg"
},
"outline-primary": {
- "source": "$btn-primary-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-primary-outline-disabled-bg"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-primary-inverse-outline-disabled-bg"
}
},
"border": {
"primary": {
- "source": "$btn-primary-disabled-border-color",
- "$value": "{color.btn.border.primary}"
+ "$value": "{color.btn.border.primary}",
+ "source": "$btn-primary-disabled-border-color"
},
"inverse-primary": {
- "source": "$btn-primary-inverse-disabled-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-primary-inverse-disabled-border-color"
},
"outline-primary": {
- "source": "$btn-primary-outline-disabled-border-color",
- "$value": "{color.btn.hover.text.outline-primary}"
+ "$value": "{color.btn.hover.text.outline-primary}",
+ "source": "$btn-primary-outline-disabled-border-color"
},
"inverse-outline-primary": {
- "source": "$btn-primary-inverse-outline-disabled-border-color",
- "$value": "{color.btn.text.inverse-outline-primary}"
+ "$value": "{color.btn.text.inverse-outline-primary}",
+ "source": "$btn-primary-inverse-outline-disabled-border-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json
index c8057ffa9b..93673abd9c 100644
--- a/tokens/src/themes/light/components/Button/secondary.json
+++ b/tokens/src/themes/light/components/Button/secondary.json
@@ -4,306 +4,345 @@
"btn": {
"text": {
"secondary": {
- "source": "$btn-secondary-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.bg.secondary}"
+ "$value": "{color.btn.bg.secondary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-secondary-color"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-color",
- "$value": "{color.secondary.base}"
+ "$value": "{color.secondary.base}",
+ "source": "$btn-secondary-outline-color"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-color",
- "$value": "{color.secondary.base}"
+ "$value": "{color.secondary.base}",
+ "source": "$btn-secondary-inverse-color"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-secondary-inverse-outline-color"
}
},
"bg": {
"secondary": {
- "source": "$btn-secondary-bg",
- "$value": "{color.secondary.base}"
+ "$value": "{color.secondary.base}",
+ "source": "$btn-secondary-bg"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-secondary-outline-bg"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-secondary-inverse-outline-bg"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-bg",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.text.inverse-secondary}"
+ "$value": "{color.btn.text.inverse-secondary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-secondary-inverse-bg"
}
},
"border": {
"secondary": {
- "source": "$btn-secondary-border-color",
- "$value": "{color.btn.bg.secondary}"
+ "$value": "{color.btn.bg.secondary}",
+ "source": "$btn-secondary-border-color"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-border-color",
- "$value": "{color.secondary.base}"
+ "$value": "{color.secondary.base}",
+ "source": "$btn-secondary-outline-border-color"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-secondary-inverse-outline-border-color"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-secondary-inverse-border-color"
}
},
"hover": {
"text": {
"secondary": {
- "source": "$btn-secondary-hover-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.hover.bg.secondary}"
+ "$value": "{color.btn.hover.bg.secondary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-secondary-hover-color"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-hover-color",
- "$value": "{color.theme.hover.secondary}"
+ "$value": "{color.theme.hover.secondary}",
+ "source": "$btn-secondary-outline-hover-color"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-hover-color",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.text.inverse-secondary}"
+ "$value": "{color.btn.text.inverse-secondary}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-secondary-inverse-hover-color"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-hover-color",
- "$value": "{color.theme.hover.secondary}"
+ "$value": "{color.theme.hover.secondary}",
+ "source": "$btn-secondary-inverse-outline-hover-color"
}
},
"bg": {
"secondary": {
- "source": "$btn-secondary-hover-bg",
- "$value": "{color.theme.hover.secondary}"
+ "$value": "{color.theme.hover.secondary}",
+ "source": "$btn-secondary-hover-bg"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-hover-bg",
- "$value": "{color.secondary.100}"
+ "$value": "{color.secondary.100}",
+ "source": "$btn-secondary-outline-hover-bg"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-hover-bg",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.bg.inverse-secondary}"
+ "$value": "{color.btn.bg.inverse-secondary}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-secondary-inverse-hover-bg"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-hover-bg",
- "$value": "{color.secondary.100}"
+ "$value": "{color.secondary.100}",
+ "source": "$btn-secondary-inverse-outline-hover-bg"
}
},
"border": {
"secondary": {
- "source": "$btn-secondary-hover-border-color",
- "$value": "{color.theme.hover.secondary}"
+ "$value": "{color.theme.hover.secondary}",
+ "source": "$btn-secondary-hover-border-color"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-hover-border-color",
- "$value": "{color.secondary.900}"
+ "$value": "{color.secondary.900}",
+ "source": "$btn-secondary-outline-hover-border-color"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-secondary-inverse-outline-hover-border-color"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-secondary-inverse-hover-border-color"
}
}
},
"active": {
"text": {
"secondary": {
- "source": "$btn-secondary-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.secondary}"
+ "$value": "{color.btn.active.bg.secondary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-secondary-active-color"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.outline-secondary}"
+ "$value": "{color.btn.active.bg.outline-secondary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-secondary-outline-active-color"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-active-color",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.btn.text.inverse-secondary}"
+ "$value": "{color.btn.text.inverse-secondary}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$btn-secondary-inverse-active-color"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.inverse-outline-secondary}"
+ "$value": "{color.btn.active.bg.inverse-outline-secondary}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-secondary-inverse-outline-active-color"
}
},
"bg": {
"secondary": {
- "source": "$btn-secondary-active-bg",
- "$value": "{color.theme.active.secondary}"
+ "$value": "{color.theme.active.secondary}",
+ "source": "$btn-secondary-active-bg"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-active-bg",
- "$value": "{color.theme.bg.secondary}"
+ "$value": "{color.theme.bg.secondary}",
+ "source": "$btn-secondary-outline-active-bg"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-active-bg",
- "$value": "{color.theme.bg.secondary}"
+ "$value": "{color.theme.bg.secondary}",
+ "source": "$btn-secondary-inverse-outline-active-bg"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-active-bg",
- "$value": "{color.gray.100}"
+ "$value": "{color.gray.100}",
+ "source": "$btn-secondary-inverse-active-bg"
}
},
"border": {
"secondary": {
- "source": "$btn-secondary-active-border-color",
- "$value": "{color.theme.active.secondary}"
+ "$value": "{color.theme.active.secondary}",
+ "source": "$btn-secondary-active-border-color"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-active-border-color",
- "$value": "{color.theme.active.secondary}"
+ "$value": "{color.theme.active.secondary}",
+ "source": "$btn-secondary-outline-active-border-color"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-secondary-inverse-outline-active-border-color"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-secondary-inverse-active-border-color"
}
}
},
"focus": {
"text": {
"secondary": {
- "source": "$btn-secondary-focus-color",
- "$value": "{color.btn.text.secondary}"
+ "$value": "{color.btn.text.secondary}",
+ "source": "$btn-secondary-focus-color"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-focus-color",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-secondary-inverse-focus-color"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-focus-color",
- "$value": "{color.btn.text.outline-secondary}"
+ "$value": "{color.btn.text.outline-secondary}",
+ "source": "$btn-secondary-outline-focus-color"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-focus-color",
- "$value": "{color.btn.text.inverse-outline-secondary}"
+ "$value": "{color.btn.text.inverse-outline-secondary}",
+ "source": "$btn-secondary-inverse-outline-focus-color"
}
},
"border": {
"secondary": {
- "source": "$btn-secondary-focus-border-color",
- "$value": "{color.btn.bg.secondary}"
+ "$value": "{color.btn.bg.secondary}",
+ "source": "$btn-secondary-focus-border-color"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-focus-border-color",
- "$value": "{color.btn.border.outline-secondary}"
+ "$value": "{color.btn.border.outline-secondary}",
+ "source": "$btn-secondary-outline-focus-border-color"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-focus-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-secondary-inverse-focus-border-color"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-focus-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-secondary-inverse-outline-focus-border-color"
}
},
"outline": {
"secondary": {
- "source": "$btn-secondary-focus-outline-color",
- "$value": "{color.theme.focus.secondary}"
+ "$value": "{color.theme.focus.secondary}",
+ "source": "$btn-secondary-focus-outline-color"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-focus-outline-color",
- "$value": "{color.theme.focus.secondary}"
+ "$value": "{color.theme.focus.secondary}",
+ "source": "$btn-secondary-outline-focus-outline-color"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-focus-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-secondary-inverse-focus-outline-color"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-focus-outline-color",
- "$value": "{color.btn.border.inverse-outline-secondary}"
+ "$value": "{color.btn.border.inverse-outline-secondary}",
+ "source": "$btn-secondary-inverse-outline-focus-outline-color"
}
},
"bg": {
"secondary": {
- "source": "$btn-secondary-focus-bg",
- "$value": "{color.btn.bg.secondary}"
+ "$value": "{color.btn.bg.secondary}",
+ "source": "$btn-secondary-focus-bg"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-focus-bg",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-secondary-outline-focus-bg"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-focus-bg",
- "$value": "{color.btn.bg.inverse-secondary}"
+ "$value": "{color.btn.bg.inverse-secondary}",
+ "source": "$btn-secondary-inverse-focus-bg"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-secondary-inverse-outline-focus-bg"
}
}
},
"disabled": {
"text": {
"secondary": {
- "source": "$btn-secondary-disabled-color",
- "$value": "{color.btn.text.secondary}"
+ "$value": "{color.btn.text.secondary}",
+ "source": "$btn-secondary-disabled-color"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-disabled-color",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-secondary-outline-disabled-color"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-disabled-color",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-secondary-inverse-disabled-color"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-disabled-color",
- "$value": "{color.btn.text.inverse-outline-secondary}"
+ "$value": "{color.btn.text.inverse-outline-secondary}",
+ "source": "$btn-secondary-inverse-outline-disabled-color"
}
},
"bg": {
"secondary": {
- "source": "$btn-secondary-disabled-bg",
- "$value": "{color.btn.bg.secondary}"
+ "$value": "{color.btn.bg.secondary}",
+ "source": "$btn-secondary-disabled-bg"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-secondary-outline-disabled-bg"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-secondary-inverse-disabled-bg"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-secondary-inverse-outline-disabled-bg"
}
},
"border": {
"secondary": {
- "source": "$btn-secondary-disabled-border-color",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-secondary-disabled-border-color"
},
"outline-secondary": {
- "source": "$btn-secondary-outline-disabled-border-color",
- "$value": "{color.secondary.base}"
+ "$value": "{color.secondary.base}",
+ "source": "$btn-secondary-outline-disabled-border-color"
},
"inverse-secondary": {
- "source": "$btn-secondary-inverse-disabled-border-color",
- "$value": "{color.btn.border.inverse-secondary}"
+ "$value": "{color.btn.border.inverse-secondary}",
+ "source": "$btn-secondary-inverse-disabled-border-color"
},
"inverse-outline-secondary": {
- "source": "$btn-secondary-inverse-outline-disabled-border-color",
- "$value": "{color.btn.border.inverse-outline-secondary}"
+ "$value": "{color.btn.border.inverse-outline-secondary}",
+ "source": "$btn-secondary-inverse-outline-disabled-border-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json
index e27a0aaca9..9d2e00bcfe 100644
--- a/tokens/src/themes/light/components/Button/success.json
+++ b/tokens/src/themes/light/components/Button/success.json
@@ -4,306 +4,345 @@
"btn": {
"text": {
"success": {
- "source": "$btn-success-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.bg.success}"
+ "$value": "{color.btn.bg.success}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-success-color"
},
"outline-success": {
- "source": "$btn-success-outline-color",
- "$value": "{color.success.base}"
+ "$value": "{color.success.base}",
+ "source": "$btn-success-outline-color"
},
"inverse-success": {
- "source": "$btn-success-inverse-color",
- "$value": "{color.success.base}"
+ "$value": "{color.success.base}",
+ "source": "$btn-success-inverse-color"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-success-inverse-outline-color"
}
},
"bg": {
"success": {
- "source": "$btn-success-bg",
- "$value": "{color.success.base}"
+ "$value": "{color.success.base}",
+ "source": "$btn-success-bg"
},
"outline-success": {
- "source": "$btn-success-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-success-outline-bg"
},
"inverse-success": {
- "source": "$btn-success-inverse-bg",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.text.inverse-success}"
+ "$value": "{color.btn.text.inverse-success}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-success-inverse-bg"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-success-inverse-outline-bg"
}
},
"border": {
"success": {
- "source": "$btn-success-border-color",
- "$value": "{color.btn.bg.success}"
+ "$value": "{color.btn.bg.success}",
+ "source": "$btn-success-border-color"
},
"outline-success": {
- "source": "$btn-success-outline-border-color",
- "$value": "{color.success.base}"
+ "$value": "{color.success.base}",
+ "source": "$btn-success-outline-border-color"
},
"inverse-success": {
- "source": "$btn-success-inverse-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-success-inverse-border-color"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-success-inverse-outline-border-color"
}
},
"hover": {
"text": {
"success": {
- "source": "$btn-success-hover-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.hover.bg.success}"
+ "$value": "{color.btn.hover.bg.success}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-success-hover-color"
},
"outline-success": {
- "source": "$btn-success-outline-hover-color",
- "$value": "{color.theme.hover.success}"
+ "$value": "{color.theme.hover.success}",
+ "source": "$btn-success-outline-hover-color"
},
"inverse-success": {
- "source": "$btn-success-inverse-hover-color",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.text.inverse-success}"
+ "$value": "{color.btn.text.inverse-success}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-success-inverse-hover-color"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-hover-color",
- "$value": "{color.theme.hover.success}"
+ "$value": "{color.theme.hover.success}",
+ "source": "$btn-success-inverse-outline-hover-color"
}
},
"bg": {
"success": {
- "source": "$btn-success-hover-bg",
- "$value": "{color.theme.hover.success}"
+ "$value": "{color.theme.hover.success}",
+ "source": "$btn-success-hover-bg"
},
"outline-success": {
- "source": "$btn-success-outline-hover-bg",
- "$value": "{color.success.100}"
+ "$value": "{color.success.100}",
+ "source": "$btn-success-outline-hover-bg"
},
"inverse-success": {
- "source": "$btn-success-inverse-hover-bg",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.bg.inverse-success}"
+ "$value": "{color.btn.bg.inverse-success}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-success-inverse-hover-bg"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-hover-bg",
- "$value": "{color.success.100}"
+ "$value": "{color.success.100}",
+ "source": "$btn-success-inverse-outline-hover-bg"
}
},
"border": {
"success": {
- "source": "$btn-success-hover-border-color",
- "$value": "{color.theme.hover.success}"
+ "$value": "{color.theme.hover.success}",
+ "source": "$btn-success-hover-border-color"
},
"outline-success": {
- "source": "$btn-success-outline-hover-border-color",
- "$value": "{color.success.900}"
+ "$value": "{color.success.900}",
+ "source": "$btn-success-outline-hover-border-color"
},
"inverse-success": {
- "source": "$btn-success-inverse-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-success-inverse-hover-border-color"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-success-inverse-outline-hover-border-color"
}
}
},
"active": {
"text": {
"success": {
- "source": "$btn-success-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.success}"
+ "$value": "{color.btn.active.bg.success}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-success-active-color"
},
"outline-success": {
- "source": "$btn-success-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.outline-success}"
+ "$value": "{color.btn.active.bg.outline-success}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-success-outline-active-color"
},
"inverse-success": {
- "source": "$btn-success-inverse-active-color",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.btn.text.inverse-success}"
+ "$value": "{color.btn.text.inverse-success}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$btn-success-inverse-active-color"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.inverse-outline-success}"
+ "$value": "{color.btn.active.bg.inverse-outline-success}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-success-inverse-outline-active-color"
}
},
"bg": {
"success": {
- "source": "$btn-success-active-bg",
- "$value": "{color.theme.active.success}"
+ "$value": "{color.theme.active.success}",
+ "source": "$btn-success-active-bg"
},
"outline-success": {
- "source": "$btn-success-outline-active-bg",
- "$value": "{color.theme.bg.success}"
+ "$value": "{color.theme.bg.success}",
+ "source": "$btn-success-outline-active-bg"
},
"inverse-success": {
- "source": "$btn-success-inverse-active-bg",
- "$value": "{color.gray.100}"
+ "$value": "{color.gray.100}",
+ "source": "$btn-success-inverse-active-bg"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-active-bg",
- "$value": "{color.theme.bg.success}"
+ "$value": "{color.theme.bg.success}",
+ "source": "$btn-success-inverse-outline-active-bg"
}
},
"border": {
"success": {
- "source": "$btn-success-active-border-color",
- "$value": "{color.theme.active.success}"
+ "$value": "{color.theme.active.success}",
+ "source": "$btn-success-active-border-color"
},
"outline-success": {
- "source": "$btn-success-outline-active-border-color",
- "$value": "{color.theme.active.success}"
+ "$value": "{color.theme.active.success}",
+ "source": "$btn-success-outline-active-border-color"
},
"inverse-success": {
- "source": "$btn-success-inverse-active-border-color",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-success-inverse-active-border-color"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-success-inverse-outline-active-border-color"
}
}
},
"focus": {
"text": {
"success": {
- "source": "$btn-success-focus-color",
- "$value": "{color.btn.text.success}"
+ "$value": "{color.btn.text.success}",
+ "source": "$btn-success-focus-color"
},
"outline-success": {
- "source": "$btn-success-outline-focus-color",
- "$value": "{color.btn.text.outline-success}"
+ "$value": "{color.btn.text.outline-success}",
+ "source": "$btn-success-outline-focus-color"
},
"inverse-success": {
- "source": "$btn-success-inverse-focus-color",
- "$value": "{color.btn.text.inverse-success}"
+ "$value": "{color.btn.text.inverse-success}",
+ "source": "$btn-success-inverse-focus-color"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-focus-color",
- "$value": "{color.btn.text.inverse-outline-success}"
+ "$value": "{color.btn.text.inverse-outline-success}",
+ "source": "$btn-success-inverse-outline-focus-color"
}
},
"border": {
"success": {
- "source": "$btn-success-focus-border-color",
- "$value": "{color.btn.border.success}"
+ "$value": "{color.btn.border.success}",
+ "source": "$btn-success-focus-border-color"
},
"outline-success": {
- "source": "$btn-success-outline-focus-border-color",
- "$value": "{color.btn.border.outline-success}"
+ "$value": "{color.btn.border.outline-success}",
+ "source": "$btn-success-outline-focus-border-color"
},
"inverse-success": {
- "source": "$btn-success-inverse-focus-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-success-inverse-focus-border-color"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-focus-border-color",
- "$value": "{color.btn.border.inverse-outline-success}"
+ "$value": "{color.btn.border.inverse-outline-success}",
+ "source": "$btn-success-inverse-outline-focus-border-color"
}
},
"bg": {
"success": {
- "source": "$btn-success-focus-bg",
- "$value": "{color.btn.bg.success}"
+ "$value": "{color.btn.bg.success}",
+ "source": "$btn-success-focus-bg"
},
"outline-success": {
- "source": "$btn-success-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-success-outline-focus-bg"
},
"inverse-success": {
- "source": "$btn-success-inverse-focus-bg",
- "$value": "{color.btn.bg.inverse-success}"
+ "$value": "{color.btn.bg.inverse-success}",
+ "source": "$btn-success-inverse-focus-bg"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-success-inverse-outline-focus-bg"
}
},
"outline": {
"success": {
- "source": "$btn-success-focus-outline-color",
- "$value": "{color.theme.focus.success}"
+ "$value": "{color.theme.focus.success}",
+ "source": "$btn-success-focus-outline-color"
},
"outline-success": {
- "source": "$btn-success-outline-focus-outline-color",
- "$value": "{color.theme.focus.success}"
+ "$value": "{color.theme.focus.success}",
+ "source": "$btn-success-outline-focus-outline-color"
},
"inverse-success": {
- "source": "$btn-success-inverse-focus-outline-color",
- "$value": "{color.btn.focus.border.inverse-success}"
+ "$value": "{color.btn.focus.border.inverse-success}",
+ "source": "$btn-success-inverse-focus-outline-color"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-focus-outline-color",
- "$value": "{color.btn.focus.border.inverse-outline-success}"
+ "$value": "{color.btn.focus.border.inverse-outline-success}",
+ "source": "$btn-success-inverse-outline-focus-outline-color"
}
}
},
"disabled": {
"text": {
"success": {
- "source": "$btn-success-disabled-color",
- "$value": "{color.btn.text.success}"
+ "$value": "{color.btn.text.success}",
+ "source": "$btn-success-disabled-color"
},
"outline-success": {
- "source": "$btn-success-outline-disabled-color",
- "$value": "{color.btn.text.outline-success}"
+ "$value": "{color.btn.text.outline-success}",
+ "source": "$btn-success-outline-disabled-color"
},
"inverse-success": {
- "source": "$btn-success-inverse-disabled-color",
- "$value": "{color.success.base}"
+ "$value": "{color.success.base}",
+ "source": "$btn-success-inverse-disabled-color"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-disabled-color",
- "$value": "{color.btn.text.inverse-outline-success}"
+ "$value": "{color.btn.text.inverse-outline-success}",
+ "source": "$btn-success-inverse-outline-disabled-color"
}
},
"bg": {
"success": {
- "source": "$btn-success-disabled-bg",
- "$value": "{color.btn.bg.success}"
+ "$value": "{color.btn.bg.success}",
+ "source": "$btn-success-disabled-bg"
},
"outline-success": {
- "source": "$btn-success-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-success-outline-disabled-bg"
},
"inverse-success": {
- "source": "$btn-success-inverse-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-success-inverse-disabled-bg"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-success-inverse-outline-disabled-bg"
}
},
"border": {
"success": {
- "source": "$btn-success-disabled-border-color",
- "$value": "{color.btn.border.success}"
+ "$value": "{color.btn.border.success}",
+ "source": "$btn-success-disabled-border-color"
},
"outline-success": {
- "source": "$btn-success-outline-disabled-border-color",
- "$value": "{color.btn.border.outline-success}"
+ "$value": "{color.btn.border.outline-success}",
+ "source": "$btn-success-outline-disabled-border-color"
},
"inverse-success": {
- "source": "$btn-success-inverse-disabled-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-success-inverse-disabled-border-color"
},
"inverse-outline-success": {
- "source": "$btn-success-inverse-outline-disabled-border-color",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-success-inverse-outline-disabled-border-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json
index bfb8c43e22..e463e7ce8d 100644
--- a/tokens/src/themes/light/components/Button/tertiary.json
+++ b/tokens/src/themes/light/components/Button/tertiary.json
@@ -3,79 +3,177 @@
"$type": "color",
"btn": {
"text": {
- "tertiary": { "source": "$btn-tertiary-color", "$value": "{color.gray.700}" },
- "inverse-tertiary": { "source": "$btn-inverse-tertiary-color", "$value": "{color.white}" }
+ "tertiary": {
+ "$value": "{color.gray.700}",
+ "source": "$btn-tertiary-color"
+ },
+ "inverse-tertiary": {
+ "$value": "{color.white}",
+ "source": "$btn-inverse-tertiary-color"
+ }
},
"bg": {
- "tertiary": { "source": "$btn-tertiary-bg", "$value": "transparent" },
- "inverse-tertiary": { "source": "$btn-inverse-tertiary-bg", "$value": "transparent" }
+ "tertiary": {
+ "$value": "transparent",
+ "source": "$btn-tertiary-bg"
+ },
+ "inverse-tertiary": {
+ "$value": "transparent",
+ "source": "$btn-inverse-tertiary-bg"
+ }
},
"border": {
- "tertiary": { "source": "$btn-tertiary-border-color", "$value": "transparent" },
- "inverse-tertiary": { "source": "$btn-inverse-tertiary-border-color", "$value": "transparent" }
+ "tertiary": {
+ "$value": "transparent",
+ "source": "$btn-tertiary-border-color"
+ },
+ "inverse-tertiary": {
+ "$value": "transparent",
+ "source": "$btn-inverse-tertiary-border-color"
+ }
},
"hover": {
"text": {
- "tertiary": { "source": "$btn-tertiary-hover-color", "$value": "{color.gray.700}" },
- "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-color", "$value": "{color.white}" }
+ "tertiary": {
+ "$value": "{color.gray.700}",
+ "source": "$btn-tertiary-hover-color"
+ },
+ "inverse-tertiary": {
+ "$value": "{color.white}",
+ "source": "$btn-inverse-tertiary-hover-color"
+ }
},
"bg": {
- "tertiary": { "source": "$btn-tertiary-hover-bg", "$value": "{color.light.500}" },
+ "tertiary": {
+ "$value": "{color.light.500}",
+ "source": "$btn-tertiary-hover-bg"
+ },
"inverse-tertiary": {
- "source": "$btn-inverse-tertiary-hover-bg",
- "modify": [{ "type": "alpha", "amount": 0.1 }],
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.1
+ }
+ ],
+ "source": "$btn-inverse-tertiary-hover-bg"
}
},
"border": {
- "tertiary": { "source": "$btn-tertiary-hover-border-color", "$value": "transparent" },
- "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-border-color", "$value": "transparent" }
+ "tertiary": {
+ "$value": "transparent",
+ "source": "$btn-tertiary-hover-border-color"
+ },
+ "inverse-tertiary": {
+ "$value": "transparent",
+ "source": "$btn-inverse-tertiary-hover-border-color"
+ }
}
},
"active": {
"text": {
- "tertiary": { "source": "$btn-tertiary-active-color", "$value": "{color.gray.700}" },
- "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-color", "$value": "{color.white}" }
+ "tertiary": {
+ "$value": "{color.gray.700}",
+ "source": "$btn-tertiary-active-color"
+ },
+ "inverse-tertiary": {
+ "$value": "{color.white}",
+ "source": "$btn-inverse-tertiary-active-color"
+ }
},
"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": {
+ "$value": "{color.light.500}",
+ "source": "$btn-tertiary-active-bg"
+ },
+ "inverse-tertiary": {
+ "$value": "{color.btn.hover.bg.inverse-tertiary}",
+ "source": "$btn-inverse-tertiary-active-bg"
+ }
},
"border": {
- "tertiary": { "source": "$btn-tertiary-active-border-color", "$value": "transparent" },
- "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-border-color", "$value": "transparent" }
+ "tertiary": {
+ "$value": "transparent",
+ "source": "$btn-tertiary-active-border-color"
+ },
+ "inverse-tertiary": {
+ "$value": "transparent",
+ "source": "$btn-inverse-tertiary-active-border-color"
+ }
}
},
"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": {
+ "$value": "{color.btn.text.tertiary}",
+ "source": "$btn-tertiary-focus-color"
+ },
+ "inverse-tertiary": {
+ "$value": "{color.btn.text.inverse-tertiary}",
+ "source": "$btn-inverse-tertiary-focus-color"
+ }
},
"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": {
+ "$value": "{color.btn.border.tertiary}",
+ "source": "$btn-tertiary-focus-border-color"
+ },
+ "inverse-tertiary": {
+ "$value": "transparent",
+ "source": "$btn-inverse-tertiary-focus-border-color"
+ }
},
"bg": {
- "tertiary": { "source": "$btn-tertiary-focus-bg", "$value": "inherit" },
- "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-bg", "$value": "inherit" }
+ "tertiary": {
+ "$value": "inherit",
+ "source": "$btn-tertiary-focus-bg"
+ },
+ "inverse-tertiary": {
+ "$value": "inherit",
+ "source": "$btn-inverse-tertiary-focus-bg"
+ }
},
"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": {
+ "$value": "{color.theme.focus.primary}",
+ "source": "$btn-tertiary-focus-outline-color"
+ },
+ "inverse-tertiary": {
+ "$value": "{color.white}",
+ "source": "$btn-inverse-tertiary-focus-outline-color"
+ }
}
},
"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": {
+ "$value": "{color.btn.text.tertiary}",
+ "source": "$btn-tertiary-disabled-color"
+ },
+ "inverse-tertiary": {
+ "$value": "{color.btn.text.inverse-tertiary}",
+ "source": "$btn-inverse-tertiary-disabled-color"
+ }
},
"bg": {
- "tertiary": { "source": "$btn-tertiary-disabled-bg", "$value": "inherit" },
- "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-bg", "$value": "inherit" }
+ "tertiary": {
+ "$value": "inherit",
+ "source": "$btn-tertiary-disabled-bg"
+ },
+ "inverse-tertiary": {
+ "$value": "inherit",
+ "source": "$btn-inverse-tertiary-disabled-bg"
+ }
},
"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": {
+ "$value": "{color.btn.border.tertiary}",
+ "source": "$btn-tertiary-disabled-border-color"
+ },
+ "inverse-tertiary": {
+ "$value": "{color.btn.border.inverse-tertiary}",
+ "source": "$btn-inverse-tertiary-disabled-border-color"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json
index eeb6ff1806..ce8031fb4e 100644
--- a/tokens/src/themes/light/components/Button/warning.json
+++ b/tokens/src/themes/light/components/Button/warning.json
@@ -4,306 +4,345 @@
"btn": {
"text": {
"warning": {
- "source": "$btn-warning-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.bg.warning}"
+ "$value": "{color.btn.bg.warning}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-warning-color"
},
"outline-warning": {
- "source": "$btn-warning-outline-color",
- "$value": "{color.warning.base}"
+ "$value": "{color.warning.base}",
+ "source": "$btn-warning-outline-color"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-color",
- "$value": "{color.warning.base}"
+ "$value": "{color.warning.base}",
+ "source": "$btn-warning-inverse-color"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-warning-inverse-outline-color"
}
},
"bg": {
"warning": {
- "source": "$btn-warning-bg",
- "$value": "{color.warning.base}"
+ "$value": "{color.warning.base}",
+ "source": "$btn-warning-bg"
},
"outline-warning": {
- "source": "$btn-warning-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-warning-outline-bg"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-bg",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.text.inverse-warning}"
+ "$value": "{color.btn.text.inverse-warning}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-warning-inverse-bg"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-warning-inverse-outline-bg"
}
},
"border": {
"warning": {
- "source": "$btn-warning-border-color",
- "$value": "{color.btn.bg.warning}"
+ "$value": "{color.btn.bg.warning}",
+ "source": "$btn-warning-border-color"
},
"outline-warning": {
- "source": "$btn-warning-outline-border-color",
- "$value": "{color.warning.base}"
+ "$value": "{color.warning.base}",
+ "source": "$btn-warning-outline-border-color"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-warning-inverse-border-color"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-border-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-warning-inverse-outline-border-color"
}
},
"hover": {
"text": {
"warning": {
- "source": "$btn-warning-hover-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.hover.bg.warning}"
+ "$value": "{color.btn.hover.bg.warning}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-warning-hover-color"
},
"outline-warning": {
- "source": "$btn-warning-outline-hover-color",
- "$value": "{color.theme.hover.warning}"
+ "$value": "{color.theme.hover.warning}",
+ "source": "$btn-warning-outline-hover-color"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-hover-color",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.text.inverse-warning}"
+ "$value": "{color.btn.text.inverse-warning}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-warning-inverse-hover-color"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-hover-color",
- "$value": "{color.theme.hover.warning}"
+ "$value": "{color.theme.hover.warning}",
+ "source": "$btn-warning-inverse-outline-hover-color"
}
},
"bg": {
"warning": {
- "source": "$btn-warning-hover-bg",
- "$value": "{color.theme.hover.warning}"
+ "$value": "{color.theme.hover.warning}",
+ "source": "$btn-warning-hover-bg"
},
"outline-warning": {
- "source": "$btn-warning-outline-hover-bg",
- "$value": "{color.warning.100}"
+ "$value": "{color.warning.100}",
+ "source": "$btn-warning-outline-hover-bg"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-hover-bg",
- "modify": [{ "type": "darken", "amount": 0.075 }],
- "$value": "{color.btn.bg.inverse-warning}"
+ "$value": "{color.btn.bg.inverse-warning}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.075
+ }
+ ],
+ "source": "$btn-warning-inverse-hover-bg"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-hover-bg",
- "$value": "{color.warning.100}"
+ "$value": "{color.warning.100}",
+ "source": "$btn-warning-inverse-outline-hover-bg"
}
},
"border": {
"warning": {
- "source": "$btn-warning-hover-border-color",
- "$value": "{color.theme.hover.warning}"
+ "$value": "{color.theme.hover.warning}",
+ "source": "$btn-warning-hover-border-color"
},
"outline-warning": {
- "source": "$btn-warning-outline-hover-border-color",
- "$value": "{color.warning.900}"
+ "$value": "{color.warning.900}",
+ "source": "$btn-warning-outline-hover-border-color"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-warning-inverse-hover-border-color"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-hover-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-warning-inverse-outline-hover-border-color"
}
}
},
"active": {
"text": {
"warning": {
- "source": "$btn-warning-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.warning}"
+ "$value": "{color.btn.active.bg.warning}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-warning-active-color"
},
"outline-warning": {
- "source": "$btn-warning-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.outline-warning}"
+ "$value": "{color.btn.active.bg.outline-warning}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-warning-outline-active-color"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-active-color",
- "modify": [{ "type": "darken", "amount": 0.1 }],
- "$value": "{color.btn.text.inverse-warning}"
+ "$value": "{color.btn.text.inverse-warning}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.1
+ }
+ ],
+ "source": "$btn-warning-inverse-active-color"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-active-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.btn.active.bg.inverse-outline-warning}"
+ "$value": "{color.btn.active.bg.inverse-outline-warning}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$btn-warning-inverse-outline-active-color"
}
},
"bg": {
"warning": {
- "source": "$btn-warning-active-bg",
- "$value": "{color.theme.active.warning}"
+ "$value": "{color.theme.active.warning}",
+ "source": "$btn-warning-active-bg"
},
"outline-warning": {
- "source": "$btn-warning-outline-active-bg",
- "$value": "{color.theme.bg.warning}"
+ "$value": "{color.theme.bg.warning}",
+ "source": "$btn-warning-outline-active-bg"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-active-bg",
- "$value": "{color.gray.100}"
+ "$value": "{color.gray.100}",
+ "source": "$btn-warning-inverse-active-bg"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-active-bg",
- "$value": "{color.theme.bg.warning}"
+ "$value": "{color.theme.bg.warning}",
+ "source": "$btn-warning-inverse-outline-active-bg"
}
},
"border": {
"warning": {
- "source": "$btn-warning-active-border-color",
- "$value": "{color.theme.active.warning}"
+ "$value": "{color.theme.active.warning}",
+ "source": "$btn-warning-active-border-color"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-active-border-color",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-warning-inverse-active-border-color"
},
"outline-warning": {
- "source": "$btn-warning-outline-active-border-color",
- "$value": "{color.theme.active.warning}"
+ "$value": "{color.theme.active.warning}",
+ "source": "$btn-warning-outline-active-border-color"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-active-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-warning-inverse-outline-active-border-color"
}
}
},
"focus": {
"text": {
"warning": {
- "source": "$btn-warning-focus-color",
- "$value": "{color.btn.text.warning}"
+ "$value": "{color.btn.text.warning}",
+ "source": "$btn-warning-focus-color"
},
"outline-warning": {
- "source": "$btn-warning-outline-focus-color",
- "$value": "{color.btn.text.outline-warning}"
+ "$value": "{color.btn.text.outline-warning}",
+ "source": "$btn-warning-outline-focus-color"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-focus-color",
- "$value": "{color.btn.text.inverse-warning}"
+ "$value": "{color.btn.text.inverse-warning}",
+ "source": "$btn-warning-inverse-focus-color"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-focus-color",
- "$value": "{color.btn.text.inverse-outline-warning}"
+ "$value": "{color.btn.text.inverse-outline-warning}",
+ "source": "$btn-warning-inverse-outline-focus-color"
}
},
"border": {
"warning": {
- "source": "$btn-warning-focus-border-color",
- "$value": "{color.btn.border.warning}"
+ "$value": "{color.btn.border.warning}",
+ "source": "$btn-warning-focus-border-color"
},
"outline-warning": {
- "source": "$btn-warning-outline-focus-border-color",
- "$value": "{color.btn.border.outline-warning}"
+ "$value": "{color.btn.border.outline-warning}",
+ "source": "$btn-warning-outline-focus-border-color"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-focus-border-color",
- "$value": "{color.btn.border.inverse-warning}"
+ "$value": "{color.btn.border.inverse-warning}",
+ "source": "$btn-warning-inverse-focus-border-color"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-focus-border-color",
- "$value": "{color.btn.border.inverse-outline-warning}"
+ "$value": "{color.btn.border.inverse-outline-warning}",
+ "source": "$btn-warning-inverse-outline-focus-border-color"
}
},
"bg": {
"warning": {
- "source": "$btn-warning-focus-bg",
- "$value": "{color.btn.bg.warning}"
+ "$value": "{color.btn.bg.warning}",
+ "source": "$btn-warning-focus-bg"
},
"outline-warning": {
- "source": "$btn-warning-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-warning-outline-focus-bg"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-focus-bg",
- "$value": "{color.btn.bg.inverse-warning}"
+ "$value": "{color.btn.bg.inverse-warning}",
+ "source": "$btn-warning-inverse-focus-bg"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-warning-inverse-outline-focus-bg"
}
},
"outline": {
"warning": {
- "source": "$btn-warning-focus-outline-color",
- "$value": "{color.theme.focus.warning}"
+ "$value": "{color.theme.focus.warning}",
+ "source": "$btn-warning-focus-outline-color"
},
"outline-warning": {
- "source": "$btn-warning-outline-focus-outline-color",
- "$value": "{color.theme.focus.warning}"
+ "$value": "{color.theme.focus.warning}",
+ "source": "$btn-warning-outline-focus-outline-color"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-focus-outline-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-warning-inverse-focus-outline-color"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-focus-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-warning-inverse-outline-focus-bg"
}
}
},
"disabled": {
"text": {
"warning": {
- "source": "$btn-warning-disabled-color",
- "$value": "{color.btn.text.warning}"
+ "$value": "{color.btn.text.warning}",
+ "source": "$btn-warning-disabled-color"
},
"outline-warning": {
- "source": "$btn-warning-outline-disabled-color",
- "$value": "{color.btn.text.outline-warning}"
+ "$value": "{color.btn.text.outline-warning}",
+ "source": "$btn-warning-outline-disabled-color"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-disabled-color",
- "$value": "{color.warning.base}"
+ "$value": "{color.warning.base}",
+ "source": "$btn-warning-inverse-disabled-color"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-disabled-color",
- "$value": "{color.btn.text.inverse-outline-warning}"
+ "$value": "{color.btn.text.inverse-outline-warning}",
+ "source": "$btn-warning-inverse-outline-disabled-color"
}
},
"bg": {
"warning": {
- "source": "$btn-warning-disabled-bg",
- "$value": "{color.btn.bg.warning}"
+ "$value": "{color.btn.bg.warning}",
+ "source": "$btn-warning-disabled-bg"
},
"outline-warning": {
- "source": "$btn-warning-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-warning-outline-disabled-bg"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-warning-inverse-disabled-bg"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-disabled-bg",
- "$value": "inherit"
+ "$value": "inherit",
+ "source": "$btn-warning-inverse-outline-disabled-bg"
}
},
"border": {
"warning": {
- "source": "$btn-warning-disabled-border-color",
- "$value": "{color.btn.border.warning}"
+ "$value": "{color.btn.border.warning}",
+ "source": "$btn-warning-disabled-border-color"
},
"outline-warning": {
- "source": "$btn-warning-outline-disabled-border-color",
- "$value": "{color.btn.border.outline-warning}"
+ "$value": "{color.btn.border.outline-warning}",
+ "source": "$btn-warning-outline-disabled-border-color"
},
"inverse-warning": {
- "source": "$btn-warning-inverse-disabled-border-color",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$btn-warning-inverse-disabled-border-color"
},
"inverse-outline-warning": {
- "source": "$btn-warning-inverse-outline-disabled-border-color",
- "$value": "{color.btn.border.inverse-outline-warning}"
+ "$value": "{color.btn.border.inverse-outline-warning}",
+ "source": "$btn-warning-inverse-outline-disabled-border-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json
index faf3412fee..b91735a319 100644
--- a/tokens/src/themes/light/components/Card.json
+++ b/tokens/src/themes/light/components/Card.json
@@ -2,24 +2,50 @@
"color": {
"$type": "color",
"card": {
- "base": { "source": "$card-color", "$value": "inherit" },
+ "base": {
+ "$value": "inherit",
+ "source": "$card-color"
+ },
"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": {
+ "$value": "{color.bg.base}",
+ "source": "$card-bg"
+ },
+ "dark": {
+ "$value": "{color.primary.500}",
+ "source": "$card-bg-dark"
+ },
+ "muted": {
+ "$value": "{color.light.200}",
+ "source": "$card-bg-muted"
+ }
},
"border": {
"base": {
- "source": "$card-border-color",
- "modify": [{ "type": "alpha", "amount": 0.125 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.125
+ }
+ ],
+ "source": "$card-border-color"
},
"focus": {
- "base": { "source": "$card-border-focus-color", "$value": "{color.primary.500}" },
- "dark": { "source": "$card-border-focus-color-dark", "$value": "{color.theme.focus.primary}" }
+ "base": {
+ "$value": "{color.primary.500}",
+ "source": "$card-border-focus-color"
+ },
+ "dark": {
+ "$value": "{color.theme.focus.primary}",
+ "source": "$card-border-focus-color-dark"
+ }
}
},
- "divider-bg": { "source": "$card-divider-bg", "$value": "{color.light.400}" }
+ "divider-bg": {
+ "$value": "{color.light.400}",
+ "source": "$card-divider-bg"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Carousel.json b/tokens/src/themes/light/components/Carousel.json
index fd4e5a58f4..be61070fbb 100644
--- a/tokens/src/themes/light/components/Carousel.json
+++ b/tokens/src/themes/light/components/Carousel.json
@@ -3,12 +3,21 @@
"$type": "color",
"carousel": {
"control": {
- "base": { "source": "$carousel-control-color", "$value": "{color.white}" }
+ "base": {
+ "$value": "{color.white}",
+ "source": "$carousel-control-color"
+ }
},
"indicator": {
- "active-bg": { "source": "$carousel-indicator-active-bg", "$value": "{color.white}" }
+ "active-bg": {
+ "$value": "{color.white}",
+ "source": "$carousel-indicator-active-bg"
+ }
},
- "caption": { "source": "$carousel-caption-color", "$value": "{color.white}" }
+ "caption": {
+ "$value": "{color.white}",
+ "source": "$carousel-caption-color"
+ }
}
},
"content": {
@@ -17,16 +26,28 @@
"control": {
"bg": {
"prev-icon": {
- "source": "$carousel-control-prev-icon-bg",
+ "$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\")",
"outputReferences": false,
- "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\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$carousel-control-prev-icon-bg"
},
"next-icon": {
- "source": "$carousel-control-next-icon-bg",
+ "$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\")",
"outputReferences": false,
- "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\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$carousel-control-next-icon-bg"
}
}
}
@@ -37,8 +58,14 @@
"carousel": {
"control": {
"opacity": {
- "base": { "source": "$carousel-control-opacity", "$value": ".5" },
- "hover": { "source": "$carousel-control-hover-opacity", "$value": ".9" }
+ "base": {
+ "$value": ".5",
+ "source": "$carousel-control-opacity"
+ },
+ "hover": {
+ "$value": ".9",
+ "source": "$carousel-control-hover-opacity"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Chip.json b/tokens/src/themes/light/components/Chip.json
index 291598a431..99271cdf21 100644
--- a/tokens/src/themes/light/components/Chip.json
+++ b/tokens/src/themes/light/components/Chip.json
@@ -3,36 +3,72 @@
"$type": "color",
"chip": {
"text": {
- "light": { "source": "$chip-light-color", "$value": "{color.black}" },
- "dark": { "source": "$chip-dark-color", "$value": "{color.white}" }
+ "light": {
+ "$value": "{color.black}",
+ "source": "$chip-light-color"
+ },
+ "dark": {
+ "$value": "{color.white}",
+ "source": "$chip-dark-color"
+ }
},
"bg": {
- "light": { "source": "$chip-light-bg-color", "$value": "{color.white}" },
- "dark": { "source": "$chip-dark-bg", "$value": "{color.primary.300}" }
+ "light": {
+ "$value": "{color.white}",
+ "source": "$chip-light-bg-color"
+ },
+ "dark": {
+ "$value": "{color.primary.300}",
+ "source": "$chip-dark-bg"
+ }
},
"border": {
- "base": { "source": "$chip-border-color", "$value": "{color.light.800}" },
+ "base": {
+ "$value": "{color.light.800}",
+ "source": "$chip-border-color"
+ },
"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": {
+ "$value": "{color.chip.outline.dark}",
+ "source": "$chip-dark-selected-focus-border-color"
+ },
+ "light": {
+ "$value": "{color.dark.500}",
+ "source": "$chip-light-selected-focus-border-color"
+ }
}
}
},
"label": {
- "base": { "source": "$chip-label-color", "$value": "{color.primary.700}" },
- "dark": { "source": "$chip-dark-label-color", "$value": "{color.chip.outline.dark}" }
+ "base": {
+ "$value": "{color.primary.700}",
+ "source": "$chip-label-color"
+ },
+ "dark": {
+ "$value": "{color.chip.outline.dark}",
+ "source": "$chip-dark-label-color"
+ }
},
"outline": {
- "dark": { "source": "$chip-dark-outline-color", "$value": "{color.white}" },
- "light": { "source": "$chip-light-outline-color", "$value": "{color.chip.label.base}" }
+ "dark": {
+ "$value": "{color.white}",
+ "source": "$chip-dark-outline-color"
+ },
+ "light": {
+ "$value": "{color.chip.label.base}",
+ "source": "$chip-light-outline-color"
+ }
}
}
},
"other": {
"$type": "ratio",
"chip": {
- "opacity-disabled": { "source": "$chip-disable-opacity", "$value": ".3" }
+ "opacity-disabled": {
+ "$value": ".3",
+ "source": "$chip-disable-opacity"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json
index dcba0a2d29..f591742bc0 100644
--- a/tokens/src/themes/light/components/CloseButton.json
+++ b/tokens/src/themes/light/components/CloseButton.json
@@ -1,19 +1,22 @@
{
"color": {
"$type": "color",
- "close-button": { "source": "$close-color", "$value": "{color.black}" }
+ "close-button": {
+ "$value": "{color.black}",
+ "source": "$close-color"
+ }
},
"elevation": {
"$type": "shadow",
"close-button": {
"text-shadow": {
- "source": "$close-text-shadow",
"$value": {
"color": "{color.white}",
"offsetX": "0",
"offsetY": "1px",
"blur": "0"
- }
+ },
+ "source": "$close-text-shadow"
}
}
}
diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json
index 07785b9754..16003ac3f0 100644
--- a/tokens/src/themes/light/components/Code.json
+++ b/tokens/src/themes/light/components/Code.json
@@ -2,19 +2,34 @@
"color": {
"$type": "color",
"code": {
- "base": { "source": "$code-color", "$value": "#E83E8C" },
+ "base": {
+ "$value": "#E83E8C",
+ "source": "$code-color"
+ },
"kbd": {
- "base": { "source": "$kbd-color", "$value": "{color.white}" },
- "bg": { "source": "$kbd-bg", "$value": "{color.gray.700}" }
+ "base": {
+ "$value": "{color.white}",
+ "source": "$kbd-color"
+ },
+ "bg": {
+ "$value": "{color.gray.700}",
+ "source": "$kbd-bg"
+ }
},
- "pre": { "source": "$pre-color", "$value": "{color.gray.900}" }
+ "pre": {
+ "$value": "{color.gray.900}",
+ "source": "$pre-color"
+ }
}
},
"elevation": {
"$type": "shadow",
"code": {
"kbd": {
- "box-shadow": { "source": "$kbd-box-shadow", "$value": "none" }
+ "box-shadow": {
+ "$value": "none",
+ "source": "$kbd-box-shadow"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json
index fae700aa26..b63ac48d41 100644
--- a/tokens/src/themes/light/components/DataTable.json
+++ b/tokens/src/themes/light/components/DataTable.json
@@ -3,20 +3,34 @@
"$type": "color",
"data-table": {
"bg": {
- "base": { "source": "$data-table-background-color", "$value": "{color.bg.base}" },
+ "base": {
+ "$value": "{color.bg.base}",
+ "source": "$data-table-background-color"
+ },
"is-loading": {
- "source": "$data-table-is-loading-bg",
- "modify": [{ "type": "alpha", "amount": 0.7 }],
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.7
+ }
+ ],
+ "source": "$data-table-is-loading-bg"
}
},
- "border": { "source": "$data-table-border-color", "$value": "{color.light.300}" }
+ "border": {
+ "$value": "{color.light.300}",
+ "source": "$data-table-border-color"
+ }
}
},
"elevation": {
"$type": "shadow",
"data-table": {
- "box-shadow": { "source": "$data-table-box-shadow", "$value": "{elevation.box-shadow.sm}" }
+ "box-shadow": {
+ "$value": "{elevation.box-shadow.sm}",
+ "source": "$data-table-box-shadow"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json
index ba760ef4c0..35b6f5d161 100644
--- a/tokens/src/themes/light/components/Dropdown.json
+++ b/tokens/src/themes/light/components/Dropdown.json
@@ -2,37 +2,77 @@
"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": {
+ "$value": "{color.body.base}",
+ "source": "$dropdown-color"
+ },
+ "header": {
+ "$value": "{color.gray.500}",
+ "source": "$dropdown-header-color"
+ },
+ "bg": {
+ "$value": "{color.bg.base}",
+ "source": "$dropdown-bg"
+ },
"border": {
- "source": "$dropdown-border-color",
- "modify": [{ "type": "alpha", "amount": 0.15 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.15
+ }
+ ],
+ "source": "$dropdown-border-color"
+ },
+ "divider-bg": {
+ "$value": "{color.gray.100}",
+ "source": "$dropdown-divider-bg"
},
- "divider-bg": { "source": "$dropdown-divider-bg", "$value": "{color.gray.100}" },
"link": {
- "base": { "source": "$dropdown-link-color", "$value": "{color.gray.900}" },
+ "base": {
+ "$value": "{color.gray.900}",
+ "source": "$dropdown-link-color"
+ },
"hover": {
"base": {
- "source": "$dropdown-link-hover-color",
- "modify": [{ "type": "darken", "amount": 0.5 }],
- "$value": "{color.gray.900}"
+ "$value": "{color.gray.900}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.5
+ }
+ ],
+ "source": "$dropdown-link-hover-color"
},
- "bg": { "source": "$dropdown-link-hover-bg", "$value": "{color.light.300}" }
+ "bg": {
+ "$value": "{color.light.300}",
+ "source": "$dropdown-link-hover-bg"
+ }
},
"active": {
- "base": { "source": "$dropdown-link-active-color", "$value": "{color.active}" },
- "bg": { "source": "$dropdown-link-active-bg", "$value": "{color.bg.active}" }
+ "base": {
+ "$value": "{color.active}",
+ "source": "$dropdown-link-active-color"
+ },
+ "bg": {
+ "$value": "{color.bg.active}",
+ "source": "$dropdown-link-active-bg"
+ }
},
- "disabled": { "source": "$dropdown-link-disabled-color", "$value": "{color.disabled}" }
+ "disabled": {
+ "$value": "{color.disabled}",
+ "source": "$dropdown-link-disabled-color"
+ }
}
}
},
"elevation": {
"$type": "shadow",
"dropdown": {
- "box-shadow": { "source": "$dropdown-box-shadow", "$value": "none" }
+ "box-shadow": {
+ "$value": "none",
+ "source": "$dropdown-box-shadow"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json
index 4641968f7c..412f1bc890 100644
--- a/tokens/src/themes/light/components/Dropzone.json
+++ b/tokens/src/themes/light/components/Dropzone.json
@@ -2,10 +2,19 @@
"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": {
+ "$value": "{color.danger.500}",
+ "source": "$dropzone-error-wrapper-color"
+ },
+ "restriction-msg": {
+ "$value": "{color.gray.500}",
+ "source": "$dropzone-restriction-msg-color"
+ },
"border": {
- "base": { "source": "$dropzone-border-color-default", "$value": "{color.gray.500}" }
+ "base": {
+ "$value": "{color.gray.500}",
+ "source": "$dropzone-border-color-default"
+ }
}
}
},
@@ -13,7 +22,6 @@
"$type": "shadow",
"dropzone": {
"hover": {
- "source": "$dropzone-box-shadow-hover",
"$value": {
"color": "{color.info.300}",
"spread": "2px",
@@ -21,10 +29,10 @@
"offsetY": "0",
"blur": "0",
"inset": "inset"
- }
+ },
+ "source": "$dropzone-box-shadow-hover"
},
"focus": {
- "source": "$dropzone-box-shadow-focus",
"$value": {
"color": "{color.info.300}",
"spread": "2px",
@@ -32,10 +40,10 @@
"offsetY": "0",
"blur": "0",
"inset": "inset"
- }
+ },
+ "source": "$dropzone-box-shadow-focus"
},
"active": {
- "source": "$dropzone-box-shadow-active",
"$value": {
"color": "{color.primary.500}",
"spread": "2px",
@@ -43,10 +51,10 @@
"offsetY": "0",
"blur": "0",
"inset": "inset"
- }
+ },
+ "source": "$dropzone-box-shadow-active"
},
"error": {
- "source": "$dropzone-box-shadow-error",
"$value": {
"color": "{color.danger.300}",
"spread": "2px",
@@ -54,7 +62,8 @@
"offsetY": "0",
"blur": "0",
"inset": "inset"
- }
+ },
+ "source": "$dropzone-box-shadow-error"
}
}
}
diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json
index 261f97bddd..e499280b83 100644
--- a/tokens/src/themes/light/components/Form/color.json
+++ b/tokens/src/themes/light/components/Form/color.json
@@ -3,67 +3,155 @@
"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": {
+ "$value": "{color.gray.700}",
+ "source": "$input-color"
+ },
+ "placeholder": {
+ "$value": "{color.gray.500}",
+ "source": "$input-placeholder-color"
+ },
+ "plaintext": {
+ "$value": "{color.body.base}",
+ "source": "$input-plaintext-color"
+ },
+ "border": {
+ "$value": "{color.gray.500}",
+ "source": "$input-border-color"
+ },
"bg": {
- "base": { "source": "$input-bg", "$value": "{color.bg.base}" },
- "disabled": { "source": "$input-disabled-bg", "$value": "{color.gray.100}" }
+ "base": {
+ "$value": "{color.bg.base}",
+ "source": "$input-bg"
+ },
+ "disabled": {
+ "$value": "{color.gray.100}",
+ "source": "$input-disabled-bg"
+ }
},
"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": {
+ "$value": "{color.form.input.base}",
+ "source": "$input-group-addon-color"
+ },
+ "border": {
+ "$value": "{color.form.input.border}",
+ "source": "$input-group-addon-border-color"
+ },
+ "bg": {
+ "$value": "{color.gray.100}",
+ "source": "$input-group-addon-bg"
+ }
}
},
"focus": {
- "base": { "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": {
+ "$value": "{color.form.input.base}",
+ "source": "$input-focus-color"
+ },
+ "border": {
+ "$value": "{color.input.focus}",
+ "source": "$input-focus-border-color"
+ },
+ "bg": {
+ "$value": "{color.form.input.bg.base}",
+ "source": "$input-focus-bg"
+ }
}
},
"control": {
"indicator": {
"$type": "color",
- "border": { "source": "$custom-control-indicator-border-color", "$value": "{color.gray.700}" },
+ "border": {
+ "$value": "{color.gray.700}",
+ "source": "$custom-control-indicator-border-color"
+ },
"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": {
+ "$value": "{color.form.input.bg.base}",
+ "source": "$custom-control-indicator-bg"
+ },
+ "disabled": {
+ "$value": "{color.form.input.bg.disabled}",
+ "source": "$custom-control-indicator-disabled-bg"
+ }
},
"checked": {
- "base": { "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": {
+ "$value": "{color.bg.active}",
+ "source": "$custom-control-indicator-checked-color"
+ },
+ "valid": {
+ "$value": "{color.success.base}",
+ "source": "$custom-control-indicator-checked-valid-color"
+ },
+ "invalid": {
+ "$value": "{color.danger.base}",
+ "source": "$custom-control-indicator-checked-invalid-color"
+ },
"bg": {
- "base": { "source": "$custom-control-indicator-checked-bg", "$value": "{color.bg.active}" },
+ "base": {
+ "$value": "{color.bg.active}",
+ "source": "$custom-control-indicator-checked-bg"
+ },
"disabled": {
- "source": "$custom-control-indicator-checked-disabled-bg",
- "modify": [{ "type": "alpha", "amount": 0.5 }],
- "$value": "{color.primary.base}"
+ "$value": "{color.primary.base}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.5
+ }
+ ],
+ "source": "$custom-control-indicator-checked-disabled-bg"
}
},
"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": {
+ "$value": "{color.form.control.indicator.checked.base}",
+ "source": "$custom-control-indicator-checked-border-color"
+ },
+ "focus": {
+ "$value": "{color.form.input.focus.border}",
+ "source": "$custom-control-indicator-focus-border-color"
+ }
}
},
"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": {
+ "$value": "{color.active}",
+ "source": "$custom-control-indicator-active-color"
+ },
+ "bg": {
+ "$value": "{color.bg.active}",
+ "source": "$custom-control-indicator-active-bg"
+ },
+ "border": {
+ "$value": "{color.form.control.indicator.active.bg}",
+ "source": "$custom-control-indicator-active-border-color"
+ }
}
},
"label": {
"$type": "color",
- "base": { "source": "$custom-control-label-color", "$value": "inherit" },
- "disabled": { "source": "$custom-control-label-disabled-color", "$value": "{color.disabled}" },
+ "base": {
+ "$value": "inherit",
+ "source": "$custom-control-label-color"
+ },
+ "disabled": {
+ "$value": "{color.disabled}",
+ "source": "$custom-control-label-disabled-color"
+ },
"floating": {
"text": {
- "source": "$form-control-floating-label-text-bg",
- "modify": [{ "type": "alpha", "amount": 0.1 }],
- "$value": "{color.form.input.bg.base}"
+ "$value": "{color.form.input.bg.base}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.1
+ }
+ ],
+ "source": "$form-control-floating-label-text-bg"
}
}
},
@@ -71,9 +159,18 @@
"$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": {
+ "$value": "{color.form.control.indicator.checked.base}",
+ "source": "$custom-checkbox-indicator-indeterminate-color"
+ },
+ "bg": {
+ "$value": "{color.bg.active}",
+ "source": "$custom-checkbox-indicator-indeterminate-bg"
+ },
+ "border": {
+ "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}",
+ "source": "$custom-checkbox-indicator-indeterminate-border-color"
+ }
}
}
},
@@ -81,133 +178,226 @@
"$type": "color",
"indicator": {
"checked": {
- "bg": { "source": "$custom-switch-indicator-checked-bg", "$value": "{color.success.base}" }
+ "bg": {
+ "$value": "{color.success.base}",
+ "source": "$custom-switch-indicator-checked-bg"
+ }
}
}
},
"select": {
"base": {
- "source": "$custom-select-color",
+ "$type": "color",
"$value": "{color.form.input.base}",
- "$type": "color"
+ "source": "$custom-select-color"
},
"disabled": {
- "source": "$custom-select-disabled-color",
+ "$type": "color",
"$value": "{color.disabled}",
- "$type": "color"
+ "source": "$custom-select-disabled-color"
},
"indicator": {
"$type": "color",
- "base": { "source": "$custom-select-indicator-color", "$value": "{color.theme.hover.gray}" }
+ "base": {
+ "$value": "{color.theme.hover.gray}",
+ "source": "$custom-select-indicator-color"
+ }
},
"bg": {
"base": {
- "source": "$custom-select-bg",
+ "$type": "color",
"$value": "{color.form.input.bg.base}",
- "$type": "color"
+ "source": "$custom-select-bg"
},
"disabled": {
- "source": "$custom-select-disabled-bg",
+ "$type": "color",
"$value": "{color.gray.100}",
- "$type": "color"
+ "source": "$custom-select-disabled-bg"
},
"size": {
- "source": "$custom-select-bg-size",
+ "$type": "dimension",
"$value": "{color.gray.100}",
- "$type": "dimension"
+ "source": "$custom-select-bg-size"
}
},
"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": {
+ "$value": "{color.form.input.border}",
+ "source": "$custom-select-border-color"
+ },
+ "focus": {
+ "$value": "{color.form.input.focus.border}",
+ "source": "$custom-select-focus-border-color"
+ }
}
},
"range": {
"$type": "color",
"track": {
- "bg": { "source": "$custom-range-track-bg", "$value": "{color.gray.300}" }
+ "bg": {
+ "$value": "{color.gray.300}",
+ "source": "$custom-range-track-bg"
+ }
},
"thumb": {
"bg": {
- "base": { "source": "$custom-range-thumb-bg", "$value": "{color.bg.active}" },
- "disabled": { "source": "$custom-range-thumb-disabled-bg", "$value": "{color.disabled}" },
+ "base": {
+ "$value": "{color.bg.active}",
+ "source": "$custom-range-thumb-bg"
+ },
+ "disabled": {
+ "$value": "{color.disabled}",
+ "source": "$custom-range-thumb-disabled-bg"
+ },
"active": {
- "source": "$custom-range-thumb-active-bg",
- "modify": [{ "type": "lighten", "amount": "0.35" }],
- "$value": "{color.bg.active}"
+ "$value": "{color.bg.active}",
+ "modify": [
+ {
+ "type": "lighten",
+ "amount": "0.35"
+ }
+ ],
+ "source": "$custom-range-thumb-active-bg"
}
}
}
},
"file": {
"$type": "color",
- "base": { "source": "$custom-file-color", "$value": "{color.form.input.base}" },
+ "base": {
+ "$value": "{color.form.input.base}",
+ "source": "$custom-file-color"
+ },
"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": {
+ "$value": "{color.form.input.bg.base}",
+ "source": "$custom-file-bg"
+ },
+ "disabled": {
+ "$value": "{color.form.input.bg.disabled}",
+ "source": "$custom-file-disabled-bg"
+ }
},
"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": {
+ "$value": "{color.form.control.file.base}",
+ "source": "$custom-file-button-color"
+ },
+ "bg": {
+ "$value": "{color.form.input.group.addon.bg}",
+ "source": "$custom-file-button-bg"
+ }
},
"border": {
- "base": { "source": "$custom-file-border-color", "$value": "{color.form.input.border}" },
- "focus": { "source": "$custom-file-focus-border-color", "$value": "{color.form.input.focus.border}" }
+ "base": {
+ "$value": "{color.form.input.border}",
+ "source": "$custom-file-border-color"
+ },
+ "focus": {
+ "$value": "{color.form.input.focus.border}",
+ "source": "$custom-file-focus-border-color"
+ }
}
}
},
"feedback": {
"$type": "color",
- "valid": { "source": "$form-feedback-valid-color", "$value": "{color.success.base}" },
- "invalid": { "source": "$form-feedback-invalid-color", "$value": "{color.danger.base}" },
+ "valid": {
+ "$value": "{color.success.base}",
+ "source": "$form-feedback-valid-color"
+ },
+ "invalid": {
+ "$value": "{color.danger.base}",
+ "source": "$form-feedback-invalid-color"
+ },
"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": {
+ "$value": "{color.form.feedback.valid}",
+ "source": "$form-feedback-icon-valid-color"
+ },
+ "invalid": {
+ "$value": "{color.form.feedback.invalid}",
+ "source": "$form-feedback-icon-invalid-color"
+ }
},
"tooltip": {
"valid": {
- "source": "$form-feedback-tooltip-valid-color",
- "modify": [{ "type": "color-yiq" }],
- "$value": "{color.form.feedback.valid}"
+ "$value": "{color.form.feedback.valid}",
+ "modify": [
+ {
+ "type": "color-yiq"
+ }
+ ],
+ "source": "$form-feedback-tooltip-valid-color"
},
"bg": {
"valid": {
- "source": "$form-feedback-tooltip-valid-bg",
- "modify": [{ "type": "alpha", "amount": 0.9 }],
- "$value": "{color.form.feedback.valid}"
+ "$value": "{color.form.feedback.valid}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.9
+ }
+ ],
+ "source": "$form-feedback-tooltip-valid-bg"
},
"invalid": {
- "source": "$form-feedback-tooltip-invalid-bg",
- "modify": [{ "type": "alpha", "amount": 0.9 }],
- "$value": "{color.form.feedback.invalid}"
+ "$value": "{color.form.feedback.invalid}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.9
+ }
+ ],
+ "source": "$form-feedback-tooltip-invalid-bg"
}
},
"box-shadow": {
"focus": {
"valid": {
- "source": "$form-feedback-focus-box-shadow-valid-color",
- "modify": [{ "type": "alpha", "amount": 0.25 }],
- "$value": "{color.form.feedback.valid}"
+ "$value": "{color.form.feedback.valid}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.25
+ }
+ ],
+ "source": "$form-feedback-focus-box-shadow-valid-color"
},
"invalid": {
- "source": "$form-feedback-focus-box-shadow-invalid-color",
- "modify": [{ "type": "alpha", "amount": 0.25 }],
- "$value": "{color.form.feedback.invalid}"
+ "$value": "{color.form.feedback.invalid}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.25
+ }
+ ],
+ "source": "$form-feedback-focus-box-shadow-invalid-color"
}
}
}
},
"checked": {
"valid": {
- "source": "$form-feedback-checked-valid-color",
- "modify": [{ "type": "lighten", "amount": 0.1 }],
- "$value": "{color.form.feedback.valid}"
+ "$value": "{color.form.feedback.valid}",
+ "modify": [
+ {
+ "type": "lighten",
+ "amount": 0.1
+ }
+ ],
+ "source": "$form-feedback-checked-valid-color"
},
"invalid": {
- "source": "$form-feedback-checked-invalid-color",
- "modify": [{ "type": "lighten", "amount": 0.1 }],
- "$value": "{color.form.feedback.invalid}"
+ "$value": "{color.form.feedback.invalid}",
+ "modify": [
+ {
+ "type": "lighten",
+ "amount": 0.1
+ }
+ ],
+ "source": "$form-feedback-checked-invalid-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
index 6554295dc1..da81e9e283 100644
--- a/tokens/src/themes/light/components/Form/elevation.json
+++ b/tokens/src/themes/light/components/Form/elevation.json
@@ -3,47 +3,67 @@
"$type": "shadow",
"form": {
"input": {
- "base": { "source": "$input-box-shadow", "$value": "none" },
+ "base": {
+ "$value": "none",
+ "source": "$input-box-shadow"
+ },
"focus": {
- "source": "$input-focus-box-shadow",
"$value": {
"color": "{color.primary.500}",
"spread": "1px",
"offsetX": "0",
"offsetY": "0",
"blur": "0"
- }
+ },
+ "source": "$input-focus-box-shadow"
}
},
"control": {
"indicator": {
- "base": { "source": "$custom-control-indicator-box-shadow", "$value": "{elevation.form.input.base}" },
+ "base": {
+ "$value": "{elevation.form.input.base}",
+ "source": "$custom-control-indicator-box-shadow"
+ },
"checked": {
- "base": { "source": "$custom-control-indicator-checked-box-shadow", "$value": "none" },
+ "base": {
+ "$value": "none",
+ "source": "$custom-control-indicator-checked-box-shadow"
+ },
"focus": {
- "source": "$custom-control-indicator-focus-box-shadow",
"$value": {
"color": "rgba(0, 0, 0, .1)",
"spread": "4px",
"offsetX": "0",
"offsetY": "0",
"blur": "0"
- }
+ },
+ "source": "$custom-control-indicator-focus-box-shadow"
}
},
- "active": { "source": "$custom-control-indicator-active-box-shadow", "$value": "none" }
+ "active": {
+ "$value": "none",
+ "source": "$custom-control-indicator-active-box-shadow"
+ }
},
"checkbox": {
"indicator": {
- "indeterminate": { "source": "$custom-checkbox-indicator-indeterminate-box-shadow", "$value": "none" }
+ "indeterminate": {
+ "$value": "none",
+ "source": "$custom-checkbox-indicator-indeterminate-box-shadow"
+ }
}
},
"range": {
- "track": { "source": "$custom-range-track-box-shadow", "$value": "none" },
+ "track": {
+ "$value": "none",
+ "source": "$custom-range-track-box-shadow"
+ },
"thumb": {
- "base": { "source": "$custom-range-thumb-box-shadow", "$value": "none" },
+ "base": {
+ "$value": "none",
+ "source": "$custom-range-thumb-box-shadow"
+ },
"focus": {
- "source": "$custom-range-thumb-focus-box-shadow",
"$value": [
{
"color": "{color.body.bg}",
@@ -52,18 +72,31 @@
"offsetY": ".1rem",
"blur": ".25rem"
}
- ]
+ ],
+ "source": "$custom-range-thumb-focus-box-shadow"
}
}
},
"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": {
+ "$value": "{elevation.form.input.base}",
+ "source": "$custom-file-box-shadow"
+ },
+ "focus": {
+ "$value": "{elevation.form.input.focus}",
+ "source": "$custom-file-focus-box-shadow"
+ }
},
"select": {
"border": {
- "base": { "source": "$custom-select-box-shadow", "$value": "none" },
- "focus": { "source": "$custom-select-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
+ "base": {
+ "$value": "none",
+ "source": "$custom-select-box-shadow"
+ },
+ "focus": {
+ "$value": "{elevation.input.btn-focus.box-shadow}",
+ "source": "$custom-select-focus-box-shadow"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json
index 80140fe9c8..428eacd459 100644
--- a/tokens/src/themes/light/components/Form/other.json
+++ b/tokens/src/themes/light/components/Form/other.json
@@ -4,8 +4,8 @@
"$type": "ratio",
"feedback": {
"tooltip-opacity": {
- "source": "$form-feedback-tooltip-opacity",
- "$value": ".9"
+ "$value": ".9",
+ "source": "$form-feedback-tooltip-opacity"
}
}
},
@@ -17,30 +17,54 @@
"indicator": {
"icon-checked": {
"base": {
- "source": "$custom-checkbox-indicator-icon-checked",
+ "$value": "url(\"data:image/svg+xml,\")",
"outputReferences": false,
- "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
- "$value": "url(\"data:image/svg+xml,\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$custom-checkbox-indicator-icon-checked"
},
"valid": {
- "source": "$custom-checkbox-indicator-icon-valid-checked",
+ "$value": "url(\"data:image/svg+xml,\")",
"outputReferences": false,
- "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
- "$value": "url(\"data:image/svg+xml,\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$custom-checkbox-indicator-icon-valid-checked"
},
"invalid": {
- "source": "$custom-checkbox-indicator-icon-invalid-checked",
+ "$value": "url(\"data:image/svg+xml,\")",
"outputReferences": false,
- "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
- "$value": "url(\"data:image/svg+xml,\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$custom-checkbox-indicator-icon-invalid-checked"
}
},
"indeterminate": {
"icon": {
- "source": "$custom-checkbox-indicator-icon-indeterminate",
+ "$value": "url(\"data:image/svg+xml,\")",
"outputReferences": false,
- "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
- "$value": "url(\"data:image/svg+xml,\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$custom-checkbox-indicator-icon-indeterminate"
}
}
}
@@ -50,22 +74,40 @@
"indicator": {
"icon-checked": {
"base": {
- "source": "$custom-radio-indicator-icon-checked",
+ "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")",
"outputReferences": false,
- "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\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$custom-radio-indicator-icon-checked"
},
"valid": {
- "source": "$custom-radio-indicator-icon-valid-checked",
+ "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")",
"outputReferences": false,
- "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\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$custom-radio-indicator-icon-valid-checked"
},
"invalid": {
- "source": "$custom-radio-indicator-icon-invalid-checked",
+ "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")",
"outputReferences": false,
- "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\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$custom-radio-indicator-icon-invalid-checked"
}
}
}
@@ -74,16 +116,28 @@
"$type": "file",
"indicator": {
"icon-off": {
- "source": "$custom-switch-indicator-icon-off",
+ "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")",
"outputReferences": false,
- "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\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$custom-switch-indicator-icon-off"
},
"icon-on": {
- "source": "$custom-switch-indicator-icon-on",
+ "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")",
"outputReferences": false,
- "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\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$custom-switch-indicator-icon-on"
}
}
},
@@ -91,14 +145,20 @@
"indicator": {
"$type": "file",
"icon": {
- "source": "$custom-select-indicator",
+ "$value": "url('data:image/svg+xml,')",
"outputReferences": false,
- "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
- "$value": "url('data:image/svg+xml,')"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$custom-select-indicator"
}
},
"bg": {
- "source": "$custom-select-background",
+ "$type": "background",
"$value": {
"color": "{color.form.control.select.bg.base}",
"image": "{other.content.form.control.select.indicator.icon}",
@@ -107,7 +167,7 @@
"offset-y": "{spacing.form.input.padding.y.base}",
"position-y": "center"
},
- "$type": "background"
+ "source": "$custom-select-background"
}
}
},
@@ -115,16 +175,28 @@
"$type": "file",
"icon": {
"valid": {
- "source": "$form-feedback-icon-valid",
+ "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' 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\")",
"outputReferences": false,
- "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\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$form-feedback-icon-valid"
},
"invalid": {
- "source": "$form-feedback-icon-invalid",
+ "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")",
"outputReferences": false,
- "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\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$form-feedback-icon-invalid"
}
}
}
diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json
index d2e1b47e0b..a5a20f7c81 100644
--- a/tokens/src/themes/light/components/IconButton.json
+++ b/tokens/src/themes/light/components/IconButton.json
@@ -3,377 +3,812 @@
"$type": "color",
"icon-button": {
"bg": {
- "base": { "source": "$btn-icon-bg", "$value": "transparent" },
+ "base": {
+ "$value": "transparent",
+ "source": "$btn-icon-bg"
+ },
"primary": {
- "base": { "$value": "{color.icon-button.bg.base}" },
- "hover": { "$value": "{color.icon-button.text.primary.base}" },
- "focus": { "$value": "{color.icon-button.bg.base}" },
+ "base": {
+ "$value": "{color.icon-button.bg.base}"
+ },
+ "hover": {
+ "$value": "{color.icon-button.text.primary.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.text.primary.base}" },
- "hover": { "$value": "{color.icon-button.text.primary.base}" },
- "focus": { "$value": "{color.icon-button.text.primary.base}" }
+ "base": {
+ "$value": "{color.icon-button.text.primary.base}"
+ },
+ "hover": {
+ "$value": "{color.icon-button.text.primary.base}"
+ },
+ "focus": {
+ "$value": "{color.icon-button.text.primary.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.text.primary.base}" },
+ "base": {
+ "$value": "{color.primary.base}"
+ },
+ "hover": {
+ "$value": "{color.icon-button.accent}"
+ },
+ "focus": {
+ "$value": "{color.icon-button.text.primary.base}"
+ },
"inverse": {
- "base": { "$value": "{color.icon-button.accent}" },
- "hover": { "$value": "{color.icon-button.text.primary.base}" },
- "focus": { "$value": "{color.icon-button.accent}" }
+ "base": {
+ "$value": "{color.icon-button.accent}"
+ },
+ "hover": {
+ "$value": "{color.icon-button.text.primary.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.text.primary.base}" },
- "hover": { "$value": "{color.icon-button.text.primary.base}" },
- "focus": { "$value": "{color.icon-button.text.primary.base}" }
+ "base": {
+ "$value": "{color.icon-button.text.primary.base}"
+ },
+ "hover": {
+ "$value": "{color.icon-button.text.primary.base}"
+ },
+ "focus": {
+ "$value": "{color.icon-button.text.primary.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}"
+ }
}
}
},
"accent": {
- "source": "$btn-icon-accent-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$btn-icon-accent-color"
},
"black": {
- "source": "$btn-icon-black",
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "source": "$btn-icon-black"
}
}
},
@@ -402,8 +837,12 @@
"inset": "inset"
}
},
- "active": { "$value": "none" },
- "inverse-active": { "$value": "none" }
+ "active": {
+ "$value": "none"
+ },
+ "inverse-active": {
+ "$value": "none"
+ }
},
"secondary": {
"base": {
@@ -426,8 +865,12 @@
"inset": "inset"
}
},
- "active": { "$value": "none" },
- "inverse-active": { "$value": "none" }
+ "active": {
+ "$value": "none"
+ },
+ "inverse-active": {
+ "$value": "none"
+ }
},
"brand": {
"base": {
@@ -450,8 +893,12 @@
"inset": "inset"
}
},
- "active": { "$value": "none" },
- "inverse-active": { "$value": "none" }
+ "active": {
+ "$value": "none"
+ },
+ "inverse-active": {
+ "$value": "none"
+ }
},
"success": {
"base": {
@@ -474,8 +921,12 @@
"inset": "inset"
}
},
- "active": { "$value": "none" },
- "inverse-active": { "$value": "none" }
+ "active": {
+ "$value": "none"
+ },
+ "inverse-active": {
+ "$value": "none"
+ }
},
"warning": {
"base": {
@@ -498,8 +949,12 @@
"inset": "inset"
}
},
- "active": { "$value": "none" },
- "inverse-active": { "$value": "none" }
+ "active": {
+ "$value": "none"
+ },
+ "inverse-active": {
+ "$value": "none"
+ }
},
"danger": {
"base": {
@@ -522,8 +977,12 @@
"inset": "inset"
}
},
- "active": { "$value": "none" },
- "inverse-active": { "$value": "none" }
+ "active": {
+ "$value": "none"
+ },
+ "inverse-active": {
+ "$value": "none"
+ }
},
"light": {
"base": {
@@ -546,8 +1005,12 @@
"inset": "inset"
}
},
- "active": { "$value": "none" },
- "inverse-active": { "$value": "none" }
+ "active": {
+ "$value": "none"
+ },
+ "inverse-active": {
+ "$value": "none"
+ }
},
"dark": {
"base": {
@@ -570,8 +1033,12 @@
"inset": "inset"
}
},
- "active": { "$value": "none" },
- "inverse-active": { "$value": "none" }
+ "active": {
+ "$value": "none"
+ },
+ "inverse-active": {
+ "$value": "none"
+ }
},
"black": {
"base": {
@@ -594,8 +1061,12 @@
"inset": "inset"
}
},
- "active": { "$value": "none" },
- "inverse-active": { "$value": "none" }
+ "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 8c4df0f914..49b678bdcc 100644
--- a/tokens/src/themes/light/components/Image.json
+++ b/tokens/src/themes/light/components/Image.json
@@ -2,10 +2,18 @@
"color": {
"$type": "color",
"image": {
- "figure-caption": { "source": "$figure-caption-color", "$value": "{color.gray.500}" },
+ "figure-caption": {
+ "$value": "{color.gray.500}",
+ "source": "$figure-caption-color"
+ },
"thumbnail": {
- "bg": { "source": "$thumbnail-bg", "$value": "{color.body.bg}" },
- "border": { "source": "$thumbnail-border-color", "$value": "{color.gray.200}"
+ "bg": {
+ "$value": "{color.body.bg}",
+ "source": "$thumbnail-bg"
+ },
+ "border": {
+ "$value": "{color.gray.200}",
+ "source": "$thumbnail-border-color"
}
}
}
@@ -14,7 +22,10 @@
"$type": "shadow",
"image": {
"thumbnail": {
- "box-shadow": { "source": "$thumbnail-box-shadow", "$value": "none" }
+ "box-shadow": {
+ "$value": "none",
+ "source": "$thumbnail-box-shadow"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Menu.json b/tokens/src/themes/light/components/Menu.json
index 74d45ae499..5b334d760b 100644
--- a/tokens/src/themes/light/components/Menu.json
+++ b/tokens/src/themes/light/components/Menu.json
@@ -2,29 +2,59 @@
"elevation": {
"$type": "shadow",
"menu": {
- "box-shadow": { "source": "$menu-box-shadow", "$value": "{elevation.box-shadow.base}" }
+ "box-shadow": {
+ "$value": "{elevation.box-shadow.base}",
+ "source": "$menu-box-shadow"
+ }
}
},
"color": {
"$type": "color",
"menu": {
- "bg": { "source": "$menu-bg", "$value": "{color.white}" },
+ "bg": {
+ "$value": "{color.white}",
+ "source": "$menu-bg"
+ },
"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": {
+ "$value": "{color.body.base}",
+ "source": "$menu-item-color"
+ },
+ "bg": {
+ "$value": "transparent",
+ "source": "$menu-item-bg"
+ },
+ "border": {
+ "$value": "{color.menu.item.bg}",
+ "source": "$menu-item-border-color"
+ },
"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": {
+ "$value": "{color.btn.text.tertiary}",
+ "source": "$menu-item-hover-color"
+ },
+ "bg": {
+ "$value": "{color.btn.hover.bg.tertiary}",
+ "source": "$menu-item-hover-bg"
+ },
+ "border": {
+ "$value": "{color.menu.item.bg}",
+ "source": "$menu-item-hover-border-color"
+ }
},
"focus": {
- "bg": { "source": "$menu-item-focus-bg", "$value": "{color.btn.active.bg.tertiary}" }
+ "bg": {
+ "$value": "{color.btn.active.bg.tertiary}",
+ "source": "$menu-item-focus-bg"
+ }
}
},
"select": {
"btn-link": {
- "color": { "source": "$menu-select-btn-link-color", "$value": "{color.primary.500}" }
+ "color": {
+ "$value": "{color.primary.500}",
+ "source": "$menu-select-btn-link-color"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json
index b11fd11149..e1ef22ee44 100644
--- a/tokens/src/themes/light/components/Modal.json
+++ b/tokens/src/themes/light/components/Modal.json
@@ -3,14 +3,25 @@
"$type": "color",
"modal": {
"content": {
- "bg": { "source": "$modal-content-bg", "$value": "{color.bg.base}" },
+ "bg": {
+ "$value": "{color.bg.base}",
+ "source": "$modal-content-bg"
+ },
"border": {
- "source": "$modal-content-border-color",
- "modify": [{ "type": "alpha", "amount": 0.2 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.2
+ }
+ ],
+ "source": "$modal-content-border-color"
}
},
- "backdrop-bg": { "source": "$modal-backdrop-bg", "$value": "{color.black}" }
+ "backdrop-bg": {
+ "$value": "{color.black}",
+ "source": "$modal-backdrop-bg"
+ }
}
},
"elevation": {
@@ -19,7 +30,6 @@
"content": {
"box-shadow": {
"sm-up": {
- "source": "$modal-content-box-shadow-sm-up",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -33,7 +43,8 @@
"offsetY": "8px",
"blur": "20px"
}
- ]
+ ],
+ "source": "$modal-content-box-shadow-sm-up"
}
}
}
@@ -41,7 +52,10 @@
},
"other": {
"modal": {
- "opacity": { "source": "$modal-backdrop-opacity", "$value": ".5" }
+ "opacity": {
+ "$value": ".5",
+ "source": "$modal-backdrop-opacity"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json
index d9c0ac6f86..9cdfda64f7 100644
--- a/tokens/src/themes/light/components/Nav.json
+++ b/tokens/src/themes/light/components/Nav.json
@@ -4,19 +4,22 @@
"nav": {
"tabs-link": {
"border": {
- "active": { "source": "$nav-tabs-link-active-border-color", "$value": "{color.primary.500}" },
+ "active": {
+ "$value": "{color.primary.500}",
+ "source": "$nav-tabs-link-active-border-color"
+ },
"hover": {
- "source": "$nav-tabs-link-hover-border-color",
"$value": {
"top": "transparent",
"right": "transparent",
"bottom": "{color.nav.tabs.base.border.base}",
"left": "transparent"
- }
+ },
+ "source": "$nav-tabs-link-hover-border-color"
},
"focus": {
- "source": "$nav-tabs-link-focus-border-color",
- "$value": "{color.nav.tabs.base.link.active.text}"
+ "$value": "{color.nav.tabs.base.link.active.text}",
+ "source": "$nav-tabs-link-focus-border-color"
}
}
}
@@ -27,72 +30,114 @@
"nav": {
"link": {
"text": {
- "base": { "source": "$nav-link-color", "$value": "{color.gray.700}" },
- "disabled": { "source": "$nav-link-disabled-color", "$value": "{color.gray.300}" }
+ "base": {
+ "$value": "{color.gray.700}",
+ "source": "$nav-link-color"
+ },
+ "disabled": {
+ "$value": "{color.gray.300}",
+ "source": "$nav-link-disabled-color"
+ }
},
- "border": { "source": "$nav-tabs-link-border-color", "$value": "transparent" }
+ "border": {
+ "$value": "transparent",
+ "source": "$nav-tabs-link-border-color"
+ }
},
"tabs": {
"base": {
"text": {
- "disabled": { "source": "$nav-tabs-disabled-bg", "$value": "{color.nav.tabs.base.bg.hover}" }
+ "disabled": {
+ "$value": "{color.nav.tabs.base.bg.hover}",
+ "source": "$nav-tabs-disabled-bg"
+ }
+ },
+ "bg": {
+ "hover": {
+ "$value": "transparent",
+ "source": "$nav-tabs-hover-bg"
+ }
},
- "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": {
+ "$value": "{color.light.400}",
+ "source": "$nav-tabs-border-color"
+ },
+ "focus": {
+ "$value": "{color.nav.tabs.base.bg.hover}",
+ "source": "$nav-tabs-focus-border-color"
+ }
},
"link": {
- "hover": { "bg": { "source": "$nav-tabs-link-hover-bg", "$value": "{color.light.400}" } },
+ "hover": {
+ "bg": {
+ "$value": "{color.light.400}",
+ "source": "$nav-tabs-link-hover-bg"
+ }
+ },
"active": {
- "text": { "source": "$nav-tabs-link-active-color", "$value": "{color.primary.500}" },
- "bg": { "source": "$nav-tabs-link-active-bg", "$value": "transparent" }
+ "text": {
+ "$value": "{color.primary.500}",
+ "source": "$nav-tabs-link-active-color"
+ },
+ "bg": {
+ "$value": "transparent",
+ "source": "$nav-tabs-link-active-bg"
+ }
},
"disabled": {
- "border": { "source": "$nav-tabs-link-disabled-border-color", "$value": "{color.nav.link.border}" }
+ "border": {
+ "$value": "{color.nav.link.border}",
+ "source": "$nav-tabs-link-disabled-border-color"
+ }
}
}
},
"inverse": {
"link": {
- "text": { "base": { "source": "$nav-inverse-tabs-link-color", "$value": "{color.white}" } },
+ "text": {
+ "base": {
+ "$value": "{color.white}",
+ "source": "$nav-inverse-tabs-link-color"
+ }
+ },
"border": {
"bottom": {
- "source": "$nav-inverse-tabs-link-border-bottom-color",
- "$value": "{color.dark.300}"
+ "$value": "{color.dark.300}",
+ "source": "$nav-inverse-tabs-link-border-bottom-color"
},
"active": {
- "source": "$nav-inverse-tabs-link-active-border-color",
- "$value": "{color.nav.tabs.inverse.link.text.base}"
+ "$value": "{color.nav.tabs.inverse.link.text.base}",
+ "source": "$nav-inverse-tabs-link-active-border-color"
}
},
"bg": {
"hover": {
- "source": "$nav-inverse-tabs-link-hover-bg",
- "$value": "{color.nav.tabs.inverse.link.border.bottom}"
+ "$value": "{color.nav.tabs.inverse.link.border.bottom}",
+ "source": "$nav-inverse-tabs-link-hover-bg"
},
"active": {
- "source": "$nav-inverse-tabs-link-active-bg",
- "$value": "{color.nav.tabs.inverse.link.bg.hover}"
+ "$value": "{color.nav.tabs.inverse.link.bg.hover}",
+ "source": "$nav-inverse-tabs-link-active-bg"
},
"focus": {
- "source": "$nav-inverse-tabs-link-focus-bg",
- "$value": "{color.nav.tabs.inverse.link.text.base}"
+ "$value": "{color.nav.tabs.inverse.link.text.base}",
+ "source": "$nav-inverse-tabs-link-focus-bg"
},
"active-hover": {
- "source": "$nav-inverse-tabs-link-active-hover-bg",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$nav-inverse-tabs-link-active-hover-bg"
}
},
"tab-content-color": {
- "source": "$nav-inverse-tabs-tab-content-color",
- "$value": "{color.nav.tabs.inverse.link.text.base}"
+ "$value": "{color.nav.tabs.inverse.link.text.base}",
+ "source": "$nav-inverse-tabs-tab-content-color"
}
},
"dropdown": {
"border": {
- "source": "$nav-inverse-tabs-dropdown-border-color",
- "$value": "{color.nav.tabs.inverse.link.bg.active-hover}"
+ "$value": "{color.nav.tabs.inverse.link.bg.active-hover}",
+ "source": "$nav-inverse-tabs-dropdown-border-color"
}
}
}
@@ -101,53 +146,123 @@
"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": {
+ "$value": "{color.active}",
+ "source": "$nav-pills-link-active-color"
+ },
+ "bg": {
+ "$value": "{color.bg.active}",
+ "source": "$nav-pills-link-active-bg"
+ },
+ "border": {
+ "$value": "{color.white}",
+ "source": "$nav-pills-link-active-border-color"
+ }
},
- "border": { "source": "$nav-pills-link-border-color", "$value": "{color.nav.tabs.base.border.base}" }
+ "border": {
+ "$value": "{color.nav.tabs.base.border.base}",
+ "source": "$nav-pills-link-border-color"
+ }
}
},
"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": {
+ "$value": "{color.white}",
+ "source": "$nav-inverse-pills-link-color"
+ },
+ "focus": {
+ "$value": "{color.nav.pills.inverse.link.text.base}",
+ "source": "$nav-inverse-pills-link-focus-color"
+ },
+ "active": {
+ "$value": "{color.primary.500}",
+ "source": "$nav-inverse-pills-link-active-color"
+ },
+ "hover": {
+ "$value": "{color.nav.pills.inverse.link.text.base}",
+ "source": "$nav-inverse-pills-link-hover-color"
+ },
+ "active-focus": {
+ "$value": "{color.nav.pills.inverse.link.text.active}",
+ "source": "$nav-inverse-pills-link-active-focus-color"
+ },
+ "active-hover": {
+ "$value": "{color.nav.pills.inverse.link.text.base}",
+ "source": "$nav-inverse-pills-link-active-hover-color"
+ }
},
"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": {
+ "$value": "{color.dark.300}",
+ "source": "$nav-inverse-pills-link-border-color"
+ },
+ "active": {
+ "$value": "{color.nav.pills.inverse.link.text.base}",
+ "source": "$nav-inverse-pills-link-active-border-color"
+ },
+ "active-hover": {
+ "$value": "{color.nav.pills.inverse.link.border.base}",
+ "source": "$nav-inverse-pills-link-active-hover-border-color"
+ },
+ "active-focus": {
+ "$value": "{color.primary.base}",
+ "source": "$nav-inverse-pills-link-active-focus-border-color"
+ },
+ "focus-hover": {
+ "$value": "{color.nav.pills.inverse.link.border.active-focus}",
+ "source": "$nav-inverse-pills-link-active-focus-hover-border-color"
+ }
},
"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": {
+ "$value": "{color.nav.pills.inverse.link.border.base}",
+ "source": "$nav-inverse-pills-link-hover-bg"
+ },
+ "active": {
+ "$value": "{color.nav.pills.inverse.link.text.base}",
+ "source": "$nav-inverse-pills-link-active-bg"
+ },
+ "active-hover": {
+ "$value": "{color.nav.pills.inverse.link.border.base}",
+ "source": "$nav-inverse-pills-link-active-hover-bg"
+ },
+ "active-focus-hover": {
+ "$value": "{color.nav.pills.inverse.link.text.base}",
+ "source": "$nav-inverse-pills-link-active-focus-hover-bg"
+ }
}
},
"tab-content-color": {
- "source": "$nav-inverse-pills-tab-content-color",
- "$value": "{color.nav.pills.inverse.link.text.base}"
+ "$value": "{color.nav.pills.inverse.link.text.base}",
+ "source": "$nav-inverse-pills-tab-content-color"
}
}
},
- "divider": { "source": "$nav-divider-color", "$value": "{color.gray.100}" },
+ "divider": {
+ "$value": "{color.gray.100}",
+ "source": "$nav-divider-color"
+ },
"dark": {
- "source": "$navbar-dark-color",
- "modify": [{ "type": "alpha", "amount": 0.5 }],
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.5
+ }
+ ],
+ "source": "$navbar-dark-color"
},
"light": {
- "source": "$navbar-light-color",
- "modify": [{ "type": "alpha", "amount": 0.5 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.5
+ }
+ ],
+ "source": "$navbar-light-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Navbar.json b/tokens/src/themes/light/components/Navbar.json
index 5b157599c3..db4eae3396 100644
--- a/tokens/src/themes/light/components/Navbar.json
+++ b/tokens/src/themes/light/components/Navbar.json
@@ -4,64 +4,124 @@
"navbar": {
"dark": {
"text": {
- "source": "$navbar-dark-color",
- "modify": [{ "type": "alpha", "amount": 0.5 }],
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.5
+ }
+ ],
+ "source": "$navbar-dark-color"
},
"hover": {
- "source": "$navbar-dark-hover-color",
- "modify": [{ "type": "alpha", "amount": 0.75 }],
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.75
+ }
+ ],
+ "source": "$navbar-dark-hover-color"
+ },
+ "active": {
+ "$value": "{color.active}",
+ "source": "$navbar-dark-active-color"
},
- "active": { "source": "$navbar-dark-active-color", "$value": "{color.active}" },
"disabled": {
- "source": "$navbar-dark-disabled-color",
- "modify": [{ "type": "alpha", "amount": 0.25 }],
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.25
+ }
+ ],
+ "source": "$navbar-dark-disabled-color"
},
"toggler": {
"border": {
- "source": "$navbar-dark-toggler-border-color",
- "modify": [{ "type": "alpha", "amount": 0.1 }],
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.1
+ }
+ ],
+ "source": "$navbar-dark-toggler-border-color"
}
},
"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": {
+ "$value": "{color.navbar.dark.active}",
+ "source": "$navbar-dark-brand-color"
+ },
+ "hover": {
+ "$value": "{color.navbar.dark.active}",
+ "source": "$navbar-dark-brand-hover-color"
+ }
}
},
"light": {
"text": {
- "source": "$navbar-light-color",
- "modify": [{ "type": "alpha", "amount": 0.5 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.5
+ }
+ ],
+ "source": "$navbar-light-color"
},
"hover": {
- "source": "$navbar-light-hover-color",
- "modify": [{ "type": "alpha", "amount": 0.7 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.7
+ }
+ ],
+ "source": "$navbar-light-hover-color"
},
"active": {
- "source": "$navbar-light-active-color",
- "modify": [{ "type": "alpha", "amount": 0.9 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.9
+ }
+ ],
+ "source": "$navbar-light-active-color"
},
"disabled": {
- "source": "$navbar-light-disabled-color",
- "modify": [{ "type": "alpha", "amount": 0.3 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.3
+ }
+ ],
+ "source": "$navbar-light-disabled-color"
},
"toggler": {
"border": {
- "source": "$navbar-light-toggler-border-color",
- "modify": [{ "type": "alpha", "amount": 0.1 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.1
+ }
+ ],
+ "source": "$navbar-light-toggler-border-color"
}
},
"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": {
+ "$value": "{color.navbar.light.active}",
+ "source": "$navbar-light-brand-color"
+ },
+ "hover": {
+ "$value": "{color.navbar.light.active}",
+ "source": "$navbar-light-brand-hover-color"
+ }
}
}
}
@@ -72,18 +132,30 @@
"toggler": {
"dark": {
"icon-bg": {
- "source": "$navbar-dark-toggler-icon-bg",
+ "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")",
"outputReferences": false,
- "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\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$navbar-dark-toggler-icon-bg"
}
},
"light": {
"icon-bg": {
- "source": "$navbar-light-toggler-icon-bg",
+ "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")",
"outputReferences": false,
- "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\")"
+ "modify": [
+ {
+ "type": "str-replace",
+ "toReplace": "#",
+ "replaceWith": "%23"
+ }
+ ],
+ "source": "$navbar-light-toggler-icon-bg"
}
}
}
diff --git a/tokens/src/themes/light/components/OverflowScroll.json b/tokens/src/themes/light/components/OverflowScroll.json
index d02b743145..9be47e9dfc 100644
--- a/tokens/src/themes/light/components/OverflowScroll.json
+++ b/tokens/src/themes/light/components/OverflowScroll.json
@@ -3,8 +3,8 @@
"$type": "color",
"overflow-scroll": {
"opacity-mask-transparent": {
- "source": "$overflow-scroll-opacity-mask-transparent",
- "$value": "rgba(0, 0, 0, .4)"
+ "$value": "rgba(0, 0, 0, .4)",
+ "source": "$overflow-scroll-opacity-mask-transparent"
}
}
}
diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json
index d879de7302..73078a05df 100644
--- a/tokens/src/themes/light/components/Pagination.json
+++ b/tokens/src/themes/light/components/Pagination.json
@@ -3,30 +3,78 @@
"$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": {
+ "$value": "{color.link.base}",
+ "source": "$pagination-color"
+ },
+ "inverse": {
+ "$value": "{color.white}",
+ "source": "$pagination-color-inverse"
+ },
+ "hover": {
+ "$value": "{color.link.hover}",
+ "source": "$pagination-hover-color"
+ },
+ "active": {
+ "$value": "{color.active}",
+ "source": "$pagination-active-color"
+ },
+ "disabled": {
+ "$value": "{color.disabled}",
+ "source": "$pagination-disabled-color"
+ }
},
"bg": {
- "base": { "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": {
+ "$value": "{color.bg.base}",
+ "source": "$pagination-bg"
+ },
+ "hover": {
+ "$value": "{color.gray.100}",
+ "source": "$pagination-hover-bg"
+ },
+ "active": {
+ "$value": "{color.bg.active}",
+ "source": "$pagination-active-bg"
+ },
+ "disabled": {
+ "$value": "{color.white}",
+ "source": "$pagination-disabled-bg"
+ }
},
"border": {
- "base": { "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": {
+ "$value": "{color.gray.200}",
+ "source": "$pagination-border-color"
+ },
+ "hover": {
+ "$value": "{color.gray.200}",
+ "source": "$pagination-hover-border-color"
+ },
+ "active": {
+ "$value": "{color.pagination.bg.active}",
+ "source": "$pagination-active-border-color"
+ },
+ "disabled": {
+ "$value": "{color.gray.100}",
+ "source": "$pagination-disabled-border-color"
+ }
},
"focus": {
- "base": { "source": "$pagination-focus-color", "$value": "{color.primary.500}" },
- "text": { "source": "$pagination-focus-color-text", "$value": "{color.black}" }
+ "base": {
+ "$value": "{color.primary.500}",
+ "source": "$pagination-focus-color"
+ },
+ "text": {
+ "$value": "{color.black}",
+ "source": "$pagination-focus-color-text"
+ }
},
"dropdown": {
- "text-inverse": { "source": "$pagination-dropdown-color-inverse", "$value": "{color.white}" }
+ "text-inverse": {
+ "$value": "{color.white}",
+ "source": "$pagination-dropdown-color-inverse"
+ }
}
}
},
@@ -34,7 +82,10 @@
"$type": "shadow",
"pagination": {
"focus": {
- "box-shadow": { "source": "$pagination-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
+ "box-shadow": {
+ "$value": "{elevation.input.btn-focus.box-shadow}",
+ "source": "$pagination-focus-box-shadow"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json
index 0741490cfc..1f78370403 100644
--- a/tokens/src/themes/light/components/Popover.json
+++ b/tokens/src/themes/light/components/Popover.json
@@ -2,49 +2,103 @@
"color": {
"$type": "color",
"popover": {
- "bg": { "source": "$popover-bg", "$value": "{color.bg.base}" },
- "border": { "source": "$popover-border-color", "$value": "rgba(0, 0, 0, .2)" },
+ "bg": {
+ "$value": "{color.bg.base}",
+ "source": "$popover-bg"
+ },
+ "border": {
+ "$value": "rgba(0, 0, 0, .2)",
+ "source": "$popover-border-color"
+ },
"header": {
- "text": { "source": "$popover-header-color", "$value": "{color.headings.base}" },
- "bg": { "source": "$popover-header-bg", "$value": "{color.white}" },
+ "text": {
+ "$value": "{color.headings.base}",
+ "source": "$popover-header-color"
+ },
+ "bg": {
+ "$value": "{color.white}",
+ "source": "$popover-header-bg"
+ },
"bg-dark": {
- "source": "$popover-header-bg-dark",
- "modify": [{ "type": "darken", "amount": 0.5 }],
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.5
+ }
+ ],
+ "source": "$popover-header-bg-dark"
},
"border-bottom-dark": {
- "source": "$popover-header-border-bottom-darken",
- "modify": [{ "type": "darken", "amount": 0.05 }],
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.05
+ }
+ ],
+ "source": "$popover-header-border-bottom-darken"
}
},
- "body": { "source": "$popover-body-color", "$value": "{color.body.base}" },
+ "body": {
+ "$value": "{color.body.base}",
+ "source": "$popover-body-color"
+ },
"arrow": {
- "base": { "source": "$popover-arrow-color", "$value": "{color.popover.bg}" },
+ "base": {
+ "$value": "{color.popover.bg}",
+ "source": "$popover-arrow-color"
+ },
"outer": {
- "source": "$popover-arrow-outer-color",
- "modify": [{ "type": "alpha", "amount": 0.05 }],
- "$value": "{color.popover.border}"
+ "$value": "{color.popover.border}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.05
+ }
+ ],
+ "source": "$popover-arrow-outer-color"
}
},
"success": {
- "bg": { "source": "$popover-success-bg", "$value": "{color.success.100}" },
- "icon": { "source": "$popover-success-icon-color", "$value": "{color.success.500}" }
+ "bg": {
+ "$value": "{color.success.100}",
+ "source": "$popover-success-bg"
+ },
+ "icon": {
+ "$value": "{color.success.500}",
+ "source": "$popover-success-icon-color"
+ }
},
"warning": {
- "bg": { "source": "$popover-warning-bg", "$value": "{color.warning.100}" },
- "icon": { "source": "$popover-warning-icon-color", "$value": "{color.warning.500}" }
+ "bg": {
+ "$value": "{color.warning.100}",
+ "source": "$popover-warning-bg"
+ },
+ "icon": {
+ "$value": "{color.warning.500}",
+ "source": "$popover-warning-icon-color"
+ }
},
"danger": {
- "bg": { "source": "$popover-danger-bg", "$value": "{color.danger.100}" },
- "icon": { "source": "$popover-danger-icon-color", "$value": "{color.danger.500}" }
+ "bg": {
+ "$value": "{color.danger.100}",
+ "source": "$popover-danger-bg"
+ },
+ "icon": {
+ "$value": "{color.danger.500}",
+ "source": "$popover-danger-icon-color"
+ }
}
}
},
"elevation": {
"$type": "shadow",
"popover": {
- "box-shadow": { "source": "$popover-box-shadow", "$value": "none" }
+ "box-shadow": {
+ "$value": "none",
+ "source": "$popover-box-shadow"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json
index 61b561110b..8ed3283277 100644
--- a/tokens/src/themes/light/components/ProductTour.json
+++ b/tokens/src/themes/light/components/ProductTour.json
@@ -3,19 +3,42 @@
"$type": "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": {
+ "$value": "{color.light.300}",
+ "source": "$checkpoint-background-color"
+ },
+ "body": {
+ "$value": "{color.gray.700}",
+ "source": "$checkpoint-body-color"
+ },
+ "border": {
+ "$value": "{color.brand.base}",
+ "source": "$checkpoint-border-color"
+ },
+ "breadcrumb": {
+ "$value": "{color.primary.base}",
+ "source": "$checkpoint-breadcrumb-color"
+ },
"box-shadow": {
- "source": "$checkpoint-box-shadow-color",
- "modify": [{ "type": "alpha", "amount": 0.3 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.3
+ }
+ ],
+ "source": "$checkpoint-box-shadow-color"
},
"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": {
+ "$value": "{color.product-tour.checkpoint.bg}",
+ "source": "$checkpoint-arrow-border-top-color"
+ },
+ "transparent": {
+ "$value": "transparent",
+ "source": "$checkpoint-arrow-border-color-transparent"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json
index 81e1f9c36c..7340593fbf 100644
--- a/tokens/src/themes/light/components/ProgressBar.json
+++ b/tokens/src/themes/light/components/ProgressBar.json
@@ -2,21 +2,39 @@
"color": {
"$type": "color",
"progress-bar": {
- "base": { "source": "$progress-bar-color", "$value": "{color.white}" },
+ "base": {
+ "$value": "{color.white}",
+ "source": "$progress-bar-color"
+ },
"bg": {
- "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" },
- "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" }
+ "base": {
+ "$value": "{color.accent.a}",
+ "source": "$progress-bar-bg"
+ },
+ "annotated": {
+ "$value": "{color.dark.500}",
+ "source": "$annotated-progress-bar-bg"
+ }
},
- "border": { "source": "$progress-bar-border-color", "$value": "{color.gray.500}" }
+ "border": {
+ "$value": "{color.gray.500}",
+ "source": "$progress-bar-border-color"
+ }
},
"progress": {
- "bg": { "source": "$progress-bg", "$value": "transparent" }
+ "bg": {
+ "$value": "transparent",
+ "source": "$progress-bg"
+ }
}
},
"elevation": {
"$type": "shadow",
"progress-bar": {
- "box-shadow": { "source": "$progress-box-shadow", "$value": "none" }
+ "box-shadow": {
+ "$value": "none",
+ "source": "$progress-box-shadow"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Scrollable.json b/tokens/src/themes/light/components/Scrollable.json
index 87da8f709c..b592ebe764 100644
--- a/tokens/src/themes/light/components/Scrollable.json
+++ b/tokens/src/themes/light/components/Scrollable.json
@@ -4,9 +4,14 @@
"scrollable": {
"body": {
"box-shadow": {
- "source": "$scrollable-body-box-shadow",
- "modify": [{ "type": "alpha", "amount": 0.55 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.55
+ }
+ ],
+ "source": "$scrollable-body-box-shadow"
}
}
}
diff --git a/tokens/src/themes/light/components/SearchField.json b/tokens/src/themes/light/components/SearchField.json
index 8df063f176..079aa50c49 100644
--- a/tokens/src/themes/light/components/SearchField.json
+++ b/tokens/src/themes/light/components/SearchField.json
@@ -3,23 +3,44 @@
"$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": {
+ "$value": "{color.gray.500}",
+ "source": "$search-border-color"
+ },
+ "interaction": {
+ "$value": "{color.black}",
+ "source": "$search-border-color-interaction"
+ },
+ "focus": {
+ "$value": "{color.black}",
+ "source": "$search-border-focus-color"
+ }
},
"button": {
"bg": {
- "primary": { "source": "$search-btn-primary-bg", "$value": "{color.primary.500}" },
- "brand": { "source": "$search-btn-brand-bg", "$value": "{color.brand.500}" }
+ "primary": {
+ "$value": "{color.primary.500}",
+ "source": "$search-btn-primary-bg"
+ },
+ "brand": {
+ "$value": "{color.brand.500}",
+ "source": "$search-btn-brand-bg"
+ }
}
},
- "form-bg": { "source": "$search-form-background-color", "$value": "{color.white}" }
+ "form-bg": {
+ "$value": "{color.white}",
+ "source": "$search-form-background-color"
+ }
}
},
"other": {
"$type": "ratio",
"search-field": {
- "disabled-opacity": { "source": "$search-disabled-opacity", "$value": ".3" }
+ "disabled-opacity": {
+ "$value": ".3",
+ "source": "$search-disabled-opacity"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/Sheet.json b/tokens/src/themes/light/components/Sheet.json
index 9084a8eb52..ddac166dbe 100644
--- a/tokens/src/themes/light/components/Sheet.json
+++ b/tokens/src/themes/light/components/Sheet.json
@@ -4,15 +4,25 @@
"sheet": {
"skrim": {
"bg": {
- "source": "$sheet-skrim-bg",
- "modify": [{ "type": "alpha", "amount": 0.5 }],
- "$value": "{color.gray.300}"
+ "$value": "{color.gray.300}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.5
+ }
+ ],
+ "source": "$sheet-skrim-bg"
},
"component": {
"box-shadow": {
- "source": "$sheet-skrim-component-box-shadow",
- "modify": [{ "type": "alpha", "amount": 0.15 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.15
+ }
+ ],
+ "source": "$sheet-skrim-component-box-shadow"
}
}
}
diff --git a/tokens/src/themes/light/components/Stepper.json b/tokens/src/themes/light/components/Stepper.json
index eeb118dec2..08a4be2539 100644
--- a/tokens/src/themes/light/components/Stepper.json
+++ b/tokens/src/themes/light/components/Stepper.json
@@ -4,23 +4,41 @@
"stepper": {
"header": {
"bg": {
- "base": { "source": "$stepper-header-bg", "$value": "transparent" },
- "line": { "source": "$stepper-header-line-bg", "$value": "{color.light.base}" }
+ "base": {
+ "$value": "transparent",
+ "source": "$stepper-header-bg"
+ },
+ "line": {
+ "$value": "{color.light.base}",
+ "source": "$stepper-header-line-bg"
+ }
},
"step": {
- "base": { "source": "$stepper-header-step-color", "$value": "{color.primary.base}" },
+ "base": {
+ "$value": "{color.primary.base}",
+ "source": "$stepper-header-step-color"
+ },
"bg": {
- "base": { "source": "$stepper-header-step-bg", "$value": "{color.stepper.header.bg.base}" },
- "active": { "source": "$stepper-header-active-step-bg", "$value": "{color.gray.500}" }
+ "base": {
+ "$value": "{color.stepper.header.bg.base}",
+ "source": "$stepper-header-step-bg"
+ },
+ "active": {
+ "$value": "{color.gray.500}",
+ "source": "$stepper-header-active-step-bg"
+ }
+ },
+ "border": {
+ "$value": "none",
+ "source": "$stepper-header-step-border"
},
- "border": { "source": "$stepper-header-step-border", "$value": "none" },
"bubble-error": {
- "source": "$stepper-header-step-error-bubble-color",
- "$value": "{color.danger.base}"
+ "$value": "{color.danger.base}",
+ "source": "$stepper-header-step-error-bubble-color"
},
"description-error": {
- "source": "$stepper-header-step-error-description-color",
- "$value": "{color.stepper.header.step.bubble-error}"
+ "$value": "{color.stepper.header.step.bubble-error}",
+ "source": "$stepper-header-step-error-description-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Sticky.json b/tokens/src/themes/light/components/Sticky.json
index 6fe18059fe..7aef2f37cb 100644
--- a/tokens/src/themes/light/components/Sticky.json
+++ b/tokens/src/themes/light/components/Sticky.json
@@ -4,7 +4,6 @@
"sticky": {
"shadow": {
"top": {
- "source": "$sticky-shadow-top",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -18,10 +17,10 @@
"offsetY": "-.25rem",
"blur": ".625rem"
}
- ]
+ ],
+ "source": "$sticky-shadow-top"
},
"bottom": {
- "source": "$sticky-shadow-bottom",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -35,7 +34,8 @@
"offsetY": ".25rem",
"blur": ".625rem"
}
- ]
+ ],
+ "source": "$sticky-shadow-bottom"
}
}
}
diff --git a/tokens/src/themes/light/components/Tab.json b/tokens/src/themes/light/components/Tab.json
index 5e7c601ff2..d76ef9c616 100644
--- a/tokens/src/themes/light/components/Tab.json
+++ b/tokens/src/themes/light/components/Tab.json
@@ -6,77 +6,77 @@
"btn": {
"text": {
"focus": {
- "source": "$tab-more-link-dropdown-toggle-btn-focus-color",
- "$value": "{color.tab.more-link-dropdown-toggle.text.focus}"
+ "$value": "{color.tab.more-link-dropdown-toggle.text.focus}",
+ "source": "$tab-more-link-dropdown-toggle-btn-focus-color"
}
},
"border": {
"focus": {
- "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color",
- "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+ "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}",
+ "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color"
}
}
},
"text": {
"focus": {
- "source": "$tab-more-link-dropdown-toggle-focus-color",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$tab-more-link-dropdown-toggle-focus-color"
},
"active": {
- "source": "$tab-more-link-dropdown-toggle-active-color",
- "$value": "{color.tab.more-link-dropdown-toggle.text.focus}"
+ "$value": "{color.tab.more-link-dropdown-toggle.text.focus}",
+ "source": "$tab-more-link-dropdown-toggle-active-color"
},
"hover": {
- "source": "$tab-more-link-dropdown-toggle-hover-color",
- "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+ "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}",
+ "source": "$tab-more-link-dropdown-toggle-hover-color"
}
},
"bg": {
"focus": {
- "source": "$tab-more-link-dropdown-toggle-focus-bg",
- "$value": "{color.primary.500}"
+ "$value": "{color.primary.500}",
+ "source": "$tab-more-link-dropdown-toggle-focus-bg"
}
},
"border": {
"focus": {
- "source": "$tab-more-link-dropdown-toggle-focus-border-color",
- "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+ "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}",
+ "source": "$tab-more-link-dropdown-toggle-focus-border-color"
}
}
},
"inverse-pills-link-dropdown-toggle": {
"text": {
"focus": {
- "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color",
- "$value": "{color.primary.500}"
+ "$value": "{color.primary.500}",
+ "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color"
},
"active": {
- "source": "$tab-inverse-pills-link-dropdown-toggle-active-color",
- "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}"
+ "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}",
+ "source": "$tab-inverse-pills-link-dropdown-toggle-active-color"
},
"active-hover": {
- "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color",
- "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}"
+ "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
+ "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color"
}
},
"bg": {
"focus": {
- "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg",
- "$value": "{color.white}"
+ "$value": "{color.white}",
+ "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg"
},
"hover": {
- "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg",
- "$value": "transparent"
+ "$value": "transparent",
+ "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg"
},
"active-hover": {
- "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg",
- "$value": "{color.primary.300}"
+ "$value": "{color.primary.300}",
+ "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg"
}
},
"border": {
"focus": {
- "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color",
- "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}"
+ "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
+ "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color"
}
}
}
diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json
index 57f9d6d4d6..ff2f3dd376 100644
--- a/tokens/src/themes/light/components/Toast.json
+++ b/tokens/src/themes/light/components/Toast.json
@@ -2,20 +2,42 @@
"color": {
"$type": "color",
"toast": {
- "base": { "source": "$toast-color", "$value": "inherit" },
- "bg": { "source": "$toast-background-color", "$value": "{color.gray.700}" },
+ "base": {
+ "$value": "inherit",
+ "source": "$toast-color"
+ },
+ "bg": {
+ "$value": "{color.gray.700}",
+ "source": "$toast-background-color"
+ },
"border": {
- "source": "$toast-border-color",
- "modify": [{ "type": "alpha", "amount": 0.1 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.1
+ }
+ ],
+ "source": "$toast-border-color"
},
"header": {
- "text": { "source": "$toast-header-color", "$value": "{color.white}" },
- "bg": { "source": "$toast-header-background-color", "$value": "{color.gray.700}" },
+ "text": {
+ "$value": "{color.white}",
+ "source": "$toast-header-color"
+ },
+ "bg": {
+ "$value": "{color.gray.700}",
+ "source": "$toast-header-background-color"
+ },
"border": {
- "source": "$toast-header-border-color",
- "modify": [{ "type": "alpha", "amount": 0.5 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.5
+ }
+ ],
+ "source": "$toast-header-border-color"
}
}
}
@@ -24,7 +46,6 @@
"$type": "shadow",
"toast": {
"box-shadow": {
- "source": "$toast-box-shadow",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -38,7 +59,8 @@
"offsetY": ".5rem",
"blur": "3rem"
}
- ]
+ ],
+ "source": "$toast-box-shadow"
}
}
}
diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json
index 7336e557a3..763359e1e1 100644
--- a/tokens/src/themes/light/components/Tooltip.json
+++ b/tokens/src/themes/light/components/Tooltip.json
@@ -2,15 +2,33 @@
"color": {
"$type": "color",
"tooltip": {
- "text": { "source": "$tooltip-color", "$value": "{color.white}" },
- "light": { "source": "$tooltip-color-light", "$value": "{color.black}" },
+ "text": {
+ "$value": "{color.white}",
+ "source": "$tooltip-color"
+ },
+ "light": {
+ "$value": "{color.black}",
+ "source": "$tooltip-color-light"
+ },
"bg": {
- "base": { "source": "$tooltip-bg", "$value": "{color.black}" },
- "light": { "source": "$tooltip-bg-light", "$value": "{color.white}" }
+ "base": {
+ "$value": "{color.black}",
+ "source": "$tooltip-bg"
+ },
+ "light": {
+ "$value": "{color.white}",
+ "source": "$tooltip-bg-light"
+ }
},
"arrow": {
- "base": { "source": "$tooltip-arrow-color", "$value": "{color.tooltip.bg.base}" },
- "light": { "source": "$tooltip-arrow-color-light", "$value": "{color.white}" }
+ "base": {
+ "$value": "{color.tooltip.bg.base}",
+ "source": "$tooltip-arrow-color"
+ },
+ "light": {
+ "$value": "{color.white}",
+ "source": "$tooltip-arrow-color-light"
+ }
}
}
},
@@ -18,7 +36,6 @@
"$type": "shadow",
"tooltip": {
"box-shadow": {
- "source": "$tooltip-box-shadow",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -32,14 +49,18 @@
"offsetY": "2px",
"blur": "8px"
}
- ]
+ ],
+ "source": "$tooltip-box-shadow"
}
}
},
"other": {
"$type": "ratio",
"tooltip": {
- "opacity": { "source": "$tooltip-opacity", "$value": "1" }
+ "opacity": {
+ "$value": "1",
+ "source": "$tooltip-opacity"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/general/body.json b/tokens/src/themes/light/components/general/body.json
index f894be2efe..c0c6c86776 100644
--- a/tokens/src/themes/light/components/general/body.json
+++ b/tokens/src/themes/light/components/general/body.json
@@ -2,8 +2,14 @@
"color": {
"$type": "color",
"body": {
- "base": { "source": "$body-color", "$value": "{color.gray.700}" },
- "bg": { "source": "$body-bg", "$value": "{color.bg.base}" }
+ "base": {
+ "$value": "{color.gray.700}",
+ "source": "$body-color"
+ },
+ "bg": {
+ "$value": "{color.bg.base}",
+ "source": "$body-bg"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json
index 755ccf7fd9..28d52f4496 100644
--- a/tokens/src/themes/light/components/general/headings.json
+++ b/tokens/src/themes/light/components/general/headings.json
@@ -2,7 +2,10 @@
"color": {
"$type": "color",
"headings": {
- "base": { "source": "$headings-color", "$value": "{color.black}" }
+ "base": {
+ "$value": "{color.black}",
+ "source": "$headings-color"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/general/hr.json b/tokens/src/themes/light/components/general/hr.json
index 2d5ad16dbf..8ef2e5c9b9 100644
--- a/tokens/src/themes/light/components/general/hr.json
+++ b/tokens/src/themes/light/components/general/hr.json
@@ -3,9 +3,14 @@
"$type": "color",
"hr": {
"border": {
- "source": "$hr-border-color",
- "modify": [{ "type": "alpha", "amount": 0.1 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.1
+ }
+ ],
+ "source": "$hr-border-color"
}
}
}
diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json
index 424b099dbb..e3d60d85f5 100644
--- a/tokens/src/themes/light/components/general/input.json
+++ b/tokens/src/themes/light/components/general/input.json
@@ -2,7 +2,10 @@
"color": {
"$type": "color",
"input": {
- "btn-focus": { "source": "$input-btn-focus-color", "$value": "{color.bg.active}" }
+ "btn-focus": {
+ "$value": "{color.bg.active}",
+ "source": "$input-btn-focus-color"
+ }
}
},
"elevation": {
@@ -10,14 +13,14 @@
"input": {
"btn-focus": {
"box-shadow": {
- "source": "$input-btn-focus-box-shadow",
"$value": {
"color": "{color.input.btn-focus}",
"spread": "{size.input.btn.focus-width}",
"offsetX": "0",
"offsetY": "0",
"blur": "0"
- }
+ },
+ "source": "$input-btn-focus-box-shadow"
}
}
}
diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json
index 3669afa336..d80162cd55 100644
--- a/tokens/src/themes/light/components/general/link.json
+++ b/tokens/src/themes/light/components/general/link.json
@@ -2,84 +2,162 @@
"color": {
"$type": "color",
"link": {
- "base": { "source": "$link-color", "$value": "{color.info.500}" },
+ "base": {
+ "$value": "{color.info.500}",
+ "source": "$link-color"
+ },
"hover": {
- "source": "$link-hover-color",
- "modify": [{ "type": "darken", "amount": 0.15 }],
- "$value": "{color.link.base}"
+ "$value": "{color.link.base}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.15
+ }
+ ],
+ "source": "$link-hover-color"
},
"inline": {
- "base": { "source": "$inline-link-color", "$value": "{color.info.500}" },
+ "base": {
+ "$value": "{color.info.500}",
+ "source": "$inline-link-color"
+ },
"decoration": {
- "source": "$inline-link-decoration-color",
- "modify": [{ "type": "alpha", "amount": 0.3 }],
- "$value": "{color.link.inline.base}"
+ "$value": "{color.link.inline.base}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.3
+ }
+ ],
+ "source": "$inline-link-decoration-color"
},
"hover": {
"base": {
- "source": "$inline-link-hover-color",
- "modify": [{ "type": "darken", "amount": 0.15 }],
- "$value": "{color.link.inline.base}"
+ "$value": "{color.link.inline.base}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.15
+ }
+ ],
+ "source": "$inline-link-hover-color"
},
"decoration": {
- "source": "$inline-link-hover-decoration-color",
- "modify": [{ "type": "alpha", "amount": 1 }],
- "$value": "{color.link.inline.hover.base}"
+ "$value": "{color.link.inline.hover.base}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 1
+ }
+ ],
+ "source": "$inline-link-hover-decoration-color"
}
}
},
"muted": {
- "base": { "source": "$muted-link-color", "$value": "{color.primary.500}" },
+ "base": {
+ "$value": "{color.primary.500}",
+ "source": "$muted-link-color"
+ },
"hover": {
- "source": "$muted-link-hover-color",
- "modify": [{ "type": "darken", "amount": 0.15 }],
- "$value": "{color.link.muted.base}"
+ "$value": "{color.link.muted.base}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.15
+ }
+ ],
+ "source": "$muted-link-hover-color"
},
"inline": {
- "base": { "source": "$muted-inline-link-color", "$value": "{color.primary.500}" },
+ "base": {
+ "$value": "{color.primary.500}",
+ "source": "$muted-inline-link-color"
+ },
"decoration": {
- "source": "$muted-inline-link-decoration-color",
- "modify": [{ "type": "alpha", "amount": 0.3 }],
- "$value": "{color.link.muted.inline.base}"
+ "$value": "{color.link.muted.inline.base}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.3
+ }
+ ],
+ "source": "$muted-inline-link-decoration-color"
},
"hover": {
"base": {
- "source": "$muted-inline-link-hover-color",
- "modify": [{ "type": "darken", "amount": 0.15 }],
- "$value": "{color.link.muted.inline.base}"
+ "$value": "{color.link.muted.inline.base}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.15
+ }
+ ],
+ "source": "$muted-inline-link-hover-color"
},
"decoration": {
- "source": "$muted-inline-link-hover-decoration-color",
- "modify": [{ "type": "alpha", "amount": 1 }],
- "$value": "{color.link.muted.inline.hover.base}"
+ "$value": "{color.link.muted.inline.hover.base}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 1
+ }
+ ],
+ "source": "$muted-inline-link-hover-decoration-color"
}
}
}
},
"brand": {
- "base": { "source": "$brand-link-color", "$value": "{color.brand.500}" },
+ "base": {
+ "$value": "{color.brand.500}",
+ "source": "$brand-link-color"
+ },
"hover": {
- "source": "$brand-link-hover-color",
- "modify": [{ "type": "darken", "amount": 0.15 }],
- "$value": "{color.link.brand.base}"
+ "$value": "{color.link.brand.base}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.15
+ }
+ ],
+ "source": "$brand-link-hover-color"
},
"inline": {
- "base": { "source": "$brand-inline-link-color", "$value": "{color.brand.500}" },
+ "base": {
+ "$value": "{color.brand.500}",
+ "source": "$brand-inline-link-color"
+ },
"decoration": {
- "source": "$brand-inline-link-decoration-color",
- "modify": [{ "type": "alpha", "amount": 0.3 }],
- "$value": "{color.link.brand.inline.base}"
+ "$value": "{color.link.brand.inline.base}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.3
+ }
+ ],
+ "source": "$brand-inline-link-decoration-color"
},
"hover": {
"base": {
- "source": "$brand-inline-link-hover-color",
- "modify": [{ "type": "darken", "amount": 0.15 }],
- "$value": "{color.link.brand.inline.base}"
+ "$value": "{color.link.brand.inline.base}",
+ "modify": [
+ {
+ "type": "darken",
+ "amount": 0.15
+ }
+ ],
+ "source": "$brand-inline-link-hover-color"
},
"decoration": {
- "source": "$brand-inline-link-hover-decoration-color",
- "modify": [{ "type": "alpha", "amount": 1 }],
- "$value": "{color.link.brand.inline.hover.base}"
+ "$value": "{color.link.brand.inline.hover.base}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 1
+ }
+ ],
+ "source": "$brand-inline-link-hover-decoration-color"
}
}
}
@@ -91,8 +169,8 @@
"link": {
"emphasized-hover": {
"darken-percentage": {
- "source": "$emphasized-link-hover-darken-percentage",
- "$value": "15%"
+ "$value": "15%",
+ "source": "$emphasized-link-hover-darken-percentage"
}
}
}
diff --git a/tokens/src/themes/light/components/general/list.json b/tokens/src/themes/light/components/general/list.json
index 85059c7369..5cdd00bc67 100644
--- a/tokens/src/themes/light/components/general/list.json
+++ b/tokens/src/themes/light/components/general/list.json
@@ -2,31 +2,72 @@
"color": {
"$type": "color",
"list-group": {
- "base": { "source": "$list-group-color", "$value": "inherit" },
+ "base": {
+ "$value": "inherit",
+ "source": "$list-group-color"
+ },
"bg": {
- "base": { "source": "$list-group-bg", "$value": "{color.white}" },
- "hover": { "source": "$list-group-hover-bg", "$value": "{color.gray.100}" }
+ "base": {
+ "$value": "{color.white}",
+ "source": "$list-group-bg"
+ },
+ "hover": {
+ "$value": "{color.gray.100}",
+ "source": "$list-group-hover-bg"
+ }
},
"border": {
- "source": "$list-group-border-color",
- "modify": [{ "type": "alpha", "amount": 0.125 }],
- "$value": "{color.black}"
+ "$value": "{color.black}",
+ "modify": [
+ {
+ "type": "alpha",
+ "amount": 0.125
+ }
+ ],
+ "source": "$list-group-border-color"
},
"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": {
+ "$value": "{color.active}",
+ "source": "$list-group-active-color"
+ },
+ "border": {
+ "$value": "{color.list-group.active.bg}",
+ "source": "$list-group-active-border-color"
+ },
+ "bg": {
+ "$value": "{color.bg.active}",
+ "source": "$list-group-active-bg"
+ }
},
"disabled": {
- "base": { "source": "$list-group-disabled-color", "$value": "{color.gray.600}" },
- "bg": { "source": "$list-group-disabled-bg", "$value": "{color.list-group.bg.base}" }
+ "base": {
+ "$value": "{color.gray.600}",
+ "source": "$list-group-disabled-color"
+ },
+ "bg": {
+ "$value": "{color.list-group.bg.base}",
+ "source": "$list-group-disabled-bg"
+ }
},
"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": {
+ "$value": "{color.gray.700}",
+ "source": "$list-group-action-color"
+ },
+ "hover": {
+ "$value": "{color.list-group.action.base}",
+ "source": "$list-group-action-hover-color"
+ },
"active": {
- "base": { "source": "$list-group-action-active-color", "$value": "{color.body.base}" },
- "bg": { "source": "$list-group-action-active-bg", "$value": "{color.gray.200}" }
+ "base": {
+ "$value": "{color.body.base}",
+ "source": "$list-group-action-active-color"
+ },
+ "bg": {
+ "$value": "{color.gray.200}",
+ "source": "$list-group-action-active-bg"
+ }
}
}
}
diff --git a/tokens/src/themes/light/components/general/text.json b/tokens/src/themes/light/components/general/text.json
index af658a6d6b..6da6e32880 100644
--- a/tokens/src/themes/light/components/general/text.json
+++ b/tokens/src/themes/light/components/general/text.json
@@ -1,11 +1,23 @@
{
"color": {
"$type": "color",
- "text-muted": { "source": "$text-muted", "$value": "{color.gray.500}" },
- "mark-bg": { "source": "$mark-bg", "$value": "#FFF243" },
+ "text-muted": {
+ "$value": "{color.gray.500}",
+ "source": "$text-muted"
+ },
+ "mark-bg": {
+ "$value": "#FFF243",
+ "source": "$mark-bg"
+ },
"blockquote": {
- "small": { "source": "$blockquote-small-color", "$value": "{color.gray.500}" }
+ "small": {
+ "$value": "{color.gray.500}",
+ "source": "$blockquote-small-color"
+ }
},
- "yiq-light": { "source": "$yiq-text-light", "$value": "{color.white}" }
+ "yiq-light": {
+ "$value": "{color.white}",
+ "source": "$yiq-text-light"
+ }
}
}
diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json
index 5cc2c0c9b2..9b76a19ef1 100644
--- a/tokens/src/themes/light/global/color.json
+++ b/tokens/src/themes/light/global/color.json
@@ -2,143 +2,144 @@
"color": {
"$type": "color",
"white": {
- "source": "$white",
"$value": "#FFFFFF",
- "$description": "White color."
+ "$description": "White color.",
+ "source": "$white"
},
"black": {
- "source": "$black",
"$value": "#000000",
- "$description": "Black color."
+ "$description": "Black color.",
+ "source": "$black"
},
"blue": {
- "source": "$blue",
"$value": "#23419F",
- "$description": "Blue color."
+ "$description": "Blue color.",
+ "source": "$blue"
},
"red": {
- "source": "$red",
"$value": "#C32D3A",
- "$description": "Red color."
+ "$description": "Red color.",
+ "source": "$red"
},
"green": {
- "source": "$green",
"$value": "#178253",
- "$description": "Green color."
+ "$description": "Green color.",
+ "source": "$green"
},
"yellow": {
- "source": "$yellow",
"$value": "#FFD900",
- "$description": "Yellow color."
+ "$description": "Yellow color.",
+ "source": "$yellow"
},
"teal": {
- "source": "$teal",
"$value": "#006DAA",
- "$description": "Teal color."
+ "$description": "Teal color.",
+ "source": "$teal"
},
"accent": {
"a": {
+ "$value": "#00BBF9",
+ "$description": "Accent-A color.",
"source": "$accent-a",
"actions": {
"default": "{color.action.default.accent.a}"
- },
- "$value": "#00BBF9",
- "$description": "Accent-A color."
+ }
},
"b": {
+ "$value": "#FFEE88",
+ "$description": "Accent-B color.",
"source": "$accent-b",
"actions": {
"default": "{color.action.default.accent.b}"
- },
- "$value": "#FFEE88",
- "$description": "Accent-B color."
+ }
}
},
"gray": {
"100": {
+ "$value": "#EBEBEB",
+ "$description": "Gray color of level 100.",
"source": "$gray-100",
"actions": {
"default": "{color.action.default.gray.100}"
- },
- "$value": "#EBEBEB",
- "$description": "Gray color of level 100."
+ }
},
"200": {
+ "$value": "#CCCCCC",
+ "$description": "Gray color of level 200.",
"source": "$gray-200",
"actions": {
"default": "{color.action.default.gray.200}"
- },
- "$value": "#CCCCCC",
- "$description": "Gray color of level 200."
+ }
},
"300": {
+ "$value": "#ADADAD",
+ "$description": "Gray color of level 300.",
"source": "$gray-300",
"actions": {
"default": "{color.action.default.gray.300}"
- },
- "$value": "#ADADAD",
- "$description": "Gray color of level 300."
+ }
},
"400": {
+ "$value": "#8F8F8F",
+ "$description": "Gray color of level 400.",
"source": "$gray-400",
"actions": {
"default": "{color.action.default.gray.400}"
- },
- "$value": "#8F8F8F",
- "$description": "Gray color of level 400."
+ }
},
"500": {
+ "$value": "{color.gray.base}",
+ "$description": "Gray color of level 500.",
"source": "$gray-500",
"actions": {
"default": "{color.action.default.gray.500}"
- },
- "$value": "{color.gray.base}",
- "$description": "Gray color of level 500."
+ }
},
"600": {
+ "$value": "#5C5C5C",
+ "$description": "Gray color of level 600.",
"source": "$gray-600",
"actions": {
"default": "{color.action.default.gray.600}"
- },
- "$value": "#5C5C5C",
- "$description": "Gray color of level 600."
+ }
},
"700": {
+ "$value": "#454545",
+ "$description": "Gray color of level 700.",
"source": "$gray-700",
"actions": {
"default": "{color.action.default.gray.700}"
- },
- "$value": "#454545",
- "$description": "Gray color of level 700."
+ }
},
"800": {
+ "$value": "#333333",
+ "$description": "Gray color of level 800.",
"source": "$gray-800",
"actions": {
"default": "{color.action.default.gray.800}"
- },
- "$value": "#333333",
- "$description": "Gray color of level 800."
+ }
},
"900": {
+ "$value": "#212529",
+ "$description": "Gray color of level 900.",
"source": "$gray-900",
"actions": {
"default": "{color.action.default.gray.900}"
- },
- "$value": "#212529",
- "$description": "Gray color of level 900."
+ }
},
"base": {
+ "$value": "#707070",
+ "$description": "Basic gray color.",
"source": "$gray",
"actions": {
"default": "{color.action.default.gray.base}"
- },
- "$value": "#707070",
- "$description": "Basic gray color."
+ }
}
},
"primary": {
"100": {
- "source": "$primary-100",
+ "$value": "{color.primary.base}",
+ "$description": "Primary color of level 100.",
"modify": [
{
"type": "mix",
@@ -146,14 +147,14 @@
"amount": "0.94"
}
],
+ "source": "$primary-100",
"actions": {
"default": "{color.action.default.primary.100}"
- },
- "$value": "{color.primary.base}",
- "$description": "Primary color of level 100."
+ }
},
"200": {
- "source": "$primary-200",
+ "$value": "{color.primary.base}",
+ "$description": "Primary color of level 200.",
"modify": [
{
"type": "mix",
@@ -161,14 +162,14 @@
"amount": "0.75"
}
],
+ "source": "$primary-200",
"actions": {
"default": "{color.action.default.primary.200}"
- },
- "$value": "{color.primary.base}",
- "$description": "Primary color of level 200."
+ }
},
"300": {
- "source": "$primary-300",
+ "$value": "{color.primary.base}",
+ "$description": "Primary color of level 300.",
"modify": [
{
"type": "mix",
@@ -176,14 +177,14 @@
"amount": "0.50"
}
],
+ "source": "$primary-300",
"actions": {
"default": "{color.action.default.primary.300}"
- },
- "$value": "{color.primary.base}",
- "$description": "Primary color of level 300."
+ }
},
"400": {
- "source": "$primary-400",
+ "$value": "{color.primary.base}",
+ "$description": "Primary color of level 400.",
"modify": [
{
"type": "mix",
@@ -191,95 +192,137 @@
"amount": "0.25"
}
],
+ "source": "$primary-400",
"actions": {
"default": "{color.action.default.primary.400}"
- },
- "$value": "{color.primary.base}",
- "$description": "Primary color of level 400."
+ }
},
"500": {
+ "$value": "{color.primary.base}",
+ "$description": "Primary color of level 500.",
"source": "$primary-500",
"actions": {
"default": "{color.action.default.primary.500}"
- },
- "$value": "{color.primary.base}",
- "$description": "Primary color of level 500."
+ }
},
"600": {
+ "$value": "{color.primary.base}",
+ "$description": "Primary color of level 600.",
+ "modify": [
+ {
+ "type": "mix",
+ "otherColor": "black",
+ "amount": "0.10"
+ }
+ ],
"source": "$primary-600",
- "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
"actions": {
"default": "{color.action.default.primary.600}"
- },
- "$value": "{color.primary.base}",
- "$description": "Primary color of level 600."
+ }
},
"700": {
+ "$value": "{color.primary.base}",
+ "$description": "Primary color of level 700.",
+ "modify": [
+ {
+ "type": "mix",
+ "otherColor": "black",
+ "amount": "0.20"
+ }
+ ],
"source": "$primary-700",
- "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
"actions": {
"default": "{color.action.default.primary.700}"
- },
- "$value": "{color.primary.base}",
- "$description": "Primary color of level 700."
+ }
},
"800": {
+ "$value": "{color.primary.base}",
+ "$description": "Primary color of level 800.",
+ "modify": [
+ {
+ "type": "mix",
+ "otherColor": "black",
+ "amount": "0.25"
+ }
+ ],
"source": "$primary-800",
- "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
"actions": {
"default": "{color.action.default.primary.800}"
- },
- "$value": "{color.primary.base}",
- "$description": "Primary color of level 800."
+ }
},
"900": {
+ "$value": "{color.primary.base}",
+ "$description": "Primary color of level 900.",
+ "modify": [
+ {
+ "type": "mix",
+ "otherColor": "black",
+ "amount": "0.30"
+ }
+ ],
"source": "$primary-900",
- "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
"actions": {
"default": "{color.action.default.primary.900}"
- },
- "$value": "{color.primary.base}",
- "$description": "Primary color of level 900."
+ }
},
"base": {
+ "$value": "#0A3055",
+ "$description": "Basic primary color.",
"source": "$primary",
"actions": {
"default": "{color.action.default.primary.base}"
- },
- "$value": "#0A3055",
- "$description": "Basic primary color."
+ }
}
},
"secondary": {
"100": {
+ "$value": "{color.secondary.base}",
+ "$description": "Secondary color of level 100.",
+ "modify": [
+ {
+ "type": "mix",
+ "otherColor": "white",
+ "amount": "0.94"
+ }
+ ],
"source": "$secondary-100",
- "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
"actions": {
"default": "{color.action.default.secondary.100}"
- },
- "$value": "{color.secondary.base}",
- "$description": "Secondary color of level 100."
+ }
},
"200": {
+ "$value": "{color.secondary.base}",
+ "$description": "Secondary color of level 200.",
+ "modify": [
+ {
+ "type": "mix",
+ "otherColor": "white",
+ "amount": "0.75"
+ }
+ ],
"source": "$secondary-200",
- "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
"actions": {
"default": "{color.action.default.secondary.200}"
- },
- "$value": "{color.secondary.base}",
- "$description": "Secondary color of level 200."
+ }
},
"300": {
+ "$value": "{color.secondary.base}",
+ "$description": "Secondary color of level 300.",
+ "modify": [
+ {
+ "type": "mix",
+ "otherColor": "white",
+ "amount": "0.50"
+ }
+ ],
"source": "$secondary-300",
- "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
"actions": {
"default": "{color.action.default.secondary.300}"
- },
- "$value": "{color.secondary.base}",
- "$description": "Secondary color of level 300."
+ }
},
"400": {
- "source": "$secondary-400",
+ "$value": "{color.secondary.base}",
+ "$description": "Secondary color of level 400.",
"modify": [
{
"type": "mix",
@@ -287,22 +330,22 @@
"amount": "0.25"
}
],
+ "source": "$secondary-400",
"actions": {
"default": "{color.action.default.secondary.400}"
- },
- "$value": "{color.secondary.base}",
- "$description": "Secondary color of level 400."
+ }
},
"500": {
+ "$value": "{color.secondary.base}",
+ "$description": "Secondary color of level 500.",
"source": "$secondary-500",
"actions": {
"default": "{color.action.default.secondary.500}"
- },
- "$value": "{color.secondary.base}",
- "$description": "Secondary color of level 500."
+ }
},
"600": {
- "source": "$secondary-600",
+ "$value": "{color.secondary.base}",
+ "$description": "Secondary color of level 600.",
"modify": [
{
"type": "mix",
@@ -310,14 +353,14 @@
"amount": "0.10"
}
],
+ "source": "$secondary-600",
"actions": {
"default": "{color.action.default.secondary.600}"
- },
- "$value": "{color.secondary.base}",
- "$description": "Secondary color of level 600."
+ }
},
"700": {
- "source": "$secondary-700",
+ "$value": "{color.secondary.base}",
+ "$description": "Secondary color of level 700.",
"modify": [
{
"type": "mix",
@@ -325,14 +368,14 @@
"amount": "0.20"
}
],
+ "source": "$secondary-700",
"actions": {
"default": "{color.action.default.secondary.700}"
- },
- "$value": "{color.secondary.base}",
- "$description": "Secondary color of level 700."
+ }
},
"800": {
- "source": "$secondary-800",
+ "$value": "{color.secondary.base}",
+ "$description": "Secondary color of level 800.",
"modify": [
{
"type": "mix",
@@ -340,14 +383,14 @@
"amount": "0.25"
}
],
+ "source": "$secondary-800",
"actions": {
"default": "{color.action.default.secondary.800}"
- },
- "$value": "{color.secondary.base}",
- "$description": "Secondary color of level 800."
+ }
},
"900": {
- "source": "$secondary-900",
+ "$value": "{color.secondary.base}",
+ "$description": "Secondary color of level 900.",
"modify": [
{
"type": "mix",
@@ -355,24 +398,24 @@
"amount": "0.30"
}
],
+ "source": "$secondary-900",
"actions": {
"default": "{color.action.default.secondary.900}"
- },
- "$value": "{color.secondary.base}",
- "$description": "Secondary color of level 900."
+ }
},
"base": {
+ "$value": "{color.gray.700}",
+ "$description": "Basic secondary color.",
"source": "$secondary",
"actions": {
"default": "{color.action.default.secondary.base}"
- },
- "$value": "{color.gray.700}",
- "$description": "Basic secondary color."
+ }
}
},
"brand": {
"100": {
- "source": "$brand-100",
+ "$value": "{color.brand.base}",
+ "$description": "Brand color of level 100.",
"modify": [
{
"type": "mix",
@@ -380,14 +423,14 @@
"amount": "0.94"
}
],
+ "source": "$brand-100",
"actions": {
"default": "{color.action.default.brand.100}"
- },
- "$value": "{color.brand.base}",
- "$description": "Brand color of level 100."
+ }
},
"200": {
- "source": "$brand-200",
+ "$value": "{color.brand.base}",
+ "$description": "Brand color of level 200.",
"modify": [
{
"type": "mix",
@@ -395,14 +438,14 @@
"amount": "0.75"
}
],
+ "source": "$brand-200",
"actions": {
"default": "{color.action.default.brand.200}"
- },
- "$value": "{color.brand.base}",
- "$description": "Brand color of level 200."
+ }
},
"300": {
- "source": "$brand-300",
+ "$value": "{color.brand.base}",
+ "$description": "Brand color of level 300.",
"modify": [
{
"type": "mix",
@@ -410,14 +453,14 @@
"amount": "0.50"
}
],
+ "source": "$brand-300",
"actions": {
"default": "{color.action.default.brand.300}"
- },
- "$value": "{color.brand.base}",
- "$description": "Brand color of level 300."
+ }
},
"400": {
- "source": "$brand-400",
+ "$value": "{color.brand.base}",
+ "$description": "Brand color of level 400.",
"modify": [
{
"type": "mix",
@@ -425,22 +468,22 @@
"amount": "0.25"
}
],
+ "source": "$brand-400",
"actions": {
"default": "{color.action.default.brand.400}"
- },
- "$value": "{color.brand.base}",
- "$description": "Brand color of level 400."
+ }
},
"500": {
+ "$value": "{color.brand.base}",
+ "$description": "Brand color of level 500.",
"source": "$brand-500",
"actions": {
"default": "{color.action.default.brand.500}"
- },
- "$value": "{color.brand.base}",
- "$description": "Brand color of level 500."
+ }
},
"600": {
- "source": "$brand-600",
+ "$value": "{color.brand.base}",
+ "$description": "Brand color of level 600.",
"modify": [
{
"type": "mix",
@@ -448,14 +491,14 @@
"amount": "0.10"
}
],
+ "source": "$brand-600",
"actions": {
"default": "{color.action.default.brand.600}"
- },
- "$value": "{color.brand.base}",
- "$description": "Brand color of level 600."
+ }
},
"700": {
- "source": "$brand-700",
+ "$value": "{color.brand.base}",
+ "$description": "Brand color of level 700.",
"modify": [
{
"type": "mix",
@@ -463,14 +506,14 @@
"amount": "0.20"
}
],
+ "source": "$brand-700",
"actions": {
"default": "{color.action.default.brand.700}"
- },
- "$value": "{color.brand.base}",
- "$description": "Brand color of level 700."
+ }
},
"800": {
- "source": "$brand-800",
+ "$value": "{color.brand.base}",
+ "$description": "Brand color of level 800.",
"modify": [
{
"type": "mix",
@@ -478,14 +521,14 @@
"amount": "0.25"
}
],
+ "source": "$brand-800",
"actions": {
"default": "{color.action.default.brand.800}"
- },
- "$value": "{color.brand.base}",
- "$description": "Brand color of level 800."
+ }
},
"900": {
- "source": "$brand-900",
+ "$value": "{color.brand.base}",
+ "$description": "Brand color of level 900.",
"modify": [
{
"type": "mix",
@@ -493,24 +536,24 @@
"amount": "0.30"
}
],
+ "source": "$brand-900",
"actions": {
"default": "{color.action.default.brand.900}"
- },
- "$value": "{color.brand.base}",
- "$description": "Brand color of level 900."
+ }
},
"base": {
+ "$value": "#9D0054",
+ "$description": "Basic brand color.",
"source": "$brand",
"actions": {
"default": "{color.action.default.brand.base}"
- },
- "$value": "#9D0054",
- "$description": "Basic brand color."
+ }
}
},
"success": {
"100": {
- "source": "$success-100",
+ "$value": "{color.success.base}",
+ "$description": "Success color of level 100.",
"modify": [
{
"type": "mix",
@@ -518,14 +561,14 @@
"amount": "0.94"
}
],
+ "source": "$success-100",
"actions": {
"default": "{color.action.default.success.100}"
- },
- "$value": "{color.success.base}",
- "$description": "Success color of level 100."
+ }
},
"200": {
- "source": "$success-200",
+ "$value": "{color.success.base}",
+ "$description": "Success color of level 200.",
"modify": [
{
"type": "mix",
@@ -533,14 +576,14 @@
"amount": "0.75"
}
],
+ "source": "$success-200",
"actions": {
"default": "{color.action.default.success.200}"
- },
- "$value": "{color.success.base}",
- "$description": "Success color of level 200."
+ }
},
"300": {
- "source": "$success-300",
+ "$value": "{color.success.base}",
+ "$description": "Success color of level 300.",
"modify": [
{
"type": "mix",
@@ -548,14 +591,14 @@
"amount": "0.50"
}
],
+ "source": "$success-300",
"actions": {
"default": "{color.action.default.success.300}"
- },
- "$value": "{color.success.base}",
- "$description": "Success color of level 300."
+ }
},
"400": {
- "source": "$success-400",
+ "$value": "{color.success.base}",
+ "$description": "Success color of level 400.",
"modify": [
{
"type": "mix",
@@ -563,22 +606,22 @@
"amount": "0.25"
}
],
+ "source": "$success-400",
"actions": {
"default": "{color.action.default.success.400}"
- },
- "$value": "{color.success.base}",
- "$description": "Success color of level 400."
+ }
},
"500": {
+ "$value": "{color.success.base}",
+ "$description": "Success color of level 500.",
"source": "$success-500",
"actions": {
"default": "{color.action.default.success.500}"
- },
- "$value": "{color.success.base}",
- "$description": "Success color of level 500."
+ }
},
"600": {
- "source": "$success-600",
+ "$value": "{color.success.base}",
+ "$description": "Success color of level 600.",
"modify": [
{
"type": "mix",
@@ -586,14 +629,14 @@
"amount": "0.10"
}
],
+ "source": "$success-600",
"actions": {
"default": "{color.action.default.success.600}"
- },
- "$value": "{color.success.base}",
- "$description": "Success color of level 600."
+ }
},
"700": {
- "source": "$success-700",
+ "$value": "{color.success.base}",
+ "$description": "Success color of level 700.",
"modify": [
{
"type": "mix",
@@ -601,14 +644,14 @@
"amount": "0.20"
}
],
+ "source": "$success-700",
"actions": {
"default": "{color.action.default.success.700}"
- },
- "$value": "{color.success.base}",
- "$description": "Success color of level 700."
+ }
},
"800": {
- "source": "$success-800",
+ "$value": "{color.success.base}",
+ "$description": "Success color of level 800.",
"modify": [
{
"type": "mix",
@@ -616,14 +659,14 @@
"amount": "0.25"
}
],
+ "source": "$success-800",
"actions": {
"default": "{color.action.default.success.800}"
- },
- "$value": "{color.success.base}",
- "$description": "Success color of level 800."
+ }
},
"900": {
- "source": "$success-900",
+ "$value": "{color.success.base}",
+ "$description": "Success color of level 900.",
"modify": [
{
"type": "mix",
@@ -631,24 +674,24 @@
"amount": "0.30"
}
],
+ "source": "$success-900",
"actions": {
"default": "{color.action.default.success.900}"
- },
- "$value": "{color.success.base}",
- "$description": "Success color of level 900."
+ }
},
"base": {
+ "$value": "{color.green}",
+ "$description": "Basic success color.",
"source": "$success",
"actions": {
"default": "{color.action.default.success.base}"
- },
- "$value": "{color.green}",
- "$description": "Basic success color."
+ }
}
},
"info": {
"100": {
- "source": "$info-100",
+ "$value": "{color.info.base}",
+ "$description": "Info color of level 100.",
"modify": [
{
"type": "mix",
@@ -656,14 +699,14 @@
"amount": "0.94"
}
],
+ "source": "$info-100",
"actions": {
"default": "{color.action.default.info.100}"
- },
- "$value": "{color.info.base}",
- "$description": "Info color of level 100."
+ }
},
"200": {
- "source": "$info-200",
+ "$value": "{color.info.base}",
+ "$description": "Info color of level 200.",
"modify": [
{
"type": "mix",
@@ -671,14 +714,14 @@
"amount": "0.75"
}
],
+ "source": "$info-200",
"actions": {
"default": "{color.action.default.info.200}"
- },
- "$value": "{color.info.base}",
- "$description": "Info color of level 200."
+ }
},
"300": {
- "source": "$info-300",
+ "$value": "{color.info.base}",
+ "$description": "Info color of level 300.",
"modify": [
{
"type": "mix",
@@ -686,14 +729,14 @@
"amount": "0.50"
}
],
+ "source": "$info-300",
"actions": {
"default": "{color.action.default.info.300}"
- },
- "$value": "{color.info.base}",
- "$description": "Info color of level 300."
+ }
},
"400": {
- "source": "$info-400",
+ "$value": "{color.info.base}",
+ "$description": "Info color of level 400.",
"modify": [
{
"type": "mix",
@@ -701,22 +744,22 @@
"amount": "0.25"
}
],
+ "source": "$info-400",
"actions": {
"default": "{color.action.default.info.400}"
- },
- "$value": "{color.info.base}",
- "$description": "Info color of level 400."
+ }
},
"500": {
+ "$value": "{color.info.base}",
+ "$description": "Info color of level 500.",
"source": "$info-500",
"actions": {
"default": "{color.action.default.info.500}"
- },
- "$value": "{color.info.base}",
- "$description": "Info color of level 500."
+ }
},
"600": {
- "source": "$info-600",
+ "$value": "{color.info.base}",
+ "$description": "Info color of level 600.",
"modify": [
{
"type": "mix",
@@ -724,14 +767,14 @@
"amount": "0.10"
}
],
+ "source": "$info-600",
"actions": {
"default": "{color.action.default.info.600}"
- },
- "$value": "{color.info.base}",
- "$description": "Info color of level 600."
+ }
},
"700": {
- "source": "$info-700",
+ "$value": "{color.info.base}",
+ "$description": "Info color of level 700.",
"modify": [
{
"type": "mix",
@@ -739,14 +782,14 @@
"amount": "0.20"
}
],
+ "source": "$info-700",
"actions": {
"default": "{color.action.default.info.700}"
- },
- "$value": "{color.info.base}",
- "$description": "Info color of level 700."
+ }
},
"800": {
- "source": "$info-800",
+ "$value": "{color.info.base}",
+ "$description": "Info color of level 800.",
"modify": [
{
"type": "mix",
@@ -754,14 +797,14 @@
"amount": "0.25"
}
],
+ "source": "$info-800",
"actions": {
"default": "{color.action.default.info.800}"
- },
- "$value": "{color.info.base}",
- "$description": "Info color of level 800."
+ }
},
"900": {
- "source": "$info-900",
+ "$value": "{color.info.base}",
+ "$description": "Info color of level 900.",
"modify": [
{
"type": "mix",
@@ -769,24 +812,24 @@
"amount": "0.30"
}
],
+ "source": "$info-900",
"actions": {
"default": "{color.action.default.info.900}"
- },
- "$value": "{color.info.base}",
- "$description": "Info color of level 900."
+ }
},
"base": {
+ "$value": "{color.teal}",
+ "$description": "Basic info color.",
"source": "$info",
"actions": {
"default": "{color.action.default.info.base}"
- },
- "$value": "{color.teal}",
- "$description": "Basic info color."
+ }
}
},
"warning": {
"100": {
- "source": "$warning-100",
+ "$value": "{color.warning.base}",
+ "$description": "Warning color of level 100.",
"modify": [
{
"type": "mix",
@@ -794,14 +837,14 @@
"amount": "0.94"
}
],
+ "source": "$warning-100",
"actions": {
"default": "{color.action.default.warning.100}"
- },
- "$value": "{color.warning.base}",
- "$description": "Warning color of level 100."
+ }
},
"200": {
- "source": "$warning-200",
+ "$value": "{color.warning.base}",
+ "$description": "Warning color of level 200.",
"modify": [
{
"type": "mix",
@@ -809,14 +852,14 @@
"amount": "0.75"
}
],
+ "source": "$warning-200",
"actions": {
"default": "{color.action.default.warning.200}"
- },
- "$value": "{color.warning.base}",
- "$description": "Warning color of level 200."
+ }
},
"300": {
- "source": "$warning-300",
+ "$value": "{color.warning.base}",
+ "$description": "Warning color of level 300.",
"modify": [
{
"type": "mix",
@@ -824,14 +867,14 @@
"amount": "0.50"
}
],
+ "source": "$warning-300",
"actions": {
"default": "{color.action.default.warning.300}"
- },
- "$value": "{color.warning.base}",
- "$description": "Warning color of level 300."
+ }
},
"400": {
- "source": "$warning-400",
+ "$value": "{color.warning.base}",
+ "$description": "Warning color of level 400.",
"modify": [
{
"type": "mix",
@@ -839,22 +882,22 @@
"amount": "0.25"
}
],
+ "source": "$warning-400",
"actions": {
"default": "{color.action.default.warning.400}"
- },
- "$value": "{color.warning.base}",
- "$description": "Warning color of level 400."
+ }
},
"500": {
+ "$value": "{color.warning.base}",
+ "$description": "Warning color of level 500.",
"source": "$warning-500",
"actions": {
"default": "{color.action.default.warning.500}"
- },
- "$value": "{color.warning.base}",
- "$description": "Warning color of level 500."
+ }
},
"600": {
- "source": "$warning-600",
+ "$value": "{color.warning.base}",
+ "$description": "Warning color of level 600.",
"modify": [
{
"type": "mix",
@@ -862,14 +905,14 @@
"amount": "0.10"
}
],
+ "source": "$warning-600",
"actions": {
"default": "{color.action.default.warning.600}"
- },
- "$value": "{color.warning.base}",
- "$description": "Warning color of level 600."
+ }
},
"700": {
- "source": "$warning-700",
+ "$value": "{color.warning.base}",
+ "$description": "Warning color of level 700.",
"modify": [
{
"type": "mix",
@@ -877,14 +920,14 @@
"amount": "0.20"
}
],
+ "source": "$warning-700",
"actions": {
"default": "{color.action.default.warning.700}"
- },
- "$value": "{color.warning.base}",
- "$description": "Warning color of level 700."
+ }
},
"800": {
- "source": "$warning-800",
+ "$value": "{color.warning.base}",
+ "$description": "Warning color of level 800.",
"modify": [
{
"type": "mix",
@@ -892,14 +935,14 @@
"amount": "0.25"
}
],
+ "source": "$warning-800",
"actions": {
"default": "{color.action.default.warning.800}"
- },
- "$value": "{color.warning.base}",
- "$description": "Warning color of level 800."
+ }
},
"900": {
- "source": "$warning-900",
+ "$value": "{color.warning.base}",
+ "$description": "Warning color of level 900.",
"modify": [
{
"type": "mix",
@@ -907,24 +950,24 @@
"amount": "0.30"
}
],
+ "source": "$warning-900",
"actions": {
"default": "{color.action.default.warning.900}"
- },
- "$value": "{color.warning.base}",
- "$description": "Warning color of level 900."
+ }
},
"base": {
+ "$value": "{color.yellow}",
+ "$description": "Basic warning color.",
"source": "$warning",
"actions": {
"default": "{color.action.default.warning.base}"
- },
- "$value": "{color.yellow}",
- "$description": "Basic warning color."
+ }
}
},
"danger": {
"100": {
- "source": "$danger-100",
+ "$value": "{color.danger.base}",
+ "$description": "Danger color of level 100.",
"modify": [
{
"type": "mix",
@@ -932,14 +975,14 @@
"amount": "0.94"
}
],
+ "source": "$danger-100",
"actions": {
"default": "{color.action.default.danger.100}"
- },
- "$value": "{color.danger.base}",
- "$description": "Danger color of level 100."
+ }
},
"200": {
- "source": "$danger-200",
+ "$value": "{color.danger.base}",
+ "$description": "Danger color of level 200.",
"modify": [
{
"type": "mix",
@@ -947,14 +990,14 @@
"amount": "0.75"
}
],
+ "source": "$danger-200",
"actions": {
"default": "{color.action.default.danger.200}"
- },
- "$value": "{color.danger.base}",
- "$description": "Danger color of level 200."
+ }
},
"300": {
- "source": "$danger-300",
+ "$value": "{color.danger.base}",
+ "$description": "Danger color of level 300.",
"modify": [
{
"type": "mix",
@@ -962,14 +1005,14 @@
"amount": "0.50"
}
],
+ "source": "$danger-300",
"actions": {
"default": "{color.action.default.danger.300}"
- },
- "$value": "{color.danger.base}",
- "$description": "Danger color of level 300."
+ }
},
"400": {
- "source": "$danger-400",
+ "$value": "{color.danger.base}",
+ "$description": "Danger color of level 400.",
"modify": [
{
"type": "mix",
@@ -977,22 +1020,22 @@
"amount": "0.25"
}
],
+ "source": "$danger-400",
"actions": {
"default": "{color.action.default.danger.400}"
- },
- "$value": "{color.danger.base}",
- "$description": "Danger color of level 400."
+ }
},
"500": {
+ "$value": "{color.danger.base}",
+ "$description": "Danger color of level 500.",
"source": "$danger-500",
"actions": {
"default": "{color.action.default.danger.500}"
- },
- "$value": "{color.danger.base}",
- "$description": "Danger color of level 500."
+ }
},
"600": {
- "source": "$danger-600",
+ "$value": "{color.danger.base}",
+ "$description": "Danger color of level 600.",
"modify": [
{
"type": "mix",
@@ -1000,14 +1043,14 @@
"amount": "0.10"
}
],
+ "source": "$danger-600",
"actions": {
"default": "{color.action.default.danger.600}"
- },
- "$value": "{color.danger.base}",
- "$description": "Danger color of level 600."
+ }
},
"700": {
- "source": "$danger-700",
+ "$value": "{color.danger.base}",
+ "$description": "Danger color of level 700.",
"modify": [
{
"type": "mix",
@@ -1015,14 +1058,14 @@
"amount": "0.20"
}
],
+ "source": "$danger-700",
"actions": {
"default": "{color.action.default.danger.700}"
- },
- "$value": "{color.danger.base}",
- "$description": "Danger color of level 700."
+ }
},
"800": {
- "source": "$danger-800",
+ "$value": "{color.danger.base}",
+ "$description": "Danger color of level 800.",
"modify": [
{
"type": "mix",
@@ -1030,14 +1073,14 @@
"amount": "0.25"
}
],
+ "source": "$danger-800",
"actions": {
"default": "{color.action.default.danger.800}"
- },
- "$value": "{color.danger.base}",
- "$description": "Danger color of level 800."
+ }
},
"900": {
- "source": "$danger-900",
+ "$value": "{color.danger.base}",
+ "$description": "Danger color of level 900.",
"modify": [
{
"type": "mix",
@@ -1045,24 +1088,24 @@
"amount": "0.30"
}
],
+ "source": "$danger-900",
"actions": {
"default": "{color.action.default.danger.900}"
- },
- "$value": "{color.danger.base}",
- "$description": "Danger color of level 900."
+ }
},
"base": {
+ "$value": "{color.red}",
+ "$description": "Basic danger color.",
"source": "$danger",
"actions": {
"default": "{color.action.default.danger.base}"
- },
- "$value": "{color.red}",
- "$description": "Basic danger color."
+ }
}
},
"light": {
"100": {
- "source": "$light-100",
+ "$value": "{color.light.base}",
+ "$description": "Light color of level 100.",
"modify": [
{
"type": "mix",
@@ -1070,14 +1113,14 @@
"amount": "0.94"
}
],
+ "source": "$light-100",
"actions": {
"default": "{color.action.default.light.100}"
- },
- "$value": "{color.light.base}",
- "$description": "Light color of level 100."
+ }
},
"200": {
- "source": "$light-200",
+ "$value": "{color.light.base}",
+ "$description": "Light color of level 200.",
"modify": [
{
"type": "mix",
@@ -1085,14 +1128,14 @@
"amount": "0.75"
}
],
+ "source": "$light-200",
"actions": {
"default": "{color.action.default.light.200}"
- },
- "$value": "{color.light.base}",
- "$description": "Light color of level 200."
+ }
},
"300": {
- "source": "$light-300",
+ "$value": "{color.light.base}",
+ "$description": "Light color of level 300.",
"modify": [
{
"type": "mix",
@@ -1100,14 +1143,14 @@
"amount": "0.50"
}
],
+ "source": "$light-300",
"actions": {
"default": "{color.action.default.light.300}"
- },
- "$value": "{color.light.base}",
- "$description": "Light color of level 300."
+ }
},
"400": {
- "source": "$light-400",
+ "$value": "{color.light.base}",
+ "$description": "Light color of level 400.",
"modify": [
{
"type": "mix",
@@ -1115,22 +1158,22 @@
"amount": "0.25"
}
],
+ "source": "$light-400",
"actions": {
"default": "{color.action.default.light.400}"
- },
- "$value": "{color.light.base}",
- "$description": "Light color of level 400."
+ }
},
"500": {
+ "$value": "{color.light.base}",
+ "$description": "Light color of level 500.",
"source": "$light-500",
"actions": {
"default": "{color.action.default.light.500}"
- },
- "$value": "{color.light.base}",
- "$description": "Light color of level 500."
+ }
},
"600": {
- "source": "$light-600",
+ "$value": "{color.light.base}",
+ "$description": "Light color of level 600.",
"modify": [
{
"type": "mix",
@@ -1138,14 +1181,14 @@
"amount": "0.10"
}
],
+ "source": "$light-600",
"actions": {
"default": "{color.action.default.light.600}"
- },
- "$value": "{color.light.base}",
- "$description": "Light color of level 600."
+ }
},
"700": {
- "source": "$light-700",
+ "$value": "{color.light.base}",
+ "$description": "Light color of level 700.",
"modify": [
{
"type": "mix",
@@ -1153,14 +1196,14 @@
"amount": "0.20"
}
],
+ "source": "$light-700",
"actions": {
"default": "{color.action.default.light.700}"
- },
- "$value": "{color.light.base}",
- "$description": "Light color of level 700."
+ }
},
"800": {
- "source": "$light-800",
+ "$value": "{color.light.base}",
+ "$description": "Light color of level 800.",
"modify": [
{
"type": "mix",
@@ -1168,14 +1211,14 @@
"amount": "0.25"
}
],
+ "source": "$light-800",
"actions": {
"default": "{color.action.default.light.800}"
- },
- "$value": "{color.light.base}",
- "$description": "Light color of level 800."
+ }
},
"900": {
- "source": "$light-900",
+ "$value": "{color.light.base}",
+ "$description": "Light color of level 900.",
"modify": [
{
"type": "mix",
@@ -1183,24 +1226,24 @@
"amount": "0.30"
}
],
+ "source": "$light-900",
"actions": {
"default": "{color.action.default.light.900}"
- },
- "$value": "{color.light.base}",
- "$description": "Light color of level 900."
+ }
},
"base": {
+ "$value": "#E1DDDB",
+ "$description": "Basic light color.",
"source": "$light",
"actions": {
"default": "{color.action.default.light.base}"
- },
- "$value": "#E1DDDB",
- "$description": "Basic light color."
+ }
}
},
"dark": {
"100": {
- "source": "$dark-100",
+ "$value": "{color.dark.base}",
+ "$description": "Dark color of level 100.",
"modify": [
{
"type": "mix",
@@ -1208,14 +1251,14 @@
"amount": "0.94"
}
],
+ "source": "$dark-100",
"actions": {
"default": "{color.action.default.dark.100}"
- },
- "$value": "{color.dark.base}",
- "$description": "Dark color of level 100."
+ }
},
"200": {
- "source": "$dark-200",
+ "$value": "{color.dark.base}",
+ "$description": "Dark color of level 200.",
"modify": [
{
"type": "mix",
@@ -1223,14 +1266,14 @@
"amount": "0.75"
}
],
+ "source": "$dark-200",
"actions": {
"default": "{color.action.default.dark.200}"
- },
- "$value": "{color.dark.base}",
- "$description": "Dark color of level 200."
+ }
},
"300": {
- "source": "$dark-300",
+ "$value": "{color.dark.base}",
+ "$description": "Dark color of level 300.",
"modify": [
{
"type": "mix",
@@ -1238,14 +1281,14 @@
"amount": "0.50"
}
],
+ "source": "$dark-300",
"actions": {
"default": "{color.action.default.dark.300}"
- },
- "$value": "{color.dark.base}",
- "$description": "Dark color of level 300."
+ }
},
"400": {
- "source": "$dark-400",
+ "$value": "{color.dark.base}",
+ "$description": "Dark color of level 400.",
"modify": [
{
"type": "mix",
@@ -1253,22 +1296,22 @@
"amount": "0.25"
}
],
+ "source": "$dark-400",
"actions": {
"default": "{color.action.default.dark.400}"
- },
- "$value": "{color.dark.base}",
- "$description": "Dark color of level 400."
+ }
},
"500": {
+ "$value": "{color.dark.base}",
+ "$description": "Dark color of level 500.",
"source": "$dark-500",
"actions": {
"default": "{color.action.default.dark.500}"
- },
- "$value": "{color.dark.base}",
- "$description": "Dark color of level 500."
+ }
},
"600": {
- "source": "$dark-600",
+ "$value": "{color.dark.base}",
+ "$description": "Dark color of level 600.",
"modify": [
{
"type": "mix",
@@ -1276,14 +1319,14 @@
"amount": "0.10"
}
],
+ "source": "$dark-600",
"actions": {
"default": "{color.action.default.dark.600}"
- },
- "$value": "{color.dark.base}",
- "$description": "Dark color of level 600."
+ }
},
"700": {
- "source": "$dark-700",
+ "$value": "{color.dark.base}",
+ "$description": "Info color of level 700.",
"modify": [
{
"type": "mix",
@@ -1291,14 +1334,14 @@
"amount": "0.20"
}
],
+ "source": "$dark-700",
"actions": {
"default": "{color.action.default.dark.700}"
- },
- "$value": "{color.dark.base}",
- "$description": "Info color of level 700."
+ }
},
"800": {
- "source": "$dark-800",
+ "$value": "{color.dark.base}",
+ "$description": "Dark color of level 800.",
"modify": [
{
"type": "mix",
@@ -1306,14 +1349,14 @@
"amount": "0.25"
}
],
+ "source": "$dark-800",
"actions": {
"default": "{color.action.default.dark.800}"
- },
- "$value": "{color.dark.base}",
- "$description": "Dark color of level 800."
+ }
},
"900": {
- "source": "$dark-900",
+ "$value": "{color.dark.base}",
+ "$description": "Dark color of level 900.",
"modify": [
{
"type": "mix",
@@ -1321,1063 +1364,1062 @@
"amount": "0.30"
}
],
+ "source": "$dark-900",
"actions": {
"default": "{color.action.default.dark.900}"
- },
- "$value": "{color.dark.base}",
- "$description": "Dark color of level 900."
+ }
},
"base": {
+ "$value": "#273F2F",
+ "$description": "Basic dark color.",
"source": "$dark",
"actions": {
"default": "{color.action.default.dark.base}"
- },
- "$value": "#273F2F",
- "$description": "Basic dark color."
+ }
}
},
"action": {
"default": {
"gray": {
"100": {
- "source": "$action-default-gray-100",
+ "$value": "{color.gray.100}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.gray.100}"
+ "source": "$action-default-gray-100"
},
"200": {
- "source": "$action-default-gray-200",
+ "$value": "{color.gray.200}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.gray.200}"
+ "source": "$action-default-gray-200"
},
"300": {
- "source": "$action-default-gray-300",
+ "$value": "{color.gray.300}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.gray.300}"
+ "source": "$action-default-gray-300"
},
"400": {
- "source": "$action-default-gray-400",
+ "$value": "{color.gray.400}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.gray.400}"
+ "source": "$action-default-gray-400"
},
"500": {
- "source": "$action-default-gray-500",
+ "$value": "{color.gray.500}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.gray.500}"
+ "source": "$action-default-gray-500"
},
"600": {
- "source": "$action-default-gray-600",
+ "$value": "{color.gray.600}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.gray.600}"
+ "source": "$action-default-gray-600"
},
"700": {
- "source": "$action-default-gray-700",
+ "$value": "{color.gray.700}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.gray.700}"
+ "source": "$action-default-gray-700"
},
"800": {
- "source": "$action-default-gray-800",
+ "$value": "{color.gray.800}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.gray.800}"
+ "source": "$action-default-gray-800"
},
"900": {
- "source": "$action-default-gray-900",
+ "$value": "{color.gray.900}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.gray.900}"
+ "source": "$action-default-gray-900"
},
"base": {
- "source": "$action-default-gray-base",
+ "$value": "{color.gray.base}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.gray.base}"
+ "source": "$action-default-gray-base"
}
},
"primary": {
"100": {
- "source": "$action-default-primary-100",
+ "$value": "{color.primary.100}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.primary.100}"
+ "source": "$action-default-primary-100"
},
"200": {
- "source": "$action-default-primary-200",
+ "$value": "{color.primary.200}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.primary.200}"
+ "source": "$action-default-primary-200"
},
"300": {
- "source": "$action-default-primary-300",
+ "$value": "{color.primary.300}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.primary.300}"
+ "source": "$action-default-primary-300"
},
"400": {
- "source": "$action-default-primary-400",
+ "$value": "{color.primary.400}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.primary.400}"
+ "source": "$action-default-primary-400"
},
"500": {
- "source": "$action-default-primary-500",
+ "$value": "{color.primary.500}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.primary.500}"
+ "source": "$action-default-primary-500"
},
"600": {
- "source": "$action-default-primary-600",
+ "$value": "{color.primary.600}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.primary.600}"
+ "source": "$action-default-primary-600"
},
"700": {
- "source": "$action-default-primary-700",
+ "$value": "{color.primary.700}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.primary.700}"
+ "source": "$action-default-primary-700"
},
"800": {
- "source": "$action-default-primary-800",
+ "$value": "{color.primary.800}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.primary.800}"
+ "source": "$action-default-primary-800"
},
"900": {
- "source": "$action-default-primary-900",
+ "$value": "{color.primary.900}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.primary.900}"
+ "source": "$action-default-primary-900"
},
"base": {
- "source": "$action-default-primary-base",
+ "$value": "{color.primary.base}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.primary.base}"
+ "source": "$action-default-primary-base"
}
},
"secondary": {
"100": {
- "source": "$action-default-secondary-100",
+ "$value": "{color.secondary.100}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.secondary.100}"
+ "source": "$action-default-secondary-100"
},
"200": {
- "source": "$action-default-secondary-200",
+ "$value": "{color.secondary.200}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.secondary.200}"
+ "source": "$action-default-secondary-200"
},
"300": {
- "source": "$action-default-secondary-300",
+ "$value": "{color.secondary.300}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.secondary.300}"
+ "source": "$action-default-secondary-300"
},
"400": {
- "source": "$action-default-secondary-400",
+ "$value": "{color.secondary.400}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.secondary.400}"
+ "source": "$action-default-secondary-400"
},
"500": {
- "source": "$action-default-secondary-500",
+ "$value": "{color.secondary.500}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.secondary.500}"
+ "source": "$action-default-secondary-500"
},
"600": {
- "source": "$action-default-secondary-600",
+ "$value": "{color.secondary.600}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.secondary.600}"
+ "source": "$action-default-secondary-600"
},
"700": {
- "source": "$action-default-secondary-700",
+ "$value": "{color.secondary.700}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.secondary.700}"
+ "source": "$action-default-secondary-700"
},
"800": {
- "source": "$action-default-secondary-800",
+ "$value": "{color.secondary.800}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.secondary.800}"
+ "source": "$action-default-secondary-800"
},
"900": {
- "source": "$action-default-secondary-900",
+ "$value": "{color.secondary.900}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.secondary.900}"
+ "source": "$action-default-secondary-900"
},
"base": {
- "source": "$action-default-secondary-base",
+ "$value": "{color.secondary.base}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.secondary.base}"
+ "source": "$action-default-secondary-base"
}
},
"brand": {
"100": {
- "source": "$action-default-brand-100",
+ "$value": "{color.brand.100}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.brand.100}"
+ "source": "$action-default-brand-100"
},
"200": {
- "source": "$action-default-brand-200",
+ "$value": "{color.brand.200}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.brand.200}"
+ "source": "$action-default-brand-200"
},
"300": {
- "source": "$action-default-brand-300",
+ "$value": "{color.brand.300}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.brand.300}"
+ "source": "$action-default-brand-300"
},
"400": {
- "source": "$action-default-brand-400",
+ "$value": "{color.brand.400}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.brand.400}"
+ "source": "$action-default-brand-400"
},
"500": {
- "source": "$action-default-brand-500",
+ "$value": "{color.brand.500}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.brand.500}"
+ "source": "$action-default-brand-500"
},
"600": {
- "source": "$action-default-brand-600",
+ "$value": "{color.brand.600}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.brand.600}"
+ "source": "$action-default-brand-600"
},
"700": {
- "source": "$action-default-brand-700",
+ "$value": "{color.brand.700}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.brand.700}"
+ "source": "$action-default-brand-700"
},
"800": {
- "source": "$action-default-brand-800",
+ "$value": "{color.brand.800}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.brand.800}"
+ "source": "$action-default-brand-800"
},
"900": {
- "source": "$action-default-brand-900",
+ "$value": "{color.brand.900}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.brand.900}"
+ "source": "$action-default-brand-900"
},
"base": {
- "source": "$action-default-brand-base",
+ "$value": "{color.brand.base}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.brand.base}"
+ "source": "$action-default-brand-base"
}
},
"success": {
"100": {
- "source": "$action-default-success-100",
+ "$value": "{color.success.100}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.success.100}"
+ "source": "$action-default-success-100"
},
"200": {
- "source": "$action-default-success-200",
+ "$value": "{color.success.200}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.success.200}"
+ "source": "$action-default-success-200"
},
"300": {
- "source": "$action-default-success-300",
+ "$value": "{color.success.300}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.success.300}"
+ "source": "$action-default-success-300"
},
"400": {
- "source": "$action-default-success-400",
+ "$value": "{color.success.400}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.success.400}"
+ "source": "$action-default-success-400"
},
"500": {
- "source": "$action-default-success-500",
+ "$value": "{color.success.500}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.success.500}"
+ "source": "$action-default-success-500"
},
"600": {
- "source": "$action-default-success-600",
+ "$value": "{color.success.600}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.success.600}"
+ "source": "$action-default-success-600"
},
"700": {
- "source": "$action-default-success-700",
+ "$value": "{color.success.700}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.success.700}"
+ "source": "$action-default-success-700"
},
"800": {
- "source": "$action-default-success-800",
+ "$value": "{color.success.800}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.success.800}"
+ "source": "$action-default-success-800"
},
"900": {
- "source": "$action-default-success-900",
+ "$value": "{color.success.900}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.success.900}"
+ "source": "$action-default-success-900"
},
"base": {
- "source": "$action-default-success-base",
+ "$value": "{color.success.base}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.success.base}"
+ "source": "$action-default-success-base"
}
},
"info": {
"100": {
- "source": "$action-default-info-100",
+ "$value": "{color.info.100}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.info.100}"
+ "source": "$action-default-info-100"
},
"200": {
- "source": "$action-default-info-200",
+ "$value": "{color.info.200}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.info.200}"
+ "source": "$action-default-info-200"
},
"300": {
- "source": "$action-default-info-300",
+ "$value": "{color.info.300}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.info.300}"
+ "source": "$action-default-info-300"
},
"400": {
- "source": "$action-default-info-400",
+ "$value": "{color.info.400}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.info.400}"
+ "source": "$action-default-info-400"
},
"500": {
- "source": "$action-default-info-500",
+ "$value": "{color.info.500}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.info.500}"
+ "source": "$action-default-info-500"
},
"600": {
- "source": "$action-default-info-600",
+ "$value": "{color.info.600}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.info.600}"
+ "source": "$action-default-info-600"
},
"700": {
- "source": "$action-default-info-700",
+ "$value": "{color.info.700}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.info.700}"
+ "source": "$action-default-info-700"
},
"800": {
- "source": "$action-default-info-800",
+ "$value": "{color.info.800}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.info.800}"
+ "source": "$action-default-info-800"
},
"900": {
- "source": "$action-default-info-900",
+ "$value": "{color.info.900}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.info.900}"
+ "source": "$action-default-info-900"
},
"base": {
- "source": "$action-default-info-base",
+ "$value": "{color.info.base}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.info.base}"
+ "source": "$action-default-info-base"
}
},
"warning": {
"100": {
- "source": "$action-default-warning-100",
+ "$value": "{color.warning.100}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.warning.100}"
+ "source": "$action-default-warning-100"
},
"200": {
- "source": "$action-default-warning-200",
+ "$value": "{color.warning.200}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.warning.200}"
+ "source": "$action-default-warning-200"
},
"300": {
- "source": "$action-default-warning-300",
+ "$value": "{color.warning.300}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.warning.300}"
+ "source": "$action-default-warning-300"
},
"400": {
- "source": "$action-default-warning-400",
+ "$value": "{color.warning.400}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.warning.400}"
+ "source": "$action-default-warning-400"
},
"500": {
- "source": "$action-default-warning-500",
+ "$value": "{color.warning.500}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.warning.500}"
+ "source": "$action-default-warning-500"
},
"600": {
- "source": "$action-default-warning-600",
+ "$value": "{color.warning.600}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.warning.600}"
+ "source": "$action-default-warning-600"
},
"700": {
- "source": "$action-default-warning-700",
+ "$value": "{color.warning.700}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.warning.700}"
+ "source": "$action-default-warning-700"
},
"800": {
- "source": "$action-default-warning-800",
+ "$value": "{color.warning.800}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.warning.800}"
+ "source": "$action-default-warning-800"
},
"900": {
- "source": "$action-default-warning-900",
+ "$value": "{color.warning.900}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.warning.900}"
+ "source": "$action-default-warning-900"
},
"base": {
- "source": "$action-default-warning-base",
+ "$value": "{color.warning.base}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.warning.base}"
+ "source": "$action-default-warning-base"
}
},
"danger": {
"100": {
- "source": "$action-default-danger-100",
+ "$value": "{color.danger.100}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.danger.100}"
+ "source": "$action-default-danger-100"
},
"200": {
- "source": "$action-default-danger-200",
+ "$value": "{color.danger.200}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.danger.200}"
+ "source": "$action-default-danger-200"
},
"300": {
- "source": "$action-default-danger-300",
+ "$value": "{color.danger.300}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.danger.300}"
+ "source": "$action-default-danger-300"
},
"400": {
- "source": "$action-default-danger-400",
+ "$value": "{color.danger.400}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.danger.400}"
+ "source": "$action-default-danger-400"
},
"500": {
- "source": "$action-default-danger-500",
+ "$value": "{color.danger.500}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.danger.500}"
+ "source": "$action-default-danger-500"
},
"600": {
- "source": "$action-default-danger-600",
+ "$value": "{color.danger.600}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.danger.600}"
+ "source": "$action-default-danger-600"
},
"700": {
- "source": "$action-default-danger-700",
+ "$value": "{color.danger.700}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.danger.700}"
+ "source": "$action-default-danger-700"
},
"800": {
- "source": "$action-default-danger-800",
+ "$value": "{color.danger.800}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.danger.800}"
+ "source": "$action-default-danger-800"
},
"900": {
- "source": "$action-default-danger-900",
+ "$value": "{color.danger.900}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.danger.900}"
+ "source": "$action-default-danger-900"
},
"base": {
- "source": "$action-default-danger-base",
+ "$value": "{color.danger.base}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.danger.base}"
+ "source": "$action-default-danger-base"
}
},
"light": {
"100": {
- "source": "$action-default-light-100",
+ "$value": "{color.light.100}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.light.100}"
+ "source": "$action-default-light-100"
},
"200": {
- "source": "$action-default-light-200",
+ "$value": "{color.light.200}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.light.200}"
+ "source": "$action-default-light-200"
},
"300": {
- "source": "$action-default-light-300",
+ "$value": "{color.light.300}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.light.300}"
+ "source": "$action-default-light-300"
},
"400": {
- "source": "$action-default-light-400",
+ "$value": "{color.light.400}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.light.400}"
+ "source": "$action-default-light-400"
},
"500": {
- "source": "$action-default-light-500",
+ "$value": "{color.light.500}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.light.500}"
+ "source": "$action-default-light-500"
},
"600": {
- "source": "$action-default-light-600",
+ "$value": "{color.light.600}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.light.600}"
+ "source": "$action-default-light-600"
},
"700": {
- "source": "$action-default-light-700",
+ "$value": "{color.light.700}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.light.700}"
+ "source": "$action-default-light-700"
},
"800": {
- "source": "$action-default-light-800",
+ "$value": "{color.light.800}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.light.800}"
+ "source": "$action-default-light-800"
},
"900": {
- "source": "$action-default-light-900",
+ "$value": "{color.light.900}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.light.900}"
+ "source": "$action-default-light-900"
},
"base": {
- "source": "$action-default-light-base",
+ "$value": "{color.light.base}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.light.base}"
+ "source": "$action-default-light-base"
}
},
"dark": {
"100": {
- "source": "$action-default-dark-100",
+ "$value": "{color.dark.100}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.dark.100}"
+ "source": "$action-default-dark-100"
},
"200": {
- "source": "$action-default-dark-200",
+ "$value": "{color.dark.200}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.dark.200}"
+ "source": "$action-default-dark-200"
},
"300": {
- "source": "$action-default-dark-300",
+ "$value": "{color.dark.300}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.dark.300}"
+ "source": "$action-default-dark-300"
},
"400": {
- "source": "$action-default-dark-400",
+ "$value": "{color.dark.400}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.dark.400}"
+ "source": "$action-default-dark-400"
},
"500": {
- "source": "$action-default-dark-500",
+ "$value": "{color.dark.500}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.dark.500}"
+ "source": "$action-default-dark-500"
},
"600": {
- "source": "$action-default-dark-600",
+ "$value": "{color.dark.600}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.dark.600}"
+ "source": "$action-default-dark-600"
},
"700": {
- "source": "$action-default-dark-700",
+ "$value": "{color.dark.700}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.dark.700}"
+ "source": "$action-default-dark-700"
},
"800": {
- "source": "$action-default-dark-800",
+ "$value": "{color.dark.800}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.dark.800}"
+ "source": "$action-default-dark-800"
},
"900": {
- "source": "$action-default-dark-900",
+ "$value": "{color.dark.900}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.dark.900}"
+ "source": "$action-default-dark-900"
},
"base": {
- "source": "$action-default-dark-base",
+ "$value": "{color.dark.base}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.dark.base}"
+ "source": "$action-default-dark-base"
}
},
"accent": {
"a": {
- "source": "$action-default-accent-a",
+ "$value": "{color.accent.a}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.accent.a}"
+ "source": "$action-default-accent-a"
},
"b": {
- "source": "$action-default-accent-b",
+ "$value": "{color.accent.b}",
"modify": [
{
"type": "darken",
"amount": "0.1"
}
],
- "$value": "{color.accent.b}"
+ "source": "$action-default-accent-b"
}
}
}
diff --git a/tokens/src/themes/light/global/elevation.json b/tokens/src/themes/light/global/elevation.json
index ba0697b0af..b6d2d8bfce 100644
--- a/tokens/src/themes/light/global/elevation.json
+++ b/tokens/src/themes/light/global/elevation.json
@@ -4,7 +4,6 @@
"box-shadow": {
"level": {
"1": {
- "source": "$level-1-box-shadow",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -19,10 +18,10 @@
"blur": ".25rem"
}
],
- "$description": "Basic box shadow of level 1."
+ "$description": "Basic box shadow of level 1.",
+ "source": "$level-1-box-shadow"
},
"2": {
- "source": "$level-2-box-shadow",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -37,10 +36,10 @@
"blur": ".5rem"
}
],
- "$description": "Basic box shadow of level 2."
+ "$description": "Basic box shadow of level 2.",
+ "source": "$level-2-box-shadow"
},
"3": {
- "source": "$level-3-box-shadow",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -55,10 +54,10 @@
"blur": "1rem"
}
],
- "$description": "Basic box shadow of level 3."
+ "$description": "Basic box shadow of level 3.",
+ "source": "$level-3-box-shadow"
},
"4": {
- "source": "$level-4-box-shadow",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -73,10 +72,10 @@
"blur": "1.25rem"
}
],
- "$description": "Basic box shadow of level 4."
+ "$description": "Basic box shadow of level 4.",
+ "source": "$level-4-box-shadow"
},
"5": {
- "source": "$level-5-box-shadow",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -91,42 +90,42 @@
"blur": "2.5rem"
}
],
- "$description": "Basic box shadow of level 5."
+ "$description": "Basic box shadow of level 5.",
+ "source": "$level-5-box-shadow"
}
},
"base": {
- "source": "$box-shadow",
"$value": {
"color": "rgba(0, 0, 0, .3)",
"offsetX": "0",
"offsetY": ".125rem",
"blur": ".25rem"
},
- "$description": "Default box shadow."
+ "$description": "Default box shadow.",
+ "source": "$box-shadow"
},
"sm": {
- "source": "$box-shadow-sm",
"$value": {
"color": "rgba(0, 0, 0, .2)",
"offsetX": "0",
"offsetY": ".0625rem",
"blur": ".125rem"
},
- "$description": "Small box shadow."
+ "$description": "Small box shadow.",
+ "source": "$box-shadow-sm"
},
"lg": {
- "source": "$box-shadow-lg",
"$value": {
"color": "rgba(0, 0, 0, .3)",
"offsetX": "0",
"offsetY": ".25rem",
"blur": ".5rem"
},
- "$description": "Large box shadow."
+ "$description": "Large box shadow.",
+ "source": "$box-shadow-lg"
},
"down": {
"1": {
- "source": "$box-shadow-down-1",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -141,10 +140,10 @@
"blur": ".25rem"
}
],
- "$description": "Bottom box shadow of level 1."
+ "$description": "Bottom box shadow of level 1.",
+ "source": "$box-shadow-down-1"
},
"2": {
- "source": "$box-shadow-down-2",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -159,10 +158,10 @@
"blur": ".5rem"
}
],
- "$description": "Bottom box shadow of level 2."
+ "$description": "Bottom box shadow of level 2.",
+ "source": "$box-shadow-down-2"
},
"3": {
- "source": "$box-shadow-down-3",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -177,10 +176,10 @@
"blur": ".625rem"
}
],
- "$description": "Bottom box shadow of level 3."
+ "$description": "Bottom box shadow of level 3.",
+ "source": "$box-shadow-down-3"
},
"4": {
- "source": "$box-shadow-down-4",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -195,10 +194,10 @@
"blur": "1.25rem"
}
],
- "$description": "Bottom box shadow of level 4."
+ "$description": "Bottom box shadow of level 4.",
+ "source": "$box-shadow-down-4"
},
"5": {
- "source": "$box-shadow-down-5",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -213,12 +212,12 @@
"blur": "2.5rem"
}
],
- "$description": "Bottom box shadow of level 5."
+ "$description": "Bottom box shadow of level 5.",
+ "source": "$box-shadow-down-5"
}
},
"left": {
"1": {
- "source": "$box-shadow-left-1",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -233,10 +232,10 @@
"blur": ".25rem"
}
],
- "$description": "Left box shadow of level 1."
+ "$description": "Left box shadow of level 1.",
+ "source": "$box-shadow-left-1"
},
"2": {
- "source": "$box-shadow-left-2",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -251,10 +250,10 @@
"blur": ".5rem"
}
],
- "$description": "Left box shadow of level 2."
+ "$description": "Left box shadow of level 2.",
+ "source": "$box-shadow-left-2"
},
"3": {
- "source": "$box-shadow-left-3",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -269,10 +268,10 @@
"blur": ".625rem"
}
],
- "$description": "Left box shadow of level 3."
+ "$description": "Left box shadow of level 3.",
+ "source": "$box-shadow-left-3"
},
"4": {
- "source": "$box-shadow-left-4",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -287,10 +286,10 @@
"blur": "1.25rem"
}
],
- "$description": "Left box shadow of level 4."
+ "$description": "Left box shadow of level 4.",
+ "source": "$box-shadow-left-4"
},
"5": {
- "source": "$box-shadow-left-5",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -305,12 +304,12 @@
"blur": "3rem"
}
],
- "$description": "Left box shadow of level 5."
+ "$description": "Left box shadow of level 5.",
+ "source": "$box-shadow-left-5"
}
},
"up": {
"1": {
- "source": "$box-shadow-up-1",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -325,10 +324,10 @@
"blur": ".25rem"
}
],
- "$description": "Top box shadow of level 1."
+ "$description": "Top box shadow of level 1.",
+ "source": "$box-shadow-up-1"
},
"2": {
- "source": "$box-shadow-up-2",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -343,10 +342,10 @@
"blur": ".5rem"
}
],
- "$description": "Top box shadow of level 2."
+ "$description": "Top box shadow of level 2.",
+ "source": "$box-shadow-up-2"
},
"3": {
- "source": "$box-shadow-up-3",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -361,10 +360,10 @@
"blur": ".625rem"
}
],
- "$description": "Top box shadow of level 3."
+ "$description": "Top box shadow of level 3.",
+ "source": "$box-shadow-up-3"
},
"4": {
- "source": "$box-shadow-up-4",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -379,10 +378,10 @@
"blur": "1.25rem"
}
],
- "$description": "Top box shadow of level 4."
+ "$description": "Top box shadow of level 4.",
+ "source": "$box-shadow-up-4"
},
"5": {
- "source": "$box-shadow-up-5",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -397,12 +396,12 @@
"blur": "3rem"
}
],
- "$description": "Basic box shadow of level 5."
+ "$description": "Basic box shadow of level 5.",
+ "source": "$box-shadow-up-5"
}
},
"right": {
"1": {
- "source": "$box-shadow-right-1",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -417,10 +416,10 @@
"blur": ".25rem"
}
],
- "$description": "Right box shadow of level 1."
+ "$description": "Right box shadow of level 1.",
+ "source": "$box-shadow-right-1"
},
"2": {
- "source": "$box-shadow-right-2",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -435,10 +434,10 @@
"blur": ".5rem"
}
],
- "$description": "Right box shadow of level 2."
+ "$description": "Right box shadow of level 2.",
+ "source": "$box-shadow-right-2"
},
"3": {
- "source": "$box-shadow-right-3",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -453,10 +452,10 @@
"blur": ".625rem"
}
],
- "$description": "Right box shadow of level 3."
+ "$description": "Right box shadow of level 3.",
+ "source": "$box-shadow-right-3"
},
"4": {
- "source": "$box-shadow-right-4",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -471,10 +470,10 @@
"blur": "1.25rem"
}
],
- "$description": "Right box shadow of level 4."
+ "$description": "Right box shadow of level 4.",
+ "source": "$box-shadow-right-4"
},
"5": {
- "source": "$box-shadow-right-5",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -489,12 +488,12 @@
"blur": "3rem"
}
],
- "$description": "Right box shadow of level 5."
+ "$description": "Right box shadow of level 5.",
+ "source": "$box-shadow-right-5"
}
},
"centered": {
"1": {
- "source": "$box-shadow-centered-1",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -509,10 +508,10 @@
"blur": ".25rem"
}
],
- "$description": "Centered box shadow of level 1."
+ "$description": "Centered box shadow of level 1.",
+ "source": "$box-shadow-centered-1"
},
"2": {
- "source": "$box-shadow-centered-2",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -527,10 +526,10 @@
"blur": ".5rem"
}
],
- "$description": "Centered box shadow of level 2."
+ "$description": "Centered box shadow of level 2.",
+ "source": "$box-shadow-centered-2"
},
"3": {
- "source": "$box-shadow-centered-3",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -545,10 +544,10 @@
"blur": "1rem"
}
],
- "$description": "Centered box shadow of level 3."
+ "$description": "Centered box shadow of level 3.",
+ "source": "$box-shadow-centered-3"
},
"4": {
- "source": "$box-shadow-centered-4",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -563,10 +562,10 @@
"blur": "1.25rem"
}
],
- "$description": "Centered box shadow of level 4."
+ "$description": "Centered box shadow of level 4.",
+ "source": "$box-shadow-centered-4"
},
"5": {
- "source": "$box-shadow-centered-5",
"$value": [
{
"color": "rgba(0, 0, 0, .15)",
@@ -581,7 +580,8 @@
"blur": "3rem"
}
],
- "$description": "Centered box shadow of level 5."
+ "$description": "Centered box shadow of level 5.",
+ "source": "$box-shadow-centered-5"
}
}
}