From c4f546698138d3f808999b8f53bcbd74fd519609 Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Tue, 20 Aug 2024 17:59:46 +0300 Subject: [PATCH 01/16] feat: update style dictionary to v4 --- bin/paragon-scripts.js | 18 +- lib/build-scss.js | 28 +- lib/build-tokens.js | 79 +- lib/help.js | 4 +- lib/install-theme.js | 6 +- lib/migrate-to-openedx-scope.js | 8 +- lib/replace-variables.js | 8 +- lib/utils.js | 4 +- lib/version.js | 8 +- package-lock.json | 1027 ++++++- package.json | 3 +- styles/css/core/custom-media-breakpoints.css | 17 - styles/css/core/variables.css | 240 +- styles/css/themes/light/variables.css | 2537 ++++++++++------- tokens/css-utilities.js | 2 +- tokens/map-scss-to-css.js | 14 +- tokens/sass-helpers.js | 18 +- .../themes/light/components/Form/color.json | 2 +- .../themes/light/components/IconButton.json | 20 +- tokens/style-dictionary.js | 170 +- tokens/utils.js | 8 +- 21 files changed, 2846 insertions(+), 1375 deletions(-) diff --git a/bin/paragon-scripts.js b/bin/paragon-scripts.js index a029b19564..b2f1953e0c 100755 --- a/bin/paragon-scripts.js +++ b/bin/paragon-scripts.js @@ -1,13 +1,13 @@ #!/usr/bin/env node -const chalk = require('chalk'); -const themeCommand = require('../lib/install-theme'); -const helpCommand = require('../lib/help'); -const buildTokensCommand = require('../lib/build-tokens'); -const replaceVariablesCommand = require('../lib/replace-variables'); -const buildScssCommand = require('../lib/build-scss'); -const { sendTrackInfo } = require('../lib/utils'); -const versionCommand = require('../lib/version'); -const migrateToOpenEdxScopeCommand = require('../lib/migrate-to-openedx-scope'); +import chalk from 'chalk'; +import themeCommand from '../lib/install-theme.js'; +import helpCommand from '../lib/help.js'; +import buildTokensCommand from '../lib/build-tokens.js'; +import replaceVariablesCommand from '../lib/replace-variables.js'; +import buildScssCommand from '../lib/build-scss.js'; +import { sendTrackInfo } from '../lib/utils.js'; +import versionCommand from '../lib/version.js'; +import migrateToOpenEdxScopeCommand from '../lib/migrate-to-openedx-scope.js'; const commandAliases = { '-v': 'version', diff --git a/lib/build-scss.js b/lib/build-scss.js index 9125cb8166..b0414e57a7 100755 --- a/lib/build-scss.js +++ b/lib/build-scss.js @@ -1,16 +1,16 @@ -const fs = require('fs'); -const sass = require('sass'); -const postCSS = require('postcss'); -const postCSSCustomMedia = require('postcss-custom-media'); -const postCSSImport = require('postcss-import'); -const postCSSMinify = require('postcss-minify'); -const combineSelectors = require('postcss-combine-duplicated-selectors'); -const { pathToFileURL } = require('url'); -const path = require('path'); -const minimist = require('minimist'); -const chalk = require('chalk'); -const ora = require('ora'); -const { capitalize } = require('./utils'); +import fs from 'fs'; +import sass from 'sass'; +import postCSS from 'postcss'; +import postCSSCustomMedia from 'postcss-custom-media'; +import postCSSImport from 'postcss-import'; +import postCSSMinify from 'postcss-minify'; +import combineSelectors from 'postcss-combine-duplicated-selectors'; +import { pathToFileURL } from 'url'; +import path from 'path'; +import minimist from 'minimist'; +import chalk from 'chalk'; +import ora from 'ora'; +import { capitalize } from './utils.js'; const paragonThemeOutputFilename = 'theme-urls.json'; @@ -185,4 +185,4 @@ function buildScssCommand(commandArgs) { }); } -module.exports = buildScssCommand; +export default buildScssCommand; diff --git a/lib/build-tokens.js b/lib/build-tokens.js index e2e04d60ae..2dde92954c 100755 --- a/lib/build-tokens.js +++ b/lib/build-tokens.js @@ -1,7 +1,11 @@ -const path = require('path'); -const minimist = require('minimist'); -const { StyleDictionary, colorTransform, createCustomCSSVariables } = require('../tokens/style-dictionary'); -const { createIndexCssFile } = require('../tokens/utils'); +import path from 'path'; +import minimist from 'minimist'; +import { fileURLToPath } from 'url'; +import { StyleDictionary, colorTransform, createCustomCSSVariables } from '../tokens/style-dictionary.js'; +import { createIndexCssFile } from '../tokens/utils.js'; + +const filename = fileURLToPath(import.meta.url); +const dirname = path.dirname(filename); /** * Builds tokens for CSS styles from JSON source files. @@ -29,11 +33,13 @@ async function buildTokensCommand(commandArgs) { 'source-tokens-only': hasSourceTokensOnly, themes, } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' }); - + // console.log('build-tokens.js - dirname =======>', dirname); + // console.log('build-tokens.js - StyleDictionary =======>', StyleDictionary); + // console.log('build-tokens.js - StyleDictionary =======>', StyleDictionary.hooks); const coreConfig = { include: [ - path.resolve(__dirname, '../tokens/src/core/**/*.json'), - path.resolve(__dirname, '../tokens/src/core/**/*.toml'), + path.resolve(dirname, '../tokens/src/core/**/*.json'), + path.resolve(dirname, '../tokens/src/core/**/*.toml'), ], source: tokensSource ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`] @@ -53,29 +59,32 @@ async function buildTokensCommand(commandArgs) { outputReferences: !hasSourceTokensOnly, }, }, - { - format: 'css/custom-media-breakpoints', - destination: 'core/custom-media-breakpoints.css', - filter: hasSourceTokensOnly ? 'isSource' : undefined, - options: { - outputReferences: !hasSourceTokensOnly, - }, - }, + // { + // format: 'css/custom-media-breakpoints', + // destination: 'core/custom-media-breakpoints.css', + // filter: hasSourceTokensOnly ? 'isSource' : undefined, + // options: { + // outputReferences: !hasSourceTokensOnly, + // }, + // }, ], - transforms: StyleDictionary.transformGroup.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'), + transforms: StyleDictionary.hooks.transformGroups.css.filter(item => { + // console.log('build-tokens.js - item =======>', item); + return item !== 'size/rem'; + }).concat('color/sass-color-functions', 'str-replace'), options: { fileHeader: 'customFileHeader', }, }, }, }; - + // console.log('build-tokens.js - coreConfig =======>', coreConfig); const getStyleDictionaryConfig = (themeVariant) => ({ ...coreConfig, include: [ ...coreConfig.include, - path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`), - path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.toml`), + path.resolve(dirname, `../tokens/src/themes/${themeVariant}/**/*.json`), + path.resolve(dirname, `../tokens/src/themes/${themeVariant}/**/*.toml`), ], source: tokensSource ? [ @@ -85,8 +94,11 @@ 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) => { + // console.log('build-tokens.js - color/sass-color-functions =======>', token); + return colorTransform(token, themeVariant); + }, }, }, format: { @@ -107,27 +119,28 @@ async function buildTokensCommand(commandArgs) { outputReferences: !hasSourceTokensOnly, }, }, - { - format: 'css/utility-classes', - destination: `themes/${themeVariant}/utility-classes.css`, - filter: hasSourceTokensOnly ? 'isSource' : undefined, - options: { - outputReferences: !hasSourceTokensOnly, - }, - }, + // { + // format: 'css/utility-classes', + // destination: `themes/${themeVariant}/utility-classes.css`, + // filter: hasSourceTokensOnly ? 'isSource' : undefined, + // options: { + // outputReferences: !hasSourceTokensOnly, + // }, + // }, ], }, }, }); - StyleDictionary.extend(coreConfig).buildAllPlatforms(); + new StyleDictionary(coreConfig).buildAllPlatforms(); createIndexCssFile({ buildDir, isTheme: false }); - themes.forEach((themeVariant) => { + themes.forEach(async (themeVariant) => { const config = getStyleDictionaryConfig(themeVariant); - StyleDictionary.extend(config).buildAllPlatforms(); + // console.log('build-tokens.js - config =======>', config); + new StyleDictionary(config).buildAllPlatforms(); createIndexCssFile({ buildDir, isTheme: true, themeVariant }); }); } -module.exports = buildTokensCommand; +export default buildTokensCommand; diff --git a/lib/help.js b/lib/help.js index 17e68b33b9..ab138a7200 100644 --- a/lib/help.js +++ b/lib/help.js @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -const chalk = require('chalk'); +import chalk from 'chalk'; /** * Finds a command based on the given name in the commands object. @@ -67,4 +67,4 @@ function helpCommand(commands, commandArgs) { }); } -module.exports = helpCommand; +export default helpCommand; diff --git a/lib/install-theme.js b/lib/install-theme.js index e3da7079d1..e5503ca469 100644 --- a/lib/install-theme.js +++ b/lib/install-theme.js @@ -1,5 +1,5 @@ -const inquirer = require('inquirer'); -const childProcess = require('child_process'); +import inquirer from 'inquirer'; +import childProcess from 'child_process'; /** * Prompts the user to enter the @edx/brand package they want to install. @@ -45,4 +45,4 @@ async function themeCommand() { } } -module.exports = themeCommand; +export default themeCommand; diff --git a/lib/migrate-to-openedx-scope.js b/lib/migrate-to-openedx-scope.js index 64ed76111f..010a6881c6 100644 --- a/lib/migrate-to-openedx-scope.js +++ b/lib/migrate-to-openedx-scope.js @@ -1,6 +1,6 @@ -const fs = require('fs'); -const path = require('path'); -const chalk = require('chalk'); +import fs from 'fs'; +import path from 'path'; +import chalk from 'chalk'; const isValidFileExtension = (filename) => /(.jsx|.js|.tsx|.ts|.md|.rst|.scss)$/.test(filename.toLowerCase()); @@ -59,4 +59,4 @@ function migrateToOpenEdxScopeCommand() { console.error(`${chalk.green.bold('Paragon migration to Openedx scope completed successfully.')}`); // eslint-disable-line no-console } -module.exports = migrateToOpenEdxScopeCommand; +export default migrateToOpenEdxScopeCommand; diff --git a/lib/replace-variables.js b/lib/replace-variables.js index 07b7361add..5fb0a4ce9c 100755 --- a/lib/replace-variables.js +++ b/lib/replace-variables.js @@ -1,6 +1,6 @@ -const minimist = require('minimist'); -const { transformInPath } = require('../tokens/utils'); -const mapSCSStoCSS = require('../tokens/map-scss-to-css'); +import minimist from 'minimist'; +import { transformInPath } from '../tokens/utils.js'; +import mapSCSStoCSS from '../tokens/map-scss-to-css.js'; /** * Replaces CSS or SASS variables in a file with their corresponding values. @@ -35,4 +35,4 @@ async function replaceVariablesCommand(commandArgs) { } } -module.exports = replaceVariablesCommand; +export default replaceVariablesCommand; diff --git a/lib/utils.js b/lib/utils.js index 59ada79b4a..c365eeedc6 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -1,4 +1,4 @@ -const axios = require('axios'); +import axios from 'axios'; /** * Sends request to the Netlify function to inform about specified event. @@ -27,4 +27,4 @@ function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); } -module.exports = { sendTrackInfo, capitalize }; +export { sendTrackInfo, capitalize }; diff --git a/lib/version.js b/lib/version.js index b1adabd67f..a35923bbab 100644 --- a/lib/version.js +++ b/lib/version.js @@ -1,9 +1,9 @@ /* eslint-disable no-console */ -const chalk = require('chalk'); -const { version } = require('../package.json'); +import chalk from 'chalk'; +import packageJson from '../package.json' assert { type: 'json' }; function versionCommand() { - console.log(`Paragon CLI version: ${chalk.bold(version)}`); + console.log(`Paragon CLI version: ${chalk.bold(packageJson.version)}`); } -module.exports = versionCommand; +export default versionCommand; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 323434aa0c..919cb6752f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,7 +54,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" @@ -2231,6 +2231,202 @@ "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/@chevrotain/cst-dts-gen": { "version": "11.0.3", "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz", @@ -5183,6 +5379,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 +6039,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 +7223,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", @@ -9423,6 +9763,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, @@ -9956,6 +10311,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 +13244,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 +13656,6 @@ }, "node_modules/ci-info": { "version": "3.8.0", - "dev": true, "funding": [ { "type": "github", @@ -15323,6 +15696,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 +16181,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 +16540,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", @@ -17743,6 +18156,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 +18489,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 +20701,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 +21162,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 +21296,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 +21941,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 +22636,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 +22846,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "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 +23338,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 +25629,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,11 +25665,6 @@ "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/jsonfile": { "version": "6.1.0", "license": "MIT", @@ -25169,6 +25675,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 +25735,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 +27223,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 +30573,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 +30996,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 +31384,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 +31556,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 +31587,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", @@ -32253,6 +32947,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 +33170,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 +36390,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 +36561,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 +36694,6 @@ }, "node_modules/slash": { "version": "2.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -36873,6 +37589,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 +37606,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 +37685,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 +37784,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 +37861,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 +37910,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": { @@ -37928,6 +38693,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 +38967,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 +39742,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 +39819,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 +39895,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 +40685,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..36a0f56a7f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "@openedx/paragon", "version": "20.18.1", + "type": "module", "description": "Accessible, responsive UI component library based on Bootstrap.", "main": "dist/index.js", "module": "dist/index.js", @@ -93,7 +94,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" diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css index f7f2c035ab..e69de29bb2 100644 --- a/styles/css/core/custom-media-breakpoints.css +++ b/styles/css/core/custom-media-breakpoints.css @@ -1,17 +0,0 @@ -/** - * IMPORTANT: This file is the result of assembling design tokens - * Do not edit directly - * Generated on Fri, 22 Sep 2023 08:20:17 GMT - */ - -@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0); -@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); -@custom-media --pgn-size-breakpoint-min-width-md (min-width: 768px); -@custom-media --pgn-size-breakpoint-max-width-md (max-width: 992px); -@custom-media --pgn-size-breakpoint-min-width-lg (min-width: 992px); -@custom-media --pgn-size-breakpoint-max-width-lg (max-width: 1200px); -@custom-media --pgn-size-breakpoint-min-width-xl (min-width: 1200px); -@custom-media --pgn-size-breakpoint-max-width-xl (max-width: 1400px); -@custom-media --pgn-size-breakpoint-min-width-xxl (min-width: 1400px); diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 9369b9e5a7..45ac41f1a2 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,9 +1,3 @@ -/** - * IMPORTANT: This file is the result of assembling design tokens - * Do not edit directly - * Generated on Wed, 15 May 2024 12:30:36 GMT - */ - :root { --pgn-theme-interval: 8%; --pgn-other-form-control-custom-file-content: Browse; @@ -45,9 +39,9 @@ --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-line-height-sm: 1.5rem; + --pgn-typography-line-height-lg: 1.5rem; + --pgn-typography-line-height-base: 1.5556rem; --pgn-typography-font-weight-table-th: normal; --pgn-typography-font-weight-lead: inherit; --pgn-typography-font-weight-bolder: bolder; @@ -70,26 +64,17 @@ --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-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-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-line-height-base: 1rem; --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-link-decoration-brand-inline-hover: underline; --pgn-typography-link-decoration-brand-inline-base: underline; --pgn-typography-link-decoration-brand-hover: underline; @@ -102,14 +87,23 @@ --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-sm: 1.4286; - --pgn-typography-input-btn-line-height-base: 1.3333; + --pgn-typography-input-btn-line-height-sm: 1.4286rem; + --pgn-typography-input-btn-line-height-base: 1.3333rem; --pgn-typography-input-btn-font-size-lg: 1.325rem; --pgn-typography-input-btn-font-size-sm: .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-line-height: 1.25rem; --pgn-typography-headings-font-family: inherit; + --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-dropdown-item-text-decoration: none; --pgn-typography-code-font-size: 87.5%; --pgn-typography-badge-font-size: 75%; @@ -120,8 +114,22 @@ --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-spacer-0: 0rem; + --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-tooltip-margin: 0rem; --pgn-spacing-tooltip-padding-x: .5rem; --pgn-spacing-tooltip-padding-y: .5rem; --pgn-spacing-toast-container-gutter-sm: .625rem; @@ -132,9 +140,9 @@ --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-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: .25rem; --pgn-spacing-stepper-header-step-padding: .25rem; --pgn-spacing-stepper-header-padding-y: .75rem; @@ -166,20 +174,6 @@ --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; @@ -200,7 +194,7 @@ --pgn-spacing-dropdown-padding-y-item: .25rem; --pgn-spacing-dropdown-padding-y-base: .5rem; --pgn-spacing-dropdown-padding-x-item: 1rem; - --pgn-spacing-dropdown-padding-x-base: 0; + --pgn-spacing-dropdown-padding-x-base: 0rem; --pgn-spacing-dropdown-spacer: .125rem; --pgn-spacing-data-table-footer-position: center; --pgn-spacing-data-table-padding-cell: .5rem .75rem; @@ -237,7 +231,7 @@ --pgn-spacing-card-loading-skeleton-spacer: .313rem; --pgn-spacing-card-footer-action-gap: .5rem; --pgn-spacing-card-columns-gap: 1.25rem; - --pgn-spacing-card-columns-count: 3; + --pgn-spacing-card-columns-count: 3rem; --pgn-spacing-card-margin-group: 12px; --pgn-spacing-card-spacer-y: .75rem; --pgn-spacing-card-spacer-x: 1.25rem; @@ -264,7 +258,9 @@ --pgn-size-breakpoint-lg: 992px; --pgn-size-breakpoint-md: 768px; --pgn-size-breakpoint-sm: 576px; - --pgn-size-breakpoint-xs: 0; + --pgn-size-breakpoint-xs: 0rem; + --pgn-size-input-btn-focus-width: 1px; + --pgn-size-caret-width: .3em; --pgn-size-tooltip-arrow-width: .8rem; --pgn-size-tooltip-arrow-height: .4rem; --pgn-size-tooltip-max-width: 200px; @@ -274,18 +270,18 @@ --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-stack-gap: 0rem; --pgn-size-spinner-sm-border-width: .2em; --pgn-size-spinner-sm-width: 1rem; --pgn-size-spinner-base-border-width: .25em; --pgn-size-spinner-base-width: 2rem; - --pgn-size-search-field-border-radius: 0; + --pgn-size-search-field-border-radius: 0rem; --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-progress-bar-border-radius: 0rem; --pgn-size-progress-bar-border-width: 1px; --pgn-size-progress-bar-height-annotated: .3125rem; --pgn-size-progress-bar-height-base: 1rem; @@ -297,7 +293,7 @@ --pgn-size-popover-icon-width: 1rem; --pgn-size-popover-icon-height: 1rem; --pgn-size-popover-max-width: 480px; - --pgn-size-pagination-focus-outline: 0; + --pgn-size-pagination-focus-outline: 0rem; --pgn-size-pagination-toggle-border-sm: .25rem; --pgn-size-pagination-toggle-border-base: .3125rem; --pgn-size-pagination-reduced-dropdown-min-width: 6rem; @@ -307,7 +303,7 @@ --pgn-size-pagination-icon-height: 2.25rem; --pgn-size-pagination-icon-width: 2.25rem; --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-pills-link-border-width: 1px; @@ -328,8 +324,6 @@ --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; @@ -337,10 +331,10 @@ --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-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-width: 1rem; --pgn-size-form-control-range-track-border-radius: 1rem; --pgn-size-form-control-range-track-height: .5rem; @@ -396,7 +390,7 @@ --pgn-size-annotation-border-radius: .25rem; --pgn-size-annotation-max-width: 18.75rem; --pgn-size-annotation-arrow-border-width: .5rem; - --pgn-size-alert-border-width: 0; + --pgn-size-alert-border-width: 0rem; --pgn-size-rounded-pill: 50rem; --pgn-size-border-radius-sm: .25rem; --pgn-size-border-radius-lg: .425rem; @@ -415,6 +409,11 @@ --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-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-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); @@ -422,16 +421,22 @@ --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-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); @@ -443,6 +448,7 @@ --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-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); @@ -471,12 +477,25 @@ --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-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); --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-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-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); + --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-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-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); @@ -488,8 +507,11 @@ --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-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-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-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); @@ -498,9 +520,16 @@ --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-alert-actions-gap: var(--pgn-spacing-spacer-3); + --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-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-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-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); @@ -508,96 +537,61 @@ --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-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-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-menu-item-border-width: var(--pgn-size-btn-border-width); --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-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-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-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-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-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-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-card-image-border-radius: var(--pgn-size-card-border-radius-base); + --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-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); + --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-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-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-badge-focus-width: var(--pgn-size-input-btn-focus-width); + --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); } diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 7965168e70..5288529e80 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -1,9 +1,3 @@ -/** - * IMPORTANT: This file is the result of assembling design tokens - * Do not edit directly - * Generated on Wed, 15 May 2024 07:58:56 GMT - */ - :root { --pgn-color-dark-base: #273F2FFF; --pgn-color-light-base: #E1DDDBFF; @@ -27,9 +21,11 @@ --pgn-color-blue: #23419FFF; --pgn-color-black: #000000FF; --pgn-color-white: #FFFFFFFF; + --pgn-color-mark-bg: #FFF243FF; + --pgn-color-list-group-base: inherit; --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-step-border: none; --pgn-color-stepper-header-bg-base: #00000000; --pgn-color-progress-bar-bg: #00000000; --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000; @@ -40,11 +36,7 @@ --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; @@ -181,15 +173,20 @@ --pgn-color-btn-bg-outline-danger: inherit; --pgn-color-btn-bg-inverse-outline-brand: #00000000; --pgn-color-btn-bg-outline-brand: inherit; + --pgn-theme-interval: 8%; + --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-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-other-form-control-custom-file-content: Browse; + --pgn-other-form-control-custom-file-lang: en; + --pgn-other-form-control-range-track-cursor: pointer; + --pgn-other-form-control-cursor: auto; --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); @@ -258,21 +255,507 @@ --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-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-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-tooltip-zindex: 1070; + --pgn-elevation-sheet-zindex-main: 1032; + --pgn-elevation-sheet-zindex-backdrop: 1031; + --pgn-elevation-product-tour-checkpoint-zindex: 1060; --pgn-elevation-popover-box-shadow: none; + --pgn-elevation-popover-zindex: 1060; --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-modal-zindex: 1050; + --pgn-elevation-modal-backdrop-zindex: 1040; --pgn-elevation-dropdown-box-shadow: none; + --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-btn: none; + --pgn-transition-badge: none; + --pgn-typography-line-height-micro: .938rem; + --pgn-typography-line-height-sm: 1.5rem; + --pgn-typography-line-height-lg: 1.5rem; + --pgn-typography-line-height-base: 1.5556rem; + --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: 1rem; + --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-link-decoration-brand-inline-hover: underline; + --pgn-typography-link-decoration-brand-inline-base: underline; + --pgn-typography-link-decoration-brand-hover: underline; + --pgn-typography-link-decoration-brand-base: none; + --pgn-typography-link-decoration-muted-inline-hover: underline; + --pgn-typography-link-decoration-muted-inline-base: underline; + --pgn-typography-link-decoration-muted-hover: underline; + --pgn-typography-link-decoration-muted-base: none; + --pgn-typography-link-decoration-inline-hover: underline; + --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-sm: 1.4286rem; + --pgn-typography-input-btn-line-height-base: 1.3333rem; + --pgn-typography-input-btn-font-size-lg: 1.325rem; + --pgn-typography-input-btn-font-size-sm: .875rem; + --pgn-typography-input-btn-font-size-base: 1.125rem; + --pgn-typography-input-btn-font-family: inherit; + --pgn-typography-headings-line-height: 1.25rem; + --pgn-typography-headings-font-family: inherit; + --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-dropdown-item-text-decoration: none; + --pgn-typography-code-font-size: 87.5%; + --pgn-typography-badge-font-size: 75%; + --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: 0rem; + --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-tooltip-margin: 0rem; + --pgn-spacing-tooltip-padding-x: .5rem; + --pgn-spacing-tooltip-padding-y: .5rem; + --pgn-spacing-toast-container-gutter-sm: .625rem; + --pgn-spacing-toast-container-gutter-lg: 1.25rem; + --pgn-spacing-toast-padding-y: .25rem; + --pgn-spacing-toast-padding-x: .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: 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: .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-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-popover-header-padding-x: 1rem; + --pgn-spacing-popover-header-padding-y: .5rem; + --pgn-spacing-pagination-padding-x-lg: 1.5rem; + --pgn-spacing-pagination-padding-x-sm: .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-nav-link-distance-to-border: 4px; + --pgn-spacing-nav-link-padding-x: 1rem; + --pgn-spacing-nav-link-padding-y: .5rem; + --pgn-spacing-modal-dialog-margin: 1.5rem; + --pgn-spacing-modal-header-padding-y: 1rem; + --pgn-spacing-modal-footer-padding-y: 1rem; + --pgn-spacing-modal-inner-padding-bottom: .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-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-form-control-select-indicator-padding: 1rem; + --pgn-spacing-form-control-spacer-x: 1rem; + --pgn-spacing-form-control-gutter: .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-input-check-gutter: 1.25rem; + --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-padding-x-item: 1rem; + --pgn-spacing-dropdown-padding-x-base: 0rem; + --pgn-spacing-dropdown-spacer: .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-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-chip-outline-width: 3px; + --pgn-spacing-chip-outline-focus-distance-dark: .313rem; + --pgn-spacing-chip-outline-focus-distance-light: .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-y: 1px; + --pgn-spacing-chip-margin-icon: .25rem; + --pgn-spacing-chip-margin-base: .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-base: 1rem; + --pgn-spacing-card-logo-left-offset-horizontal: .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-columns-gap: 1.25rem; + --pgn-spacing-card-columns-count: 3rem; + --pgn-spacing-card-margin-group: 12px; + --pgn-spacing-card-spacer-y: .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-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: 0rem; + --pgn-size-input-btn-focus-width: 1px; + --pgn-size-caret-width: .3em; + --pgn-size-tooltip-arrow-width: .8rem; + --pgn-size-tooltip-arrow-height: .4rem; + --pgn-size-tooltip-max-width: 200px; + --pgn-size-toast-border-radius: .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: 0rem; + --pgn-size-stepper-header-height-min: 5.13rem; + --pgn-size-stack-gap: 0rem; + --pgn-size-spinner-sm-border-width: .2em; + --pgn-size-spinner-sm-width: 1rem; + --pgn-size-spinner-base-border-width: .25em; + --pgn-size-spinner-base-width: 2rem; + --pgn-size-search-field-border-radius: 0rem; + --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: 0rem; + --pgn-size-progress-bar-border-width: 1px; + --pgn-size-progress-bar-height-annotated: .3125rem; + --pgn-size-progress-bar-height-base: 1rem; + --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-width: 1rem; + --pgn-size-popover-icon-width: 1rem; + --pgn-size-popover-icon-height: 1rem; + --pgn-size-popover-max-width: 480px; + --pgn-size-pagination-focus-outline: 0rem; + --pgn-size-pagination-toggle-border-sm: .25rem; + --pgn-size-pagination-toggle-border-base: .3125rem; + --pgn-size-pagination-reduced-dropdown-min-width: 6rem; + --pgn-size-pagination-reduced-dropdown-max-height: 60vh; + --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-nav-scroll-max-height: 75vh; + --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-pills-link-border-width: 1px; + --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-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-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-form-border-radius-width: .125rem; + --pgn-size-form-border-radius-check-focus: .0625rem; + --pgn-size-form-autosuggest-border-width: .125rem; + --pgn-size-form-autosuggest-spinner-width: 1.25rem; + --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: 0rem; + --pgn-size-form-control-icon-width: 2rem; + --pgn-size-form-control-range-thumb-border-radius: 1rem; + --pgn-size-form-control-range-thumb-border-base: 0rem; + --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-width: 100%; + --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-width-focus: 0.063rem; + --pgn-size-form-input-width-hover: 0.063rem; + --pgn-size-dropdown-min-width: 18rem; + --pgn-size-data-table-layout-sidebar-width: 12rem; + --pgn-size-data-table-dropdown-pagination-min-width: 6rem; + --pgn-size-data-table-dropdown-pagination-max-height: 60vh; + --pgn-size-data-table-border: 2px; + --pgn-size-container-max-width-xl: 1440px; + --pgn-size-container-max-width-lg: 1192px; + --pgn-size-container-max-width-md: 952px; + --pgn-size-container-max-width-sm: 708px; + --pgn-size-container-max-width-xs: 464px; + --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px); + --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-carousel-caption-width: 70%; + --pgn-size-carousel-indicator-height-area-hit: 10px; + --pgn-size-carousel-indicator-height-base: 3px; + --pgn-size-carousel-indicator-width: 30px; + --pgn-size-carousel-control-width-icon: 20px; + --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-vertical-max-height: 140px; + --pgn-size-card-image-horizontal-width-max: 240px; + --pgn-size-card-focus-border-width: 2px; + --pgn-size-card-border-radius-logo: .25rem; + --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-badge-border-radius-pill: 10rem; + --pgn-size-badge-border-radius-base: .25rem; + --pgn-size-avatar-border-radius: 100%; + --pgn-size-avatar-border-base: 1px; + --pgn-size-avatar-huge: 18.75rem; + --pgn-size-avatar-xxl: 11.5rem; + --pgn-size-avatar-xl: 6rem; + --pgn-size-avatar-lg: 4rem; + --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-max-width: 18.75rem; + --pgn-size-annotation-arrow-border-width: .5rem; + --pgn-size-alert-border-width: 0rem; + --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-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-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; + --pgn-color-action-default-danger-600: #871F28FF; + --pgn-color-action-default-danger-500: #9A232EFF; + --pgn-color-action-default-danger-400: #C73A46FF; + --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; + --pgn-color-action-default-warning-600: #B39800FF; + --pgn-color-action-default-warning-500: #CCAE00FF; + --pgn-color-action-default-warning-400: #FFDC0DFF; + --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; + --pgn-color-action-default-info-600: #004166FF; + --pgn-color-action-default-info-500: #004C77FF; + --pgn-color-action-default-info-400: #337599FF; + --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; + --pgn-color-action-default-success-600: #0D4A2FFF; + --pgn-color-action-default-success-500: #0F5737FF; + --pgn-color-action-default-success-400: #407F63FF; + --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; + --pgn-color-action-default-secondary-600: #252525FF; + --pgn-color-action-default-secondary-500: #2B2B2BFF; + --pgn-color-action-default-secondary-400: #5A5A5AFF; + --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; @@ -296,9 +779,45 @@ --pgn-color-light-200: #F8F7F6FF; --pgn-color-light-100: #FDFDFDFF; --pgn-color-danger-base: var(--pgn-color-red); + --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-base: var(--pgn-color-yellow); + --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-base: var(--pgn-color-teal); + --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-base: var(--pgn-color-green); + --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-brand-900: #6E003BFF; --pgn-color-brand-800: #76003FFF; --pgn-color-brand-700: #7E0043FF; @@ -309,6 +828,15 @@ --pgn-color-brand-200: #E7BFD4FF; --pgn-color-brand-100: #F9F0F5FF; --pgn-color-secondary-base: var(--pgn-color-gray-700); + --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-primary-900: #07223CFF; --pgn-color-primary-800: #082440FF; --pgn-color-primary-700: #082644FF; @@ -319,7 +847,45 @@ --pgn-color-primary-200: #C2CBD5FF; --pgn-color-primary-100: #F0F3F5FF; --pgn-color-gray-500: var(--pgn-color-gray-base); + --pgn-color-yiq-light: var(--pgn-color-white); + --pgn-color-blockquote-small: var(--pgn-color-gray-500); + --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-link-brand-inline-hover-decoration: var(--pgn-color-link-brand-inline-hover-base); + --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: var(--pgn-color-link-muted-inline-hover-base); + --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: var(--pgn-color-link-inline-hover-base); + --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); @@ -329,1316 +895,1339 @@ --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-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-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-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-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-bar-bar-bg-annotated: var(--pgn-color-dark-500); --pgn-color-progress-bar-bar-bg-base: var(--pgn-color-accent-a); --pgn-color-progress-bar-bar-base: var(--pgn-color-white); + --pgn-color-progress-bar-border: var(--pgn-color-gray-500); + --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-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-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-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-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-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-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-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-bg-base); + --pgn-color-icon-button-text-primary-inverse-active-hover: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-text-primary-inverse-active-base: var(--pgn-color-icon-button-bg-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-bg-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-bg-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-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-bg-base); + --pgn-color-icon-button-bg-primary-active-hover: var(--pgn-color-icon-button-bg-base); + --pgn-color-icon-button-bg-primary-active-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-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-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-feedback-checked-invalid: #D64D59FF; + --pgn-color-form-feedback-checked-valid: #1FAD6FFF; + --pgn-color-form-feedback-tooltip-box-shadow-focus-invalid: #C32D3A40; + --pgn-color-form-feedback-tooltip-box-shadow-focus-valid: #17825340; + --pgn-color-form-feedback-tooltip-bg-invalid: #C32D3AE6; + --pgn-color-form-feedback-tooltip-bg-valid: #178253E6; + --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-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-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-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-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-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-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-color-action-default-danger-900: #60161DFF; - --pgn-color-action-default-danger-800: #691820FF; - --pgn-color-action-default-danger-700: #731A22FF; - --pgn-color-action-default-danger-600: #871F28FF; - --pgn-color-action-default-danger-500: #9A232EFF; - --pgn-color-action-default-danger-400: #C73A46FF; - --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-900: #806D00FF; - --pgn-color-action-default-warning-800: #8C7700FF; - --pgn-color-action-default-warning-700: #998300FF; - --pgn-color-action-default-warning-600: #B39800FF; - --pgn-color-action-default-warning-500: #CCAE00FF; - --pgn-color-action-default-warning-400: #FFDC0DFF; - --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-900: #002B44FF; - --pgn-color-action-default-info-800: #00314DFF; - --pgn-color-action-default-info-700: #003655FF; - --pgn-color-action-default-info-600: #004166FF; - --pgn-color-action-default-info-500: #004C77FF; - --pgn-color-action-default-info-400: #337599FF; - --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-900: #08301EFF; - --pgn-color-action-default-success-800: #093723FF; - --pgn-color-action-default-success-700: #0A3D26FF; - --pgn-color-action-default-success-600: #0D4A2FFF; - --pgn-color-action-default-success-500: #0F5737FF; - --pgn-color-action-default-success-400: #407F63FF; - --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-secondary-900: #161616FF; - --pgn-color-action-default-secondary-800: #1A1A1AFF; - --pgn-color-action-default-secondary-700: #1E1E1EFF; - --pgn-color-action-default-secondary-600: #252525FF; - --pgn-color-action-default-secondary-500: #2B2B2BFF; - --pgn-color-action-default-secondary-400: #5A5A5AFF; - --pgn-color-action-default-secondary-300: #898989FF; - --pgn-color-action-default-secondary-200: #B8B8B8FF; - --pgn-color-action-default-secondary-100: #DBDBDBFF; - --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus); - --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-text-hover: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus); - --pgn-color-tab-more-link-dropdown-toggle-btn-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus); - --pgn-color-stepper-header-step-description-error: var(--pgn-color-stepper-header-step-bubble-error); - --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg); - --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-base: var(--pgn-color-popover-bg); - --pgn-color-pagination-bg-active: var(--pgn-color-bg-active); - --pgn-color-pagination-text-disabled: var(--pgn-color-disabled); - --pgn-color-page-banner-bg-warning: var(--pgn-color-warning-100); - --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-nav-pills-inverse-link-bg-active-hover: var(--pgn-color-nav-pills-inverse-link-border-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-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base); - --pgn-color-nav-pills-inverse-link-text-active-focus: var(--pgn-color-nav-pills-inverse-link-text-active); - --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border-base); - --pgn-color-nav-pills-base-link-active-bg: var(--pgn-color-bg-active); - --pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom); - --pgn-color-menu-item-focus-bg: var(--pgn-color-btn-active-bg-tertiary); - --pgn-color-menu-item-hover-bg: var(--pgn-color-btn-hover-bg-tertiary); - --pgn-color-image-thumbnail-bg: var(--pgn-color-body-bg); - --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-focus: var(--pgn-color-icon-button-text-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-focus: var(--pgn-color-icon-button-text-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-focus: var(--pgn-color-icon-button-text-success-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-focus: var(--pgn-color-icon-button-text-secondary-base); - --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-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-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-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-form-feedback-checked-invalid: #D64D59FF; - --pgn-color-form-feedback-checked-valid: #1FAD6FFF; - --pgn-color-form-feedback-tooltip-box-shadow-focus-invalid: #C32D3A40; - --pgn-color-form-feedback-tooltip-box-shadow-focus-valid: #17825340; - --pgn-color-form-feedback-tooltip-bg-invalid: #C32D3AE6; - --pgn-color-form-feedback-tooltip-bg-valid: #178253E6; - --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-control-file-border-base: var(--pgn-color-form-input-border); - --pgn-color-form-control-file-button-base: var(--pgn-color-form-control-file-base); - --pgn-color-form-control-file-bg-base: var(--pgn-color-form-input-bg-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-select-border-base: var(--pgn-color-form-input-border); - --pgn-color-form-control-select-bg-base: var(--pgn-color-form-input-bg-base); - --pgn-color-form-control-select-disabled: var(--pgn-color-disabled); - --pgn-color-form-control-checkbox-indicator-indeterminate-bg: var(--pgn-color-bg-active); - --pgn-color-form-control-label-floating-text: #FFFFFF1A; - --pgn-color-form-control-label-disabled: var(--pgn-color-disabled); - --pgn-color-form-control-indicator-active-bg: var(--pgn-color-bg-active); - --pgn-color-form-control-indicator-checked-bg-base: var(--pgn-color-bg-active); - --pgn-color-form-control-indicator-checked-base: var(--pgn-color-bg-active); - --pgn-color-form-control-indicator-bg-base: var(--pgn-color-form-input-bg-base); - --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-group-addon-border: var(--pgn-color-form-input-border); - --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-chip-outline-light: var(--pgn-color-chip-label-base); - --pgn-color-card-border-focus-dark: var(--pgn-color-theme-focus-primary); - --pgn-color-btn-disabled-link: var(--pgn-color-disabled); - --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning); - --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success); + --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-outline-primary: var(--pgn-color-btn-hover-text-outline-primary); --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-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-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-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-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-warning: var(--pgn-color-btn-bg-warning); --pgn-color-btn-disabled-bg-success: var(--pgn-color-btn-bg-success); --pgn-color-btn-disabled-bg-secondary: var(--pgn-color-btn-bg-secondary); + --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-light: var(--pgn-color-btn-bg-light); --pgn-color-btn-disabled-bg-info: var(--pgn-color-btn-bg-info); + --pgn-color-btn-disabled-bg-dark: var(--pgn-color-btn-bg-dark); --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-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-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-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-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-warning: var(--pgn-color-btn-bg-inverse-warning); --pgn-color-btn-focus-bg-warning: var(--pgn-color-btn-bg-warning); + --pgn-color-btn-focus-bg-inverse-success: var(--pgn-color-btn-bg-inverse-success); --pgn-color-btn-focus-bg-success: var(--pgn-color-btn-bg-success); + --pgn-color-btn-focus-bg-inverse-secondary: var(--pgn-color-btn-bg-inverse-secondary); --pgn-color-btn-focus-bg-secondary: var(--pgn-color-btn-bg-secondary); --pgn-color-btn-focus-bg-inverse-primary: var(--pgn-color-btn-bg-inverse-primary); + --pgn-color-btn-focus-bg-primary: var(--pgn-color-btn-bg-primary); --pgn-color-btn-focus-bg-inverse-light: var(--pgn-color-btn-bg-inverse-light); + --pgn-color-btn-focus-bg-light: var(--pgn-color-btn-bg-light); + --pgn-color-btn-focus-bg-inverse-info: var(--pgn-color-btn-bg-inverse-info); --pgn-color-btn-focus-bg-info: var(--pgn-color-btn-bg-info); --pgn-color-btn-focus-bg-inverse-dark: var(--pgn-color-btn-bg-inverse-dark); + --pgn-color-btn-focus-bg-dark: var(--pgn-color-btn-bg-dark); + --pgn-color-btn-focus-bg-inverse-danger: var(--pgn-color-btn-bg-inverse-danger); --pgn-color-btn-focus-bg-danger: var(--pgn-color-btn-bg-danger); --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-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-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-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-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-primary: var(--pgn-color-theme-active-primary); --pgn-color-btn-active-border-primary: var(--pgn-color-theme-active-primary); --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-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-dark: var(--pgn-color-theme-active-dark); --pgn-color-btn-active-border-dark: var(--pgn-color-theme-active-dark); + --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-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-outline-warning: var(--pgn-color-warning-900); + --pgn-color-btn-hover-border-warning: var(--pgn-color-theme-hover-warning); --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-outline-secondary: var(--pgn-color-secondary-900); + --pgn-color-btn-hover-border-secondary: var(--pgn-color-theme-hover-secondary); + --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-outline-light: var(--pgn-color-light-900); --pgn-color-btn-hover-border-light: var(--pgn-color-theme-hover-light); --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-outline-dark: var(--pgn-color-dark-900); --pgn-color-btn-hover-border-dark: var(--pgn-color-theme-hover-dark); --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-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-outline-warning: var(--pgn-color-warning-base); --pgn-color-btn-border-warning: var(--pgn-color-btn-bg-warning); + --pgn-color-btn-border-inverse-outline-success: var(--pgn-color-white); + --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-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-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-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-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-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-outline-danger: var(--pgn-color-danger-base); --pgn-color-btn-border-danger: var(--pgn-color-btn-bg-danger); + --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-warning: #454545FF; + --pgn-color-btn-bg-warning: var(--pgn-color-warning-base); --pgn-color-btn-bg-inverse-success: #FFFFFFFF; + --pgn-color-btn-bg-success: var(--pgn-color-success-base); --pgn-color-btn-bg-inverse-secondary: #FFFFFFFF; + --pgn-color-btn-bg-secondary: var(--pgn-color-secondary-base); + --pgn-color-btn-bg-inverse-primary: #FFFFFFFF; + --pgn-color-btn-bg-primary: var(--pgn-color-primary-base); + --pgn-color-btn-bg-inverse-light: #454545FF; + --pgn-color-btn-bg-light: var(--pgn-color-light-base); --pgn-color-btn-bg-inverse-info: #FFFFFFFF; + --pgn-color-btn-bg-info: var(--pgn-color-info-base); + --pgn-color-btn-bg-inverse-dark: #FFFFFFFF; + --pgn-color-btn-bg-dark: var(--pgn-color-dark-base); --pgn-color-btn-bg-inverse-danger: #FFFFFFFF; + --pgn-color-btn-bg-danger: var(--pgn-color-danger-base); + --pgn-color-btn-bg-inverse-brand: #FFFFFFFF; + --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-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); + --pgn-color-alert-border-success: var(--pgn-color-theme-border-success); + --pgn-color-alert-bg-warning: var(--pgn-color-theme-bg-warning); + --pgn-color-alert-bg-danger: var(--pgn-color-theme-bg-danger); + --pgn-color-alert-bg-info: var(--pgn-color-theme-bg-info); + --pgn-color-alert-bg-success: var(--pgn-color-theme-bg-success); + --pgn-color-alert-icon-warning: var(--pgn-color-theme-default-warning); + --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); + --pgn-color-theme-active-dark: var(--pgn-color-dark-900); + --pgn-color-theme-active-light: var(--pgn-color-light-900); --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-brand: var(--pgn-color-brand-900); --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900); + --pgn-color-theme-active-primary: var(--pgn-color-primary-900); + --pgn-color-theme-hover-gray: var(--pgn-color-gray-700); + --pgn-color-theme-hover-dark: var(--pgn-color-dark-700); + --pgn-color-theme-hover-light: var(--pgn-color-light-700); --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-brand: var(--pgn-color-brand-700); --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-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-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-brand: var(--pgn-color-brand-500); --pgn-color-theme-default-secondary: var(--pgn-color-secondary-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-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-brand: var(--pgn-color-brand-500); --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500); + --pgn-color-theme-focus-primary: var(--pgn-color-primary-500); + --pgn-color-theme-border-gray: var(--pgn-color-gray-200); + --pgn-color-theme-border-dark: var(--pgn-color-dark-200); + --pgn-color-theme-border-light: var(--pgn-color-light-200); --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-brand: var(--pgn-color-brand-200); --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200); + --pgn-color-theme-border-primary: var(--pgn-color-primary-200); + --pgn-color-theme-bg-gray: var(--pgn-color-gray-100); + --pgn-color-theme-bg-dark: var(--pgn-color-dark-100); + --pgn-color-theme-bg-light: var(--pgn-color-light-100); --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-brand: var(--pgn-color-brand-100); --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); + --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); + --pgn-color-border: var(--pgn-color-gray-200); + --pgn-color-table-border: var(--pgn-color-border); --pgn-color-table-caption: var(--pgn-color-text-muted); --pgn-color-input-btn-focus: var(--pgn-color-bg-active); + --pgn-color-input-focus: var(--pgn-color-primary-500); + --pgn-color-disabled: var(--pgn-color-gray-500); + --pgn-color-active: var(--pgn-color-white); + --pgn-color-text-50-white: #FFFFFF80; + --pgn-color-text-50-black: #00000080; + --pgn-color-bg-active: var(--pgn-color-primary-500); + --pgn-color-bg-base: var(--pgn-color-white); + --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-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-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-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); + --pgn-elevation-scrollable-body-box-shadow: #0000008C; + --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow); + --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-bg-base); + --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow); --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus); + --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base); --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-form-control-indicator-base: var(--pgn-elevation-form-input-base); + --pgn-elevation-form-input-focus: 0 0 0 1px var(--pgn-color-primary-500); --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300); + --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500); --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-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); - --pgn-color-alert-border-success: var(--pgn-color-theme-border-success); - --pgn-color-alert-bg-warning: var(--pgn-color-theme-bg-warning); - --pgn-color-alert-bg-danger: var(--pgn-color-theme-bg-danger); - --pgn-color-alert-bg-info: var(--pgn-color-theme-bg-info); - --pgn-color-alert-bg-success: var(--pgn-color-theme-bg-success); - --pgn-color-alert-icon-warning: var(--pgn-color-theme-default-warning); - --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-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-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-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-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-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-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-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-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-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-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-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-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-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); + --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-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-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); + --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-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-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-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-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-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-alert-actions-gap: var(--pgn-spacing-spacer-3); + --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-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-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-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-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-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-menu-item-border-width: var(--pgn-size-btn-border-width); + --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-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-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-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-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-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-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-card-image-border-radius: var(--pgn-size-card-border-radius-base); + --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-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); + --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-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-badge-focus-width: var(--pgn-size-input-btn-focus-width); + --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); } diff --git a/tokens/css-utilities.js b/tokens/css-utilities.js index ee9f3ba891..761df148dc 100644 --- a/tokens/css-utilities.js +++ b/tokens/css-utilities.js @@ -49,7 +49,7 @@ function borderColor(token) { `; } -module.exports = { +export default { bgVariant, textEmphasisVariant, borderColor, diff --git a/tokens/map-scss-to-css.js b/tokens/map-scss-to-css.js index ebe6db6e33..7b4aec04df 100644 --- a/tokens/map-scss-to-css.js +++ b/tokens/map-scss-to-css.js @@ -1,8 +1,12 @@ -const fs = require('fs'); -const path = require('path'); -const { getSCSStoCSSMap, getFilesWithExtension } = require('./utils'); +import fs from 'fs'; +import path from 'path'; +import { fileURLToPath } from 'url'; +import { getSCSStoCSSMap, getFilesWithExtension } from './utils.js'; -const BASE_PATH = path.resolve(__dirname, './src'); +const filename = fileURLToPath(import.meta.url); +const dirname = path.dirname(filename); + +const BASE_PATH = path.resolve(dirname, './src'); const TOKEN_PREFIX = '--pgn'; function mapSCSStoCSS(sourcePath) { @@ -21,4 +25,4 @@ function mapSCSStoCSS(sourcePath) { return SCSStoCSSMap; } -module.exports = mapSCSStoCSS; +export default mapSCSStoCSS; \ No newline at end of file diff --git a/tokens/sass-helpers.js b/tokens/sass-helpers.js index 466f67e67b..e7b5031f52 100644 --- a/tokens/sass-helpers.js +++ b/tokens/sass-helpers.js @@ -1,7 +1,11 @@ -const path = require('path'); -const fs = require('fs'); -const chroma = require('chroma-js'); -const chalk = require('chalk'); +import path from 'path'; +import fs from 'fs'; +import chroma from 'chroma-js'; +import chalk from 'chalk'; +import { fileURLToPath } from 'url'; + +const filename = fileURLToPath(import.meta.url); +const dirname = path.dirname(filename); /** * Javascript version of bootstrap's color-yiq function. Decides whether to return light color variant or dark one @@ -25,10 +29,10 @@ function colorYiq({ threshold, themeVariant = 'light', }) { - const defaultThresholdFile = fs.readFileSync(path.resolve(__dirname, 'src/core/global', 'other.json'), 'utf8'); + const defaultThresholdFile = fs.readFileSync(path.resolve(dirname, 'src/core/global', 'other.json'), 'utf8'); const defaultThreshold = JSON.parse(defaultThresholdFile)['yiq-contrasted-threshold']; - const defaultColorsFile = fs.readFileSync(path.resolve(__dirname, `src/themes/${themeVariant}/global`, 'other.json'), 'utf8'); + const defaultColorsFile = fs.readFileSync(path.resolve(dirname, `src/themes/${themeVariant}/global`, 'other.json'), 'utf8'); const { 'yiq-text-dark': defaultDark, 'yiq-text-light': defaultLight, @@ -91,7 +95,7 @@ function colorYiq({ const lighten = (color, hslPercent) => color.set('hsl.l', color.get('hsl.l') + hslPercent); const darken = (color, hslPercent) => lighten(color, -hslPercent); -module.exports = { +export { colorYiq, darken, lighten, diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json index c477d6541c..93f507feec 100644 --- a/tokens/src/themes/light/components/Form/color.json +++ b/tokens/src/themes/light/components/Form/color.json @@ -137,7 +137,7 @@ "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" } + "size": { "value": "{color.gray.100}", "type": "dimension", "source": "$custom-select-bg-size" } }, "border": { "base": { diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json index 692a6b1b70..e3c1763374 100644 --- a/tokens/src/themes/light/components/IconButton.json +++ b/tokens/src/themes/light/components/IconButton.json @@ -5,7 +5,7 @@ "base": { "value": "transparent", "type": "color", "source": "$btn-icon-bg" }, "primary": { "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" }, + "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, "inverse": { "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, @@ -13,9 +13,9 @@ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } }, "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.bg.base}", "type": "color" }, + "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } }, "inverse-active": { "base": { "value": "{color.icon-button.accent}", "type": "color" }, @@ -188,10 +188,10 @@ "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" }, + "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, "inverse": { "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" }, + "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, "focus": { "value": "{color.icon-button.accent}", "type": "color" } }, "active": { @@ -200,9 +200,9 @@ "focus": { "value": "{color.icon-button.accent}", "type": "color" } }, "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.bg.base}", "type": "color" }, + "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } } }, "secondary": { @@ -375,7 +375,7 @@ "box-shadow": { "primary": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.primary.base}", "type": "shadow" + "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.bg.base}", "type": "shadow" }, "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, "active": { "value": "none", "type": "shadow" }, diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index 5193d87475..fe686c48ef 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -1,28 +1,29 @@ /** * This module creates and exports custom StyleDictionary instance for Paragon. */ -const toml = require('js-toml'); -const StyleDictionary = require('style-dictionary'); -const chroma = require('chroma-js'); -const { colorYiq, darken, lighten } = require('./sass-helpers'); -const cssUtilities = require('./css-utilities'); -const { composeBreakpointName } = require('./utils'); - -const { fileHeader, sortByReference } = StyleDictionary.formatHelpers; +import * as toml from 'js-toml'; +import StyleDictionary from 'style-dictionary'; +import chroma from 'chroma-js'; +import { fileHeader, sortByReference, usesReferences, getReferences } from 'style-dictionary/utils'; +import { colorYiq, darken, lighten } from './sass-helpers.js'; +import cssUtilities from './css-utilities.js'; +import { composeBreakpointName } from './utils.js'; const colorTransform = (token, theme) => { + // console.log('style-dictionary.js - colorTransform =======>', token); + const { name: tokenName, value, original, 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; } - + console.log('value =======>', value); let color = chroma(value); if (modify && modify.length > 0) { @@ -70,18 +71,19 @@ const createCustomCSSVariables = ({ themeVariant, }) => { const { dictionary, options, file } = formatterArgs; - + // console.log('style-dictionary.js - createCustomCSSVariables =======>', dictionary, options, file); const outputTokens = themeVariant ? dictionary.allTokens.filter(token => token.filePath.includes(themeVariant)) : dictionary.allTokens; const variables = outputTokens.sort(sortByReference(dictionary)).map(token => { let { value } = token; - + // console.log('style-dictionary.js - token =======>', token); const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences; - - if (dictionary.usesReference(token.original.value) && outputReferencesForToken) { - const refs = dictionary.getReferences(token.original.value); + if (usesReferences(token.original.value) && outputReferencesForToken) { + // console.log('style-dictionary.js - refs =======>', token.original.value); + // console.log('style-dictionary.js - dictionary =======>', dictionary); + const refs = getReferences(token.original.value, dictionary.tokens); refs.forEach(ref => { value = value.replace(ref.value, `var(--${ref.name})`); }); @@ -100,10 +102,12 @@ StyleDictionary.registerTransform({ name: 'color/sass-color-functions', transitive: true, type: 'value', - matcher(token) { - return token.attributes.category === 'color' || token.value?.toString().startsWith('#'); + filter: (token) => token.attributes.category === 'color' || token.value?.toString().startsWith('#'), + transform: (token) => { + // console.log('style-dictionary.js - color/sass-color-functions =======>', token); + return colorTransform(token); }, - transformer: colorTransform, + // transformer: colorTransform, }); /** @@ -113,14 +117,19 @@ StyleDictionary.registerTransform({ name: 'str-replace', transitive: true, type: 'value', - matcher(token) { - return token.modify && token.modify[0].type === 'str-replace'; - }, - transformer(token) { + filter: (token) => token.modify && token.modify[0].type === 'str-replace', + transform: (token) => { + console.log('style-dictionary.js - str-replace =======>', token); const { value, modify } = token; const { toReplace, replaceWith } = modify[0]; return value.replaceAll(toReplace, replaceWith); }, + // transformer(token) { + // console.log('style-dictionary.js - str-replace =======>', token); + // const { value, modify } = token; + // const { toReplace, replaceWith } = modify[0]; + // return value.replaceAll(toReplace, replaceWith); + // }, }); /** @@ -128,7 +137,7 @@ StyleDictionary.registerTransform({ */ StyleDictionary.registerFormat({ name: 'css/custom-variables', - formatter: formatterArgs => createCustomCSSVariables({ formatterArgs }), + format: formatterArgs => createCustomCSSVariables({ formatterArgs }), }); /** @@ -138,64 +147,65 @@ StyleDictionary.registerFormat({ * 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; - - if (!utilities) { - return ''; - } - - let utilityClasses = ''; - - utilities.forEach(({ filters, utilityFunctionsToApply }) => { - let tokens = dictionary.allTokens; - - 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 = 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); - } - } - }); - - return fileHeader({ file }) + utilityClasses; - }, -}); +// StyleDictionary.registerFormat({ +// name: 'css/utility-classes', +// format: ({ dictionary, file }) => { +// const { utilities } = dictionary.properties; + +// if (!utilities) { +// return ''; +// } + +// let utilityClasses = ''; + +// utilities.forEach(({ filters, utilityFunctionsToApply }) => { +// let tokens = dictionary.allTokens; + +// 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 = 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); +// } +// } +// }); + +// return fileHeader({ file }) + utilityClasses; +// }, +// }); /** * 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`; - } - } - - return fileHeader({ file }) + customMediaVariables; - }, -}); +// StyleDictionary.registerFormat({ +// name: 'css/custom-media-breakpoints', +// format: ({ dictionary, file }) => { +// console.log('style-dictionary.js - css/custom-media-breakpoints =======>', dictionary); +// const { breakpoint } = dictionary.properties.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`; +// } +// } + +// return fileHeader({ file }) + customMediaVariables; +// }, +// }); /** * Custom file header for custom and built-in formatters. @@ -214,15 +224,19 @@ StyleDictionary.registerFileHeader({ */ StyleDictionary.registerFilter({ name: 'isSource', - matcher: token => token?.isSource === true, + filter: token => { + // console.log('style-dictionary.js - isSource =======>', token); + return token?.isSource === true; + }, }); StyleDictionary.registerParser({ + name: 'toml-parser', pattern: /\.toml$/, - parse: ({ contents }) => toml.load(contents), + parser: ({ contents }) => toml.load(contents), }); -module.exports = { +export { StyleDictionary, createCustomCSSVariables, colorTransform, diff --git a/tokens/utils.js b/tokens/utils.js index 83ff09c7dc..36f77cdabc 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -1,6 +1,6 @@ -const fs = require('fs'); -const readline = require('readline'); -const path = require('path'); +import fs from 'fs'; +import readline from 'readline'; +import path from 'path'; function getFilesWithExtension(location, extension, files = [], excludeDirectories = []) { const content = fs.statSync(location); @@ -201,7 +201,7 @@ function composeBreakpointName(breakpointName, format) { return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`; } -module.exports = { +export { createIndexCssFile, getFilesWithExtension, getSCSStoCSSMap, From 22041ec3f2e5e4de53f025f798141984ba6686b1 Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Tue, 20 Aug 2024 20:34:23 +0300 Subject: [PATCH 02/16] feat: converted utils and breakpoints --- lib/build-tokens.js | 49 +- styles/css/core/custom-media-breakpoints.css | 11 + styles/css/core/variables.css | 2 +- styles/css/themes/light/utility-classes.css | 2842 +++++++++--------- styles/css/themes/light/variables.css | 2 +- tokens/map-scss-to-css.js | 2 +- tokens/style-dictionary.js | 150 +- 7 files changed, 1521 insertions(+), 1537 deletions(-) diff --git a/lib/build-tokens.js b/lib/build-tokens.js index 2dde92954c..e3f90a263e 100755 --- a/lib/build-tokens.js +++ b/lib/build-tokens.js @@ -33,9 +33,7 @@ async function buildTokensCommand(commandArgs) { 'source-tokens-only': hasSourceTokensOnly, themes, } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' }); - // console.log('build-tokens.js - dirname =======>', dirname); - // console.log('build-tokens.js - StyleDictionary =======>', StyleDictionary); - // console.log('build-tokens.js - StyleDictionary =======>', StyleDictionary.hooks); + const coreConfig = { include: [ path.resolve(dirname, '../tokens/src/core/**/*.json'), @@ -59,26 +57,23 @@ async function buildTokensCommand(commandArgs) { outputReferences: !hasSourceTokensOnly, }, }, - // { - // format: 'css/custom-media-breakpoints', - // destination: 'core/custom-media-breakpoints.css', - // filter: hasSourceTokensOnly ? 'isSource' : undefined, - // options: { - // outputReferences: !hasSourceTokensOnly, - // }, - // }, + { + format: 'css/custom-media-breakpoints', + destination: 'core/custom-media-breakpoints.css', + filter: hasSourceTokensOnly ? 'isSource' : undefined, + options: { + outputReferences: !hasSourceTokensOnly, + }, + }, ], - transforms: StyleDictionary.hooks.transformGroups.css.filter(item => { - // console.log('build-tokens.js - item =======>', item); - return item !== 'size/rem'; - }).concat('color/sass-color-functions', 'str-replace'), + transforms: StyleDictionary.hooks.transformGroups.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'), options: { fileHeader: 'customFileHeader', }, }, }, }; - // console.log('build-tokens.js - coreConfig =======>', coreConfig); + const getStyleDictionaryConfig = (themeVariant) => ({ ...coreConfig, include: [ @@ -95,10 +90,7 @@ async function buildTokensCommand(commandArgs) { transform: { 'color/sass-color-functions': { ...StyleDictionary.hooks.transforms['color/sass-color-functions'], - transform: (token) => { - // console.log('build-tokens.js - color/sass-color-functions =======>', token); - return colorTransform(token, themeVariant); - }, + transform: (token) => colorTransform(token, themeVariant), }, }, format: { @@ -119,14 +111,14 @@ async function buildTokensCommand(commandArgs) { outputReferences: !hasSourceTokensOnly, }, }, - // { - // format: 'css/utility-classes', - // destination: `themes/${themeVariant}/utility-classes.css`, - // filter: hasSourceTokensOnly ? 'isSource' : undefined, - // options: { - // outputReferences: !hasSourceTokensOnly, - // }, - // }, + { + format: 'css/utility-classes', + destination: `themes/${themeVariant}/utility-classes.css`, + filter: hasSourceTokensOnly ? 'isSource' : undefined, + options: { + outputReferences: !hasSourceTokensOnly, + }, + }, ], }, }, @@ -137,7 +129,6 @@ async function buildTokensCommand(commandArgs) { themes.forEach(async (themeVariant) => { const config = getStyleDictionaryConfig(themeVariant); - // console.log('build-tokens.js - config =======>', config); new StyleDictionary(config).buildAllPlatforms(); createIndexCssFile({ buildDir, isTheme: true, themeVariant }); }); diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css index e69de29bb2..c62b3261e1 100644 --- a/styles/css/core/custom-media-breakpoints.css +++ b/styles/css/core/custom-media-breakpoints.css @@ -0,0 +1,11 @@ +[object Promise]@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem); +@custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px); +@custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px); +@custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px); +@custom-media --pgn-size-breakpoint-min-width-md (min-width: 768px); +@custom-media --pgn-size-breakpoint-max-width-md (max-width: 992px); +@custom-media --pgn-size-breakpoint-min-width-lg (min-width: 992px); +@custom-media --pgn-size-breakpoint-max-width-lg (max-width: 1200px); +@custom-media --pgn-size-breakpoint-min-width-xl (min-width: 1200px); +@custom-media --pgn-size-breakpoint-max-width-xl (max-width: 1400px); +@custom-media --pgn-size-breakpoint-min-width-xxl (min-width: 1400px); diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 45ac41f1a2..ac7307dc4e 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,4 +1,4 @@ -:root { +[object Promise]:root { --pgn-theme-interval: 8%; --pgn-other-form-control-custom-file-content: Browse; --pgn-other-form-control-custom-file-lang: en; diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css index 0a2d0ee53c..7bfd508eee 100644 --- a/styles/css/themes/light/utility-classes.css +++ b/styles/css/themes/light/utility-classes.css @@ -1,175 +1,193 @@ -/** - * IMPORTANT: This file is the result of assembling design tokens - * Do not edit directly - * Generated on Fri, 22 Sep 2023 08:20:17 GMT - */ +/*, * IMPORTANT: This file is the result of assembling design tokens., * Do not edit directly., */,.bg-dark { + background-color: var(--pgn-color-dark-base) !important; +} -.bg-accent-a { - background-color: var(--pgn-color-accent-a) !important; +a.bg-dark:hover, +a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { + background-color: var(--pgn-color-action-default-dark-base) !important; } -a.bg-accent-a:hover, -a.bg-accent-a:focus, -button.bg-accent-a:hover, -button.bg-accent-a:focus { - background-color: var(--pgn-color-action-default-accent-a) !important; +.text-dark { + color: var(--pgn-color-dark-base) !important; } -.text-accent-a { - color: var(--pgn-color-accent-a) !important; +a.text-dark:hover, +a.text-dark:focus { + color: var(--pgn-color-action-default-dark-base) !important; } -a.text-accent-a:hover, -a.text-accent-a:focus { - color: var(--pgn-color-action-default-accent-a) !important; +.border-dark { + border-color: var(--pgn-color-dark-base) !important; } -.border-accent-a { - border-color: var(--pgn-color-accent-a) !important; +.bg-light { + background-color: var(--pgn-color-light-base) !important; } -.bg-accent-b { - background-color: var(--pgn-color-accent-b) !important; +a.bg-light:hover, +a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { + background-color: var(--pgn-color-action-default-light-base) !important; } -a.bg-accent-b:hover, -a.bg-accent-b:focus, -button.bg-accent-b:hover, -button.bg-accent-b:focus { - background-color: var(--pgn-color-action-default-accent-b) !important; +.text-light { + color: var(--pgn-color-light-base) !important; } -.text-accent-b { - color: var(--pgn-color-accent-b) !important; +a.text-light:hover, +a.text-light:focus { + color: var(--pgn-color-action-default-light-base) !important; } -a.text-accent-b:hover, -a.text-accent-b:focus { - color: var(--pgn-color-action-default-accent-b) !important; +.border-light { + border-color: var(--pgn-color-light-base) !important; } -.border-accent-b { - border-color: var(--pgn-color-accent-b) !important; +.bg-brand { + background-color: var(--pgn-color-brand-base) !important; } -.bg-gray-100 { - background-color: var(--pgn-color-gray-100) !important; +a.bg-brand:hover, +a.bg-brand:focus, +button.bg-brand:hover, +button.bg-brand:focus { + background-color: var(--pgn-color-action-default-brand-base) !important; } -a.bg-gray-100:hover, -a.bg-gray-100:focus, -button.bg-gray-100:hover, -button.bg-gray-100:focus { - background-color: var(--pgn-color-action-default-gray-100) !important; +.text-brand { + color: var(--pgn-color-brand-base) !important; } -.text-gray-100 { - color: var(--pgn-color-gray-100) !important; +a.text-brand:hover, +a.text-brand:focus { + color: var(--pgn-color-action-default-brand-base) !important; } -a.text-gray-100:hover, -a.text-gray-100:focus { - color: var(--pgn-color-action-default-gray-100) !important; +.border-brand { + border-color: var(--pgn-color-brand-base) !important; } -.border-gray-100 { - border-color: var(--pgn-color-gray-100) !important; +.bg-primary { + background-color: var(--pgn-color-primary-base) !important; } -.bg-gray-200 { - background-color: var(--pgn-color-gray-200) !important; +a.bg-primary:hover, +a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: var(--pgn-color-action-default-primary-base) !important; } -a.bg-gray-200:hover, -a.bg-gray-200:focus, -button.bg-gray-200:hover, -button.bg-gray-200:focus { - background-color: var(--pgn-color-action-default-gray-200) !important; +.text-primary { + color: var(--pgn-color-primary-base) !important; } -.text-gray-200 { - color: var(--pgn-color-gray-200) !important; +a.text-primary:hover, +a.text-primary:focus { + color: var(--pgn-color-action-default-primary-base) !important; } -a.text-gray-200:hover, -a.text-gray-200:focus { - color: var(--pgn-color-action-default-gray-200) !important; +.border-primary { + border-color: var(--pgn-color-primary-base) !important; } -.border-gray-200 { - border-color: var(--pgn-color-gray-200) !important; +.bg-gray { + background-color: var(--pgn-color-gray-base) !important; } -.bg-gray-300 { - background-color: var(--pgn-color-gray-300) !important; +a.bg-gray:hover, +a.bg-gray:focus, +button.bg-gray:hover, +button.bg-gray:focus { + background-color: var(--pgn-color-action-default-gray-base) !important; } -a.bg-gray-300:hover, -a.bg-gray-300:focus, -button.bg-gray-300:hover, -button.bg-gray-300:focus { - background-color: var(--pgn-color-action-default-gray-300) !important; +.text-gray { + color: var(--pgn-color-gray-base) !important; } -.text-gray-300 { - color: var(--pgn-color-gray-300) !important; +a.text-gray:hover, +a.text-gray:focus { + color: var(--pgn-color-action-default-gray-base) !important; } -a.text-gray-300:hover, -a.text-gray-300:focus { - color: var(--pgn-color-action-default-gray-300) !important; +.border-gray { + border-color: var(--pgn-color-gray-base) !important; } -.border-gray-300 { - border-color: var(--pgn-color-gray-300) !important; +.bg-gray-900 { + background-color: var(--pgn-color-gray-900) !important; } -.bg-gray-400 { - background-color: var(--pgn-color-gray-400) !important; +a.bg-gray-900:hover, +a.bg-gray-900:focus, +button.bg-gray-900:hover, +button.bg-gray-900:focus { + background-color: var(--pgn-color-action-default-gray-900) !important; } -a.bg-gray-400:hover, -a.bg-gray-400:focus, -button.bg-gray-400:hover, -button.bg-gray-400:focus { - background-color: var(--pgn-color-action-default-gray-400) !important; +.text-gray-900 { + color: var(--pgn-color-gray-900) !important; } -.text-gray-400 { - color: var(--pgn-color-gray-400) !important; +a.text-gray-900:hover, +a.text-gray-900:focus { + color: var(--pgn-color-action-default-gray-900) !important; } -a.text-gray-400:hover, -a.text-gray-400:focus { - color: var(--pgn-color-action-default-gray-400) !important; +.border-gray-900 { + border-color: var(--pgn-color-gray-900) !important; } -.border-gray-400 { - border-color: var(--pgn-color-gray-400) !important; +.bg-gray-800 { + background-color: var(--pgn-color-gray-800) !important; } -.bg-gray-500 { - background-color: var(--pgn-color-gray-500) !important; +a.bg-gray-800:hover, +a.bg-gray-800:focus, +button.bg-gray-800:hover, +button.bg-gray-800:focus { + background-color: var(--pgn-color-action-default-gray-800) !important; } -a.bg-gray-500:hover, -a.bg-gray-500:focus, -button.bg-gray-500:hover, -button.bg-gray-500:focus { - background-color: var(--pgn-color-action-default-gray-500) !important; +.text-gray-800 { + color: var(--pgn-color-gray-800) !important; } -.text-gray-500 { - color: var(--pgn-color-gray-500) !important; +a.text-gray-800:hover, +a.text-gray-800:focus { + color: var(--pgn-color-action-default-gray-800) !important; } -a.text-gray-500:hover, -a.text-gray-500:focus { - color: var(--pgn-color-action-default-gray-500) !important; +.border-gray-800 { + border-color: var(--pgn-color-gray-800) !important; } -.border-gray-500 { - border-color: var(--pgn-color-gray-500) !important; +.bg-gray-700 { + background-color: var(--pgn-color-gray-700) !important; +} + +a.bg-gray-700:hover, +a.bg-gray-700:focus, +button.bg-gray-700:hover, +button.bg-gray-700:focus { + background-color: var(--pgn-color-action-default-gray-700) !important; +} + +.text-gray-700 { + color: var(--pgn-color-gray-700) !important; +} + +a.text-gray-700:hover, +a.text-gray-700:focus { + color: var(--pgn-color-action-default-gray-700) !important; +} + +.border-gray-700 { + border-color: var(--pgn-color-gray-700) !important; } .bg-gray-600 { @@ -196,1180 +214,1156 @@ a.text-gray-600:focus { border-color: var(--pgn-color-gray-600) !important; } -.bg-gray-700 { - background-color: var(--pgn-color-gray-700) !important; +.bg-gray-400 { + background-color: var(--pgn-color-gray-400) !important; } -a.bg-gray-700:hover, -a.bg-gray-700:focus, -button.bg-gray-700:hover, -button.bg-gray-700:focus { - background-color: var(--pgn-color-action-default-gray-700) !important; +a.bg-gray-400:hover, +a.bg-gray-400:focus, +button.bg-gray-400:hover, +button.bg-gray-400:focus { + background-color: var(--pgn-color-action-default-gray-400) !important; } -.text-gray-700 { - color: var(--pgn-color-gray-700) !important; +.text-gray-400 { + color: var(--pgn-color-gray-400) !important; } -a.text-gray-700:hover, -a.text-gray-700:focus { - color: var(--pgn-color-action-default-gray-700) !important; +a.text-gray-400:hover, +a.text-gray-400:focus { + color: var(--pgn-color-action-default-gray-400) !important; } -.border-gray-700 { - border-color: var(--pgn-color-gray-700) !important; +.border-gray-400 { + border-color: var(--pgn-color-gray-400) !important; } -.bg-gray-800 { - background-color: var(--pgn-color-gray-800) !important; +.bg-gray-300 { + background-color: var(--pgn-color-gray-300) !important; } -a.bg-gray-800:hover, -a.bg-gray-800:focus, -button.bg-gray-800:hover, -button.bg-gray-800:focus { - background-color: var(--pgn-color-action-default-gray-800) !important; -} - -.text-gray-800 { - color: var(--pgn-color-gray-800) !important; -} - -a.text-gray-800:hover, -a.text-gray-800:focus { - color: var(--pgn-color-action-default-gray-800) !important; -} - -.border-gray-800 { - border-color: var(--pgn-color-gray-800) !important; -} - -.bg-gray-900 { - background-color: var(--pgn-color-gray-900) !important; -} - -a.bg-gray-900:hover, -a.bg-gray-900:focus, -button.bg-gray-900:hover, -button.bg-gray-900:focus { - background-color: var(--pgn-color-action-default-gray-900) !important; -} - -.text-gray-900 { - color: var(--pgn-color-gray-900) !important; -} - -a.text-gray-900:hover, -a.text-gray-900:focus { - color: var(--pgn-color-action-default-gray-900) !important; +a.bg-gray-300:hover, +a.bg-gray-300:focus, +button.bg-gray-300:hover, +button.bg-gray-300:focus { + background-color: var(--pgn-color-action-default-gray-300) !important; } -.border-gray-900 { - border-color: var(--pgn-color-gray-900) !important; +.text-gray-300 { + color: var(--pgn-color-gray-300) !important; } -.bg-gray { - background-color: var(--pgn-color-gray-base) !important; +a.text-gray-300:hover, +a.text-gray-300:focus { + color: var(--pgn-color-action-default-gray-300) !important; } -a.bg-gray:hover, -a.bg-gray:focus, -button.bg-gray:hover, -button.bg-gray:focus { - background-color: var(--pgn-color-action-default-gray-base) !important; +.border-gray-300 { + border-color: var(--pgn-color-gray-300) !important; } -.text-gray { - color: var(--pgn-color-gray-base) !important; +.bg-gray-200 { + background-color: var(--pgn-color-gray-200) !important; } -a.text-gray:hover, -a.text-gray:focus { - color: var(--pgn-color-action-default-gray-base) !important; +a.bg-gray-200:hover, +a.bg-gray-200:focus, +button.bg-gray-200:hover, +button.bg-gray-200:focus { + background-color: var(--pgn-color-action-default-gray-200) !important; } -.border-gray { - border-color: var(--pgn-color-gray-base) !important; +.text-gray-200 { + color: var(--pgn-color-gray-200) !important; } -.bg-primary-100 { - background-color: var(--pgn-color-primary-100) !important; +a.text-gray-200:hover, +a.text-gray-200:focus { + color: var(--pgn-color-action-default-gray-200) !important; } -a.bg-primary-100:hover, -a.bg-primary-100:focus, -button.bg-primary-100:hover, -button.bg-primary-100:focus { - background-color: var(--pgn-color-action-default-primary-100) !important; +.border-gray-200 { + border-color: var(--pgn-color-gray-200) !important; } -.text-primary-100 { - color: var(--pgn-color-primary-100) !important; +.bg-gray-100 { + background-color: var(--pgn-color-gray-100) !important; } -a.text-primary-100:hover, -a.text-primary-100:focus { - color: var(--pgn-color-action-default-primary-100) !important; +a.bg-gray-100:hover, +a.bg-gray-100:focus, +button.bg-gray-100:hover, +button.bg-gray-100:focus { + background-color: var(--pgn-color-action-default-gray-100) !important; } -.border-primary-100 { - border-color: var(--pgn-color-primary-100) !important; +.text-gray-100 { + color: var(--pgn-color-gray-100) !important; } -.bg-primary-200 { - background-color: var(--pgn-color-primary-200) !important; +a.text-gray-100:hover, +a.text-gray-100:focus { + color: var(--pgn-color-action-default-gray-100) !important; } -a.bg-primary-200:hover, -a.bg-primary-200:focus, -button.bg-primary-200:hover, -button.bg-primary-200:focus { - background-color: var(--pgn-color-action-default-primary-200) !important; +.border-gray-100 { + border-color: var(--pgn-color-gray-100) !important; } -.text-primary-200 { - color: var(--pgn-color-primary-200) !important; +.bg-accent-b { + background-color: var(--pgn-color-accent-b) !important; } -a.text-primary-200:hover, -a.text-primary-200:focus { - color: var(--pgn-color-action-default-primary-200) !important; +a.bg-accent-b:hover, +a.bg-accent-b:focus, +button.bg-accent-b:hover, +button.bg-accent-b:focus { + background-color: var(--pgn-color-action-default-accent-b) !important; } -.border-primary-200 { - border-color: var(--pgn-color-primary-200) !important; +.text-accent-b { + color: var(--pgn-color-accent-b) !important; } -.bg-primary-300 { - background-color: var(--pgn-color-primary-300) !important; +a.text-accent-b:hover, +a.text-accent-b:focus { + color: var(--pgn-color-action-default-accent-b) !important; } -a.bg-primary-300:hover, -a.bg-primary-300:focus, -button.bg-primary-300:hover, -button.bg-primary-300:focus { - background-color: var(--pgn-color-action-default-primary-300) !important; +.border-accent-b { + border-color: var(--pgn-color-accent-b) !important; } -.text-primary-300 { - color: var(--pgn-color-primary-300) !important; +.bg-accent-a { + background-color: var(--pgn-color-accent-a) !important; } -a.text-primary-300:hover, -a.text-primary-300:focus { - color: var(--pgn-color-action-default-primary-300) !important; +a.bg-accent-a:hover, +a.bg-accent-a:focus, +button.bg-accent-a:hover, +button.bg-accent-a:focus { + background-color: var(--pgn-color-action-default-accent-a) !important; } -.border-primary-300 { - border-color: var(--pgn-color-primary-300) !important; +.text-accent-a { + color: var(--pgn-color-accent-a) !important; } -.bg-primary-400 { - background-color: var(--pgn-color-primary-400) !important; +a.text-accent-a:hover, +a.text-accent-a:focus { + color: var(--pgn-color-action-default-accent-a) !important; } -a.bg-primary-400:hover, -a.bg-primary-400:focus, -button.bg-primary-400:hover, -button.bg-primary-400:focus { - background-color: var(--pgn-color-action-default-primary-400) !important; +.border-accent-a { + border-color: var(--pgn-color-accent-a) !important; } -.text-primary-400 { - color: var(--pgn-color-primary-400) !important; +.bg-dark-900 { + background-color: var(--pgn-color-dark-900) !important; } -a.text-primary-400:hover, -a.text-primary-400:focus { - color: var(--pgn-color-action-default-primary-400) !important; +a.bg-dark-900:hover, +a.bg-dark-900:focus, +button.bg-dark-900:hover, +button.bg-dark-900:focus { + background-color: var(--pgn-color-action-default-dark-900) !important; } -.border-primary-400 { - border-color: var(--pgn-color-primary-400) !important; +.text-dark-900 { + color: var(--pgn-color-dark-900) !important; } -.bg-primary-500 { - background-color: var(--pgn-color-primary-500) !important; +a.text-dark-900:hover, +a.text-dark-900:focus { + color: var(--pgn-color-action-default-dark-900) !important; } -a.bg-primary-500:hover, -a.bg-primary-500:focus, -button.bg-primary-500:hover, -button.bg-primary-500:focus { - background-color: var(--pgn-color-action-default-primary-500) !important; +.border-dark-900 { + border-color: var(--pgn-color-dark-900) !important; } -.text-primary-500 { - color: var(--pgn-color-primary-500) !important; +.bg-dark-800 { + background-color: var(--pgn-color-dark-800) !important; } -a.text-primary-500:hover, -a.text-primary-500:focus { - color: var(--pgn-color-action-default-primary-500) !important; +a.bg-dark-800:hover, +a.bg-dark-800:focus, +button.bg-dark-800:hover, +button.bg-dark-800:focus { + background-color: var(--pgn-color-action-default-dark-800) !important; } -.border-primary-500 { - border-color: var(--pgn-color-primary-500) !important; +.text-dark-800 { + color: var(--pgn-color-dark-800) !important; } -.bg-primary-600 { - background-color: var(--pgn-color-primary-600) !important; +a.text-dark-800:hover, +a.text-dark-800:focus { + color: var(--pgn-color-action-default-dark-800) !important; } -a.bg-primary-600:hover, -a.bg-primary-600:focus, -button.bg-primary-600:hover, -button.bg-primary-600:focus { - background-color: var(--pgn-color-action-default-primary-600) !important; +.border-dark-800 { + border-color: var(--pgn-color-dark-800) !important; } -.text-primary-600 { - color: var(--pgn-color-primary-600) !important; +.bg-dark-700 { + background-color: var(--pgn-color-dark-700) !important; } -a.text-primary-600:hover, -a.text-primary-600:focus { - color: var(--pgn-color-action-default-primary-600) !important; +a.bg-dark-700:hover, +a.bg-dark-700:focus, +button.bg-dark-700:hover, +button.bg-dark-700:focus { + background-color: var(--pgn-color-action-default-dark-700) !important; } -.border-primary-600 { - border-color: var(--pgn-color-primary-600) !important; +.text-dark-700 { + color: var(--pgn-color-dark-700) !important; } -.bg-primary-700 { - background-color: var(--pgn-color-primary-700) !important; +a.text-dark-700:hover, +a.text-dark-700:focus { + color: var(--pgn-color-action-default-dark-700) !important; } -a.bg-primary-700:hover, -a.bg-primary-700:focus, -button.bg-primary-700:hover, -button.bg-primary-700:focus { - background-color: var(--pgn-color-action-default-primary-700) !important; +.border-dark-700 { + border-color: var(--pgn-color-dark-700) !important; } -.text-primary-700 { - color: var(--pgn-color-primary-700) !important; +.bg-dark-600 { + background-color: var(--pgn-color-dark-600) !important; } -a.text-primary-700:hover, -a.text-primary-700:focus { - color: var(--pgn-color-action-default-primary-700) !important; +a.bg-dark-600:hover, +a.bg-dark-600:focus, +button.bg-dark-600:hover, +button.bg-dark-600:focus { + background-color: var(--pgn-color-action-default-dark-600) !important; } -.border-primary-700 { - border-color: var(--pgn-color-primary-700) !important; +.text-dark-600 { + color: var(--pgn-color-dark-600) !important; } -.bg-primary-800 { - background-color: var(--pgn-color-primary-800) !important; +a.text-dark-600:hover, +a.text-dark-600:focus { + color: var(--pgn-color-action-default-dark-600) !important; } -a.bg-primary-800:hover, -a.bg-primary-800:focus, -button.bg-primary-800:hover, -button.bg-primary-800:focus { - background-color: var(--pgn-color-action-default-primary-800) !important; +.border-dark-600 { + border-color: var(--pgn-color-dark-600) !important; } -.text-primary-800 { - color: var(--pgn-color-primary-800) !important; +.bg-dark-500 { + background-color: var(--pgn-color-dark-500) !important; } -a.text-primary-800:hover, -a.text-primary-800:focus { - color: var(--pgn-color-action-default-primary-800) !important; +a.bg-dark-500:hover, +a.bg-dark-500:focus, +button.bg-dark-500:hover, +button.bg-dark-500:focus { + background-color: var(--pgn-color-action-default-dark-500) !important; } -.border-primary-800 { - border-color: var(--pgn-color-primary-800) !important; +.text-dark-500 { + color: var(--pgn-color-dark-500) !important; } -.bg-primary-900 { - background-color: var(--pgn-color-primary-900) !important; +a.text-dark-500:hover, +a.text-dark-500:focus { + color: var(--pgn-color-action-default-dark-500) !important; } -a.bg-primary-900:hover, -a.bg-primary-900:focus, -button.bg-primary-900:hover, -button.bg-primary-900:focus { - background-color: var(--pgn-color-action-default-primary-900) !important; +.border-dark-500 { + border-color: var(--pgn-color-dark-500) !important; } -.text-primary-900 { - color: var(--pgn-color-primary-900) !important; +.bg-dark-400 { + background-color: var(--pgn-color-dark-400) !important; } -a.text-primary-900:hover, -a.text-primary-900:focus { - color: var(--pgn-color-action-default-primary-900) !important; +a.bg-dark-400:hover, +a.bg-dark-400:focus, +button.bg-dark-400:hover, +button.bg-dark-400:focus { + background-color: var(--pgn-color-action-default-dark-400) !important; } -.border-primary-900 { - border-color: var(--pgn-color-primary-900) !important; +.text-dark-400 { + color: var(--pgn-color-dark-400) !important; } -.bg-primary { - background-color: var(--pgn-color-primary-base) !important; +a.text-dark-400:hover, +a.text-dark-400:focus { + color: var(--pgn-color-action-default-dark-400) !important; } -a.bg-primary:hover, -a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: var(--pgn-color-action-default-primary-base) !important; +.border-dark-400 { + border-color: var(--pgn-color-dark-400) !important; } -.text-primary { - color: var(--pgn-color-primary-base) !important; +.bg-dark-300 { + background-color: var(--pgn-color-dark-300) !important; } -a.text-primary:hover, -a.text-primary:focus { - color: var(--pgn-color-action-default-primary-base) !important; +a.bg-dark-300:hover, +a.bg-dark-300:focus, +button.bg-dark-300:hover, +button.bg-dark-300:focus { + background-color: var(--pgn-color-action-default-dark-300) !important; } -.border-primary { - border-color: var(--pgn-color-primary-base) !important; +.text-dark-300 { + color: var(--pgn-color-dark-300) !important; } -.bg-secondary-100 { - background-color: var(--pgn-color-secondary-100) !important; +a.text-dark-300:hover, +a.text-dark-300:focus { + color: var(--pgn-color-action-default-dark-300) !important; } -a.bg-secondary-100:hover, -a.bg-secondary-100:focus, -button.bg-secondary-100:hover, -button.bg-secondary-100:focus { - background-color: var(--pgn-color-action-default-secondary-100) !important; +.border-dark-300 { + border-color: var(--pgn-color-dark-300) !important; } -.text-secondary-100 { - color: var(--pgn-color-secondary-100) !important; +.bg-dark-200 { + background-color: var(--pgn-color-dark-200) !important; } -a.text-secondary-100:hover, -a.text-secondary-100:focus { - color: var(--pgn-color-action-default-secondary-100) !important; +a.bg-dark-200:hover, +a.bg-dark-200:focus, +button.bg-dark-200:hover, +button.bg-dark-200:focus { + background-color: var(--pgn-color-action-default-dark-200) !important; } -.border-secondary-100 { - border-color: var(--pgn-color-secondary-100) !important; +.text-dark-200 { + color: var(--pgn-color-dark-200) !important; } -.bg-secondary-200 { - background-color: var(--pgn-color-secondary-200) !important; +a.text-dark-200:hover, +a.text-dark-200:focus { + color: var(--pgn-color-action-default-dark-200) !important; } -a.bg-secondary-200:hover, -a.bg-secondary-200:focus, -button.bg-secondary-200:hover, -button.bg-secondary-200:focus { - background-color: var(--pgn-color-action-default-secondary-200) !important; +.border-dark-200 { + border-color: var(--pgn-color-dark-200) !important; } -.text-secondary-200 { - color: var(--pgn-color-secondary-200) !important; +.bg-dark-100 { + background-color: var(--pgn-color-dark-100) !important; } -a.text-secondary-200:hover, -a.text-secondary-200:focus { - color: var(--pgn-color-action-default-secondary-200) !important; +a.bg-dark-100:hover, +a.bg-dark-100:focus, +button.bg-dark-100:hover, +button.bg-dark-100:focus { + background-color: var(--pgn-color-action-default-dark-100) !important; } -.border-secondary-200 { - border-color: var(--pgn-color-secondary-200) !important; +.text-dark-100 { + color: var(--pgn-color-dark-100) !important; } -.bg-secondary-300 { - background-color: var(--pgn-color-secondary-300) !important; +a.text-dark-100:hover, +a.text-dark-100:focus { + color: var(--pgn-color-action-default-dark-100) !important; } -a.bg-secondary-300:hover, -a.bg-secondary-300:focus, -button.bg-secondary-300:hover, -button.bg-secondary-300:focus { - background-color: var(--pgn-color-action-default-secondary-300) !important; +.border-dark-100 { + border-color: var(--pgn-color-dark-100) !important; } -.text-secondary-300 { - color: var(--pgn-color-secondary-300) !important; +.bg-light-900 { + background-color: var(--pgn-color-light-900) !important; } -a.text-secondary-300:hover, -a.text-secondary-300:focus { - color: var(--pgn-color-action-default-secondary-300) !important; +a.bg-light-900:hover, +a.bg-light-900:focus, +button.bg-light-900:hover, +button.bg-light-900:focus { + background-color: var(--pgn-color-action-default-light-900) !important; } -.border-secondary-300 { - border-color: var(--pgn-color-secondary-300) !important; +.text-light-900 { + color: var(--pgn-color-light-900) !important; } -.bg-secondary-400 { - background-color: var(--pgn-color-secondary-400) !important; +a.text-light-900:hover, +a.text-light-900:focus { + color: var(--pgn-color-action-default-light-900) !important; } -a.bg-secondary-400:hover, -a.bg-secondary-400:focus, -button.bg-secondary-400:hover, -button.bg-secondary-400:focus { - background-color: var(--pgn-color-action-default-secondary-400) !important; +.border-light-900 { + border-color: var(--pgn-color-light-900) !important; } -.text-secondary-400 { - color: var(--pgn-color-secondary-400) !important; +.bg-light-800 { + background-color: var(--pgn-color-light-800) !important; } -a.text-secondary-400:hover, -a.text-secondary-400:focus { - color: var(--pgn-color-action-default-secondary-400) !important; +a.bg-light-800:hover, +a.bg-light-800:focus, +button.bg-light-800:hover, +button.bg-light-800:focus { + background-color: var(--pgn-color-action-default-light-800) !important; } -.border-secondary-400 { - border-color: var(--pgn-color-secondary-400) !important; +.text-light-800 { + color: var(--pgn-color-light-800) !important; } -.bg-secondary-500 { - background-color: var(--pgn-color-secondary-500) !important; +a.text-light-800:hover, +a.text-light-800:focus { + color: var(--pgn-color-action-default-light-800) !important; } -a.bg-secondary-500:hover, -a.bg-secondary-500:focus, -button.bg-secondary-500:hover, -button.bg-secondary-500:focus { - background-color: var(--pgn-color-action-default-secondary-500) !important; +.border-light-800 { + border-color: var(--pgn-color-light-800) !important; } -.text-secondary-500 { - color: var(--pgn-color-secondary-500) !important; +.bg-light-700 { + background-color: var(--pgn-color-light-700) !important; } -a.text-secondary-500:hover, -a.text-secondary-500:focus { - color: var(--pgn-color-action-default-secondary-500) !important; +a.bg-light-700:hover, +a.bg-light-700:focus, +button.bg-light-700:hover, +button.bg-light-700:focus { + background-color: var(--pgn-color-action-default-light-700) !important; } -.border-secondary-500 { - border-color: var(--pgn-color-secondary-500) !important; +.text-light-700 { + color: var(--pgn-color-light-700) !important; } -.bg-secondary-600 { - background-color: var(--pgn-color-secondary-600) !important; +a.text-light-700:hover, +a.text-light-700:focus { + color: var(--pgn-color-action-default-light-700) !important; } -a.bg-secondary-600:hover, -a.bg-secondary-600:focus, -button.bg-secondary-600:hover, -button.bg-secondary-600:focus { - background-color: var(--pgn-color-action-default-secondary-600) !important; +.border-light-700 { + border-color: var(--pgn-color-light-700) !important; } -.text-secondary-600 { - color: var(--pgn-color-secondary-600) !important; +.bg-light-600 { + background-color: var(--pgn-color-light-600) !important; } -a.text-secondary-600:hover, -a.text-secondary-600:focus { - color: var(--pgn-color-action-default-secondary-600) !important; +a.bg-light-600:hover, +a.bg-light-600:focus, +button.bg-light-600:hover, +button.bg-light-600:focus { + background-color: var(--pgn-color-action-default-light-600) !important; } -.border-secondary-600 { - border-color: var(--pgn-color-secondary-600) !important; +.text-light-600 { + color: var(--pgn-color-light-600) !important; } -.bg-secondary-700 { - background-color: var(--pgn-color-secondary-700) !important; +a.text-light-600:hover, +a.text-light-600:focus { + color: var(--pgn-color-action-default-light-600) !important; } -a.bg-secondary-700:hover, -a.bg-secondary-700:focus, -button.bg-secondary-700:hover, -button.bg-secondary-700:focus { - background-color: var(--pgn-color-action-default-secondary-700) !important; +.border-light-600 { + border-color: var(--pgn-color-light-600) !important; +} + +.bg-light-500 { + background-color: var(--pgn-color-light-500) !important; } -.text-secondary-700 { - color: var(--pgn-color-secondary-700) !important; +a.bg-light-500:hover, +a.bg-light-500:focus, +button.bg-light-500:hover, +button.bg-light-500:focus { + background-color: var(--pgn-color-action-default-light-500) !important; } -a.text-secondary-700:hover, -a.text-secondary-700:focus { - color: var(--pgn-color-action-default-secondary-700) !important; +.text-light-500 { + color: var(--pgn-color-light-500) !important; } -.border-secondary-700 { - border-color: var(--pgn-color-secondary-700) !important; +a.text-light-500:hover, +a.text-light-500:focus { + color: var(--pgn-color-action-default-light-500) !important; } -.bg-secondary-800 { - background-color: var(--pgn-color-secondary-800) !important; +.border-light-500 { + border-color: var(--pgn-color-light-500) !important; } -a.bg-secondary-800:hover, -a.bg-secondary-800:focus, -button.bg-secondary-800:hover, -button.bg-secondary-800:focus { - background-color: var(--pgn-color-action-default-secondary-800) !important; +.bg-light-400 { + background-color: var(--pgn-color-light-400) !important; } -.text-secondary-800 { - color: var(--pgn-color-secondary-800) !important; +a.bg-light-400:hover, +a.bg-light-400:focus, +button.bg-light-400:hover, +button.bg-light-400:focus { + background-color: var(--pgn-color-action-default-light-400) !important; } -a.text-secondary-800:hover, -a.text-secondary-800:focus { - color: var(--pgn-color-action-default-secondary-800) !important; +.text-light-400 { + color: var(--pgn-color-light-400) !important; } -.border-secondary-800 { - border-color: var(--pgn-color-secondary-800) !important; +a.text-light-400:hover, +a.text-light-400:focus { + color: var(--pgn-color-action-default-light-400) !important; } -.bg-secondary-900 { - background-color: var(--pgn-color-secondary-900) !important; +.border-light-400 { + border-color: var(--pgn-color-light-400) !important; } -a.bg-secondary-900:hover, -a.bg-secondary-900:focus, -button.bg-secondary-900:hover, -button.bg-secondary-900:focus { - background-color: var(--pgn-color-action-default-secondary-900) !important; +.bg-light-300 { + background-color: var(--pgn-color-light-300) !important; } -.text-secondary-900 { - color: var(--pgn-color-secondary-900) !important; +a.bg-light-300:hover, +a.bg-light-300:focus, +button.bg-light-300:hover, +button.bg-light-300:focus { + background-color: var(--pgn-color-action-default-light-300) !important; } -a.text-secondary-900:hover, -a.text-secondary-900:focus { - color: var(--pgn-color-action-default-secondary-900) !important; +.text-light-300 { + color: var(--pgn-color-light-300) !important; } -.border-secondary-900 { - border-color: var(--pgn-color-secondary-900) !important; +a.text-light-300:hover, +a.text-light-300:focus { + color: var(--pgn-color-action-default-light-300) !important; } -.bg-secondary { - background-color: var(--pgn-color-secondary-base) !important; +.border-light-300 { + border-color: var(--pgn-color-light-300) !important; } -a.bg-secondary:hover, -a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: var(--pgn-color-action-default-secondary-base) !important; +.bg-light-200 { + background-color: var(--pgn-color-light-200) !important; } -.text-secondary { - color: var(--pgn-color-secondary-base) !important; +a.bg-light-200:hover, +a.bg-light-200:focus, +button.bg-light-200:hover, +button.bg-light-200:focus { + background-color: var(--pgn-color-action-default-light-200) !important; } -a.text-secondary:hover, -a.text-secondary:focus { - color: var(--pgn-color-action-default-secondary-base) !important; +.text-light-200 { + color: var(--pgn-color-light-200) !important; } -.border-secondary { - border-color: var(--pgn-color-secondary-base) !important; +a.text-light-200:hover, +a.text-light-200:focus { + color: var(--pgn-color-action-default-light-200) !important; } -.bg-brand-100 { - background-color: var(--pgn-color-brand-100) !important; +.border-light-200 { + border-color: var(--pgn-color-light-200) !important; } -a.bg-brand-100:hover, -a.bg-brand-100:focus, -button.bg-brand-100:hover, -button.bg-brand-100:focus { - background-color: var(--pgn-color-action-default-brand-100) !important; +.bg-light-100 { + background-color: var(--pgn-color-light-100) !important; } -.text-brand-100 { - color: var(--pgn-color-brand-100) !important; +a.bg-light-100:hover, +a.bg-light-100:focus, +button.bg-light-100:hover, +button.bg-light-100:focus { + background-color: var(--pgn-color-action-default-light-100) !important; } -a.text-brand-100:hover, -a.text-brand-100:focus { - color: var(--pgn-color-action-default-brand-100) !important; +.text-light-100 { + color: var(--pgn-color-light-100) !important; } -.border-brand-100 { - border-color: var(--pgn-color-brand-100) !important; +a.text-light-100:hover, +a.text-light-100:focus { + color: var(--pgn-color-action-default-light-100) !important; } -.bg-brand-200 { - background-color: var(--pgn-color-brand-200) !important; +.border-light-100 { + border-color: var(--pgn-color-light-100) !important; } -a.bg-brand-200:hover, -a.bg-brand-200:focus, -button.bg-brand-200:hover, -button.bg-brand-200:focus { - background-color: var(--pgn-color-action-default-brand-200) !important; +.bg-danger { + background-color: var(--pgn-color-danger-base) !important; } -.text-brand-200 { - color: var(--pgn-color-brand-200) !important; +a.bg-danger:hover, +a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { + background-color: var(--pgn-color-action-default-danger-base) !important; } -a.text-brand-200:hover, -a.text-brand-200:focus { - color: var(--pgn-color-action-default-brand-200) !important; +.text-danger { + color: var(--pgn-color-danger-base) !important; } -.border-brand-200 { - border-color: var(--pgn-color-brand-200) !important; +a.text-danger:hover, +a.text-danger:focus { + color: var(--pgn-color-action-default-danger-base) !important; } -.bg-brand-300 { - background-color: var(--pgn-color-brand-300) !important; +.border-danger { + border-color: var(--pgn-color-danger-base) !important; } -a.bg-brand-300:hover, -a.bg-brand-300:focus, -button.bg-brand-300:hover, -button.bg-brand-300:focus { - background-color: var(--pgn-color-action-default-brand-300) !important; +.bg-danger-900 { + background-color: var(--pgn-color-danger-900) !important; } -.text-brand-300 { - color: var(--pgn-color-brand-300) !important; +a.bg-danger-900:hover, +a.bg-danger-900:focus, +button.bg-danger-900:hover, +button.bg-danger-900:focus { + background-color: var(--pgn-color-action-default-danger-900) !important; } -a.text-brand-300:hover, -a.text-brand-300:focus { - color: var(--pgn-color-action-default-brand-300) !important; +.text-danger-900 { + color: var(--pgn-color-danger-900) !important; } -.border-brand-300 { - border-color: var(--pgn-color-brand-300) !important; +a.text-danger-900:hover, +a.text-danger-900:focus { + color: var(--pgn-color-action-default-danger-900) !important; } -.bg-brand-400 { - background-color: var(--pgn-color-brand-400) !important; +.border-danger-900 { + border-color: var(--pgn-color-danger-900) !important; } -a.bg-brand-400:hover, -a.bg-brand-400:focus, -button.bg-brand-400:hover, -button.bg-brand-400:focus { - background-color: var(--pgn-color-action-default-brand-400) !important; +.bg-danger-800 { + background-color: var(--pgn-color-danger-800) !important; } -.text-brand-400 { - color: var(--pgn-color-brand-400) !important; +a.bg-danger-800:hover, +a.bg-danger-800:focus, +button.bg-danger-800:hover, +button.bg-danger-800:focus { + background-color: var(--pgn-color-action-default-danger-800) !important; } -a.text-brand-400:hover, -a.text-brand-400:focus { - color: var(--pgn-color-action-default-brand-400) !important; +.text-danger-800 { + color: var(--pgn-color-danger-800) !important; } -.border-brand-400 { - border-color: var(--pgn-color-brand-400) !important; +a.text-danger-800:hover, +a.text-danger-800:focus { + color: var(--pgn-color-action-default-danger-800) !important; } -.bg-brand-500 { - background-color: var(--pgn-color-brand-500) !important; +.border-danger-800 { + border-color: var(--pgn-color-danger-800) !important; } -a.bg-brand-500:hover, -a.bg-brand-500:focus, -button.bg-brand-500:hover, -button.bg-brand-500:focus { - background-color: var(--pgn-color-action-default-brand-500) !important; +.bg-danger-700 { + background-color: var(--pgn-color-danger-700) !important; } -.text-brand-500 { - color: var(--pgn-color-brand-500) !important; +a.bg-danger-700:hover, +a.bg-danger-700:focus, +button.bg-danger-700:hover, +button.bg-danger-700:focus { + background-color: var(--pgn-color-action-default-danger-700) !important; } -a.text-brand-500:hover, -a.text-brand-500:focus { - color: var(--pgn-color-action-default-brand-500) !important; +.text-danger-700 { + color: var(--pgn-color-danger-700) !important; } -.border-brand-500 { - border-color: var(--pgn-color-brand-500) !important; +a.text-danger-700:hover, +a.text-danger-700:focus { + color: var(--pgn-color-action-default-danger-700) !important; } -.bg-brand-600 { - background-color: var(--pgn-color-brand-600) !important; +.border-danger-700 { + border-color: var(--pgn-color-danger-700) !important; } -a.bg-brand-600:hover, -a.bg-brand-600:focus, -button.bg-brand-600:hover, -button.bg-brand-600:focus { - background-color: var(--pgn-color-action-default-brand-600) !important; +.bg-danger-600 { + background-color: var(--pgn-color-danger-600) !important; +} + +a.bg-danger-600:hover, +a.bg-danger-600:focus, +button.bg-danger-600:hover, +button.bg-danger-600:focus { + background-color: var(--pgn-color-action-default-danger-600) !important; } -.text-brand-600 { - color: var(--pgn-color-brand-600) !important; +.text-danger-600 { + color: var(--pgn-color-danger-600) !important; } -a.text-brand-600:hover, -a.text-brand-600:focus { - color: var(--pgn-color-action-default-brand-600) !important; +a.text-danger-600:hover, +a.text-danger-600:focus { + color: var(--pgn-color-action-default-danger-600) !important; } -.border-brand-600 { - border-color: var(--pgn-color-brand-600) !important; +.border-danger-600 { + border-color: var(--pgn-color-danger-600) !important; } -.bg-brand-700 { - background-color: var(--pgn-color-brand-700) !important; +.bg-danger-500 { + background-color: var(--pgn-color-danger-500) !important; } -a.bg-brand-700:hover, -a.bg-brand-700:focus, -button.bg-brand-700:hover, -button.bg-brand-700:focus { - background-color: var(--pgn-color-action-default-brand-700) !important; +a.bg-danger-500:hover, +a.bg-danger-500:focus, +button.bg-danger-500:hover, +button.bg-danger-500:focus { + background-color: var(--pgn-color-action-default-danger-500) !important; } -.text-brand-700 { - color: var(--pgn-color-brand-700) !important; +.text-danger-500 { + color: var(--pgn-color-danger-500) !important; } -a.text-brand-700:hover, -a.text-brand-700:focus { - color: var(--pgn-color-action-default-brand-700) !important; +a.text-danger-500:hover, +a.text-danger-500:focus { + color: var(--pgn-color-action-default-danger-500) !important; } -.border-brand-700 { - border-color: var(--pgn-color-brand-700) !important; +.border-danger-500 { + border-color: var(--pgn-color-danger-500) !important; } -.bg-brand-800 { - background-color: var(--pgn-color-brand-800) !important; +.bg-danger-400 { + background-color: var(--pgn-color-danger-400) !important; } -a.bg-brand-800:hover, -a.bg-brand-800:focus, -button.bg-brand-800:hover, -button.bg-brand-800:focus { - background-color: var(--pgn-color-action-default-brand-800) !important; +a.bg-danger-400:hover, +a.bg-danger-400:focus, +button.bg-danger-400:hover, +button.bg-danger-400:focus { + background-color: var(--pgn-color-action-default-danger-400) !important; } -.text-brand-800 { - color: var(--pgn-color-brand-800) !important; +.text-danger-400 { + color: var(--pgn-color-danger-400) !important; } -a.text-brand-800:hover, -a.text-brand-800:focus { - color: var(--pgn-color-action-default-brand-800) !important; +a.text-danger-400:hover, +a.text-danger-400:focus { + color: var(--pgn-color-action-default-danger-400) !important; } -.border-brand-800 { - border-color: var(--pgn-color-brand-800) !important; +.border-danger-400 { + border-color: var(--pgn-color-danger-400) !important; } -.bg-brand-900 { - background-color: var(--pgn-color-brand-900) !important; +.bg-danger-300 { + background-color: var(--pgn-color-danger-300) !important; } -a.bg-brand-900:hover, -a.bg-brand-900:focus, -button.bg-brand-900:hover, -button.bg-brand-900:focus { - background-color: var(--pgn-color-action-default-brand-900) !important; +a.bg-danger-300:hover, +a.bg-danger-300:focus, +button.bg-danger-300:hover, +button.bg-danger-300:focus { + background-color: var(--pgn-color-action-default-danger-300) !important; } -.text-brand-900 { - color: var(--pgn-color-brand-900) !important; +.text-danger-300 { + color: var(--pgn-color-danger-300) !important; } -a.text-brand-900:hover, -a.text-brand-900:focus { - color: var(--pgn-color-action-default-brand-900) !important; +a.text-danger-300:hover, +a.text-danger-300:focus { + color: var(--pgn-color-action-default-danger-300) !important; } -.border-brand-900 { - border-color: var(--pgn-color-brand-900) !important; +.border-danger-300 { + border-color: var(--pgn-color-danger-300) !important; } -.bg-brand { - background-color: var(--pgn-color-brand-base) !important; +.bg-danger-200 { + background-color: var(--pgn-color-danger-200) !important; } -a.bg-brand:hover, -a.bg-brand:focus, -button.bg-brand:hover, -button.bg-brand:focus { - background-color: var(--pgn-color-action-default-brand-base) !important; +a.bg-danger-200:hover, +a.bg-danger-200:focus, +button.bg-danger-200:hover, +button.bg-danger-200:focus { + background-color: var(--pgn-color-action-default-danger-200) !important; } -.text-brand { - color: var(--pgn-color-brand-base) !important; +.text-danger-200 { + color: var(--pgn-color-danger-200) !important; } -a.text-brand:hover, -a.text-brand:focus { - color: var(--pgn-color-action-default-brand-base) !important; +a.text-danger-200:hover, +a.text-danger-200:focus { + color: var(--pgn-color-action-default-danger-200) !important; } -.border-brand { - border-color: var(--pgn-color-brand-base) !important; +.border-danger-200 { + border-color: var(--pgn-color-danger-200) !important; } -.bg-success-100 { - background-color: var(--pgn-color-success-100) !important; +.bg-danger-100 { + background-color: var(--pgn-color-danger-100) !important; } -a.bg-success-100:hover, -a.bg-success-100:focus, -button.bg-success-100:hover, -button.bg-success-100:focus { - background-color: var(--pgn-color-action-default-success-100) !important; +a.bg-danger-100:hover, +a.bg-danger-100:focus, +button.bg-danger-100:hover, +button.bg-danger-100:focus { + background-color: var(--pgn-color-action-default-danger-100) !important; } -.text-success-100 { - color: var(--pgn-color-success-100) !important; +.text-danger-100 { + color: var(--pgn-color-danger-100) !important; } -a.text-success-100:hover, -a.text-success-100:focus { - color: var(--pgn-color-action-default-success-100) !important; +a.text-danger-100:hover, +a.text-danger-100:focus { + color: var(--pgn-color-action-default-danger-100) !important; } -.border-success-100 { - border-color: var(--pgn-color-success-100) !important; +.border-danger-100 { + border-color: var(--pgn-color-danger-100) !important; } -.bg-success-200 { - background-color: var(--pgn-color-success-200) !important; +.bg-warning { + background-color: var(--pgn-color-warning-base) !important; } -a.bg-success-200:hover, -a.bg-success-200:focus, -button.bg-success-200:hover, -button.bg-success-200:focus { - background-color: var(--pgn-color-action-default-success-200) !important; +a.bg-warning:hover, +a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { + background-color: var(--pgn-color-action-default-warning-base) !important; } -.text-success-200 { - color: var(--pgn-color-success-200) !important; +.text-warning { + color: var(--pgn-color-warning-base) !important; } -a.text-success-200:hover, -a.text-success-200:focus { - color: var(--pgn-color-action-default-success-200) !important; +a.text-warning:hover, +a.text-warning:focus { + color: var(--pgn-color-action-default-warning-base) !important; } -.border-success-200 { - border-color: var(--pgn-color-success-200) !important; +.border-warning { + border-color: var(--pgn-color-warning-base) !important; } -.bg-success-300 { - background-color: var(--pgn-color-success-300) !important; +.bg-warning-900 { + background-color: var(--pgn-color-warning-900) !important; } -a.bg-success-300:hover, -a.bg-success-300:focus, -button.bg-success-300:hover, -button.bg-success-300:focus { - background-color: var(--pgn-color-action-default-success-300) !important; +a.bg-warning-900:hover, +a.bg-warning-900:focus, +button.bg-warning-900:hover, +button.bg-warning-900:focus { + background-color: var(--pgn-color-action-default-warning-900) !important; } -.text-success-300 { - color: var(--pgn-color-success-300) !important; +.text-warning-900 { + color: var(--pgn-color-warning-900) !important; } -a.text-success-300:hover, -a.text-success-300:focus { - color: var(--pgn-color-action-default-success-300) !important; +a.text-warning-900:hover, +a.text-warning-900:focus { + color: var(--pgn-color-action-default-warning-900) !important; } -.border-success-300 { - border-color: var(--pgn-color-success-300) !important; +.border-warning-900 { + border-color: var(--pgn-color-warning-900) !important; } -.bg-success-400 { - background-color: var(--pgn-color-success-400) !important; +.bg-warning-800 { + background-color: var(--pgn-color-warning-800) !important; } -a.bg-success-400:hover, -a.bg-success-400:focus, -button.bg-success-400:hover, -button.bg-success-400:focus { - background-color: var(--pgn-color-action-default-success-400) !important; +a.bg-warning-800:hover, +a.bg-warning-800:focus, +button.bg-warning-800:hover, +button.bg-warning-800:focus { + background-color: var(--pgn-color-action-default-warning-800) !important; } -.text-success-400 { - color: var(--pgn-color-success-400) !important; +.text-warning-800 { + color: var(--pgn-color-warning-800) !important; } -a.text-success-400:hover, -a.text-success-400:focus { - color: var(--pgn-color-action-default-success-400) !important; +a.text-warning-800:hover, +a.text-warning-800:focus { + color: var(--pgn-color-action-default-warning-800) !important; } -.border-success-400 { - border-color: var(--pgn-color-success-400) !important; +.border-warning-800 { + border-color: var(--pgn-color-warning-800) !important; } -.bg-success-500 { - background-color: var(--pgn-color-success-500) !important; +.bg-warning-700 { + background-color: var(--pgn-color-warning-700) !important; } -a.bg-success-500:hover, -a.bg-success-500:focus, -button.bg-success-500:hover, -button.bg-success-500:focus { - background-color: var(--pgn-color-action-default-success-500) !important; +a.bg-warning-700:hover, +a.bg-warning-700:focus, +button.bg-warning-700:hover, +button.bg-warning-700:focus { + background-color: var(--pgn-color-action-default-warning-700) !important; } -.text-success-500 { - color: var(--pgn-color-success-500) !important; +.text-warning-700 { + color: var(--pgn-color-warning-700) !important; } -a.text-success-500:hover, -a.text-success-500:focus { - color: var(--pgn-color-action-default-success-500) !important; +a.text-warning-700:hover, +a.text-warning-700:focus { + color: var(--pgn-color-action-default-warning-700) !important; } -.border-success-500 { - border-color: var(--pgn-color-success-500) !important; +.border-warning-700 { + border-color: var(--pgn-color-warning-700) !important; } -.bg-success-600 { - background-color: var(--pgn-color-success-600) !important; +.bg-warning-600 { + background-color: var(--pgn-color-warning-600) !important; } -a.bg-success-600:hover, -a.bg-success-600:focus, -button.bg-success-600:hover, -button.bg-success-600:focus { - background-color: var(--pgn-color-action-default-success-600) !important; +a.bg-warning-600:hover, +a.bg-warning-600:focus, +button.bg-warning-600:hover, +button.bg-warning-600:focus { + background-color: var(--pgn-color-action-default-warning-600) !important; } -.text-success-600 { - color: var(--pgn-color-success-600) !important; +.text-warning-600 { + color: var(--pgn-color-warning-600) !important; } -a.text-success-600:hover, -a.text-success-600:focus { - color: var(--pgn-color-action-default-success-600) !important; +a.text-warning-600:hover, +a.text-warning-600:focus { + color: var(--pgn-color-action-default-warning-600) !important; } -.border-success-600 { - border-color: var(--pgn-color-success-600) !important; +.border-warning-600 { + border-color: var(--pgn-color-warning-600) !important; } -.bg-success-700 { - background-color: var(--pgn-color-success-700) !important; +.bg-warning-500 { + background-color: var(--pgn-color-warning-500) !important; } -a.bg-success-700:hover, -a.bg-success-700:focus, -button.bg-success-700:hover, -button.bg-success-700:focus { - background-color: var(--pgn-color-action-default-success-700) !important; +a.bg-warning-500:hover, +a.bg-warning-500:focus, +button.bg-warning-500:hover, +button.bg-warning-500:focus { + background-color: var(--pgn-color-action-default-warning-500) !important; } -.text-success-700 { - color: var(--pgn-color-success-700) !important; +.text-warning-500 { + color: var(--pgn-color-warning-500) !important; } -a.text-success-700:hover, -a.text-success-700:focus { - color: var(--pgn-color-action-default-success-700) !important; +a.text-warning-500:hover, +a.text-warning-500:focus { + color: var(--pgn-color-action-default-warning-500) !important; } -.border-success-700 { - border-color: var(--pgn-color-success-700) !important; +.border-warning-500 { + border-color: var(--pgn-color-warning-500) !important; } -.bg-success-800 { - background-color: var(--pgn-color-success-800) !important; +.bg-warning-400 { + background-color: var(--pgn-color-warning-400) !important; } -a.bg-success-800:hover, -a.bg-success-800:focus, -button.bg-success-800:hover, -button.bg-success-800:focus { - background-color: var(--pgn-color-action-default-success-800) !important; +a.bg-warning-400:hover, +a.bg-warning-400:focus, +button.bg-warning-400:hover, +button.bg-warning-400:focus { + background-color: var(--pgn-color-action-default-warning-400) !important; } -.text-success-800 { - color: var(--pgn-color-success-800) !important; +.text-warning-400 { + color: var(--pgn-color-warning-400) !important; } -a.text-success-800:hover, -a.text-success-800:focus { - color: var(--pgn-color-action-default-success-800) !important; +a.text-warning-400:hover, +a.text-warning-400:focus { + color: var(--pgn-color-action-default-warning-400) !important; } -.border-success-800 { - border-color: var(--pgn-color-success-800) !important; +.border-warning-400 { + border-color: var(--pgn-color-warning-400) !important; } -.bg-success-900 { - background-color: var(--pgn-color-success-900) !important; +.bg-warning-300 { + background-color: var(--pgn-color-warning-300) !important; } -a.bg-success-900:hover, -a.bg-success-900:focus, -button.bg-success-900:hover, -button.bg-success-900:focus { - background-color: var(--pgn-color-action-default-success-900) !important; +a.bg-warning-300:hover, +a.bg-warning-300:focus, +button.bg-warning-300:hover, +button.bg-warning-300:focus { + background-color: var(--pgn-color-action-default-warning-300) !important; } -.text-success-900 { - color: var(--pgn-color-success-900) !important; +.text-warning-300 { + color: var(--pgn-color-warning-300) !important; } -a.text-success-900:hover, -a.text-success-900:focus { - color: var(--pgn-color-action-default-success-900) !important; +a.text-warning-300:hover, +a.text-warning-300:focus { + color: var(--pgn-color-action-default-warning-300) !important; } -.border-success-900 { - border-color: var(--pgn-color-success-900) !important; +.border-warning-300 { + border-color: var(--pgn-color-warning-300) !important; } -.bg-success { - background-color: var(--pgn-color-success-base) !important; +.bg-warning-200 { + background-color: var(--pgn-color-warning-200) !important; } -a.bg-success:hover, -a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: var(--pgn-color-action-default-success-base) !important; +a.bg-warning-200:hover, +a.bg-warning-200:focus, +button.bg-warning-200:hover, +button.bg-warning-200:focus { + background-color: var(--pgn-color-action-default-warning-200) !important; } -.text-success { - color: var(--pgn-color-success-base) !important; +.text-warning-200 { + color: var(--pgn-color-warning-200) !important; } -a.text-success:hover, -a.text-success:focus { - color: var(--pgn-color-action-default-success-base) !important; +a.text-warning-200:hover, +a.text-warning-200:focus { + color: var(--pgn-color-action-default-warning-200) !important; } -.border-success { - border-color: var(--pgn-color-success-base) !important; +.border-warning-200 { + border-color: var(--pgn-color-warning-200) !important; } -.bg-info-100 { - background-color: var(--pgn-color-info-100) !important; +.bg-warning-100 { + background-color: var(--pgn-color-warning-100) !important; } -a.bg-info-100:hover, -a.bg-info-100:focus, -button.bg-info-100:hover, -button.bg-info-100:focus { - background-color: var(--pgn-color-action-default-info-100) !important; +a.bg-warning-100:hover, +a.bg-warning-100:focus, +button.bg-warning-100:hover, +button.bg-warning-100:focus { + background-color: var(--pgn-color-action-default-warning-100) !important; } -.text-info-100 { - color: var(--pgn-color-info-100) !important; +.text-warning-100 { + color: var(--pgn-color-warning-100) !important; } -a.text-info-100:hover, -a.text-info-100:focus { - color: var(--pgn-color-action-default-info-100) !important; +a.text-warning-100:hover, +a.text-warning-100:focus { + color: var(--pgn-color-action-default-warning-100) !important; } -.border-info-100 { - border-color: var(--pgn-color-info-100) !important; +.border-warning-100 { + border-color: var(--pgn-color-warning-100) !important; } -.bg-info-200 { - background-color: var(--pgn-color-info-200) !important; +.bg-info { + background-color: var(--pgn-color-info-base) !important; } -a.bg-info-200:hover, -a.bg-info-200:focus, -button.bg-info-200:hover, -button.bg-info-200:focus { - background-color: var(--pgn-color-action-default-info-200) !important; +a.bg-info:hover, +a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { + background-color: var(--pgn-color-action-default-info-base) !important; } -.text-info-200 { - color: var(--pgn-color-info-200) !important; +.text-info { + color: var(--pgn-color-info-base) !important; } -a.text-info-200:hover, -a.text-info-200:focus { - color: var(--pgn-color-action-default-info-200) !important; +a.text-info:hover, +a.text-info:focus { + color: var(--pgn-color-action-default-info-base) !important; } -.border-info-200 { - border-color: var(--pgn-color-info-200) !important; +.border-info { + border-color: var(--pgn-color-info-base) !important; } -.bg-info-300 { - background-color: var(--pgn-color-info-300) !important; +.bg-info-900 { + background-color: var(--pgn-color-info-900) !important; } -a.bg-info-300:hover, -a.bg-info-300:focus, -button.bg-info-300:hover, -button.bg-info-300:focus { - background-color: var(--pgn-color-action-default-info-300) !important; +a.bg-info-900:hover, +a.bg-info-900:focus, +button.bg-info-900:hover, +button.bg-info-900:focus { + background-color: var(--pgn-color-action-default-info-900) !important; } -.text-info-300 { - color: var(--pgn-color-info-300) !important; +.text-info-900 { + color: var(--pgn-color-info-900) !important; } -a.text-info-300:hover, -a.text-info-300:focus { - color: var(--pgn-color-action-default-info-300) !important; +a.text-info-900:hover, +a.text-info-900:focus { + color: var(--pgn-color-action-default-info-900) !important; } -.border-info-300 { - border-color: var(--pgn-color-info-300) !important; +.border-info-900 { + border-color: var(--pgn-color-info-900) !important; } -.bg-info-400 { - background-color: var(--pgn-color-info-400) !important; +.bg-info-800 { + background-color: var(--pgn-color-info-800) !important; } -a.bg-info-400:hover, -a.bg-info-400:focus, -button.bg-info-400:hover, -button.bg-info-400:focus { - background-color: var(--pgn-color-action-default-info-400) !important; +a.bg-info-800:hover, +a.bg-info-800:focus, +button.bg-info-800:hover, +button.bg-info-800:focus { + background-color: var(--pgn-color-action-default-info-800) !important; } - -.text-info-400 { - color: var(--pgn-color-info-400) !important; + +.text-info-800 { + color: var(--pgn-color-info-800) !important; } -a.text-info-400:hover, -a.text-info-400:focus { - color: var(--pgn-color-action-default-info-400) !important; +a.text-info-800:hover, +a.text-info-800:focus { + color: var(--pgn-color-action-default-info-800) !important; } -.border-info-400 { - border-color: var(--pgn-color-info-400) !important; +.border-info-800 { + border-color: var(--pgn-color-info-800) !important; } -.bg-info-500 { - background-color: var(--pgn-color-info-500) !important; +.bg-info-700 { + background-color: var(--pgn-color-info-700) !important; } -a.bg-info-500:hover, -a.bg-info-500:focus, -button.bg-info-500:hover, -button.bg-info-500:focus { - background-color: var(--pgn-color-action-default-info-500) !important; +a.bg-info-700:hover, +a.bg-info-700:focus, +button.bg-info-700:hover, +button.bg-info-700:focus { + background-color: var(--pgn-color-action-default-info-700) !important; } -.text-info-500 { - color: var(--pgn-color-info-500) !important; +.text-info-700 { + color: var(--pgn-color-info-700) !important; } -a.text-info-500:hover, -a.text-info-500:focus { - color: var(--pgn-color-action-default-info-500) !important; +a.text-info-700:hover, +a.text-info-700:focus { + color: var(--pgn-color-action-default-info-700) !important; } -.border-info-500 { - border-color: var(--pgn-color-info-500) !important; +.border-info-700 { + border-color: var(--pgn-color-info-700) !important; } .bg-info-600 { @@ -1396,1059 +1390,1059 @@ a.text-info-600:focus { border-color: var(--pgn-color-info-600) !important; } -.bg-info-700 { - background-color: var(--pgn-color-info-700) !important; -} - -a.bg-info-700:hover, -a.bg-info-700:focus, -button.bg-info-700:hover, -button.bg-info-700:focus { - background-color: var(--pgn-color-action-default-info-700) !important; -} - -.text-info-700 { - color: var(--pgn-color-info-700) !important; +.bg-info-500 { + background-color: var(--pgn-color-info-500) !important; } -a.text-info-700:hover, -a.text-info-700:focus { - color: var(--pgn-color-action-default-info-700) !important; +a.bg-info-500:hover, +a.bg-info-500:focus, +button.bg-info-500:hover, +button.bg-info-500:focus { + background-color: var(--pgn-color-action-default-info-500) !important; } -.border-info-700 { - border-color: var(--pgn-color-info-700) !important; +.text-info-500 { + color: var(--pgn-color-info-500) !important; } -.bg-info-800 { - background-color: var(--pgn-color-info-800) !important; +a.text-info-500:hover, +a.text-info-500:focus { + color: var(--pgn-color-action-default-info-500) !important; } -a.bg-info-800:hover, -a.bg-info-800:focus, -button.bg-info-800:hover, -button.bg-info-800:focus { - background-color: var(--pgn-color-action-default-info-800) !important; +.border-info-500 { + border-color: var(--pgn-color-info-500) !important; } -.text-info-800 { - color: var(--pgn-color-info-800) !important; +.bg-info-400 { + background-color: var(--pgn-color-info-400) !important; } -a.text-info-800:hover, -a.text-info-800:focus { - color: var(--pgn-color-action-default-info-800) !important; +a.bg-info-400:hover, +a.bg-info-400:focus, +button.bg-info-400:hover, +button.bg-info-400:focus { + background-color: var(--pgn-color-action-default-info-400) !important; } -.border-info-800 { - border-color: var(--pgn-color-info-800) !important; +.text-info-400 { + color: var(--pgn-color-info-400) !important; } -.bg-info-900 { - background-color: var(--pgn-color-info-900) !important; +a.text-info-400:hover, +a.text-info-400:focus { + color: var(--pgn-color-action-default-info-400) !important; } -a.bg-info-900:hover, -a.bg-info-900:focus, -button.bg-info-900:hover, -button.bg-info-900:focus { - background-color: var(--pgn-color-action-default-info-900) !important; +.border-info-400 { + border-color: var(--pgn-color-info-400) !important; } -.text-info-900 { - color: var(--pgn-color-info-900) !important; +.bg-info-300 { + background-color: var(--pgn-color-info-300) !important; } -a.text-info-900:hover, -a.text-info-900:focus { - color: var(--pgn-color-action-default-info-900) !important; +a.bg-info-300:hover, +a.bg-info-300:focus, +button.bg-info-300:hover, +button.bg-info-300:focus { + background-color: var(--pgn-color-action-default-info-300) !important; } -.border-info-900 { - border-color: var(--pgn-color-info-900) !important; +.text-info-300 { + color: var(--pgn-color-info-300) !important; } -.bg-info { - background-color: var(--pgn-color-info-base) !important; +a.text-info-300:hover, +a.text-info-300:focus { + color: var(--pgn-color-action-default-info-300) !important; } -a.bg-info:hover, -a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: var(--pgn-color-action-default-info-base) !important; +.border-info-300 { + border-color: var(--pgn-color-info-300) !important; } -.text-info { - color: var(--pgn-color-info-base) !important; +.bg-info-200 { + background-color: var(--pgn-color-info-200) !important; } -a.text-info:hover, -a.text-info:focus { - color: var(--pgn-color-action-default-info-base) !important; +a.bg-info-200:hover, +a.bg-info-200:focus, +button.bg-info-200:hover, +button.bg-info-200:focus { + background-color: var(--pgn-color-action-default-info-200) !important; } -.border-info { - border-color: var(--pgn-color-info-base) !important; +.text-info-200 { + color: var(--pgn-color-info-200) !important; } -.bg-warning-100 { - background-color: var(--pgn-color-warning-100) !important; +a.text-info-200:hover, +a.text-info-200:focus { + color: var(--pgn-color-action-default-info-200) !important; } -a.bg-warning-100:hover, -a.bg-warning-100:focus, -button.bg-warning-100:hover, -button.bg-warning-100:focus { - background-color: var(--pgn-color-action-default-warning-100) !important; +.border-info-200 { + border-color: var(--pgn-color-info-200) !important; } -.text-warning-100 { - color: var(--pgn-color-warning-100) !important; +.bg-info-100 { + background-color: var(--pgn-color-info-100) !important; } -a.text-warning-100:hover, -a.text-warning-100:focus { - color: var(--pgn-color-action-default-warning-100) !important; +a.bg-info-100:hover, +a.bg-info-100:focus, +button.bg-info-100:hover, +button.bg-info-100:focus { + background-color: var(--pgn-color-action-default-info-100) !important; } -.border-warning-100 { - border-color: var(--pgn-color-warning-100) !important; +.text-info-100 { + color: var(--pgn-color-info-100) !important; } -.bg-warning-200 { - background-color: var(--pgn-color-warning-200) !important; +a.text-info-100:hover, +a.text-info-100:focus { + color: var(--pgn-color-action-default-info-100) !important; } -a.bg-warning-200:hover, -a.bg-warning-200:focus, -button.bg-warning-200:hover, -button.bg-warning-200:focus { - background-color: var(--pgn-color-action-default-warning-200) !important; +.border-info-100 { + border-color: var(--pgn-color-info-100) !important; } -.text-warning-200 { - color: var(--pgn-color-warning-200) !important; +.bg-success { + background-color: var(--pgn-color-success-base) !important; } -a.text-warning-200:hover, -a.text-warning-200:focus { - color: var(--pgn-color-action-default-warning-200) !important; +a.bg-success:hover, +a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { + background-color: var(--pgn-color-action-default-success-base) !important; } -.border-warning-200 { - border-color: var(--pgn-color-warning-200) !important; +.text-success { + color: var(--pgn-color-success-base) !important; } -.bg-warning-300 { - background-color: var(--pgn-color-warning-300) !important; +a.text-success:hover, +a.text-success:focus { + color: var(--pgn-color-action-default-success-base) !important; } -a.bg-warning-300:hover, -a.bg-warning-300:focus, -button.bg-warning-300:hover, -button.bg-warning-300:focus { - background-color: var(--pgn-color-action-default-warning-300) !important; +.border-success { + border-color: var(--pgn-color-success-base) !important; } -.text-warning-300 { - color: var(--pgn-color-warning-300) !important; +.bg-success-900 { + background-color: var(--pgn-color-success-900) !important; } -a.text-warning-300:hover, -a.text-warning-300:focus { - color: var(--pgn-color-action-default-warning-300) !important; +a.bg-success-900:hover, +a.bg-success-900:focus, +button.bg-success-900:hover, +button.bg-success-900:focus { + background-color: var(--pgn-color-action-default-success-900) !important; } -.border-warning-300 { - border-color: var(--pgn-color-warning-300) !important; +.text-success-900 { + color: var(--pgn-color-success-900) !important; } -.bg-warning-400 { - background-color: var(--pgn-color-warning-400) !important; +a.text-success-900:hover, +a.text-success-900:focus { + color: var(--pgn-color-action-default-success-900) !important; } -a.bg-warning-400:hover, -a.bg-warning-400:focus, -button.bg-warning-400:hover, -button.bg-warning-400:focus { - background-color: var(--pgn-color-action-default-warning-400) !important; +.border-success-900 { + border-color: var(--pgn-color-success-900) !important; } -.text-warning-400 { - color: var(--pgn-color-warning-400) !important; +.bg-success-800 { + background-color: var(--pgn-color-success-800) !important; } -a.text-warning-400:hover, -a.text-warning-400:focus { - color: var(--pgn-color-action-default-warning-400) !important; +a.bg-success-800:hover, +a.bg-success-800:focus, +button.bg-success-800:hover, +button.bg-success-800:focus { + background-color: var(--pgn-color-action-default-success-800) !important; } -.border-warning-400 { - border-color: var(--pgn-color-warning-400) !important; +.text-success-800 { + color: var(--pgn-color-success-800) !important; } -.bg-warning-500 { - background-color: var(--pgn-color-warning-500) !important; +a.text-success-800:hover, +a.text-success-800:focus { + color: var(--pgn-color-action-default-success-800) !important; } -a.bg-warning-500:hover, -a.bg-warning-500:focus, -button.bg-warning-500:hover, -button.bg-warning-500:focus { - background-color: var(--pgn-color-action-default-warning-500) !important; +.border-success-800 { + border-color: var(--pgn-color-success-800) !important; } -.text-warning-500 { - color: var(--pgn-color-warning-500) !important; +.bg-success-700 { + background-color: var(--pgn-color-success-700) !important; } -a.text-warning-500:hover, -a.text-warning-500:focus { - color: var(--pgn-color-action-default-warning-500) !important; +a.bg-success-700:hover, +a.bg-success-700:focus, +button.bg-success-700:hover, +button.bg-success-700:focus { + background-color: var(--pgn-color-action-default-success-700) !important; } -.border-warning-500 { - border-color: var(--pgn-color-warning-500) !important; +.text-success-700 { + color: var(--pgn-color-success-700) !important; } -.bg-warning-600 { - background-color: var(--pgn-color-warning-600) !important; +a.text-success-700:hover, +a.text-success-700:focus { + color: var(--pgn-color-action-default-success-700) !important; } -a.bg-warning-600:hover, -a.bg-warning-600:focus, -button.bg-warning-600:hover, -button.bg-warning-600:focus { - background-color: var(--pgn-color-action-default-warning-600) !important; +.border-success-700 { + border-color: var(--pgn-color-success-700) !important; } -.text-warning-600 { - color: var(--pgn-color-warning-600) !important; +.bg-success-600 { + background-color: var(--pgn-color-success-600) !important; } -a.text-warning-600:hover, -a.text-warning-600:focus { - color: var(--pgn-color-action-default-warning-600) !important; +a.bg-success-600:hover, +a.bg-success-600:focus, +button.bg-success-600:hover, +button.bg-success-600:focus { + background-color: var(--pgn-color-action-default-success-600) !important; } -.border-warning-600 { - border-color: var(--pgn-color-warning-600) !important; +.text-success-600 { + color: var(--pgn-color-success-600) !important; } -.bg-warning-700 { - background-color: var(--pgn-color-warning-700) !important; +a.text-success-600:hover, +a.text-success-600:focus { + color: var(--pgn-color-action-default-success-600) !important; } -a.bg-warning-700:hover, -a.bg-warning-700:focus, -button.bg-warning-700:hover, -button.bg-warning-700:focus { - background-color: var(--pgn-color-action-default-warning-700) !important; +.border-success-600 { + border-color: var(--pgn-color-success-600) !important; } -.text-warning-700 { - color: var(--pgn-color-warning-700) !important; +.bg-success-500 { + background-color: var(--pgn-color-success-500) !important; } -a.text-warning-700:hover, -a.text-warning-700:focus { - color: var(--pgn-color-action-default-warning-700) !important; +a.bg-success-500:hover, +a.bg-success-500:focus, +button.bg-success-500:hover, +button.bg-success-500:focus { + background-color: var(--pgn-color-action-default-success-500) !important; } -.border-warning-700 { - border-color: var(--pgn-color-warning-700) !important; +.text-success-500 { + color: var(--pgn-color-success-500) !important; } -.bg-warning-800 { - background-color: var(--pgn-color-warning-800) !important; +a.text-success-500:hover, +a.text-success-500:focus { + color: var(--pgn-color-action-default-success-500) !important; } -a.bg-warning-800:hover, -a.bg-warning-800:focus, -button.bg-warning-800:hover, -button.bg-warning-800:focus { - background-color: var(--pgn-color-action-default-warning-800) !important; +.border-success-500 { + border-color: var(--pgn-color-success-500) !important; } -.text-warning-800 { - color: var(--pgn-color-warning-800) !important; +.bg-success-400 { + background-color: var(--pgn-color-success-400) !important; } -a.text-warning-800:hover, -a.text-warning-800:focus { - color: var(--pgn-color-action-default-warning-800) !important; +a.bg-success-400:hover, +a.bg-success-400:focus, +button.bg-success-400:hover, +button.bg-success-400:focus { + background-color: var(--pgn-color-action-default-success-400) !important; } -.border-warning-800 { - border-color: var(--pgn-color-warning-800) !important; +.text-success-400 { + color: var(--pgn-color-success-400) !important; } -.bg-warning-900 { - background-color: var(--pgn-color-warning-900) !important; +a.text-success-400:hover, +a.text-success-400:focus { + color: var(--pgn-color-action-default-success-400) !important; } -a.bg-warning-900:hover, -a.bg-warning-900:focus, -button.bg-warning-900:hover, -button.bg-warning-900:focus { - background-color: var(--pgn-color-action-default-warning-900) !important; +.border-success-400 { + border-color: var(--pgn-color-success-400) !important; } -.text-warning-900 { - color: var(--pgn-color-warning-900) !important; +.bg-success-300 { + background-color: var(--pgn-color-success-300) !important; } -a.text-warning-900:hover, -a.text-warning-900:focus { - color: var(--pgn-color-action-default-warning-900) !important; +a.bg-success-300:hover, +a.bg-success-300:focus, +button.bg-success-300:hover, +button.bg-success-300:focus { + background-color: var(--pgn-color-action-default-success-300) !important; } -.border-warning-900 { - border-color: var(--pgn-color-warning-900) !important; +.text-success-300 { + color: var(--pgn-color-success-300) !important; } -.bg-warning { - background-color: var(--pgn-color-warning-base) !important; +a.text-success-300:hover, +a.text-success-300:focus { + color: var(--pgn-color-action-default-success-300) !important; } -a.bg-warning:hover, -a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: var(--pgn-color-action-default-warning-base) !important; +.border-success-300 { + border-color: var(--pgn-color-success-300) !important; } -.text-warning { - color: var(--pgn-color-warning-base) !important; +.bg-success-200 { + background-color: var(--pgn-color-success-200) !important; } -a.text-warning:hover, -a.text-warning:focus { - color: var(--pgn-color-action-default-warning-base) !important; +a.bg-success-200:hover, +a.bg-success-200:focus, +button.bg-success-200:hover, +button.bg-success-200:focus { + background-color: var(--pgn-color-action-default-success-200) !important; } -.border-warning { - border-color: var(--pgn-color-warning-base) !important; +.text-success-200 { + color: var(--pgn-color-success-200) !important; } -.bg-danger-100 { - background-color: var(--pgn-color-danger-100) !important; +a.text-success-200:hover, +a.text-success-200:focus { + color: var(--pgn-color-action-default-success-200) !important; } -a.bg-danger-100:hover, -a.bg-danger-100:focus, -button.bg-danger-100:hover, -button.bg-danger-100:focus { - background-color: var(--pgn-color-action-default-danger-100) !important; +.border-success-200 { + border-color: var(--pgn-color-success-200) !important; } -.text-danger-100 { - color: var(--pgn-color-danger-100) !important; +.bg-success-100 { + background-color: var(--pgn-color-success-100) !important; } -a.text-danger-100:hover, -a.text-danger-100:focus { - color: var(--pgn-color-action-default-danger-100) !important; +a.bg-success-100:hover, +a.bg-success-100:focus, +button.bg-success-100:hover, +button.bg-success-100:focus { + background-color: var(--pgn-color-action-default-success-100) !important; } -.border-danger-100 { - border-color: var(--pgn-color-danger-100) !important; +.text-success-100 { + color: var(--pgn-color-success-100) !important; } -.bg-danger-200 { - background-color: var(--pgn-color-danger-200) !important; +a.text-success-100:hover, +a.text-success-100:focus { + color: var(--pgn-color-action-default-success-100) !important; } -a.bg-danger-200:hover, -a.bg-danger-200:focus, -button.bg-danger-200:hover, -button.bg-danger-200:focus { - background-color: var(--pgn-color-action-default-danger-200) !important; +.border-success-100 { + border-color: var(--pgn-color-success-100) !important; } -.text-danger-200 { - color: var(--pgn-color-danger-200) !important; +.bg-brand-900 { + background-color: var(--pgn-color-brand-900) !important; } -a.text-danger-200:hover, -a.text-danger-200:focus { - color: var(--pgn-color-action-default-danger-200) !important; +a.bg-brand-900:hover, +a.bg-brand-900:focus, +button.bg-brand-900:hover, +button.bg-brand-900:focus { + background-color: var(--pgn-color-action-default-brand-900) !important; } -.border-danger-200 { - border-color: var(--pgn-color-danger-200) !important; +.text-brand-900 { + color: var(--pgn-color-brand-900) !important; } -.bg-danger-300 { - background-color: var(--pgn-color-danger-300) !important; +a.text-brand-900:hover, +a.text-brand-900:focus { + color: var(--pgn-color-action-default-brand-900) !important; } -a.bg-danger-300:hover, -a.bg-danger-300:focus, -button.bg-danger-300:hover, -button.bg-danger-300:focus { - background-color: var(--pgn-color-action-default-danger-300) !important; +.border-brand-900 { + border-color: var(--pgn-color-brand-900) !important; } -.text-danger-300 { - color: var(--pgn-color-danger-300) !important; +.bg-brand-800 { + background-color: var(--pgn-color-brand-800) !important; } -a.text-danger-300:hover, -a.text-danger-300:focus { - color: var(--pgn-color-action-default-danger-300) !important; +a.bg-brand-800:hover, +a.bg-brand-800:focus, +button.bg-brand-800:hover, +button.bg-brand-800:focus { + background-color: var(--pgn-color-action-default-brand-800) !important; } -.border-danger-300 { - border-color: var(--pgn-color-danger-300) !important; +.text-brand-800 { + color: var(--pgn-color-brand-800) !important; } -.bg-danger-400 { - background-color: var(--pgn-color-danger-400) !important; +a.text-brand-800:hover, +a.text-brand-800:focus { + color: var(--pgn-color-action-default-brand-800) !important; } -a.bg-danger-400:hover, -a.bg-danger-400:focus, -button.bg-danger-400:hover, -button.bg-danger-400:focus { - background-color: var(--pgn-color-action-default-danger-400) !important; +.border-brand-800 { + border-color: var(--pgn-color-brand-800) !important; } -.text-danger-400 { - color: var(--pgn-color-danger-400) !important; +.bg-brand-700 { + background-color: var(--pgn-color-brand-700) !important; } -a.text-danger-400:hover, -a.text-danger-400:focus { - color: var(--pgn-color-action-default-danger-400) !important; +a.bg-brand-700:hover, +a.bg-brand-700:focus, +button.bg-brand-700:hover, +button.bg-brand-700:focus { + background-color: var(--pgn-color-action-default-brand-700) !important; } -.border-danger-400 { - border-color: var(--pgn-color-danger-400) !important; +.text-brand-700 { + color: var(--pgn-color-brand-700) !important; } -.bg-danger-500 { - background-color: var(--pgn-color-danger-500) !important; +a.text-brand-700:hover, +a.text-brand-700:focus { + color: var(--pgn-color-action-default-brand-700) !important; } -a.bg-danger-500:hover, -a.bg-danger-500:focus, -button.bg-danger-500:hover, -button.bg-danger-500:focus { - background-color: var(--pgn-color-action-default-danger-500) !important; +.border-brand-700 { + border-color: var(--pgn-color-brand-700) !important; } -.text-danger-500 { - color: var(--pgn-color-danger-500) !important; +.bg-brand-600 { + background-color: var(--pgn-color-brand-600) !important; } -a.text-danger-500:hover, -a.text-danger-500:focus { - color: var(--pgn-color-action-default-danger-500) !important; +a.bg-brand-600:hover, +a.bg-brand-600:focus, +button.bg-brand-600:hover, +button.bg-brand-600:focus { + background-color: var(--pgn-color-action-default-brand-600) !important; } -.border-danger-500 { - border-color: var(--pgn-color-danger-500) !important; +.text-brand-600 { + color: var(--pgn-color-brand-600) !important; } -.bg-danger-600 { - background-color: var(--pgn-color-danger-600) !important; +a.text-brand-600:hover, +a.text-brand-600:focus { + color: var(--pgn-color-action-default-brand-600) !important; } -a.bg-danger-600:hover, -a.bg-danger-600:focus, -button.bg-danger-600:hover, -button.bg-danger-600:focus { - background-color: var(--pgn-color-action-default-danger-600) !important; +.border-brand-600 { + border-color: var(--pgn-color-brand-600) !important; } -.text-danger-600 { - color: var(--pgn-color-danger-600) !important; +.bg-brand-500 { + background-color: var(--pgn-color-brand-500) !important; } -a.text-danger-600:hover, -a.text-danger-600:focus { - color: var(--pgn-color-action-default-danger-600) !important; +a.bg-brand-500:hover, +a.bg-brand-500:focus, +button.bg-brand-500:hover, +button.bg-brand-500:focus { + background-color: var(--pgn-color-action-default-brand-500) !important; } -.border-danger-600 { - border-color: var(--pgn-color-danger-600) !important; +.text-brand-500 { + color: var(--pgn-color-brand-500) !important; } -.bg-danger-700 { - background-color: var(--pgn-color-danger-700) !important; +a.text-brand-500:hover, +a.text-brand-500:focus { + color: var(--pgn-color-action-default-brand-500) !important; } -a.bg-danger-700:hover, -a.bg-danger-700:focus, -button.bg-danger-700:hover, -button.bg-danger-700:focus { - background-color: var(--pgn-color-action-default-danger-700) !important; +.border-brand-500 { + border-color: var(--pgn-color-brand-500) !important; } -.text-danger-700 { - color: var(--pgn-color-danger-700) !important; +.bg-brand-400 { + background-color: var(--pgn-color-brand-400) !important; } -a.text-danger-700:hover, -a.text-danger-700:focus { - color: var(--pgn-color-action-default-danger-700) !important; +a.bg-brand-400:hover, +a.bg-brand-400:focus, +button.bg-brand-400:hover, +button.bg-brand-400:focus { + background-color: var(--pgn-color-action-default-brand-400) !important; } -.border-danger-700 { - border-color: var(--pgn-color-danger-700) !important; +.text-brand-400 { + color: var(--pgn-color-brand-400) !important; } -.bg-danger-800 { - background-color: var(--pgn-color-danger-800) !important; +a.text-brand-400:hover, +a.text-brand-400:focus { + color: var(--pgn-color-action-default-brand-400) !important; } -a.bg-danger-800:hover, -a.bg-danger-800:focus, -button.bg-danger-800:hover, -button.bg-danger-800:focus { - background-color: var(--pgn-color-action-default-danger-800) !important; +.border-brand-400 { + border-color: var(--pgn-color-brand-400) !important; } -.text-danger-800 { - color: var(--pgn-color-danger-800) !important; +.bg-brand-300 { + background-color: var(--pgn-color-brand-300) !important; } -a.text-danger-800:hover, -a.text-danger-800:focus { - color: var(--pgn-color-action-default-danger-800) !important; +a.bg-brand-300:hover, +a.bg-brand-300:focus, +button.bg-brand-300:hover, +button.bg-brand-300:focus { + background-color: var(--pgn-color-action-default-brand-300) !important; } -.border-danger-800 { - border-color: var(--pgn-color-danger-800) !important; +.text-brand-300 { + color: var(--pgn-color-brand-300) !important; } -.bg-danger-900 { - background-color: var(--pgn-color-danger-900) !important; +a.text-brand-300:hover, +a.text-brand-300:focus { + color: var(--pgn-color-action-default-brand-300) !important; } -a.bg-danger-900:hover, -a.bg-danger-900:focus, -button.bg-danger-900:hover, -button.bg-danger-900:focus { - background-color: var(--pgn-color-action-default-danger-900) !important; +.border-brand-300 { + border-color: var(--pgn-color-brand-300) !important; } -.text-danger-900 { - color: var(--pgn-color-danger-900) !important; +.bg-brand-200 { + background-color: var(--pgn-color-brand-200) !important; } -a.text-danger-900:hover, -a.text-danger-900:focus { - color: var(--pgn-color-action-default-danger-900) !important; +a.bg-brand-200:hover, +a.bg-brand-200:focus, +button.bg-brand-200:hover, +button.bg-brand-200:focus { + background-color: var(--pgn-color-action-default-brand-200) !important; } -.border-danger-900 { - border-color: var(--pgn-color-danger-900) !important; +.text-brand-200 { + color: var(--pgn-color-brand-200) !important; } -.bg-danger { - background-color: var(--pgn-color-danger-base) !important; +a.text-brand-200:hover, +a.text-brand-200:focus { + color: var(--pgn-color-action-default-brand-200) !important; } -a.bg-danger:hover, -a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: var(--pgn-color-action-default-danger-base) !important; +.border-brand-200 { + border-color: var(--pgn-color-brand-200) !important; } -.text-danger { - color: var(--pgn-color-danger-base) !important; +.bg-brand-100 { + background-color: var(--pgn-color-brand-100) !important; } -a.text-danger:hover, -a.text-danger:focus { - color: var(--pgn-color-action-default-danger-base) !important; +a.bg-brand-100:hover, +a.bg-brand-100:focus, +button.bg-brand-100:hover, +button.bg-brand-100:focus { + background-color: var(--pgn-color-action-default-brand-100) !important; } -.border-danger { - border-color: var(--pgn-color-danger-base) !important; +.text-brand-100 { + color: var(--pgn-color-brand-100) !important; } -.bg-light-100 { - background-color: var(--pgn-color-light-100) !important; +a.text-brand-100:hover, +a.text-brand-100:focus { + color: var(--pgn-color-action-default-brand-100) !important; } -a.bg-light-100:hover, -a.bg-light-100:focus, -button.bg-light-100:hover, -button.bg-light-100:focus { - background-color: var(--pgn-color-action-default-light-100) !important; +.border-brand-100 { + border-color: var(--pgn-color-brand-100) !important; } -.text-light-100 { - color: var(--pgn-color-light-100) !important; +.bg-secondary { + background-color: var(--pgn-color-secondary-base) !important; } -a.text-light-100:hover, -a.text-light-100:focus { - color: var(--pgn-color-action-default-light-100) !important; +a.bg-secondary:hover, +a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { + background-color: var(--pgn-color-action-default-secondary-base) !important; } -.border-light-100 { - border-color: var(--pgn-color-light-100) !important; +.text-secondary { + color: var(--pgn-color-secondary-base) !important; } -.bg-light-200 { - background-color: var(--pgn-color-light-200) !important; +a.text-secondary:hover, +a.text-secondary:focus { + color: var(--pgn-color-action-default-secondary-base) !important; } -a.bg-light-200:hover, -a.bg-light-200:focus, -button.bg-light-200:hover, -button.bg-light-200:focus { - background-color: var(--pgn-color-action-default-light-200) !important; +.border-secondary { + border-color: var(--pgn-color-secondary-base) !important; } -.text-light-200 { - color: var(--pgn-color-light-200) !important; +.bg-secondary-900 { + background-color: var(--pgn-color-secondary-900) !important; } -a.text-light-200:hover, -a.text-light-200:focus { - color: var(--pgn-color-action-default-light-200) !important; +a.bg-secondary-900:hover, +a.bg-secondary-900:focus, +button.bg-secondary-900:hover, +button.bg-secondary-900:focus { + background-color: var(--pgn-color-action-default-secondary-900) !important; +} + +.text-secondary-900 { + color: var(--pgn-color-secondary-900) !important; } -.border-light-200 { - border-color: var(--pgn-color-light-200) !important; +a.text-secondary-900:hover, +a.text-secondary-900:focus { + color: var(--pgn-color-action-default-secondary-900) !important; } -.bg-light-300 { - background-color: var(--pgn-color-light-300) !important; +.border-secondary-900 { + border-color: var(--pgn-color-secondary-900) !important; } -a.bg-light-300:hover, -a.bg-light-300:focus, -button.bg-light-300:hover, -button.bg-light-300:focus { - background-color: var(--pgn-color-action-default-light-300) !important; +.bg-secondary-800 { + background-color: var(--pgn-color-secondary-800) !important; } -.text-light-300 { - color: var(--pgn-color-light-300) !important; +a.bg-secondary-800:hover, +a.bg-secondary-800:focus, +button.bg-secondary-800:hover, +button.bg-secondary-800:focus { + background-color: var(--pgn-color-action-default-secondary-800) !important; } -a.text-light-300:hover, -a.text-light-300:focus { - color: var(--pgn-color-action-default-light-300) !important; +.text-secondary-800 { + color: var(--pgn-color-secondary-800) !important; } -.border-light-300 { - border-color: var(--pgn-color-light-300) !important; +a.text-secondary-800:hover, +a.text-secondary-800:focus { + color: var(--pgn-color-action-default-secondary-800) !important; } -.bg-light-400 { - background-color: var(--pgn-color-light-400) !important; +.border-secondary-800 { + border-color: var(--pgn-color-secondary-800) !important; } -a.bg-light-400:hover, -a.bg-light-400:focus, -button.bg-light-400:hover, -button.bg-light-400:focus { - background-color: var(--pgn-color-action-default-light-400) !important; +.bg-secondary-700 { + background-color: var(--pgn-color-secondary-700) !important; } -.text-light-400 { - color: var(--pgn-color-light-400) !important; +a.bg-secondary-700:hover, +a.bg-secondary-700:focus, +button.bg-secondary-700:hover, +button.bg-secondary-700:focus { + background-color: var(--pgn-color-action-default-secondary-700) !important; } -a.text-light-400:hover, -a.text-light-400:focus { - color: var(--pgn-color-action-default-light-400) !important; +.text-secondary-700 { + color: var(--pgn-color-secondary-700) !important; } -.border-light-400 { - border-color: var(--pgn-color-light-400) !important; +a.text-secondary-700:hover, +a.text-secondary-700:focus { + color: var(--pgn-color-action-default-secondary-700) !important; } -.bg-light-500 { - background-color: var(--pgn-color-light-500) !important; +.border-secondary-700 { + border-color: var(--pgn-color-secondary-700) !important; } -a.bg-light-500:hover, -a.bg-light-500:focus, -button.bg-light-500:hover, -button.bg-light-500:focus { - background-color: var(--pgn-color-action-default-light-500) !important; +.bg-secondary-600 { + background-color: var(--pgn-color-secondary-600) !important; } -.text-light-500 { - color: var(--pgn-color-light-500) !important; +a.bg-secondary-600:hover, +a.bg-secondary-600:focus, +button.bg-secondary-600:hover, +button.bg-secondary-600:focus { + background-color: var(--pgn-color-action-default-secondary-600) !important; } -a.text-light-500:hover, -a.text-light-500:focus { - color: var(--pgn-color-action-default-light-500) !important; +.text-secondary-600 { + color: var(--pgn-color-secondary-600) !important; } -.border-light-500 { - border-color: var(--pgn-color-light-500) !important; +a.text-secondary-600:hover, +a.text-secondary-600:focus { + color: var(--pgn-color-action-default-secondary-600) !important; } -.bg-light-600 { - background-color: var(--pgn-color-light-600) !important; +.border-secondary-600 { + border-color: var(--pgn-color-secondary-600) !important; } -a.bg-light-600:hover, -a.bg-light-600:focus, -button.bg-light-600:hover, -button.bg-light-600:focus { - background-color: var(--pgn-color-action-default-light-600) !important; +.bg-secondary-500 { + background-color: var(--pgn-color-secondary-500) !important; } -.text-light-600 { - color: var(--pgn-color-light-600) !important; +a.bg-secondary-500:hover, +a.bg-secondary-500:focus, +button.bg-secondary-500:hover, +button.bg-secondary-500:focus { + background-color: var(--pgn-color-action-default-secondary-500) !important; } -a.text-light-600:hover, -a.text-light-600:focus { - color: var(--pgn-color-action-default-light-600) !important; +.text-secondary-500 { + color: var(--pgn-color-secondary-500) !important; } -.border-light-600 { - border-color: var(--pgn-color-light-600) !important; +a.text-secondary-500:hover, +a.text-secondary-500:focus { + color: var(--pgn-color-action-default-secondary-500) !important; } -.bg-light-700 { - background-color: var(--pgn-color-light-700) !important; +.border-secondary-500 { + border-color: var(--pgn-color-secondary-500) !important; } -a.bg-light-700:hover, -a.bg-light-700:focus, -button.bg-light-700:hover, -button.bg-light-700:focus { - background-color: var(--pgn-color-action-default-light-700) !important; +.bg-secondary-400 { + background-color: var(--pgn-color-secondary-400) !important; } -.text-light-700 { - color: var(--pgn-color-light-700) !important; +a.bg-secondary-400:hover, +a.bg-secondary-400:focus, +button.bg-secondary-400:hover, +button.bg-secondary-400:focus { + background-color: var(--pgn-color-action-default-secondary-400) !important; } -a.text-light-700:hover, -a.text-light-700:focus { - color: var(--pgn-color-action-default-light-700) !important; +.text-secondary-400 { + color: var(--pgn-color-secondary-400) !important; } -.border-light-700 { - border-color: var(--pgn-color-light-700) !important; +a.text-secondary-400:hover, +a.text-secondary-400:focus { + color: var(--pgn-color-action-default-secondary-400) !important; } -.bg-light-800 { - background-color: var(--pgn-color-light-800) !important; +.border-secondary-400 { + border-color: var(--pgn-color-secondary-400) !important; } -a.bg-light-800:hover, -a.bg-light-800:focus, -button.bg-light-800:hover, -button.bg-light-800:focus { - background-color: var(--pgn-color-action-default-light-800) !important; +.bg-secondary-300 { + background-color: var(--pgn-color-secondary-300) !important; } -.text-light-800 { - color: var(--pgn-color-light-800) !important; +a.bg-secondary-300:hover, +a.bg-secondary-300:focus, +button.bg-secondary-300:hover, +button.bg-secondary-300:focus { + background-color: var(--pgn-color-action-default-secondary-300) !important; } -a.text-light-800:hover, -a.text-light-800:focus { - color: var(--pgn-color-action-default-light-800) !important; +.text-secondary-300 { + color: var(--pgn-color-secondary-300) !important; } -.border-light-800 { - border-color: var(--pgn-color-light-800) !important; +a.text-secondary-300:hover, +a.text-secondary-300:focus { + color: var(--pgn-color-action-default-secondary-300) !important; } -.bg-light-900 { - background-color: var(--pgn-color-light-900) !important; +.border-secondary-300 { + border-color: var(--pgn-color-secondary-300) !important; } -a.bg-light-900:hover, -a.bg-light-900:focus, -button.bg-light-900:hover, -button.bg-light-900:focus { - background-color: var(--pgn-color-action-default-light-900) !important; +.bg-secondary-200 { + background-color: var(--pgn-color-secondary-200) !important; } -.text-light-900 { - color: var(--pgn-color-light-900) !important; +a.bg-secondary-200:hover, +a.bg-secondary-200:focus, +button.bg-secondary-200:hover, +button.bg-secondary-200:focus { + background-color: var(--pgn-color-action-default-secondary-200) !important; } -a.text-light-900:hover, -a.text-light-900:focus { - color: var(--pgn-color-action-default-light-900) !important; +.text-secondary-200 { + color: var(--pgn-color-secondary-200) !important; } -.border-light-900 { - border-color: var(--pgn-color-light-900) !important; +a.text-secondary-200:hover, +a.text-secondary-200:focus { + color: var(--pgn-color-action-default-secondary-200) !important; } -.bg-light { - background-color: var(--pgn-color-light-base) !important; +.border-secondary-200 { + border-color: var(--pgn-color-secondary-200) !important; } -a.bg-light:hover, -a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: var(--pgn-color-action-default-light-base) !important; +.bg-secondary-100 { + background-color: var(--pgn-color-secondary-100) !important; } -.text-light { - color: var(--pgn-color-light-base) !important; +a.bg-secondary-100:hover, +a.bg-secondary-100:focus, +button.bg-secondary-100:hover, +button.bg-secondary-100:focus { + background-color: var(--pgn-color-action-default-secondary-100) !important; } -a.text-light:hover, -a.text-light:focus { - color: var(--pgn-color-action-default-light-base) !important; +.text-secondary-100 { + color: var(--pgn-color-secondary-100) !important; } -.border-light { - border-color: var(--pgn-color-light-base) !important; +a.text-secondary-100:hover, +a.text-secondary-100:focus { + color: var(--pgn-color-action-default-secondary-100) !important; } -.bg-dark-100 { - background-color: var(--pgn-color-dark-100) !important; +.border-secondary-100 { + border-color: var(--pgn-color-secondary-100) !important; } -a.bg-dark-100:hover, -a.bg-dark-100:focus, -button.bg-dark-100:hover, -button.bg-dark-100:focus { - background-color: var(--pgn-color-action-default-dark-100) !important; +.bg-primary-900 { + background-color: var(--pgn-color-primary-900) !important; } -.text-dark-100 { - color: var(--pgn-color-dark-100) !important; +a.bg-primary-900:hover, +a.bg-primary-900:focus, +button.bg-primary-900:hover, +button.bg-primary-900:focus { + background-color: var(--pgn-color-action-default-primary-900) !important; } -a.text-dark-100:hover, -a.text-dark-100:focus { - color: var(--pgn-color-action-default-dark-100) !important; +.text-primary-900 { + color: var(--pgn-color-primary-900) !important; +} + +a.text-primary-900:hover, +a.text-primary-900:focus { + color: var(--pgn-color-action-default-primary-900) !important; } -.border-dark-100 { - border-color: var(--pgn-color-dark-100) !important; +.border-primary-900 { + border-color: var(--pgn-color-primary-900) !important; } -.bg-dark-200 { - background-color: var(--pgn-color-dark-200) !important; +.bg-primary-800 { + background-color: var(--pgn-color-primary-800) !important; } -a.bg-dark-200:hover, -a.bg-dark-200:focus, -button.bg-dark-200:hover, -button.bg-dark-200:focus { - background-color: var(--pgn-color-action-default-dark-200) !important; +a.bg-primary-800:hover, +a.bg-primary-800:focus, +button.bg-primary-800:hover, +button.bg-primary-800:focus { + background-color: var(--pgn-color-action-default-primary-800) !important; } -.text-dark-200 { - color: var(--pgn-color-dark-200) !important; +.text-primary-800 { + color: var(--pgn-color-primary-800) !important; } -a.text-dark-200:hover, -a.text-dark-200:focus { - color: var(--pgn-color-action-default-dark-200) !important; +a.text-primary-800:hover, +a.text-primary-800:focus { + color: var(--pgn-color-action-default-primary-800) !important; } -.border-dark-200 { - border-color: var(--pgn-color-dark-200) !important; +.border-primary-800 { + border-color: var(--pgn-color-primary-800) !important; } -.bg-dark-300 { - background-color: var(--pgn-color-dark-300) !important; +.bg-primary-700 { + background-color: var(--pgn-color-primary-700) !important; } -a.bg-dark-300:hover, -a.bg-dark-300:focus, -button.bg-dark-300:hover, -button.bg-dark-300:focus { - background-color: var(--pgn-color-action-default-dark-300) !important; +a.bg-primary-700:hover, +a.bg-primary-700:focus, +button.bg-primary-700:hover, +button.bg-primary-700:focus { + background-color: var(--pgn-color-action-default-primary-700) !important; } -.text-dark-300 { - color: var(--pgn-color-dark-300) !important; +.text-primary-700 { + color: var(--pgn-color-primary-700) !important; } -a.text-dark-300:hover, -a.text-dark-300:focus { - color: var(--pgn-color-action-default-dark-300) !important; +a.text-primary-700:hover, +a.text-primary-700:focus { + color: var(--pgn-color-action-default-primary-700) !important; } -.border-dark-300 { - border-color: var(--pgn-color-dark-300) !important; +.border-primary-700 { + border-color: var(--pgn-color-primary-700) !important; } -.bg-dark-400 { - background-color: var(--pgn-color-dark-400) !important; +.bg-primary-600 { + background-color: var(--pgn-color-primary-600) !important; } -a.bg-dark-400:hover, -a.bg-dark-400:focus, -button.bg-dark-400:hover, -button.bg-dark-400:focus { - background-color: var(--pgn-color-action-default-dark-400) !important; +a.bg-primary-600:hover, +a.bg-primary-600:focus, +button.bg-primary-600:hover, +button.bg-primary-600:focus { + background-color: var(--pgn-color-action-default-primary-600) !important; } -.text-dark-400 { - color: var(--pgn-color-dark-400) !important; +.text-primary-600 { + color: var(--pgn-color-primary-600) !important; } -a.text-dark-400:hover, -a.text-dark-400:focus { - color: var(--pgn-color-action-default-dark-400) !important; +a.text-primary-600:hover, +a.text-primary-600:focus { + color: var(--pgn-color-action-default-primary-600) !important; } -.border-dark-400 { - border-color: var(--pgn-color-dark-400) !important; +.border-primary-600 { + border-color: var(--pgn-color-primary-600) !important; } -.bg-dark-500 { - background-color: var(--pgn-color-dark-500) !important; +.bg-primary-500 { + background-color: var(--pgn-color-primary-500) !important; } -a.bg-dark-500:hover, -a.bg-dark-500:focus, -button.bg-dark-500:hover, -button.bg-dark-500:focus { - background-color: var(--pgn-color-action-default-dark-500) !important; +a.bg-primary-500:hover, +a.bg-primary-500:focus, +button.bg-primary-500:hover, +button.bg-primary-500:focus { + background-color: var(--pgn-color-action-default-primary-500) !important; } -.text-dark-500 { - color: var(--pgn-color-dark-500) !important; +.text-primary-500 { + color: var(--pgn-color-primary-500) !important; } -a.text-dark-500:hover, -a.text-dark-500:focus { - color: var(--pgn-color-action-default-dark-500) !important; +a.text-primary-500:hover, +a.text-primary-500:focus { + color: var(--pgn-color-action-default-primary-500) !important; } -.border-dark-500 { - border-color: var(--pgn-color-dark-500) !important; +.border-primary-500 { + border-color: var(--pgn-color-primary-500) !important; } -.bg-dark-600 { - background-color: var(--pgn-color-dark-600) !important; +.bg-primary-400 { + background-color: var(--pgn-color-primary-400) !important; } -a.bg-dark-600:hover, -a.bg-dark-600:focus, -button.bg-dark-600:hover, -button.bg-dark-600:focus { - background-color: var(--pgn-color-action-default-dark-600) !important; +a.bg-primary-400:hover, +a.bg-primary-400:focus, +button.bg-primary-400:hover, +button.bg-primary-400:focus { + background-color: var(--pgn-color-action-default-primary-400) !important; } -.text-dark-600 { - color: var(--pgn-color-dark-600) !important; +.text-primary-400 { + color: var(--pgn-color-primary-400) !important; } -a.text-dark-600:hover, -a.text-dark-600:focus { - color: var(--pgn-color-action-default-dark-600) !important; +a.text-primary-400:hover, +a.text-primary-400:focus { + color: var(--pgn-color-action-default-primary-400) !important; } -.border-dark-600 { - border-color: var(--pgn-color-dark-600) !important; +.border-primary-400 { + border-color: var(--pgn-color-primary-400) !important; } -.bg-dark-700 { - background-color: var(--pgn-color-dark-700) !important; +.bg-primary-300 { + background-color: var(--pgn-color-primary-300) !important; } -a.bg-dark-700:hover, -a.bg-dark-700:focus, -button.bg-dark-700:hover, -button.bg-dark-700:focus { - background-color: var(--pgn-color-action-default-dark-700) !important; +a.bg-primary-300:hover, +a.bg-primary-300:focus, +button.bg-primary-300:hover, +button.bg-primary-300:focus { + background-color: var(--pgn-color-action-default-primary-300) !important; } -.text-dark-700 { - color: var(--pgn-color-dark-700) !important; +.text-primary-300 { + color: var(--pgn-color-primary-300) !important; } -a.text-dark-700:hover, -a.text-dark-700:focus { - color: var(--pgn-color-action-default-dark-700) !important; +a.text-primary-300:hover, +a.text-primary-300:focus { + color: var(--pgn-color-action-default-primary-300) !important; } -.border-dark-700 { - border-color: var(--pgn-color-dark-700) !important; +.border-primary-300 { + border-color: var(--pgn-color-primary-300) !important; } -.bg-dark-800 { - background-color: var(--pgn-color-dark-800) !important; +.bg-primary-200 { + background-color: var(--pgn-color-primary-200) !important; } -a.bg-dark-800:hover, -a.bg-dark-800:focus, -button.bg-dark-800:hover, -button.bg-dark-800:focus { - background-color: var(--pgn-color-action-default-dark-800) !important; +a.bg-primary-200:hover, +a.bg-primary-200:focus, +button.bg-primary-200:hover, +button.bg-primary-200:focus { + background-color: var(--pgn-color-action-default-primary-200) !important; } -.text-dark-800 { - color: var(--pgn-color-dark-800) !important; +.text-primary-200 { + color: var(--pgn-color-primary-200) !important; } -a.text-dark-800:hover, -a.text-dark-800:focus { - color: var(--pgn-color-action-default-dark-800) !important; +a.text-primary-200:hover, +a.text-primary-200:focus { + color: var(--pgn-color-action-default-primary-200) !important; } -.border-dark-800 { - border-color: var(--pgn-color-dark-800) !important; +.border-primary-200 { + border-color: var(--pgn-color-primary-200) !important; } -.bg-dark-900 { - background-color: var(--pgn-color-dark-900) !important; +.bg-primary-100 { + background-color: var(--pgn-color-primary-100) !important; } -a.bg-dark-900:hover, -a.bg-dark-900:focus, -button.bg-dark-900:hover, -button.bg-dark-900:focus { - background-color: var(--pgn-color-action-default-dark-900) !important; +a.bg-primary-100:hover, +a.bg-primary-100:focus, +button.bg-primary-100:hover, +button.bg-primary-100:focus { + background-color: var(--pgn-color-action-default-primary-100) !important; } -.text-dark-900 { - color: var(--pgn-color-dark-900) !important; +.text-primary-100 { + color: var(--pgn-color-primary-100) !important; } -a.text-dark-900:hover, -a.text-dark-900:focus { - color: var(--pgn-color-action-default-dark-900) !important; +a.text-primary-100:hover, +a.text-primary-100:focus { + color: var(--pgn-color-action-default-primary-100) !important; } -.border-dark-900 { - border-color: var(--pgn-color-dark-900) !important; +.border-primary-100 { + border-color: var(--pgn-color-primary-100) !important; } -.bg-dark { - background-color: var(--pgn-color-dark-base) !important; +.bg-gray-500 { + background-color: var(--pgn-color-gray-500) !important; } -a.bg-dark:hover, -a.bg-dark:focus, -button.bg-dark:hover, -button.bg-dark:focus { - background-color: var(--pgn-color-action-default-dark-base) !important; +a.bg-gray-500:hover, +a.bg-gray-500:focus, +button.bg-gray-500:hover, +button.bg-gray-500:focus { + background-color: var(--pgn-color-action-default-gray-500) !important; } -.text-dark { - color: var(--pgn-color-dark-base) !important; +.text-gray-500 { + color: var(--pgn-color-gray-500) !important; } -a.text-dark:hover, -a.text-dark:focus { - color: var(--pgn-color-action-default-dark-base) !important; +a.text-gray-500:hover, +a.text-gray-500:focus { + color: var(--pgn-color-action-default-gray-500) !important; } -.border-dark { - border-color: var(--pgn-color-dark-base) !important; +.border-gray-500 { + border-color: var(--pgn-color-gray-500) !important; } diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 5288529e80..4d0e84f314 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -1,4 +1,4 @@ -:root { +[object Promise]:root { --pgn-color-dark-base: #273F2FFF; --pgn-color-light-base: #E1DDDBFF; --pgn-color-brand-base: #9D0054FF; diff --git a/tokens/map-scss-to-css.js b/tokens/map-scss-to-css.js index 7b4aec04df..3c07bbb015 100644 --- a/tokens/map-scss-to-css.js +++ b/tokens/map-scss-to-css.js @@ -25,4 +25,4 @@ function mapSCSStoCSS(sourcePath) { return SCSStoCSSMap; } -export default mapSCSStoCSS; \ No newline at end of file +export default mapSCSStoCSS; diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index fe686c48ef..aee177d8ae 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -4,14 +4,14 @@ import * as toml from 'js-toml'; import StyleDictionary from 'style-dictionary'; import chroma from 'chroma-js'; -import { fileHeader, sortByReference, usesReferences, getReferences } from 'style-dictionary/utils'; +import { + fileHeader, sortByReference, usesReferences, getReferences, +} from 'style-dictionary/utils'; import { colorYiq, darken, lighten } from './sass-helpers.js'; import cssUtilities from './css-utilities.js'; import { composeBreakpointName } from './utils.js'; const colorTransform = (token, theme) => { - // console.log('style-dictionary.js - colorTransform =======>', token); - const { name: tokenName, value, @@ -23,7 +23,7 @@ const colorTransform = (token, theme) => { if (reservedColorValues.includes(original.value)) { return original.value; } - console.log('value =======>', value); + let color = chroma(value); if (modify && modify.length > 0) { @@ -71,18 +71,14 @@ const createCustomCSSVariables = ({ themeVariant, }) => { const { dictionary, options, file } = formatterArgs; - // console.log('style-dictionary.js - createCustomCSSVariables =======>', dictionary, options, file); const outputTokens = themeVariant ? dictionary.allTokens.filter(token => token.filePath.includes(themeVariant)) : dictionary.allTokens; const variables = outputTokens.sort(sortByReference(dictionary)).map(token => { let { value } = token; - // console.log('style-dictionary.js - token =======>', token); const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences; if (usesReferences(token.original.value) && outputReferencesForToken) { - // console.log('style-dictionary.js - refs =======>', token.original.value); - // console.log('style-dictionary.js - dictionary =======>', dictionary); const refs = getReferences(token.original.value, dictionary.tokens); refs.forEach(ref => { value = value.replace(ref.value, `var(--${ref.name})`); @@ -103,11 +99,7 @@ StyleDictionary.registerTransform({ transitive: true, type: 'value', filter: (token) => token.attributes.category === 'color' || token.value?.toString().startsWith('#'), - transform: (token) => { - // console.log('style-dictionary.js - color/sass-color-functions =======>', token); - return colorTransform(token); - }, - // transformer: colorTransform, + transform: (token) => colorTransform(token), }); /** @@ -119,17 +111,10 @@ StyleDictionary.registerTransform({ type: 'value', filter: (token) => token.modify && token.modify[0].type === 'str-replace', transform: (token) => { - console.log('style-dictionary.js - str-replace =======>', token); const { value, modify } = token; const { toReplace, replaceWith } = modify[0]; return value.replaceAll(toReplace, replaceWith); }, - // transformer(token) { - // console.log('style-dictionary.js - str-replace =======>', token); - // const { value, modify } = token; - // const { toReplace, replaceWith } = modify[0]; - // return value.replaceAll(toReplace, replaceWith); - // }, }); /** @@ -147,75 +132,81 @@ StyleDictionary.registerFormat({ * 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: ({ dictionary, file }) => { -// const { utilities } = dictionary.properties; - -// if (!utilities) { -// return ''; -// } - -// let utilityClasses = ''; - -// utilities.forEach(({ filters, utilityFunctionsToApply }) => { -// let tokens = dictionary.allTokens; - -// 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 = 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); -// } -// } -// }); - -// return fileHeader({ file }) + utilityClasses; -// }, -// }); +StyleDictionary.registerFormat({ + name: 'css/utility-classes', + format: async ({ dictionary, file }) => { + const { utilities } = dictionary.tokens; + + if (!utilities) { + return ''; + } + + let utilityClasses = ''; + + utilities.forEach(({ filters, utilityFunctionsToApply }) => { + let tokens = dictionary.allTokens; + + 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 = 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 = StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); + return header + utilityClasses; + }, +}); /** * 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: ({ dictionary, file }) => { -// console.log('style-dictionary.js - css/custom-media-breakpoints =======>', dictionary); -// const { breakpoint } = dictionary.properties.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`; -// } -// } - -// return fileHeader({ file }) + customMediaVariables; -// }, -// }); +StyleDictionary.registerFormat({ + name: 'css/custom-media-breakpoints', + format: ({ dictionary, file }) => { + 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`; + } + } + + return fileHeader({ file }) + customMediaVariables; + }, +}); /** * Custom file header for custom and built-in formatters. */ +// Регистрация кастомного fileHeader StyleDictionary.registerFileHeader({ name: 'customFileHeader', - fileHeader: (defaultMessage) => [ - 'IMPORTANT: This file is the result of assembling design tokens', - ...defaultMessage, - ], + fileHeader: (defaultMessages = []) => { + return [ + '/*', + ' * IMPORTANT: This file is the result of assembling design tokens.', + ' * Do not edit directly.', + ' */', + '', + ]; + }, }); /** @@ -224,10 +215,7 @@ StyleDictionary.registerFileHeader({ */ StyleDictionary.registerFilter({ name: 'isSource', - filter: token => { - // console.log('style-dictionary.js - isSource =======>', token); - return token?.isSource === true; - }, + filter: token => token.isSource === true, }); StyleDictionary.registerParser({ From 9c58f15fe15d1b9fac39b4efe448fe5c3331c0ac Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Tue, 20 Aug 2024 21:56:47 +0300 Subject: [PATCH 03/16] feat: DTCG format --- package.json | 4 +- styles/css/core/custom-media-breakpoints.css | 2 +- styles/css/core/variables.css | 400 +-- styles/css/themes/light/utility-classes.css | 2848 ++++++++--------- styles/css/themes/light/variables.css | 1306 ++++---- tokens/src/core/alias/size.json | 33 +- tokens/src/core/components/ActionRow.json | 11 +- tokens/src/core/components/Alert.json | 55 +- tokens/src/core/components/Annotation.json | 36 +- tokens/src/core/components/Avatar.json | 54 +- tokens/src/core/components/AvatarButton.json | 16 +- tokens/src/core/components/Badge.json | 50 +- tokens/src/core/components/Breadcrumb.json | 26 +- tokens/src/core/components/Bubble.json | 13 +- tokens/src/core/components/Button/core.json | 116 +- tokens/src/core/components/Card.json | 149 +- tokens/src/core/components/Carousel.json | 64 +- tokens/src/core/components/Chip.json | 48 +- tokens/src/core/components/ChipCarousel.json | 14 +- tokens/src/core/components/CloseButton.json | 8 +- tokens/src/core/components/Code.json | 33 +- tokens/src/core/components/Collapsible.json | 42 +- tokens/src/core/components/ColorPicker.json | 11 +- tokens/src/core/components/Container.json | 26 +- tokens/src/core/components/DataTable.json | 48 +- tokens/src/core/components/Dropdown.json | 73 +- tokens/src/core/components/Dropzone.json | 16 +- tokens/src/core/components/Form/other.json | 21 +- tokens/src/core/components/Form/size.json | 247 +- tokens/src/core/components/Form/spacing.json | 144 +- .../src/core/components/Form/transition.json | 13 +- .../src/core/components/Form/typography.json | 104 +- tokens/src/core/components/Icon.json | 26 +- tokens/src/core/components/IconButton.json | 16 +- tokens/src/core/components/Image.json | 21 +- tokens/src/core/components/Menu.json | 64 +- tokens/src/core/components/Modal.json | 76 +- tokens/src/core/components/Nav.json | 63 +- tokens/src/core/components/Navbar.json | 55 +- tokens/src/core/components/Pagination.json | 97 +- tokens/src/core/components/Popover.json | 74 +- tokens/src/core/components/ProductTour.json | 32 +- tokens/src/core/components/ProgressBar.json | 45 +- tokens/src/core/components/SearchField.json | 26 +- tokens/src/core/components/SelectableBox.json | 16 +- tokens/src/core/components/Sheet.json | 11 +- tokens/src/core/components/Spinner.json | 36 +- tokens/src/core/components/Stack.json | 6 +- tokens/src/core/components/Stepper.json | 47 +- tokens/src/core/components/Sticky.json | 6 +- tokens/src/core/components/Tab.json | 38 +- tokens/src/core/components/Tabs.json | 16 +- tokens/src/core/components/Toast.json | 41 +- tokens/src/core/components/Tooltip.json | 47 +- tokens/src/core/components/general/caret.json | 16 +- .../src/core/components/general/headings.json | 26 +- tokens/src/core/components/general/hr.json | 11 +- tokens/src/core/components/general/input.json | 76 +- tokens/src/core/components/general/link.json | 61 +- tokens/src/core/components/general/list.json | 33 +- tokens/src/core/components/general/text.json | 21 +- tokens/src/core/global/breakpoints.json | 31 +- tokens/src/core/global/display.json | 79 +- tokens/src/core/global/elevation.json | 68 +- tokens/src/core/global/other.json | 6 +- tokens/src/core/global/spacing.json | 87 +- tokens/src/core/global/transition.json | 21 +- tokens/src/core/global/typography.json | 233 +- tokens/src/core/utilities/color.json | 39 +- tokens/src/themes/light/alias/color.json | 368 ++- tokens/src/themes/light/components/Alert.json | 59 +- .../themes/light/components/Annotation.json | 59 +- .../src/themes/light/components/Avatar.json | 7 +- tokens/src/themes/light/components/Badge.json | 305 +- .../themes/light/components/Breadcrumb.json | 26 +- .../src/themes/light/components/Bubble.json | 41 +- .../themes/light/components/Button/brand.json | 331 +- .../themes/light/components/Button/core.json | 27 +- .../light/components/Button/danger.json | 326 +- .../themes/light/components/Button/dark.json | 335 +- .../themes/light/components/Button/info.json | 339 +- .../themes/light/components/Button/light.json | 337 +- .../light/components/Button/primary.json | 335 +- .../light/components/Button/secondary.json | 339 +- .../light/components/Button/success.json | 334 +- .../light/components/Button/tertiary.json | 156 +- .../light/components/Button/warning.json | 333 +- tokens/src/themes/light/components/Card.json | 51 +- .../src/themes/light/components/Carousel.json | 52 +- tokens/src/themes/light/components/Chip.json | 50 +- .../themes/light/components/CloseButton.json | 12 +- tokens/src/themes/light/components/Code.json | 29 +- .../themes/light/components/DataTable.json | 24 +- .../src/themes/light/components/Dropdown.json | 79 +- .../src/themes/light/components/Dropzone.json | 35 +- .../themes/light/components/Form/color.json | 350 +- .../light/components/Form/elevation.json | 63 +- .../themes/light/components/Form/other.json | 150 +- .../themes/light/components/IconButton.json | 1011 ++++-- tokens/src/themes/light/components/Image.json | 24 +- tokens/src/themes/light/components/Menu.json | 54 +- tokens/src/themes/light/components/Modal.json | 37 +- tokens/src/themes/light/components/Nav.json | 243 +- .../src/themes/light/components/Navbar.json | 182 +- .../light/components/OverflowScroll.json | 6 +- .../themes/light/components/PageBanner.json | 43 +- .../themes/light/components/Pagination.json | 87 +- .../src/themes/light/components/Popover.json | 101 +- .../themes/light/components/ProductTour.json | 46 +- .../themes/light/components/ProgressBar.json | 34 +- .../themes/light/components/Scrollable.json | 13 +- .../themes/light/components/SearchField.json | 37 +- tokens/src/themes/light/components/Sheet.json | 25 +- .../src/themes/light/components/Stepper.json | 37 +- .../src/themes/light/components/Sticky.json | 13 +- tokens/src/themes/light/components/Tab.json | 73 +- tokens/src/themes/light/components/Toast.json | 51 +- .../src/themes/light/components/Tooltip.json | 43 +- .../themes/light/components/general/body.json | 13 +- .../light/components/general/headings.json | 8 +- .../themes/light/components/general/hr.json | 16 +- .../light/components/general/input.json | 14 +- .../themes/light/components/general/link.json | 157 +- .../themes/light/components/general/list.json | 69 +- .../themes/light/components/general/text.json | 19 +- tokens/src/themes/light/global/color.json | 2515 ++++++++++----- tokens/src/themes/light/global/elevation.json | 169 +- tokens/src/themes/light/global/other.json | 2 +- tokens/style-dictionary.js | 42 +- 129 files changed, 11538 insertions(+), 6296 deletions(-) diff --git a/package.json b/package.json index 36a0f56a7f..a43aaf2160 100644 --- a/package.json +++ b/package.json @@ -199,10 +199,10 @@ ] }, "lint-staged": { - "*.{js,jsx,ts,tsx}": [ + "*.{mjs}": [ "npx eslint" ], - "*.scss": [ + "*.sass": [ "npx stylelint" ] }, diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css index c62b3261e1..00db050fdb 100644 --- a/styles/css/core/custom-media-breakpoints.css +++ b/styles/css/core/custom-media-breakpoints.css @@ -1,4 +1,4 @@ -[object Promise]@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem); +@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem); @custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px); @custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px); @custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px); diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index ac7307dc4e..e314d7e39e 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,4 +1,4 @@ -[object Promise]:root { +:root { --pgn-theme-interval: 8%; --pgn-other-form-control-custom-file-content: Browse; --pgn-other-form-control-custom-file-lang: en; @@ -36,6 +36,7 @@ --pgn-transition-carousel-control: opacity .15s ease; --pgn-transition-carousel-indicator: opacity .6s ease; --pgn-transition-carousel-duration: .6s; + --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; --pgn-transition-btn: none; --pgn-transition-badge: none; --pgn-typography-line-height-micro: .938rem; @@ -44,6 +45,7 @@ --pgn-typography-line-height-base: 1.5556rem; --pgn-typography-font-weight-table-th: normal; --pgn-typography-font-weight-lead: inherit; + --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); --pgn-typography-font-weight-bolder: bolder; --pgn-typography-font-weight-bold: 700; --pgn-typography-font-weight-semi-bold: 500; @@ -51,6 +53,12 @@ --pgn-typography-font-weight-light: 300; --pgn-typography-font-weight-lighter: lighter; --pgn-typography-font-size-micro: .688rem; + --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-size-mobile-h1: 2.25rem; --pgn-typography-font-size-h6: .75rem; --pgn-typography-font-size-h5: .875rem; @@ -67,7 +75,12 @@ --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-font-family-base: var(--pgn-typography-font-family-sans-serif); --pgn-typography-print-page-size: a3; + --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-display-mobile: 3.25rem; --pgn-typography-display-line-height-mobile: 3.5rem; --pgn-typography-display-line-height-base: 1rem; @@ -75,6 +88,9 @@ --pgn-typography-display-3: 5.625rem; --pgn-typography-display-2: 4.875rem; --pgn-typography-display-1: 3.75rem; + --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-link-decoration-brand-inline-hover: underline; --pgn-typography-link-decoration-brand-inline-base: underline; --pgn-typography-link-decoration-brand-hover: underline; @@ -87,6 +103,7 @@ --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.4286rem; --pgn-typography-input-btn-line-height-base: 1.3333rem; --pgn-typography-input-btn-font-size-lg: 1.325rem; @@ -94,26 +111,84 @@ --pgn-typography-input-btn-font-size-base: 1.125rem; --pgn-typography-input-btn-font-family: inherit; --pgn-typography-headings-line-height: 1.25rem; + --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: .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: .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: .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-small-base); + --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-small-x); --pgn-typography-dropdown-item-text-decoration: none; + --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: 87.5%; + --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-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-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); --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-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-base: 1rem; + --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-spacer-0: 0rem; --pgn-spacing-mark-padding: .2em; --pgn-spacing-paragraph-margin-bottom: 1rem; @@ -137,14 +212,18 @@ --pgn-spacing-toast-padding-y: .25rem; --pgn-spacing-toast-padding-x: .75rem; --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px; + --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: .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: .625rem; + --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .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: .25rem; --pgn-spacing-stepper-header-step-padding: .25rem; + --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base); --pgn-spacing-stepper-header-padding-y: .75rem; --pgn-spacing-vertical-align: .125em; --pgn-spacing-selectable-box-box-space: .75rem; @@ -153,6 +232,8 @@ --pgn-spacing-search-field-margin-button: .5rem; --pgn-spacing-progress-bar-hint-annotation-gap: .5rem; --pgn-spacing-popover-icon-margin-right: .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-pagination-padding-x-lg: 1.5rem; @@ -163,21 +244,40 @@ --pgn-spacing-pagination-padding-y-base: .625rem; --pgn-spacing-navbar-toggler-padding-x: .75rem; --pgn-spacing-navbar-toggler-padding-y: .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: .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-modal-dialog-margin: 1.5rem; --pgn-spacing-modal-header-padding-y: 1rem; + --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem; --pgn-spacing-modal-footer-padding-y: 1rem; + --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem; --pgn-spacing-modal-inner-padding-bottom: .7rem; --pgn-spacing-modal-inner-padding-base: 1.5rem; + --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left); --pgn-spacing-menu-item-icon-margin-left: .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: .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: .5625rem; --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem; --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem; + --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); + --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-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-group-margin-bottom: 1rem; @@ -188,9 +288,17 @@ --pgn-spacing-form-input-check-margin-x-inline: .3125rem; --pgn-spacing-form-input-check-margin-x-base: .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-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-dropdown-padding-y-item: .25rem; --pgn-spacing-dropdown-padding-y-base: .5rem; --pgn-spacing-dropdown-padding-x-item: 1rem; @@ -206,7 +314,9 @@ --pgn-spacing-collapsible-card-spacer-basic-y: .5rem; --pgn-spacing-collapsible-card-spacer-icon: 2.5rem; --pgn-spacing-collapsible-card-spacer-left-body: .75rem; + --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x); --pgn-spacing-collapsible-card-spacer-x-base: .5rem; + --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y); --pgn-spacing-collapsible-card-spacer-y-base: .5rem; --pgn-spacing-code-kbd-padding-x: .4rem; --pgn-spacing-code-kbd-padding-y: .2rem; @@ -232,12 +342,26 @@ --pgn-spacing-card-footer-action-gap: .5rem; --pgn-spacing-card-columns-gap: 1.25rem; --pgn-spacing-card-columns-count: 3rem; + --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-x: 1.25rem; + --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: .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: .25rem; - --pgn-spacing-bubble-expandable-padding-y: 0; + --pgn-spacing-bubble-expandable-padding-y: 0rem; --pgn-spacing-breadcrumb-margin-left: .5rem; --pgn-spacing-badge-padding-y: .125rem; --pgn-spacing-badge-padding-x-pill: .6em; @@ -248,6 +372,7 @@ --pgn-spacing-annotation-arrow-side-margin: .25rem; --pgn-spacing-annotation-padding: .5rem; --pgn-spacing-alert-icon-space: .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; @@ -259,8 +384,14 @@ --pgn-size-breakpoint-md: 768px; --pgn-size-breakpoint-sm: 576px; --pgn-size-breakpoint-xs: 0rem; + --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: .3em; + --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base); --pgn-size-tooltip-arrow-width: .8rem; --pgn-size-tooltip-arrow-height: .4rem; --pgn-size-tooltip-max-width: 200px; @@ -274,9 +405,12 @@ --pgn-size-stepper-header-height-min: 5.13rem; --pgn-size-stack-gap: 0rem; --pgn-size-spinner-sm-border-width: .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-height: var(--pgn-size-spinner-base-width); --pgn-size-spinner-base-width: 2rem; + --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: .3125rem; --pgn-size-search-field-border-width-base: .0625rem; @@ -285,6 +419,8 @@ --pgn-size-progress-bar-border-width: 1px; --pgn-size-progress-bar-height-annotated: .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; @@ -292,31 +428,46 @@ --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: 0rem; --pgn-size-pagination-toggle-border-sm: .25rem; --pgn-size-pagination-toggle-border-base: .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: 0rem; --pgn-size-nav-tabs-border-width: 2px; + --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: .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-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; @@ -324,26 +475,58 @@ --pgn-size-icon-sm: 1.25rem; --pgn-size-icon-xs: 1rem; --pgn-size-icon-inline: .8em; + --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base); --pgn-size-form-border-radius-width: .125rem; --pgn-size-form-border-radius-check-focus: .0625rem; --pgn-size-form-autosuggest-border-width: .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: 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: 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-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; @@ -367,15 +550,29 @@ --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-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); --pgn-size-card-border-radius-logo: .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-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: .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-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-avatar-border-radius: 100%; @@ -391,207 +588,10 @@ --pgn-size-annotation-max-width: 18.75rem; --pgn-size-annotation-arrow-border-width: .5rem; --pgn-size-alert-border-width: 0rem; + --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); --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-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-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-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-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-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-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-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-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); - --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-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-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); - --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-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-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-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-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-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-alert-actions-gap: var(--pgn-spacing-spacer-3); - --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-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-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-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-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-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-menu-item-border-width: var(--pgn-size-btn-border-width); - --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-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-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-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-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-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-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-card-image-border-radius: var(--pgn-size-card-border-radius-base); - --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-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); - --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-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-badge-focus-width: var(--pgn-size-input-btn-focus-width); - --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); } diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css index 7bfd508eee..522bd45cf5 100644 --- a/styles/css/themes/light/utility-classes.css +++ b/styles/css/themes/light/utility-classes.css @@ -1,4 +1,4 @@ -/*, * IMPORTANT: This file is the result of assembling design tokens., * Do not edit directly., */,.bg-dark { +.bg-dark { background-color: var(--pgn-color-dark-base) !important; } @@ -22,2427 +22,2427 @@ a.text-dark:focus { border-color: var(--pgn-color-dark-base) !important; } -.bg-light { - background-color: var(--pgn-color-light-base) !important; +.bg-dark-900 { + background-color: var(--pgn-color-dark-900) !important; } -a.bg-light:hover, -a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: var(--pgn-color-action-default-light-base) !important; +a.bg-dark-900:hover, +a.bg-dark-900:focus, +button.bg-dark-900:hover, +button.bg-dark-900:focus { + background-color: var(--pgn-color-action-default-dark-900) !important; } -.text-light { - color: var(--pgn-color-light-base) !important; +.text-dark-900 { + color: var(--pgn-color-dark-900) !important; } -a.text-light:hover, -a.text-light:focus { - color: var(--pgn-color-action-default-light-base) !important; +a.text-dark-900:hover, +a.text-dark-900:focus { + color: var(--pgn-color-action-default-dark-900) !important; } -.border-light { - border-color: var(--pgn-color-light-base) !important; +.border-dark-900 { + border-color: var(--pgn-color-dark-900) !important; } -.bg-brand { - background-color: var(--pgn-color-brand-base) !important; +.bg-dark-800 { + background-color: var(--pgn-color-dark-800) !important; } -a.bg-brand:hover, -a.bg-brand:focus, -button.bg-brand:hover, -button.bg-brand:focus { - background-color: var(--pgn-color-action-default-brand-base) !important; +a.bg-dark-800:hover, +a.bg-dark-800:focus, +button.bg-dark-800:hover, +button.bg-dark-800:focus { + background-color: var(--pgn-color-action-default-dark-800) !important; } -.text-brand { - color: var(--pgn-color-brand-base) !important; +.text-dark-800 { + color: var(--pgn-color-dark-800) !important; } -a.text-brand:hover, -a.text-brand:focus { - color: var(--pgn-color-action-default-brand-base) !important; +a.text-dark-800:hover, +a.text-dark-800:focus { + color: var(--pgn-color-action-default-dark-800) !important; } -.border-brand { - border-color: var(--pgn-color-brand-base) !important; +.border-dark-800 { + border-color: var(--pgn-color-dark-800) !important; } -.bg-primary { - background-color: var(--pgn-color-primary-base) !important; +.bg-dark-700 { + background-color: var(--pgn-color-dark-700) !important; } -a.bg-primary:hover, -a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: var(--pgn-color-action-default-primary-base) !important; +a.bg-dark-700:hover, +a.bg-dark-700:focus, +button.bg-dark-700:hover, +button.bg-dark-700:focus { + background-color: var(--pgn-color-action-default-dark-700) !important; } -.text-primary { - color: var(--pgn-color-primary-base) !important; +.text-dark-700 { + color: var(--pgn-color-dark-700) !important; } -a.text-primary:hover, -a.text-primary:focus { - color: var(--pgn-color-action-default-primary-base) !important; +a.text-dark-700:hover, +a.text-dark-700:focus { + color: var(--pgn-color-action-default-dark-700) !important; } -.border-primary { - border-color: var(--pgn-color-primary-base) !important; +.border-dark-700 { + border-color: var(--pgn-color-dark-700) !important; } -.bg-gray { - background-color: var(--pgn-color-gray-base) !important; +.bg-dark-600 { + background-color: var(--pgn-color-dark-600) !important; } -a.bg-gray:hover, -a.bg-gray:focus, -button.bg-gray:hover, -button.bg-gray:focus { - background-color: var(--pgn-color-action-default-gray-base) !important; +a.bg-dark-600:hover, +a.bg-dark-600:focus, +button.bg-dark-600:hover, +button.bg-dark-600:focus { + background-color: var(--pgn-color-action-default-dark-600) !important; } -.text-gray { - color: var(--pgn-color-gray-base) !important; +.text-dark-600 { + color: var(--pgn-color-dark-600) !important; } -a.text-gray:hover, -a.text-gray:focus { - color: var(--pgn-color-action-default-gray-base) !important; +a.text-dark-600:hover, +a.text-dark-600:focus { + color: var(--pgn-color-action-default-dark-600) !important; } -.border-gray { - border-color: var(--pgn-color-gray-base) !important; +.border-dark-600 { + border-color: var(--pgn-color-dark-600) !important; } -.bg-gray-900 { - background-color: var(--pgn-color-gray-900) !important; +.bg-dark-500 { + background-color: var(--pgn-color-dark-500) !important; } -a.bg-gray-900:hover, -a.bg-gray-900:focus, -button.bg-gray-900:hover, -button.bg-gray-900:focus { - background-color: var(--pgn-color-action-default-gray-900) !important; +a.bg-dark-500:hover, +a.bg-dark-500:focus, +button.bg-dark-500:hover, +button.bg-dark-500:focus { + background-color: var(--pgn-color-action-default-dark-500) !important; } -.text-gray-900 { - color: var(--pgn-color-gray-900) !important; +.text-dark-500 { + color: var(--pgn-color-dark-500) !important; } -a.text-gray-900:hover, -a.text-gray-900:focus { - color: var(--pgn-color-action-default-gray-900) !important; +a.text-dark-500:hover, +a.text-dark-500:focus { + color: var(--pgn-color-action-default-dark-500) !important; } -.border-gray-900 { - border-color: var(--pgn-color-gray-900) !important; +.border-dark-500 { + border-color: var(--pgn-color-dark-500) !important; } -.bg-gray-800 { - background-color: var(--pgn-color-gray-800) !important; +.bg-dark-400 { + background-color: var(--pgn-color-dark-400) !important; } -a.bg-gray-800:hover, -a.bg-gray-800:focus, -button.bg-gray-800:hover, -button.bg-gray-800:focus { - background-color: var(--pgn-color-action-default-gray-800) !important; +a.bg-dark-400:hover, +a.bg-dark-400:focus, +button.bg-dark-400:hover, +button.bg-dark-400:focus { + background-color: var(--pgn-color-action-default-dark-400) !important; } -.text-gray-800 { - color: var(--pgn-color-gray-800) !important; +.text-dark-400 { + color: var(--pgn-color-dark-400) !important; } -a.text-gray-800:hover, -a.text-gray-800:focus { - color: var(--pgn-color-action-default-gray-800) !important; +a.text-dark-400:hover, +a.text-dark-400:focus { + color: var(--pgn-color-action-default-dark-400) !important; } -.border-gray-800 { - border-color: var(--pgn-color-gray-800) !important; +.border-dark-400 { + border-color: var(--pgn-color-dark-400) !important; } -.bg-gray-700 { - background-color: var(--pgn-color-gray-700) !important; +.bg-dark-300 { + background-color: var(--pgn-color-dark-300) !important; } -a.bg-gray-700:hover, -a.bg-gray-700:focus, -button.bg-gray-700:hover, -button.bg-gray-700:focus { - background-color: var(--pgn-color-action-default-gray-700) !important; +a.bg-dark-300:hover, +a.bg-dark-300:focus, +button.bg-dark-300:hover, +button.bg-dark-300:focus { + background-color: var(--pgn-color-action-default-dark-300) !important; } -.text-gray-700 { - color: var(--pgn-color-gray-700) !important; +.text-dark-300 { + color: var(--pgn-color-dark-300) !important; } -a.text-gray-700:hover, -a.text-gray-700:focus { - color: var(--pgn-color-action-default-gray-700) !important; +a.text-dark-300:hover, +a.text-dark-300:focus { + color: var(--pgn-color-action-default-dark-300) !important; } -.border-gray-700 { - border-color: var(--pgn-color-gray-700) !important; +.border-dark-300 { + border-color: var(--pgn-color-dark-300) !important; } -.bg-gray-600 { - background-color: var(--pgn-color-gray-600) !important; +.bg-dark-200 { + background-color: var(--pgn-color-dark-200) !important; } -a.bg-gray-600:hover, -a.bg-gray-600:focus, -button.bg-gray-600:hover, -button.bg-gray-600:focus { - background-color: var(--pgn-color-action-default-gray-600) !important; +a.bg-dark-200:hover, +a.bg-dark-200:focus, +button.bg-dark-200:hover, +button.bg-dark-200:focus { + background-color: var(--pgn-color-action-default-dark-200) !important; } -.text-gray-600 { - color: var(--pgn-color-gray-600) !important; +.text-dark-200 { + color: var(--pgn-color-dark-200) !important; } -a.text-gray-600:hover, -a.text-gray-600:focus { - color: var(--pgn-color-action-default-gray-600) !important; +a.text-dark-200:hover, +a.text-dark-200:focus { + color: var(--pgn-color-action-default-dark-200) !important; } -.border-gray-600 { - border-color: var(--pgn-color-gray-600) !important; +.border-dark-200 { + border-color: var(--pgn-color-dark-200) !important; } -.bg-gray-400 { - background-color: var(--pgn-color-gray-400) !important; +.bg-dark-100 { + background-color: var(--pgn-color-dark-100) !important; } -a.bg-gray-400:hover, -a.bg-gray-400:focus, -button.bg-gray-400:hover, -button.bg-gray-400:focus { - background-color: var(--pgn-color-action-default-gray-400) !important; +a.bg-dark-100:hover, +a.bg-dark-100:focus, +button.bg-dark-100:hover, +button.bg-dark-100:focus { + background-color: var(--pgn-color-action-default-dark-100) !important; } -.text-gray-400 { - color: var(--pgn-color-gray-400) !important; +.text-dark-100 { + color: var(--pgn-color-dark-100) !important; } -a.text-gray-400:hover, -a.text-gray-400:focus { - color: var(--pgn-color-action-default-gray-400) !important; +a.text-dark-100:hover, +a.text-dark-100:focus { + color: var(--pgn-color-action-default-dark-100) !important; } -.border-gray-400 { - border-color: var(--pgn-color-gray-400) !important; +.border-dark-100 { + border-color: var(--pgn-color-dark-100) !important; } -.bg-gray-300 { - background-color: var(--pgn-color-gray-300) !important; +.bg-light { + background-color: var(--pgn-color-light-base) !important; } -a.bg-gray-300:hover, -a.bg-gray-300:focus, -button.bg-gray-300:hover, -button.bg-gray-300:focus { - background-color: var(--pgn-color-action-default-gray-300) !important; -} - -.text-gray-300 { - color: var(--pgn-color-gray-300) !important; -} - -a.text-gray-300:hover, -a.text-gray-300:focus { - color: var(--pgn-color-action-default-gray-300) !important; -} - -.border-gray-300 { - border-color: var(--pgn-color-gray-300) !important; -} - -.bg-gray-200 { - background-color: var(--pgn-color-gray-200) !important; +a.bg-light:hover, +a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { + background-color: var(--pgn-color-action-default-light-base) !important; } -a.bg-gray-200:hover, -a.bg-gray-200:focus, -button.bg-gray-200:hover, -button.bg-gray-200:focus { - background-color: var(--pgn-color-action-default-gray-200) !important; +.text-light { + color: var(--pgn-color-light-base) !important; } -.text-gray-200 { - color: var(--pgn-color-gray-200) !important; +a.text-light:hover, +a.text-light:focus { + color: var(--pgn-color-action-default-light-base) !important; } -a.text-gray-200:hover, -a.text-gray-200:focus { - color: var(--pgn-color-action-default-gray-200) !important; +.border-light { + border-color: var(--pgn-color-light-base) !important; } -.border-gray-200 { - border-color: var(--pgn-color-gray-200) !important; +.bg-light-900 { + background-color: var(--pgn-color-light-900) !important; } -.bg-gray-100 { - background-color: var(--pgn-color-gray-100) !important; +a.bg-light-900:hover, +a.bg-light-900:focus, +button.bg-light-900:hover, +button.bg-light-900:focus { + background-color: var(--pgn-color-action-default-light-900) !important; } -a.bg-gray-100:hover, -a.bg-gray-100:focus, -button.bg-gray-100:hover, -button.bg-gray-100:focus { - background-color: var(--pgn-color-action-default-gray-100) !important; +.text-light-900 { + color: var(--pgn-color-light-900) !important; } -.text-gray-100 { - color: var(--pgn-color-gray-100) !important; +a.text-light-900:hover, +a.text-light-900:focus { + color: var(--pgn-color-action-default-light-900) !important; } -a.text-gray-100:hover, -a.text-gray-100:focus { - color: var(--pgn-color-action-default-gray-100) !important; +.border-light-900 { + border-color: var(--pgn-color-light-900) !important; } -.border-gray-100 { - border-color: var(--pgn-color-gray-100) !important; +.bg-light-800 { + background-color: var(--pgn-color-light-800) !important; } -.bg-accent-b { - background-color: var(--pgn-color-accent-b) !important; +a.bg-light-800:hover, +a.bg-light-800:focus, +button.bg-light-800:hover, +button.bg-light-800:focus { + background-color: var(--pgn-color-action-default-light-800) !important; } -a.bg-accent-b:hover, -a.bg-accent-b:focus, -button.bg-accent-b:hover, -button.bg-accent-b:focus { - background-color: var(--pgn-color-action-default-accent-b) !important; +.text-light-800 { + color: var(--pgn-color-light-800) !important; } -.text-accent-b { - color: var(--pgn-color-accent-b) !important; +a.text-light-800:hover, +a.text-light-800:focus { + color: var(--pgn-color-action-default-light-800) !important; } -a.text-accent-b:hover, -a.text-accent-b:focus { - color: var(--pgn-color-action-default-accent-b) !important; +.border-light-800 { + border-color: var(--pgn-color-light-800) !important; } -.border-accent-b { - border-color: var(--pgn-color-accent-b) !important; +.bg-light-700 { + background-color: var(--pgn-color-light-700) !important; } -.bg-accent-a { - background-color: var(--pgn-color-accent-a) !important; +a.bg-light-700:hover, +a.bg-light-700:focus, +button.bg-light-700:hover, +button.bg-light-700:focus { + background-color: var(--pgn-color-action-default-light-700) !important; } -a.bg-accent-a:hover, -a.bg-accent-a:focus, -button.bg-accent-a:hover, -button.bg-accent-a:focus { - background-color: var(--pgn-color-action-default-accent-a) !important; +.text-light-700 { + color: var(--pgn-color-light-700) !important; } -.text-accent-a { - color: var(--pgn-color-accent-a) !important; +a.text-light-700:hover, +a.text-light-700:focus { + color: var(--pgn-color-action-default-light-700) !important; } -a.text-accent-a:hover, -a.text-accent-a:focus { - color: var(--pgn-color-action-default-accent-a) !important; +.border-light-700 { + border-color: var(--pgn-color-light-700) !important; } -.border-accent-a { - border-color: var(--pgn-color-accent-a) !important; +.bg-light-600 { + background-color: var(--pgn-color-light-600) !important; } -.bg-dark-900 { - background-color: var(--pgn-color-dark-900) !important; +a.bg-light-600:hover, +a.bg-light-600:focus, +button.bg-light-600:hover, +button.bg-light-600:focus { + background-color: var(--pgn-color-action-default-light-600) !important; } -a.bg-dark-900:hover, -a.bg-dark-900:focus, -button.bg-dark-900:hover, -button.bg-dark-900:focus { - background-color: var(--pgn-color-action-default-dark-900) !important; +.text-light-600 { + color: var(--pgn-color-light-600) !important; } -.text-dark-900 { - color: var(--pgn-color-dark-900) !important; +a.text-light-600:hover, +a.text-light-600:focus { + color: var(--pgn-color-action-default-light-600) !important; } -a.text-dark-900:hover, -a.text-dark-900:focus { - color: var(--pgn-color-action-default-dark-900) !important; +.border-light-600 { + border-color: var(--pgn-color-light-600) !important; } -.border-dark-900 { - border-color: var(--pgn-color-dark-900) !important; +.bg-light-500 { + background-color: var(--pgn-color-light-500) !important; } -.bg-dark-800 { - background-color: var(--pgn-color-dark-800) !important; +a.bg-light-500:hover, +a.bg-light-500:focus, +button.bg-light-500:hover, +button.bg-light-500:focus { + background-color: var(--pgn-color-action-default-light-500) !important; } -a.bg-dark-800:hover, -a.bg-dark-800:focus, -button.bg-dark-800:hover, -button.bg-dark-800:focus { - background-color: var(--pgn-color-action-default-dark-800) !important; +.text-light-500 { + color: var(--pgn-color-light-500) !important; } -.text-dark-800 { - color: var(--pgn-color-dark-800) !important; +a.text-light-500:hover, +a.text-light-500:focus { + color: var(--pgn-color-action-default-light-500) !important; } -a.text-dark-800:hover, -a.text-dark-800:focus { - color: var(--pgn-color-action-default-dark-800) !important; +.border-light-500 { + border-color: var(--pgn-color-light-500) !important; } -.border-dark-800 { - border-color: var(--pgn-color-dark-800) !important; +.bg-light-400 { + background-color: var(--pgn-color-light-400) !important; } -.bg-dark-700 { - background-color: var(--pgn-color-dark-700) !important; +a.bg-light-400:hover, +a.bg-light-400:focus, +button.bg-light-400:hover, +button.bg-light-400:focus { + background-color: var(--pgn-color-action-default-light-400) !important; } -a.bg-dark-700:hover, -a.bg-dark-700:focus, -button.bg-dark-700:hover, -button.bg-dark-700:focus { - background-color: var(--pgn-color-action-default-dark-700) !important; +.text-light-400 { + color: var(--pgn-color-light-400) !important; } -.text-dark-700 { - color: var(--pgn-color-dark-700) !important; +a.text-light-400:hover, +a.text-light-400:focus { + color: var(--pgn-color-action-default-light-400) !important; } -a.text-dark-700:hover, -a.text-dark-700:focus { - color: var(--pgn-color-action-default-dark-700) !important; +.border-light-400 { + border-color: var(--pgn-color-light-400) !important; } -.border-dark-700 { - border-color: var(--pgn-color-dark-700) !important; +.bg-light-300 { + background-color: var(--pgn-color-light-300) !important; } -.bg-dark-600 { - background-color: var(--pgn-color-dark-600) !important; +a.bg-light-300:hover, +a.bg-light-300:focus, +button.bg-light-300:hover, +button.bg-light-300:focus { + background-color: var(--pgn-color-action-default-light-300) !important; } -a.bg-dark-600:hover, -a.bg-dark-600:focus, -button.bg-dark-600:hover, -button.bg-dark-600:focus { - background-color: var(--pgn-color-action-default-dark-600) !important; +.text-light-300 { + color: var(--pgn-color-light-300) !important; } -.text-dark-600 { - color: var(--pgn-color-dark-600) !important; +a.text-light-300:hover, +a.text-light-300:focus { + color: var(--pgn-color-action-default-light-300) !important; } -a.text-dark-600:hover, -a.text-dark-600:focus { - color: var(--pgn-color-action-default-dark-600) !important; +.border-light-300 { + border-color: var(--pgn-color-light-300) !important; } -.border-dark-600 { - border-color: var(--pgn-color-dark-600) !important; +.bg-light-200 { + background-color: var(--pgn-color-light-200) !important; } -.bg-dark-500 { - background-color: var(--pgn-color-dark-500) !important; +a.bg-light-200:hover, +a.bg-light-200:focus, +button.bg-light-200:hover, +button.bg-light-200:focus { + background-color: var(--pgn-color-action-default-light-200) !important; } -a.bg-dark-500:hover, -a.bg-dark-500:focus, -button.bg-dark-500:hover, -button.bg-dark-500:focus { - background-color: var(--pgn-color-action-default-dark-500) !important; +.text-light-200 { + color: var(--pgn-color-light-200) !important; } -.text-dark-500 { - color: var(--pgn-color-dark-500) !important; +a.text-light-200:hover, +a.text-light-200:focus { + color: var(--pgn-color-action-default-light-200) !important; } -a.text-dark-500:hover, -a.text-dark-500:focus { - color: var(--pgn-color-action-default-dark-500) !important; +.border-light-200 { + border-color: var(--pgn-color-light-200) !important; } -.border-dark-500 { - border-color: var(--pgn-color-dark-500) !important; +.bg-light-100 { + background-color: var(--pgn-color-light-100) !important; } -.bg-dark-400 { - background-color: var(--pgn-color-dark-400) !important; +a.bg-light-100:hover, +a.bg-light-100:focus, +button.bg-light-100:hover, +button.bg-light-100:focus { + background-color: var(--pgn-color-action-default-light-100) !important; } -a.bg-dark-400:hover, -a.bg-dark-400:focus, -button.bg-dark-400:hover, -button.bg-dark-400:focus { - background-color: var(--pgn-color-action-default-dark-400) !important; +.text-light-100 { + color: var(--pgn-color-light-100) !important; } -.text-dark-400 { - color: var(--pgn-color-dark-400) !important; +a.text-light-100:hover, +a.text-light-100:focus { + color: var(--pgn-color-action-default-light-100) !important; } -a.text-dark-400:hover, -a.text-dark-400:focus { - color: var(--pgn-color-action-default-dark-400) !important; +.border-light-100 { + border-color: var(--pgn-color-light-100) !important; } -.border-dark-400 { - border-color: var(--pgn-color-dark-400) !important; +.bg-danger { + background-color: var(--pgn-color-danger-base) !important; } -.bg-dark-300 { - background-color: var(--pgn-color-dark-300) !important; +a.bg-danger:hover, +a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { + background-color: var(--pgn-color-action-default-danger-base) !important; } -a.bg-dark-300:hover, -a.bg-dark-300:focus, -button.bg-dark-300:hover, -button.bg-dark-300:focus { - background-color: var(--pgn-color-action-default-dark-300) !important; +.text-danger { + color: var(--pgn-color-danger-base) !important; } -.text-dark-300 { - color: var(--pgn-color-dark-300) !important; +a.text-danger:hover, +a.text-danger:focus { + color: var(--pgn-color-action-default-danger-base) !important; } -a.text-dark-300:hover, -a.text-dark-300:focus { - color: var(--pgn-color-action-default-dark-300) !important; +.border-danger { + border-color: var(--pgn-color-danger-base) !important; } -.border-dark-300 { - border-color: var(--pgn-color-dark-300) !important; +.bg-danger-900 { + background-color: var(--pgn-color-danger-900) !important; } -.bg-dark-200 { - background-color: var(--pgn-color-dark-200) !important; +a.bg-danger-900:hover, +a.bg-danger-900:focus, +button.bg-danger-900:hover, +button.bg-danger-900:focus { + background-color: var(--pgn-color-action-default-danger-900) !important; } -a.bg-dark-200:hover, -a.bg-dark-200:focus, -button.bg-dark-200:hover, -button.bg-dark-200:focus { - background-color: var(--pgn-color-action-default-dark-200) !important; +.text-danger-900 { + color: var(--pgn-color-danger-900) !important; } -.text-dark-200 { - color: var(--pgn-color-dark-200) !important; +a.text-danger-900:hover, +a.text-danger-900:focus { + color: var(--pgn-color-action-default-danger-900) !important; } -a.text-dark-200:hover, -a.text-dark-200:focus { - color: var(--pgn-color-action-default-dark-200) !important; +.border-danger-900 { + border-color: var(--pgn-color-danger-900) !important; } -.border-dark-200 { - border-color: var(--pgn-color-dark-200) !important; +.bg-danger-800 { + background-color: var(--pgn-color-danger-800) !important; } -.bg-dark-100 { - background-color: var(--pgn-color-dark-100) !important; +a.bg-danger-800:hover, +a.bg-danger-800:focus, +button.bg-danger-800:hover, +button.bg-danger-800:focus { + background-color: var(--pgn-color-action-default-danger-800) !important; } -a.bg-dark-100:hover, -a.bg-dark-100:focus, -button.bg-dark-100:hover, -button.bg-dark-100:focus { - background-color: var(--pgn-color-action-default-dark-100) !important; +.text-danger-800 { + color: var(--pgn-color-danger-800) !important; } -.text-dark-100 { - color: var(--pgn-color-dark-100) !important; +a.text-danger-800:hover, +a.text-danger-800:focus { + color: var(--pgn-color-action-default-danger-800) !important; } -a.text-dark-100:hover, -a.text-dark-100:focus { - color: var(--pgn-color-action-default-dark-100) !important; +.border-danger-800 { + border-color: var(--pgn-color-danger-800) !important; } -.border-dark-100 { - border-color: var(--pgn-color-dark-100) !important; +.bg-danger-700 { + background-color: var(--pgn-color-danger-700) !important; } -.bg-light-900 { - background-color: var(--pgn-color-light-900) !important; +a.bg-danger-700:hover, +a.bg-danger-700:focus, +button.bg-danger-700:hover, +button.bg-danger-700:focus { + background-color: var(--pgn-color-action-default-danger-700) !important; } -a.bg-light-900:hover, -a.bg-light-900:focus, -button.bg-light-900:hover, -button.bg-light-900:focus { - background-color: var(--pgn-color-action-default-light-900) !important; +.text-danger-700 { + color: var(--pgn-color-danger-700) !important; } -.text-light-900 { - color: var(--pgn-color-light-900) !important; +a.text-danger-700:hover, +a.text-danger-700:focus { + color: var(--pgn-color-action-default-danger-700) !important; } -a.text-light-900:hover, -a.text-light-900:focus { - color: var(--pgn-color-action-default-light-900) !important; +.border-danger-700 { + border-color: var(--pgn-color-danger-700) !important; } -.border-light-900 { - border-color: var(--pgn-color-light-900) !important; +.bg-danger-600 { + background-color: var(--pgn-color-danger-600) !important; } -.bg-light-800 { - background-color: var(--pgn-color-light-800) !important; +a.bg-danger-600:hover, +a.bg-danger-600:focus, +button.bg-danger-600:hover, +button.bg-danger-600:focus { + background-color: var(--pgn-color-action-default-danger-600) !important; } -a.bg-light-800:hover, -a.bg-light-800:focus, -button.bg-light-800:hover, -button.bg-light-800:focus { - background-color: var(--pgn-color-action-default-light-800) !important; +.text-danger-600 { + color: var(--pgn-color-danger-600) !important; } -.text-light-800 { - color: var(--pgn-color-light-800) !important; +a.text-danger-600:hover, +a.text-danger-600:focus { + color: var(--pgn-color-action-default-danger-600) !important; } -a.text-light-800:hover, -a.text-light-800:focus { - color: var(--pgn-color-action-default-light-800) !important; +.border-danger-600 { + border-color: var(--pgn-color-danger-600) !important; } -.border-light-800 { - border-color: var(--pgn-color-light-800) !important; +.bg-danger-500 { + background-color: var(--pgn-color-danger-500) !important; } -.bg-light-700 { - background-color: var(--pgn-color-light-700) !important; +a.bg-danger-500:hover, +a.bg-danger-500:focus, +button.bg-danger-500:hover, +button.bg-danger-500:focus { + background-color: var(--pgn-color-action-default-danger-500) !important; } -a.bg-light-700:hover, -a.bg-light-700:focus, -button.bg-light-700:hover, -button.bg-light-700:focus { - background-color: var(--pgn-color-action-default-light-700) !important; +.text-danger-500 { + color: var(--pgn-color-danger-500) !important; } -.text-light-700 { - color: var(--pgn-color-light-700) !important; +a.text-danger-500:hover, +a.text-danger-500:focus { + color: var(--pgn-color-action-default-danger-500) !important; } -a.text-light-700:hover, -a.text-light-700:focus { - color: var(--pgn-color-action-default-light-700) !important; +.border-danger-500 { + border-color: var(--pgn-color-danger-500) !important; } -.border-light-700 { - border-color: var(--pgn-color-light-700) !important; +.bg-danger-400 { + background-color: var(--pgn-color-danger-400) !important; } -.bg-light-600 { - background-color: var(--pgn-color-light-600) !important; +a.bg-danger-400:hover, +a.bg-danger-400:focus, +button.bg-danger-400:hover, +button.bg-danger-400:focus { + background-color: var(--pgn-color-action-default-danger-400) !important; } -a.bg-light-600:hover, -a.bg-light-600:focus, -button.bg-light-600:hover, -button.bg-light-600:focus { - background-color: var(--pgn-color-action-default-light-600) !important; +.text-danger-400 { + color: var(--pgn-color-danger-400) !important; } -.text-light-600 { - color: var(--pgn-color-light-600) !important; +a.text-danger-400:hover, +a.text-danger-400:focus { + color: var(--pgn-color-action-default-danger-400) !important; } -a.text-light-600:hover, -a.text-light-600:focus { - color: var(--pgn-color-action-default-light-600) !important; +.border-danger-400 { + border-color: var(--pgn-color-danger-400) !important; } -.border-light-600 { - border-color: var(--pgn-color-light-600) !important; +.bg-danger-300 { + background-color: var(--pgn-color-danger-300) !important; } -.bg-light-500 { - background-color: var(--pgn-color-light-500) !important; +a.bg-danger-300:hover, +a.bg-danger-300:focus, +button.bg-danger-300:hover, +button.bg-danger-300:focus { + background-color: var(--pgn-color-action-default-danger-300) !important; } -a.bg-light-500:hover, -a.bg-light-500:focus, -button.bg-light-500:hover, -button.bg-light-500:focus { - background-color: var(--pgn-color-action-default-light-500) !important; +.text-danger-300 { + color: var(--pgn-color-danger-300) !important; } -.text-light-500 { - color: var(--pgn-color-light-500) !important; +a.text-danger-300:hover, +a.text-danger-300:focus { + color: var(--pgn-color-action-default-danger-300) !important; } -a.text-light-500:hover, -a.text-light-500:focus { - color: var(--pgn-color-action-default-light-500) !important; +.border-danger-300 { + border-color: var(--pgn-color-danger-300) !important; } -.border-light-500 { - border-color: var(--pgn-color-light-500) !important; +.bg-danger-200 { + background-color: var(--pgn-color-danger-200) !important; } -.bg-light-400 { - background-color: var(--pgn-color-light-400) !important; +a.bg-danger-200:hover, +a.bg-danger-200:focus, +button.bg-danger-200:hover, +button.bg-danger-200:focus { + background-color: var(--pgn-color-action-default-danger-200) !important; } -a.bg-light-400:hover, -a.bg-light-400:focus, -button.bg-light-400:hover, -button.bg-light-400:focus { - background-color: var(--pgn-color-action-default-light-400) !important; +.text-danger-200 { + color: var(--pgn-color-danger-200) !important; +} + +a.text-danger-200:hover, +a.text-danger-200:focus { + color: var(--pgn-color-action-default-danger-200) !important; } -.text-light-400 { - color: var(--pgn-color-light-400) !important; +.border-danger-200 { + border-color: var(--pgn-color-danger-200) !important; } -a.text-light-400:hover, -a.text-light-400:focus { - color: var(--pgn-color-action-default-light-400) !important; +.bg-danger-100 { + background-color: var(--pgn-color-danger-100) !important; } -.border-light-400 { - border-color: var(--pgn-color-light-400) !important; +a.bg-danger-100:hover, +a.bg-danger-100:focus, +button.bg-danger-100:hover, +button.bg-danger-100:focus { + background-color: var(--pgn-color-action-default-danger-100) !important; } -.bg-light-300 { - background-color: var(--pgn-color-light-300) !important; +.text-danger-100 { + color: var(--pgn-color-danger-100) !important; } -a.bg-light-300:hover, -a.bg-light-300:focus, -button.bg-light-300:hover, -button.bg-light-300:focus { - background-color: var(--pgn-color-action-default-light-300) !important; +a.text-danger-100:hover, +a.text-danger-100:focus { + color: var(--pgn-color-action-default-danger-100) !important; } -.text-light-300 { - color: var(--pgn-color-light-300) !important; +.border-danger-100 { + border-color: var(--pgn-color-danger-100) !important; } -a.text-light-300:hover, -a.text-light-300:focus { - color: var(--pgn-color-action-default-light-300) !important; +.bg-warning { + background-color: var(--pgn-color-warning-base) !important; } -.border-light-300 { - border-color: var(--pgn-color-light-300) !important; +a.bg-warning:hover, +a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { + background-color: var(--pgn-color-action-default-warning-base) !important; } -.bg-light-200 { - background-color: var(--pgn-color-light-200) !important; +.text-warning { + color: var(--pgn-color-warning-base) !important; } -a.bg-light-200:hover, -a.bg-light-200:focus, -button.bg-light-200:hover, -button.bg-light-200:focus { - background-color: var(--pgn-color-action-default-light-200) !important; +a.text-warning:hover, +a.text-warning:focus { + color: var(--pgn-color-action-default-warning-base) !important; } -.text-light-200 { - color: var(--pgn-color-light-200) !important; +.border-warning { + border-color: var(--pgn-color-warning-base) !important; } -a.text-light-200:hover, -a.text-light-200:focus { - color: var(--pgn-color-action-default-light-200) !important; +.bg-warning-900 { + background-color: var(--pgn-color-warning-900) !important; } -.border-light-200 { - border-color: var(--pgn-color-light-200) !important; +a.bg-warning-900:hover, +a.bg-warning-900:focus, +button.bg-warning-900:hover, +button.bg-warning-900:focus { + background-color: var(--pgn-color-action-default-warning-900) !important; } -.bg-light-100 { - background-color: var(--pgn-color-light-100) !important; +.text-warning-900 { + color: var(--pgn-color-warning-900) !important; } -a.bg-light-100:hover, -a.bg-light-100:focus, -button.bg-light-100:hover, -button.bg-light-100:focus { - background-color: var(--pgn-color-action-default-light-100) !important; +a.text-warning-900:hover, +a.text-warning-900:focus { + color: var(--pgn-color-action-default-warning-900) !important; } -.text-light-100 { - color: var(--pgn-color-light-100) !important; +.border-warning-900 { + border-color: var(--pgn-color-warning-900) !important; } -a.text-light-100:hover, -a.text-light-100:focus { - color: var(--pgn-color-action-default-light-100) !important; +.bg-warning-800 { + background-color: var(--pgn-color-warning-800) !important; } -.border-light-100 { - border-color: var(--pgn-color-light-100) !important; +a.bg-warning-800:hover, +a.bg-warning-800:focus, +button.bg-warning-800:hover, +button.bg-warning-800:focus { + background-color: var(--pgn-color-action-default-warning-800) !important; } -.bg-danger { - background-color: var(--pgn-color-danger-base) !important; +.text-warning-800 { + color: var(--pgn-color-warning-800) !important; } -a.bg-danger:hover, -a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: var(--pgn-color-action-default-danger-base) !important; +a.text-warning-800:hover, +a.text-warning-800:focus { + color: var(--pgn-color-action-default-warning-800) !important; } -.text-danger { - color: var(--pgn-color-danger-base) !important; +.border-warning-800 { + border-color: var(--pgn-color-warning-800) !important; } -a.text-danger:hover, -a.text-danger:focus { - color: var(--pgn-color-action-default-danger-base) !important; +.bg-warning-700 { + background-color: var(--pgn-color-warning-700) !important; } -.border-danger { - border-color: var(--pgn-color-danger-base) !important; +a.bg-warning-700:hover, +a.bg-warning-700:focus, +button.bg-warning-700:hover, +button.bg-warning-700:focus { + background-color: var(--pgn-color-action-default-warning-700) !important; } -.bg-danger-900 { - background-color: var(--pgn-color-danger-900) !important; +.text-warning-700 { + color: var(--pgn-color-warning-700) !important; } -a.bg-danger-900:hover, -a.bg-danger-900:focus, -button.bg-danger-900:hover, -button.bg-danger-900:focus { - background-color: var(--pgn-color-action-default-danger-900) !important; +a.text-warning-700:hover, +a.text-warning-700:focus { + color: var(--pgn-color-action-default-warning-700) !important; } -.text-danger-900 { - color: var(--pgn-color-danger-900) !important; +.border-warning-700 { + border-color: var(--pgn-color-warning-700) !important; } -a.text-danger-900:hover, -a.text-danger-900:focus { - color: var(--pgn-color-action-default-danger-900) !important; +.bg-warning-600 { + background-color: var(--pgn-color-warning-600) !important; } -.border-danger-900 { - border-color: var(--pgn-color-danger-900) !important; +a.bg-warning-600:hover, +a.bg-warning-600:focus, +button.bg-warning-600:hover, +button.bg-warning-600:focus { + background-color: var(--pgn-color-action-default-warning-600) !important; } -.bg-danger-800 { - background-color: var(--pgn-color-danger-800) !important; +.text-warning-600 { + color: var(--pgn-color-warning-600) !important; } -a.bg-danger-800:hover, -a.bg-danger-800:focus, -button.bg-danger-800:hover, -button.bg-danger-800:focus { - background-color: var(--pgn-color-action-default-danger-800) !important; +a.text-warning-600:hover, +a.text-warning-600:focus { + color: var(--pgn-color-action-default-warning-600) !important; } -.text-danger-800 { - color: var(--pgn-color-danger-800) !important; +.border-warning-600 { + border-color: var(--pgn-color-warning-600) !important; } -a.text-danger-800:hover, -a.text-danger-800:focus { - color: var(--pgn-color-action-default-danger-800) !important; +.bg-warning-500 { + background-color: var(--pgn-color-warning-500) !important; } -.border-danger-800 { - border-color: var(--pgn-color-danger-800) !important; +a.bg-warning-500:hover, +a.bg-warning-500:focus, +button.bg-warning-500:hover, +button.bg-warning-500:focus { + background-color: var(--pgn-color-action-default-warning-500) !important; } -.bg-danger-700 { - background-color: var(--pgn-color-danger-700) !important; +.text-warning-500 { + color: var(--pgn-color-warning-500) !important; } -a.bg-danger-700:hover, -a.bg-danger-700:focus, -button.bg-danger-700:hover, -button.bg-danger-700:focus { - background-color: var(--pgn-color-action-default-danger-700) !important; +a.text-warning-500:hover, +a.text-warning-500:focus { + color: var(--pgn-color-action-default-warning-500) !important; } -.text-danger-700 { - color: var(--pgn-color-danger-700) !important; +.border-warning-500 { + border-color: var(--pgn-color-warning-500) !important; } -a.text-danger-700:hover, -a.text-danger-700:focus { - color: var(--pgn-color-action-default-danger-700) !important; +.bg-warning-400 { + background-color: var(--pgn-color-warning-400) !important; } -.border-danger-700 { - border-color: var(--pgn-color-danger-700) !important; +a.bg-warning-400:hover, +a.bg-warning-400:focus, +button.bg-warning-400:hover, +button.bg-warning-400:focus { + background-color: var(--pgn-color-action-default-warning-400) !important; } -.bg-danger-600 { - background-color: var(--pgn-color-danger-600) !important; +.text-warning-400 { + color: var(--pgn-color-warning-400) !important; } -a.bg-danger-600:hover, -a.bg-danger-600:focus, -button.bg-danger-600:hover, -button.bg-danger-600:focus { - background-color: var(--pgn-color-action-default-danger-600) !important; +a.text-warning-400:hover, +a.text-warning-400:focus { + color: var(--pgn-color-action-default-warning-400) !important; } -.text-danger-600 { - color: var(--pgn-color-danger-600) !important; +.border-warning-400 { + border-color: var(--pgn-color-warning-400) !important; } -a.text-danger-600:hover, -a.text-danger-600:focus { - color: var(--pgn-color-action-default-danger-600) !important; +.bg-warning-300 { + background-color: var(--pgn-color-warning-300) !important; } -.border-danger-600 { - border-color: var(--pgn-color-danger-600) !important; +a.bg-warning-300:hover, +a.bg-warning-300:focus, +button.bg-warning-300:hover, +button.bg-warning-300:focus { + background-color: var(--pgn-color-action-default-warning-300) !important; } -.bg-danger-500 { - background-color: var(--pgn-color-danger-500) !important; +.text-warning-300 { + color: var(--pgn-color-warning-300) !important; } -a.bg-danger-500:hover, -a.bg-danger-500:focus, -button.bg-danger-500:hover, -button.bg-danger-500:focus { - background-color: var(--pgn-color-action-default-danger-500) !important; +a.text-warning-300:hover, +a.text-warning-300:focus { + color: var(--pgn-color-action-default-warning-300) !important; +} + +.border-warning-300 { + border-color: var(--pgn-color-warning-300) !important; } -.text-danger-500 { - color: var(--pgn-color-danger-500) !important; +.bg-warning-200 { + background-color: var(--pgn-color-warning-200) !important; } -a.text-danger-500:hover, -a.text-danger-500:focus { - color: var(--pgn-color-action-default-danger-500) !important; +a.bg-warning-200:hover, +a.bg-warning-200:focus, +button.bg-warning-200:hover, +button.bg-warning-200:focus { + background-color: var(--pgn-color-action-default-warning-200) !important; } -.border-danger-500 { - border-color: var(--pgn-color-danger-500) !important; +.text-warning-200 { + color: var(--pgn-color-warning-200) !important; } -.bg-danger-400 { - background-color: var(--pgn-color-danger-400) !important; +a.text-warning-200:hover, +a.text-warning-200:focus { + color: var(--pgn-color-action-default-warning-200) !important; } -a.bg-danger-400:hover, -a.bg-danger-400:focus, -button.bg-danger-400:hover, -button.bg-danger-400:focus { - background-color: var(--pgn-color-action-default-danger-400) !important; +.border-warning-200 { + border-color: var(--pgn-color-warning-200) !important; } -.text-danger-400 { - color: var(--pgn-color-danger-400) !important; +.bg-warning-100 { + background-color: var(--pgn-color-warning-100) !important; } -a.text-danger-400:hover, -a.text-danger-400:focus { - color: var(--pgn-color-action-default-danger-400) !important; +a.bg-warning-100:hover, +a.bg-warning-100:focus, +button.bg-warning-100:hover, +button.bg-warning-100:focus { + background-color: var(--pgn-color-action-default-warning-100) !important; } -.border-danger-400 { - border-color: var(--pgn-color-danger-400) !important; +.text-warning-100 { + color: var(--pgn-color-warning-100) !important; } -.bg-danger-300 { - background-color: var(--pgn-color-danger-300) !important; +a.text-warning-100:hover, +a.text-warning-100:focus { + color: var(--pgn-color-action-default-warning-100) !important; } -a.bg-danger-300:hover, -a.bg-danger-300:focus, -button.bg-danger-300:hover, -button.bg-danger-300:focus { - background-color: var(--pgn-color-action-default-danger-300) !important; +.border-warning-100 { + border-color: var(--pgn-color-warning-100) !important; } -.text-danger-300 { - color: var(--pgn-color-danger-300) !important; +.bg-info { + background-color: var(--pgn-color-info-base) !important; } -a.text-danger-300:hover, -a.text-danger-300:focus { - color: var(--pgn-color-action-default-danger-300) !important; +a.bg-info:hover, +a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { + background-color: var(--pgn-color-action-default-info-base) !important; } -.border-danger-300 { - border-color: var(--pgn-color-danger-300) !important; +.text-info { + color: var(--pgn-color-info-base) !important; } -.bg-danger-200 { - background-color: var(--pgn-color-danger-200) !important; +a.text-info:hover, +a.text-info:focus { + color: var(--pgn-color-action-default-info-base) !important; } -a.bg-danger-200:hover, -a.bg-danger-200:focus, -button.bg-danger-200:hover, -button.bg-danger-200:focus { - background-color: var(--pgn-color-action-default-danger-200) !important; +.border-info { + border-color: var(--pgn-color-info-base) !important; } -.text-danger-200 { - color: var(--pgn-color-danger-200) !important; +.bg-info-900 { + background-color: var(--pgn-color-info-900) !important; } -a.text-danger-200:hover, -a.text-danger-200:focus { - color: var(--pgn-color-action-default-danger-200) !important; +a.bg-info-900:hover, +a.bg-info-900:focus, +button.bg-info-900:hover, +button.bg-info-900:focus { + background-color: var(--pgn-color-action-default-info-900) !important; } -.border-danger-200 { - border-color: var(--pgn-color-danger-200) !important; +.text-info-900 { + color: var(--pgn-color-info-900) !important; } -.bg-danger-100 { - background-color: var(--pgn-color-danger-100) !important; +a.text-info-900:hover, +a.text-info-900:focus { + color: var(--pgn-color-action-default-info-900) !important; } -a.bg-danger-100:hover, -a.bg-danger-100:focus, -button.bg-danger-100:hover, -button.bg-danger-100:focus { - background-color: var(--pgn-color-action-default-danger-100) !important; +.border-info-900 { + border-color: var(--pgn-color-info-900) !important; } -.text-danger-100 { - color: var(--pgn-color-danger-100) !important; +.bg-info-800 { + background-color: var(--pgn-color-info-800) !important; } -a.text-danger-100:hover, -a.text-danger-100:focus { - color: var(--pgn-color-action-default-danger-100) !important; +a.bg-info-800:hover, +a.bg-info-800:focus, +button.bg-info-800:hover, +button.bg-info-800:focus { + background-color: var(--pgn-color-action-default-info-800) !important; } -.border-danger-100 { - border-color: var(--pgn-color-danger-100) !important; +.text-info-800 { + color: var(--pgn-color-info-800) !important; } -.bg-warning { - background-color: var(--pgn-color-warning-base) !important; +a.text-info-800:hover, +a.text-info-800:focus { + color: var(--pgn-color-action-default-info-800) !important; } -a.bg-warning:hover, -a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: var(--pgn-color-action-default-warning-base) !important; +.border-info-800 { + border-color: var(--pgn-color-info-800) !important; } -.text-warning { - color: var(--pgn-color-warning-base) !important; +.bg-info-700 { + background-color: var(--pgn-color-info-700) !important; } -a.text-warning:hover, -a.text-warning:focus { - color: var(--pgn-color-action-default-warning-base) !important; +a.bg-info-700:hover, +a.bg-info-700:focus, +button.bg-info-700:hover, +button.bg-info-700:focus { + background-color: var(--pgn-color-action-default-info-700) !important; } -.border-warning { - border-color: var(--pgn-color-warning-base) !important; +.text-info-700 { + color: var(--pgn-color-info-700) !important; } -.bg-warning-900 { - background-color: var(--pgn-color-warning-900) !important; +a.text-info-700:hover, +a.text-info-700:focus { + color: var(--pgn-color-action-default-info-700) !important; } -a.bg-warning-900:hover, -a.bg-warning-900:focus, -button.bg-warning-900:hover, -button.bg-warning-900:focus { - background-color: var(--pgn-color-action-default-warning-900) !important; +.border-info-700 { + border-color: var(--pgn-color-info-700) !important; } -.text-warning-900 { - color: var(--pgn-color-warning-900) !important; +.bg-info-600 { + background-color: var(--pgn-color-info-600) !important; } -a.text-warning-900:hover, -a.text-warning-900:focus { - color: var(--pgn-color-action-default-warning-900) !important; +a.bg-info-600:hover, +a.bg-info-600:focus, +button.bg-info-600:hover, +button.bg-info-600:focus { + background-color: var(--pgn-color-action-default-info-600) !important; } -.border-warning-900 { - border-color: var(--pgn-color-warning-900) !important; +.text-info-600 { + color: var(--pgn-color-info-600) !important; } -.bg-warning-800 { - background-color: var(--pgn-color-warning-800) !important; +a.text-info-600:hover, +a.text-info-600:focus { + color: var(--pgn-color-action-default-info-600) !important; } -a.bg-warning-800:hover, -a.bg-warning-800:focus, -button.bg-warning-800:hover, -button.bg-warning-800:focus { - background-color: var(--pgn-color-action-default-warning-800) !important; +.border-info-600 { + border-color: var(--pgn-color-info-600) !important; } -.text-warning-800 { - color: var(--pgn-color-warning-800) !important; +.bg-info-500 { + background-color: var(--pgn-color-info-500) !important; } -a.text-warning-800:hover, -a.text-warning-800:focus { - color: var(--pgn-color-action-default-warning-800) !important; +a.bg-info-500:hover, +a.bg-info-500:focus, +button.bg-info-500:hover, +button.bg-info-500:focus { + background-color: var(--pgn-color-action-default-info-500) !important; } -.border-warning-800 { - border-color: var(--pgn-color-warning-800) !important; +.text-info-500 { + color: var(--pgn-color-info-500) !important; } -.bg-warning-700 { - background-color: var(--pgn-color-warning-700) !important; +a.text-info-500:hover, +a.text-info-500:focus { + color: var(--pgn-color-action-default-info-500) !important; } -a.bg-warning-700:hover, -a.bg-warning-700:focus, -button.bg-warning-700:hover, -button.bg-warning-700:focus { - background-color: var(--pgn-color-action-default-warning-700) !important; +.border-info-500 { + border-color: var(--pgn-color-info-500) !important; } -.text-warning-700 { - color: var(--pgn-color-warning-700) !important; +.bg-info-400 { + background-color: var(--pgn-color-info-400) !important; } -a.text-warning-700:hover, -a.text-warning-700:focus { - color: var(--pgn-color-action-default-warning-700) !important; +a.bg-info-400:hover, +a.bg-info-400:focus, +button.bg-info-400:hover, +button.bg-info-400:focus { + background-color: var(--pgn-color-action-default-info-400) !important; } -.border-warning-700 { - border-color: var(--pgn-color-warning-700) !important; +.text-info-400 { + color: var(--pgn-color-info-400) !important; } -.bg-warning-600 { - background-color: var(--pgn-color-warning-600) !important; +a.text-info-400:hover, +a.text-info-400:focus { + color: var(--pgn-color-action-default-info-400) !important; } -a.bg-warning-600:hover, -a.bg-warning-600:focus, -button.bg-warning-600:hover, -button.bg-warning-600:focus { - background-color: var(--pgn-color-action-default-warning-600) !important; +.border-info-400 { + border-color: var(--pgn-color-info-400) !important; +} + +.bg-info-300 { + background-color: var(--pgn-color-info-300) !important; } -.text-warning-600 { - color: var(--pgn-color-warning-600) !important; +a.bg-info-300:hover, +a.bg-info-300:focus, +button.bg-info-300:hover, +button.bg-info-300:focus { + background-color: var(--pgn-color-action-default-info-300) !important; } -a.text-warning-600:hover, -a.text-warning-600:focus { - color: var(--pgn-color-action-default-warning-600) !important; +.text-info-300 { + color: var(--pgn-color-info-300) !important; } -.border-warning-600 { - border-color: var(--pgn-color-warning-600) !important; +a.text-info-300:hover, +a.text-info-300:focus { + color: var(--pgn-color-action-default-info-300) !important; } -.bg-warning-500 { - background-color: var(--pgn-color-warning-500) !important; +.border-info-300 { + border-color: var(--pgn-color-info-300) !important; } -a.bg-warning-500:hover, -a.bg-warning-500:focus, -button.bg-warning-500:hover, -button.bg-warning-500:focus { - background-color: var(--pgn-color-action-default-warning-500) !important; +.bg-info-200 { + background-color: var(--pgn-color-info-200) !important; } -.text-warning-500 { - color: var(--pgn-color-warning-500) !important; +a.bg-info-200:hover, +a.bg-info-200:focus, +button.bg-info-200:hover, +button.bg-info-200:focus { + background-color: var(--pgn-color-action-default-info-200) !important; } -a.text-warning-500:hover, -a.text-warning-500:focus { - color: var(--pgn-color-action-default-warning-500) !important; +.text-info-200 { + color: var(--pgn-color-info-200) !important; } -.border-warning-500 { - border-color: var(--pgn-color-warning-500) !important; +a.text-info-200:hover, +a.text-info-200:focus { + color: var(--pgn-color-action-default-info-200) !important; } -.bg-warning-400 { - background-color: var(--pgn-color-warning-400) !important; +.border-info-200 { + border-color: var(--pgn-color-info-200) !important; } -a.bg-warning-400:hover, -a.bg-warning-400:focus, -button.bg-warning-400:hover, -button.bg-warning-400:focus { - background-color: var(--pgn-color-action-default-warning-400) !important; +.bg-info-100 { + background-color: var(--pgn-color-info-100) !important; } -.text-warning-400 { - color: var(--pgn-color-warning-400) !important; +a.bg-info-100:hover, +a.bg-info-100:focus, +button.bg-info-100:hover, +button.bg-info-100:focus { + background-color: var(--pgn-color-action-default-info-100) !important; } -a.text-warning-400:hover, -a.text-warning-400:focus { - color: var(--pgn-color-action-default-warning-400) !important; +.text-info-100 { + color: var(--pgn-color-info-100) !important; } -.border-warning-400 { - border-color: var(--pgn-color-warning-400) !important; +a.text-info-100:hover, +a.text-info-100:focus { + color: var(--pgn-color-action-default-info-100) !important; } -.bg-warning-300 { - background-color: var(--pgn-color-warning-300) !important; +.border-info-100 { + border-color: var(--pgn-color-info-100) !important; } -a.bg-warning-300:hover, -a.bg-warning-300:focus, -button.bg-warning-300:hover, -button.bg-warning-300:focus { - background-color: var(--pgn-color-action-default-warning-300) !important; +.bg-success { + background-color: var(--pgn-color-success-base) !important; } -.text-warning-300 { - color: var(--pgn-color-warning-300) !important; +a.bg-success:hover, +a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { + background-color: var(--pgn-color-action-default-success-base) !important; } -a.text-warning-300:hover, -a.text-warning-300:focus { - color: var(--pgn-color-action-default-warning-300) !important; +.text-success { + color: var(--pgn-color-success-base) !important; } -.border-warning-300 { - border-color: var(--pgn-color-warning-300) !important; +a.text-success:hover, +a.text-success:focus { + color: var(--pgn-color-action-default-success-base) !important; } -.bg-warning-200 { - background-color: var(--pgn-color-warning-200) !important; +.border-success { + border-color: var(--pgn-color-success-base) !important; } -a.bg-warning-200:hover, -a.bg-warning-200:focus, -button.bg-warning-200:hover, -button.bg-warning-200:focus { - background-color: var(--pgn-color-action-default-warning-200) !important; +.bg-success-900 { + background-color: var(--pgn-color-success-900) !important; } -.text-warning-200 { - color: var(--pgn-color-warning-200) !important; +a.bg-success-900:hover, +a.bg-success-900:focus, +button.bg-success-900:hover, +button.bg-success-900:focus { + background-color: var(--pgn-color-action-default-success-900) !important; } -a.text-warning-200:hover, -a.text-warning-200:focus { - color: var(--pgn-color-action-default-warning-200) !important; +.text-success-900 { + color: var(--pgn-color-success-900) !important; } -.border-warning-200 { - border-color: var(--pgn-color-warning-200) !important; +a.text-success-900:hover, +a.text-success-900:focus { + color: var(--pgn-color-action-default-success-900) !important; } -.bg-warning-100 { - background-color: var(--pgn-color-warning-100) !important; +.border-success-900 { + border-color: var(--pgn-color-success-900) !important; } -a.bg-warning-100:hover, -a.bg-warning-100:focus, -button.bg-warning-100:hover, -button.bg-warning-100:focus { - background-color: var(--pgn-color-action-default-warning-100) !important; +.bg-success-800 { + background-color: var(--pgn-color-success-800) !important; } -.text-warning-100 { - color: var(--pgn-color-warning-100) !important; +a.bg-success-800:hover, +a.bg-success-800:focus, +button.bg-success-800:hover, +button.bg-success-800:focus { + background-color: var(--pgn-color-action-default-success-800) !important; } -a.text-warning-100:hover, -a.text-warning-100:focus { - color: var(--pgn-color-action-default-warning-100) !important; +.text-success-800 { + color: var(--pgn-color-success-800) !important; } -.border-warning-100 { - border-color: var(--pgn-color-warning-100) !important; +a.text-success-800:hover, +a.text-success-800:focus { + color: var(--pgn-color-action-default-success-800) !important; } -.bg-info { - background-color: var(--pgn-color-info-base) !important; +.border-success-800 { + border-color: var(--pgn-color-success-800) !important; } -a.bg-info:hover, -a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: var(--pgn-color-action-default-info-base) !important; +.bg-success-700 { + background-color: var(--pgn-color-success-700) !important; } -.text-info { - color: var(--pgn-color-info-base) !important; +a.bg-success-700:hover, +a.bg-success-700:focus, +button.bg-success-700:hover, +button.bg-success-700:focus { + background-color: var(--pgn-color-action-default-success-700) !important; } -a.text-info:hover, -a.text-info:focus { - color: var(--pgn-color-action-default-info-base) !important; +.text-success-700 { + color: var(--pgn-color-success-700) !important; } -.border-info { - border-color: var(--pgn-color-info-base) !important; +a.text-success-700:hover, +a.text-success-700:focus { + color: var(--pgn-color-action-default-success-700) !important; } -.bg-info-900 { - background-color: var(--pgn-color-info-900) !important; +.border-success-700 { + border-color: var(--pgn-color-success-700) !important; } -a.bg-info-900:hover, -a.bg-info-900:focus, -button.bg-info-900:hover, -button.bg-info-900:focus { - background-color: var(--pgn-color-action-default-info-900) !important; +.bg-success-600 { + background-color: var(--pgn-color-success-600) !important; } -.text-info-900 { - color: var(--pgn-color-info-900) !important; +a.bg-success-600:hover, +a.bg-success-600:focus, +button.bg-success-600:hover, +button.bg-success-600:focus { + background-color: var(--pgn-color-action-default-success-600) !important; } -a.text-info-900:hover, -a.text-info-900:focus { - color: var(--pgn-color-action-default-info-900) !important; +.text-success-600 { + color: var(--pgn-color-success-600) !important; } -.border-info-900 { - border-color: var(--pgn-color-info-900) !important; +a.text-success-600:hover, +a.text-success-600:focus { + color: var(--pgn-color-action-default-success-600) !important; } -.bg-info-800 { - background-color: var(--pgn-color-info-800) !important; +.border-success-600 { + border-color: var(--pgn-color-success-600) !important; } -a.bg-info-800:hover, -a.bg-info-800:focus, -button.bg-info-800:hover, -button.bg-info-800:focus { - background-color: var(--pgn-color-action-default-info-800) !important; +.bg-success-500 { + background-color: var(--pgn-color-success-500) !important; } -.text-info-800 { - color: var(--pgn-color-info-800) !important; +a.bg-success-500:hover, +a.bg-success-500:focus, +button.bg-success-500:hover, +button.bg-success-500:focus { + background-color: var(--pgn-color-action-default-success-500) !important; } -a.text-info-800:hover, -a.text-info-800:focus { - color: var(--pgn-color-action-default-info-800) !important; +.text-success-500 { + color: var(--pgn-color-success-500) !important; } -.border-info-800 { - border-color: var(--pgn-color-info-800) !important; +a.text-success-500:hover, +a.text-success-500:focus { + color: var(--pgn-color-action-default-success-500) !important; } -.bg-info-700 { - background-color: var(--pgn-color-info-700) !important; +.border-success-500 { + border-color: var(--pgn-color-success-500) !important; } -a.bg-info-700:hover, -a.bg-info-700:focus, -button.bg-info-700:hover, -button.bg-info-700:focus { - background-color: var(--pgn-color-action-default-info-700) !important; +.bg-success-400 { + background-color: var(--pgn-color-success-400) !important; +} + +a.bg-success-400:hover, +a.bg-success-400:focus, +button.bg-success-400:hover, +button.bg-success-400:focus { + background-color: var(--pgn-color-action-default-success-400) !important; } -.text-info-700 { - color: var(--pgn-color-info-700) !important; +.text-success-400 { + color: var(--pgn-color-success-400) !important; } -a.text-info-700:hover, -a.text-info-700:focus { - color: var(--pgn-color-action-default-info-700) !important; +a.text-success-400:hover, +a.text-success-400:focus { + color: var(--pgn-color-action-default-success-400) !important; } -.border-info-700 { - border-color: var(--pgn-color-info-700) !important; +.border-success-400 { + border-color: var(--pgn-color-success-400) !important; } -.bg-info-600 { - background-color: var(--pgn-color-info-600) !important; +.bg-success-300 { + background-color: var(--pgn-color-success-300) !important; } -a.bg-info-600:hover, -a.bg-info-600:focus, -button.bg-info-600:hover, -button.bg-info-600:focus { - background-color: var(--pgn-color-action-default-info-600) !important; +a.bg-success-300:hover, +a.bg-success-300:focus, +button.bg-success-300:hover, +button.bg-success-300:focus { + background-color: var(--pgn-color-action-default-success-300) !important; } -.text-info-600 { - color: var(--pgn-color-info-600) !important; +.text-success-300 { + color: var(--pgn-color-success-300) !important; } -a.text-info-600:hover, -a.text-info-600:focus { - color: var(--pgn-color-action-default-info-600) !important; +a.text-success-300:hover, +a.text-success-300:focus { + color: var(--pgn-color-action-default-success-300) !important; } -.border-info-600 { - border-color: var(--pgn-color-info-600) !important; +.border-success-300 { + border-color: var(--pgn-color-success-300) !important; } -.bg-info-500 { - background-color: var(--pgn-color-info-500) !important; +.bg-success-200 { + background-color: var(--pgn-color-success-200) !important; } -a.bg-info-500:hover, -a.bg-info-500:focus, -button.bg-info-500:hover, -button.bg-info-500:focus { - background-color: var(--pgn-color-action-default-info-500) !important; +a.bg-success-200:hover, +a.bg-success-200:focus, +button.bg-success-200:hover, +button.bg-success-200:focus { + background-color: var(--pgn-color-action-default-success-200) !important; } -.text-info-500 { - color: var(--pgn-color-info-500) !important; +.text-success-200 { + color: var(--pgn-color-success-200) !important; } -a.text-info-500:hover, -a.text-info-500:focus { - color: var(--pgn-color-action-default-info-500) !important; +a.text-success-200:hover, +a.text-success-200:focus { + color: var(--pgn-color-action-default-success-200) !important; } -.border-info-500 { - border-color: var(--pgn-color-info-500) !important; +.border-success-200 { + border-color: var(--pgn-color-success-200) !important; } -.bg-info-400 { - background-color: var(--pgn-color-info-400) !important; +.bg-success-100 { + background-color: var(--pgn-color-success-100) !important; } -a.bg-info-400:hover, -a.bg-info-400:focus, -button.bg-info-400:hover, -button.bg-info-400:focus { - background-color: var(--pgn-color-action-default-info-400) !important; +a.bg-success-100:hover, +a.bg-success-100:focus, +button.bg-success-100:hover, +button.bg-success-100:focus { + background-color: var(--pgn-color-action-default-success-100) !important; } -.text-info-400 { - color: var(--pgn-color-info-400) !important; +.text-success-100 { + color: var(--pgn-color-success-100) !important; } -a.text-info-400:hover, -a.text-info-400:focus { - color: var(--pgn-color-action-default-info-400) !important; +a.text-success-100:hover, +a.text-success-100:focus { + color: var(--pgn-color-action-default-success-100) !important; } -.border-info-400 { - border-color: var(--pgn-color-info-400) !important; +.border-success-100 { + border-color: var(--pgn-color-success-100) !important; } -.bg-info-300 { - background-color: var(--pgn-color-info-300) !important; +.bg-brand { + background-color: var(--pgn-color-brand-base) !important; } -a.bg-info-300:hover, -a.bg-info-300:focus, -button.bg-info-300:hover, -button.bg-info-300:focus { - background-color: var(--pgn-color-action-default-info-300) !important; +a.bg-brand:hover, +a.bg-brand:focus, +button.bg-brand:hover, +button.bg-brand:focus { + background-color: var(--pgn-color-action-default-brand-base) !important; } -.text-info-300 { - color: var(--pgn-color-info-300) !important; +.text-brand { + color: var(--pgn-color-brand-base) !important; } -a.text-info-300:hover, -a.text-info-300:focus { - color: var(--pgn-color-action-default-info-300) !important; +a.text-brand:hover, +a.text-brand:focus { + color: var(--pgn-color-action-default-brand-base) !important; } -.border-info-300 { - border-color: var(--pgn-color-info-300) !important; +.border-brand { + border-color: var(--pgn-color-brand-base) !important; } -.bg-info-200 { - background-color: var(--pgn-color-info-200) !important; +.bg-brand-900 { + background-color: var(--pgn-color-brand-900) !important; } -a.bg-info-200:hover, -a.bg-info-200:focus, -button.bg-info-200:hover, -button.bg-info-200:focus { - background-color: var(--pgn-color-action-default-info-200) !important; +a.bg-brand-900:hover, +a.bg-brand-900:focus, +button.bg-brand-900:hover, +button.bg-brand-900:focus { + background-color: var(--pgn-color-action-default-brand-900) !important; } -.text-info-200 { - color: var(--pgn-color-info-200) !important; +.text-brand-900 { + color: var(--pgn-color-brand-900) !important; } -a.text-info-200:hover, -a.text-info-200:focus { - color: var(--pgn-color-action-default-info-200) !important; +a.text-brand-900:hover, +a.text-brand-900:focus { + color: var(--pgn-color-action-default-brand-900) !important; } -.border-info-200 { - border-color: var(--pgn-color-info-200) !important; +.border-brand-900 { + border-color: var(--pgn-color-brand-900) !important; } -.bg-info-100 { - background-color: var(--pgn-color-info-100) !important; +.bg-brand-800 { + background-color: var(--pgn-color-brand-800) !important; } -a.bg-info-100:hover, -a.bg-info-100:focus, -button.bg-info-100:hover, -button.bg-info-100:focus { - background-color: var(--pgn-color-action-default-info-100) !important; +a.bg-brand-800:hover, +a.bg-brand-800:focus, +button.bg-brand-800:hover, +button.bg-brand-800:focus { + background-color: var(--pgn-color-action-default-brand-800) !important; } -.text-info-100 { - color: var(--pgn-color-info-100) !important; +.text-brand-800 { + color: var(--pgn-color-brand-800) !important; } -a.text-info-100:hover, -a.text-info-100:focus { - color: var(--pgn-color-action-default-info-100) !important; +a.text-brand-800:hover, +a.text-brand-800:focus { + color: var(--pgn-color-action-default-brand-800) !important; } -.border-info-100 { - border-color: var(--pgn-color-info-100) !important; +.border-brand-800 { + border-color: var(--pgn-color-brand-800) !important; } -.bg-success { - background-color: var(--pgn-color-success-base) !important; +.bg-brand-700 { + background-color: var(--pgn-color-brand-700) !important; } -a.bg-success:hover, -a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: var(--pgn-color-action-default-success-base) !important; +a.bg-brand-700:hover, +a.bg-brand-700:focus, +button.bg-brand-700:hover, +button.bg-brand-700:focus { + background-color: var(--pgn-color-action-default-brand-700) !important; } -.text-success { - color: var(--pgn-color-success-base) !important; +.text-brand-700 { + color: var(--pgn-color-brand-700) !important; } -a.text-success:hover, -a.text-success:focus { - color: var(--pgn-color-action-default-success-base) !important; +a.text-brand-700:hover, +a.text-brand-700:focus { + color: var(--pgn-color-action-default-brand-700) !important; } -.border-success { - border-color: var(--pgn-color-success-base) !important; +.border-brand-700 { + border-color: var(--pgn-color-brand-700) !important; } -.bg-success-900 { - background-color: var(--pgn-color-success-900) !important; +.bg-brand-600 { + background-color: var(--pgn-color-brand-600) !important; } -a.bg-success-900:hover, -a.bg-success-900:focus, -button.bg-success-900:hover, -button.bg-success-900:focus { - background-color: var(--pgn-color-action-default-success-900) !important; +a.bg-brand-600:hover, +a.bg-brand-600:focus, +button.bg-brand-600:hover, +button.bg-brand-600:focus { + background-color: var(--pgn-color-action-default-brand-600) !important; } -.text-success-900 { - color: var(--pgn-color-success-900) !important; +.text-brand-600 { + color: var(--pgn-color-brand-600) !important; } -a.text-success-900:hover, -a.text-success-900:focus { - color: var(--pgn-color-action-default-success-900) !important; +a.text-brand-600:hover, +a.text-brand-600:focus { + color: var(--pgn-color-action-default-brand-600) !important; } -.border-success-900 { - border-color: var(--pgn-color-success-900) !important; +.border-brand-600 { + border-color: var(--pgn-color-brand-600) !important; } -.bg-success-800 { - background-color: var(--pgn-color-success-800) !important; +.bg-brand-500 { + background-color: var(--pgn-color-brand-500) !important; } -a.bg-success-800:hover, -a.bg-success-800:focus, -button.bg-success-800:hover, -button.bg-success-800:focus { - background-color: var(--pgn-color-action-default-success-800) !important; +a.bg-brand-500:hover, +a.bg-brand-500:focus, +button.bg-brand-500:hover, +button.bg-brand-500:focus { + background-color: var(--pgn-color-action-default-brand-500) !important; } -.text-success-800 { - color: var(--pgn-color-success-800) !important; +.text-brand-500 { + color: var(--pgn-color-brand-500) !important; } -a.text-success-800:hover, -a.text-success-800:focus { - color: var(--pgn-color-action-default-success-800) !important; +a.text-brand-500:hover, +a.text-brand-500:focus { + color: var(--pgn-color-action-default-brand-500) !important; } -.border-success-800 { - border-color: var(--pgn-color-success-800) !important; +.border-brand-500 { + border-color: var(--pgn-color-brand-500) !important; } -.bg-success-700 { - background-color: var(--pgn-color-success-700) !important; +.bg-brand-400 { + background-color: var(--pgn-color-brand-400) !important; } -a.bg-success-700:hover, -a.bg-success-700:focus, -button.bg-success-700:hover, -button.bg-success-700:focus { - background-color: var(--pgn-color-action-default-success-700) !important; +a.bg-brand-400:hover, +a.bg-brand-400:focus, +button.bg-brand-400:hover, +button.bg-brand-400:focus { + background-color: var(--pgn-color-action-default-brand-400) !important; } -.text-success-700 { - color: var(--pgn-color-success-700) !important; +.text-brand-400 { + color: var(--pgn-color-brand-400) !important; } -a.text-success-700:hover, -a.text-success-700:focus { - color: var(--pgn-color-action-default-success-700) !important; +a.text-brand-400:hover, +a.text-brand-400:focus { + color: var(--pgn-color-action-default-brand-400) !important; } -.border-success-700 { - border-color: var(--pgn-color-success-700) !important; +.border-brand-400 { + border-color: var(--pgn-color-brand-400) !important; } -.bg-success-600 { - background-color: var(--pgn-color-success-600) !important; +.bg-brand-300 { + background-color: var(--pgn-color-brand-300) !important; } -a.bg-success-600:hover, -a.bg-success-600:focus, -button.bg-success-600:hover, -button.bg-success-600:focus { - background-color: var(--pgn-color-action-default-success-600) !important; +a.bg-brand-300:hover, +a.bg-brand-300:focus, +button.bg-brand-300:hover, +button.bg-brand-300:focus { + background-color: var(--pgn-color-action-default-brand-300) !important; } -.text-success-600 { - color: var(--pgn-color-success-600) !important; +.text-brand-300 { + color: var(--pgn-color-brand-300) !important; } -a.text-success-600:hover, -a.text-success-600:focus { - color: var(--pgn-color-action-default-success-600) !important; +a.text-brand-300:hover, +a.text-brand-300:focus { + color: var(--pgn-color-action-default-brand-300) !important; } -.border-success-600 { - border-color: var(--pgn-color-success-600) !important; +.border-brand-300 { + border-color: var(--pgn-color-brand-300) !important; } -.bg-success-500 { - background-color: var(--pgn-color-success-500) !important; +.bg-brand-200 { + background-color: var(--pgn-color-brand-200) !important; } -a.bg-success-500:hover, -a.bg-success-500:focus, -button.bg-success-500:hover, -button.bg-success-500:focus { - background-color: var(--pgn-color-action-default-success-500) !important; +a.bg-brand-200:hover, +a.bg-brand-200:focus, +button.bg-brand-200:hover, +button.bg-brand-200:focus { + background-color: var(--pgn-color-action-default-brand-200) !important; } -.text-success-500 { - color: var(--pgn-color-success-500) !important; +.text-brand-200 { + color: var(--pgn-color-brand-200) !important; } -a.text-success-500:hover, -a.text-success-500:focus { - color: var(--pgn-color-action-default-success-500) !important; +a.text-brand-200:hover, +a.text-brand-200:focus { + color: var(--pgn-color-action-default-brand-200) !important; } -.border-success-500 { - border-color: var(--pgn-color-success-500) !important; +.border-brand-200 { + border-color: var(--pgn-color-brand-200) !important; } -.bg-success-400 { - background-color: var(--pgn-color-success-400) !important; +.bg-brand-100 { + background-color: var(--pgn-color-brand-100) !important; } -a.bg-success-400:hover, -a.bg-success-400:focus, -button.bg-success-400:hover, -button.bg-success-400:focus { - background-color: var(--pgn-color-action-default-success-400) !important; +a.bg-brand-100:hover, +a.bg-brand-100:focus, +button.bg-brand-100:hover, +button.bg-brand-100:focus { + background-color: var(--pgn-color-action-default-brand-100) !important; } -.text-success-400 { - color: var(--pgn-color-success-400) !important; +.text-brand-100 { + color: var(--pgn-color-brand-100) !important; } -a.text-success-400:hover, -a.text-success-400:focus { - color: var(--pgn-color-action-default-success-400) !important; +a.text-brand-100:hover, +a.text-brand-100:focus { + color: var(--pgn-color-action-default-brand-100) !important; } -.border-success-400 { - border-color: var(--pgn-color-success-400) !important; +.border-brand-100 { + border-color: var(--pgn-color-brand-100) !important; } -.bg-success-300 { - background-color: var(--pgn-color-success-300) !important; +.bg-secondary { + background-color: var(--pgn-color-secondary-base) !important; } -a.bg-success-300:hover, -a.bg-success-300:focus, -button.bg-success-300:hover, -button.bg-success-300:focus { - background-color: var(--pgn-color-action-default-success-300) !important; +a.bg-secondary:hover, +a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { + background-color: var(--pgn-color-action-default-secondary-base) !important; } -.text-success-300 { - color: var(--pgn-color-success-300) !important; +.text-secondary { + color: var(--pgn-color-secondary-base) !important; } -a.text-success-300:hover, -a.text-success-300:focus { - color: var(--pgn-color-action-default-success-300) !important; +a.text-secondary:hover, +a.text-secondary:focus { + color: var(--pgn-color-action-default-secondary-base) !important; } -.border-success-300 { - border-color: var(--pgn-color-success-300) !important; +.border-secondary { + border-color: var(--pgn-color-secondary-base) !important; } -.bg-success-200 { - background-color: var(--pgn-color-success-200) !important; +.bg-secondary-900 { + background-color: var(--pgn-color-secondary-900) !important; } -a.bg-success-200:hover, -a.bg-success-200:focus, -button.bg-success-200:hover, -button.bg-success-200:focus { - background-color: var(--pgn-color-action-default-success-200) !important; +a.bg-secondary-900:hover, +a.bg-secondary-900:focus, +button.bg-secondary-900:hover, +button.bg-secondary-900:focus { + background-color: var(--pgn-color-action-default-secondary-900) !important; } -.text-success-200 { - color: var(--pgn-color-success-200) !important; +.text-secondary-900 { + color: var(--pgn-color-secondary-900) !important; } -a.text-success-200:hover, -a.text-success-200:focus { - color: var(--pgn-color-action-default-success-200) !important; +a.text-secondary-900:hover, +a.text-secondary-900:focus { + color: var(--pgn-color-action-default-secondary-900) !important; } -.border-success-200 { - border-color: var(--pgn-color-success-200) !important; +.border-secondary-900 { + border-color: var(--pgn-color-secondary-900) !important; } -.bg-success-100 { - background-color: var(--pgn-color-success-100) !important; +.bg-secondary-800 { + background-color: var(--pgn-color-secondary-800) !important; } -a.bg-success-100:hover, -a.bg-success-100:focus, -button.bg-success-100:hover, -button.bg-success-100:focus { - background-color: var(--pgn-color-action-default-success-100) !important; +a.bg-secondary-800:hover, +a.bg-secondary-800:focus, +button.bg-secondary-800:hover, +button.bg-secondary-800:focus { + background-color: var(--pgn-color-action-default-secondary-800) !important; } -.text-success-100 { - color: var(--pgn-color-success-100) !important; +.text-secondary-800 { + color: var(--pgn-color-secondary-800) !important; } -a.text-success-100:hover, -a.text-success-100:focus { - color: var(--pgn-color-action-default-success-100) !important; +a.text-secondary-800:hover, +a.text-secondary-800:focus { + color: var(--pgn-color-action-default-secondary-800) !important; } -.border-success-100 { - border-color: var(--pgn-color-success-100) !important; +.border-secondary-800 { + border-color: var(--pgn-color-secondary-800) !important; } -.bg-brand-900 { - background-color: var(--pgn-color-brand-900) !important; +.bg-secondary-700 { + background-color: var(--pgn-color-secondary-700) !important; } -a.bg-brand-900:hover, -a.bg-brand-900:focus, -button.bg-brand-900:hover, -button.bg-brand-900:focus { - background-color: var(--pgn-color-action-default-brand-900) !important; +a.bg-secondary-700:hover, +a.bg-secondary-700:focus, +button.bg-secondary-700:hover, +button.bg-secondary-700:focus { + background-color: var(--pgn-color-action-default-secondary-700) !important; } -.text-brand-900 { - color: var(--pgn-color-brand-900) !important; +.text-secondary-700 { + color: var(--pgn-color-secondary-700) !important; } -a.text-brand-900:hover, -a.text-brand-900:focus { - color: var(--pgn-color-action-default-brand-900) !important; +a.text-secondary-700:hover, +a.text-secondary-700:focus { + color: var(--pgn-color-action-default-secondary-700) !important; } -.border-brand-900 { - border-color: var(--pgn-color-brand-900) !important; +.border-secondary-700 { + border-color: var(--pgn-color-secondary-700) !important; } -.bg-brand-800 { - background-color: var(--pgn-color-brand-800) !important; +.bg-secondary-600 { + background-color: var(--pgn-color-secondary-600) !important; } -a.bg-brand-800:hover, -a.bg-brand-800:focus, -button.bg-brand-800:hover, -button.bg-brand-800:focus { - background-color: var(--pgn-color-action-default-brand-800) !important; +a.bg-secondary-600:hover, +a.bg-secondary-600:focus, +button.bg-secondary-600:hover, +button.bg-secondary-600:focus { + background-color: var(--pgn-color-action-default-secondary-600) !important; } -.text-brand-800 { - color: var(--pgn-color-brand-800) !important; +.text-secondary-600 { + color: var(--pgn-color-secondary-600) !important; } -a.text-brand-800:hover, -a.text-brand-800:focus { - color: var(--pgn-color-action-default-brand-800) !important; +a.text-secondary-600:hover, +a.text-secondary-600:focus { + color: var(--pgn-color-action-default-secondary-600) !important; } -.border-brand-800 { - border-color: var(--pgn-color-brand-800) !important; +.border-secondary-600 { + border-color: var(--pgn-color-secondary-600) !important; } -.bg-brand-700 { - background-color: var(--pgn-color-brand-700) !important; +.bg-secondary-500 { + background-color: var(--pgn-color-secondary-500) !important; } -a.bg-brand-700:hover, -a.bg-brand-700:focus, -button.bg-brand-700:hover, -button.bg-brand-700:focus { - background-color: var(--pgn-color-action-default-brand-700) !important; +a.bg-secondary-500:hover, +a.bg-secondary-500:focus, +button.bg-secondary-500:hover, +button.bg-secondary-500:focus { + background-color: var(--pgn-color-action-default-secondary-500) !important; } -.text-brand-700 { - color: var(--pgn-color-brand-700) !important; +.text-secondary-500 { + color: var(--pgn-color-secondary-500) !important; } -a.text-brand-700:hover, -a.text-brand-700:focus { - color: var(--pgn-color-action-default-brand-700) !important; +a.text-secondary-500:hover, +a.text-secondary-500:focus { + color: var(--pgn-color-action-default-secondary-500) !important; } -.border-brand-700 { - border-color: var(--pgn-color-brand-700) !important; +.border-secondary-500 { + border-color: var(--pgn-color-secondary-500) !important; } -.bg-brand-600 { - background-color: var(--pgn-color-brand-600) !important; +.bg-secondary-400 { + background-color: var(--pgn-color-secondary-400) !important; } -a.bg-brand-600:hover, -a.bg-brand-600:focus, -button.bg-brand-600:hover, -button.bg-brand-600:focus { - background-color: var(--pgn-color-action-default-brand-600) !important; +a.bg-secondary-400:hover, +a.bg-secondary-400:focus, +button.bg-secondary-400:hover, +button.bg-secondary-400:focus { + background-color: var(--pgn-color-action-default-secondary-400) !important; } -.text-brand-600 { - color: var(--pgn-color-brand-600) !important; +.text-secondary-400 { + color: var(--pgn-color-secondary-400) !important; } -a.text-brand-600:hover, -a.text-brand-600:focus { - color: var(--pgn-color-action-default-brand-600) !important; +a.text-secondary-400:hover, +a.text-secondary-400:focus { + color: var(--pgn-color-action-default-secondary-400) !important; } -.border-brand-600 { - border-color: var(--pgn-color-brand-600) !important; +.border-secondary-400 { + border-color: var(--pgn-color-secondary-400) !important; } -.bg-brand-500 { - background-color: var(--pgn-color-brand-500) !important; +.bg-secondary-300 { + background-color: var(--pgn-color-secondary-300) !important; } -a.bg-brand-500:hover, -a.bg-brand-500:focus, -button.bg-brand-500:hover, -button.bg-brand-500:focus { - background-color: var(--pgn-color-action-default-brand-500) !important; +a.bg-secondary-300:hover, +a.bg-secondary-300:focus, +button.bg-secondary-300:hover, +button.bg-secondary-300:focus { + background-color: var(--pgn-color-action-default-secondary-300) !important; } -.text-brand-500 { - color: var(--pgn-color-brand-500) !important; +.text-secondary-300 { + color: var(--pgn-color-secondary-300) !important; } -a.text-brand-500:hover, -a.text-brand-500:focus { - color: var(--pgn-color-action-default-brand-500) !important; +a.text-secondary-300:hover, +a.text-secondary-300:focus { + color: var(--pgn-color-action-default-secondary-300) !important; } -.border-brand-500 { - border-color: var(--pgn-color-brand-500) !important; +.border-secondary-300 { + border-color: var(--pgn-color-secondary-300) !important; } -.bg-brand-400 { - background-color: var(--pgn-color-brand-400) !important; +.bg-secondary-200 { + background-color: var(--pgn-color-secondary-200) !important; } -a.bg-brand-400:hover, -a.bg-brand-400:focus, -button.bg-brand-400:hover, -button.bg-brand-400:focus { - background-color: var(--pgn-color-action-default-brand-400) !important; +a.bg-secondary-200:hover, +a.bg-secondary-200:focus, +button.bg-secondary-200:hover, +button.bg-secondary-200:focus { + background-color: var(--pgn-color-action-default-secondary-200) !important; } -.text-brand-400 { - color: var(--pgn-color-brand-400) !important; +.text-secondary-200 { + color: var(--pgn-color-secondary-200) !important; } -a.text-brand-400:hover, -a.text-brand-400:focus { - color: var(--pgn-color-action-default-brand-400) !important; +a.text-secondary-200:hover, +a.text-secondary-200:focus { + color: var(--pgn-color-action-default-secondary-200) !important; } -.border-brand-400 { - border-color: var(--pgn-color-brand-400) !important; +.border-secondary-200 { + border-color: var(--pgn-color-secondary-200) !important; } -.bg-brand-300 { - background-color: var(--pgn-color-brand-300) !important; +.bg-secondary-100 { + background-color: var(--pgn-color-secondary-100) !important; } -a.bg-brand-300:hover, -a.bg-brand-300:focus, -button.bg-brand-300:hover, -button.bg-brand-300:focus { - background-color: var(--pgn-color-action-default-brand-300) !important; +a.bg-secondary-100:hover, +a.bg-secondary-100:focus, +button.bg-secondary-100:hover, +button.bg-secondary-100:focus { + background-color: var(--pgn-color-action-default-secondary-100) !important; } -.text-brand-300 { - color: var(--pgn-color-brand-300) !important; +.text-secondary-100 { + color: var(--pgn-color-secondary-100) !important; } -a.text-brand-300:hover, -a.text-brand-300:focus { - color: var(--pgn-color-action-default-brand-300) !important; +a.text-secondary-100:hover, +a.text-secondary-100:focus { + color: var(--pgn-color-action-default-secondary-100) !important; } -.border-brand-300 { - border-color: var(--pgn-color-brand-300) !important; +.border-secondary-100 { + border-color: var(--pgn-color-secondary-100) !important; } -.bg-brand-200 { - background-color: var(--pgn-color-brand-200) !important; +.bg-primary { + background-color: var(--pgn-color-primary-base) !important; } -a.bg-brand-200:hover, -a.bg-brand-200:focus, -button.bg-brand-200:hover, -button.bg-brand-200:focus { - background-color: var(--pgn-color-action-default-brand-200) !important; +a.bg-primary:hover, +a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: var(--pgn-color-action-default-primary-base) !important; } -.text-brand-200 { - color: var(--pgn-color-brand-200) !important; +.text-primary { + color: var(--pgn-color-primary-base) !important; } -a.text-brand-200:hover, -a.text-brand-200:focus { - color: var(--pgn-color-action-default-brand-200) !important; +a.text-primary:hover, +a.text-primary:focus { + color: var(--pgn-color-action-default-primary-base) !important; } -.border-brand-200 { - border-color: var(--pgn-color-brand-200) !important; +.border-primary { + border-color: var(--pgn-color-primary-base) !important; } -.bg-brand-100 { - background-color: var(--pgn-color-brand-100) !important; +.bg-primary-900 { + background-color: var(--pgn-color-primary-900) !important; } -a.bg-brand-100:hover, -a.bg-brand-100:focus, -button.bg-brand-100:hover, -button.bg-brand-100:focus { - background-color: var(--pgn-color-action-default-brand-100) !important; +a.bg-primary-900:hover, +a.bg-primary-900:focus, +button.bg-primary-900:hover, +button.bg-primary-900:focus { + background-color: var(--pgn-color-action-default-primary-900) !important; } -.text-brand-100 { - color: var(--pgn-color-brand-100) !important; +.text-primary-900 { + color: var(--pgn-color-primary-900) !important; } -a.text-brand-100:hover, -a.text-brand-100:focus { - color: var(--pgn-color-action-default-brand-100) !important; +a.text-primary-900:hover, +a.text-primary-900:focus { + color: var(--pgn-color-action-default-primary-900) !important; } -.border-brand-100 { - border-color: var(--pgn-color-brand-100) !important; +.border-primary-900 { + border-color: var(--pgn-color-primary-900) !important; } -.bg-secondary { - background-color: var(--pgn-color-secondary-base) !important; +.bg-primary-800 { + background-color: var(--pgn-color-primary-800) !important; } -a.bg-secondary:hover, -a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: var(--pgn-color-action-default-secondary-base) !important; +a.bg-primary-800:hover, +a.bg-primary-800:focus, +button.bg-primary-800:hover, +button.bg-primary-800:focus { + background-color: var(--pgn-color-action-default-primary-800) !important; } -.text-secondary { - color: var(--pgn-color-secondary-base) !important; +.text-primary-800 { + color: var(--pgn-color-primary-800) !important; } -a.text-secondary:hover, -a.text-secondary:focus { - color: var(--pgn-color-action-default-secondary-base) !important; +a.text-primary-800:hover, +a.text-primary-800:focus { + color: var(--pgn-color-action-default-primary-800) !important; } -.border-secondary { - border-color: var(--pgn-color-secondary-base) !important; +.border-primary-800 { + border-color: var(--pgn-color-primary-800) !important; } -.bg-secondary-900 { - background-color: var(--pgn-color-secondary-900) !important; +.bg-primary-700 { + background-color: var(--pgn-color-primary-700) !important; } -a.bg-secondary-900:hover, -a.bg-secondary-900:focus, -button.bg-secondary-900:hover, -button.bg-secondary-900:focus { - background-color: var(--pgn-color-action-default-secondary-900) !important; +a.bg-primary-700:hover, +a.bg-primary-700:focus, +button.bg-primary-700:hover, +button.bg-primary-700:focus { + background-color: var(--pgn-color-action-default-primary-700) !important; } -.text-secondary-900 { - color: var(--pgn-color-secondary-900) !important; +.text-primary-700 { + color: var(--pgn-color-primary-700) !important; } - -a.text-secondary-900:hover, -a.text-secondary-900:focus { - color: var(--pgn-color-action-default-secondary-900) !important; + +a.text-primary-700:hover, +a.text-primary-700:focus { + color: var(--pgn-color-action-default-primary-700) !important; } -.border-secondary-900 { - border-color: var(--pgn-color-secondary-900) !important; +.border-primary-700 { + border-color: var(--pgn-color-primary-700) !important; } -.bg-secondary-800 { - background-color: var(--pgn-color-secondary-800) !important; +.bg-primary-600 { + background-color: var(--pgn-color-primary-600) !important; } -a.bg-secondary-800:hover, -a.bg-secondary-800:focus, -button.bg-secondary-800:hover, -button.bg-secondary-800:focus { - background-color: var(--pgn-color-action-default-secondary-800) !important; +a.bg-primary-600:hover, +a.bg-primary-600:focus, +button.bg-primary-600:hover, +button.bg-primary-600:focus { + background-color: var(--pgn-color-action-default-primary-600) !important; } -.text-secondary-800 { - color: var(--pgn-color-secondary-800) !important; +.text-primary-600 { + color: var(--pgn-color-primary-600) !important; } -a.text-secondary-800:hover, -a.text-secondary-800:focus { - color: var(--pgn-color-action-default-secondary-800) !important; +a.text-primary-600:hover, +a.text-primary-600:focus { + color: var(--pgn-color-action-default-primary-600) !important; } -.border-secondary-800 { - border-color: var(--pgn-color-secondary-800) !important; +.border-primary-600 { + border-color: var(--pgn-color-primary-600) !important; } -.bg-secondary-700 { - background-color: var(--pgn-color-secondary-700) !important; +.bg-primary-500 { + background-color: var(--pgn-color-primary-500) !important; } -a.bg-secondary-700:hover, -a.bg-secondary-700:focus, -button.bg-secondary-700:hover, -button.bg-secondary-700:focus { - background-color: var(--pgn-color-action-default-secondary-700) !important; +a.bg-primary-500:hover, +a.bg-primary-500:focus, +button.bg-primary-500:hover, +button.bg-primary-500:focus { + background-color: var(--pgn-color-action-default-primary-500) !important; } -.text-secondary-700 { - color: var(--pgn-color-secondary-700) !important; +.text-primary-500 { + color: var(--pgn-color-primary-500) !important; } -a.text-secondary-700:hover, -a.text-secondary-700:focus { - color: var(--pgn-color-action-default-secondary-700) !important; +a.text-primary-500:hover, +a.text-primary-500:focus { + color: var(--pgn-color-action-default-primary-500) !important; } -.border-secondary-700 { - border-color: var(--pgn-color-secondary-700) !important; +.border-primary-500 { + border-color: var(--pgn-color-primary-500) !important; } -.bg-secondary-600 { - background-color: var(--pgn-color-secondary-600) !important; +.bg-primary-400 { + background-color: var(--pgn-color-primary-400) !important; } -a.bg-secondary-600:hover, -a.bg-secondary-600:focus, -button.bg-secondary-600:hover, -button.bg-secondary-600:focus { - background-color: var(--pgn-color-action-default-secondary-600) !important; +a.bg-primary-400:hover, +a.bg-primary-400:focus, +button.bg-primary-400:hover, +button.bg-primary-400:focus { + background-color: var(--pgn-color-action-default-primary-400) !important; } -.text-secondary-600 { - color: var(--pgn-color-secondary-600) !important; +.text-primary-400 { + color: var(--pgn-color-primary-400) !important; } -a.text-secondary-600:hover, -a.text-secondary-600:focus { - color: var(--pgn-color-action-default-secondary-600) !important; +a.text-primary-400:hover, +a.text-primary-400:focus { + color: var(--pgn-color-action-default-primary-400) !important; } -.border-secondary-600 { - border-color: var(--pgn-color-secondary-600) !important; +.border-primary-400 { + border-color: var(--pgn-color-primary-400) !important; } -.bg-secondary-500 { - background-color: var(--pgn-color-secondary-500) !important; +.bg-primary-300 { + background-color: var(--pgn-color-primary-300) !important; } -a.bg-secondary-500:hover, -a.bg-secondary-500:focus, -button.bg-secondary-500:hover, -button.bg-secondary-500:focus { - background-color: var(--pgn-color-action-default-secondary-500) !important; +a.bg-primary-300:hover, +a.bg-primary-300:focus, +button.bg-primary-300:hover, +button.bg-primary-300:focus { + background-color: var(--pgn-color-action-default-primary-300) !important; } -.text-secondary-500 { - color: var(--pgn-color-secondary-500) !important; +.text-primary-300 { + color: var(--pgn-color-primary-300) !important; } -a.text-secondary-500:hover, -a.text-secondary-500:focus { - color: var(--pgn-color-action-default-secondary-500) !important; +a.text-primary-300:hover, +a.text-primary-300:focus { + color: var(--pgn-color-action-default-primary-300) !important; } -.border-secondary-500 { - border-color: var(--pgn-color-secondary-500) !important; +.border-primary-300 { + border-color: var(--pgn-color-primary-300) !important; } -.bg-secondary-400 { - background-color: var(--pgn-color-secondary-400) !important; +.bg-primary-200 { + background-color: var(--pgn-color-primary-200) !important; } -a.bg-secondary-400:hover, -a.bg-secondary-400:focus, -button.bg-secondary-400:hover, -button.bg-secondary-400:focus { - background-color: var(--pgn-color-action-default-secondary-400) !important; +a.bg-primary-200:hover, +a.bg-primary-200:focus, +button.bg-primary-200:hover, +button.bg-primary-200:focus { + background-color: var(--pgn-color-action-default-primary-200) !important; } -.text-secondary-400 { - color: var(--pgn-color-secondary-400) !important; +.text-primary-200 { + color: var(--pgn-color-primary-200) !important; } -a.text-secondary-400:hover, -a.text-secondary-400:focus { - color: var(--pgn-color-action-default-secondary-400) !important; +a.text-primary-200:hover, +a.text-primary-200:focus { + color: var(--pgn-color-action-default-primary-200) !important; } -.border-secondary-400 { - border-color: var(--pgn-color-secondary-400) !important; +.border-primary-200 { + border-color: var(--pgn-color-primary-200) !important; } -.bg-secondary-300 { - background-color: var(--pgn-color-secondary-300) !important; +.bg-primary-100 { + background-color: var(--pgn-color-primary-100) !important; } -a.bg-secondary-300:hover, -a.bg-secondary-300:focus, -button.bg-secondary-300:hover, -button.bg-secondary-300:focus { - background-color: var(--pgn-color-action-default-secondary-300) !important; +a.bg-primary-100:hover, +a.bg-primary-100:focus, +button.bg-primary-100:hover, +button.bg-primary-100:focus { + background-color: var(--pgn-color-action-default-primary-100) !important; } -.text-secondary-300 { - color: var(--pgn-color-secondary-300) !important; +.text-primary-100 { + color: var(--pgn-color-primary-100) !important; } -a.text-secondary-300:hover, -a.text-secondary-300:focus { - color: var(--pgn-color-action-default-secondary-300) !important; +a.text-primary-100:hover, +a.text-primary-100:focus { + color: var(--pgn-color-action-default-primary-100) !important; } -.border-secondary-300 { - border-color: var(--pgn-color-secondary-300) !important; +.border-primary-100 { + border-color: var(--pgn-color-primary-100) !important; } -.bg-secondary-200 { - background-color: var(--pgn-color-secondary-200) !important; +.bg-gray { + background-color: var(--pgn-color-gray-base) !important; } -a.bg-secondary-200:hover, -a.bg-secondary-200:focus, -button.bg-secondary-200:hover, -button.bg-secondary-200:focus { - background-color: var(--pgn-color-action-default-secondary-200) !important; +a.bg-gray:hover, +a.bg-gray:focus, +button.bg-gray:hover, +button.bg-gray:focus { + background-color: var(--pgn-color-action-default-gray-base) !important; } -.text-secondary-200 { - color: var(--pgn-color-secondary-200) !important; +.text-gray { + color: var(--pgn-color-gray-base) !important; } -a.text-secondary-200:hover, -a.text-secondary-200:focus { - color: var(--pgn-color-action-default-secondary-200) !important; +a.text-gray:hover, +a.text-gray:focus { + color: var(--pgn-color-action-default-gray-base) !important; } -.border-secondary-200 { - border-color: var(--pgn-color-secondary-200) !important; +.border-gray { + border-color: var(--pgn-color-gray-base) !important; } -.bg-secondary-100 { - background-color: var(--pgn-color-secondary-100) !important; +.bg-gray-900 { + background-color: var(--pgn-color-gray-900) !important; } -a.bg-secondary-100:hover, -a.bg-secondary-100:focus, -button.bg-secondary-100:hover, -button.bg-secondary-100:focus { - background-color: var(--pgn-color-action-default-secondary-100) !important; +a.bg-gray-900:hover, +a.bg-gray-900:focus, +button.bg-gray-900:hover, +button.bg-gray-900:focus { + background-color: var(--pgn-color-action-default-gray-900) !important; } -.text-secondary-100 { - color: var(--pgn-color-secondary-100) !important; +.text-gray-900 { + color: var(--pgn-color-gray-900) !important; } -a.text-secondary-100:hover, -a.text-secondary-100:focus { - color: var(--pgn-color-action-default-secondary-100) !important; +a.text-gray-900:hover, +a.text-gray-900:focus { + color: var(--pgn-color-action-default-gray-900) !important; } -.border-secondary-100 { - border-color: var(--pgn-color-secondary-100) !important; +.border-gray-900 { + border-color: var(--pgn-color-gray-900) !important; } -.bg-primary-900 { - background-color: var(--pgn-color-primary-900) !important; +.bg-gray-800 { + background-color: var(--pgn-color-gray-800) !important; } -a.bg-primary-900:hover, -a.bg-primary-900:focus, -button.bg-primary-900:hover, -button.bg-primary-900:focus { - background-color: var(--pgn-color-action-default-primary-900) !important; +a.bg-gray-800:hover, +a.bg-gray-800:focus, +button.bg-gray-800:hover, +button.bg-gray-800:focus { + background-color: var(--pgn-color-action-default-gray-800) !important; } -.text-primary-900 { - color: var(--pgn-color-primary-900) !important; +.text-gray-800 { + color: var(--pgn-color-gray-800) !important; } -a.text-primary-900:hover, -a.text-primary-900:focus { - color: var(--pgn-color-action-default-primary-900) !important; +a.text-gray-800:hover, +a.text-gray-800:focus { + color: var(--pgn-color-action-default-gray-800) !important; } -.border-primary-900 { - border-color: var(--pgn-color-primary-900) !important; +.border-gray-800 { + border-color: var(--pgn-color-gray-800) !important; } -.bg-primary-800 { - background-color: var(--pgn-color-primary-800) !important; +.bg-gray-700 { + background-color: var(--pgn-color-gray-700) !important; } -a.bg-primary-800:hover, -a.bg-primary-800:focus, -button.bg-primary-800:hover, -button.bg-primary-800:focus { - background-color: var(--pgn-color-action-default-primary-800) !important; +a.bg-gray-700:hover, +a.bg-gray-700:focus, +button.bg-gray-700:hover, +button.bg-gray-700:focus { + background-color: var(--pgn-color-action-default-gray-700) !important; } -.text-primary-800 { - color: var(--pgn-color-primary-800) !important; +.text-gray-700 { + color: var(--pgn-color-gray-700) !important; } -a.text-primary-800:hover, -a.text-primary-800:focus { - color: var(--pgn-color-action-default-primary-800) !important; +a.text-gray-700:hover, +a.text-gray-700:focus { + color: var(--pgn-color-action-default-gray-700) !important; } -.border-primary-800 { - border-color: var(--pgn-color-primary-800) !important; +.border-gray-700 { + border-color: var(--pgn-color-gray-700) !important; } -.bg-primary-700 { - background-color: var(--pgn-color-primary-700) !important; +.bg-gray-600 { + background-color: var(--pgn-color-gray-600) !important; } -a.bg-primary-700:hover, -a.bg-primary-700:focus, -button.bg-primary-700:hover, -button.bg-primary-700:focus { - background-color: var(--pgn-color-action-default-primary-700) !important; +a.bg-gray-600:hover, +a.bg-gray-600:focus, +button.bg-gray-600:hover, +button.bg-gray-600:focus { + background-color: var(--pgn-color-action-default-gray-600) !important; } -.text-primary-700 { - color: var(--pgn-color-primary-700) !important; +.text-gray-600 { + color: var(--pgn-color-gray-600) !important; } -a.text-primary-700:hover, -a.text-primary-700:focus { - color: var(--pgn-color-action-default-primary-700) !important; +a.text-gray-600:hover, +a.text-gray-600:focus { + color: var(--pgn-color-action-default-gray-600) !important; } -.border-primary-700 { - border-color: var(--pgn-color-primary-700) !important; +.border-gray-600 { + border-color: var(--pgn-color-gray-600) !important; } -.bg-primary-600 { - background-color: var(--pgn-color-primary-600) !important; +.bg-gray-500 { + background-color: var(--pgn-color-gray-500) !important; } -a.bg-primary-600:hover, -a.bg-primary-600:focus, -button.bg-primary-600:hover, -button.bg-primary-600:focus { - background-color: var(--pgn-color-action-default-primary-600) !important; +a.bg-gray-500:hover, +a.bg-gray-500:focus, +button.bg-gray-500:hover, +button.bg-gray-500:focus { + background-color: var(--pgn-color-action-default-gray-500) !important; } -.text-primary-600 { - color: var(--pgn-color-primary-600) !important; +.text-gray-500 { + color: var(--pgn-color-gray-500) !important; } -a.text-primary-600:hover, -a.text-primary-600:focus { - color: var(--pgn-color-action-default-primary-600) !important; +a.text-gray-500:hover, +a.text-gray-500:focus { + color: var(--pgn-color-action-default-gray-500) !important; } -.border-primary-600 { - border-color: var(--pgn-color-primary-600) !important; +.border-gray-500 { + border-color: var(--pgn-color-gray-500) !important; } -.bg-primary-500 { - background-color: var(--pgn-color-primary-500) !important; +.bg-gray-400 { + background-color: var(--pgn-color-gray-400) !important; } -a.bg-primary-500:hover, -a.bg-primary-500:focus, -button.bg-primary-500:hover, -button.bg-primary-500:focus { - background-color: var(--pgn-color-action-default-primary-500) !important; +a.bg-gray-400:hover, +a.bg-gray-400:focus, +button.bg-gray-400:hover, +button.bg-gray-400:focus { + background-color: var(--pgn-color-action-default-gray-400) !important; } -.text-primary-500 { - color: var(--pgn-color-primary-500) !important; +.text-gray-400 { + color: var(--pgn-color-gray-400) !important; } -a.text-primary-500:hover, -a.text-primary-500:focus { - color: var(--pgn-color-action-default-primary-500) !important; +a.text-gray-400:hover, +a.text-gray-400:focus { + color: var(--pgn-color-action-default-gray-400) !important; } -.border-primary-500 { - border-color: var(--pgn-color-primary-500) !important; +.border-gray-400 { + border-color: var(--pgn-color-gray-400) !important; } -.bg-primary-400 { - background-color: var(--pgn-color-primary-400) !important; +.bg-gray-300 { + background-color: var(--pgn-color-gray-300) !important; } -a.bg-primary-400:hover, -a.bg-primary-400:focus, -button.bg-primary-400:hover, -button.bg-primary-400:focus { - background-color: var(--pgn-color-action-default-primary-400) !important; +a.bg-gray-300:hover, +a.bg-gray-300:focus, +button.bg-gray-300:hover, +button.bg-gray-300:focus { + background-color: var(--pgn-color-action-default-gray-300) !important; } -.text-primary-400 { - color: var(--pgn-color-primary-400) !important; +.text-gray-300 { + color: var(--pgn-color-gray-300) !important; } -a.text-primary-400:hover, -a.text-primary-400:focus { - color: var(--pgn-color-action-default-primary-400) !important; +a.text-gray-300:hover, +a.text-gray-300:focus { + color: var(--pgn-color-action-default-gray-300) !important; } -.border-primary-400 { - border-color: var(--pgn-color-primary-400) !important; +.border-gray-300 { + border-color: var(--pgn-color-gray-300) !important; } -.bg-primary-300 { - background-color: var(--pgn-color-primary-300) !important; +.bg-gray-200 { + background-color: var(--pgn-color-gray-200) !important; } -a.bg-primary-300:hover, -a.bg-primary-300:focus, -button.bg-primary-300:hover, -button.bg-primary-300:focus { - background-color: var(--pgn-color-action-default-primary-300) !important; +a.bg-gray-200:hover, +a.bg-gray-200:focus, +button.bg-gray-200:hover, +button.bg-gray-200:focus { + background-color: var(--pgn-color-action-default-gray-200) !important; } -.text-primary-300 { - color: var(--pgn-color-primary-300) !important; +.text-gray-200 { + color: var(--pgn-color-gray-200) !important; } -a.text-primary-300:hover, -a.text-primary-300:focus { - color: var(--pgn-color-action-default-primary-300) !important; +a.text-gray-200:hover, +a.text-gray-200:focus { + color: var(--pgn-color-action-default-gray-200) !important; } -.border-primary-300 { - border-color: var(--pgn-color-primary-300) !important; +.border-gray-200 { + border-color: var(--pgn-color-gray-200) !important; } -.bg-primary-200 { - background-color: var(--pgn-color-primary-200) !important; +.bg-gray-100 { + background-color: var(--pgn-color-gray-100) !important; } -a.bg-primary-200:hover, -a.bg-primary-200:focus, -button.bg-primary-200:hover, -button.bg-primary-200:focus { - background-color: var(--pgn-color-action-default-primary-200) !important; +a.bg-gray-100:hover, +a.bg-gray-100:focus, +button.bg-gray-100:hover, +button.bg-gray-100:focus { + background-color: var(--pgn-color-action-default-gray-100) !important; } -.text-primary-200 { - color: var(--pgn-color-primary-200) !important; +.text-gray-100 { + color: var(--pgn-color-gray-100) !important; } -a.text-primary-200:hover, -a.text-primary-200:focus { - color: var(--pgn-color-action-default-primary-200) !important; +a.text-gray-100:hover, +a.text-gray-100:focus { + color: var(--pgn-color-action-default-gray-100) !important; } -.border-primary-200 { - border-color: var(--pgn-color-primary-200) !important; +.border-gray-100 { + border-color: var(--pgn-color-gray-100) !important; } -.bg-primary-100 { - background-color: var(--pgn-color-primary-100) !important; +.bg-accent-b { + background-color: var(--pgn-color-accent-b) !important; } -a.bg-primary-100:hover, -a.bg-primary-100:focus, -button.bg-primary-100:hover, -button.bg-primary-100:focus { - background-color: var(--pgn-color-action-default-primary-100) !important; +a.bg-accent-b:hover, +a.bg-accent-b:focus, +button.bg-accent-b:hover, +button.bg-accent-b:focus { + background-color: var(--pgn-color-action-default-accent-b) !important; } -.text-primary-100 { - color: var(--pgn-color-primary-100) !important; +.text-accent-b { + color: var(--pgn-color-accent-b) !important; } -a.text-primary-100:hover, -a.text-primary-100:focus { - color: var(--pgn-color-action-default-primary-100) !important; +a.text-accent-b:hover, +a.text-accent-b:focus { + color: var(--pgn-color-action-default-accent-b) !important; } -.border-primary-100 { - border-color: var(--pgn-color-primary-100) !important; +.border-accent-b { + border-color: var(--pgn-color-accent-b) !important; } -.bg-gray-500 { - background-color: var(--pgn-color-gray-500) !important; +.bg-accent-a { + background-color: var(--pgn-color-accent-a) !important; } -a.bg-gray-500:hover, -a.bg-gray-500:focus, -button.bg-gray-500:hover, -button.bg-gray-500:focus { - background-color: var(--pgn-color-action-default-gray-500) !important; +a.bg-accent-a:hover, +a.bg-accent-a:focus, +button.bg-accent-a:hover, +button.bg-accent-a:focus { + background-color: var(--pgn-color-action-default-accent-a) !important; } -.text-gray-500 { - color: var(--pgn-color-gray-500) !important; +.text-accent-a { + color: var(--pgn-color-accent-a) !important; } -a.text-gray-500:hover, -a.text-gray-500:focus { - color: var(--pgn-color-action-default-gray-500) !important; +a.text-accent-a:hover, +a.text-accent-a:focus { + color: var(--pgn-color-action-default-accent-a) !important; } -.border-gray-500 { - border-color: var(--pgn-color-gray-500) !important; +.border-accent-a { + border-color: var(--pgn-color-accent-a) !important; } diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 4d0e84f314..97329a27fd 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -1,656 +1,4 @@ -[object Promise]: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-mark-bg: #FFF243FF; - --pgn-color-list-group-base: inherit; - --pgn-color-toast-base: inherit; - --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover: #00000000; - --pgn-color-stepper-header-step-border: none; - --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-bg-base: #00000000; - --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-theme-interval: 8%; - --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-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-other-form-control-custom-file-content: Browse; - --pgn-other-form-control-custom-file-lang: en; - --pgn-other-form-control-range-track-cursor: pointer; - --pgn-other-form-control-cursor: auto; - --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-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-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-tooltip-zindex: 1070; - --pgn-elevation-sheet-zindex-main: 1032; - --pgn-elevation-sheet-zindex-backdrop: 1031; - --pgn-elevation-product-tour-checkpoint-zindex: 1060; - --pgn-elevation-popover-box-shadow: none; - --pgn-elevation-popover-zindex: 1060; - --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-modal-zindex: 1050; - --pgn-elevation-modal-backdrop-zindex: 1040; - --pgn-elevation-dropdown-box-shadow: none; - --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-btn: none; - --pgn-transition-badge: none; - --pgn-typography-line-height-micro: .938rem; - --pgn-typography-line-height-sm: 1.5rem; - --pgn-typography-line-height-lg: 1.5rem; - --pgn-typography-line-height-base: 1.5556rem; - --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: 1rem; - --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-link-decoration-brand-inline-hover: underline; - --pgn-typography-link-decoration-brand-inline-base: underline; - --pgn-typography-link-decoration-brand-hover: underline; - --pgn-typography-link-decoration-brand-base: none; - --pgn-typography-link-decoration-muted-inline-hover: underline; - --pgn-typography-link-decoration-muted-inline-base: underline; - --pgn-typography-link-decoration-muted-hover: underline; - --pgn-typography-link-decoration-muted-base: none; - --pgn-typography-link-decoration-inline-hover: underline; - --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-sm: 1.4286rem; - --pgn-typography-input-btn-line-height-base: 1.3333rem; - --pgn-typography-input-btn-font-size-lg: 1.325rem; - --pgn-typography-input-btn-font-size-sm: .875rem; - --pgn-typography-input-btn-font-size-base: 1.125rem; - --pgn-typography-input-btn-font-family: inherit; - --pgn-typography-headings-line-height: 1.25rem; - --pgn-typography-headings-font-family: inherit; - --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-dropdown-item-text-decoration: none; - --pgn-typography-code-font-size: 87.5%; - --pgn-typography-badge-font-size: 75%; - --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: 0rem; - --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-tooltip-margin: 0rem; - --pgn-spacing-tooltip-padding-x: .5rem; - --pgn-spacing-tooltip-padding-y: .5rem; - --pgn-spacing-toast-container-gutter-sm: .625rem; - --pgn-spacing-toast-container-gutter-lg: 1.25rem; - --pgn-spacing-toast-padding-y: .25rem; - --pgn-spacing-toast-padding-x: .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: 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: .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-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-popover-header-padding-x: 1rem; - --pgn-spacing-popover-header-padding-y: .5rem; - --pgn-spacing-pagination-padding-x-lg: 1.5rem; - --pgn-spacing-pagination-padding-x-sm: .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-nav-link-distance-to-border: 4px; - --pgn-spacing-nav-link-padding-x: 1rem; - --pgn-spacing-nav-link-padding-y: .5rem; - --pgn-spacing-modal-dialog-margin: 1.5rem; - --pgn-spacing-modal-header-padding-y: 1rem; - --pgn-spacing-modal-footer-padding-y: 1rem; - --pgn-spacing-modal-inner-padding-bottom: .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-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-form-control-select-indicator-padding: 1rem; - --pgn-spacing-form-control-spacer-x: 1rem; - --pgn-spacing-form-control-gutter: .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-input-check-gutter: 1.25rem; - --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-padding-x-item: 1rem; - --pgn-spacing-dropdown-padding-x-base: 0rem; - --pgn-spacing-dropdown-spacer: .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-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-chip-outline-width: 3px; - --pgn-spacing-chip-outline-focus-distance-dark: .313rem; - --pgn-spacing-chip-outline-focus-distance-light: .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-y: 1px; - --pgn-spacing-chip-margin-icon: .25rem; - --pgn-spacing-chip-margin-base: .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-base: 1rem; - --pgn-spacing-card-logo-left-offset-horizontal: .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-columns-gap: 1.25rem; - --pgn-spacing-card-columns-count: 3rem; - --pgn-spacing-card-margin-group: 12px; - --pgn-spacing-card-spacer-y: .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-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: 0rem; - --pgn-size-input-btn-focus-width: 1px; - --pgn-size-caret-width: .3em; - --pgn-size-tooltip-arrow-width: .8rem; - --pgn-size-tooltip-arrow-height: .4rem; - --pgn-size-tooltip-max-width: 200px; - --pgn-size-toast-border-radius: .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: 0rem; - --pgn-size-stepper-header-height-min: 5.13rem; - --pgn-size-stack-gap: 0rem; - --pgn-size-spinner-sm-border-width: .2em; - --pgn-size-spinner-sm-width: 1rem; - --pgn-size-spinner-base-border-width: .25em; - --pgn-size-spinner-base-width: 2rem; - --pgn-size-search-field-border-radius: 0rem; - --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: 0rem; - --pgn-size-progress-bar-border-width: 1px; - --pgn-size-progress-bar-height-annotated: .3125rem; - --pgn-size-progress-bar-height-base: 1rem; - --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-width: 1rem; - --pgn-size-popover-icon-width: 1rem; - --pgn-size-popover-icon-height: 1rem; - --pgn-size-popover-max-width: 480px; - --pgn-size-pagination-focus-outline: 0rem; - --pgn-size-pagination-toggle-border-sm: .25rem; - --pgn-size-pagination-toggle-border-base: .3125rem; - --pgn-size-pagination-reduced-dropdown-min-width: 6rem; - --pgn-size-pagination-reduced-dropdown-max-height: 60vh; - --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-nav-scroll-max-height: 75vh; - --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-pills-link-border-width: 1px; - --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-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-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-form-border-radius-width: .125rem; - --pgn-size-form-border-radius-check-focus: .0625rem; - --pgn-size-form-autosuggest-border-width: .125rem; - --pgn-size-form-autosuggest-spinner-width: 1.25rem; - --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: 0rem; - --pgn-size-form-control-icon-width: 2rem; - --pgn-size-form-control-range-thumb-border-radius: 1rem; - --pgn-size-form-control-range-thumb-border-base: 0rem; - --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-width: 100%; - --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-width-focus: 0.063rem; - --pgn-size-form-input-width-hover: 0.063rem; - --pgn-size-dropdown-min-width: 18rem; - --pgn-size-data-table-layout-sidebar-width: 12rem; - --pgn-size-data-table-dropdown-pagination-min-width: 6rem; - --pgn-size-data-table-dropdown-pagination-max-height: 60vh; - --pgn-size-data-table-border: 2px; - --pgn-size-container-max-width-xl: 1440px; - --pgn-size-container-max-width-lg: 1192px; - --pgn-size-container-max-width-md: 952px; - --pgn-size-container-max-width-sm: 708px; - --pgn-size-container-max-width-xs: 464px; - --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px); - --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-carousel-caption-width: 70%; - --pgn-size-carousel-indicator-height-area-hit: 10px; - --pgn-size-carousel-indicator-height-base: 3px; - --pgn-size-carousel-indicator-width: 30px; - --pgn-size-carousel-control-width-icon: 20px; - --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-vertical-max-height: 140px; - --pgn-size-card-image-horizontal-width-max: 240px; - --pgn-size-card-focus-border-width: 2px; - --pgn-size-card-border-radius-logo: .25rem; - --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-badge-border-radius-pill: 10rem; - --pgn-size-badge-border-radius-base: .25rem; - --pgn-size-avatar-border-radius: 100%; - --pgn-size-avatar-border-base: 1px; - --pgn-size-avatar-huge: 18.75rem; - --pgn-size-avatar-xxl: 11.5rem; - --pgn-size-avatar-xl: 6rem; - --pgn-size-avatar-lg: 4rem; - --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-max-width: 18.75rem; - --pgn-size-annotation-arrow-border-width: .5rem; - --pgn-size-alert-border-width: 0rem; - --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; +:root { --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text); --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base); --pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-primary-500); @@ -760,6 +108,7 @@ --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; --pgn-color-dark-900: #1B2C21FF; --pgn-color-dark-800: #1D2F23FF; --pgn-color-dark-700: #1F3226FF; @@ -769,6 +118,7 @@ --pgn-color-dark-300: #939F97FF; --pgn-color-dark-200: #C9CFCBFF; --pgn-color-dark-100: #F2F3F3FF; + --pgn-color-light-base: #E1DDDBFF; --pgn-color-light-900: #9E9B99FF; --pgn-color-light-800: #A9A6A4FF; --pgn-color-light-700: #B4B1AFFF; @@ -818,6 +168,7 @@ --pgn-color-success-300: #8BC1A9FF; --pgn-color-success-200: #C5E0D4FF; --pgn-color-success-100: #F1F8F5FF; + --pgn-color-brand-base: #9D0054FF; --pgn-color-brand-900: #6E003BFF; --pgn-color-brand-800: #76003FFF; --pgn-color-brand-700: #7E0043FF; @@ -837,6 +188,7 @@ --pgn-color-secondary-300: #A2A2A2FF; --pgn-color-secondary-200: #D1D1D1FF; --pgn-color-secondary-100: #F4F4F4FF; + --pgn-color-primary-base: #0A3055FF; --pgn-color-primary-900: #07223CFF; --pgn-color-primary-800: #082440FF; --pgn-color-primary-700: #082644FF; @@ -846,9 +198,28 @@ --pgn-color-primary-300: #8598AAFF; --pgn-color-primary-200: #C2CBD5FF; --pgn-color-primary-100: #F0F3F5FF; + --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-500: var(--pgn-color-gray-base); + --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-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); @@ -862,6 +233,7 @@ --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: var(--pgn-color-link-brand-inline-hover-base); --pgn-color-link-brand-inline-hover-base: #51002BFF; --pgn-color-link-brand-inline-decoration: #9D00544D; @@ -895,8 +267,10 @@ --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); @@ -910,10 +284,12 @@ --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); @@ -926,6 +302,8 @@ --pgn-color-progress-bar-bar-bg-base: var(--pgn-color-accent-a); --pgn-color-progress-bar-bar-base: var(--pgn-color-white); --pgn-color-progress-bar-border: var(--pgn-color-gray-500); + --pgn-color-progress-bar-bg: #00000000; + --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); @@ -945,6 +323,7 @@ --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); @@ -972,6 +351,7 @@ --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; @@ -1011,6 +391,7 @@ --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); @@ -1018,11 +399,14 @@ --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); @@ -1034,6 +418,7 @@ --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); @@ -1257,6 +642,7 @@ --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-bg-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; @@ -1293,6 +679,7 @@ --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); @@ -1338,6 +725,7 @@ --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); @@ -1360,47 +748,83 @@ --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); @@ -1413,6 +837,8 @@ --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); @@ -1428,6 +854,7 @@ --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); @@ -1437,6 +864,7 @@ --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); @@ -1474,28 +902,49 @@ --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); @@ -1541,6 +990,7 @@ --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); @@ -1555,6 +1005,7 @@ --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); @@ -1565,22 +1016,42 @@ --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); @@ -1659,22 +1130,42 @@ --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); @@ -1754,49 +1245,80 @@ --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); @@ -1985,6 +1507,11 @@ --pgn-color-text-50-black: #00000080; --pgn-color-bg-active: var(--pgn-color-primary-500); --pgn-color-bg-base: var(--pgn-color-white); + --pgn-theme-interval: 8%; + --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); @@ -1998,65 +1525,246 @@ --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-other-form-control-custom-file-content: Browse; + --pgn-other-form-control-custom-file-lang: en; + --pgn-other-form-control-range-track-cursor: pointer; + --pgn-other-form-control-cursor: auto; + --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-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); + --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-scrollable-body-box-shadow: #0000008C; + --pgn-elevation-progress-bar-box-shadow: none; --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow); --pgn-elevation-menu-box-shadow: var(--pgn-elevation-box-shadow-base); + --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 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-active: none; + --pgn-elevation-icon-button-box-shadow-dark-active: none; --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-active: none; + --pgn-elevation-icon-button-box-shadow-light-active: none; --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-active: none; + --pgn-elevation-icon-button-box-shadow-danger-active: none; --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-active: none; + --pgn-elevation-icon-button-box-shadow-warning-active: none; --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-active: none; + --pgn-elevation-icon-button-box-shadow-success-active: none; --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-active: none; + --pgn-elevation-icon-button-box-shadow-brand-active: none; --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-active: none; + --pgn-elevation-icon-button-box-shadow-secondary-active: none; --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-active: none; + --pgn-elevation-icon-button-box-shadow-primary-active: none; --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-bg-base); --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow); + --pgn-elevation-form-control-select-border-base: none; --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus); --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base); --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-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-control-indicator-base: var(--pgn-elevation-form-input-base); --pgn-elevation-form-input-focus: 0 0 0 1px var(--pgn-color-primary-500); + --pgn-elevation-form-input-base: none; --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300); --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500); --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-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm); + --pgn-elevation-code-kbd-box-shadow: none; --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); + --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-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-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-tooltip-zindex: 1070; + --pgn-elevation-sheet-zindex-main: 1032; + --pgn-elevation-sheet-zindex-backdrop: 1031; + --pgn-elevation-product-tour-checkpoint-zindex: 1060; + --pgn-elevation-popover-box-shadow: none; + --pgn-elevation-popover-zindex: 1060; + --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-modal-zindex: 1050; + --pgn-elevation-modal-backdrop-zindex: 1040; + --pgn-elevation-dropdown-box-shadow: none; + --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-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; + --pgn-transition-btn: none; + --pgn-transition-badge: none; + --pgn-typography-line-height-micro: .938rem; + --pgn-typography-line-height-sm: 1.5rem; + --pgn-typography-line-height-lg: 1.5rem; + --pgn-typography-line-height-base: 1.5556rem; + --pgn-typography-font-weight-table-th: normal; + --pgn-typography-font-weight-lead: inherit; --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); + --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-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-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-font-family-base: var(--pgn-typography-font-family-sans-serif); + --pgn-typography-print-page-size: a3; --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-display-mobile: 3.25rem; + --pgn-typography-display-line-height-mobile: 3.5rem; + --pgn-typography-display-line-height-base: 1rem; + --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-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-link-decoration-brand-inline-hover: underline; + --pgn-typography-link-decoration-brand-inline-base: underline; + --pgn-typography-link-decoration-brand-hover: underline; + --pgn-typography-link-decoration-brand-base: none; + --pgn-typography-link-decoration-muted-inline-hover: underline; + --pgn-typography-link-decoration-muted-inline-base: underline; + --pgn-typography-link-decoration-muted-hover: underline; + --pgn-typography-link-decoration-muted-base: none; + --pgn-typography-link-decoration-inline-hover: underline; + --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.4286rem; + --pgn-typography-input-btn-line-height-base: 1.3333rem; + --pgn-typography-input-btn-font-size-lg: 1.325rem; + --pgn-typography-input-btn-font-size-sm: .875rem; + --pgn-typography-input-btn-font-size-base: 1.125rem; + --pgn-typography-input-btn-font-family: inherit; + --pgn-typography-headings-line-height: 1.25rem; --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: .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: .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: .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-small-base); @@ -2078,9 +1786,11 @@ --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-item-text-decoration: none; --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: 87.5%; --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); @@ -2093,105 +1803,338 @@ --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-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); + --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-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-base: 1rem; --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-spacer-0: 0rem; + --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-tooltip-margin: 0rem; + --pgn-spacing-tooltip-padding-x: .5rem; + --pgn-spacing-tooltip-padding-y: .5rem; + --pgn-spacing-toast-container-gutter-sm: .625rem; + --pgn-spacing-toast-container-gutter-lg: 1.25rem; + --pgn-spacing-toast-padding-y: .25rem; + --pgn-spacing-toast-padding-x: .75rem; + --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px; --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: .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: .625rem; --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); + --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .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: .25rem; + --pgn-spacing-stepper-header-step-padding: .25rem; --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base); + --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-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-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-pagination-padding-x-lg: 1.5rem; + --pgn-spacing-pagination-padding-x-sm: .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-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: .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-modal-dialog-margin: 1.5rem; + --pgn-spacing-modal-header-padding-y: 1rem; --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem; + --pgn-spacing-modal-footer-padding-y: 1rem; --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem; + --pgn-spacing-modal-inner-padding-bottom: .7rem; + --pgn-spacing-modal-inner-padding-base: 1.5rem; --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left); + --pgn-spacing-menu-item-icon-margin-left: .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: .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: .5625rem; + --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem; + --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem; --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); --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-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-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-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-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-dropdown-padding-y-item: .25rem; + --pgn-spacing-dropdown-padding-y-base: .5rem; + --pgn-spacing-dropdown-padding-x-item: 1rem; + --pgn-spacing-dropdown-padding-x-base: 0rem; + --pgn-spacing-dropdown-spacer: .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-collapsible-card-spacer-icon: 2.5rem; + --pgn-spacing-collapsible-card-spacer-left-body: .75rem; --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x); + --pgn-spacing-collapsible-card-spacer-x-base: .5rem; --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y); + --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-chip-outline-width: 3px; + --pgn-spacing-chip-outline-focus-distance-dark: .313rem; + --pgn-spacing-chip-outline-focus-distance-light: .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-y: 1px; + --pgn-spacing-chip-margin-icon: .25rem; + --pgn-spacing-chip-margin-base: .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-base: 1rem; + --pgn-spacing-card-logo-left-offset-horizontal: .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-columns-gap: 1.25rem; + --pgn-spacing-card-columns-count: 3rem; --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-x: 1.25rem; --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: .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: .25rem; + --pgn-spacing-bubble-expandable-padding-y: 0rem; + --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-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: 0rem; --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: .3em; --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-tooltip-arrow-width: .8rem; + --pgn-size-tooltip-arrow-height: .4rem; + --pgn-size-tooltip-max-width: 200px; + --pgn-size-toast-border-radius: .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: 0rem; + --pgn-size-stepper-header-height-min: 5.13rem; + --pgn-size-stack-gap: 0rem; + --pgn-size-spinner-sm-border-width: .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-height: var(--pgn-size-spinner-base-width); + --pgn-size-spinner-base-width: 2rem; --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: .3125rem; + --pgn-size-search-field-border-width-base: .0625rem; + --pgn-size-progress-bar-threshold-circle: .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-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-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: 0rem; + --pgn-size-pagination-toggle-border-sm: .25rem; + --pgn-size-pagination-toggle-border-base: .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: 0rem; + --pgn-size-nav-tabs-border-width: 2px; --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: .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-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-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-form-border-radius-width: .125rem; + --pgn-size-form-border-radius-check-focus: .0625rem; + --pgn-size-form-autosuggest-border-width: .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: 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: 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-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); @@ -2201,10 +2144,15 @@ --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)); @@ -2215,19 +2163,71 @@ --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; + --pgn-size-data-table-dropdown-pagination-max-height: 60vh; + --pgn-size-data-table-border: 2px; + --pgn-size-container-max-width-xl: 1440px; + --pgn-size-container-max-width-lg: 1192px; + --pgn-size-container-max-width-md: 952px; + --pgn-size-container-max-width-sm: 708px; + --pgn-size-container-max-width-xs: 464px; + --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px); + --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-carousel-caption-width: 70%; + --pgn-size-carousel-indicator-height-area-hit: 10px; + --pgn-size-carousel-indicator-height-base: 3px; + --pgn-size-carousel-indicator-width: 30px; + --pgn-size-carousel-control-width-icon: 20px; + --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-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); + --pgn-size-card-border-radius-logo: .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-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: .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-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-avatar-border-radius: 100%; + --pgn-size-avatar-border-base: 1px; + --pgn-size-avatar-huge: 18.75rem; + --pgn-size-avatar-xxl: 11.5rem; + --pgn-size-avatar-xl: 6rem; + --pgn-size-avatar-lg: 4rem; + --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-max-width: 18.75rem; + --pgn-size-annotation-arrow-border-width: .5rem; + --pgn-size-alert-border-width: 0rem; --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); + --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; } diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json index c4ad933cec..1803af9df7 100644 --- a/tokens/src/core/alias/size.json +++ b/tokens/src/core/alias/size.json @@ -1,15 +1,36 @@ { + "$type": "dimension", "size": { "border": { - "width": { "value": "1px", "type": "dimension", "source": "$border-width", "description": "Default border width." }, + "width": { + "source": "$border-width", + "$value": "1px", + "$description": "Default 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": { + "source": "$border-radius", + "$value": ".375rem", + "$description": "Default border radius." + }, + "lg": { + "source": "$border-radius-lg", + "$value": ".425rem", + "$description": "Large border radius." + }, + "sm": { + "source": "$border-radius-sm", + "$value": ".25rem", + "$description": "Small border radius." + } } }, "rounded": { - "pill": { "value": "50rem", "type": "dimension", "source": "$rounded-pill", "description": "Pill border radius." } + "pill": { + "source": "$rounded-pill", + "$value": "50rem", + "$description": "Pill border radius." + } } } -} +} \ No newline at end of file diff --git a/tokens/src/core/components/ActionRow.json b/tokens/src/core/components/ActionRow.json index 9d5f437371..32d311ece9 100644 --- a/tokens/src/core/components/ActionRow.json +++ b/tokens/src/core/components/ActionRow.json @@ -1,9 +1,16 @@ { + "$type": "dimension", "spacing": { "action-row": { "gap": { - "x": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-x" }, - "y": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-y" } + "x": { + "source": "$action-row-gap-x", + "$value": ".5rem" + }, + "y": { + "source": "$action-row-gap-y", + "$value": ".5rem" + } } } } diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json index f5913d592f..6ca4f1aa04 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": { + "source": "$alert-padding-y", + "$value": "1.5rem" + }, + "x": { + "source": "$alert-padding-x", + "$value": "1.5rem" + } }, - "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": { + "source": "$alert-margin-bottom", + "$value": "1rem" + }, + "actions-gap": { + "source": "$alert-actions-gap", + "$value": "{spacing.spacer.3}" + }, + "icon-space": { + "source": "$alert-icon-space", + "$value": ".8rem" + } } }, "typography": { "alert": { "font": { - "weight-link": { "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$alert-link-font-weight" }, - "size": { "value": ".875rem", "type": "dimension", "source": "$alert-font-size" } + "weight-link": { + "source": "$alert-link-font-weight", + "$value": "{typography.font.weight.normal}", + "$type": "fontWeight" + }, + "size": { + "source": "$alert-font-size", + "$value": ".875rem", + "$type": "dimension" + } }, - "line-height": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" } + "line-height": { + "source": "$alert-line-height", + "$value": "1.5rem", + "$type": "dimension" + } } }, "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": { + "source": "$alert-border-radius", + "$value": "{size.border.radius.base}" + }, + "width": { + "source": "$alert-border-width", + "$value": "0" + } } } } diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json index 8f3f67ff37..fe3272f836 100644 --- a/tokens/src/core/components/Annotation.json +++ b/tokens/src/core/components/Annotation.json @@ -1,25 +1,47 @@ { + "$type": "dimension", "spacing": { "annotation": { - "padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" }, + "padding": { + "source": "$annotation-padding", + "$value": ".5rem" + }, "arrow-side": { - "margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" } + "margin": { + "source": "$annotation-arrow-side-margin", + "$value": ".25rem" + } } } }, "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": { + "source": "$annotation-font-size", + "$value": "{typography.font.size.sm}" + }, + "line-height": { + "source": "$annotation-line-height", + "$value": "{typography.line-height.sm}" + } } }, "size": { "annotation": { "arrow-border": { - "width": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" } + "width": { + "source": "$annotation-arrow-border-width", + "$value": ".5rem" + } }, - "max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" }, - "border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" } + "max-width": { + "source": "$annotation-max-width", + "$value": "18.75rem" + }, + "border-radius": { + "source": "$annotation-border-radius", + "$value": ".25rem" + } } } } diff --git a/tokens/src/core/components/Avatar.json b/tokens/src/core/components/Avatar.json index c8cdb66d11..1fe8ed60af 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": { + "source": "$avatar-size", + "$value": "3rem", + "$type": "dimension" + }, + "xs": { + "source": "$avatar-size-xs", + "$value": "1.5rem", + "$type": "dimension" + }, + "sm": { + "source": "$avatar-size-sm", + "$value": "2.25rem", + "$type": "dimension" + }, + "lg": { + "source": "$avatar-size-lg", + "$value": "4rem", + "$type": "dimension" + }, + "xl": { + "source": "$avatar-size-xl", + "$value": "6rem", + "$type": "dimension" + }, + "xxl": { + "source": "$avatar-size-xxl", + "$value": "11.5rem", + "$type": "dimension" + }, + "huge": { + "source": "$avatar-size-huge", + "$value": "18.75rem", + "$type": "dimension" + }, "border": { - "base": { "value": "1px", "type": "dimension", "source": "$avatar-border" }, - "radius": { "value": "100%", "type": "percentage", "source": "$avatar-border-radius" } + "base": { + "source": "$avatar-border", + "$value": "1px", + "$type": "dimension" + }, + "radius": { + "source": "$avatar-border-radius", + "$value": "100%", + "$type": "percentage" + } } } } diff --git a/tokens/src/core/components/AvatarButton.json b/tokens/src/core/components/AvatarButton.json index ac2e311a28..069c82c668 100644 --- a/tokens/src/core/components/AvatarButton.json +++ b/tokens/src/core/components/AvatarButton.json @@ -1,10 +1,20 @@ { + "$type": "dimension", "spacing": { "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": { + "source": "$avatar-button-padding-left", + "$value": ".25em" + }, + "sm": { + "source": "$avatar-button-padding-left-sm", + "$value": ".25em" + }, + "lg": { + "source": "$avatar-button-padding-left-lg", + "$value": ".25em" + } } } } diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json index 921b1f09e0..ecb9ee5376 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": { + "source": "$badge-padding-x", + "$value": ".5rem" + }, + "pill": { + "source": "$badge-pill-padding-x", + "$value": ".6em" + } }, - "y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" } + "y": { + "source": "$badge-padding-y", + "$value": ".125rem" + } } } }, "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": { + "source": "$badge-font-size", + "$value": "75%", + "$type": "percentage" + }, + "weight": { + "source": "$badge-font-weight", + "$value": "{typography.font.weight.bold}", + "$type": "fontWeight" + } } } }, "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": { + "source": "$badge-border-radius", + "$value": ".25rem" + }, + "pill": { + "source": "$badge-pill-border-radius", + "$value": "10rem" + } }, - "focus-width": { "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width" } + "focus-width": { + "source": "$badge-focus-width", + "$value": "{size.input.btn.focus-width}" + } } }, "transition": { - "badge": { "value": "none", "type": "transition", "source": "$badge-transition" } + "$type": "transition", + "badge": { + "source": "$badge-transition", + "$value": "none" + } } } diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json index 89b11c9c22..84f041c281 100644 --- a/tokens/src/core/components/Breadcrumb.json +++ b/tokens/src/core/components/Breadcrumb.json @@ -1,8 +1,12 @@ { + "$type": "dimension", "spacing": { "breadcrumb": { "margin": { - "left": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-margin-left" } + "left": { + "source": "$breadcrumb-margin-left", + "$value": ".5rem" + } } } }, @@ -10,13 +14,25 @@ "breadcrumb": { "border": { "radius": { - "focus": { "value": ".125rem", "type": "dimension", "source": "$breadcrumb-focus-border-radius" } + "focus": { + "source": "$breadcrumb-focus-border-radius", + "$value": ".125rem" + } }, "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": { + "source": "$breadcrumb-border-focus-axis-x", + "$value": ".25rem" + }, + "y-focus": { + "source": "$breadcrumb-border-focus-axis-y", + "$value": ".5rem" + } }, - "width-focus": { "value": ".0625rem", "type": "dimension", "source": "$breadcrumb-border-focus-width" } + "width-focus": { + "source": "$breadcrumb-border-focus-width", + "$value": ".0625rem" + } } } } diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json index 262200e665..ba57fc309e 100644 --- a/tokens/src/core/components/Bubble.json +++ b/tokens/src/core/components/Bubble.json @@ -1,10 +1,17 @@ { + "$type": "transition", "spacing": { "bubble": { "expandable-padding": { - "y": { "value": "0", "type": "transition", "source": "$bubble-expandable-padding-y" }, - "x": { "value": ".25rem", "type": "transition", "source": "$bubble-expandable-padding-x" } + "y": { + "source": "$bubble-expandable-padding-y", + "$value": "0" + }, + "x": { + "source": "$bubble-expandable-padding-x", + "$value": ".25rem" + } } - } + } } } diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json index 96fdbadb33..0ce7ff8c7b 100644 --- a/tokens/src/core/components/Button/core.json +++ b/tokens/src/core/components/Button/core.json @@ -1,42 +1,55 @@ { "spacing": { + "$type": "dimension", "btn": { "padding": { "y": { "base": { - "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$btn-padding-y" + "source": "$btn-padding-y", + "$value": "{spacing.input.btn.padding.y}" }, "lg": { - "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$btn-padding-y-lg" + "source": "$btn-padding-y-lg", + "$value": "{spacing.input.btn.padding.lg.y}" }, "sm": { - "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$btn-padding-y-sm" + "source": "$btn-padding-y-sm", + "$value": "{spacing.input.btn.padding.sm.y}" } }, "x": { - "base": { "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$btn-padding-x" }, + "base": { + "source": "$btn-padding-x", + "$value": "{spacing.input.btn.padding.x}" + }, "lg": { - "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$btn-padding-x-lg" + "source": "$btn-padding-x-lg", + "$value": "{spacing.input.btn.padding.lg.x}" }, "sm": { - "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$btn-padding-x-sm" + "source": "$btn-padding-x-sm", + "$value": "{spacing.input.btn.padding.sm.x}" } } }, "block": { - "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" } + "spacing-y": { + "source": "$btn-block-spacing-y", + "$value": ".5rem" + } }, "focus": { - "gap": { "value": "{size.btn.focus.width}", "type": "dimension", "source": "$btn-focus-gap" }, + "gap": { + "source": "$btn-focus-gap", + "$value": "{size.btn.focus.width}" + }, "border-gap": { - "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})", - "type": "dimension", - "source": "$btn-focus-border-gap" + "source": "$btn-focus-border-gap", + "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})" }, "distance-to-border": { - "value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})", - "type": "dimension", - "source": "$btn-focus-distance-to-border" + "source": "$btn-focus-distance-to-border", + "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})" } } } @@ -45,61 +58,98 @@ "btn": { "font": { "family": { - "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$btn-font-family" + "source": "$btn-font-family", + "$value": "{typography.input.btn.font.family}", + "$type": "fontFamily" }, "size": { + "$type": "dimension", "base": { - "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$btn-font-size" + "source": "$btn-font-size", + "$value": "{typography.input.btn.font.size.base}" }, "sm": { - "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$btn-font-size-sm" + "source": "$btn-font-size-sm", + "$value": "{typography.input.btn.font.size.sm}" }, "lg": { - "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$btn-font-size-lg" + "source": "$btn-font-size-lg", + "$value": "{typography.input.btn.font.size.lg}" } }, "weight": { - "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$btn-font-weight" + "source": "$btn-font-weight", + "$value": "{typography.font.weight.normal}", + "$type": "fontWeight" } }, "line-height": { + "$type": "dimension", "base": { - "value": "{typography.input.btn.line-height.base}", "type": "dimension", "source": "$btn-line-height" + "source": "$btn-line-height", + "$value": "{typography.input.btn.line-height.base}" }, "sm": { - "value": "{typography.input.btn.line-height.sm}", "type": "dimension", "source": "$btn-line-height-sm" + "source": "$btn-line-height-sm", + "$value": "{typography.input.btn.line-height.sm}" }, "lg": { - "value": "{typography.input.btn.line-height.lg}", "type": "dimension", "source": "$btn-line-height-lg" + "source": "$btn-line-height-lg", + "$value": "{typography.input.btn.line-height.lg}" } } } }, "size": { + "$type": "dimension", "btn": { "border": { - "width": { "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$btn-border-width" }, + "width": { + "source": "$btn-border-width", + "$value": "{size.input.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": { + "source": "$btn-border-radius", + "$value": "{size.border.radius.base}" + }, + "lg": { + "source": "$btn-border-radius-lg", + "$value": "{size.border.radius.lg}" + }, + "sm": { + "source": "$btn-border-radius-sm", + "$value": "{size.border.radius.sm}" + } } }, "focus": { - "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" }, + "width": { + "source": "$btn-focus-width", + "$value": "2px" + }, "border-radius": { "base": { - "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})", - "type": "dimension", - "source": "$btn-focus-border-radius" + "source": "$btn-focus-border-radius", + "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})" + }, + "lg": { + "source": "$btn-focus-border-radius-lg", + "$value": "{size.btn.focus.border-radius.base}" }, - "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" } + "sm": { + "source": "$btn-focus-border-radius-sm", + "$value": "{size.btn.border.radius.base}" + } } } } }, "transition": { - "btn": { "value": "none", "type": "transition", "source": "$btn-transition" } + "$type": "transition", + "btn": { + "source": "$btn-transition", + "$value": "none" + } } } diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json index 7419bfb6a5..4eff49026c 100644 --- a/tokens/src/core/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -1,86 +1,162 @@ { + "$type": "dimension", "spacing": { "card": { "spacer": { - "x": { "value": "1.25rem", "type": "dimension", "source": "$card-spacer-x" }, - "y": { "value": ".75rem", "type": "dimension", "source": "$card-spacer-y" } + "x": { + "source": "$card-spacer-x", + "$value": "1.25rem" + }, + "y": { + "source": "$card-spacer-y", + "$value": ".75rem" + } }, "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": { + "source": "$card-group-margin", + "$value": "12px" + }, + "deck": { + "source": "$card-deck-margin", + "$value": "{spacing.card.margin.group}" + }, + "deck-bottom": { + "source": "$card-deck-margin-bottom", + "$value": "{spacing.spacer.3}" + }, + "grid": { + "source": "$card-grid-margin", + "$value": "{spacing.card.margin.group}" + }, + "grid-bottom": { + "source": "$card-grid-margin-bottom", + "$value": "{spacing.spacer.3}" + } }, "columns": { - "margin": { "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": { + "source": "$card-columns-margin", + "$value": "{spacing.card.spacer.y}" + }, + "count": { + "source": "$card-columns-count", + "$value": "3" + }, + "gap": { + "source": "$card-columns-gap", + "$value": "1.25rem" + } }, "footer": { - "action-gap": { "value": ".5rem", "type": "dimension", "source": "$card-footer-actions-gap" } + "action-gap": { + "source": "$card-footer-actions-gap", + "$value": ".5rem" + } }, "loading-skeleton": { - "spacer": { "value": ".313rem", "type": "dimension", "source": "$loading-skeleton-spacer" } + "spacer": { + "source": "$loading-skeleton-spacer", + "$value": ".313rem" + } }, "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": { + "source": "$card-logo-left-offset", + "$value": "1.5rem" + }, + "horizontal": { + "source": "$card-logo-left-offset-horizontal", + "$value": ".4375rem" + } }, "bottom-offset": { - "base": { "value": "1rem", "type": "dimension", "source": "$card-logo-bottom-offset" }, - "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-bottom-offset-horizontal" } + "base": { + "source": "$card-logo-bottom-offset", + "$value": "1rem" + }, + "horizontal": { + "source": "$card-logo-bottom-offset-horizontal", + "$value": ".4375rem" + } } }, "focus": { - "border-offset": { "value": "5px", "type": "dimension", "source": "$card-focus-border-offset" } + "border-offset": { + "source": "$card-focus-border-offset", + "$value": "5px" + } } } }, "size": { "card": { "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$card-border-width" }, + "width": { + "source": "$card-border-width", + "$value": "{size.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": { + "source": "$card-border-radius", + "$value": "{size.border.radius.base}" + }, + "logo": { + "source": "$card-logo-border-radius", + "$value": ".25rem" + }, "inner": { - "value": "calc({size.card.border.radius.base} - {size.card.border.width})", - "type": "dimension", - "source": "$card-inner-border-radius" + "source": "$card-inner-border-radius", + "$value": "calc({size.card.border.radius.base} - {size.card.border.width})" } } }, "focus": { "border": { - "width": { "value": "2px", "type": "dimension", "source": "$card-focus-border-width" }, + "width": { + "source": "$card-focus-border-width", + "$value": "2px" + }, "radius": { - "value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})", - "type": "dimension", - "source": "$card-focus-border-radius" + "source": "$card-focus-border-radius", + "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})" } } }, "image": { "horizontal": { "width": { - "max": { "value": "240px", "type": "dimension", "source": "$card-image-horizontal-max-width" }, + "max": { + "source": "$card-image-horizontal-max-width", + "$value": "240px" + }, "min": { - "value": "{size.card.image.horizontal.width.max}", - "type": "dimension", - "source": "$card-image-horizontal-min-width" + "source": "$card-image-horizontal-min-width", + "$value": "{size.card.image.horizontal.width.max}" } } }, "vertical": { - "max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" } + "max-height": { + "source": "$card-image-vertical-max-height", + "$value": "140px" + } }, - "border-radius": { "value": "{size.card.border.radius.base}", "type": "dimension", "source": "$card-image-border-radius" } + "border-radius": { + "source": "$card-image-border-radius", + "$value": "{size.card.border.radius.base}" + } }, "logo": { - "width": { "value": "7.25rem", "type": "dimension", "source": "$card-logo-width" }, - "height": { "value": "4.125rem", "type": "dimension", "source": "$card-logo-height" } + "width": { + "source": "$card-logo-width", + "$value": "7.25rem" + }, + "height": { + "source": "$card-logo-height", + "$value": "4.125rem" + } } } }, @@ -88,7 +164,8 @@ "footer": { "text": { "font-size": { - "value": "{typography.font.size.small.x}", "type": "dimension", "source": "$card-footer-text-font-size" + "source": "$card-footer-text-font-size", + "$value": "{typography.font.size.small.x}" } } } diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json index 26343bc957..871d50d7c5 100644 --- a/tokens/src/core/components/Carousel.json +++ b/tokens/src/core/components/Carousel.json @@ -3,35 +3,73 @@ "carousel": { "control": { "width": { - "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" }, - "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" } + "base": { + "source": "$carousel-control-width", + "$value": "15%", + "$type": "percentage" + }, + "icon": { + "source": "$carousel-control-icon-width", + "$value": "20px", + "$type": "dimension" + } } }, "indicator": { - "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" }, + "$type": "dimension", + "width": { + "source": "$carousel-indicator-width", + "$value": "30px" + }, "height": { - "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" }, - "area-hit": { "value": "10px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" } + "base": { + "source": "$carousel-indicator-height", + "$value": "3px" + }, + "area-hit": { + "source": "$carousel-indicator-hit-area-height", + "$value": "10px" + } } }, - "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" } + "caption-width": { + "source": "$carousel-caption-width", + "$value": "70%", + "$type": "percentage" + } } }, "spacing": { + "$type": "dimension", "carousel": { - "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" } + "indicator-spacer": { + "source": "$carousel-indicator-spacer", + "$value": "3px" + } } }, "transition": { "carousel": { "base": { - "value": "transform {transition.carousel.duration} ease-in-out", - "type": "transition", - "source": "$carousel-transition" + "source": "$carousel-transition", + "$value": "transform {transition.carousel.duration} ease-in-out", + "$type": "transition" + }, + "duration": { + "source": "$carousel-transition-duration", + "$value": ".6s", + "$type": "duration" }, - "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" } + "indicator": { + "source": "$carousel-indicator-transition", + "$value": "opacity .6s ease", + "$type": "transition" + }, + "control": { + "source": "$carousel-control-transition", + "$value": "opacity .15s ease", + "$type": "transition" + } } } } diff --git a/tokens/src/core/components/Chip.json b/tokens/src/core/components/Chip.json index d22606c1dd..26e63cc2f2 100644 --- a/tokens/src/core/components/Chip.json +++ b/tokens/src/core/components/Chip.json @@ -1,41 +1,65 @@ { + "$type": "dimension", "spacing": { "chip": { "margin": { "base": { - "value": ".125rem", "type": "dimension", "source": "$chip-margin" + "source": "$chip-margin", + "$value": ".125rem" }, - "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-margin" } + "icon": { + "source": "$chip-icon-margin", + "$value": ".25rem" + } }, "padding": { - "y": { "value": "1px", "type": "dimension", "source": "$chip-padding-y" }, - "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" } + "y": { + "source": "$chip-padding-y", + "$value": "1px" + }, + "x": { + "source": "$chip-padding-x", + "$value": ".5rem" + } }, "outline": { "selected-distance": { "light": { - "value": "3px", "type": "dimension", "source": "$chip-light-selected-outline-distance" + "source": "$chip-light-selected-outline-distance", + "$value": "3px" }, "dark": { - "value": "3px", "type": "dimension", "source": "$chip-dark-selected-outline-distance" + "source": "$chip-dark-selected-outline-distance", + "$value": "3px" } }, "focus-distance": { "light": { - "value": ".313rem", "type": "dimension", "source": "$chip-light-focus-outline-distance" + "source": "$chip-light-focus-outline-distance", + "$value": ".313rem" }, "dark": { - "value": ".313rem", "type": "dimension", "source": "$chip-dark-focus-outline-distance" + "source": "$chip-dark-focus-outline-distance", + "$value": ".313rem" } }, - "width": { "value": "3px", "type": "dimension", "source": "$chip-outline-width" } + "width": { + "source": "$chip-outline-width", + "$value": "3px" + } } } }, "size": { "chip": { - "border-radius": { "value": ".375rem", "type": "dimension", "source": "$chip-border-radius" }, - "icon": { "value": "1.5rem", "type": "dimension", "source": "$chip-icon-size" } + "border-radius": { + "source": "$chip-border-radius", + "$value": ".375rem" + }, + "icon": { + "source": "$chip-icon-size", + "$value": "1.5rem" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/core/components/ChipCarousel.json b/tokens/src/core/components/ChipCarousel.json index 597fd925d0..227f846d51 100644 --- a/tokens/src/core/components/ChipCarousel.json +++ b/tokens/src/core/components/ChipCarousel.json @@ -1,13 +1,21 @@ { + "$type": "dimension", "spacing": { "chip-carousel": { "controls-top-offset": { - "value": ".375rem", "type": "dimension", "source": "$chip-carousel-controls-top-offset" + "source": "$chip-carousel-controls-top-offset", + "$value": ".375rem" }, "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": { + "source": "$chip-carousel-container-padding-x", + "$value": ".625rem" + }, + "y": { + "source": "$chip-carousel-container-padding-y", + "$value": ".313rem" + } } } } diff --git a/tokens/src/core/components/CloseButton.json b/tokens/src/core/components/CloseButton.json index 4e7eb8f879..17a8b99f60 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" + "source": "$close-font-size", + "$value": "calc({typography.font.size.base} * 1.5)", + "$type": "dimension" }, "weight": { - "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$close-font-weight" + "source": "$close-font-weight", + "$value": "{typography.font.weight.bold}", + "$type": "fontWeight" } } } diff --git a/tokens/src/core/components/Code.json b/tokens/src/core/components/Code.json index b8ae8bac6c..d6ba56fb2e 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": { + "source": "$code-font-size", + "$value": "87.5%", + "$type": "percentage" + }, "kbd": { - "font-size": { "value": "{typography.code.font-size}", "type": "dimension", "source": "$kbd-font-size" }, + "font-size": { + "source": "$kbd-font-size", + "$value": "{typography.code.font-size}", + "$type": "dimension" + }, "nested": { + "$type": "fontWeight", "font-weight": { - "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$nested-kbd-font-weight" + "source": "$nested-kbd-font-weight", + "$value": "{typography.font.weight.bold}" } } } } }, "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": { + "source": "$kbd-padding-y", + "$value": ".2rem" + }, + "x": { + "source": "$kbd-padding-x", + "$value": ".4rem" + } } } } }, "size": { + "$type": "dimension", "code": { "pre": { "scrollable": { - "max-height": { "value": "340px", "type": "dimension", "source": "$pre-scrollable-max-height" } + "max-height": { + "source": "$pre-scrollable-max-height", + "$value": "340px" + } } } } diff --git a/tokens/src/core/components/Collapsible.json b/tokens/src/core/components/Collapsible.json index 924347154c..9cd2431ad3 100644 --- a/tokens/src/core/components/Collapsible.json +++ b/tokens/src/core/components/Collapsible.json @@ -1,26 +1,50 @@ { + "$type": "dimension", "spacing": { "collapsible": { "card": { "spacer": { "y": { - "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-y" }, + "base": { + "source": "$collapsible-card-spacer-y", + "$value": ".5rem" + }, "lg": { - "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$collapsible-card-spacer-y-lg" + "source": "$collapsible-card-spacer-y-lg", + "$value": "{spacing.card.spacer.y}" } }, "x": { - "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-x" }, + "base": { + "source": "$collapsible-card-spacer-x", + "$value": ".5rem" + }, "lg": { - "value": "{spacing.card.spacer.x}", "type": "dimension", "source": "$collapsible-card-spacer-x-lg" + "source": "$collapsible-card-spacer-x-lg", + "$value": "{spacing.card.spacer.x}" } }, - "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": { + "source": "$collapsible-card-body-spacer-left", + "$value": ".75rem" + }, + "icon": { + "source": "$collapsible-card-spacer-icon", + "$value": "2.5rem" + }, "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": { + "source": "$collapsible-basic-spacer-y", + "$value": ".5rem" + }, + "x": { + "source": "$collapsible-basic-spacer-x", + "$value": ".5rem" + }, + "icon": { + "source": "$collapsible-basic-spacer-icon", + "$value": ".625rem" + } } } } diff --git a/tokens/src/core/components/ColorPicker.json b/tokens/src/core/components/ColorPicker.json index 2dd4803426..48e9430916 100644 --- a/tokens/src/core/components/ColorPicker.json +++ b/tokens/src/core/components/ColorPicker.json @@ -1,8 +1,15 @@ { + "$type": "dimension", "size": { "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": { + "source": "$picker-size-sm", + "$value": "2rem" + }, + "md": { + "source": "$picker-size-md", + "$value": "calc(1.3333em + 1.125rem + 2px)" + } } } } diff --git a/tokens/src/core/components/Container.json b/tokens/src/core/components/Container.json index 4f9b676d6a..f7548879ed 100644 --- a/tokens/src/core/components/Container.json +++ b/tokens/src/core/components/Container.json @@ -1,12 +1,28 @@ { + "$type": "dimension", "size": { "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": { + "source": "$max-width-xs", + "$value": "464px" + }, + "sm": { + "source": "$max-width-sm", + "$value": "708px" + }, + "md": { + "source": "$max-width-md", + "$value": "952px" + }, + "lg": { + "source": "$max-width-lg", + "$value": "1192px" + }, + "xl": { + "source": "$max-width-xl", + "$value": "1440px" + } } } } diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json index 9c6ba9cea6..75959fbe87 100644 --- a/tokens/src/core/components/DataTable.json +++ b/tokens/src/core/components/DataTable.json @@ -1,27 +1,57 @@ { "size": { + "$type": "dimension", "data-table": { - "border": { "value": "2px", "type": "dimension", "source": "$data-table-border" }, + "border": { + "source": "$data-table-border", + "$value": "2px" + }, "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": { + "source": "$data-table-pagination-dropdown-max-height", + "$value": "60vh" + }, + "min-width": { + "source": "$data-table-pagination-dropdown-min-width", + "$value": "6rem" + } } }, "layout": { - "sidebar-width": { "value": "12rem", "type": "dimension", "source": "$data-table-layout-sidebar-width" } + "sidebar-width": { + "source": "$data-table-layout-sidebar-width", + "$value": "12rem" + } } } }, "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": { + "source": "$data-table-padding-x", + "$value": ".75rem" + }, + "y": { + "source": "$data-table-padding-y", + "$value": ".75rem" + }, + "small": { + "source": "$data-table-padding-small", + "$value": ".5rem" + }, + "cell": { + "source": "$data-table-cell-padding", + "$value": ".5rem .75rem" + } }, - "footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-position" } + "footer-position": { + "source": "$data-table-footer-position", + "$value": "center", + "$type": "position" + } } } } diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json index 02e15914c2..dd18c8069d 100644 --- a/tokens/src/core/components/Dropdown.json +++ b/tokens/src/core/components/Dropdown.json @@ -2,66 +2,97 @@ "typography": { "dropdown": { "font-size": { - "value": "{typography.font.size.base}", "type": "dimension", "source": "$dropdown-font-size" + "source": "$dropdown-font-size", + "$value": "{typography.font.size.base}", + "$type": "dimension" }, "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": { + "source": "$dropdown-min-width", + "$value": "18rem" + }, "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$dropdown-border-width" }, + "width": { + "source": "$dropdown-border-width", + "$value": "{size.border.width}" + }, "radius": { "base": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$dropdown-border-radius" + "source": "$dropdown-border-radius", + "$value": "{size.border.radius.base}" }, "inner": { - "value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})", - "type": "dimension", - "source": "$dropdown-inner-border-radius" + "source": "$dropdown-inner-border-radius", + "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})" } } } } }, "spacing": { + "$type": "dimension", "dropdown": { - "spacer": { "value": ".125rem", "type": "dimension", "source": "$dropdown-spacer" }, + "spacer": { + "source": "$dropdown-spacer", + "$value": ".125rem" + }, "padding": { "x": { - "base": { "value": "0", "type": "dimension", "source": "$dropdown-padding-x" }, - "item": { "value": "1rem", "type": "dimension", "source": "$dropdown-item-padding-x" } + "base": { + "source": "$dropdown-padding-x", + "$value": "0" + }, + "item": { + "source": "$dropdown-item-padding-x", + "$value": "1rem" + } }, "y": { - "base": { "value": ".5rem", "type": "dimension", "source": "$dropdown-padding-y" }, - "item": { "value": ".25rem", "type": "dimension", "source": "$dropdown-item-padding-y" } + "base": { + "source": "$dropdown-padding-y", + "$value": ".5rem" + }, + "item": { + "source": "$dropdown-item-padding-y", + "$value": ".25rem" + } }, "header": { - "value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}", - "type": "dimension", - "source": "$dropdown-header-padding" + "source": "$dropdown-header-padding", + "$value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}" } }, "divider": { "margin-y": { - "value": "calc({spacing.spacer.base} / 2)", - "type": "dimension", - "source": "$dropdown-divider-margin-y" + "source": "$dropdown-divider-margin-y", + "$value": "calc({spacing.spacer.base} / 2)" } }, "close-container": { - "top": { "value": ".625rem", "type": "dimension", "source": "$modal-close-container-top" } + "top": { + "source": "$modal-close-container-top", + "$value": ".625rem" + } } } }, "elevation": { + "$type": "ratio", "dropdown": { - "zindex": { "value": "1000", "type": "ratio", "source": "$zindex-dropdown" } + "zindex": { + "source": "$zindex-dropdown", + "$value": "1000" + } } } } diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json index 6217177202..a97a008879 100644 --- a/tokens/src/core/components/Dropzone.json +++ b/tokens/src/core/components/Dropzone.json @@ -1,20 +1,26 @@ { + "$type": "dimension", "typography": { "dropzone": { "restriction-msg": { "font-size": { - "value": "{typography.font.size.small.x}", - "type": "dimension", - "source": "$dropzone-restriction-msg-font-size" + "source": "$dropzone-restriction-msg-font-size", + "$value": "{typography.font.size.small.x}" } } } }, "spacing": { "dropzone": { - "padding": { "value": "1.5rem", "type": "dimension", "source": "$dropzone-padding" }, + "padding": { + "source": "$dropzone-padding", + "$value": "1.5rem" + }, "border": { - "base": { "value": "1px", "type": "dimension", "source": "$dropzone-border-default" } + "base": { + "source": "$dropzone-border-default", + "$value": "1px" + } } } } diff --git a/tokens/src/core/components/Form/other.json b/tokens/src/core/components/Form/other.json index fbae55b536..415a9ffe4f 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": { + "source": "$custom-control-cursor", + "$value": "auto", + "$type": "cursorStyle" + }, + "range-track-cursor": { + "source": "$custom-range-track-cursor", + "$value": "pointer", + "$type": "cursorStyle" + }, "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..f0994467f1 100644 --- a/tokens/src/core/components/Form/size.json +++ b/tokens/src/core/components/Form/size.json @@ -2,224 +2,301 @@ "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", - "source": "$input-height" + "source": "$input-height", + "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})" }, "sm": { - "value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})", - "type": "dimension", - "source": "$input-height-sm" + "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})" }, "lg": { - "value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})", - "type": "dimension", - "source": "$input-height-lg" + "source": "$input-height-lg", + "$value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})" }, "inner": { "base": { - "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", - "type": "dimension", - "source": "$input-height-inner" + "source": "$input-height-inner", + "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" }, "half": { - "value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})", - "type": "dimension", - "source": "$input-height-inner-half" + "source": "$input-height-inner-half", + "$value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})" }, "quarter": { - "value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))", - "type": "dimension", - "source": "$input-height-inner-quarter" + "source": "$input-height-inner-quarter", + "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))" } }, "border": { - "value": "calc({size.form.input.width.border} * 2)", - "type": "dimension", - "source": "$input-height-border" + "source": "$input-height-border", + "$value": "calc({size.form.input.width.border} * 2)" } }, "width": { - "hover": { "value": "0.063rem", "type": "dimension", "source": "$input-hover-width" }, - "focus": { "value": "0.063rem", "type": "dimension", "source": "$input-focus-width" }, + "hover": { + "source": "$input-hover-width", + "$value": "0.063rem" + }, + "focus": { + "source": "$input-focus-width", + "$value": "0.063rem" + }, "border": { - "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$input-border-width" + "source": "$input-border-width", + "$value": "{size.input.btn.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": { + "source": "$input-border-radius", + "$value": "{size.border.radius.base}" + }, + "lg": { + "source": "$input-border-radius-lg", + "$value": "{size.border.radius.lg}" + }, + "sm": { + "source": "$input-border-radius-sm", + "$value": "{size.border.radius.sm}" + } } } }, "control": { "indicator": { - "base": { "value": "1.25rem", "type": "dimension", "source": "$custom-control-indicator-size" }, - "bg": { "value": "100%", "type": "percentage", "source": "$custom-control-indicator-bg-size" }, + "base": { + "source": "$custom-control-indicator-size", + "$value": "1.25rem", + "$type": "dimension" + }, + "bg": { + "source": "$custom-control-indicator-bg-size", + "$value": "100%", + "$type": "percentage" + }, "border": { - "width": { "value": "0.125rem", "type": "dimension", "source": "$custom-control-indicator-border-width" } + "$type": "dimension", + "width": { + "source": "$custom-control-indicator-border-width", + "$value": "0.125rem" + } } }, "switch": { + "$type": "dimension", "width": { - "value": "calc({size.form.control.indicator.base} * 1.75)", - "type": "dimension", - "source": "$custom-switch-width" + "source": "$custom-switch-width", + "$value": "calc({size.form.control.indicator.base} * 1.75)" }, "indicator": { "base": { - "value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)", - "type": "dimension", - "source": "$custom-switch-indicator-size" + "source": "$custom-switch-indicator-size", + "$value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)" }, "border": { "radius": { - "value": "calc({size.form.control.indicator.base} / 2)", - "type": "dimension", - "source": "$custom-switch-indicator-border-radius" + "source": "$custom-switch-indicator-border-radius", + "$value": "calc({size.form.control.indicator.base} / 2)" } } } }, "select": { + "$type": "dimension", "height": { "base": { - "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-select-height" + "source": "$custom-select-height", + "$value": "{size.form.input.height.base}" }, "lg": { - "value": "{size.form.input.height.lg}", "type": "dimension", "source": "$custom-select-height-lg" + "source": "$custom-select-height-lg", + "$value": "{size.form.input.height.lg}" }, "sm": { - "value": "{size.form.input.height.sm}", "type": "dimension", "source": "$custom-select-height-sm" + "source": "$custom-select-height-sm", + "$value": "{size.form.input.height.sm}" } }, "feedback": { "icon": { - "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}", - "type": "dimension", - "source": "$custom-select-feedback-icon-size" + "source": "$custom-select-feedback-icon-size", + "$value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}" } }, "border": { "width": { "base": { - "value": "{size.form.input.width.border}", - "type": "dimension", - "source": "$custom-select-border-width" + "source": "$custom-select-border-width", + "$value": "{size.form.input.width.border}" } }, "radius": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$custom-select-border-radius" + "source": "$custom-select-border-radius", + "$value": "{size.border.radius.base}" } } }, "range": { "track": { - "width": { "value": "100%", "type": "percentage", "source": "$custom-range-track-width" }, - "height": { "value": ".5rem", "type": "dimension", "source": "$custom-range-track-height" }, + "width": { + "source": "$custom-range-track-width", + "$value": "100%", + "$type": "percentage" + }, + "height": { + "source": "$custom-range-track-height", + "$value": ".5rem", + "$type": "dimension" + }, "border": { - "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-track-border-radius" } + "$type": "dimension", + "radius": { + "source": "$custom-range-track-border-radius", + "$value": "1rem" + } } }, "thumb": { - "width": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-width" }, + "$type": "dimension", + "width": { + "source": "$custom-range-thumb-width", + "$value": "1rem" + }, "height": { - "value": "{size.form.control.range.thumb.width}", - "type": "dimension", - "source": "$custom-range-thumb-height" + "source": "$custom-range-thumb-height", + "$value": "{size.form.control.range.thumb.width}" }, "border": { - "base": { "value": "0", "type": "dimension", "source": "$custom-range-thumb-border" }, - "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-border-radius" } + "base": { + "source": "$custom-range-thumb-border", + "$value": "0" + }, + "radius": { + "source": "$custom-range-thumb-border-radius", + "$value": "1rem" + } }, "focus": { "width": { - "value": "{size.form.input.width.focus}", - "type": "dimension", - "source": "$custom-range-thumb-focus-box-shadow-width" + "source": "$custom-range-thumb-focus-box-shadow-width", + "$value": "{size.form.input.width.focus}" } } } }, "file": { + "$type": "dimension", "width": { - "value": "{size.form.input.width.border}", "type": "dimension", "source": "$custom-file-border-width" + "source": "$custom-file-border-width", + "$value": "{size.form.input.width.border}" }, "height": { "base": { - "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-file-height" + "source": "$custom-file-height", + "$value": "{size.form.input.height.base}" }, "inner": { - "value": "{size.form.input.height.inner.base}", - "type": "dimension", - "source": "$custom-file-height-inner" + "source": "$custom-file-height-inner", + "$value": "{size.form.input.height.inner.base}" } }, "border": { "radius": { - "value": "{size.form.input.radius.border.base}", - "type": "dimension", - "source": "$custom-file-border-radius" + "source": "$custom-file-border-radius", + "$value": "{size.form.input.radius.border.base}" } } }, "icon": { - "width": { "value": "2rem", "type": "dimension", "source": "$form-control-icon-width" } + "$type": "dimension", + "width": { + "source": "$form-control-icon-width", + "$value": "2rem" + } }, "border": { "checkbox": { + "$type": "dimension", "indicator": { - "radius": { "value": "0", "type": "dimension", "source": "$custom-checkbox-indicator-border-radius" } + "radius": { + "source": "$custom-checkbox-indicator-border-radius", + "$value": "0" + } } }, "radio": { + "$type": "percentage", "indicator": { - "radius": { "value": "50%", "type": "percentage", "source": "$custom-radio-indicator-border-radius" } + "radius": { + "source": "$custom-radio-indicator-border-radius", + "$value": "50%" + } } } } }, "grid": { - "gutter-width": { "value": "0.625rem", "type": "dimension", "source": "$form-grid-gutter-width" } + "$type": "dimension", + "gutter-width": { + "source": "$form-grid-gutter-width", + "$value": "0.625rem" + } }, "autosuggest": { + "$type": "dimension", "icon": { - "width": { "value": "2.4rem", "type": "dimension", "source": "$form-autosuggest-icon-width" }, + "width": { + "source": "$form-autosuggest-icon-width", + "$value": "2.4rem" + }, "height": { - "value": "{size.form.autosuggest.icon.width}", "type": "dimension", "source": "$form-autosuggest-icon-height" + "source": "$form-autosuggest-icon-height", + "$value": "{size.form.autosuggest.icon.width}" } }, "spinner": { - "width": { "value": "1.25rem", "type": "dimension", "source": "$form-autosuggest-spinner-width" }, + "width": { + "source": "$form-autosuggest-spinner-width", + "$value": "1.25rem" + }, "height": { - "value": "{size.form.autosuggest.spinner.width}", - "type": "dimension", - "source": "$form-autosuggest-spinner-height" + "source": "$form-autosuggest-spinner-height", + "$value": "{size.form.autosuggest.spinner.width}" } }, "border": { - "width": { "value": ".125rem", "type": "dimension", "source": "$form-autosuggest-border-width" } + "width": { + "source": "$form-autosuggest-border-width", + "$value": ".125rem" + } } }, "border": { + "$type": "dimension", "radius": { "check": { - "focus": { "value": ".0625rem", "type": "dimension", "source": "$form-check-focus-border-radius" } + "focus": { + "source": "$form-check-focus-border-radius", + "$value": ".0625rem" + } }, - "width": { "value": ".125rem", "type": "dimension", "source": "$form-check-border-width" } + "width": { + "source": "$form-check-border-width", + "$value": ".125rem" + } } }, "feedback": { + "$type": "dimension", "tooltip": { "border": { "radius": { - "value": "{size.border.radius.base}", - "type": "dimension", - "source": "$form-feedback-tooltip-border-radius" + "source": "$form-feedback-tooltip-border-radius", + "$value": "{size.border.radius.base}" } } } diff --git a/tokens/src/core/components/Form/spacing.json b/tokens/src/core/components/Form/spacing.json index 207ceab897..087b9b9216 100644 --- a/tokens/src/core/components/Form/spacing.json +++ b/tokens/src/core/components/Form/spacing.json @@ -1,151 +1,189 @@ { + "$type": "dimension", "spacing": { "form": { "input": { "padding": { "y": { "base": { - "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$input-padding-y" + "source": "$input-padding-y", + "$value": "{spacing.input.btn.padding.y}" }, "sm": { - "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$input-padding-y-sm" + "source": "$input-padding-y-sm", + "$value": "{spacing.input.btn.padding.sm.y}" }, "lg": { - "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$input-padding-y-lg" + "source": "$input-padding-y-lg", + "$value": "{spacing.input.btn.padding.lg.y}" } }, "x": { "base": { - "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$input-padding-x" + "source": "$input-padding-x", + "$value": "{spacing.input.btn.padding.x}" }, "sm": { - "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$input-padding-x-sm" + "source": "$input-padding-x-sm", + "$value": "{spacing.input.btn.padding.sm.x}" }, "lg": { - "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$input-padding-x-lg" + "source": "$input-padding-x-lg", + "$value": "{spacing.input.btn.padding.lg.x}" } } }, "check": { - "gutter" : { "value": "1.25rem", "type": "dimension", "source": "$form-check-input-gutter" }, + "gutter": { + "source": "$form-check-input-gutter", + "$value": "1.25rem" + }, "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": { + "source": "$form-check-input-margin-x", + "$value": ".25rem" + }, + "inline": { + "source": "$form-check-inline-input-margin-x", + "$value": ".3125rem" + } }, - "y": { "value": ".3rem", "type": "dimension", "source": "$form-check-input-margin-y" } + "y": { + "source": "$form-check-input-margin-y", + "$value": ".3rem" + } } } }, "text": { "margin": { - "top": { "value": ".25rem", "type": "dimension", "source": "$form-text-margin-top" } + "top": { + "source": "$form-text-margin-top", + "$value": ".25rem" + } } }, "check": { "inline": { "margin": { - "x": { "value": ".75rem", "type": "dimension", "source": "$form-check-inline-margin-x" } + "x": { + "source": "$form-check-inline-margin-x", + "$value": ".75rem" + } } }, "position": { - "axis": { "value": ".375rem", "type": "dimension", "source": "$form-check-position-axis" } + "axis": { + "source": "$form-check-position-axis", + "$value": ".375rem" + } } }, "group": { "margin": { - "bottom": { "value": "1rem", "type": "dimension", "source": "$form-group-margin-bottom" } + "bottom": { + "source": "$form-group-margin-bottom", + "$value": "1rem" + } } }, "control": { - "gutter": { "value": ".5rem", "type": "dimension", "source": "$custom-control-gutter" }, + "gutter": { + "source": "$custom-control-gutter", + "$value": ".5rem" + }, "spacer": { - "x": { "value": "1rem", "type": "dimension", "source": "$custom-control-spacer-x" } + "x": { + "source": "$custom-control-spacer-x", + "$value": "1rem" + } }, "select": { "padding": { "y": { "base": { - "value": "{spacing.form.input.padding.y.base}", - "type": "dimension", - "source": "$custom-select-padding-y" + "source": "$custom-select-padding-y", + "$value": "{spacing.form.input.padding.y.base}" }, "sm": { - "value": "{spacing.form.input.padding.y.sm}", - "type": "dimension", - "source": "$custom-select-padding-y-sm" + "source": "$custom-select-padding-y-sm", + "$value": "{spacing.form.input.padding.y.sm}" }, "lg": { - "value": "{spacing.form.input.padding.y.lg}", - "type": "dimension", - "source": "$custom-select-padding-y-lg" + "source": "$custom-select-padding-y-lg", + "$value": "{spacing.form.input.padding.y.lg}" } }, "x": { "base": { - "value": "{spacing.form.input.padding.x.base}", - "type": "dimension", - "source": "$custom-select-padding-x" + "source": "$custom-select-padding-x", + "$value": "{spacing.form.input.padding.x.base}" }, "sm": { - "value": "{spacing.form.input.padding.x.sm}", - "type": "dimension", - "source": "$custom-select-padding-x-sm" + "source": "$custom-select-padding-x-sm", + "$value": "{spacing.form.input.padding.x.sm}" }, "lg": { - "value": "{spacing.form.input.padding.x.lg}", - "type": "dimension", - "source": "$custom-select-padding-x-lg" + "source": "$custom-select-padding-x-lg", + "$value": "{spacing.form.input.padding.x.lg}" } } }, "indicator": { - "padding": { "value": "1rem", "type": "dimension", "source": "$custom-select-indicator-padding" } + "padding": { + "source": "$custom-select-indicator-padding", + "$value": "1rem" + } }, "feedback": { "icon": { "padding": { "right": { - "value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})", - "type": "dimension", - "source": "$custom-select-feedback-icon-padding-right" + "source": "$custom-select-feedback-icon-padding-right", + "$value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})" } }, "position": { - "value": "center right calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})", - "type": "dimension", - "source": "$custom-select-feedback-icon-position" + "source": "$custom-select-feedback-icon-position", + "$value": "center right calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})" } }, "margin": { "top": { - "value": "{spacing.form.text.margin.top}", - "type": "dimension", - "source": "$form-feedback-margin-top" + "source": "$form-feedback-margin-top", + "$value": "{spacing.form.text.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": { + "source": "$form-feedback-tooltip-padding-y", + "$value": ".25rem" + }, + "x": { + "source": "$form-feedback-tooltip-padding-x", + "$value": ".5rem" + } } } }, "icon": { - "padding": { "value": ".5625rem", "type": "dimension", "source": "$select-icon-padding" } + "padding": { + "source": "$select-icon-padding", + "$value": ".5625rem" + } } }, "file": { "padding": { "y": { - "value": "{spacing.form.input.padding.y.base}", - "type": "dimension", - "source": "$custom-file-padding-y" + "source": "$custom-file-padding-y", + "$value": "{spacing.form.input.padding.y.base}" }, "x": { - "value": "{spacing.form.input.padding.x.base}", - "type": "dimension", - "source": "$custom-file-padding-x" + "source": "$custom-file-padding-x", + "$value": "{spacing.form.input.padding.x.base}" } } } diff --git a/tokens/src/core/components/Form/transition.json b/tokens/src/core/components/Form/transition.json index 0cd752e9f9..735f9e5f5f 100644 --- a/tokens/src/core/components/Form/transition.json +++ b/tokens/src/core/components/Form/transition.json @@ -1,15 +1,14 @@ { + "$type": "transition", "transition": { "form": { "input": { - "value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out", - "type": "transition", - "source": "$input-transition" + "source": "$input-transition", + "$value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out" }, - "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": { + "source": "$custom-forms-transition", + "$value": "background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out" } } } diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json index 5974f22657..e61e2723ee 100644 --- a/tokens/src/core/components/Form/typography.json +++ b/tokens/src/core/components/Form/typography.json @@ -4,38 +4,44 @@ "input": { "font": { "family": { - "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$input-font-family" + "source": "$input-font-family", + "$value": "{typography.input.btn.font.family}", + "$type": "fontFamily" }, "size": { + "$type": "dimension", "base": { - "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$input-font-size" + "source": "$input-font-size", + "$value": "{typography.input.btn.font.size.base}" }, "sm": { - "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$input-font-size-sm" + "source": "$input-font-size-sm", + "$value": "{typography.input.btn.font.size.sm}" }, "lg": { - "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$input-font-size-lg" + "source": "$input-font-size-lg", + "$value": "{typography.input.btn.font.size.lg}" } }, "weight": { - "value": "{typography.font.weight.base}", "type": "fontWeight", "source": "$input-font-weight" + "source": "$input-font-weight", + "$value": "{typography.font.weight.base}", + "$type": "fontWeight" } }, "line-height": { + "$type": "dimension", "base": { - "value": "{typography.input.btn.line-height.base}", - "type": "dimension", - "source": "$input-line-height" + "source": "$input-line-height", + "$value": "{typography.input.btn.line-height.base}" }, "sm": { - "value": "{typography.input.btn.line-height.sm}", - "type": "dimension", - "source": "$input-line-height-sm" + "source": "$input-line-height-sm", + "$value": "{typography.input.btn.line-height.sm}" }, "lg": { - "value": "{typography.input.btn.line-height.lg}", - "type": "dimension", - "source": "$input-line-height-lg" + "source": "$input-line-height-lg", + "$value": "{typography.input.btn.line-height.lg}" } } }, @@ -43,77 +49,75 @@ "select": { "font": { "family": { - "value": "{typography.form.input.font.family}", - "type": "fontFamily", - "source": "$custom-select-font-family" + "source": "$custom-select-font-family", + "$value": "{typography.form.input.font.family}", + "$type": "fontFamily" }, "size": { + "$type": "dimension", "base": { - "value": "{typography.form.input.font.size.base}", - "type": "dimension", - "source": "$custom-select-font-size" + "source": "$custom-select-font-size", + "$value": "{typography.form.input.font.size.base}" }, "sm": { - "value": "{typography.form.input.font.size.sm}", - "type": "dimension", - "source": "$custom-select-font-size-sm" + "source": "$custom-select-font-size-sm", + "$value": "{typography.form.input.font.size.sm}" }, "lg": { - "value": "{typography.form.input.font.size.lg}", - "type": "dimension", - "source": "$custom-select-font-size-lg" + "source": "$custom-select-font-size-lg", + "$value": "{typography.form.input.font.size.lg}" } }, "weight": { - "value": "{typography.form.input.font.weight}", - "type": "fontWeight", - "source": "$custom-select-font-weight" + "source": "$custom-select-font-weight", + "$value": "{typography.form.input.font.weight}", + "$type": "fontWeight" } }, "line-height": { - "value": "{typography.form.input.line-height.base}", - "type": "dimension", - "source": "$custom-select-line-height" + "source": "$custom-select-line-height", + "$value": "{typography.form.input.line-height.base}", + "$type": "dimension" } }, "file": { "line-height": { - "value": "{typography.form.input.line-height.base}", - "type": "dimension", - "source": "$custom-file-line-height" + "source": "$custom-file-line-height", + "$value": "{typography.form.input.line-height.base}", + "$type": "dimension" }, "font": { - "family": { "value": "{typography.form.input.font.family}", - "type": "fontFamily", - "source": "$custom-file-font-family" }, + "family": { + "source": "$custom-file-font-family", + "$value": "{typography.form.input.font.family}", + "$type": "fontFamily" + }, "weight": { - "value": "{typography.form.input.font.weight}", - "type": "fontWeight", - "source": "$custom-file-font-weight" + "source": "$custom-file-font-weight", + "$value": "{typography.form.input.font.weight}", + "$type": "fontWeight" } } } }, "feedback": { + "$type": "dimension", "font": { "size": { - "value": "{typography.font.size.small.base}", - "type": "dimension", - "source": "$form-feedback-font-size" + "source": "$form-feedback-font-size", + "$value": "{typography.font.size.small.base}" } }, "tooltip": { "font": { "size": { - "value": "{typography.font.size.sm}", - "type": "dimension", - "source": "$form-feedback-tooltip-font-size" + "source": "$form-feedback-tooltip-font-size", + "$value": "{typography.font.size.sm}" } }, "line-height": { - "value": "{typography.line-height.base}", - "type": "dimension", - "source": "$form-feedback-tooltip-line-height" + "source": "$form-feedback-tooltip-line-height", + "$value": "{typography.line-height.base}" } } } diff --git a/tokens/src/core/components/Icon.json b/tokens/src/core/components/Icon.json index bb018fdffc..388673c966 100644 --- a/tokens/src/core/components/Icon.json +++ b/tokens/src/core/components/Icon.json @@ -1,11 +1,27 @@ { + "$type": "dimension", "size": { "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": { + "source": "$icon-inline", + "$value": ".8em" + }, + "xs": { + "source": "$icon-xs", + "$value": "1rem" + }, + "sm": { + "source": "$icon-sm", + "$value": "1.25rem" + }, + "md": { + "source": "$icon-md", + "$value": "1.5rem" + }, + "lg": { + "source": "$icon-lg", + "$value": "1.75rem" + } } } } diff --git a/tokens/src/core/components/IconButton.json b/tokens/src/core/components/IconButton.json index be573f9fc7..6d723d9c55 100644 --- a/tokens/src/core/components/IconButton.json +++ b/tokens/src/core/components/IconButton.json @@ -1,13 +1,19 @@ { + "$type": "dimension", "size": { "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": { + "source": "$btn-icon-diameter-md", + "$value": "2.75rem" + }, + "sm": { + "source": "$btn-icon-diameter-sm", + "$value": "2.25rem" + }, "inline": { - "value": "calc({typography.line-height.base} * 1em + .1em)", - "type": "dimension", - "source": "$btn-icon-diameter-inline" + "source": "$btn-icon-diameter-inline", + "$value": "calc({typography.line-height.base} * 1em + .1em)" } } } diff --git a/tokens/src/core/components/Image.json b/tokens/src/core/components/Image.json index 5e388523de..aa2a189e00 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": { + "source": "$figure-caption-font-size", + "$value": "90%" + } } } }, "size": { + "$type": "dimension", "image": { "thumbnail": { "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$thumbnail-border-width" }, + "width": { + "source": "$thumbnail-border-width", + "$value": "{size.border.width}" + }, "radius": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$thumbnail-border-radius" + "source": "$thumbnail-border-radius", + "$value": "{size.border.radius.base}" } } } } }, "spacing": { + "$type": "dimension", "image": { "thumbnail": { - "padding": { "value": ".25rem", "type": "dimension", "source": "$thumbnail-padding" } + "padding": { + "source": "$thumbnail-padding", + "$value": ".25rem" + } } } } diff --git a/tokens/src/core/components/Menu.json b/tokens/src/core/components/Menu.json index 8451663fd9..49cf09727c 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": { + "source": "$menu-item-padding-x", + "$value": "{spacing.btn.padding.x.base}" + }, + "y": { + "source": "$menu-item-padding-y", + "$value": "{spacing.btn.padding.y.base}" + } }, "icon": { "margin": { - "left": { "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": { + "source": "$menu-item-icon-margin-left", + "$value": ".25em" + }, + "right": { + "source": "$menu-item-icon-margin-right", + "$value": "{spacing.menu.item.icon.margin.left}" + } } } } @@ -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": { + "source": "$menu-select-btn-link-text-decoration-line", + "$value": "underline", + "$type": "textDecoration" + }, + "thickness": { + "source": "$menu-select-btn-link-text-decoration-thickness", + "$value": ".125rem", + "$type": "dimension" + } } } } } }, "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": { + "source": "$menu-border-radius", + "$value": ".25em" + }, + "max-height": { + "source": "$menu-max-height", + "$value": "16.813rem" + } }, "item": { - "height": { "value": "3rem", "type": "dimension", "source": "$menu-item-height" }, + "height": { + "source": "$menu-item-height", + "$value": "3rem" + }, "width": { - "base": { "value": "19rem", "type": "dimension", "source": "$menu-item-width" }, - "xs": { "value": "13.438rem", "type": "dimension", "source": "$menu-item-width-xs" } + "base": { + "source": "$menu-item-width", + "$value": "19rem" + }, + "xs": { + "source": "$menu-item-width-xs", + "$value": "13.438rem" + } }, "border": { - "width": { "value": "{size.btn.border.width}", "type": "dimension", "source": "$menu-item-border-width" } + "width": { + "source": "$menu-item-border-width", + "$value": "{size.btn.border.width}" + } } } } diff --git a/tokens/src/core/components/Modal.json b/tokens/src/core/components/Modal.json index a8322e6484..fda53a1221 100644 --- a/tokens/src/core/components/Modal.json +++ b/tokens/src/core/components/Modal.json @@ -1,47 +1,85 @@ { "elevation": { + "$type": "ratio", "modal": { - "backdrop-zindex": { "value": "1040", "type": "ratio", "source": "$zindex-modal-backdrop" }, - "zindex": { "value": "1050", "type": "ratio", "source": "$zindex-modal" } + "backdrop-zindex": { + "source": "$zindex-modal-backdrop", + "$value": "1040" + }, + "zindex": { + "source": "$zindex-modal", + "$value": "1050" + } } }, "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": { + "source": "$modal-xl", + "$value": "1140px" + }, + "lg": { + "source": "$modal-lg", + "$value": "800px" + }, + "md": { + "source": "$modal-md", + "$value": "500px" + }, + "sm": { + "source": "$modal-sm", + "$value": "400px" + }, "content-border": { - "width": { "value": "0px", "type": "dimension", "source": "$modal-content-border-width" }, + "width": { + "source": "$modal-content-border-width", + "$value": "0px" + }, "radius": { - "value": "{size.border.radius.lg}", "type": "dimension", "source": "$modal-content-border-radius" + "source": "$modal-content-border-radius", + "$value": "{size.border.radius.lg}" } } } }, "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": { + "source": "$modal-inner-padding", + "$value": "1.5rem" + }, + "bottom": { + "source": "$modal-inner-padding-bottom", + "$value": ".7rem" + } }, "footer-padding": { "base": { - "value": "{spacing.modal.footer-padding.y} 1.5rem", - "type": "dimension", - "source": "$modal-footer-padding" + "source": "$modal-footer-padding", + "$value": "{spacing.modal.footer-padding.y} 1.5rem" }, - "y": { "value": "1rem", "type": "dimension", "source": "$modal-footer-padding-y" } + "y": { + "source": "$modal-footer-padding-y", + "$value": "1rem" + } }, "header-padding": { "base": { - "value": "{spacing.modal.header-padding.y} 1.5rem", - "type": "dimension", - "source": "$modal-header-padding" + "source": "$modal-header-padding", + "$value": "{spacing.modal.header-padding.y} 1.5rem" }, - "y": { "value": "1rem", "type": "dimension", "source": "$modal-header-padding-y" } + "y": { + "source": "$modal-header-padding-y", + "$value": "1rem" + } }, - "dialog-margin": { "value": "1.5rem", "type": "dimension", "source": "$modal-dialog-margin" } + "dialog-margin": { + "source": "$modal-dialog-margin", + "$value": "1.5rem" + } } } } diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json index 4f4de47f4c..72b95837e2 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": { + "source": "$nav-link-font-weight", + "$value": "500", + "$type": "fontWeight" + }, + "text-decoration": { + "$value": "none", + "$type": "textDecoration" + } } } }, "size": { + "$type": "dimension", "nav": { "pills": { - "border-radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$nav-pills-border-radius" }, + "border-radius": { + "source": "$nav-pills-border-radius", + "$value": "{size.border.radius.base}" + }, "link": { - "border-width": { "value": "1px", "type": "dimension", "source": "$nav-pills-link-border-width" } + "border-width": { + "source": "$nav-pills-link-border-width", + "$value": "1px" + } }, "inverse-link": { - "border-width": { "value": "{size.nav.pills.link.border-width}", "type": "dimension", "source": "$nav-inverse-pills-link-border-width" } + "border-width": { + "source": "$nav-inverse-pills-link-border-width", + "$value": "{size.nav.pills.link.border-width}" + } } }, "tabs": { "link": { "border-bottom": { - "width": { "value": ".188rem", "type": "dimension", "source": "$nav-tabs-link-border-bottom-width" } + "width": { + "source": "$nav-tabs-link-border-bottom-width", + "$value": ".188rem" + } } }, "inverse-link": { "active-border-bottom-width": { - "value": "{size.nav.tabs.link.border-bottom.width}", - "type": "dimension", - "source": "$nav-inverse-tabs-link-active-border-bottom-width" + "source": "$nav-inverse-tabs-link-active-border-bottom-width", + "$value": "{size.nav.tabs.link.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": { + "source": "$nav-tabs-border-width", + "$value": "2px" + }, + "radius": { + "source": "$nav-tabs-border-radius", + "$value": "0" + } } } } }, "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": { + "source": "$nav-link-padding-y", + "$value": ".5rem" + }, + "x": { + "source": "$nav-link-padding-x", + "$value": "1rem" + } }, - "distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" } + "distance-to-border": { + "source": "$nav-tabs-link-distance-to-border", + "$value": "4px" + } } } } diff --git a/tokens/src/core/components/Navbar.json b/tokens/src/core/components/Navbar.json index 4dd3062b49..f865691dc5 100644 --- a/tokens/src/core/components/Navbar.json +++ b/tokens/src/core/components/Navbar.json @@ -1,26 +1,41 @@ { + "$type": "dimension", "spacing": { "navbar": { "padding": { - "y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$navbar-padding-y" }, + "y": { + "source": "$navbar-padding-y", + "$value": "calc({spacing.spacer.base} / 2)" + }, "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": { + "source": "$navbar-padding-x", + "$value": "{spacing.spacer.base}" + }, + "nav-link": { + "source": "$navbar-nav-link-padding-x", + "$value": ".5rem" + } } }, "brand": { "padding": { "y": { - "value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)", - "type": "dimension", - "source": "$navbar-brand-padding-y" + "source": "$navbar-brand-padding-y", + "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)" } } }, "toggler": { "padding": { - "y": { "value": ".25rem", "type": "dimension", "source": "$navbar-toggler-padding-y" }, - "x": { "value": ".75rem", "type": "dimension", "source": "$navbar-toggler-padding-x" } + "y": { + "source": "$navbar-toggler-padding-y", + "$value": ".25rem" + }, + "x": { + "source": "$navbar-toggler-padding-x", + "$value": ".75rem" + } } } } @@ -29,19 +44,20 @@ "navbar": { "brand": { "font-size": { - "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-brand-font-size" + "source": "$navbar-brand-font-size", + "$value": "{typography.font.size.lg}" } }, "nav-link": { "height": { - "value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)", - "type": "dimension", - "source": "$nav-link-height" + "source": "$nav-link-height", + "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)" } }, "toggler": { "font-size": { - "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-toggler-font-size" + "source": "$navbar-toggler-font-size", + "$value": "{typography.font.size.lg}" } } } @@ -50,19 +66,22 @@ "navbar": { "nav": { "scroll": { - "max-height": { "value": "75vh", "type": "dimension", "source": "$navbar-nav-scroll-max-height" } + "max-height": { + "source": "$navbar-nav-scroll-max-height", + "$value": "75vh" + } } }, "brand": { "height": { - "value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})", - "type": "dimension", - "source": "$navbar-brand-height" + "source": "$navbar-brand-height", + "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})" } }, "toggler": { "border-radius": { - "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$navbar-toggler-border-radius" + "source": "$navbar-toggler-border-radius", + "$value": "{size.btn.border.radius.base}" } } } diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json index 691f063515..0f5402f498 100644 --- a/tokens/src/core/components/Pagination.json +++ b/tokens/src/core/components/Pagination.json @@ -1,24 +1,49 @@ { + "$type": "dimension", "typography": { "pagination": { "font-size": { - "sm": { "value": ".875rem", "type": "dimension", "source": "$pagination-font-size-sm" } + "sm": { + "source": "$pagination-font-size-sm", + "$value": ".875rem" + } }, - "line-height": { "value": "1.5rem", "type": "dimension", "source": "$pagination-line-height" } + "line-height": { + "source": "$pagination-line-height", + "$value": "1.5rem" + } } }, "spacing": { "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": { + "source": "$pagination-padding-y", + "$value": ".625rem" + }, + "sm": { + "source": "$pagination-padding-y-sm", + "$value": ".8rem" + }, + "lg": { + "source": "$pagination-padding-y-lg", + "$value": ".75rem" + } }, "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": { + "source": "$pagination-padding-x", + "$value": "1rem" + }, + "sm": { + "source": "$pagination-padding-x-sm", + "$value": ".6rem" + }, + "lg": { + "source": "$pagination-padding-x-lg", + "$value": "1.5rem" + } } } } @@ -26,40 +51,72 @@ "size": { "pagination": { "icon": { - "width": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-width" }, - "height": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-height" } + "width": { + "source": "$pagination-icon-width", + "$value": "2.25rem" + }, + "height": { + "source": "$pagination-icon-height", + "$value": "2.25rem" + } }, "secondary": { "height": { - "base": { "value": "2.75rem", "type": "dimension", "source": "$pagination-secondary-height" }, - "sm": { "value": "2.25rem", "type": "dimension", "source": "$pagination-secondary-height-sm" } + "base": { + "source": "$pagination-secondary-height", + "$value": "2.75rem" + }, + "sm": { + "source": "$pagination-secondary-height-sm", + "$value": "2.25rem" + } } }, "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$pagination-border-width" }, + "width": { + "source": "$pagination-border-width", + "$value": "{size.border.width}" + }, "radius": { "sm": { - "value": "{size.border.radius.sm}", "type": "dimension", "source": "$pagination-border-radius-sm" + "source": "$pagination-border-radius-sm", + "$value": "{size.border.radius.sm}" }, "lg": { - "value": "{size.border.radius.lg}", "type": "dimension", "source": "$pagination-border-radius-lg" + "source": "$pagination-border-radius-lg", + "$value": "{size.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": { + "source": "$pagination-reduced-dropdown-max-height", + "$value": "60vh" + }, + "min-width": { + "source": "$pagination-reduced-dropdown-min-width", + "$value": "6rem" + } } }, "toggle": { "border": { - "base": { "value": ".3125rem", "type": "dimension", "source": "$pagination-toggle-border" }, - "sm": { "value": ".25rem", "type": "dimension", "source": "$pagination-toggle-border-sm" } + "base": { + "source": "$pagination-toggle-border", + "$value": ".3125rem" + }, + "sm": { + "source": "$pagination-toggle-border-sm", + "$value": ".25rem" + } } }, "focus": { - "outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" } + "outline": { + "source": "$pagination-focus-outline", + "$value": "0" + } } } } diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json index b2f2c7e929..54aba2468a 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": { + "source": "$popover-font-size", + "$value": "{typography.font.size.sm}" + } } }, "size": { + "$type": "dimension", "popover": { - "max-width": { "value": "480px", "type": "dimension", "source": "$popover-max-width" }, + "max-width": { + "source": "$popover-max-width", + "$value": "480px" + }, "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": { + "source": "$popover-border-width", + "$value": "{size.border.width}" + }, + "radius": { + "source": "$popover-border-radius", + "$value": "{size.border.radius.sm}" + } }, "icon": { - "height": { "value": "1rem", "type": "dimension", "source": "$popover-icon-height" }, - "width": { "value": "1rem", "type": "dimension", "source": "$popover-icon-width" } + "height": { + "source": "$popover-icon-height", + "$value": "1rem" + }, + "width": { + "source": "$popover-icon-width", + "$value": "1rem" + } }, "arrow": { - "width": { "value": "1rem", "type": "dimension", "source": "$popover-arrow-width" }, - "height": { "value": ".5rem", "type": "dimension", "source": "$popover-arrow-height" } + "width": { + "source": "$popover-arrow-width", + "$value": "1rem" + }, + "height": { + "source": "$popover-arrow-height", + "$value": ".5rem" + } } } }, "elevation": { + "$type": "ratio", "popover": { - "zindex": { "value": "1060", "type": "ratio", "source": "$zindex-popover" } + "zindex": { + "source": "$zindex-popover", + "$value": "1060" + } } }, "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": { + "source": "$popover-header-padding-y", + "$value": ".5rem" + }, + "x": { + "source": "$popover-header-padding-x", + "$value": "1rem" + } } }, "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": { + "source": "$popover-body-padding-y", + "$value": "{spacing.popover.header.padding.y}" + }, + "x": { + "source": "$popover-body-padding-x", + "$value": "{spacing.popover.header.padding.x}" + } } }, "icon": { - "margin-right": { "value": ".5rem", "type": "dimension", "source": "$popover-icon-margin-right" } + "margin-right": { + "source": "$popover-icon-margin-right", + "$value": ".5rem" + } } } } diff --git a/tokens/src/core/components/ProductTour.json b/tokens/src/core/components/ProductTour.json index 772e194f69..3ae503b471 100644 --- a/tokens/src/core/components/ProductTour.json +++ b/tokens/src/core/components/ProductTour.json @@ -1,31 +1,43 @@ { "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": { + "source": "$checkpoint-border-width", + "$value": "8px" + }, + "arrow": { + "source": "$checkpoint-arrow-width", + "$value": "15px" + }, + "max": { + "source": "$checkpoint-max-width", + "$value": "480px" + } }, "arrow": { "top": { - "value": "{size.product-tour.checkpoint.width.arrow}", - "type": "dimension", - "source": "$checkpoint-arrow-border-top" + "source": "$checkpoint-arrow-border-top", + "$value": "{size.product-tour.checkpoint.width.arrow}" }, "transparent": { - "value": "{size.product-tour.checkpoint.width.arrow}", - "type": "dimension", - "source": "$checkpoint-arrow-border-transparent" + "source": "$checkpoint-arrow-border-transparent", + "$value": "{size.product-tour.checkpoint.width.arrow}" } } } } }, "elevation": { + "$type": "ratio", "product-tour": { "checkpoint": { - "zindex": { "value": "1060", "type": "ratio", "source": "$checkpoint-z-index" } + "zindex": { + "source": "$checkpoint-z-index", + "$value": "1060" + } } } } diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json index 82a0626871..307e0a3167 100644 --- a/tokens/src/core/components/ProgressBar.json +++ b/tokens/src/core/components/ProgressBar.json @@ -1,38 +1,65 @@ { "typography": { + "$type": "dimension", "progress-bar": { "font-size": { - "value": "calc({typography.font.size.base} * .75)", "type": "dimension", "source": "$progress-font-size" + "source": "$progress-font-size", + "$value": "calc({typography.font.size.base} * .75)" } } }, "size": { + "$type": "dimension", "progress-bar": { "height": { - "base": { "value": "1rem", "type": "dimension", "source": "$progress-height" }, - "annotated": { "value": ".3125rem", "type": "dimension", "source": "$annotated-progress-height" } + "base": { + "source": "$progress-height", + "$value": "1rem" + }, + "annotated": { + "source": "$annotated-progress-height", + "$value": ".3125rem" + } }, "border": { - "width": { "value": "1px", "type": "dimension", "source": "$progress-bar-border-width" }, - "radius": { "value": "0", "type": "dimension", "source": "$progress-border-radius" } + "width": { + "source": "$progress-bar-border-width", + "$value": "1px" + }, + "radius": { + "source": "$progress-border-radius", + "$value": "0" + } }, - "threshold-circle": { "value": ".5625rem", "type": "dimension", "source": "$progress-threshold-circle" } + "threshold-circle": { + "source": "$progress-threshold-circle", + "$value": ".5625rem" + } } }, "spacing": { + "$type": "dimension", "progress-bar": { "hint": { - "annotation-gap": { "value": ".5rem", "type": "dimension", "source": "$progress-hint-annotation-gap" } + "annotation-gap": { + "source": "$progress-hint-annotation-gap", + "$value": ".5rem" + } } } }, "transition": { + "$type": "transition", "progress-bar": { "bar": { "animation-timing": { - "value": "1s linear infinite", "type": "transition", "source": "$progress-bar-animation-timing" + "source": "$progress-bar-animation-timing", + "$value": "1s linear infinite" }, - "transition": { "value": "width .6s ease", "type": "transition", "source": "$progress-bar-transition" } + "transition": { + "source": "$progress-bar-transition", + "$value": "width .6s ease" + } } } } diff --git a/tokens/src/core/components/SearchField.json b/tokens/src/core/components/SearchField.json index 75eb4ec290..0e1170d3fc 100644 --- a/tokens/src/core/components/SearchField.json +++ b/tokens/src/core/components/SearchField.json @@ -1,23 +1,35 @@ { + "$type": "dimension", "size": { "search-field": { "border": { "width": { - "base": { "value": ".0625rem", "type": "dimension", "source": "$search-border-width" }, - "focus": { "value": ".3125rem", "type": "dimension", "source": "$search-border-focus-width" } + "base": { + "source": "$search-border-width", + "$value": ".0625rem" + }, + "focus": { + "source": "$search-border-focus-width", + "$value": ".3125rem" + } }, - "radius": { "value": "0", "type": "dimension", "source": "$search-border-radius" } + "radius": { + "source": "$search-border-radius", + "$value": "0" + } }, "search-input-height": { - "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", - "type": "dimension", - "source": "$input-height-search" + "source": "$input-height-search", + "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" } } }, "spacing": { "search-field": { - "margin-button": { "value": ".5rem", "type": "dimension", "source": "$search-button-margin" } + "margin-button": { + "source": "$search-button-margin", + "$value": ".5rem" + } } } } diff --git a/tokens/src/core/components/SelectableBox.json b/tokens/src/core/components/SelectableBox.json index aa4c0a71ab..bf54815ed9 100644 --- a/tokens/src/core/components/SelectableBox.json +++ b/tokens/src/core/components/SelectableBox.json @@ -1,9 +1,19 @@ { + "$type": "dimension", "spacing": { "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": { + "source": "$selectable-box-padding", + "$value": "1rem" + }, + "border-radius": { + "source": "$selectable-box-border-radius", + "$value": ".25rem" + }, + "box-space": { + "source": "$selectable-box-space", + "$value": ".75rem" + } } } } diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json index 86b7358b82..40c116dba5 100644 --- a/tokens/src/core/components/Sheet.json +++ b/tokens/src/core/components/Sheet.json @@ -1,9 +1,16 @@ { + "$type": "ratio", "elevation": { "sheet": { "zindex": { - "backdrop": { "value": "1031", "type": "ratio", "source": "$zindex-sheet-backdrop" }, - "main": { "value": "1032", "type": "ratio", "source": "$zindex-sheet" } + "backdrop": { + "source": "$zindex-sheet-backdrop", + "$value": "1031" + }, + "main": { + "source": "$zindex-sheet", + "$value": "1032" + } } } } diff --git a/tokens/src/core/components/Spinner.json b/tokens/src/core/components/Spinner.json index 2c642554bf..b7e780d290 100644 --- a/tokens/src/core/components/Spinner.json +++ b/tokens/src/core/components/Spinner.json @@ -1,19 +1,41 @@ { + "$type": "dimension", "size": { "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": { + "source": "$spinner-width", + "$value": "2rem" + }, + "height": { + "source": "$spinner-height", + "$value": "{size.spinner.base.width}" + }, + "border-width": { + "source": "$spinner-border-width", + "$value": ".25em" + } }, "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": { + "source": "$spinner-width-sm", + "$value": "1rem" + }, + "height": { + "source": "$spinner-height-sm", + "$value": "{size.spinner.sm.width}" + }, + "border-width": { + "source": "$spinner-border-width-sm", + "$value": ".2em" + } } } }, "spacing": { - "vertical-align": { "value": ".125em", "type": "dimension", "source": "$spinner-vertical-align" } + "vertical-align": { + "source": "$spinner-vertical-align", + "$value": ".125em" + } } } diff --git a/tokens/src/core/components/Stack.json b/tokens/src/core/components/Stack.json index 8faa1f01ff..13a392432a 100644 --- a/tokens/src/core/components/Stack.json +++ b/tokens/src/core/components/Stack.json @@ -1,7 +1,11 @@ { + "$type": "dimension", "size": { "stack": { - "gap": { "value": "0", "type": "dimension", "source": "$stack-gap" } + "gap": { + "source": "$stack-gap", + "$value": "0" + } } } } diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json index 27b3e77b5c..327c650204 100644 --- a/tokens/src/core/components/Stepper.json +++ b/tokens/src/core/components/Stepper.json @@ -1,21 +1,38 @@ { + "$type": "dimension", "spacing": { "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": { + "source": "$stepper-header-padding-y", + "$value": ".75rem" + }, + "x": { + "source": "$stepper-header-padding-x", + "$value": "{spacing.spacer.base}" + } }, "step": { "padding": { - "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-padding" + "source": "$stepper-header-step-padding", + "$value": ".25rem" }, "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": { + "source": "$stepper-header-step-list-padding-y", + "$value": ".25rem" + }, + "x": { + "source": "$stepper-header-step-list-padding-x", + "$value": "0" + } }, - "margin": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-margin" } + "margin": { + "source": "$stepper-header-step-list-margin", + "$value": "0" + } } } } @@ -24,19 +41,29 @@ "size": { "stepper": { "header": { - "height-min": { "value": "5.13rem", "type": "dimension", "source": "$stepper-header-min-height" } + "height-min": { + "source": "$stepper-header-min-height", + "$value": "5.13rem" + } }, "step": { - "width-min": { "value": "0", "type": "dimension", "source": "$stepper-header-step-min-width" }, + "width-min": { + "source": "$stepper-header-step-min-width", + "$value": "0" + }, "bubble-error-shadow-width": { - "value": "3px", "type": "dimension", "source": "$stepper-header-step-error-bubble-shadow-width" + "source": "$stepper-header-step-error-bubble-shadow-width", + "$value": "3px" } } } }, "typography": { "spacer": { - "line-height": { "value": "1px", "type": "dimension", "source": "$stepper-header-line-height" } + "line-height": { + "source": "$stepper-header-line-height", + "$value": "1px" + } } } } diff --git a/tokens/src/core/components/Sticky.json b/tokens/src/core/components/Sticky.json index 9246a1e8d4..ad8f333ea3 100644 --- a/tokens/src/core/components/Sticky.json +++ b/tokens/src/core/components/Sticky.json @@ -1,7 +1,11 @@ { + "$type": "dimension", "spacing": { "sticky": { - "offset": { "value": "0", "type": "dimension", "source": "$sticky-offset" } + "offset": { + "source": "$sticky-offset", + "$value": "0" + } } } } diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json index 4413acf5da..d919d5461a 100644 --- a/tokens/src/core/components/Tab.json +++ b/tokens/src/core/components/Tab.json @@ -1,19 +1,41 @@ { + "$type": "dimension", "spacing": { "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": { + "source": "$tab-more-link-dropdown-toggle-padding-x", + "$value": ".7rem" + }, + "padding-y": { + "source": "$tab-more-link-dropdown-toggle-padding-y", + "$value": "{spacing.spacer.base}" + } }, "inverse-pills-link-dropdown-toggle": { - "padding-x": { "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": { + "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x", + "$value": ".625rem" + }, + "padding-y": { + "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y", + "$value": "{spacing.spacer.base}" + } }, "inverse-tabs-link-dropdown-toggle": { - "padding-x": { "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": { + "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x", + "$value": ".625rem" + }, + "padding-y": { + "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y", + "$value": "{spacing.spacer.base}" + }, + "distance": { + "source": "$tab-inverse-pills-link-dropdown-distance", + "$value": "5px" + } } } } -} +} \ No newline at end of file diff --git a/tokens/src/core/components/Tabs.json b/tokens/src/core/components/Tabs.json index 47a480abb6..457d387178 100644 --- a/tokens/src/core/components/Tabs.json +++ b/tokens/src/core/components/Tabs.json @@ -1,9 +1,16 @@ { + "$type": "dimension", "size": { "tabs": { "notification": { - "height": { "value": "1rem", "type": "dimension", "source": "$tab-notification-height" }, - "width": { "value": "1rem", "type": "dimension", "source": "$tab-notification-width" } + "height": { + "source": "$tab-notification-height", + "$value": "1rem" + }, + "width": { + "source": "$tab-notification-width", + "$value": "1rem" + } } } }, @@ -11,9 +18,10 @@ "tabs": { "notification": { "font-size": { - "value": "{typography.font.size.xs}", "type": "dimension", "source": "$tab-notification-font-size" + "source": "$tab-notification-font-size", + "$value": "{typography.font.size.xs}" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/core/components/Toast.json b/tokens/src/core/components/Toast.json index c375011455..ef7511a4a0 100644 --- a/tokens/src/core/components/Toast.json +++ b/tokens/src/core/components/Toast.json @@ -1,28 +1,53 @@ { + "$type": "dimension", "typography": { "toast": { - "font-size": { "value": ".875rem", "type": "dimension", "source": "$toast-font-size" } + "font-size": { + "source": "$toast-font-size", + "$value": ".875rem" + } } }, "size": { "toast": { - "max-width": { "value": "400px", "type": "dimension", "source": "$toast-max-width" }, + "max-width": { + "source": "$toast-max-width", + "$value": "400px" + }, "border": { - "width": { "value": "1px", "type": "dimension", "source": "$toast-border-width" }, - "radius": { "value": ".25rem", "type": "dimension", "source": "$toast-border-radius" } + "width": { + "source": "$toast-border-width", + "$value": "1px" + }, + "radius": { + "source": "$toast-border-radius", + "$value": ".25rem" + } } } }, "spacing": { "toast": { "padding": { - "x": { "value": ".75rem", "type": "dimension", "source": "$toast-padding-x" }, - "y": { "value": ".25rem", "type": "dimension", "source": "$toast-padding-y" } + "x": { + "source": "$toast-padding-x", + "$value": ".75rem" + }, + "y": { + "source": "$toast-padding-y", + "$value": ".25rem" + } }, "container": { "gutter": { - "lg": { "value": "1.25rem", "type": "dimension", "source": "$toast-container-gutter-lg" }, - "sm": { "value": ".625rem", "type": "dimension", "source": "$toast-container-gutter-sm" } + "lg": { + "source": "$toast-container-gutter-lg", + "$value": "1.25rem" + }, + "sm": { + "source": "$toast-container-gutter-sm", + "$value": ".625rem" + } } } } diff --git a/tokens/src/core/components/Tooltip.json b/tokens/src/core/components/Tooltip.json index 664263b894..9cbc9c09bf 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": { + "source": "$tooltip-font-size", + "$value": "{typography.font.size.sm}" + } } }, "spacing": { + "$type": "dimension", "tooltip": { "padding": { - "y": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-y" }, - "x": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-x" } + "y": { + "source": "$tooltip-padding-y", + "$value": ".5rem" + }, + "x": { + "source": "$tooltip-padding-x", + "$value": ".5rem" + } }, - "margin": { "value": "0", "type": "dimension", "source": "$tooltip-margin" } + "margin": { + "source": "$tooltip-margin", + "$value": "0" + } } }, "elevation": { + "$type": "ratio", "tooltip": { - "zindex": { "value": "1070", "type": "ratio", "source": "$zindex-tooltip" } + "zindex": { + "source": "$zindex-tooltip", + "$value": "1070" + } } }, "size": { + "$type": "dimension", "tooltip": { - "max-width": { "value": "200px", "type": "dimension", "source": "$tooltip-max-width" }, + "max-width": { + "source": "$tooltip-max-width", + "$value": "200px" + }, "arrow": { - "height": { "value": ".4rem", "type": "dimension", "source": "$tooltip-arrow-height" }, - "width": { "value": ".8rem", "type": "dimension", "source": "$tooltip-arrow-width" } + "height": { + "source": "$tooltip-arrow-height", + "$value": ".4rem" + }, + "width": { + "source": "$tooltip-arrow-width", + "$value": ".8rem" + } }, "border-radius": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$tooltip-border-radius" + "source": "$tooltip-border-radius", + "$value": "{size.border.radius.base}" } } } diff --git a/tokens/src/core/components/general/caret.json b/tokens/src/core/components/general/caret.json index b9e9fdac9c..7770844e1e 100644 --- a/tokens/src/core/components/general/caret.json +++ b/tokens/src/core/components/general/caret.json @@ -1,13 +1,23 @@ { + "$type": "dimension", "size": { "caret": { - "width": { "value": ".3em", "type": "dimension", "source": "$caret-width" } + "width": { + "source": "$caret-width", + "$value": ".3em" + } } }, "spacing": { "caret": { - "base": { "value": ".255em", "type": "dimension", "source": "$caret-spacing" }, - "vertical-align": { "value": ".255em", "type": "dimension", "source": "$caret-vertical-align" } + "base": { + "source": "$caret-spacing", + "$value": ".255em" + }, + "vertical-align": { + "source": "$caret-vertical-align", + "$value": ".255em" + } } } } diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json index 045e188af2..558fd39063 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": { + "source": "$headings-font-family", + "$value": "inherit", + "$type": "fontFamily" + }, + "weight": { + "source": "$headings-font-weight", + "$value": "{typography.font.weight.bold}", + "$type": "fontWeight" + } }, - "line-height": { "value": "1.25", "type": "dimension", "source": "$headings-line-height" } + "line-height": { + "source": "$headings-line-height", + "$value": "1.25", + "$type": "dimension" + } } }, "spacing": { + "$type": "dimension", "headings": { - "margin-bottom": { "value": ".5rem", "type": "dimension", "source": "$headings-margin-bottom" } + "margin-bottom": { + "source": "$headings-margin-bottom", + "$value": ".5rem" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/core/components/general/hr.json b/tokens/src/core/components/general/hr.json index 2bb05ca012..84fc96109a 100644 --- a/tokens/src/core/components/general/hr.json +++ b/tokens/src/core/components/general/hr.json @@ -1,9 +1,16 @@ { + "$type": "dimension", "size": { "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": { + "source": "$hr-border-width", + "$value": "{size.border.width}" + }, + "margin-y": { + "source": "$hr-margin-y", + "$value": "{spacing.spacer.base}" + } } } } diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json index 821dc85692..36042d0f11 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": { + "source": "$input-btn-font-family", + "$value": "inherit", + "$type": "fontFamily" + }, "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": { + "source": "$input-btn-font-size", + "$value": "1.125rem" + }, + "sm": { + "source": "$input-btn-font-size-sm", + "$value": ".875rem" + }, + "lg": { + "source": "$input-btn-font-size-lg", + "$value": "1.325rem" + } } }, "line-height": { - "base": { "value": "1.3333", "type": "dimension", "source": "$input-btn-line-height" }, - "sm": { "value": "1.4286", "type": "dimension", "source": "$input-btn-line-height-sm" }, + "$type": "dimension", + "base": { + "source": "$input-btn-line-height", + "$value": "1.3333" + }, + "sm": { + "source": "$input-btn-line-height-sm", + "$value": "1.4286" + }, "lg": { - "value": "{typography.line-height.lg}", "type": "dimension", "source": "$input-btn-line-height-lg" + "source": "$input-btn-line-height-lg", + "$value": "{typography.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": { + "source": "$input-btn-padding-y", + "$value": ".5625rem" + }, + "x": { + "source": "$input-btn-padding-x", + "$value": "1rem" + }, "sm": { - "y": { "value": ".4375rem", "type": "dimension", "source": "$input-btn-padding-y-sm" }, - "x": { "value": ".75rem", "type": "dimension", "source": "$input-btn-padding-x-sm" } + "y": { + "source": "$input-btn-padding-y-sm", + "$value": ".4375rem" + }, + "x": { + "source": "$input-btn-padding-x-sm", + "$value": ".75rem" + } }, "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": { + "source": "$input-btn-padding-y-lg", + "$value": ".6875rem" + }, + "x": { + "source": "$input-btn-padding-x-lg", + "$value": "1.25rem" + } } } } } }, "size": { + "$type": "dimension", "input": { "btn": { "border-width": { - "value": "{size.border.width}", "type": "dimension", "source": "$input-btn-border-width" + "source": "$input-btn-border-width", + "$value": "{size.border.width}" }, - "focus-width": { "value": "1px", "type": "dimension", "source": "$input-btn-focus-width" } + "focus-width": { + "source": "$input-btn-focus-width", + "$value": "1px" + } } } } diff --git a/tokens/src/core/components/general/link.json b/tokens/src/core/components/general/link.json index bb48968eb1..f6ce3e2cf0 100644 --- a/tokens/src/core/components/general/link.json +++ b/tokens/src/core/components/general/link.json @@ -1,27 +1,64 @@ { + "$type": "textDecoration", "typography": { "link": { "decoration": { - "base": { "value": "none", "type": "textDecoration", "source": "$link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$link-hover-decoration" }, + "base": { + "source": "$link-decoration", + "$value": "none" + }, + "hover": { + "source": "$link-hover-decoration", + "$value": "underline" + }, "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$inline-link-hover-decoration" } + "base": { + "source": "$inline-link-decoration", + "$value": "underline" + }, + "hover": { + "source": "$inline-link-hover-decoration", + "$value": "underline" + } }, "muted": { - "base": { "value": "none", "type": "textDecoration", "source": "$muted-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-link-hover-decoration" }, + "base": { + "source": "$muted-link-decoration", + "$value": "none" + }, + "hover": { + "source": "$muted-link-hover-decoration", + "$value": "underline" + }, "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-hover-decoration" } + "base": { + "source": "$muted-inline-link-decoration", + "$value": "underline" + }, + "hover": { + "source": "$muted-inline-link-hover-decoration", + "$value": "underline" + } } }, "brand": { - "base": { "value": "none", "type": "textDecoration", "source": "$brand-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-link-hover-decoration" }, + "base": { + "source": "$brand-link-decoration", + "$value": "none" + }, + "hover": { + "source": "$brand-link-hover-decoration", + "$value": "underline" + }, "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-hover-decoration" } + "base": { + "source": "$brand-inline-link-decoration", + "$value": "underline" + }, + "hover": { + "source": "$brand-inline-link-hover-decoration", + "$value": "underline" + } } } } diff --git a/tokens/src/core/components/general/list.json b/tokens/src/core/components/general/list.json index 1b946b49d5..0a04eacbb3 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": { + "source": "$dt-font-weight", + "$value": "{typography.font.weight.bold}" + } } }, "spacing": { + "$type": "dimension", "list": { - "inline-padding": { "value": ".5rem", "type": "dimension", "source": "$list-inline-padding" }, + "inline-padding": { + "source": "$list-inline-padding", + "$value": ".5rem" + }, "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": { + "source": "$list-group-item-padding-y", + "$value": ".75rem" + }, + "x": { + "source": "$list-group-item-padding-x", + "$value": "1.25rem" + } } } } }, "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": { + "source": "$list-group-border-width", + "$value": "{size.border.width}" + }, + "radius": { + "source": "$list-group-border-radius", + "$value": "{size.border.radius.base}" + } } } } diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json index c1104eb1bf..797fb5e3e4 100644 --- a/tokens/src/core/components/general/text.json +++ b/tokens/src/core/components/general/text.json @@ -1,23 +1,28 @@ { + "$type": "dimension", "spacing": { "paragraph": { - "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$paragraph-margin-bottom" } + "margin-bottom": { + "source": "$paragraph-margin-bottom", + "$value": "1rem" + } }, - "mark-padding": { "value": ".2em", "type": "dimension", "source": "$mark-padding" } + "mark-padding": { + "source": "$mark-padding", + "$value": ".2em" + } }, "typography": { "blockquote": { "small": { "font-size": { - "value": "{typography.font.size.small.base}", - "type": "dimension", - "source": "$blockquote-small-font-size" + "source": "$blockquote-small-font-size", + "$value": "{typography.font.size.small.base}" } }, "font-size": { - "value": "calc({typography.font.size.base} * 1.25)", - "type": "dimension", - "source": "$blockquote-font-size" + "source": "$blockquote-font-size", + "$value": "calc({typography.font.size.base} * 1.25)" } } } diff --git a/tokens/src/core/global/breakpoints.json b/tokens/src/core/global/breakpoints.json index f4d4ee65bf..28b2e5a319 100644 --- a/tokens/src/core/global/breakpoints.json +++ b/tokens/src/core/global/breakpoints.json @@ -1,12 +1,31 @@ { + "$type": "dimension", "size": { "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": "0", + "$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 index 3f892d460b..17eb942016 100644 --- a/tokens/src/core/global/display.json +++ b/tokens/src/core/global/display.json @@ -1,22 +1,77 @@ { "typography": { "display": { + "1": { + "source": "$display1-size", + "$value": "3.75rem", + "$type": "dimension", + "$description": "Font size for heading of level 1." + }, + "2": { + "source": "$display2-size", + "$value": "4.875rem", + "$type": "dimension", + "$description": "Font size for heading of level 2." + }, + "3": { + "source": "$display3-size", + "$value": "5.625rem", + "$type": "dimension", + "$description": "Font size for heading of level 3." + }, + "4": { + "source": "$display4-size", + "$value": "7.5rem", + "$type": "dimension", + "$description": "Font size for heading of level 4." + }, "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." } + "$type": "dimension", + "base": { + "source": "$display-line-height", + "$value": "1", + "$description": "Standard line height." + }, + "mobile": { + "source": "$display-mobile-line-height", + "$value": "3.5rem", + "$description": "Mobile line height." + } + }, + "mobile": { + "source": "$display-mobile-size", + "$value": "3.25rem", + "$type": "dimension", + "$description": "Font size for mobile devices." }, - "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." } + "1": { + "source": "$display1-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of level 1." + }, + "2": { + "source": "$display2-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of level 2." + }, + "3": { + "source": "$display3-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of level 3." + }, + "4": { + "source": "$display4-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of level 4." + }, + "$type": "fontWeight" } }, - "print-page-size": { "value": "a3", "type": "dimension", "source": "$print-page-size" } + "print-page-size": { + "source": "$print-page-size", + "$value": "a3", + "$type": "dimension" + } } } diff --git a/tokens/src/core/global/elevation.json b/tokens/src/core/global/elevation.json index a4b88e4240..3c4db0e022 100644 --- a/tokens/src/core/global/elevation.json +++ b/tokens/src/core/global/elevation.json @@ -1,19 +1,61 @@ { + "$type": "ratio", "elevation": { "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": { + "source": "$zindex-sticky", + "$value": 1020, + "$description": "z-index for sticky element." + }, + "fixed": { + "source": "$zindex-fixed", + "$value": 1030, + "$description": "z-index of for fixed element." + } } } } diff --git a/tokens/src/core/global/other.json b/tokens/src/core/global/other.json index aa57039186..bf1c05f216 100644 --- a/tokens/src/core/global/other.json +++ b/tokens/src/core/global/other.json @@ -1,4 +1,8 @@ { + "$type": "percentage", "yiq-contrasted-threshold": 128, - "theme-interval": { "value": "8%", "type": "percentage", "source": "$theme-color-interval" } + "theme-interval": { + "source": "$theme-color-interval", + "$value": "8%" + } } diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json index 4c4f3f2344..2439f04631 100644 --- a/tokens/src/core/global/spacing.json +++ b/tokens/src/core/global/spacing.json @@ -1,36 +1,89 @@ { + "$type": "dimension", "spacing": { "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": { + "source": "$spacer", + "$value": "1rem", + "$description": "Basic space value" + }, + "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." + "source": "$label-margin-bottom", + "$value": ".5rem", + "$description": "Margin bottom for label." } }, "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": { + "source": "$table-cell-padding", + "$value": ".75rem", + "$description": "Padding for tables." + }, + "sm": { + "source": "$table-cell-padding-sm", + "$value": ".3rem", + "$description": "Padding sm for tables." + } } } }, "grid": { "gutter-width": { - "value": "24px", "type": "dimension", "source": "$grid-gutter-width", "description": "Grid gutter width value." + "source": "$grid-gutter-width", + "$value": "24px", + "$description": "Grid gutter width value." } } } diff --git a/tokens/src/core/global/transition.json b/tokens/src/core/global/transition.json index 7cd6c13d3b..43a8fba7fb 100644 --- a/tokens/src/core/global/transition.json +++ b/tokens/src/core/global/transition.json @@ -1,13 +1,26 @@ { + "$type": "transition", "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" }, + "base": { + "source": "$transition-base", + "$value": "all .2s ease-in-out", + "$description": "Generic transition for any property change" + }, + "fade": { + "source": "$transition-fade", + "$value": "opacity .15s linear", + "$description": "Opacity transition that takes 150ms" + }, "collapse": { "height": { - "value": "height .35s ease", "type": "transition", "source": "$transition-collapse", "description": "Collapse transition for height that takes 350ms" + "source": "$transition-collapse", + "$value": "height .35s ease", + "$description": "Collapse transition for height that takes 350ms" }, "width": { - "value": "width .35s ease", "type": "transition", "source": "$transition-collapse-width", "description": "Collapse transition for width that takes 350ms" + "source": "$transition-collapse-width", + "$value": "width .35s ease", + "$description": "Collapse transition for width that takes 350ms" } } } diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json index 935fa96e9b..20646617ed 100644 --- a/tokens/src/core/global/typography.json +++ b/tokens/src/core/global/typography.json @@ -2,89 +2,222 @@ "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." }, "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." } }, - "serif": { "value": "serif", "source": "$font-family-serif", "description": "Serif font family." }, + "serif": { + "source": "$font-family-serif", + "$value": "serif", + "$description": "Serif font family." + }, "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." } }, "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." }, + "base": { + "source": "$font-size-base", + "$value": "1.125rem", + "$type": "dimension", + "$description": "Base font size." + }, + "lg": { + "source": "$font-size-lg", + "$value": "1.4063rem", + "$type": "dimension", + "$description": "Large font size." + }, + "sm": { + "source": "$font-size-sm", + "$value": ".875rem", + "$type": "dimension", + "$description": "Small font size." + }, + "xs": { + "source": "$font-size-xs", + "$value": ".75rem", + "$type": "dimension", + "$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." }, + "$type": "percentage", + "base": { + "source": "$small-font-size", + "$value": "87.5%", + "$description": "Small font size." + }, + "x": { + "source": "$x-small-font-size", + "$value": "75%", + "$description": "X-small font size." + } + }, + "h1": { + "source": "$h1-font-size", + "$value": "2.5rem", + "$type": "dimension", + "$description": "Font size of heading level 1." + }, + "h2": { + "source": "$h2-font-size", + "$value": "2rem", + "$type": "dimension", + "$description": "Font size of heading level 2." + }, + "h3": { + "source": "$h3-font-size", + "$value": "1.375rem", + "$type": "dimension", + "$description": "Font size of heading level 3." + }, + "h4": { + "source": "$h4-font-size", + "$value": "1.125rem", + "$type": "dimension", + "$description": "Font size of heading level 4." + }, + "h5": { + "source": "$h5-font-size", + "$value": ".875rem", + "$type": "dimension", + "$description": "Font size of heading level 5." + }, + "h6": { + "source": "$h6-font-size", + "$value": ".75rem", + "$type": "dimension", + "$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", + "h1": { + "source": "$h1-mobile-font-size", + "$value": "2.25rem", + "$description": "Mobile font size of heading level 1." + }, + "h2": { + "source": "$h2-mobile-font-size", + "$value": "{typography.font.size.h2}", + "$description": "Mobile font size of heading level 2." + }, + "h3": { + "source": "$h3-mobile-font-size", + "$value": "{typography.font.size.h3}", + "$description": "Mobile font size of heading level 3." + }, + "h4": { + "source": "$h4-mobile-font-size", + "$value": "{typography.font.size.h4}", + "$description": "Mobile font size of heading level 4." + }, + "h5": { + "source": "$h5-mobile-font-size", + "$value": "{typography.font.size.h5}", + "$description": "Mobile font size of heading level 5." + }, + "h6": { + "source": "$h6-mobile-font-size", + "$value": "{typography.font.size.h6}", + "$description": "Mobile font size of heading level 6." + } }, "lead": { - "value": "calc({typography.font.size.base} * 1.25)", - "type": "dimension", "source": "$lead-font-size", - "description": "Lead text font size." + "$value": "calc({typography.font.size.base} * 1.25)", + "$type": "dimension", + "$description": "Lead text font size." }, "micro": { - "value": ".688rem", - "type": "dimension", "source": "$micro-font-size", - "description": "Micro utils text font size." + "$value": ".688rem", + "$type": "dimension", + "$description": "Micro utils text font size." } }, "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": { + "source": "$font-weight-lighter", + "$value": "lighter", + "$description": "Lighter font weight." + }, + "light": { + "source": "$font-weight-light", + "$value": "300", + "$description": "Light font weight." + }, + "normal": { + "source": "$font-weight-normal", + "$value": "400", + "$description": "Normal font weight." + }, "semi": { - "bold": { "value": "500", "type": "fontWeight", "source": "$font-weight-semi-bold", "description": "Semi-bold font weight." } + "bold": { + "source": "$font-weight-semi-bold", + "$value": "500", + "$description": "Semi-bold font weight." + } + }, + "bold": { + "source": "$font-weight-bold", + "$value": "700", + "$description": "Bold font weight." + }, + "bolder": { + "source": "$font-weight-bolder", + "$value": "bolder", + "$description": "Bolder font weight." }, - "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." }, - "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." } + "lead": { + "source": "$lead-font-weight", + "$value": "inherit", + "$description": "Lead text font weight." + }, + "table-th": { + "source": "$table-th-font-weight", + "$value": "normal", + "$description": "Table th font 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": "dimension", + "base": { + "source": "$line-height-base", + "$value": "1.5556", + "$description": "Basic line height." + }, + "lg": { + "source": "$line-height-lg", + "$value": "1.5", + "$description": "Large line height." + }, + "sm": { + "source": "$line-height-sm", + "$value": "1.5", + "$description": "Small line height." + }, "micro": { - "value": ".938rem", "type": "dimension", "source": "$micro-line-height", "description": "Micro utils line height." + "source": "$micro-line-height", + "$value": ".938rem", + "$description": "Micro utils line height." } } } 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..2ca2230790 100644 --- a/tokens/src/themes/light/alias/color.json +++ b/tokens/src/themes/light/alias/color.json @@ -1,113 +1,327 @@ { + "$type": "color", "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": { + "source": "$component-active-bg", + "$value": "{color.primary.500}", + "$description": "Active background color." + } }, "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%." + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.black}", + "$description": "Black text color with transparency of 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%." + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.white}", + "$description": "White text color with transparency of 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": { + "source": "$component-active-color", + "$value": "{color.white}", + "$description": "Color for active element." + }, + "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." + "source": "$table-caption-color", + "$value": "{color.text-muted}", + "$description": "Table caption color." }, "border": { - "value": "{color.border}", "type": "color", "source": "$table-border-color", "description": "Table border color." + "source": "$table-border-color", + "$value": "{color.border}", + "$description": "Table border color." } }, - "border": { "value": "{color.gray.200}", "type": "color", "source": "$border-color", "description": "Border color." }, + "border": { + "source": "$border-color", + "$value": "{color.gray.200}", + "$description": "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..e3f2f734fd 100644 --- a/tokens/src/themes/light/components/Alert.json +++ b/tokens/src/themes/light/components/Alert.json @@ -1,36 +1,67 @@ { + "$type": "color", "color": { "alert": { - "title": { "value": "{color.black}", "type": "color", "source": "$alert-title-color" }, - "content": { "value": "{color.gray.700}", "type": "color", "source": "$alert-content-color" }, + "title": { + "source": "$alert-title-color", + "$value": "{color.black}" + }, + "content": { + "source": "$alert-content-color", + "$value": "{color.gray.700}" + }, "icon": { "success": { - "value": "{color.theme.default.success}", "type": "color", "source": "$alert-success-icon-color" + "source": "$alert-success-icon-color", + "$value": "{color.theme.default.success}" + }, + "info": { + "source": "$alert-info-icon-color", + "$value": "{color.theme.default.info}" }, - "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" + "source": "$alert-danger-icon-color", + "$value": "{color.theme.default.danger}" }, "warning": { - "value": "{color.theme.default.warning}", "type": "color", "source": "$alert-warning-icon-color" + "source": "$alert-warning-icon-color", + "$value": "{color.theme.default.warning}" } }, "bg": { - "success": { "value": "{color.theme.bg.success}", "type": "color", "source": "$alert-success-bg" }, - "info": { "value": "{color.theme.bg.info}", "type": "color", "source": "$alert-info-bg" }, - "danger": { "value": "{color.theme.bg.danger}", "type": "color", "source": "$alert-danger-bg" }, - "warning": { "value": "{color.theme.bg.warning}", "type": "color", "source": "$alert-warning-bg" } + "success": { + "source": "$alert-success-bg", + "$value": "{color.theme.bg.success}" + }, + "info": { + "source": "$alert-info-bg", + "$value": "{color.theme.bg.info}" + }, + "danger": { + "source": "$alert-danger-bg", + "$value": "{color.theme.bg.danger}" + }, + "warning": { + "source": "$alert-warning-bg", + "$value": "{color.theme.bg.warning}" + } }, "border": { "success": { - "value": "{color.theme.border.success}", "type": "color", "source": "$alert-success-border-color" + "source": "$alert-success-border-color", + "$value": "{color.theme.border.success}" + }, + "info": { + "source": "$alert-info-border-color", + "$value": "{color.theme.border.info}" }, - "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" + "source": "$alert-danger-border-color", + "$value": "{color.theme.border.danger}" }, "warning": { - "value": "{color.theme.border.warning}", "type": "color", "source": "$alert-warning-border-color" + "source": "$alert-warning-border-color", + "$value": "{color.theme.border.warning}" } } } diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json index 868e08e3d4..d9abb08471 100644 --- a/tokens/src/themes/light/components/Annotation.json +++ b/tokens/src/themes/light/components/Annotation.json @@ -1,29 +1,60 @@ { "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", - "source": "$annotation-box-shadow" + "source": "$annotation-box-shadow", + "$value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))" } } }, "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": { + "source": "$annotation-success-color", + "$value": "{color.white}" + }, + "warning": { + "source": "$annotation-warning-color", + "$value": "{color.black}" + }, + "error": { + "source": "$annotation-error-color", + "$value": "{color.white}" + }, + "light": { + "source": "$annotation-light-color", + "$value": "{color.primary.500}" + }, + "dark": { + "source": "$annotation-dark-color", + "$value": "{color.white}" + } }, "bg": { - "success": { "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": { + "source": "$annotation-success-bg", + "$value": "{color.success.base}" + }, + "warning": { + "source": "$annotation-warning-bg", + "$value": "{color.accent.b}" + }, + "error": { + "source": "$annotation-error-bg", + "$value": "{color.danger.base}" + }, + "light": { + "source": "$annotation-light-bg", + "$value": "{color.white}" + }, + "dark": { + "source": "$annotation-dark-bg", + "$value": "{color.dark.base}" + } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Avatar.json b/tokens/src/themes/light/components/Avatar.json index 614960f5f8..76ea7b7f38 100644 --- a/tokens/src/themes/light/components/Avatar.json +++ b/tokens/src/themes/light/components/Avatar.json @@ -1,7 +1,10 @@ { + "$type": "color", "color": { "avatar": { - "border": { "value": "{color.light.300}", "type": "color" } + "border": { + "$value": "{color.light.300}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Badge.json b/tokens/src/themes/light/components/Badge.json index 6ff6e21587..63895d42ba 100644 --- a/tokens/src/themes/light/components/Badge.json +++ b/tokens/src/themes/light/components/Badge.json @@ -1,186 +1,313 @@ { + "$type": "color", "color": { "badge": { "text": { "primary": { - "value": "{color.primary.base}", - "type": "color", "source": "$badge-primary-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.primary.base}" }, "secondary": { - "value": "{color.secondary.base}", - "type": "color", "source": "$badge-secondary-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.secondary.base}" }, "success": { - "value": "{color.success.base}", - "type": "color", "source": "$badge-success-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.success.base}" }, "danger": { - "value": "{color.danger.base}", - "type": "color", "source": "$badge-danger-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.danger.base}" }, "warning": { - "value": "{color.warning.base}", - "type": "color", "source": "$badge-warning-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.warning.base}" }, "info": { - "value": "{color.info.base}", - "type": "color", "source": "$badge-info-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.info.base}" }, "light": { - "value": "{color.light.base}", - "type": "color", "source": "$badge-light-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.light.base}" }, "dark": { - "value": "{color.dark.base}", - "type": "color", "source": "$badge-dark-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.dark.base}" } }, "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": { + "source": "$badge-primary-bg", + "$value": "{color.primary.base}" + }, + "secondary": { + "source": "$badge-secondary-bg", + "$value": "{color.secondary.base}" + }, + "success": { + "source": "$badge-success-bg", + "$value": "{color.success.base}" + }, + "warning": { + "source": "$badge-warning-bg", + "$value": "{color.warning.base}" + }, + "danger": { + "source": "$badge-danger-bg", + "$value": "{color.danger.base}" + }, + "info": { + "source": "$badge-info-bg", + "$value": "{color.info.base}" + }, + "light": { + "source": "$badge-light-bg", + "$value": "{color.light.base}" + }, + "dark": { + "source": "$badge-dark-bg", + "$value": "{color.dark.base}" + } }, "focus": { "primary": { - "value": "{color.badge.text.primary}", "type": "color", "source": "$badge-primary-focus-color" + "source": "$badge-primary-focus-color", + "$value": "{color.badge.text.primary}" }, "secondary": { - "value": "{color.badge.text.secondary}", "type": "color", "source": "$badge-secondary-focus-color" + "source": "$badge-secondary-focus-color", + "$value": "{color.badge.text.secondary}" }, "success": { - "value": "{color.badge.text.success}", "type": "color", "source": "$badge-success-focus-color" + "source": "$badge-success-focus-color", + "$value": "{color.badge.text.success}" }, "warning": { - "value": "{color.badge.text.warning}", "type": "color", "source": "$badge-warning-focus-color" + "source": "$badge-warning-focus-color", + "$value": "{color.badge.text.warning}" }, "danger": { - "value": "{color.badge.text.danger}", "type": "color", "source": "$badge-danger-focus-color" + "source": "$badge-danger-focus-color", + "$value": "{color.badge.text.danger}" + }, + "info": { + "source": "$badge-info-focus-color", + "$value": "{color.badge.text.info}" + }, + "light": { + "source": "$badge-light-focus-color", + "$value": "{color.badge.text.light}" + }, + "dark": { + "source": "$badge-dark-focus-color", + "$value": "{color.badge.text.dark}" }, - "info": { "value": "{color.badge.text.info}", "type": "color", "source": "$badge-info-focus-color" }, - "light": { "value": "{color.badge.text.light}", "type": "color", "source": "$badge-light-focus-color" }, - "dark": { "value": "{color.badge.text.dark}", "type": "color", "source": "$badge-dark-focus-color" }, "bg": { "primary": { - "value": "{color.badge.bg.primary}", - "type": "color", "source": "$badge-primary-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.primary}" }, "secondary": { - "value": "{color.badge.bg.secondary}", - "type": "color", "source": "$badge-secondary-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.secondary}" }, "success": { - "value": "{color.badge.bg.success}", - "type": "color", "source": "$badge-success-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.success}" }, "danger": { - "value": "{color.badge.bg.danger}", - "type": "color", "source": "$badge-danger-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.danger}" }, "warning": { - "value": "{color.badge.bg.warning}", - "type": "color", "source": "$badge-warning-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.warning}" }, "info": { - "value": "{color.badge.bg.info}", - "type": "color", "source": "$badge-info-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.info}" }, "light": { - "value": "{color.badge.bg.light}", - "type": "color", "source": "$badge-light-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.light}" }, "dark": { - "value": "{color.badge.bg.dark}", - "type": "color", "source": "$badge-dark-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.badge.bg.dark}" } }, "box-shadow": { "primary": { - "value": "{color.badge.bg.primary}", - "type": "color", "source": "$badge-primary-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.primary}" }, "secondary": { - "value": "{color.badge.bg.secondary}", - "type": "color", "source": "$badge-secondary-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.secondary}" }, "success": { - "value": "{color.badge.bg.success}", - "type": "color", "source": "$badge-success-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.success}" }, "danger": { - "value": "{color.badge.bg.danger}", - "type": "color", "source": "$badge-danger-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.danger}" }, "warning": { - "value": "{color.badge.bg.warning}", - "type": "color", "source": "$badge-warning-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.warning}" }, "info": { - "value": "{color.badge.bg.info}", - "type": "color", "source": "$badge-info-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.info}" }, "light": { - "value": "{color.badge.bg.light}", - "type": "color", "source": "$badge-light-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.light}" }, "dark": { - "value": "{color.badge.bg.dark}", - "type": "color", "source": "$badge-dark-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.badge.bg.dark}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json index 25ec20acef..df8ddf2d34 100644 --- a/tokens/src/themes/light/components/Breadcrumb.json +++ b/tokens/src/themes/light/components/Breadcrumb.json @@ -1,12 +1,28 @@ { + "$type": "color", "color": { "breadcrumb": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" }, - "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" }, + "base": { + "source": "$breadcrumb-color", + "$value": "{color.primary.500}" + }, + "active": { + "source": "$breadcrumb-active-color", + "$value": "{color.gray.500}" + }, "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": { + "source": "$breadcrumb-inverse-color", + "$value": "{color.white}" + }, + "active": { + "source": "$breadcrumb-inverse-active", + "$value": "{color.light.500}" + }, + "spacer": { + "source": "$breadcrumb-inverse-spacer", + "$value": "{color.light.700}" + } } } } diff --git a/tokens/src/themes/light/components/Bubble.json b/tokens/src/themes/light/components/Bubble.json index b69eaec093..ebb63c4092 100644 --- a/tokens/src/themes/light/components/Bubble.json +++ b/tokens/src/themes/light/components/Bubble.json @@ -1,17 +1,42 @@ { + "$type": "color", "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": { + "source": "$bubble-success-color", + "$value": "{color.white}" + }, + "warning": { + "source": "$bubble-warning-color", + "$value": "{color.white}" + }, + "error": { + "source": "$bubble-error-color", + "$value": "{color.white}" + }, + "primary": { + "source": "$bubble-primary-color", + "$value": "{color.white}" + } }, "bg": { - "success": { "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": { + "source": "$bubble-success-bg", + "$value": "{color.success.base}" + }, + "warning": { + "source": "$bubble-warning-bg", + "$value": "{color.warning.base}" + }, + "error": { + "source": "$bubble-error-bg", + "$value": "{color.danger.base}" + }, + "primary": { + "source": "$bubble-primary-bg", + "$value": "{color.primary.base}" + } } } } diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json index 7b16f40169..0e9dfef451 100644 --- a/tokens/src/themes/light/components/Button/brand.json +++ b/tokens/src/themes/light/components/Button/brand.json @@ -1,260 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "brand": { - "value": "{color.btn.bg.brand}", - "type": "color", "source": "$btn-brand-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.brand}" + }, + "outline-brand": { + "source": "$btn-brand-outline-color", + "$value": "{color.brand.base}" + }, + "inverse-brand": { + "source": "$btn-brand-inverse-color", + "$value": "{color.brand.base}" }, - "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" + "source": "$btn-brand-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-bg" }, - "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-bg" }, + "brand": { + "source": "$btn-brand-bg", + "$value": "{color.brand.base}" + }, + "outline-brand": { + "source": "$btn-brand-outline-bg", + "$value": "inherit" + }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", "source": "$btn-brand-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-brand}" }, "inverse-outline-brand": { - "value": "transparent", - "type": "color", - "source": "$btn-brand-inverse-outline-bg" + "source": "$btn-brand-inverse-outline-bg", + "$value": "transparent" } }, "border": { - "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-border-color" }, + "brand": { + "source": "$btn-brand-border-color", + "$value": "{color.btn.bg.brand}" + }, "outline-brand": { - "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-outline-border-color" + "source": "$btn-brand-outline-border-color", + "$value": "{color.brand.base}" }, "inverse-outline-brand": { - "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-border-color" + "source": "$btn-brand-inverse-outline-border-color", + "$value": "{color.white}" }, - "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-border-color" } + "inverse-brand": { + "source": "$btn-brand-inverse-border-color", + "$value": "transparent" + } }, "hover": { "text": { "brand": { - "value": "{color.btn.hover.bg.brand}", - "type": "color", "source": "$btn-brand-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.brand}" }, "outline-brand": { - "value": "{color.theme.hover.brand}", - "type": "color", - "source": "$btn-brand-outline-hover-color" + "source": "$btn-brand-outline-hover-color", + "$value": "{color.theme.hover.brand}" }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", "source": "$btn-brand-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-brand}" }, "inverse-outline-brand": { - "value": "{color.theme.hover.brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-hover-color" + "source": "$btn-brand-inverse-outline-hover-color", + "$value": "{color.theme.hover.brand}" } }, "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": { + "source": "$btn-brand-hover-bg", + "$value": "{color.theme.hover.brand}" + }, + "outline-brand": { + "source": "$btn-brand-outline-hover-bg", + "$value": "{color.brand.100}" + }, "inverse-brand": { - "value": "{color.btn.bg.inverse-brand}", - "type": "color", "source": "$btn-brand-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-brand}" }, "inverse-outline-brand": { - "value": "{color.brand.100}", "type": "color", "source": "$btn-brand-inverse-outline-hover-bg" + "source": "$btn-brand-inverse-outline-hover-bg", + "$value": "{color.brand.100}" } }, "border": { "brand": { - "value": "{color.theme.hover.brand}", "type": "color", "source": "$btn-brand-hover-border-color" + "source": "$btn-brand-hover-border-color", + "$value": "{color.theme.hover.brand}" }, "outline-brand": { - "value": "{color.brand.900}", "type": "color", "source": "$btn-brand-outline-hover-border-color" + "source": "$btn-brand-outline-hover-border-color", + "$value": "{color.brand.900}" }, "inverse-outline-brand": { - "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-hover-border-color" + "source": "$btn-brand-inverse-outline-hover-border-color", + "$value": "transparent" }, - "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-hover-border-color" } + "inverse-brand": { + "source": "$btn-brand-inverse-hover-border-color", + "$value": "transparent" + } } }, "active": { "text": { "brand": { - "value": "{color.btn.active.bg.brand}", - "type": "color", "source": "$btn-brand-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.brand}" }, "outline-brand": { - "value": "{color.btn.active.bg.outline-brand}", - "type": "color", "source": "$btn-brand-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-brand}" }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", "source": "$btn-brand-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-brand}" }, "inverse-outline-brand": { - "value": "{color.btn.active.bg.inverse-outline-brand}", - "type": "color", "source": "$btn-brand-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-brand}" + } }, "bg": { "brand": { - "value": "{color.theme.active.brand}", "type": "color", "source": "$btn-brand-active-bg" + "source": "$btn-brand-active-bg", + "$value": "{color.theme.active.brand}" }, "outline-brand": { - "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-outline-active-bg" + "source": "$btn-brand-outline-active-bg", + "$value": "{color.theme.bg.brand}" }, "inverse-outline-brand": { - "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-inverse-outline-active-bg" + "source": "$btn-brand-inverse-outline-active-bg", + "$value": "{color.theme.bg.brand}" }, - "inverse-brand": { "value": "{color.gray.100}", "type": "color", "source": "$btn-brand-inverse-active-bg" } + "inverse-brand": { + "source": "$btn-brand-inverse-active-bg", + "$value": "{color.gray.100}" + } }, "border": { "brand": { - "value": "{color.theme.active.brand}", "type": "color", "source": "$btn-brand-active-border-color" + "source": "$btn-brand-active-border-color", + "$value": "{color.theme.active.brand}" }, "outline-brand": { - "value": "{color.theme.active.brand}", - "type": "color", - "source": "$btn-brand-outline-active-border-color" + "source": "$btn-brand-outline-active-border-color", + "$value": "{color.theme.active.brand}" }, "inverse-brand": { - "value": "transparent", - "type": "color", - "source": "$btn-brand-inverse-active-border-color" + "source": "$btn-brand-inverse-active-border-color", + "$value": "transparent" }, "inverse-outline-brand": { - "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-active-border-color" + "source": "$btn-brand-inverse-outline-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-focus-color" }, + "brand": { + "source": "$btn-brand-focus-color", + "$value": "{color.btn.text.brand}" + }, "inverse-brand": { - "value": "{color.btn.text.inverse-brand}", - "type": "color", - "source": "$btn-brand-inverse-focus-color" + "source": "$btn-brand-inverse-focus-color", + "$value": "{color.btn.text.inverse-brand}" }, "outline-brand": { - "value": "{color.btn.text.outline-brand}", - "type": "color", - "source": "$btn-brand-outline-focus-color" + "source": "$btn-brand-outline-focus-color", + "$value": "{color.btn.text.outline-brand}" }, "inverse-outline-brand": { - "value": "{color.btn.text.inverse-outline-brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-focus-color" + "source": "$btn-brand-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-brand}" } }, "border": { "brand": { - "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-focus-border-color" + "source": "$btn-brand-focus-border-color", + "$value": "{color.btn.border.brand}" }, "outline-brand": { - "value": "{color.btn.border.outline-brand}", - "type": "color", - "source": "$btn-brand-outline-focus-border-color" + "source": "$btn-brand-outline-focus-border-color", + "$value": "{color.btn.border.outline-brand}" }, "inverse-brand": { - "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-focus-border-color" + "source": "$btn-brand-inverse-focus-border-color", + "$value": "{color.white}" }, "inverse-outline-brand": { - "value": "{color.btn.border.inverse-outline-brand}", "type": "color", "source": "$btn-brand-inverse-outline-focus-border-color" + "source": "$btn-brand-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-brand}" } }, "bg": { - "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-focus-bg" }, + "brand": { + "source": "$btn-brand-focus-bg", + "$value": "{color.btn.bg.brand}" + }, "inverse-brand": { - "value": "{color.btn.bg.inverse-brand}", "source": "$btn-brand-inverse-focus-bg", - "type": "color" + "$value": "{color.btn.bg.inverse-brand}" }, - "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": { + "source": "$btn-brand-outline-focus-bg", + "$value": "inherit" + }, + "inverse-outline-brand": { + "source": "$btn-brand-inverse-outline-focus-bg", + "$value": "inherit" + } }, "outline": { - "brand": { "value": "{color.theme.focus.brand}", "type": "color", "source": "$btn-brand-focus-outline-color" }, + "brand": { + "source": "$btn-brand-focus-outline-color", + "$value": "{color.theme.focus.brand}" + }, "outline-brand": { - "value": "{color.theme.focus.brand}", - "type": "color", - "source": "$btn-brand-outline-focus-outline-color" + "source": "$btn-brand-outline-focus-outline-color", + "$value": "{color.theme.focus.brand}" }, "inverse-brand": { - "value": "{color.btn.focus.border.inverse-brand}", - "type": "color", - "source": "$btn-brand-inverse-focus-outline-color" + "source": "$btn-brand-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-brand}" }, "inverse-outline-brand": { - "value": "{color.btn.focus.border.inverse-outline-brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-focus-outline-color" + "source": "$btn-brand-inverse-outline-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-outline-brand}" } } }, "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": { + "source": "$btn-brand-disabled-color", + "$value": "{color.btn.text.brand}" + }, + "inverse-brand": { + "source": "$btn-brand-inverse-disabled-color", + "$value": "{color.brand.500}" + }, "outline-brand": { - "value": "{color.btn.hover.text.outline-brand}", - "type": "color", - "source": "$btn-brand-outline-disabled-color" + "source": "$btn-brand-outline-disabled-color", + "$value": "{color.btn.hover.text.outline-brand}" }, "inverse-outline-brand": { - "value": "{color.btn.text.inverse-outline-brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-disabled-color" + "source": "$btn-brand-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-brand}" } }, "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": { + "source": "$btn-brand-disabled-bg", + "$value": "{color.btn.bg.brand}" + }, + "outline-brand": { + "source": "$btn-brand-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-brand": { + "source": "$btn-brand-inverse-disabled-bg", + "$value": "{color.white}" + }, "inverse-outline-brand": { - "value": "{color.btn.bg.inverse-outline-brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-disabled-bg" + "source": "$btn-brand-inverse-outline-disabled-bg", + "$value": "{color.btn.bg.inverse-outline-brand}" } }, "border": { - "brand": { "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-disabled-border-color" }, + "brand": { + "source": "$btn-brand-disabled-border-color", + "$value": "{color.btn.border.brand}" + }, "outline-brand": { - "value": "{color.btn.border.outline-brand}", - "type": "color", - "source": "$btn-brand-outline-disabled-border-color" + "source": "$btn-brand-outline-disabled-border-color", + "$value": "{color.btn.border.outline-brand}" }, "inverse-brand": { - "value": "{color.btn.disabled.bg.inverse-brand}", - "type": "color", - "source": "$btn-brand-inverse-disabled-border-color" + "source": "$btn-brand-inverse-disabled-border-color", + "$value": "{color.btn.disabled.bg.inverse-brand}" }, "inverse-outline-brand": { - "value": "{color.btn.text.inverse-outline-brand}", - "type": "color", - "source": "$btn-brand-inverse-outline-disabled-border-color" + "source": "$btn-brand-inverse-outline-disabled-border-color", + "$value": "{color.btn.text.inverse-outline-brand}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json index 8eabdf63ae..3db2ad51ec 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": { + "source": "$btn-link-disabled-color", + "$value": "{color.disabled}" + } } }, - "elevation": { + "elevation": { + "$type": "shadow", "btn": { "box-shadow": { "base": { - "value": "none", - "type": "shadow", - "source": "$btn-box-shadow" + "source": "$btn-box-shadow", + "$value": "none" }, - "active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" } + "active": { + "source": "$btn-active-box-shadow", + "$value": "none" + } } } }, "other": { + "$type": "ratio", "btn": { - "disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" } + "disabled-opacity": { + "source": "$btn-disabled-opacity", + "$value": ".65" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json index 9272c9473c..8068ac2927 100644 --- a/tokens/src/themes/light/components/Button/danger.json +++ b/tokens/src/themes/light/components/Button/danger.json @@ -1,247 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "danger": { - "value": "{color.btn.bg.danger}", - "type": "color", "source": "$btn-danger-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.danger}" }, "outline-danger": { - "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-color" + "source": "$btn-danger-outline-color", + "$value": "{color.danger.base}" }, "inverse-danger": { - "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-color" + "source": "$btn-danger-inverse-color", + "$value": "{color.danger.base}" }, "inverse-outline-danger": { - "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-color" + "source": "$btn-danger-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-bg" }, - "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-bg" }, + "danger": { + "source": "$btn-danger-bg", + "$value": "{color.danger.base}" + }, + "outline-danger": { + "source": "$btn-danger-outline-bg", + "$value": "inherit" + }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", "source": "$btn-danger-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-danger}" }, - "inverse-outline-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-bg" } + "inverse-outline-danger": { + "source": "$btn-danger-inverse-outline-bg", + "$value": "transparent" + } }, "border": { - "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-border-color" }, + "danger": { + "source": "$btn-danger-border-color", + "$value": "{color.btn.bg.danger}" + }, "outline-danger": { - "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-border-color" + "source": "$btn-danger-outline-border-color", + "$value": "{color.danger.base}" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-danger-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "danger": { - "value": "{color.btn.hover.bg.danger}", - "type": "color", "source": "$btn-danger-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.danger}" }, "outline-danger": { - "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-outline-hover-color" + "source": "$btn-danger-outline-hover-color", + "$value": "{color.theme.hover.danger}" }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", "source": "$btn-danger-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-danger}" }, "inverse-outline-danger": { - "value": "{color.theme.hover.danger}", - "type": "color", - "source": "$btn-danger-inverse-outline-hover-color" + "source": "$btn-danger-inverse-outline-hover-color", + "$value": "{color.theme.hover.danger}" } }, "bg": { - "danger": { "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-hover-bg" }, + "danger": { + "source": "$btn-danger-hover-bg", + "$value": "{color.theme.hover.danger}" + }, "outline-danger": { - "value": "{color.danger.100}", "type": "color", "source": "$btn-danger-outline-hover-bg" + "source": "$btn-danger-outline-hover-bg", + "$value": "{color.danger.100}" }, "inverse-danger": { - "value": "{color.btn.bg.inverse-danger}", - "type": "color", "source": "$btn-danger-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-danger}" }, "inverse-outline-danger": { - "value": "{color.danger.100}", "type": "color", "source": "$btn-danger-inverse-outline-hover-bg" + "source": "$btn-danger-inverse-outline-hover-bg", + "$value": "{color.danger.100}" } }, "border": { "danger": { - "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-hover-border-color" + "source": "$btn-danger-hover-border-color", + "$value": "{color.theme.hover.danger}" }, "outline-danger": { - "value": "{color.danger.900}", "type": "color", "source": "$btn-danger-outline-hover-border-color" + "source": "$btn-danger-outline-hover-border-color", + "$value": "{color.danger.900}" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-hover-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-danger-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "danger": { - "value": "{color.btn.active.bg.danger}", - "type": "color", "source": "$btn-danger-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.danger}" }, "outline-danger": { - "value": "{color.btn.active.bg.outline-danger}", - "type": "color", "source": "$btn-danger-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-danger}" }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", "source": "$btn-danger-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-danger}" }, "inverse-outline-danger": { - "value": "{color.btn.active.bg.inverse-outline-danger}", - "type": "color", "source": "$btn-danger-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-danger}" + } }, "bg": { "danger": { - "value": "{color.theme.active.danger}", "type": "color", "source": "$btn-danger-active-bg" + "source": "$btn-danger-active-bg", + "$value": "{color.theme.active.danger}" }, "outline-danger": { - "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-outline-active-bg" + "source": "$btn-danger-outline-active-bg", + "$value": "{color.theme.bg.danger}" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-active-bg", + "$value": "{color.gray.100}" }, - "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" + "source": "$btn-danger-inverse-outline-active-bg", + "$value": "{color.theme.bg.danger}" } }, "border": { "danger": { - "value": "{color.theme.active.danger}", "type": "color", "source": "$btn-danger-active-border-color" + "source": "$btn-danger-active-border-color", + "$value": "{color.theme.active.danger}" }, "outline-danger": { - "value": "{color.theme.active.danger}", - "type": "color", - "source": "$btn-danger-outline-active-border-color" + "source": "$btn-danger-outline-active-border-color", + "$value": "{color.theme.active.danger}" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-active-border-color", + "$value": "transparent" }, - "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-active-border-color" }, "inverse-outline-danger": { - "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-active-border-color" } + "source": "$btn-danger-inverse-outline-active-border-color", + "$value": "transparent" + } } }, "focus": { "text": { - "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-focus-color" }, + "danger": { + "source": "$btn-danger-focus-color", + "$value": "{color.btn.text.danger}" + }, "inverse-danger": { - "value": "{color.btn.text.inverse-danger}", - "type": "color", - "source": "$btn-danger-inverse-focus-color" + "source": "$btn-danger-inverse-focus-color", + "$value": "{color.btn.text.inverse-danger}" }, "outline-danger": { - "value": "{color.btn.text.outline-danger}", - "type": "color", - "source": "$btn-danger-outline-focus-color" + "source": "$btn-danger-outline-focus-color", + "$value": "{color.btn.text.outline-danger}" }, "inverse-outline-danger": { - "value": "{color.btn.text.inverse-outline-danger}", - "type": "color", - "source": "$btn-danger-inverse-outline-focus-color" + "source": "$btn-danger-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-danger}" } }, "border": { "danger": { - "value": "{color.btn.focus.bg.danger}", "type": "color", "source": "$btn-danger-focus-border-color" + "source": "$btn-danger-focus-border-color", + "$value": "{color.btn.focus.bg.danger}" }, "outline-danger": { - "value": "{color.btn.border.outline-danger}", - "type": "color", - "source": "$btn-danger-outline-focus-border-color" + "source": "$btn-danger-outline-focus-border-color", + "$value": "{color.btn.border.outline-danger}" }, "inverse-danger": { - "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-focus-border-color" + "source": "$btn-danger-inverse-focus-border-color", + "$value": "{color.white}" }, "inverse-outline-danger": { - "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-focus-border-color" + "source": "$btn-danger-inverse-outline-focus-border-color", + "$value": "{color.white}" } }, "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": { + "source": "$btn-danger-focus-bg", + "$value": "{color.btn.bg.danger}" + }, + "outline-danger": { + "source": "$btn-danger-outline-focus-bg", + "$value": "inherit" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-danger}" + }, + "inverse-outline-danger": { + "source": "$btn-danger-inverse-outline-focus-bg", + "$value": "inherit" + } }, "outline": { - "danger": { "value": "{color.theme.focus.danger}", "type": "color", "source": "$btn-danger-focus-outline-color" }, + "danger": { + "source": "$btn-danger-focus-outline-color", + "$value": "{color.theme.focus.danger}" + }, "outline-danger": { - "value": "{color.theme.focus.danger}", - "type": "color", - "source": "$btn-danger-outline-focus-outline-color" + "source": "$btn-danger-outline-focus-outline-color", + "$value": "{color.theme.focus.danger}" }, "inverse-danger": { - "value": "{color.btn.focus.border.inverse-danger}", - "type": "color", - "source": "$btn-danger-inverse-focus-outline-color" + "source": "$btn-danger-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-danger}" }, "inverse-outline-danger": { - "value": "{color.btn.focus.border.inverse-danger}", - "type": "color", - "source": "$btn-danger-inverse-outline-focus-outline-color" + "source": "$btn-danger-inverse-outline-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-danger}" } } }, "disabled": { "text": { - "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-disabled-color" }, + "danger": { + "source": "$btn-danger-disabled-color", + "$value": "{color.btn.text.danger}" + }, "outline-danger": { - "value": "{color.btn.hover.text.outline-danger}", - "type": "color", - "source": "$btn-danger-outline-disabled-color" + "source": "$btn-danger-outline-disabled-color", + "$value": "{color.btn.hover.text.outline-danger}" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-disabled-color", + "$value": "{color.danger.base}" }, - "inverse-danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-disabled-color" }, "inverse-outline-danger": { - "value": "{color.btn.text.inverse-outline-danger}", - "type": "color", - "source": "$btn-danger-inverse-outline-disabled-color" + "source": "$btn-danger-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-danger}" } }, "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": { + "source": "$btn-danger-disabled-bg", + "$value": "{color.btn.bg.danger}" + }, + "outline-danger": { + "source": "$btn-danger-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-danger": { + "source": "$btn-danger-inverse-disabled-bg", + "$value": "transparent" + }, + "inverse-outline-danger": { + "source": "$btn-danger-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "danger": { "value": "{color.btn.border.danger}", "type": "color", "source": "$btn-danger-disabled-border-color" }, + "danger": { + "source": "$btn-danger-disabled-border-color", + "$value": "{color.btn.border.danger}" + }, "outline-danger": { - "value": "{color.btn.border.outline-danger}", - "type": "color", - "source": "$btn-danger-outline-disabled-border-color" + "source": "$btn-danger-outline-disabled-border-color", + "$value": "{color.btn.border.outline-danger}" }, "inverse-danger": { - "value": "transparent", - "type": "color", - "source": "$btn-danger-inverse-disabled-border-color" + "source": "$btn-danger-inverse-disabled-border-color", + "$value": "transparent" }, "inverse-outline-danger": { - "value": "{color.btn.border.inverse-outline-danger}", - "type": "color", - "source": "$btn-danger-inverse-outline-disabled-border-color" + "source": "$btn-danger-inverse-outline-disabled-border-color", + "$value": "{color.btn.border.inverse-outline-danger}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json index dcb73c0d64..9eae6816b2 100644 --- a/tokens/src/themes/light/components/Button/dark.json +++ b/tokens/src/themes/light/components/Button/dark.json @@ -1,230 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "dark": { - "value": "{color.btn.bg.dark}", - "type": "color", "source": "$btn-dark-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-color", + "$value": "{color.dark.base}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-color", + "$value": "{color.dark.base}" }, - "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" + "source": "$btn-dark-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-bg" }, - "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-bg" }, + "dark": { + "source": "$btn-dark-bg", + "$value": "{color.dark.base}" + }, + "outline-dark": { + "source": "$btn-dark-outline-bg", + "$value": "inherit" + }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", "source": "$btn-dark-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-dark}" }, - "inverse-outline-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-bg" } + "inverse-outline-dark": { + "source": "$btn-dark-inverse-outline-bg", + "$value": "transparent" + } }, "border": { - "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-border-color" }, + "dark": { + "source": "$btn-dark-border-color", + "$value": "{color.btn.bg.dark}" + }, "outline-dark": { - "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-outline-border-color" + "source": "$btn-dark-outline-border-color", + "$value": "{color.dark.base}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-dark-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "dark": { - "value": "{color.btn.hover.bg.dark}", - "type": "color", "source": "$btn-dark-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.dark}" }, "outline-dark": { - "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-outline-hover-color" + "source": "$btn-dark-outline-hover-color", + "$value": "{color.theme.hover.dark}" }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", "source": "$btn-dark-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-dark}" }, "inverse-outline-dark": { - "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-inverse-outline-hover-color" + "source": "$btn-dark-inverse-outline-hover-color", + "$value": "{color.theme.hover.dark}" } }, "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": { + "source": "$btn-dark-hover-bg", + "$value": "{color.theme.hover.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-hover-bg", + "$value": "{color.dark.100}" + }, "inverse-dark": { - "value": "{color.btn.bg.inverse-dark}", - "type": "color", "source": "$btn-dark-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-dark}" }, "inverse-outline-dark": { - "value": "{color.dark.100}", "type": "color", "source": "$btn-dark-inverse-outline-hover-bg" + "source": "$btn-dark-inverse-outline-hover-bg", + "$value": "{color.dark.100}" } }, "border": { "dark": { - "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-hover-border-color" + "source": "$btn-dark-hover-border-color", + "$value": "{color.theme.hover.dark}" }, "outline-dark": { - "value": "{color.dark.900}", "type": "color", "source": "$btn-dark-outline-hover-border-color" + "source": "$btn-dark-outline-hover-border-color", + "$value": "{color.dark.900}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-hover-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-dark-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "dark": { - "value": "{color.btn.active.bg.dark}", - "type": "color", "source": "$btn-dark-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.dark}" }, "outline-dark": { - "value": "{color.btn.active.bg.outline-dark}", - "type": "color", "source": "$btn-dark-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-dark}" }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", "source": "$btn-dark-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-dark}" }, "inverse-outline-dark": { - "value": "{color.btn.active.bg.inverse-outline-dark}", - "type": "color", "source": "$btn-dark-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-dark}" + } }, "bg": { - "dark": { "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-active-bg" }, + "dark": { + "source": "$btn-dark-active-bg", + "$value": "{color.theme.active.dark}" + }, "outline-dark": { - "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-outline-active-bg" + "source": "$btn-dark-outline-active-bg", + "$value": "{color.theme.bg.dark}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-active-bg", + "$value": "{color.gray.100}" }, - "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" + "source": "$btn-dark-inverse-outline-active-bg", + "$value": "{color.theme.bg.dark}" } }, "border": { "dark": { - "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-active-border-color" + "source": "$btn-dark-active-border-color", + "$value": "{color.theme.active.dark}" }, "outline-dark": { - "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-outline-active-border-color" + "source": "$btn-dark-outline-active-border-color", + "$value": "{color.theme.active.dark}" }, "inverse-dark": { - "value": "transparent", - "type": "color", - "source": "$btn-dark-inverse-active-border-color" + "source": "$btn-dark-inverse-active-border-color", + "$value": "transparent" }, "inverse-outline-dark": { - "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-active-border-color" + "source": "$btn-dark-inverse-outline-active-border-color", + "$value": "transparent" } } }, "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": { + "source": "$btn-dark-focus-color", + "$value": "{color.btn.text.dark}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-focus-color", + "$value": "{color.btn.text.inverse-dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-focus-color", + "$value": "inherit" + }, "inverse-outline-dark": { - "value": "{color.btn.text.inverse-outline-dark}", - "type": "color", - "source": "$btn-dark-inverse-outline-focus-color" + "source": "$btn-dark-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-dark}" } }, "border": { - "dark": { "value": "{color.btn.focus.bg.dark}", "type": "color", "source": "$btn-dark-focus-border-color" }, + "dark": { + "source": "$btn-dark-focus-border-color", + "$value": "{color.btn.focus.bg.dark}" + }, "outline-dark": { - "value": "{color.btn.border.outline-dark}", - "type": "color", - "source": "$btn-dark-outline-focus-border-color" + "source": "$btn-dark-outline-focus-border-color", + "$value": "{color.btn.border.outline-dark}" }, "inverse-dark": { - "value": "{color.white}", - "type": "color", - "source": "$btn-dark-inverse-focus-border-color" + "source": "$btn-dark-inverse-focus-border-color", + "$value": "{color.white}" }, "inverse-outline-dark": { - "value": "{color.white}", - "type": "color", - "source": "$btn-dark-inverse-outline-focus-border-color" + "source": "$btn-dark-inverse-outline-focus-border-color", + "$value": "{color.white}" } }, "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": { + "source": "$btn-dark-focus-bg", + "$value": "{color.btn.bg.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-focus-bg", + "$value": "inherit" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-dark}" + }, + "inverse-outline-dark": { + "source": "$btn-dark-inverse-outline-focus-bg", + "$value": "inherit" + } }, "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": { + "source": "$btn-dark-focus-outline-color", + "$value": "{color.theme.focus.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-focus-outline-color", + "$value": "{color.theme.focus.dark}" + }, "inverse-dark": { - "value": "{color.btn.focus.border.inverse-dark}", - "type": "color", - "source": "$btn-dark-inverse-focus-outline-color" + "source": "$btn-dark-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-dark}" }, "inverse-outline-dark": { - "value": "{color.btn.focus.border.inverse-outline-dark}", - "type": "color", - "source": "$btn-dark-inverse-outline-focus-border-color" + "source": "$btn-dark-inverse-outline-focus-border-color", + "$value": "{color.btn.focus.border.inverse-outline-dark}" } } }, "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": { + "source": "$btn-dark-disabled-color", + "$value": "{color.btn.text.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-disabled-color", + "$value": "inherit" + }, "inverse-dark": { - "value": "{color.btn.text.inverse-dark}", - "type": "color", - "source": "$btn-dark-inverse-disabled-color" + "source": "$btn-dark-inverse-disabled-color", + "$value": "{color.btn.text.inverse-dark}" }, "inverse-outline-dark": { - "value": "{color.btn.text.inverse-outline-dark}", - "type": "color", - "source": "$btn-dark-inverse-outline-disabled-color" + "source": "$btn-dark-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-dark}" } }, "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": { + "source": "$btn-dark-disabled-bg", + "$value": "{color.btn.bg.dark}" + }, + "outline-dark": { + "source": "$btn-dark-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-dark": { + "source": "$btn-dark-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { "dark": { - "value": "{color.btn.border.dark}", - "type": "color", - "source": "$btn-dark-disabled-border-color" + "source": "$btn-dark-disabled-border-color", + "$value": "{color.btn.border.dark}" }, "outline-dark": { - "value": "{color.btn.hover.text.outline-dark}", - "type": "color", - "source": "$btn-dark-outline-disabled-border-color" + "source": "$btn-dark-outline-disabled-border-color", + "$value": "{color.btn.hover.text.outline-dark}" + }, + "inverse-dark": { + "source": "$btn-dark-inverse-disabled-border-color", + "$value": "transparent" }, - "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-disabled-border-color" }, "inverse-outline-dark": { - "value": "{color.btn.focus.border.inverse-outline-dark}", - "type": "color", - "source": "$btn-dark-inverse-outline-disabled-border-color" + "source": "$btn-dark-inverse-outline-disabled-border-color", + "$value": "{color.btn.focus.border.inverse-outline-dark}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json index 5f777e9524..7e29af3414 100644 --- a/tokens/src/themes/light/components/Button/info.json +++ b/tokens/src/themes/light/components/Button/info.json @@ -1,238 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "info": { - "value": "{color.btn.bg.info}", - "type": "color", "source": "$btn-info-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.info}" + }, + "outline-info": { + "source": "$btn-info-outline-color", + "$value": "{color.info.base}" + }, + "inverse-info": { + "source": "$btn-info-inverse-color", + "$value": "{color.info.base}" }, - "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" + "source": "$btn-info-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-bg" }, - "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-bg" }, + "info": { + "source": "$btn-info-bg", + "$value": "{color.info.base}" + }, + "outline-info": { + "source": "$btn-info-outline-bg", + "$value": "inherit" + }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", "source": "$btn-info-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-info}" }, - "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-bg" } + "inverse-outline-info": { + "source": "$btn-info-inverse-outline-bg", + "$value": "inherit" + } }, "border": { - "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-border-color" }, + "info": { + "source": "$btn-info-border-color", + "$value": "{color.btn.bg.info}" + }, "outline-info": { - "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-border-color" + "source": "$btn-info-outline-border-color", + "$value": "{color.info.base}" + }, + "inverse-info": { + "source": "$btn-info-inverse-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-info-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "info": { - "value": "{color.btn.hover.bg.info}", - "type": "color", "source": "$btn-info-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.info}" }, "outline-info": { - "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-outline-hover-color" + "source": "$btn-info-outline-hover-color", + "$value": "{color.theme.hover.info}" }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", "source": "$btn-info-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-info}" }, "inverse-outline-info": { - "value": "{color.theme.hover.info}", - "type": "color", - "source": "$btn-info-inverse-outline-hover-color" + "source": "$btn-info-inverse-outline-hover-color", + "$value": "{color.theme.hover.info}" } }, "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": { + "source": "$btn-info-hover-bg", + "$value": "{color.theme.hover.info}" + }, + "outline-info": { + "source": "$btn-info-outline-hover-bg", + "$value": "{color.info.100}" + }, "inverse-info": { - "value": "{color.btn.bg.inverse-info}", - "type": "color", "source": "$btn-info-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-info}" }, "inverse-outline-info": { - "value": "{color.info.100}", "type": "color", "source": "$btn-info-inverse-outline-hover-bg" + "source": "$btn-info-inverse-outline-hover-bg", + "$value": "{color.info.100}" } }, "border": { "info": { - "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-hover-border-color" + "source": "$btn-info-hover-border-color", + "$value": "{color.theme.hover.info}" }, "outline-info": { - "value": "{color.info.900}", "type": "color", "source": "$btn-info-outline-hover-border-color" + "source": "$btn-info-outline-hover-border-color", + "$value": "{color.info.900}" + }, + "inverse-info": { + "source": "$btn-info-inverse-hover-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-info-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "info": { - "value": "{color.btn.active.bg.info}", - "type": "color", "source": "$btn-info-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.info}" }, "outline-info": { - "value": "{color.btn.active.bg.outline-info}", - "type": "color", "source": "$btn-info-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-info}" }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", "source": "$btn-info-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-info}" }, "inverse-outline-info": { - "value": "{color.btn.active.bg.inverse-outline-info}", - "type": "color", "source": "$btn-info-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-info}" + } }, "bg": { - "info": { "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-bg" }, + "info": { + "source": "$btn-info-active-bg", + "$value": "{color.theme.active.info}" + }, "outline-info": { - "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-outline-active-bg" + "source": "$btn-info-outline-active-bg", + "$value": "{color.theme.bg.info}" + }, + "inverse-info": { + "source": "$btn-info-inverse-active-bg", + "$value": "{color.gray.100}" }, - "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" + "source": "$btn-info-inverse-outline-active-bg", + "$value": "{color.theme.bg.info}" } }, "border": { "info": { - "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-border-color" + "source": "$btn-info-active-border-color", + "$value": "{color.theme.active.info}" }, "outline-info": { - "value": "{color.theme.active.info}", - "type": "color", - "source": "$btn-info-outline-active-border-color" + "source": "$btn-info-outline-active-border-color", + "$value": "{color.theme.active.info}" + }, + "inverse-info": { + "source": "$btn-info-inverse-active-border-color", + "$value": "transparent" }, - "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-active-border-color" }, "inverse-outline-info": { - "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-active-border-color" + "source": "$btn-info-inverse-outline-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-focus-color" }, + "info": { + "source": "$btn-info-focus-color", + "$value": "{color.btn.text.info}" + }, "outline-info": { - "value": "{color.btn.text.outline-info}", - "type": "color", - "source": "$btn-info-outline-focus-color" + "source": "$btn-info-outline-focus-color", + "$value": "{color.btn.text.outline-info}" }, "inverse-info": { - "value": "{color.btn.text.inverse-info}", - "type": "color", - "source": "$btn-info-inverse-focus-color" + "source": "$btn-info-inverse-focus-color", + "$value": "{color.btn.text.inverse-info}" }, "inverse-outline-info": { - "value": "{color.btn.text.inverse-outline-info}", - "type": "color", - "source": "$btn-info-inverse-outline-focus-color" + "source": "$btn-info-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-info}" } }, "border": { - "info": { "value": "{color.btn.border.info}", "type": "color", "source": "$btn-info-focus-border-color" }, + "info": { + "source": "$btn-info-focus-border-color", + "$value": "{color.btn.border.info}" + }, "outline-info": { - "value": "{color.btn.border.outline-info}", - "type": "color", - "source": "$btn-info-outline-focus-border-color" + "source": "$btn-info-outline-focus-border-color", + "$value": "{color.btn.border.outline-info}" + }, + "inverse-info": { + "source": "$btn-info-inverse-focus-border-color", + "$value": "{color.white}" }, - "inverse-info": { "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-focus-border-color" }, "inverse-outline-info": { - "value": "{color.btn.border.inverse-outline-info}", - "type": "color", - "source": "$btn-info-inverse-outline-focus-border-color" + "source": "$btn-info-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-info}" } }, "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": { + "source": "$btn-info-focus-bg", + "$value": "{color.btn.bg.info}" + }, + "outline-info": { + "source": "$btn-info-outline-focus-bg", + "$value": "inherit" + }, + "inverse-info": { + "source": "$btn-info-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-info}" + }, + "inverse-outline-info": { + "source": "$btn-info-inverse-outline-focus-bg", + "$value": "inherit" + } }, "outline": { - "info": { "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-focus-outline-color" }, + "info": { + "source": "$btn-info-focus-outline-color", + "$value": "{color.theme.focus.info}" + }, "outline-info": { - "value": "{color.theme.focus.info}", - "type": "color", - "source": "$btn-info-outline-focus-outline-color" + "source": "$btn-info-outline-focus-outline-color", + "$value": "{color.theme.focus.info}" }, "inverse-info": { - "value": "{color.btn.focus.border.inverse-info}", - "type": "color", - "source": "$btn-info-inverse-focus-outline-color" + "source": "$btn-info-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-info}" }, "inverse-outline-info": { - "value": "{color.btn.focus.border.inverse-outline-info}", - "type": "color", - "source": "$btn-info-inverse-outline-focus-outline-color" + "source": "$btn-info-inverse-outline-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-outline-info}" } } }, "disabled": { "text": { - "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-disabled-color" }, + "info": { + "source": "$btn-info-disabled-color", + "$value": "{color.btn.text.info}" + }, "outline-info": { - "value": "{color.btn.text.outline-info}", - "type": "color", - "source": "$btn-info-outline-disabled-color" + "source": "$btn-info-outline-disabled-color", + "$value": "{color.btn.text.outline-info}" }, "inverse-info": { - "value": "{color.info.base}", - "type": "color", - "source": "$btn-info-inverse-disabled-color" + "source": "$btn-info-inverse-disabled-color", + "$value": "{color.info.base}" }, "inverse-outline-info": { - "value": "{color.btn.text.inverse-outline-info}", - "type": "color", - "source": "$btn-info-inverse-outline-disabled-color" + "source": "$btn-info-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-info}" } }, "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": { + "source": "$btn-info-disabled-bg", + "$value": "{color.btn.bg.info}" + }, + "outline-info": { + "source": "$btn-info-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-info": { + "source": "$btn-info-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-info": { + "source": "$btn-info-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-border-color" }, + "info": { + "source": "$btn-info-disabled-border-color", + "$value": "{color.btn.bg.info}" + }, "outline-info": { - "value": "{color.btn.border.outline-info}", - "type": "color", - "source": "$btn-info-outline-disabled-border-color" + "source": "$btn-info-outline-disabled-border-color", + "$value": "{color.btn.border.outline-info}" + }, + "inverse-info": { + "source": "$btn-info-inverse-disabled-border-color", + "$value": "transparent" }, - "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-disabled-border-color" }, "inverse-outline-info": { - "value": "{color.btn.border.inverse-outline-info}", - "type": "color", - "source": "$btn-info-inverse-outline-disabled-border-color" + "source": "$btn-info-inverse-outline-disabled-border-color", + "$value": "{color.btn.border.inverse-outline-info}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json index 83c4abc465..c085bb0bc2 100644 --- a/tokens/src/themes/light/components/Button/light.json +++ b/tokens/src/themes/light/components/Button/light.json @@ -1,236 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "light": { - "value": "{color.btn.bg.light}", - "type": "color", "source": "$btn-light-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.light}" + }, + "outline-light": { + "source": "$btn-light-outline-color", + "$value": "{color.light.base}" + }, + "inverse-light": { + "source": "$btn-light-inverse-color", + "$value": "{color.light.base}" }, - "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" + "source": "$btn-light-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-bg" }, + "light": { + "source": "$btn-light-bg", + "$value": "{color.light.base}" + }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", "source": "$btn-light-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-light}" + }, + "outline-light": { + "source": "$btn-light-outline-bg", + "$value": "inherit" }, - "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": { + "source": "$btn-light-inverse-outline-bg", + "$value": "inherit" + } }, "border": { - "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-border-color" }, + "light": { + "source": "$btn-light-border-color", + "$value": "{color.btn.bg.light}" + }, "outline-light": { - "value": "{color.light.base}", "type": "color", "source": "$btn-light-outline-border-color" + "source": "$btn-light-outline-border-color", + "$value": "{color.light.base}" + }, + "inverse-light": { + "source": "$btn-light-inverse-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-light-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "light": { - "value": "{color.btn.hover.bg.light}", - "type": "color", "source": "$btn-light-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.light}" }, "outline-light": { - "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-outline-hover-color" + "source": "$btn-light-outline-hover-color", + "$value": "{color.theme.hover.light}" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", "source": "$btn-light-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-light}" }, "inverse-outline-light": { - "value": "{color.theme.hover.light}", - "type": "color", - "source": "$btn-light-inverse-outline-hover-color" + "source": "$btn-light-inverse-outline-hover-color", + "$value": "{color.theme.hover.light}" } }, "bg": { - "light": { "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-hover-bg" }, + "light": { + "source": "$btn-light-hover-bg", + "$value": "{color.theme.hover.light}" + }, "outline-light": { - "value": "{color.light.100}", "type": "color", "source": "$btn-light-outline-hover-bg" + "source": "$btn-light-outline-hover-bg", + "$value": "{color.light.100}" }, "inverse-light": { - "value": "{color.btn.bg.inverse-light}", - "type": "color", "source": "$btn-light-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-light}" }, "inverse-outline-light": { - "value": "{color.light.100}", "type": "color", "source": "$btn-light-inverse-outline-hover-bg" + "source": "$btn-light-inverse-outline-hover-bg", + "$value": "{color.light.100}" } }, "border": { "light": { - "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-hover-border-color" + "source": "$btn-light-hover-border-color", + "$value": "{color.theme.hover.light}" }, "outline-light": { - "value": "{color.light.900}", "type": "color", "source": "$btn-light-outline-hover-border-color" + "source": "$btn-light-outline-hover-border-color", + "$value": "{color.light.900}" + }, + "inverse-light": { + "source": "$btn-light-inverse-hover-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-light-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "light": { - "value": "{color.btn.active.bg.light}", - "type": "color", "source": "$btn-light-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.light}" }, "outline-light": { - "value": "{color.btn.active.bg.outline-light}", - "type": "color", "source": "$btn-light-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-light}" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", "source": "$btn-light-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-light}" }, "inverse-outline-light": { - "value": "{color.btn.active.bg.inverse-outline-light}", - "type": "color", "source": "$btn-light-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-light}" + } }, "bg": { - "light": { "value": "{color.theme.active.light}", "type": "color", "source": "$btn-light-active-bg" }, + "light": { + "source": "$btn-light-active-bg", + "$value": "{color.theme.active.light}" + }, "outline-light": { - "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-outline-active-bg" + "source": "$btn-light-outline-active-bg", + "$value": "{color.theme.bg.light}" + }, + "inverse-light": { + "source": "$btn-light-inverse-active-bg", + "$value": "{color.gray.100}" }, - "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" + "source": "$btn-light-inverse-outline-active-bg", + "$value": "{color.theme.bg.light}" } }, "border": { "light": { - "value": "{color.theme.active.light}", "type": "color", "source": "$btn-light-active-border-color" + "source": "$btn-light-active-border-color", + "$value": "{color.theme.active.light}" }, "outline-light": { - "value": "{color.theme.active.light}", - "type": "color", - "source": "$btn-light-outline-active-border-color" + "source": "$btn-light-outline-active-border-color", + "$value": "{color.theme.active.light}" + }, + "inverse-light": { + "source": "$btn-light-inverse-active-border-color", + "$value": "inherit" }, - "inverse-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-active-border-color" }, "inverse-outline-light": { - "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-active-border-color" + "source": "$btn-light-inverse-outline-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-focus-color" }, + "light": { + "source": "$btn-light-focus-color", + "$value": "{color.btn.text.light}" + }, "outline-light": { - "value": "{color.btn.text.outline-light}", - "type": "color", - "source": "$btn-light-outline-focus-color" + "source": "$btn-light-outline-focus-color", + "$value": "{color.btn.text.outline-light}" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", - "source": "$btn-light-inverse-focus-color" + "source": "$btn-light-inverse-focus-color", + "$value": "{color.btn.text.inverse-light}" }, "inverse-outline-light": { - "value": "{color.btn.text.inverse-outline-light}", - "type": "color", - "source": "$btn-light-inverse-outline-focus-color" + "source": "$btn-light-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-light}" } }, "border": { - "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-focus-border-color" }, + "light": { + "source": "$btn-light-focus-border-color", + "$value": "{color.btn.border.light}" + }, "outline-light": { - "value": "{color.btn.border.outline-light}", - "type": "color", - "source": "$btn-light-outline-focus-border-color" + "source": "$btn-light-outline-focus-border-color", + "$value": "{color.btn.border.outline-light}" }, "inverse-light": { - "value": "{color.btn.border.inverse-light}", - "type": "color", - "source": "$btn-light-inverse-focus-border-color" + "source": "$btn-light-inverse-focus-border-color", + "$value": "{color.btn.border.inverse-light}" }, "inverse-outline-light": { - "value": "{color.btn.border.inverse-outline-light}", - "type": "color", - "source": "$btn-light-inverse-outline-focus-border-color" + "source": "$btn-light-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-light}" } }, "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": { + "source": "$btn-light-focus-bg", + "$value": "{color.btn.bg.light}" + }, + "outline-light": { + "source": "$btn-light-outline-focus-bg", + "$value": "transparent" + }, + "inverse-light": { + "source": "$btn-light-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-light}" + }, + "inverse-outline-light": { + "source": "$btn-light-inverse-outline-focus-bg", + "$value": "inherit" + } }, "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": { + "source": "$btn-light-focus-outline-color", + "$value": "{color.primary.300}" + }, + "outline-light": { + "source": "$btn-light-outline-focus-outline-color", + "$value": "{color.theme.focus.light}" + }, + "inverse-light": { + "source": "$btn-light-inverse-focus-outline-color", + "$value": "{color.white}" + }, "inverse-outline-light": { - "value": "{color.btn.focus.border.inverse-outline-light}", - "type": "color", - "source": "$btn-light-inverse-outline-focus-outline-color" + "source": "$btn-light-inverse-outline-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-outline-light}" } } }, "disabled": { "text": { - "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-disabled-color" }, + "light": { + "source": "$btn-light-disabled-color", + "$value": "{color.btn.text.light}" + }, "outline-light": { - "value": "{color.btn.hover.text.outline-light}", - "type": "color", - "source": "$btn-light-outline-disabled-color" + "source": "$btn-light-outline-disabled-color", + "$value": "{color.btn.hover.text.outline-light}" }, "inverse-light": { - "value": "{color.btn.text.inverse-light}", - "type": "color", - "source": "$btn-light-inverse-disabled-color" + "source": "$btn-light-inverse-disabled-color", + "$value": "{color.btn.text.inverse-light}" }, "inverse-outline-light": { - "value": "{color.btn.text.inverse-outline-light}", - "type": "color", - "source": "$btn-light-inverse-outline-disabled-color" + "source": "$btn-light-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-light}" } }, "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": { + "source": "$btn-light-disabled-bg", + "$value": "{color.btn.bg.light}" + }, + "outline-light": { + "source": "$btn-light-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-light": { + "source": "$btn-light-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-light": { + "source": "$btn-light-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-disabled-border-color" }, + "light": { + "source": "$btn-light-disabled-border-color", + "$value": "{color.btn.border.light}" + }, "outline-light": { - "value": "{color.btn.hover.text.outline-light}", - "type": "color", - "source": "$btn-light-outline-disabled-border-color" + "source": "$btn-light-outline-disabled-border-color", + "$value": "{color.btn.hover.text.outline-light}" + }, + "inverse-light": { + "source": "$btn-light-inverse-disabled-border-color", + "$value": "transparent" }, - "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-disabled-border-color" }, "inverse-outline-light": { - "value": "{color.btn.border.inverse-outline-light}", - "type": "color", - "source": "$btn-light-inverse-outline-disabled-border-color" + "source": "$btn-light-inverse-outline-disabled-border-color", + "$value": "{color.btn.border.inverse-outline-light}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json index edf5c1f037..2fd9356059 100644 --- a/tokens/src/themes/light/components/Button/primary.json +++ b/tokens/src/themes/light/components/Button/primary.json @@ -1,250 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "primary": { - "value": "{color.btn.bg.primary}", - "type": "color", "source": "$btn-primary-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.primary}" }, "outline-primary": { - "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-outline-color" + "source": "$btn-primary-outline-color", + "$value": "{color.primary.base}" }, "inverse-primary": { - "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-inverse-color" + "source": "$btn-primary-inverse-color", + "$value": "{color.primary.base}" }, "inverse-outline-primary": { - "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-color" + "source": "$btn-primary-inverse-outline-color", + "$value": "{color.white}" } }, "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": { + "source": "$btn-primary-bg", + "$value": "{color.primary.base}" + }, + "outline-primary": { + "source": "$btn-primary-outline-bg", + "$value": "transparent" + }, + "inverse-outline-primary": { + "source": "$btn-primary-inverse-outline-bg", + "$value": "transparent" + }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", "source": "$btn-primary-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-primary}" } }, "border": { - "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-border-color" }, + "primary": { + "source": "$btn-primary-border-color", + "$value": "{color.btn.bg.primary}" + }, "outline-primary": { - "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-outline-border-color" + "source": "$btn-primary-outline-border-color", + "$value": "{color.primary.base}" }, "inverse-outline-primary": { - "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-border-color" + "source": "$btn-primary-inverse-outline-border-color", + "$value": "{color.white}" }, - "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-border-color" } + "inverse-primary": { + "source": "$btn-primary-inverse-border-color", + "$value": "transparent" + } }, "hover": { "text": { "primary": { - "value": "{color.btn.hover.bg.primary}", - "type": "color", "source": "$btn-primary-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.primary}" }, "outline-primary": { - "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-outline-hover-color" + "source": "$btn-primary-outline-hover-color", + "$value": "{color.theme.hover.primary}" }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", "source": "$btn-primary-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-primary}" }, "inverse-outline-primary": { - "value": "{color.theme.hover.primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-hover-color" + "source": "$btn-primary-inverse-outline-hover-color", + "$value": "{color.theme.hover.primary}" } }, "bg": { "primary": { - "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-hover-bg" + "source": "$btn-primary-hover-bg", + "$value": "{color.theme.hover.primary}" }, "outline-primary": { - "value": "{color.primary.100}", "type": "color", "source": "$btn-primary-outline-hover-bg" + "source": "$btn-primary-outline-hover-bg", + "$value": "{color.primary.100}" }, "inverse-primary": { - "value": "{color.btn.bg.inverse-primary}", - "type": "color", "source": "$btn-primary-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-primary}" }, "inverse-outline-primary": { - "value": "{color.primary.100}", "type": "color", "source": "$btn-primary-inverse-outline-hover-bg" + "source": "$btn-primary-inverse-outline-hover-bg", + "$value": "{color.primary.100}" } }, "border": { "primary": { - "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-hover-border-color" + "source": "$btn-primary-hover-border-color", + "$value": "{color.theme.hover.primary}" }, "outline-primary": { - "value": "{color.primary.900}", "type": "color", "source": "$btn-primary-outline-hover-border-color" + "source": "$btn-primary-outline-hover-border-color", + "$value": "{color.primary.900}" }, "inverse-outline-primary": { - "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-hover-border-color" + "source": "$btn-primary-inverse-outline-hover-border-color", + "$value": "transparent" }, - "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-hover-border-color" } + "inverse-primary": { + "source": "$btn-primary-inverse-hover-border-color", + "$value": "transparent" + } } }, "active": { "text": { "primary": { - "value": "{color.btn.active.bg.primary}", - "type": "color", "source": "$btn-primary-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.primary}" }, "outline-primary": { - "value": "{color.btn.active.bg.outline-primary}", - "type": "color", "source": "$btn-primary-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-primary}" }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", "source": "$btn-primary-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-primary}" }, "inverse-outline-primary": { - "value": "{color.btn.active.bg.inverse-outline-primary}", - "type": "color", "source": "$btn-primary-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-primary}" + } }, "bg": { "primary": { - "value": "{color.theme.active.primary}", "type": "color", "source": "$btn-primary-active-bg" + "source": "$btn-primary-active-bg", + "$value": "{color.theme.active.primary}" }, "outline-primary": { - "value": "{color.theme.bg.primary}", "type": "color", "source": "$btn-primary-outline-active-bg" + "source": "$btn-primary-outline-active-bg", + "$value": "{color.theme.bg.primary}" }, "inverse-outline-primary": { - "value": "{color.theme.bg.primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-active-bg" + "source": "$btn-primary-inverse-outline-active-bg", + "$value": "{color.theme.bg.primary}" }, - "inverse-primary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-primary-inverse-active-bg" } + "inverse-primary": { + "source": "$btn-primary-inverse-active-bg", + "$value": "{color.gray.100}" + } }, "border": { "primary": { - "value": "{color.theme.active.primary}", - "type": "color", - "source": "$btn-primary-active-border-color" + "source": "$btn-primary-active-border-color", + "$value": "{color.theme.active.primary}" }, "outline-primary": { - "value": "{color.theme.active.primary}", - "type": "color", - "source": "$btn-primary-outline-active-border-color" + "source": "$btn-primary-outline-active-border-color", + "$value": "{color.theme.active.primary}" }, "inverse-outline-primary": { - "value": "transparent", - "type": "color", - "source": "$btn-primary-inverse-outline-active-border-color" + "source": "$btn-primary-inverse-outline-active-border-color", + "$value": "transparent" }, - "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-active-border-color" } + "inverse-primary": { + "source": "$btn-primary-inverse-active-border-color", + "$value": "transparent" + } } }, "focus": { "text": { - "primary": { "value": "{color.btn.text.primary}", "type": "color", "source": "$btn-primary-focus-color" }, + "primary": { + "source": "$btn-primary-focus-color", + "$value": "{color.btn.text.primary}" + }, "outline-primary": { - "value": "{color.btn.text.outline-primary}", - "type": "color", - "source": "$btn-primary-outline-focus-color" + "source": "$btn-primary-outline-focus-color", + "$value": "{color.btn.text.outline-primary}" }, "inverse-primary": { - "value": "{color.btn.text.inverse-primary}", - "type": "color", - "source": "$btn-primary-inverse-focus-color" + "source": "$btn-primary-inverse-focus-color", + "$value": "{color.btn.text.inverse-primary}" }, "inverse-outline-primary": { - "value": "{color.btn.text.inverse-outline-primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-focus-color" + "source": "$btn-primary-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-primary}" } }, "border": { - "primary": { "value": "{color.btn.border.primary}", "type": "color", "source": "$btn-primary-focus-border-color" }, + "primary": { + "source": "$btn-primary-focus-border-color", + "$value": "{color.btn.border.primary}" + }, "outline-primary": { - "value": "{color.btn.border.outline-primary}", - "type": "color", - "source": "$btn-primary-outline-focus-border-color" + "source": "$btn-primary-outline-focus-border-color", + "$value": "{color.btn.border.outline-primary}" + }, + "inverse-primary": { + "source": "$btn-primary-inverse-focus-border-color", + "$value": "{color.white}" }, - "inverse-primary": { "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-focus-border-color" }, "inverse-outline-primary": { - "value": "{color.btn.border.inverse-outline-primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-focus-border-color" + "source": "$btn-primary-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-primary}" } }, "outline": { - "primary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-primary-focus-focus-outline-color" }, + "primary": { + "source": "$btn-primary-focus-focus-outline-color", + "$value": "{color.theme.focus.primary}" + }, "outline-primary": { - "value": "{color.theme.focus.primary}", - "type": "color", - "source": "$btn-primary-outline-focus-outline-color" + "source": "$btn-primary-outline-focus-outline-color", + "$value": "{color.theme.focus.primary}" }, "inverse-primary": { - "value": "{color.btn.focus.border.inverse-primary}", - "type": "color", - "source": "$btn-primary-inverse-focus-outline-color" + "source": "$btn-primary-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-primary}" }, "inverse-outline-primary": { - "value": "{color.btn.border.inverse-outline-primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-focus-outline-color" + "source": "$btn-primary-inverse-outline-focus-outline-color", + "$value": "{color.btn.border.inverse-outline-primary}" } }, "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": { + "source": "$btn-primary-focus-bg", + "$value": "{color.btn.bg.primary}" + }, + "outline-primary": { + "source": "$btn-primary-outline-focus-bg", + "$value": "inherit" + }, + "inverse-primary": { + "source": "$btn-primary-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-primary}" + }, + "inverse-outline-primary": { + "source": "$btn-primary-inverse-outline-focus-bg", + "$value": "inherit" + } } }, "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": { + "source": "$btn-primary-disabled-color", + "$value": "{color.btn.text.primary}" + }, + "inverse-primary": { + "source": "$btn-primary-inverse-disabled-color", + "$value": "{color.primary.500}" + }, "outline-primary": { - "value": "{color.btn.hover.text.outline-primary}", - "type": "color", - "source": "$btn-primary-outline-disabled-color" + "source": "$btn-primary-outline-disabled-color", + "$value": "{color.btn.hover.text.outline-primary}" }, "inverse-outline-primary": { - "value": "{color.btn.text.inverse-outline-primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-disabled-color" + "source": "$btn-primary-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-primary}" } }, "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": { + "source": "$btn-primary-disabled-bg", + "$value": "{color.btn.bg.primary}" + }, + "inverse-primary": { + "source": "$btn-primary-inverse-disabled-bg", + "$value": "{color.white}" + }, + "outline-primary": { + "source": "$btn-primary-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-primary": { + "source": "$btn-primary-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "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": { + "source": "$btn-primary-disabled-border-color", + "$value": "{color.btn.border.primary}" + }, + "inverse-primary": { + "source": "$btn-primary-inverse-disabled-border-color", + "$value": "transparent" + }, "outline-primary": { - "value": "{color.btn.hover.text.outline-primary}", - "type": "color", - "source": "$btn-primary-outline-disabled-border-color" + "source": "$btn-primary-outline-disabled-border-color", + "$value": "{color.btn.hover.text.outline-primary}" }, "inverse-outline-primary": { - "value": "{color.btn.text.inverse-outline-primary}", - "type": "color", - "source": "$btn-primary-inverse-outline-disabled-border-color" + "source": "$btn-primary-inverse-outline-disabled-border-color", + "$value": "{color.btn.text.inverse-outline-primary}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json index c2b6c680d3..abd813854c 100644 --- a/tokens/src/themes/light/components/Button/secondary.json +++ b/tokens/src/themes/light/components/Button/secondary.json @@ -1,278 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "secondary": { - "value": "{color.btn.bg.secondary}", - "type": "color", "source": "$btn-secondary-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.secondary}" }, "outline-secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-outline-color" + "source": "$btn-secondary-outline-color", + "$value": "{color.secondary.base}" }, "inverse-secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-inverse-color" + "source": "$btn-secondary-inverse-color", + "$value": "{color.secondary.base}" }, "inverse-outline-secondary": { - "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-color" + "source": "$btn-secondary-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { "secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-bg" + "source": "$btn-secondary-bg", + "$value": "{color.secondary.base}" + }, + "outline-secondary": { + "source": "$btn-secondary-outline-bg", + "$value": "inherit" + }, + "inverse-outline-secondary": { + "source": "$btn-secondary-inverse-outline-bg", + "$value": "inherit" }, - "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" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-secondary}" } }, "border": { "secondary": { - "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-border-color" + "source": "$btn-secondary-border-color", + "$value": "{color.btn.bg.secondary}" }, "outline-secondary": { - "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-outline-border-color" + "source": "$btn-secondary-outline-border-color", + "$value": "{color.secondary.base}" }, "inverse-outline-secondary": { - "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-border-color" + "source": "$btn-secondary-inverse-outline-border-color", + "$value": "{color.white}" }, - "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-border-color" } + "inverse-secondary": { + "source": "$btn-secondary-inverse-border-color", + "$value": "transparent" + } }, "hover": { "text": { "secondary": { - "value": "{color.btn.hover.bg.secondary}", - "type": "color", "source": "$btn-secondary-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.secondary}" }, "outline-secondary": { - "value": "{color.theme.hover.secondary}", - "type": "color", - "source": "$btn-secondary-outline-hover-color" + "source": "$btn-secondary-outline-hover-color", + "$value": "{color.theme.hover.secondary}" }, "inverse-secondary": { - "value": "{color.btn.text.inverse-secondary}", - "type": "color", "source": "$btn-secondary-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-secondary}" }, "inverse-outline-secondary": { - "value": "{color.theme.hover.secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-hover-color" + "source": "$btn-secondary-inverse-outline-hover-color", + "$value": "{color.theme.hover.secondary}" } }, "bg": { "secondary": { - "value": "{color.theme.hover.secondary}", "type": "color", "source": "$btn-secondary-hover-bg" + "source": "$btn-secondary-hover-bg", + "$value": "{color.theme.hover.secondary}" }, "outline-secondary": { - "value": "{color.secondary.100}", "type": "color", "source": "$btn-secondary-outline-hover-bg" + "source": "$btn-secondary-outline-hover-bg", + "$value": "{color.secondary.100}" }, "inverse-secondary": { - "value": "{color.btn.bg.inverse-secondary}", - "type": "color", "source": "$btn-secondary-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-secondary}" }, "inverse-outline-secondary": { - "value": "{color.secondary.100}", - "type": "color", - "source": "$btn-secondary-inverse-outline-hover-bg" + "source": "$btn-secondary-inverse-outline-hover-bg", + "$value": "{color.secondary.100}" } }, "border": { "secondary": { - "value": "{color.theme.hover.secondary}", - "type": "color", - "source": "$btn-secondary-hover-border-color" + "source": "$btn-secondary-hover-border-color", + "$value": "{color.theme.hover.secondary}" }, "outline-secondary": { - "value": "{color.secondary.900}", - "type": "color", - "source": "$btn-secondary-outline-hover-border-color" + "source": "$btn-secondary-outline-hover-border-color", + "$value": "{color.secondary.900}" }, "inverse-outline-secondary": { - "value": "transparent", - "type": "color", - "source": "$btn-secondary-inverse-outline-hover-border-color" + "source": "$btn-secondary-inverse-outline-hover-border-color", + "$value": "transparent" }, - "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-hover-border-color" } + "inverse-secondary": { + "source": "$btn-secondary-inverse-hover-border-color", + "$value": "transparent" + } } }, "active": { "text": { "secondary": { - "value": "{color.btn.active.bg.secondary}", - "type": "color", "source": "$btn-secondary-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.secondary}" }, "outline-secondary": { - "value": "{color.btn.active.bg.outline-secondary}", - "type": "color", "source": "$btn-secondary-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-secondary}" }, "inverse-secondary": { - "value": "{color.btn.text.inverse-secondary}", - "type": "color", "source": "$btn-secondary-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-secondary}" }, "inverse-outline-secondary": { - "value": "{color.btn.active.bg.inverse-outline-secondary}", - "type": "color", "source": "$btn-secondary-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-secondary}" + } }, "bg": { "secondary": { - "value": "{color.theme.active.secondary}", "type": "color", "source": "$btn-secondary-active-bg" + "source": "$btn-secondary-active-bg", + "$value": "{color.theme.active.secondary}" }, "outline-secondary": { - "value": "{color.theme.bg.secondary}", "type": "color", "source": "$btn-secondary-outline-active-bg" + "source": "$btn-secondary-outline-active-bg", + "$value": "{color.theme.bg.secondary}" }, "inverse-outline-secondary": { - "value": "{color.theme.bg.secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-active-bg" + "source": "$btn-secondary-inverse-outline-active-bg", + "$value": "{color.theme.bg.secondary}" }, - "inverse-secondary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-secondary-inverse-active-bg" } + "inverse-secondary": { + "source": "$btn-secondary-inverse-active-bg", + "$value": "{color.gray.100}" + } }, "border": { "secondary": { - "value": "{color.theme.active.secondary}", - "type": "color", - "source": "$btn-secondary-active-border-color" + "source": "$btn-secondary-active-border-color", + "$value": "{color.theme.active.secondary}" }, "outline-secondary": { - "value": "{color.theme.active.secondary}", - "type": "color", - "source": "$btn-secondary-outline-active-border-color" + "source": "$btn-secondary-outline-active-border-color", + "$value": "{color.theme.active.secondary}" }, "inverse-outline-secondary": { - "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-outline-active-border-color" + "source": "$btn-secondary-inverse-outline-active-border-color", + "$value": "transparent" }, - "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-active-border-color" } + "inverse-secondary": { + "source": "$btn-secondary-inverse-active-border-color", + "$value": "transparent" + } } }, "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": { + "source": "$btn-secondary-focus-color", + "$value": "{color.btn.text.secondary}" + }, + "inverse-secondary": { + "source": "$btn-secondary-inverse-focus-color", + "$value": "inherit" + }, "outline-secondary": { - "value": "{color.btn.text.outline-secondary}", - "type": "color", - "source": "$btn-secondary-outline-focus-color" + "source": "$btn-secondary-outline-focus-color", + "$value": "{color.btn.text.outline-secondary}" }, "inverse-outline-secondary": { - "value": "{color.btn.text.inverse-outline-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-focus-color" + "source": "$btn-secondary-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-secondary}" } }, "border": { "secondary": { - "value": "{color.btn.bg.secondary}", - "type": "color", - "source": "$btn-secondary-focus-border-color" + "source": "$btn-secondary-focus-border-color", + "$value": "{color.btn.bg.secondary}" }, "outline-secondary": { - "value": "{color.btn.border.outline-secondary}", - "type": "color", - "source": "$btn-secondary-outline-focus-border-color" + "source": "$btn-secondary-outline-focus-border-color", + "$value": "{color.btn.border.outline-secondary}" }, "inverse-secondary": { - "value": "{color.white}", - "type": "color", - "source": "$btn-secondary-inverse-focus-border-color" + "source": "$btn-secondary-inverse-focus-border-color", + "$value": "{color.white}" }, "inverse-outline-secondary": { - "value": "{color.white}", - "type": "color", - "source": "$btn-secondary-inverse-outline-focus-border-color" + "source": "$btn-secondary-inverse-outline-focus-border-color", + "$value": "{color.white}" } }, "outline": { "secondary": { - "value": "{color.theme.focus.secondary}", - "type": "color", - "source": "$btn-secondary-focus-outline-color" + "source": "$btn-secondary-focus-outline-color", + "$value": "{color.theme.focus.secondary}" }, "outline-secondary": { - "value": "{color.theme.focus.secondary}", - "type": "color", - "source": "$btn-secondary-outline-focus-outline-color" + "source": "$btn-secondary-outline-focus-outline-color", + "$value": "{color.theme.focus.secondary}" }, "inverse-secondary": { - "value": "{color.white}", - "type": "color", - "source": "$btn-secondary-inverse-focus-outline-color" + "source": "$btn-secondary-inverse-focus-outline-color", + "$value": "{color.white}" }, "inverse-outline-secondary": { - "value": "{color.btn.border.inverse-outline-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-focus-outline-color" + "source": "$btn-secondary-inverse-outline-focus-outline-color", + "$value": "{color.btn.border.inverse-outline-secondary}" } }, "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": { + "source": "$btn-secondary-focus-bg", + "$value": "{color.btn.bg.secondary}" + }, + "outline-secondary": { + "source": "$btn-secondary-outline-focus-bg", + "$value": "transparent" + }, "inverse-secondary": { - "value": "{color.btn.bg.inverse-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-focus-bg" + "source": "$btn-secondary-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-secondary}" }, - "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-focus-bg" } + "inverse-outline-secondary": { + "source": "$btn-secondary-inverse-outline-focus-bg", + "$value": "inherit" + } } }, "disabled": { "text": { - "secondary": { "value": "{color.btn.text.secondary}", "type": "color", "source": "$btn-secondary-disabled-color" }, + "secondary": { + "source": "$btn-secondary-disabled-color", + "$value": "{color.btn.text.secondary}" + }, "outline-secondary": { - "value": "inherit", - "type": "color", - "source": "$btn-secondary-outline-disabled-color" + "source": "$btn-secondary-outline-disabled-color", + "$value": "inherit" + }, + "inverse-secondary": { + "source": "$btn-secondary-inverse-disabled-color", + "$value": "inherit" }, - "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-disabled-color" }, "inverse-outline-secondary": { - "value": "{color.btn.text.inverse-outline-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-disabled-color" + "source": "$btn-secondary-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-secondary}" } }, "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": { + "source": "$btn-secondary-disabled-bg", + "$value": "{color.btn.bg.secondary}" + }, + "outline-secondary": { + "source": "$btn-secondary-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-secondary": { + "source": "$btn-secondary-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-secondary": { + "source": "$btn-secondary-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-disabled-border-color" }, + "secondary": { + "source": "$btn-secondary-disabled-border-color", + "$value": "inherit" + }, "outline-secondary": { - "value": "{color.secondary.base}", - "type": "color", - "source": "$btn-secondary-outline-disabled-border-color" + "source": "$btn-secondary-outline-disabled-border-color", + "$value": "{color.secondary.base}" }, "inverse-secondary": { - "value": "{color.btn.border.inverse-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-disabled-border-color" + "source": "$btn-secondary-inverse-disabled-border-color", + "$value": "{color.btn.border.inverse-secondary}" }, "inverse-outline-secondary": { - "value": "{color.btn.border.inverse-outline-secondary}", - "type": "color", - "source": "$btn-secondary-inverse-outline-disabled-border-color" + "source": "$btn-secondary-inverse-outline-disabled-border-color", + "$value": "{color.btn.border.inverse-outline-secondary}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json index 4b68d59462..34bb30e6d0 100644 --- a/tokens/src/themes/light/components/Button/success.json +++ b/tokens/src/themes/light/components/Button/success.json @@ -1,253 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "success": { - "value": "{color.btn.bg.success}", - "type": "color", "source": "$btn-success-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.success}" }, "outline-success": { - "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-color" + "source": "$btn-success-outline-color", + "$value": "{color.success.base}" }, "inverse-success": { - "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-color" + "source": "$btn-success-inverse-color", + "$value": "{color.success.base}" }, "inverse-outline-success": { - "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-color" + "source": "$btn-success-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-bg" }, - "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-bg" }, + "success": { + "source": "$btn-success-bg", + "$value": "{color.success.base}" + }, + "outline-success": { + "source": "$btn-success-outline-bg", + "$value": "inherit" + }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", "source": "$btn-success-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-success}" }, - "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-bg" } + "inverse-outline-success": { + "source": "$btn-success-inverse-outline-bg", + "$value": "inherit" + } }, "border": { - "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-border-color" }, + "success": { + "source": "$btn-success-border-color", + "$value": "{color.btn.bg.success}" + }, "outline-success": { - "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-border-color" + "source": "$btn-success-outline-border-color", + "$value": "{color.success.base}" + }, + "inverse-success": { + "source": "$btn-success-inverse-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-success-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "success": { - "value": "{color.btn.hover.bg.success}", - "type": "color", "source": "$btn-success-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.success}" }, "outline-success": { - "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-outline-hover-color" + "source": "$btn-success-outline-hover-color", + "$value": "{color.theme.hover.success}" }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", "source": "$btn-success-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-success}" }, "inverse-outline-success": { - "value": "{color.theme.hover.success}", - "type": "color", - "source": "$btn-success-inverse-outline-hover-color" + "source": "$btn-success-inverse-outline-hover-color", + "$value": "{color.theme.hover.success}" } }, "bg": { "success": { - "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-bg" + "source": "$btn-success-hover-bg", + "$value": "{color.theme.hover.success}" }, "outline-success": { - "value": "{color.success.100}", "type": "color", "source": "$btn-success-outline-hover-bg" + "source": "$btn-success-outline-hover-bg", + "$value": "{color.success.100}" }, "inverse-success": { - "value": "{color.btn.bg.inverse-success}", - "type": "color", "source": "$btn-success-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-success}" }, "inverse-outline-success": { - "value": "{color.success.100}", "type": "color", "source": "$btn-success-inverse-outline-hover-bg" + "source": "$btn-success-inverse-outline-hover-bg", + "$value": "{color.success.100}" } }, "border": { "success": { - "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-border-color" + "source": "$btn-success-hover-border-color", + "$value": "{color.theme.hover.success}" }, "outline-success": { - "value": "{color.success.900}", "type": "color", "source": "$btn-success-outline-hover-border-color" + "source": "$btn-success-outline-hover-border-color", + "$value": "{color.success.900}" + }, + "inverse-success": { + "source": "$btn-success-inverse-hover-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-success-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "success": { - "value": "{color.btn.active.bg.success}", - "type": "color", "source": "$btn-success-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.success}" }, "outline-success": { - "value": "{color.btn.active.bg.outline-success}", - "type": "color", "source": "$btn-success-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-success}" }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", "source": "$btn-success-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-success}" }, "inverse-outline-success": { - "value": "{color.btn.active.bg.inverse-outline-success}", - "type": "color", "source": "$btn-success-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-success}" + } }, "bg": { "success": { - "value": "{color.theme.active.success}", "type": "color", "source": "$btn-success-active-bg" + "source": "$btn-success-active-bg", + "$value": "{color.theme.active.success}" }, "outline-success": { - "value": "{color.theme.bg.success}", "type": "color", "source": "$btn-success-outline-active-bg" + "source": "$btn-success-outline-active-bg", + "$value": "{color.theme.bg.success}" + }, + "inverse-success": { + "source": "$btn-success-inverse-active-bg", + "$value": "{color.gray.100}" }, - "inverse-success": { "value": "{color.gray.100}", "type": "color", "source": "$btn-success-inverse-active-bg" }, "inverse-outline-success": { - "value": "{color.theme.bg.success}", - "type": "color", - "source": "$btn-success-inverse-outline-active-bg" + "source": "$btn-success-inverse-outline-active-bg", + "$value": "{color.theme.bg.success}" } }, "border": { "success": { - "value": "{color.theme.active.success}", - "type": "color", - "source": "$btn-success-active-border-color" + "source": "$btn-success-active-border-color", + "$value": "{color.theme.active.success}" }, "outline-success": { - "value": "{color.theme.active.success}", - "type": "color", - "source": "$btn-success-outline-active-border-color" + "source": "$btn-success-outline-active-border-color", + "$value": "{color.theme.active.success}" }, "inverse-success": { - "value": "inherit", - "source": "$btn-success-inverse-active-border-color" + "source": "$btn-success-inverse-active-border-color", + "$value": "inherit" }, "inverse-outline-success": { - "value": "transparent", - "type": "color", - "source": "$btn-success-inverse-outline-active-border-color" + "source": "$btn-success-inverse-outline-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-focus-color" }, + "success": { + "source": "$btn-success-focus-color", + "$value": "{color.btn.text.success}" + }, "outline-success": { - "value": "{color.btn.text.outline-success}", - "type": "color", - "source": "$btn-success-outline-focus-color" + "source": "$btn-success-outline-focus-color", + "$value": "{color.btn.text.outline-success}" }, "inverse-success": { - "value": "{color.btn.text.inverse-success}", - "type": "color", - "source": "$btn-success-inverse-focus-color" + "source": "$btn-success-inverse-focus-color", + "$value": "{color.btn.text.inverse-success}" }, "inverse-outline-success": { - "value": "{color.btn.text.inverse-outline-success}", - "type": "color", - "source": "$btn-success-inverse-outline-focus-color" + "source": "$btn-success-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-success}" } }, "border": { - "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-focus-border-color" }, + "success": { + "source": "$btn-success-focus-border-color", + "$value": "{color.btn.border.success}" + }, "outline-success": { - "value": "{color.btn.border.outline-success}", - "type": "color", - "source": "$btn-success-outline-focus-border-color" + "source": "$btn-success-outline-focus-border-color", + "$value": "{color.btn.border.outline-success}" }, "inverse-success": { - "value": "{color.white}", - "type": "color", - "source": "$btn-success-inverse-focus-border-color" + "source": "$btn-success-inverse-focus-border-color", + "$value": "{color.white}" }, "inverse-outline-success": { - "value": "{color.btn.border.inverse-outline-success}", - "type": "color", - "source": "$btn-success-inverse-outline-focus-border-color" + "source": "$btn-success-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-success}" } }, "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": { + "source": "$btn-success-focus-bg", + "$value": "{color.btn.bg.success}" + }, + "outline-success": { + "source": "$btn-success-outline-focus-bg", + "$value": "inherit" + }, + "inverse-success": { + "source": "$btn-success-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-success}" + }, + "inverse-outline-success": { + "source": "$btn-success-inverse-outline-focus-bg", + "$value": "inherit" + } }, "outline": { - "success": { "value": "{color.theme.focus.success}", "type": "color", "source": "$btn-success-focus-outline-color" }, + "success": { + "source": "$btn-success-focus-outline-color", + "$value": "{color.theme.focus.success}" + }, "outline-success": { - "value": "{color.theme.focus.success}", - "type": "color", - "source": "$btn-success-outline-focus-outline-color" + "source": "$btn-success-outline-focus-outline-color", + "$value": "{color.theme.focus.success}" }, "inverse-success": { - "value": "{color.btn.focus.border.inverse-success}", - "type": "color", - "source": "$btn-success-inverse-focus-outline-color" + "source": "$btn-success-inverse-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-success}" }, "inverse-outline-success": { - "value": "{color.btn.focus.border.inverse-outline-success}", - "type": "color", - "source": "$btn-success-inverse-outline-focus-outline-color" + "source": "$btn-success-inverse-outline-focus-outline-color", + "$value": "{color.btn.focus.border.inverse-outline-success}" } } }, "disabled": { "text": { - "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-disabled-color" }, + "success": { + "source": "$btn-success-disabled-color", + "$value": "{color.btn.text.success}" + }, "outline-success": { - "value": "{color.btn.text.outline-success}", - "type": "color", - "source": "$btn-success-outline-disabled-color" + "source": "$btn-success-outline-disabled-color", + "$value": "{color.btn.text.outline-success}" + }, + "inverse-success": { + "source": "$btn-success-inverse-disabled-color", + "$value": "{color.success.base}" }, - "inverse-success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-disabled-color" }, "inverse-outline-success": { - "value": "{color.btn.text.inverse-outline-success}", - "type": "color", - "source": "$btn-success-inverse-outline-disabled-color" + "source": "$btn-success-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-success}" } }, "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": { + "source": "$btn-success-disabled-bg", + "$value": "{color.btn.bg.success}" + }, + "outline-success": { + "source": "$btn-success-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-success": { + "source": "$btn-success-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-success": { + "source": "$btn-success-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-disabled-border-color" }, + "success": { + "source": "$btn-success-disabled-border-color", + "$value": "{color.btn.border.success}" + }, "outline-success": { - "value": "{color.btn.border.outline-success}", - "type": "color", - "source": "$btn-success-outline-disabled-border-color" + "source": "$btn-success-outline-disabled-border-color", + "$value": "{color.btn.border.outline-success}" + }, + "inverse-success": { + "source": "$btn-success-inverse-disabled-border-color", + "$value": "transparent" }, - "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-outline-success": { + "source": "$btn-success-inverse-outline-disabled-border-color", + "$value": "inherit" + } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json index a743b5f0de..678c3c52f3 100644 --- a/tokens/src/themes/light/components/Button/tertiary.json +++ b/tokens/src/themes/light/components/Button/tertiary.json @@ -1,109 +1,181 @@ { + "$type": "color", "color": { "btn": { "text": { - "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-color" }, + "tertiary": { + "source": "$btn-tertiary-color", + "$value": "{color.gray.700}" + }, "inverse-tertiary": { - "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-color" + "source": "$btn-inverse-tertiary-color", + "$value": "{color.white}" } }, "bg": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-bg" }, - "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-bg" } + "tertiary": { + "source": "$btn-tertiary-bg", + "$value": "transparent" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-bg", + "$value": "transparent" + } }, "border": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-border-color" }, - "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-border-color" } + "tertiary": { + "source": "$btn-tertiary-border-color", + "$value": "transparent" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-border-color", + "$value": "transparent" + } }, "hover": { "text": { - "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-hover-color" }, + "tertiary": { + "source": "$btn-tertiary-hover-color", + "$value": "{color.gray.700}" + }, "inverse-tertiary": { - "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-hover-color" + "source": "$btn-inverse-tertiary-hover-color", + "$value": "{color.white}" } }, "bg": { - "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-hover-bg" }, + "tertiary": { + "source": "$btn-tertiary-hover-bg", + "$value": "{color.light.500}" + }, "inverse-tertiary": { - "value": "{color.white}", - "type": "color", "source": "$btn-inverse-tertiary-hover-bg", - "modify": [{ "type": "alpha", "amount": 0.1 }] + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "$value": "{color.white}" } }, "border": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-hover-border-color" }, + "tertiary": { + "source": "$btn-tertiary-hover-border-color", + "$value": "transparent" + }, "inverse-tertiary": { - "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-hover-border-color" + "source": "$btn-inverse-tertiary-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "tertiary": { - "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-active-color" + "source": "$btn-tertiary-active-color", + "$value": "{color.gray.700}" }, "inverse-tertiary": { - "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-active-color" + "source": "$btn-inverse-tertiary-active-color", + "$value": "{color.white}" } }, "bg": { - "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-active-bg" }, - "inverse-tertiary": { - "value": "{color.btn.hover.bg.inverse-tertiary}", - "type": "color", - "source": "$btn-inverse-tertiary-active-bg" + "tertiary": { + "source": "$btn-tertiary-active-bg", + "$value": "{color.light.500}" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-active-bg", + "$value": "{color.btn.hover.bg.inverse-tertiary}" } }, "border": { - "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-active-border-color" }, + "tertiary": { + "source": "$btn-tertiary-active-border-color", + "$value": "transparent" + }, "inverse-tertiary": { - "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-active-border-color" + "source": "$btn-inverse-tertiary-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-focus-color" }, + "tertiary": { + "source": "$btn-tertiary-focus-color", + "$value": "{color.btn.text.tertiary}" + }, "inverse-tertiary": { - "value": "{color.btn.text.inverse-tertiary}", - "type": "color", - "source": "$btn-inverse-tertiary-focus-color" + "source": "$btn-inverse-tertiary-focus-color", + "$value": "{color.btn.text.inverse-tertiary}" } }, "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": { + "source": "$btn-tertiary-focus-border-color", + "$value": "{color.btn.border.tertiary}" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-focus-border-color", + "$value": "transparent" + } }, "bg": { - "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-focus-bg" }, - "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-focus-bg" } + "tertiary": { + "source": "$btn-tertiary-focus-bg", + "$value": "inherit" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-focus-bg", + "$value": "inherit" + } }, "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": { + "source": "$btn-tertiary-focus-outline-color", + "$value": "{color.theme.focus.primary}" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-focus-outline-color", + "$value": "{color.white}" + } } }, "disabled": { "text": { - "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-color" }, + "tertiary": { + "source": "$btn-tertiary-disabled-color", + "$value": "{color.btn.text.tertiary}" + }, "inverse-tertiary": { - "value": "{color.btn.text.inverse-tertiary}", - "type": "color", - "source": "$btn-inverse-tertiary-disabled-color" + "source": "$btn-inverse-tertiary-disabled-color", + "$value": "{color.btn.text.inverse-tertiary}" } }, "bg": { - "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-disabled-bg" }, - "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-disabled-bg" } + "tertiary": { + "source": "$btn-tertiary-disabled-bg", + "$value": "inherit" + }, + "inverse-tertiary": { + "source": "$btn-inverse-tertiary-disabled-bg", + "$value": "inherit" + } }, "border": { - "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-border-color" }, + "tertiary": { + "source": "$btn-tertiary-disabled-border-color", + "$value": "{color.btn.border.tertiary}" + }, "inverse-tertiary": { - "value": "{color.btn.border.inverse-tertiary}", "type": "color", "source": "$btn-inverse-tertiary-disabled-border-color" + "source": "$btn-inverse-tertiary-disabled-border-color", + "$value": "{color.btn.border.inverse-tertiary}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json index 0d47ce0e22..da8670382d 100644 --- a/tokens/src/themes/light/components/Button/warning.json +++ b/tokens/src/themes/light/components/Button/warning.json @@ -1,276 +1,351 @@ { + "$type": "color", "color": { "btn": { "text": { "warning": { - "value": "{color.btn.bg.warning}", - "type": "color", "source": "$btn-warning-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.bg.warning}" }, "outline-warning": { - "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-color" + "source": "$btn-warning-outline-color", + "$value": "{color.warning.base}" }, "inverse-warning": { - "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-inverse-color" + "source": "$btn-warning-inverse-color", + "$value": "{color.warning.base}" }, "inverse-outline-warning": { - "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-color" + "source": "$btn-warning-inverse-outline-color", + "$value": "{color.white}" } }, "bg": { - "warning": { "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-bg" }, - "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-bg" }, + "warning": { + "source": "$btn-warning-bg", + "$value": "{color.warning.base}" + }, + "outline-warning": { + "source": "$btn-warning-outline-bg", + "$value": "inherit" + }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", "source": "$btn-warning-inverse-bg", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.text.inverse-warning}" }, - "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-bg" } + "inverse-outline-warning": { + "source": "$btn-warning-inverse-outline-bg", + "$value": "inherit" + } }, "border": { - "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-border-color" }, + "warning": { + "source": "$btn-warning-border-color", + "$value": "{color.btn.bg.warning}" + }, "outline-warning": { - "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-border-color" + "source": "$btn-warning-outline-border-color", + "$value": "{color.warning.base}" + }, + "inverse-warning": { + "source": "$btn-warning-inverse-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-warning-inverse-outline-border-color", + "$value": "{color.white}" } }, "hover": { "text": { "warning": { - "value": "{color.btn.hover.bg.warning}", - "type": "color", "source": "$btn-warning-hover-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.hover.bg.warning}" }, "outline-warning": { - "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-outline-hover-color" + "source": "$btn-warning-outline-hover-color", + "$value": "{color.theme.hover.warning}" }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", "source": "$btn-warning-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.text.inverse-warning}" }, "inverse-outline-warning": { - "value": "{color.theme.hover.warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-hover-color" + "source": "$btn-warning-inverse-outline-hover-color", + "$value": "{color.theme.hover.warning}" } }, "bg": { "warning": { - "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-bg" + "source": "$btn-warning-hover-bg", + "$value": "{color.theme.hover.warning}" }, "outline-warning": { - "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-outline-hover-bg" + "source": "$btn-warning-outline-hover-bg", + "$value": "{color.warning.100}" }, "inverse-warning": { - "value": "{color.btn.bg.inverse-warning}", - "type": "color", "source": "$btn-warning-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }] + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "$value": "{color.btn.bg.inverse-warning}" }, "inverse-outline-warning": { - "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-inverse-outline-hover-bg" + "source": "$btn-warning-inverse-outline-hover-bg", + "$value": "{color.warning.100}" } }, "border": { "warning": { - "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-border-color" + "source": "$btn-warning-hover-border-color", + "$value": "{color.theme.hover.warning}" }, "outline-warning": { - "value": "{color.warning.900}", "type": "color", "source": "$btn-warning-outline-hover-border-color" + "source": "$btn-warning-outline-hover-border-color", + "$value": "{color.warning.900}" + }, + "inverse-warning": { + "source": "$btn-warning-inverse-hover-border-color", + "$value": "transparent" }, - "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" + "source": "$btn-warning-inverse-outline-hover-border-color", + "$value": "transparent" } } }, "active": { "text": { "warning": { - "value": "{color.btn.active.bg.warning}", - "type": "color", "source": "$btn-warning-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.warning}" }, "outline-warning": { - "value": "{color.btn.active.bg.outline-warning}", - "type": "color", "source": "$btn-warning-outline-active-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.outline-warning}" }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", "source": "$btn-warning-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }] + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "$value": "{color.btn.text.inverse-warning}" }, "inverse-outline-warning": { - "value": "{color.btn.active.bg.inverse-outline-warning}", - "type": "color", "source": "$btn-warning-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }] } + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.btn.active.bg.inverse-outline-warning}" + } }, "bg": { "warning": { - "value": "{color.theme.active.warning}", "type": "color", "source": "$btn-warning-active-bg" + "source": "$btn-warning-active-bg", + "$value": "{color.theme.active.warning}" }, "outline-warning": { - "value": "{color.theme.bg.warning}", "type": "color", "source": "$btn-warning-outline-active-bg" + "source": "$btn-warning-outline-active-bg", + "$value": "{color.theme.bg.warning}" + }, + "inverse-warning": { + "source": "$btn-warning-inverse-active-bg", + "$value": "{color.gray.100}" }, - "inverse-warning": { "value": "{color.gray.100}", "type": "color", "source": "$btn-warning-inverse-active-bg" }, "inverse-outline-warning": { - "value": "{color.theme.bg.warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-active-bg" + "source": "$btn-warning-inverse-outline-active-bg", + "$value": "{color.theme.bg.warning}" } }, "border": { "warning": { - "value": "{color.theme.active.warning}", - "type": "color", - "source": "$btn-warning-active-border-color" + "source": "$btn-warning-active-border-color", + "$value": "{color.theme.active.warning}" }, "inverse-warning": { - "value": "inherit", - "type": "color", - "source": "$btn-warning-inverse-active-border-color" + "source": "$btn-warning-inverse-active-border-color", + "$value": "inherit" }, "outline-warning": { - "value": "{color.theme.active.warning}", - "type": "color", - "source": "$btn-warning-outline-active-border-color" + "source": "$btn-warning-outline-active-border-color", + "$value": "{color.theme.active.warning}" }, "inverse-outline-warning": { - "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-active-border-color" + "source": "$btn-warning-inverse-outline-active-border-color", + "$value": "transparent" } } }, "focus": { "text": { - "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-focus-color" }, + "warning": { + "source": "$btn-warning-focus-color", + "$value": "{color.btn.text.warning}" + }, "outline-warning": { - "value": "{color.btn.text.outline-warning}", - "type": "color", - "source": "$btn-warning-outline-focus-color" + "source": "$btn-warning-outline-focus-color", + "$value": "{color.btn.text.outline-warning}" }, "inverse-warning": { - "value": "{color.btn.text.inverse-warning}", - "type": "color", - "source": "$btn-warning-inverse-focus-color" + "source": "$btn-warning-inverse-focus-color", + "$value": "{color.btn.text.inverse-warning}" }, "inverse-outline-warning": { - "value": "{color.btn.text.inverse-outline-warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-focus-color" + "source": "$btn-warning-inverse-outline-focus-color", + "$value": "{color.btn.text.inverse-outline-warning}" } }, "border": { "warning": { - "value": "{color.btn.border.warning}", - "type": "color", - "source": "$btn-warning-focus-border-color" + "source": "$btn-warning-focus-border-color", + "$value": "{color.btn.border.warning}" }, "outline-warning": { - "value": "{color.btn.border.outline-warning}", - "type": "color", - "source": "$btn-warning-outline-focus-border-color" + "source": "$btn-warning-outline-focus-border-color", + "$value": "{color.btn.border.outline-warning}" }, "inverse-warning": { - "value": "{color.btn.border.inverse-warning}", - "type": "color", - "source": "$btn-warning-inverse-focus-border-color" + "source": "$btn-warning-inverse-focus-border-color", + "$value": "{color.btn.border.inverse-warning}" }, "inverse-outline-warning": { - "value": "{color.btn.border.inverse-outline-warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-focus-border-color" + "source": "$btn-warning-inverse-outline-focus-border-color", + "$value": "{color.btn.border.inverse-outline-warning}" } }, "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": { + "source": "$btn-warning-focus-bg", + "$value": "{color.btn.bg.warning}" + }, + "outline-warning": { + "source": "$btn-warning-outline-focus-bg", + "$value": "inherit" + }, "inverse-warning": { - "value": "{color.btn.bg.inverse-warning}", - "type": "color", - "source": "$btn-warning-inverse-focus-bg" + "source": "$btn-warning-inverse-focus-bg", + "$value": "{color.btn.bg.inverse-warning}" }, "inverse-outline-warning": { - "value": "inherit", - "type": "color", - "source": "$btn-warning-inverse-outline-focus-bg" + "source": "$btn-warning-inverse-outline-focus-bg", + "$value": "inherit" } }, "outline": { "warning": { - "value": "{color.theme.focus.warning}", - "type": "color", - "source": "$btn-warning-focus-outline-color" + "source": "$btn-warning-focus-outline-color", + "$value": "{color.theme.focus.warning}" }, "outline-warning": { - "value": "{color.theme.focus.warning}", - "type": "color", - "source": "$btn-warning-outline-focus-outline-color" + "source": "$btn-warning-outline-focus-outline-color", + "$value": "{color.theme.focus.warning}" }, "inverse-warning": { - "value": "{color.white}", - "type": "color", - "source": "$btn-warning-inverse-focus-outline-color" + "source": "$btn-warning-inverse-focus-outline-color", + "$value": "{color.white}" }, "inverse-outline-warning": { - "value": "inherit", - "type": "color", - "source": "$btn-warning-inverse-outline-focus-bg" + "source": "$btn-warning-inverse-outline-focus-bg", + "$value": "inherit" } } }, "disabled": { "text": { - "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-disabled-color" }, + "warning": { + "source": "$btn-warning-disabled-color", + "$value": "{color.btn.text.warning}" + }, "outline-warning": { - "value": "{color.btn.text.outline-warning}", - "type": "color", - "source": "$btn-warning-outline-disabled-color" + "source": "$btn-warning-outline-disabled-color", + "$value": "{color.btn.text.outline-warning}" }, "inverse-warning": { - "value": "{color.warning.base}", - "type": "color", - "source": "$btn-warning-inverse-disabled-color" + "source": "$btn-warning-inverse-disabled-color", + "$value": "{color.warning.base}" }, "inverse-outline-warning": { - "value": "{color.btn.text.inverse-outline-warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-disabled-color" + "source": "$btn-warning-inverse-outline-disabled-color", + "$value": "{color.btn.text.inverse-outline-warning}" } }, "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": { + "source": "$btn-warning-disabled-bg", + "$value": "{color.btn.bg.warning}" + }, + "outline-warning": { + "source": "$btn-warning-outline-disabled-bg", + "$value": "inherit" + }, + "inverse-warning": { + "source": "$btn-warning-inverse-disabled-bg", + "$value": "inherit" + }, + "inverse-outline-warning": { + "source": "$btn-warning-inverse-outline-disabled-bg", + "$value": "inherit" + } }, "border": { - "warning": { "value": "{color.btn.border.warning}", "type": "color", "source": "$btn-warning-disabled-border-color" }, + "warning": { + "source": "$btn-warning-disabled-border-color", + "$value": "{color.btn.border.warning}" + }, "outline-warning": { - "value": "{color.btn.border.outline-warning}", - "type": "color", - "source": "$btn-warning-outline-disabled-border-color" + "source": "$btn-warning-outline-disabled-border-color", + "$value": "{color.btn.border.outline-warning}" + }, + "inverse-warning": { + "source": "$btn-warning-inverse-disabled-border-color", + "$value": "transparent" }, - "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-disabled-border-color" }, "inverse-outline-warning": { - "value": "{color.btn.border.inverse-outline-warning}", - "type": "color", - "source": "$btn-warning-inverse-outline-disabled-border-color" + "source": "$btn-warning-inverse-outline-disabled-border-color", + "$value": "{color.btn.border.inverse-outline-warning}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json index c7deddea25..70e3f39778 100644 --- a/tokens/src/themes/light/components/Card.json +++ b/tokens/src/themes/light/components/Card.json @@ -1,36 +1,51 @@ { + "$type": "color", "color": { "card": { - "base": { "value": "inherit", "type": "color", "source": "$card-color" }, + "base": { + "source": "$card-color", + "$value": "inherit" + }, "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": { + "source": "$card-bg", + "$value": "{color.bg.base}" + }, + "dark": { + "source": "$card-bg-dark", + "$value": "{color.primary.500}" + }, + "muted": { + "source": "$card-bg-muted", + "$value": "{color.light.200}" + } }, "border": { "base": { - "value": "{color.black}", - "type": "color", "source": "$card-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.125 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.125 + } + ], + "$value": "{color.black}" }, "focus": { "base": { - "value": "{color.primary.500}", - "type": "color", - "source": "$card-border-focus-color" + "source": "$card-border-focus-color", + "$value": "{color.primary.500}" }, "dark": { - "value": "{color.theme.focus.primary}", - "type": "color", - "source": "$card-border-focus-color-dark" + "source": "$card-border-focus-color-dark", + "$value": "{color.theme.focus.primary}" } } }, - "divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" } + "divider-bg": { + "source": "$card-divider-bg", + "$value": "{color.light.400}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Carousel.json b/tokens/src/themes/light/components/Carousel.json index 834fcf832b..361b460f23 100644 --- a/tokens/src/themes/light/components/Carousel.json +++ b/tokens/src/themes/light/components/Carousel.json @@ -1,45 +1,73 @@ { "color": { + "$type": "color", "carousel": { "control": { - "base": { "value": "{color.white}", "type": "color", "source": "$carousel-control-color" } + "base": { + "source": "$carousel-control-color", + "$value": "{color.white}" + } }, "indicator": { - "active-bg": { "value": "{color.white}", "type": "color", "source": "$carousel-indicator-active-bg" } + "active-bg": { + "source": "$carousel-indicator-active-bg", + "$value": "{color.white}" + } }, - "caption": { "value": "{color.white}", "type": "color", "source": "$carousel-caption-color" } + "caption": { + "source": "$carousel-caption-color", + "$value": "{color.white}" + } } }, "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", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\")" }, "next-icon": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\")", - "type": "file", "source": "$carousel-control-next-icon-bg", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$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\")" } } } } }, "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": { + "source": "$carousel-control-opacity", + "$value": ".5" + }, + "hover": { + "source": "$carousel-control-hover-opacity", + "$value": ".9" + } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Chip.json b/tokens/src/themes/light/components/Chip.json index d67be11327..9569e7a826 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": { + "source": "$chip-light-color", + "$value": "{color.black}" + }, + "dark": { + "source": "$chip-dark-color", + "$value": "{color.white}" + } }, "bg": { - "light": { "value": "{color.white}", "type": "color", "source": "$chip-light-bg-color" }, - "dark": { "value": "{color.primary.300}", "type": "color", "source": "$chip-dark-bg" } + "light": { + "source": "$chip-light-bg-color", + "$value": "{color.white}" + }, + "dark": { + "source": "$chip-dark-bg", + "$value": "{color.primary.300}" + } }, "border": { "base": { - "value": "{color.light.800}", "type": "color", "source": "$chip-border-color" + "source": "$chip-border-color", + "$value": "{color.light.800}" }, "focus": { "selected": { "dark": { - "value": "{color.chip.outline.dark}", "type": "color", "source": "$chip-dark-selected-focus-border-color" + "source": "$chip-dark-selected-focus-border-color", + "$value": "{color.chip.outline.dark}" }, "light": { - "value": "{color.dark.500}", "type": "color", "source": "$chip-light-selected-focus-border-color" + "source": "$chip-light-selected-focus-border-color", + "$value": "{color.dark.500}" } } } }, "label": { "base": { - "value": "{color.primary.700}", "type": "color", "source": "$chip-label-color" + "source": "$chip-label-color", + "$value": "{color.primary.700}" }, "dark": { - "value": "{color.chip.outline.dark}", "type": "color", "source": "$chip-dark-label-color" + "source": "$chip-dark-label-color", + "$value": "{color.chip.outline.dark}" } }, "outline": { "dark": { - "value": "{color.white}", "type": "color", "source": "$chip-dark-outline-color" + "source": "$chip-dark-outline-color", + "$value": "{color.white}" }, "light": { - "value": "{color.chip.label.base}", "type": "color", "source": "$chip-light-outline-color" + "source": "$chip-light-outline-color", + "$value": "{color.chip.label.base}" } } } }, "other": { + "$type": "ratio", "chip": { - "opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" } + "opacity-disabled": { + "source": "$chip-disable-opacity", + "$value": ".3" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json index 8d00637ca3..658dafcb9e 100644 --- a/tokens/src/themes/light/components/CloseButton.json +++ b/tokens/src/themes/light/components/CloseButton.json @@ -1,10 +1,18 @@ { "color": { - "close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" } + "$type": "color", + "close-button": { + "source": "$close-color", + "$value": "{color.black}" + } }, "elevation": { + "$type": "shadow", "close-button": { - "text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow", "source": "$close-text-shadow" } + "text-shadow": { + "source": "$close-text-shadow", + "$value": "0 1px 0 {color.white}" + } } } } diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json index bfdf221bde..951562d2d7 100644 --- a/tokens/src/themes/light/components/Code.json +++ b/tokens/src/themes/light/components/Code.json @@ -1,23 +1,36 @@ { "color": { + "$type": "color", "code": { - "base": { "value": "#E83E8C", "type": "color", "source": "$code-color" }, + "base": { + "source": "$code-color", + "$value": "#E83E8C" + }, "kbd": { - "base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" }, - "bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" } + "base": { + "source": "$kbd-color", + "$value": "{color.white}" + }, + "bg": { + "source": "$kbd-bg", + "$value": "{color.gray.700}" + } }, - "pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" } + "pre": { + "source": "$pre-color", + "$value": "{color.gray.900}" + } } }, "elevation": { + "$type": "shadow", "code": { "kbd": { "box-shadow": { - "value": "none", - "type": "shadow", - "source": "$kbd-box-shadow" + "source": "$kbd-box-shadow", + "$value": "none" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json index bf26918ac5..4189d5b536 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": { + "source": "$data-table-background-color", + "$value": "{color.bg.base}" + }, "is-loading": { - "value": "{color.white}", - "type": "color", "source": "$data-table-is-loading-bg", "modify": [ { "type": "alpha", "amount": 0.7 } - ] + ], + "$value": "{color.white}" } }, - "border": { "value": "{color.light.300}", "type": "color", "source": "$data-table-border-color" } + "border": { + "source": "$data-table-border-color", + "$value": "{color.light.300}" + } } }, "elevation": { + "$type": "shadow", "data-table": { - "box-shadow": { "value": "{elevation.box-shadow.sm}", "type": "shadow", "source": "$data-table-box-shadow" } + "box-shadow": { + "source": "$data-table-box-shadow", + "$value": "{elevation.box-shadow.sm}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json index bf2f03a253..25f0759be7 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": { + "source": "$dropdown-color", + "$value": "{color.body.base}" + }, + "header": { + "source": "$dropdown-header-color", + "$value": "{color.gray.500}" + }, + "bg": { + "source": "$dropdown-bg", + "$value": "{color.bg.base}" + }, "border": { - "value": "{color.black}", - "type": "color", "source": "$dropdown-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.15 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.15 + } + ], + "$value": "{color.black}" + }, + "divider-bg": { + "source": "$dropdown-divider-bg", + "$value": "{color.gray.100}" }, - "divider-bg": { "value": "{color.gray.100}", "type": "color", "source": "$dropdown-divider-bg" }, "link": { - "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" }, + "base": { + "source": "$dropdown-link-color", + "$value": "{color.gray.900}" + }, "hover": { - "base": { - "value": "{color.gray.900}", - "type": "color", + "base": { "source": "$dropdown-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.5 }] + "modify": [ + { + "type": "darken", + "amount": 0.5 + } + ], + "$value": "{color.gray.900}" }, - "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" } + "bg": { + "source": "$dropdown-link-hover-bg", + "$value": "{color.light.300}" + } }, "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": { + "source": "$dropdown-link-active-color", + "$value": "{color.active}" + }, + "bg": { + "source": "$dropdown-link-active-bg", + "$value": "{color.bg.active}" + } }, - "disabled": { "value": "{color.disabled}", "type": "color", "source": "$dropdown-link-disabled-color" } + "disabled": { + "source": "$dropdown-link-disabled-color", + "$value": "{color.disabled}" + } } } }, "elevation": { + "$type": "shadow", "dropdown": { - "box-shadow": { "value": "none", "type": "shadow", "source": "$dropdown-box-shadow" } + "box-shadow": { + "source": "$dropdown-box-shadow", + "$value": "none" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json index ef252e9d6f..3cb957fbab 100644 --- a/tokens/src/themes/light/components/Dropzone.json +++ b/tokens/src/themes/light/components/Dropzone.json @@ -1,23 +1,42 @@ { "color": { + "$type": "color", "dropzone": { "error-wrapper": { - "value": "{color.danger.500}", "type": "color", "source": "$dropzone-error-wrapper-color" + "source": "$dropzone-error-wrapper-color", + "$value": "{color.danger.500}" }, "restriction-msg": { - "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color" + "source": "$dropzone-restriction-msg-color", + "$value": "{color.gray.500}" }, "border": { - "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" } + "base": { + "source": "$dropzone-border-color-default", + "$value": "{color.gray.500}" + } } } }, "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": { + "source": "$dropzone-box-shadow-hover", + "$value": "inset 0 0 0 2px {color.info.300}" + }, + "focus": { + "source": "$dropzone-box-shadow-focus", + "$value": "inset 0 0 0 2px {color.info.300}" + }, + "active": { + "source": "$dropzone-box-shadow-active", + "$value": "inset 0 0 0 2px {color.primary.500}" + }, + "error": { + "source": "$dropzone-box-shadow-error", + "$value": "inset 0 0 0 2px {color.danger.300}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json index 93f507feec..8f240d3af0 100644 --- a/tokens/src/themes/light/components/Form/color.json +++ b/tokens/src/themes/light/components/Form/color.json @@ -2,269 +2,405 @@ "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": { + "source": "$input-color", + "$value": "{color.gray.700}" + }, + "placeholder": { + "source": "$input-placeholder-color", + "$value": "{color.gray.500}" + }, + "plaintext": { + "source": "$input-plaintext-color", + "$value": "{color.body.base}" + }, + "border": { + "source": "$input-border-color", + "$value": "{color.gray.500}" + }, "bg": { - "base": { "value": "{color.bg.base}", "type": "color", "source": "$input-bg" }, - "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$input-disabled-bg" } + "base": { + "source": "$input-bg", + "$value": "{color.bg.base}" + }, + "disabled": { + "source": "$input-disabled-bg", + "$value": "{color.gray.100}" + } }, "group": { "addon": { - "base": { "value": "{color.form.input.base}", "type": "color", "source": "$input-group-addon-color" }, + "base": { + "source": "$input-group-addon-color", + "$value": "{color.form.input.base}" + }, "border": { - "value": "{color.form.input.border}", "type": "color", "source": "$input-group-addon-border-color" + "source": "$input-group-addon-border-color", + "$value": "{color.form.input.border}" }, - "bg": { "value": "{color.gray.100}", "type": "color", "source": "$input-group-addon-bg" } + "bg": { + "source": "$input-group-addon-bg", + "$value": "{color.gray.100}" + } } }, "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": { + "source": "$input-focus-color", + "$value": "{color.form.input.base}" + }, + "border": { + "source": "$input-focus-border-color", + "$value": "{color.input.focus}" + }, + "bg": { + "source": "$input-focus-bg", + "$value": "{color.form.input.bg.base}" + } } }, "control": { "indicator": { + "$type": "color", "border": { - "value": "{color.gray.700}", "type": "color", "source": "$custom-control-indicator-border-color" + "source": "$custom-control-indicator-border-color", + "$value": "{color.gray.700}" }, "bg": { "base": { - "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-control-indicator-bg" + "source": "$custom-control-indicator-bg", + "$value": "{color.form.input.bg.base}" }, "disabled": { - "value": "{color.form.input.bg.disabled}", - "type": "color", - "source": "$custom-control-indicator-disabled-bg" + "source": "$custom-control-indicator-disabled-bg", + "$value": "{color.form.input.bg.disabled}" } }, "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": { + "source": "$custom-control-indicator-checked-color", + "$value": "{color.bg.active}" + }, + "valid": { + "source": "$custom-control-indicator-checked-valid-color", + "$value": "{color.success.base}" + }, + "invalid": { + "source": "$custom-control-indicator-checked-invalid-color", + "$value": "{color.danger.base}" + }, "bg": { "base": { - "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-bg" + "source": "$custom-control-indicator-checked-bg", + "$value": "{color.bg.active}" }, "disabled": { - "value": "{color.primary.base}", - "type": "color", "source": "$custom-control-indicator-checked-disabled-bg", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.primary.base}" } }, "border": { "base": { - "value": "{color.form.control.indicator.checked.base}", - "type": "color", - "source": "$custom-control-indicator-checked-border-color" + "source": "$custom-control-indicator-checked-border-color", + "$value": "{color.form.control.indicator.checked.base}" }, "focus": { - "value": "{color.form.input.focus.border}", - "type": "color", - "source": "$custom-control-indicator-focus-border-color" + "source": "$custom-control-indicator-focus-border-color", + "$value": "{color.form.input.focus.border}" } } }, "active": { "base": { - "value": "{color.active}", "type": "color", "source": "$custom-control-indicator-active-color" + "source": "$custom-control-indicator-active-color", + "$value": "{color.active}" }, "bg": { - "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-active-bg" + "source": "$custom-control-indicator-active-bg", + "$value": "{color.bg.active}" }, "border": { - "value": "{color.form.control.indicator.active.bg}", - "type": "color", - "source": "$custom-control-indicator-active-border-color" + "source": "$custom-control-indicator-active-border-color", + "$value": "{color.form.control.indicator.active.bg}" } } }, "label": { - "base": { "value": "inherit", "type": "color", "source": "$custom-control-label-color" }, + "$type": "color", + "base": { + "source": "$custom-control-label-color", + "$value": "inherit" + }, "disabled": { - "value": "{color.disabled}", "type": "color", "source": "$custom-control-label-disabled-color" + "source": "$custom-control-label-disabled-color", + "$value": "{color.disabled}" }, "floating": { "text": { - "value": "{color.form.input.bg.base}", - "type": "color", "source": "$form-control-floating-label-text-bg", - "modify": [{ "type": "alpha", "amount": 0.1 }] + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "$value": "{color.form.input.bg.base}" } } }, "checkbox": { + "$type": "color", "indicator": { "indeterminate": { "base": { - "value": "{color.form.control.indicator.checked.base}", - "type": "color", - "source": "$custom-checkbox-indicator-indeterminate-color" + "source": "$custom-checkbox-indicator-indeterminate-color", + "$value": "{color.form.control.indicator.checked.base}" }, "bg": { - "value": "{color.bg.active}", - "type": "color", - "source": "$custom-checkbox-indicator-indeterminate-bg" + "source": "$custom-checkbox-indicator-indeterminate-bg", + "$value": "{color.bg.active}" }, "border": { - "value": "{color.form.control.checkbox.indicator.indeterminate.bg}", - "type": "color", - "source": "$custom-checkbox-indicator-indeterminate-border-color" + "source": "$custom-checkbox-indicator-indeterminate-border-color", + "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}" } } } }, "switch": { + "$type": "color", "indicator": { "checked": { "bg": { - "value": "{color.success.base}", - "type": "color", - "source": "$custom-switch-indicator-checked-bg" + "source": "$custom-switch-indicator-checked-bg", + "$value": "{color.success.base}" } } } }, "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": { + "source": "$custom-select-color", + "$value": "{color.form.input.base}", + "$type": "color" + }, + "disabled": { + "source": "$custom-select-disabled-color", + "$value": "{color.disabled}", + "$type": "color" + }, "indicator": { - "base": { "value": "{color.theme.hover.gray}", "type": "color", "source": "$custom-select-indicator-color" } + "$type": "color", + "base": { + "source": "$custom-select-indicator-color", + "$value": "{color.theme.hover.gray}" + } }, "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": "{color.gray.100}", "type": "dimension", "source": "$custom-select-bg-size" } + "base": { + "source": "$custom-select-bg", + "$value": "{color.form.input.bg.base}", + "$type": "color" + }, + "disabled": { + "source": "$custom-select-disabled-bg", + "$value": "{color.gray.100}", + "$type": "color" + }, + "size": { + "source": "$custom-select-bg-size", + "$value": "{color.gray.100}", + "$type": "dimension" + } }, "border": { + "$type": "color", "base": { - "value": "{color.form.input.border}", "type": "color", "source": "$custom-select-border-color" + "source": "$custom-select-border-color", + "$value": "{color.form.input.border}" }, "focus": { - "value": "{color.form.input.focus.border}", - "type": "color", - "source": "$custom-select-focus-border-color" + "source": "$custom-select-focus-border-color", + "$value": "{color.form.input.focus.border}" } } }, "range": { + "$type": "color", "track": { - "bg": { "value": "{color.gray.300}", "type": "color", "source": "$custom-range-track-bg" } + "bg": { + "source": "$custom-range-track-bg", + "$value": "{color.gray.300}" + } }, "thumb": { "bg": { - "base": { "value": "{color.bg.active}", "type": "color", "source": "$custom-range-thumb-bg" }, + "base": { + "source": "$custom-range-thumb-bg", + "$value": "{color.bg.active}" + }, "disabled": { - "value": "{color.disabled}", "type": "color", "source": "$custom-range-thumb-disabled-bg" + "source": "$custom-range-thumb-disabled-bg", + "$value": "{color.disabled}" }, "active": { - "value": "{color.bg.active}", - "type": "color", "source": "$custom-range-thumb-active-bg", - "modify": [{ "type": "lighten", "amount": "0.35" }] + "modify": [ + { + "type": "lighten", + "amount": "0.35" + } + ], + "$value": "{color.bg.active}" } } } }, "file": { - "base": { "value": "{color.form.input.base}", "type": "color", "source": "$custom-file-color" }, + "$type": "color", + "base": { + "source": "$custom-file-color", + "$value": "{color.form.input.base}" + }, "bg": { - "base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-file-bg" }, + "base": { + "source": "$custom-file-bg", + "$value": "{color.form.input.bg.base}" + }, "disabled": { - "value": "{color.form.input.bg.disabled}", "type": "color", "source": "$custom-file-disabled-bg" + "source": "$custom-file-disabled-bg", + "$value": "{color.form.input.bg.disabled}" } }, "button": { "base": { - "value": "{color.form.control.file.base}", "type": "color", "source": "$custom-file-button-color" + "source": "$custom-file-button-color", + "$value": "{color.form.control.file.base}" }, "bg": { - "value": "{color.form.input.group.addon.bg}", "type": "color", "source": "$custom-file-button-bg" + "source": "$custom-file-button-bg", + "$value": "{color.form.input.group.addon.bg}" } }, "border": { "base": { - "value": "{color.form.input.border}", "type": "color", "source": "$custom-file-border-color" + "source": "$custom-file-border-color", + "$value": "{color.form.input.border}" }, "focus": { - "value": "{color.form.input.focus.border}", - "type": "color", - "source": "$custom-file-focus-border-color" + "source": "$custom-file-focus-border-color", + "$value": "{color.form.input.focus.border}" } } } }, "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": { + "source": "$form-feedback-valid-color", + "$value": "{color.success.base}" + }, + "invalid": { + "source": "$form-feedback-invalid-color", + "$value": "{color.danger.base}" + }, "icon": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", - "source": "$form-feedback-icon-valid-color" + "source": "$form-feedback-icon-valid-color", + "$value": "{color.form.feedback.valid}" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", - "source": "$form-feedback-icon-invalid-color" + "source": "$form-feedback-icon-invalid-color", + "$value": "{color.form.feedback.invalid}" } }, "tooltip": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", "source": "$form-feedback-tooltip-valid-color", - "modify": [{ "type": "color-yiq" }] + "modify": [ + { + "type": "color-yiq" + } + ], + "$value": "{color.form.feedback.valid}" }, "bg": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", "source": "$form-feedback-tooltip-valid-bg", - "modify": [{ "type": "alpha", "amount": 0.9 }] + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "$value": "{color.form.feedback.valid}" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", "source": "$form-feedback-tooltip-invalid-bg", - "modify": [{ "type": "alpha", "amount": 0.9 }] + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "$value": "{color.form.feedback.invalid}" } }, "box-shadow": { "focus": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", "source": "$form-feedback-focus-box-shadow-valid-color", - "modify": [{ "type": "alpha", "amount": 0.25 }] + "modify": [ + { + "type": "alpha", + "amount": 0.25 + } + ], + "$value": "{color.form.feedback.valid}" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", "source": "$form-feedback-focus-box-shadow-invalid-color", - "modify": [{ "type": "alpha", "amount": 0.25 }] + "modify": [ + { + "type": "alpha", + "amount": 0.25 + } + ], + "$value": "{color.form.feedback.invalid}" } } } }, "checked": { "valid": { - "value": "{color.form.feedback.valid}", - "type": "color", "source": "$form-feedback-checked-valid-color", - "modify": [{ "type": "lighten", "amount": 0.1 }] + "modify": [ + { + "type": "lighten", + "amount": 0.1 + } + ], + "$value": "{color.form.feedback.valid}" }, "invalid": { - "value": "{color.form.feedback.invalid}", - "type": "color", "source": "$form-feedback-checked-invalid-color", - "modify": [{ "type": "lighten", "amount": 0.1 }] + "modify": [ + { + "type": "lighten", + "amount": 0.1 + } + ], + "$value": "{color.form.feedback.invalid}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json index 49f3b256c3..c447cef1b1 100644 --- a/tokens/src/themes/light/components/Form/elevation.json +++ b/tokens/src/themes/light/components/Form/elevation.json @@ -1,76 +1,85 @@ { + "$type": "shadow", "elevation": { "form": { "input": { - "base": { "value": "none", "type": "shadow", "source": "$input-box-shadow" }, + "base": { + "source": "$input-box-shadow", + "$value": "none" + }, "focus": { - "value": "0 0 0 1px {color.primary.500}", - "type": "shadow", - "source": "$input-focus-box-shadow" + "source": "$input-focus-box-shadow", + "$value": "0 0 0 1px {color.primary.500}" } }, "control": { "indicator": { "base": { - "value": "{elevation.form.input.base}", - "type": "shadow", - "source": "$custom-control-indicator-box-shadow" + "source": "$custom-control-indicator-box-shadow", + "$value": "{elevation.form.input.base}" }, "checked": { - "base": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-checked-box-shadow" }, + "base": { + "source": "$custom-control-indicator-checked-box-shadow", + "$value": "none" + }, "focus": { - "value": "0 0 0 4px rgba(0, 0, 0, .1)", - "type": "shadow", - "source": "$custom-control-indicator-focus-box-shadow" + "source": "$custom-control-indicator-focus-box-shadow", + "$value": "0 0 0 4px rgba(0, 0, 0, .1)" } }, - "active": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-active-box-shadow" } + "active": { + "source": "$custom-control-indicator-active-box-shadow", + "$value": "none" + } }, "checkbox": { "indicator": { "indeterminate": { - "value": "none", "type": "shadow", "source": "$custom-checkbox-indicator-indeterminate-box-shadow" + "source": "$custom-checkbox-indicator-indeterminate-box-shadow", + "$value": "none" } } }, "range": { "track": { - "value": "none", - "type": "shadow", - "source": "$custom-range-track-box-shadow" + "source": "$custom-range-track-box-shadow", + "$value": "none" }, "thumb": { "base": { - "value": "none", "type": "shadow", "source": "$custom-range-thumb-box-shadow" + "source": "$custom-range-thumb-box-shadow", + "$value": "none" }, "focus": { - "value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}", - "type": "shadow", - "source": "$custom-range-thumb-focus-box-shadow" + "source": "$custom-range-thumb-focus-box-shadow", + "$value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}" } } }, "file": { "base": { - "value": "{elevation.form.input.base}", "type": "shadow", "source": "$custom-file-box-shadow" + "source": "$custom-file-box-shadow", + "$value": "{elevation.form.input.base}" }, "focus": { - "value": "{elevation.form.input.focus}", "type": "shadow", "source": "$custom-file-focus-box-shadow" + "source": "$custom-file-focus-box-shadow", + "$value": "{elevation.form.input.focus}" } }, "select": { "border": { "base": { - "value": "none", "type": "shadow", "source": "$custom-select-box-shadow" + "source": "$custom-select-box-shadow", + "$value": "none" }, "focus": { - "value": "{elevation.input.btn-focus.box-shadow}", - "type": "shadow", - "source": "$custom-select-focus-box-shadow" + "source": "$custom-select-focus-box-shadow", + "$value": "{elevation.input.btn-focus.box-shadow}" } } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json index 3e4876afbe..1d8af1f598 100644 --- a/tokens/src/themes/light/components/Form/other.json +++ b/tokens/src/themes/light/components/Form/other.json @@ -1,131 +1,199 @@ { "other": { "form": { + "$type": "ratio", "feedback": { - "tooltip-opacity": { "value": ".9", "type": "ratio", "source": "$form-feedback-tooltip-opacity" } + "tooltip-opacity": { + "source": "$form-feedback-tooltip-opacity", + "$value": ".9" + } } }, "content": { "form": { "control": { "checkbox": { + "$type": "file", "indicator": { "icon-checked": { "base": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", "source": "$custom-checkbox-indicator-icon-checked", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,\")" }, "valid": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", "source": "$custom-checkbox-indicator-icon-valid-checked", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,\")" }, "invalid": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", "source": "$custom-checkbox-indicator-icon-invalid-checked", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,\")" } }, "indeterminate": { "icon": { - "value": "url(\"data:image/svg+xml,\")", - "type": "file", "source": "$custom-checkbox-indicator-icon-indeterminate", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,\")" } } } }, "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", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")" }, "valid": { - "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", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")" }, "invalid": { - "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", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")" } } } }, "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", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")" }, "icon-on": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")", - "type": "file", "source": "$custom-switch-indicator-icon-on", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$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\")" } } }, "select": { "indicator": { + "$type": "file", "icon": { - "value": "url('data:image/svg+xml,')", - "type": "file", "source": "$custom-select-indicator", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url('data:image/svg+xml,')" } }, "bg": { - "value": "{other.content.form.control.select.indicator.icon} no-repeat right {spacing.form.input.padding.y.base} center / {color.form.control.select.bg.base}", - "type": "background", - "source": "$custom-select-background" + "source": "$custom-select-background", + "$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" } } }, "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", "outputReferences": false, "modify": [ - { "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")" }, "invalid": { - "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")", - "type": "file", "source": "$form-feedback-icon-invalid", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$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\")" } } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json index e3c1763374..bd98ca479c 100644 --- a/tokens/src/themes/light/components/IconButton.json +++ b/tokens/src/themes/light/components/IconButton.json @@ -1,451 +1,948 @@ { "color": { + "$type": "color", "icon-button": { - "bg": { - "base": { "value": "transparent", "type": "color", "source": "$btn-icon-bg" }, + "bg": { + "base": { + "source": "$btn-icon-bg", + "$value": "transparent" + }, "primary": { - "base": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.bg.base}", "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.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "inverse-active": { - "base": { "value": "{color.icon-button.accent}", "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.bg.base}", "type": "color" }, + "base": { + "$value": "{color.primary.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "value": "{color.icon-button.accent}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.accent}", "type": "color" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.bg.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "value": "{color.icon-button.accent}", "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.bg.base}", "type": "color" }, - "hover": { "value": "{color.icon-button.bg.base}", "type": "color" }, - "focus": { "value": "{color.icon-button.bg.base}", "type": "color" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } } }, "secondary": { - "base": { "value": "{color.secondary.base}", "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": { + "source": "$btn-icon-accent-color", + "$value": "{color.white}" + }, + "black": { + "source": "$btn-icon-black", + "$value": "{color.black}" + } } }, "elevation": { + "$type": "shadow", "icon-button": { "box-shadow": { "primary": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.bg.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.bg.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, - "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": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" + }, + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "brand": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, - "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": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" + }, + "active": { + "$value": "none" }, - "inverse": { "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": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, - "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": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}" }, - "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" }, - "active": { "value": "none", "type": "shadow" }, - "inverse-active": { "value": "none", "type": "shadow" } + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" + }, + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "light": { "base": { - "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}", "type": "shadow" + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, - "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": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" + }, + "active": { + "$value": "none" }, - "inverse": { "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": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}" + }, + "inverse": { + "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, - "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" + } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json index bd743ec210..ab13b67868 100644 --- a/tokens/src/themes/light/components/Image.json +++ b/tokens/src/themes/light/components/Image.json @@ -1,18 +1,32 @@ { "color": { + "$type": "color", "image": { - "figure-caption": { "value": "{color.gray.500}", "type": "color", "source": "$figure-caption-color" }, + "figure-caption": { + "source": "$figure-caption-color", + "$value": "{color.gray.500}" + }, "thumbnail": { - "bg": { "value": "{color.body.bg}", "type": "color", "source": "$thumbnail-bg" }, - "border": { "value": "{color.gray.200}", "type": "color", "source": "$thumbnail-border-color" } + "bg": { + "source": "$thumbnail-bg", + "$value": "{color.body.bg}" + }, + "border": { + "source": "$thumbnail-border-color", + "$value": "{color.gray.200}" + } } } }, "elevation": { + "$type": "shadow", "image": { "thumbnail": { - "box-shadow": { "value": "none", "type": "shadow", "source": "$thumbnail-box-shadow" } + "box-shadow": { + "source": "$thumbnail-box-shadow", + "$value": "none" + } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Menu.json b/tokens/src/themes/light/components/Menu.json index cbe7f88ef7..5ac0fb64b1 100644 --- a/tokens/src/themes/light/components/Menu.json +++ b/tokens/src/themes/light/components/Menu.json @@ -1,30 +1,62 @@ { "elevation": { + "$type": "shadow", "menu": { - "box-shadow": { "value": "{elevation.box-shadow.base}", "type": "shadow", "source": "$menu-box-shadow" } + "box-shadow": { + "source": "$menu-box-shadow", + "$value": "{elevation.box-shadow.base}" + } } }, "color": { + "$type": "color", "menu": { - "bg": { "value": "{color.white}", "type": "color", "source": "$menu-bg" }, + "bg": { + "source": "$menu-bg", + "$value": "{color.white}" + }, "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": { + "source": "$menu-item-color", + "$value": "{color.body.base}" + }, + "bg": { + "source": "$menu-item-bg", + "$value": "transparent" + }, + "border": { + "source": "$menu-item-border-color", + "$value": "{color.menu.item.bg}" + }, "hover": { - "color": { "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": { + "source": "$menu-item-hover-color", + "$value": "{color.btn.text.tertiary}" + }, + "bg": { + "source": "$menu-item-hover-bg", + "$value": "{color.btn.hover.bg.tertiary}" + }, + "border": { + "source": "$menu-item-hover-border-color", + "$value": "{color.menu.item.bg}" + } }, "focus": { - "bg": { "value": "{color.btn.active.bg.tertiary}", "type": "color", "source": "$menu-item-focus-bg" } + "bg": { + "source": "$menu-item-focus-bg", + "$value": "{color.btn.active.bg.tertiary}" + } } }, "select": { "btn-link": { - "color": { "value": "{color.primary.500}", "type": "color", "source": "$menu-select-btn-link-color" } + "color": { + "source": "$menu-select-btn-link-color", + "$value": "{color.primary.500}" + } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json index 8b76a512ac..5ce810930b 100644 --- a/tokens/src/themes/light/components/Modal.json +++ b/tokens/src/themes/light/components/Modal.json @@ -1,29 +1,37 @@ { "color": { + "$type": "color", "modal": { "content": { - "bg": { "value": "{color.bg.base}", "type": "color", "source": "$modal-content-bg" }, + "bg": { + "source": "$modal-content-bg", + "$value": "{color.bg.base}" + }, "border": { - "value": "{color.black}", - "type": "color", "source": "$modal-content-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.2 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.2 + } + ], + "$value": "{color.black}" } }, - "backdrop-bg": { "value": "{color.black}", "type": "color", "source": "$modal-backdrop-bg" } + "backdrop-bg": { + "source": "$modal-backdrop-bg", + "$value": "{color.black}" + } } }, "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", - "source": "$modal-content-box-shadow-sm-up" + "source": "$modal-content-box-shadow-sm-up", + "$value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)" } } } @@ -31,7 +39,10 @@ }, "other": { "modal": { - "opacity": { "value": ".5", "source": "$modal-backdrop-opacity" } + "opacity": { + "source": "$modal-backdrop-opacity", + "$value": ".5" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json index 074eae400c..1bfc5565d0 100644 --- a/tokens/src/themes/light/components/Nav.json +++ b/tokens/src/themes/light/components/Nav.json @@ -1,22 +1,20 @@ { + "$type": "color", "border-color": { "nav": { "tabs-link": { "border": { "active": { - "value": "{color.primary.500}", - "type": "color", - "source": "$nav-tabs-link-active-border-color" + "source": "$nav-tabs-link-active-border-color", + "$value": "{color.primary.500}" }, "hover": { - "value": "transparent transparent {color.nav.tabs.base.border.base}", - "type": "color", - "source": "$nav-tabs-link-hover-border-color" + "source": "$nav-tabs-link-hover-border-color", + "$value": "transparent transparent {color.nav.tabs.base.border.base}" }, "focus": { - "value": "{color.nav.tabs.base.link.active.text}", - "type": "color", - "source": "$nav-tabs-link-focus-border-color" + "source": "$nav-tabs-link-focus-border-color", + "$value": "{color.nav.tabs.base.link.active.text}" } } } @@ -26,59 +24,115 @@ "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": { + "source": "$nav-link-color", + "$value": "{color.gray.700}" + }, + "disabled": { + "source": "$nav-link-disabled-color", + "$value": "{color.gray.300}" + } }, - "border": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-border-color" } + "border": { + "source": "$nav-tabs-link-border-color", + "$value": "transparent" + } }, "tabs": { "base": { "text": { - "disabled": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-disabled-bg" } + "disabled": { + "source": "$nav-tabs-disabled-bg", + "$value": "{color.nav.tabs.base.bg.hover}" + } }, "bg": { - "hover": { "value": "transparent", "type": "color", "source": "$nav-tabs-hover-bg" } + "hover": { + "source": "$nav-tabs-hover-bg", + "$value": "transparent" + } }, "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": { + "source": "$nav-tabs-border-color", + "$value": "{color.light.400}" + }, + "focus": { + "source": "$nav-tabs-focus-border-color", + "$value": "{color.nav.tabs.base.bg.hover}" + } }, "link": { "hover": { - "bg": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-link-hover-bg" } + "bg": { + "source": "$nav-tabs-link-hover-bg", + "$value": "{color.light.400}" + } }, "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": { + "source": "$nav-tabs-link-active-color", + "$value": "{color.primary.500}" + }, + "bg": { + "source": "$nav-tabs-link-active-bg", + "$value": "transparent" + } }, "disabled": { - "border": { "value": "{color.nav.link.border}", "type": "color", "source": "$nav-tabs-link-disabled-border-color" } + "border": { + "source": "$nav-tabs-link-disabled-border-color", + "$value": "{color.nav.link.border}" + } } } }, "inverse": { "link": { "text": { - "base": { "value": "{color.white}", "type": "color", "source": "$nav-inverse-tabs-link-color" } + "base": { + "source": "$nav-inverse-tabs-link-color", + "$value": "{color.white}" + } }, "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": { + "source": "$nav-inverse-tabs-link-border-bottom-color", + "$value": "{color.dark.300}" + }, + "active": { + "source": "$nav-inverse-tabs-link-active-border-color", + "$value": "{color.nav.tabs.inverse.link.text.base}" + } }, "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": { + "source": "$nav-inverse-tabs-link-hover-bg", + "$value": "{color.nav.tabs.inverse.link.border.bottom}" + }, + "active": { + "source": "$nav-inverse-tabs-link-active-bg", + "$value": "{color.nav.tabs.inverse.link.bg.hover}" + }, + "focus": { + "source": "$nav-inverse-tabs-link-focus-bg", + "$value": "{color.nav.tabs.inverse.link.text.base}" + }, "active-hover": { - "value": "transparent", - "type": "color", - "source": "$nav-inverse-tabs-link-active-hover-bg" + "source": "$nav-inverse-tabs-link-active-hover-bg", + "$value": "transparent" } }, - "tab-content-color": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-tab-content-color" } + "tab-content-color": { + "source": "$nav-inverse-tabs-tab-content-color", + "$value": "{color.nav.tabs.inverse.link.text.base}" + } }, "dropdown": { - "border": { "value": "{color.nav.tabs.inverse.link.bg.active-hover}", "type": "color", "source": "$nav-inverse-tabs-dropdown-border-color" } + "border": { + "source": "$nav-inverse-tabs-dropdown-border-color", + "$value": "{color.nav.tabs.inverse.link.bg.active-hover}" + } } } }, @@ -86,81 +140,124 @@ "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": { + "source": "$nav-pills-link-active-color", + "$value": "{color.active}" + }, + "bg": { + "source": "$nav-pills-link-active-bg", + "$value": "{color.bg.active}" + }, + "border": { + "source": "$nav-pills-link-active-border-color", + "$value": "{color.white}" + } }, - "border": { "value": "{color.nav.tabs.base.border.base}", "type": "color", "source": "$nav-pills-link-border-color" } + "border": { + "source": "$nav-pills-link-border-color", + "$value": "{color.nav.tabs.base.border.base}" + } } }, "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": { + "source": "$nav-inverse-pills-link-color", + "$value": "{color.white}" + }, + "focus": { + "source": "$nav-inverse-pills-link-focus-color", + "$value": "{color.nav.pills.inverse.link.text.base}" + }, + "active": { + "source": "$nav-inverse-pills-link-active-color", + "$value": "{color.primary.500}" + }, + "hover": { + "source": "$nav-inverse-pills-link-hover-color", + "$value": "{color.nav.pills.inverse.link.text.base}" + }, "active-focus": { - "value": "{color.nav.pills.inverse.link.text.active}", - "type": "color", - "source": "$nav-inverse-pills-link-active-focus-color" + "source": "$nav-inverse-pills-link-active-focus-color", + "$value": "{color.nav.pills.inverse.link.text.active}" }, "active-hover": { - "value": "{color.nav.pills.inverse.link.text.base}", - "type": "color", - "source": "$nav-inverse-pills-link-active-hover-color" + "source": "$nav-inverse-pills-link-active-hover-color", + "$value": "{color.nav.pills.inverse.link.text.base}" } }, "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": { + "source": "$nav-inverse-pills-link-border-color", + "$value": "{color.dark.300}" + }, + "active": { + "source": "$nav-inverse-pills-link-active-border-color", + "$value": "{color.nav.pills.inverse.link.text.base}" + }, "active-hover": { - "value": "{color.nav.pills.inverse.link.border.base}", - "type": "color", - "source": "$nav-inverse-pills-link-active-hover-border-color" + "source": "$nav-inverse-pills-link-active-hover-border-color", + "$value": "{color.nav.pills.inverse.link.border.base}" }, "active-focus": { - "value": "{color.primary.base}", - "type": "color", - "source": "$nav-inverse-pills-link-active-focus-border-color" + "source": "$nav-inverse-pills-link-active-focus-border-color", + "$value": "{color.primary.base}" }, "focus-hover": { - "value": "{color.nav.pills.inverse.link.border.active-focus}", - "type": "color", - "source": "$nav-inverse-pills-link-active-focus-hover-border-color" + "source": "$nav-inverse-pills-link-active-focus-hover-border-color", + "$value": "{color.nav.pills.inverse.link.border.active-focus}" } }, "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": { + "source": "$nav-inverse-pills-link-hover-bg", + "$value": "{color.nav.pills.inverse.link.border.base}" + }, + "active": { + "source": "$nav-inverse-pills-link-active-bg", + "$value": "{color.nav.pills.inverse.link.text.base}" + }, "active-hover": { - "value": "{color.nav.pills.inverse.link.border.base}", - "type": "color", - "source": "$nav-inverse-pills-link-active-hover-bg" + "source": "$nav-inverse-pills-link-active-hover-bg", + "$value": "{color.nav.pills.inverse.link.border.base}" }, "active-focus-hover": { - "value": "{color.nav.pills.inverse.link.text.base}", - "type": "color", - "source": "$nav-inverse-pills-link-active-focus-hover-bg" + "source": "$nav-inverse-pills-link-active-focus-hover-bg", + "$value": "{color.nav.pills.inverse.link.text.base}" } } }, - "tab-content-color": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-tab-content-color" } + "tab-content-color": { + "source": "$nav-inverse-pills-tab-content-color", + "$value": "{color.nav.pills.inverse.link.text.base}" + } } }, - "divider": { "value": "{color.gray.100}", "type": "color", "source": "$nav-divider-color" }, + "divider": { + "source": "$nav-divider-color", + "$value": "{color.gray.100}" + }, "dark": { - "value": "{color.white}", - "type": "color", "source": "$navbar-dark-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.white}" }, "light": { - "value": "{color.black}", - "type": "color", "source": "$navbar-light-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.black}" } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Navbar.json b/tokens/src/themes/light/components/Navbar.json index b855507ab0..2fc9dd090a 100644 --- a/tokens/src/themes/light/components/Navbar.json +++ b/tokens/src/themes/light/components/Navbar.json @@ -1,136 +1,164 @@ { "color": { + "$type": "color", "navbar": { "dark": { "text": { - "value": "{color.white}", - "type": "color", "source": "$navbar-dark-color", - "modify": [{ - "type": "alpha", - "amount": 0.5 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.white}" }, "hover": { - "value": "{color.white}", - "type": "color", "source": "$navbar-dark-hover-color", - "modify": [{ - "type": "alpha", - "amount": 0.75 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.75 + } + ], + "$value": "{color.white}" + }, + "active": { + "source": "$navbar-dark-active-color", + "$value": "{color.active}" }, - "active": { "value": "{color.active}", "type": "color", "source": "$navbar-dark-active-color" }, "disabled": { - "value": "{color.white}", - "type": "color", "source": "$navbar-dark-disabled-color", - "modify": [{ - "type": "alpha", - "amount": 0.25 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.25 + } + ], + "$value": "{color.white}" }, "toggler": { "border": { - "value": "{color.white}", - "type": "color", "source": "$navbar-dark-toggler-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.1 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "$value": "{color.white}" } }, "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": { + "source": "$navbar-dark-brand-color", + "$value": "{color.navbar.dark.active}" + }, + "hover": { + "source": "$navbar-dark-brand-hover-color", + "$value": "{color.navbar.dark.active}" + } } }, "light": { "text": { - "value": "{color.black}", - "type": "color", "source": "$navbar-light-color", - "modify": [{ - "type": "alpha", - "amount": 0.5 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.black}" }, - "hover": { - "value": "{color.black}", - "type": "color", + "hover": { "source": "$navbar-light-hover-color", - "modify": [{ - "type": "alpha", - "amount": 0.7 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.7 + } + ], + "$value": "{color.black}" }, - "active": { - "value": "{color.black}", - "type": "color", + "active": { "source": "$navbar-light-active-color", - "modify": [{ - "type": "alpha", - "amount": 0.9 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "$value": "{color.black}" }, - "disabled": { - "value": "{color.black}", - "type": "color", + "disabled": { "source": "$navbar-light-disabled-color", - "modify": [{ - "type": "alpha", - "amount": 0.3 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "$value": "{color.black}" }, "toggler": { "border": { - "value": "{color.black}", - "type": "color", "source": "$navbar-light-toggler-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.1 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "$value": "{color.black}" } }, "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": { + "source": "$navbar-light-brand-color", + "$value": "{color.navbar.light.active}" + }, + "hover": { + "source": "$navbar-light-brand-hover-color", + "$value": "{color.navbar.light.active}" + } } } } }, "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", "outputReferences": false, - "modify": [{ - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")" } }, "light": { "icon-bg": { - "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")", - "type": "file", "source": "$navbar-light-toggler-icon-bg", "outputReferences": false, - "modify": [{ - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - }] + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/OverflowScroll.json b/tokens/src/themes/light/components/OverflowScroll.json index da6de0c447..c2bed16223 100644 --- a/tokens/src/themes/light/components/OverflowScroll.json +++ b/tokens/src/themes/light/components/OverflowScroll.json @@ -1,9 +1,11 @@ { + "$type": "color", "color": { "overflow-scroll": { "opacity-mask-transparent": { - "value": "rgba(0, 0, 0, .4)", "type": "color", "source": "$overflow-scroll-opacity-mask-transparent" + "source": "$overflow-scroll-opacity-mask-transparent", + "$value": "rgba(0, 0, 0, .4)" } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/PageBanner.json b/tokens/src/themes/light/components/PageBanner.json index 6d520cbee9..90c960e069 100644 --- a/tokens/src/themes/light/components/PageBanner.json +++ b/tokens/src/themes/light/components/PageBanner.json @@ -1,24 +1,45 @@ { + "$type": "color", "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}" + } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json index 557e914bf0..ce56bf5132 100644 --- a/tokens/src/themes/light/components/Pagination.json +++ b/tokens/src/themes/light/components/Pagination.json @@ -1,45 +1,92 @@ { "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": { + "source": "$pagination-color", + "$value": "{color.link.base}" + }, + "inverse": { + "source": "$pagination-color-inverse", + "$value": "{color.white}" + }, + "hover": { + "source": "$pagination-hover-color", + "$value": "{color.link.hover}" + }, + "active": { + "source": "$pagination-active-color", + "$value": "{color.active}" + }, + "disabled": { + "source": "$pagination-disabled-color", + "$value": "{color.disabled}" + } }, "bg": { - "base": { "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": { + "source": "$pagination-bg", + "$value": "{color.bg.base}" + }, + "hover": { + "source": "$pagination-hover-bg", + "$value": "{color.gray.100}" + }, + "active": { + "source": "$pagination-active-bg", + "$value": "{color.bg.active}" + }, + "disabled": { + "source": "$pagination-disabled-bg", + "$value": "{color.white}" + } }, "border": { - "base": { "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": { + "source": "$pagination-border-color", + "$value": "{color.gray.200}" + }, + "hover": { + "source": "$pagination-hover-border-color", + "$value": "{color.gray.200}" + }, + "active": { + "source": "$pagination-active-border-color", + "$value": "{color.pagination.bg.active}" + }, + "disabled": { + "source": "$pagination-disabled-border-color", + "$value": "{color.gray.100}" + } }, "focus": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$pagination-focus-color" }, - "text": { "value": "{color.black}", "type": "color", "source": "$pagination-focus-color-text" } + "base": { + "source": "$pagination-focus-color", + "$value": "{color.primary.500}" + }, + "text": { + "source": "$pagination-focus-color-text", + "$value": "{color.black}" + } }, "dropdown": { "text-inverse": { - "value": "{color.white}", "type": "color", "source": "$pagination-dropdown-color-inverse" + "source": "$pagination-dropdown-color-inverse", + "$value": "{color.white}" } } } }, "elevation": { + "$type": "shadow", "pagination": { "focus": { "box-shadow": { - "value": "{elevation.input.btn-focus.box-shadow}", - "type": "shadow", - "source": "$pagination-focus-box-shadow" + "source": "$pagination-focus-box-shadow", + "$value": "{elevation.input.btn-focus.box-shadow}" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json index 3ba213c768..d0d9ca3987 100644 --- a/tokens/src/themes/light/components/Popover.json +++ b/tokens/src/themes/light/components/Popover.json @@ -1,55 +1,104 @@ { "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": { + "source": "$popover-bg", + "$value": "{color.bg.base}" + }, + "border": { + "source": "$popover-border-color", + "$value": "rgba(0, 0, 0, .2)" + }, "header": { - "text": { "value": "{color.headings.base}", "type": "color", "source": "$popover-header-color" }, - "bg": { "value": "{color.white}", "type": "color", "source": "$popover-header-bg" }, + "text": { + "source": "$popover-header-color", + "$value": "{color.headings.base}" + }, + "bg": { + "source": "$popover-header-bg", + "$value": "{color.white}" + }, "bg-dark": { - "value": "{color.white}", - "type": "color", "source": "$popover-header-bg-dark", - "modify": [{ "type": "darken", "amount": 0.5 }] + "modify": [ + { + "type": "darken", + "amount": 0.5 + } + ], + "$value": "{color.white}" }, "border-bottom-dark": { - "value": "{color.white}", - "type": "color", "source": "$popover-header-border-bottom-darken", - "modify": [{ "type": "darken", "amount": 0.05 }] + "modify": [ + { + "type": "darken", + "amount": 0.05 + } + ], + "$value": "{color.white}" } }, - "body": { "value": "{color.body.base}", "type": "color", "source": "$popover-body-color" }, - "arrow": { - "base": { "value": "{color.popover.bg}", "type": "color", "source": "$popover-arrow-color" }, + "body": { + "source": "$popover-body-color", + "$value": "{color.body.base}" + }, + "arrow": { + "base": { + "source": "$popover-arrow-color", + "$value": "{color.popover.bg}" + }, "outer": { - "value": "{color.popover.border}", - "type": "color", "source": "$popover-arrow-outer-color", - "modify": [{ "type": "alpha", "amount": 0.05 }] + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "$value": "{color.popover.border}" } }, "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": { + "source": "$popover-success-bg", + "$value": "{color.success.100}" + }, + "icon": { + "source": "$popover-success-icon-color", + "$value": "{color.success.500}" + } }, "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": { + "source": "$popover-warning-bg", + "$value": "{color.warning.100}" + }, + "icon": { + "source": "$popover-warning-icon-color", + "$value": "{color.warning.500}" + } }, "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": { + "source": "$popover-danger-bg", + "$value": "{color.danger.100}" + }, + "icon": { + "source": "$popover-danger-icon-color", + "$value": "{color.danger.500}" + } } } }, "elevation": { + "$type": "shadow", "popover": { "box-shadow": { - "value": "none", - "type": "shadow", - "source": "$popover-box-shadow" + "source": "$popover-box-shadow", + "$value": "none" } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json index 4814f474f5..33ac58e927 100644 --- a/tokens/src/themes/light/components/ProductTour.json +++ b/tokens/src/themes/light/components/ProductTour.json @@ -1,35 +1,47 @@ { + "$type": "color", "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": { + "source": "$checkpoint-background-color", + "$value": "{color.light.300}" + }, + "body": { + "source": "$checkpoint-body-color", + "$value": "{color.gray.700}" + }, + "border": { + "source": "$checkpoint-border-color", + "$value": "{color.brand.base}" + }, + "breadcrumb": { + "source": "$checkpoint-breadcrumb-color", + "$value": "{color.primary.base}" + }, "box-shadow": { - "value": "{color.black}", - "type": "color", "source": "$checkpoint-box-shadow-color", - "modify": [{ - "type": "alpha", - "amount": 0.3 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "$value": "{color.black}" }, "arrow": { "border": { "top": { - "value": "{color.product-tour.checkpoint.bg}", - "type": "color", - "source": "$checkpoint-arrow-border-top-color" + "source": "$checkpoint-arrow-border-top-color", + "$value": "{color.product-tour.checkpoint.bg}" }, "transparent": { - "value": "transparent", - "type": "color", - "source": "$checkpoint-arrow-border-color-transparent" + "source": "$checkpoint-arrow-border-color-transparent", + "$value": "transparent" } } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json index 400017cabf..dd455eff70 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" }, + "bg": { + "source": "$progress-bg", + "$value": "transparent" + }, + "border": { + "source": "$progress-bar-border-color", + "$value": "{color.gray.500}" + }, "bar": { - "base": { "value": "{color.white}", "type": "color", "source": "$progress-bar-color" }, + "base": { + "source": "$progress-bar-color", + "$value": "{color.white}" + }, "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": { + "source": "$progress-bar-bg", + "$value": "{color.accent.a}" + }, + "annotated": { + "source": "$annotated-progress-bar-bg", + "$value": "{color.dark.500}" + } } } } }, "elevation": { + "$type": "shadow", "progress-bar": { - "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" } + "box-shadow": { + "source": "$progress-box-shadow", + "$value": "none" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Scrollable.json b/tokens/src/themes/light/components/Scrollable.json index 12d6f06b55..f6198db474 100644 --- a/tokens/src/themes/light/components/Scrollable.json +++ b/tokens/src/themes/light/components/Scrollable.json @@ -1,14 +1,19 @@ { + "$type": "shadow", "elevation": { "scrollable": { "body": { "box-shadow": { - "value": "{color.black}", - "type": "shadow", "source": "$scrollable-body-box-shadow", - "modify": [{ "type": "alpha", "amount": 0.55 }] + "modify": [ + { + "type": "alpha", + "amount": 0.55 + } + ], + "$value": "{color.black}" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/SearchField.json b/tokens/src/themes/light/components/SearchField.json index 4cd19bbf0e..880575d6a5 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": { + "source": "$search-border-color", + "$value": "{color.gray.500}" + }, + "interaction": { + "source": "$search-border-color-interaction", + "$value": "{color.black}" + }, + "focus": { + "source": "$search-border-focus-color", + "$value": "{color.black}" + } }, "button": { "bg": { - "primary": { "value": "{color.primary.500}", "type": "color", "source": "$search-btn-primary-bg" }, - "brand": { "value": "{color.brand.500}", "type": "color", "source": "$search-btn-brand-bg" } + "primary": { + "source": "$search-btn-primary-bg", + "$value": "{color.primary.500}" + }, + "brand": { + "source": "$search-btn-brand-bg", + "$value": "{color.brand.500}" + } } }, "form-bg": { - "value": "{color.white}", "type": "color", "source": "$search-form-background-color" + "source": "$search-form-background-color", + "$value": "{color.white}" } } }, "other": { + "$type": "ratio", "search-field": { - "disabled-opacity": { "value": ".3", "type": "ratio", "source": "$search-disabled-opacity" } + "disabled-opacity": { + "source": "$search-disabled-opacity", + "$value": ".3" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Sheet.json b/tokens/src/themes/light/components/Sheet.json index 996e689bfa..4fafae2999 100644 --- a/tokens/src/themes/light/components/Sheet.json +++ b/tokens/src/themes/light/components/Sheet.json @@ -1,22 +1,31 @@ { + "$type": "color", "color": { "sheet": { "skrim": { - "bg": { - "value": "{color.gray.300}", - "type": "color", + "bg": { "source": "$sheet-skrim-bg", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.gray.300}" }, "component": { "box-shadow": { - "value": "{color.black}", - "type": "color", "source": "$sheet-skrim-component-box-shadow", - "modify": [{ "type": "alpha", "amount": 0.15 }] + "modify": [ + { + "type": "alpha", + "amount": 0.15 + } + ], + "$value": "{color.black}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Stepper.json b/tokens/src/themes/light/components/Stepper.json index a4f2a62ba2..88b99a773b 100644 --- a/tokens/src/themes/light/components/Stepper.json +++ b/tokens/src/themes/light/components/Stepper.json @@ -1,34 +1,47 @@ { + "$type": "color", "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": { + "source": "$stepper-header-bg", + "$value": "transparent" + }, + "line": { + "source": "$stepper-header-line-bg", + "$value": "{color.light.base}" + } }, "step": { "base": { - "value": "{color.primary.base}", "type": "color", "source": "$stepper-header-step-color" + "source": "$stepper-header-step-color", + "$value": "{color.primary.base}" }, "bg": { "base": { - "value": "{color.stepper.header.bg.base}", "type": "color", "source": "$stepper-header-step-bg" + "source": "$stepper-header-step-bg", + "$value": "{color.stepper.header.bg.base}" }, "active": { - "value": "{color.gray.500}", "type": "color", "source": "$stepper-header-active-step-bg" + "source": "$stepper-header-active-step-bg", + "$value": "{color.gray.500}" } }, - "border": { "value": "none", "type": "color", "source": "$stepper-header-step-border" }, + "border": { + "source": "$stepper-header-step-border", + "$value": "none" + }, "bubble-error": { - "value": "{color.danger.base}", "type": "color", "source": "$stepper-header-step-error-bubble-color" + "source": "$stepper-header-step-error-bubble-color", + "$value": "{color.danger.base}" }, "description-error": { - "value": "{color.stepper.header.step.bubble-error}", - "type": "color", - "source": "$stepper-header-step-error-description-color" + "source": "$stepper-header-step-error-description-color", + "$value": "{color.stepper.header.step.bubble-error}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Sticky.json b/tokens/src/themes/light/components/Sticky.json index 396aa1d04f..8715008662 100644 --- a/tokens/src/themes/light/components/Sticky.json +++ b/tokens/src/themes/light/components/Sticky.json @@ -1,18 +1,17 @@ { + "$type": "shadow", "elevation": { "sticky": { "shadow": { "top": { - "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$sticky-shadow-top" + "source": "$sticky-shadow-top", + "$value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)" }, "bottom": { - "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$sticky-shadow-bottom" + "source": "$sticky-shadow-bottom", + "$value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Tab.json b/tokens/src/themes/light/components/Tab.json index b8647e01c7..33f96028eb 100644 --- a/tokens/src/themes/light/components/Tab.json +++ b/tokens/src/themes/light/components/Tab.json @@ -1,62 +1,85 @@ { + "$type": "color", "color": { "tab": { "more-link-dropdown-toggle": { "btn": { "text": { "focus": { - "value": "{color.tab.more-link-dropdown-toggle.text.focus}", - "type": "color", - "source": "$tab-more-link-dropdown-toggle-btn-focus-color" + "source": "$tab-more-link-dropdown-toggle-btn-focus-color", + "$value": "{color.tab.more-link-dropdown-toggle.text.focus}" } }, "border": { "focus": { - "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", - "type": "color", - "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color" + "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color", + "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}" } } }, "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": { + "source": "$tab-more-link-dropdown-toggle-focus-color", + "$value": "{color.white}" + }, + "active": { + "source": "$tab-more-link-dropdown-toggle-active-color", + "$value": "{color.tab.more-link-dropdown-toggle.text.focus}" + }, + "hover": { + "source": "$tab-more-link-dropdown-toggle-hover-color", + "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}" + } }, "bg": { - "focus": { "value": "{color.primary.500}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-bg" } + "focus": { + "source": "$tab-more-link-dropdown-toggle-focus-bg", + "$value": "{color.primary.500}" + } }, "border": { - "focus": { "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-border-color" } + "focus": { + "source": "$tab-more-link-dropdown-toggle-focus-border-color", + "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}" + } } }, "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": { + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color", + "$value": "{color.primary.500}" + }, + "active": { + "source": "$tab-inverse-pills-link-dropdown-toggle-active-color", + "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}" + }, "active-hover": { - "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}", - "type": "color", - "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color" + "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color", + "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}" } }, "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": { + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg", + "$value": "{color.white}" + }, + "hover": { + "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg", + "$value": "transparent" + }, "active-hover": { - "value": "{color.primary.300}", - "type": "color", - "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg" + "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg", + "$value": "{color.primary.300}" } }, "border": { "focus": { - "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}", - "type": "color", - "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color" + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color", + "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}" } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json index b40da24624..2cd92a9b3d 100644 --- a/tokens/src/themes/light/components/Toast.json +++ b/tokens/src/themes/light/components/Toast.json @@ -1,33 +1,54 @@ { "color": { + "$type": "color", "toast": { - "base": { "value": "inherit", "type": "color", "source": "$toast-color" }, - "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-background-color" }, + "base": { + "source": "$toast-color", + "$value": "inherit" + }, + "bg": { + "source": "$toast-background-color", + "$value": "{color.gray.700}" + }, "border": { - "value": "{color.black}", - "type": "color", "source": "$toast-border-color", - "modify": [{ "type": "alpha", "amount": 0.1 }] + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "$value": "{color.black}" }, "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", + "text": { + "source": "$toast-header-color", + "$value": "{color.white}" + }, + "bg": { + "source": "$toast-header-background-color", + "$value": "{color.gray.700}" + }, + "border": { "source": "$toast-header-border-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "$value": "{color.black}" } } } }, "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", - "source": "$toast-box-shadow" + "source": "$toast-box-shadow", + "$value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)" } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json index a73762aba6..a0bdc5894b 100644 --- a/tokens/src/themes/light/components/Tooltip.json +++ b/tokens/src/themes/light/components/Tooltip.json @@ -1,30 +1,53 @@ { "color": { + "$type": "color", "tooltip": { - "text": { "value": "{color.white}", "type": "color", "source": "$tooltip-color" }, - "light": { "value": "{color.black}", "type": "color", "source": "$tooltip-color-light" }, + "text": { + "source": "$tooltip-color", + "$value": "{color.white}" + }, + "light": { + "source": "$tooltip-color-light", + "$value": "{color.black}" + }, "bg": { - "base": { "value": "{color.black}", "type": "color", "source": "$tooltip-bg" }, - "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-bg-light" } + "base": { + "source": "$tooltip-bg", + "$value": "{color.black}" + }, + "light": { + "source": "$tooltip-bg-light", + "$value": "{color.white}" + } }, "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": { + "source": "$tooltip-arrow-color", + "$value": "{color.tooltip.bg.base}" + }, + "light": { + "source": "$tooltip-arrow-color-light", + "$value": "{color.white}" + } } } }, "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", - "source": "$tooltip-box-shadow" + "source": "$tooltip-box-shadow", + "$value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))" } } }, "other": { + "$type": "ratio", "tooltip": { - "opacity": { "value": "1", "type": "ratio", "source": "$tooltip-opacity" } + "opacity": { + "source": "$tooltip-opacity", + "$value": "1" + } } } } diff --git a/tokens/src/themes/light/components/general/body.json b/tokens/src/themes/light/components/general/body.json index 39f2dce270..7b98135948 100644 --- a/tokens/src/themes/light/components/general/body.json +++ b/tokens/src/themes/light/components/general/body.json @@ -1,8 +1,15 @@ { + "$type": "color", "color": { "body": { - "base": { "value": "{color.gray.700}", "type": "color", "source": "$body-color" }, - "bg": { "value": "{color.bg.base}", "type": "color", "source": "$body-bg" } + "base": { + "source": "$body-color", + "$value": "{color.gray.700}" + }, + "bg": { + "source": "$body-bg", + "$value": "{color.bg.base}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json index 989214871b..1f79929bcd 100644 --- a/tokens/src/themes/light/components/general/headings.json +++ b/tokens/src/themes/light/components/general/headings.json @@ -1,7 +1,11 @@ { + "$type": "color", "color": { "headings": { - "base": { "value": "{color.black}", "type": "color", "source": "$headings-color" } + "base": { + "source": "$headings-color", + "$value": "{color.black}" + } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/hr.json b/tokens/src/themes/light/components/general/hr.json index 3c40c8d618..976757699f 100644 --- a/tokens/src/themes/light/components/general/hr.json +++ b/tokens/src/themes/light/components/general/hr.json @@ -1,15 +1,17 @@ { + "$type": "color", "color": { "hr": { "border": { - "value": "{color.black}", - "type": "color", "source": "$hr-border-color", - "modify": [{ - "type": "alpha", - "amount": 0.1 - }] + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "$value": "{color.black}" } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json index f62b15e999..21ef8a5b7d 100644 --- a/tokens/src/themes/light/components/general/input.json +++ b/tokens/src/themes/light/components/general/input.json @@ -1,18 +1,22 @@ { "color": { + "$type": "color", "input": { - "btn-focus": { "value": "{color.bg.active}", "type": "color", "source": "$input-btn-focus-color" } + "btn-focus": { + "source": "$input-btn-focus-color", + "$value": "{color.bg.active}" + } } }, "elevation": { + "$type": "shadow", "input": { "btn-focus": { "box-shadow": { - "value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}", - "type": "shadow", - "source": "$input-btn-focus-box-shadow" + "source": "$input-btn-focus-box-shadow", + "$value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json index 5a990dcb38..9f972448eb 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": { + "source": "$link-color", + "$value": "{color.info.500}" + }, "hover": { - "value": "{color.link.base}", - "type": "color", "source": "$link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.base}" }, "inline": { - "base": { "value": "{color.info.500}", "type": "color", "source": "$inline-link-color" }, + "base": { + "source": "$inline-link-color", + "$value": "{color.info.500}" + }, "decoration": { - "value": "{color.link.inline.base}", - "type": "color", "source": "$inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }] + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "$value": "{color.link.inline.base}" }, "hover": { "base": { - "value": "{color.link.inline.base}", - "type": "color", "source": "$inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.inline.base}" }, "decoration": { - "value": "{color.link.inline.hover.base}", - "type": "color", "source": "$inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }] + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "$value": "{color.link.inline.hover.base}" } } }, "muted": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-link-color" }, + "base": { + "source": "$muted-link-color", + "$value": "{color.primary.500}" + }, "hover": { - "value": "{color.link.muted.base}", - "type": "color", "source": "$muted-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.muted.base}" }, "inline": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-inline-link-color" }, + "base": { + "source": "$muted-inline-link-color", + "$value": "{color.primary.500}" + }, "decoration": { - "value": "{color.link.muted.inline.base}", - "type": "color", "source": "$muted-inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }] + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "$value": "{color.link.muted.inline.base}" }, "hover": { "base": { - "value": "{color.link.muted.inline.base}", - "type": "color", "source": "$muted-inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.muted.inline.base}" }, "decoration": { - "value": "{color.link.muted.inline.hover.base}", - "type": "color", "source": "$muted-inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }] + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "$value": "{color.link.muted.inline.hover.base}" } } } }, "brand": { - "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-link-color" }, + "base": { + "source": "$brand-link-color", + "$value": "{color.brand.500}" + }, "hover": { - "value": "{color.link.brand.base}", - "type": "color", "source": "$brand-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.brand.base}" }, "inline": { - "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-inline-link-color" }, + "base": { + "source": "$brand-inline-link-color", + "$value": "{color.brand.500}" + }, "decoration": { - "value": "{color.link.brand.inline.base}", - "type": "color", "source": "$brand-inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }] + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "$value": "{color.link.brand.inline.base}" }, "hover": { "base": { - "value": "{color.link.brand.inline.base}", - "type": "color", "source": "$brand-inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }] + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "$value": "{color.link.brand.inline.base}" }, "decoration": { - "value": "{color.link.brand.inline.hover.base}", - "type": "color", "source": "$brand-inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }] + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "$value": "{color.link.brand.inline.hover.base}" } } } @@ -98,12 +165,14 @@ } }, "other": { + "$type": "percentage", "link": { "emphasized-hover": { "darken-percentage": { - "value": "15%", "type": "percentage", "source": "$emphasized-link-hover-darken-percentage" + "source": "$emphasized-link-hover-darken-percentage", + "$value": "15%" } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/list.json b/tokens/src/themes/light/components/general/list.json index 516b93c479..4b84c02765 100644 --- a/tokens/src/themes/light/components/general/list.json +++ b/tokens/src/themes/light/components/general/list.json @@ -1,38 +1,75 @@ { + "$type": "color", "color": { "list-group": { - "base": { "value": "inherit", "type": "color", "source": "$list-group-color" }, + "base": { + "source": "$list-group-color", + "$value": "inherit" + }, "bg": { - "base": { "value": "{color.white}", "type": "color", "source": "$list-group-bg" }, - "hover": { "value": "{color.gray.100}", "type": "color", "source": "$list-group-hover-bg" } + "base": { + "source": "$list-group-bg", + "$value": "{color.white}" + }, + "hover": { + "source": "$list-group-hover-bg", + "$value": "{color.gray.100}" + } }, "border": { - "value": "{color.black}", - "type": "color", "source": "$list-group-border-color", - "modify": [{ "type": "alpha", "amount": 0.125 }] + "modify": [ + { + "type": "alpha", + "amount": 0.125 + } + ], + "$value": "{color.black}" }, "active": { - "base": { "value": "{color.active}", "type": "color", "source": "$list-group-active-color" }, + "base": { + "source": "$list-group-active-color", + "$value": "{color.active}" + }, "border": { - "value": "{color.list-group.active.bg}", "type": "color", "source": "$list-group-active-border-color" + "source": "$list-group-active-border-color", + "$value": "{color.list-group.active.bg}" }, - "bg": { "value": "{color.bg.active}", "type": "color", "source": "$list-group-active-bg" } + "bg": { + "source": "$list-group-active-bg", + "$value": "{color.bg.active}" + } }, "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": { + "source": "$list-group-disabled-color", + "$value": "{color.gray.600}" + }, + "bg": { + "source": "$list-group-disabled-bg", + "$value": "{color.list-group.bg.base}" + } }, "action": { - "base": { "value": "{color.gray.700}", "type": "color", "source": "$list-group-action-color" }, + "base": { + "source": "$list-group-action-color", + "$value": "{color.gray.700}" + }, "hover": { - "value": "{color.list-group.action.base}", "type": "color", "source": "$list-group-action-hover-color" + "source": "$list-group-action-hover-color", + "$value": "{color.list-group.action.base}" }, "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": { + "source": "$list-group-action-active-color", + "$value": "{color.body.base}" + }, + "bg": { + "source": "$list-group-action-active-bg", + "$value": "{color.gray.200}" + } } } } } -} +} \ No newline at end of file diff --git a/tokens/src/themes/light/components/general/text.json b/tokens/src/themes/light/components/general/text.json index ab01882469..41f41815d8 100644 --- a/tokens/src/themes/light/components/general/text.json +++ b/tokens/src/themes/light/components/general/text.json @@ -1,12 +1,23 @@ { + "$type": "color", "color": { - "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" }, - "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" }, + "text-muted": { + "source": "$text-muted", + "$value": "{color.gray.500}" + }, + "mark-bg": { + "source": "$mark-bg", + "$value": "#FFF243" + }, "blockquote": { "small": { - "value": "{color.gray.500}", "type": "color", "source": "$blockquote-small-color" + "source": "$blockquote-small-color", + "$value": "{color.gray.500}" } }, - "yiq-light": { "value": "{color.white}", "type": "color", "source": "$yiq-text-light" } + "yiq-light": { + "source": "$yiq-text-light", + "$value": "{color.white}" + } } } diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json index 5cb19068bb..d8952dba65 100644 --- a/tokens/src/themes/light/global/color.json +++ b/tokens/src/themes/light/global/color.json @@ -1,1658 +1,2425 @@ { + "$type": "color", "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." }, + "white": { + "source": "$white", + "$value": "#FFFFFF", + "$description": "White color." + }, + "black": { + "source": "$black", + "$value": "#000000", + "$description": "Black color." + }, + "blue": { + "source": "$blue", + "$value": "#23419F", + "$description": "Blue color." + }, + "red": { + "source": "$red", + "$value": "#C32D3A", + "$description": "Red color." + }, + "green": { + "source": "$green", + "$value": "#178253", + "$description": "Green color." + }, + "yellow": { + "source": "$yellow", + "$value": "#FFD900", + "$description": "Yellow color." + }, + "teal": { + "source": "$teal", + "$value": "#006DAA", + "$description": "Teal color." + }, "accent": { "a": { - "value": "#00BBF9", - "type": "color", "source": "$accent-a", - "description": "Accent-A color.", "actions": { "default": "{color.action.default.accent.a}" - } + }, + "$value": "#00BBF9", + "$description": "Accent-A color." }, "b": { - "value": "#FFEE88", - "type": "color", "source": "$accent-b", - "description": "Accent-B color.", "actions": { "default": "{color.action.default.accent.b}" - } + }, + "$value": "#FFEE88", + "$description": "Accent-B color." } }, "gray": { - "base": { - "value": "#707070", - "type": "color", - "source": "$gray", - "description": "Basic gray color.", - "actions": { - "default": "{color.action.default.gray.base}" - } - }, "100": { - "value": "#EBEBEB", - "type": "color", "source": "$gray-100", - "description": "Gray color of level 100.", "actions": { "default": "{color.action.default.gray.100}" - } + }, + "$value": "#EBEBEB", + "$description": "Gray color of level 100." }, "200": { - "value": "#CCCCCC", - "type": "color", "source": "$gray-200", - "description": "Gray color of level 200.", "actions": { "default": "{color.action.default.gray.200}" - } + }, + "$value": "#CCCCCC", + "$description": "Gray color of level 200." }, "300": { - "value": "#ADADAD", - "type": "color", "source": "$gray-300", - "description": "Gray color of level 300.", "actions": { "default": "{color.action.default.gray.300}" - } + }, + "$value": "#ADADAD", + "$description": "Gray color of level 300." }, "400": { - "value": "#8F8F8F", - "type": "color", "source": "$gray-400", - "description": "Gray color of level 400.", "actions": { "default": "{color.action.default.gray.400}" - } + }, + "$value": "#8F8F8F", + "$description": "Gray color of level 400." }, "500": { - "value": "{color.gray.base}", - "type": "color", "source": "$gray-500", - "description": "Gray color of level 500.", "actions": { "default": "{color.action.default.gray.500}" - } - }, + }, + "$value": "{color.gray.base}", + "$description": "Gray color of level 500." + }, "600": { - "value": "#5C5C5C", - "type": "color", "source": "$gray-600", - "description": "Gray color of level 600.", "actions": { "default": "{color.action.default.gray.600}" - } + }, + "$value": "#5C5C5C", + "$description": "Gray color of level 600." }, "700": { - "value": "#454545", - "type": "color", "source": "$gray-700", - "description": "Gray color of level 700.", "actions": { "default": "{color.action.default.gray.700}" - } + }, + "$value": "#454545", + "$description": "Gray color of level 700." }, "800": { - "value": "#333333", - "type": "color", "source": "$gray-800", - "description": "Gray color of level 800.", "actions": { "default": "{color.action.default.gray.800}" - } + }, + "$value": "#333333", + "$description": "Gray color of level 800." }, "900": { - "value": "#212529", - "type": "color", "source": "$gray-900", - "description": "Gray color of level 900.", "actions": { "default": "{color.action.default.gray.900}" - } + }, + "$value": "#212529", + "$description": "Gray color of level 900." + }, + "base": { + "source": "$gray", + "actions": { + "default": "{color.action.default.gray.base}" + }, + "$value": "#707070", + "$description": "Basic gray color." } }, "primary": { - "base": { - "value": "#0A3055", - "type": "color", - "source": "$primary", - "description": "Basic primary color.", - "actions": { - "default": "{color.action.default.primary.base}" - } - }, "100": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Primary color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.primary.100}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 100." }, "200": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Primary color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.primary.200}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 200." }, "300": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Primary color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.primary.300}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 300." }, "400": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Primary color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.primary.400}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 400." }, "500": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-500", - "description": "Primary color of level 500.", "actions": { "default": "{color.action.default.primary.500}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 500." }, "600": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Primary color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.primary.600}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 600." }, "700": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Primary color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.primary.700}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 700." }, "800": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Primary color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.primary.800}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 800." }, "900": { - "value": "{color.primary.base}", - "type": "color", "source": "$primary-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Primary color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.primary.900}" - } + }, + "$value": "{color.primary.base}", + "$description": "Primary color of level 900." + }, + "base": { + "source": "$primary", + "actions": { + "default": "{color.action.default.primary.base}" + }, + "$value": "#0A3055", + "$description": "Basic primary color." } }, "secondary": { - "base": { - "value": "{color.gray.700}", - "type": "color", - "source": "$secondary", - "description": "Basic secondary color.", - "actions": { - "default": "{color.action.default.secondary.base}" - } - }, "100": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Secondary color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.secondary.100}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 100." }, "200": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Secondary color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.secondary.200}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 200." }, "300": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Secondary color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.secondary.300}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 300." }, "400": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Secondary color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.secondary.400}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 400." }, "500": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-500", - "description": "Secondary color of level 500.", "actions": { "default": "{color.action.default.secondary.500}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 500." }, "600": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Secondary color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.secondary.600}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 600." }, "700": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Secondary color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.secondary.700}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 700." }, "800": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Secondary color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.secondary.800}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 800." }, "900": { - "value": "{color.secondary.base}", - "type": "color", "source": "$secondary-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Secondary color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.secondary.900}" - } + }, + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 900." + }, + "base": { + "source": "$secondary", + "actions": { + "default": "{color.action.default.secondary.base}" + }, + "$value": "{color.gray.700}", + "$description": "Basic secondary color." } }, "brand": { - "base": { - "value": "#9D0054", - "type": "color", - "source": "$brand", - "description": "Basic brand color.", - "actions": { - "default": "{color.action.default.brand.base}" - } - }, "100": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Brand color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.brand.100}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 100." }, "200": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Brand color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.brand.200}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 200." }, "300": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Brand color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.brand.300}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 300." }, "400": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Brand color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.brand.400}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 400." }, "500": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-500", - "description": "Brand color of level 500.", "actions": { "default": "{color.action.default.brand.500}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 500." }, "600": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Brand color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.brand.600}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 600." }, "700": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Brand color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.brand.700}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 700." }, "800": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Brand color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.brand.800}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 800." }, "900": { - "value": "{color.brand.base}", - "type": "color", "source": "$brand-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Brand color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.brand.900}" - } + }, + "$value": "{color.brand.base}", + "$description": "Brand color of level 900." + }, + "base": { + "source": "$brand", + "actions": { + "default": "{color.action.default.brand.base}" + }, + "$value": "#9D0054", + "$description": "Basic brand color." } }, "success": { - "base": { - "value": "{color.green}", - "type": "color", - "source": "$success", - "description": "Basic success color.", - "actions": { - "default": "{color.action.default.success.base}" - } - }, "100": { - "value": "{color.success.base}", - "type": "color", "source": "$success-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Success color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.success.100}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 100." }, "200": { - "value": "{color.success.base}", - "type": "color", "source": "$success-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Success color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.success.200}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 200." }, "300": { - "value": "{color.success.base}", - "type": "color", "source": "$success-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Success color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.success.300}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 300." }, "400": { - "value": "{color.success.base}", - "type": "color", "source": "$success-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Success color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.success.400}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 400." }, "500": { - "value": "{color.success.base}", - "type": "color", "source": "$success-500", - "description": "Success color of level 500.", "actions": { "default": "{color.action.default.success.500}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 500." }, "600": { - "value": "{color.success.base}", - "type": "color", "source": "$success-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Success color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.success.600}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 600." }, "700": { - "value": "{color.success.base}", - "type": "color", "source": "$success-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Success color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.success.700}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 700." }, "800": { - "value": "{color.success.base}", - "type": "color", "source": "$success-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Success color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.success.800}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 800." }, "900": { - "value": "{color.success.base}", - "type": "color", "source": "$success-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Success color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.success.900}" - } + }, + "$value": "{color.success.base}", + "$description": "Success color of level 900." + }, + "base": { + "source": "$success", + "actions": { + "default": "{color.action.default.success.base}" + }, + "$value": "{color.green}", + "$description": "Basic success color." } }, "info": { - "base": { - "value": "{color.teal}", - "type": "color", - "source": "$info", - "description": "Basic info color.", - "actions": { - "default": "{color.action.default.info.base}" - } - }, "100": { - "value": "{color.info.base}", - "type": "color", "source": "$info-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Info color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.info.100}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 100." }, "200": { - "value": "{color.info.base}", - "type": "color", "source": "$info-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Info color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.info.200}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 200." }, "300": { - "value": "{color.info.base}", - "type": "color", "source": "$info-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Info color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.info.300}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 300." }, "400": { - "value": "{color.info.base}", - "type": "color", "source": "$info-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Info color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.info.400}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 400." }, "500": { - "value": "{color.info.base}", - "type": "color", "source": "$info-500", - "description": "Info color of level 500.", "actions": { "default": "{color.action.default.info.500}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 500." }, "600": { - "value": "{color.info.base}", - "type": "color", "source": "$info-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Info color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.info.600}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 600." }, "700": { - "value": "{color.info.base}", - "type": "color", "source": "$info-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Info color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.info.700}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 700." }, "800": { - "value": "{color.info.base}", - "type": "color", "source": "$info-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Info color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.info.800}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 800." }, "900": { - "value": "{color.info.base}", - "type": "color", "source": "$info-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Info color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.info.900}" - } + }, + "$value": "{color.info.base}", + "$description": "Info color of level 900." + }, + "base": { + "source": "$info", + "actions": { + "default": "{color.action.default.info.base}" + }, + "$value": "{color.teal}", + "$description": "Basic info color." } }, "warning": { - "base": { - "value": "{color.yellow}", - "type": "color", - "source": "$warning", - "description": "Basic warning color.", - "actions": { - "default": "{color.action.default.warning.base}" - } - }, "100": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Warning color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.warning.100}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 100." }, "200": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Warning color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.warning.200}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 200." }, "300": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Warning color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.warning.300}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 300." }, "400": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Warning color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.warning.400}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 400." }, "500": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-500", - "description": "Warning color of level 500.", "actions": { "default": "{color.action.default.warning.500}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 500." }, "600": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Warning color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.warning.600}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 600." }, "700": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Warning color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.warning.700}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 700." }, "800": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Warning color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.warning.800}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 800." }, "900": { - "value": "{color.warning.base}", - "type": "color", "source": "$warning-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Warning color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.warning.900}" - } + }, + "$value": "{color.warning.base}", + "$description": "Warning color of level 900." + }, + "base": { + "source": "$warning", + "actions": { + "default": "{color.action.default.warning.base}" + }, + "$value": "{color.yellow}", + "$description": "Basic warning color." } }, "danger": { - "base": { - "value": "{color.red}", - "type": "color", - "source": "$danger", - "description": "Basic danger color.", - "actions": { - "default": "{color.action.default.danger.base}" - } - }, "100": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Danger color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.danger.100}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 100." }, "200": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Danger color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.danger.200}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 200." }, "300": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Danger color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.danger.300}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 300." }, "400": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Danger color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.danger.400}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 400." }, "500": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-500", - "description": "Danger color of level 500.", "actions": { "default": "{color.action.default.danger.500}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 500." }, "600": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Danger color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.danger.600}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 600." }, "700": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Danger color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.danger.700}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 700." }, "800": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Danger color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.danger.800}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 800." }, "900": { - "value": "{color.danger.base}", - "type": "color", "source": "$danger-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Danger color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.danger.900}" - } + }, + "$value": "{color.danger.base}", + "$description": "Danger color of level 900." + }, + "base": { + "source": "$danger", + "actions": { + "default": "{color.action.default.danger.base}" + }, + "$value": "{color.red}", + "$description": "Basic danger color." } }, "light": { - "base": { - "value": "#E1DDDB", - "type": "color", - "source": "$light", - "description": "Basic light color.", - "actions": { - "default": "{color.action.default.light.base}" - } - }, "100": { - "value": "{color.light.base}", - "type": "color", "source": "$light-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Light color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.light.100}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 100." }, "200": { - "value": "{color.light.base}", - "type": "color", "source": "$light-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Light color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.light.200}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 200." }, "300": { - "value": "{color.light.base}", - "type": "color", "source": "$light-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Light color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.light.300}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 300." }, "400": { - "value": "{color.light.base}", - "type": "color", "source": "$light-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Light color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.light.400}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 400." }, "500": { - "value": "{color.light.base}", - "type": "color", "source": "$light-500", - "description": "Light color of level 500.", "actions": { "default": "{color.action.default.light.500}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 500." }, "600": { - "value": "{color.light.base}", - "type": "color", "source": "$light-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Light color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.light.600}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 600." }, "700": { - "value": "{color.light.base}", - "type": "color", "source": "$light-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Light color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.light.700}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 700." }, "800": { - "value": "{color.light.base}", - "type": "color", "source": "$light-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Light color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.light.800}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 800." }, "900": { - "value": "{color.light.base}", - "type": "color", "source": "$light-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Light color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.light.900}" - } + }, + "$value": "{color.light.base}", + "$description": "Light color of level 900." + }, + "base": { + "source": "$light", + "actions": { + "default": "{color.action.default.light.base}" + }, + "$value": "#E1DDDB", + "$description": "Basic light color." } }, "dark": { - "base": { - "value": "#273F2F", - "type": "color", - "source": "$dark", - "description": "Basic dark color.", - "actions": { - "default": "{color.action.default.dark.base}" - } - }, "100": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], - "description": "Dark color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "actions": { "default": "{color.action.default.dark.100}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 100." }, "200": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], - "description": "Dark color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "actions": { "default": "{color.action.default.dark.200}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 200." }, "300": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], - "description": "Dark color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "actions": { "default": "{color.action.default.dark.300}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 300." }, "400": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-400", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }], - "description": "Dark color of level 400.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.dark.400}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 400." }, "500": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-500", - "description": "Dark color of level 500.", "actions": { "default": "{color.action.default.dark.500}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 500." }, "600": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], - "description": "Dark color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "actions": { "default": "{color.action.default.dark.600}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 600." }, "700": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], - "description": "Info color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "actions": { "default": "{color.action.default.dark.700}" - } + }, + "$value": "{color.dark.base}", + "$description": "Info color of level 700." }, "800": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], - "description": "Dark color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "actions": { "default": "{color.action.default.dark.800}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 800." }, "900": { - "value": "{color.dark.base}", - "type": "color", "source": "$dark-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], - "description": "Dark color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "actions": { "default": "{color.action.default.dark.900}" - } + }, + "$value": "{color.dark.base}", + "$description": "Dark color of level 900." + }, + "base": { + "source": "$dark", + "actions": { + "default": "{color.action.default.dark.base}" + }, + "$value": "#273F2F", + "$description": "Basic dark color." } }, "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" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.100}" }, "200": { - "value": "{color.gray.200}", - "type": "color", "source": "$action-default-gray-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.200}" }, "300": { - "value": "{color.gray.300}", - "type": "color", "source": "$action-default-gray-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.300}" }, "400": { - "value": "{color.gray.400}", - "type": "color", "source": "$action-default-gray-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.400}" }, "500": { - "value": "{color.gray.500}", - "type": "color", "source": "$action-default-gray-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.500}" }, "600": { - "value": "{color.gray.600}", - "type": "color", "source": "$action-default-gray-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.600}" }, "700": { - "value": "{color.gray.700}", - "type": "color", "source": "$action-default-gray-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.700}" }, "800": { - "value": "{color.gray.800}", - "type": "color", "source": "$action-default-gray-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.800}" }, "900": { - "value": "{color.gray.900}", - "type": "color", "source": "$action-default-gray-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.gray.900}" + }, + "base": { + "source": "$action-default-gray-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.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" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.100}" }, "200": { - "value": "{color.primary.200}", - "type": "color", "source": "$action-default-primary-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.200}" }, "300": { - "value": "{color.primary.300}", - "type": "color", "source": "$action-default-primary-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.300}" }, "400": { - "value": "{color.primary.400}", - "type": "color", "source": "$action-default-primary-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.400}" }, "500": { - "value": "{color.primary.500}", - "type": "color", "source": "$action-default-primary-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.500}" }, "600": { - "value": "{color.primary.600}", - "type": "color", "source": "$action-default-primary-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.600}" }, "700": { - "value": "{color.primary.700}", - "type": "color", "source": "$action-default-primary-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.700}" }, "800": { - "value": "{color.primary.800}", - "type": "color", "source": "$action-default-primary-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.800}" }, "900": { - "value": "{color.primary.900}", - "type": "color", "source": "$action-default-primary-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.primary.900}" + }, + "base": { + "source": "$action-default-primary-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.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" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.100}" }, "200": { - "value": "{color.secondary.200}", - "type": "color", "source": "$action-default-secondary-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.200}" }, "300": { - "value": "{color.secondary.300}", - "type": "color", "source": "$action-default-secondary-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.300}" }, "400": { - "value": "{color.secondary.400}", - "type": "color", "source": "$action-default-secondary-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.400}" }, "500": { - "value": "{color.secondary.500}", - "type": "color", "source": "$action-default-secondary-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.500}" }, "600": { - "value": "{color.secondary.600}", - "type": "color", "source": "$action-default-secondary-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.600}" }, "700": { - "value": "{color.secondary.700}", - "type": "color", "source": "$action-default-secondary-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.700}" }, "800": { - "value": "{color.secondary.800}", - "type": "color", "source": "$action-default-secondary-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.800}" }, "900": { - "value": "{color.secondary.900}", - "type": "color", "source": "$action-default-secondary-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.secondary.900}" + }, + "base": { + "source": "$action-default-secondary-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.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" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.100}" }, "200": { - "value": "{color.brand.200}", - "type": "color", "source": "$action-default-brand-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.200}" }, "300": { - "value": "{color.brand.300}", - "type": "color", "source": "$action-default-brand-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.300}" }, "400": { - "value": "{color.brand.400}", - "type": "color", "source": "$action-default-brand-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.400}" }, "500": { - "value": "{color.brand.500}", - "type": "color", "source": "$action-default-brand-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.500}" }, "600": { - "value": "{color.brand.600}", - "type": "color", "source": "$action-default-brand-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.600}" }, "700": { - "value": "{color.brand.700}", - "type": "color", "source": "$action-default-brand-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.700}" }, "800": { - "value": "{color.brand.800}", - "type": "color", "source": "$action-default-brand-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.800}" }, "900": { - "value": "{color.brand.900}", - "type": "color", "source": "$action-default-brand-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.brand.900}" + }, + "base": { + "source": "$action-default-brand-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.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" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.100}" }, "200": { - "value": "{color.success.200}", - "type": "color", "source": "$action-default-success-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.200}" }, "300": { - "value": "{color.success.300}", - "type": "color", "source": "$action-default-success-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.300}" }, "400": { - "value": "{color.success.400}", - "type": "color", "source": "$action-default-success-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.400}" }, "500": { - "value": "{color.success.500}", - "type": "color", "source": "$action-default-success-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.500}" }, "600": { - "value": "{color.success.600}", - "type": "color", "source": "$action-default-success-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.600}" }, "700": { - "value": "{color.success.700}", - "type": "color", "source": "$action-default-success-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.700}" }, "800": { - "value": "{color.success.800}", - "type": "color", "source": "$action-default-success-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.800}" }, "900": { - "value": "{color.success.900}", - "type": "color", "source": "$action-default-success-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.success.900}" + }, + "base": { + "source": "$action-default-success-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.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" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.100}" }, "200": { - "value": "{color.info.200}", - "type": "color", "source": "$action-default-info-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.200}" }, "300": { - "value": "{color.info.300}", - "type": "color", "source": "$action-default-info-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.300}" }, "400": { - "value": "{color.info.400}", - "type": "color", "source": "$action-default-info-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.400}" }, "500": { - "value": "{color.info.500}", - "type": "color", "source": "$action-default-info-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.500}" }, "600": { - "value": "{color.info.600}", - "type": "color", "source": "$action-default-info-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.600}" }, "700": { - "value": "{color.info.700}", - "type": "color", "source": "$action-default-info-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.700}" }, "800": { - "value": "{color.info.800}", - "type": "color", "source": "$action-default-info-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.800}" }, "900": { - "value": "{color.info.900}", - "type": "color", "source": "$action-default-info-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.info.900}" + }, + "base": { + "source": "$action-default-info-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.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" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.100}" }, "200": { - "value": "{color.warning.200}", - "type": "color", "source": "$action-default-warning-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.200}" }, "300": { - "value": "{color.warning.300}", - "type": "color", "source": "$action-default-warning-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.300}" }, "400": { - "value": "{color.warning.400}", - "type": "color", "source": "$action-default-warning-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.400}" }, "500": { - "value": "{color.warning.500}", - "type": "color", "source": "$action-default-warning-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.500}" }, "600": { - "value": "{color.warning.600}", - "type": "color", "source": "$action-default-warning-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.600}" }, "700": { - "value": "{color.warning.700}", - "type": "color", "source": "$action-default-warning-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.700}" }, "800": { - "value": "{color.warning.800}", - "type": "color", "source": "$action-default-warning-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.800}" }, "900": { - "value": "{color.warning.900}", - "type": "color", "source": "$action-default-warning-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.warning.900}" + }, + "base": { + "source": "$action-default-warning-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.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" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.100}" }, "200": { - "value": "{color.danger.200}", - "type": "color", "source": "$action-default-danger-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.200}" }, "300": { - "value": "{color.danger.300}", - "type": "color", "source": "$action-default-danger-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.300}" }, "400": { - "value": "{color.danger.400}", - "type": "color", "source": "$action-default-danger-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.400}" }, "500": { - "value": "{color.danger.500}", - "type": "color", "source": "$action-default-danger-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.500}" }, "600": { - "value": "{color.danger.600}", - "type": "color", "source": "$action-default-danger-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.600}" }, "700": { - "value": "{color.danger.700}", - "type": "color", "source": "$action-default-danger-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.700}" }, "800": { - "value": "{color.danger.800}", - "type": "color", "source": "$action-default-danger-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.800}" }, "900": { - "value": "{color.danger.900}", - "type": "color", "source": "$action-default-danger-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.danger.900}" + }, + "base": { + "source": "$action-default-danger-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.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" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.100}" }, "200": { - "value": "{color.light.200}", - "type": "color", "source": "$action-default-light-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.200}" }, "300": { - "value": "{color.light.300}", - "type": "color", "source": "$action-default-light-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.300}" }, "400": { - "value": "{color.light.400}", - "type": "color", "source": "$action-default-light-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.400}" }, "500": { - "value": "{color.light.500}", - "type": "color", "source": "$action-default-light-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.500}" }, "600": { - "value": "{color.light.600}", - "type": "color", "source": "$action-default-light-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.600}" }, "700": { - "value": "{color.light.700}", - "type": "color", "source": "$action-default-light-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.700}" }, "800": { - "value": "{color.light.800}", - "type": "color", "source": "$action-default-light-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.800}" }, "900": { - "value": "{color.light.900}", - "type": "color", "source": "$action-default-light-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.light.900}" + }, + "base": { + "source": "$action-default-light-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.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" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.100}" }, "200": { - "value": "{color.dark.200}", - "type": "color", "source": "$action-default-dark-200", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.200}" }, "300": { - "value": "{color.dark.300}", - "type": "color", "source": "$action-default-dark-300", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.300}" }, "400": { - "value": "{color.dark.400}", - "type": "color", "source": "$action-default-dark-400", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.400}" }, "500": { - "value": "{color.dark.500}", - "type": "color", "source": "$action-default-dark-500", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.500}" }, "600": { - "value": "{color.dark.600}", - "type": "color", "source": "$action-default-dark-600", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.600}" }, "700": { - "value": "{color.dark.700}", - "type": "color", "source": "$action-default-dark-700", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.700}" }, "800": { - "value": "{color.dark.800}", - "type": "color", "source": "$action-default-dark-800", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.800}" }, "900": { - "value": "{color.dark.900}", - "type": "color", "source": "$action-default-dark-900", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.900}" + }, + "base": { + "source": "$action-default-dark-base", + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.dark.base}" } }, "accent": { "a": { - "value": "{color.accent.a}", - "type": "color", "source": "$action-default-accent-a", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.accent.a}" }, "b": { - "value": "{color.accent.b}", - "type": "color", "source": "$action-default-accent-b", - "modify": [{ "type": "darken", "amount": "0.1" }] + "modify": [ + { + "type": "darken", + "amount": "0.1" + } + ], + "$value": "{color.accent.b}" } } } diff --git a/tokens/src/themes/light/global/elevation.json b/tokens/src/themes/light/global/elevation.json index 56dc9d3b87..7919b92413 100644 --- a/tokens/src/themes/light/global/elevation.json +++ b/tokens/src/themes/light/global/elevation.json @@ -1,199 +1,182 @@ { + "$type": "shadow", "elevation": { "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": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 1." }, "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": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 2." }, "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": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 3." }, "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": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 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": "$level-5-box-shadow", - "description": "Basic box shadow of level 5." + "$value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 5." } }, - "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": { + "source": "$box-shadow", + "$value": "0 .125rem .25rem rgba(0, 0, 0, .3)", + "$description": "Default box shadow." + }, + "sm": { + "source": "$box-shadow-sm", + "$value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", + "$description": "Small box shadow." + }, + "lg": { + "source": "$box-shadow-lg", + "$value": "0 .25rem .5rem rgba(0, 0, 0, .3)", + "$description": "Large box shadow." + }, "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": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", + "$description": "Bottom box shadow of level 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": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)", + "$description": "Bottom box shadow of level 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": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)", + "$description": "Bottom box shadow of level 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": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)", + "$description": "Bottom box shadow of level 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": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)", + "$description": "Bottom box shadow of level 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": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)", + "$description": "Left box shadow of level 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": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)", + "$description": "Left box shadow of level 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": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)", + "$description": "Left box shadow of level 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": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)", + "$description": "Left box shadow of level 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": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)", + "$description": "Left box shadow of level 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": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)", + "$description": "Top box shadow of level 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": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)", + "$description": "Top box shadow of level 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": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)", + "$description": "Top box shadow of level 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": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)", + "$description": "Top box shadow of level 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": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)", + "$description": "Basic box shadow of level 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": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)", + "$description": "Right box shadow of level 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": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)", + "$description": "Right box shadow of level 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": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)", + "$description": "Right box shadow of level 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": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)", + "$description": "Right box shadow of level 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": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)", + "$description": "Right box shadow of level 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": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)", + "$description": "Centered box shadow of level 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": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)", + "$description": "Centered box shadow of level 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": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)", + "$description": "Centered box shadow of level 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": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)", + "$description": "Centered box shadow of level 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": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)", + "$description": "Centered box shadow of level 5." } } } diff --git a/tokens/src/themes/light/global/other.json b/tokens/src/themes/light/global/other.json index 360b2c1485..7cf894ee96 100644 --- a/tokens/src/themes/light/global/other.json +++ b/tokens/src/themes/light/global/other.json @@ -1,4 +1,4 @@ { "yiq-text-dark": "#454545", "yiq-text-light": "#FFFFFF" -} +} \ No newline at end of file diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index aee177d8ae..7bce255ab4 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -14,17 +14,17 @@ import { composeBreakpointName } from './utils.js'; const colorTransform = (token, theme) => { const { name: tokenName, - value, + $value, original, modify = [], } = token; 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) { modify.forEach((modifier) => { @@ -76,19 +76,22 @@ const createCustomCSSVariables = ({ : dictionary.allTokens; const variables = outputTokens.sort(sortByReference(dictionary)).map(token => { - let { value } = token; + let { $value } = token; + const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences; - if (usesReferences(token.original.value) && outputReferencesForToken) { - const refs = getReferences(token.original.value, dictionary.tokens); + + if (usesReferences(token.original.$value) && outputReferencesForToken) { + const refs = getReferences(token.original.$value, dictionary.tokens); refs.forEach(ref => { - value = value.replace(ref.value, `var(--${ref.name})`); + $value = $value.replace(ref.$value, `var(--${ref.name})`); }); } - return ` --${token.name}: ${value};`; + return ` --${token.name}: ${$value};`; }).join('\n'); - return `${fileHeader({ file })}:root {\n${variables}\n}\n`; + // return `${fileHeader({ file })}:root {\n${variables}\n}\n`; + return `:root {\n${variables}\n}\n`; }; /** @@ -98,7 +101,7 @@ StyleDictionary.registerTransform({ name: 'color/sass-color-functions', transitive: true, type: 'value', - filter: (token) => token.attributes.category === 'color' || token.value?.toString().startsWith('#'), + filter: (token) => token.attributes.category === 'color' || token.$value?.toString().startsWith('#'), transform: (token) => colorTransform(token), }); @@ -111,9 +114,9 @@ StyleDictionary.registerTransform({ type: 'value', filter: (token) => token.modify && token.modify[0].type === 'str-replace', transform: (token) => { - const { value, modify } = token; + const { $value, modify } = token; const { toReplace, replaceWith } = modify[0]; - return value.replaceAll(toReplace, replaceWith); + return $value.replaceAll(toReplace, replaceWith); }, }); @@ -136,7 +139,6 @@ StyleDictionary.registerFormat({ name: 'css/utility-classes', format: async ({ dictionary, file }) => { const { utilities } = dictionary.tokens; - if (!utilities) { return ''; } @@ -162,8 +164,8 @@ StyleDictionary.registerFormat({ } }); - const header = StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); - return header + utilityClasses; + // const header = StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); + return utilityClasses; }, }); @@ -182,20 +184,20 @@ StyleDictionary.registerFormat({ 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`; + customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.$value});\n`; if (nextBreakpoint) { - customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.value});\n`; + customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.$value});\n`; } } - return fileHeader({ file }) + customMediaVariables; + // return fileHeader({ file }) + customMediaVariables; + return customMediaVariables; }, }); /** * Custom file header for custom and built-in formatters. */ -// Регистрация кастомного fileHeader StyleDictionary.registerFileHeader({ name: 'customFileHeader', fileHeader: (defaultMessages = []) => { From f29f53803a389ba3f21a88b27f77cf5c262ed94b Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Thu, 22 Aug 2024 23:22:25 +0300 Subject: [PATCH 04/16] refactor: added dynamic imports --- bin/paragon-scripts.js | 18 +- lib/build-scss.js | 28 +- lib/build-tokens.js | 28 +- lib/help.js | 4 +- lib/install-theme.js | 6 +- lib/migrate-to-openedx-scope.js | 8 +- lib/replace-variables.js | 8 +- lib/utils.js | 4 +- lib/version.js | 8 +- package.json | 1 - styles/css/themes/light/utility-classes.css | 2850 +++++++++---------- tokens/css-utilities.js | 2 +- tokens/map-scss-to-css.js | 15 +- tokens/sass-helpers.js | 18 +- tokens/style-dictionary.js | 273 +- tokens/utils.js | 8 +- 16 files changed, 1638 insertions(+), 1641 deletions(-) diff --git a/bin/paragon-scripts.js b/bin/paragon-scripts.js index b2f1953e0c..a029b19564 100755 --- a/bin/paragon-scripts.js +++ b/bin/paragon-scripts.js @@ -1,13 +1,13 @@ #!/usr/bin/env node -import chalk from 'chalk'; -import themeCommand from '../lib/install-theme.js'; -import helpCommand from '../lib/help.js'; -import buildTokensCommand from '../lib/build-tokens.js'; -import replaceVariablesCommand from '../lib/replace-variables.js'; -import buildScssCommand from '../lib/build-scss.js'; -import { sendTrackInfo } from '../lib/utils.js'; -import versionCommand from '../lib/version.js'; -import migrateToOpenEdxScopeCommand from '../lib/migrate-to-openedx-scope.js'; +const chalk = require('chalk'); +const themeCommand = require('../lib/install-theme'); +const helpCommand = require('../lib/help'); +const buildTokensCommand = require('../lib/build-tokens'); +const replaceVariablesCommand = require('../lib/replace-variables'); +const buildScssCommand = require('../lib/build-scss'); +const { sendTrackInfo } = require('../lib/utils'); +const versionCommand = require('../lib/version'); +const migrateToOpenEdxScopeCommand = require('../lib/migrate-to-openedx-scope'); const commandAliases = { '-v': 'version', diff --git a/lib/build-scss.js b/lib/build-scss.js index b0414e57a7..9125cb8166 100755 --- a/lib/build-scss.js +++ b/lib/build-scss.js @@ -1,16 +1,16 @@ -import fs from 'fs'; -import sass from 'sass'; -import postCSS from 'postcss'; -import postCSSCustomMedia from 'postcss-custom-media'; -import postCSSImport from 'postcss-import'; -import postCSSMinify from 'postcss-minify'; -import combineSelectors from 'postcss-combine-duplicated-selectors'; -import { pathToFileURL } from 'url'; -import path from 'path'; -import minimist from 'minimist'; -import chalk from 'chalk'; -import ora from 'ora'; -import { capitalize } from './utils.js'; +const fs = require('fs'); +const sass = require('sass'); +const postCSS = require('postcss'); +const postCSSCustomMedia = require('postcss-custom-media'); +const postCSSImport = require('postcss-import'); +const postCSSMinify = require('postcss-minify'); +const combineSelectors = require('postcss-combine-duplicated-selectors'); +const { pathToFileURL } = require('url'); +const path = require('path'); +const minimist = require('minimist'); +const chalk = require('chalk'); +const ora = require('ora'); +const { capitalize } = require('./utils'); const paragonThemeOutputFilename = 'theme-urls.json'; @@ -185,4 +185,4 @@ function buildScssCommand(commandArgs) { }); } -export default buildScssCommand; +module.exports = buildScssCommand; diff --git a/lib/build-tokens.js b/lib/build-tokens.js index e3f90a263e..af2272cfeb 100755 --- a/lib/build-tokens.js +++ b/lib/build-tokens.js @@ -1,11 +1,11 @@ -import path from 'path'; -import minimist from 'minimist'; -import { fileURLToPath } from 'url'; -import { StyleDictionary, colorTransform, createCustomCSSVariables } from '../tokens/style-dictionary.js'; -import { createIndexCssFile } from '../tokens/utils.js'; - -const filename = fileURLToPath(import.meta.url); -const dirname = path.dirname(filename); +const path = require('path'); +const minimist = require('minimist'); +const { + initializeStyleDictionary, + createCustomCSSVariables, + colorTransform, +} = require('../tokens/style-dictionary'); +const { createIndexCssFile } = require('../tokens/utils'); /** * Builds tokens for CSS styles from JSON source files. @@ -17,6 +17,8 @@ const dirname = path.dirname(filename); * @param {string|string[]} [commandArgs.themes=['light']] - The themes (variants) for which to build tokens. */ async function buildTokensCommand(commandArgs) { + const StyleDictionary = await initializeStyleDictionary(); + const defaultParams = { themes: ['light'], 'build-dir': './build/', @@ -36,8 +38,8 @@ async function buildTokensCommand(commandArgs) { const coreConfig = { include: [ - path.resolve(dirname, '../tokens/src/core/**/*.json'), - path.resolve(dirname, '../tokens/src/core/**/*.toml'), + path.resolve(__dirname, '../tokens/src/core/**/*.json'), + path.resolve(__dirname, '../tokens/src/core/**/*.toml'), ], source: tokensSource ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`] @@ -78,8 +80,8 @@ async function buildTokensCommand(commandArgs) { ...coreConfig, include: [ ...coreConfig.include, - path.resolve(dirname, `../tokens/src/themes/${themeVariant}/**/*.json`), - path.resolve(dirname, `../tokens/src/themes/${themeVariant}/**/*.toml`), + path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`), + path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.toml`), ], source: tokensSource ? [ @@ -134,4 +136,4 @@ async function buildTokensCommand(commandArgs) { }); } -export default buildTokensCommand; +module.exports = buildTokensCommand; diff --git a/lib/help.js b/lib/help.js index ab138a7200..17e68b33b9 100644 --- a/lib/help.js +++ b/lib/help.js @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -import chalk from 'chalk'; +const chalk = require('chalk'); /** * Finds a command based on the given name in the commands object. @@ -67,4 +67,4 @@ function helpCommand(commands, commandArgs) { }); } -export default helpCommand; +module.exports = helpCommand; diff --git a/lib/install-theme.js b/lib/install-theme.js index e5503ca469..e3da7079d1 100644 --- a/lib/install-theme.js +++ b/lib/install-theme.js @@ -1,5 +1,5 @@ -import inquirer from 'inquirer'; -import childProcess from 'child_process'; +const inquirer = require('inquirer'); +const childProcess = require('child_process'); /** * Prompts the user to enter the @edx/brand package they want to install. @@ -45,4 +45,4 @@ async function themeCommand() { } } -export default themeCommand; +module.exports = themeCommand; diff --git a/lib/migrate-to-openedx-scope.js b/lib/migrate-to-openedx-scope.js index 010a6881c6..64ed76111f 100644 --- a/lib/migrate-to-openedx-scope.js +++ b/lib/migrate-to-openedx-scope.js @@ -1,6 +1,6 @@ -import fs from 'fs'; -import path from 'path'; -import chalk from 'chalk'; +const fs = require('fs'); +const path = require('path'); +const chalk = require('chalk'); const isValidFileExtension = (filename) => /(.jsx|.js|.tsx|.ts|.md|.rst|.scss)$/.test(filename.toLowerCase()); @@ -59,4 +59,4 @@ function migrateToOpenEdxScopeCommand() { console.error(`${chalk.green.bold('Paragon migration to Openedx scope completed successfully.')}`); // eslint-disable-line no-console } -export default migrateToOpenEdxScopeCommand; +module.exports = migrateToOpenEdxScopeCommand; diff --git a/lib/replace-variables.js b/lib/replace-variables.js index 5fb0a4ce9c..07b7361add 100755 --- a/lib/replace-variables.js +++ b/lib/replace-variables.js @@ -1,6 +1,6 @@ -import minimist from 'minimist'; -import { transformInPath } from '../tokens/utils.js'; -import mapSCSStoCSS from '../tokens/map-scss-to-css.js'; +const minimist = require('minimist'); +const { transformInPath } = require('../tokens/utils'); +const mapSCSStoCSS = require('../tokens/map-scss-to-css'); /** * Replaces CSS or SASS variables in a file with their corresponding values. @@ -35,4 +35,4 @@ async function replaceVariablesCommand(commandArgs) { } } -export default replaceVariablesCommand; +module.exports = replaceVariablesCommand; diff --git a/lib/utils.js b/lib/utils.js index c365eeedc6..59ada79b4a 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -1,4 +1,4 @@ -import axios from 'axios'; +const axios = require('axios'); /** * Sends request to the Netlify function to inform about specified event. @@ -27,4 +27,4 @@ function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); } -export { sendTrackInfo, capitalize }; +module.exports = { sendTrackInfo, capitalize }; diff --git a/lib/version.js b/lib/version.js index a35923bbab..b1adabd67f 100644 --- a/lib/version.js +++ b/lib/version.js @@ -1,9 +1,9 @@ /* eslint-disable no-console */ -import chalk from 'chalk'; -import packageJson from '../package.json' assert { type: 'json' }; +const chalk = require('chalk'); +const { version } = require('../package.json'); function versionCommand() { - console.log(`Paragon CLI version: ${chalk.bold(packageJson.version)}`); + console.log(`Paragon CLI version: ${chalk.bold(version)}`); } -export default versionCommand; \ No newline at end of file +module.exports = versionCommand; diff --git a/package.json b/package.json index a43aaf2160..6a52a674bf 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,6 @@ { "name": "@openedx/paragon", "version": "20.18.1", - "type": "module", "description": "Accessible, responsive UI component library based on Bootstrap.", "main": "dist/index.js", "module": "dist/index.js", diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css index 522bd45cf5..af85f92e60 100644 --- a/styles/css/themes/light/utility-classes.css +++ b/styles/css/themes/light/utility-classes.css @@ -1,1225 +1,1201 @@ -.bg-dark { - background-color: var(--pgn-color-dark-base) !important; +.bg-accent-a { + background-color: var(--pgn-color-accent-a) !important; } -a.bg-dark:hover, -a.bg-dark:focus, -button.bg-dark:hover, -button.bg-dark:focus { - background-color: var(--pgn-color-action-default-dark-base) !important; +a.bg-accent-a:hover, +a.bg-accent-a:focus, +button.bg-accent-a:hover, +button.bg-accent-a:focus { + background-color: var(--pgn-color-action-default-accent-a) !important; } -.text-dark { - color: var(--pgn-color-dark-base) !important; +.text-accent-a { + color: var(--pgn-color-accent-a) !important; } -a.text-dark:hover, -a.text-dark:focus { - color: var(--pgn-color-action-default-dark-base) !important; +a.text-accent-a:hover, +a.text-accent-a:focus { + color: var(--pgn-color-action-default-accent-a) !important; } -.border-dark { - border-color: var(--pgn-color-dark-base) !important; +.border-accent-a { + border-color: var(--pgn-color-accent-a) !important; } -.bg-dark-900 { - background-color: var(--pgn-color-dark-900) !important; +.bg-accent-b { + background-color: var(--pgn-color-accent-b) !important; } -a.bg-dark-900:hover, -a.bg-dark-900:focus, -button.bg-dark-900:hover, -button.bg-dark-900:focus { - background-color: var(--pgn-color-action-default-dark-900) !important; +a.bg-accent-b:hover, +a.bg-accent-b:focus, +button.bg-accent-b:hover, +button.bg-accent-b:focus { + background-color: var(--pgn-color-action-default-accent-b) !important; } -.text-dark-900 { - color: var(--pgn-color-dark-900) !important; +.text-accent-b { + color: var(--pgn-color-accent-b) !important; } -a.text-dark-900:hover, -a.text-dark-900:focus { - color: var(--pgn-color-action-default-dark-900) !important; +a.text-accent-b:hover, +a.text-accent-b:focus { + color: var(--pgn-color-action-default-accent-b) !important; } -.border-dark-900 { - border-color: var(--pgn-color-dark-900) !important; +.border-accent-b { + border-color: var(--pgn-color-accent-b) !important; } -.bg-dark-800 { - background-color: var(--pgn-color-dark-800) !important; +.bg-gray-100 { + background-color: var(--pgn-color-gray-100) !important; } -a.bg-dark-800:hover, -a.bg-dark-800:focus, -button.bg-dark-800:hover, -button.bg-dark-800:focus { - background-color: var(--pgn-color-action-default-dark-800) !important; +a.bg-gray-100:hover, +a.bg-gray-100:focus, +button.bg-gray-100:hover, +button.bg-gray-100:focus { + background-color: var(--pgn-color-action-default-gray-100) !important; } -.text-dark-800 { - color: var(--pgn-color-dark-800) !important; +.text-gray-100 { + color: var(--pgn-color-gray-100) !important; } -a.text-dark-800:hover, -a.text-dark-800:focus { - color: var(--pgn-color-action-default-dark-800) !important; +a.text-gray-100:hover, +a.text-gray-100:focus { + color: var(--pgn-color-action-default-gray-100) !important; } -.border-dark-800 { - border-color: var(--pgn-color-dark-800) !important; +.border-gray-100 { + border-color: var(--pgn-color-gray-100) !important; } -.bg-dark-700 { - background-color: var(--pgn-color-dark-700) !important; +.bg-gray-200 { + background-color: var(--pgn-color-gray-200) !important; } -a.bg-dark-700:hover, -a.bg-dark-700:focus, -button.bg-dark-700:hover, -button.bg-dark-700:focus { - background-color: var(--pgn-color-action-default-dark-700) !important; +a.bg-gray-200:hover, +a.bg-gray-200:focus, +button.bg-gray-200:hover, +button.bg-gray-200:focus { + background-color: var(--pgn-color-action-default-gray-200) !important; } -.text-dark-700 { - color: var(--pgn-color-dark-700) !important; +.text-gray-200 { + color: var(--pgn-color-gray-200) !important; } -a.text-dark-700:hover, -a.text-dark-700:focus { - color: var(--pgn-color-action-default-dark-700) !important; +a.text-gray-200:hover, +a.text-gray-200:focus { + color: var(--pgn-color-action-default-gray-200) !important; } -.border-dark-700 { - border-color: var(--pgn-color-dark-700) !important; +.border-gray-200 { + border-color: var(--pgn-color-gray-200) !important; } -.bg-dark-600 { - background-color: var(--pgn-color-dark-600) !important; +.bg-gray-300 { + background-color: var(--pgn-color-gray-300) !important; } -a.bg-dark-600:hover, -a.bg-dark-600:focus, -button.bg-dark-600:hover, -button.bg-dark-600:focus { - background-color: var(--pgn-color-action-default-dark-600) !important; +a.bg-gray-300:hover, +a.bg-gray-300:focus, +button.bg-gray-300:hover, +button.bg-gray-300:focus { + background-color: var(--pgn-color-action-default-gray-300) !important; } -.text-dark-600 { - color: var(--pgn-color-dark-600) !important; +.text-gray-300 { + color: var(--pgn-color-gray-300) !important; } -a.text-dark-600:hover, -a.text-dark-600:focus { - color: var(--pgn-color-action-default-dark-600) !important; +a.text-gray-300:hover, +a.text-gray-300:focus { + color: var(--pgn-color-action-default-gray-300) !important; } -.border-dark-600 { - border-color: var(--pgn-color-dark-600) !important; +.border-gray-300 { + border-color: var(--pgn-color-gray-300) !important; } -.bg-dark-500 { - background-color: var(--pgn-color-dark-500) !important; +.bg-gray-400 { + background-color: var(--pgn-color-gray-400) !important; } -a.bg-dark-500:hover, -a.bg-dark-500:focus, -button.bg-dark-500:hover, -button.bg-dark-500:focus { - background-color: var(--pgn-color-action-default-dark-500) !important; +a.bg-gray-400:hover, +a.bg-gray-400:focus, +button.bg-gray-400:hover, +button.bg-gray-400:focus { + background-color: var(--pgn-color-action-default-gray-400) !important; } -.text-dark-500 { - color: var(--pgn-color-dark-500) !important; +.text-gray-400 { + color: var(--pgn-color-gray-400) !important; } -a.text-dark-500:hover, -a.text-dark-500:focus { - color: var(--pgn-color-action-default-dark-500) !important; +a.text-gray-400:hover, +a.text-gray-400:focus { + color: var(--pgn-color-action-default-gray-400) !important; } -.border-dark-500 { - border-color: var(--pgn-color-dark-500) !important; +.border-gray-400 { + border-color: var(--pgn-color-gray-400) !important; } -.bg-dark-400 { - background-color: var(--pgn-color-dark-400) !important; +.bg-gray-500 { + background-color: var(--pgn-color-gray-500) !important; } -a.bg-dark-400:hover, -a.bg-dark-400:focus, -button.bg-dark-400:hover, -button.bg-dark-400:focus { - background-color: var(--pgn-color-action-default-dark-400) !important; +a.bg-gray-500:hover, +a.bg-gray-500:focus, +button.bg-gray-500:hover, +button.bg-gray-500:focus { + background-color: var(--pgn-color-action-default-gray-500) !important; } -.text-dark-400 { - color: var(--pgn-color-dark-400) !important; +.text-gray-500 { + color: var(--pgn-color-gray-500) !important; } -a.text-dark-400:hover, -a.text-dark-400:focus { - color: var(--pgn-color-action-default-dark-400) !important; +a.text-gray-500:hover, +a.text-gray-500:focus { + color: var(--pgn-color-action-default-gray-500) !important; } -.border-dark-400 { - border-color: var(--pgn-color-dark-400) !important; +.border-gray-500 { + border-color: var(--pgn-color-gray-500) !important; } -.bg-dark-300 { - background-color: var(--pgn-color-dark-300) !important; +.bg-gray-600 { + background-color: var(--pgn-color-gray-600) !important; } -a.bg-dark-300:hover, -a.bg-dark-300:focus, -button.bg-dark-300:hover, -button.bg-dark-300:focus { - background-color: var(--pgn-color-action-default-dark-300) !important; +a.bg-gray-600:hover, +a.bg-gray-600:focus, +button.bg-gray-600:hover, +button.bg-gray-600:focus { + background-color: var(--pgn-color-action-default-gray-600) !important; } -.text-dark-300 { - color: var(--pgn-color-dark-300) !important; +.text-gray-600 { + color: var(--pgn-color-gray-600) !important; } -a.text-dark-300:hover, -a.text-dark-300:focus { - color: var(--pgn-color-action-default-dark-300) !important; +a.text-gray-600:hover, +a.text-gray-600:focus { + color: var(--pgn-color-action-default-gray-600) !important; } -.border-dark-300 { - border-color: var(--pgn-color-dark-300) !important; +.border-gray-600 { + border-color: var(--pgn-color-gray-600) !important; } -.bg-dark-200 { - background-color: var(--pgn-color-dark-200) !important; +.bg-gray-700 { + background-color: var(--pgn-color-gray-700) !important; } -a.bg-dark-200:hover, -a.bg-dark-200:focus, -button.bg-dark-200:hover, -button.bg-dark-200:focus { - background-color: var(--pgn-color-action-default-dark-200) !important; +a.bg-gray-700:hover, +a.bg-gray-700:focus, +button.bg-gray-700:hover, +button.bg-gray-700:focus { + background-color: var(--pgn-color-action-default-gray-700) !important; } -.text-dark-200 { - color: var(--pgn-color-dark-200) !important; +.text-gray-700 { + color: var(--pgn-color-gray-700) !important; } -a.text-dark-200:hover, -a.text-dark-200:focus { - color: var(--pgn-color-action-default-dark-200) !important; +a.text-gray-700:hover, +a.text-gray-700:focus { + color: var(--pgn-color-action-default-gray-700) !important; } -.border-dark-200 { - border-color: var(--pgn-color-dark-200) !important; +.border-gray-700 { + border-color: var(--pgn-color-gray-700) !important; } -.bg-dark-100 { - background-color: var(--pgn-color-dark-100) !important; +.bg-gray-800 { + background-color: var(--pgn-color-gray-800) !important; } -a.bg-dark-100:hover, -a.bg-dark-100:focus, -button.bg-dark-100:hover, -button.bg-dark-100:focus { - background-color: var(--pgn-color-action-default-dark-100) !important; -} - -.text-dark-100 { - color: var(--pgn-color-dark-100) !important; -} - -a.text-dark-100:hover, -a.text-dark-100:focus { - color: var(--pgn-color-action-default-dark-100) !important; -} - -.border-dark-100 { - border-color: var(--pgn-color-dark-100) !important; -} - -.bg-light { - background-color: var(--pgn-color-light-base) !important; -} - -a.bg-light:hover, -a.bg-light:focus, -button.bg-light:hover, -button.bg-light:focus { - background-color: var(--pgn-color-action-default-light-base) !important; +a.bg-gray-800:hover, +a.bg-gray-800:focus, +button.bg-gray-800:hover, +button.bg-gray-800:focus { + background-color: var(--pgn-color-action-default-gray-800) !important; } -.text-light { - color: var(--pgn-color-light-base) !important; +.text-gray-800 { + color: var(--pgn-color-gray-800) !important; } -a.text-light:hover, -a.text-light:focus { - color: var(--pgn-color-action-default-light-base) !important; +a.text-gray-800:hover, +a.text-gray-800:focus { + color: var(--pgn-color-action-default-gray-800) !important; } -.border-light { - border-color: var(--pgn-color-light-base) !important; +.border-gray-800 { + border-color: var(--pgn-color-gray-800) !important; } -.bg-light-900 { - background-color: var(--pgn-color-light-900) !important; +.bg-gray-900 { + background-color: var(--pgn-color-gray-900) !important; } -a.bg-light-900:hover, -a.bg-light-900:focus, -button.bg-light-900:hover, -button.bg-light-900:focus { - background-color: var(--pgn-color-action-default-light-900) !important; +a.bg-gray-900:hover, +a.bg-gray-900:focus, +button.bg-gray-900:hover, +button.bg-gray-900:focus { + background-color: var(--pgn-color-action-default-gray-900) !important; } -.text-light-900 { - color: var(--pgn-color-light-900) !important; +.text-gray-900 { + color: var(--pgn-color-gray-900) !important; } -a.text-light-900:hover, -a.text-light-900:focus { - color: var(--pgn-color-action-default-light-900) !important; +a.text-gray-900:hover, +a.text-gray-900:focus { + color: var(--pgn-color-action-default-gray-900) !important; } -.border-light-900 { - border-color: var(--pgn-color-light-900) !important; +.border-gray-900 { + border-color: var(--pgn-color-gray-900) !important; } -.bg-light-800 { - background-color: var(--pgn-color-light-800) !important; +.bg-gray { + background-color: var(--pgn-color-gray-base) !important; } -a.bg-light-800:hover, -a.bg-light-800:focus, -button.bg-light-800:hover, -button.bg-light-800:focus { - background-color: var(--pgn-color-action-default-light-800) !important; +a.bg-gray:hover, +a.bg-gray:focus, +button.bg-gray:hover, +button.bg-gray:focus { + background-color: var(--pgn-color-action-default-gray-base) !important; } -.text-light-800 { - color: var(--pgn-color-light-800) !important; +.text-gray { + color: var(--pgn-color-gray-base) !important; } -a.text-light-800:hover, -a.text-light-800:focus { - color: var(--pgn-color-action-default-light-800) !important; +a.text-gray:hover, +a.text-gray:focus { + color: var(--pgn-color-action-default-gray-base) !important; } -.border-light-800 { - border-color: var(--pgn-color-light-800) !important; +.border-gray { + border-color: var(--pgn-color-gray-base) !important; } -.bg-light-700 { - background-color: var(--pgn-color-light-700) !important; +.bg-primary-100 { + background-color: var(--pgn-color-primary-100) !important; } -a.bg-light-700:hover, -a.bg-light-700:focus, -button.bg-light-700:hover, -button.bg-light-700:focus { - background-color: var(--pgn-color-action-default-light-700) !important; +a.bg-primary-100:hover, +a.bg-primary-100:focus, +button.bg-primary-100:hover, +button.bg-primary-100:focus { + background-color: var(--pgn-color-action-default-primary-100) !important; } -.text-light-700 { - color: var(--pgn-color-light-700) !important; +.text-primary-100 { + color: var(--pgn-color-primary-100) !important; } -a.text-light-700:hover, -a.text-light-700:focus { - color: var(--pgn-color-action-default-light-700) !important; +a.text-primary-100:hover, +a.text-primary-100:focus { + color: var(--pgn-color-action-default-primary-100) !important; } -.border-light-700 { - border-color: var(--pgn-color-light-700) !important; +.border-primary-100 { + border-color: var(--pgn-color-primary-100) !important; } -.bg-light-600 { - background-color: var(--pgn-color-light-600) !important; +.bg-primary-200 { + background-color: var(--pgn-color-primary-200) !important; } -a.bg-light-600:hover, -a.bg-light-600:focus, -button.bg-light-600:hover, -button.bg-light-600:focus { - background-color: var(--pgn-color-action-default-light-600) !important; +a.bg-primary-200:hover, +a.bg-primary-200:focus, +button.bg-primary-200:hover, +button.bg-primary-200:focus { + background-color: var(--pgn-color-action-default-primary-200) !important; } -.text-light-600 { - color: var(--pgn-color-light-600) !important; +.text-primary-200 { + color: var(--pgn-color-primary-200) !important; } -a.text-light-600:hover, -a.text-light-600:focus { - color: var(--pgn-color-action-default-light-600) !important; +a.text-primary-200:hover, +a.text-primary-200:focus { + color: var(--pgn-color-action-default-primary-200) !important; } -.border-light-600 { - border-color: var(--pgn-color-light-600) !important; +.border-primary-200 { + border-color: var(--pgn-color-primary-200) !important; } -.bg-light-500 { - background-color: var(--pgn-color-light-500) !important; +.bg-primary-300 { + background-color: var(--pgn-color-primary-300) !important; } -a.bg-light-500:hover, -a.bg-light-500:focus, -button.bg-light-500:hover, -button.bg-light-500:focus { - background-color: var(--pgn-color-action-default-light-500) !important; +a.bg-primary-300:hover, +a.bg-primary-300:focus, +button.bg-primary-300:hover, +button.bg-primary-300:focus { + background-color: var(--pgn-color-action-default-primary-300) !important; } -.text-light-500 { - color: var(--pgn-color-light-500) !important; +.text-primary-300 { + color: var(--pgn-color-primary-300) !important; } -a.text-light-500:hover, -a.text-light-500:focus { - color: var(--pgn-color-action-default-light-500) !important; +a.text-primary-300:hover, +a.text-primary-300:focus { + color: var(--pgn-color-action-default-primary-300) !important; } -.border-light-500 { - border-color: var(--pgn-color-light-500) !important; +.border-primary-300 { + border-color: var(--pgn-color-primary-300) !important; } -.bg-light-400 { - background-color: var(--pgn-color-light-400) !important; +.bg-primary-400 { + background-color: var(--pgn-color-primary-400) !important; } -a.bg-light-400:hover, -a.bg-light-400:focus, -button.bg-light-400:hover, -button.bg-light-400:focus { - background-color: var(--pgn-color-action-default-light-400) !important; +a.bg-primary-400:hover, +a.bg-primary-400:focus, +button.bg-primary-400:hover, +button.bg-primary-400:focus { + background-color: var(--pgn-color-action-default-primary-400) !important; } -.text-light-400 { - color: var(--pgn-color-light-400) !important; +.text-primary-400 { + color: var(--pgn-color-primary-400) !important; } -a.text-light-400:hover, -a.text-light-400:focus { - color: var(--pgn-color-action-default-light-400) !important; +a.text-primary-400:hover, +a.text-primary-400:focus { + color: var(--pgn-color-action-default-primary-400) !important; } -.border-light-400 { - border-color: var(--pgn-color-light-400) !important; +.border-primary-400 { + border-color: var(--pgn-color-primary-400) !important; } -.bg-light-300 { - background-color: var(--pgn-color-light-300) !important; +.bg-primary-500 { + background-color: var(--pgn-color-primary-500) !important; } -a.bg-light-300:hover, -a.bg-light-300:focus, -button.bg-light-300:hover, -button.bg-light-300:focus { - background-color: var(--pgn-color-action-default-light-300) !important; +a.bg-primary-500:hover, +a.bg-primary-500:focus, +button.bg-primary-500:hover, +button.bg-primary-500:focus { + background-color: var(--pgn-color-action-default-primary-500) !important; } -.text-light-300 { - color: var(--pgn-color-light-300) !important; +.text-primary-500 { + color: var(--pgn-color-primary-500) !important; } -a.text-light-300:hover, -a.text-light-300:focus { - color: var(--pgn-color-action-default-light-300) !important; +a.text-primary-500:hover, +a.text-primary-500:focus { + color: var(--pgn-color-action-default-primary-500) !important; } -.border-light-300 { - border-color: var(--pgn-color-light-300) !important; +.border-primary-500 { + border-color: var(--pgn-color-primary-500) !important; } -.bg-light-200 { - background-color: var(--pgn-color-light-200) !important; +.bg-primary-600 { + background-color: var(--pgn-color-primary-600) !important; } -a.bg-light-200:hover, -a.bg-light-200:focus, -button.bg-light-200:hover, -button.bg-light-200:focus { - background-color: var(--pgn-color-action-default-light-200) !important; +a.bg-primary-600:hover, +a.bg-primary-600:focus, +button.bg-primary-600:hover, +button.bg-primary-600:focus { + background-color: var(--pgn-color-action-default-primary-600) !important; } -.text-light-200 { - color: var(--pgn-color-light-200) !important; +.text-primary-600 { + color: var(--pgn-color-primary-600) !important; } -a.text-light-200:hover, -a.text-light-200:focus { - color: var(--pgn-color-action-default-light-200) !important; +a.text-primary-600:hover, +a.text-primary-600:focus { + color: var(--pgn-color-action-default-primary-600) !important; } -.border-light-200 { - border-color: var(--pgn-color-light-200) !important; +.border-primary-600 { + border-color: var(--pgn-color-primary-600) !important; } -.bg-light-100 { - background-color: var(--pgn-color-light-100) !important; +.bg-primary-700 { + background-color: var(--pgn-color-primary-700) !important; } -a.bg-light-100:hover, -a.bg-light-100:focus, -button.bg-light-100:hover, -button.bg-light-100:focus { - background-color: var(--pgn-color-action-default-light-100) !important; +a.bg-primary-700:hover, +a.bg-primary-700:focus, +button.bg-primary-700:hover, +button.bg-primary-700:focus { + background-color: var(--pgn-color-action-default-primary-700) !important; } -.text-light-100 { - color: var(--pgn-color-light-100) !important; +.text-primary-700 { + color: var(--pgn-color-primary-700) !important; } -a.text-light-100:hover, -a.text-light-100:focus { - color: var(--pgn-color-action-default-light-100) !important; +a.text-primary-700:hover, +a.text-primary-700:focus { + color: var(--pgn-color-action-default-primary-700) !important; } -.border-light-100 { - border-color: var(--pgn-color-light-100) !important; +.border-primary-700 { + border-color: var(--pgn-color-primary-700) !important; } -.bg-danger { - background-color: var(--pgn-color-danger-base) !important; +.bg-primary-800 { + background-color: var(--pgn-color-primary-800) !important; } -a.bg-danger:hover, -a.bg-danger:focus, -button.bg-danger:hover, -button.bg-danger:focus { - background-color: var(--pgn-color-action-default-danger-base) !important; +a.bg-primary-800:hover, +a.bg-primary-800:focus, +button.bg-primary-800:hover, +button.bg-primary-800:focus { + background-color: var(--pgn-color-action-default-primary-800) !important; } -.text-danger { - color: var(--pgn-color-danger-base) !important; +.text-primary-800 { + color: var(--pgn-color-primary-800) !important; } -a.text-danger:hover, -a.text-danger:focus { - color: var(--pgn-color-action-default-danger-base) !important; +a.text-primary-800:hover, +a.text-primary-800:focus { + color: var(--pgn-color-action-default-primary-800) !important; } -.border-danger { - border-color: var(--pgn-color-danger-base) !important; +.border-primary-800 { + border-color: var(--pgn-color-primary-800) !important; } -.bg-danger-900 { - background-color: var(--pgn-color-danger-900) !important; +.bg-primary-900 { + background-color: var(--pgn-color-primary-900) !important; } -a.bg-danger-900:hover, -a.bg-danger-900:focus, -button.bg-danger-900:hover, -button.bg-danger-900:focus { - background-color: var(--pgn-color-action-default-danger-900) !important; +a.bg-primary-900:hover, +a.bg-primary-900:focus, +button.bg-primary-900:hover, +button.bg-primary-900:focus { + background-color: var(--pgn-color-action-default-primary-900) !important; } -.text-danger-900 { - color: var(--pgn-color-danger-900) !important; +.text-primary-900 { + color: var(--pgn-color-primary-900) !important; } -a.text-danger-900:hover, -a.text-danger-900:focus { - color: var(--pgn-color-action-default-danger-900) !important; +a.text-primary-900:hover, +a.text-primary-900:focus { + color: var(--pgn-color-action-default-primary-900) !important; } -.border-danger-900 { - border-color: var(--pgn-color-danger-900) !important; +.border-primary-900 { + border-color: var(--pgn-color-primary-900) !important; } -.bg-danger-800 { - background-color: var(--pgn-color-danger-800) !important; +.bg-primary { + background-color: var(--pgn-color-primary-base) !important; } -a.bg-danger-800:hover, -a.bg-danger-800:focus, -button.bg-danger-800:hover, -button.bg-danger-800:focus { - background-color: var(--pgn-color-action-default-danger-800) !important; +a.bg-primary:hover, +a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: var(--pgn-color-action-default-primary-base) !important; } -.text-danger-800 { - color: var(--pgn-color-danger-800) !important; +.text-primary { + color: var(--pgn-color-primary-base) !important; } -a.text-danger-800:hover, -a.text-danger-800:focus { - color: var(--pgn-color-action-default-danger-800) !important; +a.text-primary:hover, +a.text-primary:focus { + color: var(--pgn-color-action-default-primary-base) !important; } -.border-danger-800 { - border-color: var(--pgn-color-danger-800) !important; +.border-primary { + border-color: var(--pgn-color-primary-base) !important; } -.bg-danger-700 { - background-color: var(--pgn-color-danger-700) !important; +.bg-secondary-100 { + background-color: var(--pgn-color-secondary-100) !important; } -a.bg-danger-700:hover, -a.bg-danger-700:focus, -button.bg-danger-700:hover, -button.bg-danger-700:focus { - background-color: var(--pgn-color-action-default-danger-700) !important; +a.bg-secondary-100:hover, +a.bg-secondary-100:focus, +button.bg-secondary-100:hover, +button.bg-secondary-100:focus { + background-color: var(--pgn-color-action-default-secondary-100) !important; } -.text-danger-700 { - color: var(--pgn-color-danger-700) !important; +.text-secondary-100 { + color: var(--pgn-color-secondary-100) !important; } -a.text-danger-700:hover, -a.text-danger-700:focus { - color: var(--pgn-color-action-default-danger-700) !important; +a.text-secondary-100:hover, +a.text-secondary-100:focus { + color: var(--pgn-color-action-default-secondary-100) !important; } -.border-danger-700 { - border-color: var(--pgn-color-danger-700) !important; +.border-secondary-100 { + border-color: var(--pgn-color-secondary-100) !important; } -.bg-danger-600 { - background-color: var(--pgn-color-danger-600) !important; +.bg-secondary-200 { + background-color: var(--pgn-color-secondary-200) !important; } -a.bg-danger-600:hover, -a.bg-danger-600:focus, -button.bg-danger-600:hover, -button.bg-danger-600:focus { - background-color: var(--pgn-color-action-default-danger-600) !important; +a.bg-secondary-200:hover, +a.bg-secondary-200:focus, +button.bg-secondary-200:hover, +button.bg-secondary-200:focus { + background-color: var(--pgn-color-action-default-secondary-200) !important; } -.text-danger-600 { - color: var(--pgn-color-danger-600) !important; +.text-secondary-200 { + color: var(--pgn-color-secondary-200) !important; } -a.text-danger-600:hover, -a.text-danger-600:focus { - color: var(--pgn-color-action-default-danger-600) !important; +a.text-secondary-200:hover, +a.text-secondary-200:focus { + color: var(--pgn-color-action-default-secondary-200) !important; } -.border-danger-600 { - border-color: var(--pgn-color-danger-600) !important; +.border-secondary-200 { + border-color: var(--pgn-color-secondary-200) !important; } -.bg-danger-500 { - background-color: var(--pgn-color-danger-500) !important; +.bg-secondary-300 { + background-color: var(--pgn-color-secondary-300) !important; } -a.bg-danger-500:hover, -a.bg-danger-500:focus, -button.bg-danger-500:hover, -button.bg-danger-500:focus { - background-color: var(--pgn-color-action-default-danger-500) !important; +a.bg-secondary-300:hover, +a.bg-secondary-300:focus, +button.bg-secondary-300:hover, +button.bg-secondary-300:focus { + background-color: var(--pgn-color-action-default-secondary-300) !important; } -.text-danger-500 { - color: var(--pgn-color-danger-500) !important; +.text-secondary-300 { + color: var(--pgn-color-secondary-300) !important; } -a.text-danger-500:hover, -a.text-danger-500:focus { - color: var(--pgn-color-action-default-danger-500) !important; +a.text-secondary-300:hover, +a.text-secondary-300:focus { + color: var(--pgn-color-action-default-secondary-300) !important; } -.border-danger-500 { - border-color: var(--pgn-color-danger-500) !important; +.border-secondary-300 { + border-color: var(--pgn-color-secondary-300) !important; } -.bg-danger-400 { - background-color: var(--pgn-color-danger-400) !important; +.bg-secondary-400 { + background-color: var(--pgn-color-secondary-400) !important; } -a.bg-danger-400:hover, -a.bg-danger-400:focus, -button.bg-danger-400:hover, -button.bg-danger-400:focus { - background-color: var(--pgn-color-action-default-danger-400) !important; +a.bg-secondary-400:hover, +a.bg-secondary-400:focus, +button.bg-secondary-400:hover, +button.bg-secondary-400:focus { + background-color: var(--pgn-color-action-default-secondary-400) !important; } -.text-danger-400 { - color: var(--pgn-color-danger-400) !important; +.text-secondary-400 { + color: var(--pgn-color-secondary-400) !important; } -a.text-danger-400:hover, -a.text-danger-400:focus { - color: var(--pgn-color-action-default-danger-400) !important; +a.text-secondary-400:hover, +a.text-secondary-400:focus { + color: var(--pgn-color-action-default-secondary-400) !important; } -.border-danger-400 { - border-color: var(--pgn-color-danger-400) !important; +.border-secondary-400 { + border-color: var(--pgn-color-secondary-400) !important; } -.bg-danger-300 { - background-color: var(--pgn-color-danger-300) !important; +.bg-secondary-500 { + background-color: var(--pgn-color-secondary-500) !important; } -a.bg-danger-300:hover, -a.bg-danger-300:focus, -button.bg-danger-300:hover, -button.bg-danger-300:focus { - background-color: var(--pgn-color-action-default-danger-300) !important; +a.bg-secondary-500:hover, +a.bg-secondary-500:focus, +button.bg-secondary-500:hover, +button.bg-secondary-500:focus { + background-color: var(--pgn-color-action-default-secondary-500) !important; } -.text-danger-300 { - color: var(--pgn-color-danger-300) !important; +.text-secondary-500 { + color: var(--pgn-color-secondary-500) !important; } -a.text-danger-300:hover, -a.text-danger-300:focus { - color: var(--pgn-color-action-default-danger-300) !important; +a.text-secondary-500:hover, +a.text-secondary-500:focus { + color: var(--pgn-color-action-default-secondary-500) !important; } -.border-danger-300 { - border-color: var(--pgn-color-danger-300) !important; +.border-secondary-500 { + border-color: var(--pgn-color-secondary-500) !important; } -.bg-danger-200 { - background-color: var(--pgn-color-danger-200) !important; +.bg-secondary-600 { + background-color: var(--pgn-color-secondary-600) !important; } -a.bg-danger-200:hover, -a.bg-danger-200:focus, -button.bg-danger-200:hover, -button.bg-danger-200:focus { - background-color: var(--pgn-color-action-default-danger-200) !important; +a.bg-secondary-600:hover, +a.bg-secondary-600:focus, +button.bg-secondary-600:hover, +button.bg-secondary-600:focus { + background-color: var(--pgn-color-action-default-secondary-600) !important; } -.text-danger-200 { - color: var(--pgn-color-danger-200) !important; +.text-secondary-600 { + color: var(--pgn-color-secondary-600) !important; } -a.text-danger-200:hover, -a.text-danger-200:focus { - color: var(--pgn-color-action-default-danger-200) !important; +a.text-secondary-600:hover, +a.text-secondary-600:focus { + color: var(--pgn-color-action-default-secondary-600) !important; } -.border-danger-200 { - border-color: var(--pgn-color-danger-200) !important; +.border-secondary-600 { + border-color: var(--pgn-color-secondary-600) !important; } -.bg-danger-100 { - background-color: var(--pgn-color-danger-100) !important; +.bg-secondary-700 { + background-color: var(--pgn-color-secondary-700) !important; } -a.bg-danger-100:hover, -a.bg-danger-100:focus, -button.bg-danger-100:hover, -button.bg-danger-100:focus { - background-color: var(--pgn-color-action-default-danger-100) !important; +a.bg-secondary-700:hover, +a.bg-secondary-700:focus, +button.bg-secondary-700:hover, +button.bg-secondary-700:focus { + background-color: var(--pgn-color-action-default-secondary-700) !important; } -.text-danger-100 { - color: var(--pgn-color-danger-100) !important; +.text-secondary-700 { + color: var(--pgn-color-secondary-700) !important; } -a.text-danger-100:hover, -a.text-danger-100:focus { - color: var(--pgn-color-action-default-danger-100) !important; +a.text-secondary-700:hover, +a.text-secondary-700:focus { + color: var(--pgn-color-action-default-secondary-700) !important; } -.border-danger-100 { - border-color: var(--pgn-color-danger-100) !important; +.border-secondary-700 { + border-color: var(--pgn-color-secondary-700) !important; } -.bg-warning { - background-color: var(--pgn-color-warning-base) !important; +.bg-secondary-800 { + background-color: var(--pgn-color-secondary-800) !important; } -a.bg-warning:hover, -a.bg-warning:focus, -button.bg-warning:hover, -button.bg-warning:focus { - background-color: var(--pgn-color-action-default-warning-base) !important; +a.bg-secondary-800:hover, +a.bg-secondary-800:focus, +button.bg-secondary-800:hover, +button.bg-secondary-800:focus { + background-color: var(--pgn-color-action-default-secondary-800) !important; } -.text-warning { - color: var(--pgn-color-warning-base) !important; +.text-secondary-800 { + color: var(--pgn-color-secondary-800) !important; } -a.text-warning:hover, -a.text-warning:focus { - color: var(--pgn-color-action-default-warning-base) !important; +a.text-secondary-800:hover, +a.text-secondary-800:focus { + color: var(--pgn-color-action-default-secondary-800) !important; } -.border-warning { - border-color: var(--pgn-color-warning-base) !important; +.border-secondary-800 { + border-color: var(--pgn-color-secondary-800) !important; } -.bg-warning-900 { - background-color: var(--pgn-color-warning-900) !important; +.bg-secondary-900 { + background-color: var(--pgn-color-secondary-900) !important; } -a.bg-warning-900:hover, -a.bg-warning-900:focus, -button.bg-warning-900:hover, -button.bg-warning-900:focus { - background-color: var(--pgn-color-action-default-warning-900) !important; +a.bg-secondary-900:hover, +a.bg-secondary-900:focus, +button.bg-secondary-900:hover, +button.bg-secondary-900:focus { + background-color: var(--pgn-color-action-default-secondary-900) !important; } -.text-warning-900 { - color: var(--pgn-color-warning-900) !important; +.text-secondary-900 { + color: var(--pgn-color-secondary-900) !important; } -a.text-warning-900:hover, -a.text-warning-900:focus { - color: var(--pgn-color-action-default-warning-900) !important; +a.text-secondary-900:hover, +a.text-secondary-900:focus { + color: var(--pgn-color-action-default-secondary-900) !important; } -.border-warning-900 { - border-color: var(--pgn-color-warning-900) !important; +.border-secondary-900 { + border-color: var(--pgn-color-secondary-900) !important; } -.bg-warning-800 { - background-color: var(--pgn-color-warning-800) !important; +.bg-secondary { + background-color: var(--pgn-color-secondary-base) !important; } -a.bg-warning-800:hover, -a.bg-warning-800:focus, -button.bg-warning-800:hover, -button.bg-warning-800:focus { - background-color: var(--pgn-color-action-default-warning-800) !important; +a.bg-secondary:hover, +a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { + background-color: var(--pgn-color-action-default-secondary-base) !important; } -.text-warning-800 { - color: var(--pgn-color-warning-800) !important; +.text-secondary { + color: var(--pgn-color-secondary-base) !important; } -a.text-warning-800:hover, -a.text-warning-800:focus { - color: var(--pgn-color-action-default-warning-800) !important; +a.text-secondary:hover, +a.text-secondary:focus { + color: var(--pgn-color-action-default-secondary-base) !important; } -.border-warning-800 { - border-color: var(--pgn-color-warning-800) !important; +.border-secondary { + border-color: var(--pgn-color-secondary-base) !important; } -.bg-warning-700 { - background-color: var(--pgn-color-warning-700) !important; +.bg-brand-100 { + background-color: var(--pgn-color-brand-100) !important; } -a.bg-warning-700:hover, -a.bg-warning-700:focus, -button.bg-warning-700:hover, -button.bg-warning-700:focus { - background-color: var(--pgn-color-action-default-warning-700) !important; +a.bg-brand-100:hover, +a.bg-brand-100:focus, +button.bg-brand-100:hover, +button.bg-brand-100:focus { + background-color: var(--pgn-color-action-default-brand-100) !important; } -.text-warning-700 { - color: var(--pgn-color-warning-700) !important; +.text-brand-100 { + color: var(--pgn-color-brand-100) !important; } -a.text-warning-700:hover, -a.text-warning-700:focus { - color: var(--pgn-color-action-default-warning-700) !important; +a.text-brand-100:hover, +a.text-brand-100:focus { + color: var(--pgn-color-action-default-brand-100) !important; } -.border-warning-700 { - border-color: var(--pgn-color-warning-700) !important; +.border-brand-100 { + border-color: var(--pgn-color-brand-100) !important; } -.bg-warning-600 { - background-color: var(--pgn-color-warning-600) !important; +.bg-brand-200 { + background-color: var(--pgn-color-brand-200) !important; } -a.bg-warning-600:hover, -a.bg-warning-600:focus, -button.bg-warning-600:hover, -button.bg-warning-600:focus { - background-color: var(--pgn-color-action-default-warning-600) !important; +a.bg-brand-200:hover, +a.bg-brand-200:focus, +button.bg-brand-200:hover, +button.bg-brand-200:focus { + background-color: var(--pgn-color-action-default-brand-200) !important; } -.text-warning-600 { - color: var(--pgn-color-warning-600) !important; +.text-brand-200 { + color: var(--pgn-color-brand-200) !important; } -a.text-warning-600:hover, -a.text-warning-600:focus { - color: var(--pgn-color-action-default-warning-600) !important; +a.text-brand-200:hover, +a.text-brand-200:focus { + color: var(--pgn-color-action-default-brand-200) !important; } -.border-warning-600 { - border-color: var(--pgn-color-warning-600) !important; +.border-brand-200 { + border-color: var(--pgn-color-brand-200) !important; } -.bg-warning-500 { - background-color: var(--pgn-color-warning-500) !important; +.bg-brand-300 { + background-color: var(--pgn-color-brand-300) !important; } -a.bg-warning-500:hover, -a.bg-warning-500:focus, -button.bg-warning-500:hover, -button.bg-warning-500:focus { - background-color: var(--pgn-color-action-default-warning-500) !important; +a.bg-brand-300:hover, +a.bg-brand-300:focus, +button.bg-brand-300:hover, +button.bg-brand-300:focus { + background-color: var(--pgn-color-action-default-brand-300) !important; } -.text-warning-500 { - color: var(--pgn-color-warning-500) !important; +.text-brand-300 { + color: var(--pgn-color-brand-300) !important; } -a.text-warning-500:hover, -a.text-warning-500:focus { - color: var(--pgn-color-action-default-warning-500) !important; +a.text-brand-300:hover, +a.text-brand-300:focus { + color: var(--pgn-color-action-default-brand-300) !important; } -.border-warning-500 { - border-color: var(--pgn-color-warning-500) !important; +.border-brand-300 { + border-color: var(--pgn-color-brand-300) !important; } -.bg-warning-400 { - background-color: var(--pgn-color-warning-400) !important; +.bg-brand-400 { + background-color: var(--pgn-color-brand-400) !important; } -a.bg-warning-400:hover, -a.bg-warning-400:focus, -button.bg-warning-400:hover, -button.bg-warning-400:focus { - background-color: var(--pgn-color-action-default-warning-400) !important; +a.bg-brand-400:hover, +a.bg-brand-400:focus, +button.bg-brand-400:hover, +button.bg-brand-400:focus { + background-color: var(--pgn-color-action-default-brand-400) !important; } -.text-warning-400 { - color: var(--pgn-color-warning-400) !important; +.text-brand-400 { + color: var(--pgn-color-brand-400) !important; } -a.text-warning-400:hover, -a.text-warning-400:focus { - color: var(--pgn-color-action-default-warning-400) !important; +a.text-brand-400:hover, +a.text-brand-400:focus { + color: var(--pgn-color-action-default-brand-400) !important; } -.border-warning-400 { - border-color: var(--pgn-color-warning-400) !important; +.border-brand-400 { + border-color: var(--pgn-color-brand-400) !important; } -.bg-warning-300 { - background-color: var(--pgn-color-warning-300) !important; +.bg-brand-500 { + background-color: var(--pgn-color-brand-500) !important; } -a.bg-warning-300:hover, -a.bg-warning-300:focus, -button.bg-warning-300:hover, -button.bg-warning-300:focus { - background-color: var(--pgn-color-action-default-warning-300) !important; +a.bg-brand-500:hover, +a.bg-brand-500:focus, +button.bg-brand-500:hover, +button.bg-brand-500:focus { + background-color: var(--pgn-color-action-default-brand-500) !important; } -.text-warning-300 { - color: var(--pgn-color-warning-300) !important; +.text-brand-500 { + color: var(--pgn-color-brand-500) !important; } -a.text-warning-300:hover, -a.text-warning-300:focus { - color: var(--pgn-color-action-default-warning-300) !important; +a.text-brand-500:hover, +a.text-brand-500:focus { + color: var(--pgn-color-action-default-brand-500) !important; } -.border-warning-300 { - border-color: var(--pgn-color-warning-300) !important; +.border-brand-500 { + border-color: var(--pgn-color-brand-500) !important; } -.bg-warning-200 { - background-color: var(--pgn-color-warning-200) !important; +.bg-brand-600 { + background-color: var(--pgn-color-brand-600) !important; } -a.bg-warning-200:hover, -a.bg-warning-200:focus, -button.bg-warning-200:hover, -button.bg-warning-200:focus { - background-color: var(--pgn-color-action-default-warning-200) !important; +a.bg-brand-600:hover, +a.bg-brand-600:focus, +button.bg-brand-600:hover, +button.bg-brand-600:focus { + background-color: var(--pgn-color-action-default-brand-600) !important; } -.text-warning-200 { - color: var(--pgn-color-warning-200) !important; +.text-brand-600 { + color: var(--pgn-color-brand-600) !important; } -a.text-warning-200:hover, -a.text-warning-200:focus { - color: var(--pgn-color-action-default-warning-200) !important; +a.text-brand-600:hover, +a.text-brand-600:focus { + color: var(--pgn-color-action-default-brand-600) !important; } -.border-warning-200 { - border-color: var(--pgn-color-warning-200) !important; +.border-brand-600 { + border-color: var(--pgn-color-brand-600) !important; } -.bg-warning-100 { - background-color: var(--pgn-color-warning-100) !important; +.bg-brand-700 { + background-color: var(--pgn-color-brand-700) !important; } -a.bg-warning-100:hover, -a.bg-warning-100:focus, -button.bg-warning-100:hover, -button.bg-warning-100:focus { - background-color: var(--pgn-color-action-default-warning-100) !important; +a.bg-brand-700:hover, +a.bg-brand-700:focus, +button.bg-brand-700:hover, +button.bg-brand-700:focus { + background-color: var(--pgn-color-action-default-brand-700) !important; } -.text-warning-100 { - color: var(--pgn-color-warning-100) !important; +.text-brand-700 { + color: var(--pgn-color-brand-700) !important; } -a.text-warning-100:hover, -a.text-warning-100:focus { - color: var(--pgn-color-action-default-warning-100) !important; +a.text-brand-700:hover, +a.text-brand-700:focus { + color: var(--pgn-color-action-default-brand-700) !important; } -.border-warning-100 { - border-color: var(--pgn-color-warning-100) !important; +.border-brand-700 { + border-color: var(--pgn-color-brand-700) !important; } -.bg-info { - background-color: var(--pgn-color-info-base) !important; +.bg-brand-800 { + background-color: var(--pgn-color-brand-800) !important; } -a.bg-info:hover, -a.bg-info:focus, -button.bg-info:hover, -button.bg-info:focus { - background-color: var(--pgn-color-action-default-info-base) !important; +a.bg-brand-800:hover, +a.bg-brand-800:focus, +button.bg-brand-800:hover, +button.bg-brand-800:focus { + background-color: var(--pgn-color-action-default-brand-800) !important; } -.text-info { - color: var(--pgn-color-info-base) !important; +.text-brand-800 { + color: var(--pgn-color-brand-800) !important; } -a.text-info:hover, -a.text-info:focus { - color: var(--pgn-color-action-default-info-base) !important; +a.text-brand-800:hover, +a.text-brand-800:focus { + color: var(--pgn-color-action-default-brand-800) !important; } -.border-info { - border-color: var(--pgn-color-info-base) !important; +.border-brand-800 { + border-color: var(--pgn-color-brand-800) !important; } -.bg-info-900 { - background-color: var(--pgn-color-info-900) !important; +.bg-brand-900 { + background-color: var(--pgn-color-brand-900) !important; } -a.bg-info-900:hover, -a.bg-info-900:focus, -button.bg-info-900:hover, -button.bg-info-900:focus { - background-color: var(--pgn-color-action-default-info-900) !important; +a.bg-brand-900:hover, +a.bg-brand-900:focus, +button.bg-brand-900:hover, +button.bg-brand-900:focus { + background-color: var(--pgn-color-action-default-brand-900) !important; } -.text-info-900 { - color: var(--pgn-color-info-900) !important; +.text-brand-900 { + color: var(--pgn-color-brand-900) !important; } -a.text-info-900:hover, -a.text-info-900:focus { - color: var(--pgn-color-action-default-info-900) !important; +a.text-brand-900:hover, +a.text-brand-900:focus { + color: var(--pgn-color-action-default-brand-900) !important; } -.border-info-900 { - border-color: var(--pgn-color-info-900) !important; +.border-brand-900 { + border-color: var(--pgn-color-brand-900) !important; } -.bg-info-800 { - background-color: var(--pgn-color-info-800) !important; +.bg-brand { + background-color: var(--pgn-color-brand-base) !important; } -a.bg-info-800:hover, -a.bg-info-800:focus, -button.bg-info-800:hover, -button.bg-info-800:focus { - background-color: var(--pgn-color-action-default-info-800) !important; +a.bg-brand:hover, +a.bg-brand:focus, +button.bg-brand:hover, +button.bg-brand:focus { + background-color: var(--pgn-color-action-default-brand-base) !important; } -.text-info-800 { - color: var(--pgn-color-info-800) !important; +.text-brand { + color: var(--pgn-color-brand-base) !important; } -a.text-info-800:hover, -a.text-info-800:focus { - color: var(--pgn-color-action-default-info-800) !important; +a.text-brand:hover, +a.text-brand:focus { + color: var(--pgn-color-action-default-brand-base) !important; } -.border-info-800 { - border-color: var(--pgn-color-info-800) !important; +.border-brand { + border-color: var(--pgn-color-brand-base) !important; } -.bg-info-700 { - background-color: var(--pgn-color-info-700) !important; +.bg-success-100 { + background-color: var(--pgn-color-success-100) !important; } -a.bg-info-700:hover, -a.bg-info-700:focus, -button.bg-info-700:hover, -button.bg-info-700:focus { - background-color: var(--pgn-color-action-default-info-700) !important; +a.bg-success-100:hover, +a.bg-success-100:focus, +button.bg-success-100:hover, +button.bg-success-100:focus { + background-color: var(--pgn-color-action-default-success-100) !important; } -.text-info-700 { - color: var(--pgn-color-info-700) !important; +.text-success-100 { + color: var(--pgn-color-success-100) !important; } -a.text-info-700:hover, -a.text-info-700:focus { - color: var(--pgn-color-action-default-info-700) !important; +a.text-success-100:hover, +a.text-success-100:focus { + color: var(--pgn-color-action-default-success-100) !important; } -.border-info-700 { - border-color: var(--pgn-color-info-700) !important; +.border-success-100 { + border-color: var(--pgn-color-success-100) !important; } -.bg-info-600 { - background-color: var(--pgn-color-info-600) !important; +.bg-success-200 { + background-color: var(--pgn-color-success-200) !important; } -a.bg-info-600:hover, -a.bg-info-600:focus, -button.bg-info-600:hover, -button.bg-info-600:focus { - background-color: var(--pgn-color-action-default-info-600) !important; +a.bg-success-200:hover, +a.bg-success-200:focus, +button.bg-success-200:hover, +button.bg-success-200:focus { + background-color: var(--pgn-color-action-default-success-200) !important; } -.text-info-600 { - color: var(--pgn-color-info-600) !important; +.text-success-200 { + color: var(--pgn-color-success-200) !important; } -a.text-info-600:hover, -a.text-info-600:focus { - color: var(--pgn-color-action-default-info-600) !important; +a.text-success-200:hover, +a.text-success-200:focus { + color: var(--pgn-color-action-default-success-200) !important; } -.border-info-600 { - border-color: var(--pgn-color-info-600) !important; +.border-success-200 { + border-color: var(--pgn-color-success-200) !important; } -.bg-info-500 { - background-color: var(--pgn-color-info-500) !important; +.bg-success-300 { + background-color: var(--pgn-color-success-300) !important; } -a.bg-info-500:hover, -a.bg-info-500:focus, -button.bg-info-500:hover, -button.bg-info-500:focus { - background-color: var(--pgn-color-action-default-info-500) !important; +a.bg-success-300:hover, +a.bg-success-300:focus, +button.bg-success-300:hover, +button.bg-success-300:focus { + background-color: var(--pgn-color-action-default-success-300) !important; } -.text-info-500 { - color: var(--pgn-color-info-500) !important; +.text-success-300 { + color: var(--pgn-color-success-300) !important; } -a.text-info-500:hover, -a.text-info-500:focus { - color: var(--pgn-color-action-default-info-500) !important; +a.text-success-300:hover, +a.text-success-300:focus { + color: var(--pgn-color-action-default-success-300) !important; } -.border-info-500 { - border-color: var(--pgn-color-info-500) !important; +.border-success-300 { + border-color: var(--pgn-color-success-300) !important; } -.bg-info-400 { - background-color: var(--pgn-color-info-400) !important; +.bg-success-400 { + background-color: var(--pgn-color-success-400) !important; } -a.bg-info-400:hover, -a.bg-info-400:focus, -button.bg-info-400:hover, -button.bg-info-400:focus { - background-color: var(--pgn-color-action-default-info-400) !important; +a.bg-success-400:hover, +a.bg-success-400:focus, +button.bg-success-400:hover, +button.bg-success-400:focus { + background-color: var(--pgn-color-action-default-success-400) !important; } -.text-info-400 { - color: var(--pgn-color-info-400) !important; +.text-success-400 { + color: var(--pgn-color-success-400) !important; } -a.text-info-400:hover, -a.text-info-400:focus { - color: var(--pgn-color-action-default-info-400) !important; +a.text-success-400:hover, +a.text-success-400:focus { + color: var(--pgn-color-action-default-success-400) !important; } -.border-info-400 { - border-color: var(--pgn-color-info-400) !important; +.border-success-400 { + border-color: var(--pgn-color-success-400) !important; } -.bg-info-300 { - background-color: var(--pgn-color-info-300) !important; +.bg-success-500 { + background-color: var(--pgn-color-success-500) !important; } -a.bg-info-300:hover, -a.bg-info-300:focus, -button.bg-info-300:hover, -button.bg-info-300:focus { - background-color: var(--pgn-color-action-default-info-300) !important; +a.bg-success-500:hover, +a.bg-success-500:focus, +button.bg-success-500:hover, +button.bg-success-500:focus { + background-color: var(--pgn-color-action-default-success-500) !important; } -.text-info-300 { - color: var(--pgn-color-info-300) !important; +.text-success-500 { + color: var(--pgn-color-success-500) !important; } -a.text-info-300:hover, -a.text-info-300:focus { - color: var(--pgn-color-action-default-info-300) !important; +a.text-success-500:hover, +a.text-success-500:focus { + color: var(--pgn-color-action-default-success-500) !important; } -.border-info-300 { - border-color: var(--pgn-color-info-300) !important; +.border-success-500 { + border-color: var(--pgn-color-success-500) !important; } -.bg-info-200 { - background-color: var(--pgn-color-info-200) !important; +.bg-success-600 { + background-color: var(--pgn-color-success-600) !important; } -a.bg-info-200:hover, -a.bg-info-200:focus, -button.bg-info-200:hover, -button.bg-info-200:focus { - background-color: var(--pgn-color-action-default-info-200) !important; +a.bg-success-600:hover, +a.bg-success-600:focus, +button.bg-success-600:hover, +button.bg-success-600:focus { + background-color: var(--pgn-color-action-default-success-600) !important; } -.text-info-200 { - color: var(--pgn-color-info-200) !important; +.text-success-600 { + color: var(--pgn-color-success-600) !important; } -a.text-info-200:hover, -a.text-info-200:focus { - color: var(--pgn-color-action-default-info-200) !important; +a.text-success-600:hover, +a.text-success-600:focus { + color: var(--pgn-color-action-default-success-600) !important; } -.border-info-200 { - border-color: var(--pgn-color-info-200) !important; +.border-success-600 { + border-color: var(--pgn-color-success-600) !important; } -.bg-info-100 { - background-color: var(--pgn-color-info-100) !important; +.bg-success-700 { + background-color: var(--pgn-color-success-700) !important; } -a.bg-info-100:hover, -a.bg-info-100:focus, -button.bg-info-100:hover, -button.bg-info-100:focus { - background-color: var(--pgn-color-action-default-info-100) !important; +a.bg-success-700:hover, +a.bg-success-700:focus, +button.bg-success-700:hover, +button.bg-success-700:focus { + background-color: var(--pgn-color-action-default-success-700) !important; } -.text-info-100 { - color: var(--pgn-color-info-100) !important; +.text-success-700 { + color: var(--pgn-color-success-700) !important; } -a.text-info-100:hover, -a.text-info-100:focus { - color: var(--pgn-color-action-default-info-100) !important; +a.text-success-700:hover, +a.text-success-700:focus { + color: var(--pgn-color-action-default-success-700) !important; } -.border-info-100 { - border-color: var(--pgn-color-info-100) !important; +.border-success-700 { + border-color: var(--pgn-color-success-700) !important; } -.bg-success { - background-color: var(--pgn-color-success-base) !important; +.bg-success-800 { + background-color: var(--pgn-color-success-800) !important; } -a.bg-success:hover, -a.bg-success:focus, -button.bg-success:hover, -button.bg-success:focus { - background-color: var(--pgn-color-action-default-success-base) !important; +a.bg-success-800:hover, +a.bg-success-800:focus, +button.bg-success-800:hover, +button.bg-success-800:focus { + background-color: var(--pgn-color-action-default-success-800) !important; } -.text-success { - color: var(--pgn-color-success-base) !important; +.text-success-800 { + color: var(--pgn-color-success-800) !important; } -a.text-success:hover, -a.text-success:focus { - color: var(--pgn-color-action-default-success-base) !important; +a.text-success-800:hover, +a.text-success-800:focus { + color: var(--pgn-color-action-default-success-800) !important; } -.border-success { - border-color: var(--pgn-color-success-base) !important; +.border-success-800 { + border-color: var(--pgn-color-success-800) !important; } .bg-success-900 { @@ -1246,1203 +1222,1227 @@ a.text-success-900:focus { border-color: var(--pgn-color-success-900) !important; } -.bg-success-800 { - background-color: var(--pgn-color-success-800) !important; +.bg-success { + background-color: var(--pgn-color-success-base) !important; } -a.bg-success-800:hover, -a.bg-success-800:focus, -button.bg-success-800:hover, -button.bg-success-800:focus { - background-color: var(--pgn-color-action-default-success-800) !important; +a.bg-success:hover, +a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { + background-color: var(--pgn-color-action-default-success-base) !important; } -.text-success-800 { - color: var(--pgn-color-success-800) !important; +.text-success { + color: var(--pgn-color-success-base) !important; } -a.text-success-800:hover, -a.text-success-800:focus { - color: var(--pgn-color-action-default-success-800) !important; +a.text-success:hover, +a.text-success:focus { + color: var(--pgn-color-action-default-success-base) !important; } -.border-success-800 { - border-color: var(--pgn-color-success-800) !important; +.border-success { + border-color: var(--pgn-color-success-base) !important; } -.bg-success-700 { - background-color: var(--pgn-color-success-700) !important; +.bg-info-100 { + background-color: var(--pgn-color-info-100) !important; } -a.bg-success-700:hover, -a.bg-success-700:focus, -button.bg-success-700:hover, -button.bg-success-700:focus { - background-color: var(--pgn-color-action-default-success-700) !important; +a.bg-info-100:hover, +a.bg-info-100:focus, +button.bg-info-100:hover, +button.bg-info-100:focus { + background-color: var(--pgn-color-action-default-info-100) !important; } -.text-success-700 { - color: var(--pgn-color-success-700) !important; +.text-info-100 { + color: var(--pgn-color-info-100) !important; } -a.text-success-700:hover, -a.text-success-700:focus { - color: var(--pgn-color-action-default-success-700) !important; +a.text-info-100:hover, +a.text-info-100:focus { + color: var(--pgn-color-action-default-info-100) !important; } -.border-success-700 { - border-color: var(--pgn-color-success-700) !important; +.border-info-100 { + border-color: var(--pgn-color-info-100) !important; } -.bg-success-600 { - background-color: var(--pgn-color-success-600) !important; +.bg-info-200 { + background-color: var(--pgn-color-info-200) !important; } -a.bg-success-600:hover, -a.bg-success-600:focus, -button.bg-success-600:hover, -button.bg-success-600:focus { - background-color: var(--pgn-color-action-default-success-600) !important; +a.bg-info-200:hover, +a.bg-info-200:focus, +button.bg-info-200:hover, +button.bg-info-200:focus { + background-color: var(--pgn-color-action-default-info-200) !important; } -.text-success-600 { - color: var(--pgn-color-success-600) !important; +.text-info-200 { + color: var(--pgn-color-info-200) !important; } -a.text-success-600:hover, -a.text-success-600:focus { - color: var(--pgn-color-action-default-success-600) !important; +a.text-info-200:hover, +a.text-info-200:focus { + color: var(--pgn-color-action-default-info-200) !important; } -.border-success-600 { - border-color: var(--pgn-color-success-600) !important; +.border-info-200 { + border-color: var(--pgn-color-info-200) !important; } -.bg-success-500 { - background-color: var(--pgn-color-success-500) !important; +.bg-info-300 { + background-color: var(--pgn-color-info-300) !important; } -a.bg-success-500:hover, -a.bg-success-500:focus, -button.bg-success-500:hover, -button.bg-success-500:focus { - background-color: var(--pgn-color-action-default-success-500) !important; +a.bg-info-300:hover, +a.bg-info-300:focus, +button.bg-info-300:hover, +button.bg-info-300:focus { + background-color: var(--pgn-color-action-default-info-300) !important; } -.text-success-500 { - color: var(--pgn-color-success-500) !important; +.text-info-300 { + color: var(--pgn-color-info-300) !important; } -a.text-success-500:hover, -a.text-success-500:focus { - color: var(--pgn-color-action-default-success-500) !important; +a.text-info-300:hover, +a.text-info-300:focus { + color: var(--pgn-color-action-default-info-300) !important; } -.border-success-500 { - border-color: var(--pgn-color-success-500) !important; +.border-info-300 { + border-color: var(--pgn-color-info-300) !important; } -.bg-success-400 { - background-color: var(--pgn-color-success-400) !important; +.bg-info-400 { + background-color: var(--pgn-color-info-400) !important; } -a.bg-success-400:hover, -a.bg-success-400:focus, -button.bg-success-400:hover, -button.bg-success-400:focus { - background-color: var(--pgn-color-action-default-success-400) !important; +a.bg-info-400:hover, +a.bg-info-400:focus, +button.bg-info-400:hover, +button.bg-info-400:focus { + background-color: var(--pgn-color-action-default-info-400) !important; +} + +.text-info-400 { + color: var(--pgn-color-info-400) !important; +} + +a.text-info-400:hover, +a.text-info-400:focus { + color: var(--pgn-color-action-default-info-400) !important; +} + +.border-info-400 { + border-color: var(--pgn-color-info-400) !important; +} + +.bg-info-500 { + background-color: var(--pgn-color-info-500) !important; +} + +a.bg-info-500:hover, +a.bg-info-500:focus, +button.bg-info-500:hover, +button.bg-info-500:focus { + background-color: var(--pgn-color-action-default-info-500) !important; } -.text-success-400 { - color: var(--pgn-color-success-400) !important; +.text-info-500 { + color: var(--pgn-color-info-500) !important; } -a.text-success-400:hover, -a.text-success-400:focus { - color: var(--pgn-color-action-default-success-400) !important; +a.text-info-500:hover, +a.text-info-500:focus { + color: var(--pgn-color-action-default-info-500) !important; } -.border-success-400 { - border-color: var(--pgn-color-success-400) !important; +.border-info-500 { + border-color: var(--pgn-color-info-500) !important; } -.bg-success-300 { - background-color: var(--pgn-color-success-300) !important; +.bg-info-600 { + background-color: var(--pgn-color-info-600) !important; } -a.bg-success-300:hover, -a.bg-success-300:focus, -button.bg-success-300:hover, -button.bg-success-300:focus { - background-color: var(--pgn-color-action-default-success-300) !important; +a.bg-info-600:hover, +a.bg-info-600:focus, +button.bg-info-600:hover, +button.bg-info-600:focus { + background-color: var(--pgn-color-action-default-info-600) !important; } -.text-success-300 { - color: var(--pgn-color-success-300) !important; +.text-info-600 { + color: var(--pgn-color-info-600) !important; } -a.text-success-300:hover, -a.text-success-300:focus { - color: var(--pgn-color-action-default-success-300) !important; +a.text-info-600:hover, +a.text-info-600:focus { + color: var(--pgn-color-action-default-info-600) !important; } -.border-success-300 { - border-color: var(--pgn-color-success-300) !important; +.border-info-600 { + border-color: var(--pgn-color-info-600) !important; } -.bg-success-200 { - background-color: var(--pgn-color-success-200) !important; +.bg-info-700 { + background-color: var(--pgn-color-info-700) !important; } -a.bg-success-200:hover, -a.bg-success-200:focus, -button.bg-success-200:hover, -button.bg-success-200:focus { - background-color: var(--pgn-color-action-default-success-200) !important; +a.bg-info-700:hover, +a.bg-info-700:focus, +button.bg-info-700:hover, +button.bg-info-700:focus { + background-color: var(--pgn-color-action-default-info-700) !important; } -.text-success-200 { - color: var(--pgn-color-success-200) !important; +.text-info-700 { + color: var(--pgn-color-info-700) !important; } -a.text-success-200:hover, -a.text-success-200:focus { - color: var(--pgn-color-action-default-success-200) !important; +a.text-info-700:hover, +a.text-info-700:focus { + color: var(--pgn-color-action-default-info-700) !important; } -.border-success-200 { - border-color: var(--pgn-color-success-200) !important; +.border-info-700 { + border-color: var(--pgn-color-info-700) !important; } -.bg-success-100 { - background-color: var(--pgn-color-success-100) !important; +.bg-info-800 { + background-color: var(--pgn-color-info-800) !important; } -a.bg-success-100:hover, -a.bg-success-100:focus, -button.bg-success-100:hover, -button.bg-success-100:focus { - background-color: var(--pgn-color-action-default-success-100) !important; +a.bg-info-800:hover, +a.bg-info-800:focus, +button.bg-info-800:hover, +button.bg-info-800:focus { + background-color: var(--pgn-color-action-default-info-800) !important; } -.text-success-100 { - color: var(--pgn-color-success-100) !important; +.text-info-800 { + color: var(--pgn-color-info-800) !important; } -a.text-success-100:hover, -a.text-success-100:focus { - color: var(--pgn-color-action-default-success-100) !important; +a.text-info-800:hover, +a.text-info-800:focus { + color: var(--pgn-color-action-default-info-800) !important; } -.border-success-100 { - border-color: var(--pgn-color-success-100) !important; +.border-info-800 { + border-color: var(--pgn-color-info-800) !important; } -.bg-brand { - background-color: var(--pgn-color-brand-base) !important; +.bg-info-900 { + background-color: var(--pgn-color-info-900) !important; } -a.bg-brand:hover, -a.bg-brand:focus, -button.bg-brand:hover, -button.bg-brand:focus { - background-color: var(--pgn-color-action-default-brand-base) !important; +a.bg-info-900:hover, +a.bg-info-900:focus, +button.bg-info-900:hover, +button.bg-info-900:focus { + background-color: var(--pgn-color-action-default-info-900) !important; } -.text-brand { - color: var(--pgn-color-brand-base) !important; +.text-info-900 { + color: var(--pgn-color-info-900) !important; } -a.text-brand:hover, -a.text-brand:focus { - color: var(--pgn-color-action-default-brand-base) !important; +a.text-info-900:hover, +a.text-info-900:focus { + color: var(--pgn-color-action-default-info-900) !important; } -.border-brand { - border-color: var(--pgn-color-brand-base) !important; +.border-info-900 { + border-color: var(--pgn-color-info-900) !important; } -.bg-brand-900 { - background-color: var(--pgn-color-brand-900) !important; +.bg-info { + background-color: var(--pgn-color-info-base) !important; } -a.bg-brand-900:hover, -a.bg-brand-900:focus, -button.bg-brand-900:hover, -button.bg-brand-900:focus { - background-color: var(--pgn-color-action-default-brand-900) !important; +a.bg-info:hover, +a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { + background-color: var(--pgn-color-action-default-info-base) !important; } -.text-brand-900 { - color: var(--pgn-color-brand-900) !important; +.text-info { + color: var(--pgn-color-info-base) !important; } -a.text-brand-900:hover, -a.text-brand-900:focus { - color: var(--pgn-color-action-default-brand-900) !important; +a.text-info:hover, +a.text-info:focus { + color: var(--pgn-color-action-default-info-base) !important; } -.border-brand-900 { - border-color: var(--pgn-color-brand-900) !important; +.border-info { + border-color: var(--pgn-color-info-base) !important; } -.bg-brand-800 { - background-color: var(--pgn-color-brand-800) !important; +.bg-warning-100 { + background-color: var(--pgn-color-warning-100) !important; } -a.bg-brand-800:hover, -a.bg-brand-800:focus, -button.bg-brand-800:hover, -button.bg-brand-800:focus { - background-color: var(--pgn-color-action-default-brand-800) !important; +a.bg-warning-100:hover, +a.bg-warning-100:focus, +button.bg-warning-100:hover, +button.bg-warning-100:focus { + background-color: var(--pgn-color-action-default-warning-100) !important; } -.text-brand-800 { - color: var(--pgn-color-brand-800) !important; +.text-warning-100 { + color: var(--pgn-color-warning-100) !important; } -a.text-brand-800:hover, -a.text-brand-800:focus { - color: var(--pgn-color-action-default-brand-800) !important; +a.text-warning-100:hover, +a.text-warning-100:focus { + color: var(--pgn-color-action-default-warning-100) !important; } -.border-brand-800 { - border-color: var(--pgn-color-brand-800) !important; +.border-warning-100 { + border-color: var(--pgn-color-warning-100) !important; } -.bg-brand-700 { - background-color: var(--pgn-color-brand-700) !important; +.bg-warning-200 { + background-color: var(--pgn-color-warning-200) !important; } -a.bg-brand-700:hover, -a.bg-brand-700:focus, -button.bg-brand-700:hover, -button.bg-brand-700:focus { - background-color: var(--pgn-color-action-default-brand-700) !important; +a.bg-warning-200:hover, +a.bg-warning-200:focus, +button.bg-warning-200:hover, +button.bg-warning-200:focus { + background-color: var(--pgn-color-action-default-warning-200) !important; } -.text-brand-700 { - color: var(--pgn-color-brand-700) !important; +.text-warning-200 { + color: var(--pgn-color-warning-200) !important; } -a.text-brand-700:hover, -a.text-brand-700:focus { - color: var(--pgn-color-action-default-brand-700) !important; +a.text-warning-200:hover, +a.text-warning-200:focus { + color: var(--pgn-color-action-default-warning-200) !important; } -.border-brand-700 { - border-color: var(--pgn-color-brand-700) !important; +.border-warning-200 { + border-color: var(--pgn-color-warning-200) !important; } -.bg-brand-600 { - background-color: var(--pgn-color-brand-600) !important; +.bg-warning-300 { + background-color: var(--pgn-color-warning-300) !important; } -a.bg-brand-600:hover, -a.bg-brand-600:focus, -button.bg-brand-600:hover, -button.bg-brand-600:focus { - background-color: var(--pgn-color-action-default-brand-600) !important; +a.bg-warning-300:hover, +a.bg-warning-300:focus, +button.bg-warning-300:hover, +button.bg-warning-300:focus { + background-color: var(--pgn-color-action-default-warning-300) !important; } -.text-brand-600 { - color: var(--pgn-color-brand-600) !important; +.text-warning-300 { + color: var(--pgn-color-warning-300) !important; } -a.text-brand-600:hover, -a.text-brand-600:focus { - color: var(--pgn-color-action-default-brand-600) !important; +a.text-warning-300:hover, +a.text-warning-300:focus { + color: var(--pgn-color-action-default-warning-300) !important; } -.border-brand-600 { - border-color: var(--pgn-color-brand-600) !important; +.border-warning-300 { + border-color: var(--pgn-color-warning-300) !important; } -.bg-brand-500 { - background-color: var(--pgn-color-brand-500) !important; +.bg-warning-400 { + background-color: var(--pgn-color-warning-400) !important; } -a.bg-brand-500:hover, -a.bg-brand-500:focus, -button.bg-brand-500:hover, -button.bg-brand-500:focus { - background-color: var(--pgn-color-action-default-brand-500) !important; +a.bg-warning-400:hover, +a.bg-warning-400:focus, +button.bg-warning-400:hover, +button.bg-warning-400:focus { + background-color: var(--pgn-color-action-default-warning-400) !important; } -.text-brand-500 { - color: var(--pgn-color-brand-500) !important; +.text-warning-400 { + color: var(--pgn-color-warning-400) !important; } -a.text-brand-500:hover, -a.text-brand-500:focus { - color: var(--pgn-color-action-default-brand-500) !important; +a.text-warning-400:hover, +a.text-warning-400:focus { + color: var(--pgn-color-action-default-warning-400) !important; } -.border-brand-500 { - border-color: var(--pgn-color-brand-500) !important; +.border-warning-400 { + border-color: var(--pgn-color-warning-400) !important; } -.bg-brand-400 { - background-color: var(--pgn-color-brand-400) !important; +.bg-warning-500 { + background-color: var(--pgn-color-warning-500) !important; } -a.bg-brand-400:hover, -a.bg-brand-400:focus, -button.bg-brand-400:hover, -button.bg-brand-400:focus { - background-color: var(--pgn-color-action-default-brand-400) !important; +a.bg-warning-500:hover, +a.bg-warning-500:focus, +button.bg-warning-500:hover, +button.bg-warning-500:focus { + background-color: var(--pgn-color-action-default-warning-500) !important; } -.text-brand-400 { - color: var(--pgn-color-brand-400) !important; +.text-warning-500 { + color: var(--pgn-color-warning-500) !important; } -a.text-brand-400:hover, -a.text-brand-400:focus { - color: var(--pgn-color-action-default-brand-400) !important; +a.text-warning-500:hover, +a.text-warning-500:focus { + color: var(--pgn-color-action-default-warning-500) !important; } -.border-brand-400 { - border-color: var(--pgn-color-brand-400) !important; +.border-warning-500 { + border-color: var(--pgn-color-warning-500) !important; } -.bg-brand-300 { - background-color: var(--pgn-color-brand-300) !important; +.bg-warning-600 { + background-color: var(--pgn-color-warning-600) !important; } -a.bg-brand-300:hover, -a.bg-brand-300:focus, -button.bg-brand-300:hover, -button.bg-brand-300:focus { - background-color: var(--pgn-color-action-default-brand-300) !important; +a.bg-warning-600:hover, +a.bg-warning-600:focus, +button.bg-warning-600:hover, +button.bg-warning-600:focus { + background-color: var(--pgn-color-action-default-warning-600) !important; } -.text-brand-300 { - color: var(--pgn-color-brand-300) !important; +.text-warning-600 { + color: var(--pgn-color-warning-600) !important; } -a.text-brand-300:hover, -a.text-brand-300:focus { - color: var(--pgn-color-action-default-brand-300) !important; +a.text-warning-600:hover, +a.text-warning-600:focus { + color: var(--pgn-color-action-default-warning-600) !important; } -.border-brand-300 { - border-color: var(--pgn-color-brand-300) !important; +.border-warning-600 { + border-color: var(--pgn-color-warning-600) !important; } -.bg-brand-200 { - background-color: var(--pgn-color-brand-200) !important; +.bg-warning-700 { + background-color: var(--pgn-color-warning-700) !important; } -a.bg-brand-200:hover, -a.bg-brand-200:focus, -button.bg-brand-200:hover, -button.bg-brand-200:focus { - background-color: var(--pgn-color-action-default-brand-200) !important; +a.bg-warning-700:hover, +a.bg-warning-700:focus, +button.bg-warning-700:hover, +button.bg-warning-700:focus { + background-color: var(--pgn-color-action-default-warning-700) !important; } -.text-brand-200 { - color: var(--pgn-color-brand-200) !important; +.text-warning-700 { + color: var(--pgn-color-warning-700) !important; } -a.text-brand-200:hover, -a.text-brand-200:focus { - color: var(--pgn-color-action-default-brand-200) !important; +a.text-warning-700:hover, +a.text-warning-700:focus { + color: var(--pgn-color-action-default-warning-700) !important; } -.border-brand-200 { - border-color: var(--pgn-color-brand-200) !important; +.border-warning-700 { + border-color: var(--pgn-color-warning-700) !important; } -.bg-brand-100 { - background-color: var(--pgn-color-brand-100) !important; +.bg-warning-800 { + background-color: var(--pgn-color-warning-800) !important; } -a.bg-brand-100:hover, -a.bg-brand-100:focus, -button.bg-brand-100:hover, -button.bg-brand-100:focus { - background-color: var(--pgn-color-action-default-brand-100) !important; +a.bg-warning-800:hover, +a.bg-warning-800:focus, +button.bg-warning-800:hover, +button.bg-warning-800:focus { + background-color: var(--pgn-color-action-default-warning-800) !important; } -.text-brand-100 { - color: var(--pgn-color-brand-100) !important; +.text-warning-800 { + color: var(--pgn-color-warning-800) !important; } -a.text-brand-100:hover, -a.text-brand-100:focus { - color: var(--pgn-color-action-default-brand-100) !important; +a.text-warning-800:hover, +a.text-warning-800:focus { + color: var(--pgn-color-action-default-warning-800) !important; } -.border-brand-100 { - border-color: var(--pgn-color-brand-100) !important; +.border-warning-800 { + border-color: var(--pgn-color-warning-800) !important; } -.bg-secondary { - background-color: var(--pgn-color-secondary-base) !important; +.bg-warning-900 { + background-color: var(--pgn-color-warning-900) !important; } -a.bg-secondary:hover, -a.bg-secondary:focus, -button.bg-secondary:hover, -button.bg-secondary:focus { - background-color: var(--pgn-color-action-default-secondary-base) !important; +a.bg-warning-900:hover, +a.bg-warning-900:focus, +button.bg-warning-900:hover, +button.bg-warning-900:focus { + background-color: var(--pgn-color-action-default-warning-900) !important; } -.text-secondary { - color: var(--pgn-color-secondary-base) !important; +.text-warning-900 { + color: var(--pgn-color-warning-900) !important; } -a.text-secondary:hover, -a.text-secondary:focus { - color: var(--pgn-color-action-default-secondary-base) !important; +a.text-warning-900:hover, +a.text-warning-900:focus { + color: var(--pgn-color-action-default-warning-900) !important; } -.border-secondary { - border-color: var(--pgn-color-secondary-base) !important; +.border-warning-900 { + border-color: var(--pgn-color-warning-900) !important; } -.bg-secondary-900 { - background-color: var(--pgn-color-secondary-900) !important; +.bg-warning { + background-color: var(--pgn-color-warning-base) !important; } -a.bg-secondary-900:hover, -a.bg-secondary-900:focus, -button.bg-secondary-900:hover, -button.bg-secondary-900:focus { - background-color: var(--pgn-color-action-default-secondary-900) !important; +a.bg-warning:hover, +a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { + background-color: var(--pgn-color-action-default-warning-base) !important; } -.text-secondary-900 { - color: var(--pgn-color-secondary-900) !important; +.text-warning { + color: var(--pgn-color-warning-base) !important; } -a.text-secondary-900:hover, -a.text-secondary-900:focus { - color: var(--pgn-color-action-default-secondary-900) !important; +a.text-warning:hover, +a.text-warning:focus { + color: var(--pgn-color-action-default-warning-base) !important; } -.border-secondary-900 { - border-color: var(--pgn-color-secondary-900) !important; +.border-warning { + border-color: var(--pgn-color-warning-base) !important; } -.bg-secondary-800 { - background-color: var(--pgn-color-secondary-800) !important; +.bg-danger-100 { + background-color: var(--pgn-color-danger-100) !important; } -a.bg-secondary-800:hover, -a.bg-secondary-800:focus, -button.bg-secondary-800:hover, -button.bg-secondary-800:focus { - background-color: var(--pgn-color-action-default-secondary-800) !important; +a.bg-danger-100:hover, +a.bg-danger-100:focus, +button.bg-danger-100:hover, +button.bg-danger-100:focus { + background-color: var(--pgn-color-action-default-danger-100) !important; } -.text-secondary-800 { - color: var(--pgn-color-secondary-800) !important; +.text-danger-100 { + color: var(--pgn-color-danger-100) !important; } -a.text-secondary-800:hover, -a.text-secondary-800:focus { - color: var(--pgn-color-action-default-secondary-800) !important; +a.text-danger-100:hover, +a.text-danger-100:focus { + color: var(--pgn-color-action-default-danger-100) !important; } -.border-secondary-800 { - border-color: var(--pgn-color-secondary-800) !important; +.border-danger-100 { + border-color: var(--pgn-color-danger-100) !important; } -.bg-secondary-700 { - background-color: var(--pgn-color-secondary-700) !important; +.bg-danger-200 { + background-color: var(--pgn-color-danger-200) !important; } -a.bg-secondary-700:hover, -a.bg-secondary-700:focus, -button.bg-secondary-700:hover, -button.bg-secondary-700:focus { - background-color: var(--pgn-color-action-default-secondary-700) !important; +a.bg-danger-200:hover, +a.bg-danger-200:focus, +button.bg-danger-200:hover, +button.bg-danger-200:focus { + background-color: var(--pgn-color-action-default-danger-200) !important; } -.text-secondary-700 { - color: var(--pgn-color-secondary-700) !important; +.text-danger-200 { + color: var(--pgn-color-danger-200) !important; } -a.text-secondary-700:hover, -a.text-secondary-700:focus { - color: var(--pgn-color-action-default-secondary-700) !important; +a.text-danger-200:hover, +a.text-danger-200:focus { + color: var(--pgn-color-action-default-danger-200) !important; } -.border-secondary-700 { - border-color: var(--pgn-color-secondary-700) !important; +.border-danger-200 { + border-color: var(--pgn-color-danger-200) !important; } -.bg-secondary-600 { - background-color: var(--pgn-color-secondary-600) !important; +.bg-danger-300 { + background-color: var(--pgn-color-danger-300) !important; } -a.bg-secondary-600:hover, -a.bg-secondary-600:focus, -button.bg-secondary-600:hover, -button.bg-secondary-600:focus { - background-color: var(--pgn-color-action-default-secondary-600) !important; +a.bg-danger-300:hover, +a.bg-danger-300:focus, +button.bg-danger-300:hover, +button.bg-danger-300:focus { + background-color: var(--pgn-color-action-default-danger-300) !important; } -.text-secondary-600 { - color: var(--pgn-color-secondary-600) !important; +.text-danger-300 { + color: var(--pgn-color-danger-300) !important; } -a.text-secondary-600:hover, -a.text-secondary-600:focus { - color: var(--pgn-color-action-default-secondary-600) !important; +a.text-danger-300:hover, +a.text-danger-300:focus { + color: var(--pgn-color-action-default-danger-300) !important; } -.border-secondary-600 { - border-color: var(--pgn-color-secondary-600) !important; +.border-danger-300 { + border-color: var(--pgn-color-danger-300) !important; } -.bg-secondary-500 { - background-color: var(--pgn-color-secondary-500) !important; +.bg-danger-400 { + background-color: var(--pgn-color-danger-400) !important; } -a.bg-secondary-500:hover, -a.bg-secondary-500:focus, -button.bg-secondary-500:hover, -button.bg-secondary-500:focus { - background-color: var(--pgn-color-action-default-secondary-500) !important; +a.bg-danger-400:hover, +a.bg-danger-400:focus, +button.bg-danger-400:hover, +button.bg-danger-400:focus { + background-color: var(--pgn-color-action-default-danger-400) !important; } -.text-secondary-500 { - color: var(--pgn-color-secondary-500) !important; +.text-danger-400 { + color: var(--pgn-color-danger-400) !important; } -a.text-secondary-500:hover, -a.text-secondary-500:focus { - color: var(--pgn-color-action-default-secondary-500) !important; +a.text-danger-400:hover, +a.text-danger-400:focus { + color: var(--pgn-color-action-default-danger-400) !important; } -.border-secondary-500 { - border-color: var(--pgn-color-secondary-500) !important; +.border-danger-400 { + border-color: var(--pgn-color-danger-400) !important; } -.bg-secondary-400 { - background-color: var(--pgn-color-secondary-400) !important; +.bg-danger-500 { + background-color: var(--pgn-color-danger-500) !important; } -a.bg-secondary-400:hover, -a.bg-secondary-400:focus, -button.bg-secondary-400:hover, -button.bg-secondary-400:focus { - background-color: var(--pgn-color-action-default-secondary-400) !important; +a.bg-danger-500:hover, +a.bg-danger-500:focus, +button.bg-danger-500:hover, +button.bg-danger-500:focus { + background-color: var(--pgn-color-action-default-danger-500) !important; } -.text-secondary-400 { - color: var(--pgn-color-secondary-400) !important; +.text-danger-500 { + color: var(--pgn-color-danger-500) !important; } -a.text-secondary-400:hover, -a.text-secondary-400:focus { - color: var(--pgn-color-action-default-secondary-400) !important; +a.text-danger-500:hover, +a.text-danger-500:focus { + color: var(--pgn-color-action-default-danger-500) !important; } -.border-secondary-400 { - border-color: var(--pgn-color-secondary-400) !important; +.border-danger-500 { + border-color: var(--pgn-color-danger-500) !important; } -.bg-secondary-300 { - background-color: var(--pgn-color-secondary-300) !important; +.bg-danger-600 { + background-color: var(--pgn-color-danger-600) !important; } -a.bg-secondary-300:hover, -a.bg-secondary-300:focus, -button.bg-secondary-300:hover, -button.bg-secondary-300:focus { - background-color: var(--pgn-color-action-default-secondary-300) !important; +a.bg-danger-600:hover, +a.bg-danger-600:focus, +button.bg-danger-600:hover, +button.bg-danger-600:focus { + background-color: var(--pgn-color-action-default-danger-600) !important; } -.text-secondary-300 { - color: var(--pgn-color-secondary-300) !important; +.text-danger-600 { + color: var(--pgn-color-danger-600) !important; } -a.text-secondary-300:hover, -a.text-secondary-300:focus { - color: var(--pgn-color-action-default-secondary-300) !important; +a.text-danger-600:hover, +a.text-danger-600:focus { + color: var(--pgn-color-action-default-danger-600) !important; } -.border-secondary-300 { - border-color: var(--pgn-color-secondary-300) !important; +.border-danger-600 { + border-color: var(--pgn-color-danger-600) !important; } -.bg-secondary-200 { - background-color: var(--pgn-color-secondary-200) !important; +.bg-danger-700 { + background-color: var(--pgn-color-danger-700) !important; } -a.bg-secondary-200:hover, -a.bg-secondary-200:focus, -button.bg-secondary-200:hover, -button.bg-secondary-200:focus { - background-color: var(--pgn-color-action-default-secondary-200) !important; +a.bg-danger-700:hover, +a.bg-danger-700:focus, +button.bg-danger-700:hover, +button.bg-danger-700:focus { + background-color: var(--pgn-color-action-default-danger-700) !important; } -.text-secondary-200 { - color: var(--pgn-color-secondary-200) !important; +.text-danger-700 { + color: var(--pgn-color-danger-700) !important; } -a.text-secondary-200:hover, -a.text-secondary-200:focus { - color: var(--pgn-color-action-default-secondary-200) !important; +a.text-danger-700:hover, +a.text-danger-700:focus { + color: var(--pgn-color-action-default-danger-700) !important; } -.border-secondary-200 { - border-color: var(--pgn-color-secondary-200) !important; +.border-danger-700 { + border-color: var(--pgn-color-danger-700) !important; } -.bg-secondary-100 { - background-color: var(--pgn-color-secondary-100) !important; +.bg-danger-800 { + background-color: var(--pgn-color-danger-800) !important; } -a.bg-secondary-100:hover, -a.bg-secondary-100:focus, -button.bg-secondary-100:hover, -button.bg-secondary-100:focus { - background-color: var(--pgn-color-action-default-secondary-100) !important; +a.bg-danger-800:hover, +a.bg-danger-800:focus, +button.bg-danger-800:hover, +button.bg-danger-800:focus { + background-color: var(--pgn-color-action-default-danger-800) !important; } -.text-secondary-100 { - color: var(--pgn-color-secondary-100) !important; +.text-danger-800 { + color: var(--pgn-color-danger-800) !important; } -a.text-secondary-100:hover, -a.text-secondary-100:focus { - color: var(--pgn-color-action-default-secondary-100) !important; +a.text-danger-800:hover, +a.text-danger-800:focus { + color: var(--pgn-color-action-default-danger-800) !important; } -.border-secondary-100 { - border-color: var(--pgn-color-secondary-100) !important; +.border-danger-800 { + border-color: var(--pgn-color-danger-800) !important; } -.bg-primary { - background-color: var(--pgn-color-primary-base) !important; +.bg-danger-900 { + background-color: var(--pgn-color-danger-900) !important; } -a.bg-primary:hover, -a.bg-primary:focus, -button.bg-primary:hover, -button.bg-primary:focus { - background-color: var(--pgn-color-action-default-primary-base) !important; +a.bg-danger-900:hover, +a.bg-danger-900:focus, +button.bg-danger-900:hover, +button.bg-danger-900:focus { + background-color: var(--pgn-color-action-default-danger-900) !important; } -.text-primary { - color: var(--pgn-color-primary-base) !important; +.text-danger-900 { + color: var(--pgn-color-danger-900) !important; } -a.text-primary:hover, -a.text-primary:focus { - color: var(--pgn-color-action-default-primary-base) !important; +a.text-danger-900:hover, +a.text-danger-900:focus { + color: var(--pgn-color-action-default-danger-900) !important; } -.border-primary { - border-color: var(--pgn-color-primary-base) !important; +.border-danger-900 { + border-color: var(--pgn-color-danger-900) !important; } -.bg-primary-900 { - background-color: var(--pgn-color-primary-900) !important; +.bg-danger { + background-color: var(--pgn-color-danger-base) !important; } -a.bg-primary-900:hover, -a.bg-primary-900:focus, -button.bg-primary-900:hover, -button.bg-primary-900:focus { - background-color: var(--pgn-color-action-default-primary-900) !important; +a.bg-danger:hover, +a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { + background-color: var(--pgn-color-action-default-danger-base) !important; } -.text-primary-900 { - color: var(--pgn-color-primary-900) !important; +.text-danger { + color: var(--pgn-color-danger-base) !important; } -a.text-primary-900:hover, -a.text-primary-900:focus { - color: var(--pgn-color-action-default-primary-900) !important; +a.text-danger:hover, +a.text-danger:focus { + color: var(--pgn-color-action-default-danger-base) !important; } -.border-primary-900 { - border-color: var(--pgn-color-primary-900) !important; +.border-danger { + border-color: var(--pgn-color-danger-base) !important; } -.bg-primary-800 { - background-color: var(--pgn-color-primary-800) !important; +.bg-light-100 { + background-color: var(--pgn-color-light-100) !important; } -a.bg-primary-800:hover, -a.bg-primary-800:focus, -button.bg-primary-800:hover, -button.bg-primary-800:focus { - background-color: var(--pgn-color-action-default-primary-800) !important; +a.bg-light-100:hover, +a.bg-light-100:focus, +button.bg-light-100:hover, +button.bg-light-100:focus { + background-color: var(--pgn-color-action-default-light-100) !important; } -.text-primary-800 { - color: var(--pgn-color-primary-800) !important; +.text-light-100 { + color: var(--pgn-color-light-100) !important; } -a.text-primary-800:hover, -a.text-primary-800:focus { - color: var(--pgn-color-action-default-primary-800) !important; +a.text-light-100:hover, +a.text-light-100:focus { + color: var(--pgn-color-action-default-light-100) !important; } -.border-primary-800 { - border-color: var(--pgn-color-primary-800) !important; +.border-light-100 { + border-color: var(--pgn-color-light-100) !important; } -.bg-primary-700 { - background-color: var(--pgn-color-primary-700) !important; +.bg-light-200 { + background-color: var(--pgn-color-light-200) !important; } -a.bg-primary-700:hover, -a.bg-primary-700:focus, -button.bg-primary-700:hover, -button.bg-primary-700:focus { - background-color: var(--pgn-color-action-default-primary-700) !important; +a.bg-light-200:hover, +a.bg-light-200:focus, +button.bg-light-200:hover, +button.bg-light-200:focus { + background-color: var(--pgn-color-action-default-light-200) !important; } -.text-primary-700 { - color: var(--pgn-color-primary-700) !important; +.text-light-200 { + color: var(--pgn-color-light-200) !important; } - -a.text-primary-700:hover, -a.text-primary-700:focus { - color: var(--pgn-color-action-default-primary-700) !important; + +a.text-light-200:hover, +a.text-light-200:focus { + color: var(--pgn-color-action-default-light-200) !important; } -.border-primary-700 { - border-color: var(--pgn-color-primary-700) !important; +.border-light-200 { + border-color: var(--pgn-color-light-200) !important; } -.bg-primary-600 { - background-color: var(--pgn-color-primary-600) !important; +.bg-light-300 { + background-color: var(--pgn-color-light-300) !important; } -a.bg-primary-600:hover, -a.bg-primary-600:focus, -button.bg-primary-600:hover, -button.bg-primary-600:focus { - background-color: var(--pgn-color-action-default-primary-600) !important; +a.bg-light-300:hover, +a.bg-light-300:focus, +button.bg-light-300:hover, +button.bg-light-300:focus { + background-color: var(--pgn-color-action-default-light-300) !important; } -.text-primary-600 { - color: var(--pgn-color-primary-600) !important; +.text-light-300 { + color: var(--pgn-color-light-300) !important; } -a.text-primary-600:hover, -a.text-primary-600:focus { - color: var(--pgn-color-action-default-primary-600) !important; +a.text-light-300:hover, +a.text-light-300:focus { + color: var(--pgn-color-action-default-light-300) !important; } -.border-primary-600 { - border-color: var(--pgn-color-primary-600) !important; +.border-light-300 { + border-color: var(--pgn-color-light-300) !important; } -.bg-primary-500 { - background-color: var(--pgn-color-primary-500) !important; +.bg-light-400 { + background-color: var(--pgn-color-light-400) !important; } -a.bg-primary-500:hover, -a.bg-primary-500:focus, -button.bg-primary-500:hover, -button.bg-primary-500:focus { - background-color: var(--pgn-color-action-default-primary-500) !important; +a.bg-light-400:hover, +a.bg-light-400:focus, +button.bg-light-400:hover, +button.bg-light-400:focus { + background-color: var(--pgn-color-action-default-light-400) !important; } -.text-primary-500 { - color: var(--pgn-color-primary-500) !important; +.text-light-400 { + color: var(--pgn-color-light-400) !important; } -a.text-primary-500:hover, -a.text-primary-500:focus { - color: var(--pgn-color-action-default-primary-500) !important; +a.text-light-400:hover, +a.text-light-400:focus { + color: var(--pgn-color-action-default-light-400) !important; } -.border-primary-500 { - border-color: var(--pgn-color-primary-500) !important; +.border-light-400 { + border-color: var(--pgn-color-light-400) !important; } -.bg-primary-400 { - background-color: var(--pgn-color-primary-400) !important; +.bg-light-500 { + background-color: var(--pgn-color-light-500) !important; } -a.bg-primary-400:hover, -a.bg-primary-400:focus, -button.bg-primary-400:hover, -button.bg-primary-400:focus { - background-color: var(--pgn-color-action-default-primary-400) !important; +a.bg-light-500:hover, +a.bg-light-500:focus, +button.bg-light-500:hover, +button.bg-light-500:focus { + background-color: var(--pgn-color-action-default-light-500) !important; } -.text-primary-400 { - color: var(--pgn-color-primary-400) !important; +.text-light-500 { + color: var(--pgn-color-light-500) !important; } -a.text-primary-400:hover, -a.text-primary-400:focus { - color: var(--pgn-color-action-default-primary-400) !important; +a.text-light-500:hover, +a.text-light-500:focus { + color: var(--pgn-color-action-default-light-500) !important; } -.border-primary-400 { - border-color: var(--pgn-color-primary-400) !important; +.border-light-500 { + border-color: var(--pgn-color-light-500) !important; } -.bg-primary-300 { - background-color: var(--pgn-color-primary-300) !important; +.bg-light-600 { + background-color: var(--pgn-color-light-600) !important; } -a.bg-primary-300:hover, -a.bg-primary-300:focus, -button.bg-primary-300:hover, -button.bg-primary-300:focus { - background-color: var(--pgn-color-action-default-primary-300) !important; +a.bg-light-600:hover, +a.bg-light-600:focus, +button.bg-light-600:hover, +button.bg-light-600:focus { + background-color: var(--pgn-color-action-default-light-600) !important; } -.text-primary-300 { - color: var(--pgn-color-primary-300) !important; +.text-light-600 { + color: var(--pgn-color-light-600) !important; } -a.text-primary-300:hover, -a.text-primary-300:focus { - color: var(--pgn-color-action-default-primary-300) !important; +a.text-light-600:hover, +a.text-light-600:focus { + color: var(--pgn-color-action-default-light-600) !important; } -.border-primary-300 { - border-color: var(--pgn-color-primary-300) !important; +.border-light-600 { + border-color: var(--pgn-color-light-600) !important; } -.bg-primary-200 { - background-color: var(--pgn-color-primary-200) !important; +.bg-light-700 { + background-color: var(--pgn-color-light-700) !important; } -a.bg-primary-200:hover, -a.bg-primary-200:focus, -button.bg-primary-200:hover, -button.bg-primary-200:focus { - background-color: var(--pgn-color-action-default-primary-200) !important; +a.bg-light-700:hover, +a.bg-light-700:focus, +button.bg-light-700:hover, +button.bg-light-700:focus { + background-color: var(--pgn-color-action-default-light-700) !important; } -.text-primary-200 { - color: var(--pgn-color-primary-200) !important; +.text-light-700 { + color: var(--pgn-color-light-700) !important; } -a.text-primary-200:hover, -a.text-primary-200:focus { - color: var(--pgn-color-action-default-primary-200) !important; +a.text-light-700:hover, +a.text-light-700:focus { + color: var(--pgn-color-action-default-light-700) !important; } -.border-primary-200 { - border-color: var(--pgn-color-primary-200) !important; +.border-light-700 { + border-color: var(--pgn-color-light-700) !important; } -.bg-primary-100 { - background-color: var(--pgn-color-primary-100) !important; +.bg-light-800 { + background-color: var(--pgn-color-light-800) !important; } -a.bg-primary-100:hover, -a.bg-primary-100:focus, -button.bg-primary-100:hover, -button.bg-primary-100:focus { - background-color: var(--pgn-color-action-default-primary-100) !important; +a.bg-light-800:hover, +a.bg-light-800:focus, +button.bg-light-800:hover, +button.bg-light-800:focus { + background-color: var(--pgn-color-action-default-light-800) !important; } -.text-primary-100 { - color: var(--pgn-color-primary-100) !important; +.text-light-800 { + color: var(--pgn-color-light-800) !important; } -a.text-primary-100:hover, -a.text-primary-100:focus { - color: var(--pgn-color-action-default-primary-100) !important; +a.text-light-800:hover, +a.text-light-800:focus { + color: var(--pgn-color-action-default-light-800) !important; } -.border-primary-100 { - border-color: var(--pgn-color-primary-100) !important; +.border-light-800 { + border-color: var(--pgn-color-light-800) !important; } -.bg-gray { - background-color: var(--pgn-color-gray-base) !important; +.bg-light-900 { + background-color: var(--pgn-color-light-900) !important; } -a.bg-gray:hover, -a.bg-gray:focus, -button.bg-gray:hover, -button.bg-gray:focus { - background-color: var(--pgn-color-action-default-gray-base) !important; +a.bg-light-900:hover, +a.bg-light-900:focus, +button.bg-light-900:hover, +button.bg-light-900:focus { + background-color: var(--pgn-color-action-default-light-900) !important; } -.text-gray { - color: var(--pgn-color-gray-base) !important; +.text-light-900 { + color: var(--pgn-color-light-900) !important; } -a.text-gray:hover, -a.text-gray:focus { - color: var(--pgn-color-action-default-gray-base) !important; +a.text-light-900:hover, +a.text-light-900:focus { + color: var(--pgn-color-action-default-light-900) !important; } -.border-gray { - border-color: var(--pgn-color-gray-base) !important; +.border-light-900 { + border-color: var(--pgn-color-light-900) !important; } -.bg-gray-900 { - background-color: var(--pgn-color-gray-900) !important; +.bg-light { + background-color: var(--pgn-color-light-base) !important; } -a.bg-gray-900:hover, -a.bg-gray-900:focus, -button.bg-gray-900:hover, -button.bg-gray-900:focus { - background-color: var(--pgn-color-action-default-gray-900) !important; +a.bg-light:hover, +a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { + background-color: var(--pgn-color-action-default-light-base) !important; } -.text-gray-900 { - color: var(--pgn-color-gray-900) !important; +.text-light { + color: var(--pgn-color-light-base) !important; } -a.text-gray-900:hover, -a.text-gray-900:focus { - color: var(--pgn-color-action-default-gray-900) !important; +a.text-light:hover, +a.text-light:focus { + color: var(--pgn-color-action-default-light-base) !important; } -.border-gray-900 { - border-color: var(--pgn-color-gray-900) !important; +.border-light { + border-color: var(--pgn-color-light-base) !important; } -.bg-gray-800 { - background-color: var(--pgn-color-gray-800) !important; +.bg-dark-100 { + background-color: var(--pgn-color-dark-100) !important; } -a.bg-gray-800:hover, -a.bg-gray-800:focus, -button.bg-gray-800:hover, -button.bg-gray-800:focus { - background-color: var(--pgn-color-action-default-gray-800) !important; +a.bg-dark-100:hover, +a.bg-dark-100:focus, +button.bg-dark-100:hover, +button.bg-dark-100:focus { + background-color: var(--pgn-color-action-default-dark-100) !important; } -.text-gray-800 { - color: var(--pgn-color-gray-800) !important; +.text-dark-100 { + color: var(--pgn-color-dark-100) !important; } -a.text-gray-800:hover, -a.text-gray-800:focus { - color: var(--pgn-color-action-default-gray-800) !important; +a.text-dark-100:hover, +a.text-dark-100:focus { + color: var(--pgn-color-action-default-dark-100) !important; } -.border-gray-800 { - border-color: var(--pgn-color-gray-800) !important; +.border-dark-100 { + border-color: var(--pgn-color-dark-100) !important; } -.bg-gray-700 { - background-color: var(--pgn-color-gray-700) !important; +.bg-dark-200 { + background-color: var(--pgn-color-dark-200) !important; } -a.bg-gray-700:hover, -a.bg-gray-700:focus, -button.bg-gray-700:hover, -button.bg-gray-700:focus { - background-color: var(--pgn-color-action-default-gray-700) !important; +a.bg-dark-200:hover, +a.bg-dark-200:focus, +button.bg-dark-200:hover, +button.bg-dark-200:focus { + background-color: var(--pgn-color-action-default-dark-200) !important; } -.text-gray-700 { - color: var(--pgn-color-gray-700) !important; +.text-dark-200 { + color: var(--pgn-color-dark-200) !important; } -a.text-gray-700:hover, -a.text-gray-700:focus { - color: var(--pgn-color-action-default-gray-700) !important; +a.text-dark-200:hover, +a.text-dark-200:focus { + color: var(--pgn-color-action-default-dark-200) !important; } -.border-gray-700 { - border-color: var(--pgn-color-gray-700) !important; +.border-dark-200 { + border-color: var(--pgn-color-dark-200) !important; } -.bg-gray-600 { - background-color: var(--pgn-color-gray-600) !important; +.bg-dark-300 { + background-color: var(--pgn-color-dark-300) !important; } -a.bg-gray-600:hover, -a.bg-gray-600:focus, -button.bg-gray-600:hover, -button.bg-gray-600:focus { - background-color: var(--pgn-color-action-default-gray-600) !important; +a.bg-dark-300:hover, +a.bg-dark-300:focus, +button.bg-dark-300:hover, +button.bg-dark-300:focus { + background-color: var(--pgn-color-action-default-dark-300) !important; } -.text-gray-600 { - color: var(--pgn-color-gray-600) !important; +.text-dark-300 { + color: var(--pgn-color-dark-300) !important; } -a.text-gray-600:hover, -a.text-gray-600:focus { - color: var(--pgn-color-action-default-gray-600) !important; +a.text-dark-300:hover, +a.text-dark-300:focus { + color: var(--pgn-color-action-default-dark-300) !important; } -.border-gray-600 { - border-color: var(--pgn-color-gray-600) !important; +.border-dark-300 { + border-color: var(--pgn-color-dark-300) !important; } -.bg-gray-500 { - background-color: var(--pgn-color-gray-500) !important; +.bg-dark-400 { + background-color: var(--pgn-color-dark-400) !important; } -a.bg-gray-500:hover, -a.bg-gray-500:focus, -button.bg-gray-500:hover, -button.bg-gray-500:focus { - background-color: var(--pgn-color-action-default-gray-500) !important; +a.bg-dark-400:hover, +a.bg-dark-400:focus, +button.bg-dark-400:hover, +button.bg-dark-400:focus { + background-color: var(--pgn-color-action-default-dark-400) !important; } -.text-gray-500 { - color: var(--pgn-color-gray-500) !important; +.text-dark-400 { + color: var(--pgn-color-dark-400) !important; } -a.text-gray-500:hover, -a.text-gray-500:focus { - color: var(--pgn-color-action-default-gray-500) !important; +a.text-dark-400:hover, +a.text-dark-400:focus { + color: var(--pgn-color-action-default-dark-400) !important; } -.border-gray-500 { - border-color: var(--pgn-color-gray-500) !important; +.border-dark-400 { + border-color: var(--pgn-color-dark-400) !important; } -.bg-gray-400 { - background-color: var(--pgn-color-gray-400) !important; +.bg-dark-500 { + background-color: var(--pgn-color-dark-500) !important; } -a.bg-gray-400:hover, -a.bg-gray-400:focus, -button.bg-gray-400:hover, -button.bg-gray-400:focus { - background-color: var(--pgn-color-action-default-gray-400) !important; +a.bg-dark-500:hover, +a.bg-dark-500:focus, +button.bg-dark-500:hover, +button.bg-dark-500:focus { + background-color: var(--pgn-color-action-default-dark-500) !important; } -.text-gray-400 { - color: var(--pgn-color-gray-400) !important; +.text-dark-500 { + color: var(--pgn-color-dark-500) !important; } -a.text-gray-400:hover, -a.text-gray-400:focus { - color: var(--pgn-color-action-default-gray-400) !important; +a.text-dark-500:hover, +a.text-dark-500:focus { + color: var(--pgn-color-action-default-dark-500) !important; } -.border-gray-400 { - border-color: var(--pgn-color-gray-400) !important; +.border-dark-500 { + border-color: var(--pgn-color-dark-500) !important; } -.bg-gray-300 { - background-color: var(--pgn-color-gray-300) !important; +.bg-dark-600 { + background-color: var(--pgn-color-dark-600) !important; } -a.bg-gray-300:hover, -a.bg-gray-300:focus, -button.bg-gray-300:hover, -button.bg-gray-300:focus { - background-color: var(--pgn-color-action-default-gray-300) !important; +a.bg-dark-600:hover, +a.bg-dark-600:focus, +button.bg-dark-600:hover, +button.bg-dark-600:focus { + background-color: var(--pgn-color-action-default-dark-600) !important; } -.text-gray-300 { - color: var(--pgn-color-gray-300) !important; +.text-dark-600 { + color: var(--pgn-color-dark-600) !important; } -a.text-gray-300:hover, -a.text-gray-300:focus { - color: var(--pgn-color-action-default-gray-300) !important; +a.text-dark-600:hover, +a.text-dark-600:focus { + color: var(--pgn-color-action-default-dark-600) !important; } -.border-gray-300 { - border-color: var(--pgn-color-gray-300) !important; +.border-dark-600 { + border-color: var(--pgn-color-dark-600) !important; } -.bg-gray-200 { - background-color: var(--pgn-color-gray-200) !important; +.bg-dark-700 { + background-color: var(--pgn-color-dark-700) !important; } -a.bg-gray-200:hover, -a.bg-gray-200:focus, -button.bg-gray-200:hover, -button.bg-gray-200:focus { - background-color: var(--pgn-color-action-default-gray-200) !important; +a.bg-dark-700:hover, +a.bg-dark-700:focus, +button.bg-dark-700:hover, +button.bg-dark-700:focus { + background-color: var(--pgn-color-action-default-dark-700) !important; } -.text-gray-200 { - color: var(--pgn-color-gray-200) !important; +.text-dark-700 { + color: var(--pgn-color-dark-700) !important; } -a.text-gray-200:hover, -a.text-gray-200:focus { - color: var(--pgn-color-action-default-gray-200) !important; +a.text-dark-700:hover, +a.text-dark-700:focus { + color: var(--pgn-color-action-default-dark-700) !important; } -.border-gray-200 { - border-color: var(--pgn-color-gray-200) !important; +.border-dark-700 { + border-color: var(--pgn-color-dark-700) !important; } -.bg-gray-100 { - background-color: var(--pgn-color-gray-100) !important; +.bg-dark-800 { + background-color: var(--pgn-color-dark-800) !important; } -a.bg-gray-100:hover, -a.bg-gray-100:focus, -button.bg-gray-100:hover, -button.bg-gray-100:focus { - background-color: var(--pgn-color-action-default-gray-100) !important; +a.bg-dark-800:hover, +a.bg-dark-800:focus, +button.bg-dark-800:hover, +button.bg-dark-800:focus { + background-color: var(--pgn-color-action-default-dark-800) !important; } -.text-gray-100 { - color: var(--pgn-color-gray-100) !important; +.text-dark-800 { + color: var(--pgn-color-dark-800) !important; } -a.text-gray-100:hover, -a.text-gray-100:focus { - color: var(--pgn-color-action-default-gray-100) !important; +a.text-dark-800:hover, +a.text-dark-800:focus { + color: var(--pgn-color-action-default-dark-800) !important; } -.border-gray-100 { - border-color: var(--pgn-color-gray-100) !important; +.border-dark-800 { + border-color: var(--pgn-color-dark-800) !important; } -.bg-accent-b { - background-color: var(--pgn-color-accent-b) !important; +.bg-dark-900 { + background-color: var(--pgn-color-dark-900) !important; } -a.bg-accent-b:hover, -a.bg-accent-b:focus, -button.bg-accent-b:hover, -button.bg-accent-b:focus { - background-color: var(--pgn-color-action-default-accent-b) !important; +a.bg-dark-900:hover, +a.bg-dark-900:focus, +button.bg-dark-900:hover, +button.bg-dark-900:focus { + background-color: var(--pgn-color-action-default-dark-900) !important; } -.text-accent-b { - color: var(--pgn-color-accent-b) !important; +.text-dark-900 { + color: var(--pgn-color-dark-900) !important; } -a.text-accent-b:hover, -a.text-accent-b:focus { - color: var(--pgn-color-action-default-accent-b) !important; +a.text-dark-900:hover, +a.text-dark-900:focus { + color: var(--pgn-color-action-default-dark-900) !important; } -.border-accent-b { - border-color: var(--pgn-color-accent-b) !important; +.border-dark-900 { + border-color: var(--pgn-color-dark-900) !important; } -.bg-accent-a { - background-color: var(--pgn-color-accent-a) !important; +.bg-dark { + background-color: var(--pgn-color-dark-base) !important; } -a.bg-accent-a:hover, -a.bg-accent-a:focus, -button.bg-accent-a:hover, -button.bg-accent-a:focus { - background-color: var(--pgn-color-action-default-accent-a) !important; +a.bg-dark:hover, +a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { + background-color: var(--pgn-color-action-default-dark-base) !important; } -.text-accent-a { - color: var(--pgn-color-accent-a) !important; +.text-dark { + color: var(--pgn-color-dark-base) !important; } -a.text-accent-a:hover, -a.text-accent-a:focus { - color: var(--pgn-color-action-default-accent-a) !important; +a.text-dark:hover, +a.text-dark:focus { + color: var(--pgn-color-action-default-dark-base) !important; } -.border-accent-a { - border-color: var(--pgn-color-accent-a) !important; +.border-dark { + border-color: var(--pgn-color-dark-base) !important; } diff --git a/tokens/css-utilities.js b/tokens/css-utilities.js index 761df148dc..ee9f3ba891 100644 --- a/tokens/css-utilities.js +++ b/tokens/css-utilities.js @@ -49,7 +49,7 @@ function borderColor(token) { `; } -export default { +module.exports = { bgVariant, textEmphasisVariant, borderColor, diff --git a/tokens/map-scss-to-css.js b/tokens/map-scss-to-css.js index 3c07bbb015..fb61a6e942 100644 --- a/tokens/map-scss-to-css.js +++ b/tokens/map-scss-to-css.js @@ -1,12 +1,11 @@ -import fs from 'fs'; -import path from 'path'; -import { fileURLToPath } from 'url'; -import { getSCSStoCSSMap, getFilesWithExtension } from './utils.js'; +const fs = require('fs'); +const path = require('path'); +const { getSCSStoCSSMap, getFilesWithExtension } = require('./utils'); -const filename = fileURLToPath(import.meta.url); -const dirname = path.dirname(filename); +// const filename = fileURLToPath(import.meta.url); +// const dirname = path.dirname(filename); -const BASE_PATH = path.resolve(dirname, './src'); +const BASE_PATH = path.resolve(__dirname, './src'); const TOKEN_PREFIX = '--pgn'; function mapSCSStoCSS(sourcePath) { @@ -25,4 +24,4 @@ function mapSCSStoCSS(sourcePath) { return SCSStoCSSMap; } -export default mapSCSStoCSS; +module.exports = mapSCSStoCSS; diff --git a/tokens/sass-helpers.js b/tokens/sass-helpers.js index e7b5031f52..466f67e67b 100644 --- a/tokens/sass-helpers.js +++ b/tokens/sass-helpers.js @@ -1,11 +1,7 @@ -import path from 'path'; -import fs from 'fs'; -import chroma from 'chroma-js'; -import chalk from 'chalk'; -import { fileURLToPath } from 'url'; - -const filename = fileURLToPath(import.meta.url); -const dirname = path.dirname(filename); +const path = require('path'); +const fs = require('fs'); +const chroma = require('chroma-js'); +const chalk = require('chalk'); /** * Javascript version of bootstrap's color-yiq function. Decides whether to return light color variant or dark one @@ -29,10 +25,10 @@ function colorYiq({ threshold, themeVariant = 'light', }) { - const defaultThresholdFile = fs.readFileSync(path.resolve(dirname, 'src/core/global', 'other.json'), 'utf8'); + const defaultThresholdFile = fs.readFileSync(path.resolve(__dirname, 'src/core/global', 'other.json'), 'utf8'); const defaultThreshold = JSON.parse(defaultThresholdFile)['yiq-contrasted-threshold']; - const defaultColorsFile = fs.readFileSync(path.resolve(dirname, `src/themes/${themeVariant}/global`, 'other.json'), 'utf8'); + const defaultColorsFile = fs.readFileSync(path.resolve(__dirname, `src/themes/${themeVariant}/global`, 'other.json'), 'utf8'); const { 'yiq-text-dark': defaultDark, 'yiq-text-light': defaultLight, @@ -95,7 +91,7 @@ function colorYiq({ const lighten = (color, hslPercent) => color.set('hsl.l', color.get('hsl.l') + hslPercent); const darken = (color, hslPercent) => lighten(color, -hslPercent); -export { +module.exports = { colorYiq, darken, lighten, diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index 7bce255ab4..f2006fa7ed 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -1,15 +1,11 @@ /** * This module creates and exports custom StyleDictionary instance for Paragon. */ -import * as toml from 'js-toml'; -import StyleDictionary from 'style-dictionary'; -import chroma from 'chroma-js'; -import { - fileHeader, sortByReference, usesReferences, getReferences, -} from 'style-dictionary/utils'; -import { colorYiq, darken, lighten } from './sass-helpers.js'; -import cssUtilities from './css-utilities.js'; -import { composeBreakpointName } from './utils.js'; +const toml = require('js-toml'); +const chroma = require('chroma-js'); +const { colorYiq, darken, lighten } = require('./sass-helpers'); +const cssUtilities = require('./css-utilities'); +const { composeBreakpointName } = require('./utils'); const colorTransform = (token, theme) => { const { @@ -66,10 +62,11 @@ 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 = ({ +const createCustomCSSVariables = async ({ formatterArgs, themeVariant, }) => { + const { sortByReference, usesReferences, getReferences } = (await import('style-dictionary/utils')); const { dictionary, options, file } = formatterArgs; const outputTokens = themeVariant ? dictionary.allTokens.filter(token => token.filePath.includes(themeVariant)) @@ -90,144 +87,148 @@ const createCustomCSSVariables = ({ return ` --${token.name}: ${$value};`; }).join('\n'); - // return `${fileHeader({ file })}:root {\n${variables}\n}\n`; return `:root {\n${variables}\n}\n`; }; -/** - * Transformer that applies 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), -}); - -/** - * 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); - }, -}); - -/** - * 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', - format: async ({ dictionary, file }) => { - const { utilities } = dictionary.tokens; - if (!utilities) { - return ''; - } +const initializeStyleDictionary = async () => { + const StyleDictionary = (await import('style-dictionary')).default; + const { getReferences } = (await import('style-dictionary/utils')); + + /** + * Transformer that applies 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), + }); + + /** + * 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); + }, + }); + + /** + * 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', + format: async ({ dictionary, file }) => { + const { utilities } = dictionary.tokens; + 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 = 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); + for (const token of tokens) { + // Get action token by reference + const ref = 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 = StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); + return utilityClasses; + }, + }); + + /** + * 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: ({ dictionary, file }) => { + 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 = StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); - return utilityClasses; - }, -}); - -/** - * 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: ({ dictionary, file }) => { - 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`; - } - } - - // return fileHeader({ file }) + customMediaVariables; - return customMediaVariables; - }, -}); -/** - * Custom file header for custom and built-in formatters. - */ -StyleDictionary.registerFileHeader({ - name: 'customFileHeader', - fileHeader: (defaultMessages = []) => { - return [ - '/*', - ' * IMPORTANT: This file is the result of assembling design tokens.', - ' * Do not edit directly.', - ' */', - '', - ]; - }, -}); + return customMediaVariables; + }, + }); + + /** + * Custom file header for custom and built-in formatters. + */ + StyleDictionary.registerFileHeader({ + name: 'customFileHeader', + fileHeader: (defaultMessages = []) => { + return [ + '/*', + ' * IMPORTANT: This file is the result of assembling design tokens.', + ' * Do not edit directly.', + ' */', + '', + ]; + }, + }); + + /** + * Registers a filter `isSource` that filters output to only include tokens + * that are marked as `isSource` in their metadata. + */ + StyleDictionary.registerFilter({ + name: 'isSource', + filter: token => token.isSource === true, + }); + + StyleDictionary.registerParser({ + name: 'toml-parser', + pattern: /\.toml$/, + parser: ({ contents }) => toml.load(contents), + }); + + return StyleDictionary; +}; -/** - * Registers a filter `isSource` that filters output to only include tokens - * that are marked as `isSource` in their metadata. - */ -StyleDictionary.registerFilter({ - name: 'isSource', - filter: token => token.isSource === true, -}); - -StyleDictionary.registerParser({ - name: 'toml-parser', - pattern: /\.toml$/, - parser: ({ contents }) => toml.load(contents), -}); - -export { - StyleDictionary, +module.exports = { + initializeStyleDictionary, createCustomCSSVariables, colorTransform, }; diff --git a/tokens/utils.js b/tokens/utils.js index 36f77cdabc..83ff09c7dc 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -1,6 +1,6 @@ -import fs from 'fs'; -import readline from 'readline'; -import path from 'path'; +const fs = require('fs'); +const readline = require('readline'); +const path = require('path'); function getFilesWithExtension(location, extension, files = [], excludeDirectories = []) { const content = fs.statSync(location); @@ -201,7 +201,7 @@ function composeBreakpointName(breakpointName, format) { return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`; } -export { +module.exports = { createIndexCssFile, getFilesWithExtension, getSCSStoCSSMap, From bb709752ed1b3ef1752ff053bbe75c62821b4d37 Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Thu, 22 Aug 2024 23:32:46 +0300 Subject: [PATCH 05/16] refactor: code refactoring --- tokens/map-scss-to-css.js | 3 --- tokens/src/core/alias/size.json | 2 +- tokens/src/core/components/Chip.json | 2 +- tokens/src/core/components/Tab.json | 2 +- tokens/src/core/components/Tabs.json | 2 +- tokens/src/core/components/general/headings.json | 2 +- tokens/src/themes/light/components/Annotation.json | 2 +- tokens/src/themes/light/components/Avatar.json | 2 +- tokens/src/themes/light/components/Badge.json | 2 +- tokens/src/themes/light/components/Button/brand.json | 2 +- tokens/src/themes/light/components/Button/core.json | 2 +- tokens/src/themes/light/components/Button/danger.json | 2 +- tokens/src/themes/light/components/Button/dark.json | 2 +- tokens/src/themes/light/components/Button/info.json | 2 +- tokens/src/themes/light/components/Button/light.json | 2 +- tokens/src/themes/light/components/Button/primary.json | 2 +- tokens/src/themes/light/components/Button/secondary.json | 2 +- tokens/src/themes/light/components/Button/success.json | 2 +- tokens/src/themes/light/components/Button/tertiary.json | 2 +- tokens/src/themes/light/components/Button/warning.json | 2 +- tokens/src/themes/light/components/Card.json | 2 +- tokens/src/themes/light/components/Carousel.json | 2 +- tokens/src/themes/light/components/Chip.json | 2 +- tokens/src/themes/light/components/Code.json | 2 +- tokens/src/themes/light/components/DataTable.json | 2 +- tokens/src/themes/light/components/Dropdown.json | 2 +- tokens/src/themes/light/components/Dropzone.json | 2 +- tokens/src/themes/light/components/Form/color.json | 2 +- tokens/src/themes/light/components/Form/elevation.json | 2 +- tokens/src/themes/light/components/Form/other.json | 2 +- tokens/src/themes/light/components/IconButton.json | 2 +- tokens/src/themes/light/components/Image.json | 2 +- tokens/src/themes/light/components/Menu.json | 2 +- tokens/src/themes/light/components/Modal.json | 2 +- tokens/src/themes/light/components/Nav.json | 2 +- tokens/src/themes/light/components/Navbar.json | 2 +- tokens/src/themes/light/components/OverflowScroll.json | 2 +- tokens/src/themes/light/components/PageBanner.json | 2 +- tokens/src/themes/light/components/Pagination.json | 2 +- tokens/src/themes/light/components/Popover.json | 2 +- tokens/src/themes/light/components/ProductTour.json | 2 +- tokens/src/themes/light/components/ProgressBar.json | 2 +- tokens/src/themes/light/components/Scrollable.json | 2 +- tokens/src/themes/light/components/SearchField.json | 2 +- tokens/src/themes/light/components/Sheet.json | 2 +- tokens/src/themes/light/components/Stepper.json | 2 +- tokens/src/themes/light/components/Sticky.json | 2 +- tokens/src/themes/light/components/Tab.json | 2 +- tokens/src/themes/light/components/Toast.json | 2 +- tokens/src/themes/light/components/general/body.json | 2 +- tokens/src/themes/light/components/general/headings.json | 2 +- tokens/src/themes/light/components/general/hr.json | 2 +- tokens/src/themes/light/components/general/input.json | 2 +- tokens/src/themes/light/components/general/link.json | 2 +- tokens/src/themes/light/components/general/list.json | 2 +- tokens/src/themes/light/global/other.json | 2 +- 56 files changed, 55 insertions(+), 58 deletions(-) diff --git a/tokens/map-scss-to-css.js b/tokens/map-scss-to-css.js index fb61a6e942..ebe6db6e33 100644 --- a/tokens/map-scss-to-css.js +++ b/tokens/map-scss-to-css.js @@ -2,9 +2,6 @@ const fs = require('fs'); const path = require('path'); const { getSCSStoCSSMap, getFilesWithExtension } = require('./utils'); -// const filename = fileURLToPath(import.meta.url); -// const dirname = path.dirname(filename); - const BASE_PATH = path.resolve(__dirname, './src'); const TOKEN_PREFIX = '--pgn'; diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json index 1803af9df7..fe83f98a95 100644 --- a/tokens/src/core/alias/size.json +++ b/tokens/src/core/alias/size.json @@ -33,4 +33,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/core/components/Chip.json b/tokens/src/core/components/Chip.json index 26e63cc2f2..d6336153bf 100644 --- a/tokens/src/core/components/Chip.json +++ b/tokens/src/core/components/Chip.json @@ -62,4 +62,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json index d919d5461a..9f01b0ecb6 100644 --- a/tokens/src/core/components/Tab.json +++ b/tokens/src/core/components/Tab.json @@ -38,4 +38,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/core/components/Tabs.json b/tokens/src/core/components/Tabs.json index 457d387178..164c330ae0 100644 --- a/tokens/src/core/components/Tabs.json +++ b/tokens/src/core/components/Tabs.json @@ -24,4 +24,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json index 558fd39063..61abf746b1 100644 --- a/tokens/src/core/components/general/headings.json +++ b/tokens/src/core/components/general/headings.json @@ -29,4 +29,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json index d9abb08471..9cc0143d7f 100644 --- a/tokens/src/themes/light/components/Annotation.json +++ b/tokens/src/themes/light/components/Annotation.json @@ -57,4 +57,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Avatar.json b/tokens/src/themes/light/components/Avatar.json index 76ea7b7f38..8ae2570651 100644 --- a/tokens/src/themes/light/components/Avatar.json +++ b/tokens/src/themes/light/components/Avatar.json @@ -7,4 +7,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Badge.json b/tokens/src/themes/light/components/Badge.json index 63895d42ba..6316902d44 100644 --- a/tokens/src/themes/light/components/Badge.json +++ b/tokens/src/themes/light/components/Badge.json @@ -310,4 +310,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json index 0e9dfef451..67ef7787d8 100644 --- a/tokens/src/themes/light/components/Button/brand.json +++ b/tokens/src/themes/light/components/Button/brand.json @@ -348,4 +348,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json index 3db2ad51ec..6e0feb689f 100644 --- a/tokens/src/themes/light/components/Button/core.json +++ b/tokens/src/themes/light/components/Button/core.json @@ -32,4 +32,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json index 8068ac2927..b2bfcca609 100644 --- a/tokens/src/themes/light/components/Button/danger.json +++ b/tokens/src/themes/light/components/Button/danger.json @@ -348,4 +348,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json index 9eae6816b2..741cf4d3e7 100644 --- a/tokens/src/themes/light/components/Button/dark.json +++ b/tokens/src/themes/light/components/Button/dark.json @@ -348,4 +348,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json index 7e29af3414..263c989351 100644 --- a/tokens/src/themes/light/components/Button/info.json +++ b/tokens/src/themes/light/components/Button/info.json @@ -348,4 +348,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json index c085bb0bc2..c60f1f8c2c 100644 --- a/tokens/src/themes/light/components/Button/light.json +++ b/tokens/src/themes/light/components/Button/light.json @@ -348,4 +348,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json index 2fd9356059..2144823277 100644 --- a/tokens/src/themes/light/components/Button/primary.json +++ b/tokens/src/themes/light/components/Button/primary.json @@ -348,4 +348,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json index abd813854c..0ef720101f 100644 --- a/tokens/src/themes/light/components/Button/secondary.json +++ b/tokens/src/themes/light/components/Button/secondary.json @@ -348,4 +348,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json index 34bb30e6d0..8d8be39394 100644 --- a/tokens/src/themes/light/components/Button/success.json +++ b/tokens/src/themes/light/components/Button/success.json @@ -348,4 +348,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json index 678c3c52f3..ea506d852b 100644 --- a/tokens/src/themes/light/components/Button/tertiary.json +++ b/tokens/src/themes/light/components/Button/tertiary.json @@ -178,4 +178,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json index da8670382d..28d0d0b22d 100644 --- a/tokens/src/themes/light/components/Button/warning.json +++ b/tokens/src/themes/light/components/Button/warning.json @@ -348,4 +348,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json index 70e3f39778..eadb849324 100644 --- a/tokens/src/themes/light/components/Card.json +++ b/tokens/src/themes/light/components/Card.json @@ -48,4 +48,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Carousel.json b/tokens/src/themes/light/components/Carousel.json index 361b460f23..12b442ab4e 100644 --- a/tokens/src/themes/light/components/Carousel.json +++ b/tokens/src/themes/light/components/Carousel.json @@ -70,4 +70,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Chip.json b/tokens/src/themes/light/components/Chip.json index 9569e7a826..065bf4d66e 100644 --- a/tokens/src/themes/light/components/Chip.json +++ b/tokens/src/themes/light/components/Chip.json @@ -71,4 +71,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json index 951562d2d7..5101ce576f 100644 --- a/tokens/src/themes/light/components/Code.json +++ b/tokens/src/themes/light/components/Code.json @@ -33,4 +33,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json index 4189d5b536..386e446f7e 100644 --- a/tokens/src/themes/light/components/DataTable.json +++ b/tokens/src/themes/light/components/DataTable.json @@ -33,4 +33,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json index 25f0759be7..c642d433dc 100644 --- a/tokens/src/themes/light/components/Dropdown.json +++ b/tokens/src/themes/light/components/Dropdown.json @@ -75,4 +75,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json index 3cb957fbab..c6f4bdb016 100644 --- a/tokens/src/themes/light/components/Dropzone.json +++ b/tokens/src/themes/light/components/Dropzone.json @@ -39,4 +39,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json index 8f240d3af0..36b54d0c83 100644 --- a/tokens/src/themes/light/components/Form/color.json +++ b/tokens/src/themes/light/components/Form/color.json @@ -403,4 +403,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json index c447cef1b1..3ad3c6a081 100644 --- a/tokens/src/themes/light/components/Form/elevation.json +++ b/tokens/src/themes/light/components/Form/elevation.json @@ -82,4 +82,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json index 1d8af1f598..00bc6b1945 100644 --- a/tokens/src/themes/light/components/Form/other.json +++ b/tokens/src/themes/light/components/Form/other.json @@ -196,4 +196,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json index bd98ca479c..6147e55941 100644 --- a/tokens/src/themes/light/components/IconButton.json +++ b/tokens/src/themes/light/components/IconButton.json @@ -945,4 +945,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json index ab13b67868..0dd433e4c3 100644 --- a/tokens/src/themes/light/components/Image.json +++ b/tokens/src/themes/light/components/Image.json @@ -29,4 +29,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Menu.json b/tokens/src/themes/light/components/Menu.json index 5ac0fb64b1..3ae9d164a6 100644 --- a/tokens/src/themes/light/components/Menu.json +++ b/tokens/src/themes/light/components/Menu.json @@ -59,4 +59,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json index 5ce810930b..378f10905a 100644 --- a/tokens/src/themes/light/components/Modal.json +++ b/tokens/src/themes/light/components/Modal.json @@ -45,4 +45,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json index 1bfc5565d0..5640bd41fa 100644 --- a/tokens/src/themes/light/components/Nav.json +++ b/tokens/src/themes/light/components/Nav.json @@ -260,4 +260,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Navbar.json b/tokens/src/themes/light/components/Navbar.json index 2fc9dd090a..5c1aad57be 100644 --- a/tokens/src/themes/light/components/Navbar.json +++ b/tokens/src/themes/light/components/Navbar.json @@ -161,4 +161,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/OverflowScroll.json b/tokens/src/themes/light/components/OverflowScroll.json index c2bed16223..7f2bf5c8f6 100644 --- a/tokens/src/themes/light/components/OverflowScroll.json +++ b/tokens/src/themes/light/components/OverflowScroll.json @@ -8,4 +8,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/PageBanner.json b/tokens/src/themes/light/components/PageBanner.json index 90c960e069..6c15e45c66 100644 --- a/tokens/src/themes/light/components/PageBanner.json +++ b/tokens/src/themes/light/components/PageBanner.json @@ -42,4 +42,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json index ce56bf5132..3f2b244bc9 100644 --- a/tokens/src/themes/light/components/Pagination.json +++ b/tokens/src/themes/light/components/Pagination.json @@ -89,4 +89,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json index d0d9ca3987..b59607938f 100644 --- a/tokens/src/themes/light/components/Popover.json +++ b/tokens/src/themes/light/components/Popover.json @@ -101,4 +101,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json index 33ac58e927..3f816bf5ac 100644 --- a/tokens/src/themes/light/components/ProductTour.json +++ b/tokens/src/themes/light/components/ProductTour.json @@ -44,4 +44,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json index dd455eff70..2807bc0f12 100644 --- a/tokens/src/themes/light/components/ProgressBar.json +++ b/tokens/src/themes/light/components/ProgressBar.json @@ -37,4 +37,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Scrollable.json b/tokens/src/themes/light/components/Scrollable.json index f6198db474..a36be1026e 100644 --- a/tokens/src/themes/light/components/Scrollable.json +++ b/tokens/src/themes/light/components/Scrollable.json @@ -16,4 +16,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/SearchField.json b/tokens/src/themes/light/components/SearchField.json index 880575d6a5..caea66835a 100644 --- a/tokens/src/themes/light/components/SearchField.json +++ b/tokens/src/themes/light/components/SearchField.json @@ -43,4 +43,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Sheet.json b/tokens/src/themes/light/components/Sheet.json index 4fafae2999..eafeffbaf6 100644 --- a/tokens/src/themes/light/components/Sheet.json +++ b/tokens/src/themes/light/components/Sheet.json @@ -28,4 +28,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Stepper.json b/tokens/src/themes/light/components/Stepper.json index 88b99a773b..99c65c5f3a 100644 --- a/tokens/src/themes/light/components/Stepper.json +++ b/tokens/src/themes/light/components/Stepper.json @@ -44,4 +44,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Sticky.json b/tokens/src/themes/light/components/Sticky.json index 8715008662..496db6bf9e 100644 --- a/tokens/src/themes/light/components/Sticky.json +++ b/tokens/src/themes/light/components/Sticky.json @@ -14,4 +14,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Tab.json b/tokens/src/themes/light/components/Tab.json index 33f96028eb..4aeef32674 100644 --- a/tokens/src/themes/light/components/Tab.json +++ b/tokens/src/themes/light/components/Tab.json @@ -82,4 +82,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json index 2cd92a9b3d..790bd34350 100644 --- a/tokens/src/themes/light/components/Toast.json +++ b/tokens/src/themes/light/components/Toast.json @@ -51,4 +51,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/general/body.json b/tokens/src/themes/light/components/general/body.json index 7b98135948..1a35561b67 100644 --- a/tokens/src/themes/light/components/general/body.json +++ b/tokens/src/themes/light/components/general/body.json @@ -12,4 +12,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json index 1f79929bcd..4fdaa5a08f 100644 --- a/tokens/src/themes/light/components/general/headings.json +++ b/tokens/src/themes/light/components/general/headings.json @@ -8,4 +8,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/general/hr.json b/tokens/src/themes/light/components/general/hr.json index 976757699f..69911892f6 100644 --- a/tokens/src/themes/light/components/general/hr.json +++ b/tokens/src/themes/light/components/general/hr.json @@ -14,4 +14,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json index 21ef8a5b7d..76b14db86c 100644 --- a/tokens/src/themes/light/components/general/input.json +++ b/tokens/src/themes/light/components/general/input.json @@ -19,4 +19,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json index 9f972448eb..1682479b87 100644 --- a/tokens/src/themes/light/components/general/link.json +++ b/tokens/src/themes/light/components/general/link.json @@ -175,4 +175,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/components/general/list.json b/tokens/src/themes/light/components/general/list.json index 4b84c02765..6e5416cb27 100644 --- a/tokens/src/themes/light/components/general/list.json +++ b/tokens/src/themes/light/components/general/list.json @@ -72,4 +72,4 @@ } } } -} \ No newline at end of file +} diff --git a/tokens/src/themes/light/global/other.json b/tokens/src/themes/light/global/other.json index 7cf894ee96..360b2c1485 100644 --- a/tokens/src/themes/light/global/other.json +++ b/tokens/src/themes/light/global/other.json @@ -1,4 +1,4 @@ { "yiq-text-dark": "#454545", "yiq-text-light": "#FFFFFF" -} \ No newline at end of file +} From 0e1ef04c3ede3eacc8d209c90e268fa03d7f23cc Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Tue, 27 Aug 2024 22:46:33 +0300 Subject: [PATCH 06/16] refactor: corrected header --- lib/build-tokens.js | 6 +- styles/css/core/custom-media-breakpoints.css | 6 + styles/css/core/variables.css | 6 + styles/css/themes/light/utility-classes.css | 6 + styles/css/themes/light/variables.css | 6 + tokens/src/core/alias/size.json | 30 +- tokens/src/core/components/ActionRow.json | 10 +- tokens/src/core/components/Alert.json | 53 +- tokens/src/core/components/Annotation.json | 35 +- tokens/src/core/components/Avatar.json | 54 +- tokens/src/core/components/AvatarButton.json | 15 +- tokens/src/core/components/Badge.json | 47 +- tokens/src/core/components/Breadcrumb.json | 25 +- tokens/src/core/components/Bubble.json | 10 +- tokens/src/core/components/Button/core.json | 122 +- tokens/src/core/components/Card.json | 150 +-- tokens/src/core/components/Carousel.json | 62 +- tokens/src/core/components/Chip.json | 55 +- tokens/src/core/components/ChipCarousel.json | 15 +- tokens/src/core/components/CloseButton.json | 12 +- tokens/src/core/components/Code.json | 32 +- tokens/src/core/components/Collapsible.json | 45 +- tokens/src/core/components/ColorPicker.json | 10 +- tokens/src/core/components/Container.json | 25 +- tokens/src/core/components/DataTable.json | 46 +- tokens/src/core/components/Dropdown.json | 70 +- tokens/src/core/components/Dropzone.json | 15 +- tokens/src/core/components/Form/other.json | 20 +- tokens/src/core/components/Form/size.json | 204 +--- tokens/src/core/components/Form/spacing.json | 145 +-- .../src/core/components/Form/typography.json | 108 +- tokens/src/core/components/Icon.json | 25 +- tokens/src/core/components/IconButton.json | 15 +- tokens/src/core/components/Image.json | 20 +- tokens/src/core/components/Menu.json | 62 +- tokens/src/core/components/Modal.json | 75 +- tokens/src/core/components/Nav.json | 61 +- tokens/src/core/components/Navbar.json | 60 +- tokens/src/core/components/Pagination.json | 100 +- tokens/src/core/components/Popover.json | 70 +- tokens/src/core/components/ProductTour.json | 30 +- tokens/src/core/components/ProgressBar.json | 45 +- tokens/src/core/components/SearchField.json | 25 +- tokens/src/core/components/SelectableBox.json | 15 +- tokens/src/core/components/Sheet.json | 10 +- tokens/src/core/components/Spinner.json | 35 +- tokens/src/core/components/Stack.json | 5 +- tokens/src/core/components/Stepper.json | 50 +- tokens/src/core/components/Sticky.json | 5 +- tokens/src/core/components/Tab.json | 35 +- tokens/src/core/components/Tabs.json | 15 +- tokens/src/core/components/Toast.json | 40 +- tokens/src/core/components/Tooltip.json | 45 +- tokens/src/core/components/general/caret.json | 15 +- .../src/core/components/general/headings.json | 23 +- tokens/src/core/components/general/hr.json | 10 +- tokens/src/core/components/general/input.json | 76 +- tokens/src/core/components/general/link.json | 60 +- tokens/src/core/components/general/list.json | 30 +- tokens/src/core/components/general/text.json | 20 +- tokens/src/themes/light/alias/color.json | 19 +- tokens/src/themes/light/components/Alert.json | 70 +- .../themes/light/components/Annotation.json | 50 +- .../src/themes/light/components/Avatar.json | 4 +- tokens/src/themes/light/components/Badge.json | 272 +---- .../themes/light/components/Breadcrumb.json | 25 +- .../src/themes/light/components/Bubble.json | 40 +- .../themes/light/components/Button/brand.json | 57 +- .../themes/light/components/Button/core.json | 20 +- .../light/components/Button/danger.json | 67 +- .../themes/light/components/Button/dark.json | 57 +- .../themes/light/components/Button/info.json | 57 +- .../themes/light/components/Button/light.json | 57 +- .../light/components/Button/primary.json | 57 +- .../light/components/Button/secondary.json | 57 +- .../light/components/Button/success.json | 57 +- .../light/components/Button/tertiary.json | 162 +-- .../light/components/Button/warning.json | 57 +- tokens/src/themes/light/components/Card.json | 42 +- .../src/themes/light/components/Carousel.json | 41 +- tokens/src/themes/light/components/Chip.json | 60 +- .../themes/light/components/CloseButton.json | 10 +- tokens/src/themes/light/components/Code.json | 25 +- .../themes/light/components/DataTable.json | 22 +- .../src/themes/light/components/Dropdown.json | 64 +- .../src/themes/light/components/Dropzone.json | 35 +- .../themes/light/components/Form/color.json | 304 +---- .../light/components/Form/elevation.json | 65 +- .../themes/light/components/Form/other.json | 96 +- .../themes/light/components/IconButton.json | 1013 ++++------------- tokens/src/themes/light/components/Image.json | 19 +- tokens/src/themes/light/components/Menu.json | 50 +- tokens/src/themes/light/components/Modal.json | 22 +- tokens/src/themes/light/components/Nav.json | 185 +-- .../src/themes/light/components/Navbar.json | 104 +- .../themes/light/components/PageBanner.json | 40 +- .../themes/light/components/Pagination.json | 85 +- .../src/themes/light/components/Popover.json | 86 +- .../themes/light/components/ProductTour.json | 37 +- .../themes/light/components/ProgressBar.json | 30 +- .../themes/light/components/Scrollable.json | 7 +- .../themes/light/components/SearchField.json | 35 +- tokens/src/themes/light/components/Sheet.json | 14 +- .../src/themes/light/components/Stepper.json | 30 +- tokens/src/themes/light/components/Toast.json | 34 +- .../src/themes/light/components/Tooltip.json | 35 +- .../themes/light/components/general/body.json | 10 +- .../light/components/general/headings.json | 5 +- .../themes/light/components/general/hr.json | 7 +- .../light/components/general/input.json | 5 +- .../themes/light/components/general/link.json | 114 +- .../themes/light/components/general/list.json | 67 +- .../themes/light/components/general/text.json | 20 +- tokens/src/themes/light/global/color.json | 56 +- tokens/style-dictionary.js | 53 +- tokens/utils.js | 48 + 116 files changed, 1397 insertions(+), 5285 deletions(-) diff --git a/lib/build-tokens.js b/lib/build-tokens.js index af2272cfeb..19f9199d09 100755 --- a/lib/build-tokens.js +++ b/lib/build-tokens.js @@ -1,10 +1,6 @@ const path = require('path'); const minimist = require('minimist'); -const { - initializeStyleDictionary, - createCustomCSSVariables, - colorTransform, -} = require('../tokens/style-dictionary'); +const { initializeStyleDictionary, createCustomCSSVariables, colorTransform } = require('../tokens/style-dictionary'); const { createIndexCssFile } = require('../tokens/utils'); /** diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css index 00db050fdb..71df821c71 100644 --- a/styles/css/core/custom-media-breakpoints.css +++ b/styles/css/core/custom-media-breakpoints.css @@ -1,3 +1,9 @@ +/* + * IMPORTANT: This file is the result of assembling design tokens. + * Do not edit directly. + * Generated on Tue, 27 Aug 2024 17:14:44 GMT + */ + @custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem); @custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px); @custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px); diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index e314d7e39e..056692268f 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,3 +1,9 @@ +/* + * IMPORTANT: This file is the result of assembling design tokens. + * Do not edit directly. + * Generated on Tue, 27 Aug 2024 17:14:44 GMT + */ + :root { --pgn-theme-interval: 8%; --pgn-other-form-control-custom-file-content: Browse; diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css index af85f92e60..d3aee7ed00 100644 --- a/styles/css/themes/light/utility-classes.css +++ b/styles/css/themes/light/utility-classes.css @@ -1,3 +1,9 @@ +/* + * IMPORTANT: This file is the result of assembling design tokens. + * Do not edit directly. + * Generated on Tue, 27 Aug 2024 17:14:44 GMT + */ + .bg-accent-a { background-color: var(--pgn-color-accent-a) !important; } diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 97329a27fd..895537aa53 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -1,3 +1,9 @@ +/* + * IMPORTANT: This file is the result of assembling design tokens. + * Do not edit directly. + * Generated on Tue, 27 Aug 2024 17:14:44 GMT + */ + :root { --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text); --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base); diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json index fe83f98a95..d4cf3baef7 100644 --- a/tokens/src/core/alias/size.json +++ b/tokens/src/core/alias/size.json @@ -2,35 +2,15 @@ "$type": "dimension", "size": { "border": { - "width": { - "source": "$border-width", - "$value": "1px", - "$description": "Default border width." - }, + "width": { "source": "$border-width", "$value": "1px", "$description": "Default border width." }, "radius": { - "base": { - "source": "$border-radius", - "$value": ".375rem", - "$description": "Default border radius." - }, - "lg": { - "source": "$border-radius-lg", - "$value": ".425rem", - "$description": "Large border radius." - }, - "sm": { - "source": "$border-radius-sm", - "$value": ".25rem", - "$description": "Small border radius." - } + "base": { "source": "$border-radius", "$value": ".375rem", "$description": "Default border radius." }, + "lg": { "source": "$border-radius-lg", "$value": ".425rem", "$description": "Large border radius." }, + "sm": { "source": "$border-radius-sm", "$value": ".25rem", "$description": "Small border radius." } } }, "rounded": { - "pill": { - "source": "$rounded-pill", - "$value": "50rem", - "$description": "Pill border radius." - } + "pill": { "source": "$rounded-pill", "$value": "50rem", "$description": "Pill border radius." } } } } diff --git a/tokens/src/core/components/ActionRow.json b/tokens/src/core/components/ActionRow.json index 32d311ece9..2c65294d17 100644 --- a/tokens/src/core/components/ActionRow.json +++ b/tokens/src/core/components/ActionRow.json @@ -3,14 +3,8 @@ "spacing": { "action-row": { "gap": { - "x": { - "source": "$action-row-gap-x", - "$value": ".5rem" - }, - "y": { - "source": "$action-row-gap-y", - "$value": ".5rem" - } + "x": { "source": "$action-row-gap-x", "$value": ".5rem" }, + "y": { "source": "$action-row-gap-y", "$value": ".5rem" } } } } diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json index 6ca4f1aa04..133b336cc8 100644 --- a/tokens/src/core/components/Alert.json +++ b/tokens/src/core/components/Alert.json @@ -3,62 +3,29 @@ "$type": "dimension", "alert": { "padding": { - "y": { - "source": "$alert-padding-y", - "$value": "1.5rem" - }, - "x": { - "source": "$alert-padding-x", - "$value": "1.5rem" - } + "y": { "source": "$alert-padding-y", "$value": "1.5rem" }, + "x": { "source": "$alert-padding-x", "$value": "1.5rem" } }, - "margin-bottom": { - "source": "$alert-margin-bottom", - "$value": "1rem" - }, - "actions-gap": { - "source": "$alert-actions-gap", - "$value": "{spacing.spacer.3}" - }, - "icon-space": { - "source": "$alert-icon-space", - "$value": ".8rem" - } + "margin-bottom": { "source": "$alert-margin-bottom", "$value": "1rem" }, + "actions-gap": { "source": "$alert-actions-gap", "$value": "{spacing.spacer.3}" }, + "icon-space": { "source": "$alert-icon-space", "$value": ".8rem" } } }, "typography": { "alert": { "font": { - "weight-link": { - "source": "$alert-link-font-weight", - "$value": "{typography.font.weight.normal}", - "$type": "fontWeight" - }, - "size": { - "source": "$alert-font-size", - "$value": ".875rem", - "$type": "dimension" - } + "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" }, + "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" } }, - "line-height": { - "source": "$alert-line-height", - "$value": "1.5rem", - "$type": "dimension" - } + "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "dimension" } } }, "size": { "$type": "dimension", "alert": { "border": { - "radius": { - "source": "$alert-border-radius", - "$value": "{size.border.radius.base}" - }, - "width": { - "source": "$alert-border-width", - "$value": "0" - } + "radius": { "source": "$alert-border-radius", "$value": "{size.border.radius.base}" }, + "width": { "source": "$alert-border-width", "$value": "0" } } } } diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json index fe3272f836..4a20f37204 100644 --- a/tokens/src/core/components/Annotation.json +++ b/tokens/src/core/components/Annotation.json @@ -2,46 +2,25 @@ "$type": "dimension", "spacing": { "annotation": { - "padding": { - "source": "$annotation-padding", - "$value": ".5rem" - }, + "padding": { "source": "$annotation-padding", "$value": ".5rem" }, "arrow-side": { - "margin": { - "source": "$annotation-arrow-side-margin", - "$value": ".25rem" - } + "margin": { "source": "$annotation-arrow-side-margin", "$value": ".25rem" } } } }, "typography": { "annotation": { - "font-size": { - "source": "$annotation-font-size", - "$value": "{typography.font.size.sm}" - }, - "line-height": { - "source": "$annotation-line-height", - "$value": "{typography.line-height.sm}" - } + "font-size": { "source": "$annotation-font-size", "$value": "{typography.font.size.sm}" }, + "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}" } } }, "size": { "annotation": { "arrow-border": { - "width": { - "source": "$annotation-arrow-border-width", - "$value": ".5rem" - } + "width": { "source": "$annotation-arrow-border-width", "$value": ".5rem" } }, - "max-width": { - "source": "$annotation-max-width", - "$value": "18.75rem" - }, - "border-radius": { - "source": "$annotation-border-radius", - "$value": ".25rem" - } + "max-width": { "source": "$annotation-max-width", "$value": "18.75rem" }, + "border-radius": { "source": "$annotation-border-radius", "$value": ".25rem" } } } } diff --git a/tokens/src/core/components/Avatar.json b/tokens/src/core/components/Avatar.json index 1fe8ed60af..58bd3176ed 100644 --- a/tokens/src/core/components/Avatar.json +++ b/tokens/src/core/components/Avatar.json @@ -1,52 +1,16 @@ { "size": { "avatar": { - "base": { - "source": "$avatar-size", - "$value": "3rem", - "$type": "dimension" - }, - "xs": { - "source": "$avatar-size-xs", - "$value": "1.5rem", - "$type": "dimension" - }, - "sm": { - "source": "$avatar-size-sm", - "$value": "2.25rem", - "$type": "dimension" - }, - "lg": { - "source": "$avatar-size-lg", - "$value": "4rem", - "$type": "dimension" - }, - "xl": { - "source": "$avatar-size-xl", - "$value": "6rem", - "$type": "dimension" - }, - "xxl": { - "source": "$avatar-size-xxl", - "$value": "11.5rem", - "$type": "dimension" - }, - "huge": { - "source": "$avatar-size-huge", - "$value": "18.75rem", - "$type": "dimension" - }, + "base": { "source": "$avatar-size", "$value": "3rem", "$type": "dimension" }, + "xs": { "source": "$avatar-size-xs", "$value": "1.5rem", "$type": "dimension" }, + "sm": { "source": "$avatar-size-sm", "$value": "2.25rem", "$type": "dimension" }, + "lg": { "source": "$avatar-size-lg", "$value": "4rem", "$type": "dimension" }, + "xl": { "source": "$avatar-size-xl", "$value": "6rem", "$type": "dimension" }, + "xxl": { "source": "$avatar-size-xxl", "$value": "11.5rem", "$type": "dimension" }, + "huge": { "source": "$avatar-size-huge", "$value": "18.75rem", "$type": "dimension" }, "border": { - "base": { - "source": "$avatar-border", - "$value": "1px", - "$type": "dimension" - }, - "radius": { - "source": "$avatar-border-radius", - "$value": "100%", - "$type": "percentage" - } + "base": { "source": "$avatar-border", "$value": "1px", "$type": "dimension" }, + "radius": { "source": "$avatar-border-radius", "$value": "100%", "$type": "percentage" } } } } diff --git a/tokens/src/core/components/AvatarButton.json b/tokens/src/core/components/AvatarButton.json index 069c82c668..e9c77a5baf 100644 --- a/tokens/src/core/components/AvatarButton.json +++ b/tokens/src/core/components/AvatarButton.json @@ -3,18 +3,9 @@ "spacing": { "avatar-button": { "padding-left": { - "base": { - "source": "$avatar-button-padding-left", - "$value": ".25em" - }, - "sm": { - "source": "$avatar-button-padding-left-sm", - "$value": ".25em" - }, - "lg": { - "source": "$avatar-button-padding-left-lg", - "$value": ".25em" - } + "base": { "source": "$avatar-button-padding-left", "$value": ".25em" }, + "sm": { "source": "$avatar-button-padding-left-sm", "$value": ".25em" }, + "lg": { "source": "$avatar-button-padding-left-lg", "$value": ".25em" } } } } diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json index ecb9ee5376..61cbc94e7a 100644 --- a/tokens/src/core/components/Badge.json +++ b/tokens/src/core/components/Badge.json @@ -4,35 +4,18 @@ "badge": { "padding": { "x": { - "base": { - "source": "$badge-padding-x", - "$value": ".5rem" - }, - "pill": { - "source": "$badge-pill-padding-x", - "$value": ".6em" - } + "base": { "source": "$badge-padding-x", "$value": ".5rem" }, + "pill": { "source": "$badge-pill-padding-x", "$value": ".6em" } }, - "y": { - "source": "$badge-padding-y", - "$value": ".125rem" - } + "y": { "source": "$badge-padding-y", "$value": ".125rem" } } } }, "typography": { "badge": { "font": { - "size": { - "source": "$badge-font-size", - "$value": "75%", - "$type": "percentage" - }, - "weight": { - "source": "$badge-font-weight", - "$value": "{typography.font.weight.bold}", - "$type": "fontWeight" - } + "size": { "source": "$badge-font-size", "$value": "75%", "$type": "percentage" }, + "weight": { "source": "$badge-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" } } } }, @@ -40,26 +23,14 @@ "$type": "dimension", "badge": { "border-radius": { - "base": { - "source": "$badge-border-radius", - "$value": ".25rem" - }, - "pill": { - "source": "$badge-pill-border-radius", - "$value": "10rem" - } + "base": { "source": "$badge-border-radius", "$value": ".25rem" }, + "pill": { "source": "$badge-pill-border-radius", "$value": "10rem" } }, - "focus-width": { - "source": "$badge-focus-width", - "$value": "{size.input.btn.focus-width}" - } + "focus-width": { "source": "$badge-focus-width", "$value": "{size.input.btn.focus-width}" } } }, "transition": { "$type": "transition", - "badge": { - "source": "$badge-transition", - "$value": "none" - } + "badge": { "source": "$badge-transition", "$value": "none" } } } diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json index 84f041c281..f4aea97731 100644 --- a/tokens/src/core/components/Breadcrumb.json +++ b/tokens/src/core/components/Breadcrumb.json @@ -3,10 +3,7 @@ "spacing": { "breadcrumb": { "margin": { - "left": { - "source": "$breadcrumb-margin-left", - "$value": ".5rem" - } + "left": { "source": "$breadcrumb-margin-left", "$value": ".5rem" } } } }, @@ -14,25 +11,13 @@ "breadcrumb": { "border": { "radius": { - "focus": { - "source": "$breadcrumb-focus-border-radius", - "$value": ".125rem" - } + "focus": { "source": "$breadcrumb-focus-border-radius", "$value": ".125rem" } }, "axis": { - "x-focus": { - "source": "$breadcrumb-border-focus-axis-x", - "$value": ".25rem" - }, - "y-focus": { - "source": "$breadcrumb-border-focus-axis-y", - "$value": ".5rem" - } + "x-focus": { "source": "$breadcrumb-border-focus-axis-x", "$value": ".25rem" }, + "y-focus": { "source": "$breadcrumb-border-focus-axis-y", "$value": ".5rem" } }, - "width-focus": { - "source": "$breadcrumb-border-focus-width", - "$value": ".0625rem" - } + "width-focus": { "source": "$breadcrumb-border-focus-width", "$value": ".0625rem" } } } } diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json index ba57fc309e..1fa4f035f5 100644 --- a/tokens/src/core/components/Bubble.json +++ b/tokens/src/core/components/Bubble.json @@ -3,14 +3,8 @@ "spacing": { "bubble": { "expandable-padding": { - "y": { - "source": "$bubble-expandable-padding-y", - "$value": "0" - }, - "x": { - "source": "$bubble-expandable-padding-x", - "$value": ".25rem" - } + "y": { "source": "$bubble-expandable-padding-y", "$value": "0" }, + "x": { "source": "$bubble-expandable-padding-x", "$value": ".25rem" } } } } diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json index 0ce7ff8c7b..bcfcc5bc6c 100644 --- a/tokens/src/core/components/Button/core.json +++ b/tokens/src/core/components/Button/core.json @@ -4,45 +4,21 @@ "btn": { "padding": { "y": { - "base": { - "source": "$btn-padding-y", - "$value": "{spacing.input.btn.padding.y}" - }, - "lg": { - "source": "$btn-padding-y-lg", - "$value": "{spacing.input.btn.padding.lg.y}" - }, - "sm": { - "source": "$btn-padding-y-sm", - "$value": "{spacing.input.btn.padding.sm.y}" - } + "base": { "source": "$btn-padding-y", "$value": "{spacing.input.btn.padding.y}" }, + "lg": { "source": "$btn-padding-y-lg", "$value": "{spacing.input.btn.padding.lg.y}" }, + "sm": { "source": "$btn-padding-y-sm", "$value": "{spacing.input.btn.padding.sm.y}" } }, "x": { - "base": { - "source": "$btn-padding-x", - "$value": "{spacing.input.btn.padding.x}" - }, - "lg": { - "source": "$btn-padding-x-lg", - "$value": "{spacing.input.btn.padding.lg.x}" - }, - "sm": { - "source": "$btn-padding-x-sm", - "$value": "{spacing.input.btn.padding.sm.x}" - } + "base": { "source": "$btn-padding-x", "$value": "{spacing.input.btn.padding.x}" }, + "lg": { "source": "$btn-padding-x-lg", "$value": "{spacing.input.btn.padding.lg.x}" }, + "sm": { "source": "$btn-padding-x-sm", "$value": "{spacing.input.btn.padding.sm.x}" } } }, "block": { - "spacing-y": { - "source": "$btn-block-spacing-y", - "$value": ".5rem" - } + "spacing-y": { "source": "$btn-block-spacing-y", "$value": ".5rem" } }, "focus": { - "gap": { - "source": "$btn-focus-gap", - "$value": "{size.btn.focus.width}" - }, + "gap": { "source": "$btn-focus-gap", "$value": "{size.btn.focus.width}" }, "border-gap": { "source": "$btn-focus-border-gap", "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})" @@ -57,46 +33,20 @@ "typography": { "btn": { "font": { - "family": { - "source": "$btn-font-family", - "$value": "{typography.input.btn.font.family}", - "$type": "fontFamily" - }, + "family": { "source": "$btn-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" }, "size": { "$type": "dimension", - "base": { - "source": "$btn-font-size", - "$value": "{typography.input.btn.font.size.base}" - }, - "sm": { - "source": "$btn-font-size-sm", - "$value": "{typography.input.btn.font.size.sm}" - }, - "lg": { - "source": "$btn-font-size-lg", - "$value": "{typography.input.btn.font.size.lg}" - } + "base": { "source": "$btn-font-size", "$value": "{typography.input.btn.font.size.base}" }, + "sm": { "source": "$btn-font-size-sm", "$value": "{typography.input.btn.font.size.sm}" }, + "lg": { "source": "$btn-font-size-lg", "$value": "{typography.input.btn.font.size.lg}" } }, - "weight": { - "source": "$btn-font-weight", - "$value": "{typography.font.weight.normal}", - "$type": "fontWeight" - } + "weight": { "source": "$btn-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" } }, "line-height": { "$type": "dimension", - "base": { - "source": "$btn-line-height", - "$value": "{typography.input.btn.line-height.base}" - }, - "sm": { - "source": "$btn-line-height-sm", - "$value": "{typography.input.btn.line-height.sm}" - }, - "lg": { - "source": "$btn-line-height-lg", - "$value": "{typography.input.btn.line-height.lg}" - } + "base": { "source": "$btn-line-height", "$value": "{typography.input.btn.line-height.base}" }, + "sm": { "source": "$btn-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" }, + "lg": { "source": "$btn-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" } } } }, @@ -104,52 +54,28 @@ "$type": "dimension", "btn": { "border": { - "width": { - "source": "$btn-border-width", - "$value": "{size.input.btn.border-width}" - }, + "width": { "source": "$btn-border-width", "$value": "{size.input.btn.border-width}" }, "radius": { - "base": { - "source": "$btn-border-radius", - "$value": "{size.border.radius.base}" - }, - "lg": { - "source": "$btn-border-radius-lg", - "$value": "{size.border.radius.lg}" - }, - "sm": { - "source": "$btn-border-radius-sm", - "$value": "{size.border.radius.sm}" - } + "base": { "source": "$btn-border-radius", "$value": "{size.border.radius.base}" }, + "lg": { "source": "$btn-border-radius-lg", "$value": "{size.border.radius.lg}" }, + "sm": { "source": "$btn-border-radius-sm", "$value": "{size.border.radius.sm}" } } }, "focus": { - "width": { - "source": "$btn-focus-width", - "$value": "2px" - }, + "width": { "source": "$btn-focus-width", "$value": "2px" }, "border-radius": { "base": { "source": "$btn-focus-border-radius", "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})" }, - "lg": { - "source": "$btn-focus-border-radius-lg", - "$value": "{size.btn.focus.border-radius.base}" - }, - "sm": { - "source": "$btn-focus-border-radius-sm", - "$value": "{size.btn.border.radius.base}" - } + "lg": { "source": "$btn-focus-border-radius-lg", "$value": "{size.btn.focus.border-radius.base}" }, + "sm": { "source": "$btn-focus-border-radius-sm", "$value": "{size.btn.border.radius.base}" } } } } }, "transition": { "$type": "transition", - "btn": { - "source": "$btn-transition", - "$value": "none" - } + "btn": { "source": "$btn-transition", "$value": "none" } } } diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json index 4eff49026c..52e9a46ddc 100644 --- a/tokens/src/core/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -3,170 +3,80 @@ "spacing": { "card": { "spacer": { - "x": { - "source": "$card-spacer-x", - "$value": "1.25rem" - }, - "y": { - "source": "$card-spacer-y", - "$value": ".75rem" - } + "x": { "source": "$card-spacer-x", "$value": "1.25rem" }, + "y": { "source": "$card-spacer-y", "$value": ".75rem" } }, "margin": { - "group": { - "source": "$card-group-margin", - "$value": "12px" - }, - "deck": { - "source": "$card-deck-margin", - "$value": "{spacing.card.margin.group}" - }, - "deck-bottom": { - "source": "$card-deck-margin-bottom", - "$value": "{spacing.spacer.3}" - }, - "grid": { - "source": "$card-grid-margin", - "$value": "{spacing.card.margin.group}" - }, - "grid-bottom": { - "source": "$card-grid-margin-bottom", - "$value": "{spacing.spacer.3}" - } + "group": { "source": "$card-group-margin", "$value": "12px" }, + "deck": { "source": "$card-deck-margin", "$value": "{spacing.card.margin.group}" }, + "deck-bottom": { "source": "$card-deck-margin-bottom", "$value": "{spacing.spacer.3}" }, + "grid": { "source": "$card-grid-margin", "$value": "{spacing.card.margin.group}" }, + "grid-bottom": { "source": "$card-grid-margin-bottom", "$value": "{spacing.spacer.3}" } }, "columns": { - "margin": { - "source": "$card-columns-margin", - "$value": "{spacing.card.spacer.y}" - }, - "count": { - "source": "$card-columns-count", - "$value": "3" - }, - "gap": { - "source": "$card-columns-gap", - "$value": "1.25rem" - } + "margin": { "source": "$card-columns-margin", "$value": "{spacing.card.spacer.y}" }, + "count": { "source": "$card-columns-count", "$value": "3" }, + "gap": { "source": "$card-columns-gap", "$value": "1.25rem" } }, "footer": { - "action-gap": { - "source": "$card-footer-actions-gap", - "$value": ".5rem" - } + "action-gap": { "source": "$card-footer-actions-gap", "$value": ".5rem" } }, "loading-skeleton": { - "spacer": { - "source": "$loading-skeleton-spacer", - "$value": ".313rem" - } + "spacer": { "source": "$loading-skeleton-spacer", "$value": ".313rem" } }, "logo": { "left-offset": { - "base": { - "source": "$card-logo-left-offset", - "$value": "1.5rem" - }, - "horizontal": { - "source": "$card-logo-left-offset-horizontal", - "$value": ".4375rem" - } + "base": { "source": "$card-logo-left-offset", "$value": "1.5rem" }, + "horizontal": { "source": "$card-logo-left-offset-horizontal", "$value": ".4375rem" } }, "bottom-offset": { - "base": { - "source": "$card-logo-bottom-offset", - "$value": "1rem" - }, - "horizontal": { - "source": "$card-logo-bottom-offset-horizontal", - "$value": ".4375rem" - } + "base": { "source": "$card-logo-bottom-offset", "$value": "1rem" }, + "horizontal": { "source": "$card-logo-bottom-offset-horizontal", "$value": ".4375rem" } } }, "focus": { - "border-offset": { - "source": "$card-focus-border-offset", - "$value": "5px" - } + "border-offset": { "source": "$card-focus-border-offset", "$value": "5px" } } } }, "size": { "card": { "border": { - "width": { - "source": "$card-border-width", - "$value": "{size.border.width}" - }, + "width": { "source": "$card-border-width", "$value": "{size.border.width}" }, "radius": { - "base": { - "source": "$card-border-radius", - "$value": "{size.border.radius.base}" - }, - "logo": { - "source": "$card-logo-border-radius", - "$value": ".25rem" - }, - "inner": { - "source": "$card-inner-border-radius", - "$value": "calc({size.card.border.radius.base} - {size.card.border.width})" - } + "base": { "source": "$card-border-radius", "$value": "{size.border.radius.base}" }, + "logo": { "source": "$card-logo-border-radius", "$value": ".25rem" }, + "inner": { "source": "$card-inner-border-radius", "$value": "calc({size.card.border.radius.base} - {size.card.border.width})" } } }, "focus": { "border": { - "width": { - "source": "$card-focus-border-width", - "$value": "2px" - }, - "radius": { - "source": "$card-focus-border-radius", - "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})" - } + "width": { "source": "$card-focus-border-width", "$value": "2px" }, + "radius": { "source": "$card-focus-border-radius", "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})" } } }, "image": { "horizontal": { "width": { - "max": { - "source": "$card-image-horizontal-max-width", - "$value": "240px" - }, - "min": { - "source": "$card-image-horizontal-min-width", - "$value": "{size.card.image.horizontal.width.max}" - } + "max": { "source": "$card-image-horizontal-max-width", "$value": "240px" }, + "min": { "source": "$card-image-horizontal-min-width", "$value": "{size.card.image.horizontal.width.max}" } } }, "vertical": { - "max-height": { - "source": "$card-image-vertical-max-height", - "$value": "140px" - } + "max-height": { "source": "$card-image-vertical-max-height", "$value": "140px" } }, - "border-radius": { - "source": "$card-image-border-radius", - "$value": "{size.card.border.radius.base}" - } + "border-radius": { "source": "$card-image-border-radius", "$value": "{size.card.border.radius.base}" } }, "logo": { - "width": { - "source": "$card-logo-width", - "$value": "7.25rem" - }, - "height": { - "source": "$card-logo-height", - "$value": "4.125rem" - } + "width": { "source": "$card-logo-width", "$value": "7.25rem" }, + "height": { "source": "$card-logo-height", "$value": "4.125rem" } } } }, "typography": { "footer": { "text": { - "font-size": { - "source": "$card-footer-text-font-size", - "$value": "{typography.font.size.small.x}" - } + "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.small.x}" } } } } diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json index 871d50d7c5..07248dda1c 100644 --- a/tokens/src/core/components/Carousel.json +++ b/tokens/src/core/components/Carousel.json @@ -3,73 +3,33 @@ "carousel": { "control": { "width": { - "base": { - "source": "$carousel-control-width", - "$value": "15%", - "$type": "percentage" - }, - "icon": { - "source": "$carousel-control-icon-width", - "$value": "20px", - "$type": "dimension" - } + "base": { "source": "$carousel-control-width", "$value": "15%", "$type": "percentage" }, + "icon": { "source": "$carousel-control-icon-width", "$value": "20px", "$type": "dimension" } } }, "indicator": { "$type": "dimension", - "width": { - "source": "$carousel-indicator-width", - "$value": "30px" - }, + "width": { "source": "$carousel-indicator-width", "$value": "30px" }, "height": { - "base": { - "source": "$carousel-indicator-height", - "$value": "3px" - }, - "area-hit": { - "source": "$carousel-indicator-hit-area-height", - "$value": "10px" - } + "base": { "source": "$carousel-indicator-height", "$value": "3px" }, + "area-hit": { "source": "$carousel-indicator-hit-area-height", "$value": "10px" } } }, - "caption-width": { - "source": "$carousel-caption-width", - "$value": "70%", - "$type": "percentage" - } + "caption-width": { "source": "$carousel-caption-width", "$value": "70%", "$type": "percentage" } } }, "spacing": { "$type": "dimension", "carousel": { - "indicator-spacer": { - "source": "$carousel-indicator-spacer", - "$value": "3px" - } + "indicator-spacer": { "source": "$carousel-indicator-spacer", "$value": "3px" } } }, "transition": { "carousel": { - "base": { - "source": "$carousel-transition", - "$value": "transform {transition.carousel.duration} ease-in-out", - "$type": "transition" - }, - "duration": { - "source": "$carousel-transition-duration", - "$value": ".6s", - "$type": "duration" - }, - "indicator": { - "source": "$carousel-indicator-transition", - "$value": "opacity .6s ease", - "$type": "transition" - }, - "control": { - "source": "$carousel-control-transition", - "$value": "opacity .15s ease", - "$type": "transition" - } + "base": { "source": "$carousel-transition", "$value": "transform {transition.carousel.duration} ease-in-out", "$type": "transition" }, + "duration": { "source": "$carousel-transition-duration", "$value": ".6s", "$type": "duration" }, + "indicator": { "source": "$carousel-indicator-transition", "$value": "opacity .6s ease", "$type": "transition" }, + "control": { "source": "$carousel-control-transition", "$value": "opacity .15s ease", "$type": "transition" } } } } diff --git a/tokens/src/core/components/Chip.json b/tokens/src/core/components/Chip.json index d6336153bf..09cac920be 100644 --- a/tokens/src/core/components/Chip.json +++ b/tokens/src/core/components/Chip.json @@ -3,63 +3,30 @@ "spacing": { "chip": { "margin": { - "base": { - "source": "$chip-margin", - "$value": ".125rem" - }, - "icon": { - "source": "$chip-icon-margin", - "$value": ".25rem" - } + "base": { "source": "$chip-margin", "$value": ".125rem" }, + "icon": { "source": "$chip-icon-margin", "$value": ".25rem" } }, "padding": { - "y": { - "source": "$chip-padding-y", - "$value": "1px" - }, - "x": { - "source": "$chip-padding-x", - "$value": ".5rem" - } + "y": { "source": "$chip-padding-y", "$value": "1px" }, + "x": { "source": "$chip-padding-x", "$value": ".5rem" } }, "outline": { "selected-distance": { - "light": { - "source": "$chip-light-selected-outline-distance", - "$value": "3px" - }, - "dark": { - "source": "$chip-dark-selected-outline-distance", - "$value": "3px" - } + "light": { "source": "$chip-light-selected-outline-distance", "$value": "3px" }, + "dark": { "source": "$chip-dark-selected-outline-distance", "$value": "3px" } }, "focus-distance": { - "light": { - "source": "$chip-light-focus-outline-distance", - "$value": ".313rem" - }, - "dark": { - "source": "$chip-dark-focus-outline-distance", - "$value": ".313rem" - } + "light": { "source": "$chip-light-focus-outline-distance", "$value": ".313rem" }, + "dark": { "source": "$chip-dark-focus-outline-distance", "$value": ".313rem" } }, - "width": { - "source": "$chip-outline-width", - "$value": "3px" - } + "width": { "source": "$chip-outline-width", "$value": "3px" } } } }, "size": { "chip": { - "border-radius": { - "source": "$chip-border-radius", - "$value": ".375rem" - }, - "icon": { - "source": "$chip-icon-size", - "$value": "1.5rem" - } + "border-radius": { "source": "$chip-border-radius", "$value": ".375rem" }, + "icon": { "source": "$chip-icon-size", "$value": "1.5rem" } } } } diff --git a/tokens/src/core/components/ChipCarousel.json b/tokens/src/core/components/ChipCarousel.json index 227f846d51..4769b322c7 100644 --- a/tokens/src/core/components/ChipCarousel.json +++ b/tokens/src/core/components/ChipCarousel.json @@ -2,20 +2,11 @@ "$type": "dimension", "spacing": { "chip-carousel": { - "controls-top-offset": { - "source": "$chip-carousel-controls-top-offset", - "$value": ".375rem" - }, + "controls-top-offset": { "source": "$chip-carousel-controls-top-offset", "$value": ".375rem" }, "container": { "padding": { - "x": { - "source": "$chip-carousel-container-padding-x", - "$value": ".625rem" - }, - "y": { - "source": "$chip-carousel-container-padding-y", - "$value": ".313rem" - } + "x": { "source": "$chip-carousel-container-padding-x", "$value": ".625rem" }, + "y": { "source": "$chip-carousel-container-padding-y", "$value": ".313rem" } } } } diff --git a/tokens/src/core/components/CloseButton.json b/tokens/src/core/components/CloseButton.json index 17a8b99f60..6308930b30 100644 --- a/tokens/src/core/components/CloseButton.json +++ b/tokens/src/core/components/CloseButton.json @@ -2,16 +2,8 @@ "typography": { "close-button": { "font": { - "size": { - "source": "$close-font-size", - "$value": "calc({typography.font.size.base} * 1.5)", - "$type": "dimension" - }, - "weight": { - "source": "$close-font-weight", - "$value": "{typography.font.weight.bold}", - "$type": "fontWeight" - } + "size": { "source": "$close-font-size", "$value": "calc({typography.font.size.base} * 1.5)", "$type": "dimension" }, + "weight": { "source": "$close-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" } } } } diff --git a/tokens/src/core/components/Code.json b/tokens/src/core/components/Code.json index d6ba56fb2e..3ba3025295 100644 --- a/tokens/src/core/components/Code.json +++ b/tokens/src/core/components/Code.json @@ -1,23 +1,12 @@ { "typography": { "code": { - "font-size": { - "source": "$code-font-size", - "$value": "87.5%", - "$type": "percentage" - }, + "font-size": { "source": "$code-font-size", "$value": "87.5%", "$type": "percentage" }, "kbd": { - "font-size": { - "source": "$kbd-font-size", - "$value": "{typography.code.font-size}", - "$type": "dimension" - }, + "font-size": { "source": "$kbd-font-size", "$value": "{typography.code.font-size}", "$type": "dimension" }, "nested": { "$type": "fontWeight", - "font-weight": { - "source": "$nested-kbd-font-weight", - "$value": "{typography.font.weight.bold}" - } + "font-weight": { "source": "$nested-kbd-font-weight", "$value": "{typography.font.weight.bold}" } } } } @@ -27,14 +16,8 @@ "code": { "kbd": { "padding": { - "y": { - "source": "$kbd-padding-y", - "$value": ".2rem" - }, - "x": { - "source": "$kbd-padding-x", - "$value": ".4rem" - } + "y": { "source": "$kbd-padding-y", "$value": ".2rem" }, + "x": { "source": "$kbd-padding-x", "$value": ".4rem" } } } } @@ -44,10 +27,7 @@ "code": { "pre": { "scrollable": { - "max-height": { - "source": "$pre-scrollable-max-height", - "$value": "340px" - } + "max-height": { "source": "$pre-scrollable-max-height", "$value": "340px" } } } } diff --git a/tokens/src/core/components/Collapsible.json b/tokens/src/core/components/Collapsible.json index 9cd2431ad3..dac86793b5 100644 --- a/tokens/src/core/components/Collapsible.json +++ b/tokens/src/core/components/Collapsible.json @@ -5,46 +5,19 @@ "card": { "spacer": { "y": { - "base": { - "source": "$collapsible-card-spacer-y", - "$value": ".5rem" - }, - "lg": { - "source": "$collapsible-card-spacer-y-lg", - "$value": "{spacing.card.spacer.y}" - } + "base": { "source": "$collapsible-card-spacer-y", "$value": ".5rem" }, + "lg": { "source": "$collapsible-card-spacer-y-lg", "$value": "{spacing.card.spacer.y}" } }, "x": { - "base": { - "source": "$collapsible-card-spacer-x", - "$value": ".5rem" - }, - "lg": { - "source": "$collapsible-card-spacer-x-lg", - "$value": "{spacing.card.spacer.x}" - } - }, - "left-body": { - "source": "$collapsible-card-body-spacer-left", - "$value": ".75rem" - }, - "icon": { - "source": "$collapsible-card-spacer-icon", - "$value": "2.5rem" + "base": { "source": "$collapsible-card-spacer-x", "$value": ".5rem" }, + "lg": { "source": "$collapsible-card-spacer-x-lg", "$value": "{spacing.card.spacer.x}" } }, + "left-body": { "source": "$collapsible-card-body-spacer-left", "$value": ".75rem" }, + "icon": { "source": "$collapsible-card-spacer-icon", "$value": "2.5rem" }, "basic": { - "y": { - "source": "$collapsible-basic-spacer-y", - "$value": ".5rem" - }, - "x": { - "source": "$collapsible-basic-spacer-x", - "$value": ".5rem" - }, - "icon": { - "source": "$collapsible-basic-spacer-icon", - "$value": ".625rem" - } + "y": { "source": "$collapsible-basic-spacer-y", "$value": ".5rem" }, + "x": { "source": "$collapsible-basic-spacer-x", "$value": ".5rem" }, + "icon": { "source": "$collapsible-basic-spacer-icon", "$value": ".625rem" } } } } diff --git a/tokens/src/core/components/ColorPicker.json b/tokens/src/core/components/ColorPicker.json index 48e9430916..809d85b9eb 100644 --- a/tokens/src/core/components/ColorPicker.json +++ b/tokens/src/core/components/ColorPicker.json @@ -2,14 +2,8 @@ "$type": "dimension", "size": { "color-picker": { - "sm": { - "source": "$picker-size-sm", - "$value": "2rem" - }, - "md": { - "source": "$picker-size-md", - "$value": "calc(1.3333em + 1.125rem + 2px)" - } + "sm": { "source": "$picker-size-sm", "$value": "2rem" }, + "md": { "source": "$picker-size-md", "$value": "calc(1.3333em + 1.125rem + 2px)" } } } } diff --git a/tokens/src/core/components/Container.json b/tokens/src/core/components/Container.json index f7548879ed..52424d636f 100644 --- a/tokens/src/core/components/Container.json +++ b/tokens/src/core/components/Container.json @@ -3,26 +3,11 @@ "size": { "container": { "max-width": { - "xs": { - "source": "$max-width-xs", - "$value": "464px" - }, - "sm": { - "source": "$max-width-sm", - "$value": "708px" - }, - "md": { - "source": "$max-width-md", - "$value": "952px" - }, - "lg": { - "source": "$max-width-lg", - "$value": "1192px" - }, - "xl": { - "source": "$max-width-xl", - "$value": "1440px" - } + "xs": { "source": "$max-width-xs", "$value": "464px" }, + "sm": { "source": "$max-width-sm", "$value": "708px" }, + "md": { "source": "$max-width-md", "$value": "952px" }, + "lg": { "source": "$max-width-lg", "$value": "1192px" }, + "xl": { "source": "$max-width-xl", "$value": "1440px" } } } } diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json index 75959fbe87..b09fddb01d 100644 --- a/tokens/src/core/components/DataTable.json +++ b/tokens/src/core/components/DataTable.json @@ -2,27 +2,15 @@ "size": { "$type": "dimension", "data-table": { - "border": { - "source": "$data-table-border", - "$value": "2px" - }, + "border": { "source": "$data-table-border", "$value": "2px" }, "dropdown": { "pagination": { - "max-height": { - "source": "$data-table-pagination-dropdown-max-height", - "$value": "60vh" - }, - "min-width": { - "source": "$data-table-pagination-dropdown-min-width", - "$value": "6rem" - } + "max-height": { "source": "$data-table-pagination-dropdown-max-height", "$value": "60vh" }, + "min-width": { "source": "$data-table-pagination-dropdown-min-width", "$value": "6rem" } } }, "layout": { - "sidebar-width": { - "source": "$data-table-layout-sidebar-width", - "$value": "12rem" - } + "sidebar-width": { "source": "$data-table-layout-sidebar-width", "$value": "12rem" } } } }, @@ -30,28 +18,12 @@ "data-table": { "padding": { "$type": "dimension", - "x": { - "source": "$data-table-padding-x", - "$value": ".75rem" - }, - "y": { - "source": "$data-table-padding-y", - "$value": ".75rem" - }, - "small": { - "source": "$data-table-padding-small", - "$value": ".5rem" - }, - "cell": { - "source": "$data-table-cell-padding", - "$value": ".5rem .75rem" - } + "x": { "source": "$data-table-padding-x", "$value": ".75rem" }, + "y": { "source": "$data-table-padding-y", "$value": ".75rem" }, + "small": { "source": "$data-table-padding-small", "$value": ".5rem" }, + "cell": { "source": "$data-table-cell-padding", "$value": ".5rem .75rem" } }, - "footer-position": { - "source": "$data-table-footer-position", - "$value": "center", - "$type": "position" - } + "footer-position": { "source": "$data-table-footer-position", "$value": "center", "$type": "position" } } } } diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json index dd18c8069d..1299b3ce0c 100644 --- a/tokens/src/core/components/Dropdown.json +++ b/tokens/src/core/components/Dropdown.json @@ -1,36 +1,21 @@ { "typography": { "dropdown": { - "font-size": { - "source": "$dropdown-font-size", - "$value": "{typography.font.size.base}", - "$type": "dimension" - }, + "font-size": { "source": "$dropdown-font-size", "$value": "{typography.font.size.base}", "$type": "dimension" }, "item": { "$type": "textDecoration", - "text-decoration": { - "$value": "none" - } + "text-decoration": { "$value": "none" } } } }, "size": { "$type": "dimension", "dropdown": { - "min-width": { - "source": "$dropdown-min-width", - "$value": "18rem" - }, + "min-width": { "source": "$dropdown-min-width", "$value": "18rem" }, "border": { - "width": { - "source": "$dropdown-border-width", - "$value": "{size.border.width}" - }, + "width": { "source": "$dropdown-border-width", "$value": "{size.border.width}" }, "radius": { - "base": { - "source": "$dropdown-border-radius", - "$value": "{size.border.radius.base}" - }, + "base": { "source": "$dropdown-border-radius", "$value": "{size.border.radius.base}" }, "inner": { "source": "$dropdown-inner-border-radius", "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})" @@ -42,57 +27,30 @@ "spacing": { "$type": "dimension", "dropdown": { - "spacer": { - "source": "$dropdown-spacer", - "$value": ".125rem" - }, + "spacer": { "source": "$dropdown-spacer", "$value": ".125rem" }, "padding": { "x": { - "base": { - "source": "$dropdown-padding-x", - "$value": "0" - }, - "item": { - "source": "$dropdown-item-padding-x", - "$value": "1rem" - } + "base": { "source": "$dropdown-padding-x", "$value": "0" }, + "item": { "source": "$dropdown-item-padding-x", "$value": "1rem" } }, "y": { - "base": { - "source": "$dropdown-padding-y", - "$value": ".5rem" - }, - "item": { - "source": "$dropdown-item-padding-y", - "$value": ".25rem" - } + "base": { "source": "$dropdown-padding-y", "$value": ".5rem" }, + "item": { "source": "$dropdown-item-padding-y", "$value": ".25rem" } }, - "header": { - "source": "$dropdown-header-padding", - "$value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}" - } + "header": { "source": "$dropdown-header-padding", "$value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}" } }, "divider": { - "margin-y": { - "source": "$dropdown-divider-margin-y", - "$value": "calc({spacing.spacer.base} / 2)" - } + "margin-y": { "source": "$dropdown-divider-margin-y", "$value": "calc({spacing.spacer.base} / 2)" } }, "close-container": { - "top": { - "source": "$modal-close-container-top", - "$value": ".625rem" - } + "top": { "source": "$modal-close-container-top", "$value": ".625rem" } } } }, "elevation": { "$type": "ratio", "dropdown": { - "zindex": { - "source": "$zindex-dropdown", - "$value": "1000" - } + "zindex": { "source": "$zindex-dropdown", "$value": "1000" } } } } diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json index a97a008879..f3927f9aeb 100644 --- a/tokens/src/core/components/Dropzone.json +++ b/tokens/src/core/components/Dropzone.json @@ -3,24 +3,15 @@ "typography": { "dropzone": { "restriction-msg": { - "font-size": { - "source": "$dropzone-restriction-msg-font-size", - "$value": "{typography.font.size.small.x}" - } + "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.small.x}" } } } }, "spacing": { "dropzone": { - "padding": { - "source": "$dropzone-padding", - "$value": "1.5rem" - }, + "padding": { "source": "$dropzone-padding", "$value": "1.5rem" }, "border": { - "base": { - "source": "$dropzone-border-default", - "$value": "1px" - } + "base": { "source": "$dropzone-border-default", "$value": "1px" } } } } diff --git a/tokens/src/core/components/Form/other.json b/tokens/src/core/components/Form/other.json index 415a9ffe4f..aa14828016 100644 --- a/tokens/src/core/components/Form/other.json +++ b/tokens/src/core/components/Form/other.json @@ -2,24 +2,12 @@ "other": { "form": { "control": { - "cursor": { - "source": "$custom-control-cursor", - "$value": "auto", - "$type": "cursorStyle" - }, - "range-track-cursor": { - "source": "$custom-range-track-cursor", - "$value": "pointer", - "$type": "cursorStyle" - }, + "cursor": { "source": "$custom-control-cursor", "$value": "auto", "$type": "cursorStyle" }, + "range-track-cursor": { "source": "$custom-range-track-cursor", "$value": "pointer", "$type": "cursorStyle" }, "custom-file": { "$type": "text", - "lang": { - "$value": "en" - }, - "content": { - "$value": "Browse" - } + "lang": { "$value": "en" }, + "content": { "$value": "Browse" } } } } diff --git a/tokens/src/core/components/Form/size.json b/tokens/src/core/components/Form/size.json index f0994467f1..dcf0e043e5 100644 --- a/tokens/src/core/components/Form/size.json +++ b/tokens/src/core/components/Form/size.json @@ -30,68 +30,33 @@ "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))" } }, - "border": { - "source": "$input-height-border", - "$value": "calc({size.form.input.width.border} * 2)" - } + "border": { "source": "$input-height-border", "$value": "calc({size.form.input.width.border} * 2)" } }, "width": { - "hover": { - "source": "$input-hover-width", - "$value": "0.063rem" - }, - "focus": { - "source": "$input-focus-width", - "$value": "0.063rem" - }, - "border": { - "source": "$input-border-width", - "$value": "{size.input.btn.border-width}" - } + "hover": { "source": "$input-hover-width", "$value": "0.063rem" }, + "focus": { "source": "$input-focus-width", "$value": "0.063rem" }, + "border": { "source": "$input-border-width", "$value": "{size.input.btn.border-width}" } }, "radius": { "border": { - "base": { - "source": "$input-border-radius", - "$value": "{size.border.radius.base}" - }, - "lg": { - "source": "$input-border-radius-lg", - "$value": "{size.border.radius.lg}" - }, - "sm": { - "source": "$input-border-radius-sm", - "$value": "{size.border.radius.sm}" - } + "base": { "source": "$input-border-radius", "$value": "{size.border.radius.base}" }, + "lg": { "source": "$input-border-radius-lg", "$value": "{size.border.radius.lg}" }, + "sm": { "source": "$input-border-radius-sm", "$value": "{size.border.radius.sm}" } } } }, "control": { "indicator": { - "base": { - "source": "$custom-control-indicator-size", - "$value": "1.25rem", - "$type": "dimension" - }, - "bg": { - "source": "$custom-control-indicator-bg-size", - "$value": "100%", - "$type": "percentage" - }, + "base": { "source": "$custom-control-indicator-size", "$value": "1.25rem", "$type": "dimension" }, + "bg": { "source": "$custom-control-indicator-bg-size", "$value": "100%", "$type": "percentage" }, "border": { "$type": "dimension", - "width": { - "source": "$custom-control-indicator-border-width", - "$value": "0.125rem" - } + "width": { "source": "$custom-control-indicator-border-width", "$value": "0.125rem" } } }, "switch": { "$type": "dimension", - "width": { - "source": "$custom-switch-width", - "$value": "calc({size.form.control.indicator.base} * 1.75)" - }, + "width": { "source": "$custom-switch-width", "$value": "calc({size.form.control.indicator.base} * 1.75)" }, "indicator": { "base": { "source": "$custom-switch-indicator-size", @@ -108,18 +73,9 @@ "select": { "$type": "dimension", "height": { - "base": { - "source": "$custom-select-height", - "$value": "{size.form.input.height.base}" - }, - "lg": { - "source": "$custom-select-height-lg", - "$value": "{size.form.input.height.lg}" - }, - "sm": { - "source": "$custom-select-height-sm", - "$value": "{size.form.input.height.sm}" - } + "base": { "source": "$custom-select-height", "$value": "{size.form.input.height.base}" }, + "lg": { "source": "$custom-select-height-lg", "$value": "{size.form.input.height.lg}" }, + "sm": { "source": "$custom-select-height-sm", "$value": "{size.form.input.height.sm}" } }, "feedback": { "icon": { @@ -129,175 +85,95 @@ }, "border": { "width": { - "base": { - "source": "$custom-select-border-width", - "$value": "{size.form.input.width.border}" - } + "base": { "source": "$custom-select-border-width", "$value": "{size.form.input.width.border}" } }, - "radius": { - "source": "$custom-select-border-radius", - "$value": "{size.border.radius.base}" - } + "radius": { "source": "$custom-select-border-radius", "$value": "{size.border.radius.base}" } } }, "range": { "track": { - "width": { - "source": "$custom-range-track-width", - "$value": "100%", - "$type": "percentage" - }, - "height": { - "source": "$custom-range-track-height", - "$value": ".5rem", - "$type": "dimension" - }, + "width": { "source": "$custom-range-track-width", "$value": "100%", "$type": "percentage" }, + "height": { "source": "$custom-range-track-height", "$value": ".5rem", "$type": "dimension" }, "border": { "$type": "dimension", - "radius": { - "source": "$custom-range-track-border-radius", - "$value": "1rem" - } + "radius": { "source": "$custom-range-track-border-radius", "$value": "1rem" } } }, "thumb": { "$type": "dimension", - "width": { - "source": "$custom-range-thumb-width", - "$value": "1rem" - }, - "height": { - "source": "$custom-range-thumb-height", - "$value": "{size.form.control.range.thumb.width}" - }, + "width": { "source": "$custom-range-thumb-width", "$value": "1rem" }, + "height": { "source": "$custom-range-thumb-height", "$value": "{size.form.control.range.thumb.width}" }, "border": { - "base": { - "source": "$custom-range-thumb-border", - "$value": "0" - }, - "radius": { - "source": "$custom-range-thumb-border-radius", - "$value": "1rem" - } + "base": { "source": "$custom-range-thumb-border", "$value": "0" }, + "radius": { "source": "$custom-range-thumb-border-radius", "$value": "1rem" } }, "focus": { - "width": { - "source": "$custom-range-thumb-focus-box-shadow-width", - "$value": "{size.form.input.width.focus}" - } + "width": { "source": "$custom-range-thumb-focus-box-shadow-width", "$value": "{size.form.input.width.focus}" } } } }, "file": { "$type": "dimension", - "width": { - "source": "$custom-file-border-width", - "$value": "{size.form.input.width.border}" - }, + "width": { "source": "$custom-file-border-width", "$value": "{size.form.input.width.border}" }, "height": { - "base": { - "source": "$custom-file-height", - "$value": "{size.form.input.height.base}" - }, - "inner": { - "source": "$custom-file-height-inner", - "$value": "{size.form.input.height.inner.base}" - } + "base": { "source": "$custom-file-height", "$value": "{size.form.input.height.base}" }, + "inner": { "source": "$custom-file-height-inner", "$value": "{size.form.input.height.inner.base}" } }, "border": { - "radius": { - "source": "$custom-file-border-radius", - "$value": "{size.form.input.radius.border.base}" - } + "radius": { "source": "$custom-file-border-radius", "$value": "{size.form.input.radius.border.base}" } } }, "icon": { "$type": "dimension", - "width": { - "source": "$form-control-icon-width", - "$value": "2rem" - } + "width": { "source": "$form-control-icon-width", "$value": "2rem" } }, "border": { "checkbox": { "$type": "dimension", "indicator": { - "radius": { - "source": "$custom-checkbox-indicator-border-radius", - "$value": "0" - } + "radius": { "source": "$custom-checkbox-indicator-border-radius", "$value": "0" } } }, "radio": { "$type": "percentage", "indicator": { - "radius": { - "source": "$custom-radio-indicator-border-radius", - "$value": "50%" - } + "radius": { "source": "$custom-radio-indicator-border-radius", "$value": "50%" } } } } }, "grid": { "$type": "dimension", - "gutter-width": { - "source": "$form-grid-gutter-width", - "$value": "0.625rem" - } + "gutter-width": { "source": "$form-grid-gutter-width", "$value": "0.625rem" } }, "autosuggest": { "$type": "dimension", "icon": { - "width": { - "source": "$form-autosuggest-icon-width", - "$value": "2.4rem" - }, - "height": { - "source": "$form-autosuggest-icon-height", - "$value": "{size.form.autosuggest.icon.width}" - } + "width": { "source": "$form-autosuggest-icon-width", "$value": "2.4rem" }, + "height": { "source": "$form-autosuggest-icon-height", "$value": "{size.form.autosuggest.icon.width}" } }, "spinner": { - "width": { - "source": "$form-autosuggest-spinner-width", - "$value": "1.25rem" - }, - "height": { - "source": "$form-autosuggest-spinner-height", - "$value": "{size.form.autosuggest.spinner.width}" - } + "width": { "source": "$form-autosuggest-spinner-width", "$value": "1.25rem" }, + "height": { "source": "$form-autosuggest-spinner-height", "$value": "{size.form.autosuggest.spinner.width}" } }, "border": { - "width": { - "source": "$form-autosuggest-border-width", - "$value": ".125rem" - } + "width": { "source": "$form-autosuggest-border-width", "$value": ".125rem" } } }, "border": { "$type": "dimension", "radius": { "check": { - "focus": { - "source": "$form-check-focus-border-radius", - "$value": ".0625rem" - } + "focus": { "source": "$form-check-focus-border-radius", "$value": ".0625rem" } }, - "width": { - "source": "$form-check-border-width", - "$value": ".125rem" - } + "width": { "source": "$form-check-border-width", "$value": ".125rem" } } }, "feedback": { "$type": "dimension", "tooltip": { "border": { - "radius": { - "source": "$form-feedback-tooltip-border-radius", - "$value": "{size.border.radius.base}" - } + "radius": { "source": "$form-feedback-tooltip-border-radius", "$value": "{size.border.radius.base}" } } } } diff --git a/tokens/src/core/components/Form/spacing.json b/tokens/src/core/components/Form/spacing.json index 087b9b9216..b69b650bff 100644 --- a/tokens/src/core/components/Form/spacing.json +++ b/tokens/src/core/components/Form/spacing.json @@ -5,136 +5,67 @@ "input": { "padding": { "y": { - "base": { - "source": "$input-padding-y", - "$value": "{spacing.input.btn.padding.y}" - }, - "sm": { - "source": "$input-padding-y-sm", - "$value": "{spacing.input.btn.padding.sm.y}" - }, - "lg": { - "source": "$input-padding-y-lg", - "$value": "{spacing.input.btn.padding.lg.y}" - } + "base": { "source": "$input-padding-y", "$value": "{spacing.input.btn.padding.y}" }, + "sm": { "source": "$input-padding-y-sm", "$value": "{spacing.input.btn.padding.sm.y}" }, + "lg": { "source": "$input-padding-y-lg", "$value": "{spacing.input.btn.padding.lg.y}" } }, "x": { - "base": { - "source": "$input-padding-x", - "$value": "{spacing.input.btn.padding.x}" - }, - "sm": { - "source": "$input-padding-x-sm", - "$value": "{spacing.input.btn.padding.sm.x}" - }, - "lg": { - "source": "$input-padding-x-lg", - "$value": "{spacing.input.btn.padding.lg.x}" - } + "base": { "source": "$input-padding-x", "$value": "{spacing.input.btn.padding.x}" }, + "sm": { "source": "$input-padding-x-sm", "$value": "{spacing.input.btn.padding.sm.x}" }, + "lg": { "source": "$input-padding-x-lg", "$value": "{spacing.input.btn.padding.lg.x}" } } }, "check": { - "gutter": { - "source": "$form-check-input-gutter", - "$value": "1.25rem" - }, + "gutter": { "source": "$form-check-input-gutter", "$value": "1.25rem" }, "margin": { "x": { - "base": { - "source": "$form-check-input-margin-x", - "$value": ".25rem" - }, - "inline": { - "source": "$form-check-inline-input-margin-x", - "$value": ".3125rem" - } + "base": { "source": "$form-check-input-margin-x", "$value": ".25rem" }, + "inline": { "source": "$form-check-inline-input-margin-x", "$value": ".3125rem" } }, - "y": { - "source": "$form-check-input-margin-y", - "$value": ".3rem" - } + "y": { "source": "$form-check-input-margin-y", "$value": ".3rem" } } } }, "text": { "margin": { - "top": { - "source": "$form-text-margin-top", - "$value": ".25rem" - } + "top": { "source": "$form-text-margin-top", "$value": ".25rem" } } }, "check": { "inline": { "margin": { - "x": { - "source": "$form-check-inline-margin-x", - "$value": ".75rem" - } + "x": { "source": "$form-check-inline-margin-x", "$value": ".75rem" } } }, "position": { - "axis": { - "source": "$form-check-position-axis", - "$value": ".375rem" - } + "axis": { "source": "$form-check-position-axis", "$value": ".375rem" } } }, "group": { "margin": { - "bottom": { - "source": "$form-group-margin-bottom", - "$value": "1rem" - } + "bottom": { "source": "$form-group-margin-bottom", "$value": "1rem" } } }, "control": { - "gutter": { - "source": "$custom-control-gutter", - "$value": ".5rem" - }, + "gutter": { "source": "$custom-control-gutter", "$value": ".5rem" }, "spacer": { - "x": { - "source": "$custom-control-spacer-x", - "$value": "1rem" - } + "x": { "source": "$custom-control-spacer-x", "$value": "1rem" } }, "select": { "padding": { "y": { - "base": { - "source": "$custom-select-padding-y", - "$value": "{spacing.form.input.padding.y.base}" - }, - "sm": { - "source": "$custom-select-padding-y-sm", - "$value": "{spacing.form.input.padding.y.sm}" - }, - "lg": { - "source": "$custom-select-padding-y-lg", - "$value": "{spacing.form.input.padding.y.lg}" - } + "base": { "source": "$custom-select-padding-y", "$value": "{spacing.form.input.padding.y.base}" }, + "sm": { "source": "$custom-select-padding-y-sm", "$value": "{spacing.form.input.padding.y.sm}" }, + "lg": { "source": "$custom-select-padding-y-lg", "$value": "{spacing.form.input.padding.y.lg}" } }, "x": { - "base": { - "source": "$custom-select-padding-x", - "$value": "{spacing.form.input.padding.x.base}" - }, - "sm": { - "source": "$custom-select-padding-x-sm", - "$value": "{spacing.form.input.padding.x.sm}" - }, - "lg": { - "source": "$custom-select-padding-x-lg", - "$value": "{spacing.form.input.padding.x.lg}" - } + "base": { "source": "$custom-select-padding-x", "$value": "{spacing.form.input.padding.x.base}" }, + "sm": { "source": "$custom-select-padding-x-sm", "$value": "{spacing.form.input.padding.x.sm}" }, + "lg": { "source": "$custom-select-padding-x-lg", "$value": "{spacing.form.input.padding.x.lg}" } } }, "indicator": { - "padding": { - "source": "$custom-select-indicator-padding", - "$value": "1rem" - } + "padding": { "source": "$custom-select-indicator-padding", "$value": "1rem" } }, "feedback": { "icon": { @@ -150,41 +81,23 @@ } }, "margin": { - "top": { - "source": "$form-feedback-margin-top", - "$value": "{spacing.form.text.margin.top}" - } + "top": { "source": "$form-feedback-margin-top", "$value": "{spacing.form.text.margin.top}" } }, "tooltip": { "padding": { - "y": { - "source": "$form-feedback-tooltip-padding-y", - "$value": ".25rem" - }, - "x": { - "source": "$form-feedback-tooltip-padding-x", - "$value": ".5rem" - } + "y": { "source": "$form-feedback-tooltip-padding-y", "$value": ".25rem" }, + "x": { "source": "$form-feedback-tooltip-padding-x", "$value": ".5rem" } } } }, "icon": { - "padding": { - "source": "$select-icon-padding", - "$value": ".5625rem" - } + "padding": { "source": "$select-icon-padding", "$value": ".5625rem" } } }, "file": { "padding": { - "y": { - "source": "$custom-file-padding-y", - "$value": "{spacing.form.input.padding.y.base}" - }, - "x": { - "source": "$custom-file-padding-x", - "$value": "{spacing.form.input.padding.x.base}" - } + "y": { "source": "$custom-file-padding-y", "$value": "{spacing.form.input.padding.y.base}" }, + "x": { "source": "$custom-file-padding-x", "$value": "{spacing.form.input.padding.x.base}" } } } } diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json index e61e2723ee..da1a0e8e6a 100644 --- a/tokens/src/core/components/Form/typography.json +++ b/tokens/src/core/components/Form/typography.json @@ -3,122 +3,54 @@ "form": { "input": { "font": { - "family": { - "source": "$input-font-family", - "$value": "{typography.input.btn.font.family}", - "$type": "fontFamily" - }, + "family": { "source": "$input-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" }, "size": { "$type": "dimension", - "base": { - "source": "$input-font-size", - "$value": "{typography.input.btn.font.size.base}" - }, - "sm": { - "source": "$input-font-size-sm", - "$value": "{typography.input.btn.font.size.sm}" - }, - "lg": { - "source": "$input-font-size-lg", - "$value": "{typography.input.btn.font.size.lg}" - } + "base": { "source": "$input-font-size", "$value": "{typography.input.btn.font.size.base}" }, + "sm": { "source": "$input-font-size-sm", "$value": "{typography.input.btn.font.size.sm}" }, + "lg": { "source": "$input-font-size-lg", "$value": "{typography.input.btn.font.size.lg}" } }, - "weight": { - "source": "$input-font-weight", - "$value": "{typography.font.weight.base}", - "$type": "fontWeight" - } + "weight": { "source": "$input-font-weight", "$value": "{typography.font.weight.base}", "$type": "fontWeight" } }, "line-height": { "$type": "dimension", - "base": { - "source": "$input-line-height", - "$value": "{typography.input.btn.line-height.base}" - }, - "sm": { - "source": "$input-line-height-sm", - "$value": "{typography.input.btn.line-height.sm}" - }, - "lg": { - "source": "$input-line-height-lg", - "$value": "{typography.input.btn.line-height.lg}" - } + "base": { "source": "$input-line-height", "$value": "{typography.input.btn.line-height.base}" }, + "sm": { "source": "$input-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" }, + "lg": { "source": "$input-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" } } }, "control": { "select": { "font": { - "family": { - "source": "$custom-select-font-family", - "$value": "{typography.form.input.font.family}", - "$type": "fontFamily" - }, + "family": { "source": "$custom-select-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" }, "size": { "$type": "dimension", - "base": { - "source": "$custom-select-font-size", - "$value": "{typography.form.input.font.size.base}" - }, - "sm": { - "source": "$custom-select-font-size-sm", - "$value": "{typography.form.input.font.size.sm}" - }, - "lg": { - "source": "$custom-select-font-size-lg", - "$value": "{typography.form.input.font.size.lg}" - } + "base": { "source": "$custom-select-font-size", "$value": "{typography.form.input.font.size.base}" }, + "sm": { "source": "$custom-select-font-size-sm", "$value": "{typography.form.input.font.size.sm}" }, + "lg": { "source": "$custom-select-font-size-lg", "$value": "{typography.form.input.font.size.lg}" } }, - "weight": { - "source": "$custom-select-font-weight", - "$value": "{typography.form.input.font.weight}", - "$type": "fontWeight" - } + "weight": { "source": "$custom-select-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" } }, - "line-height": { - "source": "$custom-select-line-height", - "$value": "{typography.form.input.line-height.base}", - "$type": "dimension" - } + "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" } }, "file": { - "line-height": { - "source": "$custom-file-line-height", - "$value": "{typography.form.input.line-height.base}", - "$type": "dimension" - }, + "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" }, "font": { - "family": { - "source": "$custom-file-font-family", - "$value": "{typography.form.input.font.family}", - "$type": "fontFamily" - }, - "weight": { - "source": "$custom-file-font-weight", - "$value": "{typography.form.input.font.weight}", - "$type": "fontWeight" - } + "family": { "source": "$custom-file-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" }, + "weight": { "source": "$custom-file-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" } } } }, "feedback": { "$type": "dimension", "font": { - "size": { - "source": "$form-feedback-font-size", - "$value": "{typography.font.size.small.base}" - } + "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.small.base}" } }, "tooltip": { "font": { - "size": { - "source": "$form-feedback-tooltip-font-size", - "$value": "{typography.font.size.sm}" - } + "size": { "source": "$form-feedback-tooltip-font-size", "$value": "{typography.font.size.sm}" } }, - "line-height": { - "source": "$form-feedback-tooltip-line-height", - "$value": "{typography.line-height.base}" - } + "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}" } } } } diff --git a/tokens/src/core/components/Icon.json b/tokens/src/core/components/Icon.json index 388673c966..8d03d79d60 100644 --- a/tokens/src/core/components/Icon.json +++ b/tokens/src/core/components/Icon.json @@ -2,26 +2,11 @@ "$type": "dimension", "size": { "icon": { - "inline": { - "source": "$icon-inline", - "$value": ".8em" - }, - "xs": { - "source": "$icon-xs", - "$value": "1rem" - }, - "sm": { - "source": "$icon-sm", - "$value": "1.25rem" - }, - "md": { - "source": "$icon-md", - "$value": "1.5rem" - }, - "lg": { - "source": "$icon-lg", - "$value": "1.75rem" - } + "inline": { "source": "$icon-inline", "$value": ".8em" }, + "xs": { "source": "$icon-xs", "$value": "1rem" }, + "sm": { "source": "$icon-sm", "$value": "1.25rem" }, + "md": { "source": "$icon-md", "$value": "1.5rem" }, + "lg": { "source": "$icon-lg", "$value": "1.75rem" } } } } diff --git a/tokens/src/core/components/IconButton.json b/tokens/src/core/components/IconButton.json index 6d723d9c55..7ef43c7fe5 100644 --- a/tokens/src/core/components/IconButton.json +++ b/tokens/src/core/components/IconButton.json @@ -3,18 +3,9 @@ "size": { "icon-button": { "diameter": { - "md": { - "source": "$btn-icon-diameter-md", - "$value": "2.75rem" - }, - "sm": { - "source": "$btn-icon-diameter-sm", - "$value": "2.25rem" - }, - "inline": { - "source": "$btn-icon-diameter-inline", - "$value": "calc({typography.line-height.base} * 1em + .1em)" - } + "md": { "source": "$btn-icon-diameter-md", "$value": "2.75rem" }, + "sm": { "source": "$btn-icon-diameter-sm", "$value": "2.25rem" }, + "inline": { "source": "$btn-icon-diameter-inline", "$value": "calc({typography.line-height.base} * 1em + .1em)" } } } } diff --git a/tokens/src/core/components/Image.json b/tokens/src/core/components/Image.json index aa2a189e00..0e62fd3bc8 100644 --- a/tokens/src/core/components/Image.json +++ b/tokens/src/core/components/Image.json @@ -3,10 +3,7 @@ "$type": "percentage", "image": { "figure-caption": { - "font-size": { - "source": "$figure-caption-font-size", - "$value": "90%" - } + "font-size": { "source": "$figure-caption-font-size", "$value": "90%" } } } }, @@ -15,14 +12,8 @@ "image": { "thumbnail": { "border": { - "width": { - "source": "$thumbnail-border-width", - "$value": "{size.border.width}" - }, - "radius": { - "source": "$thumbnail-border-radius", - "$value": "{size.border.radius.base}" - } + "width": { "source": "$thumbnail-border-width", "$value": "{size.border.width}" }, + "radius": { "source": "$thumbnail-border-radius", "$value": "{size.border.radius.base}" } } } } @@ -31,10 +22,7 @@ "$type": "dimension", "image": { "thumbnail": { - "padding": { - "source": "$thumbnail-padding", - "$value": ".25rem" - } + "padding": { "source": "$thumbnail-padding", "$value": ".25rem" } } } } diff --git a/tokens/src/core/components/Menu.json b/tokens/src/core/components/Menu.json index 49cf09727c..a9ed30dc57 100644 --- a/tokens/src/core/components/Menu.json +++ b/tokens/src/core/components/Menu.json @@ -4,25 +4,13 @@ "menu": { "item": { "padding": { - "x": { - "source": "$menu-item-padding-x", - "$value": "{spacing.btn.padding.x.base}" - }, - "y": { - "source": "$menu-item-padding-y", - "$value": "{spacing.btn.padding.y.base}" - } + "x": { "source": "$menu-item-padding-x", "$value": "{spacing.btn.padding.x.base}" }, + "y": { "source": "$menu-item-padding-y", "$value": "{spacing.btn.padding.y.base}" } }, "icon": { "margin": { - "left": { - "source": "$menu-item-icon-margin-left", - "$value": ".25em" - }, - "right": { - "source": "$menu-item-icon-margin-right", - "$value": "{spacing.menu.item.icon.margin.left}" - } + "left": { "source": "$menu-item-icon-margin-left", "$value": ".25em" }, + "right": { "source": "$menu-item-icon-margin-right", "$value": "{spacing.menu.item.icon.margin.left}" } } } } @@ -33,16 +21,8 @@ "select": { "btn-link": { "text-decoration": { - "line": { - "source": "$menu-select-btn-link-text-decoration-line", - "$value": "underline", - "$type": "textDecoration" - }, - "thickness": { - "source": "$menu-select-btn-link-text-decoration-thickness", - "$value": ".125rem", - "$type": "dimension" - } + "line": { "source": "$menu-select-btn-link-text-decoration-line", "$value": "underline", "$type": "textDecoration" }, + "thickness": { "source": "$menu-select-btn-link-text-decoration-thickness", "$value": ".125rem", "$type": "dimension" } } } } @@ -52,35 +32,17 @@ "$type": "dimension", "menu": { "base": { - "border-radius": { - "source": "$menu-border-radius", - "$value": ".25em" - }, - "max-height": { - "source": "$menu-max-height", - "$value": "16.813rem" - } + "border-radius": { "source": "$menu-border-radius", "$value": ".25em" }, + "max-height": { "source": "$menu-max-height", "$value": "16.813rem" } }, "item": { - "height": { - "source": "$menu-item-height", - "$value": "3rem" - }, + "height": { "source": "$menu-item-height", "$value": "3rem" }, "width": { - "base": { - "source": "$menu-item-width", - "$value": "19rem" - }, - "xs": { - "source": "$menu-item-width-xs", - "$value": "13.438rem" - } + "base": { "source": "$menu-item-width", "$value": "19rem" }, + "xs": { "source": "$menu-item-width-xs", "$value": "13.438rem" } }, "border": { - "width": { - "source": "$menu-item-border-width", - "$value": "{size.btn.border.width}" - } + "width": { "source": "$menu-item-border-width", "$value": "{size.btn.border.width}" } } } } diff --git a/tokens/src/core/components/Modal.json b/tokens/src/core/components/Modal.json index fda53a1221..6acdb2d145 100644 --- a/tokens/src/core/components/Modal.json +++ b/tokens/src/core/components/Modal.json @@ -2,44 +2,20 @@ "elevation": { "$type": "ratio", "modal": { - "backdrop-zindex": { - "source": "$zindex-modal-backdrop", - "$value": "1040" - }, - "zindex": { - "source": "$zindex-modal", - "$value": "1050" - } + "backdrop-zindex": { "source": "$zindex-modal-backdrop", "$value": "1040" }, + "zindex": { "source": "$zindex-modal", "$value": "1050" } } }, "size": { "$type": "dimension", "modal": { - "xl": { - "source": "$modal-xl", - "$value": "1140px" - }, - "lg": { - "source": "$modal-lg", - "$value": "800px" - }, - "md": { - "source": "$modal-md", - "$value": "500px" - }, - "sm": { - "source": "$modal-sm", - "$value": "400px" - }, + "xl": { "source": "$modal-xl", "$value": "1140px" }, + "lg": { "source": "$modal-lg", "$value": "800px" }, + "md": { "source": "$modal-md", "$value": "500px" }, + "sm": { "source": "$modal-sm", "$value": "400px" }, "content-border": { - "width": { - "source": "$modal-content-border-width", - "$value": "0px" - }, - "radius": { - "source": "$modal-content-border-radius", - "$value": "{size.border.radius.lg}" - } + "width": { "source": "$modal-content-border-width", "$value": "0px" }, + "radius": { "source": "$modal-content-border-radius", "$value": "{size.border.radius.lg}" } } } }, @@ -47,39 +23,18 @@ "$type": "dimension", "modal": { "inner-padding": { - "base": { - "source": "$modal-inner-padding", - "$value": "1.5rem" - }, - "bottom": { - "source": "$modal-inner-padding-bottom", - "$value": ".7rem" - } + "base": { "source": "$modal-inner-padding", "$value": "1.5rem" }, + "bottom": { "source": "$modal-inner-padding-bottom", "$value": ".7rem" } }, "footer-padding": { - "base": { - "source": "$modal-footer-padding", - "$value": "{spacing.modal.footer-padding.y} 1.5rem" - }, - "y": { - "source": "$modal-footer-padding-y", - "$value": "1rem" - } + "base": { "source": "$modal-footer-padding", "$value": "{spacing.modal.footer-padding.y} 1.5rem" }, + "y": { "source": "$modal-footer-padding-y", "$value": "1rem" } }, "header-padding": { - "base": { - "source": "$modal-header-padding", - "$value": "{spacing.modal.header-padding.y} 1.5rem" - }, - "y": { - "source": "$modal-header-padding-y", - "$value": "1rem" - } + "base": { "source": "$modal-header-padding", "$value": "{spacing.modal.header-padding.y} 1.5rem" }, + "y": { "source": "$modal-header-padding-y", "$value": "1rem" } }, - "dialog-margin": { - "source": "$modal-dialog-margin", - "$value": "1.5rem" - } + "dialog-margin": { "source": "$modal-dialog-margin", "$value": "1.5rem" } } } } diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json index 72b95837e2..6daea697dc 100644 --- a/tokens/src/core/components/Nav.json +++ b/tokens/src/core/components/Nav.json @@ -2,15 +2,8 @@ "typography": { "nav": { "link": { - "font-weight": { - "source": "$nav-link-font-weight", - "$value": "500", - "$type": "fontWeight" - }, - "text-decoration": { - "$value": "none", - "$type": "textDecoration" - } + "font-weight": { "source": "$nav-link-font-weight", "$value": "500", "$type": "fontWeight" }, + "text-decoration": { "$value": "none", "$type": "textDecoration" } } } }, @@ -18,47 +11,26 @@ "$type": "dimension", "nav": { "pills": { - "border-radius": { - "source": "$nav-pills-border-radius", - "$value": "{size.border.radius.base}" - }, + "border-radius": { "source": "$nav-pills-border-radius", "$value": "{size.border.radius.base}" }, "link": { - "border-width": { - "source": "$nav-pills-link-border-width", - "$value": "1px" - } + "border-width": { "source": "$nav-pills-link-border-width", "$value": "1px" } }, "inverse-link": { - "border-width": { - "source": "$nav-inverse-pills-link-border-width", - "$value": "{size.nav.pills.link.border-width}" - } + "border-width": { "source": "$nav-inverse-pills-link-border-width", "$value": "{size.nav.pills.link.border-width}" } } }, "tabs": { "link": { "border-bottom": { - "width": { - "source": "$nav-tabs-link-border-bottom-width", - "$value": ".188rem" - } + "width": { "source": "$nav-tabs-link-border-bottom-width", "$value": ".188rem" } } }, "inverse-link": { - "active-border-bottom-width": { - "source": "$nav-inverse-tabs-link-active-border-bottom-width", - "$value": "{size.nav.tabs.link.border-bottom.width}" - } + "active-border-bottom-width": { "source": "$nav-inverse-tabs-link-active-border-bottom-width", "$value": "{size.nav.tabs.link.border-bottom.width}" } }, "border": { - "width": { - "source": "$nav-tabs-border-width", - "$value": "2px" - }, - "radius": { - "source": "$nav-tabs-border-radius", - "$value": "0" - } + "width": { "source": "$nav-tabs-border-width", "$value": "2px" }, + "radius": { "source": "$nav-tabs-border-radius", "$value": "0" } } } } @@ -68,19 +40,10 @@ "nav": { "link": { "padding": { - "y": { - "source": "$nav-link-padding-y", - "$value": ".5rem" - }, - "x": { - "source": "$nav-link-padding-x", - "$value": "1rem" - } + "y": { "source": "$nav-link-padding-y", "$value": ".5rem" }, + "x": { "source": "$nav-link-padding-x", "$value": "1rem" } }, - "distance-to-border": { - "source": "$nav-tabs-link-distance-to-border", - "$value": "4px" - } + "distance-to-border": { "source": "$nav-tabs-link-distance-to-border", "$value": "4px" } } } } diff --git a/tokens/src/core/components/Navbar.json b/tokens/src/core/components/Navbar.json index f865691dc5..575bbafff0 100644 --- a/tokens/src/core/components/Navbar.json +++ b/tokens/src/core/components/Navbar.json @@ -3,39 +3,21 @@ "spacing": { "navbar": { "padding": { - "y": { - "source": "$navbar-padding-y", - "$value": "calc({spacing.spacer.base} / 2)" - }, + "y": { "source": "$navbar-padding-y", "$value": "calc({spacing.spacer.base} / 2)" }, "x": { - "base": { - "source": "$navbar-padding-x", - "$value": "{spacing.spacer.base}" - }, - "nav-link": { - "source": "$navbar-nav-link-padding-x", - "$value": ".5rem" - } + "base": { "source": "$navbar-padding-x", "$value": "{spacing.spacer.base}" }, + "nav-link": { "source": "$navbar-nav-link-padding-x", "$value": ".5rem" } } }, "brand": { "padding": { - "y": { - "source": "$navbar-brand-padding-y", - "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)" - } + "y": { "source": "$navbar-brand-padding-y", "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)" } } }, "toggler": { "padding": { - "y": { - "source": "$navbar-toggler-padding-y", - "$value": ".25rem" - }, - "x": { - "source": "$navbar-toggler-padding-x", - "$value": ".75rem" - } + "y": { "source": "$navbar-toggler-padding-y", "$value": ".25rem" }, + "x": { "source": "$navbar-toggler-padding-x", "$value": ".75rem" } } } } @@ -43,22 +25,13 @@ "typography": { "navbar": { "brand": { - "font-size": { - "source": "$navbar-brand-font-size", - "$value": "{typography.font.size.lg}" - } + "font-size": { "source": "$navbar-brand-font-size", "$value": "{typography.font.size.lg}" } }, "nav-link": { - "height": { - "source": "$nav-link-height", - "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)" - } + "height": { "source": "$nav-link-height", "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)" } }, "toggler": { - "font-size": { - "source": "$navbar-toggler-font-size", - "$value": "{typography.font.size.lg}" - } + "font-size": { "source": "$navbar-toggler-font-size", "$value": "{typography.font.size.lg}" } } } }, @@ -66,23 +39,14 @@ "navbar": { "nav": { "scroll": { - "max-height": { - "source": "$navbar-nav-scroll-max-height", - "$value": "75vh" - } + "max-height": { "source": "$navbar-nav-scroll-max-height", "$value": "75vh" } } }, "brand": { - "height": { - "source": "$navbar-brand-height", - "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})" - } + "height": { "source": "$navbar-brand-height", "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})" } }, "toggler": { - "border-radius": { - "source": "$navbar-toggler-border-radius", - "$value": "{size.btn.border.radius.base}" - } + "border-radius": { "source": "$navbar-toggler-border-radius", "$value": "{size.btn.border.radius.base}" } } } } diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json index 0f5402f498..2d28cec0c5 100644 --- a/tokens/src/core/components/Pagination.json +++ b/tokens/src/core/components/Pagination.json @@ -3,47 +3,23 @@ "typography": { "pagination": { "font-size": { - "sm": { - "source": "$pagination-font-size-sm", - "$value": ".875rem" - } + "sm": { "source": "$pagination-font-size-sm", "$value": ".875rem" } }, - "line-height": { - "source": "$pagination-line-height", - "$value": "1.5rem" - } + "line-height": { "source": "$pagination-line-height", "$value": "1.5rem" } } }, "spacing": { "pagination": { "padding": { "y": { - "base": { - "source": "$pagination-padding-y", - "$value": ".625rem" - }, - "sm": { - "source": "$pagination-padding-y-sm", - "$value": ".8rem" - }, - "lg": { - "source": "$pagination-padding-y-lg", - "$value": ".75rem" - } + "base": { "source": "$pagination-padding-y", "$value": ".625rem" }, + "sm": { "source": "$pagination-padding-y-sm", "$value": ".8rem" }, + "lg": { "source": "$pagination-padding-y-lg", "$value": ".75rem" } }, "x": { - "base": { - "source": "$pagination-padding-x", - "$value": "1rem" - }, - "sm": { - "source": "$pagination-padding-x-sm", - "$value": ".6rem" - }, - "lg": { - "source": "$pagination-padding-x-lg", - "$value": "1.5rem" - } + "base": { "source": "$pagination-padding-x", "$value": "1rem" }, + "sm": { "source": "$pagination-padding-x-sm", "$value": ".6rem" }, + "lg": { "source": "$pagination-padding-x-lg", "$value": "1.5rem" } } } } @@ -51,72 +27,36 @@ "size": { "pagination": { "icon": { - "width": { - "source": "$pagination-icon-width", - "$value": "2.25rem" - }, - "height": { - "source": "$pagination-icon-height", - "$value": "2.25rem" - } + "width": { "source": "$pagination-icon-width", "$value": "2.25rem" }, + "height": { "source": "$pagination-icon-height", "$value": "2.25rem" } }, "secondary": { "height": { - "base": { - "source": "$pagination-secondary-height", - "$value": "2.75rem" - }, - "sm": { - "source": "$pagination-secondary-height-sm", - "$value": "2.25rem" - } + "base": { "source": "$pagination-secondary-height", "$value": "2.75rem" }, + "sm": { "source": "$pagination-secondary-height-sm", "$value": "2.25rem" } } }, "border": { - "width": { - "source": "$pagination-border-width", - "$value": "{size.border.width}" - }, + "width": { "source": "$pagination-border-width", "$value": "{size.border.width}" }, "radius": { - "sm": { - "source": "$pagination-border-radius-sm", - "$value": "{size.border.radius.sm}" - }, - "lg": { - "source": "$pagination-border-radius-lg", - "$value": "{size.border.radius.lg}" - } + "sm": { "source": "$pagination-border-radius-sm", "$value": "{size.border.radius.sm}" }, + "lg": { "source": "$pagination-border-radius-lg", "$value": "{size.border.radius.lg}" } } }, "reduced": { "dropdown": { - "max-height": { - "source": "$pagination-reduced-dropdown-max-height", - "$value": "60vh" - }, - "min-width": { - "source": "$pagination-reduced-dropdown-min-width", - "$value": "6rem" - } + "max-height": { "source": "$pagination-reduced-dropdown-max-height", "$value": "60vh" }, + "min-width": { "source": "$pagination-reduced-dropdown-min-width", "$value": "6rem" } } }, "toggle": { "border": { - "base": { - "source": "$pagination-toggle-border", - "$value": ".3125rem" - }, - "sm": { - "source": "$pagination-toggle-border-sm", - "$value": ".25rem" - } + "base": { "source": "$pagination-toggle-border", "$value": ".3125rem" }, + "sm": { "source": "$pagination-toggle-border-sm", "$value": ".25rem" } } }, "focus": { - "outline": { - "source": "$pagination-focus-outline", - "$value": "0" - } + "outline": { "source": "$pagination-focus-outline", "$value": "0" } } } } diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json index 54aba2468a..de243f5e09 100644 --- a/tokens/src/core/components/Popover.json +++ b/tokens/src/core/components/Popover.json @@ -2,58 +2,31 @@ "typography": { "$type": "dimension", "popover": { - "font-size": { - "source": "$popover-font-size", - "$value": "{typography.font.size.sm}" - } + "font-size": { "source": "$popover-font-size", "$value": "{typography.font.size.sm}" } } }, "size": { "$type": "dimension", "popover": { - "max-width": { - "source": "$popover-max-width", - "$value": "480px" - }, + "max-width": { "source": "$popover-max-width", "$value": "480px" }, "border": { - "width": { - "source": "$popover-border-width", - "$value": "{size.border.width}" - }, - "radius": { - "source": "$popover-border-radius", - "$value": "{size.border.radius.sm}" - } + "width": { "source": "$popover-border-width", "$value": "{size.border.width}" }, + "radius": { "source": "$popover-border-radius", "$value": "{size.border.radius.sm}" } }, "icon": { - "height": { - "source": "$popover-icon-height", - "$value": "1rem" - }, - "width": { - "source": "$popover-icon-width", - "$value": "1rem" - } + "height": { "source": "$popover-icon-height", "$value": "1rem" }, + "width": { "source": "$popover-icon-width", "$value": "1rem" } }, "arrow": { - "width": { - "source": "$popover-arrow-width", - "$value": "1rem" - }, - "height": { - "source": "$popover-arrow-height", - "$value": ".5rem" - } + "width": { "source": "$popover-arrow-width", "$value": "1rem" }, + "height": { "source": "$popover-arrow-height", "$value": ".5rem" } } } }, "elevation": { "$type": "ratio", "popover": { - "zindex": { - "source": "$zindex-popover", - "$value": "1060" - } + "zindex": { "source": "$zindex-popover", "$value": "1060" } } }, "spacing": { @@ -61,33 +34,18 @@ "popover": { "header": { "padding": { - "y": { - "source": "$popover-header-padding-y", - "$value": ".5rem" - }, - "x": { - "source": "$popover-header-padding-x", - "$value": "1rem" - } + "y": { "source": "$popover-header-padding-y", "$value": ".5rem" }, + "x": { "source": "$popover-header-padding-x", "$value": "1rem" } } }, "body": { "padding": { - "y": { - "source": "$popover-body-padding-y", - "$value": "{spacing.popover.header.padding.y}" - }, - "x": { - "source": "$popover-body-padding-x", - "$value": "{spacing.popover.header.padding.x}" - } + "y": { "source": "$popover-body-padding-y", "$value": "{spacing.popover.header.padding.y}" }, + "x": { "source": "$popover-body-padding-x", "$value": "{spacing.popover.header.padding.x}" } } }, "icon": { - "margin-right": { - "source": "$popover-icon-margin-right", - "$value": ".5rem" - } + "margin-right": { "source": "$popover-icon-margin-right", "$value": ".5rem" } } } } diff --git a/tokens/src/core/components/ProductTour.json b/tokens/src/core/components/ProductTour.json index 3ae503b471..7fa18169f0 100644 --- a/tokens/src/core/components/ProductTour.json +++ b/tokens/src/core/components/ProductTour.json @@ -4,28 +4,13 @@ "product-tour": { "checkpoint": { "width": { - "border": { - "source": "$checkpoint-border-width", - "$value": "8px" - }, - "arrow": { - "source": "$checkpoint-arrow-width", - "$value": "15px" - }, - "max": { - "source": "$checkpoint-max-width", - "$value": "480px" - } + "border": { "source": "$checkpoint-border-width", "$value": "8px" }, + "arrow": { "source": "$checkpoint-arrow-width", "$value": "15px" }, + "max": { "source": "$checkpoint-max-width", "$value": "480px" } }, "arrow": { - "top": { - "source": "$checkpoint-arrow-border-top", - "$value": "{size.product-tour.checkpoint.width.arrow}" - }, - "transparent": { - "source": "$checkpoint-arrow-border-transparent", - "$value": "{size.product-tour.checkpoint.width.arrow}" - } + "top": { "source": "$checkpoint-arrow-border-top", "$value": "{size.product-tour.checkpoint.width.arrow}" }, + "transparent": { "source": "$checkpoint-arrow-border-transparent", "$value": "{size.product-tour.checkpoint.width.arrow}" } } } } @@ -34,10 +19,7 @@ "$type": "ratio", "product-tour": { "checkpoint": { - "zindex": { - "source": "$checkpoint-z-index", - "$value": "1060" - } + "zindex": { "source": "$checkpoint-z-index", "$value": "1060" } } } } diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json index 307e0a3167..d2c948d875 100644 --- a/tokens/src/core/components/ProgressBar.json +++ b/tokens/src/core/components/ProgressBar.json @@ -2,49 +2,28 @@ "typography": { "$type": "dimension", "progress-bar": { - "font-size": { - "source": "$progress-font-size", - "$value": "calc({typography.font.size.base} * .75)" - } + "font-size": { "source": "$progress-font-size", "$value": "calc({typography.font.size.base} * .75)" } } }, "size": { "$type": "dimension", "progress-bar": { "height": { - "base": { - "source": "$progress-height", - "$value": "1rem" - }, - "annotated": { - "source": "$annotated-progress-height", - "$value": ".3125rem" - } + "base": { "source": "$progress-height", "$value": "1rem" }, + "annotated": { "source": "$annotated-progress-height", "$value": ".3125rem" } }, "border": { - "width": { - "source": "$progress-bar-border-width", - "$value": "1px" - }, - "radius": { - "source": "$progress-border-radius", - "$value": "0" - } + "width": { "source": "$progress-bar-border-width", "$value": "1px" }, + "radius": { "source": "$progress-border-radius", "$value": "0" } }, - "threshold-circle": { - "source": "$progress-threshold-circle", - "$value": ".5625rem" - } + "threshold-circle": { "source": "$progress-threshold-circle", "$value": ".5625rem" } } }, "spacing": { "$type": "dimension", "progress-bar": { "hint": { - "annotation-gap": { - "source": "$progress-hint-annotation-gap", - "$value": ".5rem" - } + "annotation-gap": { "source": "$progress-hint-annotation-gap", "$value": ".5rem" } } } }, @@ -52,14 +31,8 @@ "$type": "transition", "progress-bar": { "bar": { - "animation-timing": { - "source": "$progress-bar-animation-timing", - "$value": "1s linear infinite" - }, - "transition": { - "source": "$progress-bar-transition", - "$value": "width .6s ease" - } + "animation-timing": { "source": "$progress-bar-animation-timing", "$value": "1s linear infinite" }, + "transition": { "source": "$progress-bar-transition", "$value": "width .6s ease" } } } } diff --git a/tokens/src/core/components/SearchField.json b/tokens/src/core/components/SearchField.json index 0e1170d3fc..31e5f8eede 100644 --- a/tokens/src/core/components/SearchField.json +++ b/tokens/src/core/components/SearchField.json @@ -4,32 +4,17 @@ "search-field": { "border": { "width": { - "base": { - "source": "$search-border-width", - "$value": ".0625rem" - }, - "focus": { - "source": "$search-border-focus-width", - "$value": ".3125rem" - } + "base": { "source": "$search-border-width", "$value": ".0625rem" }, + "focus": { "source": "$search-border-focus-width", "$value": ".3125rem" } }, - "radius": { - "source": "$search-border-radius", - "$value": "0" - } + "radius": { "source": "$search-border-radius", "$value": "0" } }, - "search-input-height": { - "source": "$input-height-search", - "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" - } + "search-input-height": { "source": "$input-height-search", "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" } } }, "spacing": { "search-field": { - "margin-button": { - "source": "$search-button-margin", - "$value": ".5rem" - } + "margin-button": { "source": "$search-button-margin", "$value": ".5rem" } } } } diff --git a/tokens/src/core/components/SelectableBox.json b/tokens/src/core/components/SelectableBox.json index bf54815ed9..fb4b97aaab 100644 --- a/tokens/src/core/components/SelectableBox.json +++ b/tokens/src/core/components/SelectableBox.json @@ -2,18 +2,9 @@ "$type": "dimension", "spacing": { "selectable-box": { - "padding": { - "source": "$selectable-box-padding", - "$value": "1rem" - }, - "border-radius": { - "source": "$selectable-box-border-radius", - "$value": ".25rem" - }, - "box-space": { - "source": "$selectable-box-space", - "$value": ".75rem" - } + "padding": { "source": "$selectable-box-padding", "$value": "1rem" }, + "border-radius": { "source": "$selectable-box-border-radius", "$value": ".25rem" }, + "box-space": { "source": "$selectable-box-space", "$value": ".75rem" } } } } diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json index 40c116dba5..059eed5bb2 100644 --- a/tokens/src/core/components/Sheet.json +++ b/tokens/src/core/components/Sheet.json @@ -3,14 +3,8 @@ "elevation": { "sheet": { "zindex": { - "backdrop": { - "source": "$zindex-sheet-backdrop", - "$value": "1031" - }, - "main": { - "source": "$zindex-sheet", - "$value": "1032" - } + "backdrop": { "source": "$zindex-sheet-backdrop", "$value": "1031" }, + "main": { "source": "$zindex-sheet", "$value": "1032" } } } } diff --git a/tokens/src/core/components/Spinner.json b/tokens/src/core/components/Spinner.json index b7e780d290..6b46b6f0fa 100644 --- a/tokens/src/core/components/Spinner.json +++ b/tokens/src/core/components/Spinner.json @@ -3,39 +3,18 @@ "size": { "spinner": { "base": { - "width": { - "source": "$spinner-width", - "$value": "2rem" - }, - "height": { - "source": "$spinner-height", - "$value": "{size.spinner.base.width}" - }, - "border-width": { - "source": "$spinner-border-width", - "$value": ".25em" - } + "width": { "source": "$spinner-width", "$value": "2rem" }, + "height": { "source": "$spinner-height", "$value": "{size.spinner.base.width}" }, + "border-width": { "source": "$spinner-border-width", "$value": ".25em" } }, "sm": { - "width": { - "source": "$spinner-width-sm", - "$value": "1rem" - }, - "height": { - "source": "$spinner-height-sm", - "$value": "{size.spinner.sm.width}" - }, - "border-width": { - "source": "$spinner-border-width-sm", - "$value": ".2em" - } + "width": { "source": "$spinner-width-sm", "$value": "1rem" }, + "height": { "source": "$spinner-height-sm", "$value": "{size.spinner.sm.width}" }, + "border-width": { "source": "$spinner-border-width-sm", "$value": ".2em" } } } }, "spacing": { - "vertical-align": { - "source": "$spinner-vertical-align", - "$value": ".125em" - } + "vertical-align": { "source": "$spinner-vertical-align", "$value": ".125em" } } } diff --git a/tokens/src/core/components/Stack.json b/tokens/src/core/components/Stack.json index 13a392432a..7b1cdf9c50 100644 --- a/tokens/src/core/components/Stack.json +++ b/tokens/src/core/components/Stack.json @@ -2,10 +2,7 @@ "$type": "dimension", "size": { "stack": { - "gap": { - "source": "$stack-gap", - "$value": "0" - } + "gap": { "source": "$stack-gap", "$value": "0" } } } } diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json index 327c650204..2590069543 100644 --- a/tokens/src/core/components/Stepper.json +++ b/tokens/src/core/components/Stepper.json @@ -4,35 +4,17 @@ "stepper": { "header": { "padding": { - "y": { - "source": "$stepper-header-padding-y", - "$value": ".75rem" - }, - "x": { - "source": "$stepper-header-padding-x", - "$value": "{spacing.spacer.base}" - } + "y": { "source": "$stepper-header-padding-y", "$value": ".75rem" }, + "x": { "source": "$stepper-header-padding-x", "$value": "{spacing.spacer.base}" } }, "step": { - "padding": { - "source": "$stepper-header-step-padding", - "$value": ".25rem" - }, + "padding": { "source": "$stepper-header-step-padding", "$value": ".25rem" }, "list": { "padding": { - "y": { - "source": "$stepper-header-step-list-padding-y", - "$value": ".25rem" - }, - "x": { - "source": "$stepper-header-step-list-padding-x", - "$value": "0" - } + "y": { "source": "$stepper-header-step-list-padding-y", "$value": ".25rem" }, + "x": { "source": "$stepper-header-step-list-padding-x", "$value": "0" } }, - "margin": { - "source": "$stepper-header-step-list-margin", - "$value": "0" - } + "margin": { "source": "$stepper-header-step-list-margin", "$value": "0" } } } } @@ -41,29 +23,17 @@ "size": { "stepper": { "header": { - "height-min": { - "source": "$stepper-header-min-height", - "$value": "5.13rem" - } + "height-min": { "source": "$stepper-header-min-height", "$value": "5.13rem" } }, "step": { - "width-min": { - "source": "$stepper-header-step-min-width", - "$value": "0" - }, - "bubble-error-shadow-width": { - "source": "$stepper-header-step-error-bubble-shadow-width", - "$value": "3px" - } + "width-min": { "source": "$stepper-header-step-min-width", "$value": "0" }, + "bubble-error-shadow-width": { "source": "$stepper-header-step-error-bubble-shadow-width", "$value": "3px" } } } }, "typography": { "spacer": { - "line-height": { - "source": "$stepper-header-line-height", - "$value": "1px" - } + "line-height": { "source": "$stepper-header-line-height", "$value": "1px" } } } } diff --git a/tokens/src/core/components/Sticky.json b/tokens/src/core/components/Sticky.json index ad8f333ea3..001b481d66 100644 --- a/tokens/src/core/components/Sticky.json +++ b/tokens/src/core/components/Sticky.json @@ -2,10 +2,7 @@ "$type": "dimension", "spacing": { "sticky": { - "offset": { - "source": "$sticky-offset", - "$value": "0" - } + "offset": { "source": "$sticky-offset", "$value": "0" } } } } diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json index 9f01b0ecb6..233bdd72b6 100644 --- a/tokens/src/core/components/Tab.json +++ b/tokens/src/core/components/Tab.json @@ -3,38 +3,17 @@ "spacing": { "tab": { "more-link-dropdown-toggle": { - "padding-x": { - "source": "$tab-more-link-dropdown-toggle-padding-x", - "$value": ".7rem" - }, - "padding-y": { - "source": "$tab-more-link-dropdown-toggle-padding-y", - "$value": "{spacing.spacer.base}" - } + "padding-x": { "source": "$tab-more-link-dropdown-toggle-padding-x", "$value": ".7rem" }, + "padding-y": { "source": "$tab-more-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" } }, "inverse-pills-link-dropdown-toggle": { - "padding-x": { - "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x", - "$value": ".625rem" - }, - "padding-y": { - "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y", - "$value": "{spacing.spacer.base}" - } + "padding-x": { "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x", "$value": ".625rem" }, + "padding-y": { "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" } }, "inverse-tabs-link-dropdown-toggle": { - "padding-x": { - "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x", - "$value": ".625rem" - }, - "padding-y": { - "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y", - "$value": "{spacing.spacer.base}" - }, - "distance": { - "source": "$tab-inverse-pills-link-dropdown-distance", - "$value": "5px" - } + "padding-x": { "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x", "$value": ".625rem" }, + "padding-y": { "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" }, + "distance": { "source": "$tab-inverse-pills-link-dropdown-distance", "$value": "5px" } } } } diff --git a/tokens/src/core/components/Tabs.json b/tokens/src/core/components/Tabs.json index 164c330ae0..93d7ce5d53 100644 --- a/tokens/src/core/components/Tabs.json +++ b/tokens/src/core/components/Tabs.json @@ -3,24 +3,15 @@ "size": { "tabs": { "notification": { - "height": { - "source": "$tab-notification-height", - "$value": "1rem" - }, - "width": { - "source": "$tab-notification-width", - "$value": "1rem" - } + "height": { "source": "$tab-notification-height", "$value": "1rem" }, + "width": { "source": "$tab-notification-width", "$value": "1rem" } } } }, "typography": { "tabs": { "notification": { - "font-size": { - "source": "$tab-notification-font-size", - "$value": "{typography.font.size.xs}" - } + "font-size": { "source": "$tab-notification-font-size", "$value": "{typography.font.size.xs}" } } } } diff --git a/tokens/src/core/components/Toast.json b/tokens/src/core/components/Toast.json index ef7511a4a0..6b46867ab7 100644 --- a/tokens/src/core/components/Toast.json +++ b/tokens/src/core/components/Toast.json @@ -2,52 +2,28 @@ "$type": "dimension", "typography": { "toast": { - "font-size": { - "source": "$toast-font-size", - "$value": ".875rem" - } + "font-size": { "source": "$toast-font-size", "$value": ".875rem" } } }, "size": { "toast": { - "max-width": { - "source": "$toast-max-width", - "$value": "400px" - }, + "max-width": { "source": "$toast-max-width", "$value": "400px" }, "border": { - "width": { - "source": "$toast-border-width", - "$value": "1px" - }, - "radius": { - "source": "$toast-border-radius", - "$value": ".25rem" - } + "width": { "source": "$toast-border-width", "$value": "1px" }, + "radius": { "source": "$toast-border-radius", "$value": ".25rem" } } } }, "spacing": { "toast": { "padding": { - "x": { - "source": "$toast-padding-x", - "$value": ".75rem" - }, - "y": { - "source": "$toast-padding-y", - "$value": ".25rem" - } + "x": { "source": "$toast-padding-x", "$value": ".75rem" }, + "y": { "source": "$toast-padding-y", "$value": ".25rem" } }, "container": { "gutter": { - "lg": { - "source": "$toast-container-gutter-lg", - "$value": "1.25rem" - }, - "sm": { - "source": "$toast-container-gutter-sm", - "$value": ".625rem" - } + "lg": { "source": "$toast-container-gutter-lg", "$value": "1.25rem" }, + "sm": { "source": "$toast-container-gutter-sm", "$value": ".625rem" } } } } diff --git a/tokens/src/core/components/Tooltip.json b/tokens/src/core/components/Tooltip.json index 9cbc9c09bf..1df0b65bdc 100644 --- a/tokens/src/core/components/Tooltip.json +++ b/tokens/src/core/components/Tooltip.json @@ -2,61 +2,34 @@ "typography": { "$type": "dimension", "tooltip": { - "font-size": { - "source": "$tooltip-font-size", - "$value": "{typography.font.size.sm}" - } + "font-size": { "source": "$tooltip-font-size", "$value": "{typography.font.size.sm}" } } }, "spacing": { "$type": "dimension", "tooltip": { "padding": { - "y": { - "source": "$tooltip-padding-y", - "$value": ".5rem" - }, - "x": { - "source": "$tooltip-padding-x", - "$value": ".5rem" - } + "y": { "source": "$tooltip-padding-y", "$value": ".5rem" }, + "x": { "source": "$tooltip-padding-x", "$value": ".5rem" } }, - "margin": { - "source": "$tooltip-margin", - "$value": "0" - } + "margin": { "source": "$tooltip-margin", "$value": "0" } } }, "elevation": { "$type": "ratio", "tooltip": { - "zindex": { - "source": "$zindex-tooltip", - "$value": "1070" - } + "zindex": { "source": "$zindex-tooltip", "$value": "1070" } } }, "size": { "$type": "dimension", "tooltip": { - "max-width": { - "source": "$tooltip-max-width", - "$value": "200px" - }, + "max-width": { "source": "$tooltip-max-width", "$value": "200px" }, "arrow": { - "height": { - "source": "$tooltip-arrow-height", - "$value": ".4rem" - }, - "width": { - "source": "$tooltip-arrow-width", - "$value": ".8rem" - } + "height": { "source": "$tooltip-arrow-height", "$value": ".4rem" }, + "width": { "source": "$tooltip-arrow-width", "$value": ".8rem" } }, - "border-radius": { - "source": "$tooltip-border-radius", - "$value": "{size.border.radius.base}" - } + "border-radius": { "source": "$tooltip-border-radius", "$value": "{size.border.radius.base}" } } } } diff --git a/tokens/src/core/components/general/caret.json b/tokens/src/core/components/general/caret.json index 7770844e1e..0a09e81e67 100644 --- a/tokens/src/core/components/general/caret.json +++ b/tokens/src/core/components/general/caret.json @@ -2,22 +2,13 @@ "$type": "dimension", "size": { "caret": { - "width": { - "source": "$caret-width", - "$value": ".3em" - } + "width": { "source": "$caret-width", "$value": ".3em" } } }, "spacing": { "caret": { - "base": { - "source": "$caret-spacing", - "$value": ".255em" - }, - "vertical-align": { - "source": "$caret-vertical-align", - "$value": ".255em" - } + "base": { "source": "$caret-spacing", "$value": ".255em" }, + "vertical-align": { "source": "$caret-vertical-align", "$value": ".255em" } } } } diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json index 61abf746b1..40312e767b 100644 --- a/tokens/src/core/components/general/headings.json +++ b/tokens/src/core/components/general/headings.json @@ -2,31 +2,16 @@ "typography": { "headings": { "font": { - "family": { - "source": "$headings-font-family", - "$value": "inherit", - "$type": "fontFamily" - }, - "weight": { - "source": "$headings-font-weight", - "$value": "{typography.font.weight.bold}", - "$type": "fontWeight" - } + "family": { "source": "$headings-font-family", "$value": "inherit", "$type": "fontFamily" }, + "weight": { "source": "$headings-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" } }, - "line-height": { - "source": "$headings-line-height", - "$value": "1.25", - "$type": "dimension" - } + "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "dimension" } } }, "spacing": { "$type": "dimension", "headings": { - "margin-bottom": { - "source": "$headings-margin-bottom", - "$value": ".5rem" - } + "margin-bottom": { "source": "$headings-margin-bottom", "$value": ".5rem" } } } } diff --git a/tokens/src/core/components/general/hr.json b/tokens/src/core/components/general/hr.json index 84fc96109a..0464dd5d84 100644 --- a/tokens/src/core/components/general/hr.json +++ b/tokens/src/core/components/general/hr.json @@ -3,14 +3,8 @@ "size": { "hr": { "border": { - "width": { - "source": "$hr-border-width", - "$value": "{size.border.width}" - }, - "margin-y": { - "source": "$hr-margin-y", - "$value": "{spacing.spacer.base}" - } + "width": { "source": "$hr-border-width", "$value": "{size.border.width}" }, + "margin-y": { "source": "$hr-margin-y", "$value": "{spacing.spacer.base}" } } } } diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json index 36042d0f11..f0fabce75c 100644 --- a/tokens/src/core/components/general/input.json +++ b/tokens/src/core/components/general/input.json @@ -3,41 +3,19 @@ "input": { "btn": { "font": { - "family": { - "source": "$input-btn-font-family", - "$value": "inherit", - "$type": "fontFamily" - }, + "family": { "source": "$input-btn-font-family", "$value": "inherit", "$type": "fontFamily" }, "size": { "$type": "dimension", - "base": { - "source": "$input-btn-font-size", - "$value": "1.125rem" - }, - "sm": { - "source": "$input-btn-font-size-sm", - "$value": ".875rem" - }, - "lg": { - "source": "$input-btn-font-size-lg", - "$value": "1.325rem" - } + "base": { "source": "$input-btn-font-size", "$value": "1.125rem" }, + "sm": { "source": "$input-btn-font-size-sm", "$value": ".875rem" }, + "lg": { "source": "$input-btn-font-size-lg", "$value": "1.325rem" } } }, "line-height": { "$type": "dimension", - "base": { - "source": "$input-btn-line-height", - "$value": "1.3333" - }, - "sm": { - "source": "$input-btn-line-height-sm", - "$value": "1.4286" - }, - "lg": { - "source": "$input-btn-line-height-lg", - "$value": "{typography.line-height.lg}" - } + "base": { "source": "$input-btn-line-height", "$value": "1.3333" }, + "sm": { "source": "$input-btn-line-height-sm", "$value": "1.4286" }, + "lg": { "source": "$input-btn-line-height-lg", "$value": "{typography.line-height.lg}" } } } } @@ -47,33 +25,15 @@ "input": { "btn": { "padding": { - "y": { - "source": "$input-btn-padding-y", - "$value": ".5625rem" - }, - "x": { - "source": "$input-btn-padding-x", - "$value": "1rem" - }, + "y": { "source": "$input-btn-padding-y", "$value": ".5625rem" }, + "x": { "source": "$input-btn-padding-x", "$value": "1rem" }, "sm": { - "y": { - "source": "$input-btn-padding-y-sm", - "$value": ".4375rem" - }, - "x": { - "source": "$input-btn-padding-x-sm", - "$value": ".75rem" - } + "y": { "source": "$input-btn-padding-y-sm", "$value": ".4375rem" }, + "x": { "source": "$input-btn-padding-x-sm", "$value": ".75rem" } }, "lg": { - "y": { - "source": "$input-btn-padding-y-lg", - "$value": ".6875rem" - }, - "x": { - "source": "$input-btn-padding-x-lg", - "$value": "1.25rem" - } + "y": { "source": "$input-btn-padding-y-lg", "$value": ".6875rem" }, + "x": { "source": "$input-btn-padding-x-lg", "$value": "1.25rem" } } } } @@ -83,14 +43,8 @@ "$type": "dimension", "input": { "btn": { - "border-width": { - "source": "$input-btn-border-width", - "$value": "{size.border.width}" - }, - "focus-width": { - "source": "$input-btn-focus-width", - "$value": "1px" - } + "border-width": { "source": "$input-btn-border-width", "$value": "{size.border.width}" }, + "focus-width": { "source": "$input-btn-focus-width", "$value": "1px" } } } } diff --git a/tokens/src/core/components/general/link.json b/tokens/src/core/components/general/link.json index f6ce3e2cf0..e72197e63b 100644 --- a/tokens/src/core/components/general/link.json +++ b/tokens/src/core/components/general/link.json @@ -3,62 +3,26 @@ "typography": { "link": { "decoration": { - "base": { - "source": "$link-decoration", - "$value": "none" - }, - "hover": { - "source": "$link-hover-decoration", - "$value": "underline" - }, + "base": { "source": "$link-decoration", "$value": "none" }, + "hover": { "source": "$link-hover-decoration", "$value": "underline" }, "inline": { - "base": { - "source": "$inline-link-decoration", - "$value": "underline" - }, - "hover": { - "source": "$inline-link-hover-decoration", - "$value": "underline" - } + "base": { "source": "$inline-link-decoration", "$value": "underline" }, + "hover": { "source": "$inline-link-hover-decoration", "$value": "underline" } }, "muted": { - "base": { - "source": "$muted-link-decoration", - "$value": "none" - }, - "hover": { - "source": "$muted-link-hover-decoration", - "$value": "underline" - }, + "base": { "source": "$muted-link-decoration", "$value": "none" }, + "hover": { "source": "$muted-link-hover-decoration", "$value": "underline" }, "inline": { - "base": { - "source": "$muted-inline-link-decoration", - "$value": "underline" - }, - "hover": { - "source": "$muted-inline-link-hover-decoration", - "$value": "underline" - } + "base": { "source": "$muted-inline-link-decoration", "$value": "underline" }, + "hover": { "source": "$muted-inline-link-hover-decoration", "$value": "underline" } } }, "brand": { - "base": { - "source": "$brand-link-decoration", - "$value": "none" - }, - "hover": { - "source": "$brand-link-hover-decoration", - "$value": "underline" - }, + "base": { "source": "$brand-link-decoration", "$value": "none" }, + "hover": { "source": "$brand-link-hover-decoration", "$value": "underline" }, "inline": { - "base": { - "source": "$brand-inline-link-decoration", - "$value": "underline" - }, - "hover": { - "source": "$brand-inline-link-hover-decoration", - "$value": "underline" - } + "base": { "source": "$brand-inline-link-decoration", "$value": "underline" }, + "hover": { "source": "$brand-inline-link-hover-decoration", "$value": "underline" } } } } diff --git a/tokens/src/core/components/general/list.json b/tokens/src/core/components/general/list.json index 0a04eacbb3..071f3b6a05 100644 --- a/tokens/src/core/components/general/list.json +++ b/tokens/src/core/components/general/list.json @@ -2,29 +2,17 @@ "typography": { "$type": "fontWeight", "dt": { - "font-weight": { - "source": "$dt-font-weight", - "$value": "{typography.font.weight.bold}" - } + "font-weight": { "source": "$dt-font-weight", "$value": "{typography.font.weight.bold}" } } }, "spacing": { "$type": "dimension", "list": { - "inline-padding": { - "source": "$list-inline-padding", - "$value": ".5rem" - }, + "inline-padding": { "source": "$list-inline-padding", "$value": ".5rem" }, "group-item": { "padding": { - "y": { - "source": "$list-group-item-padding-y", - "$value": ".75rem" - }, - "x": { - "source": "$list-group-item-padding-x", - "$value": "1.25rem" - } + "y": { "source": "$list-group-item-padding-y", "$value": ".75rem" }, + "x": { "source": "$list-group-item-padding-x", "$value": "1.25rem" } } } } @@ -33,14 +21,8 @@ "$type": "dimension", "list-group": { "border": { - "width": { - "source": "$list-group-border-width", - "$value": "{size.border.width}" - }, - "radius": { - "source": "$list-group-border-radius", - "$value": "{size.border.radius.base}" - } + "width": { "source": "$list-group-border-width", "$value": "{size.border.width}" }, + "radius": { "source": "$list-group-border-radius", "$value": "{size.border.radius.base}" } } } } diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json index 797fb5e3e4..45ce22da9a 100644 --- a/tokens/src/core/components/general/text.json +++ b/tokens/src/core/components/general/text.json @@ -2,28 +2,16 @@ "$type": "dimension", "spacing": { "paragraph": { - "margin-bottom": { - "source": "$paragraph-margin-bottom", - "$value": "1rem" - } + "margin-bottom": { "source": "$paragraph-margin-bottom", "$value": "1rem" } }, - "mark-padding": { - "source": "$mark-padding", - "$value": ".2em" - } + "mark-padding": { "source": "$mark-padding", "$value": ".2em" } }, "typography": { "blockquote": { "small": { - "font-size": { - "source": "$blockquote-small-font-size", - "$value": "{typography.font.size.small.base}" - } + "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.small.base}" } }, - "font-size": { - "source": "$blockquote-font-size", - "$value": "calc({typography.font.size.base} * 1.25)" - } + "font-size": { "source": "$blockquote-font-size", "$value": "calc({typography.font.size.base} * 1.25)" } } } } diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json index 2ca2230790..88571fd5c9 100644 --- a/tokens/src/themes/light/alias/color.json +++ b/tokens/src/themes/light/alias/color.json @@ -2,10 +2,7 @@ "$type": "color", "color": { "bg": { - "base": { - "$value": "{color.white}", - "$description": "Basic background color." - }, + "base": { "$value": "{color.white}", "$description": "Basic background color." }, "active": { "source": "$component-active-bg", "$value": "{color.primary.500}", @@ -16,23 +13,13 @@ "50": { "black": { "source": "$text-black-50", - "modify": [ - { - "type": "alpha", - "amount": 0.5 - } - ], + "modify": [{ "type": "alpha", "amount": 0.5 }], "$value": "{color.black}", "$description": "Black text color with transparency of 50%." }, "white": { "source": "$text-white-50", - "modify": [ - { - "type": "alpha", - "amount": 0.5 - } - ], + "modify": [{ "type": "alpha", "amount": 0.5 }], "$value": "{color.white}", "$description": "White text color with transparency of 50%." } diff --git a/tokens/src/themes/light/components/Alert.json b/tokens/src/themes/light/components/Alert.json index e3f2f734fd..4a5359008e 100644 --- a/tokens/src/themes/light/components/Alert.json +++ b/tokens/src/themes/light/components/Alert.json @@ -2,67 +2,25 @@ "$type": "color", "color": { "alert": { - "title": { - "source": "$alert-title-color", - "$value": "{color.black}" - }, - "content": { - "source": "$alert-content-color", - "$value": "{color.gray.700}" - }, + "title": { "source": "$alert-title-color", "$value": "{color.black}" }, + "content": { "source": "$alert-content-color", "$value": "{color.gray.700}" }, "icon": { - "success": { - "source": "$alert-success-icon-color", - "$value": "{color.theme.default.success}" - }, - "info": { - "source": "$alert-info-icon-color", - "$value": "{color.theme.default.info}" - }, - "danger": { - "source": "$alert-danger-icon-color", - "$value": "{color.theme.default.danger}" - }, - "warning": { - "source": "$alert-warning-icon-color", - "$value": "{color.theme.default.warning}" - } + "success": { "source": "$alert-success-icon-color", "$value": "{color.theme.default.success}" }, + "info": { "source": "$alert-info-icon-color", "$value": "{color.theme.default.info}" }, + "danger": { "source": "$alert-danger-icon-color", "$value": "{color.theme.default.danger}" }, + "warning": { "source": "$alert-warning-icon-color", "$value": "{color.theme.default.warning}" } }, "bg": { - "success": { - "source": "$alert-success-bg", - "$value": "{color.theme.bg.success}" - }, - "info": { - "source": "$alert-info-bg", - "$value": "{color.theme.bg.info}" - }, - "danger": { - "source": "$alert-danger-bg", - "$value": "{color.theme.bg.danger}" - }, - "warning": { - "source": "$alert-warning-bg", - "$value": "{color.theme.bg.warning}" - } + "success": { "source": "$alert-success-bg", "$value": "{color.theme.bg.success}" }, + "info": { "source": "$alert-info-bg", "$value": "{color.theme.bg.info}" }, + "danger": { "source": "$alert-danger-bg", "$value": "{color.theme.bg.danger}" }, + "warning": { "source": "$alert-warning-bg", "$value": "{color.theme.bg.warning}" } }, "border": { - "success": { - "source": "$alert-success-border-color", - "$value": "{color.theme.border.success}" - }, - "info": { - "source": "$alert-info-border-color", - "$value": "{color.theme.border.info}" - }, - "danger": { - "source": "$alert-danger-border-color", - "$value": "{color.theme.border.danger}" - }, - "warning": { - "source": "$alert-warning-border-color", - "$value": "{color.theme.border.warning}" - } + "success": { "source": "$alert-success-border-color", "$value": "{color.theme.border.success}" }, + "info": { "source": "$alert-info-border-color", "$value": "{color.theme.border.info}" }, + "danger": { "source": "$alert-danger-border-color", "$value": "{color.theme.border.danger}" }, + "warning": { "source": "$alert-warning-border-color", "$value": "{color.theme.border.warning}" } } } } diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json index 9cc0143d7f..c24ae26a72 100644 --- a/tokens/src/themes/light/components/Annotation.json +++ b/tokens/src/themes/light/components/Annotation.json @@ -12,48 +12,18 @@ "$type": "color", "annotation": { "text": { - "success": { - "source": "$annotation-success-color", - "$value": "{color.white}" - }, - "warning": { - "source": "$annotation-warning-color", - "$value": "{color.black}" - }, - "error": { - "source": "$annotation-error-color", - "$value": "{color.white}" - }, - "light": { - "source": "$annotation-light-color", - "$value": "{color.primary.500}" - }, - "dark": { - "source": "$annotation-dark-color", - "$value": "{color.white}" - } + "success": { "source": "$annotation-success-color", "$value": "{color.white}" }, + "warning": { "source": "$annotation-warning-color", "$value": "{color.black}" }, + "error": { "source": "$annotation-error-color", "$value": "{color.white}" }, + "light": { "source": "$annotation-light-color", "$value": "{color.primary.500}" }, + "dark": { "source": "$annotation-dark-color", "$value": "{color.white}" } }, "bg": { - "success": { - "source": "$annotation-success-bg", - "$value": "{color.success.base}" - }, - "warning": { - "source": "$annotation-warning-bg", - "$value": "{color.accent.b}" - }, - "error": { - "source": "$annotation-error-bg", - "$value": "{color.danger.base}" - }, - "light": { - "source": "$annotation-light-bg", - "$value": "{color.white}" - }, - "dark": { - "source": "$annotation-dark-bg", - "$value": "{color.dark.base}" - } + "success": { "source": "$annotation-success-bg", "$value": "{color.success.base}" }, + "warning": { "source": "$annotation-warning-bg", "$value": "{color.accent.b}" }, + "error": { "source": "$annotation-error-bg", "$value": "{color.danger.base}" }, + "light": { "source": "$annotation-light-bg", "$value": "{color.white}" }, + "dark": { "source": "$annotation-dark-bg", "$value": "{color.dark.base}" } } } } diff --git a/tokens/src/themes/light/components/Avatar.json b/tokens/src/themes/light/components/Avatar.json index 8ae2570651..6ad6de32bd 100644 --- a/tokens/src/themes/light/components/Avatar.json +++ b/tokens/src/themes/light/components/Avatar.json @@ -2,9 +2,7 @@ "$type": "color", "color": { "avatar": { - "border": { - "$value": "{color.light.300}" - } + "border": { "$value": "{color.light.300}" } } } } diff --git a/tokens/src/themes/light/components/Badge.json b/tokens/src/themes/light/components/Badge.json index 6316902d44..09417ba9c8 100644 --- a/tokens/src/themes/light/components/Badge.json +++ b/tokens/src/themes/light/components/Badge.json @@ -3,307 +3,115 @@ "color": { "badge": { "text": { - "primary": { - "source": "$badge-primary-color", - "modify": [ - { - "type": "color-yiq" - } - ], - "$value": "{color.primary.base}" - }, - "secondary": { - "source": "$badge-secondary-color", - "modify": [ - { - "type": "color-yiq" - } - ], - "$value": "{color.secondary.base}" - }, - "success": { - "source": "$badge-success-color", - "modify": [ - { - "type": "color-yiq" - } - ], - "$value": "{color.success.base}" - }, - "danger": { - "source": "$badge-danger-color", - "modify": [ - { - "type": "color-yiq" - } - ], - "$value": "{color.danger.base}" - }, - "warning": { - "source": "$badge-warning-color", - "modify": [ - { - "type": "color-yiq" - } - ], - "$value": "{color.warning.base}" - }, - "info": { - "source": "$badge-info-color", - "modify": [ - { - "type": "color-yiq" - } - ], - "$value": "{color.info.base}" - }, - "light": { - "source": "$badge-light-color", - "modify": [ - { - "type": "color-yiq" - } - ], - "$value": "{color.light.base}" - }, - "dark": { - "source": "$badge-dark-color", - "modify": [ - { - "type": "color-yiq" - } - ], - "$value": "{color.dark.base}" - } + "primary": { "source": "$badge-primary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.primary.base}" }, + "secondary": { "source": "$badge-secondary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.secondary.base}" }, + "success": { "source": "$badge-success-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.success.base}" }, + "danger": { "source": "$badge-danger-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.danger.base}" }, + "warning": { "source": "$badge-warning-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.warning.base}" }, + "info": { "source": "$badge-info-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.info.base}" }, + "light": { "source": "$badge-light-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.light.base}" }, + "dark": { "source": "$badge-dark-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.dark.base}" } }, "bg": { - "primary": { - "source": "$badge-primary-bg", - "$value": "{color.primary.base}" - }, - "secondary": { - "source": "$badge-secondary-bg", - "$value": "{color.secondary.base}" - }, - "success": { - "source": "$badge-success-bg", - "$value": "{color.success.base}" - }, - "warning": { - "source": "$badge-warning-bg", - "$value": "{color.warning.base}" - }, - "danger": { - "source": "$badge-danger-bg", - "$value": "{color.danger.base}" - }, - "info": { - "source": "$badge-info-bg", - "$value": "{color.info.base}" - }, - "light": { - "source": "$badge-light-bg", - "$value": "{color.light.base}" - }, - "dark": { - "source": "$badge-dark-bg", - "$value": "{color.dark.base}" - } + "primary": { "source": "$badge-primary-bg", "$value": "{color.primary.base}" }, + "secondary": { "source": "$badge-secondary-bg", "$value": "{color.secondary.base}" }, + "success": { "source": "$badge-success-bg", "$value": "{color.success.base}" }, + "warning": { "source": "$badge-warning-bg", "$value": "{color.warning.base}" }, + "danger": { "source": "$badge-danger-bg", "$value": "{color.danger.base}" }, + "info": { "source": "$badge-info-bg", "$value": "{color.info.base}" }, + "light": { "source": "$badge-light-bg", "$value": "{color.light.base}" }, + "dark": { "source": "$badge-dark-bg", "$value": "{color.dark.base}" } }, "focus": { - "primary": { - "source": "$badge-primary-focus-color", - "$value": "{color.badge.text.primary}" - }, - "secondary": { - "source": "$badge-secondary-focus-color", - "$value": "{color.badge.text.secondary}" - }, - "success": { - "source": "$badge-success-focus-color", - "$value": "{color.badge.text.success}" - }, - "warning": { - "source": "$badge-warning-focus-color", - "$value": "{color.badge.text.warning}" - }, - "danger": { - "source": "$badge-danger-focus-color", - "$value": "{color.badge.text.danger}" - }, - "info": { - "source": "$badge-info-focus-color", - "$value": "{color.badge.text.info}" - }, - "light": { - "source": "$badge-light-focus-color", - "$value": "{color.badge.text.light}" - }, - "dark": { - "source": "$badge-dark-focus-color", - "$value": "{color.badge.text.dark}" - }, + "primary": { "source": "$badge-primary-focus-color", "$value": "{color.badge.text.primary}" }, + "secondary": { "source": "$badge-secondary-focus-color", "$value": "{color.badge.text.secondary}" }, + "success": { "source": "$badge-success-focus-color", "$value": "{color.badge.text.success}" }, + "warning": { "source": "$badge-warning-focus-color", "$value": "{color.badge.text.warning}" }, + "danger": { "source": "$badge-danger-focus-color", "$value": "{color.badge.text.danger}" }, + "info": { "source": "$badge-info-focus-color", "$value": "{color.badge.text.info}" }, + "light": { "source": "$badge-light-focus-color", "$value": "{color.badge.text.light}" }, + "dark": { "source": "$badge-dark-focus-color", "$value": "{color.badge.text.dark}" }, "bg": { "primary": { "source": "$badge-primary-focus-bg", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.badge.bg.primary}" }, "secondary": { "source": "$badge-secondary-focus-bg", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.badge.bg.secondary}" }, "success": { "source": "$badge-success-focus-bg", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.badge.bg.success}" }, "danger": { "source": "$badge-danger-focus-bg", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.badge.bg.danger}" }, "warning": { "source": "$badge-warning-focus-bg", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.badge.bg.warning}" }, "info": { "source": "$badge-info-focus-bg", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.badge.bg.info}" }, "light": { "source": "$badge-light-focus-bg", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.badge.bg.light}" }, "dark": { "source": "$badge-dark-focus-bg", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.badge.bg.dark}" } }, "box-shadow": { "primary": { "source": "$badge-primary-focus-box-shadow-color", - "modify": [ - { - "type": "alpha", - "amount": 0.05 - } - ], + "modify": [{ "type": "alpha", "amount": 0.05 }], "$value": "{color.badge.bg.primary}" }, "secondary": { "source": "$badge-secondary-focus-box-shadow-color", - "modify": [ - { - "type": "alpha", - "amount": 0.05 - } - ], + "modify": [{ "type": "alpha", "amount": 0.05 }], "$value": "{color.badge.bg.secondary}" }, "success": { "source": "$badge-success-focus-box-shadow-color", - "modify": [ - { - "type": "alpha", - "amount": 0.05 - } - ], + "modify": [{ "type": "alpha", "amount": 0.05 }], "$value": "{color.badge.bg.success}" }, "danger": { "source": "$badge-danger-focus-box-shadow-color", - "modify": [ - { - "type": "alpha", - "amount": 0.05 - } - ], + "modify": [{ "type": "alpha", "amount": 0.05 }], "$value": "{color.badge.bg.danger}" }, "warning": { "source": "$badge-warning-focus-box-shadow-color", - "modify": [ - { - "type": "alpha", - "amount": 0.05 - } - ], + "modify": [{ "type": "alpha", "amount": 0.05 }], "$value": "{color.badge.bg.warning}" }, "info": { "source": "$badge-info-focus-box-shadow-color", - "modify": [ - { - "type": "alpha", - "amount": 0.05 - } - ], + "modify": [{ "type": "alpha", "amount": 0.05 }], "$value": "{color.badge.bg.info}" }, "light": { "source": "$badge-light-focus-box-shadow-color", - "modify": [ - { - "type": "alpha", - "amount": 0.05 - } - ], + "modify": [{ "type": "alpha", "amount": 0.05 }], "$value": "{color.badge.bg.light}" }, "dark": { "source": "$badge-dark-focus-box-shadow-color", - "modify": [ - { - "type": "alpha", - "amount": 0.05 - } - ], + "modify": [{ "type": "alpha", "amount": 0.05 }], "$value": "{color.badge.bg.dark}" } } diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json index df8ddf2d34..42929bfe92 100644 --- a/tokens/src/themes/light/components/Breadcrumb.json +++ b/tokens/src/themes/light/components/Breadcrumb.json @@ -2,27 +2,12 @@ "$type": "color", "color": { "breadcrumb": { - "base": { - "source": "$breadcrumb-color", - "$value": "{color.primary.500}" - }, - "active": { - "source": "$breadcrumb-active-color", - "$value": "{color.gray.500}" - }, + "base": { "source": "$breadcrumb-color", "$value": "{color.primary.500}" }, + "active": { "source": "$breadcrumb-active-color", "$value": "{color.gray.500}" }, "inverse": { - "base": { - "source": "$breadcrumb-inverse-color", - "$value": "{color.white}" - }, - "active": { - "source": "$breadcrumb-inverse-active", - "$value": "{color.light.500}" - }, - "spacer": { - "source": "$breadcrumb-inverse-spacer", - "$value": "{color.light.700}" - } + "base": { "source": "$breadcrumb-inverse-color", "$value": "{color.white}" }, + "active": { "source": "$breadcrumb-inverse-active", "$value": "{color.light.500}" }, + "spacer": { "source": "$breadcrumb-inverse-spacer", "$value": "{color.light.700}" } } } } diff --git a/tokens/src/themes/light/components/Bubble.json b/tokens/src/themes/light/components/Bubble.json index ebb63c4092..c36f397309 100644 --- a/tokens/src/themes/light/components/Bubble.json +++ b/tokens/src/themes/light/components/Bubble.json @@ -3,40 +3,16 @@ "color": { "bubble": { "text": { - "success": { - "source": "$bubble-success-color", - "$value": "{color.white}" - }, - "warning": { - "source": "$bubble-warning-color", - "$value": "{color.white}" - }, - "error": { - "source": "$bubble-error-color", - "$value": "{color.white}" - }, - "primary": { - "source": "$bubble-primary-color", - "$value": "{color.white}" - } + "success": { "source": "$bubble-success-color", "$value": "{color.white}" }, + "warning": { "source": "$bubble-warning-color", "$value": "{color.white}" }, + "error": { "source": "$bubble-error-color", "$value": "{color.white}" }, + "primary": { "source": "$bubble-primary-color", "$value": "{color.white}" } }, "bg": { - "success": { - "source": "$bubble-success-bg", - "$value": "{color.success.base}" - }, - "warning": { - "source": "$bubble-warning-bg", - "$value": "{color.warning.base}" - }, - "error": { - "source": "$bubble-error-bg", - "$value": "{color.danger.base}" - }, - "primary": { - "source": "$bubble-primary-bg", - "$value": "{color.primary.base}" - } + "success": { "source": "$bubble-success-bg", "$value": "{color.success.base}" }, + "warning": { "source": "$bubble-warning-bg", "$value": "{color.warning.base}" }, + "error": { "source": "$bubble-error-bg", "$value": "{color.danger.base}" }, + "primary": { "source": "$bubble-primary-bg", "$value": "{color.primary.base}" } } } } diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json index 67ef7787d8..f03f60bd19 100644 --- a/tokens/src/themes/light/components/Button/brand.json +++ b/tokens/src/themes/light/components/Button/brand.json @@ -5,11 +5,7 @@ "text": { "brand": { "source": "$btn-brand-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.bg.brand}" }, "outline-brand": { @@ -36,11 +32,7 @@ }, "inverse-brand": { "source": "$btn-brand-inverse-bg", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.text.inverse-brand}" }, "inverse-outline-brand": { @@ -70,11 +62,7 @@ "text": { "brand": { "source": "$btn-brand-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.hover.bg.brand}" }, "outline-brand": { @@ -83,12 +71,7 @@ }, "inverse-brand": { "source": "$btn-brand-inverse-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.text.inverse-brand}" }, "inverse-outline-brand": { @@ -107,12 +90,7 @@ }, "inverse-brand": { "source": "$btn-brand-inverse-hover-bg", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.bg.inverse-brand}" }, "inverse-outline-brand": { @@ -143,39 +121,22 @@ "text": { "brand": { "source": "$btn-brand-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.brand}" }, "outline-brand": { "source": "$btn-brand-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.outline-brand}" }, "inverse-brand": { "source": "$btn-brand-inverse-active-color", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.btn.text.inverse-brand}" }, "inverse-outline-brand": { "source": "$btn-brand-inverse-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.inverse-outline-brand}" } }, diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json index 6e0feb689f..8b29b583ef 100644 --- a/tokens/src/themes/light/components/Button/core.json +++ b/tokens/src/themes/light/components/Button/core.json @@ -2,34 +2,22 @@ "color": { "$type": "color", "btn": { - "disabled-link": { - "source": "$btn-link-disabled-color", - "$value": "{color.disabled}" - } + "disabled-link": { "source": "$btn-link-disabled-color", "$value": "{color.disabled}" } } }, "elevation": { "$type": "shadow", "btn": { "box-shadow": { - "base": { - "source": "$btn-box-shadow", - "$value": "none" - }, - "active": { - "source": "$btn-active-box-shadow", - "$value": "none" - } + "base": { "source": "$btn-box-shadow", "$value": "none" }, + "active": { "source": "$btn-active-box-shadow", "$value": "none" } } } }, "other": { "$type": "ratio", "btn": { - "disabled-opacity": { - "source": "$btn-disabled-opacity", - "$value": ".65" - } + "disabled-opacity": { "source": "$btn-disabled-opacity", "$value": ".65" } } } } diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json index b2bfcca609..f5c0cc8ec3 100644 --- a/tokens/src/themes/light/components/Button/danger.json +++ b/tokens/src/themes/light/components/Button/danger.json @@ -5,17 +5,10 @@ "text": { "danger": { "source": "$btn-danger-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.bg.danger}" }, - "outline-danger": { - "source": "$btn-danger-outline-color", - "$value": "{color.danger.base}" - }, + "outline-danger": { "source": "$btn-danger-outline-color", "$value": "{color.danger.base}" }, "inverse-danger": { "source": "$btn-danger-inverse-color", "$value": "{color.danger.base}" @@ -26,21 +19,14 @@ } }, "bg": { - "danger": { - "source": "$btn-danger-bg", - "$value": "{color.danger.base}" - }, + "danger": { "source": "$btn-danger-bg", "$value": "{color.danger.base}" }, "outline-danger": { "source": "$btn-danger-outline-bg", "$value": "inherit" }, "inverse-danger": { "source": "$btn-danger-inverse-bg", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.text.inverse-danger}" }, "inverse-outline-danger": { @@ -70,11 +56,7 @@ "text": { "danger": { "source": "$btn-danger-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.hover.bg.danger}" }, "outline-danger": { @@ -83,12 +65,7 @@ }, "inverse-danger": { "source": "$btn-danger-inverse-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.text.inverse-danger}" }, "inverse-outline-danger": { @@ -107,12 +84,7 @@ }, "inverse-danger": { "source": "$btn-danger-inverse-hover-bg", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.bg.inverse-danger}" }, "inverse-outline-danger": { @@ -143,39 +115,22 @@ "text": { "danger": { "source": "$btn-danger-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.danger}" }, "outline-danger": { "source": "$btn-danger-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.outline-danger}" }, "inverse-danger": { "source": "$btn-danger-inverse-active-color", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.btn.text.inverse-danger}" }, "inverse-outline-danger": { "source": "$btn-danger-inverse-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.inverse-outline-danger}" } }, diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json index 741cf4d3e7..c57a7bdf8b 100644 --- a/tokens/src/themes/light/components/Button/dark.json +++ b/tokens/src/themes/light/components/Button/dark.json @@ -5,11 +5,7 @@ "text": { "dark": { "source": "$btn-dark-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.bg.dark}" }, "outline-dark": { @@ -36,11 +32,7 @@ }, "inverse-dark": { "source": "$btn-dark-inverse-bg", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.text.inverse-dark}" }, "inverse-outline-dark": { @@ -70,11 +62,7 @@ "text": { "dark": { "source": "$btn-dark-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.hover.bg.dark}" }, "outline-dark": { @@ -83,12 +71,7 @@ }, "inverse-dark": { "source": "$btn-dark-inverse-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.text.inverse-dark}" }, "inverse-outline-dark": { @@ -107,12 +90,7 @@ }, "inverse-dark": { "source": "$btn-dark-inverse-hover-bg", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.bg.inverse-dark}" }, "inverse-outline-dark": { @@ -143,39 +121,22 @@ "text": { "dark": { "source": "$btn-dark-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.dark}" }, "outline-dark": { "source": "$btn-dark-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.outline-dark}" }, "inverse-dark": { "source": "$btn-dark-inverse-active-color", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.btn.text.inverse-dark}" }, "inverse-outline-dark": { "source": "$btn-dark-inverse-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.inverse-outline-dark}" } }, diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json index 263c989351..b67c84e4ff 100644 --- a/tokens/src/themes/light/components/Button/info.json +++ b/tokens/src/themes/light/components/Button/info.json @@ -5,11 +5,7 @@ "text": { "info": { "source": "$btn-info-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.bg.info}" }, "outline-info": { @@ -36,11 +32,7 @@ }, "inverse-info": { "source": "$btn-info-inverse-bg", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.text.inverse-info}" }, "inverse-outline-info": { @@ -70,11 +62,7 @@ "text": { "info": { "source": "$btn-info-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.hover.bg.info}" }, "outline-info": { @@ -83,12 +71,7 @@ }, "inverse-info": { "source": "$btn-info-inverse-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.text.inverse-info}" }, "inverse-outline-info": { @@ -107,12 +90,7 @@ }, "inverse-info": { "source": "$btn-info-inverse-hover-bg", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.bg.inverse-info}" }, "inverse-outline-info": { @@ -143,39 +121,22 @@ "text": { "info": { "source": "$btn-info-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.info}" }, "outline-info": { "source": "$btn-info-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.outline-info}" }, "inverse-info": { "source": "$btn-info-inverse-active-color", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.btn.text.inverse-info}" }, "inverse-outline-info": { "source": "$btn-info-inverse-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.inverse-outline-info}" } }, diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json index c60f1f8c2c..5837658231 100644 --- a/tokens/src/themes/light/components/Button/light.json +++ b/tokens/src/themes/light/components/Button/light.json @@ -5,11 +5,7 @@ "text": { "light": { "source": "$btn-light-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.bg.light}" }, "outline-light": { @@ -32,11 +28,7 @@ }, "inverse-light": { "source": "$btn-light-inverse-bg", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.text.inverse-light}" }, "outline-light": { @@ -70,11 +62,7 @@ "text": { "light": { "source": "$btn-light-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.hover.bg.light}" }, "outline-light": { @@ -83,12 +71,7 @@ }, "inverse-light": { "source": "$btn-light-inverse-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.text.inverse-light}" }, "inverse-outline-light": { @@ -107,12 +90,7 @@ }, "inverse-light": { "source": "$btn-light-inverse-hover-bg", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.bg.inverse-light}" }, "inverse-outline-light": { @@ -143,39 +121,22 @@ "text": { "light": { "source": "$btn-light-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.light}" }, "outline-light": { "source": "$btn-light-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.outline-light}" }, "inverse-light": { "source": "$btn-light-inverse-active-color", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.btn.text.inverse-light}" }, "inverse-outline-light": { "source": "$btn-light-inverse-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.inverse-outline-light}" } }, diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json index 2144823277..bc9ad182d4 100644 --- a/tokens/src/themes/light/components/Button/primary.json +++ b/tokens/src/themes/light/components/Button/primary.json @@ -5,11 +5,7 @@ "text": { "primary": { "source": "$btn-primary-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.bg.primary}" }, "outline-primary": { @@ -40,11 +36,7 @@ }, "inverse-primary": { "source": "$btn-primary-inverse-bg", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.text.inverse-primary}" } }, @@ -70,11 +62,7 @@ "text": { "primary": { "source": "$btn-primary-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.hover.bg.primary}" }, "outline-primary": { @@ -83,12 +71,7 @@ }, "inverse-primary": { "source": "$btn-primary-inverse-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.text.inverse-primary}" }, "inverse-outline-primary": { @@ -107,12 +90,7 @@ }, "inverse-primary": { "source": "$btn-primary-inverse-hover-bg", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.bg.inverse-primary}" }, "inverse-outline-primary": { @@ -143,39 +121,22 @@ "text": { "primary": { "source": "$btn-primary-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.primary}" }, "outline-primary": { "source": "$btn-primary-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.outline-primary}" }, "inverse-primary": { "source": "$btn-primary-inverse-active-color", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.btn.text.inverse-primary}" }, "inverse-outline-primary": { "source": "$btn-primary-inverse-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.inverse-outline-primary}" } }, diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json index 0ef720101f..e6c4532c96 100644 --- a/tokens/src/themes/light/components/Button/secondary.json +++ b/tokens/src/themes/light/components/Button/secondary.json @@ -5,11 +5,7 @@ "text": { "secondary": { "source": "$btn-secondary-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.bg.secondary}" }, "outline-secondary": { @@ -40,11 +36,7 @@ }, "inverse-secondary": { "source": "$btn-secondary-inverse-bg", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.text.inverse-secondary}" } }, @@ -70,11 +62,7 @@ "text": { "secondary": { "source": "$btn-secondary-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.hover.bg.secondary}" }, "outline-secondary": { @@ -83,12 +71,7 @@ }, "inverse-secondary": { "source": "$btn-secondary-inverse-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.text.inverse-secondary}" }, "inverse-outline-secondary": { @@ -107,12 +90,7 @@ }, "inverse-secondary": { "source": "$btn-secondary-inverse-hover-bg", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.bg.inverse-secondary}" }, "inverse-outline-secondary": { @@ -143,39 +121,22 @@ "text": { "secondary": { "source": "$btn-secondary-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.secondary}" }, "outline-secondary": { "source": "$btn-secondary-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.outline-secondary}" }, "inverse-secondary": { "source": "$btn-secondary-inverse-active-color", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.btn.text.inverse-secondary}" }, "inverse-outline-secondary": { "source": "$btn-secondary-inverse-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.inverse-outline-secondary}" } }, diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json index 8d8be39394..b04fa33702 100644 --- a/tokens/src/themes/light/components/Button/success.json +++ b/tokens/src/themes/light/components/Button/success.json @@ -5,11 +5,7 @@ "text": { "success": { "source": "$btn-success-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.bg.success}" }, "outline-success": { @@ -36,11 +32,7 @@ }, "inverse-success": { "source": "$btn-success-inverse-bg", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.text.inverse-success}" }, "inverse-outline-success": { @@ -70,11 +62,7 @@ "text": { "success": { "source": "$btn-success-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.hover.bg.success}" }, "outline-success": { @@ -83,12 +71,7 @@ }, "inverse-success": { "source": "$btn-success-inverse-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.text.inverse-success}" }, "inverse-outline-success": { @@ -107,12 +90,7 @@ }, "inverse-success": { "source": "$btn-success-inverse-hover-bg", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.bg.inverse-success}" }, "inverse-outline-success": { @@ -143,39 +121,22 @@ "text": { "success": { "source": "$btn-success-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.success}" }, "outline-success": { "source": "$btn-success-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.outline-success}" }, "inverse-success": { "source": "$btn-success-inverse-active-color", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.btn.text.inverse-success}" }, "inverse-outline-success": { "source": "$btn-success-inverse-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.inverse-outline-success}" } }, diff --git a/tokens/src/themes/light/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json index ea506d852b..e42352b352 100644 --- a/tokens/src/themes/light/components/Button/tertiary.json +++ b/tokens/src/themes/light/components/Button/tertiary.json @@ -3,177 +3,79 @@ "color": { "btn": { "text": { - "tertiary": { - "source": "$btn-tertiary-color", - "$value": "{color.gray.700}" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-color", - "$value": "{color.white}" - } + "tertiary": { "source": "$btn-tertiary-color", "$value": "{color.gray.700}" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-color", "$value": "{color.white}" } }, "bg": { - "tertiary": { - "source": "$btn-tertiary-bg", - "$value": "transparent" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-bg", - "$value": "transparent" - } + "tertiary": { "source": "$btn-tertiary-bg", "$value": "transparent" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-bg", "$value": "transparent" } }, "border": { - "tertiary": { - "source": "$btn-tertiary-border-color", - "$value": "transparent" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-border-color", - "$value": "transparent" - } + "tertiary": { "source": "$btn-tertiary-border-color", "$value": "transparent" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-border-color", "$value": "transparent" } }, "hover": { "text": { - "tertiary": { - "source": "$btn-tertiary-hover-color", - "$value": "{color.gray.700}" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-hover-color", - "$value": "{color.white}" - } + "tertiary": { "source": "$btn-tertiary-hover-color", "$value": "{color.gray.700}" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-color", "$value": "{color.white}" } }, "bg": { - "tertiary": { - "source": "$btn-tertiary-hover-bg", - "$value": "{color.light.500}" - }, + "tertiary": { "source": "$btn-tertiary-hover-bg", "$value": "{color.light.500}" }, "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-bg", - "modify": [ - { - "type": "alpha", - "amount": 0.1 - } - ], + "modify": [{ "type": "alpha", "amount": 0.1 }], "$value": "{color.white}" } }, "border": { - "tertiary": { - "source": "$btn-tertiary-hover-border-color", - "$value": "transparent" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-hover-border-color", - "$value": "transparent" - } + "tertiary": { "source": "$btn-tertiary-hover-border-color", "$value": "transparent" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-border-color", "$value": "transparent" } } }, "active": { "text": { - "tertiary": { - "source": "$btn-tertiary-active-color", - "$value": "{color.gray.700}" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-active-color", - "$value": "{color.white}" - } + "tertiary": { "source": "$btn-tertiary-active-color", "$value": "{color.gray.700}" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-color", "$value": "{color.white}" } }, "bg": { - "tertiary": { - "source": "$btn-tertiary-active-bg", - "$value": "{color.light.500}" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-active-bg", - "$value": "{color.btn.hover.bg.inverse-tertiary}" - } + "tertiary": { "source": "$btn-tertiary-active-bg", "$value": "{color.light.500}" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-bg", "$value": "{color.btn.hover.bg.inverse-tertiary}" } }, "border": { - "tertiary": { - "source": "$btn-tertiary-active-border-color", - "$value": "transparent" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-active-border-color", - "$value": "transparent" - } + "tertiary": { "source": "$btn-tertiary-active-border-color", "$value": "transparent" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-border-color", "$value": "transparent" } } }, "focus": { "text": { - "tertiary": { - "source": "$btn-tertiary-focus-color", - "$value": "{color.btn.text.tertiary}" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-focus-color", - "$value": "{color.btn.text.inverse-tertiary}" - } + "tertiary": { "source": "$btn-tertiary-focus-color", "$value": "{color.btn.text.tertiary}" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-color", "$value": "{color.btn.text.inverse-tertiary}" } }, "border": { - "tertiary": { - "source": "$btn-tertiary-focus-border-color", - "$value": "{color.btn.border.tertiary}" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-focus-border-color", - "$value": "transparent" - } + "tertiary": { "source": "$btn-tertiary-focus-border-color", "$value": "{color.btn.border.tertiary}" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-border-color", "$value": "transparent" } }, "bg": { - "tertiary": { - "source": "$btn-tertiary-focus-bg", - "$value": "inherit" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-focus-bg", - "$value": "inherit" - } + "tertiary": { "source": "$btn-tertiary-focus-bg", "$value": "inherit" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-bg", "$value": "inherit" } }, "outline": { - "tertiary": { - "source": "$btn-tertiary-focus-outline-color", - "$value": "{color.theme.focus.primary}" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-focus-outline-color", - "$value": "{color.white}" - } + "tertiary": { "source": "$btn-tertiary-focus-outline-color", "$value": "{color.theme.focus.primary}" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-outline-color", "$value": "{color.white}" } } }, "disabled": { "text": { - "tertiary": { - "source": "$btn-tertiary-disabled-color", - "$value": "{color.btn.text.tertiary}" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-disabled-color", - "$value": "{color.btn.text.inverse-tertiary}" - } + "tertiary": { "source": "$btn-tertiary-disabled-color", "$value": "{color.btn.text.tertiary}" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-color", "$value": "{color.btn.text.inverse-tertiary}" } }, "bg": { - "tertiary": { - "source": "$btn-tertiary-disabled-bg", - "$value": "inherit" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-disabled-bg", - "$value": "inherit" - } + "tertiary": { "source": "$btn-tertiary-disabled-bg", "$value": "inherit" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-bg", "$value": "inherit" } }, "border": { - "tertiary": { - "source": "$btn-tertiary-disabled-border-color", - "$value": "{color.btn.border.tertiary}" - }, - "inverse-tertiary": { - "source": "$btn-inverse-tertiary-disabled-border-color", - "$value": "{color.btn.border.inverse-tertiary}" - } + "tertiary": { "source": "$btn-tertiary-disabled-border-color", "$value": "{color.btn.border.tertiary}" }, + "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-border-color", "$value": "{color.btn.border.inverse-tertiary}" } } } } diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json index 28d0d0b22d..f6b3c6929a 100644 --- a/tokens/src/themes/light/components/Button/warning.json +++ b/tokens/src/themes/light/components/Button/warning.json @@ -5,11 +5,7 @@ "text": { "warning": { "source": "$btn-warning-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.bg.warning}" }, "outline-warning": { @@ -36,11 +32,7 @@ }, "inverse-warning": { "source": "$btn-warning-inverse-bg", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.text.inverse-warning}" }, "inverse-outline-warning": { @@ -70,11 +62,7 @@ "text": { "warning": { "source": "$btn-warning-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.hover.bg.warning}" }, "outline-warning": { @@ -83,12 +71,7 @@ }, "inverse-warning": { "source": "$btn-warning-inverse-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.text.inverse-warning}" }, "inverse-outline-warning": { @@ -107,12 +90,7 @@ }, "inverse-warning": { "source": "$btn-warning-inverse-hover-bg", - "modify": [ - { - "type": "darken", - "amount": 0.075 - } - ], + "modify": [{ "type": "darken", "amount": 0.075 }], "$value": "{color.btn.bg.inverse-warning}" }, "inverse-outline-warning": { @@ -143,39 +121,22 @@ "text": { "warning": { "source": "$btn-warning-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.warning}" }, "outline-warning": { "source": "$btn-warning-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.outline-warning}" }, "inverse-warning": { "source": "$btn-warning-inverse-active-color", - "modify": [ - { - "type": "darken", - "amount": 0.1 - } - ], + "modify": [{ "type": "darken", "amount": 0.1 }], "$value": "{color.btn.text.inverse-warning}" }, "inverse-outline-warning": { "source": "$btn-warning-inverse-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.btn.active.bg.inverse-outline-warning}" } }, diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json index eadb849324..7c7e77a4e3 100644 --- a/tokens/src/themes/light/components/Card.json +++ b/tokens/src/themes/light/components/Card.json @@ -2,50 +2,24 @@ "$type": "color", "color": { "card": { - "base": { - "source": "$card-color", - "$value": "inherit" - }, + "base": { "source": "$card-color", "$value": "inherit" }, "bg": { - "base": { - "source": "$card-bg", - "$value": "{color.bg.base}" - }, - "dark": { - "source": "$card-bg-dark", - "$value": "{color.primary.500}" - }, - "muted": { - "source": "$card-bg-muted", - "$value": "{color.light.200}" - } + "base": { "source": "$card-bg", "$value": "{color.bg.base}" }, + "dark": { "source": "$card-bg-dark", "$value": "{color.primary.500}" }, + "muted": { "source": "$card-bg-muted", "$value": "{color.light.200}" } }, "border": { "base": { "source": "$card-border-color", - "modify": [ - { - "type": "alpha", - "amount": 0.125 - } - ], + "modify": [{ "type": "alpha", "amount": 0.125 }], "$value": "{color.black}" }, "focus": { - "base": { - "source": "$card-border-focus-color", - "$value": "{color.primary.500}" - }, - "dark": { - "source": "$card-border-focus-color-dark", - "$value": "{color.theme.focus.primary}" - } + "base": { "source": "$card-border-focus-color", "$value": "{color.primary.500}" }, + "dark": { "source": "$card-border-focus-color-dark", "$value": "{color.theme.focus.primary}" } } }, - "divider-bg": { - "source": "$card-divider-bg", - "$value": "{color.light.400}" - } + "divider-bg": { "source": "$card-divider-bg", "$value": "{color.light.400}" } } } } diff --git a/tokens/src/themes/light/components/Carousel.json b/tokens/src/themes/light/components/Carousel.json index 12b442ab4e..fd4e5a58f4 100644 --- a/tokens/src/themes/light/components/Carousel.json +++ b/tokens/src/themes/light/components/Carousel.json @@ -3,21 +3,12 @@ "$type": "color", "carousel": { "control": { - "base": { - "source": "$carousel-control-color", - "$value": "{color.white}" - } + "base": { "source": "$carousel-control-color", "$value": "{color.white}" } }, "indicator": { - "active-bg": { - "source": "$carousel-indicator-active-bg", - "$value": "{color.white}" - } + "active-bg": { "source": "$carousel-indicator-active-bg", "$value": "{color.white}" } }, - "caption": { - "source": "$carousel-caption-color", - "$value": "{color.white}" - } + "caption": { "source": "$carousel-caption-color", "$value": "{color.white}" } } }, "content": { @@ -28,25 +19,13 @@ "prev-icon": { "source": "$carousel-control-prev-icon-bg", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\")" }, "next-icon": { "source": "$carousel-control-next-icon-bg", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\")" } } @@ -58,14 +37,8 @@ "carousel": { "control": { "opacity": { - "base": { - "source": "$carousel-control-opacity", - "$value": ".5" - }, - "hover": { - "source": "$carousel-control-hover-opacity", - "$value": ".9" - } + "base": { "source": "$carousel-control-opacity", "$value": ".5" }, + "hover": { "source": "$carousel-control-hover-opacity", "$value": ".9" } } } } diff --git a/tokens/src/themes/light/components/Chip.json b/tokens/src/themes/light/components/Chip.json index 065bf4d66e..291598a431 100644 --- a/tokens/src/themes/light/components/Chip.json +++ b/tokens/src/themes/light/components/Chip.json @@ -3,72 +3,36 @@ "$type": "color", "chip": { "text": { - "light": { - "source": "$chip-light-color", - "$value": "{color.black}" - }, - "dark": { - "source": "$chip-dark-color", - "$value": "{color.white}" - } + "light": { "source": "$chip-light-color", "$value": "{color.black}" }, + "dark": { "source": "$chip-dark-color", "$value": "{color.white}" } }, "bg": { - "light": { - "source": "$chip-light-bg-color", - "$value": "{color.white}" - }, - "dark": { - "source": "$chip-dark-bg", - "$value": "{color.primary.300}" - } + "light": { "source": "$chip-light-bg-color", "$value": "{color.white}" }, + "dark": { "source": "$chip-dark-bg", "$value": "{color.primary.300}" } }, "border": { - "base": { - "source": "$chip-border-color", - "$value": "{color.light.800}" - }, + "base": { "source": "$chip-border-color", "$value": "{color.light.800}" }, "focus": { "selected": { - "dark": { - "source": "$chip-dark-selected-focus-border-color", - "$value": "{color.chip.outline.dark}" - }, - "light": { - "source": "$chip-light-selected-focus-border-color", - "$value": "{color.dark.500}" - } + "dark": { "source": "$chip-dark-selected-focus-border-color", "$value": "{color.chip.outline.dark}" }, + "light": { "source": "$chip-light-selected-focus-border-color", "$value": "{color.dark.500}" } } } }, "label": { - "base": { - "source": "$chip-label-color", - "$value": "{color.primary.700}" - }, - "dark": { - "source": "$chip-dark-label-color", - "$value": "{color.chip.outline.dark}" - } + "base": { "source": "$chip-label-color", "$value": "{color.primary.700}" }, + "dark": { "source": "$chip-dark-label-color", "$value": "{color.chip.outline.dark}" } }, "outline": { - "dark": { - "source": "$chip-dark-outline-color", - "$value": "{color.white}" - }, - "light": { - "source": "$chip-light-outline-color", - "$value": "{color.chip.label.base}" - } + "dark": { "source": "$chip-dark-outline-color", "$value": "{color.white}" }, + "light": { "source": "$chip-light-outline-color", "$value": "{color.chip.label.base}" } } } }, "other": { "$type": "ratio", "chip": { - "opacity-disabled": { - "source": "$chip-disable-opacity", - "$value": ".3" - } + "opacity-disabled": { "source": "$chip-disable-opacity", "$value": ".3" } } } } diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json index 658dafcb9e..f7994d321c 100644 --- a/tokens/src/themes/light/components/CloseButton.json +++ b/tokens/src/themes/light/components/CloseButton.json @@ -1,18 +1,12 @@ { "color": { "$type": "color", - "close-button": { - "source": "$close-color", - "$value": "{color.black}" - } + "close-button": { "source": "$close-color", "$value": "{color.black}" } }, "elevation": { "$type": "shadow", "close-button": { - "text-shadow": { - "source": "$close-text-shadow", - "$value": "0 1px 0 {color.white}" - } + "text-shadow": { "source": "$close-text-shadow", "$value": "0 1px 0 {color.white}" } } } } diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json index 5101ce576f..07785b9754 100644 --- a/tokens/src/themes/light/components/Code.json +++ b/tokens/src/themes/light/components/Code.json @@ -2,34 +2,19 @@ "color": { "$type": "color", "code": { - "base": { - "source": "$code-color", - "$value": "#E83E8C" - }, + "base": { "source": "$code-color", "$value": "#E83E8C" }, "kbd": { - "base": { - "source": "$kbd-color", - "$value": "{color.white}" - }, - "bg": { - "source": "$kbd-bg", - "$value": "{color.gray.700}" - } + "base": { "source": "$kbd-color", "$value": "{color.white}" }, + "bg": { "source": "$kbd-bg", "$value": "{color.gray.700}" } }, - "pre": { - "source": "$pre-color", - "$value": "{color.gray.900}" - } + "pre": { "source": "$pre-color", "$value": "{color.gray.900}" } } }, "elevation": { "$type": "shadow", "code": { "kbd": { - "box-shadow": { - "source": "$kbd-box-shadow", - "$value": "none" - } + "box-shadow": { "source": "$kbd-box-shadow", "$value": "none" } } } } diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json index 386e446f7e..fae700aa26 100644 --- a/tokens/src/themes/light/components/DataTable.json +++ b/tokens/src/themes/light/components/DataTable.json @@ -3,34 +3,20 @@ "$type": "color", "data-table": { "bg": { - "base": { - "source": "$data-table-background-color", - "$value": "{color.bg.base}" - }, + "base": { "source": "$data-table-background-color", "$value": "{color.bg.base}" }, "is-loading": { "source": "$data-table-is-loading-bg", - "modify": [ - { - "type": "alpha", - "amount": 0.7 - } - ], + "modify": [{ "type": "alpha", "amount": 0.7 }], "$value": "{color.white}" } }, - "border": { - "source": "$data-table-border-color", - "$value": "{color.light.300}" - } + "border": { "source": "$data-table-border-color", "$value": "{color.light.300}" } } }, "elevation": { "$type": "shadow", "data-table": { - "box-shadow": { - "source": "$data-table-box-shadow", - "$value": "{elevation.box-shadow.sm}" - } + "box-shadow": { "source": "$data-table-box-shadow", "$value": "{elevation.box-shadow.sm}" } } } } diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json index c642d433dc..ba760ef4c0 100644 --- a/tokens/src/themes/light/components/Dropdown.json +++ b/tokens/src/themes/light/components/Dropdown.json @@ -2,77 +2,37 @@ "color": { "$type": "color", "dropdown": { - "text": { - "source": "$dropdown-color", - "$value": "{color.body.base}" - }, - "header": { - "source": "$dropdown-header-color", - "$value": "{color.gray.500}" - }, - "bg": { - "source": "$dropdown-bg", - "$value": "{color.bg.base}" - }, + "text": { "source": "$dropdown-color", "$value": "{color.body.base}" }, + "header": { "source": "$dropdown-header-color", "$value": "{color.gray.500}" }, + "bg": { "source": "$dropdown-bg", "$value": "{color.bg.base}" }, "border": { "source": "$dropdown-border-color", - "modify": [ - { - "type": "alpha", - "amount": 0.15 - } - ], + "modify": [{ "type": "alpha", "amount": 0.15 }], "$value": "{color.black}" }, - "divider-bg": { - "source": "$dropdown-divider-bg", - "$value": "{color.gray.100}" - }, + "divider-bg": { "source": "$dropdown-divider-bg", "$value": "{color.gray.100}" }, "link": { - "base": { - "source": "$dropdown-link-color", - "$value": "{color.gray.900}" - }, + "base": { "source": "$dropdown-link-color", "$value": "{color.gray.900}" }, "hover": { "base": { "source": "$dropdown-link-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.5 - } - ], + "modify": [{ "type": "darken", "amount": 0.5 }], "$value": "{color.gray.900}" }, - "bg": { - "source": "$dropdown-link-hover-bg", - "$value": "{color.light.300}" - } + "bg": { "source": "$dropdown-link-hover-bg", "$value": "{color.light.300}" } }, "active": { - "base": { - "source": "$dropdown-link-active-color", - "$value": "{color.active}" - }, - "bg": { - "source": "$dropdown-link-active-bg", - "$value": "{color.bg.active}" - } + "base": { "source": "$dropdown-link-active-color", "$value": "{color.active}" }, + "bg": { "source": "$dropdown-link-active-bg", "$value": "{color.bg.active}" } }, - "disabled": { - "source": "$dropdown-link-disabled-color", - "$value": "{color.disabled}" - } + "disabled": { "source": "$dropdown-link-disabled-color", "$value": "{color.disabled}" } } } }, "elevation": { "$type": "shadow", "dropdown": { - "box-shadow": { - "source": "$dropdown-box-shadow", - "$value": "none" - } + "box-shadow": { "source": "$dropdown-box-shadow", "$value": "none" } } } } diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json index c6f4bdb016..c757e73342 100644 --- a/tokens/src/themes/light/components/Dropzone.json +++ b/tokens/src/themes/light/components/Dropzone.json @@ -2,41 +2,20 @@ "color": { "$type": "color", "dropzone": { - "error-wrapper": { - "source": "$dropzone-error-wrapper-color", - "$value": "{color.danger.500}" - }, - "restriction-msg": { - "source": "$dropzone-restriction-msg-color", - "$value": "{color.gray.500}" - }, + "error-wrapper": { "source": "$dropzone-error-wrapper-color", "$value": "{color.danger.500}" }, + "restriction-msg": { "source": "$dropzone-restriction-msg-color", "$value": "{color.gray.500}" }, "border": { - "base": { - "source": "$dropzone-border-color-default", - "$value": "{color.gray.500}" - } + "base": { "source": "$dropzone-border-color-default", "$value": "{color.gray.500}" } } } }, "elevation": { "$type": "shadow", "dropzone": { - "hover": { - "source": "$dropzone-box-shadow-hover", - "$value": "inset 0 0 0 2px {color.info.300}" - }, - "focus": { - "source": "$dropzone-box-shadow-focus", - "$value": "inset 0 0 0 2px {color.info.300}" - }, - "active": { - "source": "$dropzone-box-shadow-active", - "$value": "inset 0 0 0 2px {color.primary.500}" - }, - "error": { - "source": "$dropzone-box-shadow-error", - "$value": "inset 0 0 0 2px {color.danger.300}" - } + "hover": { "source": "$dropzone-box-shadow-hover", "$value": "inset 0 0 0 2px {color.info.300}" }, + "focus": { "source": "$dropzone-box-shadow-focus", "$value": "inset 0 0 0 2px {color.info.300}" }, + "active": { "source": "$dropzone-box-shadow-active", "$value": "inset 0 0 0 2px {color.primary.500}" }, + "error": { "source": "$dropzone-box-shadow-error", "$value": "inset 0 0 0 2px {color.danger.300}" } } } } diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json index 36b54d0c83..261f97bddd 100644 --- a/tokens/src/themes/light/components/Form/color.json +++ b/tokens/src/themes/light/components/Form/color.json @@ -3,154 +3,66 @@ "form": { "input": { "$type": "color", - "base": { - "source": "$input-color", - "$value": "{color.gray.700}" - }, - "placeholder": { - "source": "$input-placeholder-color", - "$value": "{color.gray.500}" - }, - "plaintext": { - "source": "$input-plaintext-color", - "$value": "{color.body.base}" - }, - "border": { - "source": "$input-border-color", - "$value": "{color.gray.500}" - }, + "base": { "source": "$input-color", "$value": "{color.gray.700}" }, + "placeholder": { "source": "$input-placeholder-color", "$value": "{color.gray.500}" }, + "plaintext": { "source": "$input-plaintext-color", "$value": "{color.body.base}" }, + "border": { "source": "$input-border-color", "$value": "{color.gray.500}" }, "bg": { - "base": { - "source": "$input-bg", - "$value": "{color.bg.base}" - }, - "disabled": { - "source": "$input-disabled-bg", - "$value": "{color.gray.100}" - } + "base": { "source": "$input-bg", "$value": "{color.bg.base}" }, + "disabled": { "source": "$input-disabled-bg", "$value": "{color.gray.100}" } }, "group": { "addon": { - "base": { - "source": "$input-group-addon-color", - "$value": "{color.form.input.base}" - }, - "border": { - "source": "$input-group-addon-border-color", - "$value": "{color.form.input.border}" - }, - "bg": { - "source": "$input-group-addon-bg", - "$value": "{color.gray.100}" - } + "base": { "source": "$input-group-addon-color", "$value": "{color.form.input.base}" }, + "border": { "source": "$input-group-addon-border-color", "$value": "{color.form.input.border}" }, + "bg": { "source": "$input-group-addon-bg", "$value": "{color.gray.100}" } } }, "focus": { - "base": { - "source": "$input-focus-color", - "$value": "{color.form.input.base}" - }, - "border": { - "source": "$input-focus-border-color", - "$value": "{color.input.focus}" - }, - "bg": { - "source": "$input-focus-bg", - "$value": "{color.form.input.bg.base}" - } + "base": { "source": "$input-focus-color", "$value": "{color.form.input.base}" }, + "border": { "source": "$input-focus-border-color", "$value": "{color.input.focus}" }, + "bg": { "source": "$input-focus-bg", "$value": "{color.form.input.bg.base}" } } }, "control": { "indicator": { "$type": "color", - "border": { - "source": "$custom-control-indicator-border-color", - "$value": "{color.gray.700}" - }, + "border": { "source": "$custom-control-indicator-border-color", "$value": "{color.gray.700}" }, "bg": { - "base": { - "source": "$custom-control-indicator-bg", - "$value": "{color.form.input.bg.base}" - }, - "disabled": { - "source": "$custom-control-indicator-disabled-bg", - "$value": "{color.form.input.bg.disabled}" - } + "base": { "source": "$custom-control-indicator-bg", "$value": "{color.form.input.bg.base}" }, + "disabled": { "source": "$custom-control-indicator-disabled-bg", "$value": "{color.form.input.bg.disabled}" } }, "checked": { - "base": { - "source": "$custom-control-indicator-checked-color", - "$value": "{color.bg.active}" - }, - "valid": { - "source": "$custom-control-indicator-checked-valid-color", - "$value": "{color.success.base}" - }, - "invalid": { - "source": "$custom-control-indicator-checked-invalid-color", - "$value": "{color.danger.base}" - }, + "base": { "source": "$custom-control-indicator-checked-color", "$value": "{color.bg.active}" }, + "valid": { "source": "$custom-control-indicator-checked-valid-color", "$value": "{color.success.base}" }, + "invalid": { "source": "$custom-control-indicator-checked-invalid-color", "$value": "{color.danger.base}" }, "bg": { - "base": { - "source": "$custom-control-indicator-checked-bg", - "$value": "{color.bg.active}" - }, + "base": { "source": "$custom-control-indicator-checked-bg", "$value": "{color.bg.active}" }, "disabled": { "source": "$custom-control-indicator-checked-disabled-bg", - "modify": [ - { - "type": "alpha", - "amount": 0.5 - } - ], + "modify": [{ "type": "alpha", "amount": 0.5 }], "$value": "{color.primary.base}" } }, "border": { - "base": { - "source": "$custom-control-indicator-checked-border-color", - "$value": "{color.form.control.indicator.checked.base}" - }, - "focus": { - "source": "$custom-control-indicator-focus-border-color", - "$value": "{color.form.input.focus.border}" - } + "base": { "source": "$custom-control-indicator-checked-border-color", "$value": "{color.form.control.indicator.checked.base}" }, + "focus": { "source": "$custom-control-indicator-focus-border-color", "$value": "{color.form.input.focus.border}" } } }, "active": { - "base": { - "source": "$custom-control-indicator-active-color", - "$value": "{color.active}" - }, - "bg": { - "source": "$custom-control-indicator-active-bg", - "$value": "{color.bg.active}" - }, - "border": { - "source": "$custom-control-indicator-active-border-color", - "$value": "{color.form.control.indicator.active.bg}" - } + "base": { "source": "$custom-control-indicator-active-color", "$value": "{color.active}" }, + "bg": { "source": "$custom-control-indicator-active-bg", "$value": "{color.bg.active}" }, + "border": { "source": "$custom-control-indicator-active-border-color", "$value": "{color.form.control.indicator.active.bg}" } } }, "label": { "$type": "color", - "base": { - "source": "$custom-control-label-color", - "$value": "inherit" - }, - "disabled": { - "source": "$custom-control-label-disabled-color", - "$value": "{color.disabled}" - }, + "base": { "source": "$custom-control-label-color", "$value": "inherit" }, + "disabled": { "source": "$custom-control-label-disabled-color", "$value": "{color.disabled}" }, "floating": { "text": { "source": "$form-control-floating-label-text-bg", - "modify": [ - { - "type": "alpha", - "amount": 0.1 - } - ], + "modify": [{ "type": "alpha", "amount": 0.1 }], "$value": "{color.form.input.bg.base}" } } @@ -159,18 +71,9 @@ "$type": "color", "indicator": { "indeterminate": { - "base": { - "source": "$custom-checkbox-indicator-indeterminate-color", - "$value": "{color.form.control.indicator.checked.base}" - }, - "bg": { - "source": "$custom-checkbox-indicator-indeterminate-bg", - "$value": "{color.bg.active}" - }, - "border": { - "source": "$custom-checkbox-indicator-indeterminate-border-color", - "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}" - } + "base": { "source": "$custom-checkbox-indicator-indeterminate-color", "$value": "{color.form.control.indicator.checked.base}" }, + "bg": { "source": "$custom-checkbox-indicator-indeterminate-bg", "$value": "{color.bg.active}" }, + "border": { "source": "$custom-checkbox-indicator-indeterminate-border-color", "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}" } } } }, @@ -178,10 +81,7 @@ "$type": "color", "indicator": { "checked": { - "bg": { - "source": "$custom-switch-indicator-checked-bg", - "$value": "{color.success.base}" - } + "bg": { "source": "$custom-switch-indicator-checked-bg", "$value": "{color.success.base}" } } } }, @@ -198,10 +98,7 @@ }, "indicator": { "$type": "color", - "base": { - "source": "$custom-select-indicator-color", - "$value": "{color.theme.hover.gray}" - } + "base": { "source": "$custom-select-indicator-color", "$value": "{color.theme.hover.gray}" } }, "bg": { "base": { @@ -222,42 +119,22 @@ }, "border": { "$type": "color", - "base": { - "source": "$custom-select-border-color", - "$value": "{color.form.input.border}" - }, - "focus": { - "source": "$custom-select-focus-border-color", - "$value": "{color.form.input.focus.border}" - } + "base": { "source": "$custom-select-border-color", "$value": "{color.form.input.border}" }, + "focus": { "source": "$custom-select-focus-border-color", "$value": "{color.form.input.focus.border}" } } }, "range": { "$type": "color", "track": { - "bg": { - "source": "$custom-range-track-bg", - "$value": "{color.gray.300}" - } + "bg": { "source": "$custom-range-track-bg", "$value": "{color.gray.300}" } }, "thumb": { "bg": { - "base": { - "source": "$custom-range-thumb-bg", - "$value": "{color.bg.active}" - }, - "disabled": { - "source": "$custom-range-thumb-disabled-bg", - "$value": "{color.disabled}" - }, + "base": { "source": "$custom-range-thumb-bg", "$value": "{color.bg.active}" }, + "disabled": { "source": "$custom-range-thumb-disabled-bg", "$value": "{color.disabled}" }, "active": { "source": "$custom-range-thumb-active-bg", - "modify": [ - { - "type": "lighten", - "amount": "0.35" - } - ], + "modify": [{ "type": "lighten", "amount": "0.35" }], "$value": "{color.bg.active}" } } @@ -265,91 +142,44 @@ }, "file": { "$type": "color", - "base": { - "source": "$custom-file-color", - "$value": "{color.form.input.base}" - }, + "base": { "source": "$custom-file-color", "$value": "{color.form.input.base}" }, "bg": { - "base": { - "source": "$custom-file-bg", - "$value": "{color.form.input.bg.base}" - }, - "disabled": { - "source": "$custom-file-disabled-bg", - "$value": "{color.form.input.bg.disabled}" - } + "base": { "source": "$custom-file-bg", "$value": "{color.form.input.bg.base}" }, + "disabled": { "source": "$custom-file-disabled-bg", "$value": "{color.form.input.bg.disabled}" } }, "button": { - "base": { - "source": "$custom-file-button-color", - "$value": "{color.form.control.file.base}" - }, - "bg": { - "source": "$custom-file-button-bg", - "$value": "{color.form.input.group.addon.bg}" - } + "base": { "source": "$custom-file-button-color", "$value": "{color.form.control.file.base}" }, + "bg": { "source": "$custom-file-button-bg", "$value": "{color.form.input.group.addon.bg}" } }, "border": { - "base": { - "source": "$custom-file-border-color", - "$value": "{color.form.input.border}" - }, - "focus": { - "source": "$custom-file-focus-border-color", - "$value": "{color.form.input.focus.border}" - } + "base": { "source": "$custom-file-border-color", "$value": "{color.form.input.border}" }, + "focus": { "source": "$custom-file-focus-border-color", "$value": "{color.form.input.focus.border}" } } } }, "feedback": { "$type": "color", - "valid": { - "source": "$form-feedback-valid-color", - "$value": "{color.success.base}" - }, - "invalid": { - "source": "$form-feedback-invalid-color", - "$value": "{color.danger.base}" - }, + "valid": { "source": "$form-feedback-valid-color", "$value": "{color.success.base}" }, + "invalid": { "source": "$form-feedback-invalid-color", "$value": "{color.danger.base}" }, "icon": { - "valid": { - "source": "$form-feedback-icon-valid-color", - "$value": "{color.form.feedback.valid}" - }, - "invalid": { - "source": "$form-feedback-icon-invalid-color", - "$value": "{color.form.feedback.invalid}" - } + "valid": { "source": "$form-feedback-icon-valid-color", "$value": "{color.form.feedback.valid}" }, + "invalid": { "source": "$form-feedback-icon-invalid-color", "$value": "{color.form.feedback.invalid}" } }, "tooltip": { "valid": { "source": "$form-feedback-tooltip-valid-color", - "modify": [ - { - "type": "color-yiq" - } - ], + "modify": [{ "type": "color-yiq" }], "$value": "{color.form.feedback.valid}" }, "bg": { "valid": { "source": "$form-feedback-tooltip-valid-bg", - "modify": [ - { - "type": "alpha", - "amount": 0.9 - } - ], + "modify": [{ "type": "alpha", "amount": 0.9 }], "$value": "{color.form.feedback.valid}" }, "invalid": { "source": "$form-feedback-tooltip-invalid-bg", - "modify": [ - { - "type": "alpha", - "amount": 0.9 - } - ], + "modify": [{ "type": "alpha", "amount": 0.9 }], "$value": "{color.form.feedback.invalid}" } }, @@ -357,22 +187,12 @@ "focus": { "valid": { "source": "$form-feedback-focus-box-shadow-valid-color", - "modify": [ - { - "type": "alpha", - "amount": 0.25 - } - ], + "modify": [{ "type": "alpha", "amount": 0.25 }], "$value": "{color.form.feedback.valid}" }, "invalid": { "source": "$form-feedback-focus-box-shadow-invalid-color", - "modify": [ - { - "type": "alpha", - "amount": 0.25 - } - ], + "modify": [{ "type": "alpha", "amount": 0.25 }], "$value": "{color.form.feedback.invalid}" } } @@ -381,22 +201,12 @@ "checked": { "valid": { "source": "$form-feedback-checked-valid-color", - "modify": [ - { - "type": "lighten", - "amount": 0.1 - } - ], + "modify": [{ "type": "lighten", "amount": 0.1 }], "$value": "{color.form.feedback.valid}" }, "invalid": { "source": "$form-feedback-checked-invalid-color", - "modify": [ - { - "type": "lighten", - "amount": 0.1 - } - ], + "modify": [{ "type": "lighten", "amount": 0.1 }], "$value": "{color.form.feedback.invalid}" } } diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json index 3ad3c6a081..19c3dc837b 100644 --- a/tokens/src/themes/light/components/Form/elevation.json +++ b/tokens/src/themes/light/components/Form/elevation.json @@ -3,54 +3,27 @@ "elevation": { "form": { "input": { - "base": { - "source": "$input-box-shadow", - "$value": "none" - }, - "focus": { - "source": "$input-focus-box-shadow", - "$value": "0 0 0 1px {color.primary.500}" - } + "base": { "source": "$input-box-shadow", "$value": "none" }, + "focus": { "source": "$input-focus-box-shadow", "$value": "0 0 0 1px {color.primary.500}" } }, "control": { "indicator": { - "base": { - "source": "$custom-control-indicator-box-shadow", - "$value": "{elevation.form.input.base}" - }, + "base": { "source": "$custom-control-indicator-box-shadow", "$value": "{elevation.form.input.base}" }, "checked": { - "base": { - "source": "$custom-control-indicator-checked-box-shadow", - "$value": "none" - }, - "focus": { - "source": "$custom-control-indicator-focus-box-shadow", - "$value": "0 0 0 4px rgba(0, 0, 0, .1)" - } + "base": { "source": "$custom-control-indicator-checked-box-shadow", "$value": "none" }, + "focus": { "source": "$custom-control-indicator-focus-box-shadow", "$value": "0 0 0 4px rgba(0, 0, 0, .1)" } }, - "active": { - "source": "$custom-control-indicator-active-box-shadow", - "$value": "none" - } + "active": { "source": "$custom-control-indicator-active-box-shadow", "$value": "none" } }, "checkbox": { "indicator": { - "indeterminate": { - "source": "$custom-checkbox-indicator-indeterminate-box-shadow", - "$value": "none" - } + "indeterminate": { "source": "$custom-checkbox-indicator-indeterminate-box-shadow", "$value": "none" } } }, "range": { - "track": { - "source": "$custom-range-track-box-shadow", - "$value": "none" - }, + "track": { "source": "$custom-range-track-box-shadow", "$value": "none" }, "thumb": { - "base": { - "source": "$custom-range-thumb-box-shadow", - "$value": "none" - }, + "base": { "source": "$custom-range-thumb-box-shadow", "$value": "none" }, "focus": { "source": "$custom-range-thumb-focus-box-shadow", "$value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}" @@ -58,25 +31,13 @@ } }, "file": { - "base": { - "source": "$custom-file-box-shadow", - "$value": "{elevation.form.input.base}" - }, - "focus": { - "source": "$custom-file-focus-box-shadow", - "$value": "{elevation.form.input.focus}" - } + "base": { "source": "$custom-file-box-shadow", "$value": "{elevation.form.input.base}" }, + "focus": { "source": "$custom-file-focus-box-shadow", "$value": "{elevation.form.input.focus}" } }, "select": { "border": { - "base": { - "source": "$custom-select-box-shadow", - "$value": "none" - }, - "focus": { - "source": "$custom-select-focus-box-shadow", - "$value": "{elevation.input.btn-focus.box-shadow}" - } + "base": { "source": "$custom-select-box-shadow", "$value": "none" }, + "focus": { "source": "$custom-select-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" } } } } diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json index 00bc6b1945..781d427b6a 100644 --- a/tokens/src/themes/light/components/Form/other.json +++ b/tokens/src/themes/light/components/Form/other.json @@ -19,37 +19,19 @@ "base": { "source": "$custom-checkbox-indicator-icon-checked", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,\")" }, "valid": { "source": "$custom-checkbox-indicator-icon-valid-checked", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,\")" }, "invalid": { "source": "$custom-checkbox-indicator-icon-invalid-checked", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,\")" } }, @@ -57,13 +39,7 @@ "icon": { "source": "$custom-checkbox-indicator-icon-indeterminate", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,\")" } } @@ -76,37 +52,19 @@ "base": { "source": "$custom-radio-indicator-icon-checked", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")" }, "valid": { "source": "$custom-radio-indicator-icon-valid-checked", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")" }, "invalid": { "source": "$custom-radio-indicator-icon-invalid-checked", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")" } } @@ -118,25 +76,13 @@ "icon-off": { "source": "$custom-switch-indicator-icon-off", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")" }, "icon-on": { "source": "$custom-switch-indicator-icon-on", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")" } } @@ -147,13 +93,7 @@ "icon": { "source": "$custom-select-indicator", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url('data:image/svg+xml,')" } }, @@ -170,25 +110,13 @@ "valid": { "source": "$form-feedback-icon-valid", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")" }, "invalid": { "source": "$form-feedback-icon-invalid", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")" } } diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json index 6147e55941..e6d1f9f50a 100644 --- a/tokens/src/themes/light/components/IconButton.json +++ b/tokens/src/themes/light/components/IconButton.json @@ -3,802 +3,367 @@ "$type": "color", "icon-button": { "bg": { - "base": { - "source": "$btn-icon-bg", - "$value": "transparent" - }, + "base": { "source": "$btn-icon-bg", "$value": "transparent" }, "primary": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.bg.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - }, + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.bg.base}" }, + "focus": { "$value": "{color.icon-button.bg.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - } + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.bg.base}" } }, "active": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.bg.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - } + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.bg.base}" }, + "focus": { "$value": "{color.icon-button.bg.base}" } }, "inverse-active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } } }, "secondary": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.secondary.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - }, + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.secondary.base}" }, + "focus": { "$value": "{color.icon-button.bg.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - } + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.bg.base}" } }, "active": { - "base": { - "$value": "{color.secondary.base}" - }, - "hover": { - "$value": "{color.icon-button.bg.secondary.active.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.secondary.active.base}" - } + "base": { "$value": "{color.secondary.base}" }, + "hover": { "$value": "{color.icon-button.bg.secondary.active.base}" }, + "focus": { "$value": "{color.icon-button.bg.secondary.active.base}" } }, "inverse-active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } } }, "brand": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.brand.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - }, + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.brand.base}" }, + "focus": { "$value": "{color.icon-button.bg.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - } + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.bg.base}" } }, "active": { - "base": { - "$value": "{color.brand.base}" - }, - "hover": { - "$value": "{color.icon-button.bg.brand.active.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.brand.active.base}" - } + "base": { "$value": "{color.brand.base}" }, + "hover": { "$value": "{color.icon-button.bg.brand.active.base}" }, + "focus": { "$value": "{color.icon-button.bg.brand.active.base}" } }, "inverse-active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } } }, "success": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.success.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - }, + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.success.base}" }, + "focus": { "$value": "{color.icon-button.bg.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - } + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.bg.base}" } }, "active": { - "base": { - "$value": "{color.success.base}" - }, - "hover": { - "$value": "{color.icon-button.bg.success.active.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.success.active.base}" - } + "base": { "$value": "{color.success.base}" }, + "hover": { "$value": "{color.icon-button.bg.success.active.base}" }, + "focus": { "$value": "{color.icon-button.bg.success.active.base}" } }, "inverse-active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } } }, "warning": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.warning.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - }, + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.warning.base}" }, + "focus": { "$value": "{color.icon-button.bg.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - } + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.bg.base}" } }, "active": { - "base": { - "$value": "{color.warning.base}" - }, - "hover": { - "$value": "{color.icon-button.bg.warning.active.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.warning.active.base}" - } + "base": { "$value": "{color.warning.base}" }, + "hover": { "$value": "{color.icon-button.bg.warning.active.base}" }, + "focus": { "$value": "{color.icon-button.bg.warning.active.base}" } }, "inverse-active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } } }, "danger": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.danger.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - }, + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.danger.base}" }, + "focus": { "$value": "{color.icon-button.bg.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - } + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.bg.base}" } }, "active": { - "base": { - "$value": "{color.danger.base}" - }, - "hover": { - "$value": "{color.icon-button.bg.danger.active.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.danger.active.base}" - } + "base": { "$value": "{color.danger.base}" }, + "hover": { "$value": "{color.icon-button.bg.danger.active.base}" }, + "focus": { "$value": "{color.icon-button.bg.danger.active.base}" } }, "inverse-active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } } }, "light": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.light.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - }, + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.light.base}" }, + "focus": { "$value": "{color.icon-button.bg.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - } + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.bg.base}" } }, "active": { - "base": { - "$value": "{color.light.base}" - }, - "hover": { - "$value": "{color.icon-button.bg.light.active.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.light.active.base}" - } + "base": { "$value": "{color.light.base}" }, + "hover": { "$value": "{color.icon-button.bg.light.active.base}" }, + "focus": { "$value": "{color.icon-button.bg.light.active.base}" } }, "inverse-active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } } }, "dark": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.dark.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - }, + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.dark.base}" }, + "focus": { "$value": "{color.icon-button.bg.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - } + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.bg.base}" } }, "active": { - "base": { - "$value": "{color.dark.base}" - }, - "hover": { - "$value": "{color.icon-button.bg.dark.active.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.dark.active.base}" - } + "base": { "$value": "{color.dark.base}" }, + "hover": { "$value": "{color.icon-button.bg.dark.active.base}" }, + "focus": { "$value": "{color.icon-button.bg.dark.active.base}" } }, "inverse-active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } } }, "black": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.black}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - }, + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.black}" }, + "focus": { "$value": "{color.icon-button.bg.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - } + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.bg.base}" } }, "active": { - "base": { - "$value": "{color.black}" - }, - "hover": { - "$value": "{color.icon-button.bg.black.active.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.black.active.base}" - } + "base": { "$value": "{color.black}" }, + "hover": { "$value": "{color.icon-button.bg.black.active.base}" }, + "focus": { "$value": "{color.icon-button.bg.black.active.base}" } }, "inverse-active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } } } }, "text": { "primary": { - "base": { - "$value": "{color.primary.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - }, + "base": { "$value": "{color.primary.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.bg.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.bg.base}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.bg.base}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "inverse-active": { - "base": { - "$value": "{color.icon-button.bg.base}" - }, - "hover": { - "$value": "{color.icon-button.bg.base}" - }, - "focus": { - "$value": "{color.icon-button.bg.base}" - } + "base": { "$value": "{color.icon-button.bg.base}" }, + "hover": { "$value": "{color.icon-button.bg.base}" }, + "focus": { "$value": "{color.icon-button.bg.base}" } } }, "secondary": { - "base": { - "$value": "{color.secondary.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.text.secondary.base}" - }, + "base": { "$value": "{color.secondary.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.text.secondary.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.secondary.base}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.secondary.base}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "inverse-active": { - "base": { - "$value": "{color.secondary.base}" - }, - "hover": { - "$value": "{color.icon-button.text.secondary.inverse-active.base}" - }, - "focus": { - "$value": "{color.icon-button.text.secondary.inverse-active.base}" - } + "base": { "$value": "{color.secondary.base}" }, + "hover": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" }, + "focus": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" } } }, "brand": { - "base": { - "$value": "{color.brand.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.text.brand.base}" - }, + "base": { "$value": "{color.brand.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.text.brand.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.brand.base}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.brand.base}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "inverse-active": { - "base": { - "$value": "{color.brand.base}" - }, - "hover": { - "$value": "{color.icon-button.text.brand.inverse-active.base}" - }, - "focus": { - "$value": "{color.icon-button.text.brand.inverse-active.base}" - } + "base": { "$value": "{color.brand.base}" }, + "hover": { "$value": "{color.icon-button.text.brand.inverse-active.base}" }, + "focus": { "$value": "{color.icon-button.text.brand.inverse-active.base}" } } }, "success": { - "base": { - "$value": "{color.success.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.text.success.base}" - }, + "base": { "$value": "{color.success.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.text.success.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.success.base}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.success.base}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "inverse-active": { - "base": { - "$value": "{color.success.base}" - }, - "hover": { - "$value": "{color.icon-button.text.success.inverse-active.base}" - }, - "focus": { - "$value": "{color.icon-button.text.success.inverse-active.base}" - } + "base": { "$value": "{color.success.base}" }, + "hover": { "$value": "{color.icon-button.text.success.inverse-active.base}" }, + "focus": { "$value": "{color.icon-button.text.success.inverse-active.base}" } } }, "warning": { - "base": { - "$value": "{color.warning.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.text.warning.base}" - }, + "base": { "$value": "{color.warning.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.text.warning.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.warning.base}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.warning.base}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "inverse-active": { - "base": { - "$value": "{color.warning.base}" - }, - "hover": { - "$value": "{color.icon-button.text.warning.inverse-active.base}" - }, - "focus": { - "$value": "{color.icon-button.text.warning.inverse-active.base}" - } + "base": { "$value": "{color.warning.base}" }, + "hover": { "$value": "{color.icon-button.text.warning.inverse-active.base}" }, + "focus": { "$value": "{color.icon-button.text.warning.inverse-active.base}" } } }, "danger": { - "base": { - "$value": "{color.danger.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.text.danger.base}" - }, + "base": { "$value": "{color.danger.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.text.danger.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.danger.base}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.danger.base}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "inverse-active": { - "base": { - "$value": "{color.danger.base}" - }, - "hover": { - "$value": "{color.icon-button.text.danger.inverse-active.base}" - }, - "focus": { - "$value": "{color.icon-button.text.danger.inverse-active.base}" - } + "base": { "$value": "{color.danger.base}" }, + "hover": { "$value": "{color.icon-button.text.danger.inverse-active.base}" }, + "focus": { "$value": "{color.icon-button.text.danger.inverse-active.base}" } } }, "light": { - "base": { - "$value": "{color.light.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.text.light.base}" - }, + "base": { "$value": "{color.light.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.text.light.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.light.base}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.light.base}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "inverse-active": { - "base": { - "$value": "{color.light.base}" - }, - "hover": { - "$value": "{color.icon-button.text.light.inverse-active.base}" - }, - "focus": { - "$value": "{color.icon-button.text.light.inverse-active.base}" - } + "base": { "$value": "{color.light.base}" }, + "hover": { "$value": "{color.icon-button.text.light.inverse-active.base}" }, + "focus": { "$value": "{color.icon-button.text.light.inverse-active.base}" } } }, "dark": { - "base": { - "$value": "{color.dark.base}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.text.dark.base}" - }, + "base": { "$value": "{color.dark.base}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.text.dark.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.dark.base}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.dark.base}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "inverse-active": { - "base": { - "$value": "{color.dark.base}" - }, - "hover": { - "$value": "{color.icon-button.text.dark.inverse-active.base}" - }, - "focus": { - "$value": "{color.icon-button.text.dark.inverse-active.base}" - } + "base": { "$value": "{color.dark.base}" }, + "hover": { "$value": "{color.icon-button.text.dark.inverse-active.base}" }, + "focus": { "$value": "{color.icon-button.text.dark.inverse-active.base}" } } }, "black": { - "base": { - "$value": "{color.black}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.text.black.base}" - }, + "base": { "$value": "{color.black}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.text.black.base}" }, "inverse": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.black}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.black}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "active": { - "base": { - "$value": "{color.icon-button.accent}" - }, - "hover": { - "$value": "{color.icon-button.accent}" - }, - "focus": { - "$value": "{color.icon-button.accent}" - } + "base": { "$value": "{color.icon-button.accent}" }, + "hover": { "$value": "{color.icon-button.accent}" }, + "focus": { "$value": "{color.icon-button.accent}" } }, "inverse-active": { - "base": { - "$value": "{color.black}" - }, - "hover": { - "$value": "{color.icon-button.text.black.inverse-active.base}" - }, - "focus": { - "$value": "{color.icon-button.text.black.inverse-active.base}" - } + "base": { "$value": "{color.black}" }, + "hover": { "$value": "{color.icon-button.text.black.inverse-active.base}" }, + "focus": { "$value": "{color.icon-button.text.black.inverse-active.base}" } } } }, @@ -817,130 +382,58 @@ "icon-button": { "box-shadow": { "primary": { - "base": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.bg.base}" - }, - "inverse": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" - }, - "active": { - "$value": "none" - }, - "inverse-active": { - "$value": "none" - } + "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.bg.base}" }, + "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, + "active": { "$value": "none" }, + "inverse-active": { "$value": "none" } }, "secondary": { - "base": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}" - }, - "inverse": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" - }, - "active": { - "$value": "none" - }, - "inverse-active": { - "$value": "none" - } + "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}" }, + "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, + "active": { "$value": "none" }, + "inverse-active": { "$value": "none" } }, "brand": { - "base": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}" - }, - "inverse": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" - }, - "active": { - "$value": "none" - }, - "inverse-active": { - "$value": "none" - } + "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}" }, + "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, + "active": { "$value": "none" }, + "inverse-active": { "$value": "none" } }, "success": { - "base": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}" - }, - "inverse": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" - }, - "active": { - "$value": "none" - }, - "inverse-active": { - "$value": "none" - } + "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}" }, + "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, + "active": { "$value": "none" }, + "inverse-active": { "$value": "none" } }, "warning": { - "base": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}" - }, - "inverse": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" - }, - "active": { - "$value": "none" - }, - "inverse-active": { - "$value": "none" - } + "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}" }, + "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, + "active": { "$value": "none" }, + "inverse-active": { "$value": "none" } }, "danger": { - "base": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}" - }, - "inverse": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" - }, - "active": { - "$value": "none" - }, - "inverse-active": { - "$value": "none" - } + "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}" }, + "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, + "active": { "$value": "none" }, + "inverse-active": { "$value": "none" } }, "light": { - "base": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}" - }, - "inverse": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" - }, - "active": { - "$value": "none" - }, - "inverse-active": { - "$value": "none" - } + "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}" }, + "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, + "active": { "$value": "none" }, + "inverse-active": { "$value": "none" } }, "dark": { - "base": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}" - }, - "inverse": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" - }, - "active": { - "$value": "none" - }, - "inverse-active": { - "$value": "none" - } + "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}" }, + "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, + "active": { "$value": "none" }, + "inverse-active": { "$value": "none" } }, "black": { - "base": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}" - }, - "inverse": { - "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" - }, - "active": { - "$value": "none" - }, - "inverse-active": { - "$value": "none" - } + "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}" }, + "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" }, + "active": { "$value": "none" }, + "inverse-active": { "$value": "none" } } } } diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json index 0dd433e4c3..8c4df0f914 100644 --- a/tokens/src/themes/light/components/Image.json +++ b/tokens/src/themes/light/components/Image.json @@ -2,18 +2,10 @@ "color": { "$type": "color", "image": { - "figure-caption": { - "source": "$figure-caption-color", - "$value": "{color.gray.500}" - }, + "figure-caption": { "source": "$figure-caption-color", "$value": "{color.gray.500}" }, "thumbnail": { - "bg": { - "source": "$thumbnail-bg", - "$value": "{color.body.bg}" - }, - "border": { - "source": "$thumbnail-border-color", - "$value": "{color.gray.200}" + "bg": { "source": "$thumbnail-bg", "$value": "{color.body.bg}" }, + "border": { "source": "$thumbnail-border-color", "$value": "{color.gray.200}" } } } @@ -22,10 +14,7 @@ "$type": "shadow", "image": { "thumbnail": { - "box-shadow": { - "source": "$thumbnail-box-shadow", - "$value": "none" - } + "box-shadow": { "source": "$thumbnail-box-shadow", "$value": "none" } } } } diff --git a/tokens/src/themes/light/components/Menu.json b/tokens/src/themes/light/components/Menu.json index 3ae9d164a6..74d45ae499 100644 --- a/tokens/src/themes/light/components/Menu.json +++ b/tokens/src/themes/light/components/Menu.json @@ -2,59 +2,29 @@ "elevation": { "$type": "shadow", "menu": { - "box-shadow": { - "source": "$menu-box-shadow", - "$value": "{elevation.box-shadow.base}" - } + "box-shadow": { "source": "$menu-box-shadow", "$value": "{elevation.box-shadow.base}" } } }, "color": { "$type": "color", "menu": { - "bg": { - "source": "$menu-bg", - "$value": "{color.white}" - }, + "bg": { "source": "$menu-bg", "$value": "{color.white}" }, "item": { - "color": { - "source": "$menu-item-color", - "$value": "{color.body.base}" - }, - "bg": { - "source": "$menu-item-bg", - "$value": "transparent" - }, - "border": { - "source": "$menu-item-border-color", - "$value": "{color.menu.item.bg}" - }, + "color": { "source": "$menu-item-color", "$value": "{color.body.base}" }, + "bg": { "source": "$menu-item-bg", "$value": "transparent" }, + "border": { "source": "$menu-item-border-color", "$value": "{color.menu.item.bg}" }, "hover": { - "color": { - "source": "$menu-item-hover-color", - "$value": "{color.btn.text.tertiary}" - }, - "bg": { - "source": "$menu-item-hover-bg", - "$value": "{color.btn.hover.bg.tertiary}" - }, - "border": { - "source": "$menu-item-hover-border-color", - "$value": "{color.menu.item.bg}" - } + "color": { "source": "$menu-item-hover-color", "$value": "{color.btn.text.tertiary}" }, + "bg": { "source": "$menu-item-hover-bg", "$value": "{color.btn.hover.bg.tertiary}" }, + "border": { "source": "$menu-item-hover-border-color", "$value": "{color.menu.item.bg}" } }, "focus": { - "bg": { - "source": "$menu-item-focus-bg", - "$value": "{color.btn.active.bg.tertiary}" - } + "bg": { "source": "$menu-item-focus-bg", "$value": "{color.btn.active.bg.tertiary}" } } }, "select": { "btn-link": { - "color": { - "source": "$menu-select-btn-link-color", - "$value": "{color.primary.500}" - } + "color": { "source": "$menu-select-btn-link-color", "$value": "{color.primary.500}" } } } } diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json index 378f10905a..13b21f679d 100644 --- a/tokens/src/themes/light/components/Modal.json +++ b/tokens/src/themes/light/components/Modal.json @@ -3,25 +3,14 @@ "$type": "color", "modal": { "content": { - "bg": { - "source": "$modal-content-bg", - "$value": "{color.bg.base}" - }, + "bg": { "source": "$modal-content-bg", "$value": "{color.bg.base}" }, "border": { "source": "$modal-content-border-color", - "modify": [ - { - "type": "alpha", - "amount": 0.2 - } - ], + "modify": [{ "type": "alpha", "amount": 0.2 }], "$value": "{color.black}" } }, - "backdrop-bg": { - "source": "$modal-backdrop-bg", - "$value": "{color.black}" - } + "backdrop-bg": { "source": "$modal-backdrop-bg", "$value": "{color.black}" } } }, "elevation": { @@ -39,10 +28,7 @@ }, "other": { "modal": { - "opacity": { - "source": "$modal-backdrop-opacity", - "$value": ".5" - } + "opacity": { "source": "$modal-backdrop-opacity", "$value": ".5" } } } } diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json index 5640bd41fa..f5c4b83a87 100644 --- a/tokens/src/themes/light/components/Nav.json +++ b/tokens/src/themes/light/components/Nav.json @@ -4,10 +4,7 @@ "nav": { "tabs-link": { "border": { - "active": { - "source": "$nav-tabs-link-active-border-color", - "$value": "{color.primary.500}" - }, + "active": { "source": "$nav-tabs-link-active-border-color", "$value": "{color.primary.500}" }, "hover": { "source": "$nav-tabs-link-hover-border-color", "$value": "transparent transparent {color.nav.tabs.base.border.base}" @@ -24,77 +21,35 @@ "nav": { "link": { "text": { - "base": { - "source": "$nav-link-color", - "$value": "{color.gray.700}" - }, - "disabled": { - "source": "$nav-link-disabled-color", - "$value": "{color.gray.300}" - } + "base": { "source": "$nav-link-color", "$value": "{color.gray.700}" }, + "disabled": { "source": "$nav-link-disabled-color", "$value": "{color.gray.300}" } }, - "border": { - "source": "$nav-tabs-link-border-color", - "$value": "transparent" - } + "border": { "source": "$nav-tabs-link-border-color", "$value": "transparent" } }, "tabs": { "base": { "text": { - "disabled": { - "source": "$nav-tabs-disabled-bg", - "$value": "{color.nav.tabs.base.bg.hover}" - } - }, - "bg": { - "hover": { - "source": "$nav-tabs-hover-bg", - "$value": "transparent" - } + "disabled": { "source": "$nav-tabs-disabled-bg", "$value": "{color.nav.tabs.base.bg.hover}" } }, + "bg": { "hover": { "source": "$nav-tabs-hover-bg", "$value": "transparent" } }, "border": { - "base": { - "source": "$nav-tabs-border-color", - "$value": "{color.light.400}" - }, - "focus": { - "source": "$nav-tabs-focus-border-color", - "$value": "{color.nav.tabs.base.bg.hover}" - } + "base": { "source": "$nav-tabs-border-color", "$value": "{color.light.400}" }, + "focus": { "source": "$nav-tabs-focus-border-color", "$value": "{color.nav.tabs.base.bg.hover}" } }, "link": { - "hover": { - "bg": { - "source": "$nav-tabs-link-hover-bg", - "$value": "{color.light.400}" - } - }, + "hover": { "bg": { "source": "$nav-tabs-link-hover-bg", "$value": "{color.light.400}" } }, "active": { - "text": { - "source": "$nav-tabs-link-active-color", - "$value": "{color.primary.500}" - }, - "bg": { - "source": "$nav-tabs-link-active-bg", - "$value": "transparent" - } + "text": { "source": "$nav-tabs-link-active-color", "$value": "{color.primary.500}" }, + "bg": { "source": "$nav-tabs-link-active-bg", "$value": "transparent" } }, "disabled": { - "border": { - "source": "$nav-tabs-link-disabled-border-color", - "$value": "{color.nav.link.border}" - } + "border": { "source": "$nav-tabs-link-disabled-border-color", "$value": "{color.nav.link.border}" } } } }, "inverse": { "link": { - "text": { - "base": { - "source": "$nav-inverse-tabs-link-color", - "$value": "{color.white}" - } - }, + "text": { "base": { "source": "$nav-inverse-tabs-link-color", "$value": "{color.white}" } }, "border": { "bottom": { "source": "$nav-inverse-tabs-link-border-bottom-color", @@ -140,92 +95,35 @@ "base": { "link": { "active": { - "text": { - "source": "$nav-pills-link-active-color", - "$value": "{color.active}" - }, - "bg": { - "source": "$nav-pills-link-active-bg", - "$value": "{color.bg.active}" - }, - "border": { - "source": "$nav-pills-link-active-border-color", - "$value": "{color.white}" - } + "text": { "source": "$nav-pills-link-active-color", "$value": "{color.active}" }, + "bg": { "source": "$nav-pills-link-active-bg", "$value": "{color.bg.active}" }, + "border": { "source": "$nav-pills-link-active-border-color", "$value": "{color.white}" } }, - "border": { - "source": "$nav-pills-link-border-color", - "$value": "{color.nav.tabs.base.border.base}" - } + "border": { "source": "$nav-pills-link-border-color", "$value": "{color.nav.tabs.base.border.base}" } } }, "inverse": { "link": { "text": { - "base": { - "source": "$nav-inverse-pills-link-color", - "$value": "{color.white}" - }, - "focus": { - "source": "$nav-inverse-pills-link-focus-color", - "$value": "{color.nav.pills.inverse.link.text.base}" - }, - "active": { - "source": "$nav-inverse-pills-link-active-color", - "$value": "{color.primary.500}" - }, - "hover": { - "source": "$nav-inverse-pills-link-hover-color", - "$value": "{color.nav.pills.inverse.link.text.base}" - }, - "active-focus": { - "source": "$nav-inverse-pills-link-active-focus-color", - "$value": "{color.nav.pills.inverse.link.text.active}" - }, - "active-hover": { - "source": "$nav-inverse-pills-link-active-hover-color", - "$value": "{color.nav.pills.inverse.link.text.base}" - } + "base": { "source": "$nav-inverse-pills-link-color", "$value": "{color.white}" }, + "focus": { "source": "$nav-inverse-pills-link-focus-color", "$value": "{color.nav.pills.inverse.link.text.base}" }, + "active": { "source": "$nav-inverse-pills-link-active-color", "$value": "{color.primary.500}" }, + "hover": { "source": "$nav-inverse-pills-link-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" }, + "active-focus": { "source": "$nav-inverse-pills-link-active-focus-color", "$value": "{color.nav.pills.inverse.link.text.active}" }, + "active-hover": { "source": "$nav-inverse-pills-link-active-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" } }, "border": { - "base": { - "source": "$nav-inverse-pills-link-border-color", - "$value": "{color.dark.300}" - }, - "active": { - "source": "$nav-inverse-pills-link-active-border-color", - "$value": "{color.nav.pills.inverse.link.text.base}" - }, - "active-hover": { - "source": "$nav-inverse-pills-link-active-hover-border-color", - "$value": "{color.nav.pills.inverse.link.border.base}" - }, - "active-focus": { - "source": "$nav-inverse-pills-link-active-focus-border-color", - "$value": "{color.primary.base}" - }, - "focus-hover": { - "source": "$nav-inverse-pills-link-active-focus-hover-border-color", - "$value": "{color.nav.pills.inverse.link.border.active-focus}" - } + "base": { "source": "$nav-inverse-pills-link-border-color", "$value": "{color.dark.300}" }, + "active": { "source": "$nav-inverse-pills-link-active-border-color", "$value": "{color.nav.pills.inverse.link.text.base}" }, + "active-hover": { "source": "$nav-inverse-pills-link-active-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.base}" }, + "active-focus": { "source": "$nav-inverse-pills-link-active-focus-border-color", "$value": "{color.primary.base}" }, + "focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.active-focus}" } }, "bg": { - "hover": { - "source": "$nav-inverse-pills-link-hover-bg", - "$value": "{color.nav.pills.inverse.link.border.base}" - }, - "active": { - "source": "$nav-inverse-pills-link-active-bg", - "$value": "{color.nav.pills.inverse.link.text.base}" - }, - "active-hover": { - "source": "$nav-inverse-pills-link-active-hover-bg", - "$value": "{color.nav.pills.inverse.link.border.base}" - }, - "active-focus-hover": { - "source": "$nav-inverse-pills-link-active-focus-hover-bg", - "$value": "{color.nav.pills.inverse.link.text.base}" - } + "hover": { "source": "$nav-inverse-pills-link-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" }, + "active": { "source": "$nav-inverse-pills-link-active-bg", "$value": "{color.nav.pills.inverse.link.text.base}" }, + "active-hover": { "source": "$nav-inverse-pills-link-active-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" }, + "active-focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-bg", "$value": "{color.nav.pills.inverse.link.text.base}" } } }, "tab-content-color": { @@ -234,28 +132,15 @@ } } }, - "divider": { - "source": "$nav-divider-color", - "$value": "{color.gray.100}" - }, + "divider": { "source": "$nav-divider-color", "$value": "{color.gray.100}" }, "dark": { "source": "$navbar-dark-color", - "modify": [ - { - "type": "alpha", - "amount": 0.5 - } - ], + "modify": [{ "type": "alpha", "amount": 0.5 }], "$value": "{color.white}" }, "light": { "source": "$navbar-light-color", - "modify": [ - { - "type": "alpha", - "amount": 0.5 - } - ], + "modify": [{ "type": "alpha", "amount": 0.5 }], "$value": "{color.black}" } } diff --git a/tokens/src/themes/light/components/Navbar.json b/tokens/src/themes/light/components/Navbar.json index 5c1aad57be..5b157599c3 100644 --- a/tokens/src/themes/light/components/Navbar.json +++ b/tokens/src/themes/light/components/Navbar.json @@ -5,123 +5,63 @@ "dark": { "text": { "source": "$navbar-dark-color", - "modify": [ - { - "type": "alpha", - "amount": 0.5 - } - ], + "modify": [{ "type": "alpha", "amount": 0.5 }], "$value": "{color.white}" }, "hover": { "source": "$navbar-dark-hover-color", - "modify": [ - { - "type": "alpha", - "amount": 0.75 - } - ], + "modify": [{ "type": "alpha", "amount": 0.75 }], "$value": "{color.white}" }, - "active": { - "source": "$navbar-dark-active-color", - "$value": "{color.active}" - }, + "active": { "source": "$navbar-dark-active-color", "$value": "{color.active}" }, "disabled": { "source": "$navbar-dark-disabled-color", - "modify": [ - { - "type": "alpha", - "amount": 0.25 - } - ], + "modify": [{ "type": "alpha", "amount": 0.25 }], "$value": "{color.white}" }, "toggler": { "border": { "source": "$navbar-dark-toggler-border-color", - "modify": [ - { - "type": "alpha", - "amount": 0.1 - } - ], + "modify": [{ "type": "alpha", "amount": 0.1 }], "$value": "{color.white}" } }, "brand": { - "text": { - "source": "$navbar-dark-brand-color", - "$value": "{color.navbar.dark.active}" - }, - "hover": { - "source": "$navbar-dark-brand-hover-color", - "$value": "{color.navbar.dark.active}" - } + "text": { "source": "$navbar-dark-brand-color", "$value": "{color.navbar.dark.active}" }, + "hover": { "source": "$navbar-dark-brand-hover-color", "$value": "{color.navbar.dark.active}" } } }, "light": { "text": { "source": "$navbar-light-color", - "modify": [ - { - "type": "alpha", - "amount": 0.5 - } - ], + "modify": [{ "type": "alpha", "amount": 0.5 }], "$value": "{color.black}" }, "hover": { "source": "$navbar-light-hover-color", - "modify": [ - { - "type": "alpha", - "amount": 0.7 - } - ], + "modify": [{ "type": "alpha", "amount": 0.7 }], "$value": "{color.black}" }, "active": { "source": "$navbar-light-active-color", - "modify": [ - { - "type": "alpha", - "amount": 0.9 - } - ], + "modify": [{ "type": "alpha", "amount": 0.9 }], "$value": "{color.black}" }, "disabled": { "source": "$navbar-light-disabled-color", - "modify": [ - { - "type": "alpha", - "amount": 0.3 - } - ], + "modify": [{ "type": "alpha", "amount": 0.3 }], "$value": "{color.black}" }, "toggler": { "border": { "source": "$navbar-light-toggler-border-color", - "modify": [ - { - "type": "alpha", - "amount": 0.1 - } - ], + "modify": [{ "type": "alpha", "amount": 0.1 }], "$value": "{color.black}" } }, "brand": { - "text": { - "source": "$navbar-light-brand-color", - "$value": "{color.navbar.light.active}" - }, - "hover": { - "source": "$navbar-light-brand-hover-color", - "$value": "{color.navbar.light.active}" - } + "text": { "source": "$navbar-light-brand-color", "$value": "{color.navbar.light.active}" }, + "hover": { "source": "$navbar-light-brand-hover-color", "$value": "{color.navbar.light.active}" } } } } @@ -134,13 +74,7 @@ "icon-bg": { "source": "$navbar-dark-toggler-icon-bg", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")" } }, @@ -148,13 +82,7 @@ "icon-bg": { "source": "$navbar-light-toggler-icon-bg", "outputReferences": false, - "modify": [ - { - "type": "str-replace", - "toReplace": "#", - "replaceWith": "%23" - } - ], + "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")" } } diff --git a/tokens/src/themes/light/components/PageBanner.json b/tokens/src/themes/light/components/PageBanner.json index 6c15e45c66..46a4c8534f 100644 --- a/tokens/src/themes/light/components/PageBanner.json +++ b/tokens/src/themes/light/components/PageBanner.json @@ -3,42 +3,22 @@ "color": { "page-banner": { "bg": { - "dark": { - "$value": "{color.dark.500}" - }, - "light": { - "$value": "{color.light.400}" - }, + "dark": { "$value": "{color.dark.500}" }, + "light": { "$value": "{color.light.400}" }, "accent": { - "a": { - "$value": "{color.accent.a}" - }, - "b": { - "$value": "{color.accent.b}" - } + "a": { "$value": "{color.accent.a}" }, + "b": { "$value": "{color.accent.b}" } }, - "warning": { - "$value": "{color.warning.100}" - } + "warning": { "$value": "{color.warning.100}" } }, "text": { - "dark": { - "$value": "{color.white}" - }, - "light": { - "$value": "{color.black}" - }, + "dark": { "$value": "{color.white}" }, + "light": { "$value": "{color.black}" }, "accent": { - "a": { - "$value": "{color.black}" - }, - "b": { - "$value": "{color.black}" - } + "a": { "$value": "{color.black}" }, + "b": { "$value": "{color.black}" } }, - "warning": { - "$value": "{color.black}" - } + "warning": { "$value": "{color.black}" } } } } diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json index 3f2b244bc9..d879de7302 100644 --- a/tokens/src/themes/light/components/Pagination.json +++ b/tokens/src/themes/light/components/Pagination.json @@ -3,78 +3,30 @@ "$type": "color", "pagination": { "text": { - "base": { - "source": "$pagination-color", - "$value": "{color.link.base}" - }, - "inverse": { - "source": "$pagination-color-inverse", - "$value": "{color.white}" - }, - "hover": { - "source": "$pagination-hover-color", - "$value": "{color.link.hover}" - }, - "active": { - "source": "$pagination-active-color", - "$value": "{color.active}" - }, - "disabled": { - "source": "$pagination-disabled-color", - "$value": "{color.disabled}" - } + "base": { "source": "$pagination-color", "$value": "{color.link.base}" }, + "inverse": { "source": "$pagination-color-inverse", "$value": "{color.white}" }, + "hover": { "source": "$pagination-hover-color", "$value": "{color.link.hover}" }, + "active": { "source": "$pagination-active-color", "$value": "{color.active}" }, + "disabled": { "source": "$pagination-disabled-color", "$value": "{color.disabled}" } }, "bg": { - "base": { - "source": "$pagination-bg", - "$value": "{color.bg.base}" - }, - "hover": { - "source": "$pagination-hover-bg", - "$value": "{color.gray.100}" - }, - "active": { - "source": "$pagination-active-bg", - "$value": "{color.bg.active}" - }, - "disabled": { - "source": "$pagination-disabled-bg", - "$value": "{color.white}" - } + "base": { "source": "$pagination-bg", "$value": "{color.bg.base}" }, + "hover": { "source": "$pagination-hover-bg", "$value": "{color.gray.100}" }, + "active": { "source": "$pagination-active-bg", "$value": "{color.bg.active}" }, + "disabled": { "source": "$pagination-disabled-bg", "$value": "{color.white}" } }, "border": { - "base": { - "source": "$pagination-border-color", - "$value": "{color.gray.200}" - }, - "hover": { - "source": "$pagination-hover-border-color", - "$value": "{color.gray.200}" - }, - "active": { - "source": "$pagination-active-border-color", - "$value": "{color.pagination.bg.active}" - }, - "disabled": { - "source": "$pagination-disabled-border-color", - "$value": "{color.gray.100}" - } + "base": { "source": "$pagination-border-color", "$value": "{color.gray.200}" }, + "hover": { "source": "$pagination-hover-border-color", "$value": "{color.gray.200}" }, + "active": { "source": "$pagination-active-border-color", "$value": "{color.pagination.bg.active}" }, + "disabled": { "source": "$pagination-disabled-border-color", "$value": "{color.gray.100}" } }, "focus": { - "base": { - "source": "$pagination-focus-color", - "$value": "{color.primary.500}" - }, - "text": { - "source": "$pagination-focus-color-text", - "$value": "{color.black}" - } + "base": { "source": "$pagination-focus-color", "$value": "{color.primary.500}" }, + "text": { "source": "$pagination-focus-color-text", "$value": "{color.black}" } }, "dropdown": { - "text-inverse": { - "source": "$pagination-dropdown-color-inverse", - "$value": "{color.white}" - } + "text-inverse": { "source": "$pagination-dropdown-color-inverse", "$value": "{color.white}" } } } }, @@ -82,10 +34,7 @@ "$type": "shadow", "pagination": { "focus": { - "box-shadow": { - "source": "$pagination-focus-box-shadow", - "$value": "{elevation.input.btn-focus.box-shadow}" - } + "box-shadow": { "source": "$pagination-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" } } } } diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json index b59607938f..0741490cfc 100644 --- a/tokens/src/themes/light/components/Popover.json +++ b/tokens/src/themes/light/components/Popover.json @@ -2,103 +2,49 @@ "color": { "$type": "color", "popover": { - "bg": { - "source": "$popover-bg", - "$value": "{color.bg.base}" - }, - "border": { - "source": "$popover-border-color", - "$value": "rgba(0, 0, 0, .2)" - }, + "bg": { "source": "$popover-bg", "$value": "{color.bg.base}" }, + "border": { "source": "$popover-border-color", "$value": "rgba(0, 0, 0, .2)" }, "header": { - "text": { - "source": "$popover-header-color", - "$value": "{color.headings.base}" - }, - "bg": { - "source": "$popover-header-bg", - "$value": "{color.white}" - }, + "text": { "source": "$popover-header-color", "$value": "{color.headings.base}" }, + "bg": { "source": "$popover-header-bg", "$value": "{color.white}" }, "bg-dark": { "source": "$popover-header-bg-dark", - "modify": [ - { - "type": "darken", - "amount": 0.5 - } - ], + "modify": [{ "type": "darken", "amount": 0.5 }], "$value": "{color.white}" }, "border-bottom-dark": { "source": "$popover-header-border-bottom-darken", - "modify": [ - { - "type": "darken", - "amount": 0.05 - } - ], + "modify": [{ "type": "darken", "amount": 0.05 }], "$value": "{color.white}" } }, - "body": { - "source": "$popover-body-color", - "$value": "{color.body.base}" - }, + "body": { "source": "$popover-body-color", "$value": "{color.body.base}" }, "arrow": { - "base": { - "source": "$popover-arrow-color", - "$value": "{color.popover.bg}" - }, + "base": { "source": "$popover-arrow-color", "$value": "{color.popover.bg}" }, "outer": { "source": "$popover-arrow-outer-color", - "modify": [ - { - "type": "alpha", - "amount": 0.05 - } - ], + "modify": [{ "type": "alpha", "amount": 0.05 }], "$value": "{color.popover.border}" } }, "success": { - "bg": { - "source": "$popover-success-bg", - "$value": "{color.success.100}" - }, - "icon": { - "source": "$popover-success-icon-color", - "$value": "{color.success.500}" - } + "bg": { "source": "$popover-success-bg", "$value": "{color.success.100}" }, + "icon": { "source": "$popover-success-icon-color", "$value": "{color.success.500}" } }, "warning": { - "bg": { - "source": "$popover-warning-bg", - "$value": "{color.warning.100}" - }, - "icon": { - "source": "$popover-warning-icon-color", - "$value": "{color.warning.500}" - } + "bg": { "source": "$popover-warning-bg", "$value": "{color.warning.100}" }, + "icon": { "source": "$popover-warning-icon-color", "$value": "{color.warning.500}" } }, "danger": { - "bg": { - "source": "$popover-danger-bg", - "$value": "{color.danger.100}" - }, - "icon": { - "source": "$popover-danger-icon-color", - "$value": "{color.danger.500}" - } + "bg": { "source": "$popover-danger-bg", "$value": "{color.danger.100}" }, + "icon": { "source": "$popover-danger-icon-color", "$value": "{color.danger.500}" } } } }, "elevation": { "$type": "shadow", "popover": { - "box-shadow": { - "source": "$popover-box-shadow", - "$value": "none" - } + "box-shadow": { "source": "$popover-box-shadow", "$value": "none" } } } } diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json index 3f816bf5ac..fa9b86c932 100644 --- a/tokens/src/themes/light/components/ProductTour.json +++ b/tokens/src/themes/light/components/ProductTour.json @@ -3,42 +3,19 @@ "color": { "product-tour": { "checkpoint": { - "bg": { - "source": "$checkpoint-background-color", - "$value": "{color.light.300}" - }, - "body": { - "source": "$checkpoint-body-color", - "$value": "{color.gray.700}" - }, - "border": { - "source": "$checkpoint-border-color", - "$value": "{color.brand.base}" - }, - "breadcrumb": { - "source": "$checkpoint-breadcrumb-color", - "$value": "{color.primary.base}" - }, + "bg": { "source": "$checkpoint-background-color", "$value": "{color.light.300}" }, + "body": { "source": "$checkpoint-body-color", "$value": "{color.gray.700}" }, + "border": { "source": "$checkpoint-border-color", "$value": "{color.brand.base}" }, + "breadcrumb": { "source": "$checkpoint-breadcrumb-color", "$value": "{color.primary.base}" }, "box-shadow": { "source": "$checkpoint-box-shadow-color", - "modify": [ - { - "type": "alpha", - "amount": 0.3 - } - ], + "modify": [{ "type": "alpha", "amount": 0.3 }], "$value": "{color.black}" }, "arrow": { "border": { - "top": { - "source": "$checkpoint-arrow-border-top-color", - "$value": "{color.product-tour.checkpoint.bg}" - }, - "transparent": { - "source": "$checkpoint-arrow-border-color-transparent", - "$value": "transparent" - } + "top": { "source": "$checkpoint-arrow-border-top-color", "$value": "{color.product-tour.checkpoint.bg}" }, + "transparent": { "source": "$checkpoint-arrow-border-color-transparent", "$value": "transparent" } } } } diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json index 2807bc0f12..5bc0329299 100644 --- a/tokens/src/themes/light/components/ProgressBar.json +++ b/tokens/src/themes/light/components/ProgressBar.json @@ -2,28 +2,13 @@ "color": { "$type": "color", "progress-bar": { - "bg": { - "source": "$progress-bg", - "$value": "transparent" - }, - "border": { - "source": "$progress-bar-border-color", - "$value": "{color.gray.500}" - }, + "bg": { "source": "$progress-bg", "$value": "transparent" }, + "border": { "source": "$progress-bar-border-color", "$value": "{color.gray.500}" }, "bar": { - "base": { - "source": "$progress-bar-color", - "$value": "{color.white}" - }, + "base": { "source": "$progress-bar-color", "$value": "{color.white}" }, "bg": { - "base": { - "source": "$progress-bar-bg", - "$value": "{color.accent.a}" - }, - "annotated": { - "source": "$annotated-progress-bar-bg", - "$value": "{color.dark.500}" - } + "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" }, + "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" } } } } @@ -31,10 +16,7 @@ "elevation": { "$type": "shadow", "progress-bar": { - "box-shadow": { - "source": "$progress-box-shadow", - "$value": "none" - } + "box-shadow": { "source": "$progress-box-shadow", "$value": "none" } } } } diff --git a/tokens/src/themes/light/components/Scrollable.json b/tokens/src/themes/light/components/Scrollable.json index a36be1026e..96dbe3f5b7 100644 --- a/tokens/src/themes/light/components/Scrollable.json +++ b/tokens/src/themes/light/components/Scrollable.json @@ -5,12 +5,7 @@ "body": { "box-shadow": { "source": "$scrollable-body-box-shadow", - "modify": [ - { - "type": "alpha", - "amount": 0.55 - } - ], + "modify": [{ "type": "alpha", "amount": 0.55 }], "$value": "{color.black}" } } diff --git a/tokens/src/themes/light/components/SearchField.json b/tokens/src/themes/light/components/SearchField.json index caea66835a..8df063f176 100644 --- a/tokens/src/themes/light/components/SearchField.json +++ b/tokens/src/themes/light/components/SearchField.json @@ -3,44 +3,23 @@ "$type": "color", "search-field": { "border": { - "base": { - "source": "$search-border-color", - "$value": "{color.gray.500}" - }, - "interaction": { - "source": "$search-border-color-interaction", - "$value": "{color.black}" - }, - "focus": { - "source": "$search-border-focus-color", - "$value": "{color.black}" - } + "base": { "source": "$search-border-color", "$value": "{color.gray.500}" }, + "interaction": { "source": "$search-border-color-interaction", "$value": "{color.black}" }, + "focus": { "source": "$search-border-focus-color", "$value": "{color.black}" } }, "button": { "bg": { - "primary": { - "source": "$search-btn-primary-bg", - "$value": "{color.primary.500}" - }, - "brand": { - "source": "$search-btn-brand-bg", - "$value": "{color.brand.500}" - } + "primary": { "source": "$search-btn-primary-bg", "$value": "{color.primary.500}" }, + "brand": { "source": "$search-btn-brand-bg", "$value": "{color.brand.500}" } } }, - "form-bg": { - "source": "$search-form-background-color", - "$value": "{color.white}" - } + "form-bg": { "source": "$search-form-background-color", "$value": "{color.white}" } } }, "other": { "$type": "ratio", "search-field": { - "disabled-opacity": { - "source": "$search-disabled-opacity", - "$value": ".3" - } + "disabled-opacity": { "source": "$search-disabled-opacity", "$value": ".3" } } } } diff --git a/tokens/src/themes/light/components/Sheet.json b/tokens/src/themes/light/components/Sheet.json index eafeffbaf6..c9ac340f02 100644 --- a/tokens/src/themes/light/components/Sheet.json +++ b/tokens/src/themes/light/components/Sheet.json @@ -5,23 +5,13 @@ "skrim": { "bg": { "source": "$sheet-skrim-bg", - "modify": [ - { - "type": "alpha", - "amount": 0.5 - } - ], + "modify": [{ "type": "alpha", "amount": 0.5 }], "$value": "{color.gray.300}" }, "component": { "box-shadow": { "source": "$sheet-skrim-component-box-shadow", - "modify": [ - { - "type": "alpha", - "amount": 0.15 - } - ], + "modify": [{ "type": "alpha", "amount": 0.15 }], "$value": "{color.black}" } } diff --git a/tokens/src/themes/light/components/Stepper.json b/tokens/src/themes/light/components/Stepper.json index 99c65c5f3a..797d79ac12 100644 --- a/tokens/src/themes/light/components/Stepper.json +++ b/tokens/src/themes/light/components/Stepper.json @@ -4,34 +4,16 @@ "stepper": { "header": { "bg": { - "base": { - "source": "$stepper-header-bg", - "$value": "transparent" - }, - "line": { - "source": "$stepper-header-line-bg", - "$value": "{color.light.base}" - } + "base": { "source": "$stepper-header-bg", "$value": "transparent" }, + "line": { "source": "$stepper-header-line-bg", "$value": "{color.light.base}" } }, "step": { - "base": { - "source": "$stepper-header-step-color", - "$value": "{color.primary.base}" - }, + "base": { "source": "$stepper-header-step-color", "$value": "{color.primary.base}" }, "bg": { - "base": { - "source": "$stepper-header-step-bg", - "$value": "{color.stepper.header.bg.base}" - }, - "active": { - "source": "$stepper-header-active-step-bg", - "$value": "{color.gray.500}" - } - }, - "border": { - "source": "$stepper-header-step-border", - "$value": "none" + "base": { "source": "$stepper-header-step-bg", "$value": "{color.stepper.header.bg.base}" }, + "active": { "source": "$stepper-header-active-step-bg", "$value": "{color.gray.500}" } }, + "border": { "source": "$stepper-header-step-border", "$value": "none" }, "bubble-error": { "source": "$stepper-header-step-error-bubble-color", "$value": "{color.danger.base}" diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json index 790bd34350..abc5d7f77a 100644 --- a/tokens/src/themes/light/components/Toast.json +++ b/tokens/src/themes/light/components/Toast.json @@ -2,41 +2,19 @@ "color": { "$type": "color", "toast": { - "base": { - "source": "$toast-color", - "$value": "inherit" - }, - "bg": { - "source": "$toast-background-color", - "$value": "{color.gray.700}" - }, + "base": { "source": "$toast-color", "$value": "inherit" }, + "bg": { "source": "$toast-background-color", "$value": "{color.gray.700}" }, "border": { "source": "$toast-border-color", - "modify": [ - { - "type": "alpha", - "amount": 0.1 - } - ], + "modify": [{ "type": "alpha", "amount": 0.1 }], "$value": "{color.black}" }, "header": { - "text": { - "source": "$toast-header-color", - "$value": "{color.white}" - }, - "bg": { - "source": "$toast-header-background-color", - "$value": "{color.gray.700}" - }, + "text": { "source": "$toast-header-color", "$value": "{color.white}" }, + "bg": { "source": "$toast-header-background-color", "$value": "{color.gray.700}" }, "border": { "source": "$toast-header-border-color", - "modify": [ - { - "type": "alpha", - "amount": 0.5 - } - ], + "modify": [{ "type": "alpha", "amount": 0.5 }], "$value": "{color.black}" } } diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json index a0bdc5894b..174eea3cd5 100644 --- a/tokens/src/themes/light/components/Tooltip.json +++ b/tokens/src/themes/light/components/Tooltip.json @@ -2,33 +2,15 @@ "color": { "$type": "color", "tooltip": { - "text": { - "source": "$tooltip-color", - "$value": "{color.white}" - }, - "light": { - "source": "$tooltip-color-light", - "$value": "{color.black}" - }, + "text": { "source": "$tooltip-color", "$value": "{color.white}" }, + "light": { "source": "$tooltip-color-light", "$value": "{color.black}" }, "bg": { - "base": { - "source": "$tooltip-bg", - "$value": "{color.black}" - }, - "light": { - "source": "$tooltip-bg-light", - "$value": "{color.white}" - } + "base": { "source": "$tooltip-bg", "$value": "{color.black}" }, + "light": { "source": "$tooltip-bg-light", "$value": "{color.white}" } }, "arrow": { - "base": { - "source": "$tooltip-arrow-color", - "$value": "{color.tooltip.bg.base}" - }, - "light": { - "source": "$tooltip-arrow-color-light", - "$value": "{color.white}" - } + "base": { "source": "$tooltip-arrow-color", "$value": "{color.tooltip.bg.base}" }, + "light": { "source": "$tooltip-arrow-color-light", "$value": "{color.white}" } } } }, @@ -44,10 +26,7 @@ "other": { "$type": "ratio", "tooltip": { - "opacity": { - "source": "$tooltip-opacity", - "$value": "1" - } + "opacity": { "source": "$tooltip-opacity", "$value": "1" } } } } diff --git a/tokens/src/themes/light/components/general/body.json b/tokens/src/themes/light/components/general/body.json index 1a35561b67..33ad10fbb5 100644 --- a/tokens/src/themes/light/components/general/body.json +++ b/tokens/src/themes/light/components/general/body.json @@ -2,14 +2,8 @@ "$type": "color", "color": { "body": { - "base": { - "source": "$body-color", - "$value": "{color.gray.700}" - }, - "bg": { - "source": "$body-bg", - "$value": "{color.bg.base}" - } + "base": { "source": "$body-color", "$value": "{color.gray.700}" }, + "bg": { "source": "$body-bg", "$value": "{color.bg.base}" } } } } diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json index 4fdaa5a08f..9deb1db864 100644 --- a/tokens/src/themes/light/components/general/headings.json +++ b/tokens/src/themes/light/components/general/headings.json @@ -2,10 +2,7 @@ "$type": "color", "color": { "headings": { - "base": { - "source": "$headings-color", - "$value": "{color.black}" - } + "base": { "source": "$headings-color", "$value": "{color.black}" } } } } diff --git a/tokens/src/themes/light/components/general/hr.json b/tokens/src/themes/light/components/general/hr.json index 69911892f6..de64b7d924 100644 --- a/tokens/src/themes/light/components/general/hr.json +++ b/tokens/src/themes/light/components/general/hr.json @@ -4,12 +4,7 @@ "hr": { "border": { "source": "$hr-border-color", - "modify": [ - { - "type": "alpha", - "amount": 0.1 - } - ], + "modify": [{ "type": "alpha", "amount": 0.1 }], "$value": "{color.black}" } } diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json index 76b14db86c..f6b3c23188 100644 --- a/tokens/src/themes/light/components/general/input.json +++ b/tokens/src/themes/light/components/general/input.json @@ -2,10 +2,7 @@ "color": { "$type": "color", "input": { - "btn-focus": { - "source": "$input-btn-focus-color", - "$value": "{color.bg.active}" - } + "btn-focus": { "source": "$input-btn-focus-color", "$value": "{color.bg.active}" } } }, "elevation": { diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json index 1682479b87..3669afa336 100644 --- a/tokens/src/themes/light/components/general/link.json +++ b/tokens/src/themes/light/components/general/link.json @@ -2,161 +2,83 @@ "color": { "$type": "color", "link": { - "base": { - "source": "$link-color", - "$value": "{color.info.500}" - }, + "base": { "source": "$link-color", "$value": "{color.info.500}" }, "hover": { "source": "$link-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.15 - } - ], + "modify": [{ "type": "darken", "amount": 0.15 }], "$value": "{color.link.base}" }, "inline": { - "base": { - "source": "$inline-link-color", - "$value": "{color.info.500}" - }, + "base": { "source": "$inline-link-color", "$value": "{color.info.500}" }, "decoration": { "source": "$inline-link-decoration-color", - "modify": [ - { - "type": "alpha", - "amount": 0.3 - } - ], + "modify": [{ "type": "alpha", "amount": 0.3 }], "$value": "{color.link.inline.base}" }, "hover": { "base": { "source": "$inline-link-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.15 - } - ], + "modify": [{ "type": "darken", "amount": 0.15 }], "$value": "{color.link.inline.base}" }, "decoration": { "source": "$inline-link-hover-decoration-color", - "modify": [ - { - "type": "alpha", - "amount": 1 - } - ], + "modify": [{ "type": "alpha", "amount": 1 }], "$value": "{color.link.inline.hover.base}" } } }, "muted": { - "base": { - "source": "$muted-link-color", - "$value": "{color.primary.500}" - }, + "base": { "source": "$muted-link-color", "$value": "{color.primary.500}" }, "hover": { "source": "$muted-link-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.15 - } - ], + "modify": [{ "type": "darken", "amount": 0.15 }], "$value": "{color.link.muted.base}" }, "inline": { - "base": { - "source": "$muted-inline-link-color", - "$value": "{color.primary.500}" - }, + "base": { "source": "$muted-inline-link-color", "$value": "{color.primary.500}" }, "decoration": { "source": "$muted-inline-link-decoration-color", - "modify": [ - { - "type": "alpha", - "amount": 0.3 - } - ], + "modify": [{ "type": "alpha", "amount": 0.3 }], "$value": "{color.link.muted.inline.base}" }, "hover": { "base": { "source": "$muted-inline-link-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.15 - } - ], + "modify": [{ "type": "darken", "amount": 0.15 }], "$value": "{color.link.muted.inline.base}" }, "decoration": { "source": "$muted-inline-link-hover-decoration-color", - "modify": [ - { - "type": "alpha", - "amount": 1 - } - ], + "modify": [{ "type": "alpha", "amount": 1 }], "$value": "{color.link.muted.inline.hover.base}" } } } }, "brand": { - "base": { - "source": "$brand-link-color", - "$value": "{color.brand.500}" - }, + "base": { "source": "$brand-link-color", "$value": "{color.brand.500}" }, "hover": { "source": "$brand-link-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.15 - } - ], + "modify": [{ "type": "darken", "amount": 0.15 }], "$value": "{color.link.brand.base}" }, "inline": { - "base": { - "source": "$brand-inline-link-color", - "$value": "{color.brand.500}" - }, + "base": { "source": "$brand-inline-link-color", "$value": "{color.brand.500}" }, "decoration": { "source": "$brand-inline-link-decoration-color", - "modify": [ - { - "type": "alpha", - "amount": 0.3 - } - ], + "modify": [{ "type": "alpha", "amount": 0.3 }], "$value": "{color.link.brand.inline.base}" }, "hover": { "base": { "source": "$brand-inline-link-hover-color", - "modify": [ - { - "type": "darken", - "amount": 0.15 - } - ], + "modify": [{ "type": "darken", "amount": 0.15 }], "$value": "{color.link.brand.inline.base}" }, "decoration": { "source": "$brand-inline-link-hover-decoration-color", - "modify": [ - { - "type": "alpha", - "amount": 1 - } - ], + "modify": [{ "type": "alpha", "amount": 1 }], "$value": "{color.link.brand.inline.hover.base}" } } diff --git a/tokens/src/themes/light/components/general/list.json b/tokens/src/themes/light/components/general/list.json index 6e5416cb27..3b490c8859 100644 --- a/tokens/src/themes/light/components/general/list.json +++ b/tokens/src/themes/light/components/general/list.json @@ -2,72 +2,31 @@ "$type": "color", "color": { "list-group": { - "base": { - "source": "$list-group-color", - "$value": "inherit" - }, + "base": { "source": "$list-group-color", "$value": "inherit" }, "bg": { - "base": { - "source": "$list-group-bg", - "$value": "{color.white}" - }, - "hover": { - "source": "$list-group-hover-bg", - "$value": "{color.gray.100}" - } + "base": { "source": "$list-group-bg", "$value": "{color.white}" }, + "hover": { "source": "$list-group-hover-bg", "$value": "{color.gray.100}" } }, "border": { "source": "$list-group-border-color", - "modify": [ - { - "type": "alpha", - "amount": 0.125 - } - ], + "modify": [{ "type": "alpha", "amount": 0.125 }], "$value": "{color.black}" }, "active": { - "base": { - "source": "$list-group-active-color", - "$value": "{color.active}" - }, - "border": { - "source": "$list-group-active-border-color", - "$value": "{color.list-group.active.bg}" - }, - "bg": { - "source": "$list-group-active-bg", - "$value": "{color.bg.active}" - } + "base": { "source": "$list-group-active-color", "$value": "{color.active}" }, + "border": { "source": "$list-group-active-border-color", "$value": "{color.list-group.active.bg}" }, + "bg": { "source": "$list-group-active-bg", "$value": "{color.bg.active}" } }, "disabled": { - "base": { - "source": "$list-group-disabled-color", - "$value": "{color.gray.600}" - }, - "bg": { - "source": "$list-group-disabled-bg", - "$value": "{color.list-group.bg.base}" - } + "base": { "source": "$list-group-disabled-color", "$value": "{color.gray.600}" }, + "bg": { "source": "$list-group-disabled-bg", "$value": "{color.list-group.bg.base}" } }, "action": { - "base": { - "source": "$list-group-action-color", - "$value": "{color.gray.700}" - }, - "hover": { - "source": "$list-group-action-hover-color", - "$value": "{color.list-group.action.base}" - }, + "base": { "source": "$list-group-action-color", "$value": "{color.gray.700}" }, + "hover": { "source": "$list-group-action-hover-color", "$value": "{color.list-group.action.base}" }, "active": { - "base": { - "source": "$list-group-action-active-color", - "$value": "{color.body.base}" - }, - "bg": { - "source": "$list-group-action-active-bg", - "$value": "{color.gray.200}" - } + "base": { "source": "$list-group-action-active-color", "$value": "{color.body.base}" }, + "bg": { "source": "$list-group-action-active-bg", "$value": "{color.gray.200}" } } } } diff --git a/tokens/src/themes/light/components/general/text.json b/tokens/src/themes/light/components/general/text.json index 41f41815d8..cfc64e42aa 100644 --- a/tokens/src/themes/light/components/general/text.json +++ b/tokens/src/themes/light/components/general/text.json @@ -1,23 +1,11 @@ { "$type": "color", "color": { - "text-muted": { - "source": "$text-muted", - "$value": "{color.gray.500}" - }, - "mark-bg": { - "source": "$mark-bg", - "$value": "#FFF243" - }, + "text-muted": { "source": "$text-muted", "$value": "{color.gray.500}" }, + "mark-bg": { "source": "$mark-bg", "$value": "#FFF243" }, "blockquote": { - "small": { - "source": "$blockquote-small-color", - "$value": "{color.gray.500}" - } + "small": { "source": "$blockquote-small-color", "$value": "{color.gray.500}" } }, - "yiq-light": { - "source": "$yiq-text-light", - "$value": "{color.white}" - } + "yiq-light": { "source": "$yiq-text-light", "$value": "{color.white}" } } } diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json index d8952dba65..0998797a94 100644 --- a/tokens/src/themes/light/global/color.json +++ b/tokens/src/themes/light/global/color.json @@ -207,13 +207,7 @@ }, "600": { "source": "$primary-600", - "modify": [ - { - "type": "mix", - "otherColor": "black", - "amount": "0.10" - } - ], + "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], "actions": { "default": "{color.action.default.primary.600}" }, @@ -222,13 +216,7 @@ }, "700": { "source": "$primary-700", - "modify": [ - { - "type": "mix", - "otherColor": "black", - "amount": "0.20" - } - ], + "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], "actions": { "default": "{color.action.default.primary.700}" }, @@ -237,13 +225,7 @@ }, "800": { "source": "$primary-800", - "modify": [ - { - "type": "mix", - "otherColor": "black", - "amount": "0.25" - } - ], + "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], "actions": { "default": "{color.action.default.primary.800}" }, @@ -252,13 +234,7 @@ }, "900": { "source": "$primary-900", - "modify": [ - { - "type": "mix", - "otherColor": "black", - "amount": "0.30" - } - ], + "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], "actions": { "default": "{color.action.default.primary.900}" }, @@ -277,13 +253,7 @@ "secondary": { "100": { "source": "$secondary-100", - "modify": [ - { - "type": "mix", - "otherColor": "white", - "amount": "0.94" - } - ], + "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], "actions": { "default": "{color.action.default.secondary.100}" }, @@ -292,13 +262,7 @@ }, "200": { "source": "$secondary-200", - "modify": [ - { - "type": "mix", - "otherColor": "white", - "amount": "0.75" - } - ], + "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], "actions": { "default": "{color.action.default.secondary.200}" }, @@ -307,13 +271,7 @@ }, "300": { "source": "$secondary-300", - "modify": [ - { - "type": "mix", - "otherColor": "white", - "amount": "0.50" - } - ], + "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], "actions": { "default": "{color.action.default.secondary.300}" }, diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index f2006fa7ed..1a25ff759a 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -5,8 +5,26 @@ const toml = require('js-toml'); const chroma = require('chroma-js'); const { colorYiq, darken, lighten } = require('./sass-helpers'); const cssUtilities = require('./css-utilities'); -const { composeBreakpointName } = require('./utils'); +const { composeBreakpointName, createCustomHeader } = require('./utils'); +/** + * Transforms a color token based on various modifications. + * + * @param {Object} token - The token object containing color information and modifications. + * @param {string} token.name - The name of the color token. + * @param {string} token.$value - The initial color value of the token. + * @param {Object} token.original - The original token object containing the original value. + * @param {string} token.original.$value - The original color value before any modifications. + * @param {Array} [token.modify=[]] - An array of modification objects to apply to the color. + * @param {string} token.modify.type - The type of modification to apply (e.g., 'mix', 'darken', 'lighten'). + * @param {number} token.modify.amount - The amount by which to modify the color (e.g., percentage or value). + * @param {string} [token.modify.otherColor] - The other color to mix with, if applicable. + * @param {string} [token.modify.light] - The light color for YIQ modification. + * @param {string} [token.modify.dark] - The dark color for YIQ modification. + * @param {number} [token.modify.threshold] - The threshold for YIQ modification. + * @param {Object} theme - The theme object containing additional information for color transformations. + * @returns {string} - The transformed color value in hexadecimal format, including alpha if applicable. + */ const colorTransform = (token, theme) => { const { name: tokenName, @@ -65,7 +83,8 @@ const colorTransform = (token, theme) => { const createCustomCSSVariables = async ({ formatterArgs, themeVariant, -}) => { +}, StyleDictionary) => { + // eslint-disable-next-line import/no-unresolved const { sortByReference, usesReferences, getReferences } = (await import('style-dictionary/utils')); const { dictionary, options, file } = formatterArgs; const outputTokens = themeVariant @@ -87,11 +106,18 @@ const createCustomCSSVariables = async ({ return ` --${token.name}: ${$value};`; }).join('\n'); - return `:root {\n${variables}\n}\n`; + return `${createCustomHeader(StyleDictionary, file).join('\n')}\n:root {\n${variables}\n}\n`; }; +/** + * Initializes and configures Style Dictionary with custom transforms, formatters, filters, and parsers. + * + * @returns {Promise} - A promise that resolves to the configured Style Dictionary instance. + */ const initializeStyleDictionary = async () => { + // eslint-disable-next-line import/no-unresolved const StyleDictionary = (await import('style-dictionary')).default; + // eslint-disable-next-line import/no-unresolved const { getReferences } = (await import('style-dictionary/utils')); /** @@ -125,7 +151,7 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFormat({ name: 'css/custom-variables', - format: formatterArgs => createCustomCSSVariables({ formatterArgs }), + format: formatterArgs => createCustomCSSVariables({ formatterArgs }, StyleDictionary), }); /** @@ -163,8 +189,8 @@ const initializeStyleDictionary = async () => { } } }); - // const header = StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); - return utilityClasses; + + return `${createCustomHeader(StyleDictionary, file).join('\n')}\n${utilityClasses}`; }, }); @@ -183,13 +209,15 @@ const initializeStyleDictionary = async () => { 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`; + customMediaVariables + += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.$value});\n`; if (nextBreakpoint) { - customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.$value});\n`; + customMediaVariables + += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.$value});\n`; } } - return customMediaVariables; + return `${createCustomHeader(StyleDictionary, file).join('\n')}\n${customMediaVariables}`; }, }); @@ -198,11 +226,13 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFileHeader({ name: 'customFileHeader', - fileHeader: (defaultMessages = []) => { + fileHeader: () => { + const currentDate = new Date().toUTCString(); return [ '/*', ' * IMPORTANT: This file is the result of assembling design tokens.', ' * Do not edit directly.', + ` * Generated on ${currentDate}`, ' */', '', ]; @@ -218,6 +248,9 @@ const initializeStyleDictionary = async () => { filter: token => token.isSource === true, }); + /** + * Registers a custom TOML parser with Style Dictionary. + */ StyleDictionary.registerParser({ name: 'toml-parser', pattern: /\.toml$/, diff --git a/tokens/utils.js b/tokens/utils.js index 83ff09c7dc..d3c230b87d 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -2,6 +2,15 @@ const fs = require('fs'); const readline = require('readline'); const path = require('path'); +/** + * 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 +26,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 +47,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,6 +189,15 @@ async function transformInPath(location, variablesMap, transformType = 'definiti } } +/** + * 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.isTheme - 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'), isTheme, themeVariant }) { const directoryPath = isTheme ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`; @@ -201,10 +237,22 @@ function composeBreakpointName(breakpointName, format) { return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`; } +/** + * Generates a custom file header using Style Dictionary hooks. + * + * @param {Object} StyleDictionary - The Style Dictionary instance being used. + * @param {Object} file - The file object containing metadata about the file being generated. + * @returns {string[]} - An array of strings representing the lines of the file header. + */ +function createCustomHeader(StyleDictionary, file) { + return StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); +} + module.exports = { createIndexCssFile, getFilesWithExtension, getSCSStoCSSMap, transformInPath, composeBreakpointName, + createCustomHeader, }; From da00992533e1ac51b1e9bd53b43e8c50239e8a35 Mon Sep 17 00:00:00 2001 From: Adam Stankiewicz Date: Tue, 3 Sep 2024 16:37:13 -0400 Subject: [PATCH 07/16] feat: --output-references CLI arg, registers filters, updates CSS vars format (#3203) * feat: --output-references CLI arg for build-tokens, registers filters, and updates CSS vars format * Exposes `--output-references` CLI argument for `build-tokens` command. Defaults to `true`. Ensures brand package output with the CLI includes references in build output out-of-the-box. * Registers filter(s) `isThemeVariant.{'light'}`, handling future theme variants when implemented (e.g., `isThemeVariant.dark`). * Migrates `createCustomCSSVariables` to use `formattedVariables` to rely on out-of-the-box CSS variable formatting. The formatter still supports token-specific overrides of `outputReferences`. If a token has modifications via `modify`, the modified base reference is not included in the output. * Updates custom fileHeader implementation, including a relative path to design tokens documentation. * Fixes bug with line-height tokens, switching their `$type` from `dimension` to `number` to resolve typography style regressions. * Updates typography tokens related to font size, font weight, and line-height for more consistent naming structure when taking into account mobile. * Updates `@mobile-type` SCSS mixin to support level-specific customization of mobile typography styles for display 1-4. * Renames `"description"` field in tokens to `"$description""` per the DTCG format. * Ensures the "Typography" foundations page properly previews the correct font size for regular "Body" text and includes the missing "HEADING LABEL" example. * Updates to "Colors" page in docs site: * Displays token name instead of CSS variable in the color swatch previews (see screenshot below). * Include `accent-a` and `accent-b` alongside other color names, rather than manually rendering `Swatch` for the accents. * Modifies the grid styles for color swatch preview to be more responsive. * Resolves `NaNpx` bug in `MeasuredItem` component on docs site, while computing the measurements to display for an element (e.g., font size). Instead, it renders an empty block while measurements are resolved. * Updates `CodeBlock` styles on docs site to add its border and background color only to the `LivePreview`, not the entire `CodeBlock` example. * Reduces whitespace on docs site homepage. * Simplifies columns on docs site header, ensuring `SiteTitle` is horizontally aligned in the center. --- Makefile | 1 + bin/paragon-scripts.js | 10 + lib/build-tokens.js | 81 +- package-lock.json | 8 +- package.json | 5 +- src/Form/_FormText.scss | 2 +- src/PageBanner/index.scss | 4 +- src/ProgressBar/index.scss | 2 +- src/Stepper/index.scss | 2 +- src/Toast/index.scss | 2 +- styles/css/core/custom-media-breakpoints.css | 9 +- styles/css/core/variables.css | 239 ++-- styles/css/themes/light/utility-classes.css | 7 +- styles/css/themes/light/variables.css | 1032 ++++------------- styles/scss/core/_typography.scss | 20 +- styles/scss/core/_utilities.scss | 10 +- styles/scss/core/_variables.scss | 63 +- tokens/src/core/components/Alert.json | 2 +- tokens/src/core/components/Annotation.json | 2 +- tokens/src/core/components/Button/core.json | 2 +- tokens/src/core/components/Card.json | 2 +- tokens/src/core/components/Dropzone.json | 2 +- .../src/core/components/Form/typography.json | 10 +- tokens/src/core/components/Pagination.json | 2 +- tokens/src/core/components/Stepper.json | 2 +- .../src/core/components/general/headings.json | 2 +- tokens/src/core/components/general/input.json | 2 +- tokens/src/core/components/general/text.json | 2 +- tokens/src/core/global/display.json | 77 -- tokens/src/core/global/typography.json | 227 ++-- tokens/style-dictionary.js | 259 +++-- tokens/utils.js | 20 +- www/src/components/ComponentsList.tsx | 4 +- www/src/components/MeasuredItem.tsx | 6 +- www/src/components/TableCells.tsx | 26 +- www/src/components/_CodeBlock.scss | 7 +- www/src/components/_doc-elements.scss | 16 +- www/src/components/header/Navbar.tsx | 6 +- www/src/components/header/SiteTitle.tsx | 2 +- www/src/components/typography-page/Body.tsx | 8 +- .../components/typography-page/Display.tsx | 2 +- .../components/typography-page/Headings.tsx | 12 +- .../typography-page/measuredTypeProps.tsx | 9 +- www/src/pages/foundations/colors.tsx | 161 ++- www/src/scss/base.scss | 4 - www/src/scss/edxorg-theme.scss | 5 +- www/src/scss/openedx-theme.scss | 3 - 47 files changed, 1006 insertions(+), 1375 deletions(-) delete mode 100644 tokens/src/core/global/display.json 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..3d811b39f7 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-references', + description: 'Include references 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/lib/build-tokens.js b/lib/build-tokens.js index 19f9199d09..2fa26c22b4 100755 --- a/lib/build-tokens.js +++ b/lib/build-tokens.js @@ -1,6 +1,9 @@ const path = require('path'); const minimist = require('minimist'); -const { initializeStyleDictionary, createCustomCSSVariables, colorTransform } = require('../tokens/style-dictionary'); +const { + initializeStyleDictionary, + colorTransform, +} = require('../tokens/style-dictionary'); const { createIndexCssFile } = require('../tokens/utils'); /** @@ -13,24 +16,37 @@ const { createIndexCssFile } = require('../tokens/utils'); * @param {string|string[]} [commandArgs.themes=['light']] - The themes (variants) for which to build tokens. */ async function buildTokensCommand(commandArgs) { - const StyleDictionary = await initializeStyleDictionary(); - 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, + '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: [ @@ -43,16 +59,18 @@ async function buildTokensCommand(commandArgs) { platforms: { css: { prefix: 'pgn', - transformGroup: '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, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, }, }, { @@ -60,16 +78,16 @@ async function buildTokensCommand(commandArgs) { destination: 'core/custom-media-breakpoints.css', filter: hasSourceTokensOnly ? 'isSource' : undefined, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, }, }, ], transforms: StyleDictionary.hooks.transformGroups.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'), - options: { - fileHeader: 'customFileHeader', - }, }, }, + log: { + verbosity: verbose ? 'verbose' : 'default', + }, }; const getStyleDictionaryConfig = (themeVariant) => ({ @@ -91,12 +109,6 @@ async function buildTokensCommand(commandArgs) { transform: (token) => colorTransform(token, themeVariant), }, }, - format: { - 'css/custom-variables': formatterArgs => createCustomCSSVariables({ - formatterArgs, - themeVariant, - }), - }, platforms: { css: { ...coreConfig.platforms.css, @@ -104,9 +116,11 @@ async function buildTokensCommand(commandArgs) { { format: 'css/custom-variables', destination: `themes/${themeVariant}/variables.css`, - filter: hasSourceTokensOnly ? 'isSource' : undefined, + filter: hasSourceTokensOnly + ? `isSource.${themeVariant}` + : `isThemeVariant.${themeVariant}`, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, }, }, { @@ -114,7 +128,7 @@ async function buildTokensCommand(commandArgs) { destination: `themes/${themeVariant}/utility-classes.css`, filter: hasSourceTokensOnly ? 'isSource' : undefined, options: { - outputReferences: !hasSourceTokensOnly, + outputReferences, }, }, ], @@ -122,14 +136,29 @@ async function buildTokensCommand(commandArgs) { }, }); - new StyleDictionary(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(async (themeVariant) => { - const config = getStyleDictionaryConfig(themeVariant); - new StyleDictionary(config).buildAllPlatforms(); - createIndexCssFile({ buildDir, isTheme: true, themeVariant }); - }); + // Build tokens for each configuration + await Promise.all(configs.map(async ({ config, isThemeVariant, themeVariant }) => { + const sd = new StyleDictionary(config); + await sd.cleanAllPlatforms(); + await sd.buildAllPlatforms(); + createIndexCssFile({ + buildDir, + isThemeVariant: !!isThemeVariant, + themeVariant, + }); + })); } module.exports = buildTokensCommand; diff --git a/package-lock.json b/package-lock.json index 919cb6752f..574036908f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -73,7 +73,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", @@ -4478,9 +4478,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" diff --git a/package.json b/package.json index 6a52a674bf..96e162c515 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,8 @@ "prepare": "husky || true", "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css", "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", @@ -114,7 +115,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", 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/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/ProgressBar/index.scss b/src/ProgressBar/index.scss index 3f4852536e..96271b1813 100644 --- a/src/ProgressBar/index.scss +++ b/src/ProgressBar/index.scss @@ -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/Toast/index.scss b/src/Toast/index.scss index 69b6a58a46..866e049709 100644 --- a/src/Toast/index.scss +++ b/src/Toast/index.scss @@ -31,7 +31,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/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css index 71df821c71..09745d53bf 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 Tue, 27 Aug 2024 17:14:44 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: 0rem); +@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0); @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/variables.css b/styles/css/core/variables.css index 056692268f..97d1d869c2 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 Tue, 27 Aug 2024 17:14:44 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,10 +30,10 @@ --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-collapse-width: width .35s ease; /* Collapse transition for width that takes 350ms */ + --pgn-transition-collapse-height: height .35s ease; /* Collapse transition for height that takes 350ms */ + --pgn-transition-fade: opacity .15s linear; /* Opacity transition that takes 150ms */ + --pgn-transition-base: all .2s ease-in-out; /* Generic transition for any property change */ --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; @@ -45,57 +44,57 @@ --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; --pgn-transition-btn: none; --pgn-transition-badge: none; - --pgn-typography-line-height-micro: .938rem; - --pgn-typography-line-height-sm: 1.5rem; - --pgn-typography-line-height-lg: 1.5rem; - --pgn-typography-line-height-base: 1.5556rem; - --pgn-typography-font-weight-table-th: normal; - --pgn-typography-font-weight-lead: inherit; - --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); - --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-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-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-font-family-base: var(--pgn-typography-font-family-sans-serif); --pgn-typography-print-page-size: a3; - --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-display-mobile: 3.25rem; - --pgn-typography-display-line-height-mobile: 3.5rem; - --pgn-typography-display-line-height-base: 1rem; - --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-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: .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: normal; /* 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: .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: .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: .6875rem; /* Micro utils text font size. */ + --pgn-typography-font-size-xs: 0.75rem; /* X-small font size. */ + --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */ + --pgn-typography-font-size-lg: 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-small-base); + --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; @@ -110,13 +109,13 @@ --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.4286rem; - --pgn-typography-input-btn-line-height-base: 1.3333rem; + --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-base: 1.125rem; --pgn-typography-input-btn-font-family: inherit; - --pgn-typography-headings-line-height: 1.25rem; + --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); @@ -137,7 +136,7 @@ --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-small-base); + --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); @@ -155,7 +154,7 @@ --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-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-xs); --pgn-typography-dropdown-item-text-decoration: none; --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base); --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold); @@ -163,7 +162,7 @@ --pgn-typography-code-font-size: 87.5%; --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-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); @@ -179,23 +178,23 @@ --pgn-typography-alert-line-height: 1.5rem; --pgn-typography-alert-font-size: .875rem; --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); - --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-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-base: 1rem; - --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-spacer-0: 0rem; + --pgn-spacing-grid-gutter-width: 24px; /* Grid gutter width value. */ + --pgn-spacing-table-cell-padding-sm: .3rem; /* Padding sm for tables. */ + --pgn-spacing-table-cell-padding-base: .75rem; /* Padding for tables. */ + --pgn-spacing-label-margin-bottom: .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: 0; /* Space value of level 0 */ --pgn-spacing-mark-padding: .2em; --pgn-spacing-paragraph-margin-bottom: 1rem; --pgn-spacing-list-group-item-padding-x: 1.25rem; @@ -210,7 +209,7 @@ --pgn-spacing-headings-margin-bottom: .5rem; --pgn-spacing-caret-vertical-align: .255em; --pgn-spacing-caret-base: .255em; - --pgn-spacing-tooltip-margin: 0rem; + --pgn-spacing-tooltip-margin: 0; --pgn-spacing-tooltip-padding-x: .5rem; --pgn-spacing-tooltip-padding-y: .5rem; --pgn-spacing-toast-container-gutter-sm: .625rem; @@ -224,9 +223,9 @@ --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem; --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .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-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-x: var(--pgn-spacing-spacer-base); @@ -308,7 +307,7 @@ --pgn-spacing-dropdown-padding-y-item: .25rem; --pgn-spacing-dropdown-padding-y-base: .5rem; --pgn-spacing-dropdown-padding-x-item: 1rem; - --pgn-spacing-dropdown-padding-x-base: 0rem; + --pgn-spacing-dropdown-padding-x-base: 0; --pgn-spacing-dropdown-spacer: .125rem; --pgn-spacing-data-table-footer-position: center; --pgn-spacing-data-table-padding-cell: .5rem .75rem; @@ -347,7 +346,7 @@ --pgn-spacing-card-loading-skeleton-spacer: .313rem; --pgn-spacing-card-footer-action-gap: .5rem; --pgn-spacing-card-columns-gap: 1.25rem; - --pgn-spacing-card-columns-count: 3rem; + --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); @@ -367,7 +366,7 @@ --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: .25rem; - --pgn-spacing-bubble-expandable-padding-y: 0rem; + --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; @@ -384,12 +383,12 @@ --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: 0rem; + --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: 0; /* 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; @@ -407,9 +406,9 @@ --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: 0rem; + --pgn-size-stepper-step-width-min: 0; --pgn-size-stepper-header-height-min: 5.13rem; - --pgn-size-stack-gap: 0rem; + --pgn-size-stack-gap: 0; --pgn-size-spinner-sm-border-width: .2em; --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width); --pgn-size-spinner-sm-width: 1rem; @@ -417,11 +416,11 @@ --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width); --pgn-size-spinner-base-width: 2rem; --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-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: 0rem; + --pgn-size-progress-bar-border-radius: 0; --pgn-size-progress-bar-border-width: 1px; --pgn-size-progress-bar-height-annotated: .3125rem; --pgn-size-progress-bar-height-base: 1rem; @@ -437,7 +436,7 @@ --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: 0rem; + --pgn-size-pagination-focus-outline: 0; --pgn-size-pagination-toggle-border-sm: .25rem; --pgn-size-pagination-toggle-border-base: .3125rem; --pgn-size-pagination-reduced-dropdown-min-width: 6rem; @@ -452,7 +451,7 @@ --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: 0rem; + --pgn-size-nav-tabs-border-radius: 0; --pgn-size-nav-tabs-border-width: 2px; --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: .188rem; @@ -491,7 +490,7 @@ --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: 0rem; + --pgn-size-form-control-border-checkbox-indicator-radius: 0; --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); @@ -499,7 +498,7 @@ --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: 0rem; + --pgn-size-form-control-range-thumb-border-base: 0; --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; @@ -593,11 +592,11 @@ --pgn-size-annotation-border-radius: .25rem; --pgn-size-annotation-max-width: 18.75rem; --pgn-size-annotation-arrow-border-width: .5rem; - --pgn-size-alert-border-width: 0rem; + --pgn-size-alert-border-width: 0; --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); - --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-size-rounded-pill: 50rem; /* Pill border radius. */ + --pgn-size-border-radius-sm: .25rem; /* Small border radius. */ + --pgn-size-border-radius-lg: .425rem; /* Large border radius. */ + --pgn-size-border-radius-base: .375rem; /* Default border radius. */ + --pgn-size-border-width: 1px; /* Default border width. */ } diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css index d3aee7ed00..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 Tue, 27 Aug 2024 17:14:44 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 895537aa53..4cee81a244 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -1,7 +1,6 @@ -/* - * IMPORTANT: This file is the result of assembling design tokens. - * Do not edit directly. - * Generated on Tue, 27 Aug 2024 17:14:44 GMT +/** + * Do not edit directly, this file was auto-generated. while transforming design tokens. + * See /tokens/README.md for more details. */ :root { @@ -114,115 +113,115 @@ --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; - --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-base: #E1DDDBFF; - --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-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-base: var(--pgn-color-yellow); - --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-base: var(--pgn-color-teal); - --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-base: var(--pgn-color-green); - --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-brand-base: #9D0054FF; - --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-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-primary-base: #0A3055FF; - --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-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-500: var(--pgn-color-gray-base); - --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-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; @@ -240,19 +239,19 @@ --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: var(--pgn-color-link-brand-inline-hover-base); + --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: var(--pgn-color-link-muted-inline-hover-base); + --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: var(--pgn-color-link-inline-hover-base); + --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); @@ -1442,78 +1441,77 @@ --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); - --pgn-color-theme-active-dark: var(--pgn-color-dark-900); - --pgn-color-theme-active-light: var(--pgn-color-light-900); - --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-brand: var(--pgn-color-brand-900); - --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900); - --pgn-color-theme-active-primary: var(--pgn-color-primary-900); - --pgn-color-theme-hover-gray: var(--pgn-color-gray-700); - --pgn-color-theme-hover-dark: var(--pgn-color-dark-700); - --pgn-color-theme-hover-light: var(--pgn-color-light-700); - --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-brand: var(--pgn-color-brand-700); - --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-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-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-brand: var(--pgn-color-brand-500); - --pgn-color-theme-default-secondary: var(--pgn-color-secondary-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-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-brand: var(--pgn-color-brand-500); - --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500); - --pgn-color-theme-focus-primary: var(--pgn-color-primary-500); - --pgn-color-theme-border-gray: var(--pgn-color-gray-200); - --pgn-color-theme-border-dark: var(--pgn-color-dark-200); - --pgn-color-theme-border-light: var(--pgn-color-light-200); - --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-brand: var(--pgn-color-brand-200); - --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200); - --pgn-color-theme-border-primary: var(--pgn-color-primary-200); - --pgn-color-theme-bg-gray: var(--pgn-color-gray-100); - --pgn-color-theme-bg-dark: var(--pgn-color-dark-100); - --pgn-color-theme-bg-light: var(--pgn-color-light-100); - --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-brand: var(--pgn-color-brand-100); - --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); - --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); - --pgn-color-border: var(--pgn-color-gray-200); - --pgn-color-table-border: var(--pgn-color-border); - --pgn-color-table-caption: var(--pgn-color-text-muted); + --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); - --pgn-color-disabled: var(--pgn-color-gray-500); - --pgn-color-active: var(--pgn-color-white); - --pgn-color-text-50-white: #FFFFFF80; - --pgn-color-text-50-black: #00000080; - --pgn-color-bg-active: var(--pgn-color-primary-500); - --pgn-color-bg-base: var(--pgn-color-white); - --pgn-theme-interval: 8%; + --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; @@ -1536,43 +1534,39 @@ --pgn-other-carousel-control-opacity-base: .5; --pgn-other-btn-disabled-opacity: .65; --pgn-other-form-feedback-tooltip-opacity: .9; - --pgn-other-form-control-custom-file-content: Browse; - --pgn-other-form-control-custom-file-lang: en; - --pgn-other-form-control-range-track-cursor: pointer; - --pgn-other-form-control-cursor: auto; - --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-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); /* Centered box shadow of level 5. */ + --pgn-elevation-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); /* Centered box shadow of level 4. */ + --pgn-elevation-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); /* Centered box shadow of level 3. */ + --pgn-elevation-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); /* Centered box shadow of level 2. */ + --pgn-elevation-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); /* Centered box shadow of level 1. */ + --pgn-elevation-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); /* Right box shadow of level 5. */ + --pgn-elevation-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); /* Right box shadow of level 4. */ + --pgn-elevation-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); /* Right box shadow of level 3. */ + --pgn-elevation-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); /* Right box shadow of level 2. */ + --pgn-elevation-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); /* Right box shadow of level 1. */ + --pgn-elevation-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); /* Top box shadow of level 4. */ + --pgn-elevation-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); /* Top box shadow of level 3. */ + --pgn-elevation-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); /* Top box shadow of level 2. */ + --pgn-elevation-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); /* Top box shadow of level 1. */ + --pgn-elevation-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); /* Left box shadow of level 5. */ + --pgn-elevation-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); /* Left box shadow of level 4. */ + --pgn-elevation-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); /* Left box shadow of level 3. */ + --pgn-elevation-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); /* Left box shadow of level 2. */ + --pgn-elevation-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); /* Left box shadow of level 1. */ + --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); /* Bottom box shadow of level 5. */ + --pgn-elevation-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 4. */ + --pgn-elevation-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 3. */ + --pgn-elevation-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 2. */ + --pgn-elevation-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); /* Bottom box shadow of level 1. */ + --pgn-elevation-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); /* Large box shadow. */ + --pgn-elevation-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); /* Small box shadow. */ + --pgn-elevation-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); /* Default box shadow. */ + --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); /* Basic box shadow of level 5. */ + --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 4. */ + --pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); /* Basic box shadow of level 3. */ + --pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); /* Basic box shadow of level 2. */ + --pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 1. */ --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-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); @@ -1642,598 +1636,8 @@ --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-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-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-tooltip-zindex: 1070; - --pgn-elevation-sheet-zindex-main: 1032; - --pgn-elevation-sheet-zindex-backdrop: 1031; - --pgn-elevation-product-tour-checkpoint-zindex: 1060; --pgn-elevation-popover-box-shadow: none; - --pgn-elevation-popover-zindex: 1060; --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-modal-zindex: 1050; - --pgn-elevation-modal-backdrop-zindex: 1040; --pgn-elevation-dropdown-box-shadow: none; - --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-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; - --pgn-transition-btn: none; - --pgn-transition-badge: none; - --pgn-typography-line-height-micro: .938rem; - --pgn-typography-line-height-sm: 1.5rem; - --pgn-typography-line-height-lg: 1.5rem; - --pgn-typography-line-height-base: 1.5556rem; - --pgn-typography-font-weight-table-th: normal; - --pgn-typography-font-weight-lead: inherit; - --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); - --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-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-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-font-family-base: var(--pgn-typography-font-family-sans-serif); - --pgn-typography-print-page-size: a3; - --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-display-mobile: 3.25rem; - --pgn-typography-display-line-height-mobile: 3.5rem; - --pgn-typography-display-line-height-base: 1rem; - --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-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-link-decoration-brand-inline-hover: underline; - --pgn-typography-link-decoration-brand-inline-base: underline; - --pgn-typography-link-decoration-brand-hover: underline; - --pgn-typography-link-decoration-brand-base: none; - --pgn-typography-link-decoration-muted-inline-hover: underline; - --pgn-typography-link-decoration-muted-inline-base: underline; - --pgn-typography-link-decoration-muted-hover: underline; - --pgn-typography-link-decoration-muted-base: none; - --pgn-typography-link-decoration-inline-hover: underline; - --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.4286rem; - --pgn-typography-input-btn-line-height-base: 1.3333rem; - --pgn-typography-input-btn-font-size-lg: 1.325rem; - --pgn-typography-input-btn-font-size-sm: .875rem; - --pgn-typography-input-btn-font-size-base: 1.125rem; - --pgn-typography-input-btn-font-family: inherit; - --pgn-typography-headings-line-height: 1.25rem; - --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: .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: .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: .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-small-base); - --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-small-x); - --pgn-typography-dropdown-item-text-decoration: none; - --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: 87.5%; - --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-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-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); - --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-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-base: 1rem; - --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-spacer-0: 0rem; - --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-tooltip-margin: 0rem; - --pgn-spacing-tooltip-padding-x: .5rem; - --pgn-spacing-tooltip-padding-y: .5rem; - --pgn-spacing-toast-container-gutter-sm: .625rem; - --pgn-spacing-toast-container-gutter-lg: 1.25rem; - --pgn-spacing-toast-padding-y: .25rem; - --pgn-spacing-toast-padding-x: .75rem; - --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px; - --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: .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: .625rem; - --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base); - --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .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: .25rem; - --pgn-spacing-stepper-header-step-padding: .25rem; - --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base); - --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-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-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-pagination-padding-x-lg: 1.5rem; - --pgn-spacing-pagination-padding-x-sm: .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-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: .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-modal-dialog-margin: 1.5rem; - --pgn-spacing-modal-header-padding-y: 1rem; - --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem; - --pgn-spacing-modal-footer-padding-y: 1rem; - --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem; - --pgn-spacing-modal-inner-padding-bottom: .7rem; - --pgn-spacing-modal-inner-padding-base: 1.5rem; - --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left); - --pgn-spacing-menu-item-icon-margin-left: .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: .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: .5625rem; - --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem; - --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem; - --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); - --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-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-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-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-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-dropdown-padding-y-item: .25rem; - --pgn-spacing-dropdown-padding-y-base: .5rem; - --pgn-spacing-dropdown-padding-x-item: 1rem; - --pgn-spacing-dropdown-padding-x-base: 0rem; - --pgn-spacing-dropdown-spacer: .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-collapsible-card-spacer-icon: 2.5rem; - --pgn-spacing-collapsible-card-spacer-left-body: .75rem; - --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x); - --pgn-spacing-collapsible-card-spacer-x-base: .5rem; - --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y); - --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-chip-outline-width: 3px; - --pgn-spacing-chip-outline-focus-distance-dark: .313rem; - --pgn-spacing-chip-outline-focus-distance-light: .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-y: 1px; - --pgn-spacing-chip-margin-icon: .25rem; - --pgn-spacing-chip-margin-base: .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-base: 1rem; - --pgn-spacing-card-logo-left-offset-horizontal: .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-columns-gap: 1.25rem; - --pgn-spacing-card-columns-count: 3rem; - --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-x: 1.25rem; - --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: .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: .25rem; - --pgn-spacing-bubble-expandable-padding-y: 0rem; - --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-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: 0rem; - --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: .3em; - --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-tooltip-arrow-width: .8rem; - --pgn-size-tooltip-arrow-height: .4rem; - --pgn-size-tooltip-max-width: 200px; - --pgn-size-toast-border-radius: .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: 0rem; - --pgn-size-stepper-header-height-min: 5.13rem; - --pgn-size-stack-gap: 0rem; - --pgn-size-spinner-sm-border-width: .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-height: var(--pgn-size-spinner-base-width); - --pgn-size-spinner-base-width: 2rem; - --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: .3125rem; - --pgn-size-search-field-border-width-base: .0625rem; - --pgn-size-progress-bar-threshold-circle: .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-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-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: 0rem; - --pgn-size-pagination-toggle-border-sm: .25rem; - --pgn-size-pagination-toggle-border-base: .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: 0rem; - --pgn-size-nav-tabs-border-width: 2px; - --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: .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-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-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-form-border-radius-width: .125rem; - --pgn-size-form-border-radius-check-focus: .0625rem; - --pgn-size-form-autosuggest-border-width: .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: 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: 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-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; - --pgn-size-data-table-dropdown-pagination-max-height: 60vh; - --pgn-size-data-table-border: 2px; - --pgn-size-container-max-width-xl: 1440px; - --pgn-size-container-max-width-lg: 1192px; - --pgn-size-container-max-width-md: 952px; - --pgn-size-container-max-width-sm: 708px; - --pgn-size-container-max-width-xs: 464px; - --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px); - --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-carousel-caption-width: 70%; - --pgn-size-carousel-indicator-height-area-hit: 10px; - --pgn-size-carousel-indicator-height-base: 3px; - --pgn-size-carousel-indicator-width: 30px; - --pgn-size-carousel-control-width-icon: 20px; - --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-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); - --pgn-size-card-border-radius-logo: .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-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: .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-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-avatar-border-radius: 100%; - --pgn-size-avatar-border-base: 1px; - --pgn-size-avatar-huge: 18.75rem; - --pgn-size-avatar-xxl: 11.5rem; - --pgn-size-avatar-xl: 6rem; - --pgn-size-avatar-lg: 4rem; - --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-max-width: 18.75rem; - --pgn-size-annotation-arrow-border-width: .5rem; - --pgn-size-alert-border-width: 0rem; - --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); - --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; } 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..e5723b6a73 100644 --- a/styles/scss/core/_variables.scss +++ b/styles/scss/core/_variables.scss @@ -703,19 +703,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-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-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-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 +723,34 @@ $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; +$display-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default; // deprecated in favor of $display1-mobile-size +$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; diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json index 133b336cc8..aafa21a782 100644 --- a/tokens/src/core/components/Alert.json +++ b/tokens/src/core/components/Alert.json @@ -17,7 +17,7 @@ "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" }, "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" } }, - "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "dimension" } + "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "number" } } }, "size": { diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json index 4a20f37204..62539f1e2f 100644 --- a/tokens/src/core/components/Annotation.json +++ b/tokens/src/core/components/Annotation.json @@ -11,7 +11,7 @@ "typography": { "annotation": { "font-size": { "source": "$annotation-font-size", "$value": "{typography.font.size.sm}" }, - "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}" } + "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}", "type": "number" } } }, "size": { diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json index bcfcc5bc6c..93a9a7366f 100644 --- a/tokens/src/core/components/Button/core.json +++ b/tokens/src/core/components/Button/core.json @@ -43,7 +43,7 @@ "weight": { "source": "$btn-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$btn-line-height", "$value": "{typography.input.btn.line-height.base}" }, "sm": { "source": "$btn-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" }, "lg": { "source": "$btn-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" } diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json index 52e9a46ddc..e6260ebae8 100644 --- a/tokens/src/core/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -76,7 +76,7 @@ "typography": { "footer": { "text": { - "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.small.x}" } + "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.xs}" } } } } diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json index f3927f9aeb..c3f78c9007 100644 --- a/tokens/src/core/components/Dropzone.json +++ b/tokens/src/core/components/Dropzone.json @@ -3,7 +3,7 @@ "typography": { "dropzone": { "restriction-msg": { - "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.small.x}" } + "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.xs}" } } } }, diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json index da1a0e8e6a..dd4973969b 100644 --- a/tokens/src/core/components/Form/typography.json +++ b/tokens/src/core/components/Form/typography.json @@ -13,7 +13,7 @@ "weight": { "source": "$input-font-weight", "$value": "{typography.font.weight.base}", "$type": "fontWeight" } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$input-line-height", "$value": "{typography.input.btn.line-height.base}" }, "sm": { "source": "$input-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" }, "lg": { "source": "$input-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" } @@ -31,10 +31,10 @@ }, "weight": { "source": "$custom-select-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" } }, - "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" } + "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" } }, "file": { - "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "dimension" }, + "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" }, "font": { "family": { "source": "$custom-file-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" }, "weight": { "source": "$custom-file-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" } @@ -44,13 +44,13 @@ "feedback": { "$type": "dimension", "font": { - "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.small.base}" } + "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.sm}" } }, "tooltip": { "font": { "size": { "source": "$form-feedback-tooltip-font-size", "$value": "{typography.font.size.sm}" } }, - "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}" } + "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}", "$type": "number" } } } } diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json index 2d28cec0c5..b300e4ac78 100644 --- a/tokens/src/core/components/Pagination.json +++ b/tokens/src/core/components/Pagination.json @@ -5,7 +5,7 @@ "font-size": { "sm": { "source": "$pagination-font-size-sm", "$value": ".875rem" } }, - "line-height": { "source": "$pagination-line-height", "$value": "1.5rem" } + "line-height": { "source": "$pagination-line-height", "$value": "1.5rem", "$type": "number" } } }, "spacing": { diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json index 2590069543..e3e33d5ddc 100644 --- a/tokens/src/core/components/Stepper.json +++ b/tokens/src/core/components/Stepper.json @@ -33,7 +33,7 @@ }, "typography": { "spacer": { - "line-height": { "source": "$stepper-header-line-height", "$value": "1px" } + "line-height": { "source": "$stepper-header-line-height", "$value": "1px", "$type": "number" } } } } diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json index 40312e767b..c631e3d2d6 100644 --- a/tokens/src/core/components/general/headings.json +++ b/tokens/src/core/components/general/headings.json @@ -5,7 +5,7 @@ "family": { "source": "$headings-font-family", "$value": "inherit", "$type": "fontFamily" }, "weight": { "source": "$headings-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" } }, - "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "dimension" } + "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "number" } } }, "spacing": { diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json index f0fabce75c..0bdc756950 100644 --- a/tokens/src/core/components/general/input.json +++ b/tokens/src/core/components/general/input.json @@ -12,7 +12,7 @@ } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$input-btn-line-height", "$value": "1.3333" }, "sm": { "source": "$input-btn-line-height-sm", "$value": "1.4286" }, "lg": { "source": "$input-btn-line-height-lg", "$value": "{typography.line-height.lg}" } diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json index 45ce22da9a..8608354cdc 100644 --- a/tokens/src/core/components/general/text.json +++ b/tokens/src/core/components/general/text.json @@ -9,7 +9,7 @@ "typography": { "blockquote": { "small": { - "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.small.base}" } + "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.sm}" } }, "font-size": { "source": "$blockquote-font-size", "$value": "calc({typography.font.size.base} * 1.25)" } } diff --git a/tokens/src/core/global/display.json b/tokens/src/core/global/display.json deleted file mode 100644 index 17eb942016..0000000000 --- a/tokens/src/core/global/display.json +++ /dev/null @@ -1,77 +0,0 @@ -{ - "typography": { - "display": { - "1": { - "source": "$display1-size", - "$value": "3.75rem", - "$type": "dimension", - "$description": "Font size for heading of level 1." - }, - "2": { - "source": "$display2-size", - "$value": "4.875rem", - "$type": "dimension", - "$description": "Font size for heading of level 2." - }, - "3": { - "source": "$display3-size", - "$value": "5.625rem", - "$type": "dimension", - "$description": "Font size for heading of level 3." - }, - "4": { - "source": "$display4-size", - "$value": "7.5rem", - "$type": "dimension", - "$description": "Font size for heading of level 4." - }, - "line-height": { - "$type": "dimension", - "base": { - "source": "$display-line-height", - "$value": "1", - "$description": "Standard line height." - }, - "mobile": { - "source": "$display-mobile-line-height", - "$value": "3.5rem", - "$description": "Mobile line height." - } - }, - "mobile": { - "source": "$display-mobile-size", - "$value": "3.25rem", - "$type": "dimension", - "$description": "Font size for mobile devices." - }, - "weight": { - "1": { - "source": "$display1-weight", - "$value": "{typography.font.weight.bold}", - "$description": "Font weight of level 1." - }, - "2": { - "source": "$display2-weight", - "$value": "{typography.font.weight.bold}", - "$description": "Font weight of level 2." - }, - "3": { - "source": "$display3-weight", - "$value": "{typography.font.weight.bold}", - "$description": "Font weight of level 3." - }, - "4": { - "source": "$display4-weight", - "$value": "{typography.font.weight.bold}", - "$description": "Font weight of level 4." - }, - "$type": "fontWeight" - } - }, - "print-page-size": { - "source": "$print-page-size", - "$value": "a3", - "$type": "dimension" - } - } -} diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json index 20646617ed..022e875753 100644 --- a/tokens/src/core/global/typography.json +++ b/tokens/src/core/global/typography.json @@ -27,123 +27,145 @@ } }, "size": { + "$type": "dimension", "base": { "source": "$font-size-base", "$value": "1.125rem", - "$type": "dimension", "$description": "Base font size." }, "lg": { - "source": "$font-size-lg", - "$value": "1.4063rem", - "$type": "dimension", - "$description": "Large font size." + "source": "$lead-font-size", + "$value": "{typography.font.size.base} * 1.25", + "$description": "Lead text font size." }, "sm": { - "source": "$font-size-sm", - "$value": ".875rem", - "$type": "dimension", + "source": "$small-font-size", + "$value": "0.875rem", "$description": "Small font size." }, "xs": { - "source": "$font-size-xs", - "$value": ".75rem", + "source": "$x-small-font-size", + "$value": "0.75rem", + "$description": "X-small font size." + }, + "micro": { + "source": "$micro-font-size", + "$value": ".6875rem", "$type": "dimension", - "$description": "Extra-small font size." + "$description": "Micro utils text font size." }, - "small": { - "$type": "percentage", + "h1": { "base": { - "source": "$small-font-size", - "$value": "87.5%", - "$description": "Small font size." + "source": "$h1-font-size", + "$value": "2.5rem", + "$description": "Base font size of heading level 1." }, - "x": { - "source": "$x-small-font-size", - "$value": "75%", - "$description": "X-small font size." - } - }, - "h1": { - "source": "$h1-font-size", - "$value": "2.5rem", - "$type": "dimension", - "$description": "Font size of heading level 1." - }, - "h2": { - "source": "$h2-font-size", - "$value": "2rem", - "$type": "dimension", - "$description": "Font size of heading level 2." - }, - "h3": { - "source": "$h3-font-size", - "$value": "1.375rem", - "$type": "dimension", - "$description": "Font size of heading level 3." - }, - "h4": { - "source": "$h4-font-size", - "$value": "1.125rem", - "$type": "dimension", - "$description": "Font size of heading level 4." - }, - "h5": { - "source": "$h5-font-size", - "$value": ".875rem", - "$type": "dimension", - "$description": "Font size of heading level 5." - }, - "h6": { - "source": "$h6-font-size", - "$value": ".75rem", - "$type": "dimension", - "$description": "Font size of heading level 6." - }, - "mobile": { - "$type": "dimension", - "h1": { + "mobile": { "source": "$h1-mobile-font-size", "$value": "2.25rem", "$description": "Mobile font size of heading level 1." + } + }, + "h2": { + "base": { + "source": "$h2-font-size", + "$value": "2rem", + "$description": "Font size of heading level 2." }, - "h2": { + "mobile": { "source": "$h2-mobile-font-size", - "$value": "{typography.font.size.h2}", + "$value": "{typography.font.size.h2.base}", "$description": "Mobile font size of heading level 2." + } + }, + "h3": { + "base": { + "source": "$h3-font-size", + "$value": "1.375rem", + "$description": "Font size of heading level 3." }, - "h3": { + "mobile": { "source": "$h3-mobile-font-size", - "$value": "{typography.font.size.h3}", + "$value": "{typography.font.size.h3.base}", "$description": "Mobile font size of heading level 3." + } + }, + "h4": { + "base": { + "source": "$h4-font-size", + "$value": "1.125rem", + "$description": "Font size of heading level 4." }, - "h4": { + "mobile": { "source": "$h4-mobile-font-size", - "$value": "{typography.font.size.h4}", + "$value": "{typography.font.size.h4.base}", "$description": "Mobile font size of heading level 4." + } + }, + "h5": { + "base": { + "source": "$h5-font-size", + "$value": ".875rem", + "$description": "Font size of heading level 5." }, - "h5": { + "mobile": { "source": "$h5-mobile-font-size", - "$value": "{typography.font.size.h5}", + "$value": "{typography.font.size.h5.base}", "$description": "Mobile font size of heading level 5." + } + }, + "h6": { + "base": { + "source": "$h6-font-size", + "$value": ".75rem", + "$description": "Font size of heading level 6." }, - "h6": { + "mobile": { "source": "$h6-mobile-font-size", - "$value": "{typography.font.size.h6}", + "$value": "{typography.font.size.h6.base}", "$description": "Mobile font size of heading level 6." } }, - "lead": { - "source": "$lead-font-size", - "$value": "calc({typography.font.size.base} * 1.25)", - "$type": "dimension", - "$description": "Lead text font size." - }, - "micro": { - "source": "$micro-font-size", - "$value": ".688rem", - "$type": "dimension", - "$description": "Micro utils text font size." + "display": { + "1": { + "source": "$display1-size", + "$value": "3.75rem", + "$description": "Font size for heading of level 1." + }, + "2": { + "source": "$display2-size", + "$value": "4.875rem", + "$description": "Font size for heading of level 2." + }, + "3": { + "source": "$display3-size", + "$value": "5.625rem", + "$description": "Font size for heading of level 3." + }, + "4": { + "source": "$display4-size", + "$value": "7.5rem", + "$description": "Font size for heading of level 4." + }, + "mobile": { + "1": { + "source": "$display-mobile-size", + "$value": "3.25rem", + "$description": "Mobile font size for heading of level 1." + }, + "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": { @@ -194,11 +216,33 @@ "source": "$table-th-font-weight", "$value": "normal", "$description": "Table th font weight." + }, + "display": { + "1": { + "source": "$display1-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 1." + }, + "2": { + "source": "$display2-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 2." + }, + "3": { + "source": "$display3-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 3." + }, + "4": { + "source": "$display4-weight", + "$value": "{typography.font.weight.bold}", + "$description": "Font weight of display level 4." + } } } }, "line-height": { - "$type": "dimension", + "$type": "number", "base": { "source": "$line-height-base", "$value": "1.5556", @@ -218,7 +262,24 @@ "source": "$micro-line-height", "$value": ".938rem", "$description": "Micro utils line height." + }, + "display": { + "base": { + "source": "$display-line-height", + "$value": "1", + "$description": "Standard display line height." + }, + "mobile": { + "source": "$display-mobile-line-height", + "$value": "3.5rem", + "$description": "Mobile display line height." + } } + }, + "print-page-size": { + "source": "$print-page-size", + "$value": "a3", + "$type": "dimension" } } } diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index 1a25ff759a..fa56e7f977 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -2,35 +2,81 @@ * This module creates and exports custom StyleDictionary instance for Paragon. */ const toml = require('js-toml'); +const chalk = require('chalk'); const chroma = require('chroma-js'); const { colorYiq, darken, lighten } = require('./sass-helpers'); const cssUtilities = require('./css-utilities'); -const { composeBreakpointName, createCustomHeader } = require('./utils'); +const { composeBreakpointName } = require('./utils'); + +/* eslint-disable import/no-unresolved */ +const getStyleDictionary = async () => (await import('style-dictionary')).default; +const getStyleDictionaryUtils = async () => import('style-dictionary/utils'); +/* eslint-enable import/no-unresolved */ + +/** + * @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 {Object} token - The token object containing color information and modifications. - * @param {string} token.name - The name of the color token. - * @param {string} token.$value - The initial color value of the token. - * @param {Object} token.original - The original token object containing the original value. - * @param {string} token.original.$value - The original color value before any modifications. - * @param {Array} [token.modify=[]] - An array of modification objects to apply to the color. - * @param {string} token.modify.type - The type of modification to apply (e.g., 'mix', 'darken', 'lighten'). - * @param {number} token.modify.amount - The amount by which to modify the color (e.g., percentage or value). - * @param {string} [token.modify.otherColor] - The other color to mix with, if applicable. - * @param {string} [token.modify.light] - The light color for YIQ modification. - * @param {string} [token.modify.dark] - The dark color for YIQ modification. - * @param {number} [token.modify.threshold] - The threshold for YIQ modification. - * @param {Object} theme - The theme object containing additional information for color transformations. + * @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, theme) => { +const colorTransform = (token, themeVariant) => { const { name: tokenName, $value, original, - modify = [], + modify, } = token; const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor', 'none']; @@ -40,7 +86,7 @@ const colorTransform = (token, theme) => { let color = chroma($value); - if (modify && modify.length > 0) { + if (modify?.length > 0) { modify.forEach((modifier) => { const { type, amount, otherColor } = modifier; switch (type) { @@ -55,7 +101,7 @@ const colorTransform = (token, theme) => { light, dark, threshold, - theme, + themeVariant, }); break; } @@ -65,8 +111,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); + } } }); } @@ -80,45 +134,44 @@ 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 = async ({ - formatterArgs, - themeVariant, -}, StyleDictionary) => { - // eslint-disable-next-line import/no-unresolved - const { sortByReference, usesReferences, getReferences } = (await import('style-dictionary/utils')); +const createCustomCSSVariables = async ({ formatterArgs }) => { + const { fileHeader, formattedVariables } = await getStyleDictionaryUtils(); const { dictionary, options, file } = formatterArgs; - const outputTokens = themeVariant - ? dictionary.allTokens.filter(token => token.filePath.includes(themeVariant)) - : dictionary.allTokens; - - const variables = outputTokens.sort(sortByReference(dictionary)).map(token => { - let { $value } = token; - - const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences; - - if (usesReferences(token.original.$value) && outputReferencesForToken) { - const refs = getReferences(token.original.$value, dictionary.tokens); - refs.forEach(ref => { - $value = $value.replace(ref.$value, `var(--${ref.name})`); - }); - } - - return ` --${token.name}: ${$value};`; - }).join('\n'); - - return `${createCustomHeader(StyleDictionary, file).join('\n')}\n:root {\n${variables}\n}\n`; + 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 + */ + /** * Initializes and configures Style Dictionary with custom transforms, formatters, filters, and parsers. * - * @returns {Promise} - A promise that resolves to the configured Style Dictionary instance. + * @returns {Promise} - A promise that resolves to the configured Style Dictionary instance. */ -const initializeStyleDictionary = async () => { - // eslint-disable-next-line import/no-unresolved - const StyleDictionary = (await import('style-dictionary')).default; - // eslint-disable-next-line import/no-unresolved - const { getReferences } = (await import('style-dictionary/utils')); +const initializeStyleDictionary = async ({ themes }) => { + const StyleDictionary = await getStyleDictionary(); + const { getReferences } = await getStyleDictionaryUtils(); /** * Transformer that applies SASS color functions to tokens. @@ -127,7 +180,7 @@ const initializeStyleDictionary = async () => { name: 'color/sass-color-functions', transitive: true, type: 'value', - filter: (token) => token.attributes.category === 'color' || token.$value?.toString().startsWith('#'), + filter: (token) => token.attributes?.category === 'color' || token.$value.toString().startsWith('#'), transform: (token) => colorTransform(token), }); @@ -151,7 +204,7 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFormat({ name: 'css/custom-variables', - format: formatterArgs => createCustomCSSVariables({ formatterArgs }, StyleDictionary), + format: formatterArgs => createCustomCSSVariables({ formatterArgs }), }); /** @@ -163,7 +216,9 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFormat({ name: 'css/utility-classes', - format: async ({ dictionary, file }) => { + format: async ({ dictionary, file, options = {} }) => { + const { formatting } = options; + const { fileHeader } = await getStyleDictionaryUtils(); const { utilities } = dictionary.tokens; if (!utilities) { return ''; @@ -189,8 +244,8 @@ const initializeStyleDictionary = async () => { } } }); - - return `${createCustomHeader(StyleDictionary, file).join('\n')}\n${utilityClasses}`; + const header = await fileHeader({ file, formatting }); + return `${header}${utilityClasses}`; }, }); @@ -201,7 +256,9 @@ const initializeStyleDictionary = async () => { */ StyleDictionary.registerFormat({ name: 'css/custom-media-breakpoints', - format: ({ dictionary, file }) => { + format: async ({ dictionary, file, options = {} }) => { + const { fileHeader } = await getStyleDictionaryUtils(); + const { formatting } = options; const { breakpoint } = dictionary.tokens.size; let customMediaVariables = ''; @@ -216,36 +273,68 @@ const initializeStyleDictionary = async () => { += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.$value});\n`; } } - - return `${createCustomHeader(StyleDictionary, file).join('\n')}\n${customMediaVariables}`; + const header = await fileHeader({ file, formatting }); + return `${header}${customMediaVariables}`; }, }); /** - * Custom file header for custom and built-in formatters. + * @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. + */ + + /** + * @typedef {object} StyleDictionaryFilterOptions + * @property {boolean} hasThemeVariants - Indicates whether the filter should also be registered with theme variants. */ - StyleDictionary.registerFileHeader({ - name: 'customFileHeader', - fileHeader: () => { - const currentDate = new Date().toUTCString(); - return [ - '/*', - ' * IMPORTANT: This file is the result of assembling design tokens.', - ' * Do not edit directly.', - ` * Generated on ${currentDate}`, - ' */', - '', - ]; - }, - }); /** - * Registers a filter `isSource` that filters output to only include tokens - * that are marked as `isSource` in their metadata. + * 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. */ - StyleDictionary.registerFilter({ - name: 'isSource', - filter: token => token.isSource === true, + function registerStyleDictionaryFilter(name, filter, filterOptions = {}) { + StyleDictionary.registerFilter({ name, filter }); + if (filterOptions.hasThemeVariants) { + themes.forEach((themeVariant) => { + StyleDictionary.registerFilter({ + name: `${name}.${themeVariant}`, + filter: (token, opts) => { + const isThemeVariant = token.filePath.includes(themeVariant); + const baseFilter = typeof filter === 'function' ? filter(token, opts) : filter; + return baseFilter && isThemeVariant; + }, + }); + }); + } + } + + const paragonFilters = [ + /** + * Registers a filter `isSource` that filters output to only include source tokens. + */ + { + name: 'isSource', + filter: token => token.isSource, + opts: { hasThemeVariants: true }, + }, + /** + * Registers filter(s) `isThemeVariant.{variant}` that only include the requested theme variant tokens. + */ + ...themes.map((themeVariant) => ({ + name: `isThemeVariant.${themeVariant}`, + filter: token => token.filePath.includes(themeVariant), + })), + ]; + paragonFilters.forEach(({ name, filter, opts }) => registerStyleDictionaryFilter(name, filter, opts)); + + themes.forEach((themeVariant) => { + StyleDictionary.registerFilter({ + name: `isThemeVariant.${themeVariant}`, + filter: token => token.filePath.includes(themeVariant), + }); }); /** @@ -257,6 +346,17 @@ const initializeStyleDictionary = async () => { parser: ({ contents }) => toml.load(contents), }); + /** + * Registers a custom fileHeader. + */ + StyleDictionary.registerFileHeader({ + name: 'customFileHeader', + fileHeader: (defaultMessage) => [ + `${defaultMessage} while transforming design tokens.`, + 'See /tokens/README.md for more details.', + ], + }); + return StyleDictionary; }; @@ -264,4 +364,5 @@ module.exports = { initializeStyleDictionary, createCustomCSSVariables, colorTransform, + getStyleDictionaryUtils, }; diff --git a/tokens/utils.js b/tokens/utils.js index d3c230b87d..5fb09c77ea 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -195,11 +195,11 @@ async function transformInPath(location, variablesMap, transformType = 'definiti * @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.isTheme - A flag indicating whether the directory is for theme files. + * @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'), isTheme, themeVariant }) { - const directoryPath = isTheme ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`; +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) { @@ -211,7 +211,7 @@ 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(); } + if (isThemeVariant) { outputCssFiles.reverse(); } const exportStatements = outputCssFiles.map((file) => `@import "${file}";`); @@ -237,22 +237,10 @@ function composeBreakpointName(breakpointName, format) { return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`; } -/** - * Generates a custom file header using Style Dictionary hooks. - * - * @param {Object} StyleDictionary - The Style Dictionary instance being used. - * @param {Object} file - The file object containing metadata about the file being generated. - * @returns {string[]} - An array of strings representing the lines of the file header. - */ -function createCustomHeader(StyleDictionary, file) { - return StyleDictionary.hooks.fileHeaders.customFileHeader({ file }); -} - module.exports = { createIndexCssFile, getFilesWithExtension, getSCSStoCSSMap, transformInPath, composeBreakpointName, - createCustomHeader, }; 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/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..decd92b57e 100644 --- a/www/src/components/_doc-elements.scss +++ b/www/src/components/_doc-elements.scss @@ -327,6 +327,18 @@ .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 + } } 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 && (