diff --git a/.eslintignore b/.eslintignore index 3f0d3c4ccc..1fb7971ae6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -6,3 +6,8 @@ icons/ build-scss.js component-generator/ example/ +package.json +package-lock.json +src/i18n +tsconfig.build.json +dependent-usage.json diff --git a/.eslintrc.js b/.eslintrc.js index aaf4750116..9bf33e83e0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -70,5 +70,19 @@ module.exports = { project: './tsconfig.json', }, }, + { + files: ['**/*.json'], + plugins: ['jsonc'], + extends: ['plugin:jsonc/recommended-with-json'], + rules: { + 'jsonc/indent': ['error', 2], + 'jsonc/quote-props': ['error', 'always'], + 'jsonc/quotes': ['error', 'double'], + 'jsonc/no-octal': 'error', + 'jsonc/no-dupe-keys': 'error', + 'jsonc/valid-json-number': 'error', + 'jsonc/no-bigint-literals': 'error', + }, + }, ], }; diff --git a/.stylelintrc.json b/.stylelintrc.json index 6abc524964..ff0515b89f 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -34,6 +34,7 @@ "color-function-notation": "legacy", "value-keyword-case": ["lower", { "ignoreProperties": ["/font-family/"] - }] + }], + "custom-property-empty-line-before": null } } diff --git a/Makefile b/Makefile index d6dc6ff320..8fb1778064 100644 --- a/Makefile +++ b/Makefile @@ -1,3 +1,4 @@ +.PHONY: build build: rm -rf ./dist tsc --project tsconfig.build.json diff --git a/bin/paragon-scripts.js b/bin/paragon-scripts.js index a029b19564..7656f3bdfb 100755 --- a/bin/paragon-scripts.js +++ b/bin/paragon-scripts.js @@ -85,11 +85,21 @@ const COMMANDS = { description: 'Include only source design tokens in the build.', defaultValue: false, }, + { + name: '--output-token-references', + description: 'Include references for tokens with aliases to other tokens in the build output.', + defaultValue: true, + }, { name: '-t, --themes', description: 'Specify themes to include in the token build.', defaultValue: 'light', }, + { + name: '-v, --verbose', + description: 'Enable verbose logging.', + defaultValue: false, + }, ], }, 'replace-variables': { diff --git a/designTokenKeySorter.js b/designTokenKeySorter.js new file mode 100644 index 0000000000..dbf3abab7a --- /dev/null +++ b/designTokenKeySorter.js @@ -0,0 +1,190 @@ +/* eslint-disable no-console */ +const fs = require('fs').promises; +const path = require('path'); +const chalk = require('chalk'); + +const tokensDirectory = 'tokens/'; + +const DESIGN_TOKEN_KEY_ORDER = [ + '$type', + '$value', + '$description', + 'outputReferences', + 'modify', + 'source', +]; + +const shouldApplyFix = process.argv.includes('--fix'); + +let mismatchWarningCount = 0; +let totalProcessedFileCount = 0; + +/** + * Reorders the keys in an object based on a specified key order. + * @param {Object} object - 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 a list of mismatched keys. + */ +function reorderKeysInObject(object, desiredKeyOrder) { + const objectKeys = Object.keys(object); + const objectKeySet = new Set(objectKeys); + let isOrderMismatched = false; + const mismatchedKeyList = []; + + let index = 0; + + const reorderedObject = desiredKeyOrder.reduce((accumulatedObject, key) => { + if (objectKeySet.has(key)) { + accumulatedObject[key] = object[key]; + if (key !== objectKeys[index]) { + isOrderMismatched = true; + mismatchedKeyList.push(objectKeys[index]); + } + index++; + } + return accumulatedObject; + }, {}); + + objectKeys.forEach((key) => { + if (!Object.prototype.hasOwnProperty.call(reorderedObject, key)) { + reorderedObject[key] = object[key]; + if (index < objectKeys.length && key !== objectKeys[index]) { + isOrderMismatched = true; + mismatchedKeyList.push(objectKeys[index]); + } + index++; + } + }); + + return { + reorderedObject, + isOrderMismatched, + mismatchedKeys: mismatchedKeyList, + }; +} + +/** + * Recursively reorders keys in JSON data based on a specified key order for nested objects. + * @param {*} jsonData - The JSON data (object, array, or primitive) to process. + * @param {string} jsonPath - 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 recursivelyReorderKeys(jsonData, jsonPath = '') { + if (Array.isArray(jsonData)) { + return jsonData.map((item, index) => recursivelyReorderKeys(item, `${jsonPath}[${index}]`)); + } + + if (typeof jsonData === 'object' && jsonData !== null) { + const { + reorderedObject: reorderedData, + isOrderMismatched: hasMainMismatch, + mismatchedKeys: mainMismatchedKeys, + } = reorderKeysInObject(jsonData, DESIGN_TOKEN_KEY_ORDER); + + let hasAnyMismatch = hasMainMismatch; + const mismatches = hasMainMismatch ? { [jsonPath]: mainMismatchedKeys } : {}; + + Object.entries(reorderedData).reduce((accumulatedMismatches, [key, value]) => { + if (DESIGN_TOKEN_KEY_ORDER.includes(key)) { + reorderedData[key] = value; + return accumulatedMismatches; + } + + const result = recursivelyReorderKeys(value, `${jsonPath}.${key}`); + reorderedData[key] = result.reorderedData || result; + + if (result.isOrderMismatched) { + Object.assign(accumulatedMismatches, result.mismatches); + hasAnyMismatch = true; + } + return accumulatedMismatches; + }, mismatches); + + return { + reorderedData, + isOrderMismatched: hasAnyMismatch, + mismatches, + }; + } + + return jsonData; +} + +/** + * 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. + */ +async function processJsonFilesInDirectory(directoryPath) { + try { + const directoryEntries = await fs.readdir(directoryPath, { withFileTypes: true }); + + const fileProcessingTasks = directoryEntries.map(async (entry) => { + const entryPath = path.join(directoryPath, entry.name); + + if (entry.isDirectory()) { + return processJsonFilesInDirectory(entryPath); + } + + if (entry.isFile() && path.extname(entry.name) === '.json') { + try { + const fileContent = await fs.readFile(entryPath, 'utf-8'); + const jsonData = JSON.parse(fileContent); + + const { + reorderedData, + isOrderMismatched, + mismatches, + } = recursivelyReorderKeys(jsonData); + + if (isOrderMismatched) { + mismatchWarningCount++; + if (shouldApplyFix) { + await fs.writeFile(entryPath, `${JSON.stringify(reorderedData, null, 2)}\n`, 'utf-8'); + } else { + console.warn(chalk.yellow(`Warning: Key order mismatch in ${entryPath}.`)); + console.warn(chalk.red('Mismatched info:')); + 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')) { + await fs.writeFile(entryPath, `${fileContent}\n`, 'utf-8'); + } + + totalProcessedFileCount++; + return null; + } catch (error) { + console.error(chalk.red(`Error processing file ${entryPath}:`), error); + return null; + } + } + + return null; + }); + + await Promise.all(fileProcessingTasks); + } catch (error) { + console.error(chalk.red(`Error reading directory ${directoryPath}:`), error); + } +} + +processJsonFilesInDirectory(tokensDirectory).then(() => { + let statusMessage; + + if (shouldApplyFix) { + statusMessage = chalk.green(`Processed ${totalProcessedFileCount} files. ${mismatchWarningCount} files were updated.`); + } else if (mismatchWarningCount > 0) { + statusMessage = chalk.yellow(`Processed ${totalProcessedFileCount} files. ${mismatchWarningCount} files have key order mismatches.`); + } else { + statusMessage = chalk.green(`Processed ${totalProcessedFileCount} files. All files are in correct order.`); + } + + console.log(statusMessage); +}); diff --git a/lib/build-tokens.js b/lib/build-tokens.js index e2e04d60ae..3e10b37593 100755 --- a/lib/build-tokens.js +++ b/lib/build-tokens.js @@ -1,6 +1,10 @@ const path = require('path'); const minimist = require('minimist'); -const { StyleDictionary, colorTransform, createCustomCSSVariables } = require('../tokens/style-dictionary'); +const { + initializeStyleDictionary, + getTokensStudioTransforms, + colorTransform, +} = require('../tokens/style-dictionary'); const { createIndexCssFile } = require('../tokens/utils'); /** @@ -16,19 +20,34 @@ async function buildTokensCommand(commandArgs) { const defaultParams = { themes: ['light'], 'build-dir': './build/', + 'source-tokens-only': false, + 'output-references': true, + verbose: false, }; const alias = { 'build-dir': 'b', themes: 't', + verbose: '-v', }; const { 'build-dir': buildDir, source: tokensSource, - 'source-tokens-only': hasSourceTokensOnly, + 'source-tokens-only': transformSourceTokensOnly, + 'output-references': outputReferences, themes, - } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' }); + verbose, + } = minimist( + commandArgs, + { + alias, + default: defaultParams, + boolean: ['source-tokens-only', 'output-references', 'verbose'], + }, + ); + + const StyleDictionary = await initializeStyleDictionary({ themes }); const coreConfig = { include: [ @@ -38,36 +57,42 @@ async function buildTokensCommand(commandArgs) { source: tokensSource ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`] : [], + preprocessors: ['pgn-annotate-token-extensions-with-references', 'tokens-studio'], + expand: { + typesMap: (await getTokensStudioTransforms()).expandTypesMap, + }, platforms: { css: { prefix: 'pgn', - transformGroup: 'css', + transformGroup: 'paragon-css', // NOTE: buildPath must end with a slash buildPath: buildDir.slice(-1) === '/' ? buildDir : `${buildDir}/`, + options: { + fileHeader: 'customFileHeader', + }, files: [ { format: 'css/custom-variables', destination: 'core/variables.css', - filter: hasSourceTokensOnly ? 'isSource' : undefined, + filter: transformSourceTokensOnly ? 'isSource' : undefined, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, }, }, { format: 'css/custom-media-breakpoints', destination: 'core/custom-media-breakpoints.css', - filter: hasSourceTokensOnly ? 'isSource' : undefined, + filter: transformSourceTokensOnly ? 'isSource' : undefined, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, }, }, ], - transforms: StyleDictionary.transformGroup.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'), - options: { - fileHeader: 'customFileHeader', - }, }, }, + log: { + verbosity: verbose ? 'verbose' : 'default', + }, }; const getStyleDictionaryConfig = (themeVariant) => ({ @@ -85,16 +110,10 @@ async function buildTokensCommand(commandArgs) { : [], transform: { 'color/sass-color-functions': { - ...StyleDictionary.transform['color/sass-color-functions'], - transformer: (token) => colorTransform(token, themeVariant), + ...StyleDictionary.hooks.transforms['color/sass-color-functions'], + transform: (token) => colorTransform(token, themeVariant), }, }, - format: { - 'css/custom-variables': formatterArgs => createCustomCSSVariables({ - formatterArgs, - themeVariant, - }), - }, platforms: { css: { ...coreConfig.platforms.css, @@ -102,17 +121,19 @@ async function buildTokensCommand(commandArgs) { { format: 'css/custom-variables', destination: `themes/${themeVariant}/variables.css`, - filter: hasSourceTokensOnly ? 'isSource' : undefined, + filter: transformSourceTokensOnly + ? `isSource.${themeVariant}` + : `isThemeVariant.${themeVariant}`, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, }, }, { format: 'css/utility-classes', destination: `themes/${themeVariant}/utility-classes.css`, - filter: hasSourceTokensOnly ? 'isSource' : undefined, + filter: transformSourceTokensOnly ? 'isSource' : undefined, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, }, }, ], @@ -120,14 +141,29 @@ async function buildTokensCommand(commandArgs) { }, }); - StyleDictionary.extend(coreConfig).buildAllPlatforms(); - createIndexCssFile({ buildDir, isTheme: false }); + // Create list of style-dictionary configurations to build (core + theme variants) + const configs = [ + { config: coreConfig }, + ...themes.map((themeVariant) => { + const config = getStyleDictionaryConfig(themeVariant); + return { + config, + themeVariant, + }; + }), + ]; - themes.forEach((themeVariant) => { - const config = getStyleDictionaryConfig(themeVariant); - StyleDictionary.extend(config).buildAllPlatforms(); - createIndexCssFile({ buildDir, isTheme: true, themeVariant }); - }); + // Build tokens for each configuration + await Promise.all(configs.map(async ({ config, themeVariant }) => { + const sd = new StyleDictionary(config); + await sd.cleanAllPlatforms(); + await sd.buildAllPlatforms(); + createIndexCssFile({ + buildDir, + isThemeVariant: !!themeVariant, + themeVariant, + }); + })); } module.exports = buildTokensCommand; diff --git a/package-lock.json b/package-lock.json index 323434aa0c..78eb71afc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ ], "dependencies": { "@popperjs/core": "^2.11.4", + "@tokens-studio/sd-transforms": "^1.2.4", "axios": "^0.27.2", "bootstrap": "^4.6.2", "chalk": "^4.1.2", @@ -54,7 +55,7 @@ "react-table": "^7.7.0", "react-transition-group": "^4.4.2", "sass": "^1.58.3", - "style-dictionary": "^3.7.1", + "style-dictionary": "^4.0.1", "tabbable": "^5.3.3", "uncontrollable": "^7.2.1", "uuid": "^9.0.0" @@ -73,7 +74,7 @@ "@babel/preset-typescript": "^7.16.7", "@edx/eslint-config": "^3.2.0", "@edx/stylelint-config-edx": "^2.3.0", - "@edx/typescript-config": "^1.0.1", + "@edx/typescript-config": "^1.1.0", "@formatjs/cli": "^5.0.2", "@semantic-release/changelog": "^6.0.1", "@semantic-release/git": "^10.0.1", @@ -99,6 +100,7 @@ "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "^17.0.0", "eslint-plugin-import": "2.27.5", + "eslint-plugin-jsonc": "^2.18.1", "eslint-plugin-jsx-a11y": "6.7.1", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", @@ -2231,6 +2233,210 @@ "partytown": "bin/partytown.cjs" } }, + "node_modules/@bundled-es-modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==", + "dependencies": { + "deepmerge": "^4.3.1" + } + }, + "node_modules/@bundled-es-modules/glob": { + "version": "10.4.2", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-10.4.2.tgz", + "integrity": "sha512-740y5ofkzydsFao5EXJrGilcIL6EFEw/cmPf2uhTw9J6G1YOhiIFjNFCHdpgEiiH5VlU3G0SARSjlFlimRRSMA==", + "hasInstallScript": true, + "dependencies": { + "buffer": "^6.0.3", + "events": "^3.3.0", + "glob": "^10.4.2", + "patch-package": "^8.0.0", + "path": "^0.12.7", + "stream": "^0.0.3", + "string_decoder": "^1.3.0", + "url": "^0.11.3" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/foreground-child": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", + "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==", + "dependencies": { + "cross-spawn": "^7.0.0", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/@bundled-es-modules/glob/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@bundled-es-modules/glob/node_modules/string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "dependencies": { + "safe-buffer": "~5.2.0" + } + }, + "node_modules/@bundled-es-modules/memfs": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.9.4.tgz", + "integrity": "sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==", + "dependencies": { + "assert": "^2.0.0", + "buffer": "^6.0.3", + "events": "^3.3.0", + "memfs": "^4.9.3", + "path": "^0.12.7", + "stream": "^0.0.3", + "util": "^0.12.5" + } + }, + "node_modules/@bundled-es-modules/memfs/node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, + "node_modules/@bundled-es-modules/memfs/node_modules/memfs": { + "version": "4.11.1", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.11.1.tgz", + "integrity": "sha512-LZcMTBAgqUUKNXZagcZxvXXfgF1bHX7Y7nQ0QyEiNbRJgE29GhgPd8Yna1VQcLlPiHt/5RFJMWYN9Uv/VPNvjQ==", + "dependencies": { + "@jsonjoy.com/json-pack": "^1.0.3", + "@jsonjoy.com/util": "^1.3.0", + "tree-dump": "^1.0.1", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">= 4.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + } + }, + "node_modules/@bundled-es-modules/postcss-calc-ast-parser": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.6.tgz", + "integrity": "sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==", + "dependencies": { + "postcss-calc-ast-parser": "^0.1.4" + } + }, "node_modules/@chevrotain/cst-dts-gen": { "version": "11.0.3", "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz", @@ -4282,9 +4488,9 @@ } }, "node_modules/@edx/typescript-config": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@edx/typescript-config/-/typescript-config-1.0.1.tgz", - "integrity": "sha512-w0g3nIX9oEch8Rip8q8sb/nrurGEHA1BEjK/I1LAQwA44K4FPMWvyvabmZErrdTJ9sXcZL10aWD3bat1obV8Bg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@edx/typescript-config/-/typescript-config-1.1.0.tgz", + "integrity": "sha512-HF+7dsSgA2YQ6f/qV4HnrEYBoIhIdxVQZgDyYk/YGvaVGqT6IFuaHnYUP7ImpCUMOUmx/Jl7EyuVeaMe2LrMcA==", "dev": true, "peerDependencies": { "typescript": "^4.9.4" @@ -5183,6 +5389,90 @@ "version": "1.2.1", "license": "BSD-3-Clause" }, + "node_modules/@isaacs/cliui": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", + "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "dependencies": { + "string-width": "^5.1.2", + "string-width-cjs": "npm:string-width@^4.2.0", + "strip-ansi": "^7.0.1", + "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", + "wrap-ansi": "^8.1.0", + "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/string-width": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", + "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "dependencies": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^9.2.2", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@isaacs/cliui/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/wrap-ansi": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", + "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "dependencies": { + "ansi-styles": "^6.1.0", + "string-width": "^5.0.1", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "dev": true, @@ -5759,6 +6049,57 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@jsonjoy.com/base64": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz", + "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/json-pack": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.1.0.tgz", + "integrity": "sha512-zlQONA+msXPPwHWZMKFVS78ewFczIll5lXiVPwFPCZUsrOKdxc2AvxU1HoNBmMRhqDZUR9HkC3UOm+6pME6Xsg==", + "dependencies": { + "@jsonjoy.com/base64": "^1.1.1", + "@jsonjoy.com/util": "^1.1.2", + "hyperdyperid": "^1.2.0", + "thingies": "^1.20.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/util": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.3.0.tgz", + "integrity": "sha512-Cebt4Vk7k1xHy87kHY7KSPLT77A7Ev7IfOblyLZhtYEhrdQ6fX4EoLq3xOQ3O/DRMEh2ok5nyC180E+ABS8Wmw==", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.4", "devOptional": true, @@ -6892,6 +7233,15 @@ "@parcel/core": "^2.6.2" } }, + "node_modules/@pkgjs/parseargs": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", + "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", + "optional": true, + "engines": { + "node": ">=14" + } + }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.10", "license": "MIT", @@ -7965,6 +8315,30 @@ "version": "0.3.0", "license": "MIT" }, + "node_modules/@tokens-studio/sd-transforms": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@tokens-studio/sd-transforms/-/sd-transforms-1.2.4.tgz", + "integrity": "sha512-Blf7Y5D7uieRBTcmyrFxZ/oEB7OYAa/Ns7DJU4/fyV69pvm7DC3K3zHxrFwHSRcoa7C/dFoF3p3AgohkdXzjfA==", + "dependencies": { + "@bundled-es-modules/deepmerge": "^4.3.1", + "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6", + "@tokens-studio/types": "^0.5.1", + "colorjs.io": "^0.4.3", + "expr-eval-fork": "^2.0.2", + "is-mergeable-object": "^1.1.1" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "style-dictionary": "^4.0.1" + } + }, + "node_modules/@tokens-studio/types": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@tokens-studio/types/-/types-0.5.1.tgz", + "integrity": "sha512-LdCF9ZH5ej4Gb6n58x5fTkhstxjXDZc1SWteMWY6EiddLQJVONMIgYOrWrf1extlkSLjagX8WS0B63bAqeltnA==" + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "dev": true, @@ -9423,6 +9797,21 @@ "version": "4.2.2", "license": "Apache-2.0" }, + "node_modules/@yarnpkg/lockfile": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz", + "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==" + }, + "node_modules/@zip.js/zip.js": { + "version": "2.7.48", + "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.48.tgz", + "integrity": "sha512-J7cliimZ2snAbr0IhLx2U8BwfA1pKucahKzTpFtYq4hEgKxwvFJcIjCIVNPwQpfVab7iVP+AKmoH1gidBlyhiQ==", + "engines": { + "bun": ">=0.7.0", + "deno": ">=1.0.0", + "node": ">=16.5.0" + } + }, "node_modules/abab": { "version": "2.0.6", "dev": true, @@ -9444,8 +9833,9 @@ } }, "node_modules/acorn": { - "version": "8.8.2", - "license": "MIT", + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", + "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==", "bin": { "acorn": "bin/acorn" }, @@ -9956,6 +10346,18 @@ "version": "2.0.6", "license": "MIT" }, + "node_modules/assert": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz", + "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==", + "dependencies": { + "call-bind": "^1.0.2", + "is-nan": "^1.3.2", + "object-is": "^1.1.5", + "object.assign": "^4.1.4", + "util": "^0.12.5" + } + }, "node_modules/assert-ok": { "version": "1.0.0", "license": "MIT" @@ -12877,11 +13279,18 @@ } }, "node_modules/call-bind": { - "version": "1.0.2", - "license": "MIT", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", + "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", "dependencies": { - "function-bind": "^1.1.1", - "get-intrinsic": "^1.0.2" + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "set-function-length": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -13282,7 +13691,6 @@ }, "node_modules/ci-info": { "version": "3.8.0", - "dev": true, "funding": [ { "type": "github", @@ -13947,6 +14355,11 @@ "devOptional": true, "license": "MIT" }, + "node_modules/colorjs.io": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.5.tgz", + "integrity": "sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow==" + }, "node_modules/combined-stream": { "version": "1.0.8", "license": "MIT", @@ -15323,6 +15736,22 @@ "node": ">=10" } }, + "node_modules/define-data-property": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", + "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "gopd": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/define-lazy-prop": { "version": "2.0.0", "license": "MIT", @@ -15792,6 +16221,11 @@ "version": "0.1.5", "license": "BSD-3-Clause" }, + "node_modules/eastasianwidth": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", + "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==" + }, "node_modules/ee-first": { "version": "1.1.1", "license": "MIT" @@ -16146,6 +16580,25 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/es-define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "dependencies": { + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "engines": { + "node": ">= 0.4" + } + }, "node_modules/es-get-iterator": { "version": "1.1.3", "license": "MIT", @@ -16408,6 +16861,33 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/eslint-compat-utils": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.6.0.tgz", + "integrity": "sha512-1vVBdI/HLS6HTHVQCJGlN+LOF0w1Rs/WB9se23mQr84cRM0iMM8PulMFFhQdQ1BvS0cGwjpis4xziI91Rk0l6g==", + "dev": true, + "dependencies": { + "semver": "^7.5.4" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "eslint": ">=6.0.0" + } + }, + "node_modules/eslint-compat-utils/node_modules/semver": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/eslint-config-airbnb": { "version": "19.0.4", "dev": true, @@ -16537,6 +17017,27 @@ "node": ">=0.6" } }, + "node_modules/eslint-json-compat-utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/eslint-json-compat-utils/-/eslint-json-compat-utils-0.2.1.tgz", + "integrity": "sha512-YzEodbDyW8DX8bImKhAcCeu/L31Dd/70Bidx2Qex9OFUtgzXLqtfWL4Hr5fM/aCCB8QUZLuJur0S9k6UfgFkfg==", + "dev": true, + "dependencies": { + "esquery": "^1.6.0" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "eslint": "*", + "jsonc-eslint-parser": "^2.4.0" + }, + "peerDependenciesMeta": { + "@eslint/json": { + "optional": true + } + } + }, "node_modules/eslint-module-utils": { "version": "2.7.4", "license": "MIT", @@ -16603,6 +17104,31 @@ "node": ">=0.10.0" } }, + "node_modules/eslint-plugin-jsonc": { + "version": "2.18.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.18.1.tgz", + "integrity": "sha512-6qY8zDpxOwPQNcr8eZ+RxwGX6IPHws5/Qef7aBEjER8rB9+UMB6zQWVIVcbP7xzFmEMHAesNFPe/sIlU4c78dg==", + "dev": true, + "dependencies": { + "@eslint-community/eslint-utils": "^4.2.0", + "eslint-compat-utils": "^0.6.0", + "eslint-json-compat-utils": "^0.2.1", + "espree": "^9.6.1", + "graphemer": "^1.4.0", + "jsonc-eslint-parser": "^2.0.4", + "natural-compare": "^1.4.0", + "synckit": "^0.6.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ota-meshi" + }, + "peerDependencies": { + "eslint": ">=6.0.0" + } + }, "node_modules/eslint-plugin-jsx-a11y": { "version": "6.7.1", "license": "MIT", @@ -16915,12 +17441,13 @@ "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==" }, "node_modules/espree": { - "version": "9.5.0", - "license": "BSD-2-Clause", + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", + "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", "dependencies": { - "acorn": "^8.8.0", + "acorn": "^8.9.0", "acorn-jsx": "^5.3.2", - "eslint-visitor-keys": "^3.3.0" + "eslint-visitor-keys": "^3.4.1" }, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -16930,10 +17457,14 @@ } }, "node_modules/espree/node_modules/eslint-visitor-keys": { - "version": "3.3.0", - "license": "Apache-2.0", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" } }, "node_modules/esprima": { @@ -16948,8 +17479,9 @@ } }, "node_modules/esquery": { - "version": "1.5.0", - "license": "BSD-3-Clause", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz", + "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==", "dependencies": { "estraverse": "^5.1.0" }, @@ -17204,6 +17736,11 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/expr-eval-fork": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/expr-eval-fork/-/expr-eval-fork-2.0.2.tgz", + "integrity": "sha512-NaAnObPVwHEYrODd7Jzp3zzT9pgTAlUUL4MZiZu9XAYPDpx89cPsfyEImFb2XY0vQNbrqg2CG7CLiI+Rs3seaQ==" + }, "node_modules/express": { "version": "4.19.2", "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", @@ -17743,6 +18280,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/find-yarn-workspace-root": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz", + "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==", + "dependencies": { + "micromatch": "^4.0.2" + } + }, "node_modules/flat-cache": { "version": "3.0.4", "license": "MIT", @@ -18068,8 +18613,12 @@ } }, "node_modules/function-bind": { - "version": "1.1.1", - "license": "MIT" + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/function.prototype.name": { "version": "1.1.5", @@ -20276,12 +20825,18 @@ } }, "node_modules/get-intrinsic": { - "version": "1.2.0", - "license": "MIT", + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", + "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", "dependencies": { - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.3" + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "has-proto": "^1.0.1", + "has-symbols": "^1.0.3", + "hasown": "^2.0.0" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -20731,10 +21286,11 @@ } }, "node_modules/has-property-descriptors": { - "version": "1.0.0", - "license": "MIT", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", + "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", "dependencies": { - "get-intrinsic": "^1.1.1" + "es-define-property": "^1.0.0" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -20864,6 +21420,17 @@ "node": ">=8" } }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/hast-to-hyperscript": { "version": "9.0.1", "license": "MIT", @@ -21498,6 +22065,14 @@ "url": "https://github.com/sponsors/typicode" } }, + "node_modules/hyperdyperid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz", + "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==", + "engines": { + "node": ">=10.18" + } + }, "node_modules/hyphenate-style-name": { "version": "1.0.4", "license": "BSD-3-Clause" @@ -22185,6 +22760,20 @@ "node": ">=6" } }, + "node_modules/is-generator-function": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz", + "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==", + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-git-repository": { "version": "1.1.1", "dev": true, @@ -22381,6 +22970,26 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-mergeable-object": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz", + "integrity": "sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==" + }, + "node_modules/is-nan": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz", + "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==", + "dependencies": { + "call-bind": "^1.0.0", + "define-properties": "^1.1.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-negative-zero": { "version": "2.0.2", "license": "MIT", @@ -22858,6 +23467,20 @@ "node": ">=8" } }, + "node_modules/jackspeak": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", + "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", + "dependencies": { + "@isaacs/cliui": "^8.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + }, + "optionalDependencies": { + "@pkgjs/parseargs": "^0.11.0" + } + }, "node_modules/java-properties": { "version": "1.0.2", "dev": true, @@ -25135,6 +25758,23 @@ "version": "0.4.1", "license": "MIT" }, + "node_modules/json-stable-stringify": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.1.1.tgz", + "integrity": "sha512-SU/971Kt5qVQfJpyDveVhQ/vya+5hvrjClFOcr8c0Fq5aODJjMwutrOfCU+eCnVD5gpx1Q3fEqkyom77zH1iIg==", + "dependencies": { + "call-bind": "^1.0.5", + "isarray": "^2.0.5", + "jsonify": "^0.0.1", + "object-keys": "^1.1.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/json-stable-stringify-without-jsonify": { "version": "1.0.1", "license": "MIT" @@ -25154,10 +25794,47 @@ "node": ">=6" } }, - "node_modules/jsonc-parser": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", - "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==" + "node_modules/jsonc-eslint-parser": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-2.4.0.tgz", + "integrity": "sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==", + "dev": true, + "dependencies": { + "acorn": "^8.5.0", + "eslint-visitor-keys": "^3.0.0", + "espree": "^9.0.0", + "semver": "^7.3.5" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ota-meshi" + } + }, + "node_modules/jsonc-eslint-parser/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/jsonc-eslint-parser/node_modules/semver": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } }, "node_modules/jsonfile": { "version": "6.1.0", @@ -25169,6 +25846,14 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/jsonify": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz", + "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/jsonparse": { "version": "1.3.1", "dev": true, @@ -25221,6 +25906,14 @@ "node": ">=0.10.0" } }, + "node_modules/klaw-sync": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz", + "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==", + "dependencies": { + "graceful-fs": "^4.1.11" + } + }, "node_modules/kleur": { "version": "3.0.3", "license": "MIT", @@ -26701,6 +27394,14 @@ "node": ">= 6" } }, + "node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, "node_modules/mitt": { "version": "1.2.0", "license": "MIT" @@ -30043,8 +30744,12 @@ "license": "MIT" }, "node_modules/object-inspect": { - "version": "1.12.3", - "license": "MIT", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz", + "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==", + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -30462,6 +31167,11 @@ "node": ">=8" } }, + "node_modules/package-json-from-dist": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz", + "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==" + }, "node_modules/package-json/node_modules/@sindresorhus/is": { "version": "0.14.0", "license": "MIT", @@ -30845,6 +31555,123 @@ "which": "bin/which" } }, + "node_modules/patch-package": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz", + "integrity": "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==", + "dependencies": { + "@yarnpkg/lockfile": "^1.1.0", + "chalk": "^4.1.2", + "ci-info": "^3.7.0", + "cross-spawn": "^7.0.3", + "find-yarn-workspace-root": "^2.0.0", + "fs-extra": "^9.0.0", + "json-stable-stringify": "^1.0.2", + "klaw-sync": "^6.0.0", + "minimist": "^1.2.6", + "open": "^7.4.2", + "rimraf": "^2.6.3", + "semver": "^7.5.3", + "slash": "^2.0.0", + "tmp": "^0.0.33", + "yaml": "^2.2.2" + }, + "bin": { + "patch-package": "index.js" + }, + "engines": { + "node": ">=14", + "npm": ">5" + } + }, + "node_modules/patch-package/node_modules/fs-extra": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", + "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==", + "dependencies": { + "at-least-node": "^1.0.0", + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/patch-package/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "deprecated": "Glob versions prior to v9 are no longer supported", + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/patch-package/node_modules/rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "deprecated": "Rimraf versions prior to v4 are no longer supported", + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + } + }, + "node_modules/patch-package/node_modules/semver": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/patch-package/node_modules/tmp": { + "version": "0.0.33", + "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", + "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==", + "dependencies": { + "os-tmpdir": "~1.0.2" + }, + "engines": { + "node": ">=0.6.0" + } + }, + "node_modules/patch-package/node_modules/yaml": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz", + "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==", + "bin": { + "yaml": "bin.mjs" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/path": { + "version": "0.12.7", + "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", + "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==", + "dependencies": { + "process": "^0.11.1", + "util": "^0.10.3" + } + }, "node_modules/path-case": { "version": "3.0.4", "license": "MIT", @@ -30900,6 +31727,26 @@ "node": ">=0.10.0" } }, + "node_modules/path-scurry": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", + "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", + "dependencies": { + "lru-cache": "^10.2.0", + "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" + }, + "engines": { + "node": ">=16 || 14 >=14.18" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/path-scurry/node_modules/lru-cache": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", + "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==" + }, "node_modules/path-to-regexp": { "version": "0.1.7", "license": "MIT" @@ -30911,6 +31758,24 @@ "node": ">=8" } }, + "node_modules/path-unified": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/path-unified/-/path-unified-0.1.0.tgz", + "integrity": "sha512-/Oaz9ZJforrkmFrwkR/AcvjVsCAwGSJHO0X6O6ISj8YeFbATjIEBXLDcZfnK3MO4uvCBrJTdVIxdOc79PMqSdg==" + }, + "node_modules/path/node_modules/inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==" + }, + "node_modules/path/node_modules/util": { + "version": "0.10.4", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", + "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", + "dependencies": { + "inherits": "2.0.3" + } + }, "node_modules/peek-readable": { "version": "4.1.0", "license": "MIT", @@ -31517,6 +32382,22 @@ "postcss": "^8.2.2" } }, + "node_modules/postcss-calc-ast-parser": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.4.tgz", + "integrity": "sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==", + "dependencies": { + "postcss-value-parser": "^3.3.1" + }, + "engines": { + "node": ">=6.5" + } + }, + "node_modules/postcss-calc-ast-parser/node_modules/postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" + }, "node_modules/postcss-colormin": { "version": "5.3.1", "license": "MIT", @@ -32253,6 +33134,14 @@ "node": ">= 0.6" } }, + "node_modules/process": { + "version": "0.11.10", + "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", + "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/process-nextick-args": { "version": "2.0.1", "license": "MIT" @@ -32468,12 +33357,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/querystring": { - "version": "0.2.0", - "engines": { - "node": ">=0.4.x" - } - }, "node_modules/querystringify": { "version": "2.2.0", "dev": true, @@ -35694,6 +36577,22 @@ "version": "2.0.0", "license": "ISC" }, + "node_modules/set-function-length": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", + "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", + "dependencies": { + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/set-harmonic-interval": { "version": "1.0.1", "dev": true, @@ -35849,12 +36748,17 @@ "optional": true }, "node_modules/side-channel": { - "version": "1.0.4", - "license": "MIT", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz", + "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==", "dependencies": { - "call-bind": "^1.0.0", - "get-intrinsic": "^1.0.2", - "object-inspect": "^1.9.0" + "call-bind": "^1.0.7", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.4", + "object-inspect": "^1.13.1" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -35977,7 +36881,6 @@ }, "node_modules/slash": { "version": "2.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -36873,6 +37776,14 @@ "node": ">= 0.4" } }, + "node_modules/stream": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.3.tgz", + "integrity": "sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==", + "dependencies": { + "component-emitter": "^2.0.0" + } + }, "node_modules/stream-combiner2": { "version": "1.1.1", "dev": true, @@ -36882,6 +37793,17 @@ "readable-stream": "^2.0.2" } }, + "node_modules/stream/node_modules/component-emitter": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-2.0.0.tgz", + "integrity": "sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/streamsearch": { "version": "1.1.0", "engines": { @@ -36950,6 +37872,25 @@ "node": ">=8" } }, + "node_modules/string-width-cjs": { + "name": "string-width", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/string-width-cjs/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + }, "node_modules/string-width/node_modules/emoji-regex": { "version": "8.0.0", "license": "MIT" @@ -37030,6 +37971,18 @@ "node": ">=8" } }, + "node_modules/strip-ansi-cjs": { + "name": "strip-ansi", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/strip-bom": { "version": "4.0.0", "dev": true, @@ -37095,27 +38048,47 @@ } }, "node_modules/style-dictionary": { - "version": "3.8.0", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.8.0.tgz", - "integrity": "sha512-wHlB/f5eO3mDcYv6WtOz6gvQC477jBKrwuIXe+PtHskTCBsJdAOvL8hCquczJxDui2TnwpeNE+2msK91JJomZg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.0.1.tgz", + "integrity": "sha512-aZ2iouI0i0DIXk3QhCkwOeo5rQeuk5Ja0PhHo32/EXCNuay4jK4CZ+hQJW0Er0J74VWniR+qaeoWgjklcULxOQ==", + "hasInstallScript": true, "dependencies": { - "chalk": "^4.0.0", - "change-case": "^4.1.2", + "@bundled-es-modules/deepmerge": "^4.3.1", + "@bundled-es-modules/glob": "^10.4.2", + "@bundled-es-modules/memfs": "^4.9.4", + "@zip.js/zip.js": "^2.7.44", + "chalk": "^5.3.0", + "change-case": "^5.3.0", "commander": "^8.3.0", - "fs-extra": "^10.0.0", - "glob": "^7.2.0", + "is-plain-obj": "^4.1.0", "json5": "^2.2.2", - "jsonc-parser": "^3.0.0", - "lodash": "^4.17.15", - "tinycolor2": "^1.4.1" + "patch-package": "^8.0.0", + "path-unified": "^0.1.0", + "tinycolor2": "^1.6.0" }, "bin": { - "style-dictionary": "bin/style-dictionary" + "style-dictionary": "bin/style-dictionary.js" }, "engines": { - "node": ">=12.0.0" + "node": ">=18.0.0" + } + }, + "node_modules/style-dictionary/node_modules/chalk": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/style-dictionary/node_modules/change-case": { + "version": "5.4.4", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz", + "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==" + }, "node_modules/style-dictionary/node_modules/commander": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", @@ -37124,36 +38097,15 @@ "node": ">= 12" } }, - "node_modules/style-dictionary/node_modules/fs-extra": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", - "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", - "dependencies": { - "graceful-fs": "^4.2.0", - "jsonfile": "^6.0.1", - "universalify": "^2.0.0" - }, + "node_modules/style-dictionary/node_modules/is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", "engines": { "node": ">=12" - } - }, - "node_modules/style-dictionary/node_modules/glob": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", - "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.1.1", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - }, - "engines": { - "node": "*" }, "funding": { - "url": "https://github.com/sponsors/isaacs" + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/style-loader": { @@ -37606,6 +38558,18 @@ "dev": true, "license": "MIT" }, + "node_modules/synckit": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.6.2.tgz", + "integrity": "sha512-Vhf+bUa//YSTYKseDiiEuQmhGCoIF3CVBhunm3r/DQnYiGT4JssmnKQc44BIyOZRK2pKjXXAgbhfmbeoC9CJpA==", + "dev": true, + "dependencies": { + "tslib": "^2.3.1" + }, + "engines": { + "node": ">=12.20" + } + }, "node_modules/tabbable": { "version": "5.3.3", "license": "MIT" @@ -37928,6 +38892,17 @@ "version": "0.2.0", "license": "MIT" }, + "node_modules/thingies": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz", + "integrity": "sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==", + "engines": { + "node": ">=10.18" + }, + "peerDependencies": { + "tslib": "^2" + } + }, "node_modules/throat": { "version": "5.0.0", "dev": true, @@ -38191,6 +39166,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tree-dump": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz", + "integrity": "sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, "node_modules/trim": { "version": "0.0.1" }, @@ -38951,11 +39941,15 @@ "license": "MIT" }, "node_modules/url": { - "version": "0.11.0", - "license": "MIT", + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/url/-/url-0.11.4.tgz", + "integrity": "sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==", "dependencies": { - "punycode": "1.3.2", - "querystring": "0.2.0" + "punycode": "^1.4.1", + "qs": "^6.12.3" + }, + "engines": { + "node": ">= 0.4" } }, "node_modules/url-join": { @@ -39024,8 +40018,23 @@ } }, "node_modules/url/node_modules/punycode": { - "version": "1.3.2", - "license": "MIT" + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", + "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==" + }, + "node_modules/url/node_modules/qs": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", + "dependencies": { + "side-channel": "^1.0.6" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/use": { "version": "3.1.1", @@ -39085,6 +40094,18 @@ } } }, + "node_modules/util": { + "version": "0.12.5", + "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", + "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==", + "dependencies": { + "inherits": "^2.0.3", + "is-arguments": "^1.0.4", + "is-generator-function": "^1.0.7", + "is-typed-array": "^1.1.3", + "which-typed-array": "^1.1.2" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "license": "MIT" @@ -39863,6 +40884,53 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/wrap-ansi-cjs": { + "name": "wrap-ansi", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/wrap-ansi-cjs/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/wrap-ansi-cjs/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, "node_modules/wrap-ansi/node_modules/ansi-styles": { "version": "4.3.0", "license": "MIT", diff --git a/package.json b/package.json index a3bf75281d..e739894c00 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "commit": "commit", "debug-test": "node --inspect-brk node_modules/.bin/jest --runInBand --coverage", "stylelint": "stylelint \"src/**/*.scss\" \"scss/**/*.scss\" \"www/src/**/*.scss\" --config .stylelintrc.json", - "lint": "npm run stylelint && eslint --ext .js --ext .jsx --ext .ts --ext .tsx . && npm run lint --workspaces --if-present", + "lint": "npm run stylelint && eslint --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json . && npm run lint --workspaces --if-present", "prepublishOnly": "npm run build", "semantic-release": "semantic-release", "snapshot": "jest --updateSnapshot", @@ -51,11 +51,14 @@ "playroom:build": "npm run playroom:build --workspace=www", "prepare": "husky || true", "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css", + "build-tokens:watch": "npx nodemon --ignore styles/css -x \"npm run build-tokens\"", "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage", - "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition" + "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition", + "cli:help": "./bin/paragon-scripts.js help" }, "dependencies": { "@popperjs/core": "^2.11.4", + "@tokens-studio/sd-transforms": "^1.2.4", "axios": "^0.27.2", "bootstrap": "^4.6.2", "chalk": "^4.1.2", @@ -93,7 +96,7 @@ "react-table": "^7.7.0", "react-transition-group": "^4.4.2", "sass": "^1.58.3", - "style-dictionary": "^3.7.1", + "style-dictionary": "^4.0.1", "tabbable": "^5.3.3", "uncontrollable": "^7.2.1", "uuid": "^9.0.0" @@ -114,7 +117,7 @@ "@babel/preset-typescript": "^7.16.7", "@edx/eslint-config": "^3.2.0", "@edx/stylelint-config-edx": "^2.3.0", - "@edx/typescript-config": "^1.0.1", + "@edx/typescript-config": "^1.1.0", "@formatjs/cli": "^5.0.2", "@semantic-release/changelog": "^6.0.1", "@semantic-release/git": "^10.0.1", @@ -140,6 +143,7 @@ "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "^17.0.0", "eslint-plugin-import": "2.27.5", + "eslint-plugin-jsonc": "^2.18.1", "eslint-plugin-jsx-a11y": "6.7.1", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", diff --git a/src/Annotation/index.scss b/src/Annotation/index.scss index a06f5629a1..19519cd00a 100644 --- a/src/Annotation/index.scss +++ b/src/Annotation/index.scss @@ -1,5 +1,21 @@ @import "mixins"; +:root { + --pgn-elevation-annotation-box-shadow: + drop-shadow( + var(--pgn-elevation-annotation-box-shadow-1-offset-x) + var(--pgn-elevation-annotation-box-shadow-1-offset-y) + var(--pgn-elevation-annotation-box-shadow-1-blur) + var(--pgn-elevation-annotation-box-shadow-1-color) + ) + drop-shadow( + var(--pgn-elevation-annotation-box-shadow-2-offset-x) + var(--pgn-elevation-annotation-box-shadow-2-offset-y) + var(--pgn-elevation-annotation-box-shadow-2-blur) + var(--pgn-elevation-annotation-box-shadow-2-color) + ); +} + .pgn__annotation { padding: var(--pgn-spacing-annotation-padding); border-radius: var(--pgn-size-annotation-border-radius); diff --git a/src/Card/CardDeck.jsx b/src/Card/CardDeck.jsx index 0a2ac1f0b8..7780b2034d 100644 --- a/src/Card/CardDeck.jsx +++ b/src/Card/CardDeck.jsx @@ -1,7 +1,6 @@ import React, { Children, useMemo } from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; -import BaseCardDeck from 'react-bootstrap/CardDeck'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; import { useOverflowScrollItems } from '../OverflowScroll'; @@ -102,6 +101,4 @@ CardDeck.defaultProps = { hasEqualColumnHeights: true, }; -CardDeck.Deprecated = BaseCardDeck; - export default CardDeck; diff --git a/src/Card/README.md b/src/Card/README.md index c8c23c7546..742cc3efea 100644 --- a/src/Card/README.md +++ b/src/Card/README.md @@ -899,37 +899,6 @@ For accessibility, if the child `Card` components are interactive (e.g., `isClic } ``` -### CardDeck.Deprecated - -Gives any child `Card` components equal height with an appropriate gutter between cards. Each child `Card` component's width will be adjusted (e.g., become more narrow) to ensure all `Card` components fit within its parent's width. - -Note: This component is a pass-thru from `react-bootstrap`. - -```jsx live -() => { - const CardComponent = () => ( - - - - - - - - ); - - return ( - - - - - - ) -} -``` - ## CardCarousel Extends `CardDeck` to support navigating between any overflow `Card` components via left and right `IconButton` components as a scrollable carousel. diff --git a/src/Card/index.scss b/src/Card/index.scss index aec6589e83..383726a8cf 100644 --- a/src/Card/index.scss +++ b/src/Card/index.scss @@ -136,11 +136,11 @@ a.pgn__card { } .pgn__card-header-title-sm { - font-size: var(--pgn-typography-font-size-h4); + font-size: var(--pgn-typography-font-size-h4-base); } .pgn__card-header-title-md { - font-size: var(--pgn-typography-font-size-h3); + font-size: var(--pgn-typography-font-size-h3-base); } %header-subtitle { @@ -155,11 +155,11 @@ a.pgn__card { } .pgn__card-header-subtitle-sm { - font-size: var(--pgn-typography-font-size-h5); + font-size: var(--pgn-typography-font-size-h5-base); } .pgn__card-header-subtitle-md { - font-size: var(--pgn-typography-font-size-h4); + font-size: var(--pgn-typography-font-size-h4-base); } .pgn__card-header-actions { @@ -271,7 +271,7 @@ a.pgn__card { .pgn__card-section-title { color: var(--pgn-color-black); font-weight: var(--pgn-typography-font-weight-bold); - font-size: var(--pgn-typography-font-size-h5); + font-size: var(--pgn-typography-font-size-h5-base); margin-bottom: var(--pgn-spacing-card-spacer-y); } @@ -392,7 +392,7 @@ a.pgn__card { } .pgn__card-status__heading { - font-size: var(--pgn-typography-font-size-h4); + font-size: var(--pgn-typography-font-size-h4-base); color: var(--pgn-color-black); display: flex; font-weight: var(--pgn-typography-font-weight-bold); diff --git a/src/Carousel/index.scss b/src/Carousel/index.scss index a046f79f46..29e6bc078b 100644 --- a/src/Carousel/index.scss +++ b/src/Carousel/index.scss @@ -1,3 +1,26 @@ +:root { + --pgn-transition-carousel-base: + var(--pgn-transition-carousel-base-property) + var(--pgn-transition-carousel-base-duration) + var(--pgn-transition-carousel-base-timing-function) + var(--pgn-transition-carousel-base-delay) + var(--pgn-transition-carousel-base-behavior); + + --pgn-transition-carousel-indicator: + var(--pgn-transition-carousel-indicator-property) + var(--pgn-transition-carousel-indicator-duration) + var(--pgn-transition-carousel-indicator-timing-function) + var(--pgn-transition-carousel-indicator-delay) + var(--pgn-transition-carousel-indicator-behavior); + + --pgn-transition-carousel-control: + var(--pgn-transition-carousel-control-property) + var(--pgn-transition-carousel-control-duration) + var(--pgn-transition-carousel-control-timing-function) + var(--pgn-transition-carousel-control-delay) + var(--pgn-transition-carousel-control-behavior); +} + .carousel { position: relative; } @@ -58,7 +81,7 @@ .active.carousel-item-right { z-index: 0; opacity: 0; - transition: opacity 0s var(--pgn-transition-carousel-base); + transition: var(--pgn-transition-carousel-base); } } diff --git a/src/CloseButton/index.scss b/src/CloseButton/index.scss index cde16e1bb3..750f47d3f3 100644 --- a/src/CloseButton/index.scss +++ b/src/CloseButton/index.scss @@ -1,3 +1,11 @@ +:root { + --pgn-elevation-close-button-text-shadow: + var(--pgn-elevation-close-button-text-shadow-offset-x) + var(--pgn-elevation-close-button-text-shadow-offset-y) + var(--pgn-elevation-close-button-text-shadow-blur) + var(--pgn-elevation-close-button-text-shadow-color); +} + .close { float: right; font-weight: var(--pgn-typography-close-button-font-weight); diff --git a/src/ColorPicker/index.scss b/src/ColorPicker/index.scss index 1e5bad7cd2..db46647e62 100644 --- a/src/ColorPicker/index.scss +++ b/src/ColorPicker/index.scss @@ -37,7 +37,7 @@ .pgn__hex-label { font-weight: bold; - font-size: var(--pgn-typography-font-size-mobile-h5); + font-size: var(--pgn-typography-font-size-h5-mobile); padding: .5rem; margin-bottom: 0 !important; } diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss index 62e8e01a3d..4292f5bde3 100644 --- a/src/DataTable/index.scss +++ b/src/DataTable/index.scss @@ -1,3 +1,15 @@ +:root { + --pgn-elevation-data-table-box-shadow: + var(--pgn-elevation-data-table-box-shadow-offset-x) + var(--pgn-elevation-data-table-box-shadow-offset-y) + var(--pgn-elevation-data-table-box-shadow-blur) + var(--pgn-elevation-data-table-box-shadow-color); + + --pgn-spacing-data-table-padding-cell: + var(--pgn-spacing-data-table-padding-cell-x) + var(--pgn-spacing-data-table-padding-cell-y); +} + .pgn__data-table-wrapper { font-size: var(--pgn-typography-font-size-sm); border-radius: var(--pgn-size-border-radius-base); diff --git a/src/Dropdown/dropdown-bootstrap.scss b/src/Dropdown/dropdown-bootstrap.scss index 49a4c052f1..2575d841c5 100644 --- a/src/Dropdown/dropdown-bootstrap.scss +++ b/src/Dropdown/dropdown-bootstrap.scss @@ -1,3 +1,9 @@ +:root { + --pgn-spacing-dropdown-padding-header: + var(--pgn-spacing-dropdown-padding-header-y) + var(--pgn-spacing-dropdown-padding-header-x); +} + .dropup, .dropright, .dropdown, diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss index c1c4ae871c..b2d382c72e 100644 --- a/src/Dropzone/index.scss +++ b/src/Dropzone/index.scss @@ -1,3 +1,37 @@ +:root { + --pgn-elevation-dropzone-hover: + var(--pgn-elevation-dropzone-hover-inset) + var(--pgn-elevation-dropzone-hover-offset-x) + var(--pgn-elevation-dropzone-hover-offset-y) + var(--pgn-elevation-dropzone-hover-blur) + var(--pgn-elevation-dropzone-hover-spread) + var(--pgn-elevation-dropzone-hover-color); + + --pgn-elevation-dropzone-focus: + var(--pgn-elevation-dropzone-focus-inset) + var(--pgn-elevation-dropzone-focus-offset-x) + var(--pgn-elevation-dropzone-focus-offset-y) + var(--pgn-elevation-dropzone-focus-blur) + var(--pgn-elevation-dropzone-focus-spread) + var(--pgn-elevation-dropzone-focus-color); + + --pgn-elevation-dropzone-error: + var(--pgn-elevation-dropzone-error-inset) + var(--pgn-elevation-dropzone-error-offset-x) + var(--pgn-elevation-dropzone-error-offset-y) + var(--pgn-elevation-dropzone-error-blur) + var(--pgn-elevation-dropzone-error-spread) + var(--pgn-elevation-dropzone-error-color); + + --pgn-elevation-dropzone-active: + var(--pgn-elevation-dropzone-active-inset) + var(--pgn-elevation-dropzone-active-offset-x) + var(--pgn-elevation-dropzone-active-offset-y) + var(--pgn-elevation-dropzone-active-blur) + var(--pgn-elevation-dropzone-active-spread) + var(--pgn-elevation-dropzone-active-color); +} + .pgn__dropzone { display: flex; justify-content: center; diff --git a/src/Form/_FormText.scss b/src/Form/_FormText.scss index 3f19d55ab5..6e22e92a7d 100644 --- a/src/Form/_FormText.scss +++ b/src/Form/_FormText.scss @@ -1,5 +1,5 @@ .pgn__form-text { - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); display: flex; align-items: center; diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss index b462f84da0..335d07fb06 100644 --- a/src/Form/_bootstrap-custom-forms.scss +++ b/src/Form/_bootstrap-custom-forms.scss @@ -1,3 +1,43 @@ +:root { + --pgn-elevation-form-control-indicator-checked-focus: + var(--pgn-elevation-form-control-indicator-checked-focus-offset-x) + var(--pgn-elevation-form-control-indicator-checked-focus-offset-y) + var(--pgn-elevation-form-control-indicator-checked-focus-blur) + var(--pgn-elevation-form-control-indicator-checked-focus-spread) + var(--pgn-elevation-form-control-indicator-checked-focus-color); + + --pgn-elevation-form-control-select-border-focus: + var(--pgn-elevation-form-control-select-border-focus-offset-x) + var(--pgn-elevation-form-control-select-border-focus-offset-y) + var(--pgn-elevation-form-control-select-border-focus-blur) + var(--pgn-elevation-form-control-select-border-focus-spread) + var(--pgn-elevation-form-control-select-border-focus-color); + + --pgn-elevation-form-control-file-focus: + var(--pgn-elevation-form-control-file-focus-offset-x) + var(--pgn-elevation-form-control-file-focus-offset-y) + var(--pgn-elevation-form-control-file-focus-blur) + var(--pgn-elevation-form-control-file-focus-spread) + var(--pgn-elevation-form-control-file-focus-color); + + --pgn-transition-form-control: + var(--pgn-transition-form-control-1-property) + var(--pgn-transition-form-control-1-duration) + var(--pgn-transition-form-control-1-timing-function) + var(--pgn-transition-form-control-1-delay) + var(--pgn-transition-form-control-1-behavior), + var(--pgn-transition-form-control-2-property) + var(--pgn-transition-form-control-2-duration) + var(--pgn-transition-form-control-2-timing-function) + var(--pgn-transition-form-control-2-delay) + var(--pgn-transition-form-control-2-behavior), + var(--pgn-transition-form-control-3-property) + var(--pgn-transition-form-control-3-duration) + var(--pgn-transition-form-control-3-timing-function) + var(--pgn-transition-form-control-3-delay) + var(--pgn-transition-form-control-3-behavior); +} + // Embedded icons from Open Iconic. // Released under MIT and copyright 2014 Waybury. // https://useiconic.com/open diff --git a/src/Form/_index.scss b/src/Form/_index.scss index ccf3f58818..1452f8104f 100644 --- a/src/Form/_index.scss +++ b/src/Form/_index.scss @@ -5,6 +5,15 @@ @import "FormText"; @import "FormControlSet"; +:root { + --pgn-elevation-form-control-indicator-checked-focus: + var(--pgn-elevation-form-control-indicator-checked-focus-offset-x) + var(--pgn-elevation-form-control-indicator-checked-focus-offset-y) + var(--pgn-elevation-form-control-indicator-checked-focus-blur) + var(--pgn-elevation-form-control-indicator-checked-focus-spread) + var(--pgn-elevation-form-control-indicator-checked-focus-color); +} + // A form input state used by the now deprecate Fieldset and asInput // we can remove this when they are deleted. .form-control.is-invalid.is-invalid-nodanger { diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss index 6493a51fa9..89af16b140 100644 --- a/src/Form/_mixins.scss +++ b/src/Form/_mixins.scss @@ -1,3 +1,25 @@ +:root { + --pgn-elevation-form-input-focus: + var(--pgn-elevation-form-input-focus-offset-x) + var(--pgn-elevation-form-input-focus-offset-y) + var(--pgn-elevation-form-input-focus-blur) + var(--pgn-elevation-form-input-focus-spread) + var(--pgn-elevation-form-input-focus-color); + + --pgn-spacing-form-control-select-feedback-icon-position: + var(--pgn-spacing-form-control-select-feedback-icon-position-position-y) + var(--pgn-spacing-form-control-select-feedback-icon-position-position-x) + var(--pgn-spacing-form-control-select-feedback-icon-position-offset-x) + var(--pgn-spacing-form-control-select-feedback-icon-position-offset-y); + + --pgn-other-content-form-control-select-bg: + var(--pgn-other-content-form-control-select-bg-image) + var(--pgn-other-content-form-control-select-bg-position-x) + var(--pgn-other-content-form-control-select-bg-offset-y) + var(--pgn-other-content-form-control-select-bg-position-y) + / var(--pgn-other-content-form-control-select-bg-color); // stylelint-disable-line scss/operator-no-newline-before +} + @mixin form-control-floating-label-initial( $padding-x, $padding-y, diff --git a/src/IconButton/index.scss b/src/IconButton/index.scss index d1454db5d9..54792c04c5 100644 --- a/src/IconButton/index.scss +++ b/src/IconButton/index.scss @@ -1,5 +1,151 @@ @import "mixins"; +:root { + --pgn-elevation-icon-button-box-shadow-primary-base: + var(--pgn-elevation-icon-button-box-shadow-primary-base-inset) + var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-primary-base-blur) + var(--pgn-elevation-icon-button-box-shadow-primary-base-spread) + var(--pgn-elevation-icon-button-box-shadow-primary-base-color); + + --pgn-elevation-icon-button-box-shadow-primary-inverse: + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-primary-inverse-color); + + --pgn-elevation-icon-button-box-shadow-secondary-base: + var(--pgn-elevation-icon-button-box-shadow-secondary-base-inset) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-blur) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-spread) + var(--pgn-elevation-icon-button-box-shadow-secondary-base-color); + + --pgn-elevation-icon-button-box-shadow-secondary-inverse: + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-color); + + --pgn-elevation-icon-button-box-shadow-brand-base: + var(--pgn-elevation-icon-button-box-shadow-brand-base-inset) + var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-brand-base-blur) + var(--pgn-elevation-icon-button-box-shadow-brand-base-spread) + var(--pgn-elevation-icon-button-box-shadow-brand-base-color); + + --pgn-elevation-icon-button-box-shadow-brand-inverse: + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-brand-inverse-color); + + --pgn-elevation-icon-button-box-shadow-success-base: + var(--pgn-elevation-icon-button-box-shadow-success-base-inset) + var(--pgn-elevation-icon-button-box-shadow-success-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-success-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-success-base-blur) + var(--pgn-elevation-icon-button-box-shadow-success-base-spread) + var(--pgn-elevation-icon-button-box-shadow-success-base-color); + + --pgn-elevation-icon-button-box-shadow-success-inverse: + var(--pgn-elevation-icon-button-box-shadow-success-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-success-inverse-color); + + --pgn-elevation-icon-button-box-shadow-warning-base: + var(--pgn-elevation-icon-button-box-shadow-warning-base-inset) + var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-warning-base-blur) + var(--pgn-elevation-icon-button-box-shadow-warning-base-spread) + var(--pgn-elevation-icon-button-box-shadow-warning-base-color); + + --pgn-elevation-icon-button-box-shadow-warning-inverse: + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-warning-inverse-color); + + --pgn-elevation-icon-button-box-shadow-danger-base: + var(--pgn-elevation-icon-button-box-shadow-danger-base-inset) + var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-danger-base-blur) + var(--pgn-elevation-icon-button-box-shadow-danger-base-spread) + var(--pgn-elevation-icon-button-box-shadow-danger-base-color); + + --pgn-elevation-icon-button-box-shadow-danger-inverse: + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-danger-inverse-color); + + --pgn-elevation-icon-button-box-shadow-light-base: + var(--pgn-elevation-icon-button-box-shadow-light-base-inset) + var(--pgn-elevation-icon-button-box-shadow-light-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-light-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-light-base-blur) + var(--pgn-elevation-icon-button-box-shadow-light-base-spread) + var(--pgn-elevation-icon-button-box-shadow-light-base-color); + + --pgn-elevation-icon-button-box-shadow-light-inverse: + var(--pgn-elevation-icon-button-box-shadow-light-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-light-inverse-color); + + --pgn-elevation-icon-button-box-shadow-dark-base: + var(--pgn-elevation-icon-button-box-shadow-dark-base-inset) + var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-dark-base-blur) + var(--pgn-elevation-icon-button-box-shadow-dark-base-spread) + var(--pgn-elevation-icon-button-box-shadow-dark-base-color); + + --pgn-elevation-icon-button-box-shadow-dark-inverse: + var(--pgn-elevation-icon-button-box-shadow-dark-inverse) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-dark-inverse-color); + + --pgn-elevation-icon-button-box-shadow-black-base: + var(--pgn-elevation-icon-button-box-shadow-black-base-inset) + var(--pgn-elevation-icon-button-box-shadow-black-base-offset-x) + var(--pgn-elevation-icon-button-box-shadow-black-base-offset-y) + var(--pgn-elevation-icon-button-box-shadow-black-base-blur) + var(--pgn-elevation-icon-button-box-shadow-black-base-spread) + var(--pgn-elevation-icon-button-box-shadow-black-base-color); + + --pgn-elevation-icon-button-box-shadow-black-inverse: + var(--pgn-elevation-icon-button-box-shadow-black-inverse-inset) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-x) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-y) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-blur) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-spread) + var(--pgn-elevation-icon-button-box-shadow-black-inverse-color); +} + .btn-icon { @include btn-icon-size(var(--pgn-size-icon-button-diameter-md)); diff --git a/src/Menu/index.scss b/src/Menu/index.scss index fddd792f10..1d3fded3f3 100644 --- a/src/Menu/index.scss +++ b/src/Menu/index.scss @@ -1,3 +1,11 @@ +:root { + --pgn-elevation-menu-box-shadow: + var(--pgn-elevation-menu-box-shadow-offset-x) + var(--pgn-elevation-menu-box-shadow-offset-y) + var(--pgn-elevation-menu-box-shadow-blur) + var(--pgn-elevation-menu-box-shadow-color); +} + .pgn__menu { border-radius: var(--pgn-size-menu-base-border-radius); box-shadow: var(--pgn-elevation-menu-box-shadow); diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss index 1d152badd7..112574551d 100644 --- a/src/Modal/_ModalDialog.scss +++ b/src/Modal/_ModalDialog.scss @@ -1,3 +1,23 @@ +:root { + --pgn-elevation-modal-content-box-shadow-sm-up: + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x) + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y) + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-blur) + var(--pgn-elevation-modal-content-box-shadow-sm-up-1-color), + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x) + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y) + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-blur) + var(--pgn-elevation-modal-content-box-shadow-sm-up-2-color); + + --pgn-spacing-modal-footer-padding-base: + var(--pgn-spacing-modal-footer-padding-base-y) + var(--pgn-spacing-modal-footer-padding-base-x); + + --pgn-spacing-modal-header-padding-base: + var(--pgn-spacing-modal-header-padding-base-y) + var(--pgn-spacing-modal-header-padding-base-x); +} + .pgn__modal { background: var(--pgn-color-modal-content-bg); border-radius: calc(var(--pgn-size-modal-content-border-radius) - var(--pgn-size-modal-content-border-width)); @@ -122,7 +142,7 @@ } .pgn__modal-title { - font-size: var(--pgn-typography-font-size-h3); + font-size: var(--pgn-typography-font-size-h3-base); margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn text-align: start; } @@ -310,7 +330,7 @@ } .pgn__modal-title { - font-size: var(--pgn-typography-font-size-h4); + font-size: var(--pgn-typography-font-size-h4-base); display: flex; flex-grow: 1; align-items: center; diff --git a/src/Nav/index.scss b/src/Nav/index.scss index 7257f889b3..88fc0109a7 100644 --- a/src/Nav/index.scss +++ b/src/Nav/index.scss @@ -1,5 +1,13 @@ @import "mixins"; +:root { + --pgn-border-color-nav-tabs-link-border-hover: + var(--pgn-border-color-nav-tabs-link-border-hover-top) + var(--pgn-border-color-nav-tabs-link-border-hover-right) + var(--pgn-border-color-nav-tabs-link-border-hover-bottom) + var(--pgn-border-color-nav-tabs-link-border-hover-left); +} + // Base class // // Kickstart any navigation component with a set of style resets. Works with diff --git a/src/PageBanner/index.scss b/src/PageBanner/index.scss index 320b2be9f5..0b6cf3f05f 100644 --- a/src/PageBanner/index.scss +++ b/src/PageBanner/index.scss @@ -4,12 +4,12 @@ min-height: 36px; display: flex; flex-wrap: nowrap; - font-size: var(--pgn-typography-font-size-small-x); + font-size: var(--pgn-typography-font-size-xs); background-color: var(--pgn-page-baner-bg, inherit); color: var(--pgn-page-baner-color, inherit); @include media-breakpoint-up(md) { - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); } } diff --git a/src/Pagination/pagination-bootstrap.scss b/src/Pagination/pagination-bootstrap.scss index 505732b90d..282f9e6ad8 100644 --- a/src/Pagination/pagination-bootstrap.scss +++ b/src/Pagination/pagination-bootstrap.scss @@ -1,3 +1,12 @@ +:root { + --pgn-elevation-pagination-focus-box-shadow: + var(--pgn-elevation-pagination-focus-box-shadow-offset-x) + var(--pgn-elevation-pagination-focus-box-shadow-offset-y) + var(--pgn-elevation-pagination-focus-box-shadow-blur) + var(--pgn-elevation-pagination-focus-box-shadow-spread) + var(--pgn-elevation-pagination-focus-box-shadow-color); +} + .pagination { display: flex; diff --git a/src/Popover/index.scss b/src/Popover/index.scss index e646c6db9b..27c50e7cdd 100644 --- a/src/Popover/index.scss +++ b/src/Popover/index.scss @@ -7,7 +7,7 @@ .popover-header { display: flex; align-items: center; - font-size: var(--pgn-typography-font-size-h5); + font-size: var(--pgn-typography-font-size-h5-base); } .pgn__icon { diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss index 3ae48c1d54..808b31a54d 100644 --- a/src/ProductTour/Checkpoint.scss +++ b/src/ProductTour/Checkpoint.scss @@ -88,7 +88,7 @@ } #pgn__checkpoint-title { - font-size: var(--pgn-typography-font-size-h3); + font-size: var(--pgn-typography-font-size-h3-base); margin-inline-end: map_get($spacers, 2\.5); margin-bottom: 0; } diff --git a/src/ProgressBar/bootstrap-progress.scss b/src/ProgressBar/bootstrap-progress.scss index 27bee9a446..77779f295f 100644 --- a/src/ProgressBar/bootstrap-progress.scss +++ b/src/ProgressBar/bootstrap-progress.scss @@ -1,3 +1,18 @@ +:root { + --pgn-transition-progress-bar-animation-timing: + var(--pgn-transition-progress-bar-animation-timing-duration) + var(--pgn-transition-progress-bar-animation-timing-timing-function) + var(--pgn-transition-progress-bar-animation-timing-iteration-count) + var(--pgn-transition-progress-bar-animation-timing-delay); + + --pgn-transition-progress-bar-transition: + var(--pgn-transition-progress-bar-transition-property) + var(--pgn-transition-progress-bar-transition-duration) + var(--pgn-transition-progress-bar-transition-timing-function) + var(--pgn-transition-progress-bar-transition-delay) + var(--pgn-transition-progress-bar-transition-behavior); +} + @if $enable-transitions { @keyframes progress-bar-stripes { from { background-position: var(--pgn-size-progress-bar-height-base) 0; } @@ -10,7 +25,7 @@ height: var(--pgn-size-progress-bar-height-base); overflow: hidden; line-height: 0; - background-color: var(--pgn-color-progress-bar-bg); + background-color: var(--pgn-color-progress-bg); box-shadow: var(--pgn-elevation-progress-bar-box-shadow); @include font-size(var(--pgn-typography-progress-bar-font-size)); @@ -22,12 +37,12 @@ flex-direction: column; justify-content: center; overflow: hidden; - color: var(--pgn-color-progress-bar-bar-base); + color: var(--pgn-color-progress-bar-base); text-align: center; white-space: nowrap; - background-color: var(--pgn-color-progress-bar-bar-bg-base); + background-color: var(--pgn-color-progress-bar-bg-base); - @include transition(var(--pgn-transition-progress-bar-bar-transition)); + @include transition(var(--pgn-transition-progress-bar-transition)); } .progress-bar-striped { @@ -38,7 +53,7 @@ @if $enable-transitions { .progress-bar-animated { - animation: var(--pgn-transition-progress-bar-bar-animation-timing) progress-bar-stripes; + animation: var(--pgn-transition-progress-bar-animation-timing) progress-bar-stripes; @if $enable-prefers-reduced-motion-media-query { @media (prefers-reduced-motion: reduce) { diff --git a/src/ProgressBar/index.scss b/src/ProgressBar/index.scss index 3f4852536e..2489e94453 100644 --- a/src/ProgressBar/index.scss +++ b/src/ProgressBar/index.scss @@ -6,7 +6,7 @@ } .progress-bar { - background-color: var(--pgn-color-progress-bar-bar-bg-base); + background-color: var(--pgn-color-progress-bar-bg-base); } .pgn__progress-annotated { @@ -22,7 +22,7 @@ border: none; .progress-bar { - background-color: var(--pgn-color-progress-bar-bar-bg-annotated); + background-color: var(--pgn-color-progress-bar-bg-annotated); overflow: visible; position: relative; } @@ -87,6 +87,6 @@ .pgn__progress-hint { box-sizing: border-box; padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap); - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); } } diff --git a/src/Stepper/index.scss b/src/Stepper/index.scss index e89bea41be..1995425c29 100644 --- a/src/Stepper/index.scss +++ b/src/Stepper/index.scss @@ -56,7 +56,7 @@ } .pgn__stepper-header-step-description { - font-size: var(--pgn-typography-font-size-small-x); + font-size: var(--pgn-typography-font-size-xs); } &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step { diff --git a/src/Sticky/index.scss b/src/Sticky/index.scss index 54b78b0b02..b7278818cf 100644 --- a/src/Sticky/index.scss +++ b/src/Sticky/index.scss @@ -1,3 +1,15 @@ +:root { + --pgn-elevation-sticky-shadow-bottom: + var(--pgn-elevation-sticky-shadow-bottom-1-offset-x) + var(--pgn-elevation-sticky-shadow-bottom-1-offset-y) + var(--pgn-elevation-sticky-shadow-bottom-1-blur) + var(--pgn-elevation-sticky-shadow-bottom-1-color), + var(--pgn-elevation-sticky-shadow-bottom-2-offset-x) + var(--pgn-elevation-sticky-shadow-bottom-2-offset-y) + var(--pgn-elevation-sticky-shadow-bottom-2-blur) + var(--pgn-elevation-sticky-shadow-bottom-2-color); +} + .pgn__sticky { display: flex; width: 100%; diff --git a/src/Toast/index.scss b/src/Toast/index.scss index 69b6a58a46..043f65b9bc 100644 --- a/src/Toast/index.scss +++ b/src/Toast/index.scss @@ -1,5 +1,17 @@ @import "bootstrap-toast"; +:root { + --pgn-elevation-toast-box-shadow: + var(--pgn-elevation-toast-box-shadow-1-offset-x) + var(--pgn-elevation-toast-box-shadow-1-offset-y) + var(--pgn-elevation-toast-box-shadow-1-blur) + var(--pgn-elevation-toast-box-shadow-1-color), + var(--pgn-elevation-toast-box-shadow-2-offset-x) + var(--pgn-elevation-toast-box-shadow-2-offset-y) + var(--pgn-elevation-toast-box-shadow-2-blur) + var(--pgn-elevation-toast-box-shadow-2-color); +} + .toast { background-color: var(--pgn-color-toast-bg); box-shadow: var(--pgn-elevation-toast-box-shadow); @@ -31,7 +43,7 @@ padding: 0; p { - font-size: var(--pgn-typography-font-size-small-base); + font-size: var(--pgn-typography-font-size-sm); margin: 0; padding-right: .75rem; } diff --git a/src/Tooltip/index.scss b/src/Tooltip/index.scss index 722dd95328..d6c972ce02 100644 --- a/src/Tooltip/index.scss +++ b/src/Tooltip/index.scss @@ -1,3 +1,19 @@ +:root { + --pgn-elevation-tooltip-box-shadow: + drop-shadow( + var(--pgn-elevation-tooltip-box-shadow-1-offset-x) + var(--pgn-elevation-tooltip-box-shadow-1-offset-y) + var(--pgn-elevation-tooltip-box-shadow-1-blur) + var(--pgn-elevation-tooltip-box-shadow-1-color) + ) + drop-shadow( + var(--pgn-elevation-tooltip-box-shadow-2-offset-x) + var(--pgn-elevation-tooltip-box-shadow-2-offset-y) + var(--pgn-elevation-tooltip-box-shadow-2-blur) + var(--pgn-elevation-tooltip-box-shadow-2-color) + ); +} + // Base class .tooltip { position: absolute; diff --git a/styles/css/core/abstraction-variables.css b/styles/css/core/abstraction-variables.css new file mode 100644 index 0000000000..c27ac4eccb --- /dev/null +++ b/styles/css/core/abstraction-variables.css @@ -0,0 +1,44 @@ +:root { + /** + * TRANSITION + */ + --pgn-transition-base: + var(--pgn-transition-base-property) + var(--pgn-transition-base-duration) + var(--pgn-transition-base-timing-function) + var(--pgn-transition-base-delay) + var(--pgn-transition-base-behavior); + + --pgn-transition-fade: + var(--pgn-transition-fade-property) + var(--pgn-transition-fade-duration) + var(--pgn-transition-fade-timing-function) + var(--pgn-transition-fade-delay) + var(--pgn-transition-fade-behavior); + + --pgn-transition-collapse-height: + var(--pgn-transition-collapse-height-property) + var(--pgn-transition-collapse-height-duration) + var(--pgn-transition-collapse-height-timing-function) + var(--pgn-transition-collapse-height-delay) + var(--pgn-transition-collapse-height-behavior); + + --pgn-transition-collapse-width: + var(--pgn-transition-collapse-width-property) + var(--pgn-transition-collapse-width-duration) + var(--pgn-transition-collapse-width-timing-function) + var(--pgn-transition-collapse-width-delay) + var(--pgn-transition-collapse-width-behavior); + + --pgn-transition-form-input: + var(--pgn-transition-form-input-1-property) + var(--pgn-transition-form-input-1-duration) + var(--pgn-transition-form-input-1-timing-function) + var(--pgn-transition-form-input-1-delay) + var(--pgn-transition-form-input-1-behavior), + var(--pgn-transition-form-input-2-property) + var(--pgn-transition-form-input-2-duration) + var(--pgn-transition-form-input-2-timing-function) + var(--pgn-transition-form-input-2-delay) + var(--pgn-transition-form-input-2-behavior); +} diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css index f7f2c035ab..b1785ba2ed 100644 --- a/styles/css/core/custom-media-breakpoints.css +++ b/styles/css/core/custom-media-breakpoints.css @@ -1,10 +1,9 @@ /** - * IMPORTANT: This file is the result of assembling design tokens - * Do not edit directly - * Generated on Fri, 22 Sep 2023 08:20:17 GMT + * Do not edit directly, this file was auto-generated. while transforming design tokens. + * See /tokens/README.md for more details. */ -@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0); +@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0px); @custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px); @custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px); @custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px); diff --git a/styles/css/core/index.css b/styles/css/core/index.css index 4a993a982b..f95813ae45 100644 --- a/styles/css/core/index.css +++ b/styles/css/core/index.css @@ -1,2 +1,3 @@ -@import "custom-media-breakpoints.css"; @import "variables.css"; +@import "abstraction-variables.css"; +@import "custom-media-breakpoints.css"; diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 9369b9e5a7..60832e4bf2 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,7 +1,6 @@ /** - * IMPORTANT: This file is the result of assembling design tokens - * Do not edit directly - * Generated on Wed, 15 May 2024 12:30:36 GMT + * Do not edit directly, this file was auto-generated. while transforming design tokens. + * See /tokens/README.md for more details. */ :root { @@ -10,19 +9,19 @@ --pgn-other-form-control-custom-file-lang: en; --pgn-other-form-control-range-track-cursor: pointer; --pgn-other-form-control-cursor: auto; - --pgn-elevation-zindex-fixed: 1030; - --pgn-elevation-zindex-sticky: 1020; - --pgn-elevation-zindex-2000: 2000; - --pgn-elevation-zindex-1800: 1800; - --pgn-elevation-zindex-1600: 1600; - --pgn-elevation-zindex-1400: 1400; - --pgn-elevation-zindex-1200: 1200; - --pgn-elevation-zindex-1000: 1000; - --pgn-elevation-zindex-800: 800; - --pgn-elevation-zindex-600: 600; - --pgn-elevation-zindex-400: 400; - --pgn-elevation-zindex-200: 200; - --pgn-elevation-zindex-0: 0; + --pgn-elevation-zindex-fixed: 1030; /* z-index of for fixed element. */ + --pgn-elevation-zindex-sticky: 1020; /* z-index for sticky element. */ + --pgn-elevation-zindex-2000: 2000; /* z-index of level 2000. */ + --pgn-elevation-zindex-1800: 1800; /* z-index of level 1800. */ + --pgn-elevation-zindex-1600: 1600; /* z-index of level 1600. */ + --pgn-elevation-zindex-1400: 1400; /* z-index of level 1400. */ + --pgn-elevation-zindex-1200: 1200; /* z-index of level 1200. */ + --pgn-elevation-zindex-1000: 1000; /* z-index of level 1000. */ + --pgn-elevation-zindex-800: 800; /* z-index of level 800. */ + --pgn-elevation-zindex-600: 600; /* z-index of level 600. */ + --pgn-elevation-zindex-400: 400; /* z-index of level 400. */ + --pgn-elevation-zindex-200: 200; /* z-index of level 200. */ + --pgn-elevation-zindex-0: 0; /* z-index of level 0. */ --pgn-elevation-tooltip-zindex: 1070; --pgn-elevation-sheet-zindex-main: 1032; --pgn-elevation-sheet-zindex-backdrop: 1031; @@ -31,65 +30,130 @@ --pgn-elevation-modal-zindex: 1050; --pgn-elevation-modal-backdrop-zindex: 1040; --pgn-elevation-dropdown-zindex: 1000; - --pgn-transition-collapse-width: width .35s ease; - --pgn-transition-collapse-height: height .35s ease; - --pgn-transition-fade: opacity .15s linear; - --pgn-transition-base: all .2s ease-in-out; - --pgn-transition-progress-bar-bar-transition: width .6s ease; - --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite; - --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; - --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out; - --pgn-transition-carousel-control: opacity .15s ease; - --pgn-transition-carousel-indicator: opacity .6s ease; - --pgn-transition-carousel-duration: .6s; + --pgn-transition-collapse-width-behavior: normal; /* Collapse transition for width that takes 350ms */ + --pgn-transition-collapse-width-delay: 0s; /* Collapse transition for width that takes 350ms */ + --pgn-transition-collapse-width-timing-function: ease; /* Collapse transition for width that takes 350ms */ + --pgn-transition-collapse-width-duration: 0.35s; /* Collapse transition for width that takes 350ms */ + --pgn-transition-collapse-width-property: width; /* Collapse transition for width that takes 350ms */ + --pgn-transition-collapse-height-behavior: normal; /* Collapse transition for height that takes 350ms */ + --pgn-transition-collapse-height-delay: 0s; /* Collapse transition for height that takes 350ms */ + --pgn-transition-collapse-height-timing-function: ease; /* Collapse transition for height that takes 350ms */ + --pgn-transition-collapse-height-duration: 0.35s; /* Collapse transition for height that takes 350ms */ + --pgn-transition-collapse-height-property: height; /* Collapse transition for height that takes 350ms */ + --pgn-transition-fade-behavior: normal; /* Opacity transition that takes 150ms */ + --pgn-transition-fade-delay: 0s; /* Opacity transition that takes 150ms */ + --pgn-transition-fade-timing-function: linear; /* Opacity transition that takes 150ms */ + --pgn-transition-fade-duration: 0.15s; /* Opacity transition that takes 150ms */ + --pgn-transition-fade-property: opacity; /* Opacity transition that takes 150ms */ + --pgn-transition-base-behavior: normal; /* Generic transition for any property change */ + --pgn-transition-base-delay: 0s; /* Generic transition for any property change */ + --pgn-transition-base-timing-function: ease-in-out; /* Generic transition for any property change */ + --pgn-transition-base-duration: 0.2s; /* Generic transition for any property change */ + --pgn-transition-base-property: all; /* Generic transition for any property change */ + --pgn-transition-progress-bar-transition-behavior: normal; + --pgn-transition-progress-bar-transition-delay: 0s; + --pgn-transition-progress-bar-transition-timing-function: ease; + --pgn-transition-progress-bar-transition-duration: 0.6s; + --pgn-transition-progress-bar-transition-property: width; + --pgn-transition-progress-bar-animation-timing-iteration-count: infinite; + --pgn-transition-progress-bar-animation-timing-delay: 0s; + --pgn-transition-progress-bar-animation-timing-timing-function: linear; + --pgn-transition-progress-bar-animation-timing-duration: 1s; + --pgn-transition-form-control-3-behavior: normal; + --pgn-transition-form-control-3-delay: 0s; + --pgn-transition-form-control-3-timing-function: ease-in-out; + --pgn-transition-form-control-3-duration: 0.15s; + --pgn-transition-form-control-3-property: box-shadow; + --pgn-transition-form-control-2-behavior: normal; + --pgn-transition-form-control-2-delay: 0s; + --pgn-transition-form-control-2-timing-function: ease-in-out; + --pgn-transition-form-control-2-duration: 0.15s; + --pgn-transition-form-control-2-property: border-color; + --pgn-transition-form-control-1-behavior: normal; + --pgn-transition-form-control-1-delay: 0s; + --pgn-transition-form-control-1-timing-function: ease-in-out; + --pgn-transition-form-control-1-duration: 0.15s; + --pgn-transition-form-control-1-property: background-color; + --pgn-transition-form-input-2-behavior: normal; + --pgn-transition-form-input-2-delay: 0s; + --pgn-transition-form-input-2-timing-function: ease-in-out; + --pgn-transition-form-input-2-duration: 0.15s; + --pgn-transition-form-input-2-property: box-shadow; + --pgn-transition-form-input-1-behavior: normal; + --pgn-transition-form-input-1-delay: 0s; + --pgn-transition-form-input-1-timing-function: ease-in-out; + --pgn-transition-form-input-1-duration: 0.15s; + --pgn-transition-form-input-1-property: border-color; + --pgn-transition-carousel-control-behavior: normal; + --pgn-transition-carousel-control-delay: 0ms; + --pgn-transition-carousel-control-timing-function: ease; + --pgn-transition-carousel-control-duration: 0.15s; + --pgn-transition-carousel-control-property: opacity; + --pgn-transition-carousel-indicator-behavior: normal; + --pgn-transition-carousel-indicator-delay: 0ms; + --pgn-transition-carousel-indicator-timing-function: ease; + --pgn-transition-carousel-indicator-duration: var(--pgn-transition-carousel-duration); + --pgn-transition-carousel-indicator-property: opacity; + --pgn-transition-carousel-duration: 0.6s; + --pgn-transition-carousel-base-behavior: normal; + --pgn-transition-carousel-base-delay: 0ms; + --pgn-transition-carousel-base-timing-function: ease-in-out; + --pgn-transition-carousel-base-duration: var(--pgn-transition-carousel-duration); + --pgn-transition-carousel-base-property: transform; --pgn-transition-btn: none; --pgn-transition-badge: none; - --pgn-typography-line-height-micro: .938rem; - --pgn-typography-line-height-sm: 1.5; - --pgn-typography-line-height-lg: 1.5; - --pgn-typography-line-height-base: 1.5556; - --pgn-typography-font-weight-table-th: normal; - --pgn-typography-font-weight-lead: inherit; - --pgn-typography-font-weight-bolder: bolder; - --pgn-typography-font-weight-bold: 700; - --pgn-typography-font-weight-semi-bold: 500; - --pgn-typography-font-weight-normal: 400; - --pgn-typography-font-weight-light: 300; - --pgn-typography-font-weight-lighter: lighter; - --pgn-typography-font-size-micro: .688rem; - --pgn-typography-font-size-mobile-h1: 2.25rem; - --pgn-typography-font-size-h6: .75rem; - --pgn-typography-font-size-h5: .875rem; - --pgn-typography-font-size-h4: 1.125rem; - --pgn-typography-font-size-h3: 1.375rem; - --pgn-typography-font-size-h2: 2rem; - --pgn-typography-font-size-h1: 2.5rem; - --pgn-typography-font-size-small-x: 75%; - --pgn-typography-font-size-small-base: 87.5%; - --pgn-typography-font-size-xs: .75rem; - --pgn-typography-font-size-sm: .875rem; - --pgn-typography-font-size-lg: 1.4063rem; - --pgn-typography-font-size-base: 1.125rem; - --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --pgn-typography-font-family-serif: serif; - --pgn-typography-font-family-sans-serif: -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"; --pgn-typography-print-page-size: a3; - --pgn-typography-display-mobile: 3.25rem; - --pgn-typography-display-line-height-mobile: 3.5rem; - --pgn-typography-display-line-height-base: 1; - --pgn-typography-display-4: 7.5rem; - --pgn-typography-display-3: 5.625rem; - --pgn-typography-display-2: 4.875rem; - --pgn-typography-display-1: 3.75rem; - --pgn-typography-toast-font-size: .875rem; - --pgn-typography-spacer-line-height: 1px; - --pgn-typography-pagination-line-height: 1.5rem; - --pgn-typography-pagination-font-size-sm: .875rem; - --pgn-typography-nav-link-text-decoration: none; - --pgn-typography-nav-link-font-weight: 500; - --pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem; - --pgn-typography-menu-select-btn-link-text-decoration-line: underline; - --pgn-typography-image-figure-caption-font-size: 90%; + --pgn-typography-line-height-display-mobile: 3.5rem; /* Mobile display line height. */ + --pgn-typography-line-height-display-base: 1; /* Standard display line height. */ + --pgn-typography-line-height-micro: 0.938rem; /* Micro utils line height. */ + --pgn-typography-line-height-sm: 1.5; /* Small line height. */ + --pgn-typography-line-height-lg: 1.5; /* Large line height. */ + --pgn-typography-line-height-base: 1.5556; /* Basic line height. */ + --pgn-typography-font-weight-display-4: var(--pgn-typography-font-weight-bold); /* Font weight of display level 4. */ + --pgn-typography-font-weight-display-3: var(--pgn-typography-font-weight-bold); /* Font weight of display level 3. */ + --pgn-typography-font-weight-display-2: var(--pgn-typography-font-weight-bold); /* Font weight of display level 2. */ + --pgn-typography-font-weight-display-1: var(--pgn-typography-font-weight-bold); /* Font weight of display level 1. */ + --pgn-typography-font-weight-table-th: 700; /* Table th font weight. */ + --pgn-typography-font-weight-lead: inherit; /* Lead text font weight. */ + --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); /* Basic font weight. */ + --pgn-typography-font-weight-bolder: bolder; /* Bolder font weight. */ + --pgn-typography-font-weight-bold: 700; /* Bold font weight. */ + --pgn-typography-font-weight-semi-bold: 500; /* Semi-bold font weight. */ + --pgn-typography-font-weight-normal: 400; /* Normal font weight. */ + --pgn-typography-font-weight-light: 300; /* Light font weight. */ + --pgn-typography-font-weight-lighter: lighter; /* Lighter font weight. */ + --pgn-typography-font-size-display-mobile-4: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 4. */ + --pgn-typography-font-size-display-mobile-3: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 3. */ + --pgn-typography-font-size-display-mobile-2: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 2. */ + --pgn-typography-font-size-display-mobile-1: 3.25rem; /* Mobile font size for heading of level 1. */ + --pgn-typography-font-size-display-4: 7.5rem; /* Font size for heading of level 4. */ + --pgn-typography-font-size-display-3: 5.625rem; /* Font size for heading of level 3. */ + --pgn-typography-font-size-display-2: 4.875rem; /* Font size for heading of level 2. */ + --pgn-typography-font-size-display-1: 3.75rem; /* Font size for heading of level 1. */ + --pgn-typography-font-size-h6-mobile: var(--pgn-typography-font-size-h6-base); /* Mobile font size of heading level 6. */ + --pgn-typography-font-size-h6-base: 0.75rem; /* Font size of heading level 6. */ + --pgn-typography-font-size-h5-mobile: var(--pgn-typography-font-size-h5-base); /* Mobile font size of heading level 5. */ + --pgn-typography-font-size-h5-base: 0.875rem; /* Font size of heading level 5. */ + --pgn-typography-font-size-h4-mobile: var(--pgn-typography-font-size-h4-base); /* Mobile font size of heading level 4. */ + --pgn-typography-font-size-h4-base: 1.125rem; /* Font size of heading level 4. */ + --pgn-typography-font-size-h3-mobile: var(--pgn-typography-font-size-h3-base); /* Mobile font size of heading level 3. */ + --pgn-typography-font-size-h3-base: 1.375rem; /* Font size of heading level 3. */ + --pgn-typography-font-size-h2-mobile: var(--pgn-typography-font-size-h2-base); /* Mobile font size of heading level 2. */ + --pgn-typography-font-size-h2-base: 2rem; /* Font size of heading level 2. */ + --pgn-typography-font-size-h1-mobile: 2.25rem; /* Mobile font size of heading level 1. */ + --pgn-typography-font-size-h1-base: 2.5rem; /* Base font size of heading level 1. */ + --pgn-typography-font-size-micro: 0.688rem; /* Micro utils text font size. */ + --pgn-typography-font-size-xs: 75%; /* X-small font size. */ + --pgn-typography-font-size-sm: 87.5%; /* Small font size. */ + --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25); /* Lead text font size. */ + --pgn-typography-font-size-base: 1.125rem; /* Base font size. */ + --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Monospace font family. */ + --pgn-typography-font-family-serif: serif; /* Serif font family. */ + --pgn-typography-font-family-sans-serif: -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'; /* Sans-serif font family. */ + --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); /* Basic font family. */ + --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25); + --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold); --pgn-typography-link-decoration-brand-inline-hover: underline; --pgn-typography-link-decoration-brand-inline-base: underline; --pgn-typography-link-decoration-brand-hover: underline; @@ -102,254 +166,437 @@ --pgn-typography-link-decoration-inline-base: underline; --pgn-typography-link-decoration-hover: underline; --pgn-typography-link-decoration-base: none; + --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg); --pgn-typography-input-btn-line-height-sm: 1.4286; --pgn-typography-input-btn-line-height-base: 1.3333; --pgn-typography-input-btn-font-size-lg: 1.325rem; - --pgn-typography-input-btn-font-size-sm: .875rem; + --pgn-typography-input-btn-font-size-sm: 0.875rem; --pgn-typography-input-btn-font-size-base: 1.125rem; --pgn-typography-input-btn-font-family: inherit; --pgn-typography-headings-line-height: 1.25; + --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold); --pgn-typography-headings-font-family: inherit; + --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-toast-font-size: 0.875rem; + --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs); + --pgn-typography-spacer-line-height: 1px; + --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75); + --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-pagination-line-height: 1.5rem; + --pgn-typography-pagination-font-size-sm: 0.875rem; + --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg); + --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2); + --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg); + --pgn-typography-nav-link-text-decoration: none; + --pgn-typography-nav-link-font-weight: 500; + --pgn-typography-menu-select-btn-link-text-decoration-thickness: 0.125rem; + --pgn-typography-menu-select-btn-link-text-decoration-line: underline; + --pgn-typography-image-figure-caption-font-size: 90%; + --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base); + --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight); + --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family); + --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base); + --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base); + --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight); + --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg); + --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm); + --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base); + --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family); + --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); + --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); + --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base); + --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base); + --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg); + --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); + --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base); + --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family); + --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-xs); --pgn-typography-dropdown-item-text-decoration: none; - --pgn-typography-code-font-size: 87.5%; + --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base); + --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold); + --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size); + --pgn-typography-code-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold); + --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5); + --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-xs); + --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); + --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); + --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base); + --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal); + --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg); + --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); + --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base); + --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family); + --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold); --pgn-typography-badge-font-size: 75%; + --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm); + --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm); --pgn-typography-alert-line-height: 1.5rem; - --pgn-typography-alert-font-size: .875rem; - --pgn-spacing-grid-gutter-width: 24px; - --pgn-spacing-table-cell-padding-sm: .3rem; - --pgn-spacing-table-cell-padding-base: .75rem; - --pgn-spacing-label-margin-bottom: .5rem; - --pgn-spacing-spacer-base: 1rem; - --pgn-spacing-spacer-0: 0; - --pgn-spacing-tooltip-margin: 0; - --pgn-spacing-tooltip-padding-x: .5rem; - --pgn-spacing-tooltip-padding-y: .5rem; - --pgn-spacing-toast-container-gutter-sm: .625rem; + --pgn-typography-alert-font-size: 0.875rem; + --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); + --pgn-spacing-grid-gutter-width: 24px; /* Grid gutter width value. */ + --pgn-spacing-table-cell-padding-sm: 0.3rem; /* Padding sm for tables. */ + --pgn-spacing-table-cell-padding-base: 0.75rem; /* Padding for tables. */ + --pgn-spacing-label-margin-bottom: 0.5rem; /* Margin bottom for label. */ + --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); /* Space value of level 5.5 */ + --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); /* Space value of level 4.5 */ + --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); /* Space value of level 3.5 */ + --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); /* Space value of level 2.5 */ + --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); /* Space value of level 1.5 */ + --pgn-spacing-spacer-base: 1rem; /* Basic space value */ + --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); /* Space value of level 6 */ + --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); /* Space value of level 5 */ + --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); /* Space value of level 4 */ + --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); /* Space value of level 3 */ + --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); /* Space value of level 2 */ + --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); /* Space value of level 1 */ + --pgn-spacing-spacer-0: 0rem; /* Space value of level 0 */ + --pgn-spacing-mark-padding: 0.2em; + --pgn-spacing-paragraph-margin-bottom: 1rem; + --pgn-spacing-list-group-item-padding-x: 1.25rem; + --pgn-spacing-list-group-item-padding-y: 0.75rem; + --pgn-spacing-list-inline-padding: 0.5rem; + --pgn-spacing-input-btn-padding-lg-x: 1.25rem; + --pgn-spacing-input-btn-padding-lg-y: 0.6875rem; + --pgn-spacing-input-btn-padding-sm-x: 0.75rem; + --pgn-spacing-input-btn-padding-sm-y: 0.4375rem; + --pgn-spacing-input-btn-padding-x: 1rem; + --pgn-spacing-input-btn-padding-y: 0.5625rem; + --pgn-spacing-headings-margin-bottom: 0.5rem; + --pgn-spacing-caret-vertical-align: 0.255em; + --pgn-spacing-caret-base: 0.255em; + --pgn-spacing-tooltip-margin: 0rem; + --pgn-spacing-tooltip-padding-x: 0.5rem; + --pgn-spacing-tooltip-padding-y: 0.5rem; + --pgn-spacing-toast-container-gutter-sm: 0.625rem; --pgn-spacing-toast-container-gutter-lg: 1.25rem; - --pgn-spacing-toast-padding-y: .25rem; - --pgn-spacing-toast-padding-x: .75rem; + --pgn-spacing-toast-padding-y: 0.25rem; + --pgn-spacing-toast-padding-x: 0.75rem; --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px; - --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem; - --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem; - --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem; - --pgn-spacing-sticky-offset: 0; - --pgn-spacing-stepper-header-step-list-margin: 0; - --pgn-spacing-stepper-header-step-list-padding-x: 0; - --pgn-spacing-stepper-header-step-list-padding-y: .25rem; - --pgn-spacing-stepper-header-step-padding: .25rem; - --pgn-spacing-stepper-header-padding-y: .75rem; - --pgn-spacing-vertical-align: .125em; - --pgn-spacing-selectable-box-box-space: .75rem; - --pgn-spacing-selectable-box-border-radius: .25rem; + --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); + --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: 0.625rem; + --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); + --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: 0.625rem; + --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); + --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: 0.7rem; + --pgn-spacing-sticky-offset: 0rem; + --pgn-spacing-stepper-header-step-list-margin: 0rem; + --pgn-spacing-stepper-header-step-list-padding-x: 0rem; + --pgn-spacing-stepper-header-step-list-padding-y: 0.25rem; + --pgn-spacing-stepper-header-step-padding: 0.25rem; + --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base); + --pgn-spacing-stepper-header-padding-y: 0.75rem; + --pgn-spacing-vertical-align: 0.125em; + --pgn-spacing-selectable-box-box-space: 0.75rem; + --pgn-spacing-selectable-box-border-radius: 0.25rem; --pgn-spacing-selectable-box-padding: 1rem; - --pgn-spacing-search-field-margin-button: .5rem; - --pgn-spacing-progress-bar-hint-annotation-gap: .5rem; - --pgn-spacing-popover-icon-margin-right: .5rem; + --pgn-spacing-search-field-margin-button: 0.5rem; + --pgn-spacing-progress-bar-hint-annotation-gap: 0.5rem; + --pgn-spacing-popover-icon-margin-right: 0.5rem; + --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x); + --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y); --pgn-spacing-popover-header-padding-x: 1rem; - --pgn-spacing-popover-header-padding-y: .5rem; + --pgn-spacing-popover-header-padding-y: 0.5rem; --pgn-spacing-pagination-padding-x-lg: 1.5rem; - --pgn-spacing-pagination-padding-x-sm: .6rem; + --pgn-spacing-pagination-padding-x-sm: 0.6rem; --pgn-spacing-pagination-padding-x-base: 1rem; - --pgn-spacing-pagination-padding-y-lg: .75rem; - --pgn-spacing-pagination-padding-y-sm: .8rem; - --pgn-spacing-pagination-padding-y-base: .625rem; - --pgn-spacing-navbar-toggler-padding-x: .75rem; - --pgn-spacing-navbar-toggler-padding-y: .25rem; - --pgn-spacing-navbar-padding-x-nav-link: .5rem; + --pgn-spacing-pagination-padding-y-lg: 0.75rem; + --pgn-spacing-pagination-padding-y-sm: 0.8rem; + --pgn-spacing-pagination-padding-y-base: 0.625rem; + --pgn-spacing-navbar-toggler-padding-x: 0.75rem; + --pgn-spacing-navbar-toggler-padding-y: 0.25rem; + --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); + --pgn-spacing-navbar-padding-x-nav-link: 0.5rem; + --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base); + --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2); --pgn-spacing-nav-link-distance-to-border: 4px; --pgn-spacing-nav-link-padding-x: 1rem; - --pgn-spacing-nav-link-padding-y: .5rem; + --pgn-spacing-nav-link-padding-y: 0.5rem; --pgn-spacing-modal-dialog-margin: 1.5rem; --pgn-spacing-modal-header-padding-y: 1rem; + --pgn-spacing-modal-header-padding-base-y: var(--pgn-spacing-modal-header-padding-y); + --pgn-spacing-modal-header-padding-base-x: 1.5rem; --pgn-spacing-modal-footer-padding-y: 1rem; - --pgn-spacing-modal-inner-padding-bottom: .7rem; + --pgn-spacing-modal-footer-padding-base-y: var(--pgn-spacing-modal-footer-padding-y); + --pgn-spacing-modal-footer-padding-base-x: 1.5rem; + --pgn-spacing-modal-inner-padding-bottom: 0.7rem; --pgn-spacing-modal-inner-padding-base: 1.5rem; - --pgn-spacing-menu-item-icon-margin-left: .25em; - --pgn-spacing-image-thumbnail-padding: .25rem; - --pgn-spacing-mark-padding: .2em; - --pgn-spacing-paragraph-margin-bottom: 1rem; - --pgn-spacing-list-group-item-padding-x: 1.25rem; - --pgn-spacing-list-group-item-padding-y: .75rem; - --pgn-spacing-list-inline-padding: .5rem; - --pgn-spacing-input-btn-padding-lg-x: 1.25rem; - --pgn-spacing-input-btn-padding-lg-y: .6875rem; - --pgn-spacing-input-btn-padding-sm-x: .75rem; - --pgn-spacing-input-btn-padding-sm-y: .4375rem; - --pgn-spacing-input-btn-padding-x: 1rem; - --pgn-spacing-input-btn-padding-y: .5625rem; - --pgn-spacing-headings-margin-bottom: .5rem; - --pgn-spacing-caret-vertical-align: .255em; - --pgn-spacing-caret-base: .255em; - --pgn-spacing-form-control-select-icon-padding: .5625rem; - --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem; - --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem; + --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left); + --pgn-spacing-menu-item-icon-margin-left: 0.25em; + --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base); + --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base); + --pgn-spacing-image-thumbnail-padding: 0.25rem; + --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base); + --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base); + --pgn-spacing-form-control-select-icon-padding: 0.5625rem; + --pgn-spacing-form-control-select-feedback-tooltip-padding-x: 0.5rem; + --pgn-spacing-form-control-select-feedback-tooltip-padding-y: 0.25rem; + --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); + --pgn-spacing-form-control-select-feedback-icon-position-offset-y: 0; + --pgn-spacing-form-control-select-feedback-icon-position-offset-x: calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); + --pgn-spacing-form-control-select-feedback-icon-position-position-x: right; + --pgn-spacing-form-control-select-feedback-icon-position-position-y: center; + --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); --pgn-spacing-form-control-select-indicator-padding: 1rem; + --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg); + --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm); + --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base); + --pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg); + --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm); + --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base); --pgn-spacing-form-control-spacer-x: 1rem; - --pgn-spacing-form-control-gutter: .5rem; + --pgn-spacing-form-control-gutter: 0.5rem; --pgn-spacing-form-group-margin-bottom: 1rem; - --pgn-spacing-form-check-position-axis: .375rem; - --pgn-spacing-form-check-inline-margin-x: .75rem; - --pgn-spacing-form-text-margin-top: .25rem; - --pgn-spacing-form-input-check-margin-y: .3rem; - --pgn-spacing-form-input-check-margin-x-inline: .3125rem; - --pgn-spacing-form-input-check-margin-x-base: .25rem; + --pgn-spacing-form-check-position-axis: 0.375rem; + --pgn-spacing-form-check-inline-margin-x: 0.75rem; + --pgn-spacing-form-text-margin-top: 0.25rem; + --pgn-spacing-form-input-check-margin-y: 0.3rem; + --pgn-spacing-form-input-check-margin-x-inline: 0.3125rem; + --pgn-spacing-form-input-check-margin-x-base: 0.25rem; --pgn-spacing-form-input-check-gutter: 1.25rem; + --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x); + --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); + --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x); + --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); + --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y); + --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y); --pgn-spacing-dropzone-border-base: 1px; --pgn-spacing-dropzone-padding: 1.5rem; - --pgn-spacing-dropdown-close-container-top: .625rem; - --pgn-spacing-dropdown-padding-y-item: .25rem; - --pgn-spacing-dropdown-padding-y-base: .5rem; + --pgn-spacing-dropdown-close-container-top: 0.625rem; + --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2); + --pgn-spacing-dropdown-padding-header-y: 0.5rem; + --pgn-spacing-dropdown-padding-header-x: var(--pgn-spacing-dropdown-padding-x-item); + --pgn-spacing-dropdown-padding-y-item: 0.25rem; + --pgn-spacing-dropdown-padding-y-base: 0.5rem; --pgn-spacing-dropdown-padding-x-item: 1rem; - --pgn-spacing-dropdown-padding-x-base: 0; - --pgn-spacing-dropdown-spacer: .125rem; + --pgn-spacing-dropdown-padding-x-base: 0rem; + --pgn-spacing-dropdown-spacer: 0.125rem; --pgn-spacing-data-table-footer-position: center; - --pgn-spacing-data-table-padding-cell: .5rem .75rem; - --pgn-spacing-data-table-padding-small: .5rem; - --pgn-spacing-data-table-padding-y: .75rem; - --pgn-spacing-data-table-padding-x: .75rem; - --pgn-spacing-collapsible-card-spacer-basic-icon: .625rem; - --pgn-spacing-collapsible-card-spacer-basic-x: .5rem; - --pgn-spacing-collapsible-card-spacer-basic-y: .5rem; + --pgn-spacing-data-table-padding-cell-y: 0.75rem; + --pgn-spacing-data-table-padding-cell-x: 0.5rem; + --pgn-spacing-data-table-padding-small: 0.5rem; + --pgn-spacing-data-table-padding-y: 0.75rem; + --pgn-spacing-data-table-padding-x: 0.75rem; + --pgn-spacing-collapsible-card-spacer-basic-icon: 0.625rem; + --pgn-spacing-collapsible-card-spacer-basic-x: 0.5rem; + --pgn-spacing-collapsible-card-spacer-basic-y: 0.5rem; --pgn-spacing-collapsible-card-spacer-icon: 2.5rem; - --pgn-spacing-collapsible-card-spacer-left-body: .75rem; - --pgn-spacing-collapsible-card-spacer-x-base: .5rem; - --pgn-spacing-collapsible-card-spacer-y-base: .5rem; - --pgn-spacing-code-kbd-padding-x: .4rem; - --pgn-spacing-code-kbd-padding-y: .2rem; - --pgn-spacing-chip-carousel-container-padding-y: .313rem; - --pgn-spacing-chip-carousel-container-padding-x: .625rem; - --pgn-spacing-chip-carousel-controls-top-offset: .375rem; + --pgn-spacing-collapsible-card-spacer-left-body: 0.75rem; + --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x); + --pgn-spacing-collapsible-card-spacer-x-base: 0.5rem; + --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y); + --pgn-spacing-collapsible-card-spacer-y-base: 0.5rem; + --pgn-spacing-code-kbd-padding-x: 0.4rem; + --pgn-spacing-code-kbd-padding-y: 0.2rem; + --pgn-spacing-chip-carousel-container-padding-y: 0.313rem; + --pgn-spacing-chip-carousel-container-padding-x: 0.625rem; + --pgn-spacing-chip-carousel-controls-top-offset: 0.375rem; --pgn-spacing-chip-outline-width: 3px; - --pgn-spacing-chip-outline-focus-distance-dark: .313rem; - --pgn-spacing-chip-outline-focus-distance-light: .313rem; + --pgn-spacing-chip-outline-focus-distance-dark: 0.313rem; + --pgn-spacing-chip-outline-focus-distance-light: 0.313rem; --pgn-spacing-chip-outline-selected-distance-dark: 3px; --pgn-spacing-chip-outline-selected-distance-light: 3px; - --pgn-spacing-chip-padding-x: .5rem; + --pgn-spacing-chip-padding-x: 0.5rem; --pgn-spacing-chip-padding-y: 1px; - --pgn-spacing-chip-margin-icon: .25rem; - --pgn-spacing-chip-margin-base: .125rem; + --pgn-spacing-chip-margin-icon: 0.25rem; + --pgn-spacing-chip-margin-base: 0.125rem; --pgn-spacing-carousel-indicator-spacer: 3px; --pgn-spacing-card-focus-border-offset: 5px; - --pgn-spacing-card-logo-bottom-offset-horizontal: .4375rem; + --pgn-spacing-card-logo-bottom-offset-horizontal: 0.4375rem; --pgn-spacing-card-logo-bottom-offset-base: 1rem; - --pgn-spacing-card-logo-left-offset-horizontal: .4375rem; + --pgn-spacing-card-logo-left-offset-horizontal: 0.4375rem; --pgn-spacing-card-logo-left-offset-base: 1.5rem; - --pgn-spacing-card-loading-skeleton-spacer: .313rem; - --pgn-spacing-card-footer-action-gap: .5rem; + --pgn-spacing-card-loading-skeleton-spacer: 0.313rem; + --pgn-spacing-card-footer-action-gap: 0.5rem; --pgn-spacing-card-columns-gap: 1.25rem; --pgn-spacing-card-columns-count: 3; + --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y); + --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3); + --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group); + --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3); + --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group); --pgn-spacing-card-margin-group: 12px; - --pgn-spacing-card-spacer-y: .75rem; + --pgn-spacing-card-spacer-y: 0.75rem; --pgn-spacing-card-spacer-x: 1.25rem; - --pgn-spacing-btn-block-spacing-y: .5rem; - --pgn-spacing-bubble-expandable-padding-x: .25rem; - --pgn-spacing-bubble-expandable-padding-y: 0; - --pgn-spacing-breadcrumb-margin-left: .5rem; - --pgn-spacing-badge-padding-y: .125rem; - --pgn-spacing-badge-padding-x-pill: .6em; - --pgn-spacing-badge-padding-x-base: .5rem; - --pgn-spacing-avatar-button-padding-left-lg: .25em; - --pgn-spacing-avatar-button-padding-left-sm: .25em; - --pgn-spacing-avatar-button-padding-left-base: .25em; - --pgn-spacing-annotation-arrow-side-margin: .25rem; - --pgn-spacing-annotation-padding: .5rem; - --pgn-spacing-alert-icon-space: .8rem; + --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width)); + --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap)); + --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width); + --pgn-spacing-btn-block-spacing-y: 0.5rem; + --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); + --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x); + --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x); + --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y); + --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); + --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y); + --pgn-spacing-bubble-expandable-padding-x: 0.25rem; + --pgn-spacing-bubble-expandable-padding-y: 0rem; + --pgn-spacing-breadcrumb-margin-left: 0.5rem; + --pgn-spacing-badge-padding-y: 0.125rem; + --pgn-spacing-badge-padding-x-pill: 0.6em; + --pgn-spacing-badge-padding-x-base: 0.5rem; + --pgn-spacing-avatar-button-padding-left-lg: 0.25em; + --pgn-spacing-avatar-button-padding-left-sm: 0.25em; + --pgn-spacing-avatar-button-padding-left-base: 0.25em; + --pgn-spacing-annotation-arrow-side-margin: 0.25rem; + --pgn-spacing-annotation-padding: 0.5rem; + --pgn-spacing-alert-icon-space: 0.8rem; + --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3); --pgn-spacing-alert-margin-bottom: 1rem; --pgn-spacing-alert-padding-x: 1.5rem; --pgn-spacing-alert-padding-y: 1.5rem; - --pgn-spacing-action-row-gap-y: .5rem; - --pgn-spacing-action-row-gap-x: .5rem; - --pgn-size-breakpoint-xxl: 1400px; - --pgn-size-breakpoint-xl: 1200px; - --pgn-size-breakpoint-lg: 992px; - --pgn-size-breakpoint-md: 768px; - --pgn-size-breakpoint-sm: 576px; - --pgn-size-breakpoint-xs: 0; - --pgn-size-tooltip-arrow-width: .8rem; - --pgn-size-tooltip-arrow-height: .4rem; + --pgn-spacing-action-row-gap-y: 0.5rem; + --pgn-spacing-action-row-gap-x: 0.5rem; + --pgn-size-breakpoint-xxl: 1400px; /* Starting breakpoint for large desktops, more than 1400px. */ + --pgn-size-breakpoint-xl: 1200px; /* Starting breakpoint for large desktops. */ + --pgn-size-breakpoint-lg: 992px; /* Starting breakpoint for desktops. */ + --pgn-size-breakpoint-md: 768px; /* Starting breakpoint for tablets. */ + --pgn-size-breakpoint-sm: 576px; /* Starting breakpoint for landscape phones. */ + --pgn-size-breakpoint-xs: 0px; /* Starting breakpoint for portrait phones. */ + --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-list-group-border-width: var(--pgn-size-border-width); + --pgn-size-input-btn-focus-width: 1px; + --pgn-size-input-btn-border-width: var(--pgn-size-border-width); + --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base); + --pgn-size-hr-border-width: var(--pgn-size-border-width); + --pgn-size-caret-width: 0.3em; + --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-tooltip-arrow-width: 0.8rem; + --pgn-size-tooltip-arrow-height: 0.4rem; --pgn-size-tooltip-max-width: 200px; - --pgn-size-toast-border-radius: .25rem; + --pgn-size-toast-border-radius: 0.25rem; --pgn-size-toast-border-width: 1px; --pgn-size-toast-max-width: 400px; --pgn-size-tabs-notification-width: 1rem; --pgn-size-tabs-notification-height: 1rem; --pgn-size-stepper-step-bubble-error-shadow-width: 3px; - --pgn-size-stepper-step-width-min: 0; + --pgn-size-stepper-step-width-min: 0rem; --pgn-size-stepper-header-height-min: 5.13rem; - --pgn-size-stack-gap: 0; - --pgn-size-spinner-sm-border-width: .2em; + --pgn-size-stack-gap: 0rem; + --pgn-size-spinner-sm-border-width: 0.2em; + --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width); --pgn-size-spinner-sm-width: 1rem; - --pgn-size-spinner-base-border-width: .25em; + --pgn-size-spinner-base-border-width: 0.25em; + --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width); --pgn-size-spinner-base-width: 2rem; - --pgn-size-search-field-border-radius: 0; - --pgn-size-search-field-border-width-focus: .3125rem; - --pgn-size-search-field-border-width-base: .0625rem; - --pgn-size-progress-bar-threshold-circle: .5625rem; - --pgn-size-progress-bar-border-radius: 0; + --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); + --pgn-size-search-field-border-radius: 0rem; + --pgn-size-search-field-border-width-focus: 0.3125rem; + --pgn-size-search-field-border-width-base: 0.0625rem; + --pgn-size-progress-bar-threshold-circle: 0.5625rem; + --pgn-size-progress-bar-border-radius: 0rem; --pgn-size-progress-bar-border-width: 1px; - --pgn-size-progress-bar-height-annotated: .3125rem; + --pgn-size-progress-bar-height-annotated: 0.3125rem; --pgn-size-progress-bar-height-base: 1rem; + --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow); + --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow); --pgn-size-product-tour-checkpoint-width-max: 480px; --pgn-size-product-tour-checkpoint-width-arrow: 15px; --pgn-size-product-tour-checkpoint-width-border: 8px; - --pgn-size-popover-arrow-height: .5rem; + --pgn-size-popover-arrow-height: 0.5rem; --pgn-size-popover-arrow-width: 1rem; --pgn-size-popover-icon-width: 1rem; --pgn-size-popover-icon-height: 1rem; + --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm); + --pgn-size-popover-border-width: var(--pgn-size-border-width); --pgn-size-popover-max-width: 480px; - --pgn-size-pagination-focus-outline: 0; - --pgn-size-pagination-toggle-border-sm: .25rem; - --pgn-size-pagination-toggle-border-base: .3125rem; + --pgn-size-pagination-focus-outline: 0rem; + --pgn-size-pagination-toggle-border-sm: 0.25rem; + --pgn-size-pagination-toggle-border-base: 0.3125rem; --pgn-size-pagination-reduced-dropdown-min-width: 6rem; --pgn-size-pagination-reduced-dropdown-max-height: 60vh; + --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg); + --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm); + --pgn-size-pagination-border-width: var(--pgn-size-border-width); --pgn-size-pagination-secondary-height-sm: 2.25rem; --pgn-size-pagination-secondary-height-base: 2.75rem; --pgn-size-pagination-icon-height: 2.25rem; --pgn-size-pagination-icon-width: 2.25rem; + --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base); + --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base)); --pgn-size-navbar-nav-scroll-max-height: 75vh; - --pgn-size-nav-tabs-border-radius: 0; + --pgn-size-nav-tabs-border-radius: 0rem; --pgn-size-nav-tabs-border-width: 2px; - --pgn-size-nav-tabs-link-border-bottom-width: .188rem; + --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width); + --pgn-size-nav-tabs-link-border-bottom-width: 0.188rem; + --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width); --pgn-size-nav-pills-link-border-width: 1px; + --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg); --pgn-size-modal-content-border-width: 0px; --pgn-size-modal-sm: 400px; --pgn-size-modal-md: 500px; --pgn-size-modal-lg: 800px; --pgn-size-modal-xl: 1140px; + --pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width); --pgn-size-menu-item-width-xs: 13.438rem; --pgn-size-menu-item-width-base: 19rem; --pgn-size-menu-item-height: 3rem; --pgn-size-menu-base-max-height: 16.813rem; - --pgn-size-menu-base-border-radius: .25em; + --pgn-size-menu-base-border-radius: 0.25em; + --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width); + --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em); --pgn-size-icon-button-diameter-sm: 2.25rem; --pgn-size-icon-button-diameter-md: 2.75rem; --pgn-size-icon-lg: 1.75rem; --pgn-size-icon-md: 1.5rem; --pgn-size-icon-sm: 1.25rem; --pgn-size-icon-xs: 1rem; - --pgn-size-icon-inline: .8em; - --pgn-size-input-btn-focus-width: 1px; - --pgn-size-caret-width: .3em; - --pgn-size-form-border-radius-width: .125rem; - --pgn-size-form-border-radius-check-focus: .0625rem; - --pgn-size-form-autosuggest-border-width: .125rem; + --pgn-size-icon-inline: 0.8em; + --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-form-border-radius-width: 0.125rem; + --pgn-size-form-border-radius-check-focus: 0.0625rem; + --pgn-size-form-autosuggest-border-width: 0.125rem; + --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width); --pgn-size-form-autosuggest-spinner-width: 1.25rem; + --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width); --pgn-size-form-autosuggest-icon-width: 2.4rem; --pgn-size-form-grid-gutter-width: 0.625rem; --pgn-size-form-control-border-radio-indicator-radius: 50%; - --pgn-size-form-control-border-checkbox-indicator-radius: 0; + --pgn-size-form-control-border-checkbox-indicator-radius: 0rem; --pgn-size-form-control-icon-width: 2rem; + --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base); + --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base); + --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base); + --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border); + --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus); --pgn-size-form-control-range-thumb-border-radius: 1rem; - --pgn-size-form-control-range-thumb-border-base: 0; + --pgn-size-form-control-range-thumb-border-base: 0rem; + --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width); --pgn-size-form-control-range-thumb-width: 1rem; --pgn-size-form-control-range-track-border-radius: 1rem; - --pgn-size-form-control-range-track-height: .5rem; + --pgn-size-form-control-range-track-height: 0.5rem; --pgn-size-form-control-range-track-width: 100%; + --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border); + --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half); + --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm); + --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg); + --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base); + --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2); + --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4); + --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75); --pgn-size-form-control-indicator-border-width: 0.125rem; --pgn-size-form-control-indicator-bg: 100%; --pgn-size-form-control-indicator-base: 1.25rem; + --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm); + --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg); + --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base); + --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width); --pgn-size-form-input-width-focus: 0.063rem; --pgn-size-form-input-width-hover: 0.063rem; + --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2); + --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2)); + --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base)); + --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); + --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border)); + --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border)); + --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border)); + --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width)); + --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base); + --pgn-size-dropdown-border-width: var(--pgn-size-border-width); --pgn-size-dropdown-min-width: 18rem; --pgn-size-data-table-layout-sidebar-width: 12rem; --pgn-size-data-table-dropdown-pagination-min-width: 6rem; @@ -364,7 +611,7 @@ --pgn-size-color-picker-sm: 2rem; --pgn-size-code-pre-scrollable-max-height: 340px; --pgn-size-chip-icon: 1.5rem; - --pgn-size-chip-border-radius: .375rem; + --pgn-size-chip-border-radius: 0.375rem; --pgn-size-carousel-caption-width: 70%; --pgn-size-carousel-indicator-height-area-hit: 10px; --pgn-size-carousel-indicator-height-base: 3px; @@ -373,17 +620,31 @@ --pgn-size-carousel-control-width-base: 15%; --pgn-size-card-logo-height: 4.125rem; --pgn-size-card-logo-width: 7.25rem; + --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base); --pgn-size-card-image-vertical-max-height: 140px; + --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max); --pgn-size-card-image-horizontal-width-max: 240px; + --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base)); --pgn-size-card-focus-border-width: 2px; - --pgn-size-card-border-radius-logo: .25rem; + --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); + --pgn-size-card-border-radius-logo: 0.25rem; + --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base); + --pgn-size-card-border-width: var(--pgn-size-border-width); + --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base); + --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base); + --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap)); --pgn-size-btn-focus-width: 2px; - --pgn-size-breadcrumb-border-width-focus: .0625rem; - --pgn-size-breadcrumb-border-axis-y-focus: .5rem; - --pgn-size-breadcrumb-border-axis-x-focus: .25rem; - --pgn-size-breadcrumb-border-radius-focus: .125rem; + --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm); + --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg); + --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base); + --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width); + --pgn-size-breadcrumb-border-width-focus: 0.0625rem; + --pgn-size-breadcrumb-border-axis-y-focus: 0.5rem; + --pgn-size-breadcrumb-border-axis-x-focus: 0.25rem; + --pgn-size-breadcrumb-border-radius-focus: 0.125rem; + --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width); --pgn-size-badge-border-radius-pill: 10rem; - --pgn-size-badge-border-radius-base: .25rem; + --pgn-size-badge-border-radius-base: 0.25rem; --pgn-size-avatar-border-radius: 100%; --pgn-size-avatar-border-base: 1px; --pgn-size-avatar-huge: 18.75rem; @@ -393,211 +654,14 @@ --pgn-size-avatar-sm: 2.25rem; --pgn-size-avatar-xs: 1.5rem; --pgn-size-avatar-base: 3rem; - --pgn-size-annotation-border-radius: .25rem; + --pgn-size-annotation-border-radius: 0.25rem; --pgn-size-annotation-max-width: 18.75rem; - --pgn-size-annotation-arrow-border-width: .5rem; - --pgn-size-alert-border-width: 0; - --pgn-size-rounded-pill: 50rem; - --pgn-size-border-radius-sm: .25rem; - --pgn-size-border-radius-lg: .425rem; - --pgn-size-border-radius-base: .375rem; - --pgn-size-border-width: 1px; - --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; - --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); - --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25); - --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6); - --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5); - --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4); - --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3); - --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2); - --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); - --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold); - --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs); - --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75); - --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg); - --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2); - --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg); - --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25); - --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base); - --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg); - --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base); - --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base); - --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); - --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base); - --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg); - --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); - --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base); - --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family); - --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x); - --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base); - --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size); - --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5); - --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x); - --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); - --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base); - --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal); - --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg); - --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); - --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base); - --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family); - --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm); - --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); - --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); - --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); - --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); - --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); - --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); - --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); - --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); - --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); - --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); - --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); - --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); - --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); - --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); - --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); - --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base); - --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x); - --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y); - --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base); - --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2); - --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem; - --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem; - --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left); - --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); - --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x); - --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); - --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x); - --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); - --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y); - --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y); - --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2); - --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item); - --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x); - --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y); - --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y); - --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group); - --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group); - --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap)); - --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width); - --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); - --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x); - --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x); - --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y); - --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); - --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y); - --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width); - --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width); - --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow); - --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow); - --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm); - --pgn-size-popover-border-width: var(--pgn-size-border-width); - --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg); - --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm); - --pgn-size-pagination-border-width: var(--pgn-size-border-width); - --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width); - --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width); - --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg); - --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width); - --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em); - --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-list-group-border-width: var(--pgn-size-border-width); - --pgn-size-input-btn-border-width: var(--pgn-size-border-width); - --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base); - --pgn-size-hr-border-width: var(--pgn-size-border-width); - --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width); - --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width); - --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus); - --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width); - --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2); - --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4); - --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75); - --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm); - --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg); - --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base); - --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-dropdown-border-width: var(--pgn-size-border-width); - --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max); - --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base)); - --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-card-border-width: var(--pgn-size-border-width); - --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm); - --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg); - --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width); + --pgn-size-annotation-arrow-border-width: 0.5rem; + --pgn-size-alert-border-width: 0rem; --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); - --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family); - --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base); - --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base); - --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg); - --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm); - --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base); - --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family); - --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); - --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base); - --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); - --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); - --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base); - --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base); - --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base); - --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base); - --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg); - --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm); - --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base); - --pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg); - --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm); - --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base); - --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3); - --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3); - --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width)); - --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3); - --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); - --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base); - --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base)); - --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base); - --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width); - --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2)); - --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base)); - --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); - --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border)); - --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border)); - --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width)); - --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base); - --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); - --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base); - --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap)); - --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width); - --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight); - --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight); - --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); - --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); - --pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width); - --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base); - --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base); - --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border); - --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border); - --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half); - --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm); - --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base); - --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2); - --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border)); - --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base); - --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg); + --pgn-size-rounded-pill: 50rem; /* Pill border radius. */ + --pgn-size-border-radius-sm: 0.25rem; /* Small border radius. */ + --pgn-size-border-radius-lg: 0.425rem; /* Large border radius. */ + --pgn-size-border-radius-base: 0.375rem; /* Default border radius. */ + --pgn-size-border-width: 1px; /* Default border width. */ } diff --git a/styles/css/themes/light/abstraction-variables.css b/styles/css/themes/light/abstraction-variables.css new file mode 100644 index 0000000000..7de59902cb --- /dev/null +++ b/styles/css/themes/light/abstraction-variables.css @@ -0,0 +1,304 @@ +:root { + /** + * ELEVATION + */ + --pgn-elevation-box-shadow-level-1: + var(--pgn-elevation-box-shadow-level-1-1-offset-x) + var(--pgn-elevation-box-shadow-level-1-1-offset-y) + var(--pgn-elevation-box-shadow-level-1-1-blur) + var(--pgn-elevation-box-shadow-level-1-1-color), + var(--pgn-elevation-box-shadow-level-1-2-offset-x) + var(--pgn-elevation-box-shadow-level-1-2-offset-y) + var(--pgn-elevation-box-shadow-level-1-2-blur) + var(--pgn-elevation-box-shadow-level-1-2-color); + + --pgn-elevation-box-shadow-level-2: + var(--pgn-elevation-box-shadow-level-2-1-offset-x) + var(--pgn-elevation-box-shadow-level-2-1-offset-y) + var(--pgn-elevation-box-shadow-level-2-1-blur) + var(--pgn-elevation-box-shadow-level-2-1-color), + var(--pgn-elevation-box-shadow-level-2-2-offset-x) + var(--pgn-elevation-box-shadow-level-2-2-offset-y) + var(--pgn-elevation-box-shadow-level-2-2-blur) + var(--pgn-elevation-box-shadow-level-2-2-color); + + --pgn-elevation-box-shadow-level-3: + var(--pgn-elevation-box-shadow-level-3-1-offset-x) + var(--pgn-elevation-box-shadow-level-3-1-offset-y) + var(--pgn-elevation-box-shadow-level-3-1-blur) + var(--pgn-elevation-box-shadow-level-3-1-color), + var(--pgn-elevation-box-shadow-level-3-2-offset-x) + var(--pgn-elevation-box-shadow-level-3-2-offset-y) + var(--pgn-elevation-box-shadow-level-3-2-blur) + var(--pgn-elevation-box-shadow-level-3-2-color); + + --pgn-elevation-box-shadow-level-4: + var(--pgn-elevation-box-shadow-level-4-1-offset-x) + var(--pgn-elevation-box-shadow-level-4-1-offset-y) + var(--pgn-elevation-box-shadow-level-4-1-blur) + var(--pgn-elevation-box-shadow-level-4-1-color), + var(--pgn-elevation-box-shadow-level-4-2-offset-x) + var(--pgn-elevation-box-shadow-level-4-2-offset-y) + var(--pgn-elevation-box-shadow-level-4-2-blur) + var(--pgn-elevation-box-shadow-level-4-2-color); + + --pgn-elevation-box-shadow-level-5: + var(--pgn-elevation-box-shadow-level-5-1-offset-x) + var(--pgn-elevation-box-shadow-level-5-1-offset-y) + var(--pgn-elevation-box-shadow-level-5-1-blur) + var(--pgn-elevation-box-shadow-level-5-1-color), + var(--pgn-elevation-box-shadow-level-5-2-offset-x) + var(--pgn-elevation-box-shadow-level-5-2-offset-y) + var(--pgn-elevation-box-shadow-level-5-2-blur) + var(--pgn-elevation-box-shadow-level-5-2-color); + + --pgn-elevation-box-shadow-down-1: + var(--pgn-elevation-box-shadow-down-1-1-offset-x) + var(--pgn-elevation-box-shadow-down-1-1-offset-y) + var(--pgn-elevation-box-shadow-down-1-1-blur) + var(--pgn-elevation-box-shadow-down-1-1-color), + var(--pgn-elevation-box-shadow-down-1-2-offset-x) + var(--pgn-elevation-box-shadow-down-1-2-offset-y) + var(--pgn-elevation-box-shadow-down-1-2-blur) + var(--pgn-elevation-box-shadow-down-1-2-color); + + --pgn-elevation-box-shadow-down-2: + var(--pgn-elevation-box-shadow-down-2-1-offset-x) + var(--pgn-elevation-box-shadow-down-2-1-offset-y) + var(--pgn-elevation-box-shadow-down-2-1-blur) + var(--pgn-elevation-box-shadow-down-2-1-color), + var(--pgn-elevation-box-shadow-down-2-2-offset-x) + var(--pgn-elevation-box-shadow-down-2-2-offset-y) + var(--pgn-elevation-box-shadow-down-2-2-blur) + var(--pgn-elevation-box-shadow-down-2-2-color); + + --pgn-elevation-box-shadow-down-3: + var(--pgn-elevation-box-shadow-down-3-1-offset-x) + var(--pgn-elevation-box-shadow-down-3-1-offset-y) + var(--pgn-elevation-box-shadow-down-3-1-blur) + var(--pgn-elevation-box-shadow-down-3-1-color), + var(--pgn-elevation-box-shadow-down-3-2-offset-x) + var(--pgn-elevation-box-shadow-down-3-2-offset-y) + var(--pgn-elevation-box-shadow-down-3-2-blur) + var(--pgn-elevation-box-shadow-down-3-2-color); + + --pgn-elevation-box-shadow-down-4: + var(--pgn-elevation-box-shadow-down-4-1-offset-x) + var(--pgn-elevation-box-shadow-down-4-1-offset-y) + var(--pgn-elevation-box-shadow-down-4-1-blur) + var(--pgn-elevation-box-shadow-down-4-1-color), + var(--pgn-elevation-box-shadow-down-4-2-offset-x) + var(--pgn-elevation-box-shadow-down-4-2-offset-y) + var(--pgn-elevation-box-shadow-down-4-2-blur) + var(--pgn-elevation-box-shadow-down-4-2-color); + + --pgn-elevation-box-shadow-down-5: + var(--pgn-elevation-box-shadow-down-5-1-offset-x) + var(--pgn-elevation-box-shadow-down-5-1-offset-y) + var(--pgn-elevation-box-shadow-down-5-1-blur) + var(--pgn-elevation-box-shadow-down-5-1-color), + var(--pgn-elevation-box-shadow-down-5-2-offset-x) + var(--pgn-elevation-box-shadow-down-5-2-offset-y) + var(--pgn-elevation-box-shadow-down-5-2-blur) + var(--pgn-elevation-box-shadow-down-5-2-color); + + --pgn-elevation-box-shadow-left-1: + var(--pgn-elevation-box-shadow-left-1-1-offset-x) + var(--pgn-elevation-box-shadow-left-1-1-offset-y) + var(--pgn-elevation-box-shadow-left-1-1-blur) + var(--pgn-elevation-box-shadow-left-1-1-color), + var(--pgn-elevation-box-shadow-left-1-2-offset-x) + var(--pgn-elevation-box-shadow-left-1-2-offset-y) + var(--pgn-elevation-box-shadow-left-1-2-blur) + var(--pgn-elevation-box-shadow-left-1-2-color); + + --pgn-elevation-box-shadow-left-2: + var(--pgn-elevation-box-shadow-left-2-1-offset-x) + var(--pgn-elevation-box-shadow-left-2-1-offset-y) + var(--pgn-elevation-box-shadow-left-2-1-blur) + var(--pgn-elevation-box-shadow-left-2-1-color), + var(--pgn-elevation-box-shadow-left-2-2-offset-x) + var(--pgn-elevation-box-shadow-left-2-2-offset-y) + var(--pgn-elevation-box-shadow-left-2-2-blur) + var(--pgn-elevation-box-shadow-left-2-2-color); + + --pgn-elevation-box-shadow-left-3: + var(--pgn-elevation-box-shadow-left-3-1-offset-x) + var(--pgn-elevation-box-shadow-left-3-1-offset-y) + var(--pgn-elevation-box-shadow-left-3-1-blur) + var(--pgn-elevation-box-shadow-left-3-1-color), + var(--pgn-elevation-box-shadow-left-3-2-offset-x) + var(--pgn-elevation-box-shadow-left-3-2-offset-y) + var(--pgn-elevation-box-shadow-left-3-2-blur) + var(--pgn-elevation-box-shadow-left-3-2-color); + + --pgn-elevation-box-shadow-left-4: + var(--pgn-elevation-box-shadow-left-4-1-offset-x) + var(--pgn-elevation-box-shadow-left-4-1-offset-y) + var(--pgn-elevation-box-shadow-left-4-1-blur) + var(--pgn-elevation-box-shadow-left-4-1-color), + var(--pgn-elevation-box-shadow-left-4-2-offset-x) + var(--pgn-elevation-box-shadow-left-4-2-offset-y) + var(--pgn-elevation-box-shadow-left-4-2-blur) + var(--pgn-elevation-box-shadow-left-4-2-color); + + --pgn-elevation-box-shadow-left-5: + var(--pgn-elevation-box-shadow-left-5-1-offset-x) + var(--pgn-elevation-box-shadow-left-5-1-offset-y) + var(--pgn-elevation-box-shadow-left-5-1-blur) + var(--pgn-elevation-box-shadow-left-5-1-color), + var(--pgn-elevation-box-shadow-left-5-2-offset-x) + var(--pgn-elevation-box-shadow-left-5-2-offset-y) + var(--pgn-elevation-box-shadow-left-5-2-blur) + var(--pgn-elevation-box-shadow-left-5-2-color); + + --pgn-elevation-box-shadow-up-1: + var(--pgn-elevation-box-shadow-up-1-1-offset-x) + var(--pgn-elevation-box-shadow-up-1-1-offset-y) + var(--pgn-elevation-box-shadow-up-1-1-blur) + var(--pgn-elevation-box-shadow-up-1-1-color), + var(--pgn-elevation-box-shadow-up-1-2-offset-x) + var(--pgn-elevation-box-shadow-up-1-2-offset-y) + var(--pgn-elevation-box-shadow-up-1-2-blur) + var(--pgn-elevation-box-shadow-up-1-2-color); + + --pgn-elevation-box-shadow-up-2: + var(--pgn-elevation-box-shadow-up-2-1-offset-x) + var(--pgn-elevation-box-shadow-up-2-1-offset-y) + var(--pgn-elevation-box-shadow-up-2-1-blur) + var(--pgn-elevation-box-shadow-up-2-1-color), + var(--pgn-elevation-box-shadow-up-2-2-offset-x) + var(--pgn-elevation-box-shadow-up-2-2-offset-y) + var(--pgn-elevation-box-shadow-up-2-2-blur) + var(--pgn-elevation-box-shadow-up-2-2-color); + + --pgn-elevation-box-shadow-up-3: + var(--pgn-elevation-box-shadow-up-3-1-offset-x) + var(--pgn-elevation-box-shadow-up-3-1-offset-y) + var(--pgn-elevation-box-shadow-up-3-1-blur) + var(--pgn-elevation-box-shadow-up-3-1-color), + var(--pgn-elevation-box-shadow-up-3-2-offset-x) + var(--pgn-elevation-box-shadow-up-3-2-offset-y) + var(--pgn-elevation-box-shadow-up-3-2-blur) + var(--pgn-elevation-box-shadow-up-3-2-color); + + --pgn-elevation-box-shadow-up-4: + var(--pgn-elevation-box-shadow-up-3-1-offset-x) + var(--pgn-elevation-box-shadow-up-3-1-offset-y) + var(--pgn-elevation-box-shadow-up-3-1-blur) + var(--pgn-elevation-box-shadow-up-3-1-color), + var(--pgn-elevation-box-shadow-up-3-2-offset-x) + var(--pgn-elevation-box-shadow-up-3-2-offset-y) + var(--pgn-elevation-box-shadow-up-3-2-blur) + var(--pgn-elevation-box-shadow-up-3-2-color); + + --pgn-elevation-box-shadow-up-5: + var(--pgn-elevation-box-shadow-up-5-1-offset-x) + var(--pgn-elevation-box-shadow-up-5-1-offset-y) + var(--pgn-elevation-box-shadow-up-5-1-blur) + var(--pgn-elevation-box-shadow-up-5-1-color), + var(--pgn-elevation-box-shadow-up-5-2-offset-x) + var(--pgn-elevation-box-shadow-up-5-2-offset-y) + var(--pgn-elevation-box-shadow-up-5-2-blur) + var(--pgn-elevation-box-shadow-up-5-2-color); + + --pgn-elevation-box-shadow-right-1: + var(--pgn-elevation-box-shadow-right-1-1-offset-x) + var(--pgn-elevation-box-shadow-right-1-1-offset-y) + var(--pgn-elevation-box-shadow-right-1-1-blur) + var(--pgn-elevation-box-shadow-right-1-1-color), + var(--pgn-elevation-box-shadow-right-1-2-offset-x) + var(--pgn-elevation-box-shadow-right-1-2-offset-y) + var(--pgn-elevation-box-shadow-right-1-2-blur) + var(--pgn-elevation-box-shadow-right-1-2-color); + + --pgn-elevation-box-shadow-right-2: + var(--pgn-elevation-box-shadow-right-2-1-offset-x) + var(--pgn-elevation-box-shadow-right-2-1-offset-y) + var(--pgn-elevation-box-shadow-right-2-1-blur) + var(--pgn-elevation-box-shadow-right-2-1-color), + var(--pgn-elevation-box-shadow-right-2-2-offset-x) + var(--pgn-elevation-box-shadow-right-2-2-offset-y) + var(--pgn-elevation-box-shadow-right-2-2-blur) + var(--pgn-elevation-box-shadow-right-2-2-color); + + --pgn-elevation-box-shadow-right-3: + var(--pgn-elevation-box-shadow-right-3-1-offset-x) + var(--pgn-elevation-box-shadow-right-3-1-offset-y) + var(--pgn-elevation-box-shadow-right-3-1-blur) + var(--pgn-elevation-box-shadow-right-3-1-color), + var(--pgn-elevation-box-shadow-right-3-2-offset-x) + var(--pgn-elevation-box-shadow-right-3-2-offset-y) + var(--pgn-elevation-box-shadow-right-3-2-blur) + var(--pgn-elevation-box-shadow-right-3-2-color); + + --pgn-elevation-box-shadow-right-4: + var(--pgn-elevation-box-shadow-right-4-1-offset-x) + var(--pgn-elevation-box-shadow-right-4-1-offset-y) + var(--pgn-elevation-box-shadow-right-4-1-blur) + var(--pgn-elevation-box-shadow-right-4-1-color), + var(--pgn-elevation-box-shadow-right-4-2-offset-x) + var(--pgn-elevation-box-shadow-right-4-2-offset-y) + var(--pgn-elevation-box-shadow-right-4-2-blur) + var(--pgn-elevation-box-shadow-right-4-2-color); + + --pgn-elevation-box-shadow-right-5: + var(--pgn-elevation-box-shadow-right-5-1-offset-x) + var(--pgn-elevation-box-shadow-right-5-1-offset-y) + var(--pgn-elevation-box-shadow-right-5-1-blur) + var(--pgn-elevation-box-shadow-right-5-1-color), + var(--pgn-elevation-box-shadow-right-5-2-offset-x) + var(--pgn-elevation-box-shadow-right-5-2-offset-y) + var(--pgn-elevation-box-shadow-right-5-2-blur) + var(--pgn-elevation-box-shadow-right-5-2-color); + + --pgn-elevation-box-shadow-centered-1: + var(--pgn-elevation-box-shadow-centered-1-1-offset-x) + var(--pgn-elevation-box-shadow-centered-1-1-offset-y) + var(--pgn-elevation-box-shadow-centered-1-1-blur) + var(--pgn-elevation-box-shadow-centered-1-1-color), + var(--pgn-elevation-box-shadow-centered-1-2-offset-x) + var(--pgn-elevation-box-shadow-centered-1-2-offset-y) + var(--pgn-elevation-box-shadow-centered-1-2-blur) + var(--pgn-elevation-box-shadow-centered-1-2-color); + + --pgn-elevation-box-shadow-centered-2: + var(--pgn-elevation-box-shadow-centered-2-1-offset-x) + var(--pgn-elevation-box-shadow-centered-2-1-offset-y) + var(--pgn-elevation-box-shadow-centered-2-1-blur) + var(--pgn-elevation-box-shadow-centered-2-1-color), + var(--pgn-elevation-box-shadow-centered-2-2-offset-x) + var(--pgn-elevation-box-shadow-centered-2-2-offset-y) + var(--pgn-elevation-box-shadow-centered-2-2-blur) + var(--pgn-elevation-box-shadow-centered-2-2-color); + + --pgn-elevation-box-shadow-centered-3: + var(--pgn-elevation-box-shadow-centered-3-1-offset-x) + var(--pgn-elevation-box-shadow-centered-3-1-offset-y) + var(--pgn-elevation-box-shadow-centered-3-1-blur) + var(--pgn-elevation-box-shadow-centered-3-1-color), + var(--pgn-elevation-box-shadow-centered-3-2-offset-x) + var(--pgn-elevation-box-shadow-centered-3-2-offset-y) + var(--pgn-elevation-box-shadow-centered-3-2-blur) + var(--pgn-elevation-box-shadow-centered-3-2-color); + + --pgn-elevation-box-shadow-centered-4: + var(--pgn-elevation-box-shadow-centered-4-1-offset-x) + var(--pgn-elevation-box-shadow-centered-4-1-offset-y) + var(--pgn-elevation-box-shadow-centered-4-1-blur) + var(--pgn-elevation-box-shadow-centered-4-1-color), + var(--pgn-elevation-box-shadow-centered-4-2-offset-x) + var(--pgn-elevation-box-shadow-centered-4-2-offset-y) + var(--pgn-elevation-box-shadow-centered-4-2-blur) + var(--pgn-elevation-box-shadow-centered-4-2-color); + + --pgn-elevation-box-shadow-centered-5: + var(--pgn-elevation-box-shadow-centered-5-1-offset-x) + var(--pgn-elevation-box-shadow-centered-5-1-offset-y) + var(--pgn-elevation-box-shadow-centered-5-1-blur) + var(--pgn-elevation-box-shadow-centered-5-1-color), + var(--pgn-elevation-box-shadow-centered-5-2-offset-x) + var(--pgn-elevation-box-shadow-centered-5-2-offset-y) + var(--pgn-elevation-box-shadow-centered-5-2-blur) + var(--pgn-elevation-box-shadow-centered-5-2-color); +} diff --git a/styles/css/themes/light/index.css b/styles/css/themes/light/index.css index 0b94ebd1ac..e997ed9633 100644 --- a/styles/css/themes/light/index.css +++ b/styles/css/themes/light/index.css @@ -1,2 +1,3 @@ @import "variables.css"; +@import "abstraction-variables.css"; @import "utility-classes.css"; diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css index 0a2d0ee53c..76948fbcbf 100644 --- a/styles/css/themes/light/utility-classes.css +++ b/styles/css/themes/light/utility-classes.css @@ -1,7 +1,6 @@ /** - * IMPORTANT: This file is the result of assembling design tokens - * Do not edit directly - * Generated on Fri, 22 Sep 2023 08:20:17 GMT + * Do not edit directly, this file was auto-generated. while transforming design tokens. + * See /tokens/README.md for more details. */ .bg-accent-a { diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 7965168e70..d93bcbd0bb 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -1,1145 +1,42 @@ /** - * IMPORTANT: This file is the result of assembling design tokens - * Do not edit directly - * Generated on Wed, 15 May 2024 07:58:56 GMT + * Do not edit directly, this file was auto-generated. while transforming design tokens. + * See /tokens/README.md for more details. */ :root { - --pgn-color-dark-base: #273F2FFF; - --pgn-color-light-base: #E1DDDBFF; - --pgn-color-brand-base: #9D0054FF; - --pgn-color-primary-base: #0A3055FF; - --pgn-color-gray-base: #707070FF; - --pgn-color-gray-900: #212529FF; - --pgn-color-gray-800: #333333FF; - --pgn-color-gray-700: #454545FF; - --pgn-color-gray-600: #5C5C5CFF; - --pgn-color-gray-400: #8F8F8FFF; - --pgn-color-gray-300: #ADADADFF; - --pgn-color-gray-200: #CCCCCCFF; - --pgn-color-gray-100: #EBEBEBFF; - --pgn-color-accent-b: #FFEE88FF; - --pgn-color-accent-a: #00BBF9FF; - --pgn-color-teal: #006DAAFF; - --pgn-color-yellow: #FFD900FF; - --pgn-color-green: #178253FF; - --pgn-color-red: #C32D3AFF; - --pgn-color-blue: #23419FFF; - --pgn-color-black: #000000FF; - --pgn-color-white: #FFFFFFFF; - --pgn-color-toast-base: inherit; - --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover: #00000000; - --pgn-color-stepper-header-step-border: #000000FF; - --pgn-color-stepper-header-bg-base: #00000000; - --pgn-color-progress-bar-bg: #00000000; - --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000; - --pgn-color-popover-border: #00000033; - --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066; - --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000; - --pgn-color-nav-tabs-base-link-active-bg: #00000000; - --pgn-color-nav-tabs-base-bg-hover: #00000000; - --pgn-color-nav-link-border: #00000000; - --pgn-color-menu-item-bg: #00000000; - --pgn-color-icon-button-text-primary-inverse-active-hover: #000000FF; - --pgn-color-icon-button-bg-base: #00000000; - --pgn-color-mark-bg: #FFF243FF; - --pgn-color-list-group-base: inherit; - --pgn-color-form-control-select-bg-size: #000000FF; - --pgn-color-form-control-label-base: inherit; - --pgn-color-code-base: #E83E8CFF; - --pgn-color-card-base: inherit; - --pgn-color-btn-disabled-border-inverse-warning: #00000000; - --pgn-color-btn-disabled-border-inverse-outline-success: inherit; - --pgn-color-btn-disabled-border-inverse-success: #00000000; - --pgn-color-btn-disabled-border-secondary: inherit; - --pgn-color-btn-disabled-border-inverse-primary: #00000000; - --pgn-color-btn-disabled-border-inverse-light: #00000000; - --pgn-color-btn-disabled-border-inverse-info: #00000000; - --pgn-color-btn-disabled-border-inverse-dark: #00000000; - --pgn-color-btn-disabled-border-inverse-danger: #00000000; - --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit; - --pgn-color-btn-disabled-bg-inverse-warning: inherit; - --pgn-color-btn-disabled-bg-outline-warning: inherit; - --pgn-color-btn-disabled-bg-inverse-tertiary: inherit; - --pgn-color-btn-disabled-bg-tertiary: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-success: inherit; - --pgn-color-btn-disabled-bg-inverse-success: inherit; - --pgn-color-btn-disabled-bg-outline-success: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit; - --pgn-color-btn-disabled-bg-inverse-secondary: inherit; - --pgn-color-btn-disabled-bg-outline-secondary: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit; - --pgn-color-btn-disabled-bg-outline-primary: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-light: inherit; - --pgn-color-btn-disabled-bg-inverse-light: inherit; - --pgn-color-btn-disabled-bg-outline-light: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-info: inherit; - --pgn-color-btn-disabled-bg-inverse-info: inherit; - --pgn-color-btn-disabled-bg-outline-info: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit; - --pgn-color-btn-disabled-bg-inverse-dark: inherit; - --pgn-color-btn-disabled-bg-outline-dark: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-danger: inherit; - --pgn-color-btn-disabled-bg-inverse-danger: #00000000; - --pgn-color-btn-disabled-bg-outline-danger: inherit; - --pgn-color-btn-disabled-bg-outline-brand: inherit; - --pgn-color-btn-disabled-text-inverse-secondary: inherit; - --pgn-color-btn-disabled-text-outline-secondary: inherit; - --pgn-color-btn-disabled-text-outline-dark: inherit; - --pgn-color-btn-focus-outline-inverse-outline-warning: inherit; - --pgn-color-btn-focus-bg-inverse-outline-warning: inherit; - --pgn-color-btn-focus-bg-outline-warning: inherit; - --pgn-color-btn-focus-bg-inverse-tertiary: inherit; - --pgn-color-btn-focus-bg-tertiary: inherit; - --pgn-color-btn-focus-bg-inverse-outline-success: inherit; - --pgn-color-btn-focus-bg-outline-success: inherit; - --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit; - --pgn-color-btn-focus-bg-outline-secondary: #00000000; - --pgn-color-btn-focus-bg-inverse-outline-primary: inherit; - --pgn-color-btn-focus-bg-outline-primary: inherit; - --pgn-color-btn-focus-bg-inverse-outline-light: inherit; - --pgn-color-btn-focus-bg-outline-light: #00000000; - --pgn-color-btn-focus-bg-inverse-outline-info: inherit; - --pgn-color-btn-focus-bg-outline-info: inherit; - --pgn-color-btn-focus-bg-inverse-outline-dark: inherit; - --pgn-color-btn-focus-bg-outline-dark: inherit; - --pgn-color-btn-focus-bg-inverse-outline-danger: inherit; - --pgn-color-btn-focus-bg-outline-danger: inherit; - --pgn-color-btn-focus-bg-inverse-outline-brand: inherit; - --pgn-color-btn-focus-bg-outline-brand: inherit; - --pgn-color-btn-focus-border-inverse-tertiary: #00000000; - --pgn-color-btn-focus-text-inverse-secondary: inherit; - --pgn-color-btn-focus-text-outline-dark: inherit; - --pgn-color-btn-active-border-inverse-outline-warning: #00000000; - --pgn-color-btn-active-border-inverse-warning: inherit; - --pgn-color-btn-active-border-inverse-tertiary: #00000000; - --pgn-color-btn-active-border-tertiary: #00000000; - --pgn-color-btn-active-border-inverse-outline-success: #00000000; - --pgn-color-btn-active-border-inverse-success: inherit; - --pgn-color-btn-active-border-inverse-secondary: #00000000; - --pgn-color-btn-active-border-inverse-outline-secondary: #00000000; - --pgn-color-btn-active-border-inverse-primary: #00000000; - --pgn-color-btn-active-border-inverse-outline-primary: #00000000; - --pgn-color-btn-active-border-inverse-outline-light: #00000000; - --pgn-color-btn-active-border-inverse-light: inherit; - --pgn-color-btn-active-border-inverse-outline-info: #00000000; - --pgn-color-btn-active-border-inverse-info: #00000000; - --pgn-color-btn-active-border-inverse-outline-dark: #00000000; - --pgn-color-btn-active-border-inverse-dark: #00000000; - --pgn-color-btn-active-border-inverse-outline-danger: #00000000; - --pgn-color-btn-active-border-inverse-danger: #00000000; - --pgn-color-btn-active-border-inverse-outline-brand: #00000000; - --pgn-color-btn-active-border-inverse-brand: #00000000; - --pgn-color-btn-hover-border-inverse-outline-warning: #00000000; - --pgn-color-btn-hover-border-inverse-warning: #00000000; - --pgn-color-btn-hover-border-inverse-tertiary: #00000000; - --pgn-color-btn-hover-border-tertiary: #00000000; - --pgn-color-btn-hover-border-inverse-outline-success: #00000000; - --pgn-color-btn-hover-border-inverse-success: #00000000; - --pgn-color-btn-hover-border-inverse-secondary: #00000000; - --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000; - --pgn-color-btn-hover-border-inverse-primary: #00000000; - --pgn-color-btn-hover-border-inverse-outline-primary: #00000000; - --pgn-color-btn-hover-border-inverse-outline-light: #00000000; - --pgn-color-btn-hover-border-inverse-light: #00000000; - --pgn-color-btn-hover-border-inverse-outline-info: #00000000; - --pgn-color-btn-hover-border-inverse-info: #00000000; - --pgn-color-btn-hover-border-inverse-outline-dark: #00000000; - --pgn-color-btn-hover-border-inverse-dark: #00000000; - --pgn-color-btn-hover-border-inverse-outline-danger: #00000000; - --pgn-color-btn-hover-border-inverse-danger: #00000000; - --pgn-color-btn-hover-border-inverse-brand: #00000000; - --pgn-color-btn-hover-border-inverse-outline-brand: #00000000; - --pgn-color-btn-border-inverse-warning: #00000000; - --pgn-color-btn-border-inverse-tertiary: #00000000; - --pgn-color-btn-border-tertiary: #00000000; - --pgn-color-btn-border-inverse-success: #00000000; - --pgn-color-btn-border-inverse-secondary: #00000000; - --pgn-color-btn-border-inverse-primary: #00000000; - --pgn-color-btn-border-inverse-light: #00000000; - --pgn-color-btn-border-inverse-info: #00000000; - --pgn-color-btn-border-inverse-dark: #00000000; - --pgn-color-btn-border-inverse-danger: #00000000; - --pgn-color-btn-border-inverse-brand: #00000000; - --pgn-color-btn-bg-inverse-outline-warning: inherit; - --pgn-color-btn-bg-outline-warning: inherit; - --pgn-color-btn-bg-inverse-tertiary: #00000000; - --pgn-color-btn-bg-tertiary: #00000000; - --pgn-color-btn-bg-inverse-outline-success: inherit; - --pgn-color-btn-bg-outline-success: inherit; - --pgn-color-btn-bg-inverse-outline-secondary: inherit; - --pgn-color-btn-bg-outline-secondary: inherit; - --pgn-color-btn-bg-inverse-outline-primary: #00000000; - --pgn-color-btn-bg-outline-primary: #00000000; - --pgn-color-btn-bg-inverse-outline-light: inherit; - --pgn-color-btn-bg-outline-light: inherit; - --pgn-color-btn-bg-inverse-outline-info: inherit; - --pgn-color-btn-bg-outline-info: inherit; - --pgn-color-btn-bg-inverse-outline-dark: #00000000; - --pgn-color-btn-bg-outline-dark: inherit; - --pgn-color-btn-bg-inverse-outline-danger: #00000000; - --pgn-color-btn-bg-outline-danger: inherit; - --pgn-color-btn-bg-inverse-outline-brand: #00000000; - --pgn-color-btn-bg-outline-brand: inherit; - --pgn-other-tooltip-opacity: 1; - --pgn-other-search-field-disabled-opacity: .3; - --pgn-other-modal-opacity: .5; - --pgn-other-link-emphasized-hover-darken-percentage: 15%; - --pgn-other-chip-opacity-disabled: .3; - --pgn-other-carousel-control-opacity-hover: .9; - --pgn-other-carousel-control-opacity-base: .5; - --pgn-other-btn-disabled-opacity: .65; - --pgn-other-form-feedback-tooltip-opacity: .9; - --pgn-elevation-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); - --pgn-elevation-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); - --pgn-elevation-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); - --pgn-elevation-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); - --pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); - --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15); - --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); - --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); - --pgn-elevation-progress-bar-box-shadow: none; - --pgn-elevation-image-thumbnail-box-shadow: none; - --pgn-elevation-icon-button-box-shadow-black-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-black-active: none; - --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-dark-active: none; - --pgn-elevation-icon-button-box-shadow-light-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-light-active: none; - --pgn-elevation-icon-button-box-shadow-danger-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-danger-active: none; - --pgn-elevation-icon-button-box-shadow-warning-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-warning-active: none; - --pgn-elevation-icon-button-box-shadow-success-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-success-active: none; - --pgn-elevation-icon-button-box-shadow-brand-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-brand-active: none; - --pgn-elevation-icon-button-box-shadow-secondary-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-secondary-active: none; - --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none; - --pgn-elevation-icon-button-box-shadow-primary-active: none; - --pgn-elevation-form-control-select-border-base: none; - --pgn-elevation-form-control-range-thumb-base: none; - --pgn-elevation-form-control-range-track: none; - --pgn-elevation-form-control-checkbox-indicator-indeterminate: none; - --pgn-elevation-form-control-indicator-active: none; - --pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1); - --pgn-elevation-form-control-indicator-checked-base: none; - --pgn-elevation-form-input-base: none; - --pgn-elevation-code-kbd-box-shadow: none; - --pgn-elevation-btn-box-shadow-active: none; - --pgn-elevation-btn-box-shadow-base: none; - --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); - --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); - --pgn-elevation-popover-box-shadow: none; - --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); - --pgn-elevation-dropdown-box-shadow: none; - --pgn-color-action-default-accent-b: #FFE755FF; - --pgn-color-action-default-accent-a: #0095C6FF; - --pgn-color-action-default-dark-base: #142018FF; - --pgn-color-action-default-light-base: #CAC3BFFF; - --pgn-color-action-default-brand-base: #6A0039FF; - --pgn-color-action-default-primary-base: #051627FF; - --pgn-color-action-default-gray-base: #575757FF; - --pgn-color-action-default-gray-900: #0A0C0DFF; - --pgn-color-action-default-gray-800: #1A1A1AFF; - --pgn-color-action-default-gray-700: #2B2B2BFF; - --pgn-color-action-default-gray-600: #424242FF; - --pgn-color-action-default-gray-400: #767676FF; - --pgn-color-action-default-gray-300: #949494FF; - --pgn-color-action-default-gray-200: #B3B3B3FF; - --pgn-color-action-default-gray-100: #D2D2D2FF; - --pgn-color-dark-900: #1B2C21FF; - --pgn-color-dark-800: #1D2F23FF; - --pgn-color-dark-700: #1F3226FF; - --pgn-color-dark-600: #23392AFF; - --pgn-color-dark-500: var(--pgn-color-dark-base); - --pgn-color-dark-400: #5D6F63FF; - --pgn-color-dark-300: #939F97FF; - --pgn-color-dark-200: #C9CFCBFF; - --pgn-color-dark-100: #F2F3F3FF; - --pgn-color-light-900: #9E9B99FF; - --pgn-color-light-800: #A9A6A4FF; - --pgn-color-light-700: #B4B1AFFF; - --pgn-color-light-600: #CBC7C5FF; - --pgn-color-light-500: var(--pgn-color-light-base); - --pgn-color-light-400: #E9E6E4FF; - --pgn-color-light-300: #F0EEEDFF; - --pgn-color-light-200: #F8F7F6FF; - --pgn-color-light-100: #FDFDFDFF; - --pgn-color-danger-base: var(--pgn-color-red); - --pgn-color-warning-base: var(--pgn-color-yellow); - --pgn-color-info-base: var(--pgn-color-teal); - --pgn-color-success-base: var(--pgn-color-green); - --pgn-color-brand-900: #6E003BFF; - --pgn-color-brand-800: #76003FFF; - --pgn-color-brand-700: #7E0043FF; - --pgn-color-brand-600: #8D004CFF; - --pgn-color-brand-500: var(--pgn-color-brand-base); - --pgn-color-brand-400: #B6407FFF; - --pgn-color-brand-300: #CE80AAFF; - --pgn-color-brand-200: #E7BFD4FF; - --pgn-color-brand-100: #F9F0F5FF; - --pgn-color-secondary-base: var(--pgn-color-gray-700); - --pgn-color-primary-900: #07223CFF; - --pgn-color-primary-800: #082440FF; - --pgn-color-primary-700: #082644FF; - --pgn-color-primary-600: #092B4DFF; - --pgn-color-primary-500: var(--pgn-color-primary-base); - --pgn-color-primary-400: #476480FF; - --pgn-color-primary-300: #8598AAFF; - --pgn-color-primary-200: #C2CBD5FF; - --pgn-color-primary-100: #F0F3F5FF; - --pgn-color-gray-500: var(--pgn-color-gray-base); - --pgn-color-tooltip-arrow-light: var(--pgn-color-white); - --pgn-color-tooltip-bg-light: var(--pgn-color-white); - --pgn-color-tooltip-bg-base: var(--pgn-color-black); - --pgn-color-tooltip-light: var(--pgn-color-black); - --pgn-color-tooltip-text: var(--pgn-color-white); - --pgn-color-toast-header-border: #00000080; - --pgn-color-toast-header-bg: var(--pgn-color-gray-700); - --pgn-color-toast-header-text: var(--pgn-color-white); - --pgn-color-toast-border: #0000001A; - --pgn-color-toast-bg: var(--pgn-color-gray-700); - --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus: var(--pgn-color-white); - --pgn-color-tab-more-link-dropdown-toggle-text-focus: var(--pgn-color-white); - --pgn-color-stepper-header-step-bg-base: var(--pgn-color-stepper-header-bg-base); - --pgn-color-stepper-header-step-base: var(--pgn-color-primary-base); - --pgn-color-stepper-header-bg-line: var(--pgn-color-light-base); - --pgn-color-sheet-skrim-component-box-shadow: #00000026; - --pgn-color-sheet-skrim-bg: #ADADAD80; - --pgn-color-search-field-form-bg: var(--pgn-color-white); - --pgn-color-search-field-border-focus: var(--pgn-color-black); - --pgn-color-search-field-border-interaction: var(--pgn-color-black); - --pgn-color-progress-bar-bar-bg-base: var(--pgn-color-accent-a); - --pgn-color-progress-bar-bar-base: var(--pgn-color-white); - --pgn-color-product-tour-checkpoint-box-shadow: #0000004D; - --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-base); - --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-base); - --pgn-color-product-tour-checkpoint-body: var(--pgn-color-gray-700); - --pgn-color-popover-arrow-outer: #0000000D; - --pgn-color-popover-header-border-bottom-dark: #F2F2F2FF; - --pgn-color-popover-header-bg-dark: #808080FF; - --pgn-color-popover-header-bg: var(--pgn-color-white); - --pgn-color-pagination-dropdown-text-inverse: var(--pgn-color-white); - --pgn-color-pagination-focus-text: var(--pgn-color-black); - --pgn-color-pagination-border-disabled: var(--pgn-color-gray-100); - --pgn-color-pagination-border-hover: var(--pgn-color-gray-200); - --pgn-color-pagination-border-base: var(--pgn-color-gray-200); - --pgn-color-pagination-bg-disabled: var(--pgn-color-white); - --pgn-color-pagination-bg-hover: var(--pgn-color-gray-100); - --pgn-color-pagination-text-inverse: var(--pgn-color-white); - --pgn-color-page-banner-text-warning: var(--pgn-color-black); - --pgn-color-page-banner-text-accent-b: var(--pgn-color-black); - --pgn-color-page-banner-text-accent-a: var(--pgn-color-black); - --pgn-color-page-banner-text-light: var(--pgn-color-black); - --pgn-color-page-banner-text-dark: var(--pgn-color-white); - --pgn-color-page-banner-bg-accent-b: var(--pgn-color-accent-b); - --pgn-color-page-banner-bg-accent-a: var(--pgn-color-accent-a); - --pgn-color-navbar-light-toggler-border: #0000001A; - --pgn-color-navbar-light-disabled: #0000004D; - --pgn-color-navbar-light-active: #000000E6; - --pgn-color-navbar-light-hover: #000000B3; - --pgn-color-navbar-light-text: #00000080; - --pgn-color-navbar-dark-toggler-border: #FFFFFF1A; - --pgn-color-navbar-dark-disabled: #FFFFFF40; - --pgn-color-navbar-dark-hover: #FFFFFFBF; - --pgn-color-navbar-dark-text: #FFFFFF80; - --pgn-color-nav-light: #00000080; - --pgn-color-nav-dark: #FFFFFF80; - --pgn-color-nav-divider: var(--pgn-color-gray-100); - --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-primary-base); - --pgn-color-nav-pills-inverse-link-text-base: var(--pgn-color-white); - --pgn-color-nav-pills-base-link-active-border: var(--pgn-color-white); - --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover); - --pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white); - --pgn-color-nav-tabs-base-link-disabled-border: var(--pgn-color-nav-link-border); - --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover); - --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover); - --pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300); - --pgn-color-nav-link-text-base: var(--pgn-color-gray-700); - --pgn-color-modal-backdrop-bg: var(--pgn-color-black); - --pgn-color-modal-content-border: #00000033; - --pgn-color-menu-item-hover-border: var(--pgn-color-menu-item-bg); - --pgn-color-menu-item-border: var(--pgn-color-menu-item-bg); - --pgn-color-menu-bg: var(--pgn-color-white); - --pgn-color-image-thumbnail-border: var(--pgn-color-gray-200); - --pgn-color-icon-button-black: var(--pgn-color-black); - --pgn-color-icon-button-accent: var(--pgn-color-white); - --pgn-color-icon-button-text-black-inverse-active-base: var(--pgn-color-black); - --pgn-color-icon-button-text-black-inverse-hover: var(--pgn-color-black); - --pgn-color-icon-button-text-black-base: var(--pgn-color-black); - --pgn-color-icon-button-text-dark-inverse-active-base: var(--pgn-color-dark-base); - --pgn-color-icon-button-text-dark-inverse-hover: var(--pgn-color-dark-base); - --pgn-color-icon-button-text-dark-base: var(--pgn-color-dark-base); - --pgn-color-icon-button-text-light-inverse-active-base: var(--pgn-color-light-base); - --pgn-color-icon-button-text-light-inverse-hover: var(--pgn-color-light-base); - --pgn-color-icon-button-text-light-base: var(--pgn-color-light-base); - --pgn-color-icon-button-text-brand-inverse-active-base: var(--pgn-color-brand-base); - --pgn-color-icon-button-text-brand-inverse-hover: var(--pgn-color-brand-base); - --pgn-color-icon-button-text-brand-base: var(--pgn-color-brand-base); - --pgn-color-icon-button-text-primary-base: var(--pgn-color-primary-base); - --pgn-color-icon-button-bg-black-active-base: var(--pgn-color-black); - --pgn-color-icon-button-bg-black-inverse-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-black-inverse-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-black-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-black-hover: var(--pgn-color-black); - --pgn-color-icon-button-bg-black-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-dark-active-base: var(--pgn-color-dark-base); - --pgn-color-icon-button-bg-dark-inverse-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-dark-inverse-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-dark-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-dark-hover: var(--pgn-color-dark-base); - --pgn-color-icon-button-bg-dark-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-light-active-base: var(--pgn-color-light-base); - --pgn-color-icon-button-bg-light-inverse-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-light-inverse-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-light-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-light-hover: var(--pgn-color-light-base); - --pgn-color-icon-button-bg-light-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-danger-inverse-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-danger-inverse-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-danger-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-danger-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-warning-inverse-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-warning-inverse-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-warning-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-warning-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-success-inverse-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-success-inverse-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-success-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-success-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-brand-active-base: var(--pgn-color-brand-base); - --pgn-color-icon-button-bg-brand-inverse-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-brand-inverse-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-brand-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-brand-hover: var(--pgn-color-brand-base); - --pgn-color-icon-button-bg-brand-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-secondary-inverse-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-secondary-inverse-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-secondary-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-secondary-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-primary-inverse-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base); - --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base); - --pgn-color-yiq-light: var(--pgn-color-white); - --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200); - --pgn-color-list-group-action-base: var(--pgn-color-gray-700); - --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600); - --pgn-color-list-group-border: #00000020; - --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100); - --pgn-color-list-group-bg-base: var(--pgn-color-white); - --pgn-color-hr-border: #0000001A; - --pgn-color-headings-base: var(--pgn-color-black); - --pgn-color-body-base: var(--pgn-color-gray-700); - --pgn-color-form-control-range-track-bg: var(--pgn-color-gray-300); - --pgn-color-form-control-select-bg-disabled: var(--pgn-color-gray-100); - --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580; - --pgn-color-form-control-indicator-border: var(--pgn-color-gray-700); - --pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100); - --pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100); - --pgn-color-form-input-base: var(--pgn-color-gray-700); - --pgn-color-dropdown-link-hover-base: #000000FF; - --pgn-color-dropdown-link-base: var(--pgn-color-gray-900); - --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100); - --pgn-color-dropdown-border: #00000026; - --pgn-color-data-table-bg-is-loading: #FFFFFFB3; - --pgn-color-code-pre: var(--pgn-color-gray-900); - --pgn-color-code-kbd-bg: var(--pgn-color-gray-700); - --pgn-color-code-kbd-base: var(--pgn-color-white); - --pgn-color-close-button: var(--pgn-color-black); - --pgn-color-chip-outline-dark: var(--pgn-color-white); - --pgn-color-chip-bg-light: var(--pgn-color-white); - --pgn-color-chip-text-dark: var(--pgn-color-white); - --pgn-color-chip-text-light: var(--pgn-color-black); - --pgn-color-carousel-caption: var(--pgn-color-white); - --pgn-color-carousel-indicator-active-bg: var(--pgn-color-white); - --pgn-color-carousel-control-base: var(--pgn-color-white); - --pgn-color-card-border-base: #00000020; - --pgn-color-btn-disabled-border-inverse-tertiary: var(--pgn-color-btn-border-inverse-tertiary); - --pgn-color-btn-disabled-border-tertiary: var(--pgn-color-btn-border-tertiary); - --pgn-color-btn-disabled-border-inverse-secondary: var(--pgn-color-btn-border-inverse-secondary); - --pgn-color-btn-disabled-bg-inverse-primary: var(--pgn-color-white); - --pgn-color-btn-disabled-bg-inverse-outline-brand: var(--pgn-color-btn-bg-inverse-outline-brand); - --pgn-color-btn-disabled-bg-inverse-brand: var(--pgn-color-white); - --pgn-color-btn-focus-outline-inverse-warning: var(--pgn-color-white); - --pgn-color-btn-focus-outline-inverse-tertiary: var(--pgn-color-white); - --pgn-color-btn-focus-outline-inverse-secondary: var(--pgn-color-white); - --pgn-color-btn-focus-outline-inverse-light: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-warning: var(--pgn-color-btn-border-inverse-warning); - --pgn-color-btn-focus-border-tertiary: var(--pgn-color-btn-border-tertiary); - --pgn-color-btn-focus-border-inverse-success: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-outline-secondary: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-secondary: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-primary: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-light: var(--pgn-color-btn-border-inverse-light); - --pgn-color-btn-focus-border-inverse-info: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-outline-dark: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-dark: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-outline-danger: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-danger: var(--pgn-color-white); - --pgn-color-btn-focus-border-inverse-brand: var(--pgn-color-white); - --pgn-color-btn-active-bg-inverse-warning: var(--pgn-color-gray-100); - --pgn-color-btn-active-bg-inverse-success: var(--pgn-color-gray-100); - --pgn-color-btn-active-bg-inverse-secondary: var(--pgn-color-gray-100); - --pgn-color-btn-active-bg-inverse-primary: var(--pgn-color-gray-100); - --pgn-color-btn-active-bg-inverse-light: var(--pgn-color-gray-100); - --pgn-color-btn-active-bg-inverse-info: var(--pgn-color-gray-100); - --pgn-color-btn-active-bg-inverse-dark: var(--pgn-color-gray-100); - --pgn-color-btn-active-bg-inverse-danger: var(--pgn-color-gray-100); - --pgn-color-btn-active-bg-inverse-brand: var(--pgn-color-gray-100); - --pgn-color-btn-active-text-inverse-tertiary: var(--pgn-color-white); - --pgn-color-btn-active-text-tertiary: var(--pgn-color-gray-700); - --pgn-color-btn-hover-bg-inverse-tertiary: #FFFFFF1A; - --pgn-color-btn-hover-text-inverse-tertiary: var(--pgn-color-white); - --pgn-color-btn-hover-text-tertiary: var(--pgn-color-gray-700); - --pgn-color-btn-border-inverse-outline-warning: var(--pgn-color-white); - --pgn-color-btn-border-inverse-outline-success: var(--pgn-color-white); - --pgn-color-btn-border-inverse-outline-secondary: var(--pgn-color-white); - --pgn-color-btn-border-inverse-outline-primary: var(--pgn-color-white); - --pgn-color-btn-border-outline-primary: var(--pgn-color-primary-base); - --pgn-color-btn-border-inverse-outline-light: var(--pgn-color-white); - --pgn-color-btn-border-outline-light: var(--pgn-color-light-base); - --pgn-color-btn-border-inverse-outline-info: var(--pgn-color-white); - --pgn-color-btn-border-inverse-outline-dark: var(--pgn-color-white); - --pgn-color-btn-border-outline-dark: var(--pgn-color-dark-base); - --pgn-color-btn-border-inverse-outline-danger: var(--pgn-color-white); - --pgn-color-btn-border-inverse-outline-brand: var(--pgn-color-white); - --pgn-color-btn-border-outline-brand: var(--pgn-color-brand-base); - --pgn-color-btn-bg-primary: var(--pgn-color-primary-base); - --pgn-color-btn-bg-light: var(--pgn-color-light-base); - --pgn-color-btn-bg-dark: var(--pgn-color-dark-base); - --pgn-color-btn-bg-brand: var(--pgn-color-brand-base); - --pgn-color-btn-text-inverse-outline-warning: var(--pgn-color-white); - --pgn-color-btn-text-inverse-tertiary: var(--pgn-color-white); - --pgn-color-btn-text-tertiary: var(--pgn-color-gray-700); - --pgn-color-btn-text-inverse-outline-success: var(--pgn-color-white); - --pgn-color-btn-text-inverse-outline-secondary: var(--pgn-color-white); - --pgn-color-btn-text-inverse-outline-primary: var(--pgn-color-white); - --pgn-color-btn-text-inverse-primary: var(--pgn-color-primary-base); - --pgn-color-btn-text-outline-primary: var(--pgn-color-primary-base); - --pgn-color-btn-text-inverse-outline-light: var(--pgn-color-white); - --pgn-color-btn-text-inverse-light: var(--pgn-color-light-base); - --pgn-color-btn-text-outline-light: var(--pgn-color-light-base); - --pgn-color-btn-text-inverse-outline-info: var(--pgn-color-white); - --pgn-color-btn-text-inverse-outline-dark: var(--pgn-color-white); - --pgn-color-btn-text-inverse-dark: var(--pgn-color-dark-base); - --pgn-color-btn-text-outline-dark: var(--pgn-color-dark-base); - --pgn-color-btn-text-inverse-outline-danger: var(--pgn-color-white); - --pgn-color-btn-text-inverse-outline-brand: var(--pgn-color-white); - --pgn-color-btn-text-inverse-brand: var(--pgn-color-brand-base); - --pgn-color-btn-text-outline-brand: var(--pgn-color-brand-base); - --pgn-color-bubble-bg-primary: var(--pgn-color-primary-base); - --pgn-color-bubble-text-primary: var(--pgn-color-white); - --pgn-color-bubble-text-error: var(--pgn-color-white); - --pgn-color-bubble-text-warning: var(--pgn-color-white); - --pgn-color-bubble-text-success: var(--pgn-color-white); - --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white); - --pgn-color-badge-bg-dark: var(--pgn-color-dark-base); - --pgn-color-badge-bg-light: var(--pgn-color-light-base); - --pgn-color-badge-bg-primary: var(--pgn-color-primary-base); - --pgn-color-badge-text-dark: #FFFFFFFF; - --pgn-color-badge-text-light: #454545FF; - --pgn-color-badge-text-primary: #FFFFFFFF; - --pgn-color-annotation-bg-dark: var(--pgn-color-dark-base); - --pgn-color-annotation-bg-light: var(--pgn-color-white); - --pgn-color-annotation-bg-warning: var(--pgn-color-accent-b); - --pgn-color-annotation-text-dark: var(--pgn-color-white); - --pgn-color-annotation-text-error: var(--pgn-color-white); - --pgn-color-annotation-text-warning: var(--pgn-color-black); - --pgn-color-annotation-text-success: var(--pgn-color-white); - --pgn-color-alert-content: var(--pgn-color-gray-700); - --pgn-color-alert-title: var(--pgn-color-black); - --pgn-color-theme-active-gray: var(--pgn-color-gray-900); - --pgn-color-theme-hover-gray: var(--pgn-color-gray-700); - --pgn-color-theme-border-gray: var(--pgn-color-gray-200); - --pgn-color-theme-bg-gray: var(--pgn-color-gray-100); - --pgn-color-border: var(--pgn-color-gray-200); - --pgn-color-active: var(--pgn-color-white); - --pgn-color-text-50-white: #FFFFFF80; - --pgn-color-text-50-black: #00000080; - --pgn-color-bg-base: var(--pgn-color-white); - --pgn-elevation-scrollable-body-box-shadow: #0000008C; - --pgn-elevation-menu-box-shadow: var(--pgn-elevation-box-shadow-base); - --pgn-elevation-icon-button-box-shadow-black-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-black-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-black-base); - --pgn-elevation-icon-button-box-shadow-dark-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-dark-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-dark-base); - --pgn-elevation-icon-button-box-shadow-light-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-light-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-light-base); - --pgn-elevation-icon-button-box-shadow-danger-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-danger-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-danger-base); - --pgn-elevation-icon-button-box-shadow-warning-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-warning-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-warning-base); - --pgn-elevation-icon-button-box-shadow-success-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-success-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-success-base); - --pgn-elevation-icon-button-box-shadow-brand-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-brand-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-brand-base); - --pgn-elevation-icon-button-box-shadow-secondary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-secondary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-secondary-base); - --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent); - --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base); - --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); - --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base); - --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base); - --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm); - --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); - --pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-primary-500); - --pgn-content-navbar-toggler-light-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300000080' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); - --pgn-content-navbar-toggler-dark-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FFFFFF80' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); - --pgn-content-carousel-control-bg-next-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' 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"); - --pgn-content-carousel-control-bg-prev-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' 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"); - --pgn-color-action-default-dark-900: #080C09FF; - --pgn-color-action-default-dark-800: #0A0F0CFF; - --pgn-color-action-default-dark-700: #0B130EFF; - --pgn-color-action-default-dark-600: #101913FF; - --pgn-color-action-default-dark-500: #142018FF; - --pgn-color-action-default-dark-400: #46534AFF; - --pgn-color-action-default-dark-300: #78877DFF; - --pgn-color-action-default-dark-200: #AEB7B1FF; - --pgn-color-action-default-dark-100: #D7DBDBFF; - --pgn-color-action-default-light-900: #85817FFF; - --pgn-color-action-default-light-800: #908C8AFF; - --pgn-color-action-default-light-700: #9B9795FF; - --pgn-color-action-default-light-600: #B3ADAAFF; - --pgn-color-action-default-light-500: #CAC3BFFF; - --pgn-color-action-default-light-400: #D2CCC8FF; - --pgn-color-action-default-light-300: #D9D4D1FF; - --pgn-color-action-default-light-200: #E2DED9FF; - --pgn-color-action-default-light-100: #E4E4E4FF; - --pgn-color-action-default-danger-base: #9A232EFF; - --pgn-color-action-default-warning-base: #CCAE00FF; - --pgn-color-action-default-info-base: #004C77FF; - --pgn-color-action-default-success-base: #0F5737FF; - --pgn-color-action-default-brand-900: #3B0020FF; - --pgn-color-action-default-brand-800: #430024FF; - --pgn-color-action-default-brand-700: #4B0028FF; - --pgn-color-action-default-brand-600: #5A0031FF; - --pgn-color-action-default-brand-500: #6A0039FF; - --pgn-color-action-default-brand-400: #903365FF; - --pgn-color-action-default-brand-300: #C05B91FF; - --pgn-color-action-default-brand-200: #D99ABBFF; - --pgn-color-action-default-brand-100: #EACCDDFF; - --pgn-color-action-default-secondary-base: #2B2B2BFF; - --pgn-color-action-default-primary-900: #02080EFF; - --pgn-color-action-default-primary-800: #020A13FF; - --pgn-color-action-default-primary-700: #030C16FF; - --pgn-color-action-default-primary-600: #04111FFF; - --pgn-color-action-default-primary-500: #051627FF; - --pgn-color-action-default-primary-400: #354A5FFF; - --pgn-color-action-default-primary-300: #677F95FF; - --pgn-color-action-default-primary-200: #A4B1C0FF; - --pgn-color-action-default-primary-100: #D1DBE1FF; - --pgn-color-action-default-gray-500: #575757FF; - --pgn-color-danger-900: #892029FF; - --pgn-color-danger-800: #92222CFF; - --pgn-color-danger-700: #9C242EFF; - --pgn-color-danger-600: #B02934FF; - --pgn-color-danger-500: var(--pgn-color-danger-base); - --pgn-color-danger-400: #D2626BFF; - --pgn-color-danger-300: #E1969DFF; - --pgn-color-danger-200: #F0CBCEFF; - --pgn-color-danger-100: #FBF2F3FF; - --pgn-color-warning-900: #B39800FF; - --pgn-color-warning-800: #BFA300FF; - --pgn-color-warning-700: #CCAE00FF; - --pgn-color-warning-600: #E6C300FF; - --pgn-color-warning-500: var(--pgn-color-warning-base); - --pgn-color-warning-400: #FFE340FF; - --pgn-color-warning-300: #FFEC80FF; - --pgn-color-warning-200: #FFF6BFFF; - --pgn-color-warning-100: #FFFDF0FF; - --pgn-color-info-900: #004C77FF; - --pgn-color-info-800: #005280FF; - --pgn-color-info-700: #005788FF; - --pgn-color-info-600: #006299FF; - --pgn-color-info-500: var(--pgn-color-info-base); - --pgn-color-info-400: #4092BFFF; - --pgn-color-info-300: #80B6D5FF; - --pgn-color-info-200: #BFDBEAFF; - --pgn-color-info-100: #F0F6FAFF; - --pgn-color-success-900: #105B3AFF; - --pgn-color-success-800: #11623EFF; - --pgn-color-success-700: #126842FF; - --pgn-color-success-600: #15754BFF; - --pgn-color-success-500: var(--pgn-color-success-base); - --pgn-color-success-400: #51A17EFF; - --pgn-color-success-300: #8BC1A9FF; - --pgn-color-success-200: #C5E0D4FF; - --pgn-color-success-100: #F1F8F5FF; - --pgn-color-secondary-900: #303030FF; - --pgn-color-secondary-800: #343434FF; - --pgn-color-secondary-700: #373737FF; - --pgn-color-secondary-600: #3E3E3EFF; - --pgn-color-secondary-500: var(--pgn-color-secondary-base); - --pgn-color-secondary-400: #747474FF; - --pgn-color-secondary-300: #A2A2A2FF; - --pgn-color-secondary-200: #D1D1D1FF; - --pgn-color-secondary-100: #F4F4F4FF; - --pgn-color-tooltip-arrow-base: var(--pgn-color-tooltip-bg-base); - --pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus); - --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover: var(--pgn-color-primary-300); - --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus); - --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus: var(--pgn-color-primary-500); - --pgn-color-tab-more-link-dropdown-toggle-bg-focus: var(--pgn-color-primary-500); - --pgn-color-tab-more-link-dropdown-toggle-text-active: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus); - --pgn-color-tab-more-link-dropdown-toggle-btn-text-focus: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus); - --pgn-color-stepper-header-step-bubble-error: var(--pgn-color-danger-base); - --pgn-color-stepper-header-step-bg-active: var(--pgn-color-gray-500); - --pgn-color-search-field-button-bg-brand: var(--pgn-color-brand-500); - --pgn-color-search-field-button-bg-primary: var(--pgn-color-primary-500); - --pgn-color-search-field-border-base: var(--pgn-color-gray-500); - --pgn-color-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500); - --pgn-color-progress-bar-border: var(--pgn-color-gray-500); - --pgn-color-product-tour-checkpoint-bg: var(--pgn-color-light-300); - --pgn-color-popover-body: var(--pgn-color-body-base); - --pgn-color-popover-header-text: var(--pgn-color-headings-base); - --pgn-color-popover-bg: var(--pgn-color-bg-base); - --pgn-color-pagination-focus-base: var(--pgn-color-primary-500); - --pgn-color-pagination-bg-base: var(--pgn-color-bg-base); - --pgn-color-pagination-text-active: var(--pgn-color-active); - --pgn-color-page-banner-bg-light: var(--pgn-color-light-400); - --pgn-color-page-banner-bg-dark: var(--pgn-color-dark-500); - --pgn-color-navbar-light-brand-hover: var(--pgn-color-navbar-light-active); - --pgn-color-navbar-light-brand-text: var(--pgn-color-navbar-light-active); - --pgn-color-navbar-dark-active: var(--pgn-color-active); - --pgn-color-nav-pills-inverse-tab-content-color: var(--pgn-color-nav-pills-inverse-link-text-base); - --pgn-color-nav-pills-inverse-link-bg-active-focus-hover: var(--pgn-color-nav-pills-inverse-link-text-base); - --pgn-color-nav-pills-inverse-link-bg-active: var(--pgn-color-nav-pills-inverse-link-text-base); - --pgn-color-nav-pills-inverse-link-border-focus-hover: var(--pgn-color-nav-pills-inverse-link-border-active-focus); - --pgn-color-nav-pills-inverse-link-border-active: var(--pgn-color-nav-pills-inverse-link-text-base); - --pgn-color-nav-pills-inverse-link-border-base: var(--pgn-color-dark-300); - --pgn-color-nav-pills-inverse-link-text-active-hover: var(--pgn-color-nav-pills-inverse-link-text-base); - --pgn-color-nav-pills-inverse-link-text-hover: var(--pgn-color-nav-pills-inverse-link-text-base); - --pgn-color-nav-pills-inverse-link-text-active: var(--pgn-color-primary-500); - --pgn-color-nav-pills-inverse-link-text-focus: var(--pgn-color-nav-pills-inverse-link-text-base); - --pgn-color-nav-pills-base-link-active-text: var(--pgn-color-active); - --pgn-color-nav-tabs-inverse-link-tab-content-color: var(--pgn-color-nav-tabs-inverse-link-text-base); - --pgn-color-nav-tabs-inverse-link-bg-focus: var(--pgn-color-nav-tabs-inverse-link-text-base); - --pgn-color-nav-tabs-inverse-link-border-active: var(--pgn-color-nav-tabs-inverse-link-text-base); - --pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300); - --pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-primary-500); - --pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-light-400); - --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400); - --pgn-color-modal-content-bg: var(--pgn-color-bg-base); - --pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500); - --pgn-color-menu-item-hover-color: var(--pgn-color-btn-text-tertiary); - --pgn-color-menu-item-color: var(--pgn-color-body-base); - --pgn-color-image-figure-caption: var(--pgn-color-gray-500); - --pgn-color-icon-button-text-black-inverse-active-focus: var(--pgn-color-icon-button-text-black-inverse-active-base); - --pgn-color-icon-button-text-black-inverse-active-hover: var(--pgn-color-icon-button-text-black-inverse-active-base); - --pgn-color-icon-button-text-black-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-black-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-black-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-black-inverse-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-black-inverse-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-black-focus: var(--pgn-color-icon-button-text-black-base); - --pgn-color-icon-button-text-black-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-dark-inverse-active-focus: var(--pgn-color-icon-button-text-dark-inverse-active-base); - --pgn-color-icon-button-text-dark-inverse-active-hover: var(--pgn-color-icon-button-text-dark-inverse-active-base); - --pgn-color-icon-button-text-dark-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-dark-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-dark-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-dark-inverse-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-dark-inverse-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-dark-focus: var(--pgn-color-icon-button-text-dark-base); - --pgn-color-icon-button-text-dark-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-light-inverse-active-focus: var(--pgn-color-icon-button-text-light-inverse-active-base); - --pgn-color-icon-button-text-light-inverse-active-hover: var(--pgn-color-icon-button-text-light-inverse-active-base); - --pgn-color-icon-button-text-light-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-light-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-light-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-light-inverse-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-light-inverse-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-light-focus: var(--pgn-color-icon-button-text-light-base); - --pgn-color-icon-button-text-light-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-danger-inverse-active-base: var(--pgn-color-danger-base); - --pgn-color-icon-button-text-danger-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-danger-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-danger-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-danger-inverse-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-danger-inverse-hover: var(--pgn-color-danger-base); - --pgn-color-icon-button-text-danger-inverse-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-danger-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-danger-base: var(--pgn-color-danger-base); - --pgn-color-icon-button-text-warning-inverse-active-base: var(--pgn-color-warning-base); - --pgn-color-icon-button-text-warning-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-warning-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-warning-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-warning-inverse-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-warning-inverse-hover: var(--pgn-color-warning-base); - --pgn-color-icon-button-text-warning-inverse-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-warning-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-warning-base: var(--pgn-color-warning-base); - --pgn-color-icon-button-text-success-inverse-active-base: var(--pgn-color-success-base); - --pgn-color-icon-button-text-success-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-success-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-success-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-success-inverse-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-success-inverse-hover: var(--pgn-color-success-base); - --pgn-color-icon-button-text-success-inverse-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-success-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-success-base: var(--pgn-color-success-base); - --pgn-color-icon-button-text-brand-inverse-active-focus: var(--pgn-color-icon-button-text-brand-inverse-active-base); - --pgn-color-icon-button-text-brand-inverse-active-hover: var(--pgn-color-icon-button-text-brand-inverse-active-base); - --pgn-color-icon-button-text-brand-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-brand-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-brand-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-brand-inverse-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-brand-inverse-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-brand-focus: var(--pgn-color-icon-button-text-brand-base); - --pgn-color-icon-button-text-brand-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-secondary-inverse-active-base: var(--pgn-color-secondary-base); - --pgn-color-icon-button-text-secondary-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-secondary-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-secondary-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-secondary-inverse-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-secondary-inverse-hover: var(--pgn-color-secondary-base); - --pgn-color-icon-button-text-secondary-inverse-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-secondary-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-secondary-base: var(--pgn-color-secondary-base); - --pgn-color-icon-button-text-primary-inverse-active-focus: var(--pgn-color-icon-button-text-primary-base); - --pgn-color-icon-button-text-primary-inverse-active-base: var(--pgn-color-icon-button-text-primary-base); - --pgn-color-icon-button-text-primary-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-primary-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-primary-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-primary-inverse-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-primary-inverse-hover: var(--pgn-color-icon-button-text-primary-base); - --pgn-color-icon-button-text-primary-inverse-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-text-primary-focus: var(--pgn-color-icon-button-text-primary-base); - --pgn-color-icon-button-text-primary-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-black-inverse-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-black-inverse-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-black-inverse-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-black-active-focus: var(--pgn-color-icon-button-bg-black-active-base); - --pgn-color-icon-button-bg-black-active-hover: var(--pgn-color-icon-button-bg-black-active-base); - --pgn-color-icon-button-bg-black-inverse-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-dark-inverse-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-dark-inverse-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-dark-inverse-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-dark-active-focus: var(--pgn-color-icon-button-bg-dark-active-base); - --pgn-color-icon-button-bg-dark-active-hover: var(--pgn-color-icon-button-bg-dark-active-base); - --pgn-color-icon-button-bg-dark-inverse-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-light-inverse-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-light-inverse-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-light-inverse-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-light-active-focus: var(--pgn-color-icon-button-bg-light-active-base); - --pgn-color-icon-button-bg-light-active-hover: var(--pgn-color-icon-button-bg-light-active-base); - --pgn-color-icon-button-bg-light-inverse-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-danger-inverse-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-danger-inverse-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-danger-inverse-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-danger-active-base: var(--pgn-color-danger-base); - --pgn-color-icon-button-bg-danger-inverse-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-danger-hover: var(--pgn-color-danger-base); - --pgn-color-icon-button-bg-warning-inverse-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-warning-inverse-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-warning-inverse-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-warning-active-base: var(--pgn-color-warning-base); - --pgn-color-icon-button-bg-warning-inverse-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-warning-hover: var(--pgn-color-warning-base); - --pgn-color-icon-button-bg-success-inverse-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-success-inverse-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-success-inverse-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-success-active-base: var(--pgn-color-success-base); - --pgn-color-icon-button-bg-success-inverse-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-success-hover: var(--pgn-color-success-base); - --pgn-color-icon-button-bg-brand-inverse-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-brand-inverse-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-brand-inverse-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-brand-active-focus: var(--pgn-color-icon-button-bg-brand-active-base); - --pgn-color-icon-button-bg-brand-active-hover: var(--pgn-color-icon-button-bg-brand-active-base); - --pgn-color-icon-button-bg-brand-inverse-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-secondary-inverse-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-secondary-inverse-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-secondary-inverse-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-secondary-active-base: var(--pgn-color-secondary-base); - --pgn-color-icon-button-bg-secondary-inverse-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-secondary-hover: var(--pgn-color-secondary-base); - --pgn-color-icon-button-bg-primary-inverse-active-focus: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-primary-inverse-active-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-primary-inverse-active-base: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-primary-active-focus: var(--pgn-color-icon-button-text-primary-base); - --pgn-color-icon-button-bg-primary-active-hover: var(--pgn-color-icon-button-text-primary-base); - --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base); - --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent); - --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base); - --pgn-color-blockquote-small: var(--pgn-color-gray-500); - --pgn-color-text-muted: var(--pgn-color-gray-500); - --pgn-color-list-group-action-active-base: var(--pgn-color-body-base); - --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base); - --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base); - --pgn-color-list-group-active-base: var(--pgn-color-active); - --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500); - --pgn-color-link-brand-base: var(--pgn-color-brand-500); - --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500); - --pgn-color-link-muted-base: var(--pgn-color-primary-500); - --pgn-color-body-bg: var(--pgn-color-bg-base); - --pgn-color-form-feedback-invalid: var(--pgn-color-danger-base); - --pgn-color-form-feedback-valid: var(--pgn-color-success-base); - --pgn-color-form-control-file-button-bg: var(--pgn-color-form-input-group-addon-bg); - --pgn-color-form-control-file-bg-disabled: var(--pgn-color-form-input-bg-disabled); - --pgn-color-form-control-file-base: var(--pgn-color-form-input-base); - --pgn-color-form-control-select-indicator-base: var(--pgn-color-theme-hover-gray); - --pgn-color-form-control-select-base: var(--pgn-color-form-input-base); - --pgn-color-form-control-switch-indicator-checked-bg: var(--pgn-color-success-base); - --pgn-color-form-control-indicator-active-base: var(--pgn-color-active); - --pgn-color-form-control-indicator-checked-invalid: var(--pgn-color-danger-base); - --pgn-color-form-control-indicator-checked-valid: var(--pgn-color-success-base); - --pgn-color-form-control-indicator-bg-disabled: var(--pgn-color-form-input-bg-disabled); - --pgn-color-form-input-focus-base: var(--pgn-color-form-input-base); - --pgn-color-form-input-group-addon-base: var(--pgn-color-form-input-base); - --pgn-color-form-input-bg-base: var(--pgn-color-bg-base); - --pgn-color-form-input-border: var(--pgn-color-gray-500); - --pgn-color-form-input-plaintext: var(--pgn-color-body-base); - --pgn-color-form-input-placeholder: var(--pgn-color-gray-500); - --pgn-color-dropzone-border-base: var(--pgn-color-gray-500); - --pgn-color-dropzone-restriction-msg: var(--pgn-color-gray-500); - --pgn-color-dropdown-link-active-base: var(--pgn-color-active); - --pgn-color-dropdown-link-hover-bg: var(--pgn-color-light-300); - --pgn-color-dropdown-bg: var(--pgn-color-bg-base); - --pgn-color-dropdown-header: var(--pgn-color-gray-500); - --pgn-color-dropdown-text: var(--pgn-color-body-base); - --pgn-color-data-table-border: var(--pgn-color-light-300); - --pgn-color-data-table-bg-base: var(--pgn-color-bg-base); - --pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark); - --pgn-color-chip-label-base: var(--pgn-color-primary-700); - --pgn-color-chip-border-focus-selected-light: var(--pgn-color-dark-500); - --pgn-color-chip-border-focus-selected-dark: var(--pgn-color-chip-outline-dark); - --pgn-color-chip-border-base: var(--pgn-color-light-800); - --pgn-color-chip-bg-dark: var(--pgn-color-primary-300); - --pgn-color-card-divider-bg: var(--pgn-color-light-400); - --pgn-color-card-border-focus-base: var(--pgn-color-primary-500); - --pgn-color-card-bg-muted: var(--pgn-color-light-200); - --pgn-color-card-bg-dark: var(--pgn-color-primary-500); - --pgn-color-card-bg-base: var(--pgn-color-bg-base); - --pgn-color-btn-disabled-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning); - --pgn-color-btn-disabled-border-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary); - --pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-secondary-base); - --pgn-color-btn-disabled-border-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); - --pgn-color-btn-disabled-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light); - --pgn-color-btn-disabled-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info); - --pgn-color-btn-disabled-border-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark); - --pgn-color-btn-disabled-border-inverse-outline-danger: var(--pgn-color-btn-border-inverse-outline-danger); - --pgn-color-btn-disabled-border-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand); - --pgn-color-btn-disabled-border-inverse-brand: var(--pgn-color-btn-disabled-bg-inverse-brand); - --pgn-color-btn-disabled-border-outline-brand: var(--pgn-color-btn-border-outline-brand); - --pgn-color-btn-disabled-bg-primary: var(--pgn-color-btn-bg-primary); - --pgn-color-btn-disabled-bg-light: var(--pgn-color-btn-bg-light); - --pgn-color-btn-disabled-bg-dark: var(--pgn-color-btn-bg-dark); - --pgn-color-btn-disabled-bg-brand: var(--pgn-color-btn-bg-brand); - --pgn-color-btn-disabled-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning); - --pgn-color-btn-disabled-text-inverse-warning: var(--pgn-color-warning-base); - --pgn-color-btn-disabled-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary); - --pgn-color-btn-disabled-text-tertiary: var(--pgn-color-btn-text-tertiary); - --pgn-color-btn-disabled-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success); - --pgn-color-btn-disabled-text-inverse-success: var(--pgn-color-success-base); - --pgn-color-btn-disabled-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary); - --pgn-color-btn-disabled-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); - --pgn-color-btn-disabled-text-inverse-primary: var(--pgn-color-primary-500); - --pgn-color-btn-disabled-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light); - --pgn-color-btn-disabled-text-inverse-light: var(--pgn-color-btn-text-inverse-light); - --pgn-color-btn-disabled-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info); - --pgn-color-btn-disabled-text-inverse-info: var(--pgn-color-info-base); - --pgn-color-btn-disabled-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark); - --pgn-color-btn-disabled-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark); - --pgn-color-btn-disabled-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger); - --pgn-color-btn-disabled-text-inverse-danger: var(--pgn-color-danger-base); - --pgn-color-btn-disabled-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand); - --pgn-color-btn-disabled-text-inverse-brand: var(--pgn-color-brand-500); - --pgn-color-btn-focus-outline-inverse-success: var(--pgn-color-btn-focus-border-inverse-success); - --pgn-color-btn-focus-outline-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary); - --pgn-color-btn-focus-outline-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary); - --pgn-color-btn-focus-outline-inverse-primary: var(--pgn-color-btn-focus-border-inverse-primary); - --pgn-color-btn-focus-outline-light: var(--pgn-color-primary-300); - --pgn-color-btn-focus-outline-inverse-info: var(--pgn-color-btn-focus-border-inverse-info); - --pgn-color-btn-focus-outline-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark); - --pgn-color-btn-focus-outline-inverse-dark: var(--pgn-color-btn-focus-border-inverse-dark); - --pgn-color-btn-focus-outline-inverse-outline-danger: var(--pgn-color-btn-focus-border-inverse-danger); - --pgn-color-btn-focus-outline-inverse-danger: var(--pgn-color-btn-focus-border-inverse-danger); - --pgn-color-btn-focus-outline-inverse-brand: var(--pgn-color-btn-focus-border-inverse-brand); - --pgn-color-btn-focus-bg-primary: var(--pgn-color-btn-bg-primary); - --pgn-color-btn-focus-bg-light: var(--pgn-color-btn-bg-light); - --pgn-color-btn-focus-bg-dark: var(--pgn-color-btn-bg-dark); - --pgn-color-btn-focus-bg-brand: var(--pgn-color-btn-bg-brand); - --pgn-color-btn-focus-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning); - --pgn-color-btn-focus-border-inverse-outline-success: var(--pgn-color-btn-border-inverse-outline-success); - --pgn-color-btn-focus-border-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary); - --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-btn-border-outline-primary); - --pgn-color-btn-focus-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light); - --pgn-color-btn-focus-border-outline-light: var(--pgn-color-btn-border-outline-light); - --pgn-color-btn-focus-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info); - --pgn-color-btn-focus-border-outline-dark: var(--pgn-color-btn-border-outline-dark); - --pgn-color-btn-focus-border-inverse-outline-brand: var(--pgn-color-btn-border-inverse-outline-brand); - --pgn-color-btn-focus-border-outline-brand: var(--pgn-color-btn-border-outline-brand); - --pgn-color-btn-focus-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning); - --pgn-color-btn-focus-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary); - --pgn-color-btn-focus-text-tertiary: var(--pgn-color-btn-text-tertiary); - --pgn-color-btn-focus-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success); - --pgn-color-btn-focus-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary); - --pgn-color-btn-focus-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); - --pgn-color-btn-focus-text-inverse-primary: var(--pgn-color-btn-text-inverse-primary); - --pgn-color-btn-focus-text-outline-primary: var(--pgn-color-btn-text-outline-primary); - --pgn-color-btn-focus-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light); - --pgn-color-btn-focus-text-inverse-light: var(--pgn-color-btn-text-inverse-light); - --pgn-color-btn-focus-text-outline-light: var(--pgn-color-btn-text-outline-light); - --pgn-color-btn-focus-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info); - --pgn-color-btn-focus-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark); - --pgn-color-btn-focus-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark); - --pgn-color-btn-focus-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger); - --pgn-color-btn-focus-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand); - --pgn-color-btn-focus-text-outline-brand: var(--pgn-color-btn-text-outline-brand); - --pgn-color-btn-focus-text-inverse-brand: var(--pgn-color-btn-text-inverse-brand); - --pgn-color-btn-active-bg-inverse-tertiary: var(--pgn-color-btn-hover-bg-inverse-tertiary); - --pgn-color-btn-active-bg-tertiary: var(--pgn-color-light-500); - --pgn-color-btn-active-text-inverse-primary: #051627FF; - --pgn-color-btn-active-text-inverse-light: #CAC3BFFF; - --pgn-color-btn-active-text-inverse-dark: #142018FF; - --pgn-color-btn-active-text-inverse-brand: #6A0039FF; - --pgn-color-btn-hover-border-outline-primary: var(--pgn-color-primary-900); - --pgn-color-btn-hover-border-outline-light: var(--pgn-color-light-900); - --pgn-color-btn-hover-border-outline-dark: var(--pgn-color-dark-900); - --pgn-color-btn-hover-border-outline-brand: var(--pgn-color-brand-900); - --pgn-color-btn-hover-bg-tertiary: var(--pgn-color-light-500); - --pgn-color-btn-hover-bg-inverse-outline-primary: var(--pgn-color-primary-100); - --pgn-color-btn-hover-bg-outline-primary: var(--pgn-color-primary-100); - --pgn-color-btn-hover-bg-inverse-outline-light: var(--pgn-color-light-100); - --pgn-color-btn-hover-bg-outline-light: var(--pgn-color-light-100); - --pgn-color-btn-hover-bg-inverse-outline-dark: var(--pgn-color-dark-100); - --pgn-color-btn-hover-bg-outline-dark: var(--pgn-color-dark-100); - --pgn-color-btn-hover-bg-inverse-outline-brand: var(--pgn-color-brand-100); - --pgn-color-btn-hover-bg-outline-brand: var(--pgn-color-brand-100); - --pgn-color-btn-hover-text-inverse-primary: #061D33FF; - --pgn-color-btn-hover-text-inverse-light: #D0C9C6FF; - --pgn-color-btn-hover-text-inverse-dark: #18271DFF; - --pgn-color-btn-hover-text-inverse-brand: #770040FF; - --pgn-color-btn-border-outline-warning: var(--pgn-color-warning-base); - --pgn-color-btn-border-outline-success: var(--pgn-color-success-base); - --pgn-color-btn-border-outline-secondary: var(--pgn-color-secondary-base); - --pgn-color-btn-border-primary: var(--pgn-color-btn-bg-primary); - --pgn-color-btn-border-light: var(--pgn-color-btn-bg-light); - --pgn-color-btn-border-outline-info: var(--pgn-color-info-base); - --pgn-color-btn-border-dark: var(--pgn-color-btn-bg-dark); - --pgn-color-btn-border-outline-danger: var(--pgn-color-danger-base); - --pgn-color-btn-border-brand: var(--pgn-color-btn-bg-brand); - --pgn-color-btn-bg-warning: var(--pgn-color-warning-base); - --pgn-color-btn-bg-success: var(--pgn-color-success-base); - --pgn-color-btn-bg-secondary: var(--pgn-color-secondary-base); - --pgn-color-btn-bg-inverse-primary: #FFFFFFFF; - --pgn-color-btn-bg-inverse-light: #454545FF; - --pgn-color-btn-bg-info: var(--pgn-color-info-base); - --pgn-color-btn-bg-inverse-dark: #FFFFFFFF; - --pgn-color-btn-bg-danger: var(--pgn-color-danger-base); - --pgn-color-btn-bg-inverse-brand: #FFFFFFFF; - --pgn-color-btn-text-inverse-warning: var(--pgn-color-warning-base); - --pgn-color-btn-text-outline-warning: var(--pgn-color-warning-base); - --pgn-color-btn-text-inverse-success: var(--pgn-color-success-base); - --pgn-color-btn-text-outline-success: var(--pgn-color-success-base); - --pgn-color-btn-text-inverse-secondary: var(--pgn-color-secondary-base); - --pgn-color-btn-text-outline-secondary: var(--pgn-color-secondary-base); - --pgn-color-btn-text-primary: #FFFFFFFF; - --pgn-color-btn-text-light: #454545FF; - --pgn-color-btn-text-inverse-info: var(--pgn-color-info-base); - --pgn-color-btn-text-outline-info: var(--pgn-color-info-base); - --pgn-color-btn-text-dark: #FFFFFFFF; - --pgn-color-btn-text-inverse-danger: var(--pgn-color-danger-base); - --pgn-color-btn-text-outline-danger: var(--pgn-color-danger-base); - --pgn-color-btn-text-brand: #FFFFFFFF; - --pgn-color-bubble-bg-error: var(--pgn-color-danger-base); - --pgn-color-bubble-bg-warning: var(--pgn-color-warning-base); - --pgn-color-bubble-bg-success: var(--pgn-color-success-base); - --pgn-color-breadcrumb-inverse-spacer: var(--pgn-color-light-700); - --pgn-color-breadcrumb-inverse-active: var(--pgn-color-light-500); - --pgn-color-breadcrumb-active: var(--pgn-color-gray-500); - --pgn-color-breadcrumb-base: var(--pgn-color-primary-500); - --pgn-color-badge-focus-box-shadow-dark: #273F2F0D; - --pgn-color-badge-focus-box-shadow-light: #E1DDDB0D; - --pgn-color-badge-focus-box-shadow-primary: #0A30550D; - --pgn-color-badge-focus-bg-dark: #142018FF; - --pgn-color-badge-focus-bg-light: #CAC3BFFF; - --pgn-color-badge-focus-bg-primary: #051627FF; - --pgn-color-badge-focus-dark: var(--pgn-color-badge-text-dark); - --pgn-color-badge-focus-light: var(--pgn-color-badge-text-light); - --pgn-color-badge-focus-primary: var(--pgn-color-badge-text-primary); - --pgn-color-badge-bg-info: var(--pgn-color-info-base); - --pgn-color-badge-bg-danger: var(--pgn-color-danger-base); - --pgn-color-badge-bg-warning: var(--pgn-color-warning-base); - --pgn-color-badge-bg-success: var(--pgn-color-success-base); - --pgn-color-badge-bg-secondary: var(--pgn-color-secondary-base); - --pgn-color-badge-text-info: #FFFFFFFF; - --pgn-color-badge-text-warning: #454545FF; - --pgn-color-badge-text-danger: #FFFFFFFF; - --pgn-color-badge-text-success: #FFFFFFFF; - --pgn-color-badge-text-secondary: #FFFFFFFF; - --pgn-color-avatar-border: var(--pgn-color-light-300); - --pgn-color-annotation-bg-error: var(--pgn-color-danger-base); - --pgn-color-annotation-bg-success: var(--pgn-color-success-base); - --pgn-color-annotation-text-light: var(--pgn-color-primary-500); - --pgn-color-theme-active-dark: var(--pgn-color-dark-900); - --pgn-color-theme-active-light: var(--pgn-color-light-900); - --pgn-color-theme-active-brand: var(--pgn-color-brand-900); - --pgn-color-theme-active-primary: var(--pgn-color-primary-900); - --pgn-color-theme-hover-dark: var(--pgn-color-dark-700); - --pgn-color-theme-hover-light: var(--pgn-color-light-700); - --pgn-color-theme-hover-brand: var(--pgn-color-brand-700); - --pgn-color-theme-hover-primary: var(--pgn-color-primary-700); - --pgn-color-theme-default-gray: var(--pgn-color-gray-500); - --pgn-color-theme-default-dark: var(--pgn-color-dark-500); - --pgn-color-theme-default-light: var(--pgn-color-light-500); - --pgn-color-theme-default-brand: var(--pgn-color-brand-500); - --pgn-color-theme-default-primary: var(--pgn-color-primary-500); - --pgn-color-theme-focus-gray: var(--pgn-color-gray-500); - --pgn-color-theme-focus-dark: var(--pgn-color-dark-500); - --pgn-color-theme-focus-light: var(--pgn-color-light-500); - --pgn-color-theme-focus-brand: var(--pgn-color-brand-500); - --pgn-color-theme-focus-primary: var(--pgn-color-primary-500); - --pgn-color-theme-border-dark: var(--pgn-color-dark-200); - --pgn-color-theme-border-light: var(--pgn-color-light-200); - --pgn-color-theme-border-brand: var(--pgn-color-brand-200); - --pgn-color-theme-border-primary: var(--pgn-color-primary-200); - --pgn-color-theme-bg-dark: var(--pgn-color-dark-100); - --pgn-color-theme-bg-light: var(--pgn-color-light-100); - --pgn-color-theme-bg-brand: var(--pgn-color-brand-100); - --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); - --pgn-color-table-border: var(--pgn-color-border); - --pgn-color-input-focus: var(--pgn-color-primary-500); - --pgn-color-disabled: var(--pgn-color-gray-500); - --pgn-color-bg-active: var(--pgn-color-primary-500); - --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow); - --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow); - --pgn-elevation-form-input-focus: 0 0 0 1px var(--pgn-color-primary-500); - --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500); --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text); - --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base); + --pgn-border-color-nav-tabs-link-border-hover-left: transparent; + --pgn-border-color-nav-tabs-link-border-hover-bottom: var(--pgn-color-nav-tabs-base-border-base); + --pgn-border-color-nav-tabs-link-border-hover-right: transparent; + --pgn-border-color-nav-tabs-link-border-hover-top: transparent; + --pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-primary-500); + --pgn-content-navbar-toggler-light-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300000080' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + --pgn-content-navbar-toggler-dark-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FFFFFF80' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + --pgn-content-carousel-control-bg-next-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' 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"); + --pgn-content-carousel-control-bg-prev-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' 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"); + --pgn-color-action-default-accent-b: #FFE755FF; + --pgn-color-action-default-accent-a: #0095C6FF; + --pgn-color-action-default-dark-base: #142018FF; + --pgn-color-action-default-dark-900: #080C09FF; + --pgn-color-action-default-dark-800: #0A0F0CFF; + --pgn-color-action-default-dark-700: #0B130EFF; + --pgn-color-action-default-dark-600: #101913FF; + --pgn-color-action-default-dark-500: #142018FF; + --pgn-color-action-default-dark-400: #46534AFF; + --pgn-color-action-default-dark-300: #78877DFF; + --pgn-color-action-default-dark-200: #AEB7B1FF; + --pgn-color-action-default-dark-100: #D7DBDBFF; + --pgn-color-action-default-light-base: #CAC3BFFF; + --pgn-color-action-default-light-900: #85817FFF; + --pgn-color-action-default-light-800: #908C8AFF; + --pgn-color-action-default-light-700: #9B9795FF; + --pgn-color-action-default-light-600: #B3ADAAFF; + --pgn-color-action-default-light-500: #CAC3BFFF; + --pgn-color-action-default-light-400: #D2CCC8FF; + --pgn-color-action-default-light-300: #D9D4D1FF; + --pgn-color-action-default-light-200: #E2DED9FF; + --pgn-color-action-default-light-100: #E4E4E4FF; + --pgn-color-action-default-danger-base: #9A232EFF; --pgn-color-action-default-danger-900: #60161DFF; --pgn-color-action-default-danger-800: #691820FF; --pgn-color-action-default-danger-700: #731A22FF; @@ -1149,6 +46,7 @@ --pgn-color-action-default-danger-300: #D66E78FF; --pgn-color-action-default-danger-200: #E5A3A9FF; --pgn-color-action-default-danger-100: #EFCBCFFF; + --pgn-color-action-default-warning-base: #CCAE00FF; --pgn-color-action-default-warning-900: #806D00FF; --pgn-color-action-default-warning-800: #8C7700FF; --pgn-color-action-default-warning-700: #998300FF; @@ -1158,6 +56,7 @@ --pgn-color-action-default-warning-300: #FFE44DFF; --pgn-color-action-default-warning-200: #FFEF8CFF; --pgn-color-action-default-warning-100: #FFF6BDFF; + --pgn-color-action-default-info-base: #004C77FF; --pgn-color-action-default-info-900: #002B44FF; --pgn-color-action-default-info-800: #00314DFF; --pgn-color-action-default-info-700: #003655FF; @@ -1167,6 +66,7 @@ --pgn-color-action-default-info-300: #5AA0C8FF; --pgn-color-action-default-info-200: #99C5DDFF; --pgn-color-action-default-info-100: #CADFEDFF; + --pgn-color-action-default-success-base: #0F5737FF; --pgn-color-action-default-success-900: #08301EFF; --pgn-color-action-default-success-800: #093723FF; --pgn-color-action-default-success-700: #0A3D26FF; @@ -1176,6 +76,17 @@ --pgn-color-action-default-success-300: #6AAF90FF; --pgn-color-action-default-success-200: #A4CEBBFF; --pgn-color-action-default-success-100: #CFE7DDFF; + --pgn-color-action-default-brand-base: #6A0039FF; + --pgn-color-action-default-brand-900: #3B0020FF; + --pgn-color-action-default-brand-800: #430024FF; + --pgn-color-action-default-brand-700: #4B0028FF; + --pgn-color-action-default-brand-600: #5A0031FF; + --pgn-color-action-default-brand-500: #6A0039FF; + --pgn-color-action-default-brand-400: #903365FF; + --pgn-color-action-default-brand-300: #C05B91FF; + --pgn-color-action-default-brand-200: #D99ABBFF; + --pgn-color-action-default-brand-100: #EACCDDFF; + --pgn-color-action-default-secondary-base: #2B2B2BFF; --pgn-color-action-default-secondary-900: #161616FF; --pgn-color-action-default-secondary-800: #1A1A1AFF; --pgn-color-action-default-secondary-700: #1E1E1EFF; @@ -1185,63 +96,561 @@ --pgn-color-action-default-secondary-300: #898989FF; --pgn-color-action-default-secondary-200: #B8B8B8FF; --pgn-color-action-default-secondary-100: #DBDBDBFF; + --pgn-color-action-default-primary-base: #051627FF; + --pgn-color-action-default-primary-900: #02080EFF; + --pgn-color-action-default-primary-800: #020A13FF; + --pgn-color-action-default-primary-700: #030C16FF; + --pgn-color-action-default-primary-600: #04111FFF; + --pgn-color-action-default-primary-500: #051627FF; + --pgn-color-action-default-primary-400: #354A5FFF; + --pgn-color-action-default-primary-300: #677F95FF; + --pgn-color-action-default-primary-200: #A4B1C0FF; + --pgn-color-action-default-primary-100: #D1DBE1FF; + --pgn-color-action-default-gray-base: #575757FF; + --pgn-color-action-default-gray-900: #0A0C0DFF; + --pgn-color-action-default-gray-800: #1A1A1AFF; + --pgn-color-action-default-gray-700: #2B2B2BFF; + --pgn-color-action-default-gray-600: #424242FF; + --pgn-color-action-default-gray-500: #575757FF; + --pgn-color-action-default-gray-400: #767676FF; + --pgn-color-action-default-gray-300: #949494FF; + --pgn-color-action-default-gray-200: #B3B3B3FF; + --pgn-color-action-default-gray-100: #D2D2D2FF; + --pgn-color-dark-base: #273F2FFF; /* Basic dark color. */ + --pgn-color-dark-900: #1B2C21FF; /* Dark color of level 900. */ + --pgn-color-dark-800: #1D2F23FF; /* Dark color of level 800. */ + --pgn-color-dark-700: #1F3226FF; /* Info color of level 700. */ + --pgn-color-dark-600: #23392AFF; /* Dark color of level 600. */ + --pgn-color-dark-500: var(--pgn-color-dark-base); /* Dark color of level 500. */ + --pgn-color-dark-400: #5D6F63FF; /* Dark color of level 400. */ + --pgn-color-dark-300: #939F97FF; /* Dark color of level 300. */ + --pgn-color-dark-200: #C9CFCBFF; /* Dark color of level 200. */ + --pgn-color-dark-100: #F2F3F3FF; /* Dark color of level 100. */ + --pgn-color-light-base: #E1DDDBFF; /* Basic light color. */ + --pgn-color-light-900: #9E9B99FF; /* Light color of level 900. */ + --pgn-color-light-800: #A9A6A4FF; /* Light color of level 800. */ + --pgn-color-light-700: #B4B1AFFF; /* Light color of level 700. */ + --pgn-color-light-600: #CBC7C5FF; /* Light color of level 600. */ + --pgn-color-light-500: var(--pgn-color-light-base); /* Light color of level 500. */ + --pgn-color-light-400: #E9E6E4FF; /* Light color of level 400. */ + --pgn-color-light-300: #F0EEEDFF; /* Light color of level 300. */ + --pgn-color-light-200: #F8F7F6FF; /* Light color of level 200. */ + --pgn-color-light-100: #FDFDFDFF; /* Light color of level 100. */ + --pgn-color-danger-base: var(--pgn-color-red); /* Basic danger color. */ + --pgn-color-danger-900: #892029FF; /* Danger color of level 900. */ + --pgn-color-danger-800: #92222CFF; /* Danger color of level 800. */ + --pgn-color-danger-700: #9C242EFF; /* Danger color of level 700. */ + --pgn-color-danger-600: #B02934FF; /* Danger color of level 600. */ + --pgn-color-danger-500: var(--pgn-color-danger-base); /* Danger color of level 500. */ + --pgn-color-danger-400: #D2626BFF; /* Danger color of level 400. */ + --pgn-color-danger-300: #E1969DFF; /* Danger color of level 300. */ + --pgn-color-danger-200: #F0CBCEFF; /* Danger color of level 200. */ + --pgn-color-danger-100: #FBF2F3FF; /* Danger color of level 100. */ + --pgn-color-warning-base: var(--pgn-color-yellow); /* Basic warning color. */ + --pgn-color-warning-900: #B39800FF; /* Warning color of level 900. */ + --pgn-color-warning-800: #BFA300FF; /* Warning color of level 800. */ + --pgn-color-warning-700: #CCAE00FF; /* Warning color of level 700. */ + --pgn-color-warning-600: #E6C300FF; /* Warning color of level 600. */ + --pgn-color-warning-500: var(--pgn-color-warning-base); /* Warning color of level 500. */ + --pgn-color-warning-400: #FFE340FF; /* Warning color of level 400. */ + --pgn-color-warning-300: #FFEC80FF; /* Warning color of level 300. */ + --pgn-color-warning-200: #FFF6BFFF; /* Warning color of level 200. */ + --pgn-color-warning-100: #FFFDF0FF; /* Warning color of level 100. */ + --pgn-color-info-base: var(--pgn-color-teal); /* Basic info color. */ + --pgn-color-info-900: #004C77FF; /* Info color of level 900. */ + --pgn-color-info-800: #005280FF; /* Info color of level 800. */ + --pgn-color-info-700: #005788FF; /* Info color of level 700. */ + --pgn-color-info-600: #006299FF; /* Info color of level 600. */ + --pgn-color-info-500: var(--pgn-color-info-base); /* Info color of level 500. */ + --pgn-color-info-400: #4092BFFF; /* Info color of level 400. */ + --pgn-color-info-300: #80B6D5FF; /* Info color of level 300. */ + --pgn-color-info-200: #BFDBEAFF; /* Info color of level 200. */ + --pgn-color-info-100: #F0F6FAFF; /* Info color of level 100. */ + --pgn-color-success-base: var(--pgn-color-green); /* Basic success color. */ + --pgn-color-success-900: #105B3AFF; /* Success color of level 900. */ + --pgn-color-success-800: #11623EFF; /* Success color of level 800. */ + --pgn-color-success-700: #126842FF; /* Success color of level 700. */ + --pgn-color-success-600: #15754BFF; /* Success color of level 600. */ + --pgn-color-success-500: var(--pgn-color-success-base); /* Success color of level 500. */ + --pgn-color-success-400: #51A17EFF; /* Success color of level 400. */ + --pgn-color-success-300: #8BC1A9FF; /* Success color of level 300. */ + --pgn-color-success-200: #C5E0D4FF; /* Success color of level 200. */ + --pgn-color-success-100: #F1F8F5FF; /* Success color of level 100. */ + --pgn-color-brand-base: #9D0054FF; /* Basic brand color. */ + --pgn-color-brand-900: #6E003BFF; /* Brand color of level 900. */ + --pgn-color-brand-800: #76003FFF; /* Brand color of level 800. */ + --pgn-color-brand-700: #7E0043FF; /* Brand color of level 700. */ + --pgn-color-brand-600: #8D004CFF; /* Brand color of level 600. */ + --pgn-color-brand-500: var(--pgn-color-brand-base); /* Brand color of level 500. */ + --pgn-color-brand-400: #B6407FFF; /* Brand color of level 400. */ + --pgn-color-brand-300: #CE80AAFF; /* Brand color of level 300. */ + --pgn-color-brand-200: #E7BFD4FF; /* Brand color of level 200. */ + --pgn-color-brand-100: #F9F0F5FF; /* Brand color of level 100. */ + --pgn-color-secondary-base: var(--pgn-color-gray-700); /* Basic secondary color. */ + --pgn-color-secondary-900: #303030FF; /* Secondary color of level 900. */ + --pgn-color-secondary-800: #343434FF; /* Secondary color of level 800. */ + --pgn-color-secondary-700: #373737FF; /* Secondary color of level 700. */ + --pgn-color-secondary-600: #3E3E3EFF; /* Secondary color of level 600. */ + --pgn-color-secondary-500: var(--pgn-color-secondary-base); /* Secondary color of level 500. */ + --pgn-color-secondary-400: #747474FF; /* Secondary color of level 400. */ + --pgn-color-secondary-300: #A2A2A2FF; /* Secondary color of level 300. */ + --pgn-color-secondary-200: #D1D1D1FF; /* Secondary color of level 200. */ + --pgn-color-secondary-100: #F4F4F4FF; /* Secondary color of level 100. */ + --pgn-color-primary-base: #0A3055FF; /* Basic primary color. */ + --pgn-color-primary-900: #07223CFF; /* Primary color of level 900. */ + --pgn-color-primary-800: #082440FF; /* Primary color of level 800. */ + --pgn-color-primary-700: #082644FF; /* Primary color of level 700. */ + --pgn-color-primary-600: #092B4DFF; /* Primary color of level 600. */ + --pgn-color-primary-500: var(--pgn-color-primary-base); /* Primary color of level 500. */ + --pgn-color-primary-400: #476480FF; /* Primary color of level 400. */ + --pgn-color-primary-300: #8598AAFF; /* Primary color of level 300. */ + --pgn-color-primary-200: #C2CBD5FF; /* Primary color of level 200. */ + --pgn-color-primary-100: #F0F3F5FF; /* Primary color of level 100. */ + --pgn-color-gray-base: #707070FF; /* Basic gray color. */ + --pgn-color-gray-900: #212529FF; /* Gray color of level 900. */ + --pgn-color-gray-800: #333333FF; /* Gray color of level 800. */ + --pgn-color-gray-700: #454545FF; /* Gray color of level 700. */ + --pgn-color-gray-600: #5C5C5CFF; /* Gray color of level 600. */ + --pgn-color-gray-500: var(--pgn-color-gray-base); /* Gray color of level 500. */ + --pgn-color-gray-400: #8F8F8FFF; /* Gray color of level 400. */ + --pgn-color-gray-300: #ADADADFF; /* Gray color of level 300. */ + --pgn-color-gray-200: #CCCCCCFF; /* Gray color of level 200. */ + --pgn-color-gray-100: #EBEBEBFF; /* Gray color of level 100. */ + --pgn-color-accent-b: #FFEE88FF; /* Accent-B color. */ + --pgn-color-accent-a: #00BBF9FF; /* Accent-A color. */ + --pgn-color-teal: #006DAAFF; /* Teal color. */ + --pgn-color-yellow: #FFD900FF; /* Yellow color. */ + --pgn-color-green: #178253FF; /* Green color. */ + --pgn-color-red: #C32D3AFF; /* Red color. */ + --pgn-color-blue: #23419FFF; /* Blue color. */ + --pgn-color-black: #000000FF; /* Black color. */ + --pgn-color-white: #FFFFFFFF; /* White color. */ + --pgn-color-yiq-light: var(--pgn-color-white); + --pgn-color-blockquote-small: var(--pgn-color-gray-500); + --pgn-color-mark-bg: #FFF243FF; + --pgn-color-text-muted: var(--pgn-color-gray-500); + --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200); + --pgn-color-list-group-action-active-base: var(--pgn-color-body-base); + --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base); + --pgn-color-list-group-action-base: var(--pgn-color-gray-700); + --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base); + --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600); + --pgn-color-list-group-active-bg: var(--pgn-color-bg-active); + --pgn-color-list-group-active-border: var(--pgn-color-list-group-active-bg); + --pgn-color-list-group-active-base: var(--pgn-color-active); + --pgn-color-list-group-border: #00000020; + --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100); + --pgn-color-list-group-bg-base: var(--pgn-color-white); + --pgn-color-list-group-base: inherit; + --pgn-color-link-brand-inline-hover-decoration: #51002BFF; + --pgn-color-link-brand-inline-hover-base: #51002BFF; + --pgn-color-link-brand-inline-decoration: #9D00544D; + --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500); + --pgn-color-link-brand-hover: #51002BFF; + --pgn-color-link-brand-base: var(--pgn-color-brand-500); + --pgn-color-link-muted-inline-hover-decoration: #020911FF; + --pgn-color-link-muted-inline-hover-base: #020911FF; + --pgn-color-link-muted-inline-decoration: #0A30554D; + --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500); + --pgn-color-link-muted-hover: #020911FF; + --pgn-color-link-muted-base: var(--pgn-color-primary-500); + --pgn-color-link-inline-hover-decoration: #003C5EFF; + --pgn-color-link-inline-hover-base: #003C5EFF; + --pgn-color-link-inline-decoration: #006DAA4D; + --pgn-color-link-inline-base: var(--pgn-color-info-500); + --pgn-color-link-hover: #003C5EFF; + --pgn-color-link-base: var(--pgn-color-info-500); + --pgn-color-hr-border: #0000001A; + --pgn-color-headings-base: var(--pgn-color-black); + --pgn-color-body-bg: var(--pgn-color-bg-base); + --pgn-color-body-base: var(--pgn-color-gray-700); + --pgn-color-tooltip-arrow-light: var(--pgn-color-white); + --pgn-color-tooltip-arrow-base: var(--pgn-color-tooltip-bg-base); + --pgn-color-tooltip-bg-light: var(--pgn-color-white); + --pgn-color-tooltip-bg-base: var(--pgn-color-black); + --pgn-color-tooltip-light: var(--pgn-color-black); + --pgn-color-tooltip-text: var(--pgn-color-white); + --pgn-color-toast-header-border: #00000080; + --pgn-color-toast-header-bg: var(--pgn-color-gray-700); + --pgn-color-toast-header-text: var(--pgn-color-white); + --pgn-color-toast-border: #0000001A; + --pgn-color-toast-bg: var(--pgn-color-gray-700); + --pgn-color-toast-base: inherit; + --pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus); + --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover: var(--pgn-color-primary-300); + --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover: #00000000; + --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus: var(--pgn-color-white); + --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus); --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus); + --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus: var(--pgn-color-primary-500); --pgn-color-tab-more-link-dropdown-toggle-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus); + --pgn-color-tab-more-link-dropdown-toggle-bg-focus: var(--pgn-color-primary-500); --pgn-color-tab-more-link-dropdown-toggle-text-hover: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus); + --pgn-color-tab-more-link-dropdown-toggle-text-active: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus); + --pgn-color-tab-more-link-dropdown-toggle-text-focus: var(--pgn-color-white); --pgn-color-tab-more-link-dropdown-toggle-btn-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus); + --pgn-color-tab-more-link-dropdown-toggle-btn-text-focus: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus); --pgn-color-stepper-header-step-description-error: var(--pgn-color-stepper-header-step-bubble-error); + --pgn-color-stepper-header-step-bubble-error: var(--pgn-color-danger-base); + --pgn-color-stepper-header-step-border: none; + --pgn-color-stepper-header-step-bg-active: var(--pgn-color-gray-500); + --pgn-color-stepper-header-step-bg-base: var(--pgn-color-stepper-header-bg-base); + --pgn-color-stepper-header-step-base: var(--pgn-color-primary-base); + --pgn-color-stepper-header-bg-line: var(--pgn-color-light-base); + --pgn-color-stepper-header-bg-base: #00000000; + --pgn-color-sheet-skrim-component-box-shadow: #00000026; + --pgn-color-sheet-skrim-bg: #ADADAD80; + --pgn-color-search-field-form-bg: var(--pgn-color-white); + --pgn-color-search-field-button-bg-brand: var(--pgn-color-brand-500); + --pgn-color-search-field-button-bg-primary: var(--pgn-color-primary-500); + --pgn-color-search-field-border-focus: var(--pgn-color-black); + --pgn-color-search-field-border-interaction: var(--pgn-color-black); + --pgn-color-search-field-border-base: var(--pgn-color-gray-500); + --pgn-color-progress-bg: #00000000; + --pgn-color-progress-bar-border: var(--pgn-color-gray-500); + --pgn-color-progress-bar-bg-annotated: var(--pgn-color-dark-500); + --pgn-color-progress-bar-bg-base: var(--pgn-color-accent-a); + --pgn-color-progress-bar-base: var(--pgn-color-white); + --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000; --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg); + --pgn-color-product-tour-checkpoint-box-shadow: #0000004D; + --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-base); + --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-base); + --pgn-color-product-tour-checkpoint-body: var(--pgn-color-gray-700); + --pgn-color-product-tour-checkpoint-bg: var(--pgn-color-light-300); --pgn-color-popover-danger-icon: var(--pgn-color-danger-500); --pgn-color-popover-danger-bg: var(--pgn-color-danger-100); --pgn-color-popover-warning-icon: var(--pgn-color-warning-500); --pgn-color-popover-warning-bg: var(--pgn-color-warning-100); --pgn-color-popover-success-icon: var(--pgn-color-success-500); --pgn-color-popover-success-bg: var(--pgn-color-success-100); + --pgn-color-popover-arrow-outer: #0000000D; --pgn-color-popover-arrow-base: var(--pgn-color-popover-bg); + --pgn-color-popover-body: var(--pgn-color-body-base); + --pgn-color-popover-header-border-bottom-dark: #F2F2F2FF; + --pgn-color-popover-header-bg-dark: #808080FF; + --pgn-color-popover-header-bg: var(--pgn-color-white); + --pgn-color-popover-header-text: var(--pgn-color-headings-base); + --pgn-color-popover-border: #00000033; + --pgn-color-popover-bg: var(--pgn-color-bg-base); + --pgn-color-pagination-dropdown-text-inverse: var(--pgn-color-white); + --pgn-color-pagination-focus-text: var(--pgn-color-black); + --pgn-color-pagination-focus-base: var(--pgn-color-primary-500); + --pgn-color-pagination-border-disabled: var(--pgn-color-gray-100); + --pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active); + --pgn-color-pagination-border-hover: var(--pgn-color-gray-200); + --pgn-color-pagination-border-base: var(--pgn-color-gray-200); + --pgn-color-pagination-bg-disabled: var(--pgn-color-white); --pgn-color-pagination-bg-active: var(--pgn-color-bg-active); + --pgn-color-pagination-bg-hover: var(--pgn-color-gray-100); + --pgn-color-pagination-bg-base: var(--pgn-color-bg-base); --pgn-color-pagination-text-disabled: var(--pgn-color-disabled); + --pgn-color-pagination-text-active: var(--pgn-color-active); + --pgn-color-pagination-text-hover: var(--pgn-color-link-hover); + --pgn-color-pagination-text-inverse: var(--pgn-color-white); + --pgn-color-pagination-text-base: var(--pgn-color-link-base); + --pgn-color-page-banner-text-warning: var(--pgn-color-black); + --pgn-color-page-banner-text-accent-b: var(--pgn-color-black); + --pgn-color-page-banner-text-accent-a: var(--pgn-color-black); + --pgn-color-page-banner-text-light: var(--pgn-color-black); + --pgn-color-page-banner-text-dark: var(--pgn-color-white); --pgn-color-page-banner-bg-warning: var(--pgn-color-warning-100); + --pgn-color-page-banner-bg-accent-b: var(--pgn-color-accent-b); + --pgn-color-page-banner-bg-accent-a: var(--pgn-color-accent-a); + --pgn-color-page-banner-bg-light: var(--pgn-color-light-400); + --pgn-color-page-banner-bg-dark: var(--pgn-color-dark-500); + --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066; + --pgn-color-navbar-light-brand-hover: var(--pgn-color-navbar-light-active); + --pgn-color-navbar-light-brand-text: var(--pgn-color-navbar-light-active); + --pgn-color-navbar-light-toggler-border: #0000001A; + --pgn-color-navbar-light-disabled: #0000004D; + --pgn-color-navbar-light-active: #000000E6; + --pgn-color-navbar-light-hover: #000000B3; + --pgn-color-navbar-light-text: #00000080; --pgn-color-navbar-dark-brand-hover: var(--pgn-color-navbar-dark-active); --pgn-color-navbar-dark-brand-text: var(--pgn-color-navbar-dark-active); + --pgn-color-navbar-dark-toggler-border: #FFFFFF1A; + --pgn-color-navbar-dark-disabled: #FFFFFF40; + --pgn-color-navbar-dark-active: var(--pgn-color-active); + --pgn-color-navbar-dark-hover: #FFFFFFBF; + --pgn-color-navbar-dark-text: #FFFFFF80; + --pgn-color-nav-light: #00000080; + --pgn-color-nav-dark: #FFFFFF80; + --pgn-color-nav-divider: var(--pgn-color-gray-100); + --pgn-color-nav-pills-inverse-tab-content-color: var(--pgn-color-nav-pills-inverse-link-text-base); + --pgn-color-nav-pills-inverse-link-bg-active-focus-hover: var(--pgn-color-nav-pills-inverse-link-text-base); --pgn-color-nav-pills-inverse-link-bg-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base); + --pgn-color-nav-pills-inverse-link-bg-active: var(--pgn-color-nav-pills-inverse-link-text-base); --pgn-color-nav-pills-inverse-link-bg-hover: var(--pgn-color-nav-pills-inverse-link-border-base); + --pgn-color-nav-pills-inverse-link-border-focus-hover: var(--pgn-color-nav-pills-inverse-link-border-active-focus); + --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-primary-base); --pgn-color-nav-pills-inverse-link-border-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base); + --pgn-color-nav-pills-inverse-link-border-active: var(--pgn-color-nav-pills-inverse-link-text-base); + --pgn-color-nav-pills-inverse-link-border-base: var(--pgn-color-dark-300); + --pgn-color-nav-pills-inverse-link-text-active-hover: var(--pgn-color-nav-pills-inverse-link-text-base); --pgn-color-nav-pills-inverse-link-text-active-focus: var(--pgn-color-nav-pills-inverse-link-text-active); + --pgn-color-nav-pills-inverse-link-text-hover: var(--pgn-color-nav-pills-inverse-link-text-base); + --pgn-color-nav-pills-inverse-link-text-active: var(--pgn-color-primary-500); + --pgn-color-nav-pills-inverse-link-text-focus: var(--pgn-color-nav-pills-inverse-link-text-base); + --pgn-color-nav-pills-inverse-link-text-base: var(--pgn-color-white); --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border-base); + --pgn-color-nav-pills-base-link-active-border: var(--pgn-color-white); --pgn-color-nav-pills-base-link-active-bg: var(--pgn-color-bg-active); + --pgn-color-nav-pills-base-link-active-text: var(--pgn-color-active); + --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover); + --pgn-color-nav-tabs-inverse-link-tab-content-color: var(--pgn-color-nav-tabs-inverse-link-text-base); + --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000; + --pgn-color-nav-tabs-inverse-link-bg-focus: var(--pgn-color-nav-tabs-inverse-link-text-base); + --pgn-color-nav-tabs-inverse-link-bg-active: var(--pgn-color-nav-tabs-inverse-link-bg-hover); --pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom); + --pgn-color-nav-tabs-inverse-link-border-active: var(--pgn-color-nav-tabs-inverse-link-text-base); + --pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300); + --pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white); + --pgn-color-nav-tabs-base-link-disabled-border: var(--pgn-color-nav-link-border); + --pgn-color-nav-tabs-base-link-active-bg: #00000000; + --pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-primary-500); + --pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-light-400); + --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover); + --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400); + --pgn-color-nav-tabs-base-bg-hover: #00000000; + --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover); + --pgn-color-nav-link-border: #00000000; + --pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300); + --pgn-color-nav-link-text-base: var(--pgn-color-gray-700); + --pgn-color-modal-backdrop-bg: var(--pgn-color-black); + --pgn-color-modal-content-border: #00000033; + --pgn-color-modal-content-bg: var(--pgn-color-bg-base); + --pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500); --pgn-color-menu-item-focus-bg: var(--pgn-color-btn-active-bg-tertiary); + --pgn-color-menu-item-hover-border: var(--pgn-color-menu-item-bg); --pgn-color-menu-item-hover-bg: var(--pgn-color-btn-hover-bg-tertiary); + --pgn-color-menu-item-hover-color: var(--pgn-color-btn-text-tertiary); + --pgn-color-menu-item-border: var(--pgn-color-menu-item-bg); + --pgn-color-menu-item-bg: #00000000; + --pgn-color-menu-item-color: var(--pgn-color-body-base); + --pgn-color-menu-bg: var(--pgn-color-white); + --pgn-color-image-thumbnail-border: var(--pgn-color-gray-200); --pgn-color-image-thumbnail-bg: var(--pgn-color-body-bg); + --pgn-color-image-figure-caption: var(--pgn-color-gray-500); + --pgn-color-icon-button-black: var(--pgn-color-black); + --pgn-color-icon-button-accent: var(--pgn-color-white); + --pgn-color-icon-button-text-black-inverse-active-focus: var(--pgn-color-icon-button-text-black-inverse-active-base); + --pgn-color-icon-button-text-black-inverse-active-hover: var(--pgn-color-icon-button-text-black-inverse-active-base); + --pgn-color-icon-button-text-black-inverse-active-base: var(--pgn-color-black); + --pgn-color-icon-button-text-black-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-black-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-black-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-black-inverse-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-black-inverse-hover: var(--pgn-color-black); + --pgn-color-icon-button-text-black-inverse-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-black-focus: var(--pgn-color-icon-button-text-black-base); + --pgn-color-icon-button-text-black-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-black-base: var(--pgn-color-black); + --pgn-color-icon-button-text-dark-inverse-active-focus: var(--pgn-color-icon-button-text-dark-inverse-active-base); + --pgn-color-icon-button-text-dark-inverse-active-hover: var(--pgn-color-icon-button-text-dark-inverse-active-base); + --pgn-color-icon-button-text-dark-inverse-active-base: var(--pgn-color-dark-base); + --pgn-color-icon-button-text-dark-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-dark-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-dark-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-dark-inverse-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-dark-inverse-hover: var(--pgn-color-dark-base); + --pgn-color-icon-button-text-dark-inverse-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-dark-focus: var(--pgn-color-icon-button-text-dark-base); + --pgn-color-icon-button-text-dark-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-dark-base: var(--pgn-color-dark-base); + --pgn-color-icon-button-text-light-inverse-active-focus: var(--pgn-color-icon-button-text-light-inverse-active-base); + --pgn-color-icon-button-text-light-inverse-active-hover: var(--pgn-color-icon-button-text-light-inverse-active-base); + --pgn-color-icon-button-text-light-inverse-active-base: var(--pgn-color-light-base); + --pgn-color-icon-button-text-light-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-light-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-light-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-light-inverse-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-light-inverse-hover: var(--pgn-color-light-base); + --pgn-color-icon-button-text-light-inverse-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-light-focus: var(--pgn-color-icon-button-text-light-base); + --pgn-color-icon-button-text-light-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-light-base: var(--pgn-color-light-base); --pgn-color-icon-button-text-danger-inverse-active-focus: var(--pgn-color-icon-button-text-danger-inverse-active-base); --pgn-color-icon-button-text-danger-inverse-active-hover: var(--pgn-color-icon-button-text-danger-inverse-active-base); + --pgn-color-icon-button-text-danger-inverse-active-base: var(--pgn-color-danger-base); + --pgn-color-icon-button-text-danger-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-danger-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-danger-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-danger-inverse-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-danger-inverse-hover: var(--pgn-color-danger-base); + --pgn-color-icon-button-text-danger-inverse-base: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-text-danger-focus: var(--pgn-color-icon-button-text-danger-base); + --pgn-color-icon-button-text-danger-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-danger-base: var(--pgn-color-danger-base); --pgn-color-icon-button-text-warning-inverse-active-focus: var(--pgn-color-icon-button-text-warning-inverse-active-base); --pgn-color-icon-button-text-warning-inverse-active-hover: var(--pgn-color-icon-button-text-warning-inverse-active-base); + --pgn-color-icon-button-text-warning-inverse-active-base: var(--pgn-color-warning-base); + --pgn-color-icon-button-text-warning-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-warning-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-warning-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-warning-inverse-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-warning-inverse-hover: var(--pgn-color-warning-base); + --pgn-color-icon-button-text-warning-inverse-base: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-text-warning-focus: var(--pgn-color-icon-button-text-warning-base); + --pgn-color-icon-button-text-warning-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-warning-base: var(--pgn-color-warning-base); --pgn-color-icon-button-text-success-inverse-active-focus: var(--pgn-color-icon-button-text-success-inverse-active-base); --pgn-color-icon-button-text-success-inverse-active-hover: var(--pgn-color-icon-button-text-success-inverse-active-base); + --pgn-color-icon-button-text-success-inverse-active-base: var(--pgn-color-success-base); + --pgn-color-icon-button-text-success-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-success-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-success-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-success-inverse-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-success-inverse-hover: var(--pgn-color-success-base); + --pgn-color-icon-button-text-success-inverse-base: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-text-success-focus: var(--pgn-color-icon-button-text-success-base); + --pgn-color-icon-button-text-success-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-success-base: var(--pgn-color-success-base); + --pgn-color-icon-button-text-brand-inverse-active-focus: var(--pgn-color-icon-button-text-brand-inverse-active-base); + --pgn-color-icon-button-text-brand-inverse-active-hover: var(--pgn-color-icon-button-text-brand-inverse-active-base); + --pgn-color-icon-button-text-brand-inverse-active-base: var(--pgn-color-brand-base); + --pgn-color-icon-button-text-brand-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-brand-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-brand-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-brand-inverse-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-brand-inverse-hover: var(--pgn-color-brand-base); + --pgn-color-icon-button-text-brand-inverse-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-brand-focus: var(--pgn-color-icon-button-text-brand-base); + --pgn-color-icon-button-text-brand-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-brand-base: var(--pgn-color-brand-base); --pgn-color-icon-button-text-secondary-inverse-active-focus: var(--pgn-color-icon-button-text-secondary-inverse-active-base); --pgn-color-icon-button-text-secondary-inverse-active-hover: var(--pgn-color-icon-button-text-secondary-inverse-active-base); + --pgn-color-icon-button-text-secondary-inverse-active-base: var(--pgn-color-secondary-base); + --pgn-color-icon-button-text-secondary-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-secondary-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-secondary-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-secondary-inverse-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-secondary-inverse-hover: var(--pgn-color-secondary-base); + --pgn-color-icon-button-text-secondary-inverse-base: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-text-secondary-focus: var(--pgn-color-icon-button-text-secondary-base); + --pgn-color-icon-button-text-secondary-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-secondary-base: var(--pgn-color-secondary-base); + --pgn-color-icon-button-text-primary-inverse-active-focus: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-text-primary-inverse-active-hover: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-text-primary-inverse-active-base: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-text-primary-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-primary-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-primary-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-primary-inverse-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-primary-inverse-hover: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-text-primary-inverse-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-primary-focus: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-text-primary-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-text-primary-base: var(--pgn-color-primary-base); + --pgn-color-icon-button-bg-black-inverse-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-black-inverse-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-black-inverse-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-black-active-focus: var(--pgn-color-icon-button-bg-black-active-base); + --pgn-color-icon-button-bg-black-active-hover: var(--pgn-color-icon-button-bg-black-active-base); + --pgn-color-icon-button-bg-black-active-base: var(--pgn-color-black); + --pgn-color-icon-button-bg-black-inverse-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-black-inverse-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-black-inverse-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-black-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-black-hover: var(--pgn-color-black); + --pgn-color-icon-button-bg-black-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-dark-inverse-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-dark-inverse-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-dark-inverse-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-dark-active-focus: var(--pgn-color-icon-button-bg-dark-active-base); + --pgn-color-icon-button-bg-dark-active-hover: var(--pgn-color-icon-button-bg-dark-active-base); + --pgn-color-icon-button-bg-dark-active-base: var(--pgn-color-dark-base); + --pgn-color-icon-button-bg-dark-inverse-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-dark-inverse-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-dark-inverse-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-dark-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-dark-hover: var(--pgn-color-dark-base); + --pgn-color-icon-button-bg-dark-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-light-inverse-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-light-inverse-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-light-inverse-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-light-active-focus: var(--pgn-color-icon-button-bg-light-active-base); + --pgn-color-icon-button-bg-light-active-hover: var(--pgn-color-icon-button-bg-light-active-base); + --pgn-color-icon-button-bg-light-active-base: var(--pgn-color-light-base); + --pgn-color-icon-button-bg-light-inverse-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-light-inverse-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-light-inverse-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-light-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-light-hover: var(--pgn-color-light-base); + --pgn-color-icon-button-bg-light-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-danger-inverse-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-danger-inverse-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-danger-inverse-active-base: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-bg-danger-active-focus: var(--pgn-color-icon-button-bg-danger-active-base); --pgn-color-icon-button-bg-danger-active-hover: var(--pgn-color-icon-button-bg-danger-active-base); + --pgn-color-icon-button-bg-danger-active-base: var(--pgn-color-danger-base); + --pgn-color-icon-button-bg-danger-inverse-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-danger-inverse-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-danger-inverse-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-danger-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-danger-hover: var(--pgn-color-danger-base); + --pgn-color-icon-button-bg-danger-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-warning-inverse-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-warning-inverse-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-warning-inverse-active-base: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-bg-warning-active-focus: var(--pgn-color-icon-button-bg-warning-active-base); --pgn-color-icon-button-bg-warning-active-hover: var(--pgn-color-icon-button-bg-warning-active-base); + --pgn-color-icon-button-bg-warning-active-base: var(--pgn-color-warning-base); + --pgn-color-icon-button-bg-warning-inverse-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-warning-inverse-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-warning-inverse-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-warning-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-warning-hover: var(--pgn-color-warning-base); + --pgn-color-icon-button-bg-warning-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-success-inverse-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-success-inverse-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-success-inverse-active-base: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-bg-success-active-focus: var(--pgn-color-icon-button-bg-success-active-base); --pgn-color-icon-button-bg-success-active-hover: var(--pgn-color-icon-button-bg-success-active-base); + --pgn-color-icon-button-bg-success-active-base: var(--pgn-color-success-base); + --pgn-color-icon-button-bg-success-inverse-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-success-inverse-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-success-inverse-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-success-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-success-hover: var(--pgn-color-success-base); + --pgn-color-icon-button-bg-success-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-brand-inverse-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-brand-inverse-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-brand-inverse-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-brand-active-focus: var(--pgn-color-icon-button-bg-brand-active-base); + --pgn-color-icon-button-bg-brand-active-hover: var(--pgn-color-icon-button-bg-brand-active-base); + --pgn-color-icon-button-bg-brand-active-base: var(--pgn-color-brand-base); + --pgn-color-icon-button-bg-brand-inverse-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-brand-inverse-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-brand-inverse-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-brand-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-brand-hover: var(--pgn-color-brand-base); + --pgn-color-icon-button-bg-brand-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-secondary-inverse-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-secondary-inverse-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-secondary-inverse-active-base: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-bg-secondary-active-focus: var(--pgn-color-icon-button-bg-secondary-active-base); --pgn-color-icon-button-bg-secondary-active-hover: var(--pgn-color-icon-button-bg-secondary-active-base); - --pgn-color-list-group-active-bg: var(--pgn-color-bg-active); - --pgn-color-link-brand-inline-hover-base: #51002BFF; - --pgn-color-link-brand-inline-decoration: #9D00544D; - --pgn-color-link-brand-hover: #51002BFF; - --pgn-color-link-muted-inline-hover-base: #020911FF; - --pgn-color-link-muted-inline-decoration: #0A30554D; - --pgn-color-link-muted-hover: #020911FF; - --pgn-color-link-inline-base: var(--pgn-color-info-500); - --pgn-color-link-base: var(--pgn-color-info-500); + --pgn-color-icon-button-bg-secondary-active-base: var(--pgn-color-secondary-base); + --pgn-color-icon-button-bg-secondary-inverse-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-secondary-inverse-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-secondary-inverse-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-secondary-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-secondary-hover: var(--pgn-color-secondary-base); + --pgn-color-icon-button-bg-secondary-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-primary-inverse-active-focus: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-primary-inverse-active-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-primary-inverse-active-base: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-primary-active-focus: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-bg-primary-active-hover: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-bg-primary-inverse-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent); + --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-base: #00000000; --pgn-color-form-feedback-checked-invalid: #D64D59FF; --pgn-color-form-feedback-checked-valid: #1FAD6FFF; --pgn-color-form-feedback-tooltip-box-shadow-focus-invalid: #C32D3A40; @@ -1251,354 +660,776 @@ --pgn-color-form-feedback-tooltip-valid: #FFFFFFFF; --pgn-color-form-feedback-icon-invalid: var(--pgn-color-form-feedback-invalid); --pgn-color-form-feedback-icon-valid: var(--pgn-color-form-feedback-valid); + --pgn-color-form-feedback-invalid: var(--pgn-color-danger-base); + --pgn-color-form-feedback-valid: var(--pgn-color-success-base); + --pgn-color-form-control-file-border-focus: var(--pgn-color-form-input-focus-border); --pgn-color-form-control-file-border-base: var(--pgn-color-form-input-border); + --pgn-color-form-control-file-button-bg: var(--pgn-color-form-input-group-addon-bg); --pgn-color-form-control-file-button-base: var(--pgn-color-form-control-file-base); + --pgn-color-form-control-file-bg-disabled: var(--pgn-color-form-input-bg-disabled); --pgn-color-form-control-file-bg-base: var(--pgn-color-form-input-bg-base); + --pgn-color-form-control-file-base: var(--pgn-color-form-input-base); --pgn-color-form-control-range-thumb-bg-active: #000000FF; --pgn-color-form-control-range-thumb-bg-disabled: var(--pgn-color-disabled); --pgn-color-form-control-range-thumb-bg-base: var(--pgn-color-bg-active); + --pgn-color-form-control-range-track-bg: var(--pgn-color-gray-300); + --pgn-color-form-control-select-border-focus: var(--pgn-color-form-input-focus-border); --pgn-color-form-control-select-border-base: var(--pgn-color-form-input-border); + --pgn-color-form-control-select-bg-size: var(--pgn-color-gray-100); + --pgn-color-form-control-select-bg-disabled: var(--pgn-color-gray-100); --pgn-color-form-control-select-bg-base: var(--pgn-color-form-input-bg-base); + --pgn-color-form-control-select-indicator-base: var(--pgn-color-theme-hover-gray); --pgn-color-form-control-select-disabled: var(--pgn-color-disabled); + --pgn-color-form-control-select-base: var(--pgn-color-form-input-base); + --pgn-color-form-control-switch-indicator-checked-bg: var(--pgn-color-success-base); + --pgn-color-form-control-checkbox-indicator-indeterminate-border: var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg); --pgn-color-form-control-checkbox-indicator-indeterminate-bg: var(--pgn-color-bg-active); + --pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base); --pgn-color-form-control-label-floating-text: #FFFFFF1A; --pgn-color-form-control-label-disabled: var(--pgn-color-disabled); + --pgn-color-form-control-label-base: inherit; + --pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg); --pgn-color-form-control-indicator-active-bg: var(--pgn-color-bg-active); + --pgn-color-form-control-indicator-active-base: var(--pgn-color-active); + --pgn-color-form-control-indicator-checked-border-focus: var(--pgn-color-form-input-focus-border); + --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-form-control-indicator-checked-base); + --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580; --pgn-color-form-control-indicator-checked-bg-base: var(--pgn-color-bg-active); + --pgn-color-form-control-indicator-checked-invalid: var(--pgn-color-danger-base); + --pgn-color-form-control-indicator-checked-valid: var(--pgn-color-success-base); --pgn-color-form-control-indicator-checked-base: var(--pgn-color-bg-active); + --pgn-color-form-control-indicator-bg-disabled: var(--pgn-color-form-input-bg-disabled); --pgn-color-form-control-indicator-bg-base: var(--pgn-color-form-input-bg-base); + --pgn-color-form-control-indicator-border: var(--pgn-color-gray-700); --pgn-color-form-input-focus-bg: var(--pgn-color-form-input-bg-base); --pgn-color-form-input-focus-border: var(--pgn-color-input-focus); + --pgn-color-form-input-focus-base: var(--pgn-color-form-input-base); + --pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100); --pgn-color-form-input-group-addon-border: var(--pgn-color-form-input-border); + --pgn-color-form-input-group-addon-base: var(--pgn-color-form-input-base); + --pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100); + --pgn-color-form-input-bg-base: var(--pgn-color-bg-base); + --pgn-color-form-input-border: var(--pgn-color-gray-500); + --pgn-color-form-input-plaintext: var(--pgn-color-body-base); + --pgn-color-form-input-placeholder: var(--pgn-color-gray-500); + --pgn-color-form-input-base: var(--pgn-color-gray-700); + --pgn-color-dropzone-border-base: var(--pgn-color-gray-500); + --pgn-color-dropzone-restriction-msg: var(--pgn-color-gray-500); --pgn-color-dropzone-error-wrapper: var(--pgn-color-danger-500); --pgn-color-dropdown-link-disabled: var(--pgn-color-disabled); --pgn-color-dropdown-link-active-bg: var(--pgn-color-bg-active); + --pgn-color-dropdown-link-active-base: var(--pgn-color-active); + --pgn-color-dropdown-link-hover-bg: var(--pgn-color-light-300); + --pgn-color-dropdown-link-hover-base: #000000FF; + --pgn-color-dropdown-link-base: var(--pgn-color-gray-900); + --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100); + --pgn-color-dropdown-border: #00000026; + --pgn-color-dropdown-bg: var(--pgn-color-bg-base); + --pgn-color-dropdown-header: var(--pgn-color-gray-500); + --pgn-color-dropdown-text: var(--pgn-color-body-base); + --pgn-color-data-table-border: var(--pgn-color-light-300); + --pgn-color-data-table-bg-is-loading: #FFFFFFB3; + --pgn-color-data-table-bg-base: var(--pgn-color-bg-base); + --pgn-color-code-pre: var(--pgn-color-gray-900); + --pgn-color-code-kbd-bg: var(--pgn-color-gray-700); + --pgn-color-code-kbd-base: var(--pgn-color-white); + --pgn-color-code-base: #E83E8CFF; + --pgn-color-close-button: var(--pgn-color-black); --pgn-color-chip-outline-light: var(--pgn-color-chip-label-base); + --pgn-color-chip-outline-dark: var(--pgn-color-white); + --pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark); + --pgn-color-chip-label-base: var(--pgn-color-primary-700); + --pgn-color-chip-border-focus-selected-light: var(--pgn-color-dark-500); + --pgn-color-chip-border-focus-selected-dark: var(--pgn-color-chip-outline-dark); + --pgn-color-chip-border-base: var(--pgn-color-light-800); + --pgn-color-chip-bg-dark: var(--pgn-color-primary-300); + --pgn-color-chip-bg-light: var(--pgn-color-white); + --pgn-color-chip-text-dark: var(--pgn-color-white); + --pgn-color-chip-text-light: var(--pgn-color-black); + --pgn-color-carousel-caption: var(--pgn-color-white); + --pgn-color-carousel-indicator-active-bg: var(--pgn-color-white); + --pgn-color-carousel-control-base: var(--pgn-color-white); + --pgn-color-card-divider-bg: var(--pgn-color-light-400); --pgn-color-card-border-focus-dark: var(--pgn-color-theme-focus-primary); + --pgn-color-card-border-focus-base: var(--pgn-color-primary-500); + --pgn-color-card-border-base: #00000020; + --pgn-color-card-bg-muted: var(--pgn-color-light-200); + --pgn-color-card-bg-dark: var(--pgn-color-primary-500); + --pgn-color-card-bg-base: var(--pgn-color-bg-base); + --pgn-color-card-base: inherit; --pgn-color-btn-disabled-link: var(--pgn-color-disabled); + --pgn-color-btn-disabled-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning); + --pgn-color-btn-disabled-border-inverse-warning: #00000000; --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning); + --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning); + --pgn-color-btn-disabled-border-inverse-tertiary: var(--pgn-color-btn-border-inverse-tertiary); + --pgn-color-btn-disabled-border-tertiary: var(--pgn-color-btn-border-tertiary); + --pgn-color-btn-disabled-border-inverse-outline-success: inherit; + --pgn-color-btn-disabled-border-inverse-success: #00000000; --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success); + --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success); + --pgn-color-btn-disabled-border-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary); + --pgn-color-btn-disabled-border-inverse-secondary: var(--pgn-color-btn-border-inverse-secondary); + --pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-secondary-base); + --pgn-color-btn-disabled-border-secondary: inherit; + --pgn-color-btn-disabled-border-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); + --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary); + --pgn-color-btn-disabled-border-inverse-primary: #00000000; --pgn-color-btn-disabled-border-primary: var(--pgn-color-btn-border-primary); + --pgn-color-btn-disabled-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light); + --pgn-color-btn-disabled-border-inverse-light: #00000000; + --pgn-color-btn-disabled-border-outline-light: var(--pgn-color-btn-hover-text-outline-light); --pgn-color-btn-disabled-border-light: var(--pgn-color-btn-border-light); + --pgn-color-btn-disabled-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info); + --pgn-color-btn-disabled-border-inverse-info: #00000000; --pgn-color-btn-disabled-border-outline-info: var(--pgn-color-btn-border-outline-info); --pgn-color-btn-disabled-border-info: var(--pgn-color-btn-bg-info); + --pgn-color-btn-disabled-border-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark); + --pgn-color-btn-disabled-border-inverse-dark: #00000000; + --pgn-color-btn-disabled-border-outline-dark: var(--pgn-color-btn-hover-text-outline-dark); --pgn-color-btn-disabled-border-dark: var(--pgn-color-btn-border-dark); + --pgn-color-btn-disabled-border-inverse-outline-danger: var(--pgn-color-btn-border-inverse-outline-danger); + --pgn-color-btn-disabled-border-inverse-danger: #00000000; --pgn-color-btn-disabled-border-outline-danger: var(--pgn-color-btn-border-outline-danger); + --pgn-color-btn-disabled-border-danger: var(--pgn-color-btn-border-danger); + --pgn-color-btn-disabled-border-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand); + --pgn-color-btn-disabled-border-inverse-brand: var(--pgn-color-btn-disabled-bg-inverse-brand); + --pgn-color-btn-disabled-border-outline-brand: var(--pgn-color-btn-border-outline-brand); --pgn-color-btn-disabled-border-brand: var(--pgn-color-btn-border-brand); + --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit; + --pgn-color-btn-disabled-bg-inverse-warning: inherit; + --pgn-color-btn-disabled-bg-outline-warning: inherit; --pgn-color-btn-disabled-bg-warning: var(--pgn-color-btn-bg-warning); + --pgn-color-btn-disabled-bg-inverse-tertiary: inherit; + --pgn-color-btn-disabled-bg-tertiary: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-success: inherit; + --pgn-color-btn-disabled-bg-inverse-success: inherit; + --pgn-color-btn-disabled-bg-outline-success: inherit; --pgn-color-btn-disabled-bg-success: var(--pgn-color-btn-bg-success); + --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit; + --pgn-color-btn-disabled-bg-inverse-secondary: inherit; + --pgn-color-btn-disabled-bg-outline-secondary: inherit; --pgn-color-btn-disabled-bg-secondary: var(--pgn-color-btn-bg-secondary); + --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit; + --pgn-color-btn-disabled-bg-outline-primary: inherit; + --pgn-color-btn-disabled-bg-inverse-primary: var(--pgn-color-white); + --pgn-color-btn-disabled-bg-primary: var(--pgn-color-btn-bg-primary); + --pgn-color-btn-disabled-bg-inverse-outline-light: inherit; + --pgn-color-btn-disabled-bg-inverse-light: inherit; + --pgn-color-btn-disabled-bg-outline-light: inherit; + --pgn-color-btn-disabled-bg-light: var(--pgn-color-btn-bg-light); + --pgn-color-btn-disabled-bg-inverse-outline-info: inherit; + --pgn-color-btn-disabled-bg-inverse-info: inherit; + --pgn-color-btn-disabled-bg-outline-info: inherit; --pgn-color-btn-disabled-bg-info: var(--pgn-color-btn-bg-info); + --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit; + --pgn-color-btn-disabled-bg-inverse-dark: inherit; + --pgn-color-btn-disabled-bg-outline-dark: inherit; + --pgn-color-btn-disabled-bg-dark: var(--pgn-color-btn-bg-dark); + --pgn-color-btn-disabled-bg-inverse-outline-danger: inherit; + --pgn-color-btn-disabled-bg-inverse-danger: #00000000; + --pgn-color-btn-disabled-bg-outline-danger: inherit; --pgn-color-btn-disabled-bg-danger: var(--pgn-color-btn-bg-danger); + --pgn-color-btn-disabled-bg-inverse-outline-brand: var(--pgn-color-btn-bg-inverse-outline-brand); + --pgn-color-btn-disabled-bg-inverse-brand: var(--pgn-color-white); + --pgn-color-btn-disabled-bg-outline-brand: inherit; + --pgn-color-btn-disabled-bg-brand: var(--pgn-color-btn-bg-brand); + --pgn-color-btn-disabled-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning); + --pgn-color-btn-disabled-text-inverse-warning: var(--pgn-color-warning-base); --pgn-color-btn-disabled-text-outline-warning: var(--pgn-color-btn-text-outline-warning); + --pgn-color-btn-disabled-text-warning: var(--pgn-color-btn-text-warning); + --pgn-color-btn-disabled-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary); + --pgn-color-btn-disabled-text-tertiary: var(--pgn-color-btn-text-tertiary); + --pgn-color-btn-disabled-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success); + --pgn-color-btn-disabled-text-inverse-success: var(--pgn-color-success-base); --pgn-color-btn-disabled-text-outline-success: var(--pgn-color-btn-text-outline-success); + --pgn-color-btn-disabled-text-success: var(--pgn-color-btn-text-success); + --pgn-color-btn-disabled-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary); + --pgn-color-btn-disabled-text-inverse-secondary: inherit; + --pgn-color-btn-disabled-text-outline-secondary: inherit; + --pgn-color-btn-disabled-text-secondary: var(--pgn-color-btn-text-secondary); + --pgn-color-btn-disabled-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); + --pgn-color-btn-disabled-text-outline-primary: var(--pgn-color-btn-hover-text-outline-primary); + --pgn-color-btn-disabled-text-inverse-primary: var(--pgn-color-primary-500); --pgn-color-btn-disabled-text-primary: var(--pgn-color-btn-text-primary); + --pgn-color-btn-disabled-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light); + --pgn-color-btn-disabled-text-inverse-light: var(--pgn-color-btn-text-inverse-light); + --pgn-color-btn-disabled-text-outline-light: var(--pgn-color-btn-hover-text-outline-light); --pgn-color-btn-disabled-text-light: var(--pgn-color-btn-text-light); + --pgn-color-btn-disabled-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info); + --pgn-color-btn-disabled-text-inverse-info: var(--pgn-color-info-base); --pgn-color-btn-disabled-text-outline-info: var(--pgn-color-btn-text-outline-info); + --pgn-color-btn-disabled-text-info: var(--pgn-color-btn-text-info); + --pgn-color-btn-disabled-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark); + --pgn-color-btn-disabled-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark); + --pgn-color-btn-disabled-text-outline-dark: inherit; --pgn-color-btn-disabled-text-dark: var(--pgn-color-btn-text-dark); + --pgn-color-btn-disabled-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger); + --pgn-color-btn-disabled-text-inverse-danger: var(--pgn-color-danger-base); + --pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger); + --pgn-color-btn-disabled-text-danger: var(--pgn-color-btn-text-danger); + --pgn-color-btn-disabled-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand); + --pgn-color-btn-disabled-text-outline-brand: var(--pgn-color-btn-hover-text-outline-brand); + --pgn-color-btn-disabled-text-inverse-brand: var(--pgn-color-brand-500); --pgn-color-btn-disabled-text-brand: var(--pgn-color-btn-text-brand); + --pgn-color-btn-focus-outline-inverse-outline-warning: inherit; + --pgn-color-btn-focus-outline-inverse-warning: var(--pgn-color-white); + --pgn-color-btn-focus-outline-outline-warning: var(--pgn-color-theme-focus-warning); + --pgn-color-btn-focus-outline-warning: var(--pgn-color-theme-focus-warning); + --pgn-color-btn-focus-outline-inverse-tertiary: var(--pgn-color-white); --pgn-color-btn-focus-outline-tertiary: var(--pgn-color-theme-focus-primary); --pgn-color-btn-focus-outline-inverse-outline-success: var(--pgn-color-btn-focus-border-inverse-outline-success); + --pgn-color-btn-focus-outline-inverse-success: var(--pgn-color-btn-focus-border-inverse-success); + --pgn-color-btn-focus-outline-outline-success: var(--pgn-color-theme-focus-success); + --pgn-color-btn-focus-outline-success: var(--pgn-color-theme-focus-success); + --pgn-color-btn-focus-outline-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary); + --pgn-color-btn-focus-outline-inverse-secondary: var(--pgn-color-white); + --pgn-color-btn-focus-outline-outline-secondary: var(--pgn-color-theme-focus-secondary); + --pgn-color-btn-focus-outline-secondary: var(--pgn-color-theme-focus-secondary); + --pgn-color-btn-focus-outline-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary); + --pgn-color-btn-focus-outline-inverse-primary: var(--pgn-color-btn-focus-border-inverse-primary); --pgn-color-btn-focus-outline-outline-primary: var(--pgn-color-theme-focus-primary); --pgn-color-btn-focus-outline-primary: var(--pgn-color-theme-focus-primary); --pgn-color-btn-focus-outline-inverse-outline-light: var(--pgn-color-btn-focus-border-inverse-outline-light); + --pgn-color-btn-focus-outline-inverse-light: var(--pgn-color-white); --pgn-color-btn-focus-outline-outline-light: var(--pgn-color-theme-focus-light); + --pgn-color-btn-focus-outline-light: var(--pgn-color-primary-300); --pgn-color-btn-focus-outline-inverse-outline-info: var(--pgn-color-btn-focus-border-inverse-outline-info); + --pgn-color-btn-focus-outline-inverse-info: var(--pgn-color-btn-focus-border-inverse-info); + --pgn-color-btn-focus-outline-outline-info: var(--pgn-color-theme-focus-info); + --pgn-color-btn-focus-outline-info: var(--pgn-color-theme-focus-info); + --pgn-color-btn-focus-outline-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark); + --pgn-color-btn-focus-outline-inverse-dark: var(--pgn-color-btn-focus-border-inverse-dark); --pgn-color-btn-focus-outline-outline-dark: var(--pgn-color-theme-focus-dark); --pgn-color-btn-focus-outline-dark: var(--pgn-color-theme-focus-dark); + --pgn-color-btn-focus-outline-inverse-outline-danger: var(--pgn-color-btn-focus-border-inverse-danger); + --pgn-color-btn-focus-outline-inverse-danger: var(--pgn-color-btn-focus-border-inverse-danger); + --pgn-color-btn-focus-outline-outline-danger: var(--pgn-color-theme-focus-danger); + --pgn-color-btn-focus-outline-danger: var(--pgn-color-theme-focus-danger); --pgn-color-btn-focus-outline-inverse-outline-brand: var(--pgn-color-btn-focus-border-inverse-outline-brand); + --pgn-color-btn-focus-outline-inverse-brand: var(--pgn-color-btn-focus-border-inverse-brand); --pgn-color-btn-focus-outline-outline-brand: var(--pgn-color-theme-focus-brand); --pgn-color-btn-focus-outline-brand: var(--pgn-color-theme-focus-brand); + --pgn-color-btn-focus-bg-inverse-outline-warning: inherit; + --pgn-color-btn-focus-bg-inverse-warning: var(--pgn-color-btn-bg-inverse-warning); + --pgn-color-btn-focus-bg-outline-warning: inherit; --pgn-color-btn-focus-bg-warning: var(--pgn-color-btn-bg-warning); + --pgn-color-btn-focus-bg-inverse-tertiary: inherit; + --pgn-color-btn-focus-bg-tertiary: inherit; + --pgn-color-btn-focus-bg-inverse-outline-success: inherit; + --pgn-color-btn-focus-bg-inverse-success: var(--pgn-color-btn-bg-inverse-success); + --pgn-color-btn-focus-bg-outline-success: inherit; --pgn-color-btn-focus-bg-success: var(--pgn-color-btn-bg-success); + --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit; + --pgn-color-btn-focus-bg-inverse-secondary: var(--pgn-color-btn-bg-inverse-secondary); + --pgn-color-btn-focus-bg-outline-secondary: #00000000; --pgn-color-btn-focus-bg-secondary: var(--pgn-color-btn-bg-secondary); + --pgn-color-btn-focus-bg-inverse-outline-primary: inherit; --pgn-color-btn-focus-bg-inverse-primary: var(--pgn-color-btn-bg-inverse-primary); + --pgn-color-btn-focus-bg-outline-primary: inherit; + --pgn-color-btn-focus-bg-primary: var(--pgn-color-btn-bg-primary); + --pgn-color-btn-focus-bg-inverse-outline-light: inherit; --pgn-color-btn-focus-bg-inverse-light: var(--pgn-color-btn-bg-inverse-light); + --pgn-color-btn-focus-bg-outline-light: #00000000; + --pgn-color-btn-focus-bg-light: var(--pgn-color-btn-bg-light); + --pgn-color-btn-focus-bg-inverse-outline-info: inherit; + --pgn-color-btn-focus-bg-inverse-info: var(--pgn-color-btn-bg-inverse-info); + --pgn-color-btn-focus-bg-outline-info: inherit; --pgn-color-btn-focus-bg-info: var(--pgn-color-btn-bg-info); + --pgn-color-btn-focus-bg-inverse-outline-dark: inherit; --pgn-color-btn-focus-bg-inverse-dark: var(--pgn-color-btn-bg-inverse-dark); + --pgn-color-btn-focus-bg-outline-dark: inherit; + --pgn-color-btn-focus-bg-dark: var(--pgn-color-btn-bg-dark); + --pgn-color-btn-focus-bg-inverse-outline-danger: inherit; + --pgn-color-btn-focus-bg-inverse-danger: var(--pgn-color-btn-bg-inverse-danger); + --pgn-color-btn-focus-bg-outline-danger: inherit; --pgn-color-btn-focus-bg-danger: var(--pgn-color-btn-bg-danger); + --pgn-color-btn-focus-bg-inverse-outline-brand: inherit; + --pgn-color-btn-focus-bg-outline-brand: inherit; --pgn-color-btn-focus-bg-inverse-brand: var(--pgn-color-btn-bg-inverse-brand); + --pgn-color-btn-focus-bg-brand: var(--pgn-color-btn-bg-brand); + --pgn-color-btn-focus-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning); + --pgn-color-btn-focus-border-inverse-warning: var(--pgn-color-btn-border-inverse-warning); --pgn-color-btn-focus-border-outline-warning: var(--pgn-color-btn-border-outline-warning); + --pgn-color-btn-focus-border-warning: var(--pgn-color-btn-border-warning); + --pgn-color-btn-focus-border-inverse-tertiary: #00000000; + --pgn-color-btn-focus-border-tertiary: var(--pgn-color-btn-border-tertiary); + --pgn-color-btn-focus-border-inverse-outline-success: var(--pgn-color-btn-border-inverse-outline-success); + --pgn-color-btn-focus-border-inverse-success: var(--pgn-color-white); --pgn-color-btn-focus-border-outline-success: var(--pgn-color-btn-border-outline-success); + --pgn-color-btn-focus-border-success: var(--pgn-color-btn-border-success); + --pgn-color-btn-focus-border-inverse-outline-secondary: var(--pgn-color-white); + --pgn-color-btn-focus-border-inverse-secondary: var(--pgn-color-white); --pgn-color-btn-focus-border-outline-secondary: var(--pgn-color-btn-border-outline-secondary); --pgn-color-btn-focus-border-secondary: var(--pgn-color-btn-bg-secondary); + --pgn-color-btn-focus-border-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary); + --pgn-color-btn-focus-border-inverse-primary: var(--pgn-color-white); + --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-btn-border-outline-primary); --pgn-color-btn-focus-border-primary: var(--pgn-color-btn-border-primary); + --pgn-color-btn-focus-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light); + --pgn-color-btn-focus-border-inverse-light: var(--pgn-color-btn-border-inverse-light); + --pgn-color-btn-focus-border-outline-light: var(--pgn-color-btn-border-outline-light); --pgn-color-btn-focus-border-light: var(--pgn-color-btn-border-light); + --pgn-color-btn-focus-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info); + --pgn-color-btn-focus-border-inverse-info: var(--pgn-color-white); --pgn-color-btn-focus-border-outline-info: var(--pgn-color-btn-border-outline-info); + --pgn-color-btn-focus-border-info: var(--pgn-color-btn-border-info); + --pgn-color-btn-focus-border-inverse-outline-dark: var(--pgn-color-white); + --pgn-color-btn-focus-border-inverse-dark: var(--pgn-color-white); + --pgn-color-btn-focus-border-outline-dark: var(--pgn-color-btn-border-outline-dark); --pgn-color-btn-focus-border-dark: var(--pgn-color-btn-focus-bg-dark); + --pgn-color-btn-focus-border-inverse-outline-danger: var(--pgn-color-white); + --pgn-color-btn-focus-border-inverse-danger: var(--pgn-color-white); --pgn-color-btn-focus-border-outline-danger: var(--pgn-color-btn-border-outline-danger); + --pgn-color-btn-focus-border-danger: var(--pgn-color-btn-focus-bg-danger); + --pgn-color-btn-focus-border-inverse-outline-brand: var(--pgn-color-btn-border-inverse-outline-brand); + --pgn-color-btn-focus-border-inverse-brand: var(--pgn-color-white); + --pgn-color-btn-focus-border-outline-brand: var(--pgn-color-btn-border-outline-brand); --pgn-color-btn-focus-border-brand: var(--pgn-color-btn-border-brand); + --pgn-color-btn-focus-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning); --pgn-color-btn-focus-text-inverse-warning: var(--pgn-color-btn-text-inverse-warning); --pgn-color-btn-focus-text-outline-warning: var(--pgn-color-btn-text-outline-warning); + --pgn-color-btn-focus-text-warning: var(--pgn-color-btn-text-warning); + --pgn-color-btn-focus-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary); + --pgn-color-btn-focus-text-tertiary: var(--pgn-color-btn-text-tertiary); + --pgn-color-btn-focus-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success); --pgn-color-btn-focus-text-inverse-success: var(--pgn-color-btn-text-inverse-success); --pgn-color-btn-focus-text-outline-success: var(--pgn-color-btn-text-outline-success); + --pgn-color-btn-focus-text-success: var(--pgn-color-btn-text-success); + --pgn-color-btn-focus-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary); --pgn-color-btn-focus-text-outline-secondary: var(--pgn-color-btn-text-outline-secondary); + --pgn-color-btn-focus-text-inverse-secondary: inherit; + --pgn-color-btn-focus-text-secondary: var(--pgn-color-btn-text-secondary); + --pgn-color-btn-focus-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary); + --pgn-color-btn-focus-text-inverse-primary: var(--pgn-color-btn-text-inverse-primary); + --pgn-color-btn-focus-text-outline-primary: var(--pgn-color-btn-text-outline-primary); --pgn-color-btn-focus-text-primary: var(--pgn-color-btn-text-primary); + --pgn-color-btn-focus-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light); + --pgn-color-btn-focus-text-inverse-light: var(--pgn-color-btn-text-inverse-light); + --pgn-color-btn-focus-text-outline-light: var(--pgn-color-btn-text-outline-light); --pgn-color-btn-focus-text-light: var(--pgn-color-btn-text-light); + --pgn-color-btn-focus-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info); --pgn-color-btn-focus-text-inverse-info: var(--pgn-color-btn-text-inverse-info); --pgn-color-btn-focus-text-outline-info: var(--pgn-color-btn-text-outline-info); + --pgn-color-btn-focus-text-info: var(--pgn-color-btn-text-info); + --pgn-color-btn-focus-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark); + --pgn-color-btn-focus-text-outline-dark: inherit; + --pgn-color-btn-focus-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark); --pgn-color-btn-focus-text-dark: var(--pgn-color-btn-text-dark); + --pgn-color-btn-focus-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger); --pgn-color-btn-focus-text-outline-danger: var(--pgn-color-btn-text-outline-danger); --pgn-color-btn-focus-text-inverse-danger: var(--pgn-color-btn-text-inverse-danger); + --pgn-color-btn-focus-text-danger: var(--pgn-color-btn-text-danger); + --pgn-color-btn-focus-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand); + --pgn-color-btn-focus-text-outline-brand: var(--pgn-color-btn-text-outline-brand); + --pgn-color-btn-focus-text-inverse-brand: var(--pgn-color-btn-text-inverse-brand); --pgn-color-btn-focus-text-brand: var(--pgn-color-btn-text-brand); + --pgn-color-btn-active-border-inverse-outline-warning: #00000000; + --pgn-color-btn-active-border-outline-warning: var(--pgn-color-theme-active-warning); + --pgn-color-btn-active-border-inverse-warning: inherit; + --pgn-color-btn-active-border-warning: var(--pgn-color-theme-active-warning); + --pgn-color-btn-active-border-inverse-tertiary: #00000000; + --pgn-color-btn-active-border-tertiary: #00000000; + --pgn-color-btn-active-border-inverse-outline-success: #00000000; + --pgn-color-btn-active-border-inverse-success: inherit; + --pgn-color-btn-active-border-outline-success: var(--pgn-color-theme-active-success); + --pgn-color-btn-active-border-success: var(--pgn-color-theme-active-success); + --pgn-color-btn-active-border-inverse-secondary: #00000000; + --pgn-color-btn-active-border-inverse-outline-secondary: #00000000; + --pgn-color-btn-active-border-outline-secondary: var(--pgn-color-theme-active-secondary); + --pgn-color-btn-active-border-secondary: var(--pgn-color-theme-active-secondary); + --pgn-color-btn-active-border-inverse-primary: #00000000; + --pgn-color-btn-active-border-inverse-outline-primary: #00000000; --pgn-color-btn-active-border-outline-primary: var(--pgn-color-theme-active-primary); --pgn-color-btn-active-border-primary: var(--pgn-color-theme-active-primary); + --pgn-color-btn-active-border-inverse-outline-light: #00000000; + --pgn-color-btn-active-border-inverse-light: inherit; --pgn-color-btn-active-border-outline-light: var(--pgn-color-theme-active-light); --pgn-color-btn-active-border-light: var(--pgn-color-theme-active-light); + --pgn-color-btn-active-border-inverse-outline-info: #00000000; + --pgn-color-btn-active-border-inverse-info: #00000000; + --pgn-color-btn-active-border-outline-info: var(--pgn-color-theme-active-info); + --pgn-color-btn-active-border-info: var(--pgn-color-theme-active-info); + --pgn-color-btn-active-border-inverse-outline-dark: #00000000; + --pgn-color-btn-active-border-inverse-dark: #00000000; --pgn-color-btn-active-border-outline-dark: var(--pgn-color-theme-active-dark); --pgn-color-btn-active-border-dark: var(--pgn-color-theme-active-dark); + --pgn-color-btn-active-border-inverse-outline-danger: #00000000; + --pgn-color-btn-active-border-inverse-danger: #00000000; + --pgn-color-btn-active-border-outline-danger: var(--pgn-color-theme-active-danger); + --pgn-color-btn-active-border-danger: var(--pgn-color-theme-active-danger); + --pgn-color-btn-active-border-inverse-outline-brand: #00000000; + --pgn-color-btn-active-border-inverse-brand: #00000000; --pgn-color-btn-active-border-outline-brand: var(--pgn-color-theme-active-brand); --pgn-color-btn-active-border-brand: var(--pgn-color-theme-active-brand); + --pgn-color-btn-active-bg-inverse-outline-warning: var(--pgn-color-theme-bg-warning); + --pgn-color-btn-active-bg-inverse-warning: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-outline-warning: var(--pgn-color-theme-bg-warning); + --pgn-color-btn-active-bg-warning: var(--pgn-color-theme-active-warning); + --pgn-color-btn-active-bg-inverse-tertiary: var(--pgn-color-btn-hover-bg-inverse-tertiary); + --pgn-color-btn-active-bg-tertiary: var(--pgn-color-light-500); + --pgn-color-btn-active-bg-inverse-outline-success: var(--pgn-color-theme-bg-success); + --pgn-color-btn-active-bg-inverse-success: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-outline-success: var(--pgn-color-theme-bg-success); + --pgn-color-btn-active-bg-success: var(--pgn-color-theme-active-success); + --pgn-color-btn-active-bg-inverse-secondary: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-inverse-outline-secondary: var(--pgn-color-theme-bg-secondary); + --pgn-color-btn-active-bg-outline-secondary: var(--pgn-color-theme-bg-secondary); + --pgn-color-btn-active-bg-secondary: var(--pgn-color-theme-active-secondary); + --pgn-color-btn-active-bg-inverse-primary: var(--pgn-color-gray-100); --pgn-color-btn-active-bg-inverse-outline-primary: var(--pgn-color-theme-bg-primary); --pgn-color-btn-active-bg-outline-primary: var(--pgn-color-theme-bg-primary); --pgn-color-btn-active-bg-primary: var(--pgn-color-theme-active-primary); --pgn-color-btn-active-bg-inverse-outline-light: var(--pgn-color-theme-bg-light); + --pgn-color-btn-active-bg-inverse-light: var(--pgn-color-gray-100); --pgn-color-btn-active-bg-outline-light: var(--pgn-color-theme-bg-light); --pgn-color-btn-active-bg-light: var(--pgn-color-theme-active-light); + --pgn-color-btn-active-bg-inverse-outline-info: var(--pgn-color-theme-bg-info); + --pgn-color-btn-active-bg-inverse-info: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-outline-info: var(--pgn-color-theme-bg-info); + --pgn-color-btn-active-bg-info: var(--pgn-color-theme-active-info); --pgn-color-btn-active-bg-inverse-outline-dark: var(--pgn-color-theme-bg-dark); + --pgn-color-btn-active-bg-inverse-dark: var(--pgn-color-gray-100); --pgn-color-btn-active-bg-outline-dark: var(--pgn-color-theme-bg-dark); --pgn-color-btn-active-bg-dark: var(--pgn-color-theme-active-dark); + --pgn-color-btn-active-bg-inverse-outline-danger: var(--pgn-color-theme-bg-danger); + --pgn-color-btn-active-bg-inverse-danger: var(--pgn-color-gray-100); + --pgn-color-btn-active-bg-outline-danger: var(--pgn-color-theme-bg-danger); + --pgn-color-btn-active-bg-danger: var(--pgn-color-theme-active-danger); + --pgn-color-btn-active-bg-inverse-brand: var(--pgn-color-gray-100); --pgn-color-btn-active-bg-inverse-outline-brand: var(--pgn-color-theme-bg-brand); --pgn-color-btn-active-bg-outline-brand: var(--pgn-color-theme-bg-brand); --pgn-color-btn-active-bg-brand: var(--pgn-color-theme-active-brand); + --pgn-color-btn-active-text-inverse-outline-warning: #454545FF; --pgn-color-btn-active-text-inverse-warning: #CCAE00FF; + --pgn-color-btn-active-text-outline-warning: #454545FF; + --pgn-color-btn-active-text-warning: #313131FF; + --pgn-color-btn-active-text-inverse-tertiary: var(--pgn-color-white); + --pgn-color-btn-active-text-tertiary: var(--pgn-color-gray-700); + --pgn-color-btn-active-text-inverse-outline-success: #454545FF; --pgn-color-btn-active-text-inverse-success: #0F5737FF; + --pgn-color-btn-active-text-outline-success: #454545FF; + --pgn-color-btn-active-text-success: #FFFFFFFF; + --pgn-color-btn-active-text-inverse-outline-secondary: #454545FF; --pgn-color-btn-active-text-inverse-secondary: #2B2B2BFF; + --pgn-color-btn-active-text-outline-secondary: #454545FF; + --pgn-color-btn-active-text-secondary: #FFFFFFFF; + --pgn-color-btn-active-text-inverse-outline-primary: #454545FF; + --pgn-color-btn-active-text-inverse-primary: #051627FF; + --pgn-color-btn-active-text-outline-primary: #454545FF; + --pgn-color-btn-active-text-primary: #FFFFFFFF; + --pgn-color-btn-active-text-inverse-outline-light: #454545FF; + --pgn-color-btn-active-text-inverse-light: #CAC3BFFF; + --pgn-color-btn-active-text-outline-light: #454545FF; + --pgn-color-btn-active-text-light: #313131FF; + --pgn-color-btn-active-text-inverse-outline-info: #454545FF; --pgn-color-btn-active-text-inverse-info: #004C77FF; + --pgn-color-btn-active-text-outline-info: #454545FF; + --pgn-color-btn-active-text-info: #FFFFFFFF; + --pgn-color-btn-active-text-inverse-outline-dark: #454545FF; + --pgn-color-btn-active-text-inverse-dark: #142018FF; + --pgn-color-btn-active-text-outline-dark: #454545FF; + --pgn-color-btn-active-text-dark: #FFFFFFFF; + --pgn-color-btn-active-text-inverse-outline-danger: #454545FF; --pgn-color-btn-active-text-inverse-danger: #9A232EFF; + --pgn-color-btn-active-text-outline-danger: #454545FF; + --pgn-color-btn-active-text-danger: #FFFFFFFF; + --pgn-color-btn-active-text-inverse-outline-brand: #454545FF; + --pgn-color-btn-active-text-inverse-brand: #6A0039FF; + --pgn-color-btn-active-text-outline-brand: #454545FF; + --pgn-color-btn-active-text-brand: #FFFFFFFF; + --pgn-color-btn-hover-border-inverse-outline-warning: #00000000; + --pgn-color-btn-hover-border-inverse-warning: #00000000; --pgn-color-btn-hover-border-outline-warning: var(--pgn-color-warning-900); + --pgn-color-btn-hover-border-warning: var(--pgn-color-theme-hover-warning); + --pgn-color-btn-hover-border-inverse-tertiary: #00000000; + --pgn-color-btn-hover-border-tertiary: #00000000; + --pgn-color-btn-hover-border-inverse-outline-success: #00000000; + --pgn-color-btn-hover-border-inverse-success: #00000000; --pgn-color-btn-hover-border-outline-success: var(--pgn-color-success-900); + --pgn-color-btn-hover-border-success: var(--pgn-color-theme-hover-success); + --pgn-color-btn-hover-border-inverse-secondary: #00000000; + --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000; --pgn-color-btn-hover-border-outline-secondary: var(--pgn-color-secondary-900); + --pgn-color-btn-hover-border-secondary: var(--pgn-color-theme-hover-secondary); + --pgn-color-btn-hover-border-inverse-primary: #00000000; + --pgn-color-btn-hover-border-inverse-outline-primary: #00000000; + --pgn-color-btn-hover-border-outline-primary: var(--pgn-color-primary-900); --pgn-color-btn-hover-border-primary: var(--pgn-color-theme-hover-primary); + --pgn-color-btn-hover-border-inverse-outline-light: #00000000; + --pgn-color-btn-hover-border-inverse-light: #00000000; + --pgn-color-btn-hover-border-outline-light: var(--pgn-color-light-900); --pgn-color-btn-hover-border-light: var(--pgn-color-theme-hover-light); + --pgn-color-btn-hover-border-inverse-outline-info: #00000000; + --pgn-color-btn-hover-border-inverse-info: #00000000; --pgn-color-btn-hover-border-outline-info: var(--pgn-color-info-900); + --pgn-color-btn-hover-border-info: var(--pgn-color-theme-hover-info); + --pgn-color-btn-hover-border-inverse-outline-dark: #00000000; + --pgn-color-btn-hover-border-inverse-dark: #00000000; + --pgn-color-btn-hover-border-outline-dark: var(--pgn-color-dark-900); --pgn-color-btn-hover-border-dark: var(--pgn-color-theme-hover-dark); + --pgn-color-btn-hover-border-inverse-outline-danger: #00000000; + --pgn-color-btn-hover-border-inverse-danger: #00000000; --pgn-color-btn-hover-border-outline-danger: var(--pgn-color-danger-900); + --pgn-color-btn-hover-border-danger: var(--pgn-color-theme-hover-danger); + --pgn-color-btn-hover-border-inverse-brand: #00000000; + --pgn-color-btn-hover-border-inverse-outline-brand: #00000000; + --pgn-color-btn-hover-border-outline-brand: var(--pgn-color-brand-900); --pgn-color-btn-hover-border-brand: var(--pgn-color-theme-hover-brand); --pgn-color-btn-hover-bg-inverse-outline-warning: var(--pgn-color-warning-100); + --pgn-color-btn-hover-bg-inverse-warning: #323232FF; --pgn-color-btn-hover-bg-outline-warning: var(--pgn-color-warning-100); + --pgn-color-btn-hover-bg-warning: var(--pgn-color-theme-hover-warning); + --pgn-color-btn-hover-bg-inverse-tertiary: #FFFFFF1A; + --pgn-color-btn-hover-bg-tertiary: var(--pgn-color-light-500); --pgn-color-btn-hover-bg-inverse-outline-success: var(--pgn-color-success-100); + --pgn-color-btn-hover-bg-inverse-success: #ECECECFF; --pgn-color-btn-hover-bg-outline-success: var(--pgn-color-success-100); + --pgn-color-btn-hover-bg-success: var(--pgn-color-theme-hover-success); --pgn-color-btn-hover-bg-inverse-outline-secondary: var(--pgn-color-secondary-100); + --pgn-color-btn-hover-bg-inverse-secondary: #ECECECFF; --pgn-color-btn-hover-bg-outline-secondary: var(--pgn-color-secondary-100); + --pgn-color-btn-hover-bg-secondary: var(--pgn-color-theme-hover-secondary); + --pgn-color-btn-hover-bg-inverse-outline-primary: var(--pgn-color-primary-100); --pgn-color-btn-hover-bg-inverse-primary: #ECECECFF; + --pgn-color-btn-hover-bg-outline-primary: var(--pgn-color-primary-100); --pgn-color-btn-hover-bg-primary: var(--pgn-color-theme-hover-primary); + --pgn-color-btn-hover-bg-inverse-outline-light: var(--pgn-color-light-100); --pgn-color-btn-hover-bg-inverse-light: #323232FF; + --pgn-color-btn-hover-bg-outline-light: var(--pgn-color-light-100); --pgn-color-btn-hover-bg-light: var(--pgn-color-theme-hover-light); --pgn-color-btn-hover-bg-inverse-outline-info: var(--pgn-color-info-100); + --pgn-color-btn-hover-bg-inverse-info: #ECECECFF; --pgn-color-btn-hover-bg-outline-info: var(--pgn-color-info-100); + --pgn-color-btn-hover-bg-info: var(--pgn-color-theme-hover-info); + --pgn-color-btn-hover-bg-inverse-outline-dark: var(--pgn-color-dark-100); --pgn-color-btn-hover-bg-inverse-dark: #ECECECFF; + --pgn-color-btn-hover-bg-outline-dark: var(--pgn-color-dark-100); --pgn-color-btn-hover-bg-dark: var(--pgn-color-theme-hover-dark); --pgn-color-btn-hover-bg-inverse-outline-danger: var(--pgn-color-danger-100); + --pgn-color-btn-hover-bg-inverse-danger: #ECECECFF; --pgn-color-btn-hover-bg-outline-danger: var(--pgn-color-danger-100); + --pgn-color-btn-hover-bg-danger: var(--pgn-color-theme-hover-danger); + --pgn-color-btn-hover-bg-inverse-outline-brand: var(--pgn-color-brand-100); --pgn-color-btn-hover-bg-inverse-brand: #ECECECFF; + --pgn-color-btn-hover-bg-outline-brand: var(--pgn-color-brand-100); --pgn-color-btn-hover-bg-brand: var(--pgn-color-theme-hover-brand); + --pgn-color-btn-hover-text-inverse-outline-warning: var(--pgn-color-theme-hover-warning); --pgn-color-btn-hover-text-inverse-warning: #D9B800FF; + --pgn-color-btn-hover-text-outline-warning: var(--pgn-color-theme-hover-warning); + --pgn-color-btn-hover-text-warning: #414141FF; + --pgn-color-btn-hover-text-inverse-tertiary: var(--pgn-color-white); + --pgn-color-btn-hover-text-tertiary: var(--pgn-color-gray-700); + --pgn-color-btn-hover-text-inverse-outline-success: var(--pgn-color-theme-hover-success); --pgn-color-btn-hover-text-inverse-success: #11623EFF; + --pgn-color-btn-hover-text-outline-success: var(--pgn-color-theme-hover-success); + --pgn-color-btn-hover-text-success: #FFFFFFFF; + --pgn-color-btn-hover-text-inverse-outline-secondary: var(--pgn-color-theme-hover-secondary); --pgn-color-btn-hover-text-inverse-secondary: #323232FF; + --pgn-color-btn-hover-text-outline-secondary: var(--pgn-color-theme-hover-secondary); + --pgn-color-btn-hover-text-secondary: #FFFFFFFF; --pgn-color-btn-hover-text-inverse-outline-primary: var(--pgn-color-theme-hover-primary); + --pgn-color-btn-hover-text-inverse-primary: #061D33FF; --pgn-color-btn-hover-text-outline-primary: var(--pgn-color-theme-hover-primary); + --pgn-color-btn-hover-text-primary: #FFFFFFFF; --pgn-color-btn-hover-text-inverse-outline-light: var(--pgn-color-theme-hover-light); + --pgn-color-btn-hover-text-inverse-light: #D0C9C6FF; --pgn-color-btn-hover-text-outline-light: var(--pgn-color-theme-hover-light); + --pgn-color-btn-hover-text-light: #414141FF; + --pgn-color-btn-hover-text-inverse-outline-info: var(--pgn-color-theme-hover-info); --pgn-color-btn-hover-text-inverse-info: #005484FF; + --pgn-color-btn-hover-text-outline-info: var(--pgn-color-theme-hover-info); + --pgn-color-btn-hover-text-info: #FFFFFFFF; --pgn-color-btn-hover-text-inverse-outline-dark: var(--pgn-color-theme-hover-dark); + --pgn-color-btn-hover-text-inverse-dark: #18271DFF; --pgn-color-btn-hover-text-outline-dark: var(--pgn-color-theme-hover-dark); + --pgn-color-btn-hover-text-dark: #FFFFFFFF; + --pgn-color-btn-hover-text-inverse-outline-danger: var(--pgn-color-theme-hover-danger); --pgn-color-btn-hover-text-inverse-danger: #A42631FF; + --pgn-color-btn-hover-text-outline-danger: var(--pgn-color-theme-hover-danger); + --pgn-color-btn-hover-text-danger: #FFFFFFFF; --pgn-color-btn-hover-text-inverse-outline-brand: var(--pgn-color-theme-hover-brand); + --pgn-color-btn-hover-text-inverse-brand: #770040FF; --pgn-color-btn-hover-text-outline-brand: var(--pgn-color-theme-hover-brand); + --pgn-color-btn-hover-text-brand: #FFFFFFFF; + --pgn-color-btn-border-inverse-outline-warning: var(--pgn-color-white); + --pgn-color-btn-border-inverse-warning: #00000000; + --pgn-color-btn-border-outline-warning: var(--pgn-color-warning-base); --pgn-color-btn-border-warning: var(--pgn-color-btn-bg-warning); + --pgn-color-btn-border-inverse-tertiary: #00000000; + --pgn-color-btn-border-tertiary: #00000000; + --pgn-color-btn-border-inverse-outline-success: var(--pgn-color-white); + --pgn-color-btn-border-inverse-success: #00000000; + --pgn-color-btn-border-outline-success: var(--pgn-color-success-base); --pgn-color-btn-border-success: var(--pgn-color-btn-bg-success); + --pgn-color-btn-border-inverse-secondary: #00000000; + --pgn-color-btn-border-inverse-outline-secondary: var(--pgn-color-white); + --pgn-color-btn-border-outline-secondary: var(--pgn-color-secondary-base); --pgn-color-btn-border-secondary: var(--pgn-color-btn-bg-secondary); + --pgn-color-btn-border-inverse-primary: #00000000; + --pgn-color-btn-border-inverse-outline-primary: var(--pgn-color-white); + --pgn-color-btn-border-outline-primary: var(--pgn-color-primary-base); + --pgn-color-btn-border-primary: var(--pgn-color-btn-bg-primary); + --pgn-color-btn-border-inverse-outline-light: var(--pgn-color-white); + --pgn-color-btn-border-inverse-light: #00000000; + --pgn-color-btn-border-outline-light: var(--pgn-color-light-base); + --pgn-color-btn-border-light: var(--pgn-color-btn-bg-light); + --pgn-color-btn-border-inverse-outline-info: var(--pgn-color-white); + --pgn-color-btn-border-inverse-info: #00000000; + --pgn-color-btn-border-outline-info: var(--pgn-color-info-base); --pgn-color-btn-border-info: var(--pgn-color-btn-bg-info); + --pgn-color-btn-border-inverse-outline-dark: var(--pgn-color-white); + --pgn-color-btn-border-inverse-dark: #00000000; + --pgn-color-btn-border-outline-dark: var(--pgn-color-dark-base); + --pgn-color-btn-border-dark: var(--pgn-color-btn-bg-dark); + --pgn-color-btn-border-inverse-outline-danger: var(--pgn-color-white); + --pgn-color-btn-border-inverse-danger: #00000000; + --pgn-color-btn-border-outline-danger: var(--pgn-color-danger-base); --pgn-color-btn-border-danger: var(--pgn-color-btn-bg-danger); + --pgn-color-btn-border-inverse-brand: #00000000; + --pgn-color-btn-border-inverse-outline-brand: var(--pgn-color-white); + --pgn-color-btn-border-outline-brand: var(--pgn-color-brand-base); + --pgn-color-btn-border-brand: var(--pgn-color-btn-bg-brand); + --pgn-color-btn-bg-inverse-outline-warning: inherit; --pgn-color-btn-bg-inverse-warning: #454545FF; + --pgn-color-btn-bg-outline-warning: inherit; + --pgn-color-btn-bg-warning: var(--pgn-color-warning-base); + --pgn-color-btn-bg-inverse-tertiary: #00000000; + --pgn-color-btn-bg-tertiary: #00000000; + --pgn-color-btn-bg-inverse-outline-success: inherit; --pgn-color-btn-bg-inverse-success: #FFFFFFFF; + --pgn-color-btn-bg-outline-success: inherit; + --pgn-color-btn-bg-success: var(--pgn-color-success-base); --pgn-color-btn-bg-inverse-secondary: #FFFFFFFF; + --pgn-color-btn-bg-inverse-outline-secondary: inherit; + --pgn-color-btn-bg-outline-secondary: inherit; + --pgn-color-btn-bg-secondary: var(--pgn-color-secondary-base); + --pgn-color-btn-bg-inverse-primary: #FFFFFFFF; + --pgn-color-btn-bg-inverse-outline-primary: #00000000; + --pgn-color-btn-bg-outline-primary: #00000000; + --pgn-color-btn-bg-primary: var(--pgn-color-primary-base); + --pgn-color-btn-bg-inverse-outline-light: inherit; + --pgn-color-btn-bg-outline-light: inherit; + --pgn-color-btn-bg-inverse-light: #454545FF; + --pgn-color-btn-bg-light: var(--pgn-color-light-base); + --pgn-color-btn-bg-inverse-outline-info: inherit; --pgn-color-btn-bg-inverse-info: #FFFFFFFF; + --pgn-color-btn-bg-outline-info: inherit; + --pgn-color-btn-bg-info: var(--pgn-color-info-base); + --pgn-color-btn-bg-inverse-outline-dark: #00000000; + --pgn-color-btn-bg-inverse-dark: #FFFFFFFF; + --pgn-color-btn-bg-outline-dark: inherit; + --pgn-color-btn-bg-dark: var(--pgn-color-dark-base); + --pgn-color-btn-bg-inverse-outline-danger: #00000000; --pgn-color-btn-bg-inverse-danger: #FFFFFFFF; + --pgn-color-btn-bg-outline-danger: inherit; + --pgn-color-btn-bg-danger: var(--pgn-color-danger-base); + --pgn-color-btn-bg-inverse-outline-brand: #00000000; + --pgn-color-btn-bg-inverse-brand: #FFFFFFFF; + --pgn-color-btn-bg-outline-brand: inherit; + --pgn-color-btn-bg-brand: var(--pgn-color-brand-base); + --pgn-color-btn-text-inverse-outline-warning: var(--pgn-color-white); + --pgn-color-btn-text-inverse-warning: var(--pgn-color-warning-base); + --pgn-color-btn-text-outline-warning: var(--pgn-color-warning-base); --pgn-color-btn-text-warning: #454545FF; + --pgn-color-btn-text-inverse-tertiary: var(--pgn-color-white); + --pgn-color-btn-text-tertiary: var(--pgn-color-gray-700); + --pgn-color-btn-text-inverse-outline-success: var(--pgn-color-white); + --pgn-color-btn-text-inverse-success: var(--pgn-color-success-base); + --pgn-color-btn-text-outline-success: var(--pgn-color-success-base); --pgn-color-btn-text-success: #FFFFFFFF; + --pgn-color-btn-text-inverse-outline-secondary: var(--pgn-color-white); + --pgn-color-btn-text-inverse-secondary: var(--pgn-color-secondary-base); + --pgn-color-btn-text-outline-secondary: var(--pgn-color-secondary-base); --pgn-color-btn-text-secondary: #FFFFFFFF; + --pgn-color-btn-text-inverse-outline-primary: var(--pgn-color-white); + --pgn-color-btn-text-inverse-primary: var(--pgn-color-primary-base); + --pgn-color-btn-text-outline-primary: var(--pgn-color-primary-base); + --pgn-color-btn-text-primary: #FFFFFFFF; + --pgn-color-btn-text-inverse-outline-light: var(--pgn-color-white); + --pgn-color-btn-text-inverse-light: var(--pgn-color-light-base); + --pgn-color-btn-text-outline-light: var(--pgn-color-light-base); + --pgn-color-btn-text-light: #454545FF; + --pgn-color-btn-text-inverse-outline-info: var(--pgn-color-white); + --pgn-color-btn-text-inverse-info: var(--pgn-color-info-base); + --pgn-color-btn-text-outline-info: var(--pgn-color-info-base); --pgn-color-btn-text-info: #FFFFFFFF; + --pgn-color-btn-text-inverse-outline-dark: var(--pgn-color-white); + --pgn-color-btn-text-inverse-dark: var(--pgn-color-dark-base); + --pgn-color-btn-text-outline-dark: var(--pgn-color-dark-base); + --pgn-color-btn-text-dark: #FFFFFFFF; + --pgn-color-btn-text-inverse-outline-danger: var(--pgn-color-white); + --pgn-color-btn-text-inverse-danger: var(--pgn-color-danger-base); + --pgn-color-btn-text-outline-danger: var(--pgn-color-danger-base); --pgn-color-btn-text-danger: #FFFFFFFF; + --pgn-color-btn-text-inverse-outline-brand: var(--pgn-color-white); + --pgn-color-btn-text-inverse-brand: var(--pgn-color-brand-base); + --pgn-color-btn-text-outline-brand: var(--pgn-color-brand-base); + --pgn-color-btn-text-brand: #FFFFFFFF; + --pgn-color-bubble-bg-primary: var(--pgn-color-primary-base); + --pgn-color-bubble-bg-error: var(--pgn-color-danger-base); + --pgn-color-bubble-bg-warning: var(--pgn-color-warning-base); + --pgn-color-bubble-bg-success: var(--pgn-color-success-base); + --pgn-color-bubble-text-primary: var(--pgn-color-white); + --pgn-color-bubble-text-error: var(--pgn-color-white); + --pgn-color-bubble-text-warning: var(--pgn-color-white); + --pgn-color-bubble-text-success: var(--pgn-color-white); + --pgn-color-breadcrumb-inverse-spacer: var(--pgn-color-light-700); + --pgn-color-breadcrumb-inverse-active: var(--pgn-color-light-500); + --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white); + --pgn-color-breadcrumb-active: var(--pgn-color-gray-500); + --pgn-color-breadcrumb-base: var(--pgn-color-primary-500); + --pgn-color-badge-focus-box-shadow-dark: #273F2F0D; + --pgn-color-badge-focus-box-shadow-light: #E1DDDB0D; --pgn-color-badge-focus-box-shadow-info: #006DAA0D; --pgn-color-badge-focus-box-shadow-warning: #FFD9000D; --pgn-color-badge-focus-box-shadow-danger: #C32D3A0D; --pgn-color-badge-focus-box-shadow-success: #1782530D; --pgn-color-badge-focus-box-shadow-secondary: #4545450D; + --pgn-color-badge-focus-box-shadow-primary: #0A30550D; + --pgn-color-badge-focus-bg-dark: #142018FF; + --pgn-color-badge-focus-bg-light: #CAC3BFFF; --pgn-color-badge-focus-bg-info: #004C77FF; --pgn-color-badge-focus-bg-warning: #CCAE00FF; --pgn-color-badge-focus-bg-danger: #9A232EFF; --pgn-color-badge-focus-bg-success: #0F5737FF; --pgn-color-badge-focus-bg-secondary: #2B2B2BFF; + --pgn-color-badge-focus-bg-primary: #051627FF; + --pgn-color-badge-focus-dark: var(--pgn-color-badge-text-dark); + --pgn-color-badge-focus-light: var(--pgn-color-badge-text-light); --pgn-color-badge-focus-info: var(--pgn-color-badge-text-info); --pgn-color-badge-focus-danger: var(--pgn-color-badge-text-danger); --pgn-color-badge-focus-warning: var(--pgn-color-badge-text-warning); --pgn-color-badge-focus-success: var(--pgn-color-badge-text-success); --pgn-color-badge-focus-secondary: var(--pgn-color-badge-text-secondary); - --pgn-color-theme-active-danger: var(--pgn-color-danger-900); - --pgn-color-theme-active-warning: var(--pgn-color-warning-900); - --pgn-color-theme-active-info: var(--pgn-color-info-900); - --pgn-color-theme-active-success: var(--pgn-color-success-900); - --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900); - --pgn-color-theme-hover-danger: var(--pgn-color-danger-700); - --pgn-color-theme-hover-warning: var(--pgn-color-warning-700); - --pgn-color-theme-hover-info: var(--pgn-color-info-700); - --pgn-color-theme-hover-success: var(--pgn-color-success-700); - --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-700); - --pgn-color-theme-default-danger: var(--pgn-color-danger-500); - --pgn-color-theme-default-warning: var(--pgn-color-warning-500); - --pgn-color-theme-default-info: var(--pgn-color-info-500); - --pgn-color-theme-default-success: var(--pgn-color-success-500); - --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500); - --pgn-color-theme-focus-danger: var(--pgn-color-danger-500); - --pgn-color-theme-focus-warning: var(--pgn-color-warning-500); - --pgn-color-theme-focus-info: var(--pgn-color-info-500); - --pgn-color-theme-focus-success: var(--pgn-color-success-500); - --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500); - --pgn-color-theme-border-danger: var(--pgn-color-danger-200); - --pgn-color-theme-border-warning: var(--pgn-color-warning-200); - --pgn-color-theme-border-info: var(--pgn-color-info-200); - --pgn-color-theme-border-success: var(--pgn-color-success-200); - --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200); - --pgn-color-theme-bg-danger: var(--pgn-color-danger-100); - --pgn-color-theme-bg-warning: var(--pgn-color-warning-100); - --pgn-color-theme-bg-info: var(--pgn-color-info-100); - --pgn-color-theme-bg-success: var(--pgn-color-success-100); - --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); - --pgn-color-table-caption: var(--pgn-color-text-muted); - --pgn-color-input-btn-focus: var(--pgn-color-bg-active); - --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,'); - --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e"); - --pgn-other-content-form-control-radio-indicator-icon-checked-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C32D3AFF'/%3e%3c/svg%3e"); - --pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e"); - --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,"); - --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,"); - --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus); - --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus); - --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300); - --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300); - --pgn-elevation-dropzone-hover: inset 0 0 0 2px var(--pgn-color-info-300); - --pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active); - --pgn-color-pagination-text-base: var(--pgn-color-link-base); - --pgn-color-nav-tabs-inverse-link-bg-active: var(--pgn-color-nav-tabs-inverse-link-bg-hover); - --pgn-color-list-group-active-border: var(--pgn-color-list-group-active-bg); - --pgn-color-link-brand-inline-hover-decoration: var(--pgn-color-link-brand-inline-hover-base); - --pgn-color-link-muted-inline-hover-decoration: var(--pgn-color-link-muted-inline-hover-base); - --pgn-color-link-inline-hover-base: #003C5EFF; - --pgn-color-link-inline-decoration: #006DAA4D; - --pgn-color-link-hover: #003C5EFF; - --pgn-color-form-control-file-border-focus: var(--pgn-color-form-input-focus-border); - --pgn-color-form-control-select-border-focus: var(--pgn-color-form-input-focus-border); - --pgn-color-form-control-checkbox-indicator-indeterminate-border: var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg); - --pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base); - --pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg); - --pgn-color-form-control-indicator-checked-border-focus: var(--pgn-color-form-input-focus-border); - --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-form-control-indicator-checked-base); - --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning); - --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success); - --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary); - --pgn-color-btn-disabled-border-outline-light: var(--pgn-color-btn-hover-text-outline-light); - --pgn-color-btn-disabled-border-outline-dark: var(--pgn-color-btn-hover-text-outline-dark); - --pgn-color-btn-disabled-border-danger: var(--pgn-color-btn-border-danger); - --pgn-color-btn-disabled-text-warning: var(--pgn-color-btn-text-warning); - --pgn-color-btn-disabled-text-success: var(--pgn-color-btn-text-success); - --pgn-color-btn-disabled-text-secondary: var(--pgn-color-btn-text-secondary); - --pgn-color-btn-disabled-text-outline-primary: var(--pgn-color-btn-hover-text-outline-primary); - --pgn-color-btn-disabled-text-outline-light: var(--pgn-color-btn-hover-text-outline-light); - --pgn-color-btn-disabled-text-info: var(--pgn-color-btn-text-info); - --pgn-color-btn-disabled-text-danger: var(--pgn-color-btn-text-danger); - --pgn-color-btn-disabled-text-outline-brand: var(--pgn-color-btn-hover-text-outline-brand); - --pgn-color-btn-focus-outline-outline-warning: var(--pgn-color-theme-focus-warning); - --pgn-color-btn-focus-outline-warning: var(--pgn-color-theme-focus-warning); - --pgn-color-btn-focus-outline-outline-success: var(--pgn-color-theme-focus-success); - --pgn-color-btn-focus-outline-success: var(--pgn-color-theme-focus-success); - --pgn-color-btn-focus-outline-outline-secondary: var(--pgn-color-theme-focus-secondary); - --pgn-color-btn-focus-outline-secondary: var(--pgn-color-theme-focus-secondary); - --pgn-color-btn-focus-outline-outline-info: var(--pgn-color-theme-focus-info); - --pgn-color-btn-focus-outline-info: var(--pgn-color-theme-focus-info); - --pgn-color-btn-focus-outline-outline-danger: var(--pgn-color-theme-focus-danger); - --pgn-color-btn-focus-outline-danger: var(--pgn-color-theme-focus-danger); - --pgn-color-btn-focus-bg-inverse-warning: var(--pgn-color-btn-bg-inverse-warning); - --pgn-color-btn-focus-bg-inverse-success: var(--pgn-color-btn-bg-inverse-success); - --pgn-color-btn-focus-bg-inverse-secondary: var(--pgn-color-btn-bg-inverse-secondary); - --pgn-color-btn-focus-bg-inverse-info: var(--pgn-color-btn-bg-inverse-info); - --pgn-color-btn-focus-bg-inverse-danger: var(--pgn-color-btn-bg-inverse-danger); - --pgn-color-btn-focus-border-warning: var(--pgn-color-btn-border-warning); - --pgn-color-btn-focus-border-success: var(--pgn-color-btn-border-success); - --pgn-color-btn-focus-border-info: var(--pgn-color-btn-border-info); - --pgn-color-btn-focus-border-danger: var(--pgn-color-btn-focus-bg-danger); - --pgn-color-btn-focus-text-warning: var(--pgn-color-btn-text-warning); - --pgn-color-btn-focus-text-success: var(--pgn-color-btn-text-success); - --pgn-color-btn-focus-text-secondary: var(--pgn-color-btn-text-secondary); - --pgn-color-btn-focus-text-info: var(--pgn-color-btn-text-info); - --pgn-color-btn-focus-text-danger: var(--pgn-color-btn-text-danger); - --pgn-color-btn-active-border-outline-warning: var(--pgn-color-theme-active-warning); - --pgn-color-btn-active-border-warning: var(--pgn-color-theme-active-warning); - --pgn-color-btn-active-border-outline-success: var(--pgn-color-theme-active-success); - --pgn-color-btn-active-border-success: var(--pgn-color-theme-active-success); - --pgn-color-btn-active-border-outline-secondary: var(--pgn-color-theme-active-secondary); - --pgn-color-btn-active-border-secondary: var(--pgn-color-theme-active-secondary); - --pgn-color-btn-active-border-outline-info: var(--pgn-color-theme-active-info); - --pgn-color-btn-active-border-info: var(--pgn-color-theme-active-info); - --pgn-color-btn-active-border-outline-danger: var(--pgn-color-theme-active-danger); - --pgn-color-btn-active-border-danger: var(--pgn-color-theme-active-danger); - --pgn-color-btn-active-bg-inverse-outline-warning: var(--pgn-color-theme-bg-warning); - --pgn-color-btn-active-bg-outline-warning: var(--pgn-color-theme-bg-warning); - --pgn-color-btn-active-bg-warning: var(--pgn-color-theme-active-warning); - --pgn-color-btn-active-bg-inverse-outline-success: var(--pgn-color-theme-bg-success); - --pgn-color-btn-active-bg-outline-success: var(--pgn-color-theme-bg-success); - --pgn-color-btn-active-bg-success: var(--pgn-color-theme-active-success); - --pgn-color-btn-active-bg-inverse-outline-secondary: var(--pgn-color-theme-bg-secondary); - --pgn-color-btn-active-bg-outline-secondary: var(--pgn-color-theme-bg-secondary); - --pgn-color-btn-active-bg-secondary: var(--pgn-color-theme-active-secondary); - --pgn-color-btn-active-bg-inverse-outline-info: var(--pgn-color-theme-bg-info); - --pgn-color-btn-active-bg-outline-info: var(--pgn-color-theme-bg-info); - --pgn-color-btn-active-bg-info: var(--pgn-color-theme-active-info); - --pgn-color-btn-active-bg-inverse-outline-danger: var(--pgn-color-theme-bg-danger); - --pgn-color-btn-active-bg-outline-danger: var(--pgn-color-theme-bg-danger); - --pgn-color-btn-active-bg-danger: var(--pgn-color-theme-active-danger); - --pgn-color-btn-active-text-inverse-outline-primary: #454545FF; - --pgn-color-btn-active-text-outline-primary: #454545FF; - --pgn-color-btn-active-text-primary: #FFFFFFFF; - --pgn-color-btn-active-text-inverse-outline-light: #454545FF; - --pgn-color-btn-active-text-outline-light: #454545FF; - --pgn-color-btn-active-text-light: #313131FF; - --pgn-color-btn-active-text-inverse-outline-dark: #454545FF; - --pgn-color-btn-active-text-outline-dark: #454545FF; - --pgn-color-btn-active-text-dark: #FFFFFFFF; - --pgn-color-btn-active-text-inverse-outline-brand: #454545FF; - --pgn-color-btn-active-text-outline-brand: #454545FF; - --pgn-color-btn-active-text-brand: #FFFFFFFF; - --pgn-color-btn-hover-border-warning: var(--pgn-color-theme-hover-warning); - --pgn-color-btn-hover-border-success: var(--pgn-color-theme-hover-success); - --pgn-color-btn-hover-border-secondary: var(--pgn-color-theme-hover-secondary); - --pgn-color-btn-hover-border-info: var(--pgn-color-theme-hover-info); - --pgn-color-btn-hover-border-danger: var(--pgn-color-theme-hover-danger); - --pgn-color-btn-hover-bg-inverse-warning: #323232FF; - --pgn-color-btn-hover-bg-warning: var(--pgn-color-theme-hover-warning); - --pgn-color-btn-hover-bg-inverse-success: #ECECECFF; - --pgn-color-btn-hover-bg-success: var(--pgn-color-theme-hover-success); - --pgn-color-btn-hover-bg-inverse-secondary: #ECECECFF; - --pgn-color-btn-hover-bg-secondary: var(--pgn-color-theme-hover-secondary); - --pgn-color-btn-hover-bg-inverse-info: #ECECECFF; - --pgn-color-btn-hover-bg-info: var(--pgn-color-theme-hover-info); - --pgn-color-btn-hover-bg-inverse-danger: #ECECECFF; - --pgn-color-btn-hover-bg-danger: var(--pgn-color-theme-hover-danger); - --pgn-color-btn-hover-text-inverse-outline-warning: var(--pgn-color-theme-hover-warning); - --pgn-color-btn-hover-text-outline-warning: var(--pgn-color-theme-hover-warning); - --pgn-color-btn-hover-text-inverse-outline-success: var(--pgn-color-theme-hover-success); - --pgn-color-btn-hover-text-outline-success: var(--pgn-color-theme-hover-success); - --pgn-color-btn-hover-text-inverse-outline-secondary: var(--pgn-color-theme-hover-secondary); - --pgn-color-btn-hover-text-outline-secondary: var(--pgn-color-theme-hover-secondary); - --pgn-color-btn-hover-text-primary: #FFFFFFFF; - --pgn-color-btn-hover-text-light: #414141FF; - --pgn-color-btn-hover-text-inverse-outline-info: var(--pgn-color-theme-hover-info); - --pgn-color-btn-hover-text-outline-info: var(--pgn-color-theme-hover-info); - --pgn-color-btn-hover-text-dark: #FFFFFFFF; - --pgn-color-btn-hover-text-inverse-outline-danger: var(--pgn-color-theme-hover-danger); - --pgn-color-btn-hover-text-outline-danger: var(--pgn-color-theme-hover-danger); - --pgn-color-btn-hover-text-brand: #FFFFFFFF; + --pgn-color-badge-focus-primary: var(--pgn-color-badge-text-primary); + --pgn-color-badge-bg-dark: var(--pgn-color-dark-base); + --pgn-color-badge-bg-light: var(--pgn-color-light-base); + --pgn-color-badge-bg-info: var(--pgn-color-info-base); + --pgn-color-badge-bg-danger: var(--pgn-color-danger-base); + --pgn-color-badge-bg-warning: var(--pgn-color-warning-base); + --pgn-color-badge-bg-success: var(--pgn-color-success-base); + --pgn-color-badge-bg-secondary: var(--pgn-color-secondary-base); + --pgn-color-badge-bg-primary: var(--pgn-color-primary-base); + --pgn-color-badge-text-dark: #FFFFFFFF; + --pgn-color-badge-text-light: #454545FF; + --pgn-color-badge-text-info: #FFFFFFFF; + --pgn-color-badge-text-warning: #454545FF; + --pgn-color-badge-text-danger: #FFFFFFFF; + --pgn-color-badge-text-success: #FFFFFFFF; + --pgn-color-badge-text-secondary: #FFFFFFFF; + --pgn-color-badge-text-primary: #FFFFFFFF; + --pgn-color-avatar-border: var(--pgn-color-light-300); + --pgn-color-annotation-bg-dark: var(--pgn-color-dark-base); + --pgn-color-annotation-bg-light: var(--pgn-color-white); + --pgn-color-annotation-bg-error: var(--pgn-color-danger-base); + --pgn-color-annotation-bg-warning: var(--pgn-color-accent-b); + --pgn-color-annotation-bg-success: var(--pgn-color-success-base); + --pgn-color-annotation-text-dark: var(--pgn-color-white); + --pgn-color-annotation-text-light: var(--pgn-color-primary-500); + --pgn-color-annotation-text-error: var(--pgn-color-white); + --pgn-color-annotation-text-warning: var(--pgn-color-black); + --pgn-color-annotation-text-success: var(--pgn-color-white); --pgn-color-alert-border-warning: var(--pgn-color-theme-border-warning); --pgn-color-alert-border-danger: var(--pgn-color-theme-border-danger); --pgn-color-alert-border-info: var(--pgn-color-theme-border-info); @@ -1611,34 +1442,622 @@ --pgn-color-alert-icon-danger: var(--pgn-color-theme-default-danger); --pgn-color-alert-icon-info: var(--pgn-color-theme-default-info); --pgn-color-alert-icon-success: var(--pgn-color-theme-default-success); + --pgn-color-alert-content: var(--pgn-color-gray-700); + --pgn-color-alert-title: var(--pgn-color-black); + --pgn-color-theme-active-gray: var(--pgn-color-gray-900); /* Theme-specific gray active color. */ + --pgn-color-theme-active-dark: var(--pgn-color-dark-900); /* Theme-specific dark active color. */ + --pgn-color-theme-active-light: var(--pgn-color-light-900); /* Theme-specific light active color. */ + --pgn-color-theme-active-danger: var(--pgn-color-danger-900); /* Theme-specific danger active color. */ + --pgn-color-theme-active-warning: var(--pgn-color-warning-900); /* Theme-specific warning active color. */ + --pgn-color-theme-active-info: var(--pgn-color-info-900); /* Theme-specific info active color. */ + --pgn-color-theme-active-success: var(--pgn-color-success-900); /* Theme-specific success active color. */ + --pgn-color-theme-active-brand: var(--pgn-color-brand-900); /* Theme-specific brand active color. */ + --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900); /* Theme-specific secondary active color. */ + --pgn-color-theme-active-primary: var(--pgn-color-primary-900); /* Theme-specific primary active color. */ + --pgn-color-theme-hover-gray: var(--pgn-color-gray-700); /* Theme-specific gray hover color. */ + --pgn-color-theme-hover-dark: var(--pgn-color-dark-700); /* Theme-specific dark hover color. */ + --pgn-color-theme-hover-light: var(--pgn-color-light-700); /* Theme-specific light hover color. */ + --pgn-color-theme-hover-danger: var(--pgn-color-danger-700); /* Theme-specific danger hover color. */ + --pgn-color-theme-hover-warning: var(--pgn-color-warning-700); /* Theme-specific warning hover color. */ + --pgn-color-theme-hover-info: var(--pgn-color-info-700); /* Theme-specific info hover color. */ + --pgn-color-theme-hover-success: var(--pgn-color-success-700); /* Theme-specific success hover color. */ + --pgn-color-theme-hover-brand: var(--pgn-color-brand-700); /* Theme-specific brand hover color. */ + --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-700); /* Theme-specific secondary hover color. */ + --pgn-color-theme-hover-primary: var(--pgn-color-primary-700); /* Theme-specific primary hover color. */ + --pgn-color-theme-default-gray: var(--pgn-color-gray-500); /* Theme-specific gray default color. */ + --pgn-color-theme-default-dark: var(--pgn-color-dark-500); /* Theme-specific dark default color. */ + --pgn-color-theme-default-light: var(--pgn-color-light-500); /* Theme-specific light default color. */ + --pgn-color-theme-default-danger: var(--pgn-color-danger-500); /* Theme-specific danger default color. */ + --pgn-color-theme-default-warning: var(--pgn-color-warning-500); /* Theme-specific warning default color. */ + --pgn-color-theme-default-info: var(--pgn-color-info-500); /* Theme-specific info default color. */ + --pgn-color-theme-default-success: var(--pgn-color-success-500); /* Theme-specific success default color. */ + --pgn-color-theme-default-brand: var(--pgn-color-brand-500); /* Theme-specific brand default color. */ + --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500); /* Theme-specific secondary default color. */ + --pgn-color-theme-default-primary: var(--pgn-color-primary-500); /* Theme-specific primary default color. */ + --pgn-color-theme-focus-gray: var(--pgn-color-gray-500); /* Theme-specific gray focus color. */ + --pgn-color-theme-focus-dark: var(--pgn-color-dark-500); /* Theme-specific dark focus color. */ + --pgn-color-theme-focus-light: var(--pgn-color-light-500); /* Theme-specific light focus color. */ + --pgn-color-theme-focus-danger: var(--pgn-color-danger-500); /* Theme-specific danger focus color. */ + --pgn-color-theme-focus-warning: var(--pgn-color-warning-500); /* Theme-specific warning focus color. */ + --pgn-color-theme-focus-info: var(--pgn-color-info-500); /* Theme-specific info focus color. */ + --pgn-color-theme-focus-success: var(--pgn-color-success-500); /* Theme-specific success focus color. */ + --pgn-color-theme-focus-brand: var(--pgn-color-brand-500); /* Theme-specific brand focus color. */ + --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500); /* Theme-specific secondary focus color. */ + --pgn-color-theme-focus-primary: var(--pgn-color-primary-500); /* Theme-specific primary focus color. */ + --pgn-color-theme-border-gray: var(--pgn-color-gray-200); /* Theme-specific gray border color. */ + --pgn-color-theme-border-dark: var(--pgn-color-dark-200); /* Theme-specific dark border color. */ + --pgn-color-theme-border-light: var(--pgn-color-light-200); /* Theme-specific light border color. */ + --pgn-color-theme-border-danger: var(--pgn-color-danger-200); /* Theme-specific danger border color. */ + --pgn-color-theme-border-warning: var(--pgn-color-warning-200); /* Theme-specific warning border color. */ + --pgn-color-theme-border-info: var(--pgn-color-info-200); /* Theme-specific info border color. */ + --pgn-color-theme-border-success: var(--pgn-color-success-200); /* Theme-specific success border color. */ + --pgn-color-theme-border-brand: var(--pgn-color-brand-200); /* Theme-specific brand border color. */ + --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200); /* Theme-specific secondary border color. */ + --pgn-color-theme-border-primary: var(--pgn-color-primary-200); /* Theme-specific primary border color. */ + --pgn-color-theme-bg-gray: var(--pgn-color-gray-100); /* Theme-specific gray background color. */ + --pgn-color-theme-bg-dark: var(--pgn-color-dark-100); /* Theme-specific dark background color. */ + --pgn-color-theme-bg-light: var(--pgn-color-light-100); /* Theme-specific light background color. */ + --pgn-color-theme-bg-danger: var(--pgn-color-danger-100); /* Theme-specific danger background color. */ + --pgn-color-theme-bg-warning: var(--pgn-color-warning-100); /* Theme-specific warning background color. */ + --pgn-color-theme-bg-info: var(--pgn-color-info-100); /* Theme-specific info background color. */ + --pgn-color-theme-bg-success: var(--pgn-color-success-100); /* Theme-specific success background color. */ + --pgn-color-theme-bg-brand: var(--pgn-color-brand-100); /* Theme-specific brand background color. */ + --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); /* Theme-specific secondary background color. */ + --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); /* Theme-specific primary background color. */ + --pgn-color-border: var(--pgn-color-gray-200); /* Border color. */ + --pgn-color-table-border: var(--pgn-color-border); /* Table border color. */ + --pgn-color-table-caption: var(--pgn-color-text-muted); /* Table caption color. */ + --pgn-color-input-btn-focus: var(--pgn-color-bg-active); + --pgn-color-input-focus: var(--pgn-color-primary-500); /* Focused input value color. */ + --pgn-color-disabled: var(--pgn-color-gray-500); /* Color for disabled element. */ + --pgn-color-active: var(--pgn-color-white); /* Color for active element. */ + --pgn-color-text-50-white: #FFFFFF80; /* White text color with transparency of 50%. */ + --pgn-color-text-50-black: #00000080; /* Black text color with transparency of 50%. */ + --pgn-color-bg-active: var(--pgn-color-primary-500); /* Active background color. */ + --pgn-color-bg-base: var(--pgn-color-white); /* Basic background color. */ + --pgn-other-link-emphasized-hover-darken-percentage: 15%; + --pgn-other-tooltip-opacity: 1; + --pgn-other-search-field-disabled-opacity: .3; + --pgn-other-modal-opacity: .5; --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C32D3AFF' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23C32D3AFF' 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"); --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23178253FF' 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"); - --pgn-other-content-form-control-select-bg: var(--pgn-other-content-form-control-select-indicator-icon) no-repeat right var(--pgn-spacing-form-input-padding-y-base) center / var(--pgn-color-form-control-select-bg-base); + --pgn-other-content-form-control-select-bg-position-y: center; + --pgn-other-content-form-control-select-bg-offset-y: var(--pgn-spacing-form-input-padding-y-base); + --pgn-other-content-form-control-select-bg-position-x: right; + --pgn-other-content-form-control-select-bg-repeat: no-repeat; + --pgn-other-content-form-control-select-bg-image: var(--pgn-other-content-form-control-select-indicator-icon); + --pgn-other-content-form-control-select-bg-color: var(--pgn-color-form-control-select-bg-base); + --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,'); + --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e"); --pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e"); + --pgn-other-content-form-control-radio-indicator-icon-checked-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C32D3AFF'/%3e%3c/svg%3e"); + --pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e"); --pgn-other-content-form-control-radio-indicator-icon-checked-base: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e"); - --pgn-other-content-form-control-checkbox-indicator-icon-checked-base: url("data:image/svg+xml,"); - --pgn-color-pagination-text-hover: var(--pgn-color-link-hover); - --pgn-color-link-inline-hover-decoration: var(--pgn-color-link-inline-hover-base); - --pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger); - --pgn-color-btn-active-text-inverse-outline-warning: #454545FF; - --pgn-color-btn-active-text-outline-warning: #454545FF; - --pgn-color-btn-active-text-warning: #313131FF; - --pgn-color-btn-active-text-inverse-outline-success: #454545FF; - --pgn-color-btn-active-text-outline-success: #454545FF; - --pgn-color-btn-active-text-success: #FFFFFFFF; - --pgn-color-btn-active-text-inverse-outline-secondary: #454545FF; - --pgn-color-btn-active-text-outline-secondary: #454545FF; - --pgn-color-btn-active-text-secondary: #FFFFFFFF; - --pgn-color-btn-active-text-inverse-outline-info: #454545FF; - --pgn-color-btn-active-text-outline-info: #454545FF; - --pgn-color-btn-active-text-info: #FFFFFFFF; - --pgn-color-btn-active-text-inverse-outline-danger: #454545FF; - --pgn-color-btn-active-text-outline-danger: #454545FF; - --pgn-color-btn-active-text-danger: #FFFFFFFF; - --pgn-color-btn-hover-text-warning: #414141FF; - --pgn-color-btn-hover-text-success: #FFFFFFFF; - --pgn-color-btn-hover-text-secondary: #FFFFFFFF; - --pgn-color-btn-hover-text-info: #FFFFFFFF; - --pgn-color-btn-hover-text-danger: #FFFFFFFF; --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,"); + --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,"); + --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,"); + --pgn-other-content-form-control-checkbox-indicator-icon-checked-base: url("data:image/svg+xml,"); + --pgn-other-chip-opacity-disabled: .3; + --pgn-other-carousel-control-opacity-hover: .9; + --pgn-other-carousel-control-opacity-base: .5; + --pgn-other-btn-disabled-opacity: .65; + --pgn-other-form-feedback-tooltip-opacity: .9; + --pgn-elevation-box-shadow-centered-5-2-blur: 3rem; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-2-offset-y: 0rem; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-2-offset-x: 0rem; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-1-blur: 2.5rem; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-1-offset-y: 0rem; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-1-offset-x: 0rem; /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-5-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-4-2-blur: 1.25rem; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-2-offset-y: 0rem; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-2-offset-x: 0rem; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-1-blur: 1.25rem; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-1-offset-y: 0rem; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-1-offset-x: 0rem; /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-4-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-3-2-blur: 1rem; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-2-offset-y: 0rem; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-2-offset-x: 0rem; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-1-blur: 0.625rem; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-1-offset-y: 0rem; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-1-offset-x: 0rem; /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-3-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-2-2-blur: 0.5rem; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-2-offset-y: 0rem; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-2-offset-x: 0rem; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-1-blur: 0.25rem; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-1-offset-y: 0rem; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-1-offset-x: 0rem; /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-2-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-1-2-blur: 0.25rem; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-2-offset-y: 0rem; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-2-offset-x: 0rem; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-1-blur: 0.125rem; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-1-offset-y: 0rem; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-1-offset-x: 0rem; /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-centered-1-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-right-5-2-blur: 3rem; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-2-offset-y: 0rem; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-2-offset-x: 0.5rem; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-1-blur: 2.5rem; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-1-offset-y: 0rem; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-1-offset-x: 1.25rem; /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-5-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-4-2-blur: 1.25rem; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-2-offset-y: 0rem; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-2-offset-x: 0.5rem; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-1-blur: 1.25rem; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-1-offset-y: 0rem; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-1-offset-x: 0.625rem; /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-4-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-3-2-blur: 0.625rem; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-2-offset-y: 0rem; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-2-offset-x: 0.25rem; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-1-blur: 1rem; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-1-offset-y: 0rem; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-1-offset-x: 0.5rem; /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-3-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-2-2-blur: 0.5rem; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-2-offset-y: 0rem; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-2-offset-x: 0.125rem; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-1-blur: 0.25rem; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-1-offset-y: 0rem; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-1-offset-x: 0.125rem; /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-2-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-1-2-blur: 0.25rem; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-2-offset-y: 0rem; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-2-offset-x: 0.0625rem; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-1-blur: 0.125rem; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-1-offset-y: 0rem; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-1-offset-x: 0.0625rem; /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-right-1-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-up-5-2-blur: 3rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-2-offset-y: -0.5rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-2-offset-x: 0rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-1-blur: 2.5rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-1-offset-y: -1.25rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-1-offset-x: 0rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-5-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-4-2-blur: 1.25rem; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-2-offset-y: -0.5rem; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-2-offset-x: 0rem; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-1-blur: 1.25rem; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-1-offset-y: -0.625rem; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-1-offset-x: 0rem; /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-4-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-3-2-blur: 0.625rem; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-2-offset-y: -0.25rem; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-2-offset-x: 0rem; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-1-blur: 1rem; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-1-offset-y: -0.5rem; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-1-offset-x: 0rem; /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-3-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-2-2-blur: 0.5rem; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-2-offset-y: -0.125rem; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-2-offset-x: 0rem; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-1-blur: 0.25rem; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-1-offset-y: -0.125rem; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-1-offset-x: 0rem; /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-2-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-1-2-blur: 0.25rem; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-2-offset-y: -0.0625rem; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-2-offset-x: 0rem; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-1-blur: 0.125rem; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-1-offset-y: -0.0625rem; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-1-offset-x: 0rem; /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-up-1-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-left-5-2-blur: 3rem; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-2-offset-y: 0rem; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-2-offset-x: -0.5rem; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-1-blur: 2.5rem; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-1-offset-y: 0rem; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-1-offset-x: -1.25rem; /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-5-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-4-2-blur: 1.25rem; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-2-offset-y: 0rem; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-2-offset-x: -0.5rem; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-1-blur: 1.25rem; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-1-offset-y: 0rem; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-1-offset-x: -0.625rem; /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-4-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-3-2-blur: 0.625rem; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-2-offset-y: 0rem; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-2-offset-x: -0.25rem; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-1-blur: 1rem; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-1-offset-y: 0rem; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-1-offset-x: -0.5rem; /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-3-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-2-2-blur: 0.5rem; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-2-offset-y: 0rem; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-2-offset-x: -0.125rem; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-1-blur: 0.25rem; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-1-offset-y: 0rem; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-1-offset-x: -0.125rem; /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-2-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-1-2-blur: 0.25rem; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-2-offset-y: 0rem; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-2-offset-x: -0.0625rem; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-1-blur: 0.125rem; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-1-offset-y: 0rem; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-1-offset-x: -0.0625rem; /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-left-1-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 1. */ + --pgn-elevation-box-shadow-down-5-2-blur: 2.5rem; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-2-offset-y: 0.5rem; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-2-offset-x: 0rem; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-1-blur: 2.5rem; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-1-offset-y: 1.25px; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-1-offset-x: 0rem; /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-5-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-4-2-blur: 1.25rem; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-2-offset-y: 0.5rem; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-2-offset-x: 0rem; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-1-blur: 1.25rem; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-1-offset-y: 0.625rem; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-1-offset-x: 0rem; /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-4-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-3-2-blur: 0.625rem; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-2-offset-y: 0.25rem; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-2-offset-x: 0rem; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-1-blur: 1rem; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-1-offset-y: 0.5rem; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-1-offset-x: 0rem; /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-3-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-2-2-blur: 0.5rem; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-2-offset-y: 0.125rem; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-2-offset-x: 0rem; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-1-blur: 0.25rem; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-1-offset-y: 0.125rem; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-1-offset-x: 0rem; /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-2-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-1-2-blur: 0.25rem; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-2-offset-y: 0.0625rem; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-2-offset-x: 0rem; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-1-blur: 0.125rem; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-1-offset-y: 0.0625rem; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-1-offset-x: 0rem; /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-down-1-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-lg-blur: 0.5rem; /* Large box shadow. */ + --pgn-elevation-box-shadow-lg-offset-y: 0.25rem; /* Large box shadow. */ + --pgn-elevation-box-shadow-lg-offset-x: 0rem; /* Large box shadow. */ + --pgn-elevation-box-shadow-lg-color: rgba(0, 0, 0, 0.3); /* Large box shadow. */ + --pgn-elevation-box-shadow-sm-blur: 0.125rem; /* Small box shadow. */ + --pgn-elevation-box-shadow-sm-offset-y: 0.0625rem; /* Small box shadow. */ + --pgn-elevation-box-shadow-sm-offset-x: 0rem; /* Small box shadow. */ + --pgn-elevation-box-shadow-sm-color: rgba(0, 0, 0, 0.2); /* Small box shadow. */ + --pgn-elevation-box-shadow-base-blur: 0.25rem; /* Default box shadow. */ + --pgn-elevation-box-shadow-base-offset-y: 0.125rem; /* Default box shadow. */ + --pgn-elevation-box-shadow-base-offset-x: 0rem; /* Default box shadow. */ + --pgn-elevation-box-shadow-base-color: rgba(0, 0, 0, 0.3); /* Default box shadow. */ + --pgn-elevation-box-shadow-level-5-2-blur: 2.5rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-2-offset-y: 0.5rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-2-offset-x: 0rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-1-blur: 2.5rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-1-offset-y: 1.25px; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-1-offset-x: 0rem; /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-5-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-4-2-blur: 1.25rem; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-2-offset-y: 0.5rem; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-2-offset-x: 0rem; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-1-blur: 1.25rem; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-1-offset-y: 0.625rem; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-1-offset-x: 0rem; /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-4-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-3-2-blur: 1rem; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-2-offset-y: 0rem; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-2-offset-x: 0rem; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-1-blur: 0.625rem; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-1-offset-y: 0rem; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-1-offset-x: 0rem; /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-3-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-2-2-blur: 0.5rem; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-2-offset-y: 0.125rem; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-2-offset-x: 0rem; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-1-blur: 0.25rem; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-1-offset-y: 0.125rem; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-1-offset-x: 0rem; /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-2-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-1-2-blur: 0.25rem; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-2-offset-y: 0.0625rem; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-2-offset-x: 0rem; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-1-blur: 0.125rem; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-1-offset-y: 0.0625rem; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-1-offset-x: 0rem; /* Basic box shadow of level 1. */ + --pgn-elevation-box-shadow-level-1-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 1. */ + --pgn-elevation-input-btn-focus-box-shadow-blur: 0rem; + --pgn-elevation-input-btn-focus-box-shadow-offset-y: 0rem; + --pgn-elevation-input-btn-focus-box-shadow-offset-x: 0rem; + --pgn-elevation-input-btn-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width); + --pgn-elevation-input-btn-focus-box-shadow-color: var(--pgn-color-input-btn-focus); + --pgn-elevation-toast-box-shadow-2-blur: 3rem; + --pgn-elevation-toast-box-shadow-2-offset-y: 0.5rem; + --pgn-elevation-toast-box-shadow-2-offset-x: 0rem; + --pgn-elevation-toast-box-shadow-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-toast-box-shadow-1-blur: 2.5rem; + --pgn-elevation-toast-box-shadow-1-offset-y: 1.25rem; + --pgn-elevation-toast-box-shadow-1-offset-x: 0rem; + --pgn-elevation-toast-box-shadow-1-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-sticky-shadow-bottom-2-blur: 0.625rem; + --pgn-elevation-sticky-shadow-bottom-2-offset-y: 0.25rem; + --pgn-elevation-sticky-shadow-bottom-2-offset-x: 0rem; + --pgn-elevation-sticky-shadow-bottom-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-sticky-shadow-bottom-1-blur: 1rem; + --pgn-elevation-sticky-shadow-bottom-1-offset-y: 0.5rem; + --pgn-elevation-sticky-shadow-bottom-1-offset-x: 0rem; + --pgn-elevation-sticky-shadow-bottom-1-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-sticky-shadow-top-2-blur: 0.625rem; + --pgn-elevation-sticky-shadow-top-2-offset-y: -0.25rem; + --pgn-elevation-sticky-shadow-top-2-offset-x: 0rem; + --pgn-elevation-sticky-shadow-top-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-sticky-shadow-top-1-blur: 1rem; + --pgn-elevation-sticky-shadow-top-1-offset-y: -0.5rem; + --pgn-elevation-sticky-shadow-top-1-offset-x: 0rem; + --pgn-elevation-sticky-shadow-top-1-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-scrollable-body-box-shadow: #0000008C; + --pgn-elevation-progress-bar-box-shadow: none; + --pgn-elevation-pagination-focus-box-shadow-blur: 0rem; + --pgn-elevation-pagination-focus-box-shadow-offset-y: 0rem; + --pgn-elevation-pagination-focus-box-shadow-offset-x: 0rem; + --pgn-elevation-pagination-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width); + --pgn-elevation-pagination-focus-box-shadow-color: var(--pgn-color-input-btn-focus); + --pgn-elevation-menu-box-shadow-blur: 0.25rem; + --pgn-elevation-menu-box-shadow-offset-y: 0.125rem; + --pgn-elevation-menu-box-shadow-offset-x: 0rem; + --pgn-elevation-menu-box-shadow-color: rgba(0, 0, 0, 0.3); + --pgn-elevation-image-thumbnail-box-shadow: none; + --pgn-elevation-icon-button-box-shadow-black-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-black-active: none; + --pgn-elevation-icon-button-box-shadow-black-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-black-inverse-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-black-inverse-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-black-inverse-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-black-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-black-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-black-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-black-base-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-black-base-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-black-base-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-black-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-black-base-color: var(--pgn-color-icon-button-text-black-base); + --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-dark-active: none; + --pgn-elevation-icon-button-box-shadow-dark-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-dark-inverse-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-dark-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-dark-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-dark-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-dark-base-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-dark-base-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-dark-base-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-dark-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-dark-base-color: var(--pgn-color-icon-button-text-dark-base); + --pgn-elevation-icon-button-box-shadow-light-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-light-active: none; + --pgn-elevation-icon-button-box-shadow-light-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-light-inverse-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-light-inverse-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-light-inverse-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-light-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-light-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-light-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-light-base-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-light-base-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-light-base-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-light-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-light-base-color: var(--pgn-color-icon-button-text-light-base); + --pgn-elevation-icon-button-box-shadow-danger-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-danger-active: none; + --pgn-elevation-icon-button-box-shadow-danger-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-danger-inverse-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-danger-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-danger-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-danger-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-danger-base-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-danger-base-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-danger-base-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-danger-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-danger-base-color: var(--pgn-color-icon-button-text-danger-base); + --pgn-elevation-icon-button-box-shadow-warning-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-warning-active: none; + --pgn-elevation-icon-button-box-shadow-warning-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-warning-inverse-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-warning-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-warning-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-warning-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-warning-base-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-warning-base-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-warning-base-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-warning-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-warning-base-color: var(--pgn-color-icon-button-text-warning-base); + --pgn-elevation-icon-button-box-shadow-success-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-success-active: none; + --pgn-elevation-icon-button-box-shadow-success-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-success-inverse-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-success-inverse-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-success-inverse-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-success-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-success-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-success-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-success-base-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-success-base-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-success-base-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-success-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-success-base-color: var(--pgn-color-icon-button-text-success-base); + --pgn-elevation-icon-button-box-shadow-brand-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-brand-active: none; + --pgn-elevation-icon-button-box-shadow-brand-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-brand-inverse-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-brand-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-brand-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-brand-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-brand-base-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-brand-base-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-brand-base-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-brand-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-brand-base-color: var(--pgn-color-icon-button-text-brand-base); + --pgn-elevation-icon-button-box-shadow-secondary-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-secondary-active: none; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-secondary-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-secondary-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-secondary-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-secondary-base-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-secondary-base-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-secondary-base-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-secondary-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-secondary-base-color: var(--pgn-color-icon-button-text-secondary-base); + --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none; + --pgn-elevation-icon-button-box-shadow-primary-active: none; + --pgn-elevation-icon-button-box-shadow-primary-inverse-inset: inset; + --pgn-elevation-icon-button-box-shadow-primary-inverse-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-primary-inverse-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-primary-inverse-color: var(--pgn-color-icon-button-accent); + --pgn-elevation-icon-button-box-shadow-primary-base-inset: inset; + --pgn-elevation-icon-button-box-shadow-primary-base-blur: 0rem; + --pgn-elevation-icon-button-box-shadow-primary-base-offset-y: 0rem; + --pgn-elevation-icon-button-box-shadow-primary-base-offset-x: 0rem; + --pgn-elevation-icon-button-box-shadow-primary-base-spread: var(--pgn-size-btn-focus-width); + --pgn-elevation-icon-button-box-shadow-primary-base-color: var(--pgn-color-icon-button-text-primary-base); + --pgn-elevation-form-control-select-border-focus-blur: 0rem; + --pgn-elevation-form-control-select-border-focus-offset-y: 0rem; + --pgn-elevation-form-control-select-border-focus-offset-x: 0rem; + --pgn-elevation-form-control-select-border-focus-spread: var(--pgn-size-input-btn-focus-width); + --pgn-elevation-form-control-select-border-focus-color: var(--pgn-color-input-btn-focus); + --pgn-elevation-form-control-select-border-base: none; + --pgn-elevation-form-control-file-focus-blur: 0rem; + --pgn-elevation-form-control-file-focus-offset-y: 0rem; + --pgn-elevation-form-control-file-focus-offset-x: 0rem; + --pgn-elevation-form-control-file-focus-spread: 1px; + --pgn-elevation-form-control-file-focus-color: var(--pgn-color-primary-500); + --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base); + --pgn-elevation-form-control-range-thumb-focus-blur: 0.25rem; + --pgn-elevation-form-control-range-thumb-focus-offset-y: 0.1rem; + --pgn-elevation-form-control-range-thumb-focus-offset-x: 0rem; + --pgn-elevation-form-control-range-thumb-focus-spread: 0rem; + --pgn-elevation-form-control-range-thumb-focus-color: var(--pgn-color-body-bg); + --pgn-elevation-form-control-range-thumb-base: none; + --pgn-elevation-form-control-range-track: none; + --pgn-elevation-form-control-checkbox-indicator-indeterminate: none; + --pgn-elevation-form-control-indicator-active: none; + --pgn-elevation-form-control-indicator-checked-focus-blur: 0rem; + --pgn-elevation-form-control-indicator-checked-focus-offset-y: 0rem; + --pgn-elevation-form-control-indicator-checked-focus-offset-x: 0rem; + --pgn-elevation-form-control-indicator-checked-focus-spread: 4px; + --pgn-elevation-form-control-indicator-checked-focus-color: rgba(0, 0, 0, 0.1); + --pgn-elevation-form-control-indicator-checked-base: none; + --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base); + --pgn-elevation-form-input-focus-blur: 0rem; + --pgn-elevation-form-input-focus-offset-y: 0rem; + --pgn-elevation-form-input-focus-offset-x: 0rem; + --pgn-elevation-form-input-focus-spread: 1px; + --pgn-elevation-form-input-focus-color: var(--pgn-color-primary-500); + --pgn-elevation-form-input-base: none; + --pgn-elevation-dropzone-error-inset: inset; + --pgn-elevation-dropzone-error-blur: 0rem; + --pgn-elevation-dropzone-error-offset-y: 0rem; + --pgn-elevation-dropzone-error-offset-x: 0rem; + --pgn-elevation-dropzone-error-spread: 2px; + --pgn-elevation-dropzone-error-color: var(--pgn-color-danger-300); + --pgn-elevation-dropzone-active-inset: inset; + --pgn-elevation-dropzone-active-blur: 0rem; + --pgn-elevation-dropzone-active-offset-y: 0rem; + --pgn-elevation-dropzone-active-offset-x: 0rem; + --pgn-elevation-dropzone-active-spread: 2px; + --pgn-elevation-dropzone-active-color: var(--pgn-color-primary-500); + --pgn-elevation-dropzone-focus-inset: inset; + --pgn-elevation-dropzone-focus-blur: 0rem; + --pgn-elevation-dropzone-focus-offset-y: 0rem; + --pgn-elevation-dropzone-focus-offset-x: 0rem; + --pgn-elevation-dropzone-focus-spread: 2px; + --pgn-elevation-dropzone-focus-color: var(--pgn-color-info-300); + --pgn-elevation-dropzone-hover-inset: inset; + --pgn-elevation-dropzone-hover-blur: 0rem; + --pgn-elevation-dropzone-hover-offset-y: 0rem; + --pgn-elevation-dropzone-hover-offset-x: 0rem; + --pgn-elevation-dropzone-hover-spread: 2px; + --pgn-elevation-dropzone-hover-color: var(--pgn-color-info-300); + --pgn-elevation-data-table-box-shadow-blur: 0.125rem; + --pgn-elevation-data-table-box-shadow-offset-y: 0.0625rem; + --pgn-elevation-data-table-box-shadow-offset-x: 0rem; + --pgn-elevation-data-table-box-shadow-color: rgba(0, 0, 0, 0.2); + --pgn-elevation-code-kbd-box-shadow: none; + --pgn-elevation-close-button-text-shadow-blur: 0rem; + --pgn-elevation-close-button-text-shadow-offset-y: 1px; + --pgn-elevation-close-button-text-shadow-offset-x: 0rem; + --pgn-elevation-close-button-text-shadow-color: var(--pgn-color-white); + --pgn-elevation-btn-box-shadow-active: none; + --pgn-elevation-btn-box-shadow-base: none; + --pgn-elevation-annotation-box-shadow-2-blur: 8px; + --pgn-elevation-annotation-box-shadow-2-offset-y: 2px; + --pgn-elevation-annotation-box-shadow-2-offset-x: 0rem; + --pgn-elevation-annotation-box-shadow-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-annotation-box-shadow-1-blur: 4px; + --pgn-elevation-annotation-box-shadow-1-offset-y: 2px; + --pgn-elevation-annotation-box-shadow-1-offset-x: 0rem; + --pgn-elevation-annotation-box-shadow-1-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-tooltip-box-shadow-2-blur: 8px; + --pgn-elevation-tooltip-box-shadow-2-offset-y: 2px; + --pgn-elevation-tooltip-box-shadow-2-offset-x: 0rem; + --pgn-elevation-tooltip-box-shadow-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-tooltip-box-shadow-1-blur: 4px; + --pgn-elevation-tooltip-box-shadow-1-offset-y: 2px; + --pgn-elevation-tooltip-box-shadow-1-offset-x: 0rem; + --pgn-elevation-tooltip-box-shadow-1-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-popover-box-shadow: none; + --pgn-elevation-modal-content-box-shadow-sm-up-2-blur: 20px; + --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y: 8px; + --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x: 0rem; + --pgn-elevation-modal-content-box-shadow-sm-up-2-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-modal-content-box-shadow-sm-up-1-blur: 20px; + --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y: 10px; + --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x: 0rem; + --pgn-elevation-modal-content-box-shadow-sm-up-1-color: rgba(0, 0, 0, 0.15); + --pgn-elevation-dropdown-box-shadow: none; + --pgn-spacing-input-btn-padding-y: 0.5625rem; + --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y); + --pgn-size-input-btn-focus-width: 1px; + --pgn-size-btn-focus-width: 2px; } diff --git a/styles/scss/core/_typography.scss b/styles/scss/core/_typography.scss index 1bc648d691..03a479a002 100644 --- a/styles/scss/core/_typography.scss +++ b/styles/scss/core/_typography.scss @@ -1,11 +1,23 @@ @import "~bootstrap/scss/type"; @mixin mobile-type { - .display-1, - .display-2, - .display-3, + .display-1 { + font-size: $display1-mobile-size; + line-height: $display-mobile-line-height; + } + + .display-2 { + font-size: $display2-mobile-size; + line-height: $display-mobile-line-height; + } + + .display-3 { + font-size: $display3-mobile-size; + line-height: $display-mobile-line-height; + } + .display-4 { - font-size: $display-mobile-size; + font-size: $display4-mobile-size; line-height: $display-mobile-line-height; } diff --git a/styles/scss/core/_utilities.scss b/styles/scss/core/_utilities.scss index afdb2c671a..9fc1f30765 100644 --- a/styles/scss/core/_utilities.scss +++ b/styles/scss/core/_utilities.scss @@ -21,13 +21,17 @@ $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900; .x-small { - font-size: $x-small-font-size; + font-size: $x-small-font-size !important; } .micro { - font-size: $micro-font-size; + font-size: $micro-font-size !important; font-weight: normal; - line-height: $micro-line-height; + line-height: $micro-line-height !important; +} + +.font-size-normal { + font-size: $font-size-base !important; } .mw-xs { diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss index 5e1f358f1a..64b14a253a 100644 --- a/styles/scss/core/_variables.scss +++ b/styles/scss/core/_variables.scss @@ -652,7 +652,10 @@ $box-shadow-sides: ( ) !default; $box-shadow-sm: var(--pgn-elevation-box-shadow-sm) !default; -$box-shadow: var(--pgn-elevation-box-shadow-base) !default; +$box-shadow: var(--pgn-elevation-box-shadow-base-offset-x) + var(--pgn-elevation-box-shadow-base-offset-y) + var(--pgn-elevation-box-shadow-base-blur) + var(--pgn-elevation-box-shadow-base-color) !default; $box-shadow-lg: var(--pgn-elevation-box-shadow-lg) !default; $component-active-color: var(--pgn-color-active) !default; @@ -703,19 +706,19 @@ $font-weight-bolder: var(--pgn-typography-font-weight-bolder) !default; $font-weight-base: var(--pgn-typography-font-weight-base) !default; $line-height-base: var(--pgn-typography-line-height-base) !default; -$h1-font-size: var(--pgn-typography-font-size-h1) !default; -$h2-font-size: var(--pgn-typography-font-size-h2) !default; -$h3-font-size: var(--pgn-typography-font-size-h3) !default; -$h4-font-size: var(--pgn-typography-font-size-h4) !default; -$h5-font-size: var(--pgn-typography-font-size-h5) !default; -$h6-font-size: var(--pgn-typography-font-size-h6) !default; +$h1-font-size: var(--pgn-typography-font-size-h1-base) !default; +$h2-font-size: var(--pgn-typography-font-size-h2-base) !default; +$h3-font-size: var(--pgn-typography-font-size-h3-base) !default; +$h4-font-size: var(--pgn-typography-font-size-h4-base) !default; +$h5-font-size: var(--pgn-typography-font-size-h5-base) !default; +$h6-font-size: var(--pgn-typography-font-size-h6-base) !default; -$h1-mobile-font-size: var(--pgn-typography-font-size-mobile-h1) !default; -$h2-mobile-font-size: var(--pgn-typography-font-size-mobile-h2) !default; -$h3-mobile-font-size: var(--pgn-typography-font-size-mobile-h3) !default; -$h4-mobile-font-size: var(--pgn-typography-font-size-mobile-h4) !default; -$h5-mobile-font-size: var(--pgn-typography-font-size-mobile-h5) !default; -$h6-mobile-font-size: var(--pgn-typography-font-size-mobile-h6) !default; +$h1-mobile-font-size: var(--pgn-typography-font-size-h1-mobile) !default; +$h2-mobile-font-size: var(--pgn-typography-font-size-h2-mobile) !default; +$h3-mobile-font-size: var(--pgn-typography-font-size-h3-mobile) !default; +$h4-mobile-font-size: var(--pgn-typography-font-size-h4-mobile) !default; +$h5-mobile-font-size: var(--pgn-typography-font-size-h5-mobile) !default; +$h6-mobile-font-size: var(--pgn-typography-font-size-h6-mobile) !default; $headings-margin-bottom: var(--pgn-spacing-headings-margin-bottom) !default; $headings-font-family: var(--pgn-typography-headings-font-family) !default; @@ -723,29 +726,35 @@ $headings-font-weight: var(--pgn-typography-headings-font-weight) !default; $headings-line-height: var(--pgn-typography-headings-line-height) !default; $headings-color: var(--pgn-color-headings-base) !default; -$display1-size: var(--pgn-typography-display-1) !default; -$display2-size: var(--pgn-typography-display-2) !default; -$display3-size: var(--pgn-typography-display-3) !default; -$display4-size: var(--pgn-typography-display-4) !default; +$display1-size: var(--pgn-typography-font-size-display-1) !default; +$display2-size: var(--pgn-typography-font-size-display-2) !default; +$display3-size: var(--pgn-typography-font-size-display-3) !default; +$display4-size: var(--pgn-typography-font-size-display-4) !default; -$display-mobile-size: var(--pgn-typography-display-mobile) !default; +// deprecated in favor of $display1-mobile-size +$display-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default; +$display1-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default; +$display2-mobile-size: var(--pgn-typography-font-size-display-mobile-2) !default; +$display3-mobile-size: var(--pgn-typography-font-size-display-mobile-3) !default; +$display4-mobile-size: var(--pgn-typography-font-size-display-mobile-4) !default; -$display1-weight: var(--pgn-typography-display-weight-1) !default; -$display2-weight: var(--pgn-typography-display-weight-2) !default; -$display3-weight: var(--pgn-typography-display-weight-3) !default; -$display4-weight: var(--pgn-typography-display-weight-4) !default; -$display-line-height: var(--pgn-typography-display-line-height-base) !default; -$display-mobile-line-height: var(--pgn-typography-display-line-height-mobile) !default; +$display1-weight: var(--pgn-typography-font-weight-display-1) !default; +$display2-weight: var(--pgn-typography-font-weight-display-2) !default; +$display3-weight: var(--pgn-typography-font-weight-display-3) !default; +$display4-weight: var(--pgn-typography-font-weight-display-4) !default; -$lead-font-size: var(--pgn-typography-font-size-lead) !default; +$display-line-height: var(--pgn-typography-line-height-display-base) !default; +$display-mobile-line-height: var(--pgn-typography-line-height-display-mobile) !default; + +$lead-font-size: var(--pgn-typography-font-size-lg) !default; $lead-font-weight: var(--pgn-typography-font-weight-lead) !default; -$small-font-size: var(--pgn-typography-font-size-small-base) !default; -$x-small-font-size: var(--pgn-typography-font-size-small-x) !default; +$small-font-size: var(--pgn-typography-font-size-sm) !default; +$x-small-font-size: var(--pgn-typography-font-size-xs) !default; -$micro-font-size: var(--pgn-typography-font-size-micro); -$micro-line-height: var(--pgn-typography-line-height-micro); +$micro-font-size: var(--pgn-typography-font-size-micro) !default; +$micro-line-height: var(--pgn-typography-line-height-micro) !default; $text-muted: var(--pgn-color-text-muted) !default; @@ -801,7 +810,11 @@ $input-btn-line-height: var(--pgn-typography-input-btn-line-height-base) !defaul $input-btn-focus-width: var(--pgn-size-input-btn-focus-width) !default; $input-btn-focus-color: var(--pgn-color-input-btn-focus) !default; -$input-btn-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow) !default; +$input-btn-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow-offset-x) + var(--pgn-elevation-input-btn-focus-box-shadow-offset-y) + var(--pgn-elevation-input-btn-focus-box-shadow-spread) + var(--pgn-elevation-input-btn-focus-box-shadow-color) + var(--pgn-elevation-input-btn-focus-box-shadow-blur) !default; $input-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y) !default; $input-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x) !default; diff --git a/styles/scss/core/core.scss b/styles/scss/core/core.scss index bf494f1da6..924135ca81 100644 --- a/styles/scss/core/core.scss +++ b/styles/scss/core/core.scss @@ -15,6 +15,7 @@ // Paragon core CSS @import "../../css/core/variables"; +@import "../../css/core/abstraction-variables"; @import "../../css/core/custom-media-breakpoints"; // Paragon components diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json index c4ad933cec..dbb41c54b8 100644 --- a/tokens/src/core/alias/size.json +++ b/tokens/src/core/alias/size.json @@ -1,15 +1,36 @@ { "size": { + "$type": "dimension", "border": { - "width": { "value": "1px", "type": "dimension", "source": "$border-width", "description": "Default border width." }, + "width": { + "$value": "1px", + "$description": "Default border width.", + "source": "$border-width" + }, "radius": { - "base": { "value": ".375rem", "type": "dimension", "source": "$border-radius", "description": "Default border radius." }, - "lg": { "value": ".425rem", "type": "dimension", "source": "$border-radius-lg", "description": "Large border radius." }, - "sm": { "value": ".25rem", "type": "dimension", "source": "$border-radius-sm", "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": { "value": "50rem", "type": "dimension", "source": "$rounded-pill", "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 9d5f437371..04ac8aa01d 100644 --- a/tokens/src/core/components/ActionRow.json +++ b/tokens/src/core/components/ActionRow.json @@ -1,9 +1,16 @@ { "spacing": { + "$type": "dimension", "action-row": { "gap": { - "x": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-x" }, - "y": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-y" } + "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 f5913d592f..2d309a7b28 100644 --- a/tokens/src/core/components/Alert.json +++ b/tokens/src/core/components/Alert.json @@ -1,29 +1,64 @@ { "spacing": { + "$type": "dimension", "alert": { "padding": { - "y": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-y" }, - "x": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-x" } + "y": { + "$value": "1.5rem", + "source": "$alert-padding-y" + }, + "x": { + "$value": "1.5rem", + "source": "$alert-padding-x" + } }, - "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$alert-margin-bottom" }, - "actions-gap": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$alert-actions-gap" }, - "icon-space": { "value": ".8rem", "type": "dimension", "source": "$alert-icon-space" } + "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": { "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$alert-link-font-weight" }, - "size": { "value": ".875rem", "type": "dimension", "source": "$alert-font-size" } + "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": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" } + "line-height": { + "$type": "number", + "$value": "1.5rem", + "source": "$alert-line-height" + } } }, "size": { + "$type": "dimension", "alert": { "border": { - "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$alert-border-radius" }, - "width": { "value": "0", "type": "dimension", "source": "$alert-border-width" } + "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 8f3f67ff37..728cac401f 100644 --- a/tokens/src/core/components/Annotation.json +++ b/tokens/src/core/components/Annotation.json @@ -1,25 +1,50 @@ { "spacing": { + "$type": "dimension", "annotation": { - "padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" }, + "padding": { + "$value": ".5rem", + "source": "$annotation-padding" + }, "arrow-side": { - "margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" } + "margin": { + "$value": ".25rem", + "source": "$annotation-arrow-side-margin" + } } } }, "typography": { "annotation": { - "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$annotation-font-size" }, - "line-height": { "value": "{typography.line-height.sm}", "type": "dimension", "source": "$annotation-line-height" } + "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": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" } + "width": { + "$value": ".5rem", + "source": "$annotation-arrow-border-width" + } }, - "max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" }, - "border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" } + "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 c8cdb66d11..fb71335d19 100644 --- a/tokens/src/core/components/Avatar.json +++ b/tokens/src/core/components/Avatar.json @@ -1,16 +1,52 @@ { "size": { "avatar": { - "base": { "value": "3rem", "type": "dimension", "source": "$avatar-size" }, - "xs": { "value": "1.5rem", "type": "dimension", "source": "$avatar-size-xs" }, - "sm": { "value": "2.25rem", "type": "dimension", "source": "$avatar-size-sm" }, - "lg": { "value": "4rem", "type": "dimension", "source": "$avatar-size-lg" }, - "xl": { "value": "6rem", "type": "dimension", "source": "$avatar-size-xl" }, - "xxl": { "value": "11.5rem", "type": "dimension", "source": "$avatar-size-xxl" }, - "huge": { "value": "18.75rem", "type": "dimension", "source": "$avatar-size-huge" }, + "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": { "value": "1px", "type": "dimension", "source": "$avatar-border" }, - "radius": { "value": "100%", "type": "percentage", "source": "$avatar-border-radius" } + "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 ac2e311a28..468c381921 100644 --- a/tokens/src/core/components/AvatarButton.json +++ b/tokens/src/core/components/AvatarButton.json @@ -1,10 +1,20 @@ { "spacing": { + "$type": "dimension", "avatar-button": { "padding-left": { - "base": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left" }, - "sm": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left-sm" }, - "lg": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left-lg" } + "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 921b1f09e0..5964afc473 100644 --- a/tokens/src/core/components/Badge.json +++ b/tokens/src/core/components/Badge.json @@ -1,33 +1,65 @@ { "spacing": { + "$type": "dimension", "badge": { "padding": { "x": { - "base": { "value": ".5rem", "type": "dimension", "source": "$badge-padding-x" }, - "pill": { "value": ".6em", "type": "dimension", "source": "$badge-pill-padding-x" } + "base": { + "$value": ".5rem", + "source": "$badge-padding-x" + }, + "pill": { + "$value": ".6em", + "source": "$badge-pill-padding-x" + } }, - "y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" } + "y": { + "$value": ".125rem", + "source": "$badge-padding-y" + } } } }, "typography": { "badge": { "font": { - "size": { "value": "75%", "type": "percentage", "source": "$badge-font-size" }, - "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$badge-font-weight" } + "size": { + "$type": "percentage", + "$value": "75%", + "source": "$badge-font-size" + }, + "weight": { + "$type": "fontWeight", + "$value": "{typography.font.weight.bold}", + "source": "$badge-font-weight" + } } } }, "size": { + "$type": "dimension", "badge": { "border-radius": { - "base": { "value": ".25rem", "type": "dimension", "source": "$badge-border-radius" }, - "pill": { "value": "10rem", "type": "dimension", "source": "$badge-pill-border-radius" } + "base": { + "$value": ".25rem", + "source": "$badge-border-radius" + }, + "pill": { + "$value": "10rem", + "source": "$badge-pill-border-radius" + } }, - "focus-width": { "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width" } + "focus-width": { + "$value": "{size.input.btn.focus-width}", + "source": "$badge-focus-width" + } } }, "transition": { - "badge": { "value": "none", "type": "transition", "source": "$badge-transition" } + "$type": "transition", + "badge": { + "$value": "none", + "source": "$badge-transition" + } } } diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json index 89b11c9c22..6b394dbfad 100644 --- a/tokens/src/core/components/Breadcrumb.json +++ b/tokens/src/core/components/Breadcrumb.json @@ -1,22 +1,39 @@ { "spacing": { + "$type": "dimension", "breadcrumb": { "margin": { - "left": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-margin-left" } + "left": { + "$value": ".5rem", + "source": "$breadcrumb-margin-left" + } } } }, "size": { + "$type": "dimension", "breadcrumb": { "border": { "radius": { - "focus": { "value": ".125rem", "type": "dimension", "source": "$breadcrumb-focus-border-radius" } + "focus": { + "$value": ".125rem", + "source": "$breadcrumb-focus-border-radius" + } }, "axis": { - "x-focus": { "value": ".25rem", "type": "dimension", "source": "$breadcrumb-border-focus-axis-x" }, - "y-focus": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-border-focus-axis-y" } + "x-focus": { + "$value": ".25rem", + "source": "$breadcrumb-border-focus-axis-x" + }, + "y-focus": { + "$value": ".5rem", + "source": "$breadcrumb-border-focus-axis-y" + } }, - "width-focus": { "value": ".0625rem", "type": "dimension", "source": "$breadcrumb-border-focus-width" } + "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 262200e665..1762e7714d 100644 --- a/tokens/src/core/components/Bubble.json +++ b/tokens/src/core/components/Bubble.json @@ -1,10 +1,17 @@ { "spacing": { + "$type": "dimension", "bubble": { "expandable-padding": { - "y": { "value": "0", "type": "transition", "source": "$bubble-expandable-padding-y" }, - "x": { "value": ".25rem", "type": "transition", "source": "$bubble-expandable-padding-x" } + "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 96fdbadb33..a9333472b8 100644 --- a/tokens/src/core/components/Button/core.json +++ b/tokens/src/core/components/Button/core.json @@ -1,41 +1,54 @@ { "spacing": { + "$type": "dimension", "btn": { "padding": { "y": { "base": { - "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$btn-padding-y" + "$value": "{spacing.input.btn.padding.y}", + "source": "$btn-padding-y" }, "lg": { - "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "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}", "type": "dimension", "source": "$btn-padding-y-sm" + "$value": "{spacing.input.btn.padding.sm.y}", + "source": "$btn-padding-y-sm" } }, "x": { - "base": { "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$btn-padding-x" }, + "base": { + "$value": "{spacing.input.btn.padding.x}", + "source": "$btn-padding-x" + }, "lg": { - "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "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}", "type": "dimension", "source": "$btn-padding-x-sm" + "$value": "{spacing.input.btn.padding.sm.x}", + "source": "$btn-padding-x-sm" } } }, "block": { - "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" } + "spacing-y": { + "$value": ".5rem", + "source": "$btn-block-spacing-y" + } }, "focus": { - "gap": { "value": "{size.btn.focus.width}", "type": "dimension", "source": "$btn-focus-gap" }, + "gap": { + "$value": "{size.btn.focus.width}", + "source": "$btn-focus-gap" + }, "border-gap": { - "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})", - "type": "dimension", + "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})", "source": "$btn-focus-border-gap" }, "distance-to-border": { - "value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})", - "type": "dimension", + "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})", "source": "$btn-focus-distance-to-border" } } @@ -45,61 +58,98 @@ "btn": { "font": { "family": { - "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$btn-font-family" + "$type": "fontFamily", + "$value": "{typography.input.btn.font.family}", + "source": "$btn-font-family" }, "size": { + "$type": "dimension", "base": { - "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$btn-font-size" + "$value": "{typography.input.btn.font.size.base}", + "source": "$btn-font-size" }, "sm": { - "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "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}", "type": "dimension", "source": "$btn-font-size-lg" + "$value": "{typography.input.btn.font.size.lg}", + "source": "$btn-font-size-lg" } }, "weight": { - "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$btn-font-weight" + "$type": "fontWeight", + "$value": "{typography.font.weight.normal}", + "source": "$btn-font-weight" } }, "line-height": { + "$type": "number", "base": { - "value": "{typography.input.btn.line-height.base}", "type": "dimension", "source": "$btn-line-height" + "$value": "{typography.input.btn.line-height.base}", + "source": "$btn-line-height" }, "sm": { - "value": "{typography.input.btn.line-height.sm}", "type": "dimension", "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}", "type": "dimension", "source": "$btn-line-height-lg" + "$value": "{typography.input.btn.line-height.lg}", + "source": "$btn-line-height-lg" } } } }, "size": { + "$type": "dimension", "btn": { "border": { - "width": { "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$btn-border-width" }, + "width": { + "$value": "{size.input.btn.border-width}", + "source": "$btn-border-width" + }, "radius": { - "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$btn-border-radius" }, - "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$btn-border-radius-lg" }, - "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$btn-border-radius-sm" } + "base": { + "$value": "{size.border.radius.base}", + "source": "$btn-border-radius" + }, + "lg": { + "$value": "{size.border.radius.lg}", + "source": "$btn-border-radius-lg" + }, + "sm": { + "$value": "{size.border.radius.sm}", + "source": "$btn-border-radius-sm" + } } }, "focus": { - "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" }, + "width": { + "$value": "2px", + "source": "$btn-focus-width" + }, "border-radius": { "base": { - "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})", - "type": "dimension", + "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})", "source": "$btn-focus-border-radius" }, - "lg": { "value": "{size.btn.focus.border-radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-lg" }, - "sm": { "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-sm" } + "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": { - "btn": { "value": "none", "type": "transition", "source": "$btn-transition" } + "$type": "transition", + "btn": { + "$value": "none", + "source": "$btn-transition" + } } } diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json index 7419bfb6a5..fb1299fb22 100644 --- a/tokens/src/core/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -1,63 +1,127 @@ { "spacing": { + "$type": "dimension", "card": { "spacer": { - "x": { "value": "1.25rem", "type": "dimension", "source": "$card-spacer-x" }, - "y": { "value": ".75rem", "type": "dimension", "source": "$card-spacer-y" } + "x": { + "$value": "1.25rem", + "source": "$card-spacer-x" + }, + "y": { + "$value": ".75rem", + "source": "$card-spacer-y" + } }, "margin": { - "group": { "value": "12px", "type": "dimension", "source": "$card-group-margin" }, - "deck": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-deck-margin" }, - "deck-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-deck-margin-bottom" }, - "grid": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-grid-margin" }, - "grid-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-grid-margin-bottom" } + "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": { "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$card-columns-margin" }, - "count": { "value": "3", "type": "dimension", "source": "$card-columns-count" }, - "gap": { "value": "1.25rem", "type": "dimension", "source": "$card-columns-gap" } + "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": { "value": ".5rem", "type": "dimension", "source": "$card-footer-actions-gap" } + "action-gap": { + "$value": ".5rem", + "source": "$card-footer-actions-gap" + } }, "loading-skeleton": { - "spacer": { "value": ".313rem", "type": "dimension", "source": "$loading-skeleton-spacer" } + "spacer": { + "$value": ".313rem", + "source": "$loading-skeleton-spacer" + } }, "logo": { "left-offset": { - "base": { "value": "1.5rem", "type": "dimension", "source": "$card-logo-left-offset" }, - "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-left-offset-horizontal" } + "base": { + "$value": "1.5rem", + "source": "$card-logo-left-offset" + }, + "horizontal": { + "$value": ".4375rem", + "source": "$card-logo-left-offset-horizontal" + } }, "bottom-offset": { - "base": { "value": "1rem", "type": "dimension", "source": "$card-logo-bottom-offset" }, - "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-bottom-offset-horizontal" } + "base": { + "$value": "1rem", + "source": "$card-logo-bottom-offset" + }, + "horizontal": { + "$value": ".4375rem", + "source": "$card-logo-bottom-offset-horizontal" + } } }, "focus": { - "border-offset": { "value": "5px", "type": "dimension", "source": "$card-focus-border-offset" } + "border-offset": { + "$value": "5px", + "source": "$card-focus-border-offset" + } } } }, "size": { + "$type": "dimension", "card": { "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$card-border-width" }, + "width": { + "$value": "{size.border.width}", + "source": "$card-border-width" + }, "radius": { - "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$card-border-radius" }, - "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" }, + "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})", - "type": "dimension", + "$value": "calc({size.card.border.radius.base} - {size.card.border.width})", "source": "$card-inner-border-radius" } } }, "focus": { "border": { - "width": { "value": "2px", "type": "dimension", "source": "$card-focus-border-width" }, + "width": { + "$value": "2px", + "source": "$card-focus-border-width" + }, "radius": { - "value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})", - "type": "dimension", + "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})", "source": "$card-focus-border-radius" } } @@ -65,30 +129,46 @@ "image": { "horizontal": { "width": { - "max": { "value": "240px", "type": "dimension", "source": "$card-image-horizontal-max-width" }, + "max": { + "$value": "240px", + "source": "$card-image-horizontal-max-width" + }, "min": { - "value": "{size.card.image.horizontal.width.max}", - "type": "dimension", + "$value": "{size.card.image.horizontal.width.max}", "source": "$card-image-horizontal-min-width" } } }, "vertical": { - "max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" } + "max-height": { + "$value": "140px", + "source": "$card-image-vertical-max-height" + } }, - "border-radius": { "value": "{size.card.border.radius.base}", "type": "dimension", "source": "$card-image-border-radius" } + "border-radius": { + "$value": "{size.card.border.radius.base}", + "source": "$card-image-border-radius" + } }, "logo": { - "width": { "value": "7.25rem", "type": "dimension", "source": "$card-logo-width" }, - "height": { "value": "4.125rem", "type": "dimension", "source": "$card-logo-height" } + "width": { + "$value": "7.25rem", + "source": "$card-logo-width" + }, + "height": { + "$value": "4.125rem", + "source": "$card-logo-height" + } } } }, "typography": { + "$type": "dimension", "footer": { "text": { "font-size": { - "value": "{typography.font.size.small.x}", "type": "dimension", "source": "$card-footer-text-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 26343bc957..a2ffd739c8 100644 --- a/tokens/src/core/components/Carousel.json +++ b/tokens/src/core/components/Carousel.json @@ -3,35 +3,89 @@ "carousel": { "control": { "width": { - "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" }, - "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" } + "base": { + "$type": "percentage", + "$value": "15%", + "source": "$carousel-control-width" + }, + "icon": { + "$type": "dimension", + "$value": "20px", + "source": "$carousel-control-icon-width" + } } }, "indicator": { - "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" }, + "$type": "dimension", + "width": { + "$value": "30px", + "source": "$carousel-indicator-width" + }, "height": { - "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" }, - "area-hit": { "value": "10px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" } + "base": { + "$value": "3px", + "source": "$carousel-indicator-height" + }, + "area-hit": { + "$value": "10px", + "source": "$carousel-indicator-hit-area-height" + } } }, - "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" } + "caption-width": { + "$type": "percentage", + "$value": "70%", + "source": "$carousel-caption-width" + } } }, "spacing": { + "$type": "dimension", "carousel": { - "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" } + "indicator-spacer": { + "$value": "3px", + "source": "$carousel-indicator-spacer" + } } }, "transition": { + "$type": "transition", "carousel": { "base": { - "value": "transform {transition.carousel.duration} ease-in-out", - "type": "transition", + "$value": { + "property": "transform", + "duration": "{transition.carousel.duration}", + "timingFunction": "ease-in-out", + "delay": "0ms", + "behavior": "normal" + }, "source": "$carousel-transition" }, - "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" }, - "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" }, - "control": { "value": "opacity .15s ease", "type": "transition", "source": "$carousel-control-transition" } + "duration": { + "$type": "duration", + "$value": ".6s", + "source": "$carousel-transition-duration" + }, + "indicator": { + "$value": { + "property": "opacity", + "duration": "{transition.carousel.duration}", + "timingFunction": "ease", + "delay": "0ms", + "behavior": "normal" + }, + "source": "$carousel-indicator-transition" + }, + "control": { + "$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 d22606c1dd..c0a685f33b 100644 --- a/tokens/src/core/components/Chip.json +++ b/tokens/src/core/components/Chip.json @@ -1,41 +1,66 @@ { "spacing": { + "$type": "dimension", "chip": { "margin": { "base": { - "value": ".125rem", "type": "dimension", "source": "$chip-margin" + "$value": ".125rem", + "source": "$chip-margin" }, - "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-margin" } + "icon": { + "$value": ".25rem", + "source": "$chip-icon-margin" + } }, "padding": { - "y": { "value": "1px", "type": "dimension", "source": "$chip-padding-y" }, - "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" } + "y": { + "$value": "1px", + "source": "$chip-padding-y" + }, + "x": { + "$value": ".5rem", + "source": "$chip-padding-x" + } }, "outline": { "selected-distance": { "light": { - "value": "3px", "type": "dimension", "source": "$chip-light-selected-outline-distance" + "$value": "3px", + "source": "$chip-light-selected-outline-distance" }, "dark": { - "value": "3px", "type": "dimension", "source": "$chip-dark-selected-outline-distance" + "$value": "3px", + "source": "$chip-dark-selected-outline-distance" } }, "focus-distance": { "light": { - "value": ".313rem", "type": "dimension", "source": "$chip-light-focus-outline-distance" + "$value": ".313rem", + "source": "$chip-light-focus-outline-distance" }, "dark": { - "value": ".313rem", "type": "dimension", "source": "$chip-dark-focus-outline-distance" + "$value": ".313rem", + "source": "$chip-dark-focus-outline-distance" } }, - "width": { "value": "3px", "type": "dimension", "source": "$chip-outline-width" } + "width": { + "$value": "3px", + "source": "$chip-outline-width" + } } } }, "size": { + "$type": "dimension", "chip": { - "border-radius": { "value": ".375rem", "type": "dimension", "source": "$chip-border-radius" }, - "icon": { "value": "1.5rem", "type": "dimension", "source": "$chip-icon-size" } + "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 597fd925d0..f1af5afeae 100644 --- a/tokens/src/core/components/ChipCarousel.json +++ b/tokens/src/core/components/ChipCarousel.json @@ -1,13 +1,21 @@ { "spacing": { + "$type": "dimension", "chip-carousel": { "controls-top-offset": { - "value": ".375rem", "type": "dimension", "source": "$chip-carousel-controls-top-offset" + "$value": ".375rem", + "source": "$chip-carousel-controls-top-offset" }, "container": { "padding": { - "x": { "value": ".625rem", "type": "dimension", "source": "$chip-carousel-container-padding-x" }, - "y": { "value": ".313rem", "type": "dimension", "source": "$chip-carousel-container-padding-y" } + "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 4e7eb8f879..12277a1df2 100644 --- a/tokens/src/core/components/CloseButton.json +++ b/tokens/src/core/components/CloseButton.json @@ -3,10 +3,14 @@ "close-button": { "font": { "size": { - "value": "calc({typography.font.size.base} * 1.5)", "type": "dimension", "source": "$close-font-size" + "$type": "dimension", + "$value": "calc({typography.font.size.base} * 1.5)", + "source": "$close-font-size" }, "weight": { - "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$close-font-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 b8ae8bac6c..6fc1ac5b1f 100644 --- a/tokens/src/core/components/Code.json +++ b/tokens/src/core/components/Code.json @@ -1,32 +1,53 @@ { "typography": { "code": { - "font-size": { "value": "87.5%", "type": "percentage", "source": "$code-font-size" }, + "font-size": { + "$type": "percentage", + "$value": "{typography.font.size.sm}", + "source": "$code-font-size" + }, "kbd": { - "font-size": { "value": "{typography.code.font-size}", "type": "dimension", "source": "$kbd-font-size" }, + "font-size": { + "$type": "dimension", + "$value": "{typography.code.font-size}", + "source": "$kbd-font-size" + }, "nested": { + "$type": "fontWeight", "font-weight": { - "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$nested-kbd-font-weight" + "$value": "{typography.font.weight.bold}", + "source": "$nested-kbd-font-weight" } } } } }, "spacing": { + "$type": "dimension", "code": { "kbd": { "padding": { - "y": { "value": ".2rem", "type": "dimension", "source": "$kbd-padding-y" }, - "x": { "value": ".4rem", "type": "dimension", "source": "$kbd-padding-x" } + "y": { + "$value": ".2rem", + "source": "$kbd-padding-y" + }, + "x": { + "$value": ".4rem", + "source": "$kbd-padding-x" + } } } } }, "size": { + "$type": "dimension", "code": { "pre": { "scrollable": { - "max-height": { "value": "340px", "type": "dimension", "source": "$pre-scrollable-max-height" } + "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 924347154c..239bb8c2b8 100644 --- a/tokens/src/core/components/Collapsible.json +++ b/tokens/src/core/components/Collapsible.json @@ -1,26 +1,50 @@ { "spacing": { + "$type": "dimension", "collapsible": { "card": { "spacer": { "y": { - "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-y" }, + "base": { + "$value": ".5rem", + "source": "$collapsible-card-spacer-y" + }, "lg": { - "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$collapsible-card-spacer-y-lg" + "$value": "{spacing.card.spacer.y}", + "source": "$collapsible-card-spacer-y-lg" } }, "x": { - "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-x" }, + "base": { + "$value": ".5rem", + "source": "$collapsible-card-spacer-x" + }, "lg": { - "value": "{spacing.card.spacer.x}", "type": "dimension", "source": "$collapsible-card-spacer-x-lg" + "$value": "{spacing.card.spacer.x}", + "source": "$collapsible-card-spacer-x-lg" } }, - "left-body": { "value": ".75rem", "type": "dimension", "source": "$collapsible-card-body-spacer-left" }, - "icon": { "value": "2.5rem", "type": "dimension", "source": "$collapsible-card-spacer-icon" }, + "left-body": { + "$value": ".75rem", + "source": "$collapsible-card-body-spacer-left" + }, + "icon": { + "$value": "2.5rem", + "source": "$collapsible-card-spacer-icon" + }, "basic": { - "y": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-y" }, - "x": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-x" }, - "icon": { "value": ".625rem", "type": "dimension", "source": "$collapsible-basic-spacer-icon" } + "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 2dd4803426..8a6cbbe471 100644 --- a/tokens/src/core/components/ColorPicker.json +++ b/tokens/src/core/components/ColorPicker.json @@ -1,8 +1,15 @@ { "size": { + "$type": "dimension", "color-picker": { - "sm": { "value": "2rem", "type": "dimension", "source": "$picker-size-sm" }, - "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "type": "dimension", "source": "$picker-size-md" } + "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 4f9b676d6a..a760172e2b 100644 --- a/tokens/src/core/components/Container.json +++ b/tokens/src/core/components/Container.json @@ -1,12 +1,28 @@ { "size": { + "$type": "dimension", "container": { "max-width": { - "xs": { "value": "464px", "type": "dimension", "source": "$max-width-xs" }, - "sm": { "value": "708px", "type": "dimension", "source": "$max-width-sm" }, - "md": { "value": "952px", "type": "dimension", "source": "$max-width-md" }, - "lg": { "value": "1192px", "type": "dimension", "source": "$max-width-lg" }, - "xl": { "value": "1440px", "type": "dimension", "source": "$max-width-xl" } + "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 9c6ba9cea6..b95a910d93 100644 --- a/tokens/src/core/components/DataTable.json +++ b/tokens/src/core/components/DataTable.json @@ -1,27 +1,60 @@ { "size": { + "$type": "dimension", "data-table": { - "border": { "value": "2px", "type": "dimension", "source": "$data-table-border" }, + "border": { + "$value": "2px", + "source": "$data-table-border" + }, "dropdown": { "pagination": { - "max-height": { "value": "60vh", "type": "dimension", "source": "$data-table-pagination-dropdown-max-height" }, - "min-width": { "value": "6rem", "type": "dimension", "source": "$data-table-pagination-dropdown-min-width" } + "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": { "value": "12rem", "type": "dimension", "source": "$data-table-layout-sidebar-width" } + "sidebar-width": { + "$value": "12rem", + "source": "$data-table-layout-sidebar-width" + } } } }, "spacing": { "data-table": { "padding": { - "x": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-x" }, - "y": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-y" }, - "small": { "value": ".5rem", "type": "dimension", "source": "$data-table-padding-small" }, - "cell": { "value": ".5rem .75rem", "type": "dimension", "source": "$data-table-cell-padding" } + "$type": "dimension", + "x": { + "$value": ".75rem", + "source": "$data-table-padding-x" + }, + "y": { + "$value": ".75rem", + "source": "$data-table-padding-y" + }, + "small": { + "$value": ".5rem", + "source": "$data-table-padding-small" + }, + "cell": { + "$value": { + "x": ".5rem", + "y": ".75rem" + }, + "source": "$data-table-cell-padding" + } }, - "footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-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 02e15914c2..50742875b9 100644 --- a/tokens/src/core/components/Dropdown.json +++ b/tokens/src/core/components/Dropdown.json @@ -2,27 +2,37 @@ "typography": { "dropdown": { "font-size": { - "value": "{typography.font.size.base}", "type": "dimension", "source": "$dropdown-font-size" + "$type": "dimension", + "$value": "{typography.font.size.base}", + "source": "$dropdown-font-size" }, "item": { + "$type": "textDecoration", "text-decoration": { - "value": "none", "type": "textDecoration" + "$value": "none" } } } }, "size": { + "$type": "dimension", "dropdown": { - "min-width": { "value": "18rem", "type": "dimension", "source": "$dropdown-min-width" }, + "min-width": { + "$value": "18rem", + "source": "$dropdown-min-width" + }, "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$dropdown-border-width" }, + "width": { + "$value": "{size.border.width}", + "source": "$dropdown-border-width" + }, "radius": { "base": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$dropdown-border-radius" + "$value": "{size.border.radius.base}", + "source": "$dropdown-border-radius" }, "inner": { - "value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})", - "type": "dimension", + "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})", "source": "$dropdown-inner-border-radius" } } @@ -30,38 +40,62 @@ } }, "spacing": { + "$type": "dimension", "dropdown": { - "spacer": { "value": ".125rem", "type": "dimension", "source": "$dropdown-spacer" }, + "spacer": { + "$value": ".125rem", + "source": "$dropdown-spacer" + }, "padding": { "x": { - "base": { "value": "0", "type": "dimension", "source": "$dropdown-padding-x" }, - "item": { "value": "1rem", "type": "dimension", "source": "$dropdown-item-padding-x" } + "base": { + "$value": "0", + "source": "$dropdown-padding-x" + }, + "item": { + "$value": "1rem", + "source": "$dropdown-item-padding-x" + } }, "y": { - "base": { "value": ".5rem", "type": "dimension", "source": "$dropdown-padding-y" }, - "item": { "value": ".25rem", "type": "dimension", "source": "$dropdown-item-padding-y" } + "base": { + "$value": ".5rem", + "source": "$dropdown-padding-y" + }, + "item": { + "$value": ".25rem", + "source": "$dropdown-item-padding-y" + } }, "header": { - "value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}", - "type": "dimension", + "$value": { + "x": "{spacing.dropdown.padding.x.item}", + "y": ".5rem" + }, "source": "$dropdown-header-padding" } }, "divider": { "margin-y": { - "value": "calc({spacing.spacer.base} / 2)", - "type": "dimension", + "$value": "calc({spacing.spacer.base} / 2)", "source": "$dropdown-divider-margin-y" } }, "close-container": { - "top": { "value": ".625rem", "type": "dimension", "source": "$modal-close-container-top" } + "top": { + "$value": ".625rem", + "source": "$modal-close-container-top" + } } } }, "elevation": { + "$type": "ratio", "dropdown": { - "zindex": { "value": "1000", "type": "ratio", "source": "$zindex-dropdown" } + "zindex": { + "$value": "1000", + "source": "$zindex-dropdown" + } } } } diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json index 6217177202..63a433b9f1 100644 --- a/tokens/src/core/components/Dropzone.json +++ b/tokens/src/core/components/Dropzone.json @@ -1,20 +1,27 @@ { "typography": { + "$type": "dimension", "dropzone": { "restriction-msg": { "font-size": { - "value": "{typography.font.size.small.x}", - "type": "dimension", + "$value": "{typography.font.size.xs}", "source": "$dropzone-restriction-msg-font-size" } } } }, "spacing": { + "$type": "dimension", "dropzone": { - "padding": { "value": "1.5rem", "type": "dimension", "source": "$dropzone-padding" }, + "padding": { + "$value": "1.5rem", + "source": "$dropzone-padding" + }, "border": { - "base": { "value": "1px", "type": "dimension", "source": "$dropzone-border-default" } + "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 fbae55b536..8c1ef8fb32 100644 --- a/tokens/src/core/components/Form/other.json +++ b/tokens/src/core/components/Form/other.json @@ -2,11 +2,24 @@ "other": { "form": { "control": { - "cursor": { "value": "auto", "type": "cursorStyle", "source": "$custom-control-cursor" }, - "range-track-cursor": { "value": "pointer", "type": "cursorStyle", "source": "$custom-range-track-cursor" }, + "cursor": { + "$type": "cursorStyle", + "$value": "auto", + "source": "$custom-control-cursor" + }, + "range-track-cursor": { + "$type": "cursorStyle", + "$value": "pointer", + "source": "$custom-range-track-cursor" + }, "custom-file": { - "lang": { "value": "en", "type": "text" }, - "content": { "value": "Browse", "type": "text" } + "$type": "text", + "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 695bfd149a..c90aea3a6f 100644 --- a/tokens/src/core/components/Form/size.json +++ b/tokens/src/core/components/Form/size.json @@ -2,223 +2,300 @@ "size": { "form": { "input": { + "$type": "dimension", "height": { "base": { - "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})", - "type": "dimension", + "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})", "source": "$input-height" }, "sm": { - "value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})", - "type": "dimension", + "$value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})", "source": "$input-height-sm" }, "lg": { - "value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})", - "type": "dimension", + "$value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})", "source": "$input-height-lg" }, "inner": { "base": { - "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", - "type": "dimension", + "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", "source": "$input-height-inner" }, "half": { - "value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})", - "type": "dimension", + "$value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})", "source": "$input-height-inner-half" }, "quarter": { - "value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))", - "type": "dimension", + "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))", "source": "$input-height-inner-quarter" } }, "border": { - "value": "calc({size.form.input.width.border} * 2)", - "type": "dimension", + "$value": "calc({size.form.input.width.border} * 2)", "source": "$input-height-border" } }, "width": { - "hover": { "value": "0.063rem", "type": "dimension", "source": "$input-hover-width" }, - "focus": { "value": "0.063rem", "type": "dimension", "source": "$input-focus-width" }, + "hover": { + "$value": "0.063rem", + "source": "$input-hover-width" + }, + "focus": { + "$value": "0.063rem", + "source": "$input-focus-width" + }, "border": { - "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$input-border-width" + "$value": "{size.input.btn.border-width}", + "source": "$input-border-width" } }, "radius": { "border": { - "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$input-border-radius" }, - "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$input-border-radius-lg" }, - "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$input-border-radius-sm" } + "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": { "value": "1.25rem", "type": "dimension", "source": "$custom-control-indicator-size" }, - "bg": { "value": "100%", "type": "percentage", "source": "$custom-control-indicator-bg-size" }, + "base": { + "$type": "dimension", + "$value": "1.25rem", + "source": "$custom-control-indicator-size" + }, + "bg": { + "$type": "percentage", + "$value": "100%", + "source": "$custom-control-indicator-bg-size" + }, "border": { - "width": { "value": "0.125rem", "type": "dimension", "source": "$custom-control-indicator-border-width" } + "$type": "dimension", + "width": { + "$value": "0.125rem", + "source": "$custom-control-indicator-border-width" + } } }, "switch": { + "$type": "dimension", "width": { - "value": "calc({size.form.control.indicator.base} * 1.75)", - "type": "dimension", + "$value": "calc({size.form.control.indicator.base} * 1.75)", "source": "$custom-switch-width" }, "indicator": { "base": { - "value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)", - "type": "dimension", + "$value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)", "source": "$custom-switch-indicator-size" }, "border": { "radius": { - "value": "calc({size.form.control.indicator.base} / 2)", - "type": "dimension", + "$value": "calc({size.form.control.indicator.base} / 2)", "source": "$custom-switch-indicator-border-radius" } } } }, "select": { + "$type": "dimension", "height": { "base": { - "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-select-height" + "$value": "{size.form.input.height.base}", + "source": "$custom-select-height" }, "lg": { - "value": "{size.form.input.height.lg}", "type": "dimension", "source": "$custom-select-height-lg" + "$value": "{size.form.input.height.lg}", + "source": "$custom-select-height-lg" }, "sm": { - "value": "{size.form.input.height.sm}", "type": "dimension", "source": "$custom-select-height-sm" + "$value": "{size.form.input.height.sm}", + "source": "$custom-select-height-sm" } }, "feedback": { "icon": { - "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}", - "type": "dimension", + "$value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}", "source": "$custom-select-feedback-icon-size" } }, "border": { "width": { "base": { - "value": "{size.form.input.width.border}", - "type": "dimension", + "$value": "{size.form.input.width.border}", "source": "$custom-select-border-width" } }, "radius": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$custom-select-border-radius" + "$value": "{size.border.radius.base}", + "source": "$custom-select-border-radius" } } }, "range": { "track": { - "width": { "value": "100%", "type": "percentage", "source": "$custom-range-track-width" }, - "height": { "value": ".5rem", "type": "dimension", "source": "$custom-range-track-height" }, + "width": { + "$type": "percentage", + "$value": "100%", + "source": "$custom-range-track-width" + }, + "height": { + "$type": "dimension", + "$value": ".5rem", + "source": "$custom-range-track-height" + }, "border": { - "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-track-border-radius" } + "$type": "dimension", + "radius": { + "$value": "1rem", + "source": "$custom-range-track-border-radius" + } } }, "thumb": { - "width": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-width" }, + "$type": "dimension", + "width": { + "$value": "1rem", + "source": "$custom-range-thumb-width" + }, "height": { - "value": "{size.form.control.range.thumb.width}", - "type": "dimension", + "$value": "{size.form.control.range.thumb.width}", "source": "$custom-range-thumb-height" }, "border": { - "base": { "value": "0", "type": "dimension", "source": "$custom-range-thumb-border" }, - "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-border-radius" } + "base": { + "$value": "0", + "source": "$custom-range-thumb-border" + }, + "radius": { + "$value": "1rem", + "source": "$custom-range-thumb-border-radius" + } }, "focus": { "width": { - "value": "{size.form.input.width.focus}", - "type": "dimension", + "$value": "{size.form.input.width.focus}", "source": "$custom-range-thumb-focus-box-shadow-width" } } } }, "file": { + "$type": "dimension", "width": { - "value": "{size.form.input.width.border}", "type": "dimension", "source": "$custom-file-border-width" + "$value": "{size.form.input.width.border}", + "source": "$custom-file-border-width" }, "height": { "base": { - "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-file-height" + "$value": "{size.form.input.height.base}", + "source": "$custom-file-height" }, "inner": { - "value": "{size.form.input.height.inner.base}", - "type": "dimension", + "$value": "{size.form.input.height.inner.base}", "source": "$custom-file-height-inner" } }, "border": { "radius": { - "value": "{size.form.input.radius.border.base}", - "type": "dimension", + "$value": "{size.form.input.radius.border.base}", "source": "$custom-file-border-radius" } } }, "icon": { - "width": { "value": "2rem", "type": "dimension", "source": "$form-control-icon-width" } + "$type": "dimension", + "width": { + "$value": "2rem", + "source": "$form-control-icon-width" + } }, "border": { "checkbox": { + "$type": "dimension", "indicator": { - "radius": { "value": "0", "type": "dimension", "source": "$custom-checkbox-indicator-border-radius" } + "radius": { + "$value": "0", + "source": "$custom-checkbox-indicator-border-radius" + } } }, "radio": { + "$type": "percentage", "indicator": { - "radius": { "value": "50%", "type": "percentage", "source": "$custom-radio-indicator-border-radius" } + "radius": { + "$value": "50%", + "source": "$custom-radio-indicator-border-radius" + } } } } }, "grid": { - "gutter-width": { "value": "0.625rem", "type": "dimension", "source": "$form-grid-gutter-width" } + "$type": "dimension", + "gutter-width": { + "$value": "0.625rem", + "source": "$form-grid-gutter-width" + } }, "autosuggest": { + "$type": "dimension", "icon": { - "width": { "value": "2.4rem", "type": "dimension", "source": "$form-autosuggest-icon-width" }, + "width": { + "$value": "2.4rem", + "source": "$form-autosuggest-icon-width" + }, "height": { - "value": "{size.form.autosuggest.icon.width}", "type": "dimension", "source": "$form-autosuggest-icon-height" + "$value": "{size.form.autosuggest.icon.width}", + "source": "$form-autosuggest-icon-height" } }, "spinner": { - "width": { "value": "1.25rem", "type": "dimension", "source": "$form-autosuggest-spinner-width" }, + "width": { + "$value": "1.25rem", + "source": "$form-autosuggest-spinner-width" + }, "height": { - "value": "{size.form.autosuggest.spinner.width}", - "type": "dimension", + "$value": "{size.form.autosuggest.spinner.width}", "source": "$form-autosuggest-spinner-height" } }, "border": { - "width": { "value": ".125rem", "type": "dimension", "source": "$form-autosuggest-border-width" } + "width": { + "$value": ".125rem", + "source": "$form-autosuggest-border-width" + } } }, "border": { + "$type": "dimension", "radius": { "check": { - "focus": { "value": ".0625rem", "type": "dimension", "source": "$form-check-focus-border-radius" } + "focus": { + "$value": ".0625rem", + "source": "$form-check-focus-border-radius" + } }, - "width": { "value": ".125rem", "type": "dimension", "source": "$form-check-border-width" } + "width": { + "$value": ".125rem", + "source": "$form-check-border-width" + } } }, "feedback": { + "$type": "dimension", "tooltip": { "border": { "radius": { - "value": "{size.border.radius.base}", - "type": "dimension", + "$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 207ceab897..059bc97fc0 100644 --- a/tokens/src/core/components/Form/spacing.json +++ b/tokens/src/core/components/Form/spacing.json @@ -1,150 +1,193 @@ { "spacing": { + "$type": "dimension", "form": { "input": { "padding": { "y": { "base": { - "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$input-padding-y" + "$value": "{spacing.input.btn.padding.y}", + "source": "$input-padding-y" }, "sm": { - "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "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}", "type": "dimension", "source": "$input-padding-y-lg" + "$value": "{spacing.input.btn.padding.lg.y}", + "source": "$input-padding-y-lg" } }, "x": { "base": { - "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$input-padding-x" + "$value": "{spacing.input.btn.padding.x}", + "source": "$input-padding-x" }, "sm": { - "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "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}", "type": "dimension", "source": "$input-padding-x-lg" + "$value": "{spacing.input.btn.padding.lg.x}", + "source": "$input-padding-x-lg" } } }, "check": { - "gutter" : { "value": "1.25rem", "type": "dimension", "source": "$form-check-input-gutter" }, + "gutter": { + "$value": "1.25rem", + "source": "$form-check-input-gutter" + }, "margin": { "x": { - "base": { "value": ".25rem", "type": "dimension", "source": "$form-check-input-margin-x" }, - "inline": { "value": ".3125rem", "type": "dimension", "source": "$form-check-inline-input-margin-x" } + "base": { + "$value": ".25rem", + "source": "$form-check-input-margin-x" + }, + "inline": { + "$value": ".3125rem", + "source": "$form-check-inline-input-margin-x" + } }, - "y": { "value": ".3rem", "type": "dimension", "source": "$form-check-input-margin-y" } + "y": { + "$value": ".3rem", + "source": "$form-check-input-margin-y" + } } } }, "text": { "margin": { - "top": { "value": ".25rem", "type": "dimension", "source": "$form-text-margin-top" } + "top": { + "$value": ".25rem", + "source": "$form-text-margin-top" + } } }, "check": { "inline": { "margin": { - "x": { "value": ".75rem", "type": "dimension", "source": "$form-check-inline-margin-x" } + "x": { + "$value": ".75rem", + "source": "$form-check-inline-margin-x" + } } }, "position": { - "axis": { "value": ".375rem", "type": "dimension", "source": "$form-check-position-axis" } + "axis": { + "$value": ".375rem", + "source": "$form-check-position-axis" + } } }, "group": { "margin": { - "bottom": { "value": "1rem", "type": "dimension", "source": "$form-group-margin-bottom" } + "bottom": { + "$value": "1rem", + "source": "$form-group-margin-bottom" + } } }, "control": { - "gutter": { "value": ".5rem", "type": "dimension", "source": "$custom-control-gutter" }, + "gutter": { + "$value": ".5rem", + "source": "$custom-control-gutter" + }, "spacer": { - "x": { "value": "1rem", "type": "dimension", "source": "$custom-control-spacer-x" } + "x": { + "$value": "1rem", + "source": "$custom-control-spacer-x" + } }, "select": { "padding": { "y": { "base": { - "value": "{spacing.form.input.padding.y.base}", - "type": "dimension", + "$value": "{spacing.form.input.padding.y.base}", "source": "$custom-select-padding-y" }, "sm": { - "value": "{spacing.form.input.padding.y.sm}", - "type": "dimension", + "$value": "{spacing.form.input.padding.y.sm}", "source": "$custom-select-padding-y-sm" }, "lg": { - "value": "{spacing.form.input.padding.y.lg}", - "type": "dimension", + "$value": "{spacing.form.input.padding.y.lg}", "source": "$custom-select-padding-y-lg" } }, "x": { "base": { - "value": "{spacing.form.input.padding.x.base}", - "type": "dimension", + "$value": "{spacing.form.input.padding.x.base}", "source": "$custom-select-padding-x" }, "sm": { - "value": "{spacing.form.input.padding.x.sm}", - "type": "dimension", + "$value": "{spacing.form.input.padding.x.sm}", "source": "$custom-select-padding-x-sm" }, "lg": { - "value": "{spacing.form.input.padding.x.lg}", - "type": "dimension", + "$value": "{spacing.form.input.padding.x.lg}", "source": "$custom-select-padding-x-lg" } } }, "indicator": { - "padding": { "value": "1rem", "type": "dimension", "source": "$custom-select-indicator-padding" } + "padding": { + "$value": "1rem", + "source": "$custom-select-indicator-padding" + } }, "feedback": { "icon": { "padding": { "right": { - "value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})", - "type": "dimension", + "$value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})", "source": "$custom-select-feedback-icon-padding-right" } }, "position": { - "value": "center right calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})", - "type": "dimension", + "$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": { - "value": "{spacing.form.text.margin.top}", - "type": "dimension", + "$value": "{spacing.form.text.margin.top}", "source": "$form-feedback-margin-top" } }, "tooltip": { "padding": { - "y": { "value": ".25rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-y" }, - "x": { "value": ".5rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-x" } + "y": { + "$value": ".25rem", + "source": "$form-feedback-tooltip-padding-y" + }, + "x": { + "$value": ".5rem", + "source": "$form-feedback-tooltip-padding-x" + } } } }, "icon": { - "padding": { "value": ".5625rem", "type": "dimension", "source": "$select-icon-padding" } + "padding": { + "$value": ".5625rem", + "source": "$select-icon-padding" + } } }, "file": { "padding": { "y": { - "value": "{spacing.form.input.padding.y.base}", - "type": "dimension", + "$value": "{spacing.form.input.padding.y.base}", "source": "$custom-file-padding-y" }, "x": { - "value": "{spacing.form.input.padding.x.base}", - "type": "dimension", + "$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 0cd752e9f9..bf07eefc51 100644 --- a/tokens/src/core/components/Form/transition.json +++ b/tokens/src/core/components/Form/transition.json @@ -1,15 +1,51 @@ { "transition": { + "$type": "transition", "form": { "input": { - "value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out", - "type": "transition", + "$value": [ + { + "property": "border-color", + "duration": ".15s", + "timing-function": "ease-in-out", + "delay": "0s", + "behavior": "normal" + }, + { + "property": "box-shadow", + "duration": ".15s", + "timing-function": "ease-in-out", + "delay": "0s", + "behavior": "normal" + } + ], "source": "$input-transition" }, - "control": { - "value": "background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out", - "type": "transition", - "source": "$custom-forms-transition" + "control": { + "$value": [ + { + "property": "background-color", + "duration": ".15s", + "timing-function": "ease-in-out", + "delay": "0s", + "behavior": "normal" + }, + { + "property": "border-color", + "duration": ".15s", + "timing-function": "ease-in-out", + "delay": "0s", + "behavior": "normal" + }, + { + "property": "box-shadow", + "duration": ".15s", + "timing-function": "ease-in-out", + "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 5974f22657..b6159e53c4 100644 --- a/tokens/src/core/components/Form/typography.json +++ b/tokens/src/core/components/Form/typography.json @@ -4,37 +4,43 @@ "input": { "font": { "family": { - "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$input-font-family" + "$type": "fontFamily", + "$value": "{typography.input.btn.font.family}", + "source": "$input-font-family" }, "size": { + "$type": "dimension", "base": { - "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$input-font-size" + "$value": "{typography.input.btn.font.size.base}", + "source": "$input-font-size" }, "sm": { - "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "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}", "type": "dimension", "source": "$input-font-size-lg" + "$value": "{typography.input.btn.font.size.lg}", + "source": "$input-font-size-lg" } }, "weight": { - "value": "{typography.font.weight.base}", "type": "fontWeight", "source": "$input-font-weight" + "$type": "fontWeight", + "$value": "{typography.font.weight.base}", + "source": "$input-font-weight" } }, "line-height": { + "$type": "number", "base": { - "value": "{typography.input.btn.line-height.base}", - "type": "dimension", + "$value": "{typography.input.btn.line-height.base}", "source": "$input-line-height" }, "sm": { - "value": "{typography.input.btn.line-height.sm}", - "type": "dimension", + "$value": "{typography.input.btn.line-height.sm}", "source": "$input-line-height-sm" }, "lg": { - "value": "{typography.input.btn.line-height.lg}", - "type": "dimension", + "$value": "{typography.input.btn.line-height.lg}", "source": "$input-line-height-lg" } } @@ -43,76 +49,75 @@ "select": { "font": { "family": { - "value": "{typography.form.input.font.family}", - "type": "fontFamily", + "$type": "fontFamily", + "$value": "{typography.form.input.font.family}", "source": "$custom-select-font-family" }, "size": { + "$type": "dimension", "base": { - "value": "{typography.form.input.font.size.base}", - "type": "dimension", + "$value": "{typography.form.input.font.size.base}", "source": "$custom-select-font-size" }, "sm": { - "value": "{typography.form.input.font.size.sm}", - "type": "dimension", + "$value": "{typography.form.input.font.size.sm}", "source": "$custom-select-font-size-sm" }, "lg": { - "value": "{typography.form.input.font.size.lg}", - "type": "dimension", + "$value": "{typography.form.input.font.size.lg}", "source": "$custom-select-font-size-lg" } }, "weight": { - "value": "{typography.form.input.font.weight}", - "type": "fontWeight", + "$type": "fontWeight", + "$value": "{typography.form.input.font.weight}", "source": "$custom-select-font-weight" } }, "line-height": { - "value": "{typography.form.input.line-height.base}", - "type": "dimension", + "$type": "number", + "$value": "{typography.form.input.line-height.base}", "source": "$custom-select-line-height" } }, "file": { "line-height": { - "value": "{typography.form.input.line-height.base}", - "type": "dimension", + "$type": "number", + "$value": "{typography.form.input.line-height.base}", "source": "$custom-file-line-height" }, "font": { - "family": { "value": "{typography.form.input.font.family}", - "type": "fontFamily", - "source": "$custom-file-font-family" }, + "family": { + "$type": "fontFamily", + "$value": "{typography.form.input.font.family}", + "source": "$custom-file-font-family" + }, "weight": { - "value": "{typography.form.input.font.weight}", - "type": "fontWeight", + "$type": "fontWeight", + "$value": "{typography.form.input.font.weight}", "source": "$custom-file-font-weight" } } } }, "feedback": { + "$type": "dimension", "font": { "size": { - "value": "{typography.font.size.small.base}", - "type": "dimension", + "$value": "{typography.font.size.sm}", "source": "$form-feedback-font-size" } }, "tooltip": { "font": { "size": { - "value": "{typography.font.size.sm}", - "type": "dimension", + "$value": "{typography.font.size.sm}", "source": "$form-feedback-tooltip-font-size" } }, "line-height": { - "value": "{typography.line-height.base}", - "type": "dimension", + "$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 bb018fdffc..bfbe6c4bc8 100644 --- a/tokens/src/core/components/Icon.json +++ b/tokens/src/core/components/Icon.json @@ -1,11 +1,27 @@ { "size": { + "$type": "dimension", "icon": { - "inline": { "value": ".8em", "type": "dimension", "source": "$icon-inline" }, - "xs": { "value": "1rem", "type": "dimension", "source": "$icon-xs" }, - "sm": { "value": "1.25rem", "type": "dimension", "source": "$icon-sm" }, - "md": { "value": "1.5rem", "type": "dimension", "source": "$icon-md" }, - "lg": { "value": "1.75rem", "type": "dimension", "source": "$icon-lg" } + "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 be573f9fc7..e6c6465afd 100644 --- a/tokens/src/core/components/IconButton.json +++ b/tokens/src/core/components/IconButton.json @@ -1,12 +1,18 @@ { "size": { + "$type": "dimension", "icon-button": { "diameter": { - "md": { "value": "2.75rem", "type": "dimension", "source": "$btn-icon-diameter-md" }, - "sm": { "value": "2.25rem", "type": "dimension", "source": "$btn-icon-diameter-sm" }, + "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)", - "type": "dimension", + "$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 5e388523de..7cfec96306 100644 --- a/tokens/src/core/components/Image.json +++ b/tokens/src/core/components/Image.json @@ -1,27 +1,40 @@ { "typography": { + "$type": "percentage", "image": { "figure-caption": { - "font-size": { "value": "90%", "type": "percentage", "source": "$figure-caption-font-size" } + "font-size": { + "$value": "90%", + "source": "$figure-caption-font-size" + } } } }, "size": { + "$type": "dimension", "image": { "thumbnail": { "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$thumbnail-border-width" }, + "width": { + "$value": "{size.border.width}", + "source": "$thumbnail-border-width" + }, "radius": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$thumbnail-border-radius" + "$value": "{size.border.radius.base}", + "source": "$thumbnail-border-radius" } } } } }, "spacing": { + "$type": "dimension", "image": { "thumbnail": { - "padding": { "value": ".25rem", "type": "dimension", "source": "$thumbnail-padding" } + "padding": { + "$value": ".25rem", + "source": "$thumbnail-padding" + } } } } diff --git a/tokens/src/core/components/Menu.json b/tokens/src/core/components/Menu.json index 8451663fd9..55b90bba96 100644 --- a/tokens/src/core/components/Menu.json +++ b/tokens/src/core/components/Menu.json @@ -1,15 +1,28 @@ { "spacing": { + "$type": "dimension", "menu": { "item": { "padding": { - "x": { "value": "{spacing.btn.padding.x.base}", "type": "dimension", "source": "$menu-item-padding-x" }, - "y": { "value": "{spacing.btn.padding.y.base}", "type": "dimension", "source": "$menu-item-padding-y" } + "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": { "value": ".25em", "type": "dimension", "source": "$menu-item-icon-margin-left" }, - "right": { "value": "{spacing.menu.item.icon.margin.left}", "type": "dimension", "source": "$menu-item-icon-margin-right" } + "left": { + "$value": ".25em", + "source": "$menu-item-icon-margin-left" + }, + "right": { + "$value": "{spacing.menu.item.icon.margin.left}", + "source": "$menu-item-icon-margin-right" + } } } } @@ -20,27 +33,54 @@ "select": { "btn-link": { "text-decoration": { - "line": { "value": "underline", "type": "textDecoration", "source": "$menu-select-btn-link-text-decoration-line" }, - "thickness": { "value": ".125rem", "type": "dimension", "source": "$menu-select-btn-link-text-decoration-thickness" } + "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" + } } } } } }, "size": { + "$type": "dimension", "menu": { "base": { - "border-radius": { "value": ".25em", "type": "dimension", "source": "$menu-border-radius" }, - "max-height": { "value": "16.813rem", "type": "dimension", "source": "$menu-max-height" } + "border-radius": { + "$value": ".25em", + "source": "$menu-border-radius" + }, + "max-height": { + "$value": "16.813rem", + "source": "$menu-max-height" + } }, "item": { - "height": { "value": "3rem", "type": "dimension", "source": "$menu-item-height" }, + "height": { + "$value": "3rem", + "source": "$menu-item-height" + }, "width": { - "base": { "value": "19rem", "type": "dimension", "source": "$menu-item-width" }, - "xs": { "value": "13.438rem", "type": "dimension", "source": "$menu-item-width-xs" } + "base": { + "$value": "19rem", + "source": "$menu-item-width" + }, + "xs": { + "$value": "13.438rem", + "source": "$menu-item-width-xs" + } }, "border": { - "width": { "value": "{size.btn.border.width}", "type": "dimension", "source": "$menu-item-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 a8322e6484..aa177f3685 100644 --- a/tokens/src/core/components/Modal.json +++ b/tokens/src/core/components/Modal.json @@ -1,47 +1,91 @@ { "elevation": { + "$type": "ratio", "modal": { - "backdrop-zindex": { "value": "1040", "type": "ratio", "source": "$zindex-modal-backdrop" }, - "zindex": { "value": "1050", "type": "ratio", "source": "$zindex-modal" } + "backdrop-zindex": { + "$value": "1040", + "source": "$zindex-modal-backdrop" + }, + "zindex": { + "$value": "1050", + "source": "$zindex-modal" + } } }, "size": { + "$type": "dimension", "modal": { - "xl": { "value": "1140px", "type": "dimension", "source": "$modal-xl" }, - "lg": { "value": "800px", "type": "dimension", "source": "$modal-lg" }, - "md": { "value": "500px", "type": "dimension", "source": "$modal-md" }, - "sm": { "value": "400px", "type": "dimension", "source": "$modal-sm" }, + "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": { "value": "0px", "type": "dimension", "source": "$modal-content-border-width" }, + "width": { + "$value": "0px", + "source": "$modal-content-border-width" + }, "radius": { - "value": "{size.border.radius.lg}", "type": "dimension", "source": "$modal-content-border-radius" + "$value": "{size.border.radius.lg}", + "source": "$modal-content-border-radius" } } } }, "spacing": { + "$type": "dimension", "modal": { "inner-padding": { - "base": { "value": "1.5rem", "type": "dimension", "source": "$modal-inner-padding" }, - "bottom": { "value": ".7rem", "type": "dimension", "source": "$modal-inner-padding-bottom" } + "base": { + "$value": "1.5rem", + "source": "$modal-inner-padding" + }, + "bottom": { + "$value": ".7rem", + "source": "$modal-inner-padding-bottom" + } }, "footer-padding": { "base": { - "value": "{spacing.modal.footer-padding.y} 1.5rem", - "type": "dimension", + "$value": { + "x": "1.5rem", + "y": "{spacing.modal.footer-padding.y}" + }, "source": "$modal-footer-padding" }, - "y": { "value": "1rem", "type": "dimension", "source": "$modal-footer-padding-y" } + "y": { + "$value": "1rem", + "source": "$modal-footer-padding-y" + } }, "header-padding": { "base": { - "value": "{spacing.modal.header-padding.y} 1.5rem", - "type": "dimension", + "$value": { + "x": "1.5rem", + "y": "{spacing.modal.header-padding.y}" + }, "source": "$modal-header-padding" }, - "y": { "value": "1rem", "type": "dimension", "source": "$modal-header-padding-y" } + "y": { + "$value": "1rem", + "source": "$modal-header-padding-y" + } }, - "dialog-margin": { "value": "1.5rem", "type": "dimension", "source": "$modal-dialog-margin" } + "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 4f4de47f4c..72ca1c1778 100644 --- a/tokens/src/core/components/Nav.json +++ b/tokens/src/core/components/Nav.json @@ -2,50 +2,85 @@ "typography": { "nav": { "link": { - "font-weight": { "value": "500", "type": "fontWeight", "source": "$nav-link-font-weight" }, - "text-decoration": { "value": "none", "type": "textDecoration" } + "font-weight": { + "$type": "fontWeight", + "$value": "500", + "source": "$nav-link-font-weight" + }, + "text-decoration": { + "$type": "textDecoration", + "$value": "none" + } } } }, "size": { + "$type": "dimension", "nav": { "pills": { - "border-radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$nav-pills-border-radius" }, + "border-radius": { + "$value": "{size.border.radius.base}", + "source": "$nav-pills-border-radius" + }, "link": { - "border-width": { "value": "1px", "type": "dimension", "source": "$nav-pills-link-border-width" } + "border-width": { + "$value": "1px", + "source": "$nav-pills-link-border-width" + } }, "inverse-link": { - "border-width": { "value": "{size.nav.pills.link.border-width}", "type": "dimension", "source": "$nav-inverse-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": { "value": ".188rem", "type": "dimension", "source": "$nav-tabs-link-border-bottom-width" } + "width": { + "$value": ".188rem", + "source": "$nav-tabs-link-border-bottom-width" + } } }, "inverse-link": { "active-border-bottom-width": { - "value": "{size.nav.tabs.link.border-bottom.width}", - "type": "dimension", + "$value": "{size.nav.tabs.link.border-bottom.width}", "source": "$nav-inverse-tabs-link-active-border-bottom-width" } }, "border": { - "width": { "value": "2px", "type": "dimension", "source": "$nav-tabs-border-width" }, - "radius": { "value": "0", "type": "dimension", "source": "$nav-tabs-border-radius" } + "width": { + "$value": "2px", + "source": "$nav-tabs-border-width" + }, + "radius": { + "$value": "0", + "source": "$nav-tabs-border-radius" + } } } } }, "spacing": { + "$type": "dimension", "nav": { "link": { "padding": { - "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" }, - "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" } + "y": { + "$value": ".5rem", + "source": "$nav-link-padding-y" + }, + "x": { + "$value": "1rem", + "source": "$nav-link-padding-x" + } }, - "distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" } + "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 4dd3062b49..72295414ba 100644 --- a/tokens/src/core/components/Navbar.json +++ b/tokens/src/core/components/Navbar.json @@ -1,68 +1,89 @@ { "spacing": { + "$type": "dimension", "navbar": { "padding": { - "y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$navbar-padding-y" }, + "y": { + "$value": "calc({spacing.spacer.base} / 2)", + "source": "$navbar-padding-y" + }, "x": { - "base": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$navbar-padding-x" }, - "nav-link": { "value": ".5rem", "type": "dimension", "source": "$navbar-nav-link-padding-x" } + "base": { + "$value": "{spacing.spacer.base}", + "source": "$navbar-padding-x" + }, + "nav-link": { + "$value": ".5rem", + "source": "$navbar-nav-link-padding-x" + } } }, "brand": { "padding": { "y": { - "value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)", - "type": "dimension", + "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)", "source": "$navbar-brand-padding-y" } } }, "toggler": { "padding": { - "y": { "value": ".25rem", "type": "dimension", "source": "$navbar-toggler-padding-y" }, - "x": { "value": ".75rem", "type": "dimension", "source": "$navbar-toggler-padding-x" } + "y": { + "$value": ".25rem", + "source": "$navbar-toggler-padding-y" + }, + "x": { + "$value": ".75rem", + "source": "$navbar-toggler-padding-x" + } } } } }, "typography": { + "$type": "dimension", "navbar": { "brand": { "font-size": { - "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-brand-font-size" + "$value": "{typography.font.size.lg}", + "source": "$navbar-brand-font-size" } }, "nav-link": { "height": { - "value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)", - "type": "dimension", + "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)", "source": "$nav-link-height" } }, "toggler": { "font-size": { - "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-toggler-font-size" + "$value": "{typography.font.size.lg}", + "source": "$navbar-toggler-font-size" } } } }, "size": { + "$type": "dimension", "navbar": { "nav": { "scroll": { - "max-height": { "value": "75vh", "type": "dimension", "source": "$navbar-nav-scroll-max-height" } + "max-height": { + "$value": "75vh", + "source": "$navbar-nav-scroll-max-height" + } } }, "brand": { "height": { - "value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})", - "type": "dimension", + "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})", "source": "$navbar-brand-height" } }, "toggler": { "border-radius": { - "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$navbar-toggler-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 691f063515..3567bc6d2b 100644 --- a/tokens/src/core/components/Pagination.json +++ b/tokens/src/core/components/Pagination.json @@ -2,64 +2,124 @@ "typography": { "pagination": { "font-size": { - "sm": { "value": ".875rem", "type": "dimension", "source": "$pagination-font-size-sm" } + "$type": "dimension", + "sm": { + "$value": ".875rem", + "source": "$pagination-font-size-sm" + } }, - "line-height": { "value": "1.5rem", "type": "dimension", "source": "$pagination-line-height" } + "line-height": { + "$type": "number", + "$value": "1.5rem", + "source": "$pagination-line-height" + } } }, "spacing": { + "$type": "dimension", "pagination": { "padding": { "y": { - "base": { "value": ".625rem", "type": "dimension", "source": "$pagination-padding-y" }, - "sm": { "value": ".8rem", "type": "dimension", "source": "$pagination-padding-y-sm" }, - "lg": { "value": ".75rem", "type": "dimension", "source": "$pagination-padding-y-lg" } + "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": { "value": "1rem", "type": "dimension", "source": "$pagination-padding-x" }, - "sm": { "value": ".6rem", "type": "dimension", "source": "$pagination-padding-x-sm" }, - "lg": { "value": "1.5rem", "type": "dimension", "source": "$pagination-padding-x-lg" } + "base": { + "$value": "1rem", + "source": "$pagination-padding-x" + }, + "sm": { + "$value": ".6rem", + "source": "$pagination-padding-x-sm" + }, + "lg": { + "$value": "1.5rem", + "source": "$pagination-padding-x-lg" + } } } } }, "size": { + "$type": "dimension", "pagination": { "icon": { - "width": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-width" }, - "height": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-height" } + "width": { + "$value": "2.25rem", + "source": "$pagination-icon-width" + }, + "height": { + "$value": "2.25rem", + "source": "$pagination-icon-height" + } }, "secondary": { "height": { - "base": { "value": "2.75rem", "type": "dimension", "source": "$pagination-secondary-height" }, - "sm": { "value": "2.25rem", "type": "dimension", "source": "$pagination-secondary-height-sm" } + "base": { + "$value": "2.75rem", + "source": "$pagination-secondary-height" + }, + "sm": { + "$value": "2.25rem", + "source": "$pagination-secondary-height-sm" + } } }, "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$pagination-border-width" }, + "width": { + "$value": "{size.border.width}", + "source": "$pagination-border-width" + }, "radius": { "sm": { - "value": "{size.border.radius.sm}", "type": "dimension", "source": "$pagination-border-radius-sm" + "$value": "{size.border.radius.sm}", + "source": "$pagination-border-radius-sm" }, "lg": { - "value": "{size.border.radius.lg}", "type": "dimension", "source": "$pagination-border-radius-lg" + "$value": "{size.border.radius.lg}", + "source": "$pagination-border-radius-lg" } } }, "reduced": { "dropdown": { - "max-height": { "value": "60vh", "type": "dimension", "source": "$pagination-reduced-dropdown-max-height" }, - "min-width": { "value": "6rem", "type": "dimension", "source": "$pagination-reduced-dropdown-min-width" } + "max-height": { + "$value": "60vh", + "source": "$pagination-reduced-dropdown-max-height" + }, + "min-width": { + "$value": "6rem", + "source": "$pagination-reduced-dropdown-min-width" + } } }, "toggle": { "border": { - "base": { "value": ".3125rem", "type": "dimension", "source": "$pagination-toggle-border" }, - "sm": { "value": ".25rem", "type": "dimension", "source": "$pagination-toggle-border-sm" } + "base": { + "$value": ".3125rem", + "source": "$pagination-toggle-border" + }, + "sm": { + "$value": ".25rem", + "source": "$pagination-toggle-border-sm" + } } }, "focus": { - "outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" } + "outline": { + "$value": "0", + "source": "$pagination-focus-outline" + } } } } diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json index b2f2c7e929..52ca95ecea 100644 --- a/tokens/src/core/components/Popover.json +++ b/tokens/src/core/components/Popover.json @@ -1,47 +1,93 @@ { "typography": { + "$type": "dimension", "popover": { - "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$popover-font-size" } + "font-size": { + "$value": "{typography.font.size.sm}", + "source": "$popover-font-size" + } } }, "size": { + "$type": "dimension", "popover": { - "max-width": { "value": "480px", "type": "dimension", "source": "$popover-max-width" }, + "max-width": { + "$value": "480px", + "source": "$popover-max-width" + }, "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$popover-border-width" }, - "radius": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$popover-border-radius" } + "width": { + "$value": "{size.border.width}", + "source": "$popover-border-width" + }, + "radius": { + "$value": "{size.border.radius.sm}", + "source": "$popover-border-radius" + } }, "icon": { - "height": { "value": "1rem", "type": "dimension", "source": "$popover-icon-height" }, - "width": { "value": "1rem", "type": "dimension", "source": "$popover-icon-width" } + "height": { + "$value": "1rem", + "source": "$popover-icon-height" + }, + "width": { + "$value": "1rem", + "source": "$popover-icon-width" + } }, "arrow": { - "width": { "value": "1rem", "type": "dimension", "source": "$popover-arrow-width" }, - "height": { "value": ".5rem", "type": "dimension", "source": "$popover-arrow-height" } + "width": { + "$value": "1rem", + "source": "$popover-arrow-width" + }, + "height": { + "$value": ".5rem", + "source": "$popover-arrow-height" + } } } }, "elevation": { + "$type": "ratio", "popover": { - "zindex": { "value": "1060", "type": "ratio", "source": "$zindex-popover" } + "zindex": { + "$value": "1060", + "source": "$zindex-popover" + } } }, "spacing": { + "$type": "dimension", "popover": { "header": { "padding": { - "y": { "value": ".5rem", "type": "dimension", "source": "$popover-header-padding-y" }, - "x": { "value": "1rem", "type": "dimension", "source": "$popover-header-padding-x" } + "y": { + "$value": ".5rem", + "source": "$popover-header-padding-y" + }, + "x": { + "$value": "1rem", + "source": "$popover-header-padding-x" + } } }, "body": { "padding": { - "y": { "value": "{spacing.popover.header.padding.y}", "type": "dimension", "source": "$popover-body-padding-y" }, - "x": { "value": "{spacing.popover.header.padding.x}", "type": "dimension", "source": "$popover-body-padding-x" } + "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": { "value": ".5rem", "type": "dimension", "source": "$popover-icon-margin-right" } + "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 772e194f69..57a56962b6 100644 --- a/tokens/src/core/components/ProductTour.json +++ b/tokens/src/core/components/ProductTour.json @@ -1,21 +1,29 @@ { "size": { + "$type": "dimension", "product-tour": { "checkpoint": { "width": { - "border": { "value": "8px", "type": "dimension", "source": "$checkpoint-border-width" }, - "arrow": { "value": "15px", "type": "dimension", "source": "$checkpoint-arrow-width" }, - "max": { "value": "480px", "type": "dimension", "source": "$checkpoint-max-width" } + "border": { + "$value": "8px", + "source": "$checkpoint-border-width" + }, + "arrow": { + "$value": "15px", + "source": "$checkpoint-arrow-width" + }, + "max": { + "$value": "480px", + "source": "$checkpoint-max-width" + } }, "arrow": { "top": { - "value": "{size.product-tour.checkpoint.width.arrow}", - "type": "dimension", + "$value": "{size.product-tour.checkpoint.width.arrow}", "source": "$checkpoint-arrow-border-top" }, "transparent": { - "value": "{size.product-tour.checkpoint.width.arrow}", - "type": "dimension", + "$value": "{size.product-tour.checkpoint.width.arrow}", "source": "$checkpoint-arrow-border-transparent" } } @@ -23,9 +31,13 @@ } }, "elevation": { + "$type": "ratio", "product-tour": { "checkpoint": { - "zindex": { "value": "1060", "type": "ratio", "source": "$checkpoint-z-index" } + "zindex": { + "$value": "1060", + "source": "$checkpoint-z-index" + } } } } diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json index 82a0626871..0221b353b6 100644 --- a/tokens/src/core/components/ProgressBar.json +++ b/tokens/src/core/components/ProgressBar.json @@ -1,38 +1,74 @@ { "typography": { + "$type": "dimension", "progress-bar": { "font-size": { - "value": "calc({typography.font.size.base} * .75)", "type": "dimension", "source": "$progress-font-size" + "$value": "calc({typography.font.size.base} * .75)", + "source": "$progress-font-size" } } }, "size": { + "$type": "dimension", "progress-bar": { "height": { - "base": { "value": "1rem", "type": "dimension", "source": "$progress-height" }, - "annotated": { "value": ".3125rem", "type": "dimension", "source": "$annotated-progress-height" } + "base": { + "$value": "1rem", + "source": "$progress-height" + }, + "annotated": { + "$value": ".3125rem", + "source": "$annotated-progress-height" + } }, "border": { - "width": { "value": "1px", "type": "dimension", "source": "$progress-bar-border-width" }, - "radius": { "value": "0", "type": "dimension", "source": "$progress-border-radius" } + "width": { + "$value": "1px", + "source": "$progress-bar-border-width" + }, + "radius": { + "$value": "0", + "source": "$progress-border-radius" + } }, - "threshold-circle": { "value": ".5625rem", "type": "dimension", "source": "$progress-threshold-circle" } + "threshold-circle": { + "$value": ".5625rem", + "source": "$progress-threshold-circle" + } } }, "spacing": { + "$type": "dimension", "progress-bar": { "hint": { - "annotation-gap": { "value": ".5rem", "type": "dimension", "source": "$progress-hint-annotation-gap" } + "annotation-gap": { + "$value": ".5rem", + "source": "$progress-hint-annotation-gap" + } } } }, "transition": { + "$type": "transition", "progress-bar": { - "bar": { - "animation-timing": { - "value": "1s linear infinite", "type": "transition", "source": "$progress-bar-animation-timing" + "animation-timing": { + "$value": { + "duration": "1s", + "timing-function": "linear", + "delay": "0s", + "iteration-count": "infinite" + }, + "source": "$progress-bar-animation-timing" + }, + "transition": { + "$value": { + "property": "width", + "duration": ".6s", + "timing-function": "ease", + "delay": "0s", + "behavior": "normal" }, - "transition": { "value": "width .6s ease", "type": "transition", "source": "$progress-bar-transition" } + "source": "$progress-bar-transition" } } } diff --git a/tokens/src/core/components/SearchField.json b/tokens/src/core/components/SearchField.json index 75eb4ec290..d7e6a7cd04 100644 --- a/tokens/src/core/components/SearchField.json +++ b/tokens/src/core/components/SearchField.json @@ -1,23 +1,36 @@ { "size": { + "$type": "dimension", "search-field": { "border": { "width": { - "base": { "value": ".0625rem", "type": "dimension", "source": "$search-border-width" }, - "focus": { "value": ".3125rem", "type": "dimension", "source": "$search-border-focus-width" } + "base": { + "$value": ".0625rem", + "source": "$search-border-width" + }, + "focus": { + "$value": ".3125rem", + "source": "$search-border-focus-width" + } }, - "radius": { "value": "0", "type": "dimension", "source": "$search-border-radius" } + "radius": { + "$value": "0", + "source": "$search-border-radius" + } }, "search-input-height": { - "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", - "type": "dimension", + "$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": { "value": ".5rem", "type": "dimension", "source": "$search-button-margin" } + "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 aa4c0a71ab..632bd2c981 100644 --- a/tokens/src/core/components/SelectableBox.json +++ b/tokens/src/core/components/SelectableBox.json @@ -1,9 +1,19 @@ { "spacing": { + "$type": "dimension", "selectable-box": { - "padding": { "value": "1rem", "type": "dimension", "source": "$selectable-box-padding" }, - "border-radius": { "value": ".25rem", "type": "dimension", "source": "$selectable-box-border-radius" }, - "box-space": { "value": ".75rem", "type": "dimension", "source": "$selectable-box-space" } + "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 86b7358b82..9697679c25 100644 --- a/tokens/src/core/components/Sheet.json +++ b/tokens/src/core/components/Sheet.json @@ -1,9 +1,16 @@ { "elevation": { + "$type": "ratio", "sheet": { "zindex": { - "backdrop": { "value": "1031", "type": "ratio", "source": "$zindex-sheet-backdrop" }, - "main": { "value": "1032", "type": "ratio", "source": "$zindex-sheet" } + "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 2c642554bf..f42bfea44d 100644 --- a/tokens/src/core/components/Spinner.json +++ b/tokens/src/core/components/Spinner.json @@ -1,19 +1,42 @@ { "size": { + "$type": "dimension", "spinner": { "base": { - "width": { "value": "2rem", "type": "dimension", "source": "$spinner-width" }, - "height": { "value": "{size.spinner.base.width}", "type": "dimension", "source": "$spinner-height" }, - "border-width": { "value": ".25em", "type": "dimension", "source": "$spinner-border-width" } + "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": { "value": "1rem", "type": "dimension", "source": "$spinner-width-sm" }, - "height": { "value": "{size.spinner.sm.width}", "type": "dimension", "source": "$spinner-height-sm" }, - "border-width": { "value": ".2em", "type": "dimension", "source": "$spinner-border-width-sm" } + "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": { - "vertical-align": { "value": ".125em", "type": "dimension", "source": "$spinner-vertical-align" } + "$type": "dimension", + "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 8faa1f01ff..f32d79e330 100644 --- a/tokens/src/core/components/Stack.json +++ b/tokens/src/core/components/Stack.json @@ -1,7 +1,11 @@ { "size": { + "$type": "dimension", "stack": { - "gap": { "value": "0", "type": "dimension", "source": "$stack-gap" } + "gap": { + "$value": "0", + "source": "$stack-gap" + } } } } diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json index 27b3e77b5c..3b5e3f1123 100644 --- a/tokens/src/core/components/Stepper.json +++ b/tokens/src/core/components/Stepper.json @@ -1,42 +1,71 @@ { "spacing": { + "$type": "dimension", "stepper": { "header": { "padding": { - "y": { "value": ".75rem", "type": "dimension", "source": "$stepper-header-padding-y" }, - "x": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$stepper-header-padding-x" } + "y": { + "$value": ".75rem", + "source": "$stepper-header-padding-y" + }, + "x": { + "$value": "{spacing.spacer.base}", + "source": "$stepper-header-padding-x" + } }, "step": { "padding": { - "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-padding" + "$value": ".25rem", + "source": "$stepper-header-step-padding" }, "list": { "padding": { - "y": { "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-list-padding-y" }, - "x": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-padding-x" } + "y": { + "$value": ".25rem", + "source": "$stepper-header-step-list-padding-y" + }, + "x": { + "$value": "0", + "source": "$stepper-header-step-list-padding-x" + } }, - "margin": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-margin" } + "margin": { + "$value": "0", + "source": "$stepper-header-step-list-margin" + } } } } } }, "size": { + "$type": "dimension", "stepper": { "header": { - "height-min": { "value": "5.13rem", "type": "dimension", "source": "$stepper-header-min-height" } + "height-min": { + "$value": "5.13rem", + "source": "$stepper-header-min-height" + } }, "step": { - "width-min": { "value": "0", "type": "dimension", "source": "$stepper-header-step-min-width" }, + "width-min": { + "$value": "0", + "source": "$stepper-header-step-min-width" + }, "bubble-error-shadow-width": { - "value": "3px", "type": "dimension", "source": "$stepper-header-step-error-bubble-shadow-width" + "$value": "3px", + "source": "$stepper-header-step-error-bubble-shadow-width" } } } }, "typography": { "spacer": { - "line-height": { "value": "1px", "type": "dimension", "source": "$stepper-header-line-height" } + "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 9246a1e8d4..953426a84e 100644 --- a/tokens/src/core/components/Sticky.json +++ b/tokens/src/core/components/Sticky.json @@ -1,7 +1,11 @@ { "spacing": { + "$type": "dimension", "sticky": { - "offset": { "value": "0", "type": "dimension", "source": "$sticky-offset" } + "offset": { + "$value": "0", + "source": "$sticky-offset" + } } } } diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json index 4413acf5da..5dfc20fb72 100644 --- a/tokens/src/core/components/Tab.json +++ b/tokens/src/core/components/Tab.json @@ -1,18 +1,40 @@ { "spacing": { + "$type": "dimension", "tab": { "more-link-dropdown-toggle": { - "padding-x": { "value": ".7rem", "type": "dimension", "source": "$tab-more-link-dropdown-toggle-padding-x" }, - "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-more-link-dropdown-toggle-padding-y" } + "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": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x" }, - "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y" } + "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": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x" }, - "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" }, - "distance": { "value": "5px", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-distance" } + "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 47a480abb6..f3d7088535 100644 --- a/tokens/src/core/components/Tabs.json +++ b/tokens/src/core/components/Tabs.json @@ -1,17 +1,26 @@ { "size": { + "$type": "dimension", "tabs": { "notification": { - "height": { "value": "1rem", "type": "dimension", "source": "$tab-notification-height" }, - "width": { "value": "1rem", "type": "dimension", "source": "$tab-notification-width" } + "height": { + "$value": "1rem", + "source": "$tab-notification-height" + }, + "width": { + "$value": "1rem", + "source": "$tab-notification-width" + } } } }, "typography": { + "$type": "dimension", "tabs": { "notification": { "font-size": { - "value": "{typography.font.size.xs}", "type": "dimension", "source": "$tab-notification-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 c375011455..9175627000 100644 --- a/tokens/src/core/components/Toast.json +++ b/tokens/src/core/components/Toast.json @@ -1,28 +1,55 @@ { "typography": { + "$type": "dimension", "toast": { - "font-size": { "value": ".875rem", "type": "dimension", "source": "$toast-font-size" } + "font-size": { + "$value": ".875rem", + "source": "$toast-font-size" + } } }, "size": { + "$type": "dimension", "toast": { - "max-width": { "value": "400px", "type": "dimension", "source": "$toast-max-width" }, + "max-width": { + "$value": "400px", + "source": "$toast-max-width" + }, "border": { - "width": { "value": "1px", "type": "dimension", "source": "$toast-border-width" }, - "radius": { "value": ".25rem", "type": "dimension", "source": "$toast-border-radius" } + "width": { + "$value": "1px", + "source": "$toast-border-width" + }, + "radius": { + "$value": ".25rem", + "source": "$toast-border-radius" + } } } }, "spacing": { + "$type": "dimension", "toast": { "padding": { - "x": { "value": ".75rem", "type": "dimension", "source": "$toast-padding-x" }, - "y": { "value": ".25rem", "type": "dimension", "source": "$toast-padding-y" } + "x": { + "$value": ".75rem", + "source": "$toast-padding-x" + }, + "y": { + "$value": ".25rem", + "source": "$toast-padding-y" + } }, "container": { "gutter": { - "lg": { "value": "1.25rem", "type": "dimension", "source": "$toast-container-gutter-lg" }, - "sm": { "value": ".625rem", "type": "dimension", "source": "$toast-container-gutter-sm" } + "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 664263b894..1e7746c2c8 100644 --- a/tokens/src/core/components/Tooltip.json +++ b/tokens/src/core/components/Tooltip.json @@ -1,32 +1,61 @@ { "typography": { + "$type": "dimension", "tooltip": { - "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$tooltip-font-size" } + "font-size": { + "$value": "{typography.font.size.sm}", + "source": "$tooltip-font-size" + } } }, "spacing": { + "$type": "dimension", "tooltip": { "padding": { - "y": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-y" }, - "x": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-x" } + "y": { + "$value": ".5rem", + "source": "$tooltip-padding-y" + }, + "x": { + "$value": ".5rem", + "source": "$tooltip-padding-x" + } }, - "margin": { "value": "0", "type": "dimension", "source": "$tooltip-margin" } + "margin": { + "$value": "0", + "source": "$tooltip-margin" + } } }, "elevation": { + "$type": "ratio", "tooltip": { - "zindex": { "value": "1070", "type": "ratio", "source": "$zindex-tooltip" } + "zindex": { + "$value": "1070", + "source": "$zindex-tooltip" + } } }, "size": { + "$type": "dimension", "tooltip": { - "max-width": { "value": "200px", "type": "dimension", "source": "$tooltip-max-width" }, + "max-width": { + "$value": "200px", + "source": "$tooltip-max-width" + }, "arrow": { - "height": { "value": ".4rem", "type": "dimension", "source": "$tooltip-arrow-height" }, - "width": { "value": ".8rem", "type": "dimension", "source": "$tooltip-arrow-width" } + "height": { + "$value": ".4rem", + "source": "$tooltip-arrow-height" + }, + "width": { + "$value": ".8rem", + "source": "$tooltip-arrow-width" + } }, "border-radius": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$tooltip-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 b9e9fdac9c..7ff90504c0 100644 --- a/tokens/src/core/components/general/caret.json +++ b/tokens/src/core/components/general/caret.json @@ -1,13 +1,24 @@ { "size": { + "$type": "dimension", "caret": { - "width": { "value": ".3em", "type": "dimension", "source": "$caret-width" } + "width": { + "$value": ".3em", + "source": "$caret-width" + } } }, "spacing": { + "$type": "dimension", "caret": { - "base": { "value": ".255em", "type": "dimension", "source": "$caret-spacing" }, - "vertical-align": { "value": ".255em", "type": "dimension", "source": "$caret-vertical-align" } + "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 045e188af2..7735f84ba3 100644 --- a/tokens/src/core/components/general/headings.json +++ b/tokens/src/core/components/general/headings.json @@ -2,15 +2,31 @@ "typography": { "headings": { "font": { - "family": { "value": "inherit", "type": "fontFamily", "source": "$headings-font-family" }, - "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$headings-font-weight" } + "family": { + "$type": "fontFamily", + "$value": "inherit", + "source": "$headings-font-family" + }, + "weight": { + "$type": "fontWeight", + "$value": "{typography.font.weight.bold}", + "source": "$headings-font-weight" + } }, - "line-height": { "value": "1.25", "type": "dimension", "source": "$headings-line-height" } + "line-height": { + "$type": "number", + "$value": "1.25", + "source": "$headings-line-height" + } } }, "spacing": { + "$type": "dimension", "headings": { - "margin-bottom": { "value": ".5rem", "type": "dimension", "source": "$headings-margin-bottom" } + "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 2bb05ca012..6d1211d536 100644 --- a/tokens/src/core/components/general/hr.json +++ b/tokens/src/core/components/general/hr.json @@ -1,9 +1,16 @@ { "size": { + "$type": "dimension", "hr": { "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$hr-border-width" }, - "margin-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$hr-margin-y" } + "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 821dc85692..aed40b80a9 100644 --- a/tokens/src/core/components/general/input.json +++ b/tokens/src/core/components/general/input.json @@ -3,48 +3,94 @@ "input": { "btn": { "font": { - "family": { "value": "inherit", "type": "fontFamily", "source": "$input-btn-font-family" }, + "family": { + "$type": "fontFamily", + "$value": "inherit", + "source": "$input-btn-font-family" + }, "size": { - "base": { "value": "1.125rem", "type": "dimension", "source": "$input-btn-font-size" }, - "sm": { "value": ".875rem", "type": "dimension", "source": "$input-btn-font-size-sm" }, - "lg": { "value": "1.325rem", "type": "dimension", "source": "$input-btn-font-size-lg" } + "$type": "dimension", + "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": { - "base": { "value": "1.3333", "type": "dimension", "source": "$input-btn-line-height" }, - "sm": { "value": "1.4286", "type": "dimension", "source": "$input-btn-line-height-sm" }, + "$type": "number", + "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}", "type": "dimension", "source": "$input-btn-line-height-lg" + "$value": "{typography.line-height.lg}", + "source": "$input-btn-line-height-lg" } } } } }, "spacing": { + "$type": "dimension", "input": { "btn": { "padding": { - "y": { "value": ".5625rem", "type": "dimension", "source": "$input-btn-padding-y" }, - "x": { "value": "1rem", "type": "dimension", "source": "$input-btn-padding-x" }, + "y": { + "$value": ".5625rem", + "source": "$input-btn-padding-y" + }, + "x": { + "$value": "1rem", + "source": "$input-btn-padding-x" + }, "sm": { - "y": { "value": ".4375rem", "type": "dimension", "source": "$input-btn-padding-y-sm" }, - "x": { "value": ".75rem", "type": "dimension", "source": "$input-btn-padding-x-sm" } + "y": { + "$value": ".4375rem", + "source": "$input-btn-padding-y-sm" + }, + "x": { + "$value": ".75rem", + "source": "$input-btn-padding-x-sm" + } }, "lg": { - "y": { "value": ".6875rem", "type": "dimension", "source": "$input-btn-padding-y-lg" }, - "x": { "value": "1.25rem", "type": "dimension", "source": "$input-btn-padding-x-lg" } + "y": { + "$value": ".6875rem", + "source": "$input-btn-padding-y-lg" + }, + "x": { + "$value": "1.25rem", + "source": "$input-btn-padding-x-lg" + } } } } } }, "size": { + "$type": "dimension", "input": { "btn": { "border-width": { - "value": "{size.border.width}", "type": "dimension", "source": "$input-btn-border-width" + "$value": "{size.border.width}", + "source": "$input-btn-border-width" }, - "focus-width": { "value": "1px", "type": "dimension", "source": "$input-btn-focus-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 bb48968eb1..a9e7a34a45 100644 --- a/tokens/src/core/components/general/link.json +++ b/tokens/src/core/components/general/link.json @@ -2,26 +2,63 @@ "typography": { "link": { "decoration": { - "base": { "value": "none", "type": "textDecoration", "source": "$link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$link-hover-decoration" }, + "$type": "textDecoration", + "base": { + "$value": "none", + "source": "$link-decoration" + }, + "hover": { + "$value": "underline", + "source": "$link-hover-decoration" + }, "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$inline-link-hover-decoration" } + "base": { + "$value": "underline", + "source": "$inline-link-decoration" + }, + "hover": { + "$value": "underline", + "source": "$inline-link-hover-decoration" + } }, "muted": { - "base": { "value": "none", "type": "textDecoration", "source": "$muted-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-link-hover-decoration" }, + "base": { + "$value": "none", + "source": "$muted-link-decoration" + }, + "hover": { + "$value": "underline", + "source": "$muted-link-hover-decoration" + }, "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-hover-decoration" } + "base": { + "$value": "underline", + "source": "$muted-inline-link-decoration" + }, + "hover": { + "$value": "underline", + "source": "$muted-inline-link-hover-decoration" + } } }, "brand": { - "base": { "value": "none", "type": "textDecoration", "source": "$brand-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-link-hover-decoration" }, + "base": { + "$value": "none", + "source": "$brand-link-decoration" + }, + "hover": { + "$value": "underline", + "source": "$brand-link-hover-decoration" + }, "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-hover-decoration" } + "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 1b946b49d5..0180a82cc1 100644 --- a/tokens/src/core/components/general/list.json +++ b/tokens/src/core/components/general/list.json @@ -1,25 +1,46 @@ { "typography": { + "$type": "fontWeight", "dt": { - "font-weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$dt-font-weight" } + "font-weight": { + "$value": "{typography.font.weight.bold}", + "source": "$dt-font-weight" + } } }, "spacing": { + "$type": "dimension", "list": { - "inline-padding": { "value": ".5rem", "type": "dimension", "source": "$list-inline-padding" }, + "inline-padding": { + "$value": ".5rem", + "source": "$list-inline-padding" + }, "group-item": { "padding": { - "y": { "value": ".75rem", "type": "dimension", "source": "$list-group-item-padding-y" }, - "x": { "value": "1.25rem", "type": "dimension", "source": "$list-group-item-padding-x" } + "y": { + "$value": ".75rem", + "source": "$list-group-item-padding-y" + }, + "x": { + "$value": "1.25rem", + "source": "$list-group-item-padding-x" + } } } } }, "size": { + "$type": "dimension", "list-group": { "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$list-group-border-width" }, - "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$list-group-border-radius" } + "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 c1104eb1bf..ad0f2c2617 100644 --- a/tokens/src/core/components/general/text.json +++ b/tokens/src/core/components/general/text.json @@ -1,22 +1,28 @@ { "spacing": { + "$type": "dimension", "paragraph": { - "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$paragraph-margin-bottom" } + "margin-bottom": { + "$value": "1rem", + "source": "$paragraph-margin-bottom" + } }, - "mark-padding": { "value": ".2em", "type": "dimension", "source": "$mark-padding" } + "mark-padding": { + "$value": ".2em", + "source": "$mark-padding" + } }, "typography": { + "$type": "dimension", "blockquote": { "small": { "font-size": { - "value": "{typography.font.size.small.base}", - "type": "dimension", + "$value": "{typography.font.size.sm}", "source": "$blockquote-small-font-size" } }, "font-size": { - "value": "calc({typography.font.size.base} * 1.25)", - "type": "dimension", + "$value": "calc({typography.font.size.base} * 1.25)", "source": "$blockquote-font-size" } } diff --git a/tokens/src/core/global/breakpoints.json b/tokens/src/core/global/breakpoints.json index f4d4ee65bf..ab0a976bc3 100644 --- a/tokens/src/core/global/breakpoints.json +++ b/tokens/src/core/global/breakpoints.json @@ -1,12 +1,31 @@ { "size": { + "$type": "dimension", "breakpoint": { - "xs": { "value": "0", "type": "dimension", "description": "Starting breakpoint for portrait phones." }, - "sm": { "value": "576px", "type": "dimension", "description": "Starting breakpoint for landscape phones." }, - "md": { "value": "768px", "type": "dimension", "description": "Starting breakpoint for tablets." }, - "lg": { "value": "992px", "type": "dimension", "description": "Starting breakpoint for desktops." }, - "xl": { "value": "1200px", "type": "dimension", "description": "Starting breakpoint for large desktops." }, - "xxl": { "value": "1400px", "type": "dimension", "description": "Starting breakpoint for large desktops, more than 1400px." } + "xs": { + "$value": "0px", + "$description": "Starting breakpoint for portrait phones." + }, + "sm": { + "$value": "576px", + "$description": "Starting breakpoint for landscape phones." + }, + "md": { + "$value": "768px", + "$description": "Starting breakpoint for tablets." + }, + "lg": { + "$value": "992px", + "$description": "Starting breakpoint for desktops." + }, + "xl": { + "$value": "1200px", + "$description": "Starting breakpoint for large desktops." + }, + "xxl": { + "$value": "1400px", + "$description": "Starting breakpoint for large desktops, more than 1400px." + } } } } diff --git a/tokens/src/core/global/display.json b/tokens/src/core/global/display.json deleted file mode 100644 index 3f892d460b..0000000000 --- a/tokens/src/core/global/display.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "typography": { - "display": { - "line-height": { - "base": { "value": "1", "type": "dimension", "source": "$display-line-height", "description": "Standard line height." }, - "mobile": { "value": "3.5rem", "type": "dimension", "source": "$display-mobile-line-height", "description": "Mobile line height." } - }, - "1": { "value": "3.75rem", "type": "dimension", "source": "$display1-size", "description": "Font size for heading of level 1." }, - "2": { "value": "4.875rem", "type": "dimension", "source": "$display2-size", "description": "Font size for heading of level 2." }, - "3": { "value": "5.625rem", "type": "dimension", "source": "$display3-size", "description": "Font size for heading of level 3." }, - "4": { "value": "7.5rem", "type": "dimension", "source": "$display4-size", "description": "Font size for heading of level 4." }, - "mobile": { "value": "3.25rem", "type": "dimension", "source": "$display-mobile-size", "description": "Font size for mobile devices." }, - "weight": { - "1": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display1-weight", "description": "Font weight of level 1." }, - "2": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display2-weight", "description": "Font weight of level 2." }, - "3": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display3-weight", "description": "Font weight of level 3." }, - "4": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display4-weight", "description": "Font weight of level 4." } - } - }, - "print-page-size": { "value": "a3", "type": "dimension", "source": "$print-page-size" } - } -} diff --git a/tokens/src/core/global/elevation.json b/tokens/src/core/global/elevation.json index a4b88e4240..b002837105 100644 --- a/tokens/src/core/global/elevation.json +++ b/tokens/src/core/global/elevation.json @@ -1,19 +1,61 @@ { "elevation": { + "$type": "ratio", "zindex": { - "0": { "value": 0, "type": "ratio", "description": "z-index of level 0." }, - "200": { "value": 200, "type": "ratio", "description": "z-index of level 200." }, - "400": { "value": 400, "type": "ratio", "description": "z-index of level 400." }, - "600": { "value": 600, "type": "ratio", "description": "z-index of level 600." }, - "800": { "value": 800, "type": "ratio", "description": "z-index of level 800." }, - "1000": { "value": 1000, "type": "ratio", "description": "z-index of level 1000." }, - "1200": { "value": 1200, "type": "ratio", "description": "z-index of level 1200." }, - "1400": { "value": 1400, "type": "ratio", "description": "z-index of level 1400." }, - "1600": { "value": 1600, "type": "ratio", "description": "z-index of level 1600." }, - "1800": { "value": 1800, "type": "ratio", "description": "z-index of level 1800." }, - "2000": { "value": 2000, "type": "ratio", "description": "z-index of level 2000." }, - "sticky": { "value": 1020, "source": "$zindex-sticky", "type": "ratio", "description": "z-index for sticky element." }, - "fixed": { "value": 1030, "source": "$zindex-fixed", "type": "ratio", "description": "z-index of for fixed element." } + "0": { + "$value": 0, + "$description": "z-index of level 0." + }, + "200": { + "$value": 200, + "$description": "z-index of level 200." + }, + "400": { + "$value": 400, + "$description": "z-index of level 400." + }, + "600": { + "$value": 600, + "$description": "z-index of level 600." + }, + "800": { + "$value": 800, + "$description": "z-index of level 800." + }, + "1000": { + "$value": 1000, + "$description": "z-index of level 1000." + }, + "1200": { + "$value": 1200, + "$description": "z-index of level 1200." + }, + "1400": { + "$value": 1400, + "$description": "z-index of level 1400." + }, + "1600": { + "$value": 1600, + "$description": "z-index of level 1600." + }, + "1800": { + "$value": 1800, + "$description": "z-index of level 1800." + }, + "2000": { + "$value": 2000, + "$description": "z-index of level 2000." + }, + "sticky": { + "$value": 1020, + "$description": "z-index for sticky element.", + "source": "$zindex-sticky" + }, + "fixed": { + "$value": 1030, + "$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 aa57039186..8c722fde59 100644 --- a/tokens/src/core/global/other.json +++ b/tokens/src/core/global/other.json @@ -1,4 +1,8 @@ { "yiq-contrasted-threshold": 128, - "theme-interval": { "value": "8%", "type": "percentage", "source": "$theme-color-interval" } + "theme-interval": { + "$type": "percentage", + "$value": "8%", + "source": "$theme-color-interval" + } } diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json index 4c4f3f2344..f2e9bbd50c 100644 --- a/tokens/src/core/global/spacing.json +++ b/tokens/src/core/global/spacing.json @@ -1,36 +1,89 @@ { "spacing": { + "$type": "dimension", "spacer": { - "base": { "value": "1rem", "type": "dimension", "source": "$spacer", "description": "Basic space value" }, - "0": { "value": "0", "type": "dimension", "description": "Space value of level 0" }, - "1": { "value": "calc({spacing.spacer.base} * .25)", "type": "dimension", "description": "Space value of level 1" }, - "1,5": { "value": "calc({spacing.spacer.base} * .375)", "type": "dimension", "description": "Space value of level 1.5" }, - "2": { "value": "calc({spacing.spacer.base} * .5)", "type": "dimension", "description": "Space value of level 2" }, - "2,5": { "value": "calc({spacing.spacer.base} * .75)", "type": "dimension", "description": "Space value of level 2.5" }, - "3": { "value": "{spacing.spacer.base}", "type": "dimension", "description": "Space value of level 3" }, - "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5" }, - "4": { "value": "calc({spacing.spacer.base} * 1.5)", "type": "dimension", "description": "Space value of level 4" }, - "4,5": { "value": "calc({spacing.spacer.base} * 2)", "type": "dimension", "description": "Space value of level 4.5" }, - "5": { "value": "calc({spacing.spacer.base} * 3)", "type": "dimension", "description": "Space value of level 5" }, - "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5" }, - "6": { "value": "calc({spacing.spacer.base} * 5)", "type": "dimension", "description": "Space value of level 6" } + "0": { + "$value": "0", + "$description": "Space value of level 0" + }, + "1": { + "$value": "calc({spacing.spacer.base} * .25)", + "$description": "Space value of level 1" + }, + "2": { + "$value": "calc({spacing.spacer.base} * .5)", + "$description": "Space value of level 2" + }, + "3": { + "$value": "{spacing.spacer.base}", + "$description": "Space value of level 3" + }, + "4": { + "$value": "calc({spacing.spacer.base} * 1.5)", + "$description": "Space value of level 4" + }, + "5": { + "$value": "calc({spacing.spacer.base} * 3)", + "$description": "Space value of level 5" + }, + "6": { + "$value": "calc({spacing.spacer.base} * 5)", + "$description": "Space value of level 6" + }, + "base": { + "$value": "1rem", + "$description": "Basic space value", + "source": "$spacer" + }, + "1.5": { + "$value": "calc({spacing.spacer.base} * .375)", + "$description": "Space value of level 1.5" + }, + "2.5": { + "$value": "calc({spacing.spacer.base} * .75)", + "$description": "Space value of level 2.5" + }, + "3.5": { + "$value": "calc({spacing.spacer.base} * 1.25)", + "$description": "Space value of level 3.5" + }, + "4.5": { + "$value": "calc({spacing.spacer.base} * 2)", + "$description": "Space value of level 4.5" + }, + "5.5": { + "$value": "calc({spacing.spacer.base} * 4)", + "$description": "Space value of level 5.5" + } }, "label": { "margin-bottom": { - "value": ".5rem", "type": "dimension", "source": "$label-margin-bottom", "description": "Margin bottom for label." + "$value": ".5rem", + "$description": "Margin bottom for label.", + "source": "$label-margin-bottom" } }, "table": { "cell": { "padding": { - "base": { "value": ".75rem", "type": "dimension", "source": "$table-cell-padding", "description": "Padding for tables." }, - "sm": { "value": ".3rem", "type": "dimension", "source": "$table-cell-padding-sm", "description": "Padding sm for tables." } + "base": { + "$value": ".75rem", + "$description": "Padding for tables.", + "source": "$table-cell-padding" + }, + "sm": { + "$value": ".3rem", + "$description": "Padding sm for tables.", + "source": "$table-cell-padding-sm" + } } } }, "grid": { "gutter-width": { - "value": "24px", "type": "dimension", "source": "$grid-gutter-width", "description": "Grid gutter width value." + "$value": "24px", + "$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 7cd6c13d3b..035b91793d 100644 --- a/tokens/src/core/global/transition.json +++ b/tokens/src/core/global/transition.json @@ -1,13 +1,50 @@ { "transition": { - "base": { "value": "all .2s ease-in-out", "type": "transition", "source": "$transition-base", "description": "Generic transition for any property change" }, - "fade": { "value": "opacity .15s linear", "type": "transition", "source": "$transition-fade", "description": "Opacity transition that takes 150ms" }, + "$type": "transition", + "base": { + "$value": { + "property": "all", + "duration": ".2s", + "timing-function": "ease-in-out", + "delay": "0s", + "behavior": "normal" + }, + "$description": "Generic transition for any property change", + "source": "$transition-base" + }, + "fade": { + "$value": { + "property": "opacity", + "duration": ".15s", + "timing-function": "linear", + "delay": "0s", + "behavior": "normal" + }, + "$description": "Opacity transition that takes 150ms", + "source": "$transition-fade" + }, "collapse": { "height": { - "value": "height .35s ease", "type": "transition", "source": "$transition-collapse", "description": "Collapse transition for height that takes 350ms" + "$value": { + "property": "height", + "duration": ".35s", + "timing-function": "ease", + "delay": "0s", + "behavior": "normal" + }, + "$description": "Collapse transition for height that takes 350ms", + "source": "$transition-collapse" }, "width": { - "value": "width .35s ease", "type": "transition", "source": "$transition-collapse-width", "description": "Collapse transition for width that takes 350ms" + "$value": { + "property": "width", + "duration": ".35s", + "timing-function": "ease", + "delay": "0s", + "behavior": "normal" + }, + "$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 935fa96e9b..84526b567e 100644 --- a/tokens/src/core/global/typography.json +++ b/tokens/src/core/global/typography.json @@ -2,90 +2,305 @@ "typography": { "font": { "family": { + "$type": "fontFamily", "base": { - "value": "{typography.font.family.sans.serif}", - "type": "fontFamily", - "source": "$font-family-base", - "description": "Basic font family." + "$value": "{typography.font.family.sans.serif}", + "$description": "Basic font family.", + "source": "$font-family-base" }, "sans": { "serif": { - "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", - "type": "fontFamily", - "source": "$font-family-sans-serif", - "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": { "value": "serif", "source": "$font-family-serif", "description": "Serif font family." }, + "serif": { + "$value": "serif", + "$description": "Serif font family.", + "source": "$font-family-serif" + }, "monospace": { - "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", - "type": "fontFamily", - "source": "$font-family-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": { - "base": { "value": "1.125rem", "type": "dimension", "source": "$font-size-base", "description": "Base font size." }, - "lg": { "value": "1.4063rem", "type": "dimension", "source": "$font-size-lg", "description": "Large font size." }, - "sm": { "value": ".875rem", "type": "dimension", "source": "$font-size-sm", "description": "Small font size." }, - "xs": { "value": ".75rem", "type": "dimension", "source": "$font-size-xs", "description": "Extra-small font size." }, - "small": { - "base": { "value": "87.5%", "type": "percentage", "source": "$small-font-size", "description": "Small font size." }, - "x": { "value": "75%", "type": "percentage", "source": "$x-small-font-size", "description": "X-small font size." } - }, - "h1": { "value": "2.5rem", "type": "dimension", "source": "$h1-font-size", "description": "Font size of heading level 1." }, - "h2": { "value": "2rem", "type": "dimension", "source": "$h2-font-size", "description": "Font size of heading level 2." }, - "h3": { "value": "1.375rem", "type": "dimension", "source": "$h3-font-size", "description": "Font size of heading level 3." }, - "h4": { "value": "1.125rem", "type": "dimension", "source": "$h4-font-size", "description": "Font size of heading level 4." }, - "h5": { "value": ".875rem", "type": "dimension", "source": "$h5-font-size", "description": "Font size of heading level 5." }, - "h6": { "value": ".75rem", "type": "dimension", "source": "$h6-font-size", "description": "Font size of heading level 6." }, - "mobile": { - "h1": { "value": "2.25rem", "type": "dimension", "source": "$h1-mobile-font-size", "description": "Mobile font size of heading level 1." }, - "h2": { "value": "{typography.font.size.h2}", "type": "dimension", "source": "$h2-mobile-font-size", "description": "Mobile font size of heading level 2." }, - "h3": { "value": "{typography.font.size.h3}", "type": "dimension", "source": "$h3-mobile-font-size", "description": "Mobile font size of heading level 3." }, - "h4": { "value": "{typography.font.size.h4}", "type": "dimension", "source": "$h4-mobile-font-size", "description": "Mobile font size of heading level 4." }, - "h5": { "value": "{typography.font.size.h5}", "type": "dimension", "source": "$h5-mobile-font-size", "description": "Mobile font size of heading level 5." }, - "h6": { "value": "{typography.font.size.h6}", "type": "dimension", "source": "$h6-mobile-font-size", "description": "Mobile font size of heading level 6." } + "$type": "dimension", + "base": { + "$value": "1.125rem", + "$description": "Base font size.", + "source": "$font-size-base" }, - "lead": { - "value": "calc({typography.font.size.base} * 1.25)", - "type": "dimension", - "source": "$lead-font-size", - "description": "Lead text font size." + "lg": { + "$value": "calc({typography.font.size.base} * 1.25)", + "$description": "Lead text font size.", + "source": "$lead-font-size" + }, + "sm": { + "$value": "87.5%", + "$description": "Small font size.", + "source": "$small-font-size" + }, + "xs": { + "$value": "75%", + "$description": "X-small font size.", + "source": "$x-small-font-size" }, "micro": { - "value": ".688rem", - "type": "dimension", - "source": "$micro-font-size", - "description": "Micro utils text font size." + "$type": "dimension", + "$value": ".688rem", + "$description": "Micro utils text font size.", + "source": "$micro-font-size" + }, + "h1": { + "base": { + "$value": "2.5rem", + "$description": "Base font size of heading level 1.", + "source": "$h1-font-size" + }, + "mobile": { + "$value": "2.25rem", + "$description": "Mobile font size of heading level 1.", + "source": "$h1-mobile-font-size" + } + }, + "h2": { + "base": { + "$value": "2rem", + "$description": "Font size of heading level 2.", + "source": "$h2-font-size" + }, + "mobile": { + "$value": "{typography.font.size.h2.base}", + "$description": "Mobile font size of heading level 2.", + "source": "$h2-mobile-font-size" + } + }, + "h3": { + "base": { + "$value": "1.375rem", + "$description": "Font size of heading level 3.", + "source": "$h3-font-size" + }, + "mobile": { + "$value": "{typography.font.size.h3.base}", + "$description": "Mobile font size of heading level 3.", + "source": "$h3-mobile-font-size" + } + }, + "h4": { + "base": { + "$value": "1.125rem", + "$description": "Font size of heading level 4.", + "source": "$h4-font-size" + }, + "mobile": { + "$value": "{typography.font.size.h4.base}", + "$description": "Mobile font size of heading level 4.", + "source": "$h4-mobile-font-size" + } + }, + "h5": { + "base": { + "$value": ".875rem", + "$description": "Font size of heading level 5.", + "source": "$h5-font-size" + }, + "mobile": { + "$value": "{typography.font.size.h5.base}", + "$description": "Mobile font size of heading level 5.", + "source": "$h5-mobile-font-size" + } + }, + "h6": { + "base": { + "$value": ".75rem", + "$description": "Font size of heading level 6.", + "source": "$h6-font-size" + }, + "mobile": { + "$value": "{typography.font.size.h6.base}", + "$description": "Mobile font size of heading level 6.", + "source": "$h6-mobile-font-size" + } + }, + "display": { + "1": { + "$value": "3.75rem", + "$description": "Font size for heading of level 1.", + "source": "$display1-size" + }, + "2": { + "$value": "4.875rem", + "$description": "Font size for heading of level 2.", + "source": "$display2-size" + }, + "3": { + "$value": "5.625rem", + "$description": "Font size for heading of level 3.", + "source": "$display3-size" + }, + "4": { + "$value": "7.5rem", + "$description": "Font size for heading of level 4.", + "source": "$display4-size" + }, + "mobile": { + "1": { + "$value": "3.25rem", + "$description": "Mobile font size for heading of level 1.", + "source": "$display-mobile-size" + }, + "2": { + "$value": "{typography.font.size.display.mobile.1}", + "$description": "Mobile font size for heading of level 2." + }, + "3": { + "$value": "{typography.font.size.display.mobile.1}", + "$description": "Mobile font size for heading of level 3." + }, + "4": { + "$value": "{typography.font.size.display.mobile.1}", + "$description": "Mobile font size for heading of level 4." + } + } } }, "weight": { - "lighter": { "value": "lighter", "type": "fontWeight", "source": "$font-weight-lighter", "description": "Lighter font weight." }, - "light": { "value": "300", "type": "fontWeight", "source": "$font-weight-light", "description": "Light font weight." }, - "normal": { "value": "400", "type": "fontWeight", "source": "$font-weight-normal", "description": "Normal font weight." }, + "$type": "fontWeight", + "lighter": { + "$value": "lighter", + "$description": "Lighter font weight.", + "source": "$font-weight-lighter" + }, + "light": { + "$value": "300", + "$description": "Light font weight.", + "source": "$font-weight-light" + }, + "normal": { + "$value": "400", + "$description": "Normal font weight.", + "source": "$font-weight-normal" + }, "semi": { - "bold": { "value": "500", "type": "fontWeight", "source": "$font-weight-semi-bold", "description": "Semi-bold font weight." } + "bold": { + "$value": "500", + "$description": "Semi-bold font weight.", + "source": "$font-weight-semi-bold" + } + }, + "bold": { + "$value": "700", + "$description": "Bold font weight.", + "source": "$font-weight-bold" + }, + "bolder": { + "$value": "bolder", + "$description": "Bolder font weight.", + "source": "$font-weight-bolder" }, - "bold": { "value": "700", "type": "fontWeight", "source": "$font-weight-bold", "description": "Bold font weight." }, - "bolder": { "value": "bolder", "type": "fontWeight", "source": "$font-weight-bolder", "description": "Bolder font weight." }, "base": { - "value": "{typography.font.weight.normal}", - "type": "fontWeight", - "source": "$font-weight-base", - "description": "Basic font weight." + "$value": "{typography.font.weight.normal}", + "$description": "Basic font weight.", + "source": "$font-weight-base" + }, + "lead": { + "$value": "inherit", + "$description": "Lead text font weight.", + "source": "$lead-font-weight" }, - "lead": { "value": "inherit", "type": "fontWeight", "source": "$lead-font-weight", "description": "Lead text font weight." }, - "table-th": { "value": "normal", "type": "fontWeight", "source": "$table-th-font-weight", "description": "Table th font weight." } + "table-th": { + "$value": "bold", + "$description": "Table th font weight.", + "source": "$table-th-font-weight" + }, + "display": { + "1": { + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 1.", + "source": "$display1-weight" + }, + "2": { + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 2.", + "source": "$display2-weight" + }, + "3": { + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 3.", + "source": "$display3-weight" + }, + "4": { + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 4.", + "source": "$display4-weight" + } + } } }, "line-height": { - "base": { "value": "1.5556", "type": "dimension", "source": "$line-height-base", "description": "Basic line height." }, - "lg": { "value": "1.5", "type": "dimension", "source": "$line-height-lg", "description": "Large line height." }, - "sm": { "value": "1.5", "type": "dimension", "source": "$line-height-sm", "description": "Small line height." }, + "$type": "number", + "base": { + "$value": "1.5556", + "$description": "Basic line height.", + "source": "$line-height-base" + }, + "lg": { + "$value": "1.5", + "$description": "Large line height.", + "source": "$line-height-lg" + }, + "sm": { + "$value": "1.5", + "$description": "Small line height.", + "source": "$line-height-sm" + }, "micro": { - "value": ".938rem", "type": "dimension", "source": "$micro-line-height", "description": "Micro utils line height." + "$value": ".938rem", + "$description": "Micro utils line height.", + "source": "$micro-line-height" + }, + "display": { + "base": { + "$value": "1", + "$description": "Standard display line height.", + "source": "$display-line-height" + }, + "mobile": { + "$value": "3.5rem", + "$description": "Mobile display line height.", + "source": "$display-mobile-line-height" + } } + }, + "print-page-size": { + "$type": "dimension", + "$value": "a3", + "source": "$print-page-size" } } } diff --git a/tokens/src/core/utilities/color.json b/tokens/src/core/utilities/color.json index c07768a755..92149da6d2 100644 --- a/tokens/src/core/utilities/color.json +++ b/tokens/src/core/utilities/color.json @@ -2,11 +2,42 @@ "utilities": [ { "filters": { - "category": ["color"], - "type": ["gray", "primary", "secondary", "brand", "success", "info", "warning", "danger", "light", "dark", "accent"], - "item": ["base","100", "200", "300", "400", "500", "600", "700", "800", "900", "a", "b"] + "category": [ + "color" + ], + "type": [ + "gray", + "primary", + "secondary", + "brand", + "success", + "info", + "warning", + "danger", + "light", + "dark", + "accent" + ], + "item": [ + "base", + "100", + "200", + "300", + "400", + "500", + "600", + "700", + "800", + "900", + "a", + "b" + ] }, - "utilityFunctionsToApply": ["bgVariant", "textEmphasisVariant", "borderColor"] + "utilityFunctionsToApply": [ + "bgVariant", + "textEmphasisVariant", + "borderColor" + ] } ] } diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json index 58e1b3753e..0351fba5b6 100644 --- a/tokens/src/themes/light/alias/color.json +++ b/tokens/src/themes/light/alias/color.json @@ -1,113 +1,327 @@ { "color": { + "$type": "color", "bg": { - "base": { "value": "{color.white}", "type": "color", "description": "Basic background color." }, - "active": { "value": "{color.primary.500}", "type": "color", "source": "$component-active-bg", "description": "Active background color." } + "base": { + "$value": "{color.white}", + "$description": "Basic background color." + }, + "active": { + "$value": "{color.primary.500}", + "$description": "Active background color.", + "source": "$component-active-bg" + } }, "text": { - "50":{ + "50": { "black": { - "value": "{color.black}", - "type": "color", - "source": "$text-black-50", - "modify": [{ "type": "alpha", "amount": 0.5 }], - "description": "Black text color with transparency of 50%." + "$value": "{color.black}", + "$description": "Black text color with transparency of 50%.", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$text-black-50" }, "white": { - "value": "{color.white}", - "type": "color", - "source": "$text-white-50", - "modify": [{ "type": "alpha", "amount": 0.5 }], - "description": "White text color with transparency of 50%." + "$value": "{color.white}", + "$description": "White text color with transparency of 50%.", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$text-white-50" } } }, - "active": { "value": "{color.white}", "type": "color", "source": "$component-active-color", "description": "Color for active element." }, - "disabled": { "value": "{color.gray.500}", "type": "color", "description": "Color for disabled element." }, + "active": { + "$value": "{color.white}", + "$description": "Color for active element.", + "source": "$component-active-color" + }, + "disabled": { + "$value": "{color.gray.500}", + "$description": "Color for disabled element." + }, "input": { - "focus": { "value": "{color.primary.500}", "type": "color", "description": "Focused input value color." } + "focus": { + "$value": "{color.primary.500}", + "$description": "Focused input value color." + } }, "table": { "caption": { - "value": "{color.text-muted}", "type": "color", "source": "$table-caption-color", "description": "Table caption color." + "$value": "{color.text-muted}", + "$description": "Table caption color.", + "source": "$table-caption-color" }, "border": { - "value": "{color.border}", "type": "color", "source": "$table-border-color", "description": "Table border color." + "$value": "{color.border}", + "$description": "Table border color.", + "source": "$table-border-color" } }, - "border": { "value": "{color.gray.200}", "type": "color", "source": "$border-color", "description": "Border color." }, + "border": { + "$value": "{color.gray.200}", + "$description": "Border color.", + "source": "$border-color" + }, "theme": { "bg": { - "primary": { "value": "{color.primary.100}", "type": "color", "description": "Theme-specific primary background color." }, - "secondary": { "value": "{color.secondary.100}", "type": "color", "description": "Theme-specific secondary background color." }, - "brand": { "value": "{color.brand.100}", "type": "color", "description": "Theme-specific brand background color." }, - "success": { "value": "{color.success.100}", "type": "color", "description": "Theme-specific success background color." }, - "info": { "value": "{color.info.100}", "type": "color", "description": "Theme-specific info background color." }, - "warning": { "value": "{color.warning.100}", "type": "color", "description": "Theme-specific warning background color." }, - "danger": { "value": "{color.danger.100}", "type": "color", "description": "Theme-specific danger background color." }, - "light": { "value": "{color.light.100}", "type": "color", "description": "Theme-specific light background color." }, - "dark": { "value": "{color.dark.100}", "type": "color", "description": "Theme-specific dark background color." }, - "gray": { "value": "{color.gray.100}", "type": "color", "description": "Theme-specific gray background color." } + "primary": { + "$value": "{color.primary.100}", + "$description": "Theme-specific primary background color." + }, + "secondary": { + "$value": "{color.secondary.100}", + "$description": "Theme-specific secondary background color." + }, + "brand": { + "$value": "{color.brand.100}", + "$description": "Theme-specific brand background color." + }, + "success": { + "$value": "{color.success.100}", + "$description": "Theme-specific success background color." + }, + "info": { + "$value": "{color.info.100}", + "$description": "Theme-specific info background color." + }, + "warning": { + "$value": "{color.warning.100}", + "$description": "Theme-specific warning background color." + }, + "danger": { + "$value": "{color.danger.100}", + "$description": "Theme-specific danger background color." + }, + "light": { + "$value": "{color.light.100}", + "$description": "Theme-specific light background color." + }, + "dark": { + "$value": "{color.dark.100}", + "$description": "Theme-specific dark background color." + }, + "gray": { + "$value": "{color.gray.100}", + "$description": "Theme-specific gray background color." + } }, "border": { - "primary": { "value": "{color.primary.200}", "type": "color", "description": "Theme-specific primary border color." }, - "secondary": { "value": "{color.secondary.200}", "type": "color", "description": "Theme-specific secondary border color." }, - "brand": { "value": "{color.brand.200}", "type": "color", "description": "Theme-specific brand border color." }, - "success": { "value": "{color.success.200}", "type": "color", "description": "Theme-specific success border color." }, - "info": { "value": "{color.info.200}", "type": "color", "description": "Theme-specific info border color." }, - "warning": { "value": "{color.warning.200}", "type": "color", "description": "Theme-specific warning border color." }, - "danger": { "value": "{color.danger.200}", "type": "color", "description": "Theme-specific danger border color." }, - "light": { "value": "{color.light.200}", "type": "color", "description": "Theme-specific light border color." }, - "dark": { "value": "{color.dark.200}", "type": "color", "description": "Theme-specific dark border color." }, - "gray": { "value": "{color.gray.200}", "type": "color", "description": "Theme-specific gray border color." } + "primary": { + "$value": "{color.primary.200}", + "$description": "Theme-specific primary border color." + }, + "secondary": { + "$value": "{color.secondary.200}", + "$description": "Theme-specific secondary border color." + }, + "brand": { + "$value": "{color.brand.200}", + "$description": "Theme-specific brand border color." + }, + "success": { + "$value": "{color.success.200}", + "$description": "Theme-specific success border color." + }, + "info": { + "$value": "{color.info.200}", + "$description": "Theme-specific info border color." + }, + "warning": { + "$value": "{color.warning.200}", + "$description": "Theme-specific warning border color." + }, + "danger": { + "$value": "{color.danger.200}", + "$description": "Theme-specific danger border color." + }, + "light": { + "$value": "{color.light.200}", + "$description": "Theme-specific light border color." + }, + "dark": { + "$value": "{color.dark.200}", + "$description": "Theme-specific dark border color." + }, + "gray": { + "$value": "{color.gray.200}", + "$description": "Theme-specific gray border color." + } }, "focus": { - "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary focus color." }, - "secondary": { "value": "{color.secondary.500}", "type": "color", "description": "Theme-specific secondary focus color." }, - "brand": { "value": "{color.brand.500}", "type": "color", "description": "Theme-specific brand focus color." }, - "success": { "value": "{color.success.500}", "type": "color", "description": "Theme-specific success focus color." }, - "info": { "value": "{color.info.500}", "type": "color", "description": "Theme-specific info focus color." }, - "warning": { "value": "{color.warning.500}", "type": "color", "description": "Theme-specific warning focus color." }, - "danger": { "value": "{color.danger.500}", "type": "color", "description": "Theme-specific danger focus color." }, - "light": { "value": "{color.light.500}", "type": "color", "description": "Theme-specific light focus color." }, - "dark": { "value": "{color.dark.500}", "type": "color", "description": "Theme-specific dark focus color." }, - "gray": { "value": "{color.gray.500}", "type": "color", "description": "Theme-specific gray focus color." } + "primary": { + "$value": "{color.primary.500}", + "$description": "Theme-specific primary focus color." + }, + "secondary": { + "$value": "{color.secondary.500}", + "$description": "Theme-specific secondary focus color." + }, + "brand": { + "$value": "{color.brand.500}", + "$description": "Theme-specific brand focus color." + }, + "success": { + "$value": "{color.success.500}", + "$description": "Theme-specific success focus color." + }, + "info": { + "$value": "{color.info.500}", + "$description": "Theme-specific info focus color." + }, + "warning": { + "$value": "{color.warning.500}", + "$description": "Theme-specific warning focus color." + }, + "danger": { + "$value": "{color.danger.500}", + "$description": "Theme-specific danger focus color." + }, + "light": { + "$value": "{color.light.500}", + "$description": "Theme-specific light focus color." + }, + "dark": { + "$value": "{color.dark.500}", + "$description": "Theme-specific dark focus color." + }, + "gray": { + "$value": "{color.gray.500}", + "$description": "Theme-specific gray focus color." + } }, "default": { - "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary default color." }, - "secondary": { "value": "{color.secondary.500}", "type": "color", "description": "Theme-specific secondary default color." }, - "brand": { "value": "{color.brand.500}", "type": "color", "description": "Theme-specific brand default color." }, - "success": { "value": "{color.success.500}", "type": "color", "description": "Theme-specific success default color." }, - "info": { "value": "{color.info.500}", "type": "color", "description": "Theme-specific info default color." }, - "warning": { "value": "{color.warning.500}", "type": "color", "description": "Theme-specific warning default color." }, - "danger": { "value": "{color.danger.500}", "type": "color", "description": "Theme-specific danger default color." }, - "light": { "value": "{color.light.500}", "type": "color", "description": "Theme-specific light default color." }, - "dark": { "value": "{color.dark.500}", "type": "color", "description": "Theme-specific dark default color." }, - "gray": { "value": "{color.gray.500}", "type": "color", "description": "Theme-specific gray default color." } + "primary": { + "$value": "{color.primary.500}", + "$description": "Theme-specific primary default color." + }, + "secondary": { + "$value": "{color.secondary.500}", + "$description": "Theme-specific secondary default color." + }, + "brand": { + "$value": "{color.brand.500}", + "$description": "Theme-specific brand default color." + }, + "success": { + "$value": "{color.success.500}", + "$description": "Theme-specific success default color." + }, + "info": { + "$value": "{color.info.500}", + "$description": "Theme-specific info default color." + }, + "warning": { + "$value": "{color.warning.500}", + "$description": "Theme-specific warning default color." + }, + "danger": { + "$value": "{color.danger.500}", + "$description": "Theme-specific danger default color." + }, + "light": { + "$value": "{color.light.500}", + "$description": "Theme-specific light default color." + }, + "dark": { + "$value": "{color.dark.500}", + "$description": "Theme-specific dark default color." + }, + "gray": { + "$value": "{color.gray.500}", + "$description": "Theme-specific gray default color." + } }, "hover": { - "primary": { "value": "{color.primary.700}", "type": "color", "description": "Theme-specific primary hover color." }, - "secondary": { "value": "{color.secondary.700}", "type": "color", "description": "Theme-specific secondary hover color." }, - "brand": { "value": "{color.brand.700}", "type": "color", "description": "Theme-specific brand hover color." }, - "success": { "value": "{color.success.700}", "type": "color", "description": "Theme-specific success hover color." }, - "info": { "value": "{color.info.700}", "type": "color", "description": "Theme-specific info hover color." }, - "warning": { "value": "{color.warning.700}", "type": "color", "description": "Theme-specific warning hover color." }, - "danger": { "value": "{color.danger.700}", "type": "color", "description": "Theme-specific danger hover color." }, - "light": { "value": "{color.light.700}", "type": "color", "description": "Theme-specific light hover color." }, - "dark": { "value": "{color.dark.700}", "type": "color", "description": "Theme-specific dark hover color." }, - "gray": { "value": "{color.gray.700}", "type": "color", "description": "Theme-specific gray hover color." } + "primary": { + "$value": "{color.primary.700}", + "$description": "Theme-specific primary hover color." + }, + "secondary": { + "$value": "{color.secondary.700}", + "$description": "Theme-specific secondary hover color." + }, + "brand": { + "$value": "{color.brand.700}", + "$description": "Theme-specific brand hover color." + }, + "success": { + "$value": "{color.success.700}", + "$description": "Theme-specific success hover color." + }, + "info": { + "$value": "{color.info.700}", + "$description": "Theme-specific info hover color." + }, + "warning": { + "$value": "{color.warning.700}", + "$description": "Theme-specific warning hover color." + }, + "danger": { + "$value": "{color.danger.700}", + "$description": "Theme-specific danger hover color." + }, + "light": { + "$value": "{color.light.700}", + "$description": "Theme-specific light hover color." + }, + "dark": { + "$value": "{color.dark.700}", + "$description": "Theme-specific dark hover color." + }, + "gray": { + "$value": "{color.gray.700}", + "$description": "Theme-specific gray hover color." + } }, "active": { - "primary": { "value": "{color.primary.900}", "type": "color", "description": "Theme-specific primary active color." }, - "secondary": { "value": "{color.secondary.900}", "type": "color", "description": "Theme-specific secondary active color." }, - "brand": { "value": "{color.brand.900}", "type": "color", "description": "Theme-specific brand active color." }, - "success": { "value": "{color.success.900}", "type": "color", "description": "Theme-specific success active color." }, - "info": { "value": "{color.info.900}", "type": "color", "description": "Theme-specific info active color." }, - "warning": { "value": "{color.warning.900}", "type": "color", "description": "Theme-specific warning active color." }, - "danger": { "value": "{color.danger.900}", "type": "color", "description": "Theme-specific danger active color." }, - "light": { "value": "{color.light.900}", "type": "color", "description": "Theme-specific light active color." }, - "dark": { "value": "{color.dark.900}", "type": "color", "description": "Theme-specific dark active color." }, - "gray": { "value": "{color.gray.900}", "type": "color", "description": "Theme-specific gray active color." } + "primary": { + "$value": "{color.primary.900}", + "$description": "Theme-specific primary active color." + }, + "secondary": { + "$value": "{color.secondary.900}", + "$description": "Theme-specific secondary active color." + }, + "brand": { + "$value": "{color.brand.900}", + "$description": "Theme-specific brand active color." + }, + "success": { + "$value": "{color.success.900}", + "$description": "Theme-specific success active color." + }, + "info": { + "$value": "{color.info.900}", + "$description": "Theme-specific info active color." + }, + "warning": { + "$value": "{color.warning.900}", + "$description": "Theme-specific warning active color." + }, + "danger": { + "$value": "{color.danger.900}", + "$description": "Theme-specific danger active color." + }, + "light": { + "$value": "{color.light.900}", + "$description": "Theme-specific light active color." + }, + "dark": { + "$value": "{color.dark.900}", + "$description": "Theme-specific dark active color." + }, + "gray": { + "$value": "{color.gray.900}", + "$description": "Theme-specific gray active color." + } } } } diff --git a/tokens/src/themes/light/components/Alert.json b/tokens/src/themes/light/components/Alert.json index 723ab050b5..9c6e36d01a 100644 --- a/tokens/src/themes/light/components/Alert.json +++ b/tokens/src/themes/light/components/Alert.json @@ -1,36 +1,67 @@ { "color": { + "$type": "color", "alert": { - "title": { "value": "{color.black}", "type": "color", "source": "$alert-title-color" }, - "content": { "value": "{color.gray.700}", "type": "color", "source": "$alert-content-color" }, + "title": { + "$value": "{color.black}", + "source": "$alert-title-color" + }, + "content": { + "$value": "{color.gray.700}", + "source": "$alert-content-color" + }, "icon": { "success": { - "value": "{color.theme.default.success}", "type": "color", "source": "$alert-success-icon-color" + "$value": "{color.theme.default.success}", + "source": "$alert-success-icon-color" + }, + "info": { + "$value": "{color.theme.default.info}", + "source": "$alert-info-icon-color" }, - "info": { "value": "{color.theme.default.info}", "type": "color", "source": "$alert-info-icon-color" }, "danger": { - "value": "{color.theme.default.danger}", "type": "color", "source": "$alert-danger-icon-color" + "$value": "{color.theme.default.danger}", + "source": "$alert-danger-icon-color" }, "warning": { - "value": "{color.theme.default.warning}", "type": "color", "source": "$alert-warning-icon-color" + "$value": "{color.theme.default.warning}", + "source": "$alert-warning-icon-color" } }, "bg": { - "success": { "value": "{color.theme.bg.success}", "type": "color", "source": "$alert-success-bg" }, - "info": { "value": "{color.theme.bg.info}", "type": "color", "source": "$alert-info-bg" }, - "danger": { "value": "{color.theme.bg.danger}", "type": "color", "source": "$alert-danger-bg" }, - "warning": { "value": "{color.theme.bg.warning}", "type": "color", "source": "$alert-warning-bg" } + "success": { + "$value": "{color.theme.bg.success}", + "source": "$alert-success-bg" + }, + "info": { + "$value": "{color.theme.bg.info}", + "source": "$alert-info-bg" + }, + "danger": { + "$value": "{color.theme.bg.danger}", + "source": "$alert-danger-bg" + }, + "warning": { + "$value": "{color.theme.bg.warning}", + "source": "$alert-warning-bg" + } }, "border": { "success": { - "value": "{color.theme.border.success}", "type": "color", "source": "$alert-success-border-color" + "$value": "{color.theme.border.success}", + "source": "$alert-success-border-color" + }, + "info": { + "$value": "{color.theme.border.info}", + "source": "$alert-info-border-color" }, - "info": { "value": "{color.theme.border.info}", "type": "color", "source": "$alert-info-border-color" }, "danger": { - "value": "{color.theme.border.danger}", "type": "color", "source": "$alert-danger-border-color" + "$value": "{color.theme.border.danger}", + "source": "$alert-danger-border-color" }, "warning": { - "value": "{color.theme.border.warning}", "type": "color", "source": "$alert-warning-border-color" + "$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 868e08e3d4..2833299995 100644 --- a/tokens/src/themes/light/components/Annotation.json +++ b/tokens/src/themes/light/components/Annotation.json @@ -1,28 +1,72 @@ { "elevation": { + "$type": "shadow", "annotation": { "box-shadow": { - "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", - "type": "shadow", + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "2px", + "blur": "4px" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "2px", + "blur": "8px" + } + ], "source": "$annotation-box-shadow" } } }, "color": { + "$type": "color", "annotation": { "text": { - "success": { "value": "{color.white}", "type": "color", "source": "$annotation-success-color" }, - "warning": { "value": "{color.black}", "type": "color", "source": "$annotation-warning-color" }, - "error": { "value": "{color.white}", "type": "color", "source": "$annotation-error-color" }, - "light": { "value": "{color.primary.500}", "type": "color", "source": "$annotation-light-color" }, - "dark": { "value": "{color.white}", "type": "color", "source": "$annotation-dark-color" } + "success": { + "$value": "{color.white}", + "source": "$annotation-success-color" + }, + "warning": { + "$value": "{color.black}", + "source": "$annotation-warning-color" + }, + "error": { + "$value": "{color.white}", + "source": "$annotation-error-color" + }, + "light": { + "$value": "{color.primary.500}", + "source": "$annotation-light-color" + }, + "dark": { + "$value": "{color.white}", + "source": "$annotation-dark-color" + } }, "bg": { - "success": { "value": "{color.success.base}", "type": "color", "source": "$annotation-success-bg" }, - "warning": { "value": "{color.accent.b}", "type": "color", "source": "$annotation-warning-bg" }, - "error": { "value": "{color.danger.base}", "type": "color", "source": "$annotation-error-bg" }, - "light": { "value": "{color.white}", "type": "color", "source": "$annotation-light-bg" }, - "dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg" } + "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/Avatar.json b/tokens/src/themes/light/components/Avatar.json index 614960f5f8..be1da05fe3 100644 --- a/tokens/src/themes/light/components/Avatar.json +++ b/tokens/src/themes/light/components/Avatar.json @@ -1,7 +1,8 @@ { "color": { + "$type": "color", "avatar": { - "border": { "value": "{color.light.300}", "type": "color" } + "border": { "$value": "{color.light.300}" } } } } diff --git a/tokens/src/themes/light/components/Badge.json b/tokens/src/themes/light/components/Badge.json index 6ff6e21587..33d179b63e 100644 --- a/tokens/src/themes/light/components/Badge.json +++ b/tokens/src/themes/light/components/Badge.json @@ -1,183 +1,310 @@ { "color": { + "$type": "color", "badge": { "text": { "primary": { - "value": "{color.primary.base}", - "type": "color", - "source": "$badge-primary-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.primary.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-primary-color" }, "secondary": { - "value": "{color.secondary.base}", - "type": "color", - "source": "$badge-secondary-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.secondary.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-secondary-color" }, "success": { - "value": "{color.success.base}", - "type": "color", - "source": "$badge-success-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.success.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-success-color" }, "danger": { - "value": "{color.danger.base}", - "type": "color", - "source": "$badge-danger-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.danger.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-danger-color" }, "warning": { - "value": "{color.warning.base}", - "type": "color", - "source": "$badge-warning-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.warning.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-warning-color" }, "info": { - "value": "{color.info.base}", - "type": "color", - "source": "$badge-info-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.info.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-info-color" }, "light": { - "value": "{color.light.base}", - "type": "color", - "source": "$badge-light-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.light.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-light-color" }, "dark": { - "value": "{color.dark.base}", - "type": "color", - "source": "$badge-dark-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.dark.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-dark-color" } }, "bg": { - "primary": { "value": "{color.primary.base}", "type": "color", "source": "$badge-primary-bg" }, - "secondary": { "value": "{color.secondary.base}", "type": "color", "source": "$badge-secondary-bg" }, - "success": { "value": "{color.success.base}", "type": "color", "source": "$badge-success-bg" }, - "warning": { "value": "{color.warning.base}", "type": "color", "source": "$badge-warning-bg" }, - "danger": { "value": "{color.danger.base}", "type": "color", "source": "$badge-danger-bg" }, - "info": { "value": "{color.info.base}", "type": "color", "source": "$badge-info-bg" }, - "light": { "value": "{color.light.base}", "type": "color", "source": "$badge-light-bg" }, - "dark": { "value": "{color.dark.base}", "type": "color", "source": "$badge-dark-bg" } + "primary": { + "$value": "{color.primary.base}", + "source": "$badge-primary-bg" + }, + "secondary": { + "$value": "{color.secondary.base}", + "source": "$badge-secondary-bg" + }, + "success": { + "$value": "{color.success.base}", + "source": "$badge-success-bg" + }, + "warning": { + "$value": "{color.warning.base}", + "source": "$badge-warning-bg" + }, + "danger": { + "$value": "{color.danger.base}", + "source": "$badge-danger-bg" + }, + "info": { + "$value": "{color.info.base}", + "source": "$badge-info-bg" + }, + "light": { + "$value": "{color.light.base}", + "source": "$badge-light-bg" + }, + "dark": { + "$value": "{color.dark.base}", + "source": "$badge-dark-bg" + } }, "focus": { "primary": { - "value": "{color.badge.text.primary}", "type": "color", "source": "$badge-primary-focus-color" + "$value": "{color.badge.text.primary}", + "source": "$badge-primary-focus-color" }, "secondary": { - "value": "{color.badge.text.secondary}", "type": "color", "source": "$badge-secondary-focus-color" + "$value": "{color.badge.text.secondary}", + "source": "$badge-secondary-focus-color" }, "success": { - "value": "{color.badge.text.success}", "type": "color", "source": "$badge-success-focus-color" + "$value": "{color.badge.text.success}", + "source": "$badge-success-focus-color" }, "warning": { - "value": "{color.badge.text.warning}", "type": "color", "source": "$badge-warning-focus-color" + "$value": "{color.badge.text.warning}", + "source": "$badge-warning-focus-color" }, "danger": { - "value": "{color.badge.text.danger}", "type": "color", "source": "$badge-danger-focus-color" + "$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" }, - "info": { "value": "{color.badge.text.info}", "type": "color", "source": "$badge-info-focus-color" }, - "light": { "value": "{color.badge.text.light}", "type": "color", "source": "$badge-light-focus-color" }, - "dark": { "value": "{color.badge.text.dark}", "type": "color", "source": "$badge-dark-focus-color" }, "bg": { "primary": { - "value": "{color.badge.bg.primary}", - "type": "color", - "source": "$badge-primary-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.badge.bg.primary}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-primary-focus-bg" }, "secondary": { - "value": "{color.badge.bg.secondary}", - "type": "color", - "source": "$badge-secondary-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.badge.bg.secondary}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-secondary-focus-bg" }, "success": { - "value": "{color.badge.bg.success}", - "type": "color", - "source": "$badge-success-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.badge.bg.success}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-success-focus-bg" }, "danger": { - "value": "{color.badge.bg.danger}", - "type": "color", - "source": "$badge-danger-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.badge.bg.danger}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-danger-focus-bg" }, "warning": { - "value": "{color.badge.bg.warning}", - "type": "color", - "source": "$badge-warning-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.badge.bg.warning}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-warning-focus-bg" }, "info": { - "value": "{color.badge.bg.info}", - "type": "color", - "source": "$badge-info-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.badge.bg.info}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-info-focus-bg" }, "light": { - "value": "{color.badge.bg.light}", - "type": "color", - "source": "$badge-light-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.badge.bg.light}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-light-focus-bg" }, "dark": { - "value": "{color.badge.bg.dark}", - "type": "color", - "source": "$badge-dark-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.badge.bg.dark}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-dark-focus-bg" } }, "box-shadow": { "primary": { - "value": "{color.badge.bg.primary}", - "type": "color", - "source": "$badge-primary-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "$value": "{color.badge.bg.primary}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-primary-focus-box-shadow-color" }, "secondary": { - "value": "{color.badge.bg.secondary}", - "type": "color", - "source": "$badge-secondary-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "$value": "{color.badge.bg.secondary}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-secondary-focus-box-shadow-color" }, "success": { - "value": "{color.badge.bg.success}", - "type": "color", - "source": "$badge-success-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "$value": "{color.badge.bg.success}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-success-focus-box-shadow-color" }, "danger": { - "value": "{color.badge.bg.danger}", - "type": "color", - "source": "$badge-danger-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "$value": "{color.badge.bg.danger}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-danger-focus-box-shadow-color" }, "warning": { - "value": "{color.badge.bg.warning}", - "type": "color", - "source": "$badge-warning-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "$value": "{color.badge.bg.warning}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-warning-focus-box-shadow-color" }, "info": { - "value": "{color.badge.bg.info}", - "type": "color", - "source": "$badge-info-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "$value": "{color.badge.bg.info}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-info-focus-box-shadow-color" }, "light": { - "value": "{color.badge.bg.light}", - "type": "color", - "source": "$badge-light-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "$value": "{color.badge.bg.light}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-light-focus-box-shadow-color" }, "dark": { - "value": "{color.badge.bg.dark}", - "type": "color", - "source": "$badge-dark-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "$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 25ec20acef..e7f49af471 100644 --- a/tokens/src/themes/light/components/Breadcrumb.json +++ b/tokens/src/themes/light/components/Breadcrumb.json @@ -1,12 +1,28 @@ { "color": { + "$type": "color", "breadcrumb": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" }, - "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" }, + "base": { + "$value": "{color.primary.500}", + "source": "$breadcrumb-color" + }, + "active": { + "$value": "{color.gray.500}", + "source": "$breadcrumb-active-color" + }, "inverse": { - "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" }, - "active": { "value": "{color.light.500}", "type": "color", "source": "$breadcrumb-inverse-active" }, - "spacer": { "value": "{color.light.700}", "type": "color", "source": "$breadcrumb-inverse-spacer" } + "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 b69eaec093..45f4d61c87 100644 --- a/tokens/src/themes/light/components/Bubble.json +++ b/tokens/src/themes/light/components/Bubble.json @@ -1,17 +1,42 @@ { "color": { + "$type": "color", "bubble": { "text": { - "success": { "value": "{color.white}", "type": "color", "source": "$bubble-success-color" }, - "warning": { "value": "{color.white}", "type": "color", "source": "$bubble-warning-color" }, - "error": { "value": "{color.white}", "type": "color", "source": "$bubble-error-color" }, - "primary": { "value": "{color.white}", "type": "color", "source": "$bubble-primary-color" } + "success": { + "$value": "{color.white}", + "source": "$bubble-success-color" + }, + "warning": { + "$value": "{color.white}", + "source": "$bubble-warning-color" + }, + "error": { + "$value": "{color.white}", + "source": "$bubble-error-color" + }, + "primary": { + "$value": "{color.white}", + "source": "$bubble-primary-color" + } }, "bg": { - "success": { "value": "{color.success.base}", "type": "color", "source": "$bubble-success-bg" }, - "warning": { "value": "{color.warning.base}", "type": "color", "source": "$bubble-warning-bg" }, - "error": { "value": "{color.danger.base}", "type": "color", "source": "$bubble-error-bg" }, - "primary": { "value": "{color.primary.base}", "type": "color", "source": "$bubble-primary-bg" } + "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 7b16f40169..0798a40207 100644 --- a/tokens/src/themes/light/components/Button/brand.json +++ b/tokens/src/themes/light/components/Button/brand.json @@ -1,256 +1,347 @@ { "color": { + "$type": "color", "btn": { "text": { "brand": { - "value": "{color.btn.bg.brand}", - "type": "color", - "source": "$btn-brand-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.bg.brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-color" + }, + "outline-brand": { + "$value": "{color.brand.base}", + "source": "$btn-brand-outline-color" + }, + "inverse-brand": { + "$value": "{color.brand.base}", + "source": "$btn-brand-inverse-color" }, - "outline-brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-outline-color" }, - "inverse-brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-inverse-color" }, "inverse-outline-brand": { - "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-color" + "$value": "{color.white}", + "source": "$btn-brand-inverse-outline-color" } }, "bg": { - "brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-bg" }, - "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-bg" }, + "brand": { + "$value": "{color.brand.base}", + "source": "$btn-brand-bg" + }, + "outline-brand": { + "$value": "inherit", + "source": "$btn-brand-outline-bg" + }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", - "source": "$btn-brand-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.text.inverse-brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-inverse-bg" }, "inverse-outline-brand": { - "value": "transparent", - "type": "color", + "$value": "transparent", "source": "$btn-brand-inverse-outline-bg" } }, "border": { - "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-border-color" }, + "brand": { + "$value": "{color.btn.bg.brand}", + "source": "$btn-brand-border-color" + }, "outline-brand": { - "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-outline-border-color" + "$value": "{color.brand.base}", + "source": "$btn-brand-outline-border-color" }, "inverse-outline-brand": { - "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-border-color" + "$value": "{color.white}", + "source": "$btn-brand-inverse-outline-border-color" }, - "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-border-color" } + "inverse-brand": { + "$value": "transparent", + "source": "$btn-brand-inverse-border-color" + } }, "hover": { "text": { "brand": { - "value": "{color.btn.hover.bg.brand}", - "type": "color", - "source": "$btn-brand-hover-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.hover.bg.brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-hover-color" }, "outline-brand": { - "value": "{color.theme.hover.brand}", - "type": "color", + "$value": "{color.theme.hover.brand}", "source": "$btn-brand-outline-hover-color" }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", - "source": "$btn-brand-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.text.inverse-brand}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-brand-inverse-hover-color" }, "inverse-outline-brand": { - "value": "{color.theme.hover.brand}", - "type": "color", + "$value": "{color.theme.hover.brand}", "source": "$btn-brand-inverse-outline-hover-color" } }, "bg": { - "brand": { "value": "{color.theme.hover.brand}", "type": "color", "source": "$btn-brand-hover-bg" }, - "outline-brand": { "value": "{color.brand.100}", "type": "color", "source": "$btn-brand-outline-hover-bg" }, + "brand": { + "$value": "{color.theme.hover.brand}", + "source": "$btn-brand-hover-bg" + }, + "outline-brand": { + "$value": "{color.brand.100}", + "source": "$btn-brand-outline-hover-bg" + }, "inverse-brand": { - "value": "{color.btn.bg.inverse-brand}", - "type": "color", - "source": "$btn-brand-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.bg.inverse-brand}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-brand-inverse-hover-bg" }, "inverse-outline-brand": { - "value": "{color.brand.100}", "type": "color", "source": "$btn-brand-inverse-outline-hover-bg" + "$value": "{color.brand.100}", + "source": "$btn-brand-inverse-outline-hover-bg" } }, "border": { "brand": { - "value": "{color.theme.hover.brand}", "type": "color", "source": "$btn-brand-hover-border-color" + "$value": "{color.theme.hover.brand}", + "source": "$btn-brand-hover-border-color" }, "outline-brand": { - "value": "{color.brand.900}", "type": "color", "source": "$btn-brand-outline-hover-border-color" + "$value": "{color.brand.900}", + "source": "$btn-brand-outline-hover-border-color" }, "inverse-outline-brand": { - "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-hover-border-color" + "$value": "transparent", + "source": "$btn-brand-inverse-outline-hover-border-color" }, - "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-hover-border-color" } + "inverse-brand": { + "$value": "transparent", + "source": "$btn-brand-inverse-hover-border-color" + } } }, "active": { "text": { "brand": { - "value": "{color.btn.active.bg.brand}", - "type": "color", - "source": "$btn-brand-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-active-color" }, "outline-brand": { - "value": "{color.btn.active.bg.outline-brand}", - "type": "color", - "source": "$btn-brand-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.outline-brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-outline-active-color" }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", - "source": "$btn-brand-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.btn.text.inverse-brand}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-brand-inverse-active-color" }, "inverse-outline-brand": { - "value": "{color.btn.active.bg.inverse-outline-brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "$value": "{color.btn.active.bg.inverse-outline-brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-inverse-outline-active-color" + } }, "bg": { "brand": { - "value": "{color.theme.active.brand}", "type": "color", "source": "$btn-brand-active-bg" + "$value": "{color.theme.active.brand}", + "source": "$btn-brand-active-bg" }, "outline-brand": { - "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-outline-active-bg" + "$value": "{color.theme.bg.brand}", + "source": "$btn-brand-outline-active-bg" }, "inverse-outline-brand": { - "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-inverse-outline-active-bg" + "$value": "{color.theme.bg.brand}", + "source": "$btn-brand-inverse-outline-active-bg" }, - "inverse-brand": { "value": "{color.gray.100}", "type": "color", "source": "$btn-brand-inverse-active-bg" } + "inverse-brand": { + "$value": "{color.gray.100}", + "source": "$btn-brand-inverse-active-bg" + } }, "border": { "brand": { - "value": "{color.theme.active.brand}", "type": "color", "source": "$btn-brand-active-border-color" + "$value": "{color.theme.active.brand}", + "source": "$btn-brand-active-border-color" }, "outline-brand": { - "value": "{color.theme.active.brand}", - "type": "color", + "$value": "{color.theme.active.brand}", "source": "$btn-brand-outline-active-border-color" }, "inverse-brand": { - "value": "transparent", - "type": "color", + "$value": "transparent", "source": "$btn-brand-inverse-active-border-color" }, "inverse-outline-brand": { - "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-active-border-color" + "$value": "transparent", + "source": "$btn-brand-inverse-outline-active-border-color" } } }, "focus": { "text": { - "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-focus-color" }, + "brand": { + "$value": "{color.btn.text.brand}", + "source": "$btn-brand-focus-color" + }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", + "$value": "{color.btn.text.inverse-brand}", "source": "$btn-brand-inverse-focus-color" }, "outline-brand": { - "value": "{color.btn.text.outline-brand}", - "type": "color", + "$value": "{color.btn.text.outline-brand}", "source": "$btn-brand-outline-focus-color" }, "inverse-outline-brand": { - "value": "{color.btn.text.inverse-outline-brand}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-brand}", "source": "$btn-brand-inverse-outline-focus-color" } }, "border": { "brand": { - "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-focus-border-color" + "$value": "{color.btn.border.brand}", + "source": "$btn-brand-focus-border-color" }, "outline-brand": { - "value": "{color.btn.border.outline-brand}", - "type": "color", + "$value": "{color.btn.border.outline-brand}", "source": "$btn-brand-outline-focus-border-color" }, "inverse-brand": { - "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-focus-border-color" + "$value": "{color.white}", + "source": "$btn-brand-inverse-focus-border-color" }, "inverse-outline-brand": { - "value": "{color.btn.border.inverse-outline-brand}", "type": "color", "source": "$btn-brand-inverse-outline-focus-border-color" + "$value": "{color.btn.border.inverse-outline-brand}", + "source": "$btn-brand-inverse-outline-focus-border-color" } }, "bg": { - "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-focus-bg" }, + "brand": { + "$value": "{color.btn.bg.brand}", + "source": "$btn-brand-focus-bg" + }, "inverse-brand": { - "value": "{color.btn.bg.inverse-brand}", - "source": "$btn-brand-inverse-focus-bg", - "type": "color" + "$value": "{color.btn.bg.inverse-brand}", + "source": "$btn-brand-inverse-focus-bg" }, - "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-focus-bg" }, - "inverse-outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-inverse-outline-focus-bg" } + "outline-brand": { + "$value": "inherit", + "source": "$btn-brand-outline-focus-bg" + }, + "inverse-outline-brand": { + "$value": "inherit", + "source": "$btn-brand-inverse-outline-focus-bg" + } }, "outline": { - "brand": { "value": "{color.theme.focus.brand}", "type": "color", "source": "$btn-brand-focus-outline-color" }, + "brand": { + "$value": "{color.theme.focus.brand}", + "source": "$btn-brand-focus-outline-color" + }, "outline-brand": { - "value": "{color.theme.focus.brand}", - "type": "color", + "$value": "{color.theme.focus.brand}", "source": "$btn-brand-outline-focus-outline-color" }, "inverse-brand": { - "value": "{color.btn.focus.border.inverse-brand}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-brand}", "source": "$btn-brand-inverse-focus-outline-color" }, "inverse-outline-brand": { - "value": "{color.btn.focus.border.inverse-outline-brand}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-outline-brand}", "source": "$btn-brand-inverse-outline-focus-outline-color" } } }, "disabled": { "text": { - "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-disabled-color" }, - "inverse-brand": { "value": "{color.brand.500}", "type": "color", "source": "$btn-brand-inverse-disabled-color" }, + "brand": { + "$value": "{color.btn.text.brand}", + "source": "$btn-brand-disabled-color" + }, + "inverse-brand": { + "$value": "{color.brand.500}", + "source": "$btn-brand-inverse-disabled-color" + }, "outline-brand": { - "value": "{color.btn.hover.text.outline-brand}", - "type": "color", + "$value": "{color.btn.hover.text.outline-brand}", "source": "$btn-brand-outline-disabled-color" }, "inverse-outline-brand": { - "value": "{color.btn.text.inverse-outline-brand}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-brand}", "source": "$btn-brand-inverse-outline-disabled-color" } }, "bg": { - "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-disabled-bg" }, - "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-disabled-bg" }, - "inverse-brand": { "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-disabled-bg" }, + "brand": { + "$value": "{color.btn.bg.brand}", + "source": "$btn-brand-disabled-bg" + }, + "outline-brand": { + "$value": "inherit", + "source": "$btn-brand-outline-disabled-bg" + }, + "inverse-brand": { + "$value": "{color.white}", + "source": "$btn-brand-inverse-disabled-bg" + }, "inverse-outline-brand": { - "value": "{color.btn.bg.inverse-outline-brand}", - "type": "color", + "$value": "{color.btn.bg.inverse-outline-brand}", "source": "$btn-brand-inverse-outline-disabled-bg" } }, "border": { - "brand": { "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-disabled-border-color" }, + "brand": { + "$value": "{color.btn.border.brand}", + "source": "$btn-brand-disabled-border-color" + }, "outline-brand": { - "value": "{color.btn.border.outline-brand}", - "type": "color", + "$value": "{color.btn.border.outline-brand}", "source": "$btn-brand-outline-disabled-border-color" }, "inverse-brand": { - "value": "{color.btn.disabled.bg.inverse-brand}", - "type": "color", + "$value": "{color.btn.disabled.bg.inverse-brand}", "source": "$btn-brand-inverse-disabled-border-color" }, "inverse-outline-brand": { - "value": "{color.btn.text.inverse-outline-brand}", - "type": "color", + "$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 8eabdf63ae..d7147bb7d5 100644 --- a/tokens/src/themes/light/components/Button/core.json +++ b/tokens/src/themes/light/components/Button/core.json @@ -1,24 +1,35 @@ { "color": { + "$type": "color", "btn": { - "disabled-link": { "value": "{color.disabled}", "type": "color", "source": "$btn-link-disabled-color" } + "disabled-link": { + "$value": "{color.disabled}", + "source": "$btn-link-disabled-color" + } } }, - "elevation": { + "elevation": { + "$type": "shadow", "btn": { "box-shadow": { "base": { - "value": "none", - "type": "shadow", + "$value": "none", "source": "$btn-box-shadow" }, - "active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" } + "active": { + "$value": "none", + "source": "$btn-active-box-shadow" + } } } }, "other": { + "$type": "ratio", "btn": { - "disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" } + "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 9272c9473c..5491462af9 100644 --- a/tokens/src/themes/light/components/Button/danger.json +++ b/tokens/src/themes/light/components/Button/danger.json @@ -1,243 +1,347 @@ { "color": { + "$type": "color", "btn": { "text": { "danger": { - "value": "{color.btn.bg.danger}", - "type": "color", - "source": "$btn-danger-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.bg.danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-color" }, "outline-danger": { - "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-color" + "$value": "{color.danger.base}", + "source": "$btn-danger-outline-color" }, "inverse-danger": { - "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-color" + "$value": "{color.danger.base}", + "source": "$btn-danger-inverse-color" }, "inverse-outline-danger": { - "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-color" + "$value": "{color.white}", + "source": "$btn-danger-inverse-outline-color" } }, "bg": { - "danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-bg" }, - "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-bg" }, + "danger": { + "$value": "{color.danger.base}", + "source": "$btn-danger-bg" + }, + "outline-danger": { + "$value": "inherit", + "source": "$btn-danger-outline-bg" + }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", - "source": "$btn-danger-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.text.inverse-danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-inverse-bg" }, - "inverse-outline-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-bg" } + "inverse-outline-danger": { + "$value": "transparent", + "source": "$btn-danger-inverse-outline-bg" + } }, "border": { - "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-border-color" }, + "danger": { + "$value": "{color.btn.bg.danger}", + "source": "$btn-danger-border-color" + }, "outline-danger": { - "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-border-color" + "$value": "{color.danger.base}", + "source": "$btn-danger-outline-border-color" + }, + "inverse-danger": { + "$value": "transparent", + "source": "$btn-danger-inverse-border-color" }, - "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-border-color" }, "inverse-outline-danger": { - "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-border-color" + "$value": "{color.white}", + "source": "$btn-danger-inverse-outline-border-color" } }, "hover": { "text": { "danger": { - "value": "{color.btn.hover.bg.danger}", - "type": "color", - "source": "$btn-danger-hover-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.hover.bg.danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-hover-color" }, "outline-danger": { - "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-outline-hover-color" + "$value": "{color.theme.hover.danger}", + "source": "$btn-danger-outline-hover-color" }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", - "source": "$btn-danger-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.text.inverse-danger}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-danger-inverse-hover-color" }, "inverse-outline-danger": { - "value": "{color.theme.hover.danger}", - "type": "color", + "$value": "{color.theme.hover.danger}", "source": "$btn-danger-inverse-outline-hover-color" } }, "bg": { - "danger": { "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-hover-bg" }, + "danger": { + "$value": "{color.theme.hover.danger}", + "source": "$btn-danger-hover-bg" + }, "outline-danger": { - "value": "{color.danger.100}", "type": "color", "source": "$btn-danger-outline-hover-bg" + "$value": "{color.danger.100}", + "source": "$btn-danger-outline-hover-bg" }, "inverse-danger": { - "value": "{color.btn.bg.inverse-danger}", - "type": "color", - "source": "$btn-danger-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.bg.inverse-danger}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-danger-inverse-hover-bg" }, "inverse-outline-danger": { - "value": "{color.danger.100}", "type": "color", "source": "$btn-danger-inverse-outline-hover-bg" + "$value": "{color.danger.100}", + "source": "$btn-danger-inverse-outline-hover-bg" } }, "border": { "danger": { - "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-hover-border-color" + "$value": "{color.theme.hover.danger}", + "source": "$btn-danger-hover-border-color" }, "outline-danger": { - "value": "{color.danger.900}", "type": "color", "source": "$btn-danger-outline-hover-border-color" + "$value": "{color.danger.900}", + "source": "$btn-danger-outline-hover-border-color" + }, + "inverse-danger": { + "$value": "transparent", + "source": "$btn-danger-inverse-hover-border-color" }, - "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-hover-border-color" }, "inverse-outline-danger": { - "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-hover-border-color" + "$value": "transparent", + "source": "$btn-danger-inverse-outline-hover-border-color" } } }, "active": { "text": { "danger": { - "value": "{color.btn.active.bg.danger}", - "type": "color", - "source": "$btn-danger-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-active-color" }, "outline-danger": { - "value": "{color.btn.active.bg.outline-danger}", - "type": "color", - "source": "$btn-danger-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.outline-danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-outline-active-color" }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", - "source": "$btn-danger-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.btn.text.inverse-danger}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-danger-inverse-active-color" }, "inverse-outline-danger": { - "value": "{color.btn.active.bg.inverse-outline-danger}", - "type": "color", - "source": "$btn-danger-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "$value": "{color.btn.active.bg.inverse-outline-danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-inverse-outline-active-color" + } }, "bg": { "danger": { - "value": "{color.theme.active.danger}", "type": "color", "source": "$btn-danger-active-bg" + "$value": "{color.theme.active.danger}", + "source": "$btn-danger-active-bg" }, "outline-danger": { - "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-outline-active-bg" + "$value": "{color.theme.bg.danger}", + "source": "$btn-danger-outline-active-bg" + }, + "inverse-danger": { + "$value": "{color.gray.100}", + "source": "$btn-danger-inverse-active-bg" }, - "inverse-danger": { "value": "{color.gray.100}", "type": "color", "source": "$btn-danger-inverse-active-bg" }, "inverse-outline-danger": { - "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-inverse-outline-active-bg" + "$value": "{color.theme.bg.danger}", + "source": "$btn-danger-inverse-outline-active-bg" } }, "border": { "danger": { - "value": "{color.theme.active.danger}", "type": "color", "source": "$btn-danger-active-border-color" + "$value": "{color.theme.active.danger}", + "source": "$btn-danger-active-border-color" }, "outline-danger": { - "value": "{color.theme.active.danger}", - "type": "color", + "$value": "{color.theme.active.danger}", "source": "$btn-danger-outline-active-border-color" }, - "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-active-border-color" }, + "inverse-danger": { + "$value": "transparent", + "source": "$btn-danger-inverse-active-border-color" + }, "inverse-outline-danger": { - "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-active-border-color" } + "$value": "transparent", + "source": "$btn-danger-inverse-outline-active-border-color" + } } }, "focus": { "text": { - "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-focus-color" }, + "danger": { + "$value": "{color.btn.text.danger}", + "source": "$btn-danger-focus-color" + }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", + "$value": "{color.btn.text.inverse-danger}", "source": "$btn-danger-inverse-focus-color" }, "outline-danger": { - "value": "{color.btn.text.outline-danger}", - "type": "color", + "$value": "{color.btn.text.outline-danger}", "source": "$btn-danger-outline-focus-color" }, "inverse-outline-danger": { - "value": "{color.btn.text.inverse-outline-danger}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-danger}", "source": "$btn-danger-inverse-outline-focus-color" } }, "border": { "danger": { - "value": "{color.btn.focus.bg.danger}", "type": "color", "source": "$btn-danger-focus-border-color" + "$value": "{color.btn.focus.bg.danger}", + "source": "$btn-danger-focus-border-color" }, "outline-danger": { - "value": "{color.btn.border.outline-danger}", - "type": "color", + "$value": "{color.btn.border.outline-danger}", "source": "$btn-danger-outline-focus-border-color" }, "inverse-danger": { - "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-focus-border-color" + "$value": "{color.white}", + "source": "$btn-danger-inverse-focus-border-color" }, "inverse-outline-danger": { - "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-focus-border-color" + "$value": "{color.white}", + "source": "$btn-danger-inverse-outline-focus-border-color" } }, "bg": { - "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-focus-bg" }, - "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-focus-bg" }, - "inverse-danger": { "value": "{color.btn.bg.inverse-danger}", "type": "color", "source": "$btn-danger-inverse-focus-bg" }, - "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-focus-bg" } + "danger": { + "$value": "{color.btn.bg.danger}", + "source": "$btn-danger-focus-bg" + }, + "outline-danger": { + "$value": "inherit", + "source": "$btn-danger-outline-focus-bg" + }, + "inverse-danger": { + "$value": "{color.btn.bg.inverse-danger}", + "source": "$btn-danger-inverse-focus-bg" + }, + "inverse-outline-danger": { + "$value": "inherit", + "source": "$btn-danger-inverse-outline-focus-bg" + } }, "outline": { - "danger": { "value": "{color.theme.focus.danger}", "type": "color", "source": "$btn-danger-focus-outline-color" }, + "danger": { + "$value": "{color.theme.focus.danger}", + "source": "$btn-danger-focus-outline-color" + }, "outline-danger": { - "value": "{color.theme.focus.danger}", - "type": "color", + "$value": "{color.theme.focus.danger}", "source": "$btn-danger-outline-focus-outline-color" }, "inverse-danger": { - "value": "{color.btn.focus.border.inverse-danger}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-danger}", "source": "$btn-danger-inverse-focus-outline-color" }, "inverse-outline-danger": { - "value": "{color.btn.focus.border.inverse-danger}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-danger}", "source": "$btn-danger-inverse-outline-focus-outline-color" } } }, "disabled": { "text": { - "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-disabled-color" }, + "danger": { + "$value": "{color.btn.text.danger}", + "source": "$btn-danger-disabled-color" + }, "outline-danger": { - "value": "{color.btn.hover.text.outline-danger}", - "type": "color", + "$value": "{color.btn.hover.text.outline-danger}", "source": "$btn-danger-outline-disabled-color" }, - "inverse-danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-disabled-color" }, + "inverse-danger": { + "$value": "{color.danger.base}", + "source": "$btn-danger-inverse-disabled-color" + }, "inverse-outline-danger": { - "value": "{color.btn.text.inverse-outline-danger}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-danger}", "source": "$btn-danger-inverse-outline-disabled-color" } }, "bg": { - "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-disabled-bg" }, - "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-disabled-bg" }, - "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-disabled-bg" }, - "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-disabled-bg" } + "danger": { + "$value": "{color.btn.bg.danger}", + "source": "$btn-danger-disabled-bg" + }, + "outline-danger": { + "$value": "inherit", + "source": "$btn-danger-outline-disabled-bg" + }, + "inverse-danger": { + "$value": "transparent", + "source": "$btn-danger-inverse-disabled-bg" + }, + "inverse-outline-danger": { + "$value": "inherit", + "source": "$btn-danger-inverse-outline-disabled-bg" + } }, "border": { - "danger": { "value": "{color.btn.border.danger}", "type": "color", "source": "$btn-danger-disabled-border-color" }, + "danger": { + "$value": "{color.btn.border.danger}", + "source": "$btn-danger-disabled-border-color" + }, "outline-danger": { - "value": "{color.btn.border.outline-danger}", - "type": "color", + "$value": "{color.btn.border.outline-danger}", "source": "$btn-danger-outline-disabled-border-color" }, "inverse-danger": { - "value": "transparent", - "type": "color", + "$value": "transparent", "source": "$btn-danger-inverse-disabled-border-color" }, "inverse-outline-danger": { - "value": "{color.btn.border.inverse-outline-danger}", - "type": "color", + "$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 dcb73c0d64..248cd52eff 100644 --- a/tokens/src/themes/light/components/Button/dark.json +++ b/tokens/src/themes/light/components/Button/dark.json @@ -1,226 +1,347 @@ { "color": { + "$type": "color", "btn": { "text": { "dark": { - "value": "{color.btn.bg.dark}", - "type": "color", - "source": "$btn-dark-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.bg.dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-color" + }, + "outline-dark": { + "$value": "{color.dark.base}", + "source": "$btn-dark-outline-color" + }, + "inverse-dark": { + "$value": "{color.dark.base}", + "source": "$btn-dark-inverse-color" }, - "outline-dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-outline-color" }, - "inverse-dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-inverse-color" }, "inverse-outline-dark": { - "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-color" + "$value": "{color.white}", + "source": "$btn-dark-inverse-outline-color" } }, "bg": { - "dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-bg" }, - "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-bg" }, + "dark": { + "$value": "{color.dark.base}", + "source": "$btn-dark-bg" + }, + "outline-dark": { + "$value": "inherit", + "source": "$btn-dark-outline-bg" + }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", - "source": "$btn-dark-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.text.inverse-dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-inverse-bg" }, - "inverse-outline-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-bg" } + "inverse-outline-dark": { + "$value": "transparent", + "source": "$btn-dark-inverse-outline-bg" + } }, "border": { - "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-border-color" }, + "dark": { + "$value": "{color.btn.bg.dark}", + "source": "$btn-dark-border-color" + }, "outline-dark": { - "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-outline-border-color" + "$value": "{color.dark.base}", + "source": "$btn-dark-outline-border-color" + }, + "inverse-dark": { + "$value": "transparent", + "source": "$btn-dark-inverse-border-color" }, - "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-border-color" }, "inverse-outline-dark": { - "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-border-color" + "$value": "{color.white}", + "source": "$btn-dark-inverse-outline-border-color" } }, "hover": { "text": { "dark": { - "value": "{color.btn.hover.bg.dark}", - "type": "color", - "source": "$btn-dark-hover-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.hover.bg.dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-hover-color" }, "outline-dark": { - "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-outline-hover-color" + "$value": "{color.theme.hover.dark}", + "source": "$btn-dark-outline-hover-color" }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", - "source": "$btn-dark-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.text.inverse-dark}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-dark-inverse-hover-color" }, "inverse-outline-dark": { - "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-inverse-outline-hover-color" + "$value": "{color.theme.hover.dark}", + "source": "$btn-dark-inverse-outline-hover-color" } }, "bg": { - "dark": { "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-hover-bg" }, - "outline-dark": { "value": "{color.dark.100}", "type": "color", "source": "$btn-dark-outline-hover-bg" }, + "dark": { + "$value": "{color.theme.hover.dark}", + "source": "$btn-dark-hover-bg" + }, + "outline-dark": { + "$value": "{color.dark.100}", + "source": "$btn-dark-outline-hover-bg" + }, "inverse-dark": { - "value": "{color.btn.bg.inverse-dark}", - "type": "color", - "source": "$btn-dark-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.bg.inverse-dark}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-dark-inverse-hover-bg" }, "inverse-outline-dark": { - "value": "{color.dark.100}", "type": "color", "source": "$btn-dark-inverse-outline-hover-bg" + "$value": "{color.dark.100}", + "source": "$btn-dark-inverse-outline-hover-bg" } }, "border": { "dark": { - "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-hover-border-color" + "$value": "{color.theme.hover.dark}", + "source": "$btn-dark-hover-border-color" }, "outline-dark": { - "value": "{color.dark.900}", "type": "color", "source": "$btn-dark-outline-hover-border-color" + "$value": "{color.dark.900}", + "source": "$btn-dark-outline-hover-border-color" + }, + "inverse-dark": { + "$value": "transparent", + "source": "$btn-dark-inverse-hover-border-color" }, - "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-hover-border-color" }, "inverse-outline-dark": { - "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-hover-border-color" + "$value": "transparent", + "source": "$btn-dark-inverse-outline-hover-border-color" } } }, "active": { "text": { "dark": { - "value": "{color.btn.active.bg.dark}", - "type": "color", - "source": "$btn-dark-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-active-color" }, "outline-dark": { - "value": "{color.btn.active.bg.outline-dark}", - "type": "color", - "source": "$btn-dark-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.outline-dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-outline-active-color" }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", - "source": "$btn-dark-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.btn.text.inverse-dark}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-dark-inverse-active-color" }, "inverse-outline-dark": { - "value": "{color.btn.active.bg.inverse-outline-dark}", - "type": "color", - "source": "$btn-dark-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "$value": "{color.btn.active.bg.inverse-outline-dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-inverse-outline-active-color" + } }, "bg": { - "dark": { "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-active-bg" }, + "dark": { + "$value": "{color.theme.active.dark}", + "source": "$btn-dark-active-bg" + }, "outline-dark": { - "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-outline-active-bg" + "$value": "{color.theme.bg.dark}", + "source": "$btn-dark-outline-active-bg" + }, + "inverse-dark": { + "$value": "{color.gray.100}", + "source": "$btn-dark-inverse-active-bg" }, - "inverse-dark": { "value": "{color.gray.100}", "type": "color", "source": "$btn-dark-inverse-active-bg" }, "inverse-outline-dark": { - "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-inverse-outline-active-bg" + "$value": "{color.theme.bg.dark}", + "source": "$btn-dark-inverse-outline-active-bg" } }, "border": { "dark": { - "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-active-border-color" + "$value": "{color.theme.active.dark}", + "source": "$btn-dark-active-border-color" }, "outline-dark": { - "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-outline-active-border-color" + "$value": "{color.theme.active.dark}", + "source": "$btn-dark-outline-active-border-color" }, "inverse-dark": { - "value": "transparent", - "type": "color", + "$value": "transparent", "source": "$btn-dark-inverse-active-border-color" }, "inverse-outline-dark": { - "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-active-border-color" + "$value": "transparent", + "source": "$btn-dark-inverse-outline-active-border-color" } } }, "focus": { "text": { - "dark": { "value": "{color.btn.text.dark}", "type": "color", "source": "$btn-dark-focus-color" }, - "inverse-dark": { "value": "{color.btn.text.inverse-dark}", "type": "color", "source": "$btn-dark-inverse-focus-color" }, - "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-focus-color" }, + "dark": { + "$value": "{color.btn.text.dark}", + "source": "$btn-dark-focus-color" + }, + "inverse-dark": { + "$value": "{color.btn.text.inverse-dark}", + "source": "$btn-dark-inverse-focus-color" + }, + "outline-dark": { + "$value": "inherit", + "source": "$btn-dark-outline-focus-color" + }, "inverse-outline-dark": { - "value": "{color.btn.text.inverse-outline-dark}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-dark}", "source": "$btn-dark-inverse-outline-focus-color" } }, "border": { - "dark": { "value": "{color.btn.focus.bg.dark}", "type": "color", "source": "$btn-dark-focus-border-color" }, + "dark": { + "$value": "{color.btn.focus.bg.dark}", + "source": "$btn-dark-focus-border-color" + }, "outline-dark": { - "value": "{color.btn.border.outline-dark}", - "type": "color", + "$value": "{color.btn.border.outline-dark}", "source": "$btn-dark-outline-focus-border-color" }, "inverse-dark": { - "value": "{color.white}", - "type": "color", + "$value": "{color.white}", "source": "$btn-dark-inverse-focus-border-color" }, "inverse-outline-dark": { - "value": "{color.white}", - "type": "color", + "$value": "{color.white}", "source": "$btn-dark-inverse-outline-focus-border-color" } }, "bg": { - "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-focus-bg" }, - "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-focus-bg" }, - "inverse-dark": { "value": "{color.btn.bg.inverse-dark}", "type": "color", "source": "$btn-dark-inverse-focus-bg" }, - "inverse-outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-outline-focus-bg" } + "dark": { + "$value": "{color.btn.bg.dark}", + "source": "$btn-dark-focus-bg" + }, + "outline-dark": { + "$value": "inherit", + "source": "$btn-dark-outline-focus-bg" + }, + "inverse-dark": { + "$value": "{color.btn.bg.inverse-dark}", + "source": "$btn-dark-inverse-focus-bg" + }, + "inverse-outline-dark": { + "$value": "inherit", + "source": "$btn-dark-inverse-outline-focus-bg" + } }, "outline": { - "dark": { "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-focus-outline-color" }, - "outline-dark": { "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-outline-focus-outline-color" }, + "dark": { + "$value": "{color.theme.focus.dark}", + "source": "$btn-dark-focus-outline-color" + }, + "outline-dark": { + "$value": "{color.theme.focus.dark}", + "source": "$btn-dark-outline-focus-outline-color" + }, "inverse-dark": { - "value": "{color.btn.focus.border.inverse-dark}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-dark}", "source": "$btn-dark-inverse-focus-outline-color" }, "inverse-outline-dark": { - "value": "{color.btn.focus.border.inverse-outline-dark}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-outline-dark}", "source": "$btn-dark-inverse-outline-focus-border-color" } } }, "disabled": { "text": { - "dark": { "value": "{color.btn.text.dark}", "type": "color", "source": "$btn-dark-disabled-color" }, - "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-disabled-color" }, + "dark": { + "$value": "{color.btn.text.dark}", + "source": "$btn-dark-disabled-color" + }, + "outline-dark": { + "$value": "inherit", + "source": "$btn-dark-outline-disabled-color" + }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", + "$value": "{color.btn.text.inverse-dark}", "source": "$btn-dark-inverse-disabled-color" }, "inverse-outline-dark": { - "value": "{color.btn.text.inverse-outline-dark}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-dark}", "source": "$btn-dark-inverse-outline-disabled-color" } }, "bg": { - "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-disabled-bg" }, - "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-disabled-bg" }, - "inverse-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-disabled-bg" }, - "inverse-outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-outline-disabled-bg" } + "dark": { + "$value": "{color.btn.bg.dark}", + "source": "$btn-dark-disabled-bg" + }, + "outline-dark": { + "$value": "inherit", + "source": "$btn-dark-outline-disabled-bg" + }, + "inverse-dark": { + "$value": "inherit", + "source": "$btn-dark-inverse-disabled-bg" + }, + "inverse-outline-dark": { + "$value": "inherit", + "source": "$btn-dark-inverse-outline-disabled-bg" + } }, "border": { "dark": { - "value": "{color.btn.border.dark}", - "type": "color", + "$value": "{color.btn.border.dark}", "source": "$btn-dark-disabled-border-color" }, "outline-dark": { - "value": "{color.btn.hover.text.outline-dark}", - "type": "color", + "$value": "{color.btn.hover.text.outline-dark}", "source": "$btn-dark-outline-disabled-border-color" }, - "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-disabled-border-color" }, + "inverse-dark": { + "$value": "transparent", + "source": "$btn-dark-inverse-disabled-border-color" + }, "inverse-outline-dark": { - "value": "{color.btn.focus.border.inverse-outline-dark}", - "type": "color", + "$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 5f777e9524..e403ffc2ef 100644 --- a/tokens/src/themes/light/components/Button/info.json +++ b/tokens/src/themes/light/components/Button/info.json @@ -1,234 +1,347 @@ { "color": { + "$type": "color", "btn": { "text": { "info": { - "value": "{color.btn.bg.info}", - "type": "color", - "source": "$btn-info-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.bg.info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-color" + }, + "outline-info": { + "$value": "{color.info.base}", + "source": "$btn-info-outline-color" + }, + "inverse-info": { + "$value": "{color.info.base}", + "source": "$btn-info-inverse-color" }, - "outline-info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-color" }, - "inverse-info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-inverse-color" }, "inverse-outline-info": { - "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-color" + "$value": "{color.white}", + "source": "$btn-info-inverse-outline-color" } }, "bg": { - "info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-bg" }, - "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-bg" }, + "info": { + "$value": "{color.info.base}", + "source": "$btn-info-bg" + }, + "outline-info": { + "$value": "inherit", + "source": "$btn-info-outline-bg" + }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", - "source": "$btn-info-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.text.inverse-info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-inverse-bg" }, - "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-bg" } + "inverse-outline-info": { + "$value": "inherit", + "source": "$btn-info-inverse-outline-bg" + } }, "border": { - "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-border-color" }, + "info": { + "$value": "{color.btn.bg.info}", + "source": "$btn-info-border-color" + }, "outline-info": { - "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-border-color" + "$value": "{color.info.base}", + "source": "$btn-info-outline-border-color" + }, + "inverse-info": { + "$value": "transparent", + "source": "$btn-info-inverse-border-color" }, - "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-border-color" }, "inverse-outline-info": { - "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-border-color" + "$value": "{color.white}", + "source": "$btn-info-inverse-outline-border-color" } }, "hover": { "text": { "info": { - "value": "{color.btn.hover.bg.info}", - "type": "color", - "source": "$btn-info-hover-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.hover.bg.info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-hover-color" }, "outline-info": { - "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-outline-hover-color" + "$value": "{color.theme.hover.info}", + "source": "$btn-info-outline-hover-color" }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", - "source": "$btn-info-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.text.inverse-info}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-info-inverse-hover-color" }, "inverse-outline-info": { - "value": "{color.theme.hover.info}", - "type": "color", + "$value": "{color.theme.hover.info}", "source": "$btn-info-inverse-outline-hover-color" } }, "bg": { - "info": { "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-hover-bg" }, - "outline-info": { "value": "{color.info.100}", "type": "color", "source": "$btn-info-outline-hover-bg" }, + "info": { + "$value": "{color.theme.hover.info}", + "source": "$btn-info-hover-bg" + }, + "outline-info": { + "$value": "{color.info.100}", + "source": "$btn-info-outline-hover-bg" + }, "inverse-info": { - "value": "{color.btn.bg.inverse-info}", - "type": "color", - "source": "$btn-info-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.bg.inverse-info}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-info-inverse-hover-bg" }, "inverse-outline-info": { - "value": "{color.info.100}", "type": "color", "source": "$btn-info-inverse-outline-hover-bg" + "$value": "{color.info.100}", + "source": "$btn-info-inverse-outline-hover-bg" } }, "border": { "info": { - "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-hover-border-color" + "$value": "{color.theme.hover.info}", + "source": "$btn-info-hover-border-color" }, "outline-info": { - "value": "{color.info.900}", "type": "color", "source": "$btn-info-outline-hover-border-color" + "$value": "{color.info.900}", + "source": "$btn-info-outline-hover-border-color" + }, + "inverse-info": { + "$value": "transparent", + "source": "$btn-info-inverse-hover-border-color" }, - "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-hover-border-color" }, "inverse-outline-info": { - "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-hover-border-color" + "$value": "transparent", + "source": "$btn-info-inverse-outline-hover-border-color" } } }, "active": { "text": { "info": { - "value": "{color.btn.active.bg.info}", - "type": "color", - "source": "$btn-info-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-active-color" }, "outline-info": { - "value": "{color.btn.active.bg.outline-info}", - "type": "color", - "source": "$btn-info-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.outline-info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-outline-active-color" }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", - "source": "$btn-info-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.btn.text.inverse-info}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-info-inverse-active-color" }, "inverse-outline-info": { - "value": "{color.btn.active.bg.inverse-outline-info}", - "type": "color", - "source": "$btn-info-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "$value": "{color.btn.active.bg.inverse-outline-info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-inverse-outline-active-color" + } }, "bg": { - "info": { "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-bg" }, + "info": { + "$value": "{color.theme.active.info}", + "source": "$btn-info-active-bg" + }, "outline-info": { - "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-outline-active-bg" + "$value": "{color.theme.bg.info}", + "source": "$btn-info-outline-active-bg" + }, + "inverse-info": { + "$value": "{color.gray.100}", + "source": "$btn-info-inverse-active-bg" }, - "inverse-info": { "value": "{color.gray.100}", "type": "color", "source": "$btn-info-inverse-active-bg" }, "inverse-outline-info": { - "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-inverse-outline-active-bg" + "$value": "{color.theme.bg.info}", + "source": "$btn-info-inverse-outline-active-bg" } }, "border": { "info": { - "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-border-color" + "$value": "{color.theme.active.info}", + "source": "$btn-info-active-border-color" }, "outline-info": { - "value": "{color.theme.active.info}", - "type": "color", + "$value": "{color.theme.active.info}", "source": "$btn-info-outline-active-border-color" }, - "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-active-border-color" }, + "inverse-info": { + "$value": "transparent", + "source": "$btn-info-inverse-active-border-color" + }, "inverse-outline-info": { - "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-active-border-color" + "$value": "transparent", + "source": "$btn-info-inverse-outline-active-border-color" } } }, "focus": { "text": { - "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-focus-color" }, + "info": { + "$value": "{color.btn.text.info}", + "source": "$btn-info-focus-color" + }, "outline-info": { - "value": "{color.btn.text.outline-info}", - "type": "color", + "$value": "{color.btn.text.outline-info}", "source": "$btn-info-outline-focus-color" }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", + "$value": "{color.btn.text.inverse-info}", "source": "$btn-info-inverse-focus-color" }, "inverse-outline-info": { - "value": "{color.btn.text.inverse-outline-info}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-info}", "source": "$btn-info-inverse-outline-focus-color" } }, "border": { - "info": { "value": "{color.btn.border.info}", "type": "color", "source": "$btn-info-focus-border-color" }, + "info": { + "$value": "{color.btn.border.info}", + "source": "$btn-info-focus-border-color" + }, "outline-info": { - "value": "{color.btn.border.outline-info}", - "type": "color", + "$value": "{color.btn.border.outline-info}", "source": "$btn-info-outline-focus-border-color" }, - "inverse-info": { "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-focus-border-color" }, + "inverse-info": { + "$value": "{color.white}", + "source": "$btn-info-inverse-focus-border-color" + }, "inverse-outline-info": { - "value": "{color.btn.border.inverse-outline-info}", - "type": "color", + "$value": "{color.btn.border.inverse-outline-info}", "source": "$btn-info-inverse-outline-focus-border-color" } }, "bg": { - "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-focus-bg" }, - "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-focus-bg" }, - "inverse-info": { "value": "{color.btn.bg.inverse-info}", "type": "color", "source": "$btn-info-inverse-focus-bg" }, - "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-focus-bg" } + "info": { + "$value": "{color.btn.bg.info}", + "source": "$btn-info-focus-bg" + }, + "outline-info": { + "$value": "inherit", + "source": "$btn-info-outline-focus-bg" + }, + "inverse-info": { + "$value": "{color.btn.bg.inverse-info}", + "source": "$btn-info-inverse-focus-bg" + }, + "inverse-outline-info": { + "$value": "inherit", + "source": "$btn-info-inverse-outline-focus-bg" + } }, "outline": { - "info": { "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-focus-outline-color" }, + "info": { + "$value": "{color.theme.focus.info}", + "source": "$btn-info-focus-outline-color" + }, "outline-info": { - "value": "{color.theme.focus.info}", - "type": "color", + "$value": "{color.theme.focus.info}", "source": "$btn-info-outline-focus-outline-color" }, "inverse-info": { - "value": "{color.btn.focus.border.inverse-info}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-info}", "source": "$btn-info-inverse-focus-outline-color" }, "inverse-outline-info": { - "value": "{color.btn.focus.border.inverse-outline-info}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-outline-info}", "source": "$btn-info-inverse-outline-focus-outline-color" } } }, "disabled": { "text": { - "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-disabled-color" }, + "info": { + "$value": "{color.btn.text.info}", + "source": "$btn-info-disabled-color" + }, "outline-info": { - "value": "{color.btn.text.outline-info}", - "type": "color", + "$value": "{color.btn.text.outline-info}", "source": "$btn-info-outline-disabled-color" }, "inverse-info": { - "value": "{color.info.base}", - "type": "color", + "$value": "{color.info.base}", "source": "$btn-info-inverse-disabled-color" }, "inverse-outline-info": { - "value": "{color.btn.text.inverse-outline-info}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-info}", "source": "$btn-info-inverse-outline-disabled-color" } }, "bg": { - "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-bg" }, - "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-disabled-bg" }, - "inverse-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-disabled-bg" }, - "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-disabled-bg" } + "info": { + "$value": "{color.btn.bg.info}", + "source": "$btn-info-disabled-bg" + }, + "outline-info": { + "$value": "inherit", + "source": "$btn-info-outline-disabled-bg" + }, + "inverse-info": { + "$value": "inherit", + "source": "$btn-info-inverse-disabled-bg" + }, + "inverse-outline-info": { + "$value": "inherit", + "source": "$btn-info-inverse-outline-disabled-bg" + } }, "border": { - "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-border-color" }, + "info": { + "$value": "{color.btn.bg.info}", + "source": "$btn-info-disabled-border-color" + }, "outline-info": { - "value": "{color.btn.border.outline-info}", - "type": "color", + "$value": "{color.btn.border.outline-info}", "source": "$btn-info-outline-disabled-border-color" }, - "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-disabled-border-color" }, + "inverse-info": { + "$value": "transparent", + "source": "$btn-info-inverse-disabled-border-color" + }, "inverse-outline-info": { - "value": "{color.btn.border.inverse-outline-info}", - "type": "color", + "$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 83c4abc465..85a701534a 100644 --- a/tokens/src/themes/light/components/Button/light.json +++ b/tokens/src/themes/light/components/Button/light.json @@ -1,232 +1,347 @@ { "color": { + "$type": "color", "btn": { "text": { "light": { - "value": "{color.btn.bg.light}", - "type": "color", - "source": "$btn-light-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.bg.light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-color" + }, + "outline-light": { + "$value": "{color.light.base}", + "source": "$btn-light-outline-color" + }, + "inverse-light": { + "$value": "{color.light.base}", + "source": "$btn-light-inverse-color" }, - "outline-light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-outline-color" }, - "inverse-light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-inverse-color" }, "inverse-outline-light": { - "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-color" + "$value": "{color.white}", + "source": "$btn-light-inverse-outline-color" } }, "bg": { - "light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-bg" }, + "light": { + "$value": "{color.light.base}", + "source": "$btn-light-bg" + }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", - "source": "$btn-light-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.text.inverse-light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-inverse-bg" + }, + "outline-light": { + "$value": "inherit", + "source": "$btn-light-outline-bg" }, - "outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-outline-bg" }, - "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-bg" } + "inverse-outline-light": { + "$value": "inherit", + "source": "$btn-light-inverse-outline-bg" + } }, "border": { - "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-border-color" }, + "light": { + "$value": "{color.btn.bg.light}", + "source": "$btn-light-border-color" + }, "outline-light": { - "value": "{color.light.base}", "type": "color", "source": "$btn-light-outline-border-color" + "$value": "{color.light.base}", + "source": "$btn-light-outline-border-color" + }, + "inverse-light": { + "$value": "transparent", + "source": "$btn-light-inverse-border-color" }, - "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-border-color" }, "inverse-outline-light": { - "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-border-color" + "$value": "{color.white}", + "source": "$btn-light-inverse-outline-border-color" } }, "hover": { "text": { "light": { - "value": "{color.btn.hover.bg.light}", - "type": "color", - "source": "$btn-light-hover-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.hover.bg.light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-hover-color" }, "outline-light": { - "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-outline-hover-color" + "$value": "{color.theme.hover.light}", + "source": "$btn-light-outline-hover-color" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", - "source": "$btn-light-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.text.inverse-light}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-light-inverse-hover-color" }, "inverse-outline-light": { - "value": "{color.theme.hover.light}", - "type": "color", + "$value": "{color.theme.hover.light}", "source": "$btn-light-inverse-outline-hover-color" } }, "bg": { - "light": { "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-hover-bg" }, + "light": { + "$value": "{color.theme.hover.light}", + "source": "$btn-light-hover-bg" + }, "outline-light": { - "value": "{color.light.100}", "type": "color", "source": "$btn-light-outline-hover-bg" + "$value": "{color.light.100}", + "source": "$btn-light-outline-hover-bg" }, "inverse-light": { - "value": "{color.btn.bg.inverse-light}", - "type": "color", - "source": "$btn-light-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.bg.inverse-light}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-light-inverse-hover-bg" }, "inverse-outline-light": { - "value": "{color.light.100}", "type": "color", "source": "$btn-light-inverse-outline-hover-bg" + "$value": "{color.light.100}", + "source": "$btn-light-inverse-outline-hover-bg" } }, "border": { "light": { - "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-hover-border-color" + "$value": "{color.theme.hover.light}", + "source": "$btn-light-hover-border-color" }, "outline-light": { - "value": "{color.light.900}", "type": "color", "source": "$btn-light-outline-hover-border-color" + "$value": "{color.light.900}", + "source": "$btn-light-outline-hover-border-color" + }, + "inverse-light": { + "$value": "transparent", + "source": "$btn-light-inverse-hover-border-color" }, - "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-hover-border-color" }, "inverse-outline-light": { - "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-hover-border-color" + "$value": "transparent", + "source": "$btn-light-inverse-outline-hover-border-color" } } }, "active": { "text": { "light": { - "value": "{color.btn.active.bg.light}", - "type": "color", - "source": "$btn-light-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-active-color" }, "outline-light": { - "value": "{color.btn.active.bg.outline-light}", - "type": "color", - "source": "$btn-light-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.outline-light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-outline-active-color" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", - "source": "$btn-light-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.btn.text.inverse-light}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-light-inverse-active-color" }, "inverse-outline-light": { - "value": "{color.btn.active.bg.inverse-outline-light}", - "type": "color", - "source": "$btn-light-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "$value": "{color.btn.active.bg.inverse-outline-light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-inverse-outline-active-color" + } }, "bg": { - "light": { "value": "{color.theme.active.light}", "type": "color", "source": "$btn-light-active-bg" }, + "light": { + "$value": "{color.theme.active.light}", + "source": "$btn-light-active-bg" + }, "outline-light": { - "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-outline-active-bg" + "$value": "{color.theme.bg.light}", + "source": "$btn-light-outline-active-bg" + }, + "inverse-light": { + "$value": "{color.gray.100}", + "source": "$btn-light-inverse-active-bg" }, - "inverse-light": { "value": "{color.gray.100}", "type": "color", "source": "$btn-light-inverse-active-bg" }, "inverse-outline-light": { - "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-inverse-outline-active-bg" + "$value": "{color.theme.bg.light}", + "source": "$btn-light-inverse-outline-active-bg" } }, "border": { "light": { - "value": "{color.theme.active.light}", "type": "color", "source": "$btn-light-active-border-color" + "$value": "{color.theme.active.light}", + "source": "$btn-light-active-border-color" }, "outline-light": { - "value": "{color.theme.active.light}", - "type": "color", + "$value": "{color.theme.active.light}", "source": "$btn-light-outline-active-border-color" }, - "inverse-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-active-border-color" }, + "inverse-light": { + "$value": "inherit", + "source": "$btn-light-inverse-active-border-color" + }, "inverse-outline-light": { - "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-active-border-color" + "$value": "transparent", + "source": "$btn-light-inverse-outline-active-border-color" } } }, "focus": { "text": { - "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-focus-color" }, + "light": { + "$value": "{color.btn.text.light}", + "source": "$btn-light-focus-color" + }, "outline-light": { - "value": "{color.btn.text.outline-light}", - "type": "color", + "$value": "{color.btn.text.outline-light}", "source": "$btn-light-outline-focus-color" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", + "$value": "{color.btn.text.inverse-light}", "source": "$btn-light-inverse-focus-color" }, "inverse-outline-light": { - "value": "{color.btn.text.inverse-outline-light}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-light}", "source": "$btn-light-inverse-outline-focus-color" } }, "border": { - "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-focus-border-color" }, + "light": { + "$value": "{color.btn.border.light}", + "source": "$btn-light-focus-border-color" + }, "outline-light": { - "value": "{color.btn.border.outline-light}", - "type": "color", + "$value": "{color.btn.border.outline-light}", "source": "$btn-light-outline-focus-border-color" }, "inverse-light": { - "value": "{color.btn.border.inverse-light}", - "type": "color", + "$value": "{color.btn.border.inverse-light}", "source": "$btn-light-inverse-focus-border-color" }, "inverse-outline-light": { - "value": "{color.btn.border.inverse-outline-light}", - "type": "color", + "$value": "{color.btn.border.inverse-outline-light}", "source": "$btn-light-inverse-outline-focus-border-color" } }, "bg": { - "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-focus-bg" }, - "outline-light": { "value": "transparent", "type": "color", "source": "$btn-light-outline-focus-bg" }, - "inverse-light": { "value": "{color.btn.bg.inverse-light}", "type": "color", "source": "$btn-light-inverse-focus-bg" }, - "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-focus-bg" } + "light": { + "$value": "{color.btn.bg.light}", + "source": "$btn-light-focus-bg" + }, + "outline-light": { + "$value": "transparent", + "source": "$btn-light-outline-focus-bg" + }, + "inverse-light": { + "$value": "{color.btn.bg.inverse-light}", + "source": "$btn-light-inverse-focus-bg" + }, + "inverse-outline-light": { + "$value": "inherit", + "source": "$btn-light-inverse-outline-focus-bg" + } }, "outline": { - "light": { "value": "{color.primary.300}", "type": "color", "source": "$btn-light-focus-outline-color" }, - "outline-light": { "value": "{color.theme.focus.light}", "type": "color", "source": "$btn-light-outline-focus-outline-color" }, - "inverse-light": { "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-focus-outline-color" }, + "light": { + "$value": "{color.primary.300}", + "source": "$btn-light-focus-outline-color" + }, + "outline-light": { + "$value": "{color.theme.focus.light}", + "source": "$btn-light-outline-focus-outline-color" + }, + "inverse-light": { + "$value": "{color.white}", + "source": "$btn-light-inverse-focus-outline-color" + }, "inverse-outline-light": { - "value": "{color.btn.focus.border.inverse-outline-light}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-outline-light}", "source": "$btn-light-inverse-outline-focus-outline-color" } } }, "disabled": { "text": { - "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-disabled-color" }, + "light": { + "$value": "{color.btn.text.light}", + "source": "$btn-light-disabled-color" + }, "outline-light": { - "value": "{color.btn.hover.text.outline-light}", - "type": "color", + "$value": "{color.btn.hover.text.outline-light}", "source": "$btn-light-outline-disabled-color" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", + "$value": "{color.btn.text.inverse-light}", "source": "$btn-light-inverse-disabled-color" }, "inverse-outline-light": { - "value": "{color.btn.text.inverse-outline-light}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-light}", "source": "$btn-light-inverse-outline-disabled-color" } }, "bg": { - "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-disabled-bg" }, - "outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-outline-disabled-bg" }, - "inverse-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-disabled-bg" }, - "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-disabled-bg" } + "light": { + "$value": "{color.btn.bg.light}", + "source": "$btn-light-disabled-bg" + }, + "outline-light": { + "$value": "inherit", + "source": "$btn-light-outline-disabled-bg" + }, + "inverse-light": { + "$value": "inherit", + "source": "$btn-light-inverse-disabled-bg" + }, + "inverse-outline-light": { + "$value": "inherit", + "source": "$btn-light-inverse-outline-disabled-bg" + } }, "border": { - "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-disabled-border-color" }, + "light": { + "$value": "{color.btn.border.light}", + "source": "$btn-light-disabled-border-color" + }, "outline-light": { - "value": "{color.btn.hover.text.outline-light}", - "type": "color", + "$value": "{color.btn.hover.text.outline-light}", "source": "$btn-light-outline-disabled-border-color" }, - "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-disabled-border-color" }, + "inverse-light": { + "$value": "transparent", + "source": "$btn-light-inverse-disabled-border-color" + }, "inverse-outline-light": { - "value": "{color.btn.border.inverse-outline-light}", - "type": "color", + "$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 edf5c1f037..d405b123ad 100644 --- a/tokens/src/themes/light/components/Button/primary.json +++ b/tokens/src/themes/light/components/Button/primary.json @@ -1,246 +1,347 @@ { "color": { + "$type": "color", "btn": { "text": { "primary": { - "value": "{color.btn.bg.primary}", - "type": "color", - "source": "$btn-primary-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.bg.primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-color" }, "outline-primary": { - "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-outline-color" + "$value": "{color.primary.base}", + "source": "$btn-primary-outline-color" }, "inverse-primary": { - "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-inverse-color" + "$value": "{color.primary.base}", + "source": "$btn-primary-inverse-color" }, "inverse-outline-primary": { - "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-color" + "$value": "{color.white}", + "source": "$btn-primary-inverse-outline-color" } }, "bg": { - "primary": { "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-bg" }, - "outline-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-outline-bg" }, - "inverse-outline-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-bg" }, + "primary": { + "$value": "{color.primary.base}", + "source": "$btn-primary-bg" + }, + "outline-primary": { + "$value": "transparent", + "source": "$btn-primary-outline-bg" + }, + "inverse-outline-primary": { + "$value": "transparent", + "source": "$btn-primary-inverse-outline-bg" + }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", - "source": "$btn-primary-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.text.inverse-primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-inverse-bg" } }, "border": { - "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-border-color" }, + "primary": { + "$value": "{color.btn.bg.primary}", + "source": "$btn-primary-border-color" + }, "outline-primary": { - "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-outline-border-color" + "$value": "{color.primary.base}", + "source": "$btn-primary-outline-border-color" }, "inverse-outline-primary": { - "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-border-color" + "$value": "{color.white}", + "source": "$btn-primary-inverse-outline-border-color" }, - "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-border-color" } + "inverse-primary": { + "$value": "transparent", + "source": "$btn-primary-inverse-border-color" + } }, "hover": { "text": { "primary": { - "value": "{color.btn.hover.bg.primary}", - "type": "color", - "source": "$btn-primary-hover-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.hover.bg.primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-hover-color" }, "outline-primary": { - "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-outline-hover-color" + "$value": "{color.theme.hover.primary}", + "source": "$btn-primary-outline-hover-color" }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", - "source": "$btn-primary-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.text.inverse-primary}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-primary-inverse-hover-color" }, "inverse-outline-primary": { - "value": "{color.theme.hover.primary}", - "type": "color", + "$value": "{color.theme.hover.primary}", "source": "$btn-primary-inverse-outline-hover-color" } }, "bg": { "primary": { - "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-hover-bg" + "$value": "{color.theme.hover.primary}", + "source": "$btn-primary-hover-bg" }, "outline-primary": { - "value": "{color.primary.100}", "type": "color", "source": "$btn-primary-outline-hover-bg" + "$value": "{color.primary.100}", + "source": "$btn-primary-outline-hover-bg" }, "inverse-primary": { - "value": "{color.btn.bg.inverse-primary}", - "type": "color", - "source": "$btn-primary-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.bg.inverse-primary}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-primary-inverse-hover-bg" }, "inverse-outline-primary": { - "value": "{color.primary.100}", "type": "color", "source": "$btn-primary-inverse-outline-hover-bg" + "$value": "{color.primary.100}", + "source": "$btn-primary-inverse-outline-hover-bg" } }, "border": { "primary": { - "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-hover-border-color" + "$value": "{color.theme.hover.primary}", + "source": "$btn-primary-hover-border-color" }, "outline-primary": { - "value": "{color.primary.900}", "type": "color", "source": "$btn-primary-outline-hover-border-color" + "$value": "{color.primary.900}", + "source": "$btn-primary-outline-hover-border-color" }, "inverse-outline-primary": { - "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-hover-border-color" + "$value": "transparent", + "source": "$btn-primary-inverse-outline-hover-border-color" }, - "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-hover-border-color" } + "inverse-primary": { + "$value": "transparent", + "source": "$btn-primary-inverse-hover-border-color" + } } }, "active": { "text": { "primary": { - "value": "{color.btn.active.bg.primary}", - "type": "color", - "source": "$btn-primary-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-active-color" }, "outline-primary": { - "value": "{color.btn.active.bg.outline-primary}", - "type": "color", - "source": "$btn-primary-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.outline-primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-outline-active-color" }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", - "source": "$btn-primary-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.btn.text.inverse-primary}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-primary-inverse-active-color" }, "inverse-outline-primary": { - "value": "{color.btn.active.bg.inverse-outline-primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "$value": "{color.btn.active.bg.inverse-outline-primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-inverse-outline-active-color" + } }, "bg": { "primary": { - "value": "{color.theme.active.primary}", "type": "color", "source": "$btn-primary-active-bg" + "$value": "{color.theme.active.primary}", + "source": "$btn-primary-active-bg" }, "outline-primary": { - "value": "{color.theme.bg.primary}", "type": "color", "source": "$btn-primary-outline-active-bg" + "$value": "{color.theme.bg.primary}", + "source": "$btn-primary-outline-active-bg" }, "inverse-outline-primary": { - "value": "{color.theme.bg.primary}", - "type": "color", + "$value": "{color.theme.bg.primary}", "source": "$btn-primary-inverse-outline-active-bg" }, - "inverse-primary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-primary-inverse-active-bg" } + "inverse-primary": { + "$value": "{color.gray.100}", + "source": "$btn-primary-inverse-active-bg" + } }, "border": { "primary": { - "value": "{color.theme.active.primary}", - "type": "color", + "$value": "{color.theme.active.primary}", "source": "$btn-primary-active-border-color" }, "outline-primary": { - "value": "{color.theme.active.primary}", - "type": "color", + "$value": "{color.theme.active.primary}", "source": "$btn-primary-outline-active-border-color" }, "inverse-outline-primary": { - "value": "transparent", - "type": "color", + "$value": "transparent", "source": "$btn-primary-inverse-outline-active-border-color" }, - "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-active-border-color" } + "inverse-primary": { + "$value": "transparent", + "source": "$btn-primary-inverse-active-border-color" + } } }, "focus": { "text": { - "primary": { "value": "{color.btn.text.primary}", "type": "color", "source": "$btn-primary-focus-color" }, + "primary": { + "$value": "{color.btn.text.primary}", + "source": "$btn-primary-focus-color" + }, "outline-primary": { - "value": "{color.btn.text.outline-primary}", - "type": "color", + "$value": "{color.btn.text.outline-primary}", "source": "$btn-primary-outline-focus-color" }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", + "$value": "{color.btn.text.inverse-primary}", "source": "$btn-primary-inverse-focus-color" }, "inverse-outline-primary": { - "value": "{color.btn.text.inverse-outline-primary}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-primary}", "source": "$btn-primary-inverse-outline-focus-color" } }, "border": { - "primary": { "value": "{color.btn.border.primary}", "type": "color", "source": "$btn-primary-focus-border-color" }, + "primary": { + "$value": "{color.btn.border.primary}", + "source": "$btn-primary-focus-border-color" + }, "outline-primary": { - "value": "{color.btn.border.outline-primary}", - "type": "color", + "$value": "{color.btn.border.outline-primary}", "source": "$btn-primary-outline-focus-border-color" }, - "inverse-primary": { "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-focus-border-color" }, + "inverse-primary": { + "$value": "{color.white}", + "source": "$btn-primary-inverse-focus-border-color" + }, "inverse-outline-primary": { - "value": "{color.btn.border.inverse-outline-primary}", - "type": "color", + "$value": "{color.btn.border.inverse-outline-primary}", "source": "$btn-primary-inverse-outline-focus-border-color" } }, "outline": { - "primary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-primary-focus-focus-outline-color" }, + "primary": { + "$value": "{color.theme.focus.primary}", + "source": "$btn-primary-focus-focus-outline-color" + }, "outline-primary": { - "value": "{color.theme.focus.primary}", - "type": "color", + "$value": "{color.theme.focus.primary}", "source": "$btn-primary-outline-focus-outline-color" }, "inverse-primary": { - "value": "{color.btn.focus.border.inverse-primary}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-primary}", "source": "$btn-primary-inverse-focus-outline-color" }, "inverse-outline-primary": { - "value": "{color.btn.border.inverse-outline-primary}", - "type": "color", + "$value": "{color.btn.border.inverse-outline-primary}", "source": "$btn-primary-inverse-outline-focus-outline-color" } }, "bg": { - "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-focus-bg" }, - "outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-outline-focus-bg" }, - "inverse-primary": { "value": "{color.btn.bg.inverse-primary}", "type": "color", "source": "$btn-primary-inverse-focus-bg" }, - "inverse-outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-outline-focus-bg" } + "primary": { + "$value": "{color.btn.bg.primary}", + "source": "$btn-primary-focus-bg" + }, + "outline-primary": { + "$value": "inherit", + "source": "$btn-primary-outline-focus-bg" + }, + "inverse-primary": { + "$value": "{color.btn.bg.inverse-primary}", + "source": "$btn-primary-inverse-focus-bg" + }, + "inverse-outline-primary": { + "$value": "inherit", + "source": "$btn-primary-inverse-outline-focus-bg" + } } }, "disabled": { "text": { - "primary": { "value": "{color.btn.text.primary}", "type": "color", "source": "$btn-primary-disabled-color" }, - "inverse-primary": { "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-inverse-disabled-color" }, + "primary": { + "$value": "{color.btn.text.primary}", + "source": "$btn-primary-disabled-color" + }, + "inverse-primary": { + "$value": "{color.primary.500}", + "source": "$btn-primary-inverse-disabled-color" + }, "outline-primary": { - "value": "{color.btn.hover.text.outline-primary}", - "type": "color", + "$value": "{color.btn.hover.text.outline-primary}", "source": "$btn-primary-outline-disabled-color" }, "inverse-outline-primary": { - "value": "{color.btn.text.inverse-outline-primary}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-primary}", "source": "$btn-primary-inverse-outline-disabled-color" } }, "bg": { - "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-disabled-bg" }, - "inverse-primary": { "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-disabled-bg" }, - "outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-outline-disabled-bg" }, - "inverse-outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-outline-disabled-bg" } + "primary": { + "$value": "{color.btn.bg.primary}", + "source": "$btn-primary-disabled-bg" + }, + "inverse-primary": { + "$value": "{color.white}", + "source": "$btn-primary-inverse-disabled-bg" + }, + "outline-primary": { + "$value": "inherit", + "source": "$btn-primary-outline-disabled-bg" + }, + "inverse-outline-primary": { + "$value": "inherit", + "source": "$btn-primary-inverse-outline-disabled-bg" + } }, "border": { - "primary": { "value": "{color.btn.border.primary}", "type": "color", "source": "$btn-primary-disabled-border-color" }, - "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-disabled-border-color" }, + "primary": { + "$value": "{color.btn.border.primary}", + "source": "$btn-primary-disabled-border-color" + }, + "inverse-primary": { + "$value": "transparent", + "source": "$btn-primary-inverse-disabled-border-color" + }, "outline-primary": { - "value": "{color.btn.hover.text.outline-primary}", - "type": "color", + "$value": "{color.btn.hover.text.outline-primary}", "source": "$btn-primary-outline-disabled-border-color" }, "inverse-outline-primary": { - "value": "{color.btn.text.inverse-outline-primary}", - "type": "color", + "$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 c2b6c680d3..93673abd9c 100644 --- a/tokens/src/themes/light/components/Button/secondary.json +++ b/tokens/src/themes/light/components/Button/secondary.json @@ -1,274 +1,347 @@ { "color": { + "$type": "color", "btn": { "text": { "secondary": { - "value": "{color.btn.bg.secondary}", - "type": "color", - "source": "$btn-secondary-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.bg.secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-color" }, "outline-secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-outline-color" + "$value": "{color.secondary.base}", + "source": "$btn-secondary-outline-color" }, "inverse-secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-inverse-color" + "$value": "{color.secondary.base}", + "source": "$btn-secondary-inverse-color" }, "inverse-outline-secondary": { - "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-color" + "$value": "{color.white}", + "source": "$btn-secondary-inverse-outline-color" } }, "bg": { "secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-bg" + "$value": "{color.secondary.base}", + "source": "$btn-secondary-bg" + }, + "outline-secondary": { + "$value": "inherit", + "source": "$btn-secondary-outline-bg" + }, + "inverse-outline-secondary": { + "$value": "inherit", + "source": "$btn-secondary-inverse-outline-bg" }, - "outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-outline-bg" }, - "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-bg" }, "inverse-secondary": { - "value": "{color.btn.text.inverse-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.text.inverse-secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-inverse-bg" } }, "border": { "secondary": { - "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-border-color" + "$value": "{color.btn.bg.secondary}", + "source": "$btn-secondary-border-color" }, "outline-secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-outline-border-color" + "$value": "{color.secondary.base}", + "source": "$btn-secondary-outline-border-color" }, "inverse-outline-secondary": { - "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-border-color" + "$value": "{color.white}", + "source": "$btn-secondary-inverse-outline-border-color" }, - "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-border-color" } + "inverse-secondary": { + "$value": "transparent", + "source": "$btn-secondary-inverse-border-color" + } }, "hover": { "text": { "secondary": { - "value": "{color.btn.hover.bg.secondary}", - "type": "color", - "source": "$btn-secondary-hover-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.hover.bg.secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-hover-color" }, "outline-secondary": { - "value": "{color.theme.hover.secondary}", - "type": "color", + "$value": "{color.theme.hover.secondary}", "source": "$btn-secondary-outline-hover-color" }, "inverse-secondary": { - "value": "{color.btn.text.inverse-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.text.inverse-secondary}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-secondary-inverse-hover-color" }, "inverse-outline-secondary": { - "value": "{color.theme.hover.secondary}", - "type": "color", + "$value": "{color.theme.hover.secondary}", "source": "$btn-secondary-inverse-outline-hover-color" } }, "bg": { "secondary": { - "value": "{color.theme.hover.secondary}", "type": "color", "source": "$btn-secondary-hover-bg" + "$value": "{color.theme.hover.secondary}", + "source": "$btn-secondary-hover-bg" }, "outline-secondary": { - "value": "{color.secondary.100}", "type": "color", "source": "$btn-secondary-outline-hover-bg" + "$value": "{color.secondary.100}", + "source": "$btn-secondary-outline-hover-bg" }, "inverse-secondary": { - "value": "{color.btn.bg.inverse-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.bg.inverse-secondary}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-secondary-inverse-hover-bg" }, "inverse-outline-secondary": { - "value": "{color.secondary.100}", - "type": "color", + "$value": "{color.secondary.100}", "source": "$btn-secondary-inverse-outline-hover-bg" } }, "border": { "secondary": { - "value": "{color.theme.hover.secondary}", - "type": "color", + "$value": "{color.theme.hover.secondary}", "source": "$btn-secondary-hover-border-color" }, "outline-secondary": { - "value": "{color.secondary.900}", - "type": "color", + "$value": "{color.secondary.900}", "source": "$btn-secondary-outline-hover-border-color" }, "inverse-outline-secondary": { - "value": "transparent", - "type": "color", + "$value": "transparent", "source": "$btn-secondary-inverse-outline-hover-border-color" }, - "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-hover-border-color" } + "inverse-secondary": { + "$value": "transparent", + "source": "$btn-secondary-inverse-hover-border-color" + } } }, "active": { "text": { "secondary": { - "value": "{color.btn.active.bg.secondary}", - "type": "color", - "source": "$btn-secondary-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-active-color" }, "outline-secondary": { - "value": "{color.btn.active.bg.outline-secondary}", - "type": "color", - "source": "$btn-secondary-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.outline-secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-outline-active-color" }, "inverse-secondary": { - "value": "{color.btn.text.inverse-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.btn.text.inverse-secondary}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-secondary-inverse-active-color" }, "inverse-outline-secondary": { - "value": "{color.btn.active.bg.inverse-outline-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "$value": "{color.btn.active.bg.inverse-outline-secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-inverse-outline-active-color" + } }, "bg": { "secondary": { - "value": "{color.theme.active.secondary}", "type": "color", "source": "$btn-secondary-active-bg" + "$value": "{color.theme.active.secondary}", + "source": "$btn-secondary-active-bg" }, "outline-secondary": { - "value": "{color.theme.bg.secondary}", "type": "color", "source": "$btn-secondary-outline-active-bg" + "$value": "{color.theme.bg.secondary}", + "source": "$btn-secondary-outline-active-bg" }, "inverse-outline-secondary": { - "value": "{color.theme.bg.secondary}", - "type": "color", + "$value": "{color.theme.bg.secondary}", "source": "$btn-secondary-inverse-outline-active-bg" }, - "inverse-secondary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-secondary-inverse-active-bg" } + "inverse-secondary": { + "$value": "{color.gray.100}", + "source": "$btn-secondary-inverse-active-bg" + } }, "border": { "secondary": { - "value": "{color.theme.active.secondary}", - "type": "color", + "$value": "{color.theme.active.secondary}", "source": "$btn-secondary-active-border-color" }, "outline-secondary": { - "value": "{color.theme.active.secondary}", - "type": "color", + "$value": "{color.theme.active.secondary}", "source": "$btn-secondary-outline-active-border-color" }, "inverse-outline-secondary": { - "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-outline-active-border-color" + "$value": "transparent", + "source": "$btn-secondary-inverse-outline-active-border-color" }, - "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-active-border-color" } + "inverse-secondary": { + "$value": "transparent", + "source": "$btn-secondary-inverse-active-border-color" + } } }, "focus": { "text": { - "secondary": { "value": "{color.btn.text.secondary}", "type": "color", "source": "$btn-secondary-focus-color" }, - "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-focus-color" }, + "secondary": { + "$value": "{color.btn.text.secondary}", + "source": "$btn-secondary-focus-color" + }, + "inverse-secondary": { + "$value": "inherit", + "source": "$btn-secondary-inverse-focus-color" + }, "outline-secondary": { - "value": "{color.btn.text.outline-secondary}", - "type": "color", + "$value": "{color.btn.text.outline-secondary}", "source": "$btn-secondary-outline-focus-color" }, "inverse-outline-secondary": { - "value": "{color.btn.text.inverse-outline-secondary}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-secondary}", "source": "$btn-secondary-inverse-outline-focus-color" } }, "border": { "secondary": { - "value": "{color.btn.bg.secondary}", - "type": "color", + "$value": "{color.btn.bg.secondary}", "source": "$btn-secondary-focus-border-color" }, "outline-secondary": { - "value": "{color.btn.border.outline-secondary}", - "type": "color", + "$value": "{color.btn.border.outline-secondary}", "source": "$btn-secondary-outline-focus-border-color" }, "inverse-secondary": { - "value": "{color.white}", - "type": "color", + "$value": "{color.white}", "source": "$btn-secondary-inverse-focus-border-color" }, "inverse-outline-secondary": { - "value": "{color.white}", - "type": "color", + "$value": "{color.white}", "source": "$btn-secondary-inverse-outline-focus-border-color" } }, "outline": { "secondary": { - "value": "{color.theme.focus.secondary}", - "type": "color", + "$value": "{color.theme.focus.secondary}", "source": "$btn-secondary-focus-outline-color" }, "outline-secondary": { - "value": "{color.theme.focus.secondary}", - "type": "color", + "$value": "{color.theme.focus.secondary}", "source": "$btn-secondary-outline-focus-outline-color" }, "inverse-secondary": { - "value": "{color.white}", - "type": "color", + "$value": "{color.white}", "source": "$btn-secondary-inverse-focus-outline-color" }, "inverse-outline-secondary": { - "value": "{color.btn.border.inverse-outline-secondary}", - "type": "color", + "$value": "{color.btn.border.inverse-outline-secondary}", "source": "$btn-secondary-inverse-outline-focus-outline-color" } }, "bg": { - "secondary": { "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-focus-bg" }, - "outline-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-outline-focus-bg" }, + "secondary": { + "$value": "{color.btn.bg.secondary}", + "source": "$btn-secondary-focus-bg" + }, + "outline-secondary": { + "$value": "transparent", + "source": "$btn-secondary-outline-focus-bg" + }, "inverse-secondary": { - "value": "{color.btn.bg.inverse-secondary}", - "type": "color", + "$value": "{color.btn.bg.inverse-secondary}", "source": "$btn-secondary-inverse-focus-bg" }, - "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-focus-bg" } + "inverse-outline-secondary": { + "$value": "inherit", + "source": "$btn-secondary-inverse-outline-focus-bg" + } } }, "disabled": { "text": { - "secondary": { "value": "{color.btn.text.secondary}", "type": "color", "source": "$btn-secondary-disabled-color" }, + "secondary": { + "$value": "{color.btn.text.secondary}", + "source": "$btn-secondary-disabled-color" + }, "outline-secondary": { - "value": "inherit", - "type": "color", + "$value": "inherit", "source": "$btn-secondary-outline-disabled-color" }, - "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-disabled-color" }, + "inverse-secondary": { + "$value": "inherit", + "source": "$btn-secondary-inverse-disabled-color" + }, "inverse-outline-secondary": { - "value": "{color.btn.text.inverse-outline-secondary}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-secondary}", "source": "$btn-secondary-inverse-outline-disabled-color" } }, "bg": { - "secondary": { "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-disabled-bg" }, - "outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-outline-disabled-bg" }, - "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-disabled-bg" }, - "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-disabled-bg" } + "secondary": { + "$value": "{color.btn.bg.secondary}", + "source": "$btn-secondary-disabled-bg" + }, + "outline-secondary": { + "$value": "inherit", + "source": "$btn-secondary-outline-disabled-bg" + }, + "inverse-secondary": { + "$value": "inherit", + "source": "$btn-secondary-inverse-disabled-bg" + }, + "inverse-outline-secondary": { + "$value": "inherit", + "source": "$btn-secondary-inverse-outline-disabled-bg" + } }, "border": { - "secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-disabled-border-color" }, + "secondary": { + "$value": "inherit", + "source": "$btn-secondary-disabled-border-color" + }, "outline-secondary": { - "value": "{color.secondary.base}", - "type": "color", + "$value": "{color.secondary.base}", "source": "$btn-secondary-outline-disabled-border-color" }, "inverse-secondary": { - "value": "{color.btn.border.inverse-secondary}", - "type": "color", + "$value": "{color.btn.border.inverse-secondary}", "source": "$btn-secondary-inverse-disabled-border-color" }, "inverse-outline-secondary": { - "value": "{color.btn.border.inverse-outline-secondary}", - "type": "color", + "$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 4b68d59462..9d2e00bcfe 100644 --- a/tokens/src/themes/light/components/Button/success.json +++ b/tokens/src/themes/light/components/Button/success.json @@ -1,251 +1,349 @@ { "color": { + "$type": "color", "btn": { "text": { "success": { - "value": "{color.btn.bg.success}", - "type": "color", - "source": "$btn-success-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.bg.success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-color" }, "outline-success": { - "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-color" + "$value": "{color.success.base}", + "source": "$btn-success-outline-color" }, "inverse-success": { - "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-color" + "$value": "{color.success.base}", + "source": "$btn-success-inverse-color" }, "inverse-outline-success": { - "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-color" + "$value": "{color.white}", + "source": "$btn-success-inverse-outline-color" } }, "bg": { - "success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-bg" }, - "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-bg" }, + "success": { + "$value": "{color.success.base}", + "source": "$btn-success-bg" + }, + "outline-success": { + "$value": "inherit", + "source": "$btn-success-outline-bg" + }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", - "source": "$btn-success-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.text.inverse-success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-inverse-bg" }, - "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-bg" } + "inverse-outline-success": { + "$value": "inherit", + "source": "$btn-success-inverse-outline-bg" + } }, "border": { - "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-border-color" }, + "success": { + "$value": "{color.btn.bg.success}", + "source": "$btn-success-border-color" + }, "outline-success": { - "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-border-color" + "$value": "{color.success.base}", + "source": "$btn-success-outline-border-color" + }, + "inverse-success": { + "$value": "transparent", + "source": "$btn-success-inverse-border-color" }, - "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-border-color" }, "inverse-outline-success": { - "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-border-color" + "$value": "{color.white}", + "source": "$btn-success-inverse-outline-border-color" } }, "hover": { "text": { "success": { - "value": "{color.btn.hover.bg.success}", - "type": "color", - "source": "$btn-success-hover-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.hover.bg.success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-hover-color" }, "outline-success": { - "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-outline-hover-color" + "$value": "{color.theme.hover.success}", + "source": "$btn-success-outline-hover-color" }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", - "source": "$btn-success-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.text.inverse-success}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-success-inverse-hover-color" }, "inverse-outline-success": { - "value": "{color.theme.hover.success}", - "type": "color", + "$value": "{color.theme.hover.success}", "source": "$btn-success-inverse-outline-hover-color" } }, "bg": { "success": { - "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-bg" + "$value": "{color.theme.hover.success}", + "source": "$btn-success-hover-bg" }, "outline-success": { - "value": "{color.success.100}", "type": "color", "source": "$btn-success-outline-hover-bg" + "$value": "{color.success.100}", + "source": "$btn-success-outline-hover-bg" }, "inverse-success": { - "value": "{color.btn.bg.inverse-success}", - "type": "color", - "source": "$btn-success-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.bg.inverse-success}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-success-inverse-hover-bg" }, "inverse-outline-success": { - "value": "{color.success.100}", "type": "color", "source": "$btn-success-inverse-outline-hover-bg" + "$value": "{color.success.100}", + "source": "$btn-success-inverse-outline-hover-bg" } }, "border": { "success": { - "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-border-color" + "$value": "{color.theme.hover.success}", + "source": "$btn-success-hover-border-color" }, "outline-success": { - "value": "{color.success.900}", "type": "color", "source": "$btn-success-outline-hover-border-color" + "$value": "{color.success.900}", + "source": "$btn-success-outline-hover-border-color" + }, + "inverse-success": { + "$value": "transparent", + "source": "$btn-success-inverse-hover-border-color" }, - "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-hover-border-color" }, "inverse-outline-success": { - "value": "transparent", "type": "color", "source": "$btn-success-inverse-outline-hover-border-color" + "$value": "transparent", + "source": "$btn-success-inverse-outline-hover-border-color" } } }, "active": { "text": { "success": { - "value": "{color.btn.active.bg.success}", - "type": "color", - "source": "$btn-success-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-active-color" }, "outline-success": { - "value": "{color.btn.active.bg.outline-success}", - "type": "color", - "source": "$btn-success-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.outline-success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-outline-active-color" }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", - "source": "$btn-success-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.btn.text.inverse-success}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-success-inverse-active-color" }, "inverse-outline-success": { - "value": "{color.btn.active.bg.inverse-outline-success}", - "type": "color", - "source": "$btn-success-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "$value": "{color.btn.active.bg.inverse-outline-success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-inverse-outline-active-color" + } }, "bg": { "success": { - "value": "{color.theme.active.success}", "type": "color", "source": "$btn-success-active-bg" + "$value": "{color.theme.active.success}", + "source": "$btn-success-active-bg" }, "outline-success": { - "value": "{color.theme.bg.success}", "type": "color", "source": "$btn-success-outline-active-bg" + "$value": "{color.theme.bg.success}", + "source": "$btn-success-outline-active-bg" + }, + "inverse-success": { + "$value": "{color.gray.100}", + "source": "$btn-success-inverse-active-bg" }, - "inverse-success": { "value": "{color.gray.100}", "type": "color", "source": "$btn-success-inverse-active-bg" }, "inverse-outline-success": { - "value": "{color.theme.bg.success}", - "type": "color", + "$value": "{color.theme.bg.success}", "source": "$btn-success-inverse-outline-active-bg" } }, "border": { "success": { - "value": "{color.theme.active.success}", - "type": "color", + "$value": "{color.theme.active.success}", "source": "$btn-success-active-border-color" }, "outline-success": { - "value": "{color.theme.active.success}", - "type": "color", + "$value": "{color.theme.active.success}", "source": "$btn-success-outline-active-border-color" }, "inverse-success": { - "value": "inherit", + "$value": "inherit", "source": "$btn-success-inverse-active-border-color" }, "inverse-outline-success": { - "value": "transparent", - "type": "color", + "$value": "transparent", "source": "$btn-success-inverse-outline-active-border-color" } } }, "focus": { "text": { - "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-focus-color" }, + "success": { + "$value": "{color.btn.text.success}", + "source": "$btn-success-focus-color" + }, "outline-success": { - "value": "{color.btn.text.outline-success}", - "type": "color", + "$value": "{color.btn.text.outline-success}", "source": "$btn-success-outline-focus-color" }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", + "$value": "{color.btn.text.inverse-success}", "source": "$btn-success-inverse-focus-color" }, "inverse-outline-success": { - "value": "{color.btn.text.inverse-outline-success}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-success}", "source": "$btn-success-inverse-outline-focus-color" } }, "border": { - "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-focus-border-color" }, + "success": { + "$value": "{color.btn.border.success}", + "source": "$btn-success-focus-border-color" + }, "outline-success": { - "value": "{color.btn.border.outline-success}", - "type": "color", + "$value": "{color.btn.border.outline-success}", "source": "$btn-success-outline-focus-border-color" }, "inverse-success": { - "value": "{color.white}", - "type": "color", + "$value": "{color.white}", "source": "$btn-success-inverse-focus-border-color" }, "inverse-outline-success": { - "value": "{color.btn.border.inverse-outline-success}", - "type": "color", + "$value": "{color.btn.border.inverse-outline-success}", "source": "$btn-success-inverse-outline-focus-border-color" } }, "bg": { - "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-focus-bg" }, - "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-focus-bg" }, - "inverse-success": { "value": "{color.btn.bg.inverse-success}", "type": "color", "source": "$btn-success-inverse-focus-bg" }, - "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-focus-bg" } + "success": { + "$value": "{color.btn.bg.success}", + "source": "$btn-success-focus-bg" + }, + "outline-success": { + "$value": "inherit", + "source": "$btn-success-outline-focus-bg" + }, + "inverse-success": { + "$value": "{color.btn.bg.inverse-success}", + "source": "$btn-success-inverse-focus-bg" + }, + "inverse-outline-success": { + "$value": "inherit", + "source": "$btn-success-inverse-outline-focus-bg" + } }, "outline": { - "success": { "value": "{color.theme.focus.success}", "type": "color", "source": "$btn-success-focus-outline-color" }, + "success": { + "$value": "{color.theme.focus.success}", + "source": "$btn-success-focus-outline-color" + }, "outline-success": { - "value": "{color.theme.focus.success}", - "type": "color", + "$value": "{color.theme.focus.success}", "source": "$btn-success-outline-focus-outline-color" }, "inverse-success": { - "value": "{color.btn.focus.border.inverse-success}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-success}", "source": "$btn-success-inverse-focus-outline-color" }, "inverse-outline-success": { - "value": "{color.btn.focus.border.inverse-outline-success}", - "type": "color", + "$value": "{color.btn.focus.border.inverse-outline-success}", "source": "$btn-success-inverse-outline-focus-outline-color" } } }, "disabled": { "text": { - "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-disabled-color" }, + "success": { + "$value": "{color.btn.text.success}", + "source": "$btn-success-disabled-color" + }, "outline-success": { - "value": "{color.btn.text.outline-success}", - "type": "color", + "$value": "{color.btn.text.outline-success}", "source": "$btn-success-outline-disabled-color" }, - "inverse-success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-disabled-color" }, + "inverse-success": { + "$value": "{color.success.base}", + "source": "$btn-success-inverse-disabled-color" + }, "inverse-outline-success": { - "value": "{color.btn.text.inverse-outline-success}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-success}", "source": "$btn-success-inverse-outline-disabled-color" } }, "bg": { - "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-disabled-bg" }, - "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-disabled-bg" }, - "inverse-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-disabled-bg" }, - "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-disabled-bg" } + "success": { + "$value": "{color.btn.bg.success}", + "source": "$btn-success-disabled-bg" + }, + "outline-success": { + "$value": "inherit", + "source": "$btn-success-outline-disabled-bg" + }, + "inverse-success": { + "$value": "inherit", + "source": "$btn-success-inverse-disabled-bg" + }, + "inverse-outline-success": { + "$value": "inherit", + "source": "$btn-success-inverse-outline-disabled-bg" + } }, "border": { - "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-disabled-border-color" }, + "success": { + "$value": "{color.btn.border.success}", + "source": "$btn-success-disabled-border-color" + }, "outline-success": { - "value": "{color.btn.border.outline-success}", - "type": "color", + "$value": "{color.btn.border.outline-success}", "source": "$btn-success-outline-disabled-border-color" }, - "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-disabled-border-color" }, - "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-disabled-border-color" } + "inverse-success": { + "$value": "transparent", + "source": "$btn-success-inverse-disabled-border-color" + }, + "inverse-outline-success": { + "$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 a743b5f0de..e463e7ce8d 100644 --- a/tokens/src/themes/light/components/Button/tertiary.json +++ b/tokens/src/themes/light/components/Button/tertiary.json @@ -1,106 +1,178 @@ { "color": { + "$type": "color", "btn": { "text": { - "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-color" }, + "tertiary": { + "$value": "{color.gray.700}", + "source": "$btn-tertiary-color" + }, "inverse-tertiary": { - "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-color" + "$value": "{color.white}", + "source": "$btn-inverse-tertiary-color" } }, "bg": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-bg" }, - "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-bg" } + "tertiary": { + "$value": "transparent", + "source": "$btn-tertiary-bg" + }, + "inverse-tertiary": { + "$value": "transparent", + "source": "$btn-inverse-tertiary-bg" + } }, "border": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-border-color" }, - "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-border-color" } + "tertiary": { + "$value": "transparent", + "source": "$btn-tertiary-border-color" + }, + "inverse-tertiary": { + "$value": "transparent", + "source": "$btn-inverse-tertiary-border-color" + } }, "hover": { "text": { - "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-hover-color" }, + "tertiary": { + "$value": "{color.gray.700}", + "source": "$btn-tertiary-hover-color" + }, "inverse-tertiary": { - "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-hover-color" + "$value": "{color.white}", + "source": "$btn-inverse-tertiary-hover-color" } }, "bg": { - "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-hover-bg" }, + "tertiary": { + "$value": "{color.light.500}", + "source": "$btn-tertiary-hover-bg" + }, "inverse-tertiary": { - "value": "{color.white}", - "type": "color", - "source": "$btn-inverse-tertiary-hover-bg", - "modify": [{ "type": "alpha", "amount": 0.1 }] + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "source": "$btn-inverse-tertiary-hover-bg" } }, "border": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-hover-border-color" }, + "tertiary": { + "$value": "transparent", + "source": "$btn-tertiary-hover-border-color" + }, "inverse-tertiary": { - "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-hover-border-color" + "$value": "transparent", + "source": "$btn-inverse-tertiary-hover-border-color" } } }, "active": { "text": { "tertiary": { - "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-active-color" + "$value": "{color.gray.700}", + "source": "$btn-tertiary-active-color" }, "inverse-tertiary": { - "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-active-color" + "$value": "{color.white}", + "source": "$btn-inverse-tertiary-active-color" } }, "bg": { - "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-active-bg" }, - "inverse-tertiary": { - "value": "{color.btn.hover.bg.inverse-tertiary}", - "type": "color", + "tertiary": { + "$value": "{color.light.500}", + "source": "$btn-tertiary-active-bg" + }, + "inverse-tertiary": { + "$value": "{color.btn.hover.bg.inverse-tertiary}", "source": "$btn-inverse-tertiary-active-bg" } }, "border": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-active-border-color" }, + "tertiary": { + "$value": "transparent", + "source": "$btn-tertiary-active-border-color" + }, "inverse-tertiary": { - "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-active-border-color" + "$value": "transparent", + "source": "$btn-inverse-tertiary-active-border-color" } } }, "focus": { "text": { - "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-focus-color" }, + "tertiary": { + "$value": "{color.btn.text.tertiary}", + "source": "$btn-tertiary-focus-color" + }, "inverse-tertiary": { - "value": "{color.btn.text.inverse-tertiary}", - "type": "color", + "$value": "{color.btn.text.inverse-tertiary}", "source": "$btn-inverse-tertiary-focus-color" } }, "border": { - "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-focus-border-color" }, - "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-focus-border-color" } + "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": { "value": "inherit", "type": "color", "source": "$btn-tertiary-focus-bg" }, - "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-focus-bg" } + "tertiary": { + "$value": "inherit", + "source": "$btn-tertiary-focus-bg" + }, + "inverse-tertiary": { + "$value": "inherit", + "source": "$btn-inverse-tertiary-focus-bg" + } }, "outline": { - "tertiary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-tertiary-focus-outline-color" }, - "inverse-tertiary": { "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-focus-outline-color" } + "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": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-color" }, + "tertiary": { + "$value": "{color.btn.text.tertiary}", + "source": "$btn-tertiary-disabled-color" + }, "inverse-tertiary": { - "value": "{color.btn.text.inverse-tertiary}", - "type": "color", + "$value": "{color.btn.text.inverse-tertiary}", "source": "$btn-inverse-tertiary-disabled-color" } }, "bg": { - "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-disabled-bg" }, - "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-disabled-bg" } + "tertiary": { + "$value": "inherit", + "source": "$btn-tertiary-disabled-bg" + }, + "inverse-tertiary": { + "$value": "inherit", + "source": "$btn-inverse-tertiary-disabled-bg" + } }, "border": { - "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-border-color" }, + "tertiary": { + "$value": "{color.btn.border.tertiary}", + "source": "$btn-tertiary-disabled-border-color" + }, "inverse-tertiary": { - "value": "{color.btn.border.inverse-tertiary}", "type": "color", "source": "$btn-inverse-tertiary-disabled-border-color" + "$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 0d47ce0e22..ce8031fb4e 100644 --- a/tokens/src/themes/light/components/Button/warning.json +++ b/tokens/src/themes/light/components/Button/warning.json @@ -1,272 +1,347 @@ { "color": { + "$type": "color", "btn": { "text": { "warning": { - "value": "{color.btn.bg.warning}", - "type": "color", - "source": "$btn-warning-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.bg.warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-color" }, "outline-warning": { - "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-color" + "$value": "{color.warning.base}", + "source": "$btn-warning-outline-color" }, "inverse-warning": { - "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-inverse-color" + "$value": "{color.warning.base}", + "source": "$btn-warning-inverse-color" }, "inverse-outline-warning": { - "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-color" + "$value": "{color.white}", + "source": "$btn-warning-inverse-outline-color" } }, "bg": { - "warning": { "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-bg" }, - "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-bg" }, + "warning": { + "$value": "{color.warning.base}", + "source": "$btn-warning-bg" + }, + "outline-warning": { + "$value": "inherit", + "source": "$btn-warning-outline-bg" + }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", - "source": "$btn-warning-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.text.inverse-warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-inverse-bg" }, - "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-bg" } + "inverse-outline-warning": { + "$value": "inherit", + "source": "$btn-warning-inverse-outline-bg" + } }, "border": { - "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-border-color" }, + "warning": { + "$value": "{color.btn.bg.warning}", + "source": "$btn-warning-border-color" + }, "outline-warning": { - "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-border-color" + "$value": "{color.warning.base}", + "source": "$btn-warning-outline-border-color" + }, + "inverse-warning": { + "$value": "transparent", + "source": "$btn-warning-inverse-border-color" }, - "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-border-color" }, "inverse-outline-warning": { - "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-border-color" + "$value": "{color.white}", + "source": "$btn-warning-inverse-outline-border-color" } }, "hover": { "text": { "warning": { - "value": "{color.btn.hover.bg.warning}", - "type": "color", - "source": "$btn-warning-hover-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.hover.bg.warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-hover-color" }, "outline-warning": { - "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-outline-hover-color" + "$value": "{color.theme.hover.warning}", + "source": "$btn-warning-outline-hover-color" }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", - "source": "$btn-warning-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.text.inverse-warning}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-warning-inverse-hover-color" }, "inverse-outline-warning": { - "value": "{color.theme.hover.warning}", - "type": "color", + "$value": "{color.theme.hover.warning}", "source": "$btn-warning-inverse-outline-hover-color" } }, "bg": { "warning": { - "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-bg" + "$value": "{color.theme.hover.warning}", + "source": "$btn-warning-hover-bg" }, "outline-warning": { - "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-outline-hover-bg" + "$value": "{color.warning.100}", + "source": "$btn-warning-outline-hover-bg" }, "inverse-warning": { - "value": "{color.btn.bg.inverse-warning}", - "type": "color", - "source": "$btn-warning-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "$value": "{color.btn.bg.inverse-warning}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-warning-inverse-hover-bg" }, "inverse-outline-warning": { - "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-inverse-outline-hover-bg" + "$value": "{color.warning.100}", + "source": "$btn-warning-inverse-outline-hover-bg" } }, "border": { "warning": { - "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-border-color" + "$value": "{color.theme.hover.warning}", + "source": "$btn-warning-hover-border-color" }, "outline-warning": { - "value": "{color.warning.900}", "type": "color", "source": "$btn-warning-outline-hover-border-color" + "$value": "{color.warning.900}", + "source": "$btn-warning-outline-hover-border-color" + }, + "inverse-warning": { + "$value": "transparent", + "source": "$btn-warning-inverse-hover-border-color" }, - "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-hover-border-color" }, "inverse-outline-warning": { - "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-hover-border-color" + "$value": "transparent", + "source": "$btn-warning-inverse-outline-hover-border-color" } } }, "active": { "text": { "warning": { - "value": "{color.btn.active.bg.warning}", - "type": "color", - "source": "$btn-warning-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-active-color" }, "outline-warning": { - "value": "{color.btn.active.bg.outline-warning}", - "type": "color", - "source": "$btn-warning-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.btn.active.bg.outline-warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-outline-active-color" }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", - "source": "$btn-warning-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "$value": "{color.btn.text.inverse-warning}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-warning-inverse-active-color" }, "inverse-outline-warning": { - "value": "{color.btn.active.bg.inverse-outline-warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "$value": "{color.btn.active.bg.inverse-outline-warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-inverse-outline-active-color" + } }, "bg": { "warning": { - "value": "{color.theme.active.warning}", "type": "color", "source": "$btn-warning-active-bg" + "$value": "{color.theme.active.warning}", + "source": "$btn-warning-active-bg" }, "outline-warning": { - "value": "{color.theme.bg.warning}", "type": "color", "source": "$btn-warning-outline-active-bg" + "$value": "{color.theme.bg.warning}", + "source": "$btn-warning-outline-active-bg" + }, + "inverse-warning": { + "$value": "{color.gray.100}", + "source": "$btn-warning-inverse-active-bg" }, - "inverse-warning": { "value": "{color.gray.100}", "type": "color", "source": "$btn-warning-inverse-active-bg" }, "inverse-outline-warning": { - "value": "{color.theme.bg.warning}", - "type": "color", + "$value": "{color.theme.bg.warning}", "source": "$btn-warning-inverse-outline-active-bg" } }, "border": { "warning": { - "value": "{color.theme.active.warning}", - "type": "color", + "$value": "{color.theme.active.warning}", "source": "$btn-warning-active-border-color" }, "inverse-warning": { - "value": "inherit", - "type": "color", + "$value": "inherit", "source": "$btn-warning-inverse-active-border-color" }, "outline-warning": { - "value": "{color.theme.active.warning}", - "type": "color", + "$value": "{color.theme.active.warning}", "source": "$btn-warning-outline-active-border-color" }, "inverse-outline-warning": { - "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-active-border-color" + "$value": "transparent", + "source": "$btn-warning-inverse-outline-active-border-color" } } }, "focus": { "text": { - "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-focus-color" }, + "warning": { + "$value": "{color.btn.text.warning}", + "source": "$btn-warning-focus-color" + }, "outline-warning": { - "value": "{color.btn.text.outline-warning}", - "type": "color", + "$value": "{color.btn.text.outline-warning}", "source": "$btn-warning-outline-focus-color" }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", + "$value": "{color.btn.text.inverse-warning}", "source": "$btn-warning-inverse-focus-color" }, "inverse-outline-warning": { - "value": "{color.btn.text.inverse-outline-warning}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-warning}", "source": "$btn-warning-inverse-outline-focus-color" } }, "border": { "warning": { - "value": "{color.btn.border.warning}", - "type": "color", + "$value": "{color.btn.border.warning}", "source": "$btn-warning-focus-border-color" }, "outline-warning": { - "value": "{color.btn.border.outline-warning}", - "type": "color", + "$value": "{color.btn.border.outline-warning}", "source": "$btn-warning-outline-focus-border-color" }, "inverse-warning": { - "value": "{color.btn.border.inverse-warning}", - "type": "color", + "$value": "{color.btn.border.inverse-warning}", "source": "$btn-warning-inverse-focus-border-color" }, "inverse-outline-warning": { - "value": "{color.btn.border.inverse-outline-warning}", - "type": "color", + "$value": "{color.btn.border.inverse-outline-warning}", "source": "$btn-warning-inverse-outline-focus-border-color" } }, "bg": { - "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-focus-bg" }, - "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-focus-bg" }, + "warning": { + "$value": "{color.btn.bg.warning}", + "source": "$btn-warning-focus-bg" + }, + "outline-warning": { + "$value": "inherit", + "source": "$btn-warning-outline-focus-bg" + }, "inverse-warning": { - "value": "{color.btn.bg.inverse-warning}", - "type": "color", + "$value": "{color.btn.bg.inverse-warning}", "source": "$btn-warning-inverse-focus-bg" }, "inverse-outline-warning": { - "value": "inherit", - "type": "color", + "$value": "inherit", "source": "$btn-warning-inverse-outline-focus-bg" } }, "outline": { "warning": { - "value": "{color.theme.focus.warning}", - "type": "color", + "$value": "{color.theme.focus.warning}", "source": "$btn-warning-focus-outline-color" }, "outline-warning": { - "value": "{color.theme.focus.warning}", - "type": "color", + "$value": "{color.theme.focus.warning}", "source": "$btn-warning-outline-focus-outline-color" }, "inverse-warning": { - "value": "{color.white}", - "type": "color", + "$value": "{color.white}", "source": "$btn-warning-inverse-focus-outline-color" }, "inverse-outline-warning": { - "value": "inherit", - "type": "color", + "$value": "inherit", "source": "$btn-warning-inverse-outline-focus-bg" } } }, "disabled": { "text": { - "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-disabled-color" }, + "warning": { + "$value": "{color.btn.text.warning}", + "source": "$btn-warning-disabled-color" + }, "outline-warning": { - "value": "{color.btn.text.outline-warning}", - "type": "color", + "$value": "{color.btn.text.outline-warning}", "source": "$btn-warning-outline-disabled-color" }, "inverse-warning": { - "value": "{color.warning.base}", - "type": "color", + "$value": "{color.warning.base}", "source": "$btn-warning-inverse-disabled-color" }, "inverse-outline-warning": { - "value": "{color.btn.text.inverse-outline-warning}", - "type": "color", + "$value": "{color.btn.text.inverse-outline-warning}", "source": "$btn-warning-inverse-outline-disabled-color" } }, "bg": { - "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-disabled-bg" }, - "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-disabled-bg" }, - "inverse-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-disabled-bg" }, - "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-disabled-bg" } + "warning": { + "$value": "{color.btn.bg.warning}", + "source": "$btn-warning-disabled-bg" + }, + "outline-warning": { + "$value": "inherit", + "source": "$btn-warning-outline-disabled-bg" + }, + "inverse-warning": { + "$value": "inherit", + "source": "$btn-warning-inverse-disabled-bg" + }, + "inverse-outline-warning": { + "$value": "inherit", + "source": "$btn-warning-inverse-outline-disabled-bg" + } }, "border": { - "warning": { "value": "{color.btn.border.warning}", "type": "color", "source": "$btn-warning-disabled-border-color" }, + "warning": { + "$value": "{color.btn.border.warning}", + "source": "$btn-warning-disabled-border-color" + }, "outline-warning": { - "value": "{color.btn.border.outline-warning}", - "type": "color", + "$value": "{color.btn.border.outline-warning}", "source": "$btn-warning-outline-disabled-border-color" }, - "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-disabled-border-color" }, + "inverse-warning": { + "$value": "transparent", + "source": "$btn-warning-inverse-disabled-border-color" + }, "inverse-outline-warning": { - "value": "{color.btn.border.inverse-outline-warning}", - "type": "color", + "$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 c7deddea25..b91735a319 100644 --- a/tokens/src/themes/light/components/Card.json +++ b/tokens/src/themes/light/components/Card.json @@ -1,36 +1,51 @@ { "color": { + "$type": "color", "card": { - "base": { "value": "inherit", "type": "color", "source": "$card-color" }, + "base": { + "$value": "inherit", + "source": "$card-color" + }, "bg": { - "base": { "value": "{color.bg.base}", "type": "color", "source": "$card-bg" }, - "dark": { "value": "{color.primary.500}", "type": "color", "source": "$card-bg-dark" }, - "muted": { "value": "{color.light.200}", "type": "color", "source": "$card-bg-muted" } + "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": { - "value": "{color.black}", - "type": "color", - "source": "$card-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.125 - }] + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.125 + } + ], + "source": "$card-border-color" }, "focus": { "base": { - "value": "{color.primary.500}", - "type": "color", + "$value": "{color.primary.500}", "source": "$card-border-focus-color" }, "dark": { - "value": "{color.theme.focus.primary}", - "type": "color", + "$value": "{color.theme.focus.primary}", "source": "$card-border-focus-color-dark" } } }, - "divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" } + "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 834fcf832b..be61070fbb 100644 --- a/tokens/src/themes/light/components/Carousel.json +++ b/tokens/src/themes/light/components/Carousel.json @@ -1,43 +1,71 @@ { "color": { + "$type": "color", "carousel": { "control": { - "base": { "value": "{color.white}", "type": "color", "source": "$carousel-control-color" } + "base": { + "$value": "{color.white}", + "source": "$carousel-control-color" + } }, "indicator": { - "active-bg": { "value": "{color.white}", "type": "color", "source": "$carousel-indicator-active-bg" } + "active-bg": { + "$value": "{color.white}", + "source": "$carousel-indicator-active-bg" + } }, - "caption": { "value": "{color.white}", "type": "color", "source": "$carousel-caption-color" } + "caption": { + "$value": "{color.white}", + "source": "$carousel-caption-color" + } } }, "content": { + "$type": "file", "carousel": { "control": { "bg": { "prev-icon": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\")", - "type": "file", - "source": "$carousel-control-prev-icon-bg", + "$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" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$carousel-control-prev-icon-bg" }, "next-icon": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\")", - "type": "file", - "source": "$carousel-control-next-icon-bg", + "$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" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$carousel-control-next-icon-bg" } } } } }, "other": { + "$type": "ratio", "carousel": { "control": { "opacity": { - "base": { "value": ".5", "type": "ratio", "source": "$carousel-control-opacity" }, - "hover": { "value": ".9", "type": "ratio", "source": "$carousel-control-hover-opacity" } + "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 d67be11327..99271cdf21 100644 --- a/tokens/src/themes/light/components/Chip.json +++ b/tokens/src/themes/light/components/Chip.json @@ -1,50 +1,74 @@ { "color": { + "$type": "color", "chip": { "text": { - "light": { "value": "{color.black}", "type": "color", "source": "$chip-light-color" }, - "dark": { "value": "{color.white}", "type": "color", "source": "$chip-dark-color" } + "light": { + "$value": "{color.black}", + "source": "$chip-light-color" + }, + "dark": { + "$value": "{color.white}", + "source": "$chip-dark-color" + } }, "bg": { - "light": { "value": "{color.white}", "type": "color", "source": "$chip-light-bg-color" }, - "dark": { "value": "{color.primary.300}", "type": "color", "source": "$chip-dark-bg" } + "light": { + "$value": "{color.white}", + "source": "$chip-light-bg-color" + }, + "dark": { + "$value": "{color.primary.300}", + "source": "$chip-dark-bg" + } }, "border": { "base": { - "value": "{color.light.800}", "type": "color", "source": "$chip-border-color" + "$value": "{color.light.800}", + "source": "$chip-border-color" }, "focus": { "selected": { "dark": { - "value": "{color.chip.outline.dark}", "type": "color", "source": "$chip-dark-selected-focus-border-color" + "$value": "{color.chip.outline.dark}", + "source": "$chip-dark-selected-focus-border-color" }, "light": { - "value": "{color.dark.500}", "type": "color", "source": "$chip-light-selected-focus-border-color" + "$value": "{color.dark.500}", + "source": "$chip-light-selected-focus-border-color" } } } }, "label": { "base": { - "value": "{color.primary.700}", "type": "color", "source": "$chip-label-color" + "$value": "{color.primary.700}", + "source": "$chip-label-color" }, "dark": { - "value": "{color.chip.outline.dark}", "type": "color", "source": "$chip-dark-label-color" + "$value": "{color.chip.outline.dark}", + "source": "$chip-dark-label-color" } }, "outline": { "dark": { - "value": "{color.white}", "type": "color", "source": "$chip-dark-outline-color" + "$value": "{color.white}", + "source": "$chip-dark-outline-color" }, "light": { - "value": "{color.chip.label.base}", "type": "color", "source": "$chip-light-outline-color" + "$value": "{color.chip.label.base}", + "source": "$chip-light-outline-color" } } } }, "other": { + "$type": "ratio", "chip": { - "opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" } + "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 8d00637ca3..f591742bc0 100644 --- a/tokens/src/themes/light/components/CloseButton.json +++ b/tokens/src/themes/light/components/CloseButton.json @@ -1,10 +1,23 @@ { "color": { - "close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" } + "$type": "color", + "close-button": { + "$value": "{color.black}", + "source": "$close-color" + } }, "elevation": { + "$type": "shadow", "close-button": { - "text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow", "source": "$close-text-shadow" } + "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 bfdf221bde..16003ac3f0 100644 --- a/tokens/src/themes/light/components/Code.json +++ b/tokens/src/themes/light/components/Code.json @@ -1,20 +1,33 @@ { "color": { + "$type": "color", "code": { - "base": { "value": "#E83E8C", "type": "color", "source": "$code-color" }, + "base": { + "$value": "#E83E8C", + "source": "$code-color" + }, "kbd": { - "base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" }, - "bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" } + "base": { + "$value": "{color.white}", + "source": "$kbd-color" + }, + "bg": { + "$value": "{color.gray.700}", + "source": "$kbd-bg" + } }, - "pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" } + "pre": { + "$value": "{color.gray.900}", + "source": "$pre-color" + } } }, "elevation": { + "$type": "shadow", "code": { "kbd": { "box-shadow": { - "value": "none", - "type": "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 bf26918ac5..b63ac48d41 100644 --- a/tokens/src/themes/light/components/DataTable.json +++ b/tokens/src/themes/light/components/DataTable.json @@ -1,26 +1,36 @@ { "color": { + "$type": "color", "data-table": { "bg": { - "base": { "value": "{color.bg.base}", "type": "color", "source": "$data-table-background-color" }, + "base": { + "$value": "{color.bg.base}", + "source": "$data-table-background-color" + }, "is-loading": { - "value": "{color.white}", - "type": "color", - "source": "$data-table-is-loading-bg", + "$value": "{color.white}", "modify": [ { "type": "alpha", "amount": 0.7 } - ] + ], + "source": "$data-table-is-loading-bg" } }, - "border": { "value": "{color.light.300}", "type": "color", "source": "$data-table-border-color" } + "border": { + "$value": "{color.light.300}", + "source": "$data-table-border-color" + } } }, "elevation": { + "$type": "shadow", "data-table": { - "box-shadow": { "value": "{elevation.box-shadow.sm}", "type": "shadow", "source": "$data-table-box-shadow" } + "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 bf2f03a253..35b6f5d161 100644 --- a/tokens/src/themes/light/components/Dropdown.json +++ b/tokens/src/themes/light/components/Dropdown.json @@ -1,41 +1,78 @@ { "color": { + "$type": "color", "dropdown": { - "text": { "value": "{color.body.base}", "type": "color", "source": "$dropdown-color" }, - "header": { "value": "{color.gray.500}", "type": "color", "source": "$dropdown-header-color" }, - "bg": { "value": "{color.bg.base}", "type": "color", "source": "$dropdown-bg" }, + "text": { + "$value": "{color.body.base}", + "source": "$dropdown-color" + }, + "header": { + "$value": "{color.gray.500}", + "source": "$dropdown-header-color" + }, + "bg": { + "$value": "{color.bg.base}", + "source": "$dropdown-bg" + }, "border": { - "value": "{color.black}", - "type": "color", - "source": "$dropdown-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.15 - }] + "$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": { "value": "{color.gray.100}", "type": "color", "source": "$dropdown-divider-bg" }, "link": { - "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" }, + "base": { + "$value": "{color.gray.900}", + "source": "$dropdown-link-color" + }, "hover": { - "base": { - "value": "{color.gray.900}", - "type": "color", - "source": "$dropdown-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.5 }] + "base": { + "$value": "{color.gray.900}", + "modify": [ + { + "type": "darken", + "amount": 0.5 + } + ], + "source": "$dropdown-link-hover-color" }, - "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" } + "bg": { + "$value": "{color.light.300}", + "source": "$dropdown-link-hover-bg" + } }, "active": { - "base": { "value": "{color.active}", "type": "color", "source": "$dropdown-link-active-color" }, - "bg": { "value": "{color.bg.active}", "type": "color", "source": "$dropdown-link-active-bg" } + "base": { + "$value": "{color.active}", + "source": "$dropdown-link-active-color" + }, + "bg": { + "$value": "{color.bg.active}", + "source": "$dropdown-link-active-bg" + } }, - "disabled": { "value": "{color.disabled}", "type": "color", "source": "$dropdown-link-disabled-color" } + "disabled": { + "$value": "{color.disabled}", + "source": "$dropdown-link-disabled-color" + } } } }, "elevation": { + "$type": "shadow", "dropdown": { - "box-shadow": { "value": "none", "type": "shadow", "source": "$dropdown-box-shadow" } + "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 ef252e9d6f..412f1bc890 100644 --- a/tokens/src/themes/light/components/Dropzone.json +++ b/tokens/src/themes/light/components/Dropzone.json @@ -1,23 +1,70 @@ { "color": { + "$type": "color", "dropzone": { "error-wrapper": { - "value": "{color.danger.500}", "type": "color", "source": "$dropzone-error-wrapper-color" + "$value": "{color.danger.500}", + "source": "$dropzone-error-wrapper-color" }, "restriction-msg": { - "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color" + "$value": "{color.gray.500}", + "source": "$dropzone-restriction-msg-color" }, "border": { - "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" } + "base": { + "$value": "{color.gray.500}", + "source": "$dropzone-border-color-default" + } } } }, "elevation": { + "$type": "shadow", "dropzone": { - "hover": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-hover" }, - "focus": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-focus" }, - "active": { "value": "inset 0 0 0 2px {color.primary.500}", "type": "shadow", "source": "$dropzone-box-shadow-active" }, - "error": { "value": "inset 0 0 0 2px {color.danger.300}", "type": "shadow", "source": "$dropzone-box-shadow-error" } + "hover": { + "$value": { + "color": "{color.info.300}", + "spread": "2px", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + }, + "source": "$dropzone-box-shadow-hover" + }, + "focus": { + "$value": { + "color": "{color.info.300}", + "spread": "2px", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + }, + "source": "$dropzone-box-shadow-focus" + }, + "active": { + "$value": { + "color": "{color.primary.500}", + "spread": "2px", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + }, + "source": "$dropzone-box-shadow-active" + }, + "error": { + "$value": { + "color": "{color.danger.300}", + "spread": "2px", + "offsetX": "0", + "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 c477d6541c..e499280b83 100644 --- a/tokens/src/themes/light/components/Form/color.json +++ b/tokens/src/themes/light/components/Form/color.json @@ -2,266 +2,402 @@ "color": { "form": { "input": { - "base": { "value": "{color.gray.700}", "type": "color", "source": "$input-color" }, - "placeholder": { "value": "{color.gray.500}", "type": "color", "source": "$input-placeholder-color" }, - "plaintext": { "value": "{color.body.base}", "type": "color", "source": "$input-plaintext-color" }, - "border": { "value": "{color.gray.500}", "type": "color", "source": "$input-border-color" }, + "$type": "color", + "base": { + "$value": "{color.gray.700}", + "source": "$input-color" + }, + "placeholder": { + "$value": "{color.gray.500}", + "source": "$input-placeholder-color" + }, + "plaintext": { + "$value": "{color.body.base}", + "source": "$input-plaintext-color" + }, + "border": { + "$value": "{color.gray.500}", + "source": "$input-border-color" + }, "bg": { - "base": { "value": "{color.bg.base}", "type": "color", "source": "$input-bg" }, - "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$input-disabled-bg" } + "base": { + "$value": "{color.bg.base}", + "source": "$input-bg" + }, + "disabled": { + "$value": "{color.gray.100}", + "source": "$input-disabled-bg" + } }, "group": { "addon": { - "base": { "value": "{color.form.input.base}", "type": "color", "source": "$input-group-addon-color" }, + "base": { + "$value": "{color.form.input.base}", + "source": "$input-group-addon-color" + }, "border": { - "value": "{color.form.input.border}", "type": "color", "source": "$input-group-addon-border-color" + "$value": "{color.form.input.border}", + "source": "$input-group-addon-border-color" }, - "bg": { "value": "{color.gray.100}", "type": "color", "source": "$input-group-addon-bg" } + "bg": { + "$value": "{color.gray.100}", + "source": "$input-group-addon-bg" + } } }, "focus": { - "base": { "value": "{color.form.input.base}", "type": "color", "source": "$input-focus-color" }, - "border": { "value": "{color.input.focus}", "type": "color", "source": "$input-focus-border-color" }, - "bg": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$input-focus-bg" } + "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": { - "value": "{color.gray.700}", "type": "color", "source": "$custom-control-indicator-border-color" + "$value": "{color.gray.700}", + "source": "$custom-control-indicator-border-color" }, "bg": { "base": { - "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-control-indicator-bg" + "$value": "{color.form.input.bg.base}", + "source": "$custom-control-indicator-bg" }, "disabled": { - "value": "{color.form.input.bg.disabled}", - "type": "color", + "$value": "{color.form.input.bg.disabled}", "source": "$custom-control-indicator-disabled-bg" } }, "checked": { - "base": { "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-color" }, - "valid": { "value": "{color.success.base}", "type": "color", "source": "$custom-control-indicator-checked-valid-color" }, - "invalid": { "value": "{color.danger.base}", "type": "color", "source": "$custom-control-indicator-checked-invalid-color" }, + "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": { - "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-bg" + "$value": "{color.bg.active}", + "source": "$custom-control-indicator-checked-bg" }, "disabled": { - "value": "{color.primary.base}", - "type": "color", - "source": "$custom-control-indicator-checked-disabled-bg", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "$value": "{color.primary.base}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$custom-control-indicator-checked-disabled-bg" } }, "border": { "base": { - "value": "{color.form.control.indicator.checked.base}", - "type": "color", + "$value": "{color.form.control.indicator.checked.base}", "source": "$custom-control-indicator-checked-border-color" }, "focus": { - "value": "{color.form.input.focus.border}", - "type": "color", + "$value": "{color.form.input.focus.border}", "source": "$custom-control-indicator-focus-border-color" } } }, "active": { "base": { - "value": "{color.active}", "type": "color", "source": "$custom-control-indicator-active-color" + "$value": "{color.active}", + "source": "$custom-control-indicator-active-color" }, "bg": { - "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-active-bg" + "$value": "{color.bg.active}", + "source": "$custom-control-indicator-active-bg" }, "border": { - "value": "{color.form.control.indicator.active.bg}", - "type": "color", + "$value": "{color.form.control.indicator.active.bg}", "source": "$custom-control-indicator-active-border-color" } } }, "label": { - "base": { "value": "inherit", "type": "color", "source": "$custom-control-label-color" }, + "$type": "color", + "base": { + "$value": "inherit", + "source": "$custom-control-label-color" + }, "disabled": { - "value": "{color.disabled}", "type": "color", "source": "$custom-control-label-disabled-color" + "$value": "{color.disabled}", + "source": "$custom-control-label-disabled-color" }, "floating": { "text": { - "value": "{color.form.input.bg.base}", - "type": "color", - "source": "$form-control-floating-label-text-bg", - "modify": [{ "type": "alpha", "amount": 0.1 }] + "$value": "{color.form.input.bg.base}", + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "source": "$form-control-floating-label-text-bg" } } }, "checkbox": { + "$type": "color", "indicator": { "indeterminate": { "base": { - "value": "{color.form.control.indicator.checked.base}", - "type": "color", + "$value": "{color.form.control.indicator.checked.base}", "source": "$custom-checkbox-indicator-indeterminate-color" }, "bg": { - "value": "{color.bg.active}", - "type": "color", + "$value": "{color.bg.active}", "source": "$custom-checkbox-indicator-indeterminate-bg" }, "border": { - "value": "{color.form.control.checkbox.indicator.indeterminate.bg}", - "type": "color", + "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}", "source": "$custom-checkbox-indicator-indeterminate-border-color" } } } }, "switch": { + "$type": "color", "indicator": { "checked": { "bg": { - "value": "{color.success.base}", - "type": "color", + "$value": "{color.success.base}", "source": "$custom-switch-indicator-checked-bg" } } } }, "select": { - "base": { "value": "{color.form.input.base}", "type": "color", "source": "$custom-select-color" }, - "disabled": { "value": "{color.disabled}", "type": "color", "source": "$custom-select-disabled-color" }, + "base": { + "$type": "color", + "$value": "{color.form.input.base}", + "source": "$custom-select-color" + }, + "disabled": { + "$type": "color", + "$value": "{color.disabled}", + "source": "$custom-select-disabled-color" + }, "indicator": { - "base": { "value": "{color.theme.hover.gray}", "type": "color", "source": "$custom-select-indicator-color" } + "$type": "color", + "base": { + "$value": "{color.theme.hover.gray}", + "source": "$custom-select-indicator-color" + } }, "bg": { - "base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-select-bg" }, - "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$custom-select-disabled-bg" }, - "size": { "value": "24px 24px", "type": "dimension", "source": "$custom-select-bg-size" } + "base": { + "$type": "color", + "$value": "{color.form.input.bg.base}", + "source": "$custom-select-bg" + }, + "disabled": { + "$type": "color", + "$value": "{color.gray.100}", + "source": "$custom-select-disabled-bg" + }, + "size": { + "$type": "dimension", + "$value": "{color.gray.100}", + "source": "$custom-select-bg-size" + } }, "border": { + "$type": "color", "base": { - "value": "{color.form.input.border}", "type": "color", "source": "$custom-select-border-color" + "$value": "{color.form.input.border}", + "source": "$custom-select-border-color" }, "focus": { - "value": "{color.form.input.focus.border}", - "type": "color", + "$value": "{color.form.input.focus.border}", "source": "$custom-select-focus-border-color" } } }, "range": { + "$type": "color", "track": { - "bg": { "value": "{color.gray.300}", "type": "color", "source": "$custom-range-track-bg" } + "bg": { + "$value": "{color.gray.300}", + "source": "$custom-range-track-bg" + } }, "thumb": { "bg": { - "base": { "value": "{color.bg.active}", "type": "color", "source": "$custom-range-thumb-bg" }, + "base": { + "$value": "{color.bg.active}", + "source": "$custom-range-thumb-bg" + }, "disabled": { - "value": "{color.disabled}", "type": "color", "source": "$custom-range-thumb-disabled-bg" + "$value": "{color.disabled}", + "source": "$custom-range-thumb-disabled-bg" }, "active": { - "value": "{color.bg.active}", - "type": "color", - "source": "$custom-range-thumb-active-bg", - "modify": [{ "type": "lighten", "amount": "0.35" }] + "$value": "{color.bg.active}", + "modify": [ + { + "type": "lighten", + "amount": "0.35" + } + ], + "source": "$custom-range-thumb-active-bg" } } } }, "file": { - "base": { "value": "{color.form.input.base}", "type": "color", "source": "$custom-file-color" }, + "$type": "color", + "base": { + "$value": "{color.form.input.base}", + "source": "$custom-file-color" + }, "bg": { - "base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-file-bg" }, + "base": { + "$value": "{color.form.input.bg.base}", + "source": "$custom-file-bg" + }, "disabled": { - "value": "{color.form.input.bg.disabled}", "type": "color", "source": "$custom-file-disabled-bg" + "$value": "{color.form.input.bg.disabled}", + "source": "$custom-file-disabled-bg" } }, "button": { "base": { - "value": "{color.form.control.file.base}", "type": "color", "source": "$custom-file-button-color" + "$value": "{color.form.control.file.base}", + "source": "$custom-file-button-color" }, "bg": { - "value": "{color.form.input.group.addon.bg}", "type": "color", "source": "$custom-file-button-bg" + "$value": "{color.form.input.group.addon.bg}", + "source": "$custom-file-button-bg" } }, "border": { "base": { - "value": "{color.form.input.border}", "type": "color", "source": "$custom-file-border-color" + "$value": "{color.form.input.border}", + "source": "$custom-file-border-color" }, "focus": { - "value": "{color.form.input.focus.border}", - "type": "color", + "$value": "{color.form.input.focus.border}", "source": "$custom-file-focus-border-color" } } } }, "feedback": { - "valid": { "value": "{color.success.base}", "type": "color", "source": "$form-feedback-valid-color" }, - "invalid": { "value": "{color.danger.base}", "type": "color", "source": "$form-feedback-invalid-color" }, + "$type": "color", + "valid": { + "$value": "{color.success.base}", + "source": "$form-feedback-valid-color" + }, + "invalid": { + "$value": "{color.danger.base}", + "source": "$form-feedback-invalid-color" + }, "icon": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", + "$value": "{color.form.feedback.valid}", "source": "$form-feedback-icon-valid-color" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", + "$value": "{color.form.feedback.invalid}", "source": "$form-feedback-icon-invalid-color" } }, "tooltip": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", - "source": "$form-feedback-tooltip-valid-color", - "modify": [{ "type": "color-yiq" }] + "$value": "{color.form.feedback.valid}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$form-feedback-tooltip-valid-color" }, "bg": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", - "source": "$form-feedback-tooltip-valid-bg", - "modify": [{ "type": "alpha", "amount": 0.9 }] + "$value": "{color.form.feedback.valid}", + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "source": "$form-feedback-tooltip-valid-bg" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", - "source": "$form-feedback-tooltip-invalid-bg", - "modify": [{ "type": "alpha", "amount": 0.9 }] + "$value": "{color.form.feedback.invalid}", + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "source": "$form-feedback-tooltip-invalid-bg" } }, "box-shadow": { "focus": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", - "source": "$form-feedback-focus-box-shadow-valid-color", - "modify": [{ "type": "alpha", "amount": 0.25 }] + "$value": "{color.form.feedback.valid}", + "modify": [ + { + "type": "alpha", + "amount": 0.25 + } + ], + "source": "$form-feedback-focus-box-shadow-valid-color" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", - "source": "$form-feedback-focus-box-shadow-invalid-color", - "modify": [{ "type": "alpha", "amount": 0.25 }] + "$value": "{color.form.feedback.invalid}", + "modify": [ + { + "type": "alpha", + "amount": 0.25 + } + ], + "source": "$form-feedback-focus-box-shadow-invalid-color" } } } }, "checked": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", - "source": "$form-feedback-checked-valid-color", - "modify": [{ "type": "lighten", "amount": 0.1 }] + "$value": "{color.form.feedback.valid}", + "modify": [ + { + "type": "lighten", + "amount": 0.1 + } + ], + "source": "$form-feedback-checked-valid-color" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", - "source": "$form-feedback-checked-invalid-color", - "modify": [{ "type": "lighten", "amount": 0.1 }] + "$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 49f3b256c3..da81e9e283 100644 --- a/tokens/src/themes/light/components/Form/elevation.json +++ b/tokens/src/themes/light/components/Form/elevation.json @@ -1,71 +1,100 @@ { "elevation": { + "$type": "shadow", "form": { "input": { - "base": { "value": "none", "type": "shadow", "source": "$input-box-shadow" }, + "base": { + "$value": "none", + "source": "$input-box-shadow" + }, "focus": { - "value": "0 0 0 1px {color.primary.500}", - "type": "shadow", + "$value": { + "color": "{color.primary.500}", + "spread": "1px", + "offsetX": "0", + "offsetY": "0", + "blur": "0" + }, "source": "$input-focus-box-shadow" } }, "control": { "indicator": { "base": { - "value": "{elevation.form.input.base}", - "type": "shadow", + "$value": "{elevation.form.input.base}", "source": "$custom-control-indicator-box-shadow" }, "checked": { - "base": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-checked-box-shadow" }, + "base": { + "$value": "none", + "source": "$custom-control-indicator-checked-box-shadow" + }, "focus": { - "value": "0 0 0 4px rgba(0, 0, 0, .1)", - "type": "shadow", + "$value": { + "color": "rgba(0, 0, 0, .1)", + "spread": "4px", + "offsetX": "0", + "offsetY": "0", + "blur": "0" + }, "source": "$custom-control-indicator-focus-box-shadow" } }, - "active": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-active-box-shadow" } + "active": { + "$value": "none", + "source": "$custom-control-indicator-active-box-shadow" + } }, "checkbox": { "indicator": { "indeterminate": { - "value": "none", "type": "shadow", "source": "$custom-checkbox-indicator-indeterminate-box-shadow" + "$value": "none", + "source": "$custom-checkbox-indicator-indeterminate-box-shadow" } } }, "range": { "track": { - "value": "none", - "type": "shadow", + "$value": "none", "source": "$custom-range-track-box-shadow" }, "thumb": { "base": { - "value": "none", "type": "shadow", "source": "$custom-range-thumb-box-shadow" + "$value": "none", + "source": "$custom-range-thumb-box-shadow" }, "focus": { - "value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}", - "type": "shadow", + "$value": [ + { + "color": "{color.body.bg}", + "spread": "0", + "offsetX": "0", + "offsetY": ".1rem", + "blur": ".25rem" + } + ], "source": "$custom-range-thumb-focus-box-shadow" } } }, "file": { "base": { - "value": "{elevation.form.input.base}", "type": "shadow", "source": "$custom-file-box-shadow" + "$value": "{elevation.form.input.base}", + "source": "$custom-file-box-shadow" }, "focus": { - "value": "{elevation.form.input.focus}", "type": "shadow", "source": "$custom-file-focus-box-shadow" + "$value": "{elevation.form.input.focus}", + "source": "$custom-file-focus-box-shadow" } }, "select": { "border": { "base": { - "value": "none", "type": "shadow", "source": "$custom-select-box-shadow" + "$value": "none", + "source": "$custom-select-box-shadow" }, "focus": { - "value": "{elevation.input.btn-focus.box-shadow}", - "type": "shadow", + "$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 3e4876afbe..428eacd459 100644 --- a/tokens/src/themes/light/components/Form/other.json +++ b/tokens/src/themes/light/components/Form/other.json @@ -1,127 +1,202 @@ { "other": { "form": { + "$type": "ratio", "feedback": { - "tooltip-opacity": { "value": ".9", "type": "ratio", "source": "$form-feedback-tooltip-opacity" } + "tooltip-opacity": { + "$value": ".9", + "source": "$form-feedback-tooltip-opacity" + } } }, "content": { "form": { "control": { "checkbox": { + "$type": "file", "indicator": { "icon-checked": { "base": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", - "source": "$custom-checkbox-indicator-icon-checked", + "$value": "url(\"data:image/svg+xml,\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-checkbox-indicator-icon-checked" }, "valid": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", - "source": "$custom-checkbox-indicator-icon-valid-checked", + "$value": "url(\"data:image/svg+xml,\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-checkbox-indicator-icon-valid-checked" }, "invalid": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", - "source": "$custom-checkbox-indicator-icon-invalid-checked", + "$value": "url(\"data:image/svg+xml,\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-checkbox-indicator-icon-invalid-checked" } }, "indeterminate": { "icon": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", - "source": "$custom-checkbox-indicator-icon-indeterminate", + "$value": "url(\"data:image/svg+xml,\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-checkbox-indicator-icon-indeterminate" } } } }, "radio": { + "$type": "file", "indicator": { "icon-checked": { "base": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")", - "type": "file", - "source": "$custom-radio-indicator-icon-checked", + "$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" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-radio-indicator-icon-checked" }, "valid": { - "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\")", - "type": "file", - "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" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-radio-indicator-icon-valid-checked" }, "invalid": { - "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\")", - "type": "file", - "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" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-radio-indicator-icon-invalid-checked" } } } }, "switch": { + "$type": "file", "indicator": { "icon-off": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")", - "type": "file", - "source": "$custom-switch-indicator-icon-off", + "$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" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-switch-indicator-icon-off" }, "icon-on": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")", - "type": "file", - "source": "$custom-switch-indicator-icon-on", + "$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" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-switch-indicator-icon-on" } } }, "select": { "indicator": { + "$type": "file", "icon": { - "value": "url('data:image/svg+xml,')", - "type": "file", - "source": "$custom-select-indicator", + "$value": "url('data:image/svg+xml,')", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-select-indicator" } }, "bg": { - "value": "{other.content.form.control.select.indicator.icon} no-repeat right {spacing.form.input.padding.y.base} center / {color.form.control.select.bg.base}", - "type": "background", + "$type": "background", + "$value": { + "color": "{color.form.control.select.bg.base}", + "image": "{other.content.form.control.select.indicator.icon}", + "repeat": "no-repeat", + "position-x": "right", + "offset-y": "{spacing.form.input.padding.y.base}", + "position-y": "center" + }, "source": "$custom-select-background" } } }, "feedback": { + "$type": "file", "icon": { "valid": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")", - "type": "file", - "source": "$form-feedback-icon-valid", + "$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" }] + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$form-feedback-icon-valid" }, "invalid": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")", - "type": "file", - "source": "$form-feedback-icon-invalid", + "$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" }] + "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 692a6b1b70..a5a20f7c81 100644 --- a/tokens/src/themes/light/components/IconButton.json +++ b/tokens/src/themes/light/components/IconButton.json @@ -1,449 +1,1072 @@ { "color": { + "$type": "color", "icon-button": { - "bg": { - "base": { "value": "transparent", "type": "color", "source": "$btn-icon-bg" }, + "bg": { + "base": { + "$value": "transparent", + "source": "$btn-icon-bg" + }, "primary": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.secondary.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.secondary.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.secondary.active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.brand.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.brand.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.brand.active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.success.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.success.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.success.active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.warning.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.warning.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.warning.active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.danger.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.danger.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.danger.active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.light.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.light.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.light.active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.dark.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.dark.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.dark.active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.black}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.black.active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.black.active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "color.icon-button.text.primary.base", "type": "color" }, - "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.secondary.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.secondary.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.secondary.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.secondary.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.secondary.inverse-active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.brand.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.brand.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.brand.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.brand.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.brand.inverse-active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.success.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.success.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.success.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.success.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.success.inverse-active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.warning.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.warning.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.warning.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.warning.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.warning.inverse-active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.danger.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.danger.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.danger.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.danger.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.danger.inverse-active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.light.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.light.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.light.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.light.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.light.inverse-active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.dark.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.dark.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.dark.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.dark.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.dark.inverse-active.base}", "type": "color" } + "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}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.black.base}", "type": "color" }, + "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}", "type": "color" }, - "hover": { "value": "{color.black}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.black}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.accent}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "value": "{color.black}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.black.inverse-active.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.text.black.inverse-active.base}", "type": "color" } + "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": { "value": "{color.white}", "type": "color", "source": "$btn-icon-accent-color" }, - "black": { "value": "{color.black}", "type": "color", "source": "$btn-icon-black" } + "accent": { + "$value": "{color.white}", + "source": "$btn-icon-accent-color" + }, + "black": { + "$value": "{color.black}", + "source": "$btn-icon-black" + } } }, "elevation": { + "$type": "shadow", "icon-button": { "box-shadow": { "primary": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.primary.base}", "type": "shadow" + "$value": { + "color": "{color.icon-button.text.primary.base}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } + }, + "inverse": { + "$value": { + "color": "{color.icon-button.accent}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "secondary": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}", "type": "shadow" + "$value": { + "color": "{color.icon-button.text.secondary.base}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "inverse": { + "$value": { + "color": "{color.icon-button.accent}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } + }, + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "brand": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}", "type": "shadow" + "$value": { + "color": "{color.icon-button.text.brand.base}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } + }, + "inverse": { + "$value": { + "color": "{color.icon-button.accent}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "success": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}", "type": "shadow" + "$value": { + "color": "{color.icon-button.text.success.base}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } + }, + "inverse": { + "$value": { + "color": "{color.icon-button.accent}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } + }, + "active": { + "$value": "none" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "inverse-active": { + "$value": "none" + } }, "warning": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}", "type": "shadow" + "$value": { + "color": "{color.icon-button.text.warning.base}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } + }, + "inverse": { + "$value": { + "color": "{color.icon-button.accent}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "danger": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}", "type": "shadow" + "$value": { + "color": "{color.icon-button.text.danger.base}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "inverse": { + "$value": { + "color": "{color.icon-button.accent}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } + }, + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "light": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}", "type": "shadow" + "$value": { + "color": "{color.icon-button.text.light.base}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } + }, + "inverse": { + "$value": { + "color": "{color.icon-button.accent}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "dark": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}", "type": "shadow" + "$value": { + "color": "{color.icon-button.text.dark.base}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } + }, + "inverse": { + "$value": { + "color": "{color.icon-button.accent}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } + }, + "active": { + "$value": "none" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "inverse-active": { + "$value": "none" + } }, "black": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}", "type": "shadow" + "$value": { + "color": "{color.icon-button.text.black.base}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } + }, + "inverse": { + "$value": { + "color": "{color.icon-button.accent}", + "spread": "{size.btn.focus.width}", + "offsetX": "0", + "offsetY": "0", + "blur": "0", + "inset": "inset" + } }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "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 bd743ec210..49b678bdcc 100644 --- a/tokens/src/themes/light/components/Image.json +++ b/tokens/src/themes/light/components/Image.json @@ -1,17 +1,31 @@ { "color": { + "$type": "color", "image": { - "figure-caption": { "value": "{color.gray.500}", "type": "color", "source": "$figure-caption-color" }, + "figure-caption": { + "$value": "{color.gray.500}", + "source": "$figure-caption-color" + }, "thumbnail": { - "bg": { "value": "{color.body.bg}", "type": "color", "source": "$thumbnail-bg" }, - "border": { "value": "{color.gray.200}", "type": "color", "source": "$thumbnail-border-color" } + "bg": { + "$value": "{color.body.bg}", + "source": "$thumbnail-bg" + }, + "border": { + "$value": "{color.gray.200}", + "source": "$thumbnail-border-color" + } } } }, "elevation": { + "$type": "shadow", "image": { "thumbnail": { - "box-shadow": { "value": "none", "type": "shadow", "source": "$thumbnail-box-shadow" } + "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 cbe7f88ef7..5b334d760b 100644 --- a/tokens/src/themes/light/components/Menu.json +++ b/tokens/src/themes/light/components/Menu.json @@ -1,28 +1,60 @@ { "elevation": { + "$type": "shadow", "menu": { - "box-shadow": { "value": "{elevation.box-shadow.base}", "type": "shadow", "source": "$menu-box-shadow" } + "box-shadow": { + "$value": "{elevation.box-shadow.base}", + "source": "$menu-box-shadow" + } } }, "color": { + "$type": "color", "menu": { - "bg": { "value": "{color.white}", "type": "color", "source": "$menu-bg" }, + "bg": { + "$value": "{color.white}", + "source": "$menu-bg" + }, "item": { - "color": { "value": "{color.body.base}", "type": "color", "source": "$menu-item-color" }, - "bg": { "value": "transparent", "type": "color", "source": "$menu-item-bg" }, - "border": { "value": "{color.menu.item.bg}", "type": "color", "source": "$menu-item-border-color" }, + "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": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$menu-item-hover-color" }, - "bg": { "value": "{color.btn.hover.bg.tertiary}", "type": "color", "source": "$menu-item-hover-bg" }, - "border": { "value": "{color.menu.item.bg}", "type": "color", "source": "$menu-item-hover-border-color" } + "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": { "value": "{color.btn.active.bg.tertiary}", "type": "color", "source": "$menu-item-focus-bg" } + "bg": { + "$value": "{color.btn.active.bg.tertiary}", + "source": "$menu-item-focus-bg" + } } }, "select": { "btn-link": { - "color": { "value": "{color.primary.500}", "type": "color", "source": "$menu-select-btn-link-color" } + "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 8b76a512ac..e1ef22ee44 100644 --- a/tokens/src/themes/light/components/Modal.json +++ b/tokens/src/themes/light/components/Modal.json @@ -1,28 +1,49 @@ { "color": { + "$type": "color", "modal": { "content": { - "bg": { "value": "{color.bg.base}", "type": "color", "source": "$modal-content-bg" }, + "bg": { + "$value": "{color.bg.base}", + "source": "$modal-content-bg" + }, "border": { - "value": "{color.black}", - "type": "color", - "source": "$modal-content-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.2 - }] + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.2 + } + ], + "source": "$modal-content-border-color" } }, - "backdrop-bg": { "value": "{color.black}", "type": "color", "source": "$modal-backdrop-bg" } + "backdrop-bg": { + "$value": "{color.black}", + "source": "$modal-backdrop-bg" + } } }, "elevation": { + "$type": "shadow", "modal": { "content": { "box-shadow": { "sm-up": { - "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)", - "type": "shadow", + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "10px", + "blur": "20px" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "8px", + "blur": "20px" + } + ], "source": "$modal-content-box-shadow-sm-up" } } @@ -31,7 +52,10 @@ }, "other": { "modal": { - "opacity": { "value": ".5", "source": "$modal-backdrop-opacity" } + "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 074eae400c..9cdfda64f7 100644 --- a/tokens/src/themes/light/components/Nav.json +++ b/tokens/src/themes/light/components/Nav.json @@ -1,21 +1,24 @@ { "border-color": { + "$type": "color", "nav": { "tabs-link": { "border": { "active": { - "value": "{color.primary.500}", - "type": "color", + "$value": "{color.primary.500}", "source": "$nav-tabs-link-active-border-color" }, "hover": { - "value": "transparent transparent {color.nav.tabs.base.border.base}", - "type": "color", + "$value": { + "top": "transparent", + "right": "transparent", + "bottom": "{color.nav.tabs.base.border.base}", + "left": "transparent" + }, "source": "$nav-tabs-link-hover-border-color" }, "focus": { - "value": "{color.nav.tabs.base.link.active.text}", - "type": "color", + "$value": "{color.nav.tabs.base.link.active.text}", "source": "$nav-tabs-link-focus-border-color" } } @@ -23,62 +26,119 @@ } }, "color": { + "$type": "color", "nav": { "link": { "text": { - "base": { "value": "{color.gray.700}", "type": "color", "source": "$nav-link-color" }, - "disabled": { "value": "{color.gray.300}", "type": "color", "source": "$nav-link-disabled-color" } + "base": { + "$value": "{color.gray.700}", + "source": "$nav-link-color" + }, + "disabled": { + "$value": "{color.gray.300}", + "source": "$nav-link-disabled-color" + } }, - "border": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-border-color" } + "border": { + "$value": "transparent", + "source": "$nav-tabs-link-border-color" + } }, "tabs": { "base": { "text": { - "disabled": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-disabled-bg" } + "disabled": { + "$value": "{color.nav.tabs.base.bg.hover}", + "source": "$nav-tabs-disabled-bg" + } }, "bg": { - "hover": { "value": "transparent", "type": "color", "source": "$nav-tabs-hover-bg" } + "hover": { + "$value": "transparent", + "source": "$nav-tabs-hover-bg" + } }, "border": { - "base": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" }, - "focus": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-focus-border-color" } + "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": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-link-hover-bg" } + "bg": { + "$value": "{color.light.400}", + "source": "$nav-tabs-link-hover-bg" + } }, "active": { - "text": { "value": "{color.primary.500}", "type": "color", "source": "$nav-tabs-link-active-color" }, - "bg": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-active-bg" } + "text": { + "$value": "{color.primary.500}", + "source": "$nav-tabs-link-active-color" + }, + "bg": { + "$value": "transparent", + "source": "$nav-tabs-link-active-bg" + } }, "disabled": { - "border": { "value": "{color.nav.link.border}", "type": "color", "source": "$nav-tabs-link-disabled-border-color" } + "border": { + "$value": "{color.nav.link.border}", + "source": "$nav-tabs-link-disabled-border-color" + } } } }, "inverse": { "link": { "text": { - "base": { "value": "{color.white}", "type": "color", "source": "$nav-inverse-tabs-link-color" } + "base": { + "$value": "{color.white}", + "source": "$nav-inverse-tabs-link-color" + } }, "border": { - "bottom": { "value": "{color.dark.300}", "type": "color", "source": "$nav-inverse-tabs-link-border-bottom-color" }, - "active": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-link-active-border-color" } + "bottom": { + "$value": "{color.dark.300}", + "source": "$nav-inverse-tabs-link-border-bottom-color" + }, + "active": { + "$value": "{color.nav.tabs.inverse.link.text.base}", + "source": "$nav-inverse-tabs-link-active-border-color" + } }, "bg": { - "hover": { "value": "{color.nav.tabs.inverse.link.border.bottom}", "type": "color", "source": "$nav-inverse-tabs-link-hover-bg" }, - "active": { "value": "{color.nav.tabs.inverse.link.bg.hover}", "type": "color", "source": "$nav-inverse-tabs-link-active-bg" }, - "focus": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-link-focus-bg" }, + "hover": { + "$value": "{color.nav.tabs.inverse.link.border.bottom}", + "source": "$nav-inverse-tabs-link-hover-bg" + }, + "active": { + "$value": "{color.nav.tabs.inverse.link.bg.hover}", + "source": "$nav-inverse-tabs-link-active-bg" + }, + "focus": { + "$value": "{color.nav.tabs.inverse.link.text.base}", + "source": "$nav-inverse-tabs-link-focus-bg" + }, "active-hover": { - "value": "transparent", - "type": "color", + "$value": "transparent", "source": "$nav-inverse-tabs-link-active-hover-bg" } }, - "tab-content-color": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-tab-content-color" } + "tab-content-color": { + "$value": "{color.nav.tabs.inverse.link.text.base}", + "source": "$nav-inverse-tabs-tab-content-color" + } }, "dropdown": { - "border": { "value": "{color.nav.tabs.inverse.link.bg.active-hover}", "type": "color", "source": "$nav-inverse-tabs-dropdown-border-color" } + "border": { + "$value": "{color.nav.tabs.inverse.link.bg.active-hover}", + "source": "$nav-inverse-tabs-dropdown-border-color" + } } } }, @@ -86,80 +146,123 @@ "base": { "link": { "active": { - "text": { "value": "{color.active}", "type": "color", "source": "$nav-pills-link-active-color" }, - "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" }, - "border": { "value": "{color.white}", "type": "color", "source": "$nav-pills-link-active-border-color" } + "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": { "value": "{color.nav.tabs.base.border.base}", "type": "color", "source": "$nav-pills-link-border-color" } + "border": { + "$value": "{color.nav.tabs.base.border.base}", + "source": "$nav-pills-link-border-color" + } } }, "inverse": { "link": { "text": { - "base": { "value": "{color.white}", "type": "color", "source": "$nav-inverse-pills-link-color" }, - "focus": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-focus-color" }, - "active": { "value": "{color.primary.500}", "type": "color", "source": "$nav-inverse-pills-link-active-color" }, - "hover": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-hover-color" }, + "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}", - "type": "color", + "$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}", - "type": "color", + "$value": "{color.nav.pills.inverse.link.text.base}", "source": "$nav-inverse-pills-link-active-hover-color" } }, "border": { - "base": { "value": "{color.dark.300}", "type": "color", "source": "$nav-inverse-pills-link-border-color" }, - "active": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-active-border-color" }, + "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}", - "type": "color", + "$value": "{color.nav.pills.inverse.link.border.base}", "source": "$nav-inverse-pills-link-active-hover-border-color" }, "active-focus": { - "value": "{color.primary.base}", - "type": "color", + "$value": "{color.primary.base}", "source": "$nav-inverse-pills-link-active-focus-border-color" }, "focus-hover": { - "value": "{color.nav.pills.inverse.link.border.active-focus}", - "type": "color", + "$value": "{color.nav.pills.inverse.link.border.active-focus}", "source": "$nav-inverse-pills-link-active-focus-hover-border-color" } }, "bg": { - "hover": { "value": "{color.nav.pills.inverse.link.border.base}", "type": "color", "source": "$nav-inverse-pills-link-hover-bg" }, - "active": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-active-bg" }, + "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}", - "type": "color", + "$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}", - "type": "color", + "$value": "{color.nav.pills.inverse.link.text.base}", "source": "$nav-inverse-pills-link-active-focus-hover-bg" } } }, - "tab-content-color": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-tab-content-color" } + "tab-content-color": { + "$value": "{color.nav.pills.inverse.link.text.base}", + "source": "$nav-inverse-pills-tab-content-color" + } } }, - "divider": { "value": "{color.gray.100}", "type": "color", "source": "$nav-divider-color" }, + "divider": { + "$value": "{color.gray.100}", + "source": "$nav-divider-color" + }, "dark": { - "value": "{color.white}", - "type": "color", - "source": "$navbar-dark-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$navbar-dark-color" }, "light": { - "value": "{color.black}", - "type": "color", - "source": "$navbar-light-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "$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 b855507ab0..db4eae3396 100644 --- a/tokens/src/themes/light/components/Navbar.json +++ b/tokens/src/themes/light/components/Navbar.json @@ -1,133 +1,161 @@ { "color": { + "$type": "color", "navbar": { "dark": { "text": { - "value": "{color.white}", - "type": "color", - "source": "$navbar-dark-color", - "modify": [{ - "type": "alpha", - "amount": 0.5 - }] + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$navbar-dark-color" }, "hover": { - "value": "{color.white}", - "type": "color", - "source": "$navbar-dark-hover-color", - "modify": [{ - "type": "alpha", - "amount": 0.75 - }] + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.75 + } + ], + "source": "$navbar-dark-hover-color" + }, + "active": { + "$value": "{color.active}", + "source": "$navbar-dark-active-color" }, - "active": { "value": "{color.active}", "type": "color", "source": "$navbar-dark-active-color" }, "disabled": { - "value": "{color.white}", - "type": "color", - "source": "$navbar-dark-disabled-color", - "modify": [{ - "type": "alpha", - "amount": 0.25 - }] + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.25 + } + ], + "source": "$navbar-dark-disabled-color" }, "toggler": { "border": { - "value": "{color.white}", - "type": "color", - "source": "$navbar-dark-toggler-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.1 - }] + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "source": "$navbar-dark-toggler-border-color" } }, "brand": { - "text": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-color" }, - "hover": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-hover-color" } + "text": { + "$value": "{color.navbar.dark.active}", + "source": "$navbar-dark-brand-color" + }, + "hover": { + "$value": "{color.navbar.dark.active}", + "source": "$navbar-dark-brand-hover-color" + } } }, "light": { "text": { - "value": "{color.black}", - "type": "color", - "source": "$navbar-light-color", - "modify": [{ - "type": "alpha", - "amount": 0.5 - }] + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$navbar-light-color" }, - "hover": { - "value": "{color.black}", - "type": "color", - "source": "$navbar-light-hover-color", - "modify": [{ - "type": "alpha", - "amount": 0.7 - }] + "hover": { + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.7 + } + ], + "source": "$navbar-light-hover-color" }, - "active": { - "value": "{color.black}", - "type": "color", - "source": "$navbar-light-active-color", - "modify": [{ - "type": "alpha", - "amount": 0.9 - }] + "active": { + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "source": "$navbar-light-active-color" }, - "disabled": { - "value": "{color.black}", - "type": "color", - "source": "$navbar-light-disabled-color", - "modify": [{ - "type": "alpha", - "amount": 0.3 - }] + "disabled": { + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "source": "$navbar-light-disabled-color" }, "toggler": { "border": { - "value": "{color.black}", - "type": "color", - "source": "$navbar-light-toggler-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.1 - }] + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "source": "$navbar-light-toggler-border-color" } }, "brand": { - "text": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-color" }, - "hover": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-hover-color" } + "text": { + "$value": "{color.navbar.light.active}", + "source": "$navbar-light-brand-color" + }, + "hover": { + "$value": "{color.navbar.light.active}", + "source": "$navbar-light-brand-hover-color" + } } } } }, "content": { + "$type": "file", "navbar": { "toggler": { "dark": { "icon-bg": { - "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")", - "type": "file", - "source": "$navbar-dark-toggler-icon-bg", + "$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" - }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$navbar-dark-toggler-icon-bg" } }, "light": { "icon-bg": { - "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")", - "type": "file", - "source": "$navbar-light-toggler-icon-bg", + "$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" - }] + "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 da6de0c447..9be47e9dfc 100644 --- a/tokens/src/themes/light/components/OverflowScroll.json +++ b/tokens/src/themes/light/components/OverflowScroll.json @@ -1,8 +1,10 @@ { "color": { + "$type": "color", "overflow-scroll": { "opacity-mask-transparent": { - "value": "rgba(0, 0, 0, .4)", "type": "color", "source": "$overflow-scroll-opacity-mask-transparent" + "$value": "rgba(0, 0, 0, .4)", + "source": "$overflow-scroll-opacity-mask-transparent" } } } diff --git a/tokens/src/themes/light/components/PageBanner.json b/tokens/src/themes/light/components/PageBanner.json index 6d520cbee9..1450d8c0a8 100644 --- a/tokens/src/themes/light/components/PageBanner.json +++ b/tokens/src/themes/light/components/PageBanner.json @@ -1,23 +1,24 @@ { "color": { + "$type": "color", "page-banner": { "bg": { - "dark": { "value": "{color.dark.500}", "type": "color" }, - "light": { "value": "{color.light.400}", "type": "color" }, + "dark": { "$value": "{color.dark.500}" }, + "light": { "$value": "{color.light.400}" }, "accent": { - "a": { "value": "{color.accent.a}", "type": "color" }, - "b": { "value": "{color.accent.b}", "type": "color" } + "a": { "$value": "{color.accent.a}" }, + "b": { "$value": "{color.accent.b}" } }, - "warning": { "value": "{color.warning.100}", "type": "color" } + "warning": { "$value": "{color.warning.100}" } }, "text": { - "dark": { "value": "{color.white}", "type": "color" }, - "light": { "value": "{color.black}", "type": "color" }, + "dark": { "$value": "{color.white}" }, + "light": { "$value": "{color.black}" }, "accent": { - "a": { "value": "{color.black}", "type": "color" }, - "b": { "value": "{color.black}", "type": "color" } + "a": { "$value": "{color.black}" }, + "b": { "$value": "{color.black}" } }, - "warning": { "value": "{color.black}", "type": "color" } + "warning": { "$value": "{color.black}" } } } } diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json index 557e914bf0..73078a05df 100644 --- a/tokens/src/themes/light/components/Pagination.json +++ b/tokens/src/themes/light/components/Pagination.json @@ -1,42 +1,89 @@ { "color": { + "$type": "color", "pagination": { "text": { - "base": { "value": "{color.link.base}", "type": "color", "source": "$pagination-color" }, - "inverse": { "value": "{color.white}", "type": "color", "source": "$pagination-color-inverse" }, - "hover": { "value": "{color.link.hover}", "type": "color", "source": "$pagination-hover-color" }, - "active": { "value": "{color.active}", "type": "color", "source": "$pagination-active-color" }, - "disabled": { "value": "{color.disabled}", "type": "color", "source": "$pagination-disabled-color" } + "base": { + "$value": "{color.link.base}", + "source": "$pagination-color" + }, + "inverse": { + "$value": "{color.white}", + "source": "$pagination-color-inverse" + }, + "hover": { + "$value": "{color.link.hover}", + "source": "$pagination-hover-color" + }, + "active": { + "$value": "{color.active}", + "source": "$pagination-active-color" + }, + "disabled": { + "$value": "{color.disabled}", + "source": "$pagination-disabled-color" + } }, "bg": { - "base": { "value": "{color.bg.base}", "type": "color", "source": "$pagination-bg" }, - "hover": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-hover-bg" }, - "active": { "value": "{color.bg.active}", "type": "color", "source": "$pagination-active-bg" }, - "disabled": { "value": "{color.white}", "type": "color", "source": "$pagination-disabled-bg" } + "base": { + "$value": "{color.bg.base}", + "source": "$pagination-bg" + }, + "hover": { + "$value": "{color.gray.100}", + "source": "$pagination-hover-bg" + }, + "active": { + "$value": "{color.bg.active}", + "source": "$pagination-active-bg" + }, + "disabled": { + "$value": "{color.white}", + "source": "$pagination-disabled-bg" + } }, "border": { - "base": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-border-color" }, - "hover": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-hover-border-color" }, - "active": { "value": "{color.pagination.bg.active}", "type": "color", "source": "$pagination-active-border-color" }, - "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-disabled-border-color" } + "base": { + "$value": "{color.gray.200}", + "source": "$pagination-border-color" + }, + "hover": { + "$value": "{color.gray.200}", + "source": "$pagination-hover-border-color" + }, + "active": { + "$value": "{color.pagination.bg.active}", + "source": "$pagination-active-border-color" + }, + "disabled": { + "$value": "{color.gray.100}", + "source": "$pagination-disabled-border-color" + } }, "focus": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$pagination-focus-color" }, - "text": { "value": "{color.black}", "type": "color", "source": "$pagination-focus-color-text" } + "base": { + "$value": "{color.primary.500}", + "source": "$pagination-focus-color" + }, + "text": { + "$value": "{color.black}", + "source": "$pagination-focus-color-text" + } }, "dropdown": { "text-inverse": { - "value": "{color.white}", "type": "color", "source": "$pagination-dropdown-color-inverse" + "$value": "{color.white}", + "source": "$pagination-dropdown-color-inverse" } } } }, "elevation": { + "$type": "shadow", "pagination": { "focus": { "box-shadow": { - "value": "{elevation.input.btn-focus.box-shadow}", - "type": "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 3ba213c768..1f78370403 100644 --- a/tokens/src/themes/light/components/Popover.json +++ b/tokens/src/themes/light/components/Popover.json @@ -1,53 +1,102 @@ { "color": { + "$type": "color", "popover": { - "bg": { "value": "{color.bg.base}", "type": "color", "source": "$popover-bg" }, - "border": { "value": "rgba(0, 0, 0, .2)", "type": "color", "source": "$popover-border-color" }, + "bg": { + "$value": "{color.bg.base}", + "source": "$popover-bg" + }, + "border": { + "$value": "rgba(0, 0, 0, .2)", + "source": "$popover-border-color" + }, "header": { - "text": { "value": "{color.headings.base}", "type": "color", "source": "$popover-header-color" }, - "bg": { "value": "{color.white}", "type": "color", "source": "$popover-header-bg" }, + "text": { + "$value": "{color.headings.base}", + "source": "$popover-header-color" + }, + "bg": { + "$value": "{color.white}", + "source": "$popover-header-bg" + }, "bg-dark": { - "value": "{color.white}", - "type": "color", - "source": "$popover-header-bg-dark", - "modify": [{ "type": "darken", "amount": 0.5 }] + "$value": "{color.white}", + "modify": [ + { + "type": "darken", + "amount": 0.5 + } + ], + "source": "$popover-header-bg-dark" }, "border-bottom-dark": { - "value": "{color.white}", - "type": "color", - "source": "$popover-header-border-bottom-darken", - "modify": [{ "type": "darken", "amount": 0.05 }] + "$value": "{color.white}", + "modify": [ + { + "type": "darken", + "amount": 0.05 + } + ], + "source": "$popover-header-border-bottom-darken" } }, - "body": { "value": "{color.body.base}", "type": "color", "source": "$popover-body-color" }, - "arrow": { - "base": { "value": "{color.popover.bg}", "type": "color", "source": "$popover-arrow-color" }, + "body": { + "$value": "{color.body.base}", + "source": "$popover-body-color" + }, + "arrow": { + "base": { + "$value": "{color.popover.bg}", + "source": "$popover-arrow-color" + }, "outer": { - "value": "{color.popover.border}", - "type": "color", - "source": "$popover-arrow-outer-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "$value": "{color.popover.border}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$popover-arrow-outer-color" } }, "success": { - "bg": { "value": "{color.success.100}", "type": "color", "source": "$popover-success-bg" }, - "icon": { "value": "{color.success.500}", "type": "color", "source": "$popover-success-icon-color" } + "bg": { + "$value": "{color.success.100}", + "source": "$popover-success-bg" + }, + "icon": { + "$value": "{color.success.500}", + "source": "$popover-success-icon-color" + } }, "warning": { - "bg": { "value": "{color.warning.100}", "type": "color", "source": "$popover-warning-bg" }, - "icon": { "value": "{color.warning.500}", "type": "color", "source": "$popover-warning-icon-color" } + "bg": { + "$value": "{color.warning.100}", + "source": "$popover-warning-bg" + }, + "icon": { + "$value": "{color.warning.500}", + "source": "$popover-warning-icon-color" + } }, "danger": { - "bg": { "value": "{color.danger.100}", "type": "color", "source": "$popover-danger-bg" }, - "icon": { "value": "{color.danger.500}", "type": "color", "source": "$popover-danger-icon-color" } + "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": { - "value": "none", - "type": "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 4814f474f5..8ed3283277 100644 --- a/tokens/src/themes/light/components/ProductTour.json +++ b/tokens/src/themes/light/components/ProductTour.json @@ -1,30 +1,42 @@ { "color": { + "$type": "color", "product-tour": { "checkpoint": { - "bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" }, - "body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" }, - "border": { "value": "{color.brand.base}", "type": "color", "source": "$checkpoint-border-color" }, - "breadcrumb": { "value": "{color.primary.base}", "type": "color", "source": "$checkpoint-breadcrumb-color" }, + "bg": { + "$value": "{color.light.300}", + "source": "$checkpoint-background-color" + }, + "body": { + "$value": "{color.gray.700}", + "source": "$checkpoint-body-color" + }, + "border": { + "$value": "{color.brand.base}", + "source": "$checkpoint-border-color" + }, + "breadcrumb": { + "$value": "{color.primary.base}", + "source": "$checkpoint-breadcrumb-color" + }, "box-shadow": { - "value": "{color.black}", - "type": "color", - "source": "$checkpoint-box-shadow-color", - "modify": [{ - "type": "alpha", - "amount": 0.3 - }] + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "source": "$checkpoint-box-shadow-color" }, "arrow": { "border": { "top": { - "value": "{color.product-tour.checkpoint.bg}", - "type": "color", + "$value": "{color.product-tour.checkpoint.bg}", "source": "$checkpoint-arrow-border-top-color" }, "transparent": { - "value": "transparent", - "type": "color", + "$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 400017cabf..7340593fbf 100644 --- a/tokens/src/themes/light/components/ProgressBar.json +++ b/tokens/src/themes/light/components/ProgressBar.json @@ -1,20 +1,40 @@ { "color": { + "$type": "color", "progress-bar": { - "bg": { "value": "transparent", "type": "color", "source": "$progress-bg" }, - "border": { "value": "{color.gray.500}", "type": "color", "source": "$progress-bar-border-color" }, - "bar": { - "base": { "value": "{color.white}", "type": "color", "source": "$progress-bar-color" }, - "bg": { - "base": { "value": "{color.accent.a}", "type": "color", "source": "$progress-bar-bg" }, - "annotated": { "value": "{color.dark.500}", "type": "color", "source": "$annotated-progress-bar-bg" } + "base": { + "$value": "{color.white}", + "source": "$progress-bar-color" + }, + "bg": { + "base": { + "$value": "{color.accent.a}", + "source": "$progress-bar-bg" + }, + "annotated": { + "$value": "{color.dark.500}", + "source": "$annotated-progress-bar-bg" } + }, + "border": { + "$value": "{color.gray.500}", + "source": "$progress-bar-border-color" + } + }, + "progress": { + "bg": { + "$value": "transparent", + "source": "$progress-bg" } } }, "elevation": { + "$type": "shadow", "progress-bar": { - "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" } + "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 12d6f06b55..b592ebe764 100644 --- a/tokens/src/themes/light/components/Scrollable.json +++ b/tokens/src/themes/light/components/Scrollable.json @@ -1,12 +1,17 @@ { "elevation": { + "$type": "shadow", "scrollable": { "body": { "box-shadow": { - "value": "{color.black}", - "type": "shadow", - "source": "$scrollable-body-box-shadow", - "modify": [{ "type": "alpha", "amount": 0.55 }] + "$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 4cd19bbf0e..079aa50c49 100644 --- a/tokens/src/themes/light/components/SearchField.json +++ b/tokens/src/themes/light/components/SearchField.json @@ -1,25 +1,46 @@ { "color": { + "$type": "color", "search-field": { "border": { - "base": { "value": "{color.gray.500}", "type": "color", "source": "$search-border-color" }, - "interaction": { "value": "{color.black}", "type": "color", "source": "$search-border-color-interaction" }, - "focus": { "value": "{color.black}", "type": "color", "source": "$search-border-focus-color" } + "base": { + "$value": "{color.gray.500}", + "source": "$search-border-color" + }, + "interaction": { + "$value": "{color.black}", + "source": "$search-border-color-interaction" + }, + "focus": { + "$value": "{color.black}", + "source": "$search-border-focus-color" + } }, "button": { "bg": { - "primary": { "value": "{color.primary.500}", "type": "color", "source": "$search-btn-primary-bg" }, - "brand": { "value": "{color.brand.500}", "type": "color", "source": "$search-btn-brand-bg" } + "primary": { + "$value": "{color.primary.500}", + "source": "$search-btn-primary-bg" + }, + "brand": { + "$value": "{color.brand.500}", + "source": "$search-btn-brand-bg" + } } }, "form-bg": { - "value": "{color.white}", "type": "color", "source": "$search-form-background-color" + "$value": "{color.white}", + "source": "$search-form-background-color" } } }, "other": { + "$type": "ratio", "search-field": { - "disabled-opacity": { "value": ".3", "type": "ratio", "source": "$search-disabled-opacity" } + "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 996e689bfa..ddac166dbe 100644 --- a/tokens/src/themes/light/components/Sheet.json +++ b/tokens/src/themes/light/components/Sheet.json @@ -1,19 +1,28 @@ { "color": { + "$type": "color", "sheet": { "skrim": { - "bg": { - "value": "{color.gray.300}", - "type": "color", - "source": "$sheet-skrim-bg", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "bg": { + "$value": "{color.gray.300}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$sheet-skrim-bg" }, "component": { "box-shadow": { - "value": "{color.black}", - "type": "color", - "source": "$sheet-skrim-component-box-shadow", - "modify": [{ "type": "alpha", "amount": 0.15 }] + "$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 a4f2a62ba2..08a4be2539 100644 --- a/tokens/src/themes/light/components/Stepper.json +++ b/tokens/src/themes/light/components/Stepper.json @@ -1,30 +1,43 @@ { "color": { + "$type": "color", "stepper": { "header": { - "bg": { - "base": { "value": "transparent", "type": "color", "source": "$stepper-header-bg" }, - "line": { "value": "{color.light.base}", "type": "color", "source": "$stepper-header-line-bg" } + "bg": { + "base": { + "$value": "transparent", + "source": "$stepper-header-bg" + }, + "line": { + "$value": "{color.light.base}", + "source": "$stepper-header-line-bg" + } }, "step": { "base": { - "value": "{color.primary.base}", "type": "color", "source": "$stepper-header-step-color" + "$value": "{color.primary.base}", + "source": "$stepper-header-step-color" }, "bg": { "base": { - "value": "{color.stepper.header.bg.base}", "type": "color", "source": "$stepper-header-step-bg" + "$value": "{color.stepper.header.bg.base}", + "source": "$stepper-header-step-bg" }, "active": { - "value": "{color.gray.500}", "type": "color", "source": "$stepper-header-active-step-bg" + "$value": "{color.gray.500}", + "source": "$stepper-header-active-step-bg" } }, - "border": { "value": "none", "type": "color", "source": "$stepper-header-step-border" }, + "border": { + "$value": "none", + "source": "$stepper-header-step-border" + }, "bubble-error": { - "value": "{color.danger.base}", "type": "color", "source": "$stepper-header-step-error-bubble-color" + "$value": "{color.danger.base}", + "source": "$stepper-header-step-error-bubble-color" }, "description-error": { - "value": "{color.stepper.header.step.bubble-error}", - "type": "color", + "$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 396aa1d04f..7aef2f37cb 100644 --- a/tokens/src/themes/light/components/Sticky.json +++ b/tokens/src/themes/light/components/Sticky.json @@ -1,15 +1,40 @@ { "elevation": { + "$type": "shadow", "sticky": { "shadow": { "top": { - "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)", - "type": "shadow", + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-.5rem", + "blur": "1rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-.25rem", + "blur": ".625rem" + } + ], "source": "$sticky-shadow-top" }, "bottom": { - "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)", - "type": "shadow", + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".5rem", + "blur": "1rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "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 b8647e01c7..d76ef9c616 100644 --- a/tokens/src/themes/light/components/Tab.json +++ b/tokens/src/themes/light/components/Tab.json @@ -1,58 +1,81 @@ { "color": { + "$type": "color", "tab": { "more-link-dropdown-toggle": { "btn": { "text": { "focus": { - "value": "{color.tab.more-link-dropdown-toggle.text.focus}", - "type": "color", + "$value": "{color.tab.more-link-dropdown-toggle.text.focus}", "source": "$tab-more-link-dropdown-toggle-btn-focus-color" } }, "border": { "focus": { - "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", - "type": "color", + "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color" } } }, "text": { - "focus": { "value": "{color.white}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-color" }, - "active": { "value": "{color.tab.more-link-dropdown-toggle.text.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-active-color" }, - "hover": { "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-hover-color" } + "focus": { + "$value": "{color.white}", + "source": "$tab-more-link-dropdown-toggle-focus-color" + }, + "active": { + "$value": "{color.tab.more-link-dropdown-toggle.text.focus}", + "source": "$tab-more-link-dropdown-toggle-active-color" + }, + "hover": { + "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}", + "source": "$tab-more-link-dropdown-toggle-hover-color" + } }, "bg": { - "focus": { "value": "{color.primary.500}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-bg" } + "focus": { + "$value": "{color.primary.500}", + "source": "$tab-more-link-dropdown-toggle-focus-bg" + } }, "border": { - "focus": { "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-border-color" } + "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": { "value": "{color.primary.500}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color" }, - "active": { "value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-active-color" }, + "focus": { + "$value": "{color.primary.500}", + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color" + }, + "active": { + "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}", + "source": "$tab-inverse-pills-link-dropdown-toggle-active-color" + }, "active-hover": { - "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}", - "type": "color", + "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}", "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color" } }, "bg": { - "focus": { "value": "{color.white}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg" }, - "hover": { "value": "transparent", "type": "color", "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg" }, + "focus": { + "$value": "{color.white}", + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg" + }, + "hover": { + "$value": "transparent", + "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg" + }, "active-hover": { - "value": "{color.primary.300}", - "type": "color", + "$value": "{color.primary.300}", "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg" } }, "border": { "focus": { - "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}", - "type": "color", + "$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 b40da24624..ff2f3dd376 100644 --- a/tokens/src/themes/light/components/Toast.json +++ b/tokens/src/themes/light/components/Toast.json @@ -1,31 +1,65 @@ { "color": { + "$type": "color", "toast": { - "base": { "value": "inherit", "type": "color", "source": "$toast-color" }, - "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-background-color" }, + "base": { + "$value": "inherit", + "source": "$toast-color" + }, + "bg": { + "$value": "{color.gray.700}", + "source": "$toast-background-color" + }, "border": { - "value": "{color.black}", - "type": "color", - "source": "$toast-border-color", - "modify": [{ "type": "alpha", "amount": 0.1 }] + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "source": "$toast-border-color" }, "header": { - "text": { "value": "{color.white}", "type": "color", "source": "$toast-header-color" }, - "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-header-background-color" }, - "border": { - "value": "{color.black}", - "type": "color", - "source": "$toast-header-border-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "text": { + "$value": "{color.white}", + "source": "$toast-header-color" + }, + "bg": { + "$value": "{color.gray.700}", + "source": "$toast-header-background-color" + }, + "border": { + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$toast-header-border-color" } } } }, "elevation": { + "$type": "shadow", "toast": { "box-shadow": { - "value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)", - "type": "shadow", + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "1.25rem", + "blur": "2.5rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "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 a73762aba6..763359e1e1 100644 --- a/tokens/src/themes/light/components/Tooltip.json +++ b/tokens/src/themes/light/components/Tooltip.json @@ -1,30 +1,66 @@ { "color": { + "$type": "color", "tooltip": { - "text": { "value": "{color.white}", "type": "color", "source": "$tooltip-color" }, - "light": { "value": "{color.black}", "type": "color", "source": "$tooltip-color-light" }, + "text": { + "$value": "{color.white}", + "source": "$tooltip-color" + }, + "light": { + "$value": "{color.black}", + "source": "$tooltip-color-light" + }, "bg": { - "base": { "value": "{color.black}", "type": "color", "source": "$tooltip-bg" }, - "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-bg-light" } + "base": { + "$value": "{color.black}", + "source": "$tooltip-bg" + }, + "light": { + "$value": "{color.white}", + "source": "$tooltip-bg-light" + } }, "arrow": { - "base": { "value": "{color.tooltip.bg.base}", "type": "color", "source": "$tooltip-arrow-color" }, - "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-arrow-color-light" } + "base": { + "$value": "{color.tooltip.bg.base}", + "source": "$tooltip-arrow-color" + }, + "light": { + "$value": "{color.white}", + "source": "$tooltip-arrow-color-light" + } } } }, "elevation": { + "$type": "shadow", "tooltip": { "box-shadow": { - "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", - "type": "shadow", + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "2px", + "blur": "4px" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "2px", + "blur": "8px" + } + ], "source": "$tooltip-box-shadow" } } }, "other": { + "$type": "ratio", "tooltip": { - "opacity": { "value": "1", "type": "ratio", "source": "$tooltip-opacity" } + "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 39f2dce270..c0c6c86776 100644 --- a/tokens/src/themes/light/components/general/body.json +++ b/tokens/src/themes/light/components/general/body.json @@ -1,8 +1,15 @@ { "color": { + "$type": "color", "body": { - "base": { "value": "{color.gray.700}", "type": "color", "source": "$body-color" }, - "bg": { "value": "{color.bg.base}", "type": "color", "source": "$body-bg" } + "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 989214871b..28d52f4496 100644 --- a/tokens/src/themes/light/components/general/headings.json +++ b/tokens/src/themes/light/components/general/headings.json @@ -1,7 +1,11 @@ { "color": { + "$type": "color", "headings": { - "base": { "value": "{color.black}", "type": "color", "source": "$headings-color" } + "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 3c40c8d618..8ef2e5c9b9 100644 --- a/tokens/src/themes/light/components/general/hr.json +++ b/tokens/src/themes/light/components/general/hr.json @@ -1,14 +1,16 @@ { "color": { + "$type": "color", "hr": { "border": { - "value": "{color.black}", - "type": "color", - "source": "$hr-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.1 - }] + "$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 f62b15e999..e3d60d85f5 100644 --- a/tokens/src/themes/light/components/general/input.json +++ b/tokens/src/themes/light/components/general/input.json @@ -1,15 +1,25 @@ { "color": { + "$type": "color", "input": { - "btn-focus": { "value": "{color.bg.active}", "type": "color", "source": "$input-btn-focus-color" } + "btn-focus": { + "$value": "{color.bg.active}", + "source": "$input-btn-focus-color" + } } }, "elevation": { + "$type": "shadow", "input": { "btn-focus": { "box-shadow": { - "value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}", - "type": "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 5a990dcb38..d80162cd55 100644 --- a/tokens/src/themes/light/components/general/link.json +++ b/tokens/src/themes/light/components/general/link.json @@ -1,96 +1,163 @@ { "color": { + "$type": "color", "link": { - "base": { "value": "{color.info.500}", "type": "color", "source": "$link-color" }, + "base": { + "$value": "{color.info.500}", + "source": "$link-color" + }, "hover": { - "value": "{color.link.base}", - "type": "color", - "source": "$link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "$value": "{color.link.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$link-hover-color" }, "inline": { - "base": { "value": "{color.info.500}", "type": "color", "source": "$inline-link-color" }, + "base": { + "$value": "{color.info.500}", + "source": "$inline-link-color" + }, "decoration": { - "value": "{color.link.inline.base}", - "type": "color", - "source": "$inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }] + "$value": "{color.link.inline.base}", + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "source": "$inline-link-decoration-color" }, "hover": { "base": { - "value": "{color.link.inline.base}", - "type": "color", - "source": "$inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "$value": "{color.link.inline.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$inline-link-hover-color" }, "decoration": { - "value": "{color.link.inline.hover.base}", - "type": "color", - "source": "$inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }] + "$value": "{color.link.inline.hover.base}", + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "source": "$inline-link-hover-decoration-color" } } }, "muted": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-link-color" }, + "base": { + "$value": "{color.primary.500}", + "source": "$muted-link-color" + }, "hover": { - "value": "{color.link.muted.base}", - "type": "color", - "source": "$muted-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "$value": "{color.link.muted.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$muted-link-hover-color" }, "inline": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-inline-link-color" }, + "base": { + "$value": "{color.primary.500}", + "source": "$muted-inline-link-color" + }, "decoration": { - "value": "{color.link.muted.inline.base}", - "type": "color", - "source": "$muted-inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }] + "$value": "{color.link.muted.inline.base}", + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "source": "$muted-inline-link-decoration-color" }, "hover": { "base": { - "value": "{color.link.muted.inline.base}", - "type": "color", - "source": "$muted-inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "$value": "{color.link.muted.inline.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$muted-inline-link-hover-color" }, "decoration": { - "value": "{color.link.muted.inline.hover.base}", - "type": "color", - "source": "$muted-inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }] + "$value": "{color.link.muted.inline.hover.base}", + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "source": "$muted-inline-link-hover-decoration-color" } } } }, "brand": { - "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-link-color" }, + "base": { + "$value": "{color.brand.500}", + "source": "$brand-link-color" + }, "hover": { - "value": "{color.link.brand.base}", - "type": "color", - "source": "$brand-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "$value": "{color.link.brand.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$brand-link-hover-color" }, "inline": { - "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-inline-link-color" }, + "base": { + "$value": "{color.brand.500}", + "source": "$brand-inline-link-color" + }, "decoration": { - "value": "{color.link.brand.inline.base}", - "type": "color", - "source": "$brand-inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }] + "$value": "{color.link.brand.inline.base}", + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "source": "$brand-inline-link-decoration-color" }, "hover": { "base": { - "value": "{color.link.brand.inline.base}", - "type": "color", - "source": "$brand-inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "$value": "{color.link.brand.inline.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$brand-inline-link-hover-color" }, "decoration": { - "value": "{color.link.brand.inline.hover.base}", - "type": "color", - "source": "$brand-inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }] + "$value": "{color.link.brand.inline.hover.base}", + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "source": "$brand-inline-link-hover-decoration-color" } } } @@ -98,10 +165,12 @@ } }, "other": { + "$type": "percentage", "link": { "emphasized-hover": { "darken-percentage": { - "value": "15%", "type": "percentage", "source": "$emphasized-link-hover-darken-percentage" + "$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 516b93c479..5cdd00bc67 100644 --- a/tokens/src/themes/light/components/general/list.json +++ b/tokens/src/themes/light/components/general/list.json @@ -1,36 +1,73 @@ { "color": { + "$type": "color", "list-group": { - "base": { "value": "inherit", "type": "color", "source": "$list-group-color" }, + "base": { + "$value": "inherit", + "source": "$list-group-color" + }, "bg": { - "base": { "value": "{color.white}", "type": "color", "source": "$list-group-bg" }, - "hover": { "value": "{color.gray.100}", "type": "color", "source": "$list-group-hover-bg" } + "base": { + "$value": "{color.white}", + "source": "$list-group-bg" + }, + "hover": { + "$value": "{color.gray.100}", + "source": "$list-group-hover-bg" + } }, "border": { - "value": "{color.black}", - "type": "color", - "source": "$list-group-border-color", - "modify": [{ "type": "alpha", "amount": 0.125 }] + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.125 + } + ], + "source": "$list-group-border-color" }, "active": { - "base": { "value": "{color.active}", "type": "color", "source": "$list-group-active-color" }, + "base": { + "$value": "{color.active}", + "source": "$list-group-active-color" + }, "border": { - "value": "{color.list-group.active.bg}", "type": "color", "source": "$list-group-active-border-color" + "$value": "{color.list-group.active.bg}", + "source": "$list-group-active-border-color" }, - "bg": { "value": "{color.bg.active}", "type": "color", "source": "$list-group-active-bg" } + "bg": { + "$value": "{color.bg.active}", + "source": "$list-group-active-bg" + } }, "disabled": { - "base": { "value": "{color.gray.600}", "type": "color", "source": "$list-group-disabled-color" }, - "bg": { "value": "{color.list-group.bg.base}", "type": "color", "source": "$list-group-disabled-bg" } + "base": { + "$value": "{color.gray.600}", + "source": "$list-group-disabled-color" + }, + "bg": { + "$value": "{color.list-group.bg.base}", + "source": "$list-group-disabled-bg" + } }, "action": { - "base": { "value": "{color.gray.700}", "type": "color", "source": "$list-group-action-color" }, + "base": { + "$value": "{color.gray.700}", + "source": "$list-group-action-color" + }, "hover": { - "value": "{color.list-group.action.base}", "type": "color", "source": "$list-group-action-hover-color" + "$value": "{color.list-group.action.base}", + "source": "$list-group-action-hover-color" }, "active": { - "base": { "value": "{color.body.base}", "type": "color", "source": "$list-group-action-active-color" }, - "bg": { "value": "{color.gray.200}", "type": "color", "source": "$list-group-action-active-bg" } + "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 ab01882469..6da6e32880 100644 --- a/tokens/src/themes/light/components/general/text.json +++ b/tokens/src/themes/light/components/general/text.json @@ -1,12 +1,23 @@ { "color": { - "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" }, - "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" }, + "$type": "color", + "text-muted": { + "$value": "{color.gray.500}", + "source": "$text-muted" + }, + "mark-bg": { + "$value": "#FFF243", + "source": "$mark-bg" + }, "blockquote": { "small": { - "value": "{color.gray.500}", "type": "color", "source": "$blockquote-small-color" + "$value": "{color.gray.500}", + "source": "$blockquote-small-color" } }, - "yiq-light": { "value": "{color.white}", "type": "color", "source": "$yiq-text-light" } + "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 5cb19068bb..9b76a19ef1 100644 --- a/tokens/src/themes/light/global/color.json +++ b/tokens/src/themes/light/global/color.json @@ -1,1658 +1,2425 @@ { "color": { - "white": { "value": "#FFFFFF", "type": "color", "source": "$white", "description": "White color." }, - "black": { "value": "#000000", "type": "color", "source": "$black", "description": "Black color." }, - "blue": { "value": "#23419F", "type": "color", "source": "$blue", "description": "Blue color." }, - "red": { "value": "#C32D3A", "type": "color", "source": "$red", "description": "Red color." }, - "green": { "value": "#178253", "type": "color", "source": "$green", "description": "Green color." }, - "yellow": { "value": "#FFD900", "type": "color", "source": "$yellow", "description": "Yellow color." }, - "teal": { "value": "#006DAA", "type": "color", "source": "$teal", "description": "Teal color." }, + "$type": "color", + "white": { + "$value": "#FFFFFF", + "$description": "White color.", + "source": "$white" + }, + "black": { + "$value": "#000000", + "$description": "Black color.", + "source": "$black" + }, + "blue": { + "$value": "#23419F", + "$description": "Blue color.", + "source": "$blue" + }, + "red": { + "$value": "#C32D3A", + "$description": "Red color.", + "source": "$red" + }, + "green": { + "$value": "#178253", + "$description": "Green color.", + "source": "$green" + }, + "yellow": { + "$value": "#FFD900", + "$description": "Yellow color.", + "source": "$yellow" + }, + "teal": { + "$value": "#006DAA", + "$description": "Teal color.", + "source": "$teal" + }, "accent": { "a": { - "value": "#00BBF9", - "type": "color", + "$value": "#00BBF9", + "$description": "Accent-A color.", "source": "$accent-a", - "description": "Accent-A color.", "actions": { "default": "{color.action.default.accent.a}" } }, "b": { - "value": "#FFEE88", - "type": "color", + "$value": "#FFEE88", + "$description": "Accent-B color.", "source": "$accent-b", - "description": "Accent-B color.", "actions": { "default": "{color.action.default.accent.b}" } } }, "gray": { - "base": { - "value": "#707070", - "type": "color", - "source": "$gray", - "description": "Basic gray color.", - "actions": { - "default": "{color.action.default.gray.base}" - } - }, "100": { - "value": "#EBEBEB", - "type": "color", + "$value": "#EBEBEB", + "$description": "Gray color of level 100.", "source": "$gray-100", - "description": "Gray color of level 100.", "actions": { "default": "{color.action.default.gray.100}" } }, "200": { - "value": "#CCCCCC", - "type": "color", + "$value": "#CCCCCC", + "$description": "Gray color of level 200.", "source": "$gray-200", - "description": "Gray color of level 200.", "actions": { "default": "{color.action.default.gray.200}" } }, "300": { - "value": "#ADADAD", - "type": "color", + "$value": "#ADADAD", + "$description": "Gray color of level 300.", "source": "$gray-300", - "description": "Gray color of level 300.", "actions": { "default": "{color.action.default.gray.300}" } }, "400": { - "value": "#8F8F8F", - "type": "color", + "$value": "#8F8F8F", + "$description": "Gray color of level 400.", "source": "$gray-400", - "description": "Gray color of level 400.", "actions": { "default": "{color.action.default.gray.400}" } }, "500": { - "value": "{color.gray.base}", - "type": "color", + "$value": "{color.gray.base}", + "$description": "Gray color of level 500.", "source": "$gray-500", - "description": "Gray color of level 500.", "actions": { "default": "{color.action.default.gray.500}" } - }, + }, "600": { - "value": "#5C5C5C", - "type": "color", + "$value": "#5C5C5C", + "$description": "Gray color of level 600.", "source": "$gray-600", - "description": "Gray color of level 600.", "actions": { "default": "{color.action.default.gray.600}" } }, "700": { - "value": "#454545", - "type": "color", + "$value": "#454545", + "$description": "Gray color of level 700.", "source": "$gray-700", - "description": "Gray color of level 700.", "actions": { "default": "{color.action.default.gray.700}" } }, "800": { - "value": "#333333", - "type": "color", + "$value": "#333333", + "$description": "Gray color of level 800.", "source": "$gray-800", - "description": "Gray color of level 800.", "actions": { "default": "{color.action.default.gray.800}" } }, "900": { - "value": "#212529", - "type": "color", + "$value": "#212529", + "$description": "Gray color of level 900.", "source": "$gray-900", - "description": "Gray color of level 900.", "actions": { "default": "{color.action.default.gray.900}" } - } - }, - "primary": { + }, "base": { - "value": "#0A3055", - "type": "color", - "source": "$primary", - "description": "Basic primary color.", + "$value": "#707070", + "$description": "Basic gray color.", + "source": "$gray", "actions": { - "default": "{color.action.default.primary.base}" + "default": "{color.action.default.gray.base}" } - }, + } + }, + "primary": { "100": { - "value": "{color.primary.base}", - "type": "color", + "$value": "{color.primary.base}", + "$description": "Primary color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "source": "$primary-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Primary color of level 100.", "actions": { "default": "{color.action.default.primary.100}" } }, "200": { - "value": "{color.primary.base}", - "type": "color", + "$value": "{color.primary.base}", + "$description": "Primary color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "source": "$primary-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Primary color of level 200.", "actions": { "default": "{color.action.default.primary.200}" } }, "300": { - "value": "{color.primary.base}", - "type": "color", + "$value": "{color.primary.base}", + "$description": "Primary color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "source": "$primary-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Primary color of level 300.", "actions": { "default": "{color.action.default.primary.300}" } }, "400": { - "value": "{color.primary.base}", - "type": "color", + "$value": "{color.primary.base}", + "$description": "Primary color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "source": "$primary-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Primary color of level 400.", "actions": { "default": "{color.action.default.primary.400}" } }, "500": { - "value": "{color.primary.base}", - "type": "color", + "$value": "{color.primary.base}", + "$description": "Primary color of level 500.", "source": "$primary-500", - "description": "Primary color of level 500.", "actions": { "default": "{color.action.default.primary.500}" } }, "600": { - "value": "{color.primary.base}", - "type": "color", + "$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" }], - "description": "Primary color of level 600.", "actions": { "default": "{color.action.default.primary.600}" } }, "700": { - "value": "{color.primary.base}", - "type": "color", + "$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" }], - "description": "Primary color of level 700.", "actions": { "default": "{color.action.default.primary.700}" } }, "800": { - "value": "{color.primary.base}", - "type": "color", + "$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" }], - "description": "Primary color of level 800.", "actions": { "default": "{color.action.default.primary.800}" } }, "900": { - "value": "{color.primary.base}", - "type": "color", + "$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" }], - "description": "Primary color of level 900.", "actions": { "default": "{color.action.default.primary.900}" } - } - }, - "secondary": { + }, "base": { - "value": "{color.gray.700}", - "type": "color", - "source": "$secondary", - "description": "Basic secondary color.", + "$value": "#0A3055", + "$description": "Basic primary color.", + "source": "$primary", "actions": { - "default": "{color.action.default.secondary.base}" + "default": "{color.action.default.primary.base}" } - }, + } + }, + "secondary": { "100": { - "value": "{color.secondary.base}", - "type": "color", + "$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" }], - "description": "Secondary color of level 100.", "actions": { "default": "{color.action.default.secondary.100}" } }, "200": { - "value": "{color.secondary.base}", - "type": "color", + "$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" }], - "description": "Secondary color of level 200.", "actions": { "default": "{color.action.default.secondary.200}" } }, "300": { - "value": "{color.secondary.base}", - "type": "color", + "$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" }], - "description": "Secondary color of level 300.", "actions": { "default": "{color.action.default.secondary.300}" } }, "400": { - "value": "{color.secondary.base}", - "type": "color", + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "source": "$secondary-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Secondary color of level 400.", "actions": { "default": "{color.action.default.secondary.400}" } }, "500": { - "value": "{color.secondary.base}", - "type": "color", + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 500.", "source": "$secondary-500", - "description": "Secondary color of level 500.", "actions": { "default": "{color.action.default.secondary.500}" } }, "600": { - "value": "{color.secondary.base}", - "type": "color", + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "source": "$secondary-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Secondary color of level 600.", "actions": { "default": "{color.action.default.secondary.600}" } }, "700": { - "value": "{color.secondary.base}", - "type": "color", + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "source": "$secondary-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Secondary color of level 700.", "actions": { "default": "{color.action.default.secondary.700}" } }, "800": { - "value": "{color.secondary.base}", - "type": "color", + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "source": "$secondary-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Secondary color of level 800.", "actions": { "default": "{color.action.default.secondary.800}" } }, "900": { - "value": "{color.secondary.base}", - "type": "color", + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "source": "$secondary-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Secondary color of level 900.", "actions": { "default": "{color.action.default.secondary.900}" } - } - }, - "brand": { + }, "base": { - "value": "#9D0054", - "type": "color", - "source": "$brand", - "description": "Basic brand color.", + "$value": "{color.gray.700}", + "$description": "Basic secondary color.", + "source": "$secondary", "actions": { - "default": "{color.action.default.brand.base}" + "default": "{color.action.default.secondary.base}" } - }, + } + }, + "brand": { "100": { - "value": "{color.brand.base}", - "type": "color", + "$value": "{color.brand.base}", + "$description": "Brand color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "source": "$brand-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Brand color of level 100.", "actions": { "default": "{color.action.default.brand.100}" } }, "200": { - "value": "{color.brand.base}", - "type": "color", + "$value": "{color.brand.base}", + "$description": "Brand color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "source": "$brand-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Brand color of level 200.", "actions": { "default": "{color.action.default.brand.200}" } }, "300": { - "value": "{color.brand.base}", - "type": "color", + "$value": "{color.brand.base}", + "$description": "Brand color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "source": "$brand-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Brand color of level 300.", "actions": { "default": "{color.action.default.brand.300}" } }, "400": { - "value": "{color.brand.base}", - "type": "color", + "$value": "{color.brand.base}", + "$description": "Brand color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "source": "$brand-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Brand color of level 400.", "actions": { "default": "{color.action.default.brand.400}" } }, "500": { - "value": "{color.brand.base}", - "type": "color", + "$value": "{color.brand.base}", + "$description": "Brand color of level 500.", "source": "$brand-500", - "description": "Brand color of level 500.", "actions": { "default": "{color.action.default.brand.500}" } }, "600": { - "value": "{color.brand.base}", - "type": "color", + "$value": "{color.brand.base}", + "$description": "Brand color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "source": "$brand-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Brand color of level 600.", "actions": { "default": "{color.action.default.brand.600}" } }, "700": { - "value": "{color.brand.base}", - "type": "color", + "$value": "{color.brand.base}", + "$description": "Brand color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "source": "$brand-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Brand color of level 700.", "actions": { "default": "{color.action.default.brand.700}" } }, "800": { - "value": "{color.brand.base}", - "type": "color", + "$value": "{color.brand.base}", + "$description": "Brand color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "source": "$brand-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Brand color of level 800.", "actions": { "default": "{color.action.default.brand.800}" } }, "900": { - "value": "{color.brand.base}", - "type": "color", + "$value": "{color.brand.base}", + "$description": "Brand color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "source": "$brand-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Brand color of level 900.", "actions": { "default": "{color.action.default.brand.900}" } - } - }, - "success": { + }, "base": { - "value": "{color.green}", - "type": "color", - "source": "$success", - "description": "Basic success color.", + "$value": "#9D0054", + "$description": "Basic brand color.", + "source": "$brand", "actions": { - "default": "{color.action.default.success.base}" + "default": "{color.action.default.brand.base}" } - }, + } + }, + "success": { "100": { - "value": "{color.success.base}", - "type": "color", + "$value": "{color.success.base}", + "$description": "Success color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "source": "$success-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Success color of level 100.", "actions": { "default": "{color.action.default.success.100}" } }, "200": { - "value": "{color.success.base}", - "type": "color", + "$value": "{color.success.base}", + "$description": "Success color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "source": "$success-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Success color of level 200.", "actions": { "default": "{color.action.default.success.200}" } }, "300": { - "value": "{color.success.base}", - "type": "color", + "$value": "{color.success.base}", + "$description": "Success color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "source": "$success-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Success color of level 300.", "actions": { "default": "{color.action.default.success.300}" } }, "400": { - "value": "{color.success.base}", - "type": "color", + "$value": "{color.success.base}", + "$description": "Success color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "source": "$success-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Success color of level 400.", "actions": { "default": "{color.action.default.success.400}" } }, "500": { - "value": "{color.success.base}", - "type": "color", + "$value": "{color.success.base}", + "$description": "Success color of level 500.", "source": "$success-500", - "description": "Success color of level 500.", "actions": { "default": "{color.action.default.success.500}" } }, "600": { - "value": "{color.success.base}", - "type": "color", + "$value": "{color.success.base}", + "$description": "Success color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "source": "$success-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Success color of level 600.", "actions": { "default": "{color.action.default.success.600}" } }, "700": { - "value": "{color.success.base}", - "type": "color", + "$value": "{color.success.base}", + "$description": "Success color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "source": "$success-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Success color of level 700.", "actions": { "default": "{color.action.default.success.700}" } }, "800": { - "value": "{color.success.base}", - "type": "color", + "$value": "{color.success.base}", + "$description": "Success color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "source": "$success-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Success color of level 800.", "actions": { "default": "{color.action.default.success.800}" } }, "900": { - "value": "{color.success.base}", - "type": "color", + "$value": "{color.success.base}", + "$description": "Success color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "source": "$success-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Success color of level 900.", "actions": { "default": "{color.action.default.success.900}" } - } - }, - "info": { + }, "base": { - "value": "{color.teal}", - "type": "color", - "source": "$info", - "description": "Basic info color.", + "$value": "{color.green}", + "$description": "Basic success color.", + "source": "$success", "actions": { - "default": "{color.action.default.info.base}" + "default": "{color.action.default.success.base}" } - }, + } + }, + "info": { "100": { - "value": "{color.info.base}", - "type": "color", + "$value": "{color.info.base}", + "$description": "Info color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "source": "$info-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Info color of level 100.", "actions": { "default": "{color.action.default.info.100}" } }, "200": { - "value": "{color.info.base}", - "type": "color", + "$value": "{color.info.base}", + "$description": "Info color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "source": "$info-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Info color of level 200.", "actions": { "default": "{color.action.default.info.200}" } }, "300": { - "value": "{color.info.base}", - "type": "color", + "$value": "{color.info.base}", + "$description": "Info color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "source": "$info-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Info color of level 300.", "actions": { "default": "{color.action.default.info.300}" } }, "400": { - "value": "{color.info.base}", - "type": "color", + "$value": "{color.info.base}", + "$description": "Info color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "source": "$info-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Info color of level 400.", "actions": { "default": "{color.action.default.info.400}" } }, "500": { - "value": "{color.info.base}", - "type": "color", + "$value": "{color.info.base}", + "$description": "Info color of level 500.", "source": "$info-500", - "description": "Info color of level 500.", "actions": { "default": "{color.action.default.info.500}" } }, "600": { - "value": "{color.info.base}", - "type": "color", + "$value": "{color.info.base}", + "$description": "Info color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "source": "$info-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Info color of level 600.", "actions": { "default": "{color.action.default.info.600}" } }, "700": { - "value": "{color.info.base}", - "type": "color", + "$value": "{color.info.base}", + "$description": "Info color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "source": "$info-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Info color of level 700.", "actions": { "default": "{color.action.default.info.700}" } }, "800": { - "value": "{color.info.base}", - "type": "color", + "$value": "{color.info.base}", + "$description": "Info color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "source": "$info-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Info color of level 800.", "actions": { "default": "{color.action.default.info.800}" } }, "900": { - "value": "{color.info.base}", - "type": "color", + "$value": "{color.info.base}", + "$description": "Info color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "source": "$info-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Info color of level 900.", "actions": { "default": "{color.action.default.info.900}" } - } - }, - "warning": { + }, "base": { - "value": "{color.yellow}", - "type": "color", - "source": "$warning", - "description": "Basic warning color.", + "$value": "{color.teal}", + "$description": "Basic info color.", + "source": "$info", "actions": { - "default": "{color.action.default.warning.base}" + "default": "{color.action.default.info.base}" } - }, + } + }, + "warning": { "100": { - "value": "{color.warning.base}", - "type": "color", + "$value": "{color.warning.base}", + "$description": "Warning color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "source": "$warning-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Warning color of level 100.", "actions": { "default": "{color.action.default.warning.100}" } }, "200": { - "value": "{color.warning.base}", - "type": "color", + "$value": "{color.warning.base}", + "$description": "Warning color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "source": "$warning-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Warning color of level 200.", "actions": { "default": "{color.action.default.warning.200}" } }, "300": { - "value": "{color.warning.base}", - "type": "color", + "$value": "{color.warning.base}", + "$description": "Warning color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "source": "$warning-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Warning color of level 300.", "actions": { "default": "{color.action.default.warning.300}" } }, "400": { - "value": "{color.warning.base}", - "type": "color", + "$value": "{color.warning.base}", + "$description": "Warning color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "source": "$warning-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Warning color of level 400.", "actions": { "default": "{color.action.default.warning.400}" } }, "500": { - "value": "{color.warning.base}", - "type": "color", + "$value": "{color.warning.base}", + "$description": "Warning color of level 500.", "source": "$warning-500", - "description": "Warning color of level 500.", "actions": { "default": "{color.action.default.warning.500}" } }, "600": { - "value": "{color.warning.base}", - "type": "color", + "$value": "{color.warning.base}", + "$description": "Warning color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "source": "$warning-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Warning color of level 600.", "actions": { "default": "{color.action.default.warning.600}" } }, "700": { - "value": "{color.warning.base}", - "type": "color", + "$value": "{color.warning.base}", + "$description": "Warning color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "source": "$warning-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Warning color of level 700.", "actions": { "default": "{color.action.default.warning.700}" } }, "800": { - "value": "{color.warning.base}", - "type": "color", + "$value": "{color.warning.base}", + "$description": "Warning color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "source": "$warning-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Warning color of level 800.", "actions": { "default": "{color.action.default.warning.800}" } }, "900": { - "value": "{color.warning.base}", - "type": "color", + "$value": "{color.warning.base}", + "$description": "Warning color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "source": "$warning-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Warning color of level 900.", "actions": { "default": "{color.action.default.warning.900}" } - } - }, - "danger": { + }, "base": { - "value": "{color.red}", - "type": "color", - "source": "$danger", - "description": "Basic danger color.", + "$value": "{color.yellow}", + "$description": "Basic warning color.", + "source": "$warning", "actions": { - "default": "{color.action.default.danger.base}" + "default": "{color.action.default.warning.base}" } - }, + } + }, + "danger": { "100": { - "value": "{color.danger.base}", - "type": "color", + "$value": "{color.danger.base}", + "$description": "Danger color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "source": "$danger-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Danger color of level 100.", "actions": { "default": "{color.action.default.danger.100}" } }, "200": { - "value": "{color.danger.base}", - "type": "color", + "$value": "{color.danger.base}", + "$description": "Danger color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "source": "$danger-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Danger color of level 200.", "actions": { "default": "{color.action.default.danger.200}" } }, "300": { - "value": "{color.danger.base}", - "type": "color", + "$value": "{color.danger.base}", + "$description": "Danger color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "source": "$danger-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Danger color of level 300.", "actions": { "default": "{color.action.default.danger.300}" } }, "400": { - "value": "{color.danger.base}", - "type": "color", + "$value": "{color.danger.base}", + "$description": "Danger color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "source": "$danger-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Danger color of level 400.", "actions": { "default": "{color.action.default.danger.400}" } }, "500": { - "value": "{color.danger.base}", - "type": "color", + "$value": "{color.danger.base}", + "$description": "Danger color of level 500.", "source": "$danger-500", - "description": "Danger color of level 500.", "actions": { "default": "{color.action.default.danger.500}" } }, "600": { - "value": "{color.danger.base}", - "type": "color", + "$value": "{color.danger.base}", + "$description": "Danger color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "source": "$danger-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Danger color of level 600.", "actions": { "default": "{color.action.default.danger.600}" } }, "700": { - "value": "{color.danger.base}", - "type": "color", + "$value": "{color.danger.base}", + "$description": "Danger color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "source": "$danger-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Danger color of level 700.", "actions": { "default": "{color.action.default.danger.700}" } }, "800": { - "value": "{color.danger.base}", - "type": "color", + "$value": "{color.danger.base}", + "$description": "Danger color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "source": "$danger-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Danger color of level 800.", "actions": { "default": "{color.action.default.danger.800}" } }, "900": { - "value": "{color.danger.base}", - "type": "color", + "$value": "{color.danger.base}", + "$description": "Danger color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "source": "$danger-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Danger color of level 900.", "actions": { "default": "{color.action.default.danger.900}" } - } - }, - "light": { + }, "base": { - "value": "#E1DDDB", - "type": "color", - "source": "$light", - "description": "Basic light color.", + "$value": "{color.red}", + "$description": "Basic danger color.", + "source": "$danger", "actions": { - "default": "{color.action.default.light.base}" + "default": "{color.action.default.danger.base}" } - }, + } + }, + "light": { "100": { - "value": "{color.light.base}", - "type": "color", + "$value": "{color.light.base}", + "$description": "Light color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "source": "$light-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Light color of level 100.", "actions": { "default": "{color.action.default.light.100}" } }, "200": { - "value": "{color.light.base}", - "type": "color", + "$value": "{color.light.base}", + "$description": "Light color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "source": "$light-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Light color of level 200.", "actions": { "default": "{color.action.default.light.200}" } }, "300": { - "value": "{color.light.base}", - "type": "color", + "$value": "{color.light.base}", + "$description": "Light color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "source": "$light-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Light color of level 300.", "actions": { "default": "{color.action.default.light.300}" } }, "400": { - "value": "{color.light.base}", - "type": "color", + "$value": "{color.light.base}", + "$description": "Light color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "source": "$light-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Light color of level 400.", "actions": { "default": "{color.action.default.light.400}" } }, "500": { - "value": "{color.light.base}", - "type": "color", + "$value": "{color.light.base}", + "$description": "Light color of level 500.", "source": "$light-500", - "description": "Light color of level 500.", "actions": { "default": "{color.action.default.light.500}" } }, "600": { - "value": "{color.light.base}", - "type": "color", + "$value": "{color.light.base}", + "$description": "Light color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "source": "$light-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Light color of level 600.", "actions": { "default": "{color.action.default.light.600}" } }, "700": { - "value": "{color.light.base}", - "type": "color", + "$value": "{color.light.base}", + "$description": "Light color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "source": "$light-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Light color of level 700.", "actions": { "default": "{color.action.default.light.700}" } }, "800": { - "value": "{color.light.base}", - "type": "color", + "$value": "{color.light.base}", + "$description": "Light color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "source": "$light-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Light color of level 800.", "actions": { "default": "{color.action.default.light.800}" } }, "900": { - "value": "{color.light.base}", - "type": "color", + "$value": "{color.light.base}", + "$description": "Light color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "source": "$light-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Light color of level 900.", "actions": { "default": "{color.action.default.light.900}" } - } - }, - "dark": { + }, "base": { - "value": "#273F2F", - "type": "color", - "source": "$dark", - "description": "Basic dark color.", + "$value": "#E1DDDB", + "$description": "Basic light color.", + "source": "$light", "actions": { - "default": "{color.action.default.dark.base}" + "default": "{color.action.default.light.base}" } - }, + } + }, + "dark": { "100": { - "value": "{color.dark.base}", - "type": "color", + "$value": "{color.dark.base}", + "$description": "Dark color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "source": "$dark-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Dark color of level 100.", "actions": { "default": "{color.action.default.dark.100}" } }, "200": { - "value": "{color.dark.base}", - "type": "color", + "$value": "{color.dark.base}", + "$description": "Dark color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "source": "$dark-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Dark color of level 200.", "actions": { "default": "{color.action.default.dark.200}" } }, "300": { - "value": "{color.dark.base}", - "type": "color", + "$value": "{color.dark.base}", + "$description": "Dark color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "source": "$dark-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Dark color of level 300.", "actions": { "default": "{color.action.default.dark.300}" } }, "400": { - "value": "{color.dark.base}", - "type": "color", + "$value": "{color.dark.base}", + "$description": "Dark color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "source": "$dark-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Dark color of level 400.", "actions": { "default": "{color.action.default.dark.400}" } }, "500": { - "value": "{color.dark.base}", - "type": "color", + "$value": "{color.dark.base}", + "$description": "Dark color of level 500.", "source": "$dark-500", - "description": "Dark color of level 500.", "actions": { "default": "{color.action.default.dark.500}" } }, "600": { - "value": "{color.dark.base}", - "type": "color", + "$value": "{color.dark.base}", + "$description": "Dark color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "source": "$dark-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Dark color of level 600.", "actions": { "default": "{color.action.default.dark.600}" } }, "700": { - "value": "{color.dark.base}", - "type": "color", + "$value": "{color.dark.base}", + "$description": "Info color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "source": "$dark-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Info color of level 700.", "actions": { "default": "{color.action.default.dark.700}" } }, "800": { - "value": "{color.dark.base}", - "type": "color", + "$value": "{color.dark.base}", + "$description": "Dark color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "source": "$dark-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Dark color of level 800.", "actions": { "default": "{color.action.default.dark.800}" } }, "900": { - "value": "{color.dark.base}", - "type": "color", + "$value": "{color.dark.base}", + "$description": "Dark color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "source": "$dark-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Dark color of level 900.", "actions": { "default": "{color.action.default.dark.900}" } + }, + "base": { + "$value": "#273F2F", + "$description": "Basic dark color.", + "source": "$dark", + "actions": { + "default": "{color.action.default.dark.base}" + } } }, "action": { "default": { "gray": { - "base": { - "value": "{color.gray.base}", - "type": "color", - "source": "$action-default-gray-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.gray.100}", - "type": "color", - "source": "$action-default-gray-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.gray.100}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-gray-100" }, "200": { - "value": "{color.gray.200}", - "type": "color", - "source": "$action-default-gray-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.gray.200}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-gray-200" }, "300": { - "value": "{color.gray.300}", - "type": "color", - "source": "$action-default-gray-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.gray.300}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-gray-300" }, "400": { - "value": "{color.gray.400}", - "type": "color", - "source": "$action-default-gray-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.gray.400}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-gray-400" }, "500": { - "value": "{color.gray.500}", - "type": "color", - "source": "$action-default-gray-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.gray.500}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-gray-500" }, "600": { - "value": "{color.gray.600}", - "type": "color", - "source": "$action-default-gray-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.gray.600}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-gray-600" }, "700": { - "value": "{color.gray.700}", - "type": "color", - "source": "$action-default-gray-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.gray.700}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-gray-700" }, "800": { - "value": "{color.gray.800}", - "type": "color", - "source": "$action-default-gray-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.gray.800}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-gray-800" }, "900": { - "value": "{color.gray.900}", - "type": "color", - "source": "$action-default-gray-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.gray.900}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-gray-900" + }, + "base": { + "$value": "{color.gray.base}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-gray-base" } }, "primary": { - "base": { - "value": "{color.primary.base}", - "type": "color", - "source": "$action-default-primary-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.primary.100}", - "type": "color", - "source": "$action-default-primary-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.primary.100}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-primary-100" }, "200": { - "value": "{color.primary.200}", - "type": "color", - "source": "$action-default-primary-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.primary.200}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-primary-200" }, "300": { - "value": "{color.primary.300}", - "type": "color", - "source": "$action-default-primary-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.primary.300}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-primary-300" }, "400": { - "value": "{color.primary.400}", - "type": "color", - "source": "$action-default-primary-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.primary.400}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-primary-400" }, "500": { - "value": "{color.primary.500}", - "type": "color", - "source": "$action-default-primary-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.primary.500}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-primary-500" }, "600": { - "value": "{color.primary.600}", - "type": "color", - "source": "$action-default-primary-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.primary.600}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-primary-600" }, "700": { - "value": "{color.primary.700}", - "type": "color", - "source": "$action-default-primary-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.primary.700}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-primary-700" }, "800": { - "value": "{color.primary.800}", - "type": "color", - "source": "$action-default-primary-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.primary.800}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-primary-800" }, "900": { - "value": "{color.primary.900}", - "type": "color", - "source": "$action-default-primary-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.primary.900}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-primary-900" + }, + "base": { + "$value": "{color.primary.base}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-primary-base" } }, "secondary": { - "base": { - "value": "{color.secondary.base}", - "type": "color", - "source": "$action-default-secondary-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.secondary.100}", - "type": "color", - "source": "$action-default-secondary-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.secondary.100}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-secondary-100" }, "200": { - "value": "{color.secondary.200}", - "type": "color", - "source": "$action-default-secondary-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.secondary.200}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-secondary-200" }, "300": { - "value": "{color.secondary.300}", - "type": "color", - "source": "$action-default-secondary-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.secondary.300}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-secondary-300" }, "400": { - "value": "{color.secondary.400}", - "type": "color", - "source": "$action-default-secondary-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.secondary.400}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-secondary-400" }, "500": { - "value": "{color.secondary.500}", - "type": "color", - "source": "$action-default-secondary-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.secondary.500}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-secondary-500" }, "600": { - "value": "{color.secondary.600}", - "type": "color", - "source": "$action-default-secondary-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.secondary.600}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-secondary-600" }, "700": { - "value": "{color.secondary.700}", - "type": "color", - "source": "$action-default-secondary-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.secondary.700}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-secondary-700" }, "800": { - "value": "{color.secondary.800}", - "type": "color", - "source": "$action-default-secondary-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.secondary.800}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-secondary-800" }, "900": { - "value": "{color.secondary.900}", - "type": "color", - "source": "$action-default-secondary-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.secondary.900}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-secondary-900" + }, + "base": { + "$value": "{color.secondary.base}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-secondary-base" } }, "brand": { - "base": { - "value": "{color.brand.base}", - "type": "color", - "source": "$action-default-brand-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.brand.100}", - "type": "color", - "source": "$action-default-brand-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.brand.100}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-brand-100" }, "200": { - "value": "{color.brand.200}", - "type": "color", - "source": "$action-default-brand-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.brand.200}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-brand-200" }, "300": { - "value": "{color.brand.300}", - "type": "color", - "source": "$action-default-brand-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.brand.300}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-brand-300" }, "400": { - "value": "{color.brand.400}", - "type": "color", - "source": "$action-default-brand-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.brand.400}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-brand-400" }, "500": { - "value": "{color.brand.500}", - "type": "color", - "source": "$action-default-brand-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.brand.500}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-brand-500" }, "600": { - "value": "{color.brand.600}", - "type": "color", - "source": "$action-default-brand-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.brand.600}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-brand-600" }, "700": { - "value": "{color.brand.700}", - "type": "color", - "source": "$action-default-brand-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.brand.700}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-brand-700" }, "800": { - "value": "{color.brand.800}", - "type": "color", - "source": "$action-default-brand-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.brand.800}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-brand-800" }, "900": { - "value": "{color.brand.900}", - "type": "color", - "source": "$action-default-brand-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.brand.900}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-brand-900" + }, + "base": { + "$value": "{color.brand.base}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-brand-base" } }, "success": { - "base": { - "value": "{color.success.base}", - "type": "color", - "source": "$action-default-success-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.success.100}", - "type": "color", - "source": "$action-default-success-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.success.100}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-success-100" }, "200": { - "value": "{color.success.200}", - "type": "color", - "source": "$action-default-success-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.success.200}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-success-200" }, "300": { - "value": "{color.success.300}", - "type": "color", - "source": "$action-default-success-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.success.300}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-success-300" }, "400": { - "value": "{color.success.400}", - "type": "color", - "source": "$action-default-success-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.success.400}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-success-400" }, "500": { - "value": "{color.success.500}", - "type": "color", - "source": "$action-default-success-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.success.500}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-success-500" }, "600": { - "value": "{color.success.600}", - "type": "color", - "source": "$action-default-success-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.success.600}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-success-600" }, "700": { - "value": "{color.success.700}", - "type": "color", - "source": "$action-default-success-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.success.700}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-success-700" }, "800": { - "value": "{color.success.800}", - "type": "color", - "source": "$action-default-success-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.success.800}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-success-800" }, "900": { - "value": "{color.success.900}", - "type": "color", - "source": "$action-default-success-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.success.900}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-success-900" + }, + "base": { + "$value": "{color.success.base}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-success-base" } }, "info": { - "base": { - "value": "{color.info.base}", - "type": "color", - "source": "$action-default-info-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.info.100}", - "type": "color", - "source": "$action-default-info-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.info.100}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-info-100" }, "200": { - "value": "{color.info.200}", - "type": "color", - "source": "$action-default-info-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.info.200}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-info-200" }, "300": { - "value": "{color.info.300}", - "type": "color", - "source": "$action-default-info-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.info.300}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-info-300" }, "400": { - "value": "{color.info.400}", - "type": "color", - "source": "$action-default-info-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.info.400}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-info-400" }, "500": { - "value": "{color.info.500}", - "type": "color", - "source": "$action-default-info-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.info.500}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-info-500" }, "600": { - "value": "{color.info.600}", - "type": "color", - "source": "$action-default-info-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.info.600}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-info-600" }, "700": { - "value": "{color.info.700}", - "type": "color", - "source": "$action-default-info-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.info.700}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-info-700" }, "800": { - "value": "{color.info.800}", - "type": "color", - "source": "$action-default-info-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.info.800}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-info-800" }, "900": { - "value": "{color.info.900}", - "type": "color", - "source": "$action-default-info-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.info.900}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-info-900" + }, + "base": { + "$value": "{color.info.base}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-info-base" } }, "warning": { - "base": { - "value": "{color.warning.base}", - "type": "color", - "source": "$action-default-warning-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.warning.100}", - "type": "color", - "source": "$action-default-warning-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.warning.100}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-warning-100" }, "200": { - "value": "{color.warning.200}", - "type": "color", - "source": "$action-default-warning-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.warning.200}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-warning-200" }, "300": { - "value": "{color.warning.300}", - "type": "color", - "source": "$action-default-warning-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.warning.300}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-warning-300" }, "400": { - "value": "{color.warning.400}", - "type": "color", - "source": "$action-default-warning-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.warning.400}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-warning-400" }, "500": { - "value": "{color.warning.500}", - "type": "color", - "source": "$action-default-warning-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.warning.500}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-warning-500" }, "600": { - "value": "{color.warning.600}", - "type": "color", - "source": "$action-default-warning-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.warning.600}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-warning-600" }, "700": { - "value": "{color.warning.700}", - "type": "color", - "source": "$action-default-warning-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.warning.700}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-warning-700" }, "800": { - "value": "{color.warning.800}", - "type": "color", - "source": "$action-default-warning-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.warning.800}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-warning-800" }, "900": { - "value": "{color.warning.900}", - "type": "color", - "source": "$action-default-warning-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.warning.900}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-warning-900" + }, + "base": { + "$value": "{color.warning.base}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-warning-base" } }, "danger": { - "base": { - "value": "{color.danger.base}", - "type": "color", - "source": "$action-default-danger-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.danger.100}", - "type": "color", - "source": "$action-default-danger-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.danger.100}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-danger-100" }, "200": { - "value": "{color.danger.200}", - "type": "color", - "source": "$action-default-danger-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.danger.200}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-danger-200" }, "300": { - "value": "{color.danger.300}", - "type": "color", - "source": "$action-default-danger-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.danger.300}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-danger-300" }, "400": { - "value": "{color.danger.400}", - "type": "color", - "source": "$action-default-danger-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.danger.400}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-danger-400" }, "500": { - "value": "{color.danger.500}", - "type": "color", - "source": "$action-default-danger-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.danger.500}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-danger-500" }, "600": { - "value": "{color.danger.600}", - "type": "color", - "source": "$action-default-danger-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.danger.600}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-danger-600" }, "700": { - "value": "{color.danger.700}", - "type": "color", - "source": "$action-default-danger-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.danger.700}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-danger-700" }, "800": { - "value": "{color.danger.800}", - "type": "color", - "source": "$action-default-danger-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.danger.800}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-danger-800" }, "900": { - "value": "{color.danger.900}", - "type": "color", - "source": "$action-default-danger-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.danger.900}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-danger-900" + }, + "base": { + "$value": "{color.danger.base}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-danger-base" } }, "light": { - "base": { - "value": "{color.light.base}", - "type": "color", - "source": "$action-default-light-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.light.100}", - "type": "color", - "source": "$action-default-light-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.light.100}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-light-100" }, "200": { - "value": "{color.light.200}", - "type": "color", - "source": "$action-default-light-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.light.200}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-light-200" }, "300": { - "value": "{color.light.300}", - "type": "color", - "source": "$action-default-light-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.light.300}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-light-300" }, "400": { - "value": "{color.light.400}", - "type": "color", - "source": "$action-default-light-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.light.400}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-light-400" }, "500": { - "value": "{color.light.500}", - "type": "color", - "source": "$action-default-light-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.light.500}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-light-500" }, "600": { - "value": "{color.light.600}", - "type": "color", - "source": "$action-default-light-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.light.600}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-light-600" }, "700": { - "value": "{color.light.700}", - "type": "color", - "source": "$action-default-light-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.light.700}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-light-700" }, "800": { - "value": "{color.light.800}", - "type": "color", - "source": "$action-default-light-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.light.800}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-light-800" }, "900": { - "value": "{color.light.900}", - "type": "color", - "source": "$action-default-light-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.light.900}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-light-900" + }, + "base": { + "$value": "{color.light.base}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-light-base" } }, "dark": { - "base": { - "value": "{color.dark.base}", - "type": "color", - "source": "$action-default-dark-base", - "modify": [{ "type": "darken", "amount": "0.1" }] - }, "100": { - "value": "{color.dark.100}", - "type": "color", - "source": "$action-default-dark-100", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.dark.100}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-dark-100" }, "200": { - "value": "{color.dark.200}", - "type": "color", - "source": "$action-default-dark-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.dark.200}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-dark-200" }, "300": { - "value": "{color.dark.300}", - "type": "color", - "source": "$action-default-dark-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.dark.300}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-dark-300" }, "400": { - "value": "{color.dark.400}", - "type": "color", - "source": "$action-default-dark-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.dark.400}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-dark-400" }, "500": { - "value": "{color.dark.500}", - "type": "color", - "source": "$action-default-dark-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.dark.500}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-dark-500" }, "600": { - "value": "{color.dark.600}", - "type": "color", - "source": "$action-default-dark-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.dark.600}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-dark-600" }, "700": { - "value": "{color.dark.700}", - "type": "color", - "source": "$action-default-dark-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.dark.700}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-dark-700" }, "800": { - "value": "{color.dark.800}", - "type": "color", - "source": "$action-default-dark-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.dark.800}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-dark-800" }, "900": { - "value": "{color.dark.900}", - "type": "color", - "source": "$action-default-dark-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.dark.900}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-dark-900" + }, + "base": { + "$value": "{color.dark.base}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-dark-base" } }, "accent": { "a": { - "value": "{color.accent.a}", - "type": "color", - "source": "$action-default-accent-a", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.accent.a}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-accent-a" }, "b": { - "value": "{color.accent.b}", - "type": "color", - "source": "$action-default-accent-b", - "modify": [{ "type": "darken", "amount": "0.1" }] + "$value": "{color.accent.b}", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "source": "$action-default-accent-b" } } } diff --git a/tokens/src/themes/light/global/elevation.json b/tokens/src/themes/light/global/elevation.json index 56dc9d3b87..b6d2d8bfce 100644 --- a/tokens/src/themes/light/global/elevation.json +++ b/tokens/src/themes/light/global/elevation.json @@ -1,199 +1,587 @@ { "elevation": { + "$type": "shadow", "box-shadow": { "level": { "1": { - "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$level-1-box-shadow", - "description": "Basic box shadow of level 1." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".0625rem", + "blur": ".125rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".0625rem", + "blur": ".25rem" + } + ], + "$description": "Basic box shadow of level 1.", + "source": "$level-1-box-shadow" }, "2": { - "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$level-2-box-shadow", - "description": "Basic box shadow of level 2." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".125rem", + "blur": ".25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".125rem", + "blur": ".5rem" + } + ], + "$description": "Basic box shadow of level 2.", + "source": "$level-2-box-shadow" }, "3": { - "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$level-3-box-shadow", - "description": "Basic box shadow of level 3." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": ".625rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": "1rem" + } + ], + "$description": "Basic box shadow of level 3.", + "source": "$level-3-box-shadow" }, "4": { - "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$level-4-box-shadow", - "description": "Basic box shadow of level 4." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".625rem", + "blur": "1.25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".5rem", + "blur": "1.25rem" + } + ], + "$description": "Basic box shadow of level 4.", + "source": "$level-4-box-shadow" }, "5": { - "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$level-5-box-shadow", - "description": "Basic box shadow of level 5." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "1.25px", + "blur": "2.5rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".5rem", + "blur": "2.5rem" + } + ], + "$description": "Basic box shadow of level 5.", + "source": "$level-5-box-shadow" } }, - "base": { "value": "0 .125rem .25rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow", "description": "Default box shadow." }, - "sm": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", "type": "shadow", "source": "$box-shadow-sm", "description": "Small box shadow." }, - "lg": { "value": "0 .25rem .5rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow-lg", "description": "Large box shadow." }, + "base": { + "$value": { + "color": "rgba(0, 0, 0, .3)", + "offsetX": "0", + "offsetY": ".125rem", + "blur": ".25rem" + }, + "$description": "Default box shadow.", + "source": "$box-shadow" + }, + "sm": { + "$value": { + "color": "rgba(0, 0, 0, .2)", + "offsetX": "0", + "offsetY": ".0625rem", + "blur": ".125rem" + }, + "$description": "Small box shadow.", + "source": "$box-shadow-sm" + }, + "lg": { + "$value": { + "color": "rgba(0, 0, 0, .3)", + "offsetX": "0", + "offsetY": ".25rem", + "blur": ".5rem" + }, + "$description": "Large box shadow.", + "source": "$box-shadow-lg" + }, "down": { "1": { - "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-down-1", - "description": "Bottom box shadow of level 1." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".0625rem", + "blur": ".125rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".0625rem", + "blur": ".25rem" + } + ], + "$description": "Bottom box shadow of level 1.", + "source": "$box-shadow-down-1" }, "2": { - "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-down-2", - "description": "Bottom box shadow of level 2." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".125rem", + "blur": ".25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".125rem", + "blur": ".5rem" + } + ], + "$description": "Bottom box shadow of level 2.", + "source": "$box-shadow-down-2" }, "3": { - "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-down-3", - "description": "Bottom box shadow of level 3." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".5rem", + "blur": "1rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".25rem", + "blur": ".625rem" + } + ], + "$description": "Bottom box shadow of level 3.", + "source": "$box-shadow-down-3" }, "4": { - "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-down-4", - "description": "Bottom box shadow of level 4." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".625rem", + "blur": "1.25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".5rem", + "blur": "1.25rem" + } + ], + "$description": "Bottom box shadow of level 4.", + "source": "$box-shadow-down-4" }, "5": { - "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-down-5", - "description": "Bottom box shadow of level 5." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "1.25px", + "blur": "2.5rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": ".5rem", + "blur": "2.5rem" + } + ], + "$description": "Bottom box shadow of level 5.", + "source": "$box-shadow-down-5" } }, "left": { "1": { - "value": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-left-1", - "description": "Left box shadow of level 1." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "-.0625rem", + "offsetY": "0", + "blur": ".125rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "-.0625rem", + "offsetY": "0", + "blur": ".25rem" + } + ], + "$description": "Left box shadow of level 1.", + "source": "$box-shadow-left-1" }, "2": { - "value": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-left-2", - "description": "Left box shadow of level 2." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "-.125rem", + "offsetY": "0", + "blur": ".25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "-.125rem", + "offsetY": "0", + "blur": ".5rem" + } + ], + "$description": "Left box shadow of level 2.", + "source": "$box-shadow-left-2" }, "3": { - "value": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-left-3", - "description": "Left box shadow of level 3." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "-.5rem", + "offsetY": "0", + "blur": "1rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "-.25rem", + "offsetY": "0", + "blur": ".625rem" + } + ], + "$description": "Left box shadow of level 3.", + "source": "$box-shadow-left-3" }, "4": { - "value": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-left-4", - "description": "Left box shadow of level 4." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "-.625rem", + "offsetY": "0", + "blur": "1.25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "-.5rem", + "offsetY": "0", + "blur": "1.25rem" + } + ], + "$description": "Left box shadow of level 4.", + "source": "$box-shadow-left-4" }, "5": { - "value": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-left-5", - "description": "Left box shadow of level 5." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "-1.25rem", + "offsetY": "0", + "blur": "2.5rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "-.5rem", + "offsetY": "0", + "blur": "3rem" + } + ], + "$description": "Left box shadow of level 5.", + "source": "$box-shadow-left-5" } }, "up": { "1": { - "value": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-up-1", - "description": "Top box shadow of level 1." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-.0625rem", + "blur": ".125rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-.0625rem", + "blur": ".25rem" + } + ], + "$description": "Top box shadow of level 1.", + "source": "$box-shadow-up-1" }, "2": { - "value": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-up-2", - "description": "Top box shadow of level 2." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-.125rem", + "blur": ".25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-.125rem", + "blur": ".5rem" + } + ], + "$description": "Top box shadow of level 2.", + "source": "$box-shadow-up-2" }, "3": { - "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-up-3", - "description": "Top box shadow of level 3." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-.5rem", + "blur": "1rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-.25rem", + "blur": ".625rem" + } + ], + "$description": "Top box shadow of level 3.", + "source": "$box-shadow-up-3" }, "4": { - "value": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-up-4", - "description": "Top box shadow of level 4." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-.625rem", + "blur": "1.25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-.5rem", + "blur": "1.25rem" + } + ], + "$description": "Top box shadow of level 4.", + "source": "$box-shadow-up-4" }, "5": { - "value": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-up-5", - "description": "Basic box shadow of level 5." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-1.25rem", + "blur": "2.5rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "-.5rem", + "blur": "3rem" + } + ], + "$description": "Basic box shadow of level 5.", + "source": "$box-shadow-up-5" } }, "right": { "1": { - "value": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-right-1", - "description": "Right box shadow of level 1." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": ".0625rem", + "offsetY": "0", + "blur": ".125rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": ".0625rem", + "offsetY": "0", + "blur": ".25rem" + } + ], + "$description": "Right box shadow of level 1.", + "source": "$box-shadow-right-1" }, "2": { - "value": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-right-2", - "description": "Right box shadow of level 2." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": ".125rem", + "offsetY": "0", + "blur": ".25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": ".125rem", + "offsetY": "0", + "blur": ".5rem" + } + ], + "$description": "Right box shadow of level 2.", + "source": "$box-shadow-right-2" }, "3": { - "value": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-right-3", - "description": "Right box shadow of level 3." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": ".5rem", + "offsetY": "0", + "blur": "1rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": ".25rem", + "offsetY": "0", + "blur": ".625rem" + } + ], + "$description": "Right box shadow of level 3.", + "source": "$box-shadow-right-3" }, "4": { - "value": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-right-4", - "description": "Right box shadow of level 4." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": ".625rem", + "offsetY": "0", + "blur": "1.25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": ".5rem", + "offsetY": "0", + "blur": "1.25rem" + } + ], + "$description": "Right box shadow of level 4.", + "source": "$box-shadow-right-4" }, "5": { - "value": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-right-5", - "description": "Right box shadow of level 5." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "1.25rem", + "offsetY": "0", + "blur": "2.5rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": ".5rem", + "offsetY": "0", + "blur": "3rem" + } + ], + "$description": "Right box shadow of level 5.", + "source": "$box-shadow-right-5" } }, "centered": { "1": { - "value": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-centered-1", - "description": "Centered box shadow of level 1." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": ".125rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": ".25rem" + } + ], + "$description": "Centered box shadow of level 1.", + "source": "$box-shadow-centered-1" }, "2": { - "value": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-centered-2", - "description": "Centered box shadow of level 2." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": ".25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": ".5rem" + } + ], + "$description": "Centered box shadow of level 2.", + "source": "$box-shadow-centered-2" }, "3": { - "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-centered-3", - "description": "Centered box shadow of level 3." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": ".625rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": "1rem" + } + ], + "$description": "Centered box shadow of level 3.", + "source": "$box-shadow-centered-3" }, "4": { - "value": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-centered-4", - "description": "Centered box shadow of level 4." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": "1.25rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": "1.25rem" + } + ], + "$description": "Centered box shadow of level 4.", + "source": "$box-shadow-centered-4" }, "5": { - "value": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$box-shadow-centered-5", - "description": "Centered box shadow of level 5." + "$value": [ + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": "2.5rem" + }, + { + "color": "rgba(0, 0, 0, .15)", + "offsetX": "0", + "offsetY": "0", + "blur": "3rem" + } + ], + "$description": "Centered box shadow of level 5.", + "source": "$box-shadow-centered-5" } } } diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index 5193d87475..0a435616e6 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -2,30 +2,92 @@ * This module creates and exports custom StyleDictionary instance for Paragon. */ const toml = require('js-toml'); -const StyleDictionary = require('style-dictionary'); +const chalk = require('chalk'); const chroma = require('chroma-js'); const { colorYiq, darken, lighten } = require('./sass-helpers'); const cssUtilities = require('./css-utilities'); -const { composeBreakpointName } = require('./utils'); +const { composeBreakpointName, processAndUpdateTokens } = require('./utils'); -const { fileHeader, sortByReference } = StyleDictionary.formatHelpers; +/* eslint-disable import/no-unresolved */ +const getStyleDictionary = async () => (await import('style-dictionary')).default; +const getStyleDictionaryUtils = async () => import('style-dictionary/utils'); +const getTokensStudioTransforms = async () => import('@tokens-studio/sd-transforms'); +/* eslint-enable import/no-unresolved */ -const colorTransform = (token, theme) => { +/** + * @typedef {import('style-dictionary/types').DesignToken} DesignToken + */ + +/** + * @typedef ModifyColorYiq + * @property {'color-yiq'} type - The type of modification. + * @property {number} [amount] - The amount of modification to apply. + * @property {string} [otherColor] - The other color to mix with. + * @property {number} [light] - The light color to use for color-yiq. + * @property {number} [dark] - The dark color to use for color-yiq. + * @property {number} [threshold] - The threshold to use for color-yiq. + */ + +/** + * @typedef ModifyColorDarken + * @property {'darken'} type - The type of modification. + * @property {number} amount - The amount of modification to apply. + */ + +/** + * @typedef ModifyColorLighten + * @property {'lighten'} type - The type of modification. + * @property {number} amount - The amount of modification to apply. + */ + +/** + * @typedef ModifyColorMix + * @property {'mix'} type - The type of modification. + * @property {number} amount - The amount of modification to apply. + * @property {string} otherColor - The other color to mix with. + */ + +/** + * @typedef ModifyColorAlpha + * @property {'alpha'} type - The type of modification. + * @property {number} amount - The amount of modification to apply. + */ + +/** + * @typedef DesignTokenModify + * @type {ModifyColorYiq | ModifyColorDarken | ModifyColorLighten | ModifyColorMix | ModifyColorAlpha} + */ + +/** + * @typedef {DesignToken & { + * outputReferences?: boolean; + * modify?: DesignTokenModify[]; + * }} ParagonDesignToken + */ + +/** + * Transforms a color token based on various modifications. + * + * @param {ParagonDesignToken} token - The token object containing color information and modifications. + * @param {string} themeVariant - The themeVariant object containing additional information for color transformations. + * @returns {string} - The transformed color value in hexadecimal format, including alpha if applicable. + */ +const colorTransform = (token, themeVariant) => { const { name: tokenName, - value, + $value, original, - modify = [], + modify, } = token; - const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor']; + const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor', 'none']; - if (reservedColorValues.includes(original.value)) { - return original.value; + if (reservedColorValues.includes(original.$value)) { + return original.$value; } - let color = chroma(value); + let color = chroma($value); - if (modify && modify.length > 0) { + if (modify?.length > 0) { modify.forEach((modifier) => { const { type, amount, otherColor } = modifier; switch (type) { @@ -40,7 +102,7 @@ const colorTransform = (token, theme) => { light, dark, threshold, - theme, + themeVariant, }); break; } @@ -50,8 +112,16 @@ const colorTransform = (token, theme) => { case 'lighten': color = lighten(color, amount); break; - default: + default: { + if (!color[type]) { + // eslint-disable-next-line no-console + console.warn( + chalk.keyword('orange').bold(`[Paragon] Warning: Invalid color modification type "${type}" for ${tokenName}.`), + ); + return; + } color = color[type](amount); + } } }); } @@ -65,165 +135,293 @@ const colorTransform = (token, theme) => { * 2. 'theme' to output only theme's variables (e.g, 'light' or 'dark'), if theme is not provided - only * core tokens are built. */ -const createCustomCSSVariables = ({ - formatterArgs, - themeVariant, -}) => { +const createCustomCSSVariables = async ({ formatterArgs }) => { + const { fileHeader, formattedVariables } = await getStyleDictionaryUtils(); const { dictionary, options, file } = formatterArgs; + const { outputReferences, formatting } = options; + const variables = formattedVariables({ + format: 'css', + dictionary, + outputReferences: (token) => { + // Formatter options configured to never output references + if (!outputReferences) { + return false; + } + // Token has modifications (e.g., mix, darken, lighten); the computed + // value should be output instead of the reference. + if (token.modify) { + return false; + } + // Formatter options configured to show output references, but handle when individual tokens might opt-out. + return token.outputReferences ?? true; + }, + usesDtcg: true, + }); + const header = await fileHeader({ file, formatting }); + return `${header}:root {\n${variables}\n}\n`; +}; + +/** + * @typedef {type import("style-dictionary/types").StyleDictionary} StyleDictionary + */ - const outputTokens = themeVariant - ? dictionary.allTokens.filter(token => token.filePath.includes(themeVariant)) - : dictionary.allTokens; +/** + * Initializes and configures Style Dictionary with custom transforms, formatters, filters, and parsers. + * + * @returns {Promise} - A promise that resolves to the configured Style Dictionary instance. + */ +const initializeStyleDictionary = async ({ themes }) => { + const StyleDictionary = await getStyleDictionary(); + const sdUtils = await getStyleDictionaryUtils(); + const { + register: registerTokensStudioTransforms, + getTransforms: tokensStudioTransforms, + } = await getTokensStudioTransforms(); - const variables = outputTokens.sort(sortByReference(dictionary)).map(token => { - let { value } = token; + StyleDictionary.registerPreprocessor({ + name: 'pgn-annotate-token-extensions-with-references', + preprocessor: (dictionary) => { + // Define the extension properties to add to the tokens $extensions object + const extensionProperties = [ + { + name: 'isReferencedBySourceToken', + filter: tkn => tkn.isSource, + referenceTokenFilter: tkn => !tkn.isSource, + }, + { + name: 'isReferencedByThemeVariant', + filter: tkn => themes.some(theme => tkn.filePath.includes(theme)), + referenceTokenFilter: tkn => !themes.some(theme => tkn.filePath.includes(theme)), + }, + ]; - const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences; + // Pass the dictionary to the recursive function to process and update tokens in place + const dictionaryCopy = { ...dictionary }; + processAndUpdateTokens(dictionary, extensionProperties, sdUtils, dictionaryCopy); - if (dictionary.usesReference(token.original.value) && outputReferencesForToken) { - const refs = dictionary.getReferences(token.original.value); - refs.forEach(ref => { - value = value.replace(ref.value, `var(--${ref.name})`); - }); - } + // Return the updated dictionary + return dictionary; + }, + }); - return ` --${token.name}: ${value};`; - }).join('\n'); + /** + * Registers transforms from @tokens-studio/sd-transforms. + */ + registerTokensStudioTransforms(StyleDictionary); - return `${fileHeader({ file })}:root {\n${variables}\n}\n`; -}; + /** + * Transforms tokens by applying SASS color functions to tokens. + */ + StyleDictionary.registerTransform({ + name: 'color/sass-color-functions', + transitive: true, + type: 'value', + filter: (token) => token.attributes?.category === 'color' || token.$value.toString().startsWith('#'), + transform: (token) => colorTransform(token), + }); -/** - * Transformer that applies SASS color functions to tokens. - */ -StyleDictionary.registerTransform({ - name: 'color/sass-color-functions', - transitive: true, - type: 'value', - matcher(token) { - return token.attributes.category === 'color' || token.value?.toString().startsWith('#'); - }, - transformer: colorTransform, -}); + /** + * Transforms that implements str-replace from SASS. + */ + StyleDictionary.registerTransform({ + name: 'str-replace', + transitive: true, + type: 'value', + filter: (token) => token.modify && token.modify[0].type === 'str-replace', + transform: (token) => { + const { $value, modify } = token; + const { toReplace, replaceWith } = modify[0]; + return $value.replaceAll(toReplace, replaceWith); + }, + }); -/** - * Transforms that implements str-replace from SASS. - */ -StyleDictionary.registerTransform({ - name: 'str-replace', - transitive: true, - type: 'value', - matcher(token) { - return token.modify && token.modify[0].type === 'str-replace'; - }, - transformer(token) { - const { value, modify } = token; - const { toReplace, replaceWith } = modify[0]; - return value.replaceAll(toReplace, replaceWith); - }, -}); + /** + * Registers a custom transform group for Paragon CSS. + */ + const customTransforms = [ + 'color/sass-color-functions', + 'str-replace', + ]; + StyleDictionary.registerTransformGroup({ + name: 'paragon-css', + transforms: [ + ...tokensStudioTransforms({ platform: 'css' }), + ...StyleDictionary.hooks.transformGroups.css, + ...customTransforms, + ], + }); -/** - * The custom formatter to create CSS variables for core tokens. - */ -StyleDictionary.registerFormat({ - name: 'css/custom-variables', - formatter: formatterArgs => createCustomCSSVariables({ formatterArgs }), -}); + /** + * The custom formatter to create CSS variables for core tokens. + */ + StyleDictionary.registerFormat({ + name: 'css/custom-variables', + format: formatterArgs => createCustomCSSVariables({ formatterArgs }), + }); -/** - * Formatter to generate CSS utility classes. - * Looks in ./src/utilities/ to get utility classes configuration, filters tokens by 'filters' object attributes - * (see https://amzn.github.io/style-dictionary/#/tokens?id=category-type-item for possible keys in the object, - * each key should have a list of valid values) and generates CSS classes with using functions defined in - * 'utilityFunctionsToApply' list, those functions must be located in css-utilities.js module and return string. - */ -StyleDictionary.registerFormat({ - name: 'css/utility-classes', - formatter({ dictionary, file }) { - const { utilities } = dictionary.properties; + /** + * Formatter to generate CSS utility classes. + * Looks in ./src/utilities/ to get utility classes configuration, filters tokens by 'filters' object attributes + * (see https://amzn.github.io/style-dictionary/#/tokens?id=category-type-item for possible keys in the object, + * each key should have a list of valid values) and generates CSS classes with using functions defined in + * 'utilityFunctionsToApply' list, those functions must be located in css-utilities.js module and return string. + */ + StyleDictionary.registerFormat({ + name: 'css/utility-classes', + format: async ({ dictionary, file, options = {} }) => { + const { formatting } = options; + const { fileHeader } = await getStyleDictionaryUtils(); + const { utilities } = dictionary.tokens; + if (!utilities) { + return ''; + } - if (!utilities) { - return ''; - } + let utilityClasses = ''; - let utilityClasses = ''; + utilities.forEach(({ filters, utilityFunctionsToApply }) => { + let tokens = dictionary.allTokens; - utilities.forEach(({ filters, utilityFunctionsToApply }) => { - let tokens = dictionary.allTokens; + Object.entries(filters).forEach(([attributeName, allowedValues]) => { + tokens = tokens.filter((token) => allowedValues.includes(token.attributes[attributeName])); + }); - Object.entries(filters).forEach(([attributeName, allowedValues]) => { - tokens = tokens.filter((token) => allowedValues.includes(token.attributes[attributeName])); + // eslint-disable-next-line no-restricted-syntax + for (const token of tokens) { + // Get action token by reference + const ref = sdUtils.getReferences(token.original.actions.default, dictionary.tokens)[0]; + token.actions = { default: `var(--${ref.name})` }; + // eslint-disable-next-line no-restricted-syntax + for (const funcName of utilityFunctionsToApply) { + utilityClasses += cssUtilities[funcName](token); + } + } }); + const header = await fileHeader({ file, formatting }); + return `${header}${utilityClasses}`; + }, + }); - // eslint-disable-next-line no-restricted-syntax - for (const token of tokens) { - // Get action token by reference - const ref = dictionary.getReferences(token.original.actions.default)[0]; - token.actions = { default: `var(--${ref.name})` }; - // eslint-disable-next-line no-restricted-syntax - for (const funcName of utilityFunctionsToApply) { - utilityClasses += cssUtilities[funcName](token); + /** + * Formatter to generate CSS custom media queries for responsive breakpoints. + * Gets input about existing tokens of the 'size' category, + * 'breakpoints' subcategory, and generates a CSS custom media queries. + */ + StyleDictionary.registerFormat({ + name: 'css/custom-media-breakpoints', + format: async ({ dictionary, file, options = {} }) => { + const { fileHeader } = await getStyleDictionaryUtils(); + const { formatting } = options; + const { breakpoint } = dictionary.tokens.size; + + let customMediaVariables = ''; + const breakpoints = Object.values(breakpoint || {}); + + for (let i = 0; i < breakpoints.length; i++) { + const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]]; + customMediaVariables + += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.$value});\n`; + if (nextBreakpoint) { + customMediaVariables + += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.$value});\n`; } } - }); + const header = await fileHeader({ file, formatting }); + return `${header}${customMediaVariables}`; + }, + }); - return fileHeader({ file }) + utilityClasses; - }, -}); + /** + * @typedef {function} StyleDictionaryFilterFunction + * @param {import('style-dictionary/types').TransformedToken} token - The token object to filter. + * @param {object} [opts] - The options object passed to the filter. + */ -/** - * Formatter to generate CSS custom media queries for responsive breakpoints. - * Gets input about existing tokens of the 'size' category, - * 'breakpoints' subcategory, and generates a CSS custom media queries. - */ -StyleDictionary.registerFormat({ - name: 'css/custom-media-breakpoints', - formatter({ dictionary, file }) { - const { size: { breakpoint } } = dictionary.properties; - - let customMediaVariables = ''; - const breakpoints = Object.values(breakpoint || {}); - - for (let i = 0; i < breakpoints.length; i++) { - const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]]; - customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.value});\n`; - if (nextBreakpoint) { - customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.value});\n`; - } + /** + * @typedef {object} StyleDictionaryFilterOptions + * @property {boolean} hasThemeVariants - Indicates whether the filter should also be registered with theme variants. + */ + + /** + * Registers a custom filter with Style Dictionary. + * @param {string} name Name for the filter. + * @param {StyleDictionaryFilterFunction} filter Filter value or function. + * @param {StyleDictionaryFilterOptions} [filterOptions] Custom options for the filter. + */ + function registerStyleDictionaryFilter(name, filter, filterOptions = {}) { + StyleDictionary.registerFilter({ name, filter }); + if (filterOptions.hasThemeVariants) { + themes.forEach((themeVariant) => { + StyleDictionary.registerFilter({ + name: `${name}.${themeVariant}`, + filter: (token, opts) => { + const paragonExtensions = token.$extensions?.['org.openedx.paragon']; + const isReferencedByThemeVariant = !!paragonExtensions?.isReferencedByThemeVariant; + const baseFilterResult = typeof filter === 'function' ? filter(token, opts) || isReferencedByThemeVariant : filter; + if (!baseFilterResult) { + return false; + } + return token.filePath.includes(themeVariant) || isReferencedByThemeVariant; + }, + }); + }); } + } - return fileHeader({ file }) + customMediaVariables; - }, -}); + const paragonFilters = [ + /** + * Registers a filter `isSource` that filters output to only include source tokens. + */ + { + name: 'isSource', + filter: (token) => { + const paragonExtensions = token.$extensions?.['org.openedx.paragon']; + const isReferencedBySourceToken = !!paragonExtensions?.isReferencedBySourceToken; + return token.isSource || isReferencedBySourceToken; + }, + opts: { hasThemeVariants: true }, + }, + /** + * Registers filter(s) `isThemeVariant.{variant}` that only include the requested theme variant tokens. + */ + ...themes.map((themeVariant) => ({ + name: `isThemeVariant.${themeVariant}`, + filter: (token) => { + const isThemeVariantToken = token.filePath.includes(themeVariant); + const paragonExtensions = token.$extensions?.['org.openedx.paragon']; + const isReferencedByThemeVariant = !!paragonExtensions?.isReferencedByThemeVariant; + return isThemeVariantToken || isReferencedByThemeVariant; + }, + })), + ]; + paragonFilters.forEach(({ name, filter, opts }) => registerStyleDictionaryFilter(name, filter, opts)); -/** - * Custom file header for custom and built-in formatters. - */ -StyleDictionary.registerFileHeader({ - name: 'customFileHeader', - fileHeader: (defaultMessage) => [ - 'IMPORTANT: This file is the result of assembling design tokens', - ...defaultMessage, - ], -}); + /** + * Registers a custom TOML parser with Style Dictionary. + */ + StyleDictionary.registerParser({ + name: 'toml-parser', + pattern: /\.toml$/, + parser: ({ contents }) => toml.load(contents), + }); -/** - * Registers a filter `isSource` that filters output to only include tokens - * that are marked as `isSource` in their metadata. - */ -StyleDictionary.registerFilter({ - name: 'isSource', - matcher: token => token?.isSource === true, -}); + /** + * Registers a custom fileHeader. + */ + StyleDictionary.registerFileHeader({ + name: 'customFileHeader', + fileHeader: (defaultMessage) => [ + `${defaultMessage} while transforming design tokens.`, + 'See /tokens/README.md for more details.', + ], + }); -StyleDictionary.registerParser({ - pattern: /\.toml$/, - parse: ({ contents }) => toml.load(contents), -}); + return StyleDictionary; +}; module.exports = { - StyleDictionary, + initializeStyleDictionary, + getTokensStudioTransforms, createCustomCSSVariables, colorTransform, + getStyleDictionaryUtils, }; diff --git a/tokens/utils.js b/tokens/utils.js index 83ff09c7dc..1398219951 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -2,6 +2,142 @@ const fs = require('fs'); const readline = require('readline'); const path = require('path'); +const visitedTokens = {}; + +const commonCssFiles = ['variables.css', 'abstraction-variables.css']; + +/** + * Finds a token by its path in the token tree. + * @param {string} path - The path to the token in the token tree. + * @returns {DesignToken} - The token object found at the specified path. + */ +function findTokenByPath(tokenPath, allTokens) { + const keys = tokenPath.split('.'); + return keys.reduce((acc, key) => acc && acc[key], allTokens); +} + +/** + * @typedef {object} ExtensionProperty + * @property {string} name - The name of the extension property. + * @property {(token: DesignToken) => boolean} filter - The filter function to determine + * if the token should be annotated. + * @property {(token: DesignToken) => boolean} referenceTokenFilter - The filter function to determine if + * the referenced token should be annotated. + */ + +/** + * @typedef {object} AnnotateReferencedTokenExtensionsArgs + * @property {DesignToken} token - The token object to annotate. + * @property {ExtensionProperty[]} extensionProperties - The properties to annotate the referenced token with. + * @property {object} sdUtils - The Style Dictionary utility functions. + */ + +/** + * Annotates referenced token $extensions with the specified properties. + * @param {AnnotateReferencedTokenExtensionsArgs} args - The arguments object. + */ +function annotateReferencedTokenExtensions({ + token, + extensionProperties, + sdUtils, + dictionary, +}) { + const stack = [token]; // Stack to process tokens iteratively + + while (stack.length > 0) { + const currentToken = stack.pop(); + + // Get all references for the current token + const references = sdUtils.getReferences(currentToken, dictionary); + extensionProperties.forEach(({ name: propertyName, filter: propertyFilter, referenceTokenFilter }) => { + if (!propertyFilter(token)) { + // Skip processing if the token does not match the filter for the property + return; + } + + // Iterate over each reference and mark the referenced token + references.forEach((foundReference) => { + const foundReferenceTokenPath = foundReference.ref.join('.'); + if (visitedTokens[propertyName]?.has(foundReferenceTokenPath)) { + // Skip processing if the referenced token has already been marked + return; + } + + if (!referenceTokenFilter?.(foundReference)) { + // Filter the reference tokens to only include the ones that match the filter + return; + } + + // Directly access the referenced token from the returned reference object + const referencedToken = findTokenByPath(foundReferenceTokenPath, dictionary); + if (!referencedToken) { + return; + } + + // Mark the referenced token + referencedToken.$extensions = { + ...referencedToken.$extensions, + 'org.openedx.paragon': { + ...referencedToken.$extensions?.['org.openedx.paragon'], + [propertyName]: true, + }, + }; + + visitedTokens[propertyName].add(foundReferenceTokenPath); + + if (sdUtils.usesReferences(referencedToken)) { + // Push the referenced token to the stack to process its references + stack.push(referencedToken); + } + }); + }); + } +} + +/** + * Processes and updates tokens in place by annotating referenced tokens with extension properties. + * @typedef {object} ProcessAndUpdateTokensArgs + * @property {object} tokens - The tokens object to process. + * @property {ExtensionProperty[]} extensionProperties - The properties to annotate the referenced token with. + * @property {object} sdUtils - The Style Dictionary utility functions. + */ +function processAndUpdateTokens(tokens, extensionProperties, sdUtils, dictionary) { + Object.keys(tokens).forEach(async (key) => { + const token = tokens[key]; + if (typeof token !== 'object') { + // Skip non-object tokens + return; + } + + // If this is a group (nested tokens), recurse into it + if (!Object.prototype.hasOwnProperty.call(token, '$value')) { + processAndUpdateTokens(token, extensionProperties, sdUtils, dictionary); + } else if (sdUtils.usesReferences(token)) { + // Initialize the visited tokens for each extension property + extensionProperties.forEach((property) => { + visitedTokens[property.name] = new Set(); + }); + + // If the token uses reference(s), update the referenced token(s) $extensions metadata. + annotateReferencedTokenExtensions({ + token, + extensionProperties, + sdUtils, + dictionary, + }); + } + }); +} + +/** + * Recursively retrieves files with a specific extension from a given directory. + * + * @param {string} location - The path to the directory or file to start the search. + * @param {string} extension - The file extension to search for (e.g., '.js', '.css'). + * @param {string[]} [files=[]] - An array to accumulate the file paths that match the extension. + * @param {string[]} [excludeDirectories=[]] - An array of directory names to exclude from the search. + * @returns {string[]} - An array of file paths that have the specified extension. + */ function getFilesWithExtension(location, extension, files = [], excludeDirectories = []) { const content = fs.statSync(location); if (content.isDirectory()) { @@ -17,6 +153,14 @@ function getFilesWithExtension(location, extension, files = [], excludeDirectori return files; } +/** + * Generates a mapping of SCSS variables to corresponding CSS variables. + * + * @param {string} prefix - The prefix used to build the CSS variable names (e.g., '--my-prefix'). + * @param {Object} tokensObject - The object representing the design tokens, which may be nested. + * @param {Object} result - The object where the mapping of SCSS to CSS variables will be stored. + * @returns {Object} - The `result` object containing the SCSS-to-CSS variable mappings. + */ function getSCSStoCSSMap(prefix, tokensObject, result) { Object.entries(tokensObject).forEach(([node, value]) => { if (value?.constructor.name === 'Object') { @@ -30,6 +174,16 @@ function getSCSStoCSSMap(prefix, tokensObject, result) { return result; } +/** + * Replaces variable usage in a file based on a provided mapping and direction. + * + * @param {string} filePath - The path to the file where variables should be replaced. + * @param {Object} variablesMap - A map of variables to their replacement values. + * @param {string} [direction='scss-to-css'] - The direction of the replacement, either `scss-to-css` or `css-to-scss`. + * - `scss-to-css`: Replaces SCSS variables (e.g., `$some-variable`) with CSS variables. + * - `css-to-scss`: Replaces CSS variables (e.g., `var(--some-variable)`) with SCSS variables. + * @returns {Promise} - A promise that resolves when the file has been successfully processed and written. + */ async function replaceVariablesUsage(filePath, variablesMap, direction = 'scss-to-css') { let variableRegex; let result = ''; @@ -162,8 +316,17 @@ async function transformInPath(location, variablesMap, transformType = 'definiti } } -function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'), isTheme, themeVariant }) { - const directoryPath = isTheme ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`; +/** + * Creates an `index.css` file that imports all other CSS files in a directory. + * + * @param {Object} options - The options for creating the `index.css` file. + * @param {string} [options.buildDir=path.resolve(__dirname, '../styles/css')] + * - The base directory where the CSS files are located. + * @param {boolean} options.isThemeVariant - A flag indicating whether the directory is for theme files. + * @param {string} options.themeVariant - The specific theme variant to be used (e.g., 'dark', 'light'). + */ +function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'), isThemeVariant, themeVariant }) { + const directoryPath = isThemeVariant ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`; fs.readdir(directoryPath, (errDir, files) => { if (errDir) { @@ -173,11 +336,17 @@ function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css' } const outputCssFiles = files.filter(file => file !== 'index.css'); - // When creating themes, there are typically two files: one for utility classes and one for variables. - // It's organized them to allow variables be reading first. - if (isTheme) { outputCssFiles.reverse(); } - const exportStatements = outputCssFiles.map((file) => `@import "${file}";`); + // For theme variants, files are ordered with variables first, abstraction variables second, + // and utility classes last. This ensures that variables are available before other files use them. + // For the core styles, custom media breakpoints replace utility classes in the order. + const sortOrder = isThemeVariant + ? [...commonCssFiles, 'utility-classes.css'] + : [...commonCssFiles, 'custom-media-breakpoints.css']; + + const sortedCssFiles = outputCssFiles.sort((a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b)); + + const exportStatements = sortedCssFiles.map((file) => `@import "${file}";`); const indexContent = `${exportStatements.join('\n')}\n`; @@ -207,4 +376,5 @@ module.exports = { getSCSStoCSSMap, transformInPath, composeBreakpointName, + processAndUpdateTokens, }; diff --git a/www/src/components/ComponentsList.tsx b/www/src/components/ComponentsList.tsx index f0a20f0b8e..113394990d 100644 --- a/www/src/components/ComponentsList.tsx +++ b/www/src/components/ComponentsList.tsx @@ -41,9 +41,9 @@ function ComponentsList() { return ( -
+

All components (A-Z)

-
    +
      {all.map((node: IComponentNavItem) => )}
diff --git a/www/src/components/MeasuredItem.tsx b/www/src/components/MeasuredItem.tsx index 646cafcc54..77e7ab3078 100644 --- a/www/src/components/MeasuredItem.tsx +++ b/www/src/components/MeasuredItem.tsx @@ -41,8 +41,6 @@ function MeasuredItem({ }, {}); setMeasurements(measurementsItems); }; - // Needs a moment to finish switching theme and re-render children to DOM first. - setMeasurements(initialMeasurements); const timeout = setTimeout(measure, 1000); return () => clearTimeout(timeout); }, @@ -51,9 +49,9 @@ function MeasuredItem({ return ( <> - {renderBefore ? renderBefore(measurements) : null} + {renderBefore?.(measurements)} {React.cloneElement(children as React.ReactElement, { ref: itemRef })} - {renderAfter ? renderAfter(measurements) : null} + {renderAfter?.(measurements)} ); } diff --git a/www/src/components/Menu.scss b/www/src/components/Menu.scss index 9b885eb332..e444c50f47 100644 --- a/www/src/components/Menu.scss +++ b/www/src/components/Menu.scss @@ -7,7 +7,7 @@ border-right: var(--pgn-size-border-width) solid var(--pgn-color-light-400); .pgn-doc__menu-title { - font-size: var(--pgn-typography-font-size-h4); + font-size: var(--pgn-typography-font-size-h4-base); line-height: var(--pgn-typography-line-height-base); font-weight: var(--pgn-typography-font-weight-normal); color: var(--pgn-color-gray-700); @@ -24,7 +24,7 @@ .btn { width: 50%; - font-size: var(--pgn-typography-font-size-xs); + font-size: var(--pgn-typography-font-size-sm); line-height: var(--pgn-typography-headings-line-height); } } @@ -40,7 +40,7 @@ margin-bottom: var(--pgn-spacing-spacer-base); .pgn_collapsible { - font-size: var(--pgn-typography-font-size-xs); + font-size: var(--pgn-typography-font-size-sm); line-height: var(--pgn-typography-headings-line-height); font-weight: var(--pgn-typography-font-weight-normal); color: var(--pgn-color-gray-700); @@ -86,7 +86,6 @@ } .collapsible-basic .collapsible-trigger { - font-size: var(--pgn-typography-font-size-sm); text-decoration: none; justify-content: start; flex-direction: row-reverse; diff --git a/www/src/components/TableCells.tsx b/www/src/components/TableCells.tsx index 2dd00c84a2..339aefb06b 100644 --- a/www/src/components/TableCells.tsx +++ b/www/src/components/TableCells.tsx @@ -6,6 +6,18 @@ export type CodeCellType = { value: string | number | undefined, }; +export type ClassNameRowType = { + className: string | undefined, + text: string, + hasClass?: boolean, +}; + +export type ClassNameCellType = { + row: { + original: ClassNameRowType, + }, +} & CodeCellType; + export type DataTableRowType = { row: { original: { @@ -17,13 +29,17 @@ export type DataTableRowType = { }, }; -export function ClassNameCell({ value }: CodeCellType) { +export function ClassNameCell({ row, value }: ClassNameCellType) { + if (row.original.hasClass === false) { + return null; + } + if (!value) { return null; } return ( - + .{value} ); @@ -31,7 +47,7 @@ export function ClassNameCell({ value }: CodeCellType) { export function TextCell({ value }: CodeCellType) { return ( -

+

{value}

); @@ -39,7 +55,7 @@ export function TextCell({ value }: CodeCellType) { export function CodeCell({ value }: CodeCellType) { return ( - + {value} ); @@ -69,7 +85,7 @@ export function MobileMeasuredCell({ row } : DataTableRowType) { export function StyleCell({ row } : DataTableRowType) { return ( -

+

{row.original.text}

); diff --git a/www/src/components/_CodeBlock.scss b/www/src/components/_CodeBlock.scss index bfff2bae46..99f6d3dfc8 100644 --- a/www/src/components/_CodeBlock.scss +++ b/www/src/components/_CodeBlock.scss @@ -1,10 +1,11 @@ .pgn-doc__code-block { margin: var(--pgn-spacing-spacer-base) 0 2rem; - background-color: var(--pgn-color-light-200); - border: solid 2px var(--pgn-color-light-300); - border-radius: var(--pgn-size-border-radius-base); .pgn-doc__code-block-preview { + background-color: var(--pgn-color-light-200); + border: solid 2px var(--pgn-color-light-300); + border-bottom: 0; + border-radius: var(--pgn-size-border-radius-base) var(--pgn-size-border-radius-base) 0 0; padding: var(--pgn-spacing-spacer-base); } diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss index 94d3e937cd..f020023563 100644 --- a/www/src/components/_doc-elements.scss +++ b/www/src/components/_doc-elements.scss @@ -327,6 +327,52 @@ .color-palette { display: grid; - grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); - grid-row-gap: 2rem; + grid-gap: 2rem; + grid-template-columns: repeat(2, 1fr); // Default to 2 columns +} + +@media (--pgn-size-breakpoint-min-width-md) { + .color-palette { + grid-template-columns: repeat(3, 1fr); // 3 columns for medium+ screens + } +} + +@media (--pgn-size-breakpoint-min-width-lg) { + .color-palette { + grid-template-columns: repeat(4, 1fr); // 4 columns for large+ screens + } +} + +.pgn-doc__code-display-block, +.pgn-doc__code-headings-block { + .pgn__data-table-cell-wrap { + max-width: max-content; + } + + @media (--pgn-size-breakpoint-max-width-md) { + overflow: hidden; + overflow-x: scroll; + + .pgn__data-table-layout-wrapper { + overflow-x: initial; + } + } + + .heading-label { + font-size: var(--pgn-typography-font-size-base); + line-height: var(--pgn-typography-line-height-base); + } +} + +.pgn-doc__code-body-block { + .lead, + .font-size-normal, + .small, + .x-small { + line-height: var(--pgn-typography-line-height-base); + } + + .pgn__data-table-wrapper { + font-size: inherit; + } } diff --git a/www/src/components/header/Header.scss b/www/src/components/header/Header.scss index 327433df9d..ddd9dad3f2 100644 --- a/www/src/components/header/Header.scss +++ b/www/src/components/header/Header.scss @@ -17,12 +17,12 @@ } &-logo { - font-size: var(--pgn-typography-font-size-mobile-h1); - line-height: var(--pgn-typography-display-line-height-base); + font-size: var(--pgn-typography-font-size-h1-mobile); + line-height: var(--pgn-typography-line-height-display-base); } &-heading { - font-size: var(--pgn-typography-font-size-h3); + font-size: var(--pgn-typography-font-size-h3-base); line-height: var(--pgn-typography-line-height-base); margin: 0; color: var(--pgn-color-white); diff --git a/www/src/components/header/Navbar.tsx b/www/src/components/header/Navbar.tsx index ffef619923..dd7f188ec7 100644 --- a/www/src/components/header/Navbar.tsx +++ b/www/src/components/header/Navbar.tsx @@ -35,7 +35,7 @@ export default function Navbar({ return ( - + {showMinimizedTitle && (