From f4982157f12803dea03bee0880f68a5c4bb75387 Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Fri, 2 Sep 2022 11:20:51 +0300 Subject: [PATCH 01/19] [BD-46] feat: Style dictionary setting (#1571) feat: implementing initial Style dictionary configuration Co-authored-by: Adam Stankiewicz --- .eslintignore | 2 + .gitignore | 1 + build-tokens.js | 36 + .../0018-design-tokens-style-dictionary.rst | 19 + package-lock.json | 760 ++++++++++++++++++ package.json | 4 +- tokens/borders-fills/border.tokens.json | 11 + tokens/caret/caret.tokens.json | 9 + tokens/colors/body/body.tokens.json | 6 + tokens/colors/colors.tokens.json | 125 +++ tokens/colors/text/text.tokens.json | 5 + tokens/components/alert/alert.tokens.json | 37 + tokens/components/avatar/avatar.tokens.json | 17 + .../avatarButton/avatarButton.tokens.json | 11 + tokens/components/button/button.tokens.json | 80 ++ tokens/components/spinner/spiner.tokens.json | 12 + tokens/core/core.tokens.json | 41 + .../box-shadow/box-shadow.tokens.json | 139 ++++ .../breakpoints/breakpoints.tokens.json | 10 + tokens/layout/grid/grid.tokens.json | 11 + tokens/layout/sizes/sizes.tokens.json | 10 + tokens/layout/spacing/spacing.tokens.json | 18 + tokens/layout/table/table.tokens.json | 19 + tokens/layout/z-index/zindex.tokens.json | 13 + tokens/links/links.tokens.json | 56 ++ tokens/transition/transition.tokens.json | 7 + tokens/typography/display/display.tokens.json | 21 + tokens/typography/font/font.tokens.json | 51 ++ .../typography/headings/headings.tokens.json | 15 + .../line-height/line-height.tokens.json | 7 + .../paragraph/paragraph.tokens.json | 7 + 31 files changed, 1559 insertions(+), 1 deletion(-) create mode 100644 build-tokens.js create mode 100644 docs/decisions/0018-design-tokens-style-dictionary.rst create mode 100644 tokens/borders-fills/border.tokens.json create mode 100644 tokens/caret/caret.tokens.json create mode 100644 tokens/colors/body/body.tokens.json create mode 100644 tokens/colors/colors.tokens.json create mode 100644 tokens/colors/text/text.tokens.json create mode 100644 tokens/components/alert/alert.tokens.json create mode 100644 tokens/components/avatar/avatar.tokens.json create mode 100644 tokens/components/avatarButton/avatarButton.tokens.json create mode 100644 tokens/components/button/button.tokens.json create mode 100644 tokens/components/spinner/spiner.tokens.json create mode 100644 tokens/core/core.tokens.json create mode 100644 tokens/elevation-shadows/box-shadow/box-shadow.tokens.json create mode 100644 tokens/layout/breakpoints/breakpoints.tokens.json create mode 100644 tokens/layout/grid/grid.tokens.json create mode 100644 tokens/layout/sizes/sizes.tokens.json create mode 100644 tokens/layout/spacing/spacing.tokens.json create mode 100644 tokens/layout/table/table.tokens.json create mode 100644 tokens/layout/z-index/zindex.tokens.json create mode 100644 tokens/links/links.tokens.json create mode 100644 tokens/transition/transition.tokens.json create mode 100644 tokens/typography/display/display.tokens.json create mode 100644 tokens/typography/font/font.tokens.json create mode 100644 tokens/typography/headings/headings.tokens.json create mode 100644 tokens/typography/line-height/line-height.tokens.json create mode 100644 tokens/typography/paragraph/paragraph.tokens.json diff --git a/.eslintignore b/.eslintignore index a693875c8a..0783b219a7 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,3 +7,5 @@ dependent-usage-analyzer/ build-scss.js component-generator/ example/ +style-dictionary-build/ +build-tokens.js diff --git a/.gitignore b/.gitignore index 986dbca569..4581cfa3b1 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ jest* dist src/i18n/transifex_input.json src/i18n/temp +style-dictionary-build # gatsby files www/.cache/ diff --git a/build-tokens.js b/build-tokens.js new file mode 100644 index 0000000000..fc256e0d17 --- /dev/null +++ b/build-tokens.js @@ -0,0 +1,36 @@ +const StyleDictionary = require('style-dictionary'); + +const PGN_PREFIX = 'pgn'; +const STYLE_DICTIONARY_BUILD_PATH = 'style-dictionary-build'; + +const paragonStyleDictionary = StyleDictionary.extend({ + source: ['tokens/**/*.json'], + platforms: { + scss: { + transformGroup: 'scss', + prefix: PGN_PREFIX, + buildPath: `${STYLE_DICTIONARY_BUILD_PATH}/scss/`, + files: [{ + destination: '_variables.scss', + format: 'scss/variables', + options: { + outputReferences: true, + }, + }], + }, + css: { + transformGroup: 'css', + prefix: PGN_PREFIX, + buildPath: `${STYLE_DICTIONARY_BUILD_PATH}/css/`, + files: [{ + format: 'css/variables', + destination: 'variables.css', + options: { + outputReferences: true, + }, + }], + }, + }, +}); + +paragonStyleDictionary.buildAllPlatforms(); diff --git a/docs/decisions/0018-design-tokens-style-dictionary.rst b/docs/decisions/0018-design-tokens-style-dictionary.rst new file mode 100644 index 0000000000..312302ee87 --- /dev/null +++ b/docs/decisions/0018-design-tokens-style-dictionary.rst @@ -0,0 +1,19 @@ +18. Design tokens with Style Dictionary +--------------------------------------- + +Status +------ + +Proposed + +Context +------- + +Decision +-------- + +Consequences +------------ + +Resources +--------- diff --git a/package-lock.json b/package-lock.json index 7b54731d0a..26995ac7c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -84,6 +84,7 @@ "regenerator-runtime": "^0.13.9", "sass": "^1.32.13", "semantic-release": "^19.0.3", + "style-dictionary": "^3.7.1", "stylelint": "^14.7.1", "stylelint-config-standard-scss": "^4.0.0", "ts-jest": "^28.0.7", @@ -5330,6 +5331,36 @@ } ] }, + "node_modules/capital-case": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", + "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, + "node_modules/capital-case/node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/capital-case/node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/cardinal": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz", @@ -5365,6 +5396,65 @@ "node": ">=4" } }, + "node_modules/change-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", + "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "dev": true, + "dependencies": { + "camel-case": "^4.1.2", + "capital-case": "^1.0.4", + "constant-case": "^3.0.4", + "dot-case": "^3.0.4", + "header-case": "^2.0.4", + "no-case": "^3.0.4", + "param-case": "^3.0.4", + "pascal-case": "^3.1.2", + "path-case": "^3.0.4", + "sentence-case": "^3.0.4", + "snake-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/change-case/node_modules/camel-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", + "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "dev": true, + "dependencies": { + "pascal-case": "^3.1.2", + "tslib": "^2.0.3" + } + }, + "node_modules/change-case/node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/change-case/node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, + "node_modules/change-case/node_modules/param-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", + "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -5599,6 +5689,45 @@ "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==", "dev": true }, + "node_modules/constant-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", + "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case": "^2.0.2" + } + }, + "node_modules/constant-case/node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/constant-case/node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, + "node_modules/constant-case/node_modules/upper-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", + "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/conventional-changelog-angular": { "version": "5.0.13", "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz", @@ -6199,6 +6328,35 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/dot-case/node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/dot-case/node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/dot-prop": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", @@ -8080,6 +8238,16 @@ "he": "bin/he" } }, + "node_modules/header-case": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", + "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "dev": true, + "dependencies": { + "capital-case": "^1.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -11084,6 +11252,12 @@ "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==", + "dev": true + }, "node_modules/jsonfile": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", @@ -14887,6 +15061,45 @@ "url": "https://github.com/inikulin/parse5?sponsor=1" } }, + "node_modules/pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/pascal-case/node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/pascal-case/node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, + "node_modules/path-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", + "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -16445,6 +16658,36 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/sentence-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", + "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "dev": true, + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, + "node_modules/sentence-case/node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/sentence-case/node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/serialize-javascript": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz", @@ -16592,6 +16835,16 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -16906,6 +17159,128 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-dictionary": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.1.tgz", + "integrity": "sha512-yYU9Z/J8Znj9T9oJVjo8VOYamrOxv0UbBKPjhSt+PharxrhyQCM4RWb71fgEfv2pK9KO8G83/0ChDNQZ1mn0wQ==", + "dev": true, + "dependencies": { + "chalk": "^4.0.0", + "change-case": "^4.1.2", + "commander": "^8.3.0", + "fs-extra": "^10.0.0", + "glob": "^7.2.0", + "json5": "^2.2.0", + "jsonc-parser": "^3.0.0", + "lodash": "^4.17.15", + "tinycolor2": "^1.4.1" + }, + "bin": { + "style-dictionary": "bin/style-dictionary" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/style-dictionary/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==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/style-dictionary/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/style-dictionary/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==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/style-dictionary/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==", + "dev": true + }, + "node_modules/style-dictionary/node_modules/commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "dev": true, + "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==", + "dev": true, + "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/style-dictionary/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/style-dictionary/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/style-search": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", @@ -17497,6 +17872,15 @@ "node": ">= 6" } }, + "node_modules/tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -17896,6 +18280,15 @@ "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==", "dev": true }, + "node_modules/upper-case-first": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", + "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "dev": true, + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -22311,6 +22704,38 @@ "integrity": "sha512-JVQnfoO7FK7WvU4ZkBRbPjaot4+YqxogSDosHv0Hv5mWpUESmN+UubMU6L/hGz8QlQ2aY5U0vR6MOs6j/CXpNA==", "dev": true }, + "capital-case": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", + "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + }, + "dependencies": { + "lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, + "no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "requires": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + } + } + }, "cardinal": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz", @@ -22340,6 +22765,67 @@ "supports-color": "^5.3.0" } }, + "change-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", + "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "dev": true, + "requires": { + "camel-case": "^4.1.2", + "capital-case": "^1.0.4", + "constant-case": "^3.0.4", + "dot-case": "^3.0.4", + "header-case": "^2.0.4", + "no-case": "^3.0.4", + "param-case": "^3.0.4", + "pascal-case": "^3.1.2", + "path-case": "^3.0.4", + "sentence-case": "^3.0.4", + "snake-case": "^3.0.4", + "tslib": "^2.0.3" + }, + "dependencies": { + "camel-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", + "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "dev": true, + "requires": { + "pascal-case": "^3.1.2", + "tslib": "^2.0.3" + } + }, + "lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, + "no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "requires": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, + "param-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", + "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + } + } + }, "char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -22527,6 +23013,47 @@ "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==", "dev": true }, + "constant-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", + "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case": "^2.0.2" + }, + "dependencies": { + "lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, + "no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "requires": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, + "upper-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", + "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + } + } + }, "conventional-changelog-angular": { "version": "5.0.13", "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz", @@ -22982,6 +23509,37 @@ "domhandler": "^5.0.1" } }, + "dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + }, + "dependencies": { + "lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, + "no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "requires": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + } + } + }, "dot-prop": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", @@ -24392,6 +24950,16 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "header-case": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", + "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "dev": true, + "requires": { + "capital-case": "^1.0.4", + "tslib": "^2.0.3" + } + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -26615,6 +27183,12 @@ "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", "dev": true }, + "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==", + "dev": true + }, "jsonfile": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", @@ -29271,6 +29845,47 @@ "parse5": "^7.0.0" } }, + "pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + }, + "dependencies": { + "lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, + "no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "requires": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + } + } + }, + "path-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", + "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -30394,6 +31009,38 @@ "integrity": "sha512-6IiqeZNgq01qGf0TId0t3NvKzSvUsjcpdEO3AQNeIjR6A2+ckTnQlDpl4qu1bjRv0RzN3FP9hzFmws3lKqRWkA==", "dev": true }, + "sentence-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", + "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + }, + "dependencies": { + "lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, + "no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "requires": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + } + } + }, "serialize-javascript": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz", @@ -30512,6 +31159,16 @@ } } }, + "snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -30769,6 +31426,94 @@ "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true }, + "style-dictionary": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.1.tgz", + "integrity": "sha512-yYU9Z/J8Znj9T9oJVjo8VOYamrOxv0UbBKPjhSt+PharxrhyQCM4RWb71fgEfv2pK9KO8G83/0ChDNQZ1mn0wQ==", + "dev": true, + "requires": { + "chalk": "^4.0.0", + "change-case": "^4.1.2", + "commander": "^8.3.0", + "fs-extra": "^10.0.0", + "glob": "^7.2.0", + "json5": "^2.2.0", + "jsonc-parser": "^3.0.0", + "lodash": "^4.17.15", + "tinycolor2": "^1.4.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "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==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "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==", + "dev": true + }, + "commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "dev": true + }, + "glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "requires": { + "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" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "style-search": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", @@ -31227,6 +31972,12 @@ } } }, + "tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", + "dev": true + }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -31505,6 +32256,15 @@ "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==", "dev": true }, + "upper-case-first": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", + "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, "uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index 12a6542489..75f00b4f5b 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,8 @@ "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --format transifex", "type-check": "tsc --noEmit", "type-check:watch": "npm run type-check -- --watch", - "build-types": "tsc --emitDeclarationOnly" + "build-types": "tsc --emitDeclarationOnly", + "build_tokens": "node build-tokens.js" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.1.1", @@ -129,6 +130,7 @@ "semantic-release": "^19.0.3", "stylelint": "^14.7.1", "stylelint-config-standard-scss": "^4.0.0", + "style-dictionary": "^3.7.1", "ts-jest": "^28.0.7", "typescript": "^4.7.4" }, diff --git a/tokens/borders-fills/border.tokens.json b/tokens/borders-fills/border.tokens.json new file mode 100644 index 0000000000..153e7c3959 --- /dev/null +++ b/tokens/borders-fills/border.tokens.json @@ -0,0 +1,11 @@ +{ + "border": { + "width": { "value": "1px", "themeable": true, "source": "$border-width" }, + "color": { "value": "{color.gray.200.value}", "themeable": true, "source": "$border-color" }, + "radius": { + "base": { "value": ".375rem", "themeable": true, "source": "$border-radius" }, + "lg": { "value": ".425rem", "themeable": true, "source": "$border-radius-lg" }, + "sm": { "value": ".25rem", "themeable": true, "source": "$border-radius-sm" } + } + } +} diff --git a/tokens/caret/caret.tokens.json b/tokens/caret/caret.tokens.json new file mode 100644 index 0000000000..d28f860c38 --- /dev/null +++ b/tokens/caret/caret.tokens.json @@ -0,0 +1,9 @@ +{ + "caret": { + "width": { "value": ".3em", "themeable": true, "source": "$caret-width" }, + "vertical": { + "align": { "value": ".255em", "themeable": true, "source": "$caret-vertical-align" } + }, + "spacing": { "value": ".255em", "themeable": true, "source": "$caret-spacing" } + } +} diff --git a/tokens/colors/body/body.tokens.json b/tokens/colors/body/body.tokens.json new file mode 100644 index 0000000000..d3a06e3c49 --- /dev/null +++ b/tokens/colors/body/body.tokens.json @@ -0,0 +1,6 @@ +{ + "body": { + "bg": { "value": "{color.white.value}", "themeable": true, "source": "$body-bg" }, + "color": { "value": "{color.gray.700.value}", "themeable": true, "source": "$body-color" } + } +} diff --git a/tokens/colors/colors.tokens.json b/tokens/colors/colors.tokens.json new file mode 100644 index 0000000000..cbaa63f915 --- /dev/null +++ b/tokens/colors/colors.tokens.json @@ -0,0 +1,125 @@ +{ + "color": { + "white": { "value": "#FFFFFF", "themeable": true, "source": "$white" }, + "black": { "value": "#000000", "themeable": true, "source": "$black" }, + "blue": { "value": "#23419F", "themeable": true, "source": "$blue" }, + "red": { "value": "#C32D3A", "themeable": true, "source": "$red" }, + "green": { "value": "#178253", "themeable": true, "source": "$green" }, + "yellow": { "value": "#FFD900", "themeable": true, "source": "$yellow" }, + "teal": { "value": "#006DAA", "themeable": true, "source": "$teal" }, + "accent": { + "a": { "value": "#00BBF9", "themeable": true, "source": "$accent-a" }, + "b": { "value": "#FFEE88", "themeable": true, "source": "$accent-b" } + }, + "gray": { + "100": { "value": "#EBEBEB", "themeable": true, "source": "$gray-100" }, + "200": { "value": "#CCCCCC", "themeable": true, "source": "$gray-200" }, + "300": { "value": "#ADADAD", "themeable": true, "source": "$gray-300" }, + "400": { "value": "#8F8F8F", "themeable": true, "source": "$gray-400" }, + "500": { "value": "#707070", "themeable": true, "source": "$gray-500" }, + "600": { "value": "#5C5C5C", "themeable": true, "source": "$gray-600" }, + "700": { "value": "#454545", "themeable": true, "source": "$gray-700" }, + "800": { "value": "#333333", "themeable": true, "source": "$gray-800" }, + "900": { "value": "#212529", "themeable": true, "source": "$gray-900" } + }, + "primary": { + "100": { "value": "#F0F3F5", "themeable": true, "source": "$primary-100" }, + "200": { "value": "#C2CBD5", "themeable": true, "source": "$primary-200" }, + "300": { "value": "#8598AA", "themeable": true, "source": "$primary-300" }, + "400": { "value": "#476480", "themeable": true, "source": "$primary-400" }, + "500": { "value": "#0A3055", "themeable": true, "source": "$primary-500" }, + "600": { "value": "#092B4D", "themeable": true, "source": "$primary-600" }, + "700": { "value": "#082644", "themeable": true, "source": "$primary-700" }, + "800": { "value": "#082440", "themeable": true, "source": "$primary-800" }, + "900": { "value": "#07223C", "themeable": true, "source": "$primary-900" } + }, + "secondary": { + "100": { "value": "#F4F4F4", "themeable": true, "source": "$secondary-100" }, + "200": { "value": "#D1D1D1", "themeable": true, "source": "$secondary-200" }, + "300": { "value": "#A2A2A2", "themeable": true, "source": "$secondary-300" }, + "400": { "value": "#747474", "themeable": true, "source": "$secondary-400"}, + "500": { "value": "{color.gray.700.value}", "themeable": true, "source": "$secondary-500"}, + "600": { "value": "#3E3E3E", "themeable": true, "source": "$secondary-600"}, + "700": { "value": "#373737", "themeable": true, "source": "$secondary-700"}, + "800": { "value": "#343434", "themeable": true, "source": "$secondary-800"}, + "900": { "value": "#303030", "themeable": true, "source": "$secondary-900"} + }, + "brand": { + "100": { "value": "#F9F0F5", "themeable": true, "source": "$brand-100" }, + "200": { "value": "#E7BFD4", "themeable": true, "source": "$brand-200" }, + "300": { "value": "#CE80AA", "themeable": true, "source": "$brand-300" }, + "400": { "value": "#B6407F", "themeable": true, "source": "$brand-400" }, + "500": { "value": "#9D0054", "themeable": true, "source": "$brand-500" }, + "600": { "value": "#8D004C", "themeable": true, "source": "$brand-600" }, + "700": { "value": "#7E0043", "themeable": true, "source": "$brand-700" }, + "800": { "value": "#76003F", "themeable": true, "source": "$brand-800" }, + "900": { "value": "#6E003B", "themeable": true, "source": "$brand-900" } + }, + "success": { + "100": { "value": "#F1F8F5", "themeable": true, "source": "$success-100" }, + "200": { "value": "#C5E0D4", "themeable": true, "source": "$success-200" }, + "300": { "value": "#8BC1A9", "themeable": true, "source": "$success-300" }, + "400": { "value": "#51A17E", "themeable": true, "source": "$success-400" }, + "500": { "value": "{color.green.value}", "themeable": true, "source": "$success-500" }, + "600": { "value": "#15754B", "themeable": true, "source": "$success-600" }, + "700": { "value": "#126842", "themeable": true, "source": "$success-700" }, + "800": { "value": "#11623E", "themeable": true, "source": "$success-800" }, + "900": { "value": "#105b3A", "themeable": true, "source": "$success-900" } + }, + "info": { + "100": { "value": "#F0F6FA", "themeable": true, "source": "$info-100"}, + "200": { "value": "#BFDBEA", "themeable": true, "source": "$info-200" }, + "300": { "value": "#80B6D5", "themeable": true, "source": "$info-300" }, + "400": { "value": "#4092BF", "themeable": true, "source": "$info-400" }, + "500": { "value": "{color.teal.value}", "themeable": true, "source": "$info-500" }, + "600": { "value": "#006299", "themeable": true, "source": "$info-600" }, + "700": { "value": "#005788", "themeable": true, "source": "$info-700" }, + "800": { "value": "#005280", "themeable": true, "source": "$info-800" }, + "900": { "value": "#004C77", "themeable": true, "source": "$info-900" } + }, + "warning": { + "100": { "value": "#FFFDF0", "themeable": true, "source": "$warning-100" }, + "200": { "value": "#FFF6BF", "themeable": true, "source": "$warning-200" }, + "300": { "value": "#FFEC80", "themeable": true, "source": "$warning-300" }, + "400": { "value": "#FFE340", "themeable": true, "source": "$warning-400" }, + "500": { "value": "{color.yellow.value}", "themeable": true, "source": "$warning-500" }, + "600": { "value": "#E6C300", "themeable": true, "source": "$warning-600" }, + "700": { "value": "#CCAE00", "themeable": true, "source": "$warning-700" }, + "800": { "value": "#BFA300", "themeable": true, "source": "$warning-800" }, + "900": { "value": "#B39800", "themeable": true, "source": "$warning-900" } + }, + "danger": { + "100": { "value": "#FBF2F3", "themeable": true, "source": "$danger-100" }, + "200": { "value": "#F0CBCE", "themeable": true, "source": "$danger-200" }, + "300": { "value": "#E1969D", "themeable": true, "source": "$danger-300" }, + "400": { "value": "#D2626B", "themeable": true, "source": "$danger-400" }, + "500": { "value": "{color.red.value}", "themeable": true, "source": "$danger-500" }, + "600": { "value": "#B02934", "themeable": true, "source": "$danger-600" }, + "700": { "value": "#9C242E", "themeable": true, "source": "$danger-700" }, + "800": { "value": "#92222C", "themeable": true, "source": "$danger-800" }, + "900": { "value": "#892029", "themeable": true, "source": "$danger-900" } + }, + "light": { + "100": { "value": "#FDFDFD", "themeable": true, "source": "$light-100" }, + "200": { "value": "#F8F7F6", "themeable": true, "source": "$light-200" }, + "300": { "value": "#F0EEED", "themeable": true, "source": "$light-300" }, + "400": { "value": "#E9E6E4", "themeable": true, "source": "$light-400" }, + "500": { "value": "#E1DDDB", "themeable": true, "source": "$light-500" }, + "600": { "value": "#CBC7C5", "themeable": true, "source": "$light-600" }, + "700": { "value": "#B4B1AF", "themeable": true, "source": "$light-700" }, + "800": { "value": "#A9A6A4", "themeable": true, "source": "$light-800" }, + "900": { "value": "#9E9B99", "themeable": true, "source": "$light-900" } + }, + "dark": { + "100": { "value": "#F2F3F3", "themeable": true, "source": "$dark-100" }, + "200": { "value": "#C9CFCB", "themeable": true, "source": "$dark-200" }, + "300": { "value": "#939f97", "themeable": true, "source": "$dark-300" }, + "400": { "value": "#5D6F63", "themeable": true, "source": "$dark-400" }, + "500": { "value": "#273F2F", "themeable": true, "source": "$dark-500" }, + "600": { "value": "#23392A", "themeable": true, "source": "$dark-600" }, + "700": { "value": "#1F3226", "themeable": true, "source": "$dark-700" }, + "800": { "value": "#1D2F23", "themeable": true, "source": "$dark-800" }, + "900": { "value": "#1B2C21", "themeable": true, "source": "$dark-900" } + } + } +} diff --git a/tokens/colors/text/text.tokens.json b/tokens/colors/text/text.tokens.json new file mode 100644 index 0000000000..11a4c6de83 --- /dev/null +++ b/tokens/colors/text/text.tokens.json @@ -0,0 +1,5 @@ +{ + "text": { + "muted": { "value": "{color.gray.500.value}", "themeable": true, "source": "$text-muted" } + } +} diff --git a/tokens/components/alert/alert.tokens.json b/tokens/components/alert/alert.tokens.json new file mode 100644 index 0000000000..d302931f46 --- /dev/null +++ b/tokens/components/alert/alert.tokens.json @@ -0,0 +1,37 @@ +{ + "alert": { + "padding": { + "y": { "value": "1.5rem", "themeable": true, "source": "$alert-padding-y" }, + "x": { "value": "1.5rem", "themeable": true, "source": "$alert-padding-x" } + }, + "margin": { + "bottom": { "value": "1rem", "themeable": true, "source": "$alert-margin-bottom" } + }, + "border": { + "radius": { "value": "{border.radius.base}", "themeable": true, "source": "$alert-border-radius" }, + "width": { "value": "0", "themeable": true, "source": "$alert-border-width" } + }, + "font": { + "weight": { + "link": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$alert-link-font-weight" } + }, + "size": { "value": ".875rem", "themeable": true, "source": "$alert-font-size" } + }, + "color": { + "title": { "value": "{color.black.value}", "themeable": true, "source": "$alert-title-color" }, + "content": { "value": "{color.gray.700.value}", "themeable": true, "source": "$alert-content-color" } + }, + "box-shadow": { + "value": "0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15)", "themeable": true, "source": "$alert-box-shadow" + }, + "level": { + "bg": { "value": "-10", "themeable": true, "source": "$alert-bg-level" }, + "border": { "value": "-9", "themeable": true, "source": "$alert-border-level" }, + "color": { "value": "6", "themeable": true, "source": "$alert-color-level" } + }, + "icon": { + "space": { "value": ".8rem", "themeable": true, "source": "$alert-icon-space" } + }, + "line-height": { "value": "1.5rem", "themeable": true, "source": "$alert-line-height" } + } +} diff --git a/tokens/components/avatar/avatar.tokens.json b/tokens/components/avatar/avatar.tokens.json new file mode 100644 index 0000000000..5678109373 --- /dev/null +++ b/tokens/components/avatar/avatar.tokens.json @@ -0,0 +1,17 @@ +{ + "avatar": { + "border": { + "base": { "value": "solid 1px {color.light.300.value}", "themeable": true, "source": "$avatar-border" }, + "radius": { "value": "100%", "themeable": true, "source": "$avatar-border-radius" } + }, + "size": { + "base": { "value": "3rem", "themeable": true, "source": "$avatar-size" }, + "xs": { "value": "1.5rem", "themeable": true, "source": "$avatar-size-xs" }, + "sm": { "value": "2.25rem", "themeable": true, "source": "$avatar-size-sm" }, + "lg": { "value": "4rem", "themeable": true, "source": "$avatar-size-lg" }, + "xl": { "value": "6rem", "themeable": true, "source": "$avatar-size-xl" }, + "xxl": { "value": "11.5rem", "themeable": true, "source": "$avatar-size-xxl" }, + "huge": { "value": "18.75rem", "themeable": true, "source": "$avatar-size-huge" } + } + } +} diff --git a/tokens/components/avatarButton/avatarButton.tokens.json b/tokens/components/avatarButton/avatarButton.tokens.json new file mode 100644 index 0000000000..eda276db62 --- /dev/null +++ b/tokens/components/avatarButton/avatarButton.tokens.json @@ -0,0 +1,11 @@ +{ + "avatar-button": { + "padding": { + "left": { + "base": { "value": ".25em", "themeable": true, "source": "$avatar-button-padding-left" }, + "sm": { "value": ".25em", "themeable": true, "source": "$avatar-button-padding-left-sm" }, + "lg": { "value": ".25em", "themeable": true, "source": "$avatar-button-padding-left-lg" } + } + } + } +} diff --git a/tokens/components/button/button.tokens.json b/tokens/components/button/button.tokens.json new file mode 100644 index 0000000000..e28c0c9162 --- /dev/null +++ b/tokens/components/button/button.tokens.json @@ -0,0 +1,80 @@ +{ + "btn": { + "padding": { + "y": { + "base": { "value": "{core.input.btn.padding.y.value}", "themeable": true, "source": "$btn-padding-y" }, + "lg": { "value": "{core.input.btn.padding.lg.y.value}", "themeable": true, "source": "$btn-padding-y-lg" } + }, + "x": { + "base": { "value": "{core.input.btn.padding.x.value}", "themeable": true, "source": "$btn-padding-x" }, + "lg": { "value": "{core.input.btn.padding.lg.x.value}", "themeable": true, "source": "$btn-padding-x-lg" } + }, + "sm": { + "y": { "value": "{core.input.btn.padding.sm.y.value}", "themeable": true, "source": "$input-btn-padding-y-sm" }, + "x": { "value": "{core.input.btn.padding.sm.x.value}", "themeable": true, "source": "$input-btn-padding-x-sm" } + } + }, + "font": { + "family": { "value": "{core.input.btn.font.family.value}", "themeable": true, "source": "$btn-font-family" }, + "size": { + "base": { "value": "{core.input.btn.font.size.base.value}", "themeable": true, "source": "$btn-font-size" }, + "sm": { "value": "{core.input.btn.font.size.sm.value}", "themeable": true, "source": "$btn-font-size-sm" }, + "lg": { "value": "{core.input.btn.font.size.lg.value}", "themeable": true, "source": "$btn-font-size-lg" } + }, + "width": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$btn-font-weight" } + }, + "line": { + "height": { + "base": { "value": "{core.input.btn.line.height.base.value}", "themeable": true, "source": "$btn-line-height" }, + "sm": { "value": "{core.input.btn.line.height.sm.value}", "themeable": true, "source": "$btn-line-height-sm" }, + "lg": { "value": "{core.input.btn.line.height.lg.value}", "themeable": true, "source": "$btn-line-height-lg" } + } + }, + "border": { + "width": { "value": "{core.input.btn.border.width.value}", "themeable": true, "source": "$btn-border-width" }, + "radius": { + "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$btn-border-radius" }, + "lg": { "value": "{border.radius.lg.value}", "themeable": true, "source": "$btn-border-radius-lg" }, + "sm": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$btn-border-radius-sm" } + } + }, + "box-shadow": { + "base": { + "value": "inset 0 1px 0 rgba({color.white}, .15), 0 1px 1px rgba({color.black}, .075)", "themeable": true, "source": "$btn-box-shadow" + }, + "active": { "value": "none", "themeable": true, "source": "$btn-active-box-shadow" } + }, + "focus": { + "width": { "value": "2px", "themeable": true, "source": "$btn-focus-width" }, + "gap": { "value": "1px", "themeable": true, "source": "$btn-focus-gap" } + }, + "disabled": { + "opacity": { "value": ".65", "themeable": true, "source": "$btn-disabled-opacity" }, + "link": { + "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$btn-link-disabled-color" } + } + }, + "tertiary": { + "color": { "value": "{color.gray.700.value}", "themeable": true, "source": "$btn-tertiary-color" }, + "bg": { + "base": { "value": "transparent", "themeable": true, "source": "$btn-tertiary-bg" }, + "hover": { "value": "{color.light.500.value}", "themeable": true, "source": "$btn-tertiary-hover-bg" }, + "active": { "value": "{color.light.500.value}", "themeable": true, "source": "$btn-tertiary-active-bg" } + }, + "inverse": { + "color": { "value": "{color.white.value}", "themeable": true, "source": "$btn-inverse-tertiary-color" }, + "bg": { + "base": { "value": "transparent", "themeable": true, "source": "$btn-inverse-tertiary-bg" }, + "hover": { "value": "rgba(255, 255, 255, .1)", "themeable": true, "source": "$btn-inverse-tertiary-hover-bg" }, + "active": { "value": "{btn.tertiary.inverse.bg.hover.value}", "themeable": true, "source": "$btn-inverse-tertiary-active-bg" } + } + } + }, + "block": { + "spacing": { + "y": { "value": ".5rem", "themeable": true, "source": "$btn-block-spacing-y" } + } + }, + "transition": { "value": "null", "themeable": true, "source": "$btn-transition" } + } +} diff --git a/tokens/components/spinner/spiner.tokens.json b/tokens/components/spinner/spiner.tokens.json new file mode 100644 index 0000000000..93d57b85cb --- /dev/null +++ b/tokens/components/spinner/spiner.tokens.json @@ -0,0 +1,12 @@ +{ + "spinner": { + "width": { "value": "2rem", "themeable": true, "source": "$spinner-width" }, + "height": { "value": "{spinner.width.value}", "themeable": true, "source": "$spinner-height" }, + "border-width": { "value": ".25em", "themeable": true, "source": "$spinner-border-width" }, + "sm": { + "width": { "value": "1rem", "themeable": true, "source": "$spinner-width-sm" }, + "height": { "value": "{spinner.sm.width}", "themeable": true, "source": "$spinner-height-sm" }, + "border-width": { "value": ".2em", "themeable": true, "source": "$spinner-border-width-sm" } + } + } +} diff --git a/tokens/core/core.tokens.json b/tokens/core/core.tokens.json new file mode 100644 index 0000000000..e4ac6cc536 --- /dev/null +++ b/tokens/core/core.tokens.json @@ -0,0 +1,41 @@ +{ + "core": { + "input": { + "btn": { + "padding": { + "y": { "value": ".5625rem", "themeable": true, "source": "$input-btn-padding-y" }, + "x": { "value": "1rem", "themeable": true, "source": "$input-btn-padding-x" }, + "sm": { + "y": { "value": ".4375rem", "themeable": true, "source": "$input-btn-padding-y-sm" }, + "x": { "value": ".75rem", "themeable": true, "source": "$input-btn-padding-x-sm" } + }, + "lg": { + "y": { "value": ".6875rem", "themeable": true, "source": "$input-btn-padding-y-lg" }, + "x": { "value": "1.25rem", "themeable": true, "source": "$input-btn-padding-x-lg" } + } + }, + "font": { + "family": { "value": "null", "themeable": true, "source": "$input-btn-font-family" }, + "size": { + "base": { "value": "1.125rem", "themeable": true, "source": "$input-btn-font-size" }, + "sm": { "value": ".875rem", "themeable": true, "source": "$input-btn-font-size-sm" }, + "lg": { "value": "1.325rem", "themeable": true, "source": "$input-btn-font-size-lg" } + } + }, + "line": { + "height": { + "base": { "value": "1.3333", "themeable": true, "source": "$input-btn-line-height" }, + "sm": { "value": "1.4286", "themeable": true, "source": "$input-btn-line-height-sm" }, + "lg": { "value": "{line-height.lg.value}", "themeable": true, "source": "$input-btn-line-height-lg" } + } + }, + "focus": { + "width": { "value": "1px", "themeable": true, "source": "$input-btn-focus-width" } + }, + "border": { + "width": { "value": "{border.width.value}", "themeable": true, "source": "$input-btn-border-width" } + } + } + } + } +} diff --git a/tokens/elevation-shadows/box-shadow/box-shadow.tokens.json b/tokens/elevation-shadows/box-shadow/box-shadow.tokens.json new file mode 100644 index 0000000000..b5caf65c5f --- /dev/null +++ b/tokens/elevation-shadows/box-shadow/box-shadow.tokens.json @@ -0,0 +1,139 @@ +{ + "box-shadow": { + "down": { + "1": { + "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-down-1" + }, + "2": { + "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-down-2" + }, + "3": { + "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-down-3" + }, + "4": { + "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-down-4" + }, + "5": { + "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-down-5" + } + }, + "left": { + "1": { + "value": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-left-1" + }, + "2": { + "value": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-left-2" + }, + "3": { + "value": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-left-3" + }, + "4": { + "value": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-left-4" + }, + "5": { + "value": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-left-5" + } + }, + "up": { + "1": { + "value": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-up-1" + }, + "2": { + "value": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-up-2" + }, + "3": { + "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-up-3" + }, + "4": { + "value": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-up-4" + }, + "5": { + "value": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-up-5" + } + }, + "right": { + "1": { + "value": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-right-1" + }, + "2": { + "value": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-right-2" + }, + "3": { + "value": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-right-3" + }, + "4": { + "value": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-right-4" + }, + "5": { + "value": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-right-5" + } + }, + "centered": { + "1": { + "value": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-centered-1" + }, + "2": { + "value": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-centered-2" + }, + "3": { + "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-centered-3" + }, + "4": { + "value": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-centered-4" + }, + "5": { + "value": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$box-shadow-centered-5" + } + } + } +} diff --git a/tokens/layout/breakpoints/breakpoints.tokens.json b/tokens/layout/breakpoints/breakpoints.tokens.json new file mode 100644 index 0000000000..a5d02b63f2 --- /dev/null +++ b/tokens/layout/breakpoints/breakpoints.tokens.json @@ -0,0 +1,10 @@ +{ + "breakpoint": { + "xs": { "value": "0", "themeable": true }, + "sm": { "value": "576px", "themeable": true }, + "md": { "value": "768px", "themeable": true }, + "lg": { "value": "992px", "themeable": true }, + "xl": { "value": "1200px", "themeable": true }, + "xxl": { "value": "1400px", "themeable": true } + } +} diff --git a/tokens/layout/grid/grid.tokens.json b/tokens/layout/grid/grid.tokens.json new file mode 100644 index 0000000000..7d74d2a004 --- /dev/null +++ b/tokens/layout/grid/grid.tokens.json @@ -0,0 +1,11 @@ +{ + "grid": { + "columns": { "value": "12", "themeable": true, "source": "$grid-columns" }, + "gutter": { + "width": { "value": "24px", "themeable": true, "source": "$grid-gutter-width" } + }, + "row": { + "columns": { "value": "6", "themeable": true, "source": "$grid-row-columns"} + } + } +} diff --git a/tokens/layout/sizes/sizes.tokens.json b/tokens/layout/sizes/sizes.tokens.json new file mode 100644 index 0000000000..5a9737d988 --- /dev/null +++ b/tokens/layout/sizes/sizes.tokens.json @@ -0,0 +1,10 @@ +{ + "size": { + "base": { + "25": { "value": "25%", "themeable": true }, + "50": { "value": "50%", "themeable": true }, + "75": { "value": "75%", "themeable": true }, + "100": { "value": "100%", "themeable": true } + } + } +} diff --git a/tokens/layout/spacing/spacing.tokens.json b/tokens/layout/spacing/spacing.tokens.json new file mode 100644 index 0000000000..ec0d2fb337 --- /dev/null +++ b/tokens/layout/spacing/spacing.tokens.json @@ -0,0 +1,18 @@ +{ + "spacing": { + "base": { + "0": { "value": "0", "themeable": true }, + "1": { "value": ".25rem", "themeable": true }, + "1.5": { "value": ".375rem", "themeable": true }, + "2": { "value": ".5rem", "themeable": true }, + "2.5": { "value": ".75rem", "themeable": true }, + "3": { "value": "1rem", "themeable": true }, + "3.5": { "value": "1.25rem", "themeable": true }, + "4": { "value": "1.5rem", "themeable": true }, + "4.5": { "value": "2rem", "themeable": true }, + "5": { "value": "3rem", "themeable": true }, + "5.5": { "value": "4rem", "themeable": true }, + "6": { "value": "5rem", "themeable": true } + } + } +} diff --git a/tokens/layout/table/table.tokens.json b/tokens/layout/table/table.tokens.json new file mode 100644 index 0000000000..0e2b75d562 --- /dev/null +++ b/tokens/layout/table/table.tokens.json @@ -0,0 +1,19 @@ +{ + "table": { + "cell": { + "padding": { + "base": { "value": ".75rem", "themeable": true, "source": "$table-cell-padding" }, + "sm": { "value": ".3rem", "themeable": true, "source": "$table-cell-padding-sm" } + } + }, + "color": { + "caption": { "value": "{text.muted.value}", "themeable": true, "source": "$table-caption-color" }, + "border": { "value": "{border.color.value}", "themeable": true, "source": "$table-border-color" } + }, + "th": { + "font": { + "weight": { "value": "null", "themeable": true, "source": "$table-th-font-weight" } + } + } + } +} diff --git a/tokens/layout/z-index/zindex.tokens.json b/tokens/layout/z-index/zindex.tokens.json new file mode 100644 index 0000000000..b237b26d14 --- /dev/null +++ b/tokens/layout/z-index/zindex.tokens.json @@ -0,0 +1,13 @@ +{ + "zindex": { + "dropdown": { "value": "1000", "themeable": true, "source": "$zindex-dropdown" }, + "sticky": { "value": "1020", "themeable": true, "source": "$zindex-sticky" }, + "fixed": { "value": "1030", "themeable": true, "source": "$zindex-fixed" }, + "sheet-backdrop": { "value": "1031", "themeable": true, "source": "$zindex-sheet-backdrop" }, + "sheet": { "value": "1032", "themeable": true, "source": "$zindex-sheet" }, + "modal-backdrop": { "value": "1040", "themeable": true, "source": "$zindex-modal-backdrop" }, + "modal": { "value": "1050", "themeable": true, "source": "$zindex-modal" }, + "popover": { "value": "1060", "themeable": true, "source": "$zindex-popover" }, + "tooltip": { "value": "1070", "themeable": true, "source": "$zindex-tooltip" } + } +} diff --git a/tokens/links/links.tokens.json b/tokens/links/links.tokens.json new file mode 100644 index 0000000000..580ba81c0c --- /dev/null +++ b/tokens/links/links.tokens.json @@ -0,0 +1,56 @@ +{ + "link": { + "color": { "value": "{color.info.500.value}", "themeable": true, "source": "$link-color" }, + "decoration": { "value": "none", "themeable": true, "source": "$link-decoration" }, + "hover": { + "color": { "value": "#003C5E", "themeable": true, "source": "$link-hover-color" }, + "decoration": { "value": "underline", "themeable": true, "source": "$link-hover-decoration" } + }, + "inline": { + "color": { "value": "{color.info.500.value}", "themeable": true, "source": "$inline-link-color" }, + "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-decoration" }, + "decoration-color": { "value": "rgba(0, 109, 170, 0.3)", "themeable": true, "source": "$inline-link-decoration-color" }, + "hover": { + "color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-color" }, + "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-hover-decoration" }, + "decoration-color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-decoration-color" } + } + }, + "muted": { + "color": { "value": "{color.primary.500.value}", "themeable": true, "source": "$muted-link-color" }, + "decoration": { "value": "none", "themeable": true, "source": "$muted-link-decoration" }, + "hover": { + "color": { "value": "#020911", "themeable": true, "source": "$muted-link-hover-color" }, + "decoration": { "value": "underline", "themeable": true, "source": "$muted-link-hover-decoration" } + }, + "inline": { + "color": { "value": "{color.primary.500.value}", "themeable": true, "source": "$muted-inline-link-color" }, + "decoration": { "value": "underline", "themeable": true, "source": "$muted-inline-link-decoration" }, + "decoration-color": { "value": "rgba(10, 48, 85, 0.3)", "themeable": true, "source": "$muted-inline-link-decoration-color" }, + "hover": { + "color": { "value": "#020911", "themeable": true, "source": "$muted-inline-link-hover-color" }, + "decoration": { "value": "underline", "themeable": true, "source": "$muted-inline-link-hover-decoration" }, + "decoration-color": { "value": "#020911", "themeable": true, "source": "$muted-inline-link-hover-decoration-color" } + } + } + }, + "brand": { + "color": { "value": "{color.brand.500.value}", "themeable": true, "source": "$brand-link-color" }, + "decoration": { "value": "none", "themeable": true, "source": "$brand-link-decoration" }, + "hover": { + "color": { "value": "#51002B", "themeable": true, "source": "$brand-link-hover-color" }, + "decoration": { "value": "underline", "themeable": true, "source": "$brand-link-hover-decoration" } + }, + "inline": { + "color": { "value": "{color.brand.500.value}", "themeable": true, "source": "$inline-link-color" }, + "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-decoration" }, + "decoration-color": { "value": "rgba(0, 109, 170, 0.3)", "themeable": true, "source": "$inline-link-decoration-color" }, + "hover": { + "color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-color" }, + "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-hover-decoration" }, + "decoration-color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-decoration-color" } + } + } + } + } +} diff --git a/tokens/transition/transition.tokens.json b/tokens/transition/transition.tokens.json new file mode 100644 index 0000000000..a3ef9c6c23 --- /dev/null +++ b/tokens/transition/transition.tokens.json @@ -0,0 +1,7 @@ +{ + "transition": { + "base": { "value": "all .2s ease-in-out", "themeable": true, "source": "$transition-base" }, + "fade": { "value": "opacity .15s linear", "themeable": true, "source": "$transition-fade" }, + "collapse": { "value": "height .35s ease", "themeable": true, "source": "$transition-collapse" } + } +} diff --git a/tokens/typography/display/display.tokens.json b/tokens/typography/display/display.tokens.json new file mode 100644 index 0000000000..7941218fbf --- /dev/null +++ b/tokens/typography/display/display.tokens.json @@ -0,0 +1,21 @@ +{ + "display": { + "size": { + "1": { "value": "3.75rem", "themeable": true, "source": "$display1-size" }, + "2": { "value": "4.875rem", "themeable": true, "source": "$display2-size" }, + "3": { "value": "5.625rem", "themeable": true, "source": "$display3-size" }, + "4": { "value": "7.5rem", "themeable": true, "source": "$display4-size" }, + "mobile": { "value": "3.25rem", "themeable": true, "source": "$display-mobile-size" } + }, + "weight": { + "1": { "value": "{font.weight.bold}", "themeable": true, "source": "$display1-weight" }, + "2": { "value": "{font.weight.bold}", "themeable": true, "source": "$display2-weight" }, + "3": { "value": "{font.weight.bold}", "themeable": true, "source": "$display3-weight" }, + "4": { "value": "{font.weight.bold}", "themeable": true, "source": "$display4-weight" } + }, + "line-height": { + "base": { "value": "1", "themeable": true, "source": "$display-line-height" }, + "mobile": { "value": "3.5rem", "themeable": true, "source": "$display-mobile-line-height" } + } + } +} diff --git a/tokens/typography/font/font.tokens.json b/tokens/typography/font/font.tokens.json new file mode 100644 index 0000000000..12f92e1fcb --- /dev/null +++ b/tokens/typography/font/font.tokens.json @@ -0,0 +1,51 @@ +{ + "font": { + "family": { + "sans": { + "serif": { + "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\",\n Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", + "themeable": true, + "source": "$font-family-sans-serif" + } + }, + "serif": { "value": "serif", "themeable": true, "source": "$font-family-serif" }, + "monospace": { + "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace", + "themeable": true, + "source": "$font-family-monospace" + }, + "base": { "value": "{font.family.sans.serif.value}", "themeable": true, "source": "$font-family-base" } + }, + "size": { + "base": { "value": "1.125rem", "themeable": true, "source": "$font-size-base" }, + "lg": { "value": "1.40625rem", "themeable": true, "source": "$font-size-lg" }, + "sm": { "value": ".875rem", "themeable": true, "source": "$font-size-sm" }, + "xs": { "value": ".75rem", "themeable": true, "source": "$font-size-xs" }, + "h1": { "value": "2.5rem", "themeable": true, "source": "$h1-font-size" }, + "h2": { "value": "2rem", "themeable": true, "source": "$h2-font-size" }, + "h3": { "value": "1.375rem", "themeable": true, "source": "$h3-font-size" }, + "h4": { "value": "1.125rem", "themeable": true, "source": "$h4-font-size" }, + "h5": { "value": ".875rem", "themeable": true, "source": "$h5-font-size" }, + "h6": { "value": ".75rem", "themeable": true, "source": "$h6-font-size" }, + "mobile": { + "h1": { "value": "2.25rem", "themeable": true, "source": "$h1-mobile-font-size" }, + "h2": { "value": "{font.size.h2.value}", "themeable": true, "source": "$h2-mobile-font-size" }, + "h3": { "value": "{font.size.h3.value}", "themeable": true, "source": "$h3-mobile-font-size" }, + "h4": { "value": "{font.size.h4.value}", "themeable": true, "source": "$h4-mobile-font-size" }, + "h5": { "value": "{font.size.h5.value}", "themeable": true, "source": "$h5-mobile-font-size" }, + "h6": { "value": "{font.size.h6.value}", "themeable": true, "source": "$h6-mobile-font-size" } + } + }, + "weight": { + "lighter": { "value": "lighter", "themeable": true, "source": "$font-weight-lighter" }, + "light": { "value": "300", "themeable": true, "source": "$font-weight-light" }, + "normal": { "value": "400", "themeable": true, "source": "$font-weight-normal" }, + "semi": { + "bold": { "value": "500", "themeable": true, "source": "$font-weight-semi-bold" } + }, + "bold": { "value": "700", "themeable": true, "source": "$font-weight-bold" }, + "bolder": { "value": "bolder", "themeable": true, "source": "$font-weight-bolder" }, + "base": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$font-weight-base" } + } + } +} diff --git a/tokens/typography/headings/headings.tokens.json b/tokens/typography/headings/headings.tokens.json new file mode 100644 index 0000000000..04cec04a71 --- /dev/null +++ b/tokens/typography/headings/headings.tokens.json @@ -0,0 +1,15 @@ +{ + "headings": { + "margin": { + "bottom": { "value": ".5rem", "themeable": true, "source": "$headings-margin-bottom" } + }, + "font": { + "family": { "value": "null", "themeable": true, "source": "$headings-font-family" }, + "weight": { "value": "{font.weight.bold}", "themeable": true, "source": "$headings-font-weight" } + }, + "line": { + "height": { "value": "1.25", "themeable": true, "source": "$headings-line-height" } + }, + "color": { "value": "{color.black}", "themeable": true, "source": "$headings-color" } + } +} diff --git a/tokens/typography/line-height/line-height.tokens.json b/tokens/typography/line-height/line-height.tokens.json new file mode 100644 index 0000000000..e2b00fac39 --- /dev/null +++ b/tokens/typography/line-height/line-height.tokens.json @@ -0,0 +1,7 @@ +{ + "line-height": { + "base": { "value": "1.5556", "themeable": true, "source": "$line-height-base" }, + "lg": { "value": "1.5", "themeable": true, "source": "$line-height-lg" }, + "sm": { "value": "1.5", "themeable": true, "source": "$line-height-sm" } + } +} diff --git a/tokens/typography/paragraph/paragraph.tokens.json b/tokens/typography/paragraph/paragraph.tokens.json new file mode 100644 index 0000000000..3483024070 --- /dev/null +++ b/tokens/typography/paragraph/paragraph.tokens.json @@ -0,0 +1,7 @@ +{ + "paragraph": { + "margin": { + "bottom": { "value": "1rem", "themeable": true, "source": "$paragraph-margin-bottom" } + } + } +} From 043f266327d81a068341c50e26ed4102852870ba Mon Sep 17 00:00:00 2001 From: monteri <36768631+monteri@users.noreply.github.com> Date: Tue, 6 Sep 2022 12:30:54 +0300 Subject: [PATCH 02/19] [BD-46] feat: map and replace scss vars (#1596) * feat: add css variables and map scss to css * refactor: update token structure and fix lint errors Co-authored-by: vzadorozhnii Co-authored-by: Viktor Rusakov --- .stylelintrc.json | 5 +- build-tokens.js | 36 -- package.json | 2 +- scss/core/_variables.scss | 2 - scss/core/core.scss | 1 + scss/core/tokens.css | 341 ++++++++++++++++++ src/Bubble/Bubble.scss | 4 +- src/Bubble/_variables.scss | 8 +- tokens/build-tokens.js | 83 +++++ tokens/build/_variables.scss | 339 +++++++++++++++++ tokens/build/variables.css | 341 ++++++++++++++++++ tokens/import-css-tokens.js | 12 + tokens/map-scss-to-css.js | 16 + tokens/replace-variables.js | 19 + .../borders-fills/border.tokens.json | 0 tokens/{ => source}/caret/caret.tokens.json | 0 .../{ => source}/colors/body/body.tokens.json | 0 tokens/{ => source}/colors/colors.tokens.json | 0 .../{ => source}/colors/text/text.tokens.json | 0 .../components/alert/alert.tokens.json | 0 .../components/avatar/avatar.tokens.json | 0 .../avatarButton/avatarButton.tokens.json | 0 .../components/button/button.tokens.json | 0 .../components/spinner/spiner.tokens.json | 0 tokens/{ => source}/core/core.tokens.json | 0 .../box-shadow/box-shadow.tokens.json | 0 .../breakpoints/breakpoints.tokens.json | 0 .../{ => source}/layout/grid/grid.tokens.json | 0 .../layout/sizes/sizes.tokens.json | 0 .../layout/spacing/spacing.tokens.json | 0 .../layout/table/table.tokens.json | 0 .../layout/z-index/zindex.tokens.json | 0 tokens/{ => source}/links/links.tokens.json | 6 +- .../transition/transition.tokens.json | 0 .../typography/display/display.tokens.json | 0 .../typography/font/font.tokens.json | 2 +- .../typography/headings/headings.tokens.json | 0 .../line-height/line-height.tokens.json | 0 .../paragraph/paragraph.tokens.json | 0 tokens/utils.js | 53 +++ 40 files changed, 1220 insertions(+), 50 deletions(-) delete mode 100644 build-tokens.js create mode 100644 scss/core/tokens.css create mode 100644 tokens/build-tokens.js create mode 100644 tokens/build/_variables.scss create mode 100644 tokens/build/variables.css create mode 100644 tokens/import-css-tokens.js create mode 100644 tokens/map-scss-to-css.js create mode 100644 tokens/replace-variables.js rename tokens/{ => source}/borders-fills/border.tokens.json (100%) rename tokens/{ => source}/caret/caret.tokens.json (100%) rename tokens/{ => source}/colors/body/body.tokens.json (100%) rename tokens/{ => source}/colors/colors.tokens.json (100%) rename tokens/{ => source}/colors/text/text.tokens.json (100%) rename tokens/{ => source}/components/alert/alert.tokens.json (100%) rename tokens/{ => source}/components/avatar/avatar.tokens.json (100%) rename tokens/{ => source}/components/avatarButton/avatarButton.tokens.json (100%) rename tokens/{ => source}/components/button/button.tokens.json (100%) rename tokens/{ => source}/components/spinner/spiner.tokens.json (100%) rename tokens/{ => source}/core/core.tokens.json (100%) rename tokens/{ => source}/elevation-shadows/box-shadow/box-shadow.tokens.json (100%) rename tokens/{ => source}/layout/breakpoints/breakpoints.tokens.json (100%) rename tokens/{ => source}/layout/grid/grid.tokens.json (100%) rename tokens/{ => source}/layout/sizes/sizes.tokens.json (100%) rename tokens/{ => source}/layout/spacing/spacing.tokens.json (100%) rename tokens/{ => source}/layout/table/table.tokens.json (100%) rename tokens/{ => source}/layout/z-index/zindex.tokens.json (100%) rename tokens/{ => source}/links/links.tokens.json (88%) rename tokens/{ => source}/transition/transition.tokens.json (100%) rename tokens/{ => source}/typography/display/display.tokens.json (100%) rename tokens/{ => source}/typography/font/font.tokens.json (97%) rename tokens/{ => source}/typography/headings/headings.tokens.json (100%) rename tokens/{ => source}/typography/line-height/line-height.tokens.json (100%) rename tokens/{ => source}/typography/paragraph/paragraph.tokens.json (100%) create mode 100644 tokens/utils.js diff --git a/.stylelintrc.json b/.stylelintrc.json index 5dafbb25a8..6abc524964 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -31,6 +31,9 @@ "ignoreProperties": ["xs", "sm", "md", "lg", "xl", "xxl"] }], "alpha-value-notation": "number", - "color-function-notation": "legacy" + "color-function-notation": "legacy", + "value-keyword-case": ["lower", { + "ignoreProperties": ["/font-family/"] + }] } } diff --git a/build-tokens.js b/build-tokens.js deleted file mode 100644 index fc256e0d17..0000000000 --- a/build-tokens.js +++ /dev/null @@ -1,36 +0,0 @@ -const StyleDictionary = require('style-dictionary'); - -const PGN_PREFIX = 'pgn'; -const STYLE_DICTIONARY_BUILD_PATH = 'style-dictionary-build'; - -const paragonStyleDictionary = StyleDictionary.extend({ - source: ['tokens/**/*.json'], - platforms: { - scss: { - transformGroup: 'scss', - prefix: PGN_PREFIX, - buildPath: `${STYLE_DICTIONARY_BUILD_PATH}/scss/`, - files: [{ - destination: '_variables.scss', - format: 'scss/variables', - options: { - outputReferences: true, - }, - }], - }, - css: { - transformGroup: 'css', - prefix: PGN_PREFIX, - buildPath: `${STYLE_DICTIONARY_BUILD_PATH}/css/`, - files: [{ - format: 'css/variables', - destination: 'variables.css', - options: { - outputReferences: true, - }, - }], - }, - }, -}); - -paragonStyleDictionary.buildAllPlatforms(); diff --git a/package.json b/package.json index 75f00b4f5b..a61299781e 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "type-check": "tsc --noEmit", "type-check:watch": "npm run type-check -- --watch", "build-types": "tsc --emitDeclarationOnly", - "build_tokens": "node build-tokens.js" + "build_tokens": "node tokens/build-tokens.js" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.1.1", diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss index 3fe1f20d29..2cdbb3bb83 100644 --- a/scss/core/_variables.scss +++ b/scss/core/_variables.scss @@ -688,7 +688,6 @@ $embed-responsive-aspect-ratios: join( // // Font, line-height, and color for body text, headings, and more. -// stylelint-disable value-keyword-case $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" !default; @@ -696,7 +695,6 @@ $font-family-serif: serif !default; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; -// stylelint-enable value-keyword-case $font-size-base: 1.125rem !default; // Assumes the browser default, typically `16px` $font-size-lg: $font-size-base * 1.25 !default; diff --git a/scss/core/core.scss b/scss/core/core.scss index d6a2b072f7..6b9630c778 100644 --- a/scss/core/core.scss +++ b/scss/core/core.scss @@ -1,3 +1,4 @@ +@import "tokens"; @import "functions"; @import "variables"; @import "~bootstrap/scss/mixins"; diff --git a/scss/core/tokens.css b/scss/core/tokens.css new file mode 100644 index 0000000000..069c61a538 --- /dev/null +++ b/scss/core/tokens.css @@ -0,0 +1,341 @@ +:root { + --pgn-paragraph-margin-bottom: 1rem; + --pgn-line-height-sm: 1.5; + --pgn-line-height-lg: 1.5; + --pgn-line-height-base: 1.5556; + --pgn-headings-line-height: 1.25; + --pgn-headings-font-family: null; + --pgn-headings-margin-bottom: .5rem; + --pgn-font-weight-bolder: bolder; + --pgn-font-weight-bold: 700; + --pgn-font-weight-semi-bold: 500; + --pgn-font-weight-normal: 400; + --pgn-font-weight-light: 300; + --pgn-font-weight-lighter: lighter; + --pgn-font-size-mobile-h1: 2.25rem; + --pgn-font-size-h6: .75rem; + --pgn-font-size-h5: .875rem; + --pgn-font-size-h4: 1.125rem; + --pgn-font-size-h3: 1.375rem; + --pgn-font-size-h2: 2rem; + --pgn-font-size-h1: 2.5rem; + --pgn-font-size-xs: .75rem; + --pgn-font-size-sm: .875rem; + --pgn-font-size-lg: 1.4063rem; + --pgn-font-size-base: 1.125rem; + --pgn-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; + --pgn-font-family-serif: serif; + --pgn-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-display-line-height-mobile: 3.5rem; + --pgn-display-line-height-base: 1; + --pgn-display-size-mobile: 3.25rem; + --pgn-display-size-4: 7.5rem; + --pgn-display-size-3: 5.625rem; + --pgn-display-size-2: 4.875rem; + --pgn-display-size-1: 3.75rem; + --pgn-transition-collapse: height .35s ease; + --pgn-transition-fade: opacity .15s linear; + --pgn-transition-base: all .2s ease-in-out; + --pgn-link-brand-inline-hover-decoration-color: #003C5E; + --pgn-link-brand-inline-hover-decoration: underline; + --pgn-link-brand-inline-hover-color: #003C5E; + --pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3); + --pgn-link-brand-inline-decoration: underline; + --pgn-link-brand-hover-decoration: underline; + --pgn-link-brand-hover-color: #51002B; + --pgn-link-brand-decoration: none; + --pgn-link-muted-inline-hover-decoration-color: #020911; + --pgn-link-muted-inline-hover-decoration: underline; + --pgn-link-muted-inline-hover-color: #020911; + --pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3); + --pgn-link-muted-inline-decoration: underline; + --pgn-link-muted-hover-decoration: underline; + --pgn-link-muted-hover-color: #020911; + --pgn-link-muted-decoration: none; + --pgn-link-inline-hover-decoration-color: #003C5E; + --pgn-link-inline-hover-decoration: underline; + --pgn-link-inline-hover-color: #003C5E; + --pgn-link-inline-decoration-color: rgba(0, 109, 170, .3); + --pgn-link-inline-decoration: underline; + --pgn-link-hover-decoration: underline; + --pgn-link-hover-color: #003C5E; + --pgn-link-decoration: none; + --pgn-zindex-tooltip: 1070; + --pgn-zindex-popover: 1060; + --pgn-zindex-modal: 1050; + --pgn-zindex-modal-backdrop: 1040; + --pgn-zindex-sheet: 1032; + --pgn-zindex-sheet-backdrop: 1031; + --pgn-zindex-fixed: 1030; + --pgn-zindex-sticky: 1020; + --pgn-zindex-dropdown: 1000; + --pgn-table-th-font-weight: null; + --pgn-table-cell-padding-sm: .3rem; + --pgn-table-cell-padding-base: .75rem; + --pgn-spacing-base-5-5: 4rem; + --pgn-spacing-base-4-5: 2rem; + --pgn-spacing-base-3-5: 1.25rem; + --pgn-spacing-base-2-5: .75rem; + --pgn-spacing-base-1-5: .375rem; + --pgn-spacing-base-6: 5rem; + --pgn-spacing-base-5: 3rem; + --pgn-spacing-base-4: 1.5rem; + --pgn-spacing-base-3: 1rem; + --pgn-spacing-base-2: .5rem; + --pgn-spacing-base-1: .25rem; + --pgn-spacing-base-0: 0; + --pgn-size-base-100: 100rem; + --pgn-size-base-75: 75rem; + --pgn-size-base-50: 50rem; + --pgn-size-base-25: 25rem; + --pgn-grid-row-columns: 6; + --pgn-grid-gutter-width: 24px; + --pgn-grid-columns: 12; + --pgn-breakpoint-xxl: 1400px; + --pgn-breakpoint-xl: 1200px; + --pgn-breakpoint-lg: 992px; + --pgn-breakpoint-md: 768px; + --pgn-breakpoint-sm: 576px; + --pgn-breakpoint-xs: 0; + --pgn-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-core-input-btn-focus-width: 1px; + --pgn-core-input-btn-line-height-sm: 1.4286; + --pgn-core-input-btn-line-height-base: 1.3333; + --pgn-core-input-btn-font-size-lg: 1.325rem; + --pgn-core-input-btn-font-size-sm: .875rem; + --pgn-core-input-btn-font-size-base: 1.125rem; + --pgn-core-input-btn-font-family: null; + --pgn-core-input-btn-padding-lg-x: 1.25rem; + --pgn-core-input-btn-padding-lg-y: .6875rem; + --pgn-core-input-btn-padding-sm-x: .75rem; + --pgn-core-input-btn-padding-sm-y: .4375rem; + --pgn-core-input-btn-padding-x: 1rem; + --pgn-core-input-btn-padding-y: .5625rem; + --pgn-spinner-sm-border-width: .2em; + --pgn-spinner-sm-width: 1rem; + --pgn-spinner-border-width: .25em; + --pgn-spinner-width: 2rem; + --pgn-btn-transition: null; + --pgn-btn-block-spacing-y: .5rem; + --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); + --pgn-btn-tertiary-inverse-bg-base: transparent; + --pgn-btn-tertiary-bg-base: transparent; + --pgn-btn-disabled-opacity: .65; + --pgn-btn-focus-gap: 1px; + --pgn-btn-focus-width: 2px; + --pgn-btn-box-shadow-active: none; + --pgn-avatar-button-padding-left-lg: .25em; + --pgn-avatar-button-padding-left-sm: .25em; + --pgn-avatar-button-padding-left-base: .25em; + --pgn-avatar-size-huge: 18.75rem; + --pgn-avatar-size-xxl: 11.5rem; + --pgn-avatar-size-xl: 6rem; + --pgn-avatar-size-lg: 4rem; + --pgn-avatar-size-sm: 2.25rem; + --pgn-avatar-size-xs: 1.5rem; + --pgn-avatar-size-base: 3rem; + --pgn-avatar-border-radius: 100%; + --pgn-alert-line-height: 1.5rem; + --pgn-alert-icon-space: .8rem; + --pgn-alert-level-color: 6; + --pgn-alert-level-border: -9; + --pgn-alert-level-bg: -10; + --pgn-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15); + --pgn-alert-font-size: .875rem; + --pgn-alert-border-width: 0; + --pgn-alert-margin-bottom: 1rem; + --pgn-alert-padding-x: 1.5rem; + --pgn-alert-padding-y: 1.5rem; + --pgn-color-dark-900: #1B2C21; + --pgn-color-dark-800: #1D2F23; + --pgn-color-dark-700: #1F3226; + --pgn-color-dark-600: #23392A; + --pgn-color-dark-500: #273F2F; + --pgn-color-dark-400: #5D6F63; + --pgn-color-dark-300: #939F97; + --pgn-color-dark-200: #C9CFCB; + --pgn-color-dark-100: #F2F3F3; + --pgn-color-light-900: #9E9B99; + --pgn-color-light-800: #A9A6A4; + --pgn-color-light-700: #B4B1AF; + --pgn-color-light-600: #CBC7C5; + --pgn-color-light-500: #E1DDDB; + --pgn-color-light-400: #E9E6E4; + --pgn-color-light-300: #F0EEED; + --pgn-color-light-200: #F8F7F6; + --pgn-color-light-100: #FDFDFD; + --pgn-color-danger-900: #892029; + --pgn-color-danger-800: #92222C; + --pgn-color-danger-700: #9C242E; + --pgn-color-danger-600: #B02934; + --pgn-color-danger-400: #D2626B; + --pgn-color-danger-300: #E1969D; + --pgn-color-danger-200: #F0CBCE; + --pgn-color-danger-100: #FBF2F3; + --pgn-color-warning-900: #B39800; + --pgn-color-warning-800: #BFA300; + --pgn-color-warning-700: #CCAE00; + --pgn-color-warning-600: #E6C300; + --pgn-color-warning-400: #FFE340; + --pgn-color-warning-300: #FFEC80; + --pgn-color-warning-200: #FFF6BF; + --pgn-color-warning-100: #FFFDF0; + --pgn-color-info-900: #004C77; + --pgn-color-info-800: #005280; + --pgn-color-info-700: #005788; + --pgn-color-info-600: #006299; + --pgn-color-info-400: #4092BF; + --pgn-color-info-300: #80B6D5; + --pgn-color-info-200: #BFDBEA; + --pgn-color-info-100: #F0F6FA; + --pgn-color-success-900: #105B3A; + --pgn-color-success-800: #11623E; + --pgn-color-success-700: #126842; + --pgn-color-success-600: #15754B; + --pgn-color-success-400: #51A17E; + --pgn-color-success-300: #8BC1A9; + --pgn-color-success-200: #C5E0D4; + --pgn-color-success-100: #F1F8F5; + --pgn-color-brand-900: #6E003B; + --pgn-color-brand-800: #76003F; + --pgn-color-brand-700: #7E0043; + --pgn-color-brand-600: #8D004C; + --pgn-color-brand-500: #9D0054; + --pgn-color-brand-400: #B6407F; + --pgn-color-brand-300: #CE80AA; + --pgn-color-brand-200: #E7BFD4; + --pgn-color-brand-100: #F9F0F5; + --pgn-color-secondary-900: #303030; + --pgn-color-secondary-800: #343434; + --pgn-color-secondary-700: #373737; + --pgn-color-secondary-600: #3E3E3E; + --pgn-color-secondary-400: #747474; + --pgn-color-secondary-300: #A2A2A2; + --pgn-color-secondary-200: #D1D1D1; + --pgn-color-secondary-100: #F4F4F4; + --pgn-color-primary-900: #07223C; + --pgn-color-primary-800: #082440; + --pgn-color-primary-700: #082644; + --pgn-color-primary-600: #092B4D; + --pgn-color-primary-500: #0A3055; + --pgn-color-primary-400: #476480; + --pgn-color-primary-300: #8598AA; + --pgn-color-primary-200: #C2CBD5; + --pgn-color-primary-100: #F0F3F5; + --pgn-color-gray-900: #212529; + --pgn-color-gray-800: #333333; + --pgn-color-gray-700: #454545; + --pgn-color-gray-600: #5C5C5C; + --pgn-color-gray-500: #707070; + --pgn-color-gray-400: #8F8F8F; + --pgn-color-gray-300: #ADADAD; + --pgn-color-gray-200: #CCCCCC; + --pgn-color-gray-100: #EBEBEB; + --pgn-color-accent-b: #FFEE88; + --pgn-color-accent-a: #00BBF9; + --pgn-color-teal: #006DAA; + --pgn-color-yellow: #FFD900; + --pgn-color-green: #178253; + --pgn-color-red: #C32D3A; + --pgn-color-blue: #23419F; + --pgn-color-black: #000000; + --pgn-color-white: #FFFFFF; + --pgn-caret-spacing: .255em; + --pgn-caret-vertical-align: .255em; + --pgn-caret-width: .3em; + --pgn-border-radius-sm: .25rem; + --pgn-border-radius-lg: .425rem; + --pgn-border-radius-base: .375rem; + --pgn-border-width: 1px; + --pgn-headings-color: var(--pgn-color-black); + --pgn-headings-font-weight: var(--pgn-font-weight-bold); + --pgn-font-weight-base: var(--pgn-font-weight-normal); + --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); + --pgn-font-size-mobile-h5: var(--pgn-font-size-h5); + --pgn-font-size-mobile-h4: var(--pgn-font-size-h4); + --pgn-font-size-mobile-h3: var(--pgn-font-size-h3); + --pgn-font-size-mobile-h2: var(--pgn-font-size-h2); + --pgn-font-family-base: var(--pgn-font-family-sans-serif); + --pgn-display-weight-4: var(--pgn-font-weight-bold); + --pgn-display-weight-3: var(--pgn-font-weight-bold); + --pgn-display-weight-2: var(--pgn-font-weight-bold); + --pgn-display-weight-1: var(--pgn-font-weight-bold); + --pgn-link-brand-inline-color: var(--pgn-color-brand-500); + --pgn-link-brand-color: var(--pgn-color-brand-500); + --pgn-link-muted-inline-color: var(--pgn-color-primary-500); + --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-core-input-btn-border-width: var(--pgn-border-width); + --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg); + --pgn-spinner-sm-height: var(--pgn-spinner-sm-width); + --pgn-spinner-height: var(--pgn-spinner-width); + --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); + --pgn-btn-tertiary-inverse-color: var(--pgn-color-white); + --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); + --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); + --pgn-btn-tertiary-color: var(--pgn-color-gray-700); + --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); + --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075); + --pgn-btn-border-radius-sm: var(--pgn-border-radius-sm); + --pgn-btn-border-radius-lg: var(--pgn-border-radius-lg); + --pgn-btn-border-radius-base: var(--pgn-border-radius-base); + --pgn-btn-line-height-sm: var(--pgn-core-input-btn-line-height-sm); + --pgn-btn-line-height-base: var(--pgn-core-input-btn-line-height-base); + --pgn-btn-font-width: var(--pgn-font-weight-normal); + --pgn-btn-font-size-lg: var(--pgn-core-input-btn-font-size-lg); + --pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm); + --pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base); + --pgn-btn-font-family: var(--pgn-core-input-btn-font-family); + --pgn-btn-padding-sm-x: var(--pgn-core-input-btn-padding-sm-x); + --pgn-btn-padding-sm-y: var(--pgn-core-input-btn-padding-sm-y); + --pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); + --pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x); + --pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); + --pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300); + --pgn-alert-color-content: var(--pgn-color-gray-700); + --pgn-alert-color-title: var(--pgn-color-black); + --pgn-alert-font-weight-link: var(--pgn-font-weight-normal); + --pgn-alert-border-radius: var(--pgn-border-radius-base); + --pgn-text-muted: var(--pgn-color-gray-500); + --pgn-color-danger-500: var(--pgn-color-red); + --pgn-color-warning-500: var(--pgn-color-yellow); + --pgn-color-info-500: var(--pgn-color-teal); + --pgn-color-success-500: var(--pgn-color-green); + --pgn-color-secondary-500: var(--pgn-color-gray-700); + --pgn-body-color: var(--pgn-color-gray-700); + --pgn-body-bg: var(--pgn-color-white); + --pgn-border-color: var(--pgn-color-gray-200); + --pgn-link-inline-color: var(--pgn-color-info-500); + --pgn-link-color: var(--pgn-color-info-500); + --pgn-table-color-border: var(--pgn-border-color); + --pgn-table-color-caption: var(--pgn-text-muted); + --pgn-btn-border-width: var(--pgn-core-input-btn-border-width); + --pgn-btn-line-height-lg: var(--pgn-core-input-btn-line-height-lg); +} diff --git a/src/Bubble/Bubble.scss b/src/Bubble/Bubble.scss index c176a95097..75a681be24 100644 --- a/src/Bubble/Bubble.scss +++ b/src/Bubble/Bubble.scss @@ -8,7 +8,7 @@ display: inline-flex; align-items: center; justify-content: center; - font-size: $font-size-xs; + font-size: var(--pgn-font-size-xs); @each $name, $colors in $bubble-variants { &.pgn__bubble-#{$name} { @@ -19,7 +19,7 @@ &:disabled, &.disabled { - background: $gray-500; + background: var(--pgn-color-gray-500); } &.expandable { diff --git a/src/Bubble/_variables.scss b/src/Bubble/_variables.scss index e09ee586c8..96f9d4ba73 100644 --- a/src/Bubble/_variables.scss +++ b/src/Bubble/_variables.scss @@ -1,8 +1,8 @@ $bubble-variants: ( - "success": ( "background-color": $success, "color": $white ), - "warning": ( "background-color": $warning, "color": $white ), - "error": ( "background-color": $danger, "color": $white ), - "primary": ( "background-color": $primary, "color": $white ), + "success": ( "background-color": $success, "color": var(--pgn-color-white) ), + "warning": ( "background-color": $warning, "color": var(--pgn-color-white) ), + "error": ( "background-color": $danger, "color": var(--pgn-color-white) ), + "primary": ( "background-color": $primary, "color": var(--pgn-color-white) ), ) !default; $bubble-expandable-padding-x: .25rem !default; $bubble-expandable-padding-y: 0 !default; diff --git a/tokens/build-tokens.js b/tokens/build-tokens.js new file mode 100644 index 0000000000..78b63defff --- /dev/null +++ b/tokens/build-tokens.js @@ -0,0 +1,83 @@ +const StyleDictionary = require('style-dictionary'); +const path = require('path'); + +const { formattedVariables, fileHeader } = StyleDictionary.formatHelpers; + +const PGN_PREFIX = 'pgn'; +const BASE_BUILD_PATH = path.resolve(__dirname, 'build'); + +/** + * Transforms color values to be in uppercase format to be compatible with our stylelint rules. + */ +StyleDictionary.registerTransform({ + name: 'color/uppercase', + type: 'value', + matcher: function(token) { + return token.attributes.category === 'color'; + }, + transformer: function(token) { + return token.original.value.toUpperCase(); + } +}); + +/** + * Overrides default scss/variables formatter to add new line at the end of file + * to be compatible with our stylelint rules. + */ +StyleDictionary.registerFormat({ + name: 'scss/variables-with-new-line', + formatter: function({ dictionary, options, file }) { + const { outputReferences, themeable = false } = options; + return fileHeader({file, commentStyle: 'short'}) + + formattedVariables({ format: 'sass', dictionary, outputReferences, themeable }) + + '\n'; + } +}); + +const paragonStyleDictionary = StyleDictionary.extend({ + source: ['tokens/**/*.json'], + platforms: { + scss: { + transformGroup: 'scss', + prefix: PGN_PREFIX, + buildPath: `${BASE_BUILD_PATH}/`, + files: [{ + destination: '_variables.scss', + format: 'scss/variables-with-new-line', + options: { + outputReferences: true, + }, + }], + transforms: StyleDictionary.transformGroup.scss.concat('color/uppercase'), + options: { + showFileHeader: false, + } + }, + css: { + transformGroup: 'css', + prefix: PGN_PREFIX, + files: [ + { + format: 'css/variables', + destination: `${BASE_BUILD_PATH}/variables.css`, + options: { + outputReferences: true, + }, + }, + { + format: 'css/variables', + destination: path.resolve(__dirname, '../scss/core/tokens.css'), + options: { + outputReferences: true, + }, + }, + ], + transforms: StyleDictionary.transformGroup.css.concat('color/uppercase'), + options: { + showFileHeader: false, + } + }, + }, +}); + +paragonStyleDictionary.buildAllPlatforms(); diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss new file mode 100644 index 0000000000..6fad45d3a7 --- /dev/null +++ b/tokens/build/_variables.scss @@ -0,0 +1,339 @@ +$pgn-paragraph-margin-bottom: 1rem !default; +$pgn-line-height-sm: 1.5 !default; +$pgn-line-height-lg: 1.5 !default; +$pgn-line-height-base: 1.5556 !default; +$pgn-headings-line-height: 1.25 !default; +$pgn-headings-font-family: null !default; +$pgn-headings-margin-bottom: .5rem !default; +$pgn-font-weight-bolder: bolder !default; +$pgn-font-weight-bold: 700 !default; +$pgn-font-weight-semi-bold: 500 !default; +$pgn-font-weight-normal: 400 !default; +$pgn-font-weight-light: 300 !default; +$pgn-font-weight-lighter: lighter !default; +$pgn-font-size-mobile-h1: 2.25rem !default; +$pgn-font-size-h6: .75rem !default; +$pgn-font-size-h5: .875rem !default; +$pgn-font-size-h4: 1.125rem !default; +$pgn-font-size-h3: 1.375rem !default; +$pgn-font-size-h2: 2rem !default; +$pgn-font-size-h1: 2.5rem !default; +$pgn-font-size-xs: .75rem !default; +$pgn-font-size-sm: .875rem !default; +$pgn-font-size-lg: 1.4063rem !default; +$pgn-font-size-base: 1.125rem !default; +$pgn-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace !default; +$pgn-font-family-serif: serif !default; +$pgn-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" !default; +$pgn-display-line-height-mobile: 3.5rem !default; +$pgn-display-line-height-base: 1 !default; +$pgn-display-size-mobile: 3.25rem !default; +$pgn-display-size-4: 7.5rem !default; +$pgn-display-size-3: 5.625rem !default; +$pgn-display-size-2: 4.875rem !default; +$pgn-display-size-1: 3.75rem !default; +$pgn-transition-collapse: height .35s ease !default; +$pgn-transition-fade: opacity .15s linear !default; +$pgn-transition-base: all .2s ease-in-out !default; +$pgn-link-brand-inline-hover-decoration-color: #003C5E !default; +$pgn-link-brand-inline-hover-decoration: underline !default; +$pgn-link-brand-inline-hover-color: #003C5E !default; +$pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3) !default; +$pgn-link-brand-inline-decoration: underline !default; +$pgn-link-brand-hover-decoration: underline !default; +$pgn-link-brand-hover-color: #51002B !default; +$pgn-link-brand-decoration: none !default; +$pgn-link-muted-inline-hover-decoration-color: #020911 !default; +$pgn-link-muted-inline-hover-decoration: underline !default; +$pgn-link-muted-inline-hover-color: #020911 !default; +$pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3) !default; +$pgn-link-muted-inline-decoration: underline !default; +$pgn-link-muted-hover-decoration: underline !default; +$pgn-link-muted-hover-color: #020911 !default; +$pgn-link-muted-decoration: none !default; +$pgn-link-inline-hover-decoration-color: #003C5E !default; +$pgn-link-inline-hover-decoration: underline !default; +$pgn-link-inline-hover-color: #003C5E !default; +$pgn-link-inline-decoration-color: rgba(0, 109, 170, .3) !default; +$pgn-link-inline-decoration: underline !default; +$pgn-link-hover-decoration: underline !default; +$pgn-link-hover-color: #003C5E !default; +$pgn-link-decoration: none !default; +$pgn-zindex-tooltip: 1070 !default; +$pgn-zindex-popover: 1060 !default; +$pgn-zindex-modal: 1050 !default; +$pgn-zindex-modal-backdrop: 1040 !default; +$pgn-zindex-sheet: 1032 !default; +$pgn-zindex-sheet-backdrop: 1031 !default; +$pgn-zindex-fixed: 1030 !default; +$pgn-zindex-sticky: 1020 !default; +$pgn-zindex-dropdown: 1000 !default; +$pgn-table-th-font-weight: null !default; +$pgn-table-cell-padding-sm: .3rem !default; +$pgn-table-cell-padding-base: .75rem !default; +$pgn-spacing-base-5-5: 4rem !default; +$pgn-spacing-base-4-5: 2rem !default; +$pgn-spacing-base-3-5: 1.25rem !default; +$pgn-spacing-base-2-5: .75rem !default; +$pgn-spacing-base-1-5: .375rem !default; +$pgn-spacing-base-6: 5rem !default; +$pgn-spacing-base-5: 3rem !default; +$pgn-spacing-base-4: 1.5rem !default; +$pgn-spacing-base-3: 1rem !default; +$pgn-spacing-base-2: .5rem !default; +$pgn-spacing-base-1: .25rem !default; +$pgn-spacing-base-0: 0 !default; +$pgn-size-base-100: 100rem !default; +$pgn-size-base-75: 75rem !default; +$pgn-size-base-50: 50rem !default; +$pgn-size-base-25: 25rem !default; +$pgn-grid-row-columns: 6 !default; +$pgn-grid-gutter-width: 24px !default; +$pgn-grid-columns: 12 !default; +$pgn-breakpoint-xxl: 1400px !default; +$pgn-breakpoint-xl: 1200px !default; +$pgn-breakpoint-lg: 992px !default; +$pgn-breakpoint-md: 768px !default; +$pgn-breakpoint-sm: 576px !default; +$pgn-breakpoint-xs: 0 !default; +$pgn-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default; +$pgn-core-input-btn-focus-width: 1px !default; +$pgn-core-input-btn-line-height-sm: 1.4286 !default; +$pgn-core-input-btn-line-height-base: 1.3333 !default; +$pgn-core-input-btn-font-size-lg: 1.325rem !default; +$pgn-core-input-btn-font-size-sm: .875rem !default; +$pgn-core-input-btn-font-size-base: 1.125rem !default; +$pgn-core-input-btn-font-family: null !default; +$pgn-core-input-btn-padding-lg-x: 1.25rem !default; +$pgn-core-input-btn-padding-lg-y: .6875rem !default; +$pgn-core-input-btn-padding-sm-x: .75rem !default; +$pgn-core-input-btn-padding-sm-y: .4375rem !default; +$pgn-core-input-btn-padding-x: 1rem !default; +$pgn-core-input-btn-padding-y: .5625rem !default; +$pgn-spinner-sm-border-width: .2em !default; +$pgn-spinner-sm-width: 1rem !default; +$pgn-spinner-border-width: .25em !default; +$pgn-spinner-width: 2rem !default; +$pgn-btn-transition: null !default; +$pgn-btn-block-spacing-y: .5rem !default; +$pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1) !default; +$pgn-btn-tertiary-inverse-bg-base: transparent !default; +$pgn-btn-tertiary-bg-base: transparent !default; +$pgn-btn-disabled-opacity: .65 !default; +$pgn-btn-focus-gap: 1px !default; +$pgn-btn-focus-width: 2px !default; +$pgn-btn-box-shadow-active: none !default; +$pgn-avatar-button-padding-left-lg: .25em !default; +$pgn-avatar-button-padding-left-sm: .25em !default; +$pgn-avatar-button-padding-left-base: .25em !default; +$pgn-avatar-size-huge: 18.75rem !default; +$pgn-avatar-size-xxl: 11.5rem !default; +$pgn-avatar-size-xl: 6rem !default; +$pgn-avatar-size-lg: 4rem !default; +$pgn-avatar-size-sm: 2.25rem !default; +$pgn-avatar-size-xs: 1.5rem !default; +$pgn-avatar-size-base: 3rem !default; +$pgn-avatar-border-radius: 100% !default; +$pgn-alert-line-height: 1.5rem !default; +$pgn-alert-icon-space: .8rem !default; +$pgn-alert-level-color: 6 !default; +$pgn-alert-level-border: -9 !default; +$pgn-alert-level-bg: -10 !default; +$pgn-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default; +$pgn-alert-font-size: .875rem !default; +$pgn-alert-border-width: 0 !default; +$pgn-alert-margin-bottom: 1rem !default; +$pgn-alert-padding-x: 1.5rem !default; +$pgn-alert-padding-y: 1.5rem !default; +$pgn-color-dark-900: #1B2C21 !default; +$pgn-color-dark-800: #1D2F23 !default; +$pgn-color-dark-700: #1F3226 !default; +$pgn-color-dark-600: #23392A !default; +$pgn-color-dark-500: #273F2F !default; +$pgn-color-dark-400: #5D6F63 !default; +$pgn-color-dark-300: #939F97 !default; +$pgn-color-dark-200: #C9CFCB !default; +$pgn-color-dark-100: #F2F3F3 !default; +$pgn-color-light-900: #9E9B99 !default; +$pgn-color-light-800: #A9A6A4 !default; +$pgn-color-light-700: #B4B1AF !default; +$pgn-color-light-600: #CBC7C5 !default; +$pgn-color-light-500: #E1DDDB !default; +$pgn-color-light-400: #E9E6E4 !default; +$pgn-color-light-300: #F0EEED !default; +$pgn-color-light-200: #F8F7F6 !default; +$pgn-color-light-100: #FDFDFD !default; +$pgn-color-danger-900: #892029 !default; +$pgn-color-danger-800: #92222C !default; +$pgn-color-danger-700: #9C242E !default; +$pgn-color-danger-600: #B02934 !default; +$pgn-color-danger-400: #D2626B !default; +$pgn-color-danger-300: #E1969D !default; +$pgn-color-danger-200: #F0CBCE !default; +$pgn-color-danger-100: #FBF2F3 !default; +$pgn-color-warning-900: #B39800 !default; +$pgn-color-warning-800: #BFA300 !default; +$pgn-color-warning-700: #CCAE00 !default; +$pgn-color-warning-600: #E6C300 !default; +$pgn-color-warning-400: #FFE340 !default; +$pgn-color-warning-300: #FFEC80 !default; +$pgn-color-warning-200: #FFF6BF !default; +$pgn-color-warning-100: #FFFDF0 !default; +$pgn-color-info-900: #004C77 !default; +$pgn-color-info-800: #005280 !default; +$pgn-color-info-700: #005788 !default; +$pgn-color-info-600: #006299 !default; +$pgn-color-info-400: #4092BF !default; +$pgn-color-info-300: #80B6D5 !default; +$pgn-color-info-200: #BFDBEA !default; +$pgn-color-info-100: #F0F6FA !default; +$pgn-color-success-900: #105B3A !default; +$pgn-color-success-800: #11623E !default; +$pgn-color-success-700: #126842 !default; +$pgn-color-success-600: #15754B !default; +$pgn-color-success-400: #51A17E !default; +$pgn-color-success-300: #8BC1A9 !default; +$pgn-color-success-200: #C5E0D4 !default; +$pgn-color-success-100: #F1F8F5 !default; +$pgn-color-brand-900: #6E003B !default; +$pgn-color-brand-800: #76003F !default; +$pgn-color-brand-700: #7E0043 !default; +$pgn-color-brand-600: #8D004C !default; +$pgn-color-brand-500: #9D0054 !default; +$pgn-color-brand-400: #B6407F !default; +$pgn-color-brand-300: #CE80AA !default; +$pgn-color-brand-200: #E7BFD4 !default; +$pgn-color-brand-100: #F9F0F5 !default; +$pgn-color-secondary-900: #303030 !default; +$pgn-color-secondary-800: #343434 !default; +$pgn-color-secondary-700: #373737 !default; +$pgn-color-secondary-600: #3E3E3E !default; +$pgn-color-secondary-400: #747474 !default; +$pgn-color-secondary-300: #A2A2A2 !default; +$pgn-color-secondary-200: #D1D1D1 !default; +$pgn-color-secondary-100: #F4F4F4 !default; +$pgn-color-primary-900: #07223C !default; +$pgn-color-primary-800: #082440 !default; +$pgn-color-primary-700: #082644 !default; +$pgn-color-primary-600: #092B4D !default; +$pgn-color-primary-500: #0A3055 !default; +$pgn-color-primary-400: #476480 !default; +$pgn-color-primary-300: #8598AA !default; +$pgn-color-primary-200: #C2CBD5 !default; +$pgn-color-primary-100: #F0F3F5 !default; +$pgn-color-gray-900: #212529 !default; +$pgn-color-gray-800: #333333 !default; +$pgn-color-gray-700: #454545 !default; +$pgn-color-gray-600: #5C5C5C !default; +$pgn-color-gray-500: #707070 !default; +$pgn-color-gray-400: #8F8F8F !default; +$pgn-color-gray-300: #ADADAD !default; +$pgn-color-gray-200: #CCCCCC !default; +$pgn-color-gray-100: #EBEBEB !default; +$pgn-color-accent-b: #FFEE88 !default; +$pgn-color-accent-a: #00BBF9 !default; +$pgn-color-teal: #006DAA !default; +$pgn-color-yellow: #FFD900 !default; +$pgn-color-green: #178253 !default; +$pgn-color-red: #C32D3A !default; +$pgn-color-blue: #23419F !default; +$pgn-color-black: #000000 !default; +$pgn-color-white: #FFFFFF !default; +$pgn-caret-spacing: .255em !default; +$pgn-caret-vertical-align: .255em !default; +$pgn-caret-width: .3em !default; +$pgn-border-radius-sm: .25rem !default; +$pgn-border-radius-lg: .425rem !default; +$pgn-border-radius-base: .375rem !default; +$pgn-border-width: 1px !default; +$pgn-headings-color: $pgn-color-black !default; +$pgn-headings-font-weight: $pgn-font-weight-bold !default; +$pgn-font-weight-base: $pgn-font-weight-normal !default; +$pgn-font-size-mobile-h6: $pgn-font-size-h6 !default; +$pgn-font-size-mobile-h5: $pgn-font-size-h5 !default; +$pgn-font-size-mobile-h4: $pgn-font-size-h4 !default; +$pgn-font-size-mobile-h3: $pgn-font-size-h3 !default; +$pgn-font-size-mobile-h2: $pgn-font-size-h2 !default; +$pgn-font-family-base: $pgn-font-family-sans-serif !default; +$pgn-display-weight-4: $pgn-font-weight-bold !default; +$pgn-display-weight-3: $pgn-font-weight-bold !default; +$pgn-display-weight-2: $pgn-font-weight-bold !default; +$pgn-display-weight-1: $pgn-font-weight-bold !default; +$pgn-link-brand-inline-color: $pgn-color-brand-500 !default; +$pgn-link-brand-color: $pgn-color-brand-500 !default; +$pgn-link-muted-inline-color: $pgn-color-primary-500 !default; +$pgn-link-muted-color: $pgn-color-primary-500 !default; +$pgn-core-input-btn-border-width: $pgn-border-width !default; +$pgn-core-input-btn-line-height-lg: $pgn-line-height-lg !default; +$pgn-spinner-sm-height: $pgn-spinner-sm-width !default; +$pgn-spinner-height: $pgn-spinner-width !default; +$pgn-btn-tertiary-inverse-bg-active: $pgn-btn-tertiary-inverse-bg-hover !default; +$pgn-btn-tertiary-inverse-color: $pgn-color-white !default; +$pgn-btn-tertiary-bg-active: $pgn-color-light-500 !default; +$pgn-btn-tertiary-bg-hover: $pgn-color-light-500 !default; +$pgn-btn-tertiary-color: $pgn-color-gray-700 !default; +$pgn-btn-disabled-link-color: $pgn-color-gray-500 !default; +$pgn-btn-box-shadow-base: inset 0 1px 0 rgba($pgn-color-white, .15), 0 1px 1px rgba($pgn-color-black, .075) !default; +$pgn-btn-border-radius-sm: $pgn-border-radius-sm !default; +$pgn-btn-border-radius-lg: $pgn-border-radius-lg !default; +$pgn-btn-border-radius-base: $pgn-border-radius-base !default; +$pgn-btn-line-height-sm: $pgn-core-input-btn-line-height-sm !default; +$pgn-btn-line-height-base: $pgn-core-input-btn-line-height-base !default; +$pgn-btn-font-width: $pgn-font-weight-normal !default; +$pgn-btn-font-size-lg: $pgn-core-input-btn-font-size-lg !default; +$pgn-btn-font-size-sm: $pgn-core-input-btn-font-size-sm !default; +$pgn-btn-font-size-base: $pgn-core-input-btn-font-size-base !default; +$pgn-btn-font-family: $pgn-core-input-btn-font-family !default; +$pgn-btn-padding-sm-x: $pgn-core-input-btn-padding-sm-x !default; +$pgn-btn-padding-sm-y: $pgn-core-input-btn-padding-sm-y !default; +$pgn-btn-padding-x-lg: $pgn-core-input-btn-padding-lg-x !default; +$pgn-btn-padding-x-base: $pgn-core-input-btn-padding-x !default; +$pgn-btn-padding-y-lg: $pgn-core-input-btn-padding-lg-y !default; +$pgn-btn-padding-y-base: $pgn-core-input-btn-padding-y !default; +$pgn-avatar-border-base: solid 1px $pgn-color-light-300 !default; +$pgn-alert-color-content: $pgn-color-gray-700 !default; +$pgn-alert-color-title: $pgn-color-black !default; +$pgn-alert-font-weight-link: $pgn-font-weight-normal !default; +$pgn-alert-border-radius: $pgn-border-radius-base !default; +$pgn-text-muted: $pgn-color-gray-500 !default; +$pgn-color-danger-500: $pgn-color-red !default; +$pgn-color-warning-500: $pgn-color-yellow !default; +$pgn-color-info-500: $pgn-color-teal !default; +$pgn-color-success-500: $pgn-color-green !default; +$pgn-color-secondary-500: $pgn-color-gray-700 !default; +$pgn-body-color: $pgn-color-gray-700 !default; +$pgn-body-bg: $pgn-color-white !default; +$pgn-border-color: $pgn-color-gray-200 !default; +$pgn-link-inline-color: $pgn-color-info-500 !default; +$pgn-link-color: $pgn-color-info-500 !default; +$pgn-table-color-border: $pgn-border-color !default; +$pgn-table-color-caption: $pgn-text-muted !default; +$pgn-btn-border-width: $pgn-core-input-btn-border-width !default; +$pgn-btn-line-height-lg: $pgn-core-input-btn-line-height-lg !default; diff --git a/tokens/build/variables.css b/tokens/build/variables.css new file mode 100644 index 0000000000..069c61a538 --- /dev/null +++ b/tokens/build/variables.css @@ -0,0 +1,341 @@ +:root { + --pgn-paragraph-margin-bottom: 1rem; + --pgn-line-height-sm: 1.5; + --pgn-line-height-lg: 1.5; + --pgn-line-height-base: 1.5556; + --pgn-headings-line-height: 1.25; + --pgn-headings-font-family: null; + --pgn-headings-margin-bottom: .5rem; + --pgn-font-weight-bolder: bolder; + --pgn-font-weight-bold: 700; + --pgn-font-weight-semi-bold: 500; + --pgn-font-weight-normal: 400; + --pgn-font-weight-light: 300; + --pgn-font-weight-lighter: lighter; + --pgn-font-size-mobile-h1: 2.25rem; + --pgn-font-size-h6: .75rem; + --pgn-font-size-h5: .875rem; + --pgn-font-size-h4: 1.125rem; + --pgn-font-size-h3: 1.375rem; + --pgn-font-size-h2: 2rem; + --pgn-font-size-h1: 2.5rem; + --pgn-font-size-xs: .75rem; + --pgn-font-size-sm: .875rem; + --pgn-font-size-lg: 1.4063rem; + --pgn-font-size-base: 1.125rem; + --pgn-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; + --pgn-font-family-serif: serif; + --pgn-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-display-line-height-mobile: 3.5rem; + --pgn-display-line-height-base: 1; + --pgn-display-size-mobile: 3.25rem; + --pgn-display-size-4: 7.5rem; + --pgn-display-size-3: 5.625rem; + --pgn-display-size-2: 4.875rem; + --pgn-display-size-1: 3.75rem; + --pgn-transition-collapse: height .35s ease; + --pgn-transition-fade: opacity .15s linear; + --pgn-transition-base: all .2s ease-in-out; + --pgn-link-brand-inline-hover-decoration-color: #003C5E; + --pgn-link-brand-inline-hover-decoration: underline; + --pgn-link-brand-inline-hover-color: #003C5E; + --pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3); + --pgn-link-brand-inline-decoration: underline; + --pgn-link-brand-hover-decoration: underline; + --pgn-link-brand-hover-color: #51002B; + --pgn-link-brand-decoration: none; + --pgn-link-muted-inline-hover-decoration-color: #020911; + --pgn-link-muted-inline-hover-decoration: underline; + --pgn-link-muted-inline-hover-color: #020911; + --pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3); + --pgn-link-muted-inline-decoration: underline; + --pgn-link-muted-hover-decoration: underline; + --pgn-link-muted-hover-color: #020911; + --pgn-link-muted-decoration: none; + --pgn-link-inline-hover-decoration-color: #003C5E; + --pgn-link-inline-hover-decoration: underline; + --pgn-link-inline-hover-color: #003C5E; + --pgn-link-inline-decoration-color: rgba(0, 109, 170, .3); + --pgn-link-inline-decoration: underline; + --pgn-link-hover-decoration: underline; + --pgn-link-hover-color: #003C5E; + --pgn-link-decoration: none; + --pgn-zindex-tooltip: 1070; + --pgn-zindex-popover: 1060; + --pgn-zindex-modal: 1050; + --pgn-zindex-modal-backdrop: 1040; + --pgn-zindex-sheet: 1032; + --pgn-zindex-sheet-backdrop: 1031; + --pgn-zindex-fixed: 1030; + --pgn-zindex-sticky: 1020; + --pgn-zindex-dropdown: 1000; + --pgn-table-th-font-weight: null; + --pgn-table-cell-padding-sm: .3rem; + --pgn-table-cell-padding-base: .75rem; + --pgn-spacing-base-5-5: 4rem; + --pgn-spacing-base-4-5: 2rem; + --pgn-spacing-base-3-5: 1.25rem; + --pgn-spacing-base-2-5: .75rem; + --pgn-spacing-base-1-5: .375rem; + --pgn-spacing-base-6: 5rem; + --pgn-spacing-base-5: 3rem; + --pgn-spacing-base-4: 1.5rem; + --pgn-spacing-base-3: 1rem; + --pgn-spacing-base-2: .5rem; + --pgn-spacing-base-1: .25rem; + --pgn-spacing-base-0: 0; + --pgn-size-base-100: 100rem; + --pgn-size-base-75: 75rem; + --pgn-size-base-50: 50rem; + --pgn-size-base-25: 25rem; + --pgn-grid-row-columns: 6; + --pgn-grid-gutter-width: 24px; + --pgn-grid-columns: 12; + --pgn-breakpoint-xxl: 1400px; + --pgn-breakpoint-xl: 1200px; + --pgn-breakpoint-lg: 992px; + --pgn-breakpoint-md: 768px; + --pgn-breakpoint-sm: 576px; + --pgn-breakpoint-xs: 0; + --pgn-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-core-input-btn-focus-width: 1px; + --pgn-core-input-btn-line-height-sm: 1.4286; + --pgn-core-input-btn-line-height-base: 1.3333; + --pgn-core-input-btn-font-size-lg: 1.325rem; + --pgn-core-input-btn-font-size-sm: .875rem; + --pgn-core-input-btn-font-size-base: 1.125rem; + --pgn-core-input-btn-font-family: null; + --pgn-core-input-btn-padding-lg-x: 1.25rem; + --pgn-core-input-btn-padding-lg-y: .6875rem; + --pgn-core-input-btn-padding-sm-x: .75rem; + --pgn-core-input-btn-padding-sm-y: .4375rem; + --pgn-core-input-btn-padding-x: 1rem; + --pgn-core-input-btn-padding-y: .5625rem; + --pgn-spinner-sm-border-width: .2em; + --pgn-spinner-sm-width: 1rem; + --pgn-spinner-border-width: .25em; + --pgn-spinner-width: 2rem; + --pgn-btn-transition: null; + --pgn-btn-block-spacing-y: .5rem; + --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); + --pgn-btn-tertiary-inverse-bg-base: transparent; + --pgn-btn-tertiary-bg-base: transparent; + --pgn-btn-disabled-opacity: .65; + --pgn-btn-focus-gap: 1px; + --pgn-btn-focus-width: 2px; + --pgn-btn-box-shadow-active: none; + --pgn-avatar-button-padding-left-lg: .25em; + --pgn-avatar-button-padding-left-sm: .25em; + --pgn-avatar-button-padding-left-base: .25em; + --pgn-avatar-size-huge: 18.75rem; + --pgn-avatar-size-xxl: 11.5rem; + --pgn-avatar-size-xl: 6rem; + --pgn-avatar-size-lg: 4rem; + --pgn-avatar-size-sm: 2.25rem; + --pgn-avatar-size-xs: 1.5rem; + --pgn-avatar-size-base: 3rem; + --pgn-avatar-border-radius: 100%; + --pgn-alert-line-height: 1.5rem; + --pgn-alert-icon-space: .8rem; + --pgn-alert-level-color: 6; + --pgn-alert-level-border: -9; + --pgn-alert-level-bg: -10; + --pgn-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15); + --pgn-alert-font-size: .875rem; + --pgn-alert-border-width: 0; + --pgn-alert-margin-bottom: 1rem; + --pgn-alert-padding-x: 1.5rem; + --pgn-alert-padding-y: 1.5rem; + --pgn-color-dark-900: #1B2C21; + --pgn-color-dark-800: #1D2F23; + --pgn-color-dark-700: #1F3226; + --pgn-color-dark-600: #23392A; + --pgn-color-dark-500: #273F2F; + --pgn-color-dark-400: #5D6F63; + --pgn-color-dark-300: #939F97; + --pgn-color-dark-200: #C9CFCB; + --pgn-color-dark-100: #F2F3F3; + --pgn-color-light-900: #9E9B99; + --pgn-color-light-800: #A9A6A4; + --pgn-color-light-700: #B4B1AF; + --pgn-color-light-600: #CBC7C5; + --pgn-color-light-500: #E1DDDB; + --pgn-color-light-400: #E9E6E4; + --pgn-color-light-300: #F0EEED; + --pgn-color-light-200: #F8F7F6; + --pgn-color-light-100: #FDFDFD; + --pgn-color-danger-900: #892029; + --pgn-color-danger-800: #92222C; + --pgn-color-danger-700: #9C242E; + --pgn-color-danger-600: #B02934; + --pgn-color-danger-400: #D2626B; + --pgn-color-danger-300: #E1969D; + --pgn-color-danger-200: #F0CBCE; + --pgn-color-danger-100: #FBF2F3; + --pgn-color-warning-900: #B39800; + --pgn-color-warning-800: #BFA300; + --pgn-color-warning-700: #CCAE00; + --pgn-color-warning-600: #E6C300; + --pgn-color-warning-400: #FFE340; + --pgn-color-warning-300: #FFEC80; + --pgn-color-warning-200: #FFF6BF; + --pgn-color-warning-100: #FFFDF0; + --pgn-color-info-900: #004C77; + --pgn-color-info-800: #005280; + --pgn-color-info-700: #005788; + --pgn-color-info-600: #006299; + --pgn-color-info-400: #4092BF; + --pgn-color-info-300: #80B6D5; + --pgn-color-info-200: #BFDBEA; + --pgn-color-info-100: #F0F6FA; + --pgn-color-success-900: #105B3A; + --pgn-color-success-800: #11623E; + --pgn-color-success-700: #126842; + --pgn-color-success-600: #15754B; + --pgn-color-success-400: #51A17E; + --pgn-color-success-300: #8BC1A9; + --pgn-color-success-200: #C5E0D4; + --pgn-color-success-100: #F1F8F5; + --pgn-color-brand-900: #6E003B; + --pgn-color-brand-800: #76003F; + --pgn-color-brand-700: #7E0043; + --pgn-color-brand-600: #8D004C; + --pgn-color-brand-500: #9D0054; + --pgn-color-brand-400: #B6407F; + --pgn-color-brand-300: #CE80AA; + --pgn-color-brand-200: #E7BFD4; + --pgn-color-brand-100: #F9F0F5; + --pgn-color-secondary-900: #303030; + --pgn-color-secondary-800: #343434; + --pgn-color-secondary-700: #373737; + --pgn-color-secondary-600: #3E3E3E; + --pgn-color-secondary-400: #747474; + --pgn-color-secondary-300: #A2A2A2; + --pgn-color-secondary-200: #D1D1D1; + --pgn-color-secondary-100: #F4F4F4; + --pgn-color-primary-900: #07223C; + --pgn-color-primary-800: #082440; + --pgn-color-primary-700: #082644; + --pgn-color-primary-600: #092B4D; + --pgn-color-primary-500: #0A3055; + --pgn-color-primary-400: #476480; + --pgn-color-primary-300: #8598AA; + --pgn-color-primary-200: #C2CBD5; + --pgn-color-primary-100: #F0F3F5; + --pgn-color-gray-900: #212529; + --pgn-color-gray-800: #333333; + --pgn-color-gray-700: #454545; + --pgn-color-gray-600: #5C5C5C; + --pgn-color-gray-500: #707070; + --pgn-color-gray-400: #8F8F8F; + --pgn-color-gray-300: #ADADAD; + --pgn-color-gray-200: #CCCCCC; + --pgn-color-gray-100: #EBEBEB; + --pgn-color-accent-b: #FFEE88; + --pgn-color-accent-a: #00BBF9; + --pgn-color-teal: #006DAA; + --pgn-color-yellow: #FFD900; + --pgn-color-green: #178253; + --pgn-color-red: #C32D3A; + --pgn-color-blue: #23419F; + --pgn-color-black: #000000; + --pgn-color-white: #FFFFFF; + --pgn-caret-spacing: .255em; + --pgn-caret-vertical-align: .255em; + --pgn-caret-width: .3em; + --pgn-border-radius-sm: .25rem; + --pgn-border-radius-lg: .425rem; + --pgn-border-radius-base: .375rem; + --pgn-border-width: 1px; + --pgn-headings-color: var(--pgn-color-black); + --pgn-headings-font-weight: var(--pgn-font-weight-bold); + --pgn-font-weight-base: var(--pgn-font-weight-normal); + --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); + --pgn-font-size-mobile-h5: var(--pgn-font-size-h5); + --pgn-font-size-mobile-h4: var(--pgn-font-size-h4); + --pgn-font-size-mobile-h3: var(--pgn-font-size-h3); + --pgn-font-size-mobile-h2: var(--pgn-font-size-h2); + --pgn-font-family-base: var(--pgn-font-family-sans-serif); + --pgn-display-weight-4: var(--pgn-font-weight-bold); + --pgn-display-weight-3: var(--pgn-font-weight-bold); + --pgn-display-weight-2: var(--pgn-font-weight-bold); + --pgn-display-weight-1: var(--pgn-font-weight-bold); + --pgn-link-brand-inline-color: var(--pgn-color-brand-500); + --pgn-link-brand-color: var(--pgn-color-brand-500); + --pgn-link-muted-inline-color: var(--pgn-color-primary-500); + --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-core-input-btn-border-width: var(--pgn-border-width); + --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg); + --pgn-spinner-sm-height: var(--pgn-spinner-sm-width); + --pgn-spinner-height: var(--pgn-spinner-width); + --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); + --pgn-btn-tertiary-inverse-color: var(--pgn-color-white); + --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); + --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); + --pgn-btn-tertiary-color: var(--pgn-color-gray-700); + --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); + --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075); + --pgn-btn-border-radius-sm: var(--pgn-border-radius-sm); + --pgn-btn-border-radius-lg: var(--pgn-border-radius-lg); + --pgn-btn-border-radius-base: var(--pgn-border-radius-base); + --pgn-btn-line-height-sm: var(--pgn-core-input-btn-line-height-sm); + --pgn-btn-line-height-base: var(--pgn-core-input-btn-line-height-base); + --pgn-btn-font-width: var(--pgn-font-weight-normal); + --pgn-btn-font-size-lg: var(--pgn-core-input-btn-font-size-lg); + --pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm); + --pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base); + --pgn-btn-font-family: var(--pgn-core-input-btn-font-family); + --pgn-btn-padding-sm-x: var(--pgn-core-input-btn-padding-sm-x); + --pgn-btn-padding-sm-y: var(--pgn-core-input-btn-padding-sm-y); + --pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); + --pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x); + --pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); + --pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300); + --pgn-alert-color-content: var(--pgn-color-gray-700); + --pgn-alert-color-title: var(--pgn-color-black); + --pgn-alert-font-weight-link: var(--pgn-font-weight-normal); + --pgn-alert-border-radius: var(--pgn-border-radius-base); + --pgn-text-muted: var(--pgn-color-gray-500); + --pgn-color-danger-500: var(--pgn-color-red); + --pgn-color-warning-500: var(--pgn-color-yellow); + --pgn-color-info-500: var(--pgn-color-teal); + --pgn-color-success-500: var(--pgn-color-green); + --pgn-color-secondary-500: var(--pgn-color-gray-700); + --pgn-body-color: var(--pgn-color-gray-700); + --pgn-body-bg: var(--pgn-color-white); + --pgn-border-color: var(--pgn-color-gray-200); + --pgn-link-inline-color: var(--pgn-color-info-500); + --pgn-link-color: var(--pgn-color-info-500); + --pgn-table-color-border: var(--pgn-border-color); + --pgn-table-color-caption: var(--pgn-text-muted); + --pgn-btn-border-width: var(--pgn-core-input-btn-border-width); + --pgn-btn-line-height-lg: var(--pgn-core-input-btn-line-height-lg); +} diff --git a/tokens/import-css-tokens.js b/tokens/import-css-tokens.js new file mode 100644 index 0000000000..c7b96c8084 --- /dev/null +++ b/tokens/import-css-tokens.js @@ -0,0 +1,12 @@ +const fs = require('fs'); + +const content = fs.readFileSync('../scss/core/_tokens.scss', 'utf-8'); +const variables = fs.readFileSync('../style-dictionary-build/css/variables.css', 'utf-8'); + +const rootRegex = /:root\s*\{[\s\S]*}/g; +const cleanVariables = rootRegex.exec(variables); +const cleanContent = content.replace(rootRegex, ''); + +const newContent = `${cleanVariables}${cleanContent}`; + +fs.writeFileSync('../scss/core/_tokens.scss', newContent); diff --git a/tokens/map-scss-to-css.js b/tokens/map-scss-to-css.js new file mode 100644 index 0000000000..ebe361f691 --- /dev/null +++ b/tokens/map-scss-to-css.js @@ -0,0 +1,16 @@ +const fs = require('fs'); +const { getSCSStoCSSMap, getFilesWithExtension } = require('./utils'); + +const BASE_PATH = '../tokens'; +const BASE_PREFIX = '--pgn'; + +const result = {}; +const tokenPaths = getFilesWithExtension(BASE_PATH, '.json'); + +tokenPaths.forEach(tokenFile => { + const content = fs.readFileSync(tokenFile, 'utf-8'); + const parsed = JSON.parse(content); + getSCSStoCSSMap(BASE_PREFIX, parsed, result); +}); + +fs.writeFileSync('../style-dictionary-build/scss-to-css-map.json', JSON.stringify(result)); diff --git a/tokens/replace-variables.js b/tokens/replace-variables.js new file mode 100644 index 0000000000..2c6028a6bf --- /dev/null +++ b/tokens/replace-variables.js @@ -0,0 +1,19 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +const { program } = require('commander'); +const { replaceVariables, getFilesWithExtension } = require('./utils'); + +const BASE_PATH = '../src/Bubble'; + +const cssFiles = getFilesWithExtension(BASE_PATH, '.scss'); + +program + .requiredOption('--direction ', + 'Missing parameter "direction". Possible values: "css-to-scss" or "scss-to-css"', 'css-to-scss') + .action((options) => { + const { direction } = options; + cssFiles.forEach(filePath => { + replaceVariables(filePath, direction); + }); + }); + +program.parse(process.argv); diff --git a/tokens/borders-fills/border.tokens.json b/tokens/source/borders-fills/border.tokens.json similarity index 100% rename from tokens/borders-fills/border.tokens.json rename to tokens/source/borders-fills/border.tokens.json diff --git a/tokens/caret/caret.tokens.json b/tokens/source/caret/caret.tokens.json similarity index 100% rename from tokens/caret/caret.tokens.json rename to tokens/source/caret/caret.tokens.json diff --git a/tokens/colors/body/body.tokens.json b/tokens/source/colors/body/body.tokens.json similarity index 100% rename from tokens/colors/body/body.tokens.json rename to tokens/source/colors/body/body.tokens.json diff --git a/tokens/colors/colors.tokens.json b/tokens/source/colors/colors.tokens.json similarity index 100% rename from tokens/colors/colors.tokens.json rename to tokens/source/colors/colors.tokens.json diff --git a/tokens/colors/text/text.tokens.json b/tokens/source/colors/text/text.tokens.json similarity index 100% rename from tokens/colors/text/text.tokens.json rename to tokens/source/colors/text/text.tokens.json diff --git a/tokens/components/alert/alert.tokens.json b/tokens/source/components/alert/alert.tokens.json similarity index 100% rename from tokens/components/alert/alert.tokens.json rename to tokens/source/components/alert/alert.tokens.json diff --git a/tokens/components/avatar/avatar.tokens.json b/tokens/source/components/avatar/avatar.tokens.json similarity index 100% rename from tokens/components/avatar/avatar.tokens.json rename to tokens/source/components/avatar/avatar.tokens.json diff --git a/tokens/components/avatarButton/avatarButton.tokens.json b/tokens/source/components/avatarButton/avatarButton.tokens.json similarity index 100% rename from tokens/components/avatarButton/avatarButton.tokens.json rename to tokens/source/components/avatarButton/avatarButton.tokens.json diff --git a/tokens/components/button/button.tokens.json b/tokens/source/components/button/button.tokens.json similarity index 100% rename from tokens/components/button/button.tokens.json rename to tokens/source/components/button/button.tokens.json diff --git a/tokens/components/spinner/spiner.tokens.json b/tokens/source/components/spinner/spiner.tokens.json similarity index 100% rename from tokens/components/spinner/spiner.tokens.json rename to tokens/source/components/spinner/spiner.tokens.json diff --git a/tokens/core/core.tokens.json b/tokens/source/core/core.tokens.json similarity index 100% rename from tokens/core/core.tokens.json rename to tokens/source/core/core.tokens.json diff --git a/tokens/elevation-shadows/box-shadow/box-shadow.tokens.json b/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json similarity index 100% rename from tokens/elevation-shadows/box-shadow/box-shadow.tokens.json rename to tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json diff --git a/tokens/layout/breakpoints/breakpoints.tokens.json b/tokens/source/layout/breakpoints/breakpoints.tokens.json similarity index 100% rename from tokens/layout/breakpoints/breakpoints.tokens.json rename to tokens/source/layout/breakpoints/breakpoints.tokens.json diff --git a/tokens/layout/grid/grid.tokens.json b/tokens/source/layout/grid/grid.tokens.json similarity index 100% rename from tokens/layout/grid/grid.tokens.json rename to tokens/source/layout/grid/grid.tokens.json diff --git a/tokens/layout/sizes/sizes.tokens.json b/tokens/source/layout/sizes/sizes.tokens.json similarity index 100% rename from tokens/layout/sizes/sizes.tokens.json rename to tokens/source/layout/sizes/sizes.tokens.json diff --git a/tokens/layout/spacing/spacing.tokens.json b/tokens/source/layout/spacing/spacing.tokens.json similarity index 100% rename from tokens/layout/spacing/spacing.tokens.json rename to tokens/source/layout/spacing/spacing.tokens.json diff --git a/tokens/layout/table/table.tokens.json b/tokens/source/layout/table/table.tokens.json similarity index 100% rename from tokens/layout/table/table.tokens.json rename to tokens/source/layout/table/table.tokens.json diff --git a/tokens/layout/z-index/zindex.tokens.json b/tokens/source/layout/z-index/zindex.tokens.json similarity index 100% rename from tokens/layout/z-index/zindex.tokens.json rename to tokens/source/layout/z-index/zindex.tokens.json diff --git a/tokens/links/links.tokens.json b/tokens/source/links/links.tokens.json similarity index 88% rename from tokens/links/links.tokens.json rename to tokens/source/links/links.tokens.json index 580ba81c0c..6288f968e8 100644 --- a/tokens/links/links.tokens.json +++ b/tokens/source/links/links.tokens.json @@ -9,7 +9,7 @@ "inline": { "color": { "value": "{color.info.500.value}", "themeable": true, "source": "$inline-link-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-decoration" }, - "decoration-color": { "value": "rgba(0, 109, 170, 0.3)", "themeable": true, "source": "$inline-link-decoration-color" }, + "decoration-color": { "value": "rgba(0, 109, 170, .3)", "themeable": true, "source": "$inline-link-decoration-color" }, "hover": { "color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-hover-decoration" }, @@ -26,7 +26,7 @@ "inline": { "color": { "value": "{color.primary.500.value}", "themeable": true, "source": "$muted-inline-link-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$muted-inline-link-decoration" }, - "decoration-color": { "value": "rgba(10, 48, 85, 0.3)", "themeable": true, "source": "$muted-inline-link-decoration-color" }, + "decoration-color": { "value": "rgba(10, 48, 85, .3)", "themeable": true, "source": "$muted-inline-link-decoration-color" }, "hover": { "color": { "value": "#020911", "themeable": true, "source": "$muted-inline-link-hover-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$muted-inline-link-hover-decoration" }, @@ -44,7 +44,7 @@ "inline": { "color": { "value": "{color.brand.500.value}", "themeable": true, "source": "$inline-link-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-decoration" }, - "decoration-color": { "value": "rgba(0, 109, 170, 0.3)", "themeable": true, "source": "$inline-link-decoration-color" }, + "decoration-color": { "value": "rgba(0, 109, 170, .3)", "themeable": true, "source": "$inline-link-decoration-color" }, "hover": { "color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-hover-decoration" }, diff --git a/tokens/transition/transition.tokens.json b/tokens/source/transition/transition.tokens.json similarity index 100% rename from tokens/transition/transition.tokens.json rename to tokens/source/transition/transition.tokens.json diff --git a/tokens/typography/display/display.tokens.json b/tokens/source/typography/display/display.tokens.json similarity index 100% rename from tokens/typography/display/display.tokens.json rename to tokens/source/typography/display/display.tokens.json diff --git a/tokens/typography/font/font.tokens.json b/tokens/source/typography/font/font.tokens.json similarity index 97% rename from tokens/typography/font/font.tokens.json rename to tokens/source/typography/font/font.tokens.json index 12f92e1fcb..c44632a999 100644 --- a/tokens/typography/font/font.tokens.json +++ b/tokens/source/typography/font/font.tokens.json @@ -18,7 +18,7 @@ }, "size": { "base": { "value": "1.125rem", "themeable": true, "source": "$font-size-base" }, - "lg": { "value": "1.40625rem", "themeable": true, "source": "$font-size-lg" }, + "lg": { "value": "1.4063rem", "themeable": true, "source": "$font-size-lg" }, "sm": { "value": ".875rem", "themeable": true, "source": "$font-size-sm" }, "xs": { "value": ".75rem", "themeable": true, "source": "$font-size-xs" }, "h1": { "value": "2.5rem", "themeable": true, "source": "$h1-font-size" }, diff --git a/tokens/typography/headings/headings.tokens.json b/tokens/source/typography/headings/headings.tokens.json similarity index 100% rename from tokens/typography/headings/headings.tokens.json rename to tokens/source/typography/headings/headings.tokens.json diff --git a/tokens/typography/line-height/line-height.tokens.json b/tokens/source/typography/line-height/line-height.tokens.json similarity index 100% rename from tokens/typography/line-height/line-height.tokens.json rename to tokens/source/typography/line-height/line-height.tokens.json diff --git a/tokens/typography/paragraph/paragraph.tokens.json b/tokens/source/typography/paragraph/paragraph.tokens.json similarity index 100% rename from tokens/typography/paragraph/paragraph.tokens.json rename to tokens/source/typography/paragraph/paragraph.tokens.json diff --git a/tokens/utils.js b/tokens/utils.js new file mode 100644 index 0000000000..9dadf4599f --- /dev/null +++ b/tokens/utils.js @@ -0,0 +1,53 @@ +const fs = require('fs'); + +function getFilesWithExtension(path, extension, files = []) { + const content = fs.statSync(path); + if (content.isDirectory()) { + const contentPaths = fs.readdirSync(path); + contentPaths.forEach(contentPath => { + getFilesWithExtension(`${path}/${contentPath}`, extension, files); + }); + } else if (path.endsWith(extension)) { + files.push(path); + } + return files; +} + +function getSCSStoCSSMap(prefix, key, result) { + Object.keys(key).forEach(node => { + if (key[node].constructor.name === 'Object') { + const newPrefix = `${prefix}-${node}`; + getSCSStoCSSMap(newPrefix, key[node], result); + } else if (node === 'source') { + // eslint-disable-next-line no-param-reassign + result[key[node]] = prefix; + } + }); + return result; +} + +function cssVariableWrapper(variable) { + return `var(${variable})`; +} + +function replaceVariables(path, direction = 'css-to-scss') { + const targetFile = fs.readFileSync(path, 'utf-8'); + const mapFile = fs.readFileSync('../style-dictionary-build/scss-to-css-map.json', 'utf-8'); + const variables = JSON.parse(mapFile); + let result = targetFile; + Object.keys(variables).forEach(variable => { + const cssVariable = cssVariableWrapper(variables[variable]); + if (direction === 'css-to-scss') { + result = result.replaceAll(variable, cssVariable); + } else { + result = result.replaceAll(cssVariable, variable); + } + }); + fs.writeFileSync(path, result); +} + +module.exports = { + getFilesWithExtension, + getSCSStoCSSMap, + replaceVariables, +}; From 252bca8c548502e871c386513f78727703953e1b Mon Sep 17 00:00:00 2001 From: Viktor Rusakov <52399399+viktorrusakov@users.noreply.github.com> Date: Wed, 7 Sep 2022 14:23:01 +0300 Subject: [PATCH 03/19] refactor: move tokens code to a separate package (#1608) --- package-lock.json | 760 ----------------------------- package.json | 4 +- tokens/build-tokens.js | 2 +- tokens/build/scss-to-css-map.json | 1 + tokens/import-css-tokens.js | 12 - tokens/map-scss-to-css.js | 5 +- tokens/package-lock.json | 773 ++++++++++++++++++++++++++++++ tokens/package.json | 17 + tokens/replace-variables.js | 19 +- tokens/utils.js | 23 +- 10 files changed, 817 insertions(+), 799 deletions(-) create mode 100644 tokens/build/scss-to-css-map.json delete mode 100644 tokens/import-css-tokens.js create mode 100644 tokens/package-lock.json create mode 100644 tokens/package.json diff --git a/package-lock.json b/package-lock.json index 26995ac7c0..7b54731d0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -84,7 +84,6 @@ "regenerator-runtime": "^0.13.9", "sass": "^1.32.13", "semantic-release": "^19.0.3", - "style-dictionary": "^3.7.1", "stylelint": "^14.7.1", "stylelint-config-standard-scss": "^4.0.0", "ts-jest": "^28.0.7", @@ -5331,36 +5330,6 @@ } ] }, - "node_modules/capital-case": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", - "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", - "dev": true, - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case-first": "^2.0.2" - } - }, - "node_modules/capital-case/node_modules/lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "dependencies": { - "tslib": "^2.0.3" - } - }, - "node_modules/capital-case/node_modules/no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "dependencies": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - }, "node_modules/cardinal": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz", @@ -5396,65 +5365,6 @@ "node": ">=4" } }, - "node_modules/change-case": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", - "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", - "dev": true, - "dependencies": { - "camel-case": "^4.1.2", - "capital-case": "^1.0.4", - "constant-case": "^3.0.4", - "dot-case": "^3.0.4", - "header-case": "^2.0.4", - "no-case": "^3.0.4", - "param-case": "^3.0.4", - "pascal-case": "^3.1.2", - "path-case": "^3.0.4", - "sentence-case": "^3.0.4", - "snake-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, - "node_modules/change-case/node_modules/camel-case": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", - "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", - "dev": true, - "dependencies": { - "pascal-case": "^3.1.2", - "tslib": "^2.0.3" - } - }, - "node_modules/change-case/node_modules/lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "dependencies": { - "tslib": "^2.0.3" - } - }, - "node_modules/change-case/node_modules/no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "dependencies": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - }, - "node_modules/change-case/node_modules/param-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", - "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", - "dev": true, - "dependencies": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, "node_modules/char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -5689,45 +5599,6 @@ "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==", "dev": true }, - "node_modules/constant-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", - "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", - "dev": true, - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case": "^2.0.2" - } - }, - "node_modules/constant-case/node_modules/lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "dependencies": { - "tslib": "^2.0.3" - } - }, - "node_modules/constant-case/node_modules/no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "dependencies": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - }, - "node_modules/constant-case/node_modules/upper-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", - "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", - "dev": true, - "dependencies": { - "tslib": "^2.0.3" - } - }, "node_modules/conventional-changelog-angular": { "version": "5.0.13", "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz", @@ -6328,35 +6199,6 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, - "node_modules/dot-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", - "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", - "dev": true, - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, - "node_modules/dot-case/node_modules/lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "dependencies": { - "tslib": "^2.0.3" - } - }, - "node_modules/dot-case/node_modules/no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "dependencies": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - }, "node_modules/dot-prop": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", @@ -8238,16 +8080,6 @@ "he": "bin/he" } }, - "node_modules/header-case": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", - "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", - "dev": true, - "dependencies": { - "capital-case": "^1.0.4", - "tslib": "^2.0.3" - } - }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -11252,12 +11084,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==", - "dev": true - }, "node_modules/jsonfile": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", @@ -15061,45 +14887,6 @@ "url": "https://github.com/inikulin/parse5?sponsor=1" } }, - "node_modules/pascal-case": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", - "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", - "dev": true, - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, - "node_modules/pascal-case/node_modules/lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "dependencies": { - "tslib": "^2.0.3" - } - }, - "node_modules/pascal-case/node_modules/no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "dependencies": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - }, - "node_modules/path-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", - "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", - "dev": true, - "dependencies": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -16658,36 +16445,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/sentence-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", - "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", - "dev": true, - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case-first": "^2.0.2" - } - }, - "node_modules/sentence-case/node_modules/lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "dependencies": { - "tslib": "^2.0.3" - } - }, - "node_modules/sentence-case/node_modules/no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "dependencies": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - }, "node_modules/serialize-javascript": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz", @@ -16835,16 +16592,6 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, - "node_modules/snake-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", - "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", - "dev": true, - "dependencies": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -17159,128 +16906,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/style-dictionary": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.1.tgz", - "integrity": "sha512-yYU9Z/J8Znj9T9oJVjo8VOYamrOxv0UbBKPjhSt+PharxrhyQCM4RWb71fgEfv2pK9KO8G83/0ChDNQZ1mn0wQ==", - "dev": true, - "dependencies": { - "chalk": "^4.0.0", - "change-case": "^4.1.2", - "commander": "^8.3.0", - "fs-extra": "^10.0.0", - "glob": "^7.2.0", - "json5": "^2.2.0", - "jsonc-parser": "^3.0.0", - "lodash": "^4.17.15", - "tinycolor2": "^1.4.1" - }, - "bin": { - "style-dictionary": "bin/style-dictionary" - }, - "engines": { - "node": ">=12.0.0" - } - }, - "node_modules/style-dictionary/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==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/style-dictionary/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/style-dictionary/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==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/style-dictionary/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==", - "dev": true - }, - "node_modules/style-dictionary/node_modules/commander": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", - "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", - "dev": true, - "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==", - "dev": true, - "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/style-dictionary/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/style-dictionary/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/style-search": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", @@ -17872,15 +17497,6 @@ "node": ">= 6" } }, - "node_modules/tinycolor2": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", - "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", - "dev": true, - "engines": { - "node": "*" - } - }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -18280,15 +17896,6 @@ "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==", "dev": true }, - "node_modules/upper-case-first": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", - "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", - "dev": true, - "dependencies": { - "tslib": "^2.0.3" - } - }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -22704,38 +22311,6 @@ "integrity": "sha512-JVQnfoO7FK7WvU4ZkBRbPjaot4+YqxogSDosHv0Hv5mWpUESmN+UubMU6L/hGz8QlQ2aY5U0vR6MOs6j/CXpNA==", "dev": true }, - "capital-case": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", - "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", - "dev": true, - "requires": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case-first": "^2.0.2" - }, - "dependencies": { - "lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "requires": { - "tslib": "^2.0.3" - } - }, - "no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "requires": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - } - } - }, "cardinal": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz", @@ -22765,67 +22340,6 @@ "supports-color": "^5.3.0" } }, - "change-case": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", - "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", - "dev": true, - "requires": { - "camel-case": "^4.1.2", - "capital-case": "^1.0.4", - "constant-case": "^3.0.4", - "dot-case": "^3.0.4", - "header-case": "^2.0.4", - "no-case": "^3.0.4", - "param-case": "^3.0.4", - "pascal-case": "^3.1.2", - "path-case": "^3.0.4", - "sentence-case": "^3.0.4", - "snake-case": "^3.0.4", - "tslib": "^2.0.3" - }, - "dependencies": { - "camel-case": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", - "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", - "dev": true, - "requires": { - "pascal-case": "^3.1.2", - "tslib": "^2.0.3" - } - }, - "lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "requires": { - "tslib": "^2.0.3" - } - }, - "no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "requires": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - }, - "param-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", - "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", - "dev": true, - "requires": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - } - } - }, "char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -23013,47 +22527,6 @@ "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==", "dev": true }, - "constant-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", - "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", - "dev": true, - "requires": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case": "^2.0.2" - }, - "dependencies": { - "lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "requires": { - "tslib": "^2.0.3" - } - }, - "no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "requires": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - }, - "upper-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", - "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", - "dev": true, - "requires": { - "tslib": "^2.0.3" - } - } - } - }, "conventional-changelog-angular": { "version": "5.0.13", "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz", @@ -23509,37 +22982,6 @@ "domhandler": "^5.0.1" } }, - "dot-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", - "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", - "dev": true, - "requires": { - "no-case": "^3.0.4", - "tslib": "^2.0.3" - }, - "dependencies": { - "lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "requires": { - "tslib": "^2.0.3" - } - }, - "no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "requires": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - } - } - }, "dot-prop": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", @@ -24950,16 +24392,6 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, - "header-case": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", - "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", - "dev": true, - "requires": { - "capital-case": "^1.0.4", - "tslib": "^2.0.3" - } - }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -27183,12 +26615,6 @@ "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", "dev": true }, - "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==", - "dev": true - }, "jsonfile": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", @@ -29845,47 +29271,6 @@ "parse5": "^7.0.0" } }, - "pascal-case": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", - "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", - "dev": true, - "requires": { - "no-case": "^3.0.4", - "tslib": "^2.0.3" - }, - "dependencies": { - "lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "requires": { - "tslib": "^2.0.3" - } - }, - "no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "requires": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - } - } - }, - "path-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", - "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", - "dev": true, - "requires": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, "path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -31009,38 +30394,6 @@ "integrity": "sha512-6IiqeZNgq01qGf0TId0t3NvKzSvUsjcpdEO3AQNeIjR6A2+ckTnQlDpl4qu1bjRv0RzN3FP9hzFmws3lKqRWkA==", "dev": true }, - "sentence-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", - "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", - "dev": true, - "requires": { - "no-case": "^3.0.4", - "tslib": "^2.0.3", - "upper-case-first": "^2.0.2" - }, - "dependencies": { - "lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, - "requires": { - "tslib": "^2.0.3" - } - }, - "no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, - "requires": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" - } - } - } - }, "serialize-javascript": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz", @@ -31159,16 +30512,6 @@ } } }, - "snake-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", - "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", - "dev": true, - "requires": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" - } - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -31426,94 +30769,6 @@ "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true }, - "style-dictionary": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.1.tgz", - "integrity": "sha512-yYU9Z/J8Znj9T9oJVjo8VOYamrOxv0UbBKPjhSt+PharxrhyQCM4RWb71fgEfv2pK9KO8G83/0ChDNQZ1mn0wQ==", - "dev": true, - "requires": { - "chalk": "^4.0.0", - "change-case": "^4.1.2", - "commander": "^8.3.0", - "fs-extra": "^10.0.0", - "glob": "^7.2.0", - "json5": "^2.2.0", - "jsonc-parser": "^3.0.0", - "lodash": "^4.17.15", - "tinycolor2": "^1.4.1" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "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==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "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==", - "dev": true - }, - "commander": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", - "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", - "dev": true - }, - "glob": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", - "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "dev": true, - "requires": { - "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" - } - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, "style-search": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", @@ -31972,12 +31227,6 @@ } } }, - "tinycolor2": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", - "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", - "dev": true - }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -32256,15 +31505,6 @@ "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==", "dev": true }, - "upper-case-first": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", - "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", - "dev": true, - "requires": { - "tslib": "^2.0.3" - } - }, "uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index a61299781e..12a6542489 100644 --- a/package.json +++ b/package.json @@ -44,8 +44,7 @@ "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --format transifex", "type-check": "tsc --noEmit", "type-check:watch": "npm run type-check -- --watch", - "build-types": "tsc --emitDeclarationOnly", - "build_tokens": "node tokens/build-tokens.js" + "build-types": "tsc --emitDeclarationOnly" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.1.1", @@ -130,7 +129,6 @@ "semantic-release": "^19.0.3", "stylelint": "^14.7.1", "stylelint-config-standard-scss": "^4.0.0", - "style-dictionary": "^3.7.1", "ts-jest": "^28.0.7", "typescript": "^4.7.4" }, diff --git a/tokens/build-tokens.js b/tokens/build-tokens.js index 78b63defff..5cd6cc6a2d 100644 --- a/tokens/build-tokens.js +++ b/tokens/build-tokens.js @@ -35,7 +35,7 @@ StyleDictionary.registerFormat({ }); const paragonStyleDictionary = StyleDictionary.extend({ - source: ['tokens/**/*.json'], + source: ['./source/**/*.json'], platforms: { scss: { transformGroup: 'scss', diff --git a/tokens/build/scss-to-css-map.json b/tokens/build/scss-to-css-map.json new file mode 100644 index 0000000000..0ea8d936d6 --- /dev/null +++ b/tokens/build/scss-to-css-map.json @@ -0,0 +1 @@ +{"$border-width":"--pgn-border-width","$border-color":"--pgn-border-color","$border-radius":"--pgn-border-radius-base","$border-radius-lg":"--pgn-border-radius-lg","$border-radius-sm":"--pgn-border-radius-sm","$caret-width":"--pgn-caret-width","$caret-vertical-align":"--pgn-caret-vertical-align","$caret-spacing":"--pgn-caret-spacing","$body-bg":"--pgn-body-bg","$body-color":"--pgn-body-color","$white":"--pgn-color-white","$black":"--pgn-color-black","$blue":"--pgn-color-blue","$red":"--pgn-color-red","$green":"--pgn-color-green","$yellow":"--pgn-color-yellow","$teal":"--pgn-color-teal","$accent-a":"--pgn-color-accent-a","$accent-b":"--pgn-color-accent-b","$gray-100":"--pgn-color-gray-100","$gray-200":"--pgn-color-gray-200","$gray-300":"--pgn-color-gray-300","$gray-400":"--pgn-color-gray-400","$gray-500":"--pgn-color-gray-500","$gray-600":"--pgn-color-gray-600","$gray-700":"--pgn-color-gray-700","$gray-800":"--pgn-color-gray-800","$gray-900":"--pgn-color-gray-900","$primary-100":"--pgn-color-primary-100","$primary-200":"--pgn-color-primary-200","$primary-300":"--pgn-color-primary-300","$primary-400":"--pgn-color-primary-400","$primary-500":"--pgn-color-primary-500","$primary-600":"--pgn-color-primary-600","$primary-700":"--pgn-color-primary-700","$primary-800":"--pgn-color-primary-800","$primary-900":"--pgn-color-primary-900","$secondary-100":"--pgn-color-secondary-100","$secondary-200":"--pgn-color-secondary-200","$secondary-300":"--pgn-color-secondary-300","$secondary-400":"--pgn-color-secondary-400","$secondary-500":"--pgn-color-secondary-500","$secondary-600":"--pgn-color-secondary-600","$secondary-700":"--pgn-color-secondary-700","$secondary-800":"--pgn-color-secondary-800","$secondary-900":"--pgn-color-secondary-900","$brand-100":"--pgn-color-brand-100","$brand-200":"--pgn-color-brand-200","$brand-300":"--pgn-color-brand-300","$brand-400":"--pgn-color-brand-400","$brand-500":"--pgn-color-brand-500","$brand-600":"--pgn-color-brand-600","$brand-700":"--pgn-color-brand-700","$brand-800":"--pgn-color-brand-800","$brand-900":"--pgn-color-brand-900","$success-100":"--pgn-color-success-100","$success-200":"--pgn-color-success-200","$success-300":"--pgn-color-success-300","$success-400":"--pgn-color-success-400","$success-500":"--pgn-color-success-500","$success-600":"--pgn-color-success-600","$success-700":"--pgn-color-success-700","$success-800":"--pgn-color-success-800","$success-900":"--pgn-color-success-900","$info-100":"--pgn-color-info-100","$info-200":"--pgn-color-info-200","$info-300":"--pgn-color-info-300","$info-400":"--pgn-color-info-400","$info-500":"--pgn-color-info-500","$info-600":"--pgn-color-info-600","$info-700":"--pgn-color-info-700","$info-800":"--pgn-color-info-800","$info-900":"--pgn-color-info-900","$warning-100":"--pgn-color-warning-100","$warning-200":"--pgn-color-warning-200","$warning-300":"--pgn-color-warning-300","$warning-400":"--pgn-color-warning-400","$warning-500":"--pgn-color-warning-500","$warning-600":"--pgn-color-warning-600","$warning-700":"--pgn-color-warning-700","$warning-800":"--pgn-color-warning-800","$warning-900":"--pgn-color-warning-900","$danger-100":"--pgn-color-danger-100","$danger-200":"--pgn-color-danger-200","$danger-300":"--pgn-color-danger-300","$danger-400":"--pgn-color-danger-400","$danger-500":"--pgn-color-danger-500","$danger-600":"--pgn-color-danger-600","$danger-700":"--pgn-color-danger-700","$danger-800":"--pgn-color-danger-800","$danger-900":"--pgn-color-danger-900","$light-100":"--pgn-color-light-100","$light-200":"--pgn-color-light-200","$light-300":"--pgn-color-light-300","$light-400":"--pgn-color-light-400","$light-500":"--pgn-color-light-500","$light-600":"--pgn-color-light-600","$light-700":"--pgn-color-light-700","$light-800":"--pgn-color-light-800","$light-900":"--pgn-color-light-900","$dark-100":"--pgn-color-dark-100","$dark-200":"--pgn-color-dark-200","$dark-300":"--pgn-color-dark-300","$dark-400":"--pgn-color-dark-400","$dark-500":"--pgn-color-dark-500","$dark-600":"--pgn-color-dark-600","$dark-700":"--pgn-color-dark-700","$dark-800":"--pgn-color-dark-800","$dark-900":"--pgn-color-dark-900","$text-muted":"--pgn-text-muted","$alert-padding-y":"--pgn-alert-padding-y","$alert-padding-x":"--pgn-alert-padding-x","$alert-margin-bottom":"--pgn-alert-margin-bottom","$alert-border-radius":"--pgn-alert-border-radius","$alert-border-width":"--pgn-alert-border-width","$alert-link-font-weight":"--pgn-alert-font-weight-link","$alert-font-size":"--pgn-alert-font-size","$alert-title-color":"--pgn-alert-color-title","$alert-content-color":"--pgn-alert-color-content","$alert-box-shadow":"--pgn-alert-box-shadow","$alert-bg-level":"--pgn-alert-level-bg","$alert-border-level":"--pgn-alert-level-border","$alert-color-level":"--pgn-alert-level-color","$alert-icon-space":"--pgn-alert-icon-space","$alert-line-height":"--pgn-alert-line-height","$avatar-border":"--pgn-avatar-border-base","$avatar-border-radius":"--pgn-avatar-border-radius","$avatar-size":"--pgn-avatar-size-base","$avatar-size-xs":"--pgn-avatar-size-xs","$avatar-size-sm":"--pgn-avatar-size-sm","$avatar-size-lg":"--pgn-avatar-size-lg","$avatar-size-xl":"--pgn-avatar-size-xl","$avatar-size-xxl":"--pgn-avatar-size-xxl","$avatar-size-huge":"--pgn-avatar-size-huge","$avatar-button-padding-left":"--pgn-avatar-button-padding-left-base","$avatar-button-padding-left-sm":"--pgn-avatar-button-padding-left-sm","$avatar-button-padding-left-lg":"--pgn-avatar-button-padding-left-lg","$btn-padding-y":"--pgn-btn-padding-y-base","$btn-padding-y-lg":"--pgn-btn-padding-y-lg","$btn-padding-x":"--pgn-btn-padding-x-base","$btn-padding-x-lg":"--pgn-btn-padding-x-lg","$input-btn-padding-y-sm":"--pgn-core-input-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-core-input-btn-padding-sm-x","$btn-font-family":"--pgn-btn-font-family","$btn-font-size":"--pgn-btn-font-size-base","$btn-font-size-sm":"--pgn-btn-font-size-sm","$btn-font-size-lg":"--pgn-btn-font-size-lg","$btn-font-weight":"--pgn-btn-font-width","$btn-line-height":"--pgn-btn-line-height-base","$btn-line-height-sm":"--pgn-btn-line-height-sm","$btn-line-height-lg":"--pgn-btn-line-height-lg","$btn-border-width":"--pgn-btn-border-width","$btn-border-radius":"--pgn-btn-border-radius-base","$btn-border-radius-lg":"--pgn-btn-border-radius-lg","$btn-border-radius-sm":"--pgn-btn-border-radius-sm","$btn-box-shadow":"--pgn-btn-box-shadow-base","$btn-active-box-shadow":"--pgn-btn-box-shadow-active","$btn-focus-width":"--pgn-btn-focus-width","$btn-focus-gap":"--pgn-btn-focus-gap","$btn-disabled-opacity":"--pgn-btn-disabled-opacity","$btn-link-disabled-color":"--pgn-btn-disabled-link-color","$btn-tertiary-color":"--pgn-btn-tertiary-color","$btn-tertiary-bg":"--pgn-btn-tertiary-bg-base","$btn-tertiary-hover-bg":"--pgn-btn-tertiary-bg-hover","$btn-tertiary-active-bg":"--pgn-btn-tertiary-bg-active","$btn-inverse-tertiary-color":"--pgn-btn-tertiary-inverse-color","$btn-inverse-tertiary-bg":"--pgn-btn-tertiary-inverse-bg-base","$btn-inverse-tertiary-hover-bg":"--pgn-btn-tertiary-inverse-bg-hover","$btn-inverse-tertiary-active-bg":"--pgn-btn-tertiary-inverse-bg-active","$btn-block-spacing-y":"--pgn-btn-block-spacing-y","$btn-transition":"--pgn-btn-transition","$spinner-width":"--pgn-spinner-width","$spinner-height":"--pgn-spinner-height","$spinner-border-width":"--pgn-spinner-border-width","$spinner-width-sm":"--pgn-spinner-sm-width","$spinner-height-sm":"--pgn-spinner-sm-height","$spinner-border-width-sm":"--pgn-spinner-sm-border-width","$input-btn-padding-y":"--pgn-core-input-btn-padding-y","$input-btn-padding-x":"--pgn-core-input-btn-padding-x","$input-btn-padding-y-lg":"--pgn-core-input-btn-padding-lg-y","$input-btn-padding-x-lg":"--pgn-core-input-btn-padding-lg-x","$input-btn-font-family":"--pgn-core-input-btn-font-family","$input-btn-font-size":"--pgn-core-input-btn-font-size-base","$input-btn-font-size-sm":"--pgn-core-input-btn-font-size-sm","$input-btn-font-size-lg":"--pgn-core-input-btn-font-size-lg","$input-btn-line-height":"--pgn-core-input-btn-line-height-base","$input-btn-line-height-sm":"--pgn-core-input-btn-line-height-sm","$input-btn-line-height-lg":"--pgn-core-input-btn-line-height-lg","$input-btn-focus-width":"--pgn-core-input-btn-focus-width","$input-btn-border-width":"--pgn-core-input-btn-border-width","$box-shadow-down-1":"--pgn-box-shadow-down-1","$box-shadow-down-2":"--pgn-box-shadow-down-2","$box-shadow-down-3":"--pgn-box-shadow-down-3","$box-shadow-down-4":"--pgn-box-shadow-down-4","$box-shadow-down-5":"--pgn-box-shadow-down-5","$box-shadow-left-1":"--pgn-box-shadow-left-1","$box-shadow-left-2":"--pgn-box-shadow-left-2","$box-shadow-left-3":"--pgn-box-shadow-left-3","$box-shadow-left-4":"--pgn-box-shadow-left-4","$box-shadow-left-5":"--pgn-box-shadow-left-5","$box-shadow-up-1":"--pgn-box-shadow-up-1","$box-shadow-up-2":"--pgn-box-shadow-up-2","$box-shadow-up-3":"--pgn-box-shadow-up-3","$box-shadow-up-4":"--pgn-box-shadow-up-4","$box-shadow-up-5":"--pgn-box-shadow-up-5","$box-shadow-right-1":"--pgn-box-shadow-right-1","$box-shadow-right-2":"--pgn-box-shadow-right-2","$box-shadow-right-3":"--pgn-box-shadow-right-3","$box-shadow-right-4":"--pgn-box-shadow-right-4","$box-shadow-right-5":"--pgn-box-shadow-right-5","$box-shadow-centered-1":"--pgn-box-shadow-centered-1","$box-shadow-centered-2":"--pgn-box-shadow-centered-2","$box-shadow-centered-3":"--pgn-box-shadow-centered-3","$box-shadow-centered-4":"--pgn-box-shadow-centered-4","$box-shadow-centered-5":"--pgn-box-shadow-centered-5","$grid-columns":"--pgn-grid-columns","$grid-gutter-width":"--pgn-grid-gutter-width","$grid-row-columns":"--pgn-grid-row-columns","$table-cell-padding":"--pgn-table-cell-padding-base","$table-cell-padding-sm":"--pgn-table-cell-padding-sm","$table-caption-color":"--pgn-table-color-caption","$table-border-color":"--pgn-table-color-border","$table-th-font-weight":"--pgn-table-th-font-weight","$zindex-dropdown":"--pgn-zindex-dropdown","$zindex-sticky":"--pgn-zindex-sticky","$zindex-fixed":"--pgn-zindex-fixed","$zindex-sheet-backdrop":"--pgn-zindex-sheet-backdrop","$zindex-sheet":"--pgn-zindex-sheet","$zindex-modal-backdrop":"--pgn-zindex-modal-backdrop","$zindex-modal":"--pgn-zindex-modal","$zindex-popover":"--pgn-zindex-popover","$zindex-tooltip":"--pgn-zindex-tooltip","$link-color":"--pgn-link-color","$link-decoration":"--pgn-link-decoration","$link-hover-color":"--pgn-link-hover-color","$link-hover-decoration":"--pgn-link-hover-decoration","$inline-link-color":"--pgn-link-brand-inline-color","$inline-link-decoration":"--pgn-link-brand-inline-decoration","$inline-link-decoration-color":"--pgn-link-brand-inline-decoration-color","$inline-link-hover-color":"--pgn-link-brand-inline-hover-color","$inline-link-hover-decoration":"--pgn-link-brand-inline-hover-decoration","$inline-link-hover-decoration-color":"--pgn-link-brand-inline-hover-decoration-color","$muted-link-color":"--pgn-link-muted-color","$muted-link-decoration":"--pgn-link-muted-decoration","$muted-link-hover-color":"--pgn-link-muted-hover-color","$muted-link-hover-decoration":"--pgn-link-muted-hover-decoration","$muted-inline-link-color":"--pgn-link-muted-inline-color","$muted-inline-link-decoration":"--pgn-link-muted-inline-decoration","$muted-inline-link-decoration-color":"--pgn-link-muted-inline-decoration-color","$muted-inline-link-hover-color":"--pgn-link-muted-inline-hover-color","$muted-inline-link-hover-decoration":"--pgn-link-muted-inline-hover-decoration","$muted-inline-link-hover-decoration-color":"--pgn-link-muted-inline-hover-decoration-color","$brand-link-color":"--pgn-link-brand-color","$brand-link-decoration":"--pgn-link-brand-decoration","$brand-link-hover-color":"--pgn-link-brand-hover-color","$brand-link-hover-decoration":"--pgn-link-brand-hover-decoration","$transition-base":"--pgn-transition-base","$transition-fade":"--pgn-transition-fade","$transition-collapse":"--pgn-transition-collapse","$display1-size":"--pgn-display-size-1","$display2-size":"--pgn-display-size-2","$display3-size":"--pgn-display-size-3","$display4-size":"--pgn-display-size-4","$display-mobile-size":"--pgn-display-size-mobile","$display1-weight":"--pgn-display-weight-1","$display2-weight":"--pgn-display-weight-2","$display3-weight":"--pgn-display-weight-3","$display4-weight":"--pgn-display-weight-4","$display-line-height":"--pgn-display-line-height-base","$display-mobile-line-height":"--pgn-display-line-height-mobile","$font-family-sans-serif":"--pgn-font-family-sans-serif","$font-family-serif":"--pgn-font-family-serif","$font-family-monospace":"--pgn-font-family-monospace","$font-family-base":"--pgn-font-family-base","$font-size-base":"--pgn-font-size-base","$font-size-lg":"--pgn-font-size-lg","$font-size-sm":"--pgn-font-size-sm","$font-size-xs":"--pgn-font-size-xs","$h1-font-size":"--pgn-font-size-h1","$h2-font-size":"--pgn-font-size-h2","$h3-font-size":"--pgn-font-size-h3","$h4-font-size":"--pgn-font-size-h4","$h5-font-size":"--pgn-font-size-h5","$h6-font-size":"--pgn-font-size-h6","$h1-mobile-font-size":"--pgn-font-size-mobile-h1","$h2-mobile-font-size":"--pgn-font-size-mobile-h2","$h3-mobile-font-size":"--pgn-font-size-mobile-h3","$h4-mobile-font-size":"--pgn-font-size-mobile-h4","$h5-mobile-font-size":"--pgn-font-size-mobile-h5","$h6-mobile-font-size":"--pgn-font-size-mobile-h6","$font-weight-lighter":"--pgn-font-weight-lighter","$font-weight-light":"--pgn-font-weight-light","$font-weight-normal":"--pgn-font-weight-normal","$font-weight-semi-bold":"--pgn-font-weight-semi-bold","$font-weight-bold":"--pgn-font-weight-bold","$font-weight-bolder":"--pgn-font-weight-bolder","$font-weight-base":"--pgn-font-weight-base","$headings-margin-bottom":"--pgn-headings-margin-bottom","$headings-font-family":"--pgn-headings-font-family","$headings-font-weight":"--pgn-headings-font-weight","$headings-line-height":"--pgn-headings-line-height","$headings-color":"--pgn-headings-color","$line-height-base":"--pgn-line-height-base","$line-height-lg":"--pgn-line-height-lg","$line-height-sm":"--pgn-line-height-sm","$paragraph-margin-bottom":"--pgn-paragraph-margin-bottom"} \ No newline at end of file diff --git a/tokens/import-css-tokens.js b/tokens/import-css-tokens.js deleted file mode 100644 index c7b96c8084..0000000000 --- a/tokens/import-css-tokens.js +++ /dev/null @@ -1,12 +0,0 @@ -const fs = require('fs'); - -const content = fs.readFileSync('../scss/core/_tokens.scss', 'utf-8'); -const variables = fs.readFileSync('../style-dictionary-build/css/variables.css', 'utf-8'); - -const rootRegex = /:root\s*\{[\s\S]*}/g; -const cleanVariables = rootRegex.exec(variables); -const cleanContent = content.replace(rootRegex, ''); - -const newContent = `${cleanVariables}${cleanContent}`; - -fs.writeFileSync('../scss/core/_tokens.scss', newContent); diff --git a/tokens/map-scss-to-css.js b/tokens/map-scss-to-css.js index ebe361f691..eb3be9aa15 100644 --- a/tokens/map-scss-to-css.js +++ b/tokens/map-scss-to-css.js @@ -1,7 +1,8 @@ const fs = require('fs'); +const path = require('path'); const { getSCSStoCSSMap, getFilesWithExtension } = require('./utils'); -const BASE_PATH = '../tokens'; +const BASE_PATH = path.resolve(__dirname, './source'); const BASE_PREFIX = '--pgn'; const result = {}; @@ -13,4 +14,4 @@ tokenPaths.forEach(tokenFile => { getSCSStoCSSMap(BASE_PREFIX, parsed, result); }); -fs.writeFileSync('../style-dictionary-build/scss-to-css-map.json', JSON.stringify(result)); +fs.writeFileSync(path.resolve(__dirname, './build/scss-to-css-map.json'), JSON.stringify(result)); diff --git a/tokens/package-lock.json b/tokens/package-lock.json new file mode 100644 index 0000000000..3caf0b7ee9 --- /dev/null +++ b/tokens/package-lock.json @@ -0,0 +1,773 @@ +{ + "name": "paragon-design-tokens", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "paragon-design-tokens", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "commander": "^7.1.0", + "style-dictionary": "^3.7.1" + } + }, + "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/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/camel-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", + "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "dependencies": { + "pascal-case": "^3.1.2", + "tslib": "^2.0.3" + } + }, + "node_modules/capital-case": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", + "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/change-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", + "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "dependencies": { + "camel-case": "^4.1.2", + "capital-case": "^1.0.4", + "constant-case": "^3.0.4", + "dot-case": "^3.0.4", + "header-case": "^2.0.4", + "no-case": "^3.0.4", + "param-case": "^3.0.4", + "pascal-case": "^3.1.2", + "path-case": "^3.0.4", + "sentence-case": "^3.0.4", + "snake-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "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/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/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "engines": { + "node": ">= 10" + } + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + }, + "node_modules/constant-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", + "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case": "^2.0.2" + } + }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "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" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + }, + "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" + } + }, + "node_modules/graceful-fs": { + "version": "4.2.10", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", + "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==" + }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/header-case": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", + "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "dependencies": { + "capital-case": "^1.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dependencies": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, + "node_modules/json5": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", + "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "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", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/param-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", + "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/path-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", + "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sentence-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", + "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, + "node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/style-dictionary": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.1.tgz", + "integrity": "sha512-yYU9Z/J8Znj9T9oJVjo8VOYamrOxv0UbBKPjhSt+PharxrhyQCM4RWb71fgEfv2pK9KO8G83/0ChDNQZ1mn0wQ==", + "dependencies": { + "chalk": "^4.0.0", + "change-case": "^4.1.2", + "commander": "^8.3.0", + "fs-extra": "^10.0.0", + "glob": "^7.2.0", + "json5": "^2.2.0", + "jsonc-parser": "^3.0.0", + "lodash": "^4.17.15", + "tinycolor2": "^1.4.1" + }, + "bin": { + "style-dictionary": "bin/style-dictionary" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/style-dictionary/node_modules/commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "engines": { + "node": ">= 12" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", + "engines": { + "node": "*" + } + }, + "node_modules/tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + }, + "node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/upper-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", + "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/upper-case-first": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", + "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" + } + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + }, + "balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + }, + "brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "requires": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "camel-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", + "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "requires": { + "pascal-case": "^3.1.2", + "tslib": "^2.0.3" + } + }, + "capital-case": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", + "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "change-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", + "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "requires": { + "camel-case": "^4.1.2", + "capital-case": "^1.0.4", + "constant-case": "^3.0.4", + "dot-case": "^3.0.4", + "header-case": "^2.0.4", + "no-case": "^3.0.4", + "param-case": "^3.0.4", + "pascal-case": "^3.1.2", + "path-case": "^3.0.4", + "sentence-case": "^3.0.4", + "snake-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "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==", + "requires": { + "color-name": "~1.1.4" + } + }, + "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==" + }, + "commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==" + }, + "concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + }, + "constant-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", + "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case": "^2.0.2" + } + }, + "dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "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==", + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + } + }, + "fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + }, + "glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "requires": { + "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" + } + }, + "graceful-fs": { + "version": "4.2.10", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", + "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==" + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" + }, + "header-case": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", + "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "requires": { + "capital-case": "^1.0.4", + "tslib": "^2.0.3" + } + }, + "inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "requires": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + }, + "json5": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", + "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==" + }, + "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==" + }, + "jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "requires": { + "graceful-fs": "^4.1.6", + "universalify": "^2.0.0" + } + }, + "lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "requires": { + "tslib": "^2.0.3" + } + }, + "minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "requires": { + "brace-expansion": "^1.1.7" + } + }, + "no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "requires": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, + "once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "requires": { + "wrappy": "1" + } + }, + "param-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", + "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "path-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", + "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==" + }, + "sentence-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", + "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, + "snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "style-dictionary": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.1.tgz", + "integrity": "sha512-yYU9Z/J8Znj9T9oJVjo8VOYamrOxv0UbBKPjhSt+PharxrhyQCM4RWb71fgEfv2pK9KO8G83/0ChDNQZ1mn0wQ==", + "requires": { + "chalk": "^4.0.0", + "change-case": "^4.1.2", + "commander": "^8.3.0", + "fs-extra": "^10.0.0", + "glob": "^7.2.0", + "json5": "^2.2.0", + "jsonc-parser": "^3.0.0", + "lodash": "^4.17.15", + "tinycolor2": "^1.4.1" + }, + "dependencies": { + "commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==" + } + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "requires": { + "has-flag": "^4.0.0" + } + }, + "tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==" + }, + "tslib": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" + }, + "universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==" + }, + "upper-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", + "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "requires": { + "tslib": "^2.0.3" + } + }, + "upper-case-first": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", + "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "requires": { + "tslib": "^2.0.3" + } + }, + "wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" + } + } +} diff --git a/tokens/package.json b/tokens/package.json new file mode 100644 index 0000000000..9175fd31d8 --- /dev/null +++ b/tokens/package.json @@ -0,0 +1,17 @@ +{ + "name": "paragon-design-tokens", + "version": "1.0.0", + "description": "Paragon's design system based on Style Dictionary approach.", + "main": "build-tokens.js", + "scripts": { + "build-tokens": "node build-tokens.js", + "replace-variables": "node replace-variables.js", + "build-scss-to-css-map": "node map-scss-to-css.js" + }, + "author": "", + "license": "ISC", + "dependencies": { + "commander": "^7.1.0", + "style-dictionary": "^3.7.1" + } +} diff --git a/tokens/replace-variables.js b/tokens/replace-variables.js index 2c6028a6bf..329f4563c5 100644 --- a/tokens/replace-variables.js +++ b/tokens/replace-variables.js @@ -1,17 +1,16 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -const { program } = require('commander'); +const { program, Option } = require('commander'); const { replaceVariables, getFilesWithExtension } = require('./utils'); -const BASE_PATH = '../src/Bubble'; - -const cssFiles = getFilesWithExtension(BASE_PATH, '.scss'); - program - .requiredOption('--direction ', - 'Missing parameter "direction". Possible values: "css-to-scss" or "scss-to-css"', 'css-to-scss') + .description('CLI to replace SCSS variables to CSS variables and vice versa in .scss files.') + .requiredOption('-p, --path ', 'Path to the file or directory where to replace variables.') + .addOption(new Option('-d, --direction ', 'Map direction: css-to-scss or scss-to-css.') + .choices(['scss-to-css', 'css-to-scss']) + .default('scss-to-css')) .action((options) => { - const { direction } = options; - cssFiles.forEach(filePath => { + const { direction, path } = options; + const sourceFiles = getFilesWithExtension(path, '.scss'); + sourceFiles.forEach(filePath => { replaceVariables(filePath, direction); }); }); diff --git a/tokens/utils.js b/tokens/utils.js index 9dadf4599f..6a8f7b5136 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -1,14 +1,15 @@ const fs = require('fs'); +const path = require('path'); -function getFilesWithExtension(path, extension, files = []) { - const content = fs.statSync(path); +function getFilesWithExtension(location, extension, files = []) { + const content = fs.statSync(location); if (content.isDirectory()) { - const contentPaths = fs.readdirSync(path); + const contentPaths = fs.readdirSync(location); contentPaths.forEach(contentPath => { - getFilesWithExtension(`${path}/${contentPath}`, extension, files); + getFilesWithExtension(path.join(location, contentPath), extension, files); }); - } else if (path.endsWith(extension)) { - files.push(path); + } else if (location.endsWith(extension)) { + files.push(location); } return files; } @@ -30,20 +31,20 @@ function cssVariableWrapper(variable) { return `var(${variable})`; } -function replaceVariables(path, direction = 'css-to-scss') { - const targetFile = fs.readFileSync(path, 'utf-8'); - const mapFile = fs.readFileSync('../style-dictionary-build/scss-to-css-map.json', 'utf-8'); +function replaceVariables(filePath, direction = 'css-to-scss') { + const targetFile = fs.readFileSync(filePath, 'utf-8'); + const mapFile = fs.readFileSync(path.resolve(__dirname, './build/scss-to-css-map.json'), 'utf-8'); const variables = JSON.parse(mapFile); let result = targetFile; Object.keys(variables).forEach(variable => { const cssVariable = cssVariableWrapper(variables[variable]); - if (direction === 'css-to-scss') { + if (direction === 'scss-to-css') { result = result.replaceAll(variable, cssVariable); } else { result = result.replaceAll(cssVariable, variable); } }); - fs.writeFileSync(path, result); + fs.writeFileSync(filePath, result); } module.exports = { From 9fe31cafdada6865478859793f14f5db31af292f Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Fri, 16 Sep 2022 16:09:10 +0300 Subject: [PATCH 04/19] [BD-46] implement and use CSS variables in components (#1614) feat: implement component tokens --- scss/core/tokens.css | 688 ++++++++++++++- src/Annotation/Annotation.scss | 40 +- src/Breadcrumb/Breadcrumb.scss | 8 +- src/Bubble/Bubble.scss | 4 +- src/Bubble/_variables.scss | 8 +- src/Button/Button.scss | 198 ++--- src/Card/Card.scss | 6 +- src/Code/_variables.scss | 4 +- src/DataTable/DataTable.scss | 11 +- src/DataTable/_variables.scss | 10 + src/Form/_Form.scss | 14 +- src/Form/_mixins.scss | 4 +- src/IconButton/IconButton.scss | 18 +- src/IconButton/_variables.scss | 17 + src/Menu/Menu.scss | 8 +- src/Menu/_variables.scss | 5 + src/Modal/_ModalDialog.scss | 14 +- src/Nav/Nav.scss | 4 +- src/ProductTour/Checkpoint.scss | 8 +- tokens/build-tokens.js | 22 +- tokens/build/_variables.scss | 688 ++++++++++++++- tokens/build/variables.css | 688 ++++++++++++++- tokens/source/colors/colors.tokens.json | 32 +- .../colors/component/component.tokens.json | 8 + .../action-row/action-row.tokens.json | 8 + .../annotation/annotation.tokens.json | 30 + .../avatar-button.tokens.json} | 0 .../source/components/badge/badge.tokens.json | 25 + .../breadcrumb/breadcrumb.tokens.json | 40 + .../components/bubble/bubble.tokens.json | 10 + .../components/button/button.tokens.json | 42 +- .../source/components/card/card.tokens.json | 96 +++ .../components/carousel/carousel.tokens.json | 42 + .../source/components/chip/chip.tokens.json | 28 + .../close-button/close-button.tokens.json | 12 + .../source/components/code/code.tokens.json | 43 + .../collapsible/collapsible.tokens.json | 25 + .../container/container.tokens.json | 13 + .../data-table/data-table.tokens.json | 31 + .../components/dropdown/dropdown.tokens.json | 66 ++ .../components/dropzone/dropzone.tokens.json | 25 + .../source/components/form/form.tokens.json | 785 ++++++++++++++++++ .../icon-button/icon-button.tokens.json | 17 + .../source/components/icon/icon.tokens.json | 8 + .../source/components/image/image.tokens.json | 24 + .../source/components/menu/menu.tokens.json | 13 + .../source/components/modal/modal.tokens.json | 94 +++ tokens/source/components/nav/nav.tokens.json | 70 ++ .../components/navbar/navbar.tokens.json | 116 +++ .../pagination/pagination.tokens.json | 102 +++ .../components/popover/popover.tokens.json | 68 ++ .../product-tour/product-tour.tokens.json | 37 + .../progress-bar/progress-bar.tokens.json | 41 + .../search-field/search-field.tokens.json | 35 + .../selectable-box/selectable-box.tokens.json | 17 + ...spiner.tokens.json => spinner.tokens.json} | 0 .../source/components/stack/stack.tokens.json | 5 + .../components/sticky/sticky.tokens.json | 17 + .../source/components/table/table.tokens.json | 48 ++ .../source/components/tabs/tabs.tokens.json | 13 + .../source/components/toast/toast.tokens.json | 43 + .../components/tooltip/tooltip.tokens.json | 42 + tokens/source/core/core.tokens.json | 11 +- .../box-shadow/box-shadow.tokens.json | 30 + tokens/source/links/links.tokens.json | 18 +- .../source/typography/font/font.tokens.json | 4 + 66 files changed, 4385 insertions(+), 316 deletions(-) create mode 100644 src/DataTable/_variables.scss create mode 100644 src/IconButton/_variables.scss create mode 100644 src/Menu/_variables.scss create mode 100644 tokens/source/colors/component/component.tokens.json create mode 100644 tokens/source/components/action-row/action-row.tokens.json create mode 100644 tokens/source/components/annotation/annotation.tokens.json rename tokens/source/components/{avatarButton/avatarButton.tokens.json => avatar-button/avatar-button.tokens.json} (100%) create mode 100644 tokens/source/components/badge/badge.tokens.json create mode 100644 tokens/source/components/breadcrumb/breadcrumb.tokens.json create mode 100644 tokens/source/components/bubble/bubble.tokens.json create mode 100644 tokens/source/components/card/card.tokens.json create mode 100644 tokens/source/components/carousel/carousel.tokens.json create mode 100644 tokens/source/components/chip/chip.tokens.json create mode 100644 tokens/source/components/close-button/close-button.tokens.json create mode 100644 tokens/source/components/code/code.tokens.json create mode 100644 tokens/source/components/collapsible/collapsible.tokens.json create mode 100644 tokens/source/components/container/container.tokens.json create mode 100644 tokens/source/components/data-table/data-table.tokens.json create mode 100644 tokens/source/components/dropdown/dropdown.tokens.json create mode 100644 tokens/source/components/dropzone/dropzone.tokens.json create mode 100644 tokens/source/components/form/form.tokens.json create mode 100644 tokens/source/components/icon-button/icon-button.tokens.json create mode 100644 tokens/source/components/icon/icon.tokens.json create mode 100644 tokens/source/components/image/image.tokens.json create mode 100644 tokens/source/components/menu/menu.tokens.json create mode 100644 tokens/source/components/modal/modal.tokens.json create mode 100644 tokens/source/components/nav/nav.tokens.json create mode 100644 tokens/source/components/navbar/navbar.tokens.json create mode 100644 tokens/source/components/pagination/pagination.tokens.json create mode 100644 tokens/source/components/popover/popover.tokens.json create mode 100644 tokens/source/components/product-tour/product-tour.tokens.json create mode 100644 tokens/source/components/progress-bar/progress-bar.tokens.json create mode 100644 tokens/source/components/search-field/search-field.tokens.json create mode 100644 tokens/source/components/selectable-box/selectable-box.tokens.json rename tokens/source/components/spinner/{spiner.tokens.json => spinner.tokens.json} (100%) create mode 100644 tokens/source/components/stack/stack.tokens.json create mode 100644 tokens/source/components/sticky/sticky.tokens.json create mode 100644 tokens/source/components/table/table.tokens.json create mode 100644 tokens/source/components/tabs/tabs.tokens.json create mode 100644 tokens/source/components/toast/toast.tokens.json create mode 100644 tokens/source/components/tooltip/tooltip.tokens.json diff --git a/scss/core/tokens.css b/scss/core/tokens.css index 069c61a538..474dbec35b 100644 --- a/scss/core/tokens.css +++ b/scss/core/tokens.css @@ -19,6 +19,8 @@ --pgn-font-size-h3: 1.375rem; --pgn-font-size-h2: 2rem; --pgn-font-size-h1: 2.5rem; + --pgn-font-size-small-x: 75%; + --pgn-font-size-small-base: 87.5%; --pgn-font-size-xs: .75rem; --pgn-font-size-sm: .875rem; --pgn-font-size-lg: 1.4063rem; @@ -72,9 +74,6 @@ --pgn-zindex-fixed: 1030; --pgn-zindex-sticky: 1020; --pgn-zindex-dropdown: 1000; - --pgn-table-th-font-weight: null; - --pgn-table-cell-padding-sm: .3rem; - --pgn-table-cell-padding-base: .75rem; --pgn-spacing-base-5-5: 4rem; --pgn-spacing-base-4-5: 2rem; --pgn-spacing-base-3-5: 1.25rem; @@ -125,6 +124,11 @@ --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); --pgn-core-input-btn-focus-width: 1px; --pgn-core-input-btn-line-height-sm: 1.4286; --pgn-core-input-btn-line-height-base: 1.3333; @@ -138,22 +142,308 @@ --pgn-core-input-btn-padding-sm-y: .4375rem; --pgn-core-input-btn-padding-x: 1rem; --pgn-core-input-btn-padding-y: .5625rem; + --pgn-core-spacer: 1rem; + --pgn-tooltip-arrow-height: .4rem; + --pgn-tooltip-arrow-width: .8rem; + --pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); + --pgn-tooltip-margin: 0; + --pgn-tooltip-padding-x: .5rem; + --pgn-tooltip-padding-y: .5rem; + --pgn-tooltip-opacity: 1; + --pgn-tooltip-max-width: 200px; + --pgn-toast-container-gutter-sm: .625rem; + --pgn-toast-container-gutter-lg: 1.25rem; + --pgn-toast-header-color-border: rgba(0, 0, 0, .5); + --pgn-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15); + --pgn-toast-border-radius: .25rem; + --pgn-toast-border-color: rgba(0, 0, 0, .1); + --pgn-toast-border-width: 1px; + --pgn-toast-color-base: null; + --pgn-toast-font-size: .875rem; + --pgn-toast-padding-y: .25rem; + --pgn-toast-padding-x: .75rem; + --pgn-toast-max-width: 400px; + --pgn-tabs-notification-width: 1rem; + --pgn-tabs-notification-height: 1rem; + --pgn-table-th-font-weight: null; + --pgn-table-level-border: -6; + --pgn-table-level-bg: -9; + --pgn-table-striped-order: odd; + --pgn-table-dark-bg-hover: rgba(255, 255, 255, .075); + --pgn-table-dark-bg-accent: rgba(255, 255, 255, .05); + --pgn-table-bg-hover: rgba(0, 0, 0, .075); + --pgn-table-bg-accent: rgba(0, 0, 0, .05); + --pgn-table-bg-base: null; + --pgn-table-cell-padding-sm: .3rem; + --pgn-table-cell-padding-base: .75rem; + --pgn-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); + --pgn-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); + --pgn-sticky-offset: 0; + --pgn-stack-gap: 0; --pgn-spinner-sm-border-width: .2em; --pgn-spinner-sm-width: 1rem; --pgn-spinner-border-width: .25em; --pgn-spinner-width: 2rem; + --pgn-selectable-box-cols-number-max: 12; + --pgn-selectable-box-cols-number-min: 1; + --pgn-selectable-box-box-space: .75rem; + --pgn-selectable-box-border-radius: .25rem; + --pgn-selectable-box-padding: 1rem; + --pgn-search-field-button-margin: .5rem; + --pgn-search-field-disabled-opacity: .3; + --pgn-search-field-line-height: 1.5rem; + --pgn-search-field-border-width-focus: .3125rem; + --pgn-search-field-border-width-interaction: .125rem; + --pgn-search-field-border-width-base: .0625rem; + --pgn-search-field-border-radius: 0; + --pgn-progress-bar-hint-annotation-gap: .5rem; + --pgn-progress-bar-threshold-circle: .5625rem; + --pgn-progress-bar-bar-transition: width .6s ease; + --pgn-progress-bar-bar-animation-timing: 1s linear infinite; + --pgn-progress-bar-box-shadow: none; + --pgn-progress-bar-border-width: 1px; + --pgn-progress-bar-border-radius: 0; + --pgn-progress-bar-bg: transparent; + --pgn-progress-bar-height-annotated: .3125rem; + --pgn-progress-bar-height-base: 1rem; + --pgn-product-tour-checkpoint-zindex: 1060; + --pgn-product-tour-checkpoint-width-max: 480px; + --pgn-product-tour-checkpoint-width-arrow: 15px; + --pgn-product-tour-checkpoint-width-border: 8px; + --pgn-popover-arrow-height: .5rem; + --pgn-popover-arrow-width: 1rem; + --pgn-popover-icon-width: 1rem; + --pgn-popover-icon-height: 1rem; + --pgn-popover-icon-margin-right: .5rem; + --pgn-popover-header-padding-x: 1rem; + --pgn-popover-header-padding-y: .5rem; + --pgn-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); + --pgn-popover-border-color: rgba(0, 0, 0, .2); + --pgn-popover-max-width: 480px; + --pgn-reduced-dropdown-width-min: 6rem; + --pgn-reduced-dropdown-height-max: 60vh; + --pgn-pagination-focus-border-width: .125rem; + --pgn-pagination-focus-box-outline: 0; + --pgn-pagination-secondary-height-sm: 2.75rem; + --pgn-pagination-secondary-height-base: 2.75rem; + --pgn-pagination-toggle-border-sm: .25rem; + --pgn-pagination-toggle-border-base: .3125rem; + --pgn-pagination-icon-height: 2.25rem; + --pgn-pagination-icon-width: 2.25rem; + --pgn-pagination-icon-size-sm: 1rem; + --pgn-pagination-icon-size-base: 1.375rem; + --pgn-pagination-font-size-sm: .875rem; + --pgn-pagination-line-height: 1.5rem; + --pgn-pagination-margin-y: .5rem; + --pgn-pagination-margin-x: .5rem; + --pgn-pagination-padding-icon: .5rem; + --pgn-pagination-padding-x-lg: 1.5rem; + --pgn-pagination-padding-x-sm: .6rem; + --pgn-pagination-padding-x-base: 1rem; + --pgn-pagination-padding-y-lg: .75rem; + --pgn-pagination-padding-y-sm: .8rem; + --pgn-pagination-padding-y-base: .625rem; + --pgn-navbar-light-toggler-border-color: rgba(0, 0, 0, .1); + --pgn-navbar-light-color-disabled: rgba(0, 0, 0, .3); + --pgn-navbar-light-color-active: rgba(0, 0, 0, .9); + --pgn-navbar-light-color-hover: rgba(0, 0, 0, .7); + --pgn-navbar-light-color-base: rgba(0, 0, 0, .5); + --pgn-navbar-dark-color-base: rgba(255, 255, 255, .5); + --pgn-navbar-toggler-padding-x: .75rem; + --pgn-navbar-toggler-padding-y: .25rem; + --pgn-navbar-nav-scroll-max-height: 75vh; + --pgn-navbar-padding-x-nav-link: .5rem; + --pgn-nav-tabs-border-radius: 0; + --pgn-nav-tabs-border-width: 2px; + --pgn-nav-link-font-weight: 500; + --pgn-nav-link-padding-x: 1rem; + --pgn-nav-link-padding-y: .5rem; + --pgn-modal-transform-scale: scale(1.02); + --pgn-modal-transform-show: none; + --pgn-modal-transform-fade: translate(0, -50px); + --pgn-modal-transform-base: transform .3s ease-out; + --pgn-modal-sm: 500px; + --pgn-modal-md: 500px; + --pgn-modal-lg: 800px; + --pgn-modal-xl: 1140px; + --pgn-modal-header-padding-x: 1.5rem; + --pgn-modal-header-padding-y: 1rem; + --pgn-modal-backdrop-opacity: .5; + --pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); + --pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5); + --pgn-modal-content-border-width: 0; + --pgn-modal-content-border-color: rgba(0, 0, 0, .2); + --pgn-modal-content-color: null; + --pgn-modal-dialog-margin-y-sm-up: 1.75rem; + --pgn-modal-dialog-margin-base: 1.5rem; + --pgn-modal-footer-padding-y: 1.5rem; + --pgn-modal-footer-padding-x: 1rem; + --pgn-modal-footer-margin-between: .5rem; + --pgn-modal-inner-padding: 1.5rem; + --pgn-menu-border-hover: transparent; + --pgn-menu-border-active: transparent; + --pgn-menu-border-base: transparent; + --pgn-image-figure-caption-font-size: 90%; + --pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); + --pgn-image-thumbnail-padding: .25rem; + --pgn-icon-lg: 1.75rem; + --pgn-icon-md: 1.5rem; + --pgn-icon-sm: 1.25rem; + --pgn-icon-inline: .8em; + --pgn-icon-button-bg: transparent; + --pgn-icon-button-diameter-sm: 2.25rem; + --pgn-icon-button-diameter-md: 2.75rem; + --pgn-form-select-icon-padding: .5625rem; + --pgn-form-control-icon-width: 32px; + --pgn-form-feedback-tooltip-opacity: .9; + --pgn-form-feedback-tooltip-padding-x: .5rem; + --pgn-form-feedback-tooltip-padding-y: .25rem; + --pgn-form-custom-range-thumb-box-shadow-base: 0 .1rem .25rem rgba(0, 0, 0, .1); + --pgn-form-custom-range-thumb-border-radius: 1rem; + --pgn-form-custom-range-thumb-border-base: 0; + --pgn-form-custom-range-thumb-width: 1rem; + --pgn-form-custom-range-track-box-shadow: inset 0 .25rem .25rem rgba(0, 0, 0, .1); + --pgn-form-custom-range-track-border-radius: 1rem; + --pgn-form-custom-range-track-cursor: pointer; + --pgn-form-custom-range-track-height: .5rem; + --pgn-form-custom-range-track-width: 100%; + --pgn-form-custom-select-border-box-shadow-base: inset 0 1px 2px rgba(0, 0, 0, .075); + --pgn-form-custom-select-bg-size: 24px 24px; + --pgn-form-custom-select-indicator-padding: 1rem; + --pgn-form-custom-radio-indicator-border-radius: 50%; + --pgn-form-custom-checkbox-indicator-indeterminate-box-shadow: none; + --pgn-form-custom-checkbox-indicator-border-radius: 0; + --pgn-form-custom-control-label-color-base: null; + --pgn-form-custom-control-indicator-active-box-shadow: none; + --pgn-form-custom-control-indicator-checked-box-shadow-focus: 0 0 0 4px rgba(0, 0, 0, .1); + --pgn-form-custom-control-indicator-checked-box-shadow-base: none; + --pgn-form-custom-control-indicator-checked-bg-disabled: rgba(10, 48, 85, .5); + --pgn-form-custom-control-indicator-border-width: 2px; + --pgn-form-custom-control-indicator-bg-size: 100%; + --pgn-form-custom-control-indicator-size: 1.25rem; + --pgn-form-custom-control-cursor: null; + --pgn-form-custom-control-spacer-x: 1rem; + --pgn-form-custom-control-gutter: .5rem; + --pgn-form-custom-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; + --pgn-form-group-margin-bottom: 1rem; + --pgn-form-grid-gutter-width: 10px; + --pgn-form-check-border-width: .125rem; + --pgn-form-check-border-radius-focus: .0625rem; + --pgn-form-check-position-axis: .375rem; + --pgn-form-check-inline-margin-x: .75rem; + --pgn-form-text-margin-top: .25rem; + --pgn-form-input-check-margin-y: .3rem; + --pgn-form-input-check-margin-x-inline: .3125rem; + --pgn-form-input-check-margin-x-base: .25rem; + --pgn-form-input-check-gutter: 1.25rem; + --pgn-form-input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; + --pgn-form-input-width-hover: 1px; + --pgn-form-input-focus-width: 1px; + --pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075); + --pgn-dropzone-padding: 1.5rem; + --pgn-dropdown-border-color: rgba(0, 0, 0, .15); + --pgn-dropdown-spacer: .125rem; + --pgn-dropdown-padding-y-item: .5rem; + --pgn-dropdown-padding-y-base: .25rem; + --pgn-dropdown-padding-x-item: 1rem; + --pgn-dropdown-padding-x-base: 0; + --pgn-dropdown-min-width: 18rem; + --pgn-data-table-pagination-dropdown-min-width: 6rem; + --pgn-data-table-pagination-dropdown-max-height: 60vh; + --pgn-data-table-footer-position: center; + --pgn-data-table-padding-cell: .5rem .75rem; + --pgn-data-table-padding-small: .5rem; + --pgn-data-table-padding-y: .75rem; + --pgn-data-table-padding-x: .75rem; + --pgn-container-max-width-xl: 1440px; + --pgn-container-max-width-lg: 1192px; + --pgn-container-max-width-md: 952px; + --pgn-container-max-width-sm: 708px; + --pgn-container-max-width-xs: 464px; + --pgn-collapsible-card-spacer-basic-icon: .625rem; + --pgn-collapsible-card-spacer-basic-x: .5rem; + --pgn-collapsible-card-spacer-basic-y: .5rem; + --pgn-collapsible-card-spacer-icon: 2.5rem; + --pgn-collapsible-card-spacer-left-body: .75rem; + --pgn-collapsible-card-spacer-x-base: .5rem; + --pgn-collapsible-card-spacer-y-base: .5rem; + --pgn-code-pre-scrollable-max-height: 340px; + --pgn-code-kbd-padding-x: .4rem; + --pgn-code-kbd-padding-y: .2rem; + --pgn-code-color: #E83E8C; + --pgn-code-font-size: 87.5%; + --pgn-chip-line-height: 1.5rem; + --pgn-chip-font-weight: 400; + --pgn-chip-font-size: .75rem; + --pgn-chip-position-axis: .125rem; + --pgn-chip-border-width: .0625rem; + --pgn-chip-border-radius-focus: .5rem; + --pgn-chip-border-radius-base: .4375rem; + --pgn-chip-margin-inline: .5rem; + --pgn-chip-padding-x: .5rem; + --pgn-chip-padding-y: .125rem; + --pgn-carousel-transition-duration: .6s; + --pgn-carousel-caption-width: 70%; + --pgn-carousel-indicator-transition: opacity .6s ease; + --pgn-carousel-indicator-spacer: 3px; + --pgn-carousel-indicator-height-area-hit: 3px; + --pgn-carousel-indicator-height-base: 3px; + --pgn-carousel-indicator-width: 30px; + --pgn-carousel-control-transition: opacity .15s ease; + --pgn-carousel-control-opacity-hover: .9; + --pgn-carousel-control-opacity-base: .5; + --pgn-carousel-control-width-icon: 20px; + --pgn-carousel-control-width-base: 15%; + --pgn-card-loading-skeleton-spacer: .313rem; + --pgn-card-logo-height: 4.125rem; + --pgn-card-logo-width: 7.25rem; + --pgn-card-logo-bottom-offset-horizontal: .4375rem; + --pgn-card-logo-bottom-offset-base: 1rem; + --pgn-card-logo-left-offset-horizontal: .4375rem; + --pgn-card-logo-left-offset-base: 1.5rem; + --pgn-card-footer-action-gap: .5rem; + --pgn-card-columns-gap: 1.25rem; + --pgn-card-columns-count: 3; + --pgn-card-margin-group: 12px; + --pgn-card-image-vertical-height-max: 140px; + --pgn-card-image-horizontal-width-max: 240px; + --pgn-card-image-overlay-padding: 1.25rem; + --pgn-card-color: null; + --pgn-card-height-base: null; + --pgn-card-cap-color: null; + --pgn-card-cap-bg: rgba(0, 0, 0, .03); + --pgn-card-border-color-focus: rgba(0, 0, 0, .5); + --pgn-card-border-radius-logo: .25rem; + --pgn-card-border-radius-image: .3125rem; + --pgn-card-spacer-y: .75rem; + --pgn-card-spacer-x: 1.25rem; --pgn-btn-transition: null; --pgn-btn-block-spacing-y: .5rem; - --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); --pgn-btn-tertiary-inverse-bg-base: transparent; --pgn-btn-tertiary-bg-base: transparent; --pgn-btn-disabled-opacity: .65; --pgn-btn-focus-gap: 1px; --pgn-btn-focus-width: 2px; --pgn-btn-box-shadow-active: none; - --pgn-avatar-button-padding-left-lg: .25em; - --pgn-avatar-button-padding-left-sm: .25em; - --pgn-avatar-button-padding-left-base: .25em; + --pgn-bubble-expandable-padding-x: .25rem; + --pgn-bubble-expandable-padding-y: 0; + --pgn-breadcrumb-border-radius-focus: .125rem; + --pgn-breadcrumb-border-focus-width: .0625rem; + --pgn-breadcrumb-border-focus-axis-x: .25rem; + --pgn-breadcrumb-border-focus-axis-y: .5rem; + --pgn-breadcrumb-margin-left: .5rem; + --pgn-breadcrumb-margin-bottom: 1rem; + --pgn-breadcrumb-padding-item: .5rem; + --pgn-breadcrumb-padding-x: 1rem; + --pgn-breadcrumb-padding-y: .75rem; + --pgn-breadcrumb-font-size: null; + --pgn-badge-transition: none; + --pgn-badge-border-radius-pill: 10rem; + --pgn-badge-border-radius-base: .25rem; + --pgn-badge-padding-y: .125rem; + --pgn-badge-padding-x-pill: .6em; + --pgn-badge-padding-x-base: .5rem; + --pgn-badge-font-size: 75%; --pgn-avatar-size-huge: 18.75rem; --pgn-avatar-size-xxl: 11.5rem; --pgn-avatar-size-xl: 6rem; @@ -162,6 +452,16 @@ --pgn-avatar-size-xs: 1.5rem; --pgn-avatar-size-base: 3rem; --pgn-avatar-border-radius: 100%; + --pgn-avatar-button-padding-left-lg: .25em; + --pgn-avatar-button-padding-left-sm: .25em; + --pgn-avatar-button-padding-left-base: .25em; + --pgn-annotation-arrow-border-width: .5rem; + --pgn-annotation-arrow-side-margin: .25rem; + --pgn-annotation-max-width: 18.75rem; + --pgn-annotation-border-radius: .25rem; + --pgn-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) + drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); + --pgn-annotation-padding: .5rem; --pgn-alert-line-height: 1.5rem; --pgn-alert-icon-space: .8rem; --pgn-alert-level-color: 6; @@ -173,20 +473,22 @@ --pgn-alert-margin-bottom: 1rem; --pgn-alert-padding-x: 1.5rem; --pgn-alert-padding-y: 1.5rem; + --pgn-action-row-gap-y: .5rem; + --pgn-action-row-gap-x: .5rem; + --pgn-color-dark-base: #273F2F; --pgn-color-dark-900: #1B2C21; --pgn-color-dark-800: #1D2F23; --pgn-color-dark-700: #1F3226; --pgn-color-dark-600: #23392A; - --pgn-color-dark-500: #273F2F; --pgn-color-dark-400: #5D6F63; --pgn-color-dark-300: #939F97; --pgn-color-dark-200: #C9CFCB; --pgn-color-dark-100: #F2F3F3; + --pgn-color-light-base: #E1DDDB; --pgn-color-light-900: #9E9B99; --pgn-color-light-800: #A9A6A4; --pgn-color-light-700: #B4B1AF; --pgn-color-light-600: #CBC7C5; - --pgn-color-light-500: #E1DDDB; --pgn-color-light-400: #E9E6E4; --pgn-color-light-300: #F0EEED; --pgn-color-light-200: #F8F7F6; @@ -223,11 +525,11 @@ --pgn-color-success-300: #8BC1A9; --pgn-color-success-200: #C5E0D4; --pgn-color-success-100: #F1F8F5; + --pgn-color-brand-base: #9D0054; --pgn-color-brand-900: #6E003B; --pgn-color-brand-800: #76003F; --pgn-color-brand-700: #7E0043; --pgn-color-brand-600: #8D004C; - --pgn-color-brand-500: #9D0054; --pgn-color-brand-400: #B6407F; --pgn-color-brand-300: #CE80AA; --pgn-color-brand-200: #E7BFD4; @@ -240,20 +542,20 @@ --pgn-color-secondary-300: #A2A2A2; --pgn-color-secondary-200: #D1D1D1; --pgn-color-secondary-100: #F4F4F4; + --pgn-color-primary-base: #0A3055; --pgn-color-primary-900: #07223C; --pgn-color-primary-800: #082440; --pgn-color-primary-700: #082644; --pgn-color-primary-600: #092B4D; - --pgn-color-primary-500: #0A3055; --pgn-color-primary-400: #476480; --pgn-color-primary-300: #8598AA; --pgn-color-primary-200: #C2CBD5; --pgn-color-primary-100: #F0F3F5; + --pgn-color-gray-base: #707070; --pgn-color-gray-900: #212529; --pgn-color-gray-800: #333333; --pgn-color-gray-700: #454545; --pgn-color-gray-600: #5C5C5C; - --pgn-color-gray-500: #707070; --pgn-color-gray-400: #8F8F8F; --pgn-color-gray-300: #ADADAD; --pgn-color-gray-200: #CCCCCC; @@ -287,20 +589,178 @@ --pgn-display-weight-3: var(--pgn-font-weight-bold); --pgn-display-weight-2: var(--pgn-font-weight-bold); --pgn-display-weight-1: var(--pgn-font-weight-bold); - --pgn-link-brand-inline-color: var(--pgn-color-brand-500); - --pgn-link-brand-color: var(--pgn-color-brand-500); - --pgn-link-muted-inline-color: var(--pgn-color-primary-500); - --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-box-shadow-lg: 0 .25rem .5rem rgba(var(--pgn-color-black), .3); + --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(var(--pgn-color-black), .2); + --pgn-box-shadow-base: 0 .125rem .25rem rgba(var(--pgn-color-black), .3); --pgn-core-input-btn-border-width: var(--pgn-border-width); + --pgn-core-input-btn-focus-box-shadow: 0 0 0 var(--pgn-core-input-btn-focus-width) var(--pgn-core-input-btn-focus-color); --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg); + --pgn-tooltip-arrow-color-light: var(--pgn-color-white); + --pgn-tooltip-border-radius: var(--pgn-border-radius-base); + --pgn-tooltip-bg-light: var(--pgn-color-white); + --pgn-tooltip-bg-base: var(--pgn-color-black); + --pgn-tooltip-color-light: var(--pgn-color-black); + --pgn-tooltip-color-base: var(--pgn-color-white); + --pgn-tooltip-font-size: var(--pgn-font-size-sm); + --pgn-toast-header-color-background: var(--pgn-color-gray-700); + --pgn-toast-header-color-base: var(--pgn-color-white); + --pgn-toast-color-background: var(--pgn-color-gray-700); + --pgn-tabs-notification-font-size: var(--pgn-font-size-xs); + --pgn-table-dark-bg-base: var(--pgn-color-gray-700); + --pgn-table-dark-color-base: var(--pgn-color-white); + --pgn-table-border-width: var(--pgn-border-width); + --pgn-table-bg-head: var(--pgn-color-gray-100); + --pgn-table-bg-active: var(--pgn-table-bg-hover); + --pgn-table-color-head: var(--pgn-color-gray-700); --pgn-spinner-sm-height: var(--pgn-spinner-sm-width); --pgn-spinner-height: var(--pgn-spinner-width); - --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); + --pgn-search-field-border-color-focus: var(--pgn-color-black); + --pgn-search-field-border-color-interaction: var(--pgn-color-black); + --pgn-progress-bar-bar-bg-base: var(--pgn-color-accent-a); + --pgn-progress-bar-bar-color: var(--pgn-color-white); + --pgn-progress-bar-font-size: calc(var(--pgn-font-size-base) * .75); + --pgn-product-tour-checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arrow) transparent; + --pgn-product-tour-checkpoint-arrow-color-default: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-color-background); + --pgn-product-tour-checkpoint-arrow-color-top: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-width-border); + --pgn-product-tour-checkpoint-color-body: var(--pgn-color-gray-700); + --pgn-product-tour-checkpoint-color-background: var(--pgn-color-light-300); + --pgn-popover-danger-bg: var(--pgn-color-danger-100); + --pgn-popover-warning-bg: var(--pgn-color-warning-100); + --pgn-popover-success-bg: var(--pgn-color-success-100); + --pgn-popover-body-padding-x: var(--pgn-popover-header-padding-x); + --pgn-popover-body-padding-y: var(--pgn-popover-header-padding-y); + --pgn-popover-header-bg: var(--pgn-color-white); + --pgn-popover-border-border: var(--pgn-border-width); + --pgn-popover-border-radius: var(--pgn-border-radius-sm); + --pgn-popover-bg: var(--pgn-color-white); + --pgn-popover-font-size: var(--pgn-font-size-sm); + --pgn-pagination-focus-color-text: var(--pgn-color-black); + --pgn-pagination-border-radius-lg: var(--pgn-border-radius-lg); + --pgn-pagination-border-radius-sm: var(--pgn-border-radius-sm); + --pgn-pagination-border-color-disabled: var(--pgn-color-gray-100); + --pgn-pagination-border-color-hover: var(--pgn-color-gray-200); + --pgn-pagination-border-color-base: var(--pgn-color-gray-200); + --pgn-pagination-border-width: var(--pgn-border-width); + --pgn-pagination-bg-disabled: var(--pgn-color-white); + --pgn-pagination-bg-hover: var(--pgn-color-gray-100); + --pgn-pagination-bg-base: var(--pgn-color-white); + --pgn-pagination-color-hover: var(--pgn-link-hover-color); + --pgn-pagination-color-inverse: var(--pgn-color-white); + --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active); + --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active); + --pgn-navbar-dark-toggler-border-color: rgba(var(--pgn-color-white), .1); + --pgn-navbar-dark-color-disabled: rgba(var(--pgn-color-white), .25); + --pgn-navbar-dark-color-active: var(--pgn-color-white); + --pgn-navbar-dark-color-hover: rgba(var(--pgn-color-white), .75); + --pgn-navbar-toggler-font-size: var(--pgn-font-size-lg); + --pgn-navbar-brand-font-size: var(--pgn-font-size-lg); + --pgn-navbar-nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2); + --pgn-navbar-padding-x-base: var(--pgn-core-spacer); + --pgn-navbar-padding-y: calc(var(--pgn-core-spacer) / 2); + --pgn-nav-divider-margin-y: calc(var(--pgn-core-spacer) / 2); + --pgn-nav-divider-color: var(--pgn-color-gray-100); + --pgn-nav-pills-border-radius: var(--pgn-border-radius-base); + --pgn-nav-tabs-link-hover-bg: var(--pgn-color-light-400); + --pgn-nav-tabs-border-color: var(--pgn-color-light-400); + --pgn-nav-link-color-disabled: var(--pgn-color-gray-300); + --pgn-nav-link-color-base: var(--pgn-color-gray-700); + --pgn-modal-header-padding-base: var(--pgn-modal-header-padding-y) var(--pgn-modal-header-padding-x); + --pgn-modal-header-border-width: var(--pgn-modal-content-border-width); + --pgn-modal-backdrop-bg: var(--pgn-color-black); + --pgn-modal-content-border-radius: var(--pgn-border-radius-lg); + --pgn-modal-content-bg: var(--pgn-color-white); + --pgn-modal-title-line-height: var(--pgn-line-height-base); + --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-y) var(--pgn-modal-footer-padding-x); + --pgn-menu-background-base: var(--pgn-btn-tertiary-bg-base); + --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); + --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200); + --pgn-image-thumbnail-border-width: var(--pgn-border-width); + --pgn-icon-button-accent-color: var(--pgn-color-white); + --pgn-icon-button-diameter-inline: calc(var(--pgn-line-height-base) + .1em); + --pgn-form-feedback-tooltip-border-radius: var(--pgn-border-radius-base); + --pgn-form-feedback-tooltip-line-height: var(--pgn-line-height-base); + --pgn-form-feedback-tooltip-font-size: var(--pgn-font-size-sm); + --pgn-form-feedback-font-size: var(--pgn-font-size-small-base); + --pgn-form-feedback-margin-top: var(--pgn-form-text-margin-top); + --pgn-form-custom-file-box-shadow-base: var(--pgn-form-input-box-shadow-base); + --pgn-form-custom-range-thumb-box-shadow-focus-width: var(--pgn-form-input-focus-width); + --pgn-form-custom-range-thumb-height: var(--pgn-form-custom-range-thumb-width); + --pgn-form-custom-range-track-bg: var(--pgn-color-gray-300); + --pgn-form-custom-select-border-radius: var(--pgn-border-radius-base); + --pgn-form-custom-select-border-width-focus: var(--pgn-form-input-focus-width); + --pgn-form-custom-select-bg-disabled: var(--pgn-color-gray-100); + --pgn-form-custom-select-indicator-color: var(--pgn-color-gray-700); + --pgn-form-custom-switch-indicator-size: calc(var(--pgn-form-custom-control-indicator-size) - var(--pgn-form-custom-control-indicator-border-width) * 4); + --pgn-form-custom-switch-indicator-border-radius: calc(var(--pgn-form-custom-control-indicator-size) / 2); + --pgn-form-custom-switch-width: calc(var(--pgn-form-custom-control-indicator-size) * 1.75); + --pgn-form-custom-control-indicator-border-color: var(--pgn-color-gray-700); + --pgn-form-custom-control-indicator-box-shadow: var(--pgn-form-input-box-shadow-base); + --pgn-form-input-group-addon-bg: var(--pgn-color-gray-100); + --pgn-form-input-border-radius-sm: var(--pgn-border-radius-sm); + --pgn-form-input-border-radius-lg: var(--pgn-border-radius-lg); + --pgn-form-input-border-radius-base: var(--pgn-border-radius-base); + --pgn-form-input-color-base: var(--pgn-color-gray-700); + --pgn-form-input-bg-disabled: var(--pgn-color-gray-100); + --pgn-form-input-bg-base: var(--pgn-color-white); + --pgn-form-input-line-height-sm: var(--pgn-core-input-btn-line-height-sm); + --pgn-form-input-line-height-base: var(--pgn-core-input-btn-line-height-base); + --pgn-form-input-font-size-lg: var(--pgn-core-input-btn-font-size-lg); + --pgn-form-input-font-size-sm: var(--pgn-core-input-btn-font-size-sm); + --pgn-form-input-font-size-base: var(--pgn-core-input-btn-font-size-base); + --pgn-form-input-font-family: var(--pgn-core-input-btn-font-family); + --pgn-form-input-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); + --pgn-form-input-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x); + --pgn-form-input-padding-x-base: var(--pgn-core-input-btn-padding-x); + --pgn-form-input-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); + --pgn-form-input-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y); + --pgn-form-input-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x); + --pgn-dropzone-border-error: 2px solid var(--pgn-color-danger-300); + --pgn-dropzone-border-focus: 2px solid var(--pgn-color-info-300); + --pgn-dropzone-border-hover: 2px solid var(--pgn-color-info-300); + --pgn-dropdown-link-hover-bg: var(--pgn-color-light-300); + --pgn-dropdown-link-hover-color: var(--pgn-color-gray-900); + --pgn-dropdown-link-color: var(--pgn-color-gray-900); + --pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(var(--pgn-color-black), .175); + --pgn-dropdown-divider-margin-y: calc(var(--pgn-core-spacer) / 2); + --pgn-dropdown-divider-bg: var(--pgn-color-gray-100); + --pgn-dropdown-border-radius-base: var(--pgn-border-radius-base); + --pgn-dropdown-border-width: var(--pgn-border-width); + --pgn-dropdown-bg: var(--pgn-color-white); + --pgn-dropdown-font-size: var(--pgn-font-size-base); + --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item); + --pgn-data-table-border: 1px solid var(--pgn-color-gray-200); + --pgn-data-table-background-color: var(--pgn-color-white); + --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x); + --pgn-collapsible-card-spacer-y-lg: var(--pgn-card-spacer-y); + --pgn-code-pre-color: var(--pgn-color-gray-900); + --pgn-code-kbd-bg: var(--pgn-color-gray-700); + --pgn-code-kbd-color: var(--pgn-color-white); + --pgn-code-kbd-nested-font-weight: var(--pgn-font-weight-bold); + --pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(var(--pgn-color-black), .25); + --pgn-code-kbd-font-size: var(--pgn-code-font-size); + --pgn-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); + --pgn-close-button-color: var(--pgn-color-black); + --pgn-close-button-font-weight: var(--pgn-font-weight-bold); + --pgn-close-button-font-size: calc(var(--pgn-font-size-base) * 1.5); + --pgn-carousel-transition-base: transform var(--pgn-carousel-transition-duration) ease-in-out; + --pgn-carousel-caption-color: var(--pgn-color-white); + --pgn-carousel-indicator-active-bg: var(--pgn-color-white); + --pgn-carousel-control-color: var(--pgn-color-white); + --pgn-card-footer-text-font-size: var(--pgn-font-size-small-x); + --pgn-card-divider-margin-y: var(--pgn-card-spacer-y); + --pgn-card-divider-bg: var(--pgn-color-light-400); + --pgn-card-columns-margin: var(--pgn-card-spacer-y); + --pgn-card-margin-grid: var(--pgn-card-margin-group); + --pgn-card-margin-deck: var(--pgn-card-margin-group); + --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max); + --pgn-card-bg: var(--pgn-color-white); + --pgn-card-border-color-base: rgba(var(--pgn-color-black), .125); + --pgn-card-border-radius-base: var(--pgn-border-radius-base); + --pgn-card-border-width: var(--pgn-border-width); + --pgn-btn-tertiary-inverse-bg-hover: rgba(var(--pgn-color-white), .1); --pgn-btn-tertiary-inverse-color: var(--pgn-color-white); - --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); - --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); --pgn-btn-tertiary-color: var(--pgn-color-gray-700); - --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075); --pgn-btn-border-radius-sm: var(--pgn-border-radius-sm); --pgn-btn-border-radius-lg: var(--pgn-border-radius-lg); @@ -312,30 +772,196 @@ --pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm); --pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base); --pgn-btn-font-family: var(--pgn-core-input-btn-font-family); - --pgn-btn-padding-sm-x: var(--pgn-core-input-btn-padding-sm-x); - --pgn-btn-padding-sm-y: var(--pgn-core-input-btn-padding-sm-y); --pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); --pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x); + --pgn-btn-padding-y-sm-x: var(--pgn-core-input-btn-padding-sm-x); + --pgn-btn-padding-y-sm-y: var(--pgn-core-input-btn-padding-sm-y); --pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); --pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600); + --pgn-breadcrumb-bg: var(--pgn-color-gray-200); + --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base); + --pgn-badge-focus-width: var(--pgn-core-input-btn-focus-width); + --pgn-badge-font-weight: var(--pgn-font-weight-bold); --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300); + --pgn-annotation-line-height: var(--pgn-line-height-sm); + --pgn-annotation-font-size: var(--pgn-font-size-sm); --pgn-alert-color-content: var(--pgn-color-gray-700); --pgn-alert-color-title: var(--pgn-color-black); --pgn-alert-font-weight-link: var(--pgn-font-weight-normal); --pgn-alert-border-radius: var(--pgn-border-radius-base); - --pgn-text-muted: var(--pgn-color-gray-500); - --pgn-color-danger-500: var(--pgn-color-red); - --pgn-color-warning-500: var(--pgn-color-yellow); - --pgn-color-info-500: var(--pgn-color-teal); - --pgn-color-success-500: var(--pgn-color-green); - --pgn-color-secondary-500: var(--pgn-color-gray-700); + --pgn-component-active-color: var(--pgn-color-white); + --pgn-color-dark-500: var(--pgn-color-dark-base); + --pgn-color-light-500: var(--pgn-color-light-base); + --pgn-color-danger-base: var(--pgn-color-red); + --pgn-color-warning-base: var(--pgn-color-yellow); + --pgn-color-info-base: var(--pgn-color-teal); + --pgn-color-success-base: var(--pgn-color-green); + --pgn-color-brand-500: var(--pgn-color-brand-base); + --pgn-color-secondary-base: var(--pgn-color-gray-700); + --pgn-color-primary-500: var(--pgn-color-primary-base); + --pgn-color-gray-500: var(--pgn-color-gray-base); --pgn-body-color: var(--pgn-color-gray-700); --pgn-body-bg: var(--pgn-color-white); --pgn-border-color: var(--pgn-color-gray-200); - --pgn-link-inline-color: var(--pgn-color-info-500); - --pgn-link-color: var(--pgn-color-info-500); + --pgn-link-brand-inline-color: var(--pgn-color-brand-500); + --pgn-link-brand-color: var(--pgn-color-brand-500); + --pgn-link-muted-inline-color: var(--pgn-color-primary-500); + --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); + --pgn-table-dark-color-border: var(--pgn-table-dark-bg-base); + --pgn-table-dark-color-hover: var(--pgn-table-dark-color-base); + --pgn-table-border-color: var(--pgn-border-color); --pgn-table-color-border: var(--pgn-border-color); - --pgn-table-color-caption: var(--pgn-text-muted); + --pgn-table-color-base: var(--pgn-body-color); + --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); + --pgn-search-field-border-color-base: var(--pgn-color-gray-500); + --pgn-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500); + --pgn-progress-bar-border-color: var(--pgn-color-gray-500); + --pgn-product-tour-checkpoint-color-breadcrumb: var(--pgn-color-primary-500); + --pgn-product-tour-checkpoint-color-border: var(--pgn-color-brand-500); + --pgn-popover-arrow-color: var(--pgn-popover-bg); + --pgn-popover-body-color: var(--pgn-body-color); + --pgn-popover-header-color: var(--pgn-headings-color); + --pgn-pagination-focus-color-base: var(--pgn-color-primary-500); + --pgn-pagination-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow); + --pgn-pagination-color-disabled: var(--pgn-color-gray-500); + --pgn-pagination-color-active: var(--pgn-component-active-color); + --pgn-navbar-dark-brand-color-hover: var(--pgn-navbar-dark-color-active); + --pgn-navbar-dark-brand-color-base: var(--pgn-navbar-dark-color-active); + --pgn-navbar-toggler-border-radius: var(--pgn-btn-border-radius-base); + --pgn-navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2); + --pgn-navbar-brand-height: calc(var(--pgn-navbar-brand-font-size) * var(--pgn-line-height-base)); + --pgn-nav-pills-link-link-active-color: var(--pgn-component-active-color); + --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg); + --pgn-nav-tabs-link-active-color-border: transparent transparent var(--pgn-color-primary-500); + --pgn-nav-tabs-link-active-color-base: var(--pgn-color-primary-500); + --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color); + --pgn-modal-header-border-color: var(--pgn-border-color); + --pgn-modal-footer-border-width: var(--pgn-modal-header-border-width); + --pgn-image-figure-caption-color: var(--pgn-color-gray-500); + --pgn-image-thumbnail-bg: var(--pgn-body-bg); + --pgn-form-custom-file-button-bg: var(--pgn-form-input-group-addon-bg); + --pgn-form-custom-file-color: var(--pgn-form-input-color-base); + --pgn-form-custom-file-font-family: var(--pgn-form-input-font-family); + --pgn-form-custom-file-line-height: var(--pgn-form-input-line-height-base); + --pgn-form-custom-file-padding-x: var(--pgn-form-input-padding-x-base); + --pgn-form-custom-file-padding-y: var(--pgn-form-input-padding-y-base); + --pgn-form-custom-file-bg-disabled: var(--pgn-form-input-bg-disabled); + --pgn-form-custom-file-bg-base: var(--pgn-form-input-bg-base); + --pgn-form-custom-file-border-color-radius: var(--pgn-form-input-border-radius-base); + --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus); + --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-gray-500); + --pgn-form-custom-select-border-box-shadow-focus: var(--pgn-core-input-btn-focus-box-shadow); + --pgn-form-custom-select-bg-base: var(--pgn-form-input-bg-base); + --pgn-form-custom-select-color-disabled: var(--pgn-color-gray-500); + --pgn-form-custom-select-color-base: var(--pgn-form-input-color-base); + --pgn-form-custom-select-line-height: var(--pgn-form-input-line-height-base); + --pgn-form-custom-select-font-size-lg: var(--pgn-form-input-font-size-lg); + --pgn-form-custom-select-font-size-sm: var(--pgn-form-input-font-size-sm); + --pgn-form-custom-select-font-size-base: var(--pgn-form-input-font-size-base); + --pgn-form-custom-select-font-family: var(--pgn-form-input-font-family); + --pgn-form-custom-select-padding-x-lg: var(--pgn-form-input-padding-x-lg); + --pgn-form-custom-select-padding-x-sm: var(--pgn-form-input-padding-x-sm); + --pgn-form-custom-select-padding-x-base: var(--pgn-form-input-padding-x-base); + --pgn-form-custom-select-padding-y-lg: var(--pgn-form-input-padding-y-lg); + --pgn-form-custom-select-padding-y-sm: var(--pgn-form-input-padding-y-sm); + --pgn-form-custom-select-padding-y-base: var(--pgn-form-input-padding-y-base); + --pgn-form-custom-control-label-color-disabled: var(--pgn-color-gray-500); + --pgn-form-custom-control-indicator-active-color-base: var(--pgn-component-active-color); + --pgn-form-custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled); + --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base); + --pgn-form-input-group-addon-color-base: var(--pgn-form-input-color-base); + --pgn-form-input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2)); + --pgn-form-input-height-inner-half: calc(var(--pgn-form-input-line-height-base) * .5em + var(--pgn-form-input-padding-y-base)); + --pgn-form-input-height-inner-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); + --pgn-form-input-height-sm: calc(var(--pgn-form-input-line-height-sm) * 1em + var(--pgn-core-input-btn-padding-sm-y) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-height-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-focus-color-base: var(--pgn-form-input-color-base); + --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base); + --pgn-form-input-box-shadow-focus: var(--pgn-core-input-btn-focus-box-shadow); + --pgn-form-input-border-width: var(--pgn-core-input-btn-border-width); + --pgn-form-input-border-color: var(--pgn-color-gray-500); + --pgn-form-input-color-plaintext: var(--pgn-body-color); + --pgn-form-input-color-placeholder: var(--pgn-color-gray-500); + --pgn-form-input-line-height-lg: var(--pgn-core-input-btn-line-height-lg); + --pgn-form-input-font-weight: var(--pgn-font-weight-base); + --pgn-dropzone-restriction-msg-color: var(--pgn-color-gray-500); + --pgn-dropzone-border-active: 2px solid var(--pgn-color-primary-500); + --pgn-dropzone-border-default: 1px dashed var(--pgn-color-gray-500); + --pgn-dropdown-link-disabled-color: var(--pgn-color-gray-500); + --pgn-dropdown-link-active-bg: var(--pgn-component-active-color); + --pgn-dropdown-link-active-color: var(--pgn-component-active-color); + --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width)); + --pgn-dropdown-color-header: var(--pgn-color-gray-500); + --pgn-dropdown-color-base: var(--pgn-body-color); + --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); + --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); + --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); + --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); + --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); --pgn-btn-border-width: var(--pgn-core-input-btn-border-width); --pgn-btn-line-height-lg: var(--pgn-core-input-btn-line-height-lg); + --pgn-breadcrumb-inverse-active: var(--pgn-color-light-500); + --pgn-breadcrumb-color-active: var(--pgn-color-gray-500); + --pgn-breadcrumb-color-base: var(--pgn-color-primary-500); + --pgn-text-muted: var(--pgn-color-gray-500); + --pgn-component-active-bg: var(--pgn-color-primary-500); + --pgn-color-danger-500: var(--pgn-color-danger-base); + --pgn-color-warning-500: var(--pgn-color-warning-base); + --pgn-color-info-500: var(--pgn-color-info-base); + --pgn-color-success-500: var(--pgn-color-success-base); + --pgn-color-secondary-500: var(--pgn-color-secondary-base); + --pgn-link-inline-color: var(--pgn-color-info-500); + --pgn-link-color: var(--pgn-color-info-500); + --pgn-core-input-btn-focus-color: var(--pgn-component-active-bg); + --pgn-table-caption-color: var(--pgn-text-muted); + --pgn-table-color-caption: var(--pgn-text-muted); + --pgn-table-color-hover: var(--pgn-table-color-base); + --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); + --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); + --pgn-popover-success-icon-color: var(--pgn-color-success-500); + --pgn-pagination-bg-active: var(--pgn-component-active-bg); + --pgn-nav-pills-link-link-active-bg: var(--pgn-component-active-bg); + --pgn-modal-footer-border-color: var(--pgn-modal-header-border-color); + --pgn-menu-background-active: var(--pgn-btn-tertiary-bg-active); + --pgn-form-feedback-color-invalid: var(--pgn-color-danger-500); + --pgn-form-feedback-color-valid: var(--pgn-color-success-500); + --pgn-form-custom-file-button-color: var(--pgn-form-custom-file-color); + --pgn-form-custom-file-font-weight: var(--pgn-form-input-font-weight); + --pgn-form-custom-file-box-shadow-focus: var(--pgn-form-input-box-shadow-focus); + --pgn-form-custom-file-border-width: var(--pgn-form-input-border-width); + --pgn-form-custom-file-border-color-base: var(--pgn-form-input-border-color); + --pgn-form-custom-file-height-inner: var(--pgn-form-input-height-inner-base); + --pgn-form-custom-file-height-base: var(--pgn-form-input-height-base); + --pgn-form-custom-range-thumb-bg-base: var(--pgn-component-active-bg); + --pgn-form-custom-select-height-sm: var(--pgn-form-input-height-sm); + --pgn-form-custom-select-border-color-base: var(--pgn-form-input-border-color); + --pgn-form-custom-select-border-width-base: var(--pgn-form-input-border-width); + --pgn-form-custom-select-feedback-icon-size: var(--pgn-form-input-height-inner-half) var(--pgn-form-input-height-inner-half); + --pgn-form-custom-select-feedback-icon-position: center right calc(var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding)); + --pgn-form-custom-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-form-custom-select-padding-y-base)) * 3 / 4 + var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding)); + --pgn-form-custom-select-font-weight: var(--pgn-form-input-font-weight); + --pgn-form-custom-select-font-height-base: var(--pgn-form-input-height-base); + --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-component-active-bg); + --pgn-form-custom-control-indicator-active-bg: var(--pgn-component-active-bg); + --pgn-form-custom-control-indicator-checked-bg-base: var(--pgn-component-active-bg); + --pgn-form-custom-control-indicator-checked-color: var(--pgn-component-active-bg); + --pgn-form-input-group-addon-color-border: var(--pgn-form-input-border-color); + --pgn-form-input-height-lg: calc(var(--pgn-form-input-line-height-lg) * 1em + var(--pgn-core-input-btn-padding-lg-y) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-focus-color-border: var(--pgn-component-active-bg); + --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); + --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); + --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); + --pgn-pagination-color-base: var(--pgn-link-color); + --pgn-form-feedback-icon-color-invalid: var(--pgn-form-feedback-color-invalid); + --pgn-form-feedback-icon-color-valid: var(--pgn-form-feedback-color-valid); + --pgn-form-custom-file-border-color-focus: var(--pgn-form-input-focus-color-border); + --pgn-form-custom-select-border-color-focus: var(--pgn-form-input-focus-color-border); + --pgn-form-custom-select-font-height-lg: var(--pgn-form-input-height-lg); + --pgn-form-custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg); + --pgn-form-custom-checkbox-indicator-indeterminate-color: var(--pgn-form-custom-control-indicator-checked-color); + --pgn-form-custom-control-indicator-active-color-border: var(--pgn-form-custom-control-indicator-active-bg); + --pgn-form-custom-control-indicator-checked-border-color-focus: var(--pgn-form-input-focus-color-border); + --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-form-custom-control-indicator-checked-color); } diff --git a/src/Annotation/Annotation.scss b/src/Annotation/Annotation.scss index bdfefa7136..3e6c9bc3f5 100644 --- a/src/Annotation/Annotation.scss +++ b/src/Annotation/Annotation.scss @@ -1,50 +1,54 @@ @import "variables"; -@mixin triangle($color, $direction) { +@mixin triangle($triangle-color, $triangle-direction) { height: 0; width: 0; position: absolute; content: ""; border: solid transparent; - @if $direction == top { - border-bottom-color: $color; + @if $triangle-direction == top { + border-bottom-color: $triangle-color; border-width: 0 $annotation-arrow-border-width $annotation-arrow-border-width; right: 0; left: 0; - top: -$annotation-arrow-border-width; + top: calc(#{$annotation-arrow-border-width} * -1); margin: 0 auto; } - @else if $direction == right { - border-left-color: $color; - border-width: $annotation-arrow-border-width 0 $annotation-arrow-border-width $annotation-arrow-border-width; + @else if $triangle-direction == right { + border-left-color: $triangle-color; + border-width: + $annotation-arrow-border-width 0 $annotation-arrow-border-width + $annotation-arrow-border-width; top: 0; bottom: 0; - right: -$annotation-arrow-border-width; + right: calc(#{$annotation-arrow-border-width} * -1); margin: auto 0; } - @else if $direction == bottom { - border-top-color: $color; + @else if $triangle-direction == bottom { + border-top-color: $triangle-color; border-width: $annotation-arrow-border-width $annotation-arrow-border-width 0; right: 0; left: 0; - bottom: -$annotation-arrow-border-width; + bottom: calc(#{$annotation-arrow-border-width} * -1); margin: 0 auto; } - @else if $direction == left { - border-right-color: $color; - border-width: $annotation-arrow-border-width $annotation-arrow-border-width $annotation-arrow-border-width 0; + @else if $triangle-direction == left { + border-right-color: $triangle-color; + border-width: + $annotation-arrow-border-width $annotation-arrow-border-width + $annotation-arrow-border-width 0; top: 0; bottom: 0; - left: -$annotation-arrow-border-width; + left: calc(#{$annotation-arrow-border-width} * -1); margin: auto 0; } @else { - @error "Unknown direction #{$direction}."; + @error "Unknown direction #{$triangle-direction}."; } } @@ -90,7 +94,7 @@ $arrow-directions: top, right, bottom, left; [dir="rtl"] & { @if $direction == left { left: initial; - right: -$annotation-arrow-border-width; + right: calc(#{$annotation-arrow-border-width} * -1); border-width: $annotation-arrow-border-width 0 $annotation-arrow-border-width $annotation-arrow-border-width; @@ -99,7 +103,7 @@ $arrow-directions: top, right, bottom, left; @else if $direction == right { right: initial; - left: -$annotation-arrow-border-width; + left: calc(#{$annotation-arrow-border-width} * -1); border-width: $annotation-arrow-border-width $annotation-arrow-border-width $annotation-arrow-border-width 0; diff --git a/src/Breadcrumb/Breadcrumb.scss b/src/Breadcrumb/Breadcrumb.scss index b8a8e18689..80d1230c23 100644 --- a/src/Breadcrumb/Breadcrumb.scss +++ b/src/Breadcrumb/Breadcrumb.scss @@ -20,10 +20,10 @@ &:focus::before { content: ""; position: absolute; - top: -$breadcrumb-border-focus-axis-y; - right: -$breadcrumb-border-focus-axis-x; - bottom: -$breadcrumb-border-focus-axis-y; - left: -$breadcrumb-border-focus-axis-x; + top: calc(#{$breadcrumb-border-focus-axis-y} * -1); + right: calc(#{$breadcrumb-border-focus-axis-x} * -1); + bottom: calc(#{$breadcrumb-border-focus-axis-y} * -1); + left: calc(#{$breadcrumb-border-focus-axis-x} * -1); border: $breadcrumb-border-focus-width solid $breadcrumb-color; border-radius: $breadcrumb-focus-border-radius; } diff --git a/src/Bubble/Bubble.scss b/src/Bubble/Bubble.scss index 75a681be24..c176a95097 100644 --- a/src/Bubble/Bubble.scss +++ b/src/Bubble/Bubble.scss @@ -8,7 +8,7 @@ display: inline-flex; align-items: center; justify-content: center; - font-size: var(--pgn-font-size-xs); + font-size: $font-size-xs; @each $name, $colors in $bubble-variants { &.pgn__bubble-#{$name} { @@ -19,7 +19,7 @@ &:disabled, &.disabled { - background: var(--pgn-color-gray-500); + background: $gray-500; } &.expandable { diff --git a/src/Bubble/_variables.scss b/src/Bubble/_variables.scss index 96f9d4ba73..e09ee586c8 100644 --- a/src/Bubble/_variables.scss +++ b/src/Bubble/_variables.scss @@ -1,8 +1,8 @@ $bubble-variants: ( - "success": ( "background-color": $success, "color": var(--pgn-color-white) ), - "warning": ( "background-color": $warning, "color": var(--pgn-color-white) ), - "error": ( "background-color": $danger, "color": var(--pgn-color-white) ), - "primary": ( "background-color": $primary, "color": var(--pgn-color-white) ), + "success": ( "background-color": $success, "color": $white ), + "warning": ( "background-color": $warning, "color": $white ), + "error": ( "background-color": $danger, "color": $white ), + "primary": ( "background-color": $primary, "color": $white ), ) !default; $bubble-expandable-padding-x: .25rem !default; $bubble-expandable-padding-y: 0 !default; diff --git a/src/Button/Button.scss b/src/Button/Button.scss index cf5f7e3cd6..9d76a289dd 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -2,33 +2,35 @@ @import "~bootstrap/scss/button-group"; @mixin button-variant( - $background, $border, $hover-background: darken($background, 7.5%), - $hover-border: darken($border, 10%), $active-background: darken($background, 10%), - $active-border: darken($border, 12.5%), $color: color-yiq($background), $hover-color: color-yiq($hover-background), - $active-color: color-yiq($active-background) + $btn-variant-bg, $btn-variant-border, $btn-variant-hover-bg: darken($btn-variant-bg, 7.5%), + $btn-variant-hover-border: darken($btn-variant-border, 10%), + $btn-variant-active-bg: darken($btn-variant-bg, 10%), + $btn-variant-active-border: darken($btn-variant-border, 12.5%), + $btn-variant-color: color-yiq($btn-variant-bg), $btn-variant-hover-color: color-yiq($btn-variant-hover-bg), + $btn-variant-active-color: color-yiq($btn-variant-active-bg) ) { - color: $color; + color: $btn-variant-color; - @include gradient-bg($background); + @include gradient-bg($btn-variant-bg); - border-color: $border; + border-color: $btn-variant-border; @include box-shadow($btn-box-shadow); @include hover { - color: $hover-color; + color: $btn-variant-hover-color; - @include gradient-bg($hover-background); + @include gradient-bg($btn-variant-hover-bg); - border-color: $hover-border; + border-color: $btn-variant-hover-border; } // Disabled comes first so active can properly restyle &.disabled, &:disabled { - color: color-yiq($background); - background-color: $background; - border-color: $border; + color: color-yiq($btn-variant-bg); + background-color: $btn-variant-bg; + border-color: $btn-variant-border; // Remove CSS gradients if they're enabled @if $enable-gradients { @@ -39,43 +41,45 @@ &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { - color: $active-color; - background-color: $active-background; + color: $btn-variant-active-color; + background-color: $btn-variant-active-bg; @if $enable-gradients { background-image: none; // Remove the gradient for the pressed/active state } - border-color: $active-border; + border-color: $btn-variant-active-border; } } // OVERRIDE FROM BOOTSTRAP // We do this to better control active and focus states. @mixin button-outline-variant( - $color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color + $btn-outline-variant-color, $btn-outline-variant-color-hover: color-yiq($btn-outline-variant-color), + $btn-outline-variant-active-bg: $btn-outline-variant-color, + $btn-outline-variant-active-border: $btn-outline-variant-color ) { - color: $color; - border-color: $color; + color: $btn-outline-variant-color; + border-color: $btn-outline-variant-color; @include hover { - color: $color-hover; - background-color: $active-background; - border-color: $active-border; + color: $btn-outline-variant-color-hover; + background-color: $btn-outline-variant-active-bg; + border-color: $btn-outline-variant-active-border; } &.disabled, &:disabled { - color: $color; + color: $btn-outline-variant-color; background-color: transparent; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { - color: color-yiq($active-background); - background-color: $active-background; - border-color: $active-border; + color: color-yiq($btn-outline-variant-active-bg); + background-color: $btn-outline-variant-active-bg; + border-color: $btn-outline-variant-active-border; } } @@ -83,15 +87,16 @@ // No changes made. We do this to keep all button related mixins together, // // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { - padding: $padding-y $padding-x; +@mixin button-size($btn-size-padding-y, $btn-size-padding-x, $btn-size-font-size, +$btn-size-line-height, $btn-size-border-radius) { + padding: $btn-size-padding-y $btn-size-padding-x; - @include font-size($font-size); + @include font-size($btn-size-font-size); - line-height: $line-height; + line-height: $btn-size-line-height; // Manually declare to provide an override to the browser default - @include border-radius($border-radius, 0); + @include border-radius($btn-size-border-radius, 0); } // ------------------------ @@ -102,28 +107,30 @@ // A new variant of button (inverse) // @mixin button-inverse-variant( - $color, $background: color-yiq($color), $active-background: $color, $active-border: $color + $btn-inverse-variant-color, $btn-inverse-variant-bg: color-yiq($btn-inverse-variant-color), + $btn-inverse-variant-active-bg: $btn-inverse-variant-color, + $btn-inverse-variant-active-border: $btn-inverse-variant-color ) { - color: $color; + color: $btn-inverse-variant-color; border-color: transparent; - background-color: $background; + background-color: $btn-inverse-variant-bg; @include hover { - color: darken($color, 7.5%); - background-color: darken($background, 7.5%); + color: darken($btn-inverse-variant-color, 7.5%); + background-color: darken($btn-inverse-variant-bg, 7.5%); border-color: transparent; } &.disabled, &:disabled { - color: $color; + color: $btn-inverse-variant-color; background-color: transparent; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { - color: darken($color, 10%); + color: darken($btn-inverse-variant-color, 10%); background: #EEEEEE; } } @@ -141,10 +148,10 @@ &::before { content: ""; position: absolute; - top: -1 * $distance-include-btn-border; - right: -1 * $distance-include-btn-border; - bottom: -1 * $distance-include-btn-border; - left: -1 * $distance-include-btn-border; + top: calc(#{$distance-include-btn-border} * -1); + right: calc(#{$distance-include-btn-border} * -1); + bottom: calc(#{$distance-include-btn-border} * -1); + left: calc(#{$distance-include-btn-border} * -1); border: solid $btn-focus-width $ring-color; border-radius: calc(#{$btn-border-radius} + #{$distance}); } @@ -198,7 +205,8 @@ background-color: transparent; border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); + @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, + $btn-line-height, $btn-border-radius); @include transition($btn-transition); @include hover { @@ -247,27 +255,27 @@ fieldset:disabled a.btn { @each $color, $value in $theme-colors { .btn-#{$color} { - $background: $value; - $border: $value; + $theme-color-bg: $value; + $theme-color-border: $value; - $hover-background: theme-color($color, "hover"); - $hover-border: theme-color($color, "hover"); - $active-background: theme-color($color, "active"); - $active-border: theme-color($color, "active"); + $theme-color-hover-bg: theme-color($color, "hover"); + $theme-color-hover-border: theme-color($color, "hover"); + $theme-color-hover-border-active-bg: theme-color($color, "active"); + $theme-color-active-border: theme-color($color, "active"); // Defaults - $hover-background: darken($background, 7.5%) !default; - $hover-border: darken($border, 10%) !default; - $active-background: darken($background, 10%) !default; - $active-border: darken($border, 12.5%) !default; + $theme-color-hover-bg: darken($theme-color-bg, 7.5%) !default; + $theme-color-hover-border: darken($theme-color-border, 10%) !default; + $theme-color-hover-border-active-bg: darken($theme-color-bg, 10%) !default; + $theme-color-active-border: darken($theme-color-border, 12.5%) !default; @include button-variant( - $background, - $border, - $hover-background, - $hover-border, - $active-background, - $active-border + $theme-color-bg, + $theme-color-border, + $theme-color-hover-bg, + $theme-color-hover-border, + $theme-color-hover-border-active-bg, + $theme-color-active-border ); @include button-focus(theme-color($color, "focus")); } @@ -275,20 +283,20 @@ fieldset:disabled a.btn { .btn-outline-#{$color} { $text-and-border: $value; - $color-hover: theme-color($color, "hover"); - $active-background: theme-color($color, "background"); - $active-border: theme-color($color, "active"); + $btn-outline-color-hover: theme-color($color, "hover"); + $btn-outline-active-background: theme-color($color, "background"); + $btn-outline-active-border: theme-color($color, "active"); // Defaults $color-hover: color-yiq($value) !default; $active-background: $value !default; - $active-border: $value !default; + $btn-outline-active-border: $value !default; @include button-outline-variant( $text-and-border, - $color-hover, - $active-background, - $active-border, + $btn-outline-color-hover, + $btn-outline-active-background, + $btn-outline-active-border, ); @include button-focus(theme-color($color, "focus")); } @@ -300,15 +308,15 @@ fieldset:disabled a.btn { $active-border: theme-color($color, "active"); // Defaults - $background: color-yiq($value) !default; - $active-background: $value !default; - $active-border: $value !default; + $btn-inverse-bg: color-yiq($value) !default; + $btn-inverse-active-bg: $value !default; + $btn-inverse-active-border: $value !default; @include button-inverse-variant( $text, - $background, - $active-background, - $active-border, + $btn-inverse-bg, + $btn-inverse-active-bg, + $btn-inverse-active-border, ); @include button-focus($white); } @@ -322,14 +330,14 @@ fieldset:disabled a.btn { // Defaults $color-hover: color-yiq($value) !default; - $active-background: $value !default; - $active-border: $value !default; + $btn-inverse-outline-active-bg: $value !default; + $btn-inverse-outline-active-border: $value !default; @include button-outline-variant( $text-and-border, $color-hover, - $active-background, - $active-border, + $btn-inverse-outline-active-bg, + $btn-inverse-outline-active-border, ); @include button-focus($white); } @@ -340,20 +348,20 @@ fieldset:disabled a.btn { // .btn-tertiary { - $background: $btn-tertiary-bg; - $border: transparent; + $button-tertiary-background: $btn-tertiary-bg; + $button-tertiary-border: transparent; $hover-background: $btn-tertiary-hover-bg; $hover-border: transparent; - $active-background: $btn-tertiary-active-bg; - $active-border: transparent; + $button-tertiary-active-bg: $btn-tertiary-active-bg; + $button-tertiary-active-border: transparent; @include button-variant( - $background, - $border, + $button-tertiary-background, + $button-tertiary-border, $hover-background, $hover-border, - $active-background, - $active-border, + $button-tertiary-active-bg, + $button-tertiary-active-border, $btn-tertiary-color, $btn-tertiary-color, $btn-tertiary-color @@ -362,20 +370,20 @@ fieldset:disabled a.btn { } .btn-inverse-tertiary { - $background: $btn-inverse-tertiary-bg; - $border: transparent; + $button-inverse-tertiary-bg: $btn-inverse-tertiary-bg; + $button-inverse-tertiary-border: transparent; $hover-background: $btn-inverse-tertiary-hover-bg; $hover-border: transparent; - $active-background: $btn-inverse-tertiary-active-bg; - $active-border: transparent; + $button-inverse-tertiary-active-bg: $btn-inverse-tertiary-active-bg; + $button-inverse-tertiary-active-border: transparent; @include button-variant( - $background, - $border, + $button-inverse-tertiary-bg, + $button-inverse-tertiary-border, $hover-background, $hover-border, - $active-background, - $active-border, + $button-inverse-tertiary-active-bg, + $button-inverse-tertiary-active-border, $btn-inverse-tertiary-color, $btn-inverse-tertiary-color, $btn-inverse-tertiary-color @@ -424,13 +432,15 @@ fieldset:disabled a.btn { .btn-lg { @include button-size( - $btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg + $btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, + $btn-line-height-lg, $btn-border-radius-lg ); } .btn-sm { @include button-size( - $btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm + $btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, + $btn-line-height-sm, $btn-border-radius-sm ); } diff --git a/src/Card/Card.scss b/src/Card/Card.scss index 271a294814..6c5c74189a 100644 --- a/src/Card/Card.scss +++ b/src/Card/Card.scss @@ -240,9 +240,9 @@ a .pgn__card { .pgn__card-image-cap-loader { .react-loading-skeleton { - margin-bottom: -$loading-skeleton-spacer; + margin-bottom: calc(#{$loading-skeleton-spacer} * -1); position: relative; - top: -$loading-skeleton-spacer; + top: calc(#{$loading-skeleton-spacer} * -1); height: 100%; } } @@ -259,7 +259,7 @@ a .pgn__card { .pgn__card-logo-cap { position: absolute; inset-inline-start: $card-logo-left-offset; - bottom: #{-$card-logo-bottom-offset}; + bottom: #{calc(#{$card-logo-bottom-offset} * -1)}; width: $card-logo-width; height: $card-logo-height; border-radius: $card-logo-border-radius; diff --git a/src/Code/_variables.scss b/src/Code/_variables.scss index a6790b97ba..f48f830f0b 100644 --- a/src/Code/_variables.scss +++ b/src/Code/_variables.scss @@ -3,8 +3,8 @@ $code-font-size: 87.5% !default; $code-color: #E83E8C !default; -$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; -$nested-kbd-font-weight: $font-weight-bold !default; +$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; +$nested-kbd-font-weight: $font-weight-bold !default; // HTML Keyboard Input element () styles $kbd-padding-y: .2rem !default; diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss index 5b99718898..4934f22d30 100644 --- a/src/DataTable/DataTable.scss +++ b/src/DataTable/DataTable.scss @@ -1,13 +1,4 @@ -$data-table-background-color: $white !default; -$data-table-border: 1px solid $gray-200 !default; -$data-table-box-shadow: $box-shadow-sm !default; -$data-table-padding-x: .75rem !default; -$data-table-padding-y: .75rem !default; -$data-table-padding-small: .5rem !default; -$data-table-cell-padding: .5rem .75rem !default; -$data-table-footer-position: center !default; -$data-table-pagination-dropdown-max-height: 60vh !default; -$data-table-pagination-dropdown-min-width: 6rem !default; +@import "variables"; .pgn__data-table-wrapper { font-size: $font-size-sm; diff --git a/src/DataTable/_variables.scss b/src/DataTable/_variables.scss new file mode 100644 index 0000000000..50648dafa3 --- /dev/null +++ b/src/DataTable/_variables.scss @@ -0,0 +1,10 @@ +$data-table-background-color: $white !default; +$data-table-border: 1px solid $gray-200 !default; +$data-table-box-shadow: $box-shadow-sm !default; +$data-table-padding-x: .75rem !default; +$data-table-padding-y: .75rem !default; +$data-table-padding-small: .5rem !default; +$data-table-cell-padding: .5rem .75rem !default; +$data-table-footer-position: center !default; +$data-table-pagination-dropdown-max-height: 60vh !default; +$data-table-pagination-dropdown-min-width: 6rem !default; diff --git a/src/Form/_Form.scss b/src/Form/_Form.scss index 6d42e7dccd..2ec5576aab 100644 --- a/src/Form/_Form.scss +++ b/src/Form/_Form.scss @@ -215,7 +215,7 @@ $select-icon-padding: .5625rem !default; transform: translateX(#{$form-control-icon-width}); [dir="rtl"] & { - transform: translateX(#{-$form-control-icon-width}); + transform: translateX(-#{$form-control-icon-width}); } } } @@ -365,7 +365,9 @@ select.form-control { height: $custom-control-indicator-size; width: $custom-control-indicator-size; background-color: $custom-control-indicator-bg; - border: solid $custom-control-indicator-border-width $custom-control-indicator-border-color; + border: + solid $custom-control-indicator-border-width + $custom-control-indicator-border-color; border-radius: $custom-checkbox-indicator-border-radius; margin-inline-end: $custom-control-gutter; background-position: center; @@ -410,10 +412,10 @@ select.form-control { &:focus::before { content: ""; position: absolute; - top: -$form-check-position-axis; - right: -$form-check-position-axis; - bottom: -$form-check-position-axis; - left: -$form-check-position-axis; + top: calc(#{$form-check-position-axis} * -1); + right: calc(#{$form-check-position-axis} * -1); + bottom: calc(#{$form-check-position-axis} * -1); + left: calc(#{$form-check-position-axis} * -1); border: $form-check-border-width solid $input-focus-border-color; border-radius: $form-check-focus-border-radius; } diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss index bce3eb1276..a186e6d6c6 100644 --- a/src/Form/_mixins.scss +++ b/src/Form/_mixins.scss @@ -3,7 +3,7 @@ $padding-y, $line-height, $font-size, - $border-width + $label-initial-border-width ) { padding: 0 $padding-x; @@ -19,7 +19,7 @@ $padding-y, $line-height, $font-size, - $border-width + $label-float-border-width ) { .pgn__form-control-floating-label-text { $half-leading: calc(($line-height - .8) / 2); diff --git a/src/IconButton/IconButton.scss b/src/IconButton/IconButton.scss index 3843925ed6..d6e920c97c 100644 --- a/src/IconButton/IconButton.scss +++ b/src/IconButton/IconButton.scss @@ -1,20 +1,4 @@ -$icon-button-colors: ( - "primary": $primary, - "secondary": $secondary, - "brand": $brand, - "success": $success, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark, - "black": $black, -) !default; -$btn-icon-diameter-md: 2.75rem !default; -$btn-icon-diameter-sm: 2.25rem !default; -$btn-icon-diameter-inline: calc(#{$line-height-base}em + .1em) !default; - -$btn-icon-bg: transparent !default; -$btn-icon-accent-color: white !default; +@import "variables"; @mixin btn-icon-size($icon-size) { width: $icon-size; diff --git a/src/IconButton/_variables.scss b/src/IconButton/_variables.scss new file mode 100644 index 0000000000..60c47e012c --- /dev/null +++ b/src/IconButton/_variables.scss @@ -0,0 +1,17 @@ +$icon-button-colors: ( + "primary": $primary, + "secondary": $secondary, + "brand": $brand, + "success": $success, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark, + "black": $black, +) !default; +$btn-icon-diameter-md: 2.75rem !default; +$btn-icon-diameter-sm: 2.25rem !default; +$btn-icon-diameter-inline: calc(#{$line-height-base}em + .1em) !default; + +$btn-icon-bg: transparent !default; +$btn-icon-accent-color: white !default; diff --git a/src/Menu/Menu.scss b/src/Menu/Menu.scss index 57da20ed96..3b6ac0f8f7 100644 --- a/src/Menu/Menu.scss +++ b/src/Menu/Menu.scss @@ -1,3 +1,5 @@ +@import "variables"; + .pgn__menu-item { display: flex; align-items: center; @@ -20,7 +22,6 @@ font-size: $btn-font-size; height: 48px; border-radius: 0; - $hover-border: transparent; .pgn__menu-item-content-spacer { flex-grow: 1; @@ -39,11 +40,6 @@ opacity: $btn-disabled-opacity; } - $background: $btn-tertiary-bg; - $border: transparent; - $active-background: $btn-tertiary-active-bg; - $active-border: transparent; - &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { diff --git a/src/Menu/_variables.scss b/src/Menu/_variables.scss new file mode 100644 index 0000000000..a235671ddf --- /dev/null +++ b/src/Menu/_variables.scss @@ -0,0 +1,5 @@ +$background: $btn-tertiary-bg; +$border: transparent; +$active-background: $btn-tertiary-active-bg; +$active-border: transparent; +$hover-border: transparent; diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss index 9a97adb06e..57bae8234c 100644 --- a/src/Modal/_ModalDialog.scss +++ b/src/Modal/_ModalDialog.scss @@ -140,10 +140,10 @@ display: block; height: 20px; position: sticky; - top: -$modal-inner-padding; - margin-top: -$modal-inner-padding; - margin-left: -$modal-inner-padding; - margin-right: -$modal-inner-padding; + top: calc($modal-inner-padding * -1); + margin-top: calc($modal-inner-padding * -1); + margin-left: calc($modal-inner-padding * -1); + margin-right: calc($modal-inner-padding * -1); opacity: .5; z-index: 2; } @@ -162,9 +162,9 @@ height: 20px; position: sticky; bottom: calc(#{$modal-inner-padding} / 2 * -1); - margin-bottom: -$modal-inner-padding-bottom; - margin-left: -$modal-inner-padding; - margin-right: -$modal-inner-padding; + margin-bottom: calc($modal-inner-padding-bottom * -1); + margin-left: calc($modal-inner-padding * -1); + margin-right: calc($modal-inner-padding * -1); opacity: .5; } diff --git a/src/Nav/Nav.scss b/src/Nav/Nav.scss index 48b8e6680e..a90f6ce3b0 100644 --- a/src/Nav/Nav.scss +++ b/src/Nav/Nav.scss @@ -41,7 +41,7 @@ border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; .nav-link { - margin-bottom: -$nav-tabs-border-width; + margin-bottom: calc($nav-tabs-border-width * -1); border-top: $nav-tabs-border-width solid transparent; border-bottom: $nav-tabs-border-width solid transparent; border-left: none; @@ -70,7 +70,7 @@ .dropdown-menu { // Make dropdown border overlap tab border - margin-top: -$nav-tabs-border-width; + margin-top: calc($nav-tabs-border-width * -1); // Remove the top rounded corners here since there is a hard edge above the menu @include border-top-radius(0); diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss index 5a2940274c..7c4d370c19 100644 --- a/src/ProductTour/Checkpoint.scss +++ b/src/ProductTour/Checkpoint.scss @@ -99,7 +99,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; } .pgn__checkpoint[data-popper-placement^="top"] > #pgn__checkpoint-arrow { - left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement + left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement bottom: 1px; [dir="rtl"] & { @@ -118,7 +118,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; .pgn__checkpoint[data-popper-placement^="bottom"] > #pgn__checkpoint-arrow { top: -36px; - left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement + left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement &::after { border-bottom: $checkpoint-arrow-top-color; @@ -129,7 +129,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; } .pgn__checkpoint[data-popper-placement^="left"] > #pgn__checkpoint-arrow { - top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement + top: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement right: 1px; &::after { @@ -142,7 +142,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; } .pgn__checkpoint[data-popper-placement^="right"] > #pgn__checkpoint-arrow { - top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement + top: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement left: 1px; &::after { diff --git a/tokens/build-tokens.js b/tokens/build-tokens.js index 5cd6cc6a2d..9ab2dba17b 100644 --- a/tokens/build-tokens.js +++ b/tokens/build-tokens.js @@ -12,12 +12,12 @@ const BASE_BUILD_PATH = path.resolve(__dirname, 'build'); StyleDictionary.registerTransform({ name: 'color/uppercase', type: 'value', - matcher: function(token) { + matcher(token) { return token.attributes.category === 'color'; }, - transformer: function(token) { + transformer(token) { return token.original.value.toUpperCase(); - } + }, }); /** @@ -26,12 +26,14 @@ StyleDictionary.registerTransform({ */ StyleDictionary.registerFormat({ name: 'scss/variables-with-new-line', - formatter: function({ dictionary, options, file }) { + formatter({ dictionary, options, file }) { const { outputReferences, themeable = false } = options; - return fileHeader({file, commentStyle: 'short'}) + - formattedVariables({ format: 'sass', dictionary, outputReferences, themeable }) - + '\n'; - } + return `${fileHeader({ file, commentStyle: 'short' }) + + formattedVariables({ + format: 'sass', dictionary, outputReferences, themeable, + }) + }\n`; + }, }); const paragonStyleDictionary = StyleDictionary.extend({ @@ -51,7 +53,7 @@ const paragonStyleDictionary = StyleDictionary.extend({ transforms: StyleDictionary.transformGroup.scss.concat('color/uppercase'), options: { showFileHeader: false, - } + }, }, css: { transformGroup: 'css', @@ -75,7 +77,7 @@ const paragonStyleDictionary = StyleDictionary.extend({ transforms: StyleDictionary.transformGroup.css.concat('color/uppercase'), options: { showFileHeader: false, - } + }, }, }, }); diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss index 6fad45d3a7..1c152549eb 100644 --- a/tokens/build/_variables.scss +++ b/tokens/build/_variables.scss @@ -18,6 +18,8 @@ $pgn-font-size-h4: 1.125rem !default; $pgn-font-size-h3: 1.375rem !default; $pgn-font-size-h2: 2rem !default; $pgn-font-size-h1: 2.5rem !default; +$pgn-font-size-small-x: 75% !default; +$pgn-font-size-small-base: 87.5% !default; $pgn-font-size-xs: .75rem !default; $pgn-font-size-sm: .875rem !default; $pgn-font-size-lg: 1.4063rem !default; @@ -71,9 +73,6 @@ $pgn-zindex-sheet-backdrop: 1031 !default; $pgn-zindex-fixed: 1030 !default; $pgn-zindex-sticky: 1020 !default; $pgn-zindex-dropdown: 1000 !default; -$pgn-table-th-font-weight: null !default; -$pgn-table-cell-padding-sm: .3rem !default; -$pgn-table-cell-padding-base: .75rem !default; $pgn-spacing-base-5-5: 4rem !default; $pgn-spacing-base-4-5: 2rem !default; $pgn-spacing-base-3-5: 1.25rem !default; @@ -124,6 +123,11 @@ $pgn-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rg $pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default; $pgn-core-input-btn-focus-width: 1px !default; $pgn-core-input-btn-line-height-sm: 1.4286 !default; $pgn-core-input-btn-line-height-base: 1.3333 !default; @@ -137,22 +141,308 @@ $pgn-core-input-btn-padding-sm-x: .75rem !default; $pgn-core-input-btn-padding-sm-y: .4375rem !default; $pgn-core-input-btn-padding-x: 1rem !default; $pgn-core-input-btn-padding-y: .5625rem !default; +$pgn-core-spacer: 1rem !default; +$pgn-tooltip-arrow-height: .4rem !default; +$pgn-tooltip-arrow-width: .8rem !default; +$pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; +$pgn-tooltip-margin: 0 !default; +$pgn-tooltip-padding-x: .5rem !default; +$pgn-tooltip-padding-y: .5rem !default; +$pgn-tooltip-opacity: 1 !default; +$pgn-tooltip-max-width: 200px !default; +$pgn-toast-container-gutter-sm: .625rem !default; +$pgn-toast-container-gutter-lg: 1.25rem !default; +$pgn-toast-header-color-border: rgba(0, 0, 0, .5) !default; +$pgn-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15) !default; +$pgn-toast-border-radius: .25rem !default; +$pgn-toast-border-color: rgba(0, 0, 0, .1) !default; +$pgn-toast-border-width: 1px !default; +$pgn-toast-color-base: null !default; +$pgn-toast-font-size: .875rem !default; +$pgn-toast-padding-y: .25rem !default; +$pgn-toast-padding-x: .75rem !default; +$pgn-toast-max-width: 400px !default; +$pgn-tabs-notification-width: 1rem !default; +$pgn-tabs-notification-height: 1rem !default; +$pgn-table-th-font-weight: null !default; +$pgn-table-level-border: -6 !default; +$pgn-table-level-bg: -9 !default; +$pgn-table-striped-order: odd !default; +$pgn-table-dark-bg-hover: rgba(255, 255, 255, .075) !default; +$pgn-table-dark-bg-accent: rgba(255, 255, 255, .05) !default; +$pgn-table-bg-hover: rgba(0, 0, 0, .075) !default; +$pgn-table-bg-accent: rgba(0, 0, 0, .05) !default; +$pgn-table-bg-base: null !default; +$pgn-table-cell-padding-sm: .3rem !default; +$pgn-table-cell-padding-base: .75rem !default; +$pgn-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default; +$pgn-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default; +$pgn-sticky-offset: 0 !default; +$pgn-stack-gap: 0 !default; $pgn-spinner-sm-border-width: .2em !default; $pgn-spinner-sm-width: 1rem !default; $pgn-spinner-border-width: .25em !default; $pgn-spinner-width: 2rem !default; +$pgn-selectable-box-cols-number-max: 12 !default; +$pgn-selectable-box-cols-number-min: 1 !default; +$pgn-selectable-box-box-space: .75rem !default; +$pgn-selectable-box-border-radius: .25rem !default; +$pgn-selectable-box-padding: 1rem !default; +$pgn-search-field-button-margin: .5rem !default; +$pgn-search-field-disabled-opacity: .3 !default; +$pgn-search-field-line-height: 1.5rem !default; +$pgn-search-field-border-width-focus: .3125rem !default; +$pgn-search-field-border-width-interaction: .125rem !default; +$pgn-search-field-border-width-base: .0625rem !default; +$pgn-search-field-border-radius: 0 !default; +$pgn-progress-bar-hint-annotation-gap: .5rem !default; +$pgn-progress-bar-threshold-circle: .5625rem !default; +$pgn-progress-bar-bar-transition: width .6s ease !default; +$pgn-progress-bar-bar-animation-timing: 1s linear infinite !default; +$pgn-progress-bar-box-shadow: none !default; +$pgn-progress-bar-border-width: 1px !default; +$pgn-progress-bar-border-radius: 0 !default; +$pgn-progress-bar-bg: transparent !default; +$pgn-progress-bar-height-annotated: .3125rem !default; +$pgn-progress-bar-height-base: 1rem !default; +$pgn-product-tour-checkpoint-zindex: 1060 !default; +$pgn-product-tour-checkpoint-width-max: 480px !default; +$pgn-product-tour-checkpoint-width-arrow: 15px !default; +$pgn-product-tour-checkpoint-width-border: 8px !default; +$pgn-popover-arrow-height: .5rem !default; +$pgn-popover-arrow-width: 1rem !default; +$pgn-popover-icon-width: 1rem !default; +$pgn-popover-icon-height: 1rem !default; +$pgn-popover-icon-margin-right: .5rem !default; +$pgn-popover-header-padding-x: 1rem !default; +$pgn-popover-header-padding-y: .5rem !default; +$pgn-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; +$pgn-popover-border-color: rgba(0, 0, 0, .2) !default; +$pgn-popover-max-width: 480px !default; +$pgn-reduced-dropdown-width-min: 6rem !default; +$pgn-reduced-dropdown-height-max: 60vh !default; +$pgn-pagination-focus-border-width: .125rem !default; +$pgn-pagination-focus-box-outline: 0 !default; +$pgn-pagination-secondary-height-sm: 2.75rem !default; +$pgn-pagination-secondary-height-base: 2.75rem !default; +$pgn-pagination-toggle-border-sm: .25rem !default; +$pgn-pagination-toggle-border-base: .3125rem !default; +$pgn-pagination-icon-height: 2.25rem !default; +$pgn-pagination-icon-width: 2.25rem !default; +$pgn-pagination-icon-size-sm: 1rem !default; +$pgn-pagination-icon-size-base: 1.375rem !default; +$pgn-pagination-font-size-sm: .875rem !default; +$pgn-pagination-line-height: 1.5rem !default; +$pgn-pagination-margin-y: .5rem !default; +$pgn-pagination-margin-x: .5rem !default; +$pgn-pagination-padding-icon: .5rem !default; +$pgn-pagination-padding-x-lg: 1.5rem !default; +$pgn-pagination-padding-x-sm: .6rem !default; +$pgn-pagination-padding-x-base: 1rem !default; +$pgn-pagination-padding-y-lg: .75rem !default; +$pgn-pagination-padding-y-sm: .8rem !default; +$pgn-pagination-padding-y-base: .625rem !default; +$pgn-navbar-light-toggler-border-color: rgba(0, 0, 0, .1) !default; +$pgn-navbar-light-color-disabled: rgba(0, 0, 0, .3) !default; +$pgn-navbar-light-color-active: rgba(0, 0, 0, .9) !default; +$pgn-navbar-light-color-hover: rgba(0, 0, 0, .7) !default; +$pgn-navbar-light-color-base: rgba(0, 0, 0, .5) !default; +$pgn-navbar-dark-color-base: rgba(255, 255, 255, .5) !default; +$pgn-navbar-toggler-padding-x: .75rem !default; +$pgn-navbar-toggler-padding-y: .25rem !default; +$pgn-navbar-nav-scroll-max-height: 75vh !default; +$pgn-navbar-padding-x-nav-link: .5rem !default; +$pgn-nav-tabs-border-radius: 0 !default; +$pgn-nav-tabs-border-width: 2px !default; +$pgn-nav-link-font-weight: 500 !default; +$pgn-nav-link-padding-x: 1rem !default; +$pgn-nav-link-padding-y: .5rem !default; +$pgn-modal-transform-scale: scale(1.02) !default; +$pgn-modal-transform-show: none !default; +$pgn-modal-transform-fade: translate(0, -50px) !default; +$pgn-modal-transform-base: transform .3s ease-out !default; +$pgn-modal-sm: 500px !default; +$pgn-modal-md: 500px !default; +$pgn-modal-lg: 800px !default; +$pgn-modal-xl: 1140px !default; +$pgn-modal-header-padding-x: 1.5rem !default; +$pgn-modal-header-padding-y: 1rem !default; +$pgn-modal-backdrop-opacity: .5 !default; +$pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15) !default; +$pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5) !default; +$pgn-modal-content-border-width: 0 !default; +$pgn-modal-content-border-color: rgba(0, 0, 0, .2) !default; +$pgn-modal-content-color: null !default; +$pgn-modal-dialog-margin-y-sm-up: 1.75rem !default; +$pgn-modal-dialog-margin-base: 1.5rem !default; +$pgn-modal-footer-padding-y: 1.5rem !default; +$pgn-modal-footer-padding-x: 1rem !default; +$pgn-modal-footer-margin-between: .5rem !default; +$pgn-modal-inner-padding: 1.5rem !default; +$pgn-menu-border-hover: transparent !default; +$pgn-menu-border-active: transparent !default; +$pgn-menu-border-base: transparent !default; +$pgn-image-figure-caption-font-size: 90% !default; +$pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075) !default; +$pgn-image-thumbnail-padding: .25rem !default; +$pgn-icon-lg: 1.75rem !default; +$pgn-icon-md: 1.5rem !default; +$pgn-icon-sm: 1.25rem !default; +$pgn-icon-inline: .8em !default; +$pgn-icon-button-bg: transparent !default; +$pgn-icon-button-diameter-sm: 2.25rem !default; +$pgn-icon-button-diameter-md: 2.75rem !default; +$pgn-form-select-icon-padding: .5625rem !default; +$pgn-form-control-icon-width: 32px !default; +$pgn-form-feedback-tooltip-opacity: .9 !default; +$pgn-form-feedback-tooltip-padding-x: .5rem !default; +$pgn-form-feedback-tooltip-padding-y: .25rem !default; +$pgn-form-custom-range-thumb-box-shadow-base: 0 .1rem .25rem rgba(0, 0, 0, .1) !default; +$pgn-form-custom-range-thumb-border-radius: 1rem !default; +$pgn-form-custom-range-thumb-border-base: 0 !default; +$pgn-form-custom-range-thumb-width: 1rem !default; +$pgn-form-custom-range-track-box-shadow: inset 0 .25rem .25rem rgba(0, 0, 0, .1) !default; +$pgn-form-custom-range-track-border-radius: 1rem !default; +$pgn-form-custom-range-track-cursor: pointer !default; +$pgn-form-custom-range-track-height: .5rem !default; +$pgn-form-custom-range-track-width: 100% !default; +$pgn-form-custom-select-border-box-shadow-base: inset 0 1px 2px rgba(0, 0, 0, .075) !default; +$pgn-form-custom-select-bg-size: 24px 24px !default; +$pgn-form-custom-select-indicator-padding: 1rem !default; +$pgn-form-custom-radio-indicator-border-radius: 50% !default; +$pgn-form-custom-checkbox-indicator-indeterminate-box-shadow: none !default; +$pgn-form-custom-checkbox-indicator-border-radius: 0 !default; +$pgn-form-custom-control-label-color-base: null !default; +$pgn-form-custom-control-indicator-active-box-shadow: none !default; +$pgn-form-custom-control-indicator-checked-box-shadow-focus: 0 0 0 4px rgba(0, 0, 0, .1) !default; +$pgn-form-custom-control-indicator-checked-box-shadow-base: none !default; +$pgn-form-custom-control-indicator-checked-bg-disabled: rgba(10, 48, 85, .5) !default; +$pgn-form-custom-control-indicator-border-width: 2px !default; +$pgn-form-custom-control-indicator-bg-size: 100% !default; +$pgn-form-custom-control-indicator-size: 1.25rem !default; +$pgn-form-custom-control-cursor: null !default; +$pgn-form-custom-control-spacer-x: 1rem !default; +$pgn-form-custom-control-gutter: .5rem !default; +$pgn-form-custom-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$pgn-form-group-margin-bottom: 1rem !default; +$pgn-form-grid-gutter-width: 10px !default; +$pgn-form-check-border-width: .125rem !default; +$pgn-form-check-border-radius-focus: .0625rem !default; +$pgn-form-check-position-axis: .375rem !default; +$pgn-form-check-inline-margin-x: .75rem !default; +$pgn-form-text-margin-top: .25rem !default; +$pgn-form-input-check-margin-y: .3rem !default; +$pgn-form-input-check-margin-x-inline: .3125rem !default; +$pgn-form-input-check-margin-x-base: .25rem !default; +$pgn-form-input-check-gutter: 1.25rem !default; +$pgn-form-input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$pgn-form-input-width-hover: 1px !default; +$pgn-form-input-focus-width: 1px !default; +$pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075) !default; +$pgn-dropzone-padding: 1.5rem !default; +$pgn-dropdown-border-color: rgba(0, 0, 0, .15) !default; +$pgn-dropdown-spacer: .125rem !default; +$pgn-dropdown-padding-y-item: .5rem !default; +$pgn-dropdown-padding-y-base: .25rem !default; +$pgn-dropdown-padding-x-item: 1rem !default; +$pgn-dropdown-padding-x-base: 0 !default; +$pgn-dropdown-min-width: 18rem !default; +$pgn-data-table-pagination-dropdown-min-width: 6rem !default; +$pgn-data-table-pagination-dropdown-max-height: 60vh !default; +$pgn-data-table-footer-position: center !default; +$pgn-data-table-padding-cell: .5rem .75rem !default; +$pgn-data-table-padding-small: .5rem !default; +$pgn-data-table-padding-y: .75rem !default; +$pgn-data-table-padding-x: .75rem !default; +$pgn-container-max-width-xl: 1440px !default; +$pgn-container-max-width-lg: 1192px !default; +$pgn-container-max-width-md: 952px !default; +$pgn-container-max-width-sm: 708px !default; +$pgn-container-max-width-xs: 464px !default; +$pgn-collapsible-card-spacer-basic-icon: .625rem !default; +$pgn-collapsible-card-spacer-basic-x: .5rem !default; +$pgn-collapsible-card-spacer-basic-y: .5rem !default; +$pgn-collapsible-card-spacer-icon: 2.5rem !default; +$pgn-collapsible-card-spacer-left-body: .75rem !default; +$pgn-collapsible-card-spacer-x-base: .5rem !default; +$pgn-collapsible-card-spacer-y-base: .5rem !default; +$pgn-code-pre-scrollable-max-height: 340px !default; +$pgn-code-kbd-padding-x: .4rem !default; +$pgn-code-kbd-padding-y: .2rem !default; +$pgn-code-color: #E83E8C !default; +$pgn-code-font-size: 87.5% !default; +$pgn-chip-line-height: 1.5rem !default; +$pgn-chip-font-weight: 400 !default; +$pgn-chip-font-size: .75rem !default; +$pgn-chip-position-axis: .125rem !default; +$pgn-chip-border-width: .0625rem !default; +$pgn-chip-border-radius-focus: .5rem !default; +$pgn-chip-border-radius-base: .4375rem !default; +$pgn-chip-margin-inline: .5rem !default; +$pgn-chip-padding-x: .5rem !default; +$pgn-chip-padding-y: .125rem !default; +$pgn-carousel-transition-duration: .6s !default; +$pgn-carousel-caption-width: 70% !default; +$pgn-carousel-indicator-transition: opacity .6s ease !default; +$pgn-carousel-indicator-spacer: 3px !default; +$pgn-carousel-indicator-height-area-hit: 3px !default; +$pgn-carousel-indicator-height-base: 3px !default; +$pgn-carousel-indicator-width: 30px !default; +$pgn-carousel-control-transition: opacity .15s ease !default; +$pgn-carousel-control-opacity-hover: .9 !default; +$pgn-carousel-control-opacity-base: .5 !default; +$pgn-carousel-control-width-icon: 20px !default; +$pgn-carousel-control-width-base: 15% !default; +$pgn-card-loading-skeleton-spacer: .313rem !default; +$pgn-card-logo-height: 4.125rem !default; +$pgn-card-logo-width: 7.25rem !default; +$pgn-card-logo-bottom-offset-horizontal: .4375rem !default; +$pgn-card-logo-bottom-offset-base: 1rem !default; +$pgn-card-logo-left-offset-horizontal: .4375rem !default; +$pgn-card-logo-left-offset-base: 1.5rem !default; +$pgn-card-footer-action-gap: .5rem !default; +$pgn-card-columns-gap: 1.25rem !default; +$pgn-card-columns-count: 3 !default; +$pgn-card-margin-group: 12px !default; +$pgn-card-image-vertical-height-max: 140px !default; +$pgn-card-image-horizontal-width-max: 240px !default; +$pgn-card-image-overlay-padding: 1.25rem !default; +$pgn-card-color: null !default; +$pgn-card-height-base: null !default; +$pgn-card-cap-color: null !default; +$pgn-card-cap-bg: rgba(0, 0, 0, .03) !default; +$pgn-card-border-color-focus: rgba(0, 0, 0, .5) !default; +$pgn-card-border-radius-logo: .25rem !default; +$pgn-card-border-radius-image: .3125rem !default; +$pgn-card-spacer-y: .75rem !default; +$pgn-card-spacer-x: 1.25rem !default; $pgn-btn-transition: null !default; $pgn-btn-block-spacing-y: .5rem !default; -$pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1) !default; $pgn-btn-tertiary-inverse-bg-base: transparent !default; $pgn-btn-tertiary-bg-base: transparent !default; $pgn-btn-disabled-opacity: .65 !default; $pgn-btn-focus-gap: 1px !default; $pgn-btn-focus-width: 2px !default; $pgn-btn-box-shadow-active: none !default; -$pgn-avatar-button-padding-left-lg: .25em !default; -$pgn-avatar-button-padding-left-sm: .25em !default; -$pgn-avatar-button-padding-left-base: .25em !default; +$pgn-bubble-expandable-padding-x: .25rem !default; +$pgn-bubble-expandable-padding-y: 0 !default; +$pgn-breadcrumb-border-radius-focus: .125rem !default; +$pgn-breadcrumb-border-focus-width: .0625rem !default; +$pgn-breadcrumb-border-focus-axis-x: .25rem !default; +$pgn-breadcrumb-border-focus-axis-y: .5rem !default; +$pgn-breadcrumb-margin-left: .5rem !default; +$pgn-breadcrumb-margin-bottom: 1rem !default; +$pgn-breadcrumb-padding-item: .5rem !default; +$pgn-breadcrumb-padding-x: 1rem !default; +$pgn-breadcrumb-padding-y: .75rem !default; +$pgn-breadcrumb-font-size: null !default; +$pgn-badge-transition: none !default; +$pgn-badge-border-radius-pill: 10rem !default; +$pgn-badge-border-radius-base: .25rem !default; +$pgn-badge-padding-y: .125rem !default; +$pgn-badge-padding-x-pill: .6em !default; +$pgn-badge-padding-x-base: .5rem !default; +$pgn-badge-font-size: 75% !default; $pgn-avatar-size-huge: 18.75rem !default; $pgn-avatar-size-xxl: 11.5rem !default; $pgn-avatar-size-xl: 6rem !default; @@ -161,6 +451,16 @@ $pgn-avatar-size-sm: 2.25rem !default; $pgn-avatar-size-xs: 1.5rem !default; $pgn-avatar-size-base: 3rem !default; $pgn-avatar-border-radius: 100% !default; +$pgn-avatar-button-padding-left-lg: .25em !default; +$pgn-avatar-button-padding-left-sm: .25em !default; +$pgn-avatar-button-padding-left-base: .25em !default; +$pgn-annotation-arrow-border-width: .5rem !default; +$pgn-annotation-arrow-side-margin: .25rem !default; +$pgn-annotation-max-width: 18.75rem !default; +$pgn-annotation-border-radius: .25rem !default; +$pgn-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) + drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; +$pgn-annotation-padding: .5rem !default; $pgn-alert-line-height: 1.5rem !default; $pgn-alert-icon-space: .8rem !default; $pgn-alert-level-color: 6 !default; @@ -172,20 +472,22 @@ $pgn-alert-border-width: 0 !default; $pgn-alert-margin-bottom: 1rem !default; $pgn-alert-padding-x: 1.5rem !default; $pgn-alert-padding-y: 1.5rem !default; +$pgn-action-row-gap-y: .5rem !default; +$pgn-action-row-gap-x: .5rem !default; +$pgn-color-dark-base: #273F2F !default; $pgn-color-dark-900: #1B2C21 !default; $pgn-color-dark-800: #1D2F23 !default; $pgn-color-dark-700: #1F3226 !default; $pgn-color-dark-600: #23392A !default; -$pgn-color-dark-500: #273F2F !default; $pgn-color-dark-400: #5D6F63 !default; $pgn-color-dark-300: #939F97 !default; $pgn-color-dark-200: #C9CFCB !default; $pgn-color-dark-100: #F2F3F3 !default; +$pgn-color-light-base: #E1DDDB !default; $pgn-color-light-900: #9E9B99 !default; $pgn-color-light-800: #A9A6A4 !default; $pgn-color-light-700: #B4B1AF !default; $pgn-color-light-600: #CBC7C5 !default; -$pgn-color-light-500: #E1DDDB !default; $pgn-color-light-400: #E9E6E4 !default; $pgn-color-light-300: #F0EEED !default; $pgn-color-light-200: #F8F7F6 !default; @@ -222,11 +524,11 @@ $pgn-color-success-400: #51A17E !default; $pgn-color-success-300: #8BC1A9 !default; $pgn-color-success-200: #C5E0D4 !default; $pgn-color-success-100: #F1F8F5 !default; +$pgn-color-brand-base: #9D0054 !default; $pgn-color-brand-900: #6E003B !default; $pgn-color-brand-800: #76003F !default; $pgn-color-brand-700: #7E0043 !default; $pgn-color-brand-600: #8D004C !default; -$pgn-color-brand-500: #9D0054 !default; $pgn-color-brand-400: #B6407F !default; $pgn-color-brand-300: #CE80AA !default; $pgn-color-brand-200: #E7BFD4 !default; @@ -239,20 +541,20 @@ $pgn-color-secondary-400: #747474 !default; $pgn-color-secondary-300: #A2A2A2 !default; $pgn-color-secondary-200: #D1D1D1 !default; $pgn-color-secondary-100: #F4F4F4 !default; +$pgn-color-primary-base: #0A3055 !default; $pgn-color-primary-900: #07223C !default; $pgn-color-primary-800: #082440 !default; $pgn-color-primary-700: #082644 !default; $pgn-color-primary-600: #092B4D !default; -$pgn-color-primary-500: #0A3055 !default; $pgn-color-primary-400: #476480 !default; $pgn-color-primary-300: #8598AA !default; $pgn-color-primary-200: #C2CBD5 !default; $pgn-color-primary-100: #F0F3F5 !default; +$pgn-color-gray-base: #707070 !default; $pgn-color-gray-900: #212529 !default; $pgn-color-gray-800: #333333 !default; $pgn-color-gray-700: #454545 !default; $pgn-color-gray-600: #5C5C5C !default; -$pgn-color-gray-500: #707070 !default; $pgn-color-gray-400: #8F8F8F !default; $pgn-color-gray-300: #ADADAD !default; $pgn-color-gray-200: #CCCCCC !default; @@ -286,20 +588,178 @@ $pgn-display-weight-4: $pgn-font-weight-bold !default; $pgn-display-weight-3: $pgn-font-weight-bold !default; $pgn-display-weight-2: $pgn-font-weight-bold !default; $pgn-display-weight-1: $pgn-font-weight-bold !default; -$pgn-link-brand-inline-color: $pgn-color-brand-500 !default; -$pgn-link-brand-color: $pgn-color-brand-500 !default; -$pgn-link-muted-inline-color: $pgn-color-primary-500 !default; -$pgn-link-muted-color: $pgn-color-primary-500 !default; +$pgn-box-shadow-lg: 0 .25rem .5rem rgba($pgn-color-black, .3) !default; +$pgn-box-shadow-sm: 0 .0625rem .125rem rgba($pgn-color-black, .2) !default; +$pgn-box-shadow-base: 0 .125rem .25rem rgba($pgn-color-black, .3) !default; $pgn-core-input-btn-border-width: $pgn-border-width !default; +$pgn-core-input-btn-focus-box-shadow: 0 0 0 $pgn-core-input-btn-focus-width $pgn-core-input-btn-focus-color !default; $pgn-core-input-btn-line-height-lg: $pgn-line-height-lg !default; +$pgn-tooltip-arrow-color-light: $pgn-color-white !default; +$pgn-tooltip-border-radius: $pgn-border-radius-base !default; +$pgn-tooltip-bg-light: $pgn-color-white !default; +$pgn-tooltip-bg-base: $pgn-color-black !default; +$pgn-tooltip-color-light: $pgn-color-black !default; +$pgn-tooltip-color-base: $pgn-color-white !default; +$pgn-tooltip-font-size: $pgn-font-size-sm !default; +$pgn-toast-header-color-background: $pgn-color-gray-700 !default; +$pgn-toast-header-color-base: $pgn-color-white !default; +$pgn-toast-color-background: $pgn-color-gray-700 !default; +$pgn-tabs-notification-font-size: $pgn-font-size-xs !default; +$pgn-table-dark-bg-base: $pgn-color-gray-700 !default; +$pgn-table-dark-color-base: $pgn-color-white !default; +$pgn-table-border-width: $pgn-border-width !default; +$pgn-table-bg-head: $pgn-color-gray-100 !default; +$pgn-table-bg-active: $pgn-table-bg-hover !default; +$pgn-table-color-head: $pgn-color-gray-700 !default; $pgn-spinner-sm-height: $pgn-spinner-sm-width !default; $pgn-spinner-height: $pgn-spinner-width !default; -$pgn-btn-tertiary-inverse-bg-active: $pgn-btn-tertiary-inverse-bg-hover !default; +$pgn-search-field-border-color-focus: $pgn-color-black !default; +$pgn-search-field-border-color-interaction: $pgn-color-black !default; +$pgn-progress-bar-bar-bg-base: $pgn-color-accent-a !default; +$pgn-progress-bar-bar-color: $pgn-color-white !default; +$pgn-progress-bar-font-size: calc($pgn-font-size-base * .75) !default; +$pgn-product-tour-checkpoint-arrow-transparent: solid $pgn-product-tour-checkpoint-width-arrow transparent !default; +$pgn-product-tour-checkpoint-arrow-color-default: solid $pgn-product-tour-checkpoint-width-arrow $pgn-product-tour-checkpoint-color-background !default; +$pgn-product-tour-checkpoint-arrow-color-top: solid $pgn-product-tour-checkpoint-width-arrow $pgn-product-tour-checkpoint-width-border !default; +$pgn-product-tour-checkpoint-color-body: $pgn-color-gray-700 !default; +$pgn-product-tour-checkpoint-color-background: $pgn-color-light-300 !default; +$pgn-popover-danger-bg: $pgn-color-danger-100 !default; +$pgn-popover-warning-bg: $pgn-color-warning-100 !default; +$pgn-popover-success-bg: $pgn-color-success-100 !default; +$pgn-popover-body-padding-x: $pgn-popover-header-padding-x !default; +$pgn-popover-body-padding-y: $pgn-popover-header-padding-y !default; +$pgn-popover-header-bg: $pgn-color-white !default; +$pgn-popover-border-border: $pgn-border-width !default; +$pgn-popover-border-radius: $pgn-border-radius-sm !default; +$pgn-popover-bg: $pgn-color-white !default; +$pgn-popover-font-size: $pgn-font-size-sm !default; +$pgn-pagination-focus-color-text: $pgn-color-black !default; +$pgn-pagination-border-radius-lg: $pgn-border-radius-lg !default; +$pgn-pagination-border-radius-sm: $pgn-border-radius-sm !default; +$pgn-pagination-border-color-disabled: $pgn-color-gray-100 !default; +$pgn-pagination-border-color-hover: $pgn-color-gray-200 !default; +$pgn-pagination-border-color-base: $pgn-color-gray-200 !default; +$pgn-pagination-border-width: $pgn-border-width !default; +$pgn-pagination-bg-disabled: $pgn-color-white !default; +$pgn-pagination-bg-hover: $pgn-color-gray-100 !default; +$pgn-pagination-bg-base: $pgn-color-white !default; +$pgn-pagination-color-hover: $pgn-link-hover-color !default; +$pgn-pagination-color-inverse: $pgn-color-white !default; +$pgn-navbar-light-brand-color-hover: $pgn-navbar-light-color-active !default; +$pgn-navbar-light-brand-color-base: $pgn-navbar-light-color-active !default; +$pgn-navbar-dark-toggler-border-color: rgba($pgn-color-white, .1) !default; +$pgn-navbar-dark-color-disabled: rgba($pgn-color-white, .25) !default; +$pgn-navbar-dark-color-active: $pgn-color-white !default; +$pgn-navbar-dark-color-hover: rgba($pgn-color-white, .75) !default; +$pgn-navbar-toggler-font-size: $pgn-font-size-lg !default; +$pgn-navbar-brand-font-size: $pgn-font-size-lg !default; +$pgn-navbar-nav-link-height: calc($pgn-font-size-base * $pgn-line-height-base + .5rem * 2) !default; +$pgn-navbar-padding-x-base: $pgn-core-spacer !default; +$pgn-navbar-padding-y: calc($pgn-core-spacer / 2) !default; +$pgn-nav-divider-margin-y: calc($pgn-core-spacer / 2) !default; +$pgn-nav-divider-color: $pgn-color-gray-100 !default; +$pgn-nav-pills-border-radius: $pgn-border-radius-base !default; +$pgn-nav-tabs-link-hover-bg: $pgn-color-light-400 !default; +$pgn-nav-tabs-border-color: $pgn-color-light-400 !default; +$pgn-nav-link-color-disabled: $pgn-color-gray-300 !default; +$pgn-nav-link-color-base: $pgn-color-gray-700 !default; +$pgn-modal-header-padding-base: $pgn-modal-header-padding-y $pgn-modal-header-padding-x !default; +$pgn-modal-header-border-width: $pgn-modal-content-border-width !default; +$pgn-modal-backdrop-bg: $pgn-color-black !default; +$pgn-modal-content-border-radius: $pgn-border-radius-lg !default; +$pgn-modal-content-bg: $pgn-color-white !default; +$pgn-modal-title-line-height: $pgn-line-height-base !default; +$pgn-modal-footer-padding-base: $pgn-modal-footer-padding-y $pgn-modal-footer-padding-x !default; +$pgn-menu-background-base: $pgn-btn-tertiary-bg-base !default; +$pgn-image-thumbnail-border-radius: $pgn-border-radius-base !default; +$pgn-image-thumbnail-border-color: $pgn-color-gray-200 !default; +$pgn-image-thumbnail-border-width: $pgn-border-width !default; +$pgn-icon-button-accent-color: $pgn-color-white !default; +$pgn-icon-button-diameter-inline: calc($pgn-line-height-base + .1em) !default; +$pgn-form-feedback-tooltip-border-radius: $pgn-border-radius-base !default; +$pgn-form-feedback-tooltip-line-height: $pgn-line-height-base !default; +$pgn-form-feedback-tooltip-font-size: $pgn-font-size-sm !default; +$pgn-form-feedback-font-size: $pgn-font-size-small-base !default; +$pgn-form-feedback-margin-top: $pgn-form-text-margin-top !default; +$pgn-form-custom-file-box-shadow-base: $pgn-form-input-box-shadow-base !default; +$pgn-form-custom-range-thumb-box-shadow-focus-width: $pgn-form-input-focus-width !default; +$pgn-form-custom-range-thumb-height: $pgn-form-custom-range-thumb-width !default; +$pgn-form-custom-range-track-bg: $pgn-color-gray-300 !default; +$pgn-form-custom-select-border-radius: $pgn-border-radius-base !default; +$pgn-form-custom-select-border-width-focus: $pgn-form-input-focus-width !default; +$pgn-form-custom-select-bg-disabled: $pgn-color-gray-100 !default; +$pgn-form-custom-select-indicator-color: $pgn-color-gray-700 !default; +$pgn-form-custom-switch-indicator-size: calc($pgn-form-custom-control-indicator-size - $pgn-form-custom-control-indicator-border-width * 4) !default; +$pgn-form-custom-switch-indicator-border-radius: calc($pgn-form-custom-control-indicator-size / 2) !default; +$pgn-form-custom-switch-width: calc($pgn-form-custom-control-indicator-size * 1.75) !default; +$pgn-form-custom-control-indicator-border-color: $pgn-color-gray-700 !default; +$pgn-form-custom-control-indicator-box-shadow: $pgn-form-input-box-shadow-base !default; +$pgn-form-input-group-addon-bg: $pgn-color-gray-100 !default; +$pgn-form-input-border-radius-sm: $pgn-border-radius-sm !default; +$pgn-form-input-border-radius-lg: $pgn-border-radius-lg !default; +$pgn-form-input-border-radius-base: $pgn-border-radius-base !default; +$pgn-form-input-color-base: $pgn-color-gray-700 !default; +$pgn-form-input-bg-disabled: $pgn-color-gray-100 !default; +$pgn-form-input-bg-base: $pgn-color-white !default; +$pgn-form-input-line-height-sm: $pgn-core-input-btn-line-height-sm !default; +$pgn-form-input-line-height-base: $pgn-core-input-btn-line-height-base !default; +$pgn-form-input-font-size-lg: $pgn-core-input-btn-font-size-lg !default; +$pgn-form-input-font-size-sm: $pgn-core-input-btn-font-size-sm !default; +$pgn-form-input-font-size-base: $pgn-core-input-btn-font-size-base !default; +$pgn-form-input-font-family: $pgn-core-input-btn-font-family !default; +$pgn-form-input-padding-x-lg: $pgn-core-input-btn-padding-lg-x !default; +$pgn-form-input-padding-x-sm: $pgn-core-input-btn-padding-sm-x !default; +$pgn-form-input-padding-x-base: $pgn-core-input-btn-padding-x !default; +$pgn-form-input-padding-y-lg: $pgn-core-input-btn-padding-lg-y !default; +$pgn-form-input-padding-y-sm: $pgn-core-input-btn-padding-sm-y !default; +$pgn-form-input-padding-y-base: $pgn-core-input-btn-padding-y !default; +$pgn-dropzone-restriction-msg-font-size: $pgn-font-size-small-x !default; +$pgn-dropzone-border-error: 2px solid $pgn-color-danger-300 !default; +$pgn-dropzone-border-focus: 2px solid $pgn-color-info-300 !default; +$pgn-dropzone-border-hover: 2px solid $pgn-color-info-300 !default; +$pgn-dropdown-link-hover-bg: $pgn-color-light-300 !default; +$pgn-dropdown-link-hover-color: $pgn-color-gray-900 !default; +$pgn-dropdown-link-color: $pgn-color-gray-900 !default; +$pgn-dropdown-box-shadow: 0 .5rem 1rem rgba($pgn-color-black, .175) !default; +$pgn-dropdown-divider-margin-y: calc($pgn-core-spacer / 2) !default; +$pgn-dropdown-divider-bg: $pgn-color-gray-100 !default; +$pgn-dropdown-border-radius-base: $pgn-border-radius-base !default; +$pgn-dropdown-border-width: $pgn-border-width !default; +$pgn-dropdown-bg: $pgn-color-white !default; +$pgn-dropdown-font-size: $pgn-font-size-base !default; +$pgn-dropdown-padding-header: $pgn-dropdown-padding-y-base $pgn-dropdown-padding-x-item !default; +$pgn-data-table-border: 1px solid $pgn-color-gray-200 !default; +$pgn-data-table-background-color: $pgn-color-white !default; +$pgn-collapsible-card-spacer-x-lg: $pgn-card-spacer-x !default; +$pgn-collapsible-card-spacer-y-lg: $pgn-card-spacer-y !default; +$pgn-code-pre-color: $pgn-color-gray-900 !default; +$pgn-code-kbd-bg: $pgn-color-gray-700 !default; +$pgn-code-kbd-color: $pgn-color-white !default; +$pgn-code-kbd-nested-font-weight: $pgn-font-weight-bold !default; +$pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba($pgn-color-black, .25) !default; +$pgn-code-kbd-font-size: $pgn-code-font-size !default; +$pgn-close-button-text-shadow: 0 1px 0 $pgn-color-white !default; +$pgn-close-button-color: $pgn-color-black !default; +$pgn-close-button-font-weight: $pgn-font-weight-bold !default; +$pgn-close-button-font-size: calc($pgn-font-size-base * 1.5) !default; +$pgn-carousel-transition-base: transform $pgn-carousel-transition-duration ease-in-out !default; +$pgn-carousel-caption-color: $pgn-color-white !default; +$pgn-carousel-indicator-active-bg: $pgn-color-white !default; +$pgn-carousel-control-color: $pgn-color-white !default; +$pgn-card-footer-text-font-size: $pgn-font-size-small-x !default; +$pgn-card-divider-margin-y: $pgn-card-spacer-y !default; +$pgn-card-divider-bg: $pgn-color-light-400 !default; +$pgn-card-columns-margin: $pgn-card-spacer-y !default; +$pgn-card-margin-grid: $pgn-card-margin-group !default; +$pgn-card-margin-deck: $pgn-card-margin-group !default; +$pgn-card-image-horizontal-width-min: $pgn-card-image-horizontal-width-max !default; +$pgn-card-bg: $pgn-color-white !default; +$pgn-card-border-color-base: rgba($pgn-color-black, .125) !default; +$pgn-card-border-radius-base: $pgn-border-radius-base !default; +$pgn-card-border-width: $pgn-border-width !default; +$pgn-btn-tertiary-inverse-bg-hover: rgba($pgn-color-white, .1) !default; $pgn-btn-tertiary-inverse-color: $pgn-color-white !default; -$pgn-btn-tertiary-bg-active: $pgn-color-light-500 !default; -$pgn-btn-tertiary-bg-hover: $pgn-color-light-500 !default; $pgn-btn-tertiary-color: $pgn-color-gray-700 !default; -$pgn-btn-disabled-link-color: $pgn-color-gray-500 !default; $pgn-btn-box-shadow-base: inset 0 1px 0 rgba($pgn-color-white, .15), 0 1px 1px rgba($pgn-color-black, .075) !default; $pgn-btn-border-radius-sm: $pgn-border-radius-sm !default; $pgn-btn-border-radius-lg: $pgn-border-radius-lg !default; @@ -311,29 +771,195 @@ $pgn-btn-font-size-lg: $pgn-core-input-btn-font-size-lg !default; $pgn-btn-font-size-sm: $pgn-core-input-btn-font-size-sm !default; $pgn-btn-font-size-base: $pgn-core-input-btn-font-size-base !default; $pgn-btn-font-family: $pgn-core-input-btn-font-family !default; -$pgn-btn-padding-sm-x: $pgn-core-input-btn-padding-sm-x !default; -$pgn-btn-padding-sm-y: $pgn-core-input-btn-padding-sm-y !default; $pgn-btn-padding-x-lg: $pgn-core-input-btn-padding-lg-x !default; $pgn-btn-padding-x-base: $pgn-core-input-btn-padding-x !default; +$pgn-btn-padding-y-sm-x: $pgn-core-input-btn-padding-sm-x !default; +$pgn-btn-padding-y-sm-y: $pgn-core-input-btn-padding-sm-y !default; $pgn-btn-padding-y-lg: $pgn-core-input-btn-padding-lg-y !default; $pgn-btn-padding-y-base: $pgn-core-input-btn-padding-y !default; +$pgn-breadcrumb-color-divider: $pgn-color-gray-600 !default; +$pgn-breadcrumb-bg: $pgn-color-gray-200 !default; +$pgn-breadcrumb-border-radius-base: $pgn-border-radius-base !default; +$pgn-badge-focus-width: $pgn-core-input-btn-focus-width !default; +$pgn-badge-font-weight: $pgn-font-weight-bold !default; $pgn-avatar-border-base: solid 1px $pgn-color-light-300 !default; +$pgn-annotation-line-height: $pgn-line-height-sm !default; +$pgn-annotation-font-size: $pgn-font-size-sm !default; $pgn-alert-color-content: $pgn-color-gray-700 !default; $pgn-alert-color-title: $pgn-color-black !default; $pgn-alert-font-weight-link: $pgn-font-weight-normal !default; $pgn-alert-border-radius: $pgn-border-radius-base !default; -$pgn-text-muted: $pgn-color-gray-500 !default; -$pgn-color-danger-500: $pgn-color-red !default; -$pgn-color-warning-500: $pgn-color-yellow !default; -$pgn-color-info-500: $pgn-color-teal !default; -$pgn-color-success-500: $pgn-color-green !default; -$pgn-color-secondary-500: $pgn-color-gray-700 !default; +$pgn-component-active-color: $pgn-color-white !default; +$pgn-color-dark-500: $pgn-color-dark-base !default; +$pgn-color-light-500: $pgn-color-light-base !default; +$pgn-color-danger-base: $pgn-color-red !default; +$pgn-color-warning-base: $pgn-color-yellow !default; +$pgn-color-info-base: $pgn-color-teal !default; +$pgn-color-success-base: $pgn-color-green !default; +$pgn-color-brand-500: $pgn-color-brand-base !default; +$pgn-color-secondary-base: $pgn-color-gray-700 !default; +$pgn-color-primary-500: $pgn-color-primary-base !default; +$pgn-color-gray-500: $pgn-color-gray-base !default; $pgn-body-color: $pgn-color-gray-700 !default; $pgn-body-bg: $pgn-color-white !default; $pgn-border-color: $pgn-color-gray-200 !default; -$pgn-link-inline-color: $pgn-color-info-500 !default; -$pgn-link-color: $pgn-color-info-500 !default; +$pgn-link-brand-inline-color: $pgn-color-brand-500 !default; +$pgn-link-brand-color: $pgn-color-brand-500 !default; +$pgn-link-muted-inline-color: $pgn-color-primary-500 !default; +$pgn-link-muted-color: $pgn-color-primary-500 !default; +$pgn-tooltip-arrow-color-base: $pgn-tooltip-bg-base !default; +$pgn-table-dark-color-border: $pgn-table-dark-bg-base !default; +$pgn-table-dark-color-hover: $pgn-table-dark-color-base !default; +$pgn-table-border-color: $pgn-border-color !default; $pgn-table-color-border: $pgn-border-color !default; -$pgn-table-color-caption: $pgn-text-muted !default; +$pgn-table-color-base: $pgn-body-color !default; +$pgn-search-field-input-height-search: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2) !default; +$pgn-search-field-border-color-base: $pgn-color-gray-500 !default; +$pgn-progress-bar-bar-bg-annotated: $pgn-color-dark-500 !default; +$pgn-progress-bar-border-color: $pgn-color-gray-500 !default; +$pgn-product-tour-checkpoint-color-breadcrumb: $pgn-color-primary-500 !default; +$pgn-product-tour-checkpoint-color-border: $pgn-color-brand-500 !default; +$pgn-popover-arrow-color: $pgn-popover-bg !default; +$pgn-popover-body-color: $pgn-body-color !default; +$pgn-popover-header-color: $pgn-headings-color !default; +$pgn-pagination-focus-color-base: $pgn-color-primary-500 !default; +$pgn-pagination-focus-box-shadow: $pgn-core-input-btn-focus-box-shadow !default; +$pgn-pagination-color-disabled: $pgn-color-gray-500 !default; +$pgn-pagination-color-active: $pgn-component-active-color !default; +$pgn-navbar-dark-brand-color-hover: $pgn-navbar-dark-color-active !default; +$pgn-navbar-dark-brand-color-base: $pgn-navbar-dark-color-active !default; +$pgn-navbar-toggler-border-radius: $pgn-btn-border-radius-base !default; +$pgn-navbar-brand-padding-y: calc(($pgn-navbar-nav-link-height - $pgn-navbar-brand-height) / 2) !default; +$pgn-navbar-brand-height: calc($pgn-navbar-brand-font-size * $pgn-line-height-base) !default; +$pgn-nav-pills-link-link-active-color: $pgn-component-active-color !default; +$pgn-nav-tabs-link-active-bg: $pgn-body-bg !default; +$pgn-nav-tabs-link-active-color-border: transparent transparent $pgn-color-primary-500 !default; +$pgn-nav-tabs-link-active-color-base: $pgn-color-primary-500 !default; +$pgn-nav-tabs-link-hover-border-color: transparent transparent $pgn-nav-tabs-border-color !default; +$pgn-modal-header-border-color: $pgn-border-color !default; +$pgn-modal-footer-border-width: $pgn-modal-header-border-width !default; +$pgn-image-figure-caption-color: $pgn-color-gray-500 !default; +$pgn-image-thumbnail-bg: $pgn-body-bg !default; +$pgn-form-custom-file-button-bg: $pgn-form-input-group-addon-bg !default; +$pgn-form-custom-file-color: $pgn-form-input-color-base !default; +$pgn-form-custom-file-font-family: $pgn-form-input-font-family !default; +$pgn-form-custom-file-line-height: $pgn-form-input-line-height-base !default; +$pgn-form-custom-file-padding-x: $pgn-form-input-padding-x-base !default; +$pgn-form-custom-file-padding-y: $pgn-form-input-padding-y-base !default; +$pgn-form-custom-file-bg-disabled: $pgn-form-input-bg-disabled !default; +$pgn-form-custom-file-bg-base: $pgn-form-input-bg-base !default; +$pgn-form-custom-file-border-color-radius: $pgn-form-input-border-radius-base !default; +$pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px $pgn-body-bg, $pgn-form-input-box-shadow-focus !default; +$pgn-form-custom-range-thumb-bg-disabled: $pgn-color-gray-500 !default; +$pgn-form-custom-select-border-box-shadow-focus: $pgn-core-input-btn-focus-box-shadow !default; +$pgn-form-custom-select-bg-base: $pgn-form-input-bg-base !default; +$pgn-form-custom-select-color-disabled: $pgn-color-gray-500 !default; +$pgn-form-custom-select-color-base: $pgn-form-input-color-base !default; +$pgn-form-custom-select-line-height: $pgn-form-input-line-height-base !default; +$pgn-form-custom-select-font-size-lg: $pgn-form-input-font-size-lg !default; +$pgn-form-custom-select-font-size-sm: $pgn-form-input-font-size-sm !default; +$pgn-form-custom-select-font-size-base: $pgn-form-input-font-size-base !default; +$pgn-form-custom-select-font-family: $pgn-form-input-font-family !default; +$pgn-form-custom-select-padding-x-lg: $pgn-form-input-padding-x-lg !default; +$pgn-form-custom-select-padding-x-sm: $pgn-form-input-padding-x-sm !default; +$pgn-form-custom-select-padding-x-base: $pgn-form-input-padding-x-base !default; +$pgn-form-custom-select-padding-y-lg: $pgn-form-input-padding-y-lg !default; +$pgn-form-custom-select-padding-y-sm: $pgn-form-input-padding-y-sm !default; +$pgn-form-custom-select-padding-y-base: $pgn-form-input-padding-y-base !default; +$pgn-form-custom-control-label-color-disabled: $pgn-color-gray-500 !default; +$pgn-form-custom-control-indicator-active-color-base: $pgn-component-active-color !default; +$pgn-form-custom-control-indicator-disabled-bg: $pgn-form-input-bg-disabled !default; +$pgn-form-custom-control-indicator-bg-base: $pgn-form-input-bg-base !default; +$pgn-form-input-group-addon-color-base: $pgn-form-input-color-base !default; +$pgn-form-input-height-inner-quarter: calc($pgn-form-input-line-height-base * .25em + calc($pgn-form-input-padding-y-base / 2)) !default; +$pgn-form-input-height-inner-half: calc($pgn-form-input-line-height-base * .5em + $pgn-form-input-padding-y-base) !default; +$pgn-form-input-height-inner-base: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2) !default; +$pgn-form-input-height-sm: calc($pgn-form-input-line-height-sm * 1em + $pgn-core-input-btn-padding-sm-y * 2 + $pgn-form-input-border-height) !default; +$pgn-form-input-height-base: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2 + $pgn-form-input-border-height) !default; +$pgn-form-input-focus-color-base: $pgn-form-input-color-base !default; +$pgn-form-input-focus-bg: $pgn-form-input-bg-base !default; +$pgn-form-input-box-shadow-focus: $pgn-core-input-btn-focus-box-shadow !default; +$pgn-form-input-border-width: $pgn-core-input-btn-border-width !default; +$pgn-form-input-border-color: $pgn-color-gray-500 !default; +$pgn-form-input-color-plaintext: $pgn-body-color !default; +$pgn-form-input-color-placeholder: $pgn-color-gray-500 !default; +$pgn-form-input-line-height-lg: $pgn-core-input-btn-line-height-lg !default; +$pgn-form-input-font-weight: $pgn-font-weight-base !default; +$pgn-dropzone-restriction-msg-color: $pgn-color-gray-500 !default; +$pgn-dropzone-border-active: 2px solid $pgn-color-primary-500 !default; +$pgn-dropzone-border-default: 1px dashed $pgn-color-gray-500 !default; +$pgn-dropdown-link-disabled-color: $pgn-color-gray-500 !default; +$pgn-dropdown-link-active-bg: $pgn-component-active-color !default; +$pgn-dropdown-link-active-color: $pgn-component-active-color !default; +$pgn-dropdown-border-radius-inner: calc($pgn-dropdown-border-radius-base - $pgn-dropdown-border-width) !default; +$pgn-dropdown-color-header: $pgn-color-gray-500 !default; +$pgn-dropdown-color-base: $pgn-body-color !default; +$pgn-data-table-box-shadow: $pgn-box-shadow-sm !default; +$pgn-btn-tertiary-inverse-bg-active: $pgn-btn-tertiary-inverse-bg-hover !default; +$pgn-btn-tertiary-bg-active: $pgn-color-light-500 !default; +$pgn-btn-tertiary-bg-hover: $pgn-color-light-500 !default; +$pgn-btn-disabled-link-color: $pgn-color-gray-500 !default; $pgn-btn-border-width: $pgn-core-input-btn-border-width !default; $pgn-btn-line-height-lg: $pgn-core-input-btn-line-height-lg !default; +$pgn-breadcrumb-inverse-active: $pgn-color-light-500 !default; +$pgn-breadcrumb-color-active: $pgn-color-gray-500 !default; +$pgn-breadcrumb-color-base: $pgn-color-primary-500 !default; +$pgn-text-muted: $pgn-color-gray-500 !default; +$pgn-component-active-bg: $pgn-color-primary-500 !default; +$pgn-color-danger-500: $pgn-color-danger-base !default; +$pgn-color-warning-500: $pgn-color-warning-base !default; +$pgn-color-info-500: $pgn-color-info-base !default; +$pgn-color-success-500: $pgn-color-success-base !default; +$pgn-color-secondary-500: $pgn-color-secondary-base !default; +$pgn-link-inline-color: $pgn-color-info-500 !default; +$pgn-link-color: $pgn-color-info-500 !default; +$pgn-core-input-btn-focus-color: $pgn-component-active-bg !default; +$pgn-table-caption-color: $pgn-text-muted !default; +$pgn-table-color-caption: $pgn-text-muted !default; +$pgn-table-color-hover: $pgn-table-color-base !default; +$pgn-popover-danger-icon-color: $pgn-color-warning-500 !default; +$pgn-popover-warning-icon-color: $pgn-color-warning-500 !default; +$pgn-popover-success-icon-color: $pgn-color-success-500 !default; +$pgn-pagination-bg-active: $pgn-component-active-bg !default; +$pgn-nav-pills-link-link-active-bg: $pgn-component-active-bg !default; +$pgn-modal-footer-border-color: $pgn-modal-header-border-color !default; +$pgn-menu-background-active: $pgn-btn-tertiary-bg-active !default; +$pgn-form-feedback-color-invalid: $pgn-color-danger-500 !default; +$pgn-form-feedback-color-valid: $pgn-color-success-500 !default; +$pgn-form-custom-file-button-color: $pgn-form-custom-file-color !default; +$pgn-form-custom-file-font-weight: $pgn-form-input-font-weight !default; +$pgn-form-custom-file-box-shadow-focus: $pgn-form-input-box-shadow-focus !default; +$pgn-form-custom-file-border-width: $pgn-form-input-border-width !default; +$pgn-form-custom-file-border-color-base: $pgn-form-input-border-color !default; +$pgn-form-custom-file-height-inner: $pgn-form-input-height-inner-base !default; +$pgn-form-custom-file-height-base: $pgn-form-input-height-base !default; +$pgn-form-custom-range-thumb-bg-base: $pgn-component-active-bg !default; +$pgn-form-custom-select-height-sm: $pgn-form-input-height-sm !default; +$pgn-form-custom-select-border-color-base: $pgn-form-input-border-color !default; +$pgn-form-custom-select-border-width-base: $pgn-form-input-border-width !default; +$pgn-form-custom-select-feedback-icon-size: $pgn-form-input-height-inner-half $pgn-form-input-height-inner-half !default; +$pgn-form-custom-select-feedback-icon-position: center right calc($pgn-form-custom-select-padding-x-base + $pgn-form-custom-select-indicator-padding) !default; +$pgn-form-custom-select-feedback-icon-padding-right: calc((1em + 2 * $pgn-form-custom-select-padding-y-base) * 3 / 4 + $pgn-form-custom-select-padding-x-base + $pgn-form-custom-select-indicator-padding) !default; +$pgn-form-custom-select-font-weight: $pgn-form-input-font-weight !default; +$pgn-form-custom-select-font-height-base: $pgn-form-input-height-base !default; +$pgn-form-custom-checkbox-indicator-indeterminate-bg: $pgn-component-active-bg !default; +$pgn-form-custom-control-indicator-active-bg: $pgn-component-active-bg !default; +$pgn-form-custom-control-indicator-checked-bg-base: $pgn-component-active-bg !default; +$pgn-form-custom-control-indicator-checked-color: $pgn-component-active-bg !default; +$pgn-form-input-group-addon-color-border: $pgn-form-input-border-color !default; +$pgn-form-input-height-lg: calc($pgn-form-input-line-height-lg * 1em + $pgn-core-input-btn-padding-lg-y * 2 + $pgn-form-input-border-height) !default; +$pgn-form-input-focus-color-border: $pgn-component-active-bg !default; +$pgn-form-input-border-height: calc($pgn-form-input-border-width * 2) !default; +$pgn-dropzone-error-wrapper-color: $pgn-color-danger-500 !default; +$pgn-pagination-border-color-active: $pgn-pagination-bg-active !default; +$pgn-pagination-color-base: $pgn-link-color !default; +$pgn-form-feedback-icon-color-invalid: $pgn-form-feedback-color-invalid !default; +$pgn-form-feedback-icon-color-valid: $pgn-form-feedback-color-valid !default; +$pgn-form-custom-file-border-color-focus: $pgn-form-input-focus-color-border !default; +$pgn-form-custom-select-border-color-focus: $pgn-form-input-focus-color-border !default; +$pgn-form-custom-select-font-height-lg: $pgn-form-input-height-lg !default; +$pgn-form-custom-checkbox-indicator-indeterminate-border-color: $pgn-form-custom-checkbox-indicator-indeterminate-bg !default; +$pgn-form-custom-checkbox-indicator-indeterminate-color: $pgn-form-custom-control-indicator-checked-color !default; +$pgn-form-custom-control-indicator-active-color-border: $pgn-form-custom-control-indicator-active-bg !default; +$pgn-form-custom-control-indicator-checked-border-color-focus: $pgn-form-input-focus-color-border !default; +$pgn-form-custom-control-indicator-checked-border-color-base: $pgn-form-custom-control-indicator-checked-color !default; diff --git a/tokens/build/variables.css b/tokens/build/variables.css index 069c61a538..474dbec35b 100644 --- a/tokens/build/variables.css +++ b/tokens/build/variables.css @@ -19,6 +19,8 @@ --pgn-font-size-h3: 1.375rem; --pgn-font-size-h2: 2rem; --pgn-font-size-h1: 2.5rem; + --pgn-font-size-small-x: 75%; + --pgn-font-size-small-base: 87.5%; --pgn-font-size-xs: .75rem; --pgn-font-size-sm: .875rem; --pgn-font-size-lg: 1.4063rem; @@ -72,9 +74,6 @@ --pgn-zindex-fixed: 1030; --pgn-zindex-sticky: 1020; --pgn-zindex-dropdown: 1000; - --pgn-table-th-font-weight: null; - --pgn-table-cell-padding-sm: .3rem; - --pgn-table-cell-padding-base: .75rem; --pgn-spacing-base-5-5: 4rem; --pgn-spacing-base-4-5: 2rem; --pgn-spacing-base-3-5: 1.25rem; @@ -125,6 +124,11 @@ --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); + --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); --pgn-core-input-btn-focus-width: 1px; --pgn-core-input-btn-line-height-sm: 1.4286; --pgn-core-input-btn-line-height-base: 1.3333; @@ -138,22 +142,308 @@ --pgn-core-input-btn-padding-sm-y: .4375rem; --pgn-core-input-btn-padding-x: 1rem; --pgn-core-input-btn-padding-y: .5625rem; + --pgn-core-spacer: 1rem; + --pgn-tooltip-arrow-height: .4rem; + --pgn-tooltip-arrow-width: .8rem; + --pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); + --pgn-tooltip-margin: 0; + --pgn-tooltip-padding-x: .5rem; + --pgn-tooltip-padding-y: .5rem; + --pgn-tooltip-opacity: 1; + --pgn-tooltip-max-width: 200px; + --pgn-toast-container-gutter-sm: .625rem; + --pgn-toast-container-gutter-lg: 1.25rem; + --pgn-toast-header-color-border: rgba(0, 0, 0, .5); + --pgn-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15); + --pgn-toast-border-radius: .25rem; + --pgn-toast-border-color: rgba(0, 0, 0, .1); + --pgn-toast-border-width: 1px; + --pgn-toast-color-base: null; + --pgn-toast-font-size: .875rem; + --pgn-toast-padding-y: .25rem; + --pgn-toast-padding-x: .75rem; + --pgn-toast-max-width: 400px; + --pgn-tabs-notification-width: 1rem; + --pgn-tabs-notification-height: 1rem; + --pgn-table-th-font-weight: null; + --pgn-table-level-border: -6; + --pgn-table-level-bg: -9; + --pgn-table-striped-order: odd; + --pgn-table-dark-bg-hover: rgba(255, 255, 255, .075); + --pgn-table-dark-bg-accent: rgba(255, 255, 255, .05); + --pgn-table-bg-hover: rgba(0, 0, 0, .075); + --pgn-table-bg-accent: rgba(0, 0, 0, .05); + --pgn-table-bg-base: null; + --pgn-table-cell-padding-sm: .3rem; + --pgn-table-cell-padding-base: .75rem; + --pgn-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); + --pgn-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); + --pgn-sticky-offset: 0; + --pgn-stack-gap: 0; --pgn-spinner-sm-border-width: .2em; --pgn-spinner-sm-width: 1rem; --pgn-spinner-border-width: .25em; --pgn-spinner-width: 2rem; + --pgn-selectable-box-cols-number-max: 12; + --pgn-selectable-box-cols-number-min: 1; + --pgn-selectable-box-box-space: .75rem; + --pgn-selectable-box-border-radius: .25rem; + --pgn-selectable-box-padding: 1rem; + --pgn-search-field-button-margin: .5rem; + --pgn-search-field-disabled-opacity: .3; + --pgn-search-field-line-height: 1.5rem; + --pgn-search-field-border-width-focus: .3125rem; + --pgn-search-field-border-width-interaction: .125rem; + --pgn-search-field-border-width-base: .0625rem; + --pgn-search-field-border-radius: 0; + --pgn-progress-bar-hint-annotation-gap: .5rem; + --pgn-progress-bar-threshold-circle: .5625rem; + --pgn-progress-bar-bar-transition: width .6s ease; + --pgn-progress-bar-bar-animation-timing: 1s linear infinite; + --pgn-progress-bar-box-shadow: none; + --pgn-progress-bar-border-width: 1px; + --pgn-progress-bar-border-radius: 0; + --pgn-progress-bar-bg: transparent; + --pgn-progress-bar-height-annotated: .3125rem; + --pgn-progress-bar-height-base: 1rem; + --pgn-product-tour-checkpoint-zindex: 1060; + --pgn-product-tour-checkpoint-width-max: 480px; + --pgn-product-tour-checkpoint-width-arrow: 15px; + --pgn-product-tour-checkpoint-width-border: 8px; + --pgn-popover-arrow-height: .5rem; + --pgn-popover-arrow-width: 1rem; + --pgn-popover-icon-width: 1rem; + --pgn-popover-icon-height: 1rem; + --pgn-popover-icon-margin-right: .5rem; + --pgn-popover-header-padding-x: 1rem; + --pgn-popover-header-padding-y: .5rem; + --pgn-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); + --pgn-popover-border-color: rgba(0, 0, 0, .2); + --pgn-popover-max-width: 480px; + --pgn-reduced-dropdown-width-min: 6rem; + --pgn-reduced-dropdown-height-max: 60vh; + --pgn-pagination-focus-border-width: .125rem; + --pgn-pagination-focus-box-outline: 0; + --pgn-pagination-secondary-height-sm: 2.75rem; + --pgn-pagination-secondary-height-base: 2.75rem; + --pgn-pagination-toggle-border-sm: .25rem; + --pgn-pagination-toggle-border-base: .3125rem; + --pgn-pagination-icon-height: 2.25rem; + --pgn-pagination-icon-width: 2.25rem; + --pgn-pagination-icon-size-sm: 1rem; + --pgn-pagination-icon-size-base: 1.375rem; + --pgn-pagination-font-size-sm: .875rem; + --pgn-pagination-line-height: 1.5rem; + --pgn-pagination-margin-y: .5rem; + --pgn-pagination-margin-x: .5rem; + --pgn-pagination-padding-icon: .5rem; + --pgn-pagination-padding-x-lg: 1.5rem; + --pgn-pagination-padding-x-sm: .6rem; + --pgn-pagination-padding-x-base: 1rem; + --pgn-pagination-padding-y-lg: .75rem; + --pgn-pagination-padding-y-sm: .8rem; + --pgn-pagination-padding-y-base: .625rem; + --pgn-navbar-light-toggler-border-color: rgba(0, 0, 0, .1); + --pgn-navbar-light-color-disabled: rgba(0, 0, 0, .3); + --pgn-navbar-light-color-active: rgba(0, 0, 0, .9); + --pgn-navbar-light-color-hover: rgba(0, 0, 0, .7); + --pgn-navbar-light-color-base: rgba(0, 0, 0, .5); + --pgn-navbar-dark-color-base: rgba(255, 255, 255, .5); + --pgn-navbar-toggler-padding-x: .75rem; + --pgn-navbar-toggler-padding-y: .25rem; + --pgn-navbar-nav-scroll-max-height: 75vh; + --pgn-navbar-padding-x-nav-link: .5rem; + --pgn-nav-tabs-border-radius: 0; + --pgn-nav-tabs-border-width: 2px; + --pgn-nav-link-font-weight: 500; + --pgn-nav-link-padding-x: 1rem; + --pgn-nav-link-padding-y: .5rem; + --pgn-modal-transform-scale: scale(1.02); + --pgn-modal-transform-show: none; + --pgn-modal-transform-fade: translate(0, -50px); + --pgn-modal-transform-base: transform .3s ease-out; + --pgn-modal-sm: 500px; + --pgn-modal-md: 500px; + --pgn-modal-lg: 800px; + --pgn-modal-xl: 1140px; + --pgn-modal-header-padding-x: 1.5rem; + --pgn-modal-header-padding-y: 1rem; + --pgn-modal-backdrop-opacity: .5; + --pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); + --pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5); + --pgn-modal-content-border-width: 0; + --pgn-modal-content-border-color: rgba(0, 0, 0, .2); + --pgn-modal-content-color: null; + --pgn-modal-dialog-margin-y-sm-up: 1.75rem; + --pgn-modal-dialog-margin-base: 1.5rem; + --pgn-modal-footer-padding-y: 1.5rem; + --pgn-modal-footer-padding-x: 1rem; + --pgn-modal-footer-margin-between: .5rem; + --pgn-modal-inner-padding: 1.5rem; + --pgn-menu-border-hover: transparent; + --pgn-menu-border-active: transparent; + --pgn-menu-border-base: transparent; + --pgn-image-figure-caption-font-size: 90%; + --pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); + --pgn-image-thumbnail-padding: .25rem; + --pgn-icon-lg: 1.75rem; + --pgn-icon-md: 1.5rem; + --pgn-icon-sm: 1.25rem; + --pgn-icon-inline: .8em; + --pgn-icon-button-bg: transparent; + --pgn-icon-button-diameter-sm: 2.25rem; + --pgn-icon-button-diameter-md: 2.75rem; + --pgn-form-select-icon-padding: .5625rem; + --pgn-form-control-icon-width: 32px; + --pgn-form-feedback-tooltip-opacity: .9; + --pgn-form-feedback-tooltip-padding-x: .5rem; + --pgn-form-feedback-tooltip-padding-y: .25rem; + --pgn-form-custom-range-thumb-box-shadow-base: 0 .1rem .25rem rgba(0, 0, 0, .1); + --pgn-form-custom-range-thumb-border-radius: 1rem; + --pgn-form-custom-range-thumb-border-base: 0; + --pgn-form-custom-range-thumb-width: 1rem; + --pgn-form-custom-range-track-box-shadow: inset 0 .25rem .25rem rgba(0, 0, 0, .1); + --pgn-form-custom-range-track-border-radius: 1rem; + --pgn-form-custom-range-track-cursor: pointer; + --pgn-form-custom-range-track-height: .5rem; + --pgn-form-custom-range-track-width: 100%; + --pgn-form-custom-select-border-box-shadow-base: inset 0 1px 2px rgba(0, 0, 0, .075); + --pgn-form-custom-select-bg-size: 24px 24px; + --pgn-form-custom-select-indicator-padding: 1rem; + --pgn-form-custom-radio-indicator-border-radius: 50%; + --pgn-form-custom-checkbox-indicator-indeterminate-box-shadow: none; + --pgn-form-custom-checkbox-indicator-border-radius: 0; + --pgn-form-custom-control-label-color-base: null; + --pgn-form-custom-control-indicator-active-box-shadow: none; + --pgn-form-custom-control-indicator-checked-box-shadow-focus: 0 0 0 4px rgba(0, 0, 0, .1); + --pgn-form-custom-control-indicator-checked-box-shadow-base: none; + --pgn-form-custom-control-indicator-checked-bg-disabled: rgba(10, 48, 85, .5); + --pgn-form-custom-control-indicator-border-width: 2px; + --pgn-form-custom-control-indicator-bg-size: 100%; + --pgn-form-custom-control-indicator-size: 1.25rem; + --pgn-form-custom-control-cursor: null; + --pgn-form-custom-control-spacer-x: 1rem; + --pgn-form-custom-control-gutter: .5rem; + --pgn-form-custom-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; + --pgn-form-group-margin-bottom: 1rem; + --pgn-form-grid-gutter-width: 10px; + --pgn-form-check-border-width: .125rem; + --pgn-form-check-border-radius-focus: .0625rem; + --pgn-form-check-position-axis: .375rem; + --pgn-form-check-inline-margin-x: .75rem; + --pgn-form-text-margin-top: .25rem; + --pgn-form-input-check-margin-y: .3rem; + --pgn-form-input-check-margin-x-inline: .3125rem; + --pgn-form-input-check-margin-x-base: .25rem; + --pgn-form-input-check-gutter: 1.25rem; + --pgn-form-input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; + --pgn-form-input-width-hover: 1px; + --pgn-form-input-focus-width: 1px; + --pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075); + --pgn-dropzone-padding: 1.5rem; + --pgn-dropdown-border-color: rgba(0, 0, 0, .15); + --pgn-dropdown-spacer: .125rem; + --pgn-dropdown-padding-y-item: .5rem; + --pgn-dropdown-padding-y-base: .25rem; + --pgn-dropdown-padding-x-item: 1rem; + --pgn-dropdown-padding-x-base: 0; + --pgn-dropdown-min-width: 18rem; + --pgn-data-table-pagination-dropdown-min-width: 6rem; + --pgn-data-table-pagination-dropdown-max-height: 60vh; + --pgn-data-table-footer-position: center; + --pgn-data-table-padding-cell: .5rem .75rem; + --pgn-data-table-padding-small: .5rem; + --pgn-data-table-padding-y: .75rem; + --pgn-data-table-padding-x: .75rem; + --pgn-container-max-width-xl: 1440px; + --pgn-container-max-width-lg: 1192px; + --pgn-container-max-width-md: 952px; + --pgn-container-max-width-sm: 708px; + --pgn-container-max-width-xs: 464px; + --pgn-collapsible-card-spacer-basic-icon: .625rem; + --pgn-collapsible-card-spacer-basic-x: .5rem; + --pgn-collapsible-card-spacer-basic-y: .5rem; + --pgn-collapsible-card-spacer-icon: 2.5rem; + --pgn-collapsible-card-spacer-left-body: .75rem; + --pgn-collapsible-card-spacer-x-base: .5rem; + --pgn-collapsible-card-spacer-y-base: .5rem; + --pgn-code-pre-scrollable-max-height: 340px; + --pgn-code-kbd-padding-x: .4rem; + --pgn-code-kbd-padding-y: .2rem; + --pgn-code-color: #E83E8C; + --pgn-code-font-size: 87.5%; + --pgn-chip-line-height: 1.5rem; + --pgn-chip-font-weight: 400; + --pgn-chip-font-size: .75rem; + --pgn-chip-position-axis: .125rem; + --pgn-chip-border-width: .0625rem; + --pgn-chip-border-radius-focus: .5rem; + --pgn-chip-border-radius-base: .4375rem; + --pgn-chip-margin-inline: .5rem; + --pgn-chip-padding-x: .5rem; + --pgn-chip-padding-y: .125rem; + --pgn-carousel-transition-duration: .6s; + --pgn-carousel-caption-width: 70%; + --pgn-carousel-indicator-transition: opacity .6s ease; + --pgn-carousel-indicator-spacer: 3px; + --pgn-carousel-indicator-height-area-hit: 3px; + --pgn-carousel-indicator-height-base: 3px; + --pgn-carousel-indicator-width: 30px; + --pgn-carousel-control-transition: opacity .15s ease; + --pgn-carousel-control-opacity-hover: .9; + --pgn-carousel-control-opacity-base: .5; + --pgn-carousel-control-width-icon: 20px; + --pgn-carousel-control-width-base: 15%; + --pgn-card-loading-skeleton-spacer: .313rem; + --pgn-card-logo-height: 4.125rem; + --pgn-card-logo-width: 7.25rem; + --pgn-card-logo-bottom-offset-horizontal: .4375rem; + --pgn-card-logo-bottom-offset-base: 1rem; + --pgn-card-logo-left-offset-horizontal: .4375rem; + --pgn-card-logo-left-offset-base: 1.5rem; + --pgn-card-footer-action-gap: .5rem; + --pgn-card-columns-gap: 1.25rem; + --pgn-card-columns-count: 3; + --pgn-card-margin-group: 12px; + --pgn-card-image-vertical-height-max: 140px; + --pgn-card-image-horizontal-width-max: 240px; + --pgn-card-image-overlay-padding: 1.25rem; + --pgn-card-color: null; + --pgn-card-height-base: null; + --pgn-card-cap-color: null; + --pgn-card-cap-bg: rgba(0, 0, 0, .03); + --pgn-card-border-color-focus: rgba(0, 0, 0, .5); + --pgn-card-border-radius-logo: .25rem; + --pgn-card-border-radius-image: .3125rem; + --pgn-card-spacer-y: .75rem; + --pgn-card-spacer-x: 1.25rem; --pgn-btn-transition: null; --pgn-btn-block-spacing-y: .5rem; - --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); --pgn-btn-tertiary-inverse-bg-base: transparent; --pgn-btn-tertiary-bg-base: transparent; --pgn-btn-disabled-opacity: .65; --pgn-btn-focus-gap: 1px; --pgn-btn-focus-width: 2px; --pgn-btn-box-shadow-active: none; - --pgn-avatar-button-padding-left-lg: .25em; - --pgn-avatar-button-padding-left-sm: .25em; - --pgn-avatar-button-padding-left-base: .25em; + --pgn-bubble-expandable-padding-x: .25rem; + --pgn-bubble-expandable-padding-y: 0; + --pgn-breadcrumb-border-radius-focus: .125rem; + --pgn-breadcrumb-border-focus-width: .0625rem; + --pgn-breadcrumb-border-focus-axis-x: .25rem; + --pgn-breadcrumb-border-focus-axis-y: .5rem; + --pgn-breadcrumb-margin-left: .5rem; + --pgn-breadcrumb-margin-bottom: 1rem; + --pgn-breadcrumb-padding-item: .5rem; + --pgn-breadcrumb-padding-x: 1rem; + --pgn-breadcrumb-padding-y: .75rem; + --pgn-breadcrumb-font-size: null; + --pgn-badge-transition: none; + --pgn-badge-border-radius-pill: 10rem; + --pgn-badge-border-radius-base: .25rem; + --pgn-badge-padding-y: .125rem; + --pgn-badge-padding-x-pill: .6em; + --pgn-badge-padding-x-base: .5rem; + --pgn-badge-font-size: 75%; --pgn-avatar-size-huge: 18.75rem; --pgn-avatar-size-xxl: 11.5rem; --pgn-avatar-size-xl: 6rem; @@ -162,6 +452,16 @@ --pgn-avatar-size-xs: 1.5rem; --pgn-avatar-size-base: 3rem; --pgn-avatar-border-radius: 100%; + --pgn-avatar-button-padding-left-lg: .25em; + --pgn-avatar-button-padding-left-sm: .25em; + --pgn-avatar-button-padding-left-base: .25em; + --pgn-annotation-arrow-border-width: .5rem; + --pgn-annotation-arrow-side-margin: .25rem; + --pgn-annotation-max-width: 18.75rem; + --pgn-annotation-border-radius: .25rem; + --pgn-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) + drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); + --pgn-annotation-padding: .5rem; --pgn-alert-line-height: 1.5rem; --pgn-alert-icon-space: .8rem; --pgn-alert-level-color: 6; @@ -173,20 +473,22 @@ --pgn-alert-margin-bottom: 1rem; --pgn-alert-padding-x: 1.5rem; --pgn-alert-padding-y: 1.5rem; + --pgn-action-row-gap-y: .5rem; + --pgn-action-row-gap-x: .5rem; + --pgn-color-dark-base: #273F2F; --pgn-color-dark-900: #1B2C21; --pgn-color-dark-800: #1D2F23; --pgn-color-dark-700: #1F3226; --pgn-color-dark-600: #23392A; - --pgn-color-dark-500: #273F2F; --pgn-color-dark-400: #5D6F63; --pgn-color-dark-300: #939F97; --pgn-color-dark-200: #C9CFCB; --pgn-color-dark-100: #F2F3F3; + --pgn-color-light-base: #E1DDDB; --pgn-color-light-900: #9E9B99; --pgn-color-light-800: #A9A6A4; --pgn-color-light-700: #B4B1AF; --pgn-color-light-600: #CBC7C5; - --pgn-color-light-500: #E1DDDB; --pgn-color-light-400: #E9E6E4; --pgn-color-light-300: #F0EEED; --pgn-color-light-200: #F8F7F6; @@ -223,11 +525,11 @@ --pgn-color-success-300: #8BC1A9; --pgn-color-success-200: #C5E0D4; --pgn-color-success-100: #F1F8F5; + --pgn-color-brand-base: #9D0054; --pgn-color-brand-900: #6E003B; --pgn-color-brand-800: #76003F; --pgn-color-brand-700: #7E0043; --pgn-color-brand-600: #8D004C; - --pgn-color-brand-500: #9D0054; --pgn-color-brand-400: #B6407F; --pgn-color-brand-300: #CE80AA; --pgn-color-brand-200: #E7BFD4; @@ -240,20 +542,20 @@ --pgn-color-secondary-300: #A2A2A2; --pgn-color-secondary-200: #D1D1D1; --pgn-color-secondary-100: #F4F4F4; + --pgn-color-primary-base: #0A3055; --pgn-color-primary-900: #07223C; --pgn-color-primary-800: #082440; --pgn-color-primary-700: #082644; --pgn-color-primary-600: #092B4D; - --pgn-color-primary-500: #0A3055; --pgn-color-primary-400: #476480; --pgn-color-primary-300: #8598AA; --pgn-color-primary-200: #C2CBD5; --pgn-color-primary-100: #F0F3F5; + --pgn-color-gray-base: #707070; --pgn-color-gray-900: #212529; --pgn-color-gray-800: #333333; --pgn-color-gray-700: #454545; --pgn-color-gray-600: #5C5C5C; - --pgn-color-gray-500: #707070; --pgn-color-gray-400: #8F8F8F; --pgn-color-gray-300: #ADADAD; --pgn-color-gray-200: #CCCCCC; @@ -287,20 +589,178 @@ --pgn-display-weight-3: var(--pgn-font-weight-bold); --pgn-display-weight-2: var(--pgn-font-weight-bold); --pgn-display-weight-1: var(--pgn-font-weight-bold); - --pgn-link-brand-inline-color: var(--pgn-color-brand-500); - --pgn-link-brand-color: var(--pgn-color-brand-500); - --pgn-link-muted-inline-color: var(--pgn-color-primary-500); - --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-box-shadow-lg: 0 .25rem .5rem rgba(var(--pgn-color-black), .3); + --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(var(--pgn-color-black), .2); + --pgn-box-shadow-base: 0 .125rem .25rem rgba(var(--pgn-color-black), .3); --pgn-core-input-btn-border-width: var(--pgn-border-width); + --pgn-core-input-btn-focus-box-shadow: 0 0 0 var(--pgn-core-input-btn-focus-width) var(--pgn-core-input-btn-focus-color); --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg); + --pgn-tooltip-arrow-color-light: var(--pgn-color-white); + --pgn-tooltip-border-radius: var(--pgn-border-radius-base); + --pgn-tooltip-bg-light: var(--pgn-color-white); + --pgn-tooltip-bg-base: var(--pgn-color-black); + --pgn-tooltip-color-light: var(--pgn-color-black); + --pgn-tooltip-color-base: var(--pgn-color-white); + --pgn-tooltip-font-size: var(--pgn-font-size-sm); + --pgn-toast-header-color-background: var(--pgn-color-gray-700); + --pgn-toast-header-color-base: var(--pgn-color-white); + --pgn-toast-color-background: var(--pgn-color-gray-700); + --pgn-tabs-notification-font-size: var(--pgn-font-size-xs); + --pgn-table-dark-bg-base: var(--pgn-color-gray-700); + --pgn-table-dark-color-base: var(--pgn-color-white); + --pgn-table-border-width: var(--pgn-border-width); + --pgn-table-bg-head: var(--pgn-color-gray-100); + --pgn-table-bg-active: var(--pgn-table-bg-hover); + --pgn-table-color-head: var(--pgn-color-gray-700); --pgn-spinner-sm-height: var(--pgn-spinner-sm-width); --pgn-spinner-height: var(--pgn-spinner-width); - --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); + --pgn-search-field-border-color-focus: var(--pgn-color-black); + --pgn-search-field-border-color-interaction: var(--pgn-color-black); + --pgn-progress-bar-bar-bg-base: var(--pgn-color-accent-a); + --pgn-progress-bar-bar-color: var(--pgn-color-white); + --pgn-progress-bar-font-size: calc(var(--pgn-font-size-base) * .75); + --pgn-product-tour-checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arrow) transparent; + --pgn-product-tour-checkpoint-arrow-color-default: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-color-background); + --pgn-product-tour-checkpoint-arrow-color-top: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-width-border); + --pgn-product-tour-checkpoint-color-body: var(--pgn-color-gray-700); + --pgn-product-tour-checkpoint-color-background: var(--pgn-color-light-300); + --pgn-popover-danger-bg: var(--pgn-color-danger-100); + --pgn-popover-warning-bg: var(--pgn-color-warning-100); + --pgn-popover-success-bg: var(--pgn-color-success-100); + --pgn-popover-body-padding-x: var(--pgn-popover-header-padding-x); + --pgn-popover-body-padding-y: var(--pgn-popover-header-padding-y); + --pgn-popover-header-bg: var(--pgn-color-white); + --pgn-popover-border-border: var(--pgn-border-width); + --pgn-popover-border-radius: var(--pgn-border-radius-sm); + --pgn-popover-bg: var(--pgn-color-white); + --pgn-popover-font-size: var(--pgn-font-size-sm); + --pgn-pagination-focus-color-text: var(--pgn-color-black); + --pgn-pagination-border-radius-lg: var(--pgn-border-radius-lg); + --pgn-pagination-border-radius-sm: var(--pgn-border-radius-sm); + --pgn-pagination-border-color-disabled: var(--pgn-color-gray-100); + --pgn-pagination-border-color-hover: var(--pgn-color-gray-200); + --pgn-pagination-border-color-base: var(--pgn-color-gray-200); + --pgn-pagination-border-width: var(--pgn-border-width); + --pgn-pagination-bg-disabled: var(--pgn-color-white); + --pgn-pagination-bg-hover: var(--pgn-color-gray-100); + --pgn-pagination-bg-base: var(--pgn-color-white); + --pgn-pagination-color-hover: var(--pgn-link-hover-color); + --pgn-pagination-color-inverse: var(--pgn-color-white); + --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active); + --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active); + --pgn-navbar-dark-toggler-border-color: rgba(var(--pgn-color-white), .1); + --pgn-navbar-dark-color-disabled: rgba(var(--pgn-color-white), .25); + --pgn-navbar-dark-color-active: var(--pgn-color-white); + --pgn-navbar-dark-color-hover: rgba(var(--pgn-color-white), .75); + --pgn-navbar-toggler-font-size: var(--pgn-font-size-lg); + --pgn-navbar-brand-font-size: var(--pgn-font-size-lg); + --pgn-navbar-nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2); + --pgn-navbar-padding-x-base: var(--pgn-core-spacer); + --pgn-navbar-padding-y: calc(var(--pgn-core-spacer) / 2); + --pgn-nav-divider-margin-y: calc(var(--pgn-core-spacer) / 2); + --pgn-nav-divider-color: var(--pgn-color-gray-100); + --pgn-nav-pills-border-radius: var(--pgn-border-radius-base); + --pgn-nav-tabs-link-hover-bg: var(--pgn-color-light-400); + --pgn-nav-tabs-border-color: var(--pgn-color-light-400); + --pgn-nav-link-color-disabled: var(--pgn-color-gray-300); + --pgn-nav-link-color-base: var(--pgn-color-gray-700); + --pgn-modal-header-padding-base: var(--pgn-modal-header-padding-y) var(--pgn-modal-header-padding-x); + --pgn-modal-header-border-width: var(--pgn-modal-content-border-width); + --pgn-modal-backdrop-bg: var(--pgn-color-black); + --pgn-modal-content-border-radius: var(--pgn-border-radius-lg); + --pgn-modal-content-bg: var(--pgn-color-white); + --pgn-modal-title-line-height: var(--pgn-line-height-base); + --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-y) var(--pgn-modal-footer-padding-x); + --pgn-menu-background-base: var(--pgn-btn-tertiary-bg-base); + --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); + --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200); + --pgn-image-thumbnail-border-width: var(--pgn-border-width); + --pgn-icon-button-accent-color: var(--pgn-color-white); + --pgn-icon-button-diameter-inline: calc(var(--pgn-line-height-base) + .1em); + --pgn-form-feedback-tooltip-border-radius: var(--pgn-border-radius-base); + --pgn-form-feedback-tooltip-line-height: var(--pgn-line-height-base); + --pgn-form-feedback-tooltip-font-size: var(--pgn-font-size-sm); + --pgn-form-feedback-font-size: var(--pgn-font-size-small-base); + --pgn-form-feedback-margin-top: var(--pgn-form-text-margin-top); + --pgn-form-custom-file-box-shadow-base: var(--pgn-form-input-box-shadow-base); + --pgn-form-custom-range-thumb-box-shadow-focus-width: var(--pgn-form-input-focus-width); + --pgn-form-custom-range-thumb-height: var(--pgn-form-custom-range-thumb-width); + --pgn-form-custom-range-track-bg: var(--pgn-color-gray-300); + --pgn-form-custom-select-border-radius: var(--pgn-border-radius-base); + --pgn-form-custom-select-border-width-focus: var(--pgn-form-input-focus-width); + --pgn-form-custom-select-bg-disabled: var(--pgn-color-gray-100); + --pgn-form-custom-select-indicator-color: var(--pgn-color-gray-700); + --pgn-form-custom-switch-indicator-size: calc(var(--pgn-form-custom-control-indicator-size) - var(--pgn-form-custom-control-indicator-border-width) * 4); + --pgn-form-custom-switch-indicator-border-radius: calc(var(--pgn-form-custom-control-indicator-size) / 2); + --pgn-form-custom-switch-width: calc(var(--pgn-form-custom-control-indicator-size) * 1.75); + --pgn-form-custom-control-indicator-border-color: var(--pgn-color-gray-700); + --pgn-form-custom-control-indicator-box-shadow: var(--pgn-form-input-box-shadow-base); + --pgn-form-input-group-addon-bg: var(--pgn-color-gray-100); + --pgn-form-input-border-radius-sm: var(--pgn-border-radius-sm); + --pgn-form-input-border-radius-lg: var(--pgn-border-radius-lg); + --pgn-form-input-border-radius-base: var(--pgn-border-radius-base); + --pgn-form-input-color-base: var(--pgn-color-gray-700); + --pgn-form-input-bg-disabled: var(--pgn-color-gray-100); + --pgn-form-input-bg-base: var(--pgn-color-white); + --pgn-form-input-line-height-sm: var(--pgn-core-input-btn-line-height-sm); + --pgn-form-input-line-height-base: var(--pgn-core-input-btn-line-height-base); + --pgn-form-input-font-size-lg: var(--pgn-core-input-btn-font-size-lg); + --pgn-form-input-font-size-sm: var(--pgn-core-input-btn-font-size-sm); + --pgn-form-input-font-size-base: var(--pgn-core-input-btn-font-size-base); + --pgn-form-input-font-family: var(--pgn-core-input-btn-font-family); + --pgn-form-input-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); + --pgn-form-input-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x); + --pgn-form-input-padding-x-base: var(--pgn-core-input-btn-padding-x); + --pgn-form-input-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); + --pgn-form-input-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y); + --pgn-form-input-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x); + --pgn-dropzone-border-error: 2px solid var(--pgn-color-danger-300); + --pgn-dropzone-border-focus: 2px solid var(--pgn-color-info-300); + --pgn-dropzone-border-hover: 2px solid var(--pgn-color-info-300); + --pgn-dropdown-link-hover-bg: var(--pgn-color-light-300); + --pgn-dropdown-link-hover-color: var(--pgn-color-gray-900); + --pgn-dropdown-link-color: var(--pgn-color-gray-900); + --pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(var(--pgn-color-black), .175); + --pgn-dropdown-divider-margin-y: calc(var(--pgn-core-spacer) / 2); + --pgn-dropdown-divider-bg: var(--pgn-color-gray-100); + --pgn-dropdown-border-radius-base: var(--pgn-border-radius-base); + --pgn-dropdown-border-width: var(--pgn-border-width); + --pgn-dropdown-bg: var(--pgn-color-white); + --pgn-dropdown-font-size: var(--pgn-font-size-base); + --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item); + --pgn-data-table-border: 1px solid var(--pgn-color-gray-200); + --pgn-data-table-background-color: var(--pgn-color-white); + --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x); + --pgn-collapsible-card-spacer-y-lg: var(--pgn-card-spacer-y); + --pgn-code-pre-color: var(--pgn-color-gray-900); + --pgn-code-kbd-bg: var(--pgn-color-gray-700); + --pgn-code-kbd-color: var(--pgn-color-white); + --pgn-code-kbd-nested-font-weight: var(--pgn-font-weight-bold); + --pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(var(--pgn-color-black), .25); + --pgn-code-kbd-font-size: var(--pgn-code-font-size); + --pgn-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); + --pgn-close-button-color: var(--pgn-color-black); + --pgn-close-button-font-weight: var(--pgn-font-weight-bold); + --pgn-close-button-font-size: calc(var(--pgn-font-size-base) * 1.5); + --pgn-carousel-transition-base: transform var(--pgn-carousel-transition-duration) ease-in-out; + --pgn-carousel-caption-color: var(--pgn-color-white); + --pgn-carousel-indicator-active-bg: var(--pgn-color-white); + --pgn-carousel-control-color: var(--pgn-color-white); + --pgn-card-footer-text-font-size: var(--pgn-font-size-small-x); + --pgn-card-divider-margin-y: var(--pgn-card-spacer-y); + --pgn-card-divider-bg: var(--pgn-color-light-400); + --pgn-card-columns-margin: var(--pgn-card-spacer-y); + --pgn-card-margin-grid: var(--pgn-card-margin-group); + --pgn-card-margin-deck: var(--pgn-card-margin-group); + --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max); + --pgn-card-bg: var(--pgn-color-white); + --pgn-card-border-color-base: rgba(var(--pgn-color-black), .125); + --pgn-card-border-radius-base: var(--pgn-border-radius-base); + --pgn-card-border-width: var(--pgn-border-width); + --pgn-btn-tertiary-inverse-bg-hover: rgba(var(--pgn-color-white), .1); --pgn-btn-tertiary-inverse-color: var(--pgn-color-white); - --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); - --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); --pgn-btn-tertiary-color: var(--pgn-color-gray-700); - --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075); --pgn-btn-border-radius-sm: var(--pgn-border-radius-sm); --pgn-btn-border-radius-lg: var(--pgn-border-radius-lg); @@ -312,30 +772,196 @@ --pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm); --pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base); --pgn-btn-font-family: var(--pgn-core-input-btn-font-family); - --pgn-btn-padding-sm-x: var(--pgn-core-input-btn-padding-sm-x); - --pgn-btn-padding-sm-y: var(--pgn-core-input-btn-padding-sm-y); --pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); --pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x); + --pgn-btn-padding-y-sm-x: var(--pgn-core-input-btn-padding-sm-x); + --pgn-btn-padding-y-sm-y: var(--pgn-core-input-btn-padding-sm-y); --pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); --pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600); + --pgn-breadcrumb-bg: var(--pgn-color-gray-200); + --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base); + --pgn-badge-focus-width: var(--pgn-core-input-btn-focus-width); + --pgn-badge-font-weight: var(--pgn-font-weight-bold); --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300); + --pgn-annotation-line-height: var(--pgn-line-height-sm); + --pgn-annotation-font-size: var(--pgn-font-size-sm); --pgn-alert-color-content: var(--pgn-color-gray-700); --pgn-alert-color-title: var(--pgn-color-black); --pgn-alert-font-weight-link: var(--pgn-font-weight-normal); --pgn-alert-border-radius: var(--pgn-border-radius-base); - --pgn-text-muted: var(--pgn-color-gray-500); - --pgn-color-danger-500: var(--pgn-color-red); - --pgn-color-warning-500: var(--pgn-color-yellow); - --pgn-color-info-500: var(--pgn-color-teal); - --pgn-color-success-500: var(--pgn-color-green); - --pgn-color-secondary-500: var(--pgn-color-gray-700); + --pgn-component-active-color: var(--pgn-color-white); + --pgn-color-dark-500: var(--pgn-color-dark-base); + --pgn-color-light-500: var(--pgn-color-light-base); + --pgn-color-danger-base: var(--pgn-color-red); + --pgn-color-warning-base: var(--pgn-color-yellow); + --pgn-color-info-base: var(--pgn-color-teal); + --pgn-color-success-base: var(--pgn-color-green); + --pgn-color-brand-500: var(--pgn-color-brand-base); + --pgn-color-secondary-base: var(--pgn-color-gray-700); + --pgn-color-primary-500: var(--pgn-color-primary-base); + --pgn-color-gray-500: var(--pgn-color-gray-base); --pgn-body-color: var(--pgn-color-gray-700); --pgn-body-bg: var(--pgn-color-white); --pgn-border-color: var(--pgn-color-gray-200); - --pgn-link-inline-color: var(--pgn-color-info-500); - --pgn-link-color: var(--pgn-color-info-500); + --pgn-link-brand-inline-color: var(--pgn-color-brand-500); + --pgn-link-brand-color: var(--pgn-color-brand-500); + --pgn-link-muted-inline-color: var(--pgn-color-primary-500); + --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); + --pgn-table-dark-color-border: var(--pgn-table-dark-bg-base); + --pgn-table-dark-color-hover: var(--pgn-table-dark-color-base); + --pgn-table-border-color: var(--pgn-border-color); --pgn-table-color-border: var(--pgn-border-color); - --pgn-table-color-caption: var(--pgn-text-muted); + --pgn-table-color-base: var(--pgn-body-color); + --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); + --pgn-search-field-border-color-base: var(--pgn-color-gray-500); + --pgn-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500); + --pgn-progress-bar-border-color: var(--pgn-color-gray-500); + --pgn-product-tour-checkpoint-color-breadcrumb: var(--pgn-color-primary-500); + --pgn-product-tour-checkpoint-color-border: var(--pgn-color-brand-500); + --pgn-popover-arrow-color: var(--pgn-popover-bg); + --pgn-popover-body-color: var(--pgn-body-color); + --pgn-popover-header-color: var(--pgn-headings-color); + --pgn-pagination-focus-color-base: var(--pgn-color-primary-500); + --pgn-pagination-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow); + --pgn-pagination-color-disabled: var(--pgn-color-gray-500); + --pgn-pagination-color-active: var(--pgn-component-active-color); + --pgn-navbar-dark-brand-color-hover: var(--pgn-navbar-dark-color-active); + --pgn-navbar-dark-brand-color-base: var(--pgn-navbar-dark-color-active); + --pgn-navbar-toggler-border-radius: var(--pgn-btn-border-radius-base); + --pgn-navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2); + --pgn-navbar-brand-height: calc(var(--pgn-navbar-brand-font-size) * var(--pgn-line-height-base)); + --pgn-nav-pills-link-link-active-color: var(--pgn-component-active-color); + --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg); + --pgn-nav-tabs-link-active-color-border: transparent transparent var(--pgn-color-primary-500); + --pgn-nav-tabs-link-active-color-base: var(--pgn-color-primary-500); + --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color); + --pgn-modal-header-border-color: var(--pgn-border-color); + --pgn-modal-footer-border-width: var(--pgn-modal-header-border-width); + --pgn-image-figure-caption-color: var(--pgn-color-gray-500); + --pgn-image-thumbnail-bg: var(--pgn-body-bg); + --pgn-form-custom-file-button-bg: var(--pgn-form-input-group-addon-bg); + --pgn-form-custom-file-color: var(--pgn-form-input-color-base); + --pgn-form-custom-file-font-family: var(--pgn-form-input-font-family); + --pgn-form-custom-file-line-height: var(--pgn-form-input-line-height-base); + --pgn-form-custom-file-padding-x: var(--pgn-form-input-padding-x-base); + --pgn-form-custom-file-padding-y: var(--pgn-form-input-padding-y-base); + --pgn-form-custom-file-bg-disabled: var(--pgn-form-input-bg-disabled); + --pgn-form-custom-file-bg-base: var(--pgn-form-input-bg-base); + --pgn-form-custom-file-border-color-radius: var(--pgn-form-input-border-radius-base); + --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus); + --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-gray-500); + --pgn-form-custom-select-border-box-shadow-focus: var(--pgn-core-input-btn-focus-box-shadow); + --pgn-form-custom-select-bg-base: var(--pgn-form-input-bg-base); + --pgn-form-custom-select-color-disabled: var(--pgn-color-gray-500); + --pgn-form-custom-select-color-base: var(--pgn-form-input-color-base); + --pgn-form-custom-select-line-height: var(--pgn-form-input-line-height-base); + --pgn-form-custom-select-font-size-lg: var(--pgn-form-input-font-size-lg); + --pgn-form-custom-select-font-size-sm: var(--pgn-form-input-font-size-sm); + --pgn-form-custom-select-font-size-base: var(--pgn-form-input-font-size-base); + --pgn-form-custom-select-font-family: var(--pgn-form-input-font-family); + --pgn-form-custom-select-padding-x-lg: var(--pgn-form-input-padding-x-lg); + --pgn-form-custom-select-padding-x-sm: var(--pgn-form-input-padding-x-sm); + --pgn-form-custom-select-padding-x-base: var(--pgn-form-input-padding-x-base); + --pgn-form-custom-select-padding-y-lg: var(--pgn-form-input-padding-y-lg); + --pgn-form-custom-select-padding-y-sm: var(--pgn-form-input-padding-y-sm); + --pgn-form-custom-select-padding-y-base: var(--pgn-form-input-padding-y-base); + --pgn-form-custom-control-label-color-disabled: var(--pgn-color-gray-500); + --pgn-form-custom-control-indicator-active-color-base: var(--pgn-component-active-color); + --pgn-form-custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled); + --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base); + --pgn-form-input-group-addon-color-base: var(--pgn-form-input-color-base); + --pgn-form-input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2)); + --pgn-form-input-height-inner-half: calc(var(--pgn-form-input-line-height-base) * .5em + var(--pgn-form-input-padding-y-base)); + --pgn-form-input-height-inner-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); + --pgn-form-input-height-sm: calc(var(--pgn-form-input-line-height-sm) * 1em + var(--pgn-core-input-btn-padding-sm-y) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-height-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-focus-color-base: var(--pgn-form-input-color-base); + --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base); + --pgn-form-input-box-shadow-focus: var(--pgn-core-input-btn-focus-box-shadow); + --pgn-form-input-border-width: var(--pgn-core-input-btn-border-width); + --pgn-form-input-border-color: var(--pgn-color-gray-500); + --pgn-form-input-color-plaintext: var(--pgn-body-color); + --pgn-form-input-color-placeholder: var(--pgn-color-gray-500); + --pgn-form-input-line-height-lg: var(--pgn-core-input-btn-line-height-lg); + --pgn-form-input-font-weight: var(--pgn-font-weight-base); + --pgn-dropzone-restriction-msg-color: var(--pgn-color-gray-500); + --pgn-dropzone-border-active: 2px solid var(--pgn-color-primary-500); + --pgn-dropzone-border-default: 1px dashed var(--pgn-color-gray-500); + --pgn-dropdown-link-disabled-color: var(--pgn-color-gray-500); + --pgn-dropdown-link-active-bg: var(--pgn-component-active-color); + --pgn-dropdown-link-active-color: var(--pgn-component-active-color); + --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width)); + --pgn-dropdown-color-header: var(--pgn-color-gray-500); + --pgn-dropdown-color-base: var(--pgn-body-color); + --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); + --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); + --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); + --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); + --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); --pgn-btn-border-width: var(--pgn-core-input-btn-border-width); --pgn-btn-line-height-lg: var(--pgn-core-input-btn-line-height-lg); + --pgn-breadcrumb-inverse-active: var(--pgn-color-light-500); + --pgn-breadcrumb-color-active: var(--pgn-color-gray-500); + --pgn-breadcrumb-color-base: var(--pgn-color-primary-500); + --pgn-text-muted: var(--pgn-color-gray-500); + --pgn-component-active-bg: var(--pgn-color-primary-500); + --pgn-color-danger-500: var(--pgn-color-danger-base); + --pgn-color-warning-500: var(--pgn-color-warning-base); + --pgn-color-info-500: var(--pgn-color-info-base); + --pgn-color-success-500: var(--pgn-color-success-base); + --pgn-color-secondary-500: var(--pgn-color-secondary-base); + --pgn-link-inline-color: var(--pgn-color-info-500); + --pgn-link-color: var(--pgn-color-info-500); + --pgn-core-input-btn-focus-color: var(--pgn-component-active-bg); + --pgn-table-caption-color: var(--pgn-text-muted); + --pgn-table-color-caption: var(--pgn-text-muted); + --pgn-table-color-hover: var(--pgn-table-color-base); + --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); + --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); + --pgn-popover-success-icon-color: var(--pgn-color-success-500); + --pgn-pagination-bg-active: var(--pgn-component-active-bg); + --pgn-nav-pills-link-link-active-bg: var(--pgn-component-active-bg); + --pgn-modal-footer-border-color: var(--pgn-modal-header-border-color); + --pgn-menu-background-active: var(--pgn-btn-tertiary-bg-active); + --pgn-form-feedback-color-invalid: var(--pgn-color-danger-500); + --pgn-form-feedback-color-valid: var(--pgn-color-success-500); + --pgn-form-custom-file-button-color: var(--pgn-form-custom-file-color); + --pgn-form-custom-file-font-weight: var(--pgn-form-input-font-weight); + --pgn-form-custom-file-box-shadow-focus: var(--pgn-form-input-box-shadow-focus); + --pgn-form-custom-file-border-width: var(--pgn-form-input-border-width); + --pgn-form-custom-file-border-color-base: var(--pgn-form-input-border-color); + --pgn-form-custom-file-height-inner: var(--pgn-form-input-height-inner-base); + --pgn-form-custom-file-height-base: var(--pgn-form-input-height-base); + --pgn-form-custom-range-thumb-bg-base: var(--pgn-component-active-bg); + --pgn-form-custom-select-height-sm: var(--pgn-form-input-height-sm); + --pgn-form-custom-select-border-color-base: var(--pgn-form-input-border-color); + --pgn-form-custom-select-border-width-base: var(--pgn-form-input-border-width); + --pgn-form-custom-select-feedback-icon-size: var(--pgn-form-input-height-inner-half) var(--pgn-form-input-height-inner-half); + --pgn-form-custom-select-feedback-icon-position: center right calc(var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding)); + --pgn-form-custom-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-form-custom-select-padding-y-base)) * 3 / 4 + var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding)); + --pgn-form-custom-select-font-weight: var(--pgn-form-input-font-weight); + --pgn-form-custom-select-font-height-base: var(--pgn-form-input-height-base); + --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-component-active-bg); + --pgn-form-custom-control-indicator-active-bg: var(--pgn-component-active-bg); + --pgn-form-custom-control-indicator-checked-bg-base: var(--pgn-component-active-bg); + --pgn-form-custom-control-indicator-checked-color: var(--pgn-component-active-bg); + --pgn-form-input-group-addon-color-border: var(--pgn-form-input-border-color); + --pgn-form-input-height-lg: calc(var(--pgn-form-input-line-height-lg) * 1em + var(--pgn-core-input-btn-padding-lg-y) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-focus-color-border: var(--pgn-component-active-bg); + --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); + --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); + --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); + --pgn-pagination-color-base: var(--pgn-link-color); + --pgn-form-feedback-icon-color-invalid: var(--pgn-form-feedback-color-invalid); + --pgn-form-feedback-icon-color-valid: var(--pgn-form-feedback-color-valid); + --pgn-form-custom-file-border-color-focus: var(--pgn-form-input-focus-color-border); + --pgn-form-custom-select-border-color-focus: var(--pgn-form-input-focus-color-border); + --pgn-form-custom-select-font-height-lg: var(--pgn-form-input-height-lg); + --pgn-form-custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg); + --pgn-form-custom-checkbox-indicator-indeterminate-color: var(--pgn-form-custom-control-indicator-checked-color); + --pgn-form-custom-control-indicator-active-color-border: var(--pgn-form-custom-control-indicator-active-bg); + --pgn-form-custom-control-indicator-checked-border-color-focus: var(--pgn-form-input-focus-color-border); + --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-form-custom-control-indicator-checked-color); } diff --git a/tokens/source/colors/colors.tokens.json b/tokens/source/colors/colors.tokens.json index cbaa63f915..d24d6299a1 100644 --- a/tokens/source/colors/colors.tokens.json +++ b/tokens/source/colors/colors.tokens.json @@ -12,110 +12,120 @@ "b": { "value": "#FFEE88", "themeable": true, "source": "$accent-b" } }, "gray": { + "base": { "value": "#707070", "themeable": true, "source": "$gray" }, "100": { "value": "#EBEBEB", "themeable": true, "source": "$gray-100" }, "200": { "value": "#CCCCCC", "themeable": true, "source": "$gray-200" }, "300": { "value": "#ADADAD", "themeable": true, "source": "$gray-300" }, "400": { "value": "#8F8F8F", "themeable": true, "source": "$gray-400" }, - "500": { "value": "#707070", "themeable": true, "source": "$gray-500" }, + "500": { "value": "{color.gray.base.value}", "themeable": true, "source": "$gray-500" }, "600": { "value": "#5C5C5C", "themeable": true, "source": "$gray-600" }, "700": { "value": "#454545", "themeable": true, "source": "$gray-700" }, "800": { "value": "#333333", "themeable": true, "source": "$gray-800" }, "900": { "value": "#212529", "themeable": true, "source": "$gray-900" } }, "primary": { + "base": { "value": "#0A3055", "themeable": true, "source": "$primary" }, "100": { "value": "#F0F3F5", "themeable": true, "source": "$primary-100" }, "200": { "value": "#C2CBD5", "themeable": true, "source": "$primary-200" }, "300": { "value": "#8598AA", "themeable": true, "source": "$primary-300" }, "400": { "value": "#476480", "themeable": true, "source": "$primary-400" }, - "500": { "value": "#0A3055", "themeable": true, "source": "$primary-500" }, + "500": { "value": "{color.primary.base.value}", "themeable": true, "source": "$primary-500" }, "600": { "value": "#092B4D", "themeable": true, "source": "$primary-600" }, "700": { "value": "#082644", "themeable": true, "source": "$primary-700" }, "800": { "value": "#082440", "themeable": true, "source": "$primary-800" }, "900": { "value": "#07223C", "themeable": true, "source": "$primary-900" } }, "secondary": { + "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$secondary" }, "100": { "value": "#F4F4F4", "themeable": true, "source": "$secondary-100" }, "200": { "value": "#D1D1D1", "themeable": true, "source": "$secondary-200" }, "300": { "value": "#A2A2A2", "themeable": true, "source": "$secondary-300" }, "400": { "value": "#747474", "themeable": true, "source": "$secondary-400"}, - "500": { "value": "{color.gray.700.value}", "themeable": true, "source": "$secondary-500"}, + "500": { "value": "{color.secondary.base.value}", "themeable": true, "source": "$secondary-500"}, "600": { "value": "#3E3E3E", "themeable": true, "source": "$secondary-600"}, "700": { "value": "#373737", "themeable": true, "source": "$secondary-700"}, "800": { "value": "#343434", "themeable": true, "source": "$secondary-800"}, "900": { "value": "#303030", "themeable": true, "source": "$secondary-900"} }, "brand": { + "base": { "value": "#9D0054", "themeable": true, "source": "$brand" }, "100": { "value": "#F9F0F5", "themeable": true, "source": "$brand-100" }, "200": { "value": "#E7BFD4", "themeable": true, "source": "$brand-200" }, "300": { "value": "#CE80AA", "themeable": true, "source": "$brand-300" }, "400": { "value": "#B6407F", "themeable": true, "source": "$brand-400" }, - "500": { "value": "#9D0054", "themeable": true, "source": "$brand-500" }, + "500": { "value": "{color.brand.base.value}", "themeable": true, "source": "$brand-500" }, "600": { "value": "#8D004C", "themeable": true, "source": "$brand-600" }, "700": { "value": "#7E0043", "themeable": true, "source": "$brand-700" }, "800": { "value": "#76003F", "themeable": true, "source": "$brand-800" }, "900": { "value": "#6E003B", "themeable": true, "source": "$brand-900" } }, "success": { + "base": { "value": "{color.green.value}", "themeable": true, "source": "$success" }, "100": { "value": "#F1F8F5", "themeable": true, "source": "$success-100" }, "200": { "value": "#C5E0D4", "themeable": true, "source": "$success-200" }, "300": { "value": "#8BC1A9", "themeable": true, "source": "$success-300" }, "400": { "value": "#51A17E", "themeable": true, "source": "$success-400" }, - "500": { "value": "{color.green.value}", "themeable": true, "source": "$success-500" }, + "500": { "value": "{color.success.base.value}", "themeable": true, "source": "$success-500" }, "600": { "value": "#15754B", "themeable": true, "source": "$success-600" }, "700": { "value": "#126842", "themeable": true, "source": "$success-700" }, "800": { "value": "#11623E", "themeable": true, "source": "$success-800" }, "900": { "value": "#105b3A", "themeable": true, "source": "$success-900" } }, "info": { - "100": { "value": "#F0F6FA", "themeable": true, "source": "$info-100"}, + "base": { "value": "{color.teal.value}", "themeable": true, "source": "$info" }, + "100": { "value": "#F0F6FA", "themeable": true, "source": "$info-100" }, "200": { "value": "#BFDBEA", "themeable": true, "source": "$info-200" }, "300": { "value": "#80B6D5", "themeable": true, "source": "$info-300" }, "400": { "value": "#4092BF", "themeable": true, "source": "$info-400" }, - "500": { "value": "{color.teal.value}", "themeable": true, "source": "$info-500" }, + "500": { "value": "{color.info.base.value}", "themeable": true, "source": "$info-500" }, "600": { "value": "#006299", "themeable": true, "source": "$info-600" }, "700": { "value": "#005788", "themeable": true, "source": "$info-700" }, "800": { "value": "#005280", "themeable": true, "source": "$info-800" }, "900": { "value": "#004C77", "themeable": true, "source": "$info-900" } }, "warning": { + "base": { "value": "{color.yellow.value}", "themeable": true, "source": "$warning" }, "100": { "value": "#FFFDF0", "themeable": true, "source": "$warning-100" }, "200": { "value": "#FFF6BF", "themeable": true, "source": "$warning-200" }, "300": { "value": "#FFEC80", "themeable": true, "source": "$warning-300" }, "400": { "value": "#FFE340", "themeable": true, "source": "$warning-400" }, - "500": { "value": "{color.yellow.value}", "themeable": true, "source": "$warning-500" }, + "500": { "value": "{color.warning.base.value}", "themeable": true, "source": "$warning-500" }, "600": { "value": "#E6C300", "themeable": true, "source": "$warning-600" }, "700": { "value": "#CCAE00", "themeable": true, "source": "$warning-700" }, "800": { "value": "#BFA300", "themeable": true, "source": "$warning-800" }, "900": { "value": "#B39800", "themeable": true, "source": "$warning-900" } }, "danger": { + "base": { "value": "{color.red.value}", "themeable": true, "source": "$danger" }, "100": { "value": "#FBF2F3", "themeable": true, "source": "$danger-100" }, "200": { "value": "#F0CBCE", "themeable": true, "source": "$danger-200" }, "300": { "value": "#E1969D", "themeable": true, "source": "$danger-300" }, "400": { "value": "#D2626B", "themeable": true, "source": "$danger-400" }, - "500": { "value": "{color.red.value}", "themeable": true, "source": "$danger-500" }, + "500": { "value": "{color.danger.base.value}", "themeable": true, "source": "$danger-500" }, "600": { "value": "#B02934", "themeable": true, "source": "$danger-600" }, "700": { "value": "#9C242E", "themeable": true, "source": "$danger-700" }, "800": { "value": "#92222C", "themeable": true, "source": "$danger-800" }, "900": { "value": "#892029", "themeable": true, "source": "$danger-900" } }, "light": { + "base": { "value": "#E1DDDB", "themeable": true, "source": "$light" }, "100": { "value": "#FDFDFD", "themeable": true, "source": "$light-100" }, "200": { "value": "#F8F7F6", "themeable": true, "source": "$light-200" }, "300": { "value": "#F0EEED", "themeable": true, "source": "$light-300" }, "400": { "value": "#E9E6E4", "themeable": true, "source": "$light-400" }, - "500": { "value": "#E1DDDB", "themeable": true, "source": "$light-500" }, + "500": { "value": "{color.light.base.value}", "themeable": true, "source": "$light-500" }, "600": { "value": "#CBC7C5", "themeable": true, "source": "$light-600" }, "700": { "value": "#B4B1AF", "themeable": true, "source": "$light-700" }, "800": { "value": "#A9A6A4", "themeable": true, "source": "$light-800" }, "900": { "value": "#9E9B99", "themeable": true, "source": "$light-900" } }, "dark": { + "base": { "value": "#273F2F", "themeable": true, "source": "$dark" }, "100": { "value": "#F2F3F3", "themeable": true, "source": "$dark-100" }, "200": { "value": "#C9CFCB", "themeable": true, "source": "$dark-200" }, "300": { "value": "#939f97", "themeable": true, "source": "$dark-300" }, "400": { "value": "#5D6F63", "themeable": true, "source": "$dark-400" }, - "500": { "value": "#273F2F", "themeable": true, "source": "$dark-500" }, + "500": { "value": "{color.dark.base.value}", "themeable": true, "source": "$dark-500" }, "600": { "value": "#23392A", "themeable": true, "source": "$dark-600" }, "700": { "value": "#1F3226", "themeable": true, "source": "$dark-700" }, "800": { "value": "#1D2F23", "themeable": true, "source": "$dark-800" }, diff --git a/tokens/source/colors/component/component.tokens.json b/tokens/source/colors/component/component.tokens.json new file mode 100644 index 0000000000..a110908f47 --- /dev/null +++ b/tokens/source/colors/component/component.tokens.json @@ -0,0 +1,8 @@ +{ + "component": { + "active": { + "color": { "value": "{color.white.value}", "themeable": true, "source": "$component-active-color" }, + "bg": { "value": "{color.primary.500.value}", "themeable": true, "source": "$component-active-bg" } + } + } +} \ No newline at end of file diff --git a/tokens/source/components/action-row/action-row.tokens.json b/tokens/source/components/action-row/action-row.tokens.json new file mode 100644 index 0000000000..0233a8839e --- /dev/null +++ b/tokens/source/components/action-row/action-row.tokens.json @@ -0,0 +1,8 @@ +{ + "action-row": { + "gap": { + "x": { "value": ".5rem", "themeable": true, "source": "$action-row-gap-x" }, + "y": { "value": ".5rem", "themeable": true, "source": "$action-row-gap-y" } + } + } +} diff --git a/tokens/source/components/annotation/annotation.tokens.json b/tokens/source/components/annotation/annotation.tokens.json new file mode 100644 index 0000000000..c5e558fe2a --- /dev/null +++ b/tokens/source/components/annotation/annotation.tokens.json @@ -0,0 +1,30 @@ +{ + "annotation": { + "padding": { "value": ".5rem", "themeable": true, "source": "$annotation-padding" }, + "box-shadow": { + "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15))\n drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", + "themeable": true, + "source": "$annotation-box-shadow" + }, + "border": { + "radius": { "value": ".25rem", "themeable": true, "source": "$annotation-border-radius" } + }, + "max": { + "width": { "value": "18.75rem", "themeable": true, "source": "$annotation-max-width" } + }, + "font": { + "size": { "value": "{font.size.sm.value}", "themeable": true, "source": "$annotation-font-size" } + }, + "line": { + "height": { "value": "{line-height.sm.value}", "themeable": true, "source": "$annotation-line-height" } + }, + "arrow": { + "side": { + "margin": { "value": ".25rem", "themeable": true, "source": "$annotation-arrow-side-margin" } + }, + "border": { + "width": { "value": ".5rem", "themeable": true, "source": "$annotation-arrow-border-width" } + } + } + } +} diff --git a/tokens/source/components/avatarButton/avatarButton.tokens.json b/tokens/source/components/avatar-button/avatar-button.tokens.json similarity index 100% rename from tokens/source/components/avatarButton/avatarButton.tokens.json rename to tokens/source/components/avatar-button/avatar-button.tokens.json diff --git a/tokens/source/components/badge/badge.tokens.json b/tokens/source/components/badge/badge.tokens.json new file mode 100644 index 0000000000..830ab3936f --- /dev/null +++ b/tokens/source/components/badge/badge.tokens.json @@ -0,0 +1,25 @@ +{ + "badge": { + "font": { + "size": { "value": "75%", "themeable": true, "source": "$badge-font-size" }, + "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$badge-font-weight" } + }, + "padding": { + "x": { + "base": { "value": ".5rem", "themeable": true, "source": "$badge-padding-x" }, + "pill": { "value": ".6em", "themeable": true, "source": "$badge-pill-padding-x" } + }, + "y": { "value": ".125rem", "themeable": true, "source": "$badge-padding-y" } + }, + "border": { + "radius": { + "base": { "value": ".25rem", "themeable": true, "source": "$badge-border-radius" }, + "pill": { "value": "10rem", "themeable": true, "source": "$badge-pill-border-radius" } + } + }, + "transition": { "value": "none", "themeable": true, "source": "$badge-transition" }, + "focus": { + "width": { "value": "{core.input.btn.focus.width.value}", "themeable": true, "source": "$badge-focus-width" } + } + } +} diff --git a/tokens/source/components/breadcrumb/breadcrumb.tokens.json b/tokens/source/components/breadcrumb/breadcrumb.tokens.json new file mode 100644 index 0000000000..e1f7707d9c --- /dev/null +++ b/tokens/source/components/breadcrumb/breadcrumb.tokens.json @@ -0,0 +1,40 @@ +{ + "breadcrumb": { + "font": { + "size": { "value": "null", "themeable": true, "source": "$breadcrumb-font-size" } + }, + "padding": { + "y": { "value": ".75rem", "themeable": true, "source": "$breadcrumb-padding-y" }, + "x": { "value": "1rem", "themeable": true, "source": "$breadcrumb-padding-x" }, + "item": { "value": ".5rem", "themeable": true, "source": "$breadcrumb-item-padding" } + }, + "margin": { + "bottom": { "value": "1rem", "themeable": true, "source": "$breadcrumb-margin-bottom" }, + "left": { "value": ".5rem", "themeable": true, "source": "$breadcrumb-margin-left" } + }, + "border": { + "focus": { + "axis": { + "y": { "value": ".5rem", "themeable": true, "source": "$breadcrumb-border-focus-axis-y" }, + "x": { "value": ".25rem", "themeable": true, "source": "$breadcrumb-border-focus-axis-x" } + }, + "width": { "value": ".0625rem", "themeable": true, "source": "$breadcrumb-border-focus-width" } + }, + "radius": { + "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$breadcrumb-border-radius" }, + "focus": { "value": ".125rem", "themeable": true, "source": "$breadcrumb-focus-border-radius" } + } + }, + "bg": { "value": "{color.gray.200.value}", "themeable": true, "source": "$breadcrumb-bg" }, + "color": { + "base": { "value": "{color.primary.500.value}", "themeable": true, "source": "$breadcrumb-color" }, + "divider": { "value": "{color.gray.600.value}", "themeable": true, "source": "$breadcrumb-divider-color" }, + "active": { "value": "{color.gray.500.value}", "themeable": true, "source": "$breadcrumb-active-color" } + }, + "inverse": { + "active": { "value": "{color.light.500.value}", "themeable": true, "source": "$breadcrumb-inverse-active" }, + "spacer": { "valued": "{color.light.700.value}", "themeable": true, "source": "$breadcrumb-inverse-spacer" }, + "color": { "valued": "{color.white.value}", "themeable": true, "source": "$breadcrumb-inverse-color" } + } + } +} diff --git a/tokens/source/components/bubble/bubble.tokens.json b/tokens/source/components/bubble/bubble.tokens.json new file mode 100644 index 0000000000..c27b8e2489 --- /dev/null +++ b/tokens/source/components/bubble/bubble.tokens.json @@ -0,0 +1,10 @@ +{ + "bubble": { + "expandable": { + "padding": { + "y": { "value": "0", "themeable": true, "source": "$bubble-expandable-padding-y" }, + "x": { "value": ".25rem", "themeable": true, "source": "$bubble-expandable-padding-x" } + } + } + } +} diff --git a/tokens/source/components/button/button.tokens.json b/tokens/source/components/button/button.tokens.json index e28c0c9162..1476ecce3a 100644 --- a/tokens/source/components/button/button.tokens.json +++ b/tokens/source/components/button/button.tokens.json @@ -1,22 +1,22 @@ { "btn": { "padding": { - "y": { + "y": { "base": { "value": "{core.input.btn.padding.y.value}", "themeable": true, "source": "$btn-padding-y" }, - "lg": { "value": "{core.input.btn.padding.lg.y.value}", "themeable": true, "source": "$btn-padding-y-lg" } + "lg": { "value": "{core.input.btn.padding.lg.y.value}", "themeable": true, "source": "$btn-padding-y-lg" }, + "sm": { + "y": { "value": "{core.input.btn.padding.sm.y.value}", "themeable": true, "source": "$btn-padding-y-sm" }, + "x": { "value": "{core.input.btn.padding.sm.x.value}", "themeable": true, "source": "$btn-padding-x-sm" } + } }, - "x": { + "x": { "base": { "value": "{core.input.btn.padding.x.value}", "themeable": true, "source": "$btn-padding-x" }, "lg": { "value": "{core.input.btn.padding.lg.x.value}", "themeable": true, "source": "$btn-padding-x-lg" } - }, - "sm": { - "y": { "value": "{core.input.btn.padding.sm.y.value}", "themeable": true, "source": "$input-btn-padding-y-sm" }, - "x": { "value": "{core.input.btn.padding.sm.x.value}", "themeable": true, "source": "$input-btn-padding-x-sm" } } }, "font": { "family": { "value": "{core.input.btn.font.family.value}", "themeable": true, "source": "$btn-font-family" }, - "size": { + "size": { "base": { "value": "{core.input.btn.font.size.base.value}", "themeable": true, "source": "$btn-font-size" }, "sm": { "value": "{core.input.btn.font.size.sm.value}", "themeable": true, "source": "$btn-font-size-sm" }, "lg": { "value": "{core.input.btn.font.size.lg.value}", "themeable": true, "source": "$btn-font-size-lg" } @@ -24,7 +24,7 @@ "width": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$btn-font-weight" } }, "line": { - "height": { + "height": { "base": { "value": "{core.input.btn.line.height.base.value}", "themeable": true, "source": "$btn-line-height" }, "sm": { "value": "{core.input.btn.line.height.sm.value}", "themeable": true, "source": "$btn-line-height-sm" }, "lg": { "value": "{core.input.btn.line.height.lg.value}", "themeable": true, "source": "$btn-line-height-lg" } @@ -38,9 +38,9 @@ "sm": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$btn-border-radius-sm" } } }, - "box-shadow": { - "base": { - "value": "inset 0 1px 0 rgba({color.white}, .15), 0 1px 1px rgba({color.black}, .075)", "themeable": true, "source": "$btn-box-shadow" + "box-shadow": { + "base": { + "value": "inset 0 1px 0 rgba({color.white.value}, .15), 0 1px 1px rgba({color.black.value}, .075)", "themeable": true, "source": "$btn-box-shadow" }, "active": { "value": "none", "themeable": true, "source": "$btn-active-box-shadow" } }, @@ -56,21 +56,29 @@ }, "tertiary": { "color": { "value": "{color.gray.700.value}", "themeable": true, "source": "$btn-tertiary-color" }, - "bg": { + "bg": { "base": { "value": "transparent", "themeable": true, "source": "$btn-tertiary-bg" }, "hover": { "value": "{color.light.500.value}", "themeable": true, "source": "$btn-tertiary-hover-bg" }, "active": { "value": "{color.light.500.value}", "themeable": true, "source": "$btn-tertiary-active-bg" } }, "inverse": { "color": { "value": "{color.white.value}", "themeable": true, "source": "$btn-inverse-tertiary-color" }, - "bg": { + "bg": { "base": { "value": "transparent", "themeable": true, "source": "$btn-inverse-tertiary-bg" }, - "hover": { "value": "rgba(255, 255, 255, .1)", "themeable": true, "source": "$btn-inverse-tertiary-hover-bg" }, - "active": { "value": "{btn.tertiary.inverse.bg.hover.value}", "themeable": true, "source": "$btn-inverse-tertiary-active-bg" } + "hover": { + "value": "rgba({color.white.value}, .1)", + "themeable": true, + "source": "$btn-inverse-tertiary-hover-bg" + }, + "active": { + "value": "{btn.tertiary.inverse.bg.hover.value}", + "themeable": true, + "source": "$btn-inverse-tertiary-active-bg" + } } } }, - "block": { + "block": { "spacing": { "y": { "value": ".5rem", "themeable": true, "source": "$btn-block-spacing-y" } } diff --git a/tokens/source/components/card/card.tokens.json b/tokens/source/components/card/card.tokens.json new file mode 100644 index 0000000000..09860769fb --- /dev/null +++ b/tokens/source/components/card/card.tokens.json @@ -0,0 +1,96 @@ +{ + "card": { + "spacer": { + "x": { "value": "1.25rem", "themeable": true, "source": "$card-spacer-x" }, + "y": { "value": ".75rem", "themeable": true, "source": "$card-spacer-y" } + }, + "border": { + "width": { "value": "{border.width.value}", "themeable": true, "source": "$card-border-width" }, + "radius": { + "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$card-border-radius" }, + "image": { "value": ".3125rem", "themeable": true, "source": "$card-image-border-radius" }, + "logo": { "value": ".25rem", "themeable": true, "source": "$card-logo-border-radius" } + }, + "color": { + "base": { "value": "rgba({color.black.value}, .125)", "themeable": true, "source": "$card-border-color" }, + "focus": { "value": "rgba(0, 0, 0, .5)", "themeable": true, "source": "$card-border-focus-color" } + } + }, + "cap": { + "bg": { "value": "rgba(0, 0, 0, .03)", "themeable": true, "source": "$card-cap-bg" }, + "color": { "value": "null", "themeable": true, "source": "$card-cap-color" } + }, + "height": { + "base": { "value": "null", "themeable": true, "source": "$card-height" } + }, + "color": { "value": "null", "themeable": true, "source": "$card-color" }, + "bg": { "value": "{color.white.value}", "themeable": true, "source": "$card-bg" }, + "image": { + "overlay": { + "padding": { "value": "1.25rem", "themeable": true, "source": "$card-img-overlay-padding" } + }, + "horizontal": { + "width": { + "max": { "value": "240px", "themeable": true, "source": "$card-image-horizontal-max-width" }, + "min": { + "value": "{card.image.horizontal.width.max.value}", + "themeable": true, + "source": "$card-image-horizontal-min-width" + } + } + }, + "vertical": { + "height": { + "max": { "value": "140px", "themeable": true, "source": "$card-image-vertical-max-height" } + } + } + }, + "margin": { + "group": { "value": "12px", "themeable": true, "source": "$card-group-margin" }, + "deck": { "value": "{card.margin.group.value}", "themeable": true, "source": "$card-deck-margin" }, + "grid": { "value": "{card.margin.group.value}", "themeable": true, "source": "$card-grid-margin" } + }, + "columns": { + "count": { "value": "3", "themeable": true, "source": "$card-columns-count" }, + "gap": { "value": "1.25rem", "themeable": true, "source": "$card-columns-gap" }, + "margin": { "value": "{card.spacer.y.value}", "themeable": true, "source": "$card-columns-margin" } + }, + "divider": { + "bg": { "value": "{color.light.400.value}", "themeable": true, "source": "$card-divider-bg" }, + "margin": { + "y": { "value": "{card.spacer.y.value}", "themeable": true, "source": "$card-divider-margin-y" } + } + }, + "footer": { + "action": { + "gap": { "value": ".5rem", "themeable": true, "source": "$card-footer-actions-gap" } + }, + "text": { + "font": { + "size": { "value": "{font.size.small.x.value}", "themeable": true, "source": "$card-footer-text-font-size" } + } + } + }, + "logo": { + "left": { + "offset": { + "base": { "value": "1.5rem", "themeable": true, "source": "$card-logo-left-offset" }, + "horizontal": { "value": ".4375rem", "themeable": true, "source": "$card-logo-left-offset-horizontal" } + } + }, + "bottom": { + "offset": { + "base": { "value": "1rem", "themeable": true, "source": "$card-logo-bottom-offset" }, + "horizontal": { "value": ".4375rem", "themeable": true, "source": "$card-logo-bottom-offset-horizontal" } + } + }, + "width": { "value": "7.25rem", "themeable": true, "source": "$card-logo-width" }, + "height": { "value": "4.125rem", "themeable": true, "source": "$card-logo-height" } + }, + "loading": { + "skeleton": { + "spacer": { "value": ".313rem", "themeable": true, "source": "$loading-skeleton-spacer" } + } + } + } +} diff --git a/tokens/source/components/carousel/carousel.tokens.json b/tokens/source/components/carousel/carousel.tokens.json new file mode 100644 index 0000000000..2cb7531351 --- /dev/null +++ b/tokens/source/components/carousel/carousel.tokens.json @@ -0,0 +1,42 @@ +{ + "carousel": { + "control": { + "color": { "value": "{color.white.value}", "themeable": true, "source": "$carousel-control-color" }, + "width": { + "base": { "value": "15%", "themeable": true, "source": "$carousel-control-width" }, + "icon": { "value": "20px", "themeable": true, "source": "$carousel-control-icon-width" } + }, + "opacity": { + "base": { "value": ".5", "themeable": true, "source": "$carousel-control-opacity" }, + "hover": { "value": ".9", "themeable": true, "source": "$carousel-control-hover-opacity" } + }, + "transition": { "value": "opacity .15s ease", "themeable": true, "source": "$carousel-control-transition" } + }, + "indicator": { + "width": { "value": "30px", "themeable": true, "source": "$carousel-indicator-width" }, + "height": { + "base": { "value": "3px", "themeable": true, "source": "$carousel-indicator-height" }, + "area": { + "hit": { "value": "3px", "themeable": true, "source": "$carousel-indicator-hit-area-height" } + } + }, + "spacer": { "value": "3px", "themeable": true, "source": "$carousel-indicator-spacer" }, + "active": { + "bg": { "value": "{color.white.value}", "themeable": true, "source": "$carousel-indicator-active-bg" } + }, + "transition": { "value": "opacity .6s ease", "themeable": true, "source": "$carousel-indicator-transition" } + }, + "caption": { + "width": { "value": "70%", "themeable": true, "source": "$carousel-caption-width" }, + "color": { "value": "{color.white.value}", "themeable": true, "source": "$carousel-caption-color" } + }, + "transition": { + "duration": { "value": ".6s", "themeable": true, "source": "$carousel-transition-duration" }, + "base": { + "value": "transform {carousel.transition.duration.value} ease-in-out", + "themeable": true, + "source": "$carousel-transition-duration" + } + } + } +} diff --git a/tokens/source/components/chip/chip.tokens.json b/tokens/source/components/chip/chip.tokens.json new file mode 100644 index 0000000000..878f5201be --- /dev/null +++ b/tokens/source/components/chip/chip.tokens.json @@ -0,0 +1,28 @@ +{ + "chip": { + "padding": { + "y": { "value": ".125rem", "themeable": true, "source": "$chip-padding-y" }, + "x": { "value": ".5rem", "themeable": true, "source": "$chip-padding-x" } + }, + "margin": { + "inline": { "value": ".5rem", "themeable": true, "source": "$chip-margin-inline" } + }, + "border": { + "radius": { + "base": { "value": ".4375rem", "themeable": true, "source": "$chip-border-radius" }, + "focus": { "value": ".5rem", "themeable": true, "source": "$chip-focus-border-radius" } + }, + "width": { "value": ".0625rem", "themeable": true, "source": "$chip-border-width" } + }, + "position": { + "axis": { "value": ".125rem", "themeable": true, "source": "$chip-position-axis" } + }, + "font": { + "size": { "value": ".75rem", "themeable": true, "source": "$chip-font-size" }, + "weight": { "value": "400", "themeable": true, "source": "$chip-font-weight" } + }, + "line": { + "height": { "value": "1.5rem", "themeable": true, "source": "$chip-line-height" } + } + } +} diff --git a/tokens/source/components/close-button/close-button.tokens.json b/tokens/source/components/close-button/close-button.tokens.json new file mode 100644 index 0000000000..099798c5b5 --- /dev/null +++ b/tokens/source/components/close-button/close-button.tokens.json @@ -0,0 +1,12 @@ +{ + "close-button": { + "font": { + "size": { "value": "calc({font.size.base.value} * 1.5)", "themeable": true, "source": "$close-font-size" }, + "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$close-font-weight" } + }, + "color": { "value": "{color.black.value}", "themeable": true, "source": "$close-color" }, + "text": { + "shadow": { "value": "0 1px 0 {color.white.value}", "themeable": true, "source": "$close-text-shadow" } + } + } +} diff --git a/tokens/source/components/code/code.tokens.json b/tokens/source/components/code/code.tokens.json new file mode 100644 index 0000000000..28db8ef831 --- /dev/null +++ b/tokens/source/components/code/code.tokens.json @@ -0,0 +1,43 @@ +{ + "code": { + "font": { + "size": { "value": "87.5%", "themeable": true, "source": "$code-font-size" } + }, + "color": { "value": "#E83E8C", "themeable": true, "source": "$code-color" }, + "kbd": { + "font": { + "size": { "value": "{code.font.size.value}", "themeable": true, "source": "$kbd-font-size" } + }, + "box": { + "shadow": { + "value": "inset 0 -.1rem 0 rgba({color.black.value}, .25)", + "themeable": true, + "source": "$kbd-box-shadow" + } + }, + "nested": { + "font": { + "weight": { + "value": "{font.weight.bold.value}", + "themeable": true, + "source": "$nested-kbd-font-weight" + } + } + }, + "padding": { + "y": { "value": ".2rem", "themeable": true, "source": "$kbd-padding-y" }, + "x": { "value": ".4rem", "themeable": true, "source": "$kbd-padding-x" } + }, + "color": { "value": "{color.white.value}", "themeable": true, "source": "$kbd-color" }, + "bg": { "value": "{color.gray.700.value}", "themeable": true, "source": "$kbd-bg" } + }, + "pre": { + "color": { "value": "{color.gray.900.value}", "themeable": true, "source": "$pre-color" }, + "scrollable": { + "max": { + "height": { "value": "340px", "themeable": true, "source": "$pre-scrollable-max-height" } + } + } + } + } +} diff --git a/tokens/source/components/collapsible/collapsible.tokens.json b/tokens/source/components/collapsible/collapsible.tokens.json new file mode 100644 index 0000000000..e90dae816a --- /dev/null +++ b/tokens/source/components/collapsible/collapsible.tokens.json @@ -0,0 +1,25 @@ +{ + "collapsible": { + "card": { + "spacer": { + "y": { + "base": { "value": ".5rem", "themeable": true, "source": "$collapsible-card-spacer-y" }, + "lg": { "value": "{card.spacer.y.value}", "themeable": true, "source": "$collapsible-card-spacer-y-lg" } + }, + "x": { + "base": { "value": ".5rem", "themeable": true, "source": "$collapsible-card-spacer-x" }, + "lg": { "value": "{card.spacer.x.value}", "themeable": true, "source": "$collapsible-card-spacer-x-lg" } + }, + "left": { + "body": { "value": ".75rem", "themeable": true, "source": "$collapsible-card-body-spacer-left" } + }, + "icon": { "value": "2.5rem", "themeable": true, "source": "$collapsible-card-spacer-icon" }, + "basic": { + "y": { "value": ".5rem", "themeable": true, "source": "$collapsible-basic-spacer-y" }, + "x": { "value": ".5rem", "themeable": true, "source": "$collapsible-basic-spacer-x" }, + "icon": { "value": ".625rem", "themeable": true, "source": "$collapsible-basic-spacer-icon" } + } + } + } + } +} diff --git a/tokens/source/components/container/container.tokens.json b/tokens/source/components/container/container.tokens.json new file mode 100644 index 0000000000..f116e5aefa --- /dev/null +++ b/tokens/source/components/container/container.tokens.json @@ -0,0 +1,13 @@ +{ + "container": { + "max": { + "width": { + "xs": { "value": "464px", "themeable": true, "source": "$max-width-xs" }, + "sm": { "value": "708px", "themeable": true, "source": "$max-width-sm" }, + "md": { "value": "952px", "themeable": true, "source": "$max-width-md" }, + "lg": { "value": "1192px", "themeable": true, "source": "$max-width-lg" }, + "xl": { "value": "1440px", "themeable": true, "source": "$max-width-xl" } + } + } + } +} diff --git a/tokens/source/components/data-table/data-table.tokens.json b/tokens/source/components/data-table/data-table.tokens.json new file mode 100644 index 0000000000..553cba6a31 --- /dev/null +++ b/tokens/source/components/data-table/data-table.tokens.json @@ -0,0 +1,31 @@ +{ + "data-table": { + "background": { + "color": { "value": "{color.white.value}", "themeable": true, "source": "$data-table-background-color" + } + }, + "border": { "value": "1px solid {color.gray.200.value}", "themeable": true, "source": "$data-table-border" }, + "box": { + "shadow": { "value": "{box-shadow.sm.value}", "themeable": true, "source": "$data-table-box-shadow" } + }, + "padding": { + "x": { "value": ".75rem", "themeable": true, "source": "$data-table-padding-x" }, + "y": { "value": ".75rem", "themeable": true, "source": "$data-table-padding-y" }, + "small": { "value": ".5rem", "themeable": true, "source": "$data-table-padding-small" }, + "cell": { "value": ".5rem .75rem", "themeable": true, "source": "$data-table-cell-padding" } + }, + "footer": { + "position": { "value": "center", "themeable": true, "source": "$data-table-footer-position" } + }, + "pagination": { + "dropdown": { + "max": { + "height": { "value": "60vh", "themeable": true, "source": "$data-table-pagination-dropdown-max-height" } + }, + "min": { + "width": { "value": "6rem", "themeable": true, "source": "$data-table-pagination-dropdown-min-width" } + } + } + } + } +} diff --git a/tokens/source/components/dropdown/dropdown.tokens.json b/tokens/source/components/dropdown/dropdown.tokens.json new file mode 100644 index 0000000000..fd80976e67 --- /dev/null +++ b/tokens/source/components/dropdown/dropdown.tokens.json @@ -0,0 +1,66 @@ +{ + "dropdown": { + "min": { + "width": { "value": "18rem", "themeable": true, "source": "$dropdown-min-width" } + }, + "padding": { + "x": { + "base": { "value": "0", "themeable": true, "source": "$dropdown-padding-x" }, + "item": { "value": "1rem", "themeable": true, "source": "$dropdown-item-padding-x" } + }, + "y": { + "base": { "value": ".25rem", "themeable": true, "source": "$dropdown-padding-y" }, + "item": { "value": ".5rem", "themeable": true, "source": "$dropdown-item-padding-y" } + }, + "header": { + "value": "{dropdown.padding.y.base.value} {dropdown.padding.x.item.value}", + "themeable": true, + "source": "$dropdown-header-padding" + } + }, + "spacer": { "value": ".125rem", "themeable": true, "source": "$dropdown-spacer" }, + "font": { + "size": { "value": "{font.size.base.value}", "themeable": true, "source": "$dropdown-font-size" } + }, + "color": { + "base": { "value": "{body.color.value}", "themeable": true, "source": "$dropdown-color" }, + "header": { "value": "{color.gray.500.value}", "themeable": true, "source": "$dropdown-header-color" } + }, + "bg": { "value": "{color.white.value}", "themeable": true, "source": "$dropdown-bg" }, + "border": { + "color": { "value": "rgba(0, 0, 0, .15)", "themeable": true, "source": "$dropdown-border-color" }, + "width": { "value": "{border.width.value}", "themeable": true, "source": "$dropdown-border-width" }, + "radius": { + "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$dropdown-border-radius" }, + "inner": { + "value": "calc({dropdown.border.radius.base.value} - {dropdown.border.width.value})", + "themeable": true, + "source": "$dropdown-inner-border-radius" + } + } + }, + "divider": { + "bg": { "value": "{color.gray.100.value}", "themeable": true, "source": "$dropdown-divider-bg" }, + "margin": { + "y": { "value": "calc({core.spacer.value} / 2)", "themeable": true, "source": "$dropdown-divider-margin-y" } + } + }, + "box": { + "shadow": { "value": "0 .5rem 1rem rgba({color.black.value}, .175)", "themeable": true, "source": "$dropdown-box-shadow" } + }, + "link": { + "color": { "value": "{color.gray.900.value}", "themeable": true, "source": "$dropdown-link-color" }, + "hover": { + "color": { "value": "{color.gray.900.value}", "themeable": true, "source": "$dropdown-link-hover-color" }, + "bg": { "value": "{color.light.300.value}", "themeable": true, "source": "$dropdown-link-hover-bg" } + }, + "active": { + "color": { "value": "{component.active.color.value}", "themeable": true, "source": "$dropdown-link-active-color" }, + "bg": { "value": "{component.active.color.value}", "themeable": true, "source": "$dropdown-link-active-bg" } + }, + "disabled": { + "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$dropdown-link-disabled-color" } + } + } + } +} diff --git a/tokens/source/components/dropzone/dropzone.tokens.json b/tokens/source/components/dropzone/dropzone.tokens.json new file mode 100644 index 0000000000..6089e2eb66 --- /dev/null +++ b/tokens/source/components/dropzone/dropzone.tokens.json @@ -0,0 +1,25 @@ +{ + "dropzone": { + "padding": { "value": "1.5rem", "themeable": true, "source": "$dropzone-padding" }, + "border": { + "default": { "value": "1px dashed {color.gray.500.value}", "themeable": true, "source": "$dropzone-border-default" }, + "hover": { "value": "2px solid {color.info.300.value}", "themeable": true, "source": "$dropzone-border-hover" }, + "focus": { "value": "2px solid {color.info.300.value}", "themeable": true, "source": "$dropzone-border-focus" }, + "active": { "value": "2px solid {color.primary.500.value}", "themeable": true, "source": "$dropzone-border-active" }, + "error": { "value": "2px solid {color.danger.300.value}", "themeable": true, "source": "$dropzone-border-error" } + }, + "error": { + "wrapper": { + "color": { "value": "{color.danger.500.value}", "themeable": true, "source": "$dropzone-error-wrapper-color" } + } + }, + "restriction": { + "msg": { + "font": { + "size": { "value": "{font.size.small.x.value}", "themeable": true, "source": "$dropzone-restriction-msg-font-size" } + }, + "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$dropzone-restriction-msg-color" } + } + } + } +} diff --git a/tokens/source/components/form/form.tokens.json b/tokens/source/components/form/form.tokens.json new file mode 100644 index 0000000000..0e45b24d63 --- /dev/null +++ b/tokens/source/components/form/form.tokens.json @@ -0,0 +1,785 @@ +{ + "form": { + "input": { + "padding": { + "y": { + "base": { "value": "{core.input.btn.padding.y.value}", "themeable": true, "source": "$input-padding-y" }, + "sm": { "value": "{core.input.btn.padding.sm.y.value}", "themeable": true, "source": "$input-padding-y-sm" }, + "lg": { "value": "{core.input.btn.padding.lg.y.value}", "themeable": true, "source": "$input-padding-y-lg" } + }, + "x": { + "base": { "value": "{core.input.btn.padding.x.value}", "themeable": true, "source": "$input-padding-x" }, + "sm": { "value": "{core.input.btn.padding.sm.x.value}", "themeable": true, "source": "$input-padding-x-sm" }, + "lg": { "value": "{core.input.btn.padding.lg.x.value}", "themeable": true, "source": "$input-padding-x-lg" } + } + }, + "font": { + "family": { "value": "{core.input.btn.font.family.value}", "themeable": true, "source": "$input-font-family" }, + "size": { + "base": { "value": "{core.input.btn.font.size.base.value}", "themeable": true, "source": "$input-font-size" }, + "sm": { "value": "{core.input.btn.font.size.sm.value}", "themeable": true, "source": "$input-font-size-sm" }, + "lg": { "value": "{core.input.btn.font.size.lg.value}", "themeable": true, "source": "$input-font-size-lg" } + }, + "weight": { "value": "{font.weight.base.value}", "themeable": true, "source": "$input-font-weight" } + }, + "line": { + "height": { + "base": { "value": "{core.input.btn.line.height.base.value}", "themeable": true, "source": "$input-line-height" }, + "sm": { "value": "{core.input.btn.line.height.sm.value}", "themeable": true, "source": "$input-line-height-sm" }, + "lg": { "value": "{core.input.btn.line.height.lg.value}", "themeable": true, "source": "$input-line-height-lg" } + } + }, + "bg": { + "base": { "value": "{color.white.value}", "themeable": true, "source": "$input-bg" }, + "disabled": { "value": "{color.gray.100.value}", "themeable": true, "source": "$input-disabled-bg" } + }, + "color": { + "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$input-color" }, + "placeholder": { "value": "{color.gray.500.value}", "themeable": true, "source": "$input-placeholder-color" }, + "plaintext": { "value": "{body.color.value}", "themeable": true, "source": "$input-placeholder-color" } + }, + "border": { + "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$input-border-color" }, + "width": { "value": "{core.input.btn.border.width.value}", "themeable": true, "source": "$input-border-width" }, + "height": { + "value": "calc({form.input.border.width.value} * 2)", + "themeable": true, + "source": "$input-height-border" + }, + "radius": { + "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$input-border-radius" }, + "lg": { "value": "{border.radius.lg.value}", "themeable": true, "source": "$input-border-radius-lg" }, + "sm": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$input-border-radius-sm" } + } + }, + "box": { + "shadow": { + "base": { "value": "inset 0 1px 1px rgba(0, 0, 0, .075)", "themeable": true, "source": "$input-box-shadow" }, + "focus": { + "value": "{core.input.btn.focus.box.shadow.value}", + "themeable": true, + "source": "$input-focus-box-shadow" + } + } + }, + "focus": { + "bg": { "value": "{form.input.bg.base.value}", "themeable": true, "source": "$input-focus-bg" }, + "color": { + "base": { "value": "{form.input.color.base.value}", "themeable": true, "source": "$input-focus-color" }, + "border": { "value": "{component.active.bg.value}", "themeable": true, "source": "$input-focus-border-color" } + }, + "width": { "value": "1px", "themeable": true, "source": "$input-focus-width" } + }, + "height": { + "base": { + "value": "calc({form.input.line.height.base.value} * 1em + {form.input.padding.y.base.value} * 2 + {form.input.border.height.value})", + "themeable": true, + "source": "$input-height" + }, + "sm": { + "value": "calc({form.input.line.height.sm.value} * 1em + {core.input.btn.padding.sm.y.value} * 2 + {form.input.border.height.value})", + "themeable": true, + "source": "$input-height-sm" + }, + "lg": { + "value": "calc({form.input.line.height.lg.value} * 1em + {core.input.btn.padding.lg.y.value} * 2 + {form.input.border.height.value})", + "themeable": true, + "source": "$input-height-lg" + }, + "inner": { + "base": { + "value": "calc({form.input.line.height.base.value} * 1em + {form.input.padding.y.base.value} * 2)", + "themeable": true, + "source": "$input-height-inner" + }, + "half": { + "value": "calc({form.input.line.height.base.value} * .5em + {form.input.padding.y.base.value})", + "themeable": true, + "source": "$input-height-inner-half" + }, + "quarter": { + "value": "calc({form.input.line.height.base.value} * .25em + calc({form.input.padding.y.base.value} / 2))", + "themeable": true, + "source": "$input-height-inner-quarter" + } + } + }, + "width": { + "hover": { "value": "1px", "themeable": true, "source": "$input-hover-width" } + }, + "transition": { + "value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out", + "themeable": true, + "source": "$input-transition" + }, + "check": { + "gutter": { "value": "1.25rem", "themeable": true, "source": "$form-check-input-gutter" }, + "margin": { + "x": { + "base": { "value": ".25rem", "themeable": true, "source": "$form-check-input-margin-x" }, + "inline": { "value": ".3125rem", "themeable": true, "source": "$form-check-inline-input-margin-x" } + }, + "y": { "value": ".3rem", "themeable": true, "source": "$form-check-input-margin-y" } + } + }, + "group": { + "addon": { + "color": { + "base": { "value": "{form.input.color.base.value}", "themeable": true, "source": "$input-group-addon-color" }, + "border": { + "value": "{form.input.border.color.value}", + "themeable": true, + "source": "$input-group-addon-border-color" + } + }, + "bg": { "value": "{color.gray.100.value}", "themeable": true, "source": "$input-group-addon-bg" } + } + } + }, + "text": { + "margin": { + "top": { "value": ".25rem", "themeable": true, "source": "$form-text-margin-top" } + } + }, + "check": { + "inline": { + "margin": { + "x": { "value": ".75rem", "themeable": true, "source": "$form-check-inline-margin-x" } + } + }, + "position": { + "axis": { "value": ".375rem", "themeable": true, "source": "$form-check-position-axis" } + }, + "border": { + "radius": { + "focus": { "value": ".0625rem", "themeable": true, "source": "$form-check-focus-border-radius" } + }, + "width": { "value": ".125rem", "themeable": true, "source": "$form-check-border-width" } + } + }, + "grid": { + "gutter": { + "width": { "value": "10px", "themeable": true, "source": "$form-grid-gutter-width" } + } + }, + "group": { + "margin": { + "bottom": { "value": "1rem", "themeable": true, "source": "$form-group-margin-bottom" } + } + }, + "custom": { + "transition": { + "value": "background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out", + "themeable": true, + "source": "$custom-forms-transition" + }, + "control": { + "gutter": { "value": ".5rem", "themeable": true, "source": "$custom-control-gutter" }, + "spacer": { + "x": { "value": "1rem", "themeable": true, "source": "$custom-control-spacer-x" } + }, + "cursor": { "value": "null", "themeable": true, "source": "$custom-control-cursor" }, + "indicator": { + "size": { "value": "1.25rem", "themeable": true, "source": "$custom-control-indicator-size" }, + "bg": { + "base": { "value": "{form.input.bg.base.value}", "themeable": true, "source": "$custom-control-indicator-bg" }, + "size": { "value": "100%", "themeable": true, "source": "$custom-control-indicator-bg-size" } + }, + "box": { + "shadow": { + "value": "{form.input.box.shadow.base.value}", + "themeable": true, + "source": "$custom-control-indicator-box-shadow" + } + }, + "border": { + "color": { + "value": "{color.gray.700.value}", + "themeable": true, + "source": "$custom-control-indicator-border-color" + }, + "width": { "value": "2px", "themeable": true, "source": "$custom-control-indicator-border-width" } + }, + "disabled": { + "bg": { + "value": "{form.input.bg.disabled.value}", + "themeable": true, + "source": "$custom-control-indicator-disabled-bg" + } + }, + "checked": { + "color": { + "value": "{component.active.bg.value}", + "themeable": true, + "source": "$custom-control-indicator-checked-color" + }, + "bg": { + "base": { + "value": "{component.active.bg.value}", + "themeable": true, + "source": "$custom-control-indicator-checked-bg" + }, + "disabled": { + "value": "rgba(10, 48, 85, .5)", + "themeable": true, + "source": "$custom-control-indicator-checked-disabled-bg" + } + }, + "box": { + "shadow": { + "base": { "value": "none", "themeable": true, "source": "$custom-control-indicator-checked-box-shadow" }, + "focus": { + "value": "0 0 0 4px rgba(0, 0, 0, .1)", + "themeable": true, + "source": "$custom-control-indicator-focus-box-shadow" + } + } + }, + "border": { + "color": { + "base": { + "value": "{form.custom.control.indicator.checked.color.value}", + "themeable": true, + "source": "$custom-control-indicator-checked-border-color" + }, + "focus": { + "value": "{form.input.focus.color.border.value}", + "themeable": true, + "source": "$custom-control-indicator-focus-border-color" + } + } + } + }, + "active": { + "color": { + "base": { + "value": "{component.active.color.value}", + "themeable": true, + "source": "$custom-control-indicator-active-color" + }, + "border": { + "value": "{form.custom.control.indicator.active.bg.value}", + "themeable": true, + "source": "$custom-control-indicator-active-border-color" + } + }, + "bg": { + "value": "{component.active.bg.value}", + "themeable": true, + "source": "$custom-control-indicator-active-bg" + }, + "box": { + "shadow": { "value": "none", "themeable": true, "source": "$custom-control-indicator-active-box-shadow" } + } + } + }, + "label": { + "color": { + "base": { "value": "null", "themeable": true, "source": "$custom-control-label-color" }, + "disabled": { + "value": "{color.gray.500.value}", + "themeable": true, + "source": "$custom-control-label-disabled-color" + } + } + } + }, + "checkbox": { + "indicator": { + "border": { + "radius": { "value": "0", "themeable": true, "source": "$custom-checkbox-indicator-border-radius" } + }, + "indeterminate": { + "bg": { + "value": "{component.active.bg.value}", + "themeable": true, + "source": "$custom-checkbox-indicator-indeterminate-bg" + }, + "color": { + "value": "{form.custom.control.indicator.checked.color.value}", + "themeable": true, + "source": "$custom-checkbox-indicator-indeterminate-color" + }, + "box": { + "shadow": { + "value": "none", + "themeable": true, + "source": "$custom-checkbox-indicator-indeterminate-box-shadow" + } + }, + "border": { + "color": { + "value": "{form.custom.checkbox.indicator.indeterminate.bg.value}", + "themeable": true, + "source": "$custom-checkbox-indicator-indeterminate-border-color" + } + } + } + } + }, + "radio": { + "indicator": { + "border": { + "radius": { + "value": "50%", + "themeable": true, + "source": "$custom-radio-indicator-border-radius" + } + } + } + }, + "switch": { + "width": { + "value": "calc({form.custom.control.indicator.size.value} * 1.75)", + "themeable": true, + "source": "$custom-switch-width" + }, + "indicator": { + "border": { + "radius": { + "value": "calc({form.custom.control.indicator.size.value} / 2)", + "themeable": true, + "source": "$custom-switch-indicator-border-radius" + } + }, + "size": { + "value": "calc({form.custom.control.indicator.size.value} - {form.custom.control.indicator.border.width.value} * 4)", + "themeable": true, + "source": "$custom-switch-indicator-size" + } + } + }, + "select": { + "padding": { + "y": { + "base": { "value": "{form.input.padding.y.base.value}", "themeable": true, "source": "$custom-select-padding-y" }, + "sm": { "value": "{form.input.padding.y.sm.value}", "themeable": true, "source": "$custom-select-padding-y-sm" }, + "lg": { "value": "{form.input.padding.y.lg.value}", "themeable": true, "source": "$custom-select-padding-y-lg" } + }, + "x": { + "base": { + "value": "{form.input.padding.x.base.value}", + "themeable": true, + "source": "$custom-select-padding-x" + }, + "sm": { + "value": "{form.input.padding.x.sm.value}", + "themeable": true, + "source": "$custom-select-padding-x-sm" + }, + "lg": { + "value": "{form.input.padding.x.lg.value}", + "themeable": true, + "source": "$custom-select-padding-x-lg" + } + } + }, + "font": { + "family": { + "value": "{form.input.font.family.value}", + "themeable": true, + "source": "$custom-select-font-family" + }, + "size": { + "base": { + "value": "{form.input.font.size.base.value}", + "themeable": true, + "source": "$custom-select-font-size" + }, + "sm": { + "value": "{form.input.font.size.sm.value}", + "themeable": true, + "source": "$custom-select-font-size-sm" + }, + "lg": { + "value": "{form.input.font.size.lg.value}", + "themeable": true, + "source": "$custom-select-font-size-lg" + } + }, + "height": { + "base": { + "value": "{form.input.height.base.value}", + "themeable": true, + "source": "$custom-select-height" + }, + "lg": { + "value": "{form.input.height.lg.value}", + "themeable": true, + "source": "$custom-select-height-lg" + } + }, + "weight": { + "value": "{form.input.font.weight.value}", + "themeable": true, + "source": "$custom-select-font-weight" + } + }, + "line": { + "height": { + "value": "{form.input.line.height.base.value}", + "themeable": true, + "source": "$custom-select-line-height" + } + }, + "indicator": { + "padding": { "value": "1rem", "themeable": true, "source": "$custom-select-indicator-padding" }, + "color": { + "value": "{color.gray.700.value}", + "themeable": true, + "source": "$custom-select-indicator-color" + } + }, + "color": { + "base": { + "value": "{form.input.color.base.value}", + "themeable": true, + "source": "$custom-select-color" + }, + "disabled": { + "value": "{color.gray.500.value}", + "themeable": true, + "source": "$custom-select-disabled-color" + } + }, + "bg": { + "base": { + "value": "{form.input.bg.base.value}", + "themeable": true, + "source": "$custom-select-bg" + }, + "disabled": { + "value": "{color.gray.100.value}", + "themeable": true, + "source": "$custom-select-disabled-bg" + }, + "size": { "value": "24px 24px", "themeable": true, "source": "$custom-select-bg-size" } + }, + "feedback": { + "icon": { + "padding": { + "right": { + "value": "calc((1em + 2 * {form.custom.select.padding.y.base.value}) * 3 / 4 + {form.custom.select.padding.x.base.value} + {form.custom.select.indicator.padding.value})", + "themeable": true, + "source": "$custom-select-feedback-icon-padding-right" + } + }, + "position": { + "value": "center right calc({form.custom.select.padding.x.base.value} + {form.custom.select.indicator.padding.value})", + "themeable": true, + "source": "$custom-select-feedback-icon-position" + }, + "size": { + "value": "{form.input.height.inner.half.value} {form.input.height.inner.half.value}", + "themeable": true, + "source": "$custom-select-feedback-icon-size" + } + } + }, + "border": { + "width": { + "base": { + "value": "{form.input.border.width.value}", + "themeable": true, + "source": "$custom-select-border-width" + }, + "focus": { + "value": "{form.input.focus.width.value}", + "themeable": true, + "source": "$custom-select-focus-width" + } + }, + "color": { + "base": { + "value": "{form.input.border.color.value}", + "themeable": true, + "source": "$custom-select-border-color" + }, + "focus": { + "value": "{form.input.focus.color.border.value}", + "themeable": true, + "source": "$custom-select-focus-border-color" + } + }, + "radius": { + "value": "{border.radius.base.value}", + "themeable": true, + "source": "$custom-select-border-radius" + }, + "box": { + "shadow": { + "base": { + "value": "inset 0 1px 2px rgba(0, 0, 0, .075)", + "themeable": true, + "source": "$custom-select-box-shadow" + }, + "focus": { + "value": "{core.input.btn.focus.box.shadow.value}", + "themeable": true, + "source": "$custom-select-focus-box-shadow" + } + } + } + }, + "height": { + "sm": { + "value": "{form.input.height.sm.value}", + "themeable": true, + "source": "$custom-select-height-sm" + } + } + }, + "range": { + "track": { + "width": { "value": "100%", "themeable": true, "source": "$custom-range-track-width" }, + "height": { "value": ".5rem", "themeable": true, "source": "$custom-range-track-height" }, + "cursor": { "value": "pointer", "themeable": true, "source": "$custom-range-track-cursor" }, + "bg": { "value": "{color.gray.300.value}", "themeable": true, "source": "$custom-range-track-bg" }, + "border": { + "radius": { "value": "1rem", "themeable": true, "source": "$custom-range-track-border-radius" } + }, + "box": { + "shadow": { + "value": "inset 0 .25rem .25rem rgba(0, 0, 0, .1)", + "themeable": true, + "source": "$custom-range-track-box-shadow" + } + } + }, + "thumb": { + "width": { "value": "1rem", "themeable": true, "source": "$custom-range-thumb-width" }, + "height": { + "value": "{form.custom.range.thumb.width.value}", + "themeable": true, + "source": "$custom-range-thumb-height" + }, + "bg": { + "base": { + "value": "{component.active.bg.value}", + "themeable": true, + "source": "$custom-range-thumb-bg" + }, + "disabled": { + "value": "{color.gray.500.value}", + "themeable": true, + "source": "$custom-range-thumb-disabled-bg" + } + }, + "border": { + "base": { "value": "0", "themeable": true, "source": "$custom-range-thumb-border" }, + "radius": { "value": "1rem", "themeable": true, "source": "$custom-range-thumb-border-radius" } + }, + "box": { + "shadow": { + "base": { + "value": "0 .1rem .25rem rgba(0, 0, 0, .1)", + "themeable": true, + "source": "$custom-range-thumb-box-shadow" + }, + "focus": { + "base": { + "value": "0 0 0 1px {body.bg.value}, {form.input.box.shadow.focus.value}", + "themeable": true, + "source": "$custom-range-thumb-focus-box-shadow" + }, + "width": { + "value": "{form.input.focus.width.value}", + "themeable": true, + "source": "$custom-range-thumb-focus-box-shadow-width" + } + } + } + } + } + }, + "file": { + "height": { + "base": { + "value": "{form.input.height.base.value}", + "themeable": true, + "source": "$custom-file-height" + }, + "inner": { + "value": "{form.input.height.inner.base.value}", + "themeable": true, + "source": "$custom-file-height-inner" + } + }, + "border": { + "color": { + "base": { + "value": "{form.input.border.color.value}", + "themeable": true, + "source": "$custom-file-border-color" + }, + "focus": { + "value": "{form.input.focus.color.border.value}", + "themeable": true, + "source": "$custom-file-focus-border-color" + }, + "radius": { + "value": "{form.input.border.radius.base.value}", + "themeable": true, + "source": "$custom-file-border-radius" + } + }, + "width": { + "value": "{form.input.border.width.value}", + "themeable": true, + "source": "$custom-file-border-width" + } + }, + "box": { + "shadow": { + "base": { + "value": "{form.input.box.shadow.base.value}", + "themeable": true, + "source": "$custom-file-box-shadow" + }, + "focus": { + "value": "{form.input.box.shadow.focus.value}", + "themeable": true, + "source": "$custom-file-focus-box-shadow" + } + } + }, + "bg": { + "base": { + "value": "{form.input.bg.base.value}", + "themeable": true, + "source": "$custom-file-bg" + }, + "disabled": { + "value": "{form.input.bg.disabled.value}", + "themeable": true, + "source": "$custom-file-disabled-bg" + } + }, + "padding": { + "y": { + "value": "{form.input.padding.y.base.value}", + "themeable": true, + "source": "$custom-file-padding-y" + }, + "x": { + "value": "{form.input.padding.x.base.value}", + "themeable": true, + "source": "$custom-file-padding-x" + } + }, + "line": { + "height": { + "value": "{form.input.line.height.base.value}", + "themeable": true, + "source": "$custom-file-line-height" + } + }, + "font": { + "family": { + "value": "{form.input.font.family.value}", + "themeable": true, + "source": "$custom-file-font-family" + }, + "weight": { + "value": "{form.input.font.weight.value}", + "themeable": true, + "source": "$custom-file-font-weight" + } + }, + "color": { + "value": "{form.input.color.base.value}", + "themeable": true, + "source": "$custom-file-color" + }, + "button": { + "color": { + "value": "{form.custom.file.color.value}", + "themeable": true, + "source": "$custom-file-button-color" + }, + "bg": { + "value": "{form.input.group.addon.bg.value}", + "themeable": true, + "source": "$custom-file-button-bg" + } + } + } + }, + "feedback": { + "margin": { + "top": { + "value": "{form.text.margin.top.value}", + "themeable": true, + "source": "$form-feedback-margin-top" + } + }, + "font": { + "size": { + "value": "{font.size.small.base.value}", + "themeable": true, + "source": "$form-feedback-font-size" + } + }, + "color": { + "valid": { + "value": "{color.success.500.value}", + "themeable": true, + "source": "$form-feedback-valid-color" + }, + "invalid": { + "value": "{color.danger.500.value}", + "themeable": true, + "source": "$form-feedback-invalid-color" + } + }, + "icon": { + "color": { + "valid": { + "value": "{form.feedback.color.valid.value}", + "themeable": true, + "source": "$form-feedback-icon-valid-color" + }, + "invalid": { + "value": "{form.feedback.color.invalid.value}", + "themeable": true, + "source": "$form-feedback-icon-invalid" + } + } + }, + "tooltip": { + "padding": { + "y": { "value": ".25rem", "themeable": true, "source": "$form-feedback-tooltip-padding-y" }, + "x": { "value": ".5rem", "themeable": true, "source": "$form-feedback-tooltip-padding-x" } + }, + "font": { + "size": { "value": "{font.size.sm.value}", "themeable": true, "source": "$form-feedback-tooltip-font-size" } + }, + "line": { + "height": { + "value": "{line-height.base.value}", + "themeable": true, + "source": "$form-feedback-tooltip-line-height" + } + }, + "opacity": { "value": ".9", "themeable": true, "source": "$form-feedback-tooltip-opacity" }, + "border": { + "radius": { + "value": "{border.radius.base.value}", + "themeable": true, + "source": "$form-feedback-tooltip-border-radius" + } + } + } + }, + "control": { + "icon": { + "width": { "value": "32px", "themeable": true, "source": "$form-control-icon-width" } + } + }, + "select": { + "icon": { + "padding": { "value": ".5625rem", "themeable": true, "source": "$select-icon-padding" } + } + } + } +} diff --git a/tokens/source/components/icon-button/icon-button.tokens.json b/tokens/source/components/icon-button/icon-button.tokens.json new file mode 100644 index 0000000000..771e506d8b --- /dev/null +++ b/tokens/source/components/icon-button/icon-button.tokens.json @@ -0,0 +1,17 @@ +{ + "icon-button": { + "diameter": { + "md": { "value": "2.75rem", "themeable": true, "source": "$btn-icon-diameter-md" }, + "sm": { "value": "2.25rem", "themeable": true, "source": "$btn-icon-diameter-sm" }, + "inline": { + "value": "calc({line-height.base.value} + .1em)", + "themeable": true, + "source": "$btn-icon-diameter-inline" + } + }, + "bg": { "value": "transparent", "themeable": true, "source": "$btn-icon-bg" }, + "accent": { + "color": { "value": "{color.white.value}", "themeable": true, "source": "$btn-icon-accent-color" } + } + } +} diff --git a/tokens/source/components/icon/icon.tokens.json b/tokens/source/components/icon/icon.tokens.json new file mode 100644 index 0000000000..9ddbc88dd1 --- /dev/null +++ b/tokens/source/components/icon/icon.tokens.json @@ -0,0 +1,8 @@ +{ + "icon": { + "inline": { "value": ".8em", "themeable": true, "source": "$icon-inline" }, + "sm": { "value": "1.25rem", "themeable": true, "source": "$icon-sm" }, + "md": { "value": "1.5rem", "themeable": true, "source": "$icon-md" }, + "lg": { "value": "1.75rem", "themeable": true, "source": "$icon-lg" } + } +} diff --git a/tokens/source/components/image/image.tokens.json b/tokens/source/components/image/image.tokens.json new file mode 100644 index 0000000000..c5913778a1 --- /dev/null +++ b/tokens/source/components/image/image.tokens.json @@ -0,0 +1,24 @@ +{ + "image": { + "thumbnail": { + "padding": { "value": ".25rem", "themeable": true, "source": "$thumbnail-padding" }, + "bg": { "value": "{body.bg.value}", "themeable": true, "source": "$thumbnail-bg" }, + "border": { + "width": { "value": "{border.width.value}", "themeable": true, "source": "$thumbnail-border-width" }, + "color": { "value": "{color.gray.200.value}", "themeable": true, "source": "$thumbnail-border-color" }, + "radius": { "value": "{border.radius.base.value}", "themeable": true, "source": "$thumbnail-border-radius"} + }, + "box": { + "shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)", "themeable": true, "source": "$thumbnail-box-shadow" } + } + }, + "figure": { + "caption": { + "font": { + "size": { "value": "90%", "themeable": true, "source": "$figure-caption-font-size" } + }, + "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$figure-caption-color" } + } + } + } +} diff --git a/tokens/source/components/menu/menu.tokens.json b/tokens/source/components/menu/menu.tokens.json new file mode 100644 index 0000000000..bf3de60853 --- /dev/null +++ b/tokens/source/components/menu/menu.tokens.json @@ -0,0 +1,13 @@ +{ + "menu": { + "background": { + "base": { "value": "{btn.tertiary.bg.base.value}", "themeable": true, "source": "$background" }, + "active": { "value": "{btn.tertiary.bg.active.value}", "themeable": true, "source": "$active-background" } + }, + "border": { + "base": { "value": "transparent", "themeable": true, "source": "$border" }, + "active": { "value": "transparent", "themeable": true, "source": "$active-border" }, + "hover": { "value": "transparent", "themeable": true, "source": "$hover-border" } + } + } +} diff --git a/tokens/source/components/modal/modal.tokens.json b/tokens/source/components/modal/modal.tokens.json new file mode 100644 index 0000000000..db1c394753 --- /dev/null +++ b/tokens/source/components/modal/modal.tokens.json @@ -0,0 +1,94 @@ +{ + "modal": { + "inner": { + "padding": { "value": "1.5rem", "themeable": true, "source": "$modal-inner-padding" } + }, + "footer": { + "margin": { + "between": { "value": ".5rem", "themeable": true, "source": "$modal-footer-margin-between" } + }, + "border": { + "color": { + "value": "{modal.header.border.color.value}", "themeable": true, "source": "$modal-footer-border-color" + }, + "width": { + "value": "{modal.header.border.width.value}", "themeable": true, "source": "$modal-footer-border-width" + } + }, + "padding": { + "base": { + "value": "{modal.footer.padding.y.value} {modal.footer.padding.x.value}", + "themeable": true, + "source": "$modal-footer-padding" + }, + "x": { "value": "1rem", "themeable": true, "source": "$modal-footer-padding-x" }, + "y": { "value": "1.5rem", "themeable": true, "source": "$modal-footer-padding-y" } + } + }, + "dialog": { + "margin": { + "base": { "value": "1.5rem", "themeable": true, "source": "$modal-dialog-margin" }, + "y": { + "sm": { + "up": { "value": "1.75rem", "themeable": true, "source": "$modal-dialog-margin-y-sm-up" } + } + } + } + }, + "title": { + "line": { + "height": { "value": "{line-height.base.value}", "themeable": true, "source": "$modal-title-line-height" } + } + }, + "content": { + "color": { "value": "null", "themeable": true, "source": "$modal-content-color" }, + "bg": { "value": "{color.white.value}", "themeable": true, "source": "$modal-content-bg" }, + "border": { + "color": { "value": "rgba(0, 0, 0, .2)", "themeable": true, "source": "$modal-content-border-color" }, + "width": { "value": "0", "themeable": true, "source": "$modal-content-border-width" }, + "radius": { "value": "{border.radius.lg.value}", "themeable": true, "source": "$modal-content-border-radius" } + }, + "box": { + "shadow": { + "xs": { "value": "0 .25rem .5rem rgba(0, 0, 0, .5)", "themeable": true, "source": "$modal-content-box-shadow-xs" }, + "sm": { + "up": { + "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$modal-content-box-shadow-sm-up" + } + } + } + } + }, + "backdrop": { + "bg": { "value": "{color.black.value}", "themeable": true, "source": "$modal-backdrop-bg" }, + "opacity": { "value": ".5", "themeable": true, "source": "$modal-backdrop-opacity" } + }, + "header": { + "border": { + "color": { "value": "{border.color.value}", "themeable": true, "source": "$modal-header-border-color" }, + "width": { "value": "{modal.content.border.width.value}", "themeable": true, "source": "$modal-header-border-width" } + }, + "padding": { + "base": { + "value": "{modal.header.padding.y.value} {modal.header.padding.x.value}", + "themeable": true, + "source": "$modal-header-padding" + }, + "y": { "value": "1rem", "themeable": true, "source": "$modal-header-padding-y" }, + "x": { "value": "1.5rem", "themeable": true, "source": "$modal-header-padding-x" } + } + }, + "xl": { "value": "1140px", "themeable": true, "source": "$modal-xl" }, + "lg": { "value": "800px", "themeable": true, "source": "$modal-lg" }, + "md": { "value": "500px", "themeable": true, "source": "$modal-md" }, + "sm": { "value": "500px", "themeable": true, "source": "$modal-sm" }, + "transform": { + "base": { "value": "transform .3s ease-out", "themeable": true, "source": "$modal-transition" }, + "fade": { "value": "translate(0, -50px)", "themeable": true, "source": "$modal-fade-transform" }, + "show": { "value": "none", "themeable": true, "source": "$modal-show-transform" }, + "scale": { "value": "scale(1.02)", "themeable": true, "source": "$modal-scale-transform" } + } + } +} diff --git a/tokens/source/components/nav/nav.tokens.json b/tokens/source/components/nav/nav.tokens.json new file mode 100644 index 0000000000..27ea7c1d99 --- /dev/null +++ b/tokens/source/components/nav/nav.tokens.json @@ -0,0 +1,70 @@ +{ + "nav": { + "link": { + "padding": { + "y": { "value": ".5rem", "themeable": true, "source": "$nav-link-padding-y" }, + "x": { "value": "1rem", "themeable": true, "source": "$nav-link-padding-x" } + }, + "color": { + "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$nav-link-color" }, + "disabled": { "value": "{color.gray.300.value}", "themeable": true, "source": "$nav-link-disabled-color" } + }, + "font": { + "weight": { "value": "500", "themeable": true, "source": "$nav-link-font-weight" } + } + }, + "tabs": { + "border": { + "color": { "value": "{color.light.400.value}", "themeable": true, "source": "$nav-tabs-border-color" }, + "width": { "value": "2px", "themeable": true, "source": "$nav-tabs-border-width" }, + "radius": { "value": "0", "themeable": true, "source": "$nav-tabs-border-radius" } + }, + "link": { + "hover": { + "border": { + "color": { + "value": "transparent transparent {nav.tabs.border.color.value}", + "themeable": true, + "source": "$nav-tabs-link-hover-border-color" + } + }, + "bg": { "value": "{color.light.400.value}", "themeable": true, "source": "$nav-tabs-link-hover-bg" } + }, + "active": { + "color": { + "base": { "value": "{color.primary.500.value}", "themeable": true, "source": "$nav-tabs-link-active-color" }, + "border": { + "value": "transparent transparent {color.primary.500.value}", + "themeable": true, + "source": "$nav-tabs-link-active-border-color" + } + }, + "bg": { "value": "{body.bg.value}", "themeable": true, "source": "$nav-tabs-link-active-bg" } + } + } + }, + "pills": { + "border": { + "radius": { "value": "{border.radius.base.value}", "themeable": true, "source": "$nav-pills-border-radius" } + }, + "link": { + "link": { + "active": { + "color": { + "value": "{component.active.color.value}", + "themeable": true, + "source": "$nav-pills-link-active-color" + }, + "bg": { "value": "{component.active.bg.value}", "themeable": true, "source": "$nav-pills-link-active-bg" } + } + } + } + }, + "divider": { + "color": { "value": "{color.gray.100.value}", "themeable": true, "source": "$nav-divider-color" }, + "margin": { + "y": { "value": "calc({core.spacer.value} / 2)", "themeable": true, "source": "$nav-divider-margin-y" } + } + } + } +} diff --git a/tokens/source/components/navbar/navbar.tokens.json b/tokens/source/components/navbar/navbar.tokens.json new file mode 100644 index 0000000000..2545babb63 --- /dev/null +++ b/tokens/source/components/navbar/navbar.tokens.json @@ -0,0 +1,116 @@ +{ + "navbar": { + "padding": { + "y": { "value": "calc({core.spacer.value} / 2)", "themeable": true, "source": "$navbar-padding-y" }, + "x": { + "base": { "value": "{core.spacer.value}", "themeable": true, "source": "$navbar-padding-x" }, + "nav": { + "link": { "value": ".5rem", "themeable": true, "source": "$navbar-nav-link-padding-x" } + } + } + }, + "nav": { + "link": { + "height": { + "value": "calc({font.size.base.value} * {line-height.base.value} + .5rem * 2)", + "themeable": true, + "source": "$nav-link-height" + } + }, + "scroll": { + "max": { + "height": { "value": "75vh", "themeable": true, "source": "$navbar-nav-scroll-max-height" } + } + } + }, + "brand": { + "font": { + "size": { + "value": "{font.size.lg.value}", "themeable": true, "source": "$navbar-brand-font-size" + } + }, + "height": { + "value": "calc({navbar.brand.font.size.value} * {line-height.base.value})", + "themeable": true, + "source": "$navbar-brand-height" + }, + "padding": { + "y": { + "value": "calc(({navbar.nav.link.height.value} - {navbar.brand.height.value}) / 2)", + "themeable": true, + "source": "$navbar-brand-padding-y" + } + } + }, + "toggler": { + "padding": { + "y": { "value": ".25rem", "themeable": true, "source": "$navbar-toggler-padding-y" }, + "x": { "value": ".75rem", "themeable": true, "source": "$navbar-toggler-padding-x" } + }, + "font": { + "size": { "value": "{font.size.lg.value}", "themeable": true, "source": "$navbar-toggler-font-size" } + }, + "border": { + "radius": { + "value": "{btn.border.radius.base.value}", "themeable": true, "source": "$navbar-toggler-border-radius" + } + } + }, + "dark": { + "color": { + "base": { + "value": "rgba(255, 255, 255, .5)", "themeable": true, "source": "$navbar-dark-color" + }, + "hover": { + "value": "rgba({color.white.value}, .75)", "themeable": true, "source": "$navbar-dark-hover-color" + }, + "active": { + "value": "{color.white.value}", "themeable": true, "source": "$navbar-dark-active-color" + }, + "disabled": { + "value": "rgba({color.white.value}, .25)", "themeable": true, "source": "$navbar-dark-disabled-color" + } + }, + "toggler": { + "border": { + "color": { + "value": "rgba({color.white.value}, .1)", "themeable": true, "source": "$navbar-dark-toggler-border-color" + } + } + }, + "brand": { + "color": { + "base": { + "value": "{navbar.dark.color.active.value}", "themeable": true, "source": "$navbar-dark-brand-color" + }, + "hover": { + "value": "{navbar.dark.color.active.value}", "themeable": true, "source": "$navbar-dark-brand-hover-color" + } + } + } + }, + "light": { + "color": { + "base": { "value": "rgba(0, 0, 0, .5)", "themeable": true, "source": "$navbar-light-color" }, + "hover": { "value": "rgba(0, 0, 0, .7)", "themeable": true, "source": "$navbar-light-hover-color" }, + "active": { "value": "rgba(0, 0, 0, .9)", "themeable": true, "source": "$navbar-light-active-color" }, + "disabled": { "value": "rgba(0, 0, 0, .3)", "themeable": true, "source": "$navbar-light-disabled-color" } + }, + "toggler": { + "border": { + "color": { "value": "rgba(0, 0, 0, .1)", "themeable": true, "source": "$navbar-light-toggler-border-color" } + } + }, + "brand": { + "color": { + "base": { "value": "{navbar.light.color.active.value}", "themeable": true, "source": "$navbar-light-brand-color" }, + "hover": { + "value": "{navbar.light.color.active.value}", + "themeable": true, + "source": "$navbar-light-brand-hover-color" + } + } + } + } + } +} diff --git a/tokens/source/components/pagination/pagination.tokens.json b/tokens/source/components/pagination/pagination.tokens.json new file mode 100644 index 0000000000..5d8ea92e94 --- /dev/null +++ b/tokens/source/components/pagination/pagination.tokens.json @@ -0,0 +1,102 @@ +{ + "pagination": { + "padding": { + "y": { + "base": { "value": ".625rem", "themeable": true, "source": "$pagination-padding-y" }, + "sm": { "value": ".8rem", "themeable": true, "source": "$pagination-padding-y-sm" }, + "lg": { "value": ".75rem", "themeable": true, "source": "$pagination-padding-y-lg" } + }, + "x": { + "base": { "value": "1rem", "themeable": true, "source": "$pagination-padding-x" }, + "sm": { "value": ".6rem", "themeable": true, "source": "$pagination-padding-x-sm" }, + "lg": { "value": "1.5rem", "themeable": true, "source": "$pagination-padding-x-lg" } + }, + "icon": { "value": ".5rem", "themeable": true, "source": "$pagination-padding-icon" } + }, + "margin": { + "x": { "value": ".5rem", "themeable": true, "source": "$pagination-margin-x" }, + "y": { "value": ".5rem", "themeable": true, "source": "$pagination-margin-y" } + }, + "line": { + "height": { + "value": "1.5rem", "themeable": true, "source": "$pagination-line-height" + } + }, + "font": { + "size": { + "sm": { "value": ".875rem", "themeable": true, "source": "$pagination-font-size-sm" } + } + }, + "icon": { + "size": { + "base": { "value": "1.375rem", "themeable": true, "source": "$pagination-icon-size" }, + "sm": { "value": "1rem", "themeable": true, "source": "$pagination-icon-size-sm" } + }, + "width": { "value": "2.25rem", "themeable": true, "source": "$pagination-icon-width" }, + "height": { "value": "2.25rem", "themeable": true, "source": "$pagination-icon-height" } + }, + "toggle": { + "border": { + "base": { "value": ".3125rem", "themeable": true, "source": "$pagination-toggle-border" }, + "sm": { "value": ".25rem", "themeable": true, "source": "$pagination-toggle-border-sm" } + } + }, + "secondary": { + "height": { + "base": { "value": "2.75rem", "themeable": true, "source": "$pagination-secondary-height" }, + "sm": { "value": "2.75rem", "themeable": true, "source": "$pagination-secondary-height-sm" } + } + }, + "color": { + "base": { "value": "{link.color.value}", "themeable": true, "source": "$pagination-color" }, + "inverse": { "value": "{color.white.value}", "themeable": true, "source": "$pagination-color-inverse" }, + "hover": { "value": "{link.hover.color.value}", "themeable": true, "source": "$pagination-hover-color" }, + "active": { "value": "{component.active.color.value}", "themeable": true, "source": "$pagination-active-color" }, + "disabled": { "value": "{color.gray.500.value}", "themeable": true, "source": "$pagination-disabled-color" } + }, + "bg": { + "base": { "value": "{color.white.value}", "themeable": true, "source": "$pagination-bg" }, + "hover": { "value": "{color.gray.100.value}", "themeable": true, "source": "$pagination-hover-bg" }, + "active": { "value": "{component.active.bg.value}", "themeable": true, "source": "$pagination-active-bg" }, + "disabled": { "value": "{color.white.value}", "themeable": true, "source": "$pagination-disabled-bg" } + }, + "border": { + "width": { "value": "{border.width.value}", "themeable": true, "source": "$pagination-border-width" }, + "color": { + "base": { "value": "{color.gray.200.value}", "themeable": true, "source": "$pagination-border-color" }, + "hover": { "value": "{color.gray.200.value}", "themeable": true, "source": "$pagination-hover-border-color" }, + "active": { "value": "{pagination.bg.active.value}", "themeable": true, "source": "$pagination-active-border-color" }, + "disabled": { "value": "{color.gray.100.value}", "themeable": true, "source": "$pagination-disabled-border-color" } + }, + "radius": { + "sm": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$pagination-border-radius-sm" }, + "lg": { "value": "{border.radius.lg.value}", "themeable": true, "source": "$pagination-border-radius-lg" } + } + }, + "focus": { + "box": { + "shadow": { + "value": "{core.input.btn.focus.box.shadow.value}", "themeable": true, "source": "$pagination-focus-box-shadow" + }, + "outline": { "value": "0", "themeable": true, "source": "$pagination-focus-outline" } + }, + "border": { + "width": { "value": ".125rem", "themeable": true, "source": "$pagination-focus-border-width" } + }, + "color": { + "base": { "value": "{color.primary.500.value}", "themeable": true, "source": "$pagination-focus-color" }, + "text": { "value": "{color.black.value}", "themeable": true, "source": "$pagination-focus-color-text" } + } + } + }, + "reduced": { + "dropdown": { + "height": { + "max": { "value": "60vh", "themeable": true, "source": "$pagination-reduced-dropdown-max-height" } + }, + "width": { + "min": { "value": "6rem", "themeable": true, "source": "$pagination-reduced-dropdown-min-width" } + } + } + } +} diff --git a/tokens/source/components/popover/popover.tokens.json b/tokens/source/components/popover/popover.tokens.json new file mode 100644 index 0000000000..bbfb5568e6 --- /dev/null +++ b/tokens/source/components/popover/popover.tokens.json @@ -0,0 +1,68 @@ +{ + "popover": { + "font": { + "size": { "value": "{font.size.sm.value}", "themeable": true, "source": "$popover-font-size" } + }, + "bg": { "value": "{color.white.value}", "themeable": true, "source": "$popover-bg" }, + "max": { + "width": { "value": "480px", "themeable": true, "source": "$popover-max-width" } + }, + "border": { + "color": { "value": "rgba(0, 0, 0, .2)", "themeable": true, "source": "$popover-border-color" }, + "radius": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$popover-border-radius" }, + "border": { "value": "{border.width.value}", "themeable": true, "source": "$popover-border-width" } + }, + "box": { + "shadow": { + "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", + "themeable": true, + "source": "$popover-box-shadow" + } + }, + "header": { + "bg": { "value": "{color.white.value}", "themeable": true, "source": "$popover-header-bg" }, + "color": { "value": "{headings.color.value}", "themeable": true, "source": "$popover-header-color" }, + "padding": { + "y": { "value": ".5rem", "themeable": true, "source": "$popover-header-padding-y" }, + "x": { "value": "1rem", "themeable": true, "source": "$popover-header-padding-x" } + } + }, + "body": { + "color": { "value": "{body.color.value}", "themeable": true, "source": "$popover-body-color" }, + "padding": { + "y": { "value": "{popover.header.padding.y.value}", "themeable": true, "source": "$popover-body-padding-y" }, + "x": { "value": "{popover.header.padding.x.value}", "themeable": true, "source": "$popover-body-padding-x" } + } + }, + "icon": { + "margin": { + "right": { "value": ".5rem", "themeable": true, "source": "$popover-icon-margin-right" } + }, + "height": { "value": "1rem", "themeable": true, "source": "$popover-icon-height" }, + "width": { "value": "1rem", "themeable": true, "source": "$popover-icon-width" } + }, + "arrow": { + "width": { "value": "1rem", "themeable": true, "source": "$popover-arrow-width" }, + "height": { "value": ".5rem", "themeable": true, "source": "$popover-arrow-height" }, + "color": { "value": "{popover.bg.value}", "themeable": true, "source": "$popover-arrow-color" } + }, + "success": { + "bg": { "value": "{color.success.100.value}", "themeable": true, "source": "$popover-success-bg" }, + "icon": { + "color": { "value": "{color.success.500.value}", "themeable": true, "source": "$popover-success-icon-color" } + } + }, + "warning": { + "bg": { "value": "{color.warning.100.value}", "themeable": true, "source": "$popover-warning-bg" }, + "icon": { + "color": { "value": "{color.warning.500.value}", "themeable": true, "source": "$popover-warning-icon-color" } + } + }, + "danger": { + "bg": { "value": "{color.danger.100.value}", "themeable": true, "source": "$popover-danger-bg" }, + "icon": { + "color": { "value": "{color.warning.500.value}", "themeable": true, "source": "$popover-danger-icon-color" } + } + } + } +} diff --git a/tokens/source/components/product-tour/product-tour.tokens.json b/tokens/source/components/product-tour/product-tour.tokens.json new file mode 100644 index 0000000000..0fd875b4f7 --- /dev/null +++ b/tokens/source/components/product-tour/product-tour.tokens.json @@ -0,0 +1,37 @@ +{ + "product-tour": { + "checkpoint": { + "color": { + "background": { "value": "{color.light.300.value}", "themeable": true, "source": "$checkpoint-background-color" }, + "body": { "value": "{color.gray.700.value}", "themeable": true, "source": "$checkpoint-body-color" }, + "border": { "value": "{color.brand.500.value}", "themeable": true, "source": "$checkpoint-border-color" }, + "breadcrumb": { "value": "{color.primary.500.value}", "themeable": true, "source": "$checkpoint-breadcrumb-color" } + }, + "width": { + "border": { "value": "8px", "themeable": true, "source": "$checkpoint-border-width" }, + "arrow": { "value": "15px", "themeable": true, "source": "$checkpoint-arrow-width" }, + "max": { "value": "480px", "themeable": true, "source": "$checkpoint-max-width" } + }, + "arrow": { + "color": { + "top": { + "value": "solid {product-tour.checkpoint.width.arrow.value} {product-tour.checkpoint.width.border.value}", + "themeable": true, + "source": "$checkpoint-arrow-top-color" + }, + "default": { + "value": "solid {product-tour.checkpoint.width.arrow.value} {product-tour.checkpoint.color.background.value}", + "themeable": true, + "source": "$checkpoint-arrow-default-color" + } + }, + "transparent": { + "value": "solid {product-tour.checkpoint.width.arrow.value} transparent", + "themeable": true, + "source": "$checkpoint-arrow-transparent" + } + }, + "zindex": { "value": "1060", "themeable": true, "source": "$checkpoint-z-index" } + } + } +} diff --git a/tokens/source/components/progress-bar/progress-bar.tokens.json b/tokens/source/components/progress-bar/progress-bar.tokens.json new file mode 100644 index 0000000000..ba24a80f69 --- /dev/null +++ b/tokens/source/components/progress-bar/progress-bar.tokens.json @@ -0,0 +1,41 @@ +{ + "progress-bar": { + "height": { + "base": { "value": "1rem", "themeable": true, "source": "$progress-height" }, + "annotated": { "value": ".3125rem", "themeable": true, "source": "$annotated-progress-height" } + }, + "font": { + "size": { + "value": "calc({font.size.base.value} * .75)", "themeable": true, "source": "$progress-font-size" + } + }, + "bg": { "value": "transparent", "themeable": true, "source": "$progress-bg" }, + "border": { + "radius": { "value": "0", "themeable": true, "source": "$progress-border-radius" }, + "width": { "value": "1px", "themeable": true, "source": "$progress-bar-border-width" }, + "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$progress-bar-border-color" } + }, + "box": { + "shadow": { "value": "none", "themeable": true, "source": "$progress-box-shadow" } + }, + "bar": { + "color": { "value": "{color.white.value}", "themeable": true, "source": "$progress-bar-color" }, + "bg": { + "base": { "value": "{color.accent.a.value}", "themeable": true, "source": "$progress-bar-bg" }, + "annotated": { "value": "{color.dark.500.value}", "themeable": true, "source": "$annotated-progress-bar-bg" } + }, + "animation": { + "timing": { "value": "1s linear infinite", "themeable": true, "source": "$progress-bar-animation-timing" } + }, + "transition": { "value": "width .6s ease", "themeable": true, "source": "$progress-bar-transition" } + }, + "threshold": { + "circle": { "value": ".5625rem", "themeable": true, "source": "$progress-threshold-circle" } + }, + "hint": { + "annotation": { + "gap": { "value": ".5rem", "themeable": true, "source": "$progress-hint-annotation-gap" } + } + } + } +} diff --git a/tokens/source/components/search-field/search-field.tokens.json b/tokens/source/components/search-field/search-field.tokens.json new file mode 100644 index 0000000000..d32f86485c --- /dev/null +++ b/tokens/source/components/search-field/search-field.tokens.json @@ -0,0 +1,35 @@ +{ + "search-field": { + "border": { + "radius": { "value": "0", "themeable": true, "source": "$search-border-radius" }, + "color": { + "base": { "value": "{color.gray.500.value}", "themeable": true, "source": "$search-border-color" }, + "interaction": { "value": "{color.black.value}", "themeable": true, "source": "$search-border-color-interaction" }, + "focus": { "value": "{color.black.value}", "themeable": true, "source": "$search-border-focus-color" } + }, + "width": { + "base": { "value": ".0625rem", "themeable": true, "source": "$search-border-width" }, + "interaction": { "value": ".125rem", "themeable": true, "source": "$search-border-width-interaction" }, + "focus": { "value": ".3125rem", "themeable": true, "source": "$search-border-focus-width" } + } + }, + "line": { + "height": { "value": "1.5rem", "themeable": true, "source": "$search-line-height" } + }, + "disabled": { + "opacity": { "value": ".3", "themeable": true, "source": "$search-disabled-opacity" } + }, + "button": { + "margin": { "value": ".5rem", "themeable": true, "source": "$search-button-margin" } + }, + "input": { + "height": { + "search": { + "value": "calc({form.input.line.height.base.value} * 1em + {form.input.padding.y.base.value} * 2)", + "themeable": true, + "source": "$input-height-search" + } + } + } + } +} diff --git a/tokens/source/components/selectable-box/selectable-box.tokens.json b/tokens/source/components/selectable-box/selectable-box.tokens.json new file mode 100644 index 0000000000..5d5c320878 --- /dev/null +++ b/tokens/source/components/selectable-box/selectable-box.tokens.json @@ -0,0 +1,17 @@ +{ + "selectable-box": { + "padding": { "value": "1rem", "themeable": true, "source": "$selectable-box-padding" }, + "border": { + "radius": { "value": ".25rem", "themeable": true, "source": "$selectable-box-border-radius" } + }, + "box": { + "space": { "value": ".75rem", "themeable": true, "source": "$selectable-box-space" } + }, + "cols": { + "number": { + "min": { "value": "1", "themeable": true, "source": "$min-cols-number" }, + "max": { "value": "12", "themeable": true, "source": "$max-cols-number" } + } + } + } +} diff --git a/tokens/source/components/spinner/spiner.tokens.json b/tokens/source/components/spinner/spinner.tokens.json similarity index 100% rename from tokens/source/components/spinner/spiner.tokens.json rename to tokens/source/components/spinner/spinner.tokens.json diff --git a/tokens/source/components/stack/stack.tokens.json b/tokens/source/components/stack/stack.tokens.json new file mode 100644 index 0000000000..1fee307558 --- /dev/null +++ b/tokens/source/components/stack/stack.tokens.json @@ -0,0 +1,5 @@ +{ + "stack": { + "gap": { "value": "0", "themeable": true, "source": "$stack-gap" } + } +} diff --git a/tokens/source/components/sticky/sticky.tokens.json b/tokens/source/components/sticky/sticky.tokens.json new file mode 100644 index 0000000000..79fb90f3c2 --- /dev/null +++ b/tokens/source/components/sticky/sticky.tokens.json @@ -0,0 +1,17 @@ +{ + "sticky": { + "offset": { "value": "0", "themeable": true, "source": "$sticky-offset" }, + "shadow": { + "top": { + "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$sticky-shadow-top" + }, + "bottom": { + "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$sticky-shadow-bottom" + } + } + } +} diff --git a/tokens/source/components/table/table.tokens.json b/tokens/source/components/table/table.tokens.json new file mode 100644 index 0000000000..77c06a37aa --- /dev/null +++ b/tokens/source/components/table/table.tokens.json @@ -0,0 +1,48 @@ +{ + "table": { + "cell": { + "padding": { + "base": { "value": ".75rem", "themeable": true, "source": "$table-cell-padding" }, + "sm": { "value": ".3rem", "themeable": true, "source": "$table-cell-padding-sm" } + } + }, + "color": { + "base": { "value": "{body.color.value}", "themeable": true, "source": "$table-color" }, + "hover": { "value": "{table.color.base.value}", "themeable": true, "source": "$table-hover-color" }, + "head": { "value": "{color.gray.700.value}", "themeable": true, "source": "$table-head-color" } + }, + "bg": { + "base": { "value": "null", "themeable": true, "source": "$table-bg" }, + "accent": { "value": "rgba(0, 0, 0, .05)", "themeable": true, "source": "$table-accent-bg" }, + "hover": { "value": "rgba(0, 0, 0, .075)", "themeable": true, "source": "$table-hover-bg" }, + "active": { "value": "{table.bg.hover.value}", "themeable": true, "source": "$table-active-bg" }, + "head": { "value": "{color.gray.100.value}", "themeable": true, "source": "$table-head-bg" } + }, + "border": { + "width": { "value": "{border.width.value}", "themeable": true, "source": "$table-border-width" }, + "color": { "value": "{border.color.value}", "themeable": true, "source": "$table-border-color" } + }, + "dark": { + "color": { + "base": { "value": "{color.white.value}", "themeable": true, "source": "$table-dark-color" }, + "hover": { "value": "{table.dark.color.base.value}", "themeable": true, "source": "$table-dark-hover-color" }, + "border": { "value": "{table.dark.bg.base.value}", "themeable": true, "source": "$table-dark-border-color" } + }, + "bg": { + "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$table-dark-bg" }, + "accent": { "value": "rgba(255, 255, 255, .05)", "themeable": true, "source": "$table-dark-accent-bg" }, + "hover": { "value": "rgba(255, 255, 255, .075)", "themeable": true, "source": "$table-dark-hover-bg" } + } + }, + "striped": { + "order": { "value": "odd", "themeable": true, "source": "$table-striped-order" } + }, + "caption": { + "color": { "value": "{text.muted.value}", "themeable": true, "source": "$table-caption-color" } + }, + "level": { + "bg": { "value": "-9", "themeable": true, "source": "$table-bg-level" }, + "border": { "value": "-6", "themeable": true, "source": "$table-border-level" } + } + } +} diff --git a/tokens/source/components/tabs/tabs.tokens.json b/tokens/source/components/tabs/tabs.tokens.json new file mode 100644 index 0000000000..c62b56ce9f --- /dev/null +++ b/tokens/source/components/tabs/tabs.tokens.json @@ -0,0 +1,13 @@ +{ + "tabs": { + "notification": { + "height": { "value": "1rem", "themeable": true, "source": "$tab-notification-height" }, + "width": { "value": "1rem", "themeable": true, "source": "$tab-notification-width" }, + "font": { + "size": { + "value": "{font.size.xs.value}", "themeable": true, "source": "$tab-notification-font-size" + } + } + } + } +} diff --git a/tokens/source/components/toast/toast.tokens.json b/tokens/source/components/toast/toast.tokens.json new file mode 100644 index 0000000000..30a59c92f1 --- /dev/null +++ b/tokens/source/components/toast/toast.tokens.json @@ -0,0 +1,43 @@ +{ + "toast": { + "max": { + "width": { "value": "400px", "themeable": true, "source": "$toast-max-width" } + }, + "padding": { + "x": { "value": ".75rem", "themeable": true, "source": "$toast-padding-x" }, + "y": { "value": ".25rem", "themeable": true, "source": "$toast-padding-y" } + }, + "font": { + "size": { "value": ".875rem", "themeable": true, "source": "$toast-font-size" } + }, + "color": { + "base": { "value": "null", "themeable": true, "source": "$toast-color" }, + "background": { "value": "{color.gray.700.value}", "themeable": true, "source": "$toast-background-color" } + }, + "border": { + "width": { "value": "1px", "themeable": true, "source": "$toast-border-width" }, + "color": { "value": "rgba(0, 0, 0, .1)", "themeable": true, "source": "$toast-border-color" }, + "radius": { "value": ".25rem", "themeable": true, "source": "$toast-border-radius" } + }, + "box": { + "shadow": { + "value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$toast-box-shadow" + } + }, + "header": { + "color": { + "base": { "value": "{color.white.value}", "themeable": true, "source": "$toast-header-color" }, + "background": { "value": "{color.gray.700.value}", "themeable": true, "source": "$toast-header-background-color" }, + "border": { "value": "rgba(0, 0, 0, .5)", "themeable": true, "source": "$toast-header-border-color" } + } + }, + "container": { + "gutter": { + "lg": { "value": "1.25rem", "themeable": true, "source": "$toast-container-gutter-lg" }, + "sm": { "value": ".625rem", "themeable": true, "source": "$toast-container-gutter-sm" } + } + } + } +} diff --git a/tokens/source/components/tooltip/tooltip.tokens.json b/tokens/source/components/tooltip/tooltip.tokens.json new file mode 100644 index 0000000000..d6698a8776 --- /dev/null +++ b/tokens/source/components/tooltip/tooltip.tokens.json @@ -0,0 +1,42 @@ +{ + "tooltip": { + "font": { + "size": { "value": "{font.size.sm.value}", "themeable": true, "source": "$tooltip-font-size" } + }, + "max": { + "width": { "value": "200px", "themeable": true, "source": "$tooltip-max-width" } + }, + "color": { + "base": { "value": "{color.white.value}", "themeable": true, "source": "$tooltip-color" }, + "light": { "value": "{color.black.value}", "themeable": true, "source": "$tooltip-color-light" } + }, + "bg": { + "base": { "value": "{color.black.value}", "themeable": true, "source": "$tooltip-bg" }, + "light": { "value": "{color.white.value}", "themeable": true, "source": "$tooltip-bg-light" } + }, + "border": { + "radius": { "value": "{border.radius.base.value}", "themeable": true, "source": "$tooltip-border-radius" } + }, + "opacity": { "value": "1", "themeable": true, "source": "$tooltip-opacity" }, + "padding": { + "y": { "value": ".5rem", "themeable": true, "source": "$tooltip-padding-y" }, + "x": { "value": ".5rem", "themeable": true, "source": "$tooltip-padding-x" } + }, + "margin": { "value": "0", "themeable": true, "source": "$tooltip-margin" }, + "box": { + "shadow": { + "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", + "themeable": true, + "source": "$tooltip-box-shadow" + } + }, + "arrow": { + "width": { "value": ".8rem", "themeable": true, "source": "$tooltip-arrow-width" }, + "height": { "value": ".4rem", "themeable": true, "source": "$tooltip-arrow-height" }, + "color": { + "base": { "value": "{tooltip.bg.base.value}", "themeable": true, "source": "$tooltip-arrow-color" }, + "light": { "value": "{color.white.value}", "themeable": true, "source": "$tooltip-arrow-color-light" } + } + } + } +} diff --git a/tokens/source/core/core.tokens.json b/tokens/source/core/core.tokens.json index e4ac6cc536..c87f5cc8c1 100644 --- a/tokens/source/core/core.tokens.json +++ b/tokens/source/core/core.tokens.json @@ -1,5 +1,6 @@ { "core": { + "spacer": { "value": "1rem", "themeable": true, "source": "$spacer" }, "input": { "btn": { "padding": { @@ -30,7 +31,15 @@ } }, "focus": { - "width": { "value": "1px", "themeable": true, "source": "$input-btn-focus-width" } + "width": { "value": "1px", "themeable": true, "source": "$input-btn-focus-width" }, + "color": { "value": "{component.active.bg.value}", "themeable": true, "source": "$input-btn-focus-color" }, + "box": { + "shadow": { + "value": "0 0 0 {core.input.btn.focus.width.value} {core.input.btn.focus.color.value}", + "themeable": true, + "source": "$input-btn-focus-box-shadow" + } + } }, "border": { "width": { "value": "{border.width.value}", "themeable": true, "source": "$input-btn-border-width" } diff --git a/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json b/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json index b5caf65c5f..4261242f14 100644 --- a/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json +++ b/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json @@ -1,5 +1,35 @@ { "box-shadow": { + "level": { + "1": { + "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$level-1-box-shadow" + }, + "2": { + "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$level-2-box-shadow" + }, + "3": { + "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$level-3-box-shadow" + }, + "4": { + "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$level-4-box-shadow" + }, + "5": { + "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$level-5-box-shadow" + } + }, + "base": { "value": "0 .125rem .25rem rgba({color.black.value}, .3)", "themeable": true, "source": "$box-shadow" }, + "sm": { "value": "0 .0625rem .125rem rgba({color.black.value}, .2)", "themeable": true, "source": "$box-shadow-sm" }, + "lg": { "value": "0 .25rem .5rem rgba({color.black.value}, .3)", "themeable": true, "source": "$box-shadow-lg" }, "down": { "1": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", diff --git a/tokens/source/links/links.tokens.json b/tokens/source/links/links.tokens.json index 6288f968e8..9aa3474e8c 100644 --- a/tokens/source/links/links.tokens.json +++ b/tokens/source/links/links.tokens.json @@ -26,11 +26,19 @@ "inline": { "color": { "value": "{color.primary.500.value}", "themeable": true, "source": "$muted-inline-link-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$muted-inline-link-decoration" }, - "decoration-color": { "value": "rgba(10, 48, 85, .3)", "themeable": true, "source": "$muted-inline-link-decoration-color" }, + "decoration-color": { + "value": "rgba(10, 48, 85, .3)", + "themeable": true, + "source": "$muted-inline-link-decoration-color" + }, "hover": { "color": { "value": "#020911", "themeable": true, "source": "$muted-inline-link-hover-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$muted-inline-link-hover-decoration" }, - "decoration-color": { "value": "#020911", "themeable": true, "source": "$muted-inline-link-hover-decoration-color" } + "decoration-color": { + "value": "#020911", + "themeable": true, + "source": "$muted-inline-link-hover-decoration-color" + } } } }, @@ -44,7 +52,11 @@ "inline": { "color": { "value": "{color.brand.500.value}", "themeable": true, "source": "$inline-link-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-decoration" }, - "decoration-color": { "value": "rgba(0, 109, 170, .3)", "themeable": true, "source": "$inline-link-decoration-color" }, + "decoration-color": { + "value": "rgba(0, 109, 170, .3)", + "themeable": true, + "source": "$inline-link-decoration-color" + }, "hover": { "color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-hover-decoration" }, diff --git a/tokens/source/typography/font/font.tokens.json b/tokens/source/typography/font/font.tokens.json index c44632a999..f207f2f126 100644 --- a/tokens/source/typography/font/font.tokens.json +++ b/tokens/source/typography/font/font.tokens.json @@ -21,6 +21,10 @@ "lg": { "value": "1.4063rem", "themeable": true, "source": "$font-size-lg" }, "sm": { "value": ".875rem", "themeable": true, "source": "$font-size-sm" }, "xs": { "value": ".75rem", "themeable": true, "source": "$font-size-xs" }, + "small": { + "base": { "value": "87.5%", "themeable": true, "source": "$small-font-size" }, + "x": { "value": "75%", "themeable": true, "source": "$x-small-font-size" } + }, "h1": { "value": "2.5rem", "themeable": true, "source": "$h1-font-size" }, "h2": { "value": "2rem", "themeable": true, "source": "$h2-font-size" }, "h3": { "value": "1.375rem", "themeable": true, "source": "$h3-font-size" }, From 4565da01bd27a2ff784f671d5c823b80ded89085 Mon Sep 17 00:00:00 2001 From: monteri <36768631+monteri@users.noreply.github.com> Date: Mon, 19 Sep 2022 12:18:59 +0300 Subject: [PATCH 05/19] [BD-46] fix: replace variables (#1619) * fix: replace variables script update to include all usage cases Co-authored-by: vzadorozhnii --- tokens/build/scss-to-css-components.json | 1 + tokens/build/scss-to-css-core.json | 1 + tokens/build/scss-to-css-map.json | 1 - tokens/map-scss-to-css.js | 22 +++++++++---- tokens/utils.js | 42 +++++++++++++++++------- 5 files changed, 49 insertions(+), 18 deletions(-) create mode 100644 tokens/build/scss-to-css-components.json create mode 100644 tokens/build/scss-to-css-core.json delete mode 100644 tokens/build/scss-to-css-map.json diff --git a/tokens/build/scss-to-css-components.json b/tokens/build/scss-to-css-components.json new file mode 100644 index 0000000000..4ccf126be4 --- /dev/null +++ b/tokens/build/scss-to-css-components.json @@ -0,0 +1 @@ +{"$alert-padding-y":"--pgn-alert-padding-y","$alert-padding-x":"--pgn-alert-padding-x","$alert-margin-bottom":"--pgn-alert-margin-bottom","$alert-border-radius":"--pgn-alert-border-radius","$alert-border-width":"--pgn-alert-border-width","$alert-link-font-weight":"--pgn-alert-font-weight-link","$alert-font-size":"--pgn-alert-font-size","$alert-title-color":"--pgn-alert-color-title","$alert-content-color":"--pgn-alert-color-content","$alert-box-shadow":"--pgn-alert-box-shadow","$alert-bg-level":"--pgn-alert-level-bg","$alert-border-level":"--pgn-alert-level-border","$alert-color-level":"--pgn-alert-level-color","$alert-icon-space":"--pgn-alert-icon-space","$alert-line-height":"--pgn-alert-line-height","$avatar-border":"--pgn-avatar-border-base","$avatar-border-radius":"--pgn-avatar-border-radius","$avatar-size":"--pgn-avatar-size-base","$avatar-size-xs":"--pgn-avatar-size-xs","$avatar-size-sm":"--pgn-avatar-size-sm","$avatar-size-lg":"--pgn-avatar-size-lg","$avatar-size-xl":"--pgn-avatar-size-xl","$avatar-size-xxl":"--pgn-avatar-size-xxl","$avatar-size-huge":"--pgn-avatar-size-huge","$avatar-button-padding-left":"--pgn-avatar-button-padding-left-base","$avatar-button-padding-left-sm":"--pgn-avatar-button-padding-left-sm","$avatar-button-padding-left-lg":"--pgn-avatar-button-padding-left-lg","$btn-padding-y":"--pgn-btn-padding-y-base","$btn-padding-y-lg":"--pgn-btn-padding-y-lg","$btn-padding-x":"--pgn-btn-padding-x-base","$btn-padding-x-lg":"--pgn-btn-padding-x-lg","$input-btn-padding-y-sm":"--pgn-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-btn-padding-sm-x","$btn-font-family":"--pgn-btn-font-family","$btn-font-size":"--pgn-btn-font-size-base","$btn-font-size-sm":"--pgn-btn-font-size-sm","$btn-font-size-lg":"--pgn-btn-font-size-lg","$btn-font-weight":"--pgn-btn-font-width","$btn-line-height":"--pgn-btn-line-height-base","$btn-line-height-sm":"--pgn-btn-line-height-sm","$btn-line-height-lg":"--pgn-btn-line-height-lg","$btn-border-width":"--pgn-btn-border-width","$btn-border-radius":"--pgn-btn-border-radius-base","$btn-border-radius-lg":"--pgn-btn-border-radius-lg","$btn-border-radius-sm":"--pgn-btn-border-radius-sm","$btn-box-shadow":"--pgn-btn-box-shadow-base","$btn-active-box-shadow":"--pgn-btn-box-shadow-active","$btn-focus-width":"--pgn-btn-focus-width","$btn-focus-gap":"--pgn-btn-focus-gap","$btn-disabled-opacity":"--pgn-btn-disabled-opacity","$btn-link-disabled-color":"--pgn-btn-disabled-link-color","$btn-tertiary-color":"--pgn-btn-tertiary-color","$btn-tertiary-bg":"--pgn-btn-tertiary-bg-base","$btn-tertiary-hover-bg":"--pgn-btn-tertiary-bg-hover","$btn-tertiary-active-bg":"--pgn-btn-tertiary-bg-active","$btn-inverse-tertiary-color":"--pgn-btn-tertiary-inverse-color","$btn-inverse-tertiary-bg":"--pgn-btn-tertiary-inverse-bg-base","$btn-inverse-tertiary-hover-bg":"--pgn-btn-tertiary-inverse-bg-hover","$btn-inverse-tertiary-active-bg":"--pgn-btn-tertiary-inverse-bg-active","$btn-block-spacing-y":"--pgn-btn-block-spacing-y","$btn-transition":"--pgn-btn-transition","$spinner-width":"--pgn-spinner-width","$spinner-height":"--pgn-spinner-height","$spinner-border-width":"--pgn-spinner-border-width","$spinner-width-sm":"--pgn-spinner-sm-width","$spinner-height-sm":"--pgn-spinner-sm-height","$spinner-border-width-sm":"--pgn-spinner-sm-border-width"} \ No newline at end of file diff --git a/tokens/build/scss-to-css-core.json b/tokens/build/scss-to-css-core.json new file mode 100644 index 0000000000..79ff5364dc --- /dev/null +++ b/tokens/build/scss-to-css-core.json @@ -0,0 +1 @@ +{"$border-width":"--pgn-border-width","$border-color":"--pgn-border-color","$border-radius":"--pgn-border-radius-base","$border-radius-lg":"--pgn-border-radius-lg","$border-radius-sm":"--pgn-border-radius-sm","$caret-width":"--pgn-caret-width","$caret-vertical-align":"--pgn-caret-vertical-align","$caret-spacing":"--pgn-caret-spacing","$body-bg":"--pgn-body-bg","$body-color":"--pgn-body-color","$white":"--pgn-color-white","$black":"--pgn-color-black","$blue":"--pgn-color-blue","$red":"--pgn-color-red","$green":"--pgn-color-green","$yellow":"--pgn-color-yellow","$teal":"--pgn-color-teal","$accent-a":"--pgn-color-accent-a","$accent-b":"--pgn-color-accent-b","$gray-100":"--pgn-color-gray-100","$gray-200":"--pgn-color-gray-200","$gray-300":"--pgn-color-gray-300","$gray-400":"--pgn-color-gray-400","$gray-500":"--pgn-color-gray-500","$gray-600":"--pgn-color-gray-600","$gray-700":"--pgn-color-gray-700","$gray-800":"--pgn-color-gray-800","$gray-900":"--pgn-color-gray-900","$primary-100":"--pgn-color-primary-100","$primary-200":"--pgn-color-primary-200","$primary-300":"--pgn-color-primary-300","$primary-400":"--pgn-color-primary-400","$primary-500":"--pgn-color-primary-500","$primary-600":"--pgn-color-primary-600","$primary-700":"--pgn-color-primary-700","$primary-800":"--pgn-color-primary-800","$primary-900":"--pgn-color-primary-900","$secondary-100":"--pgn-color-secondary-100","$secondary-200":"--pgn-color-secondary-200","$secondary-300":"--pgn-color-secondary-300","$secondary-400":"--pgn-color-secondary-400","$secondary-500":"--pgn-color-secondary-500","$secondary-600":"--pgn-color-secondary-600","$secondary-700":"--pgn-color-secondary-700","$secondary-800":"--pgn-color-secondary-800","$secondary-900":"--pgn-color-secondary-900","$brand-100":"--pgn-color-brand-100","$brand-200":"--pgn-color-brand-200","$brand-300":"--pgn-color-brand-300","$brand-400":"--pgn-color-brand-400","$brand-500":"--pgn-color-brand-500","$brand-600":"--pgn-color-brand-600","$brand-700":"--pgn-color-brand-700","$brand-800":"--pgn-color-brand-800","$brand-900":"--pgn-color-brand-900","$success-100":"--pgn-color-success-100","$success-200":"--pgn-color-success-200","$success-300":"--pgn-color-success-300","$success-400":"--pgn-color-success-400","$success-500":"--pgn-color-success-500","$success-600":"--pgn-color-success-600","$success-700":"--pgn-color-success-700","$success-800":"--pgn-color-success-800","$success-900":"--pgn-color-success-900","$info-100":"--pgn-color-info-100","$info-200":"--pgn-color-info-200","$info-300":"--pgn-color-info-300","$info-400":"--pgn-color-info-400","$info-500":"--pgn-color-info-500","$info-600":"--pgn-color-info-600","$info-700":"--pgn-color-info-700","$info-800":"--pgn-color-info-800","$info-900":"--pgn-color-info-900","$warning-100":"--pgn-color-warning-100","$warning-200":"--pgn-color-warning-200","$warning-300":"--pgn-color-warning-300","$warning-400":"--pgn-color-warning-400","$warning-500":"--pgn-color-warning-500","$warning-600":"--pgn-color-warning-600","$warning-700":"--pgn-color-warning-700","$warning-800":"--pgn-color-warning-800","$warning-900":"--pgn-color-warning-900","$danger-100":"--pgn-color-danger-100","$danger-200":"--pgn-color-danger-200","$danger-300":"--pgn-color-danger-300","$danger-400":"--pgn-color-danger-400","$danger-500":"--pgn-color-danger-500","$danger-600":"--pgn-color-danger-600","$danger-700":"--pgn-color-danger-700","$danger-800":"--pgn-color-danger-800","$danger-900":"--pgn-color-danger-900","$light-100":"--pgn-color-light-100","$light-200":"--pgn-color-light-200","$light-300":"--pgn-color-light-300","$light-400":"--pgn-color-light-400","$light-500":"--pgn-color-light-500","$light-600":"--pgn-color-light-600","$light-700":"--pgn-color-light-700","$light-800":"--pgn-color-light-800","$light-900":"--pgn-color-light-900","$dark-100":"--pgn-color-dark-100","$dark-200":"--pgn-color-dark-200","$dark-300":"--pgn-color-dark-300","$dark-400":"--pgn-color-dark-400","$dark-500":"--pgn-color-dark-500","$dark-600":"--pgn-color-dark-600","$dark-700":"--pgn-color-dark-700","$dark-800":"--pgn-color-dark-800","$dark-900":"--pgn-color-dark-900","$text-muted":"--pgn-text-muted","$input-btn-padding-y":"--pgn-core-input-btn-padding-y","$input-btn-padding-x":"--pgn-core-input-btn-padding-x","$input-btn-padding-y-sm":"--pgn-core-input-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-core-input-btn-padding-sm-x","$input-btn-padding-y-lg":"--pgn-core-input-btn-padding-lg-y","$input-btn-padding-x-lg":"--pgn-core-input-btn-padding-lg-x","$input-btn-font-family":"--pgn-core-input-btn-font-family","$input-btn-font-size":"--pgn-core-input-btn-font-size-base","$input-btn-font-size-sm":"--pgn-core-input-btn-font-size-sm","$input-btn-font-size-lg":"--pgn-core-input-btn-font-size-lg","$input-btn-line-height":"--pgn-core-input-btn-line-height-base","$input-btn-line-height-sm":"--pgn-core-input-btn-line-height-sm","$input-btn-line-height-lg":"--pgn-core-input-btn-line-height-lg","$input-btn-focus-width":"--pgn-core-input-btn-focus-width","$input-btn-border-width":"--pgn-core-input-btn-border-width","$box-shadow-down-1":"--pgn-box-shadow-down-1","$box-shadow-down-2":"--pgn-box-shadow-down-2","$box-shadow-down-3":"--pgn-box-shadow-down-3","$box-shadow-down-4":"--pgn-box-shadow-down-4","$box-shadow-down-5":"--pgn-box-shadow-down-5","$box-shadow-left-1":"--pgn-box-shadow-left-1","$box-shadow-left-2":"--pgn-box-shadow-left-2","$box-shadow-left-3":"--pgn-box-shadow-left-3","$box-shadow-left-4":"--pgn-box-shadow-left-4","$box-shadow-left-5":"--pgn-box-shadow-left-5","$box-shadow-up-1":"--pgn-box-shadow-up-1","$box-shadow-up-2":"--pgn-box-shadow-up-2","$box-shadow-up-3":"--pgn-box-shadow-up-3","$box-shadow-up-4":"--pgn-box-shadow-up-4","$box-shadow-up-5":"--pgn-box-shadow-up-5","$box-shadow-right-1":"--pgn-box-shadow-right-1","$box-shadow-right-2":"--pgn-box-shadow-right-2","$box-shadow-right-3":"--pgn-box-shadow-right-3","$box-shadow-right-4":"--pgn-box-shadow-right-4","$box-shadow-right-5":"--pgn-box-shadow-right-5","$box-shadow-centered-1":"--pgn-box-shadow-centered-1","$box-shadow-centered-2":"--pgn-box-shadow-centered-2","$box-shadow-centered-3":"--pgn-box-shadow-centered-3","$box-shadow-centered-4":"--pgn-box-shadow-centered-4","$box-shadow-centered-5":"--pgn-box-shadow-centered-5","$grid-columns":"--pgn-grid-columns","$grid-gutter-width":"--pgn-grid-gutter-width","$grid-row-columns":"--pgn-grid-row-columns","$table-cell-padding":"--pgn-table-cell-padding-base","$table-cell-padding-sm":"--pgn-table-cell-padding-sm","$table-caption-color":"--pgn-table-color-caption","$table-border-color":"--pgn-table-color-border","$table-th-font-weight":"--pgn-table-th-font-weight","$zindex-dropdown":"--pgn-zindex-dropdown","$zindex-sticky":"--pgn-zindex-sticky","$zindex-fixed":"--pgn-zindex-fixed","$zindex-sheet-backdrop":"--pgn-zindex-sheet-backdrop","$zindex-sheet":"--pgn-zindex-sheet","$zindex-modal-backdrop":"--pgn-zindex-modal-backdrop","$zindex-modal":"--pgn-zindex-modal","$zindex-popover":"--pgn-zindex-popover","$zindex-tooltip":"--pgn-zindex-tooltip","$link-color":"--pgn-link-color","$link-decoration":"--pgn-link-decoration","$link-hover-color":"--pgn-link-hover-color","$link-hover-decoration":"--pgn-link-hover-decoration","$inline-link-color":"--pgn-link-brand-inline-color","$inline-link-decoration":"--pgn-link-brand-inline-decoration","$inline-link-decoration-color":"--pgn-link-brand-inline-decoration-color","$inline-link-hover-color":"--pgn-link-brand-inline-hover-color","$inline-link-hover-decoration":"--pgn-link-brand-inline-hover-decoration","$inline-link-hover-decoration-color":"--pgn-link-brand-inline-hover-decoration-color","$muted-link-color":"--pgn-link-muted-color","$muted-link-decoration":"--pgn-link-muted-decoration","$muted-link-hover-color":"--pgn-link-muted-hover-color","$muted-link-hover-decoration":"--pgn-link-muted-hover-decoration","$muted-inline-link-color":"--pgn-link-muted-inline-color","$muted-inline-link-decoration":"--pgn-link-muted-inline-decoration","$muted-inline-link-decoration-color":"--pgn-link-muted-inline-decoration-color","$muted-inline-link-hover-color":"--pgn-link-muted-inline-hover-color","$muted-inline-link-hover-decoration":"--pgn-link-muted-inline-hover-decoration","$muted-inline-link-hover-decoration-color":"--pgn-link-muted-inline-hover-decoration-color","$brand-link-color":"--pgn-link-brand-color","$brand-link-decoration":"--pgn-link-brand-decoration","$brand-link-hover-color":"--pgn-link-brand-hover-color","$brand-link-hover-decoration":"--pgn-link-brand-hover-decoration","$transition-base":"--pgn-transition-base","$transition-fade":"--pgn-transition-fade","$transition-collapse":"--pgn-transition-collapse","$display1-size":"--pgn-display-size-1","$display2-size":"--pgn-display-size-2","$display3-size":"--pgn-display-size-3","$display4-size":"--pgn-display-size-4","$display-mobile-size":"--pgn-display-size-mobile","$display1-weight":"--pgn-display-weight-1","$display2-weight":"--pgn-display-weight-2","$display3-weight":"--pgn-display-weight-3","$display4-weight":"--pgn-display-weight-4","$display-line-height":"--pgn-display-line-height-base","$display-mobile-line-height":"--pgn-display-line-height-mobile","$font-family-sans-serif":"--pgn-font-family-sans-serif","$font-family-serif":"--pgn-font-family-serif","$font-family-monospace":"--pgn-font-family-monospace","$font-family-base":"--pgn-font-family-base","$font-size-base":"--pgn-font-size-base","$font-size-lg":"--pgn-font-size-lg","$font-size-sm":"--pgn-font-size-sm","$font-size-xs":"--pgn-font-size-xs","$h1-font-size":"--pgn-font-size-h1","$h2-font-size":"--pgn-font-size-h2","$h3-font-size":"--pgn-font-size-h3","$h4-font-size":"--pgn-font-size-h4","$h5-font-size":"--pgn-font-size-h5","$h6-font-size":"--pgn-font-size-h6","$h1-mobile-font-size":"--pgn-font-size-mobile-h1","$h2-mobile-font-size":"--pgn-font-size-mobile-h2","$h3-mobile-font-size":"--pgn-font-size-mobile-h3","$h4-mobile-font-size":"--pgn-font-size-mobile-h4","$h5-mobile-font-size":"--pgn-font-size-mobile-h5","$h6-mobile-font-size":"--pgn-font-size-mobile-h6","$font-weight-lighter":"--pgn-font-weight-lighter","$font-weight-light":"--pgn-font-weight-light","$font-weight-normal":"--pgn-font-weight-normal","$font-weight-semi-bold":"--pgn-font-weight-semi-bold","$font-weight-bold":"--pgn-font-weight-bold","$font-weight-bolder":"--pgn-font-weight-bolder","$font-weight-base":"--pgn-font-weight-base","$headings-margin-bottom":"--pgn-headings-margin-bottom","$headings-font-family":"--pgn-headings-font-family","$headings-font-weight":"--pgn-headings-font-weight","$headings-line-height":"--pgn-headings-line-height","$headings-color":"--pgn-headings-color","$line-height-base":"--pgn-line-height-base","$line-height-lg":"--pgn-line-height-lg","$line-height-sm":"--pgn-line-height-sm","$paragraph-margin-bottom":"--pgn-paragraph-margin-bottom"} \ No newline at end of file diff --git a/tokens/build/scss-to-css-map.json b/tokens/build/scss-to-css-map.json deleted file mode 100644 index 0ea8d936d6..0000000000 --- a/tokens/build/scss-to-css-map.json +++ /dev/null @@ -1 +0,0 @@ -{"$border-width":"--pgn-border-width","$border-color":"--pgn-border-color","$border-radius":"--pgn-border-radius-base","$border-radius-lg":"--pgn-border-radius-lg","$border-radius-sm":"--pgn-border-radius-sm","$caret-width":"--pgn-caret-width","$caret-vertical-align":"--pgn-caret-vertical-align","$caret-spacing":"--pgn-caret-spacing","$body-bg":"--pgn-body-bg","$body-color":"--pgn-body-color","$white":"--pgn-color-white","$black":"--pgn-color-black","$blue":"--pgn-color-blue","$red":"--pgn-color-red","$green":"--pgn-color-green","$yellow":"--pgn-color-yellow","$teal":"--pgn-color-teal","$accent-a":"--pgn-color-accent-a","$accent-b":"--pgn-color-accent-b","$gray-100":"--pgn-color-gray-100","$gray-200":"--pgn-color-gray-200","$gray-300":"--pgn-color-gray-300","$gray-400":"--pgn-color-gray-400","$gray-500":"--pgn-color-gray-500","$gray-600":"--pgn-color-gray-600","$gray-700":"--pgn-color-gray-700","$gray-800":"--pgn-color-gray-800","$gray-900":"--pgn-color-gray-900","$primary-100":"--pgn-color-primary-100","$primary-200":"--pgn-color-primary-200","$primary-300":"--pgn-color-primary-300","$primary-400":"--pgn-color-primary-400","$primary-500":"--pgn-color-primary-500","$primary-600":"--pgn-color-primary-600","$primary-700":"--pgn-color-primary-700","$primary-800":"--pgn-color-primary-800","$primary-900":"--pgn-color-primary-900","$secondary-100":"--pgn-color-secondary-100","$secondary-200":"--pgn-color-secondary-200","$secondary-300":"--pgn-color-secondary-300","$secondary-400":"--pgn-color-secondary-400","$secondary-500":"--pgn-color-secondary-500","$secondary-600":"--pgn-color-secondary-600","$secondary-700":"--pgn-color-secondary-700","$secondary-800":"--pgn-color-secondary-800","$secondary-900":"--pgn-color-secondary-900","$brand-100":"--pgn-color-brand-100","$brand-200":"--pgn-color-brand-200","$brand-300":"--pgn-color-brand-300","$brand-400":"--pgn-color-brand-400","$brand-500":"--pgn-color-brand-500","$brand-600":"--pgn-color-brand-600","$brand-700":"--pgn-color-brand-700","$brand-800":"--pgn-color-brand-800","$brand-900":"--pgn-color-brand-900","$success-100":"--pgn-color-success-100","$success-200":"--pgn-color-success-200","$success-300":"--pgn-color-success-300","$success-400":"--pgn-color-success-400","$success-500":"--pgn-color-success-500","$success-600":"--pgn-color-success-600","$success-700":"--pgn-color-success-700","$success-800":"--pgn-color-success-800","$success-900":"--pgn-color-success-900","$info-100":"--pgn-color-info-100","$info-200":"--pgn-color-info-200","$info-300":"--pgn-color-info-300","$info-400":"--pgn-color-info-400","$info-500":"--pgn-color-info-500","$info-600":"--pgn-color-info-600","$info-700":"--pgn-color-info-700","$info-800":"--pgn-color-info-800","$info-900":"--pgn-color-info-900","$warning-100":"--pgn-color-warning-100","$warning-200":"--pgn-color-warning-200","$warning-300":"--pgn-color-warning-300","$warning-400":"--pgn-color-warning-400","$warning-500":"--pgn-color-warning-500","$warning-600":"--pgn-color-warning-600","$warning-700":"--pgn-color-warning-700","$warning-800":"--pgn-color-warning-800","$warning-900":"--pgn-color-warning-900","$danger-100":"--pgn-color-danger-100","$danger-200":"--pgn-color-danger-200","$danger-300":"--pgn-color-danger-300","$danger-400":"--pgn-color-danger-400","$danger-500":"--pgn-color-danger-500","$danger-600":"--pgn-color-danger-600","$danger-700":"--pgn-color-danger-700","$danger-800":"--pgn-color-danger-800","$danger-900":"--pgn-color-danger-900","$light-100":"--pgn-color-light-100","$light-200":"--pgn-color-light-200","$light-300":"--pgn-color-light-300","$light-400":"--pgn-color-light-400","$light-500":"--pgn-color-light-500","$light-600":"--pgn-color-light-600","$light-700":"--pgn-color-light-700","$light-800":"--pgn-color-light-800","$light-900":"--pgn-color-light-900","$dark-100":"--pgn-color-dark-100","$dark-200":"--pgn-color-dark-200","$dark-300":"--pgn-color-dark-300","$dark-400":"--pgn-color-dark-400","$dark-500":"--pgn-color-dark-500","$dark-600":"--pgn-color-dark-600","$dark-700":"--pgn-color-dark-700","$dark-800":"--pgn-color-dark-800","$dark-900":"--pgn-color-dark-900","$text-muted":"--pgn-text-muted","$alert-padding-y":"--pgn-alert-padding-y","$alert-padding-x":"--pgn-alert-padding-x","$alert-margin-bottom":"--pgn-alert-margin-bottom","$alert-border-radius":"--pgn-alert-border-radius","$alert-border-width":"--pgn-alert-border-width","$alert-link-font-weight":"--pgn-alert-font-weight-link","$alert-font-size":"--pgn-alert-font-size","$alert-title-color":"--pgn-alert-color-title","$alert-content-color":"--pgn-alert-color-content","$alert-box-shadow":"--pgn-alert-box-shadow","$alert-bg-level":"--pgn-alert-level-bg","$alert-border-level":"--pgn-alert-level-border","$alert-color-level":"--pgn-alert-level-color","$alert-icon-space":"--pgn-alert-icon-space","$alert-line-height":"--pgn-alert-line-height","$avatar-border":"--pgn-avatar-border-base","$avatar-border-radius":"--pgn-avatar-border-radius","$avatar-size":"--pgn-avatar-size-base","$avatar-size-xs":"--pgn-avatar-size-xs","$avatar-size-sm":"--pgn-avatar-size-sm","$avatar-size-lg":"--pgn-avatar-size-lg","$avatar-size-xl":"--pgn-avatar-size-xl","$avatar-size-xxl":"--pgn-avatar-size-xxl","$avatar-size-huge":"--pgn-avatar-size-huge","$avatar-button-padding-left":"--pgn-avatar-button-padding-left-base","$avatar-button-padding-left-sm":"--pgn-avatar-button-padding-left-sm","$avatar-button-padding-left-lg":"--pgn-avatar-button-padding-left-lg","$btn-padding-y":"--pgn-btn-padding-y-base","$btn-padding-y-lg":"--pgn-btn-padding-y-lg","$btn-padding-x":"--pgn-btn-padding-x-base","$btn-padding-x-lg":"--pgn-btn-padding-x-lg","$input-btn-padding-y-sm":"--pgn-core-input-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-core-input-btn-padding-sm-x","$btn-font-family":"--pgn-btn-font-family","$btn-font-size":"--pgn-btn-font-size-base","$btn-font-size-sm":"--pgn-btn-font-size-sm","$btn-font-size-lg":"--pgn-btn-font-size-lg","$btn-font-weight":"--pgn-btn-font-width","$btn-line-height":"--pgn-btn-line-height-base","$btn-line-height-sm":"--pgn-btn-line-height-sm","$btn-line-height-lg":"--pgn-btn-line-height-lg","$btn-border-width":"--pgn-btn-border-width","$btn-border-radius":"--pgn-btn-border-radius-base","$btn-border-radius-lg":"--pgn-btn-border-radius-lg","$btn-border-radius-sm":"--pgn-btn-border-radius-sm","$btn-box-shadow":"--pgn-btn-box-shadow-base","$btn-active-box-shadow":"--pgn-btn-box-shadow-active","$btn-focus-width":"--pgn-btn-focus-width","$btn-focus-gap":"--pgn-btn-focus-gap","$btn-disabled-opacity":"--pgn-btn-disabled-opacity","$btn-link-disabled-color":"--pgn-btn-disabled-link-color","$btn-tertiary-color":"--pgn-btn-tertiary-color","$btn-tertiary-bg":"--pgn-btn-tertiary-bg-base","$btn-tertiary-hover-bg":"--pgn-btn-tertiary-bg-hover","$btn-tertiary-active-bg":"--pgn-btn-tertiary-bg-active","$btn-inverse-tertiary-color":"--pgn-btn-tertiary-inverse-color","$btn-inverse-tertiary-bg":"--pgn-btn-tertiary-inverse-bg-base","$btn-inverse-tertiary-hover-bg":"--pgn-btn-tertiary-inverse-bg-hover","$btn-inverse-tertiary-active-bg":"--pgn-btn-tertiary-inverse-bg-active","$btn-block-spacing-y":"--pgn-btn-block-spacing-y","$btn-transition":"--pgn-btn-transition","$spinner-width":"--pgn-spinner-width","$spinner-height":"--pgn-spinner-height","$spinner-border-width":"--pgn-spinner-border-width","$spinner-width-sm":"--pgn-spinner-sm-width","$spinner-height-sm":"--pgn-spinner-sm-height","$spinner-border-width-sm":"--pgn-spinner-sm-border-width","$input-btn-padding-y":"--pgn-core-input-btn-padding-y","$input-btn-padding-x":"--pgn-core-input-btn-padding-x","$input-btn-padding-y-lg":"--pgn-core-input-btn-padding-lg-y","$input-btn-padding-x-lg":"--pgn-core-input-btn-padding-lg-x","$input-btn-font-family":"--pgn-core-input-btn-font-family","$input-btn-font-size":"--pgn-core-input-btn-font-size-base","$input-btn-font-size-sm":"--pgn-core-input-btn-font-size-sm","$input-btn-font-size-lg":"--pgn-core-input-btn-font-size-lg","$input-btn-line-height":"--pgn-core-input-btn-line-height-base","$input-btn-line-height-sm":"--pgn-core-input-btn-line-height-sm","$input-btn-line-height-lg":"--pgn-core-input-btn-line-height-lg","$input-btn-focus-width":"--pgn-core-input-btn-focus-width","$input-btn-border-width":"--pgn-core-input-btn-border-width","$box-shadow-down-1":"--pgn-box-shadow-down-1","$box-shadow-down-2":"--pgn-box-shadow-down-2","$box-shadow-down-3":"--pgn-box-shadow-down-3","$box-shadow-down-4":"--pgn-box-shadow-down-4","$box-shadow-down-5":"--pgn-box-shadow-down-5","$box-shadow-left-1":"--pgn-box-shadow-left-1","$box-shadow-left-2":"--pgn-box-shadow-left-2","$box-shadow-left-3":"--pgn-box-shadow-left-3","$box-shadow-left-4":"--pgn-box-shadow-left-4","$box-shadow-left-5":"--pgn-box-shadow-left-5","$box-shadow-up-1":"--pgn-box-shadow-up-1","$box-shadow-up-2":"--pgn-box-shadow-up-2","$box-shadow-up-3":"--pgn-box-shadow-up-3","$box-shadow-up-4":"--pgn-box-shadow-up-4","$box-shadow-up-5":"--pgn-box-shadow-up-5","$box-shadow-right-1":"--pgn-box-shadow-right-1","$box-shadow-right-2":"--pgn-box-shadow-right-2","$box-shadow-right-3":"--pgn-box-shadow-right-3","$box-shadow-right-4":"--pgn-box-shadow-right-4","$box-shadow-right-5":"--pgn-box-shadow-right-5","$box-shadow-centered-1":"--pgn-box-shadow-centered-1","$box-shadow-centered-2":"--pgn-box-shadow-centered-2","$box-shadow-centered-3":"--pgn-box-shadow-centered-3","$box-shadow-centered-4":"--pgn-box-shadow-centered-4","$box-shadow-centered-5":"--pgn-box-shadow-centered-5","$grid-columns":"--pgn-grid-columns","$grid-gutter-width":"--pgn-grid-gutter-width","$grid-row-columns":"--pgn-grid-row-columns","$table-cell-padding":"--pgn-table-cell-padding-base","$table-cell-padding-sm":"--pgn-table-cell-padding-sm","$table-caption-color":"--pgn-table-color-caption","$table-border-color":"--pgn-table-color-border","$table-th-font-weight":"--pgn-table-th-font-weight","$zindex-dropdown":"--pgn-zindex-dropdown","$zindex-sticky":"--pgn-zindex-sticky","$zindex-fixed":"--pgn-zindex-fixed","$zindex-sheet-backdrop":"--pgn-zindex-sheet-backdrop","$zindex-sheet":"--pgn-zindex-sheet","$zindex-modal-backdrop":"--pgn-zindex-modal-backdrop","$zindex-modal":"--pgn-zindex-modal","$zindex-popover":"--pgn-zindex-popover","$zindex-tooltip":"--pgn-zindex-tooltip","$link-color":"--pgn-link-color","$link-decoration":"--pgn-link-decoration","$link-hover-color":"--pgn-link-hover-color","$link-hover-decoration":"--pgn-link-hover-decoration","$inline-link-color":"--pgn-link-brand-inline-color","$inline-link-decoration":"--pgn-link-brand-inline-decoration","$inline-link-decoration-color":"--pgn-link-brand-inline-decoration-color","$inline-link-hover-color":"--pgn-link-brand-inline-hover-color","$inline-link-hover-decoration":"--pgn-link-brand-inline-hover-decoration","$inline-link-hover-decoration-color":"--pgn-link-brand-inline-hover-decoration-color","$muted-link-color":"--pgn-link-muted-color","$muted-link-decoration":"--pgn-link-muted-decoration","$muted-link-hover-color":"--pgn-link-muted-hover-color","$muted-link-hover-decoration":"--pgn-link-muted-hover-decoration","$muted-inline-link-color":"--pgn-link-muted-inline-color","$muted-inline-link-decoration":"--pgn-link-muted-inline-decoration","$muted-inline-link-decoration-color":"--pgn-link-muted-inline-decoration-color","$muted-inline-link-hover-color":"--pgn-link-muted-inline-hover-color","$muted-inline-link-hover-decoration":"--pgn-link-muted-inline-hover-decoration","$muted-inline-link-hover-decoration-color":"--pgn-link-muted-inline-hover-decoration-color","$brand-link-color":"--pgn-link-brand-color","$brand-link-decoration":"--pgn-link-brand-decoration","$brand-link-hover-color":"--pgn-link-brand-hover-color","$brand-link-hover-decoration":"--pgn-link-brand-hover-decoration","$transition-base":"--pgn-transition-base","$transition-fade":"--pgn-transition-fade","$transition-collapse":"--pgn-transition-collapse","$display1-size":"--pgn-display-size-1","$display2-size":"--pgn-display-size-2","$display3-size":"--pgn-display-size-3","$display4-size":"--pgn-display-size-4","$display-mobile-size":"--pgn-display-size-mobile","$display1-weight":"--pgn-display-weight-1","$display2-weight":"--pgn-display-weight-2","$display3-weight":"--pgn-display-weight-3","$display4-weight":"--pgn-display-weight-4","$display-line-height":"--pgn-display-line-height-base","$display-mobile-line-height":"--pgn-display-line-height-mobile","$font-family-sans-serif":"--pgn-font-family-sans-serif","$font-family-serif":"--pgn-font-family-serif","$font-family-monospace":"--pgn-font-family-monospace","$font-family-base":"--pgn-font-family-base","$font-size-base":"--pgn-font-size-base","$font-size-lg":"--pgn-font-size-lg","$font-size-sm":"--pgn-font-size-sm","$font-size-xs":"--pgn-font-size-xs","$h1-font-size":"--pgn-font-size-h1","$h2-font-size":"--pgn-font-size-h2","$h3-font-size":"--pgn-font-size-h3","$h4-font-size":"--pgn-font-size-h4","$h5-font-size":"--pgn-font-size-h5","$h6-font-size":"--pgn-font-size-h6","$h1-mobile-font-size":"--pgn-font-size-mobile-h1","$h2-mobile-font-size":"--pgn-font-size-mobile-h2","$h3-mobile-font-size":"--pgn-font-size-mobile-h3","$h4-mobile-font-size":"--pgn-font-size-mobile-h4","$h5-mobile-font-size":"--pgn-font-size-mobile-h5","$h6-mobile-font-size":"--pgn-font-size-mobile-h6","$font-weight-lighter":"--pgn-font-weight-lighter","$font-weight-light":"--pgn-font-weight-light","$font-weight-normal":"--pgn-font-weight-normal","$font-weight-semi-bold":"--pgn-font-weight-semi-bold","$font-weight-bold":"--pgn-font-weight-bold","$font-weight-bolder":"--pgn-font-weight-bolder","$font-weight-base":"--pgn-font-weight-base","$headings-margin-bottom":"--pgn-headings-margin-bottom","$headings-font-family":"--pgn-headings-font-family","$headings-font-weight":"--pgn-headings-font-weight","$headings-line-height":"--pgn-headings-line-height","$headings-color":"--pgn-headings-color","$line-height-base":"--pgn-line-height-base","$line-height-lg":"--pgn-line-height-lg","$line-height-sm":"--pgn-line-height-sm","$paragraph-margin-bottom":"--pgn-paragraph-margin-bottom"} \ No newline at end of file diff --git a/tokens/map-scss-to-css.js b/tokens/map-scss-to-css.js index eb3be9aa15..0e27d8d9df 100644 --- a/tokens/map-scss-to-css.js +++ b/tokens/map-scss-to-css.js @@ -2,16 +2,26 @@ const fs = require('fs'); const path = require('path'); const { getSCSStoCSSMap, getFilesWithExtension } = require('./utils'); -const BASE_PATH = path.resolve(__dirname, './source'); +const CORE_BASE_PATH = path.resolve(__dirname, './source'); +const COMPONENTS_BASE_PATH = path.resolve(__dirname, './source/components'); const BASE_PREFIX = '--pgn'; -const result = {}; -const tokenPaths = getFilesWithExtension(BASE_PATH, '.json'); +const coreContent = {}; +const componentsContent = {}; +const coreTokenPaths = getFilesWithExtension(CORE_BASE_PATH, '.json', [], ['components']); +const componentsTokenPaths = getFilesWithExtension(COMPONENTS_BASE_PATH, '.json'); -tokenPaths.forEach(tokenFile => { +coreTokenPaths.forEach(tokenFile => { const content = fs.readFileSync(tokenFile, 'utf-8'); const parsed = JSON.parse(content); - getSCSStoCSSMap(BASE_PREFIX, parsed, result); + getSCSStoCSSMap(BASE_PREFIX, parsed, coreContent); }); -fs.writeFileSync(path.resolve(__dirname, './build/scss-to-css-map.json'), JSON.stringify(result)); +componentsTokenPaths.forEach(tokenFile => { + const content = fs.readFileSync(tokenFile, 'utf-8'); + const parsed = JSON.parse(content); + getSCSStoCSSMap(BASE_PREFIX, parsed, componentsContent); +}); + +fs.writeFileSync(path.resolve(__dirname, './build/scss-to-css-core.json'), JSON.stringify(coreContent)); +fs.writeFileSync(path.resolve(__dirname, './build/scss-to-css-components.json'), JSON.stringify(componentsContent)); diff --git a/tokens/utils.js b/tokens/utils.js index 6a8f7b5136..40e046a05f 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -1,12 +1,14 @@ const fs = require('fs'); const path = require('path'); -function getFilesWithExtension(location, extension, files = []) { +function getFilesWithExtension(location, extension, files = [], excludeDirectories = []) { const content = fs.statSync(location); if (content.isDirectory()) { const contentPaths = fs.readdirSync(location); contentPaths.forEach(contentPath => { - getFilesWithExtension(path.join(location, contentPath), extension, files); + if (!excludeDirectories.includes(contentPath)) { + getFilesWithExtension(path.join(location, contentPath), extension, files, excludeDirectories); + } }); } else if (location.endsWith(extension)) { files.push(location); @@ -31,19 +33,37 @@ function cssVariableWrapper(variable) { return `var(${variable})`; } +function regExpEscape(string) { + return string.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); +} + +function toRegExp(string) { + return new RegExp(`${regExpEscape(string)}(?![\\w:-])`, 'g'); +} + +function replaceVariable(content, scss, css, direction) { + const cssVariable = cssVariableWrapper(css); + return direction === 'scss-to-css' + ? content.replaceAll(toRegExp(scss), cssVariable) + : content.replaceAll(toRegExp(cssVariable), scss); +} + function replaceVariables(filePath, direction = 'css-to-scss') { const targetFile = fs.readFileSync(filePath, 'utf-8'); - const mapFile = fs.readFileSync(path.resolve(__dirname, './build/scss-to-css-map.json'), 'utf-8'); - const variables = JSON.parse(mapFile); + const coreMapFile = fs.readFileSync(path.resolve(__dirname, './build/scss-to-css-core.json'), 'utf-8'); + const componentsMapFile = fs.readFileSync(path.resolve(__dirname, './build/scss-to-css-components.json'), 'utf-8'); + const coreVariables = JSON.parse(coreMapFile); + let result = targetFile; - Object.keys(variables).forEach(variable => { - const cssVariable = cssVariableWrapper(variables[variable]); - if (direction === 'scss-to-css') { - result = result.replaceAll(variable, cssVariable); - } else { - result = result.replaceAll(cssVariable, variable); - } + Object.keys(coreVariables).forEach(variable => { + result = replaceVariable(result, variable, coreVariables[variable], direction); }); + if (!filePath.endsWith('_variables.scss')) { + const componentsVariables = JSON.parse(componentsMapFile); + Object.keys(componentsVariables).forEach(variable => { + result = replaceVariable(result, variable, componentsVariables[variable], direction); + }); + } fs.writeFileSync(filePath, result); } From d38e1e9e2150342070da9a5c78ec0ab0407d7c9d Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Fri, 30 Sep 2022 14:46:16 +0300 Subject: [PATCH 06/19] [BD-46] DRAFT: replace of variables SCSS to CSS (#1633) * feat: replace SCSS variables to CSS Co-authored-by: vzadorozhnii --- scss/core/tokens.css | 75 ++++-- src/ActionRow/_ActionRow.scss | 4 +- src/Alert/Alert.scss | 28 +- src/Alert/_variables.scss | 6 +- src/Annotation/Annotation.scss | 50 ++-- src/Annotation/_variables.scss | 14 +- src/Avatar/Avatar.scss | 36 +-- src/Avatar/_variables.scss | 2 +- src/AvatarButton/AvatarButton.scss | 6 +- src/Badge/Badge.scss | 2 +- src/Badge/_variables.scss | 4 +- src/Badge/badge-bootstrap.scss | 43 +++ src/Breadcrumb/Breadcrumb.scss | 28 +- src/Breadcrumb/_variables.scss | 16 +- src/Bubble/Bubble.scss | 6 +- src/Bubble/_variables.scss | 8 +- src/Button/Button.scss | 135 +++++----- src/Button/_variables.scss | 57 ++-- src/Button/button-bootstrap.scss | 126 +++++++++ src/Card/Card.scss | 124 ++++----- src/Card/_variables.scss | 18 +- src/Card/card-bootstrap.scss | 254 ++++++++++++++++++ src/Carousel/Carousel.scss | 2 +- src/Carousel/_variables.scss | 4 +- src/Carousel/carousel-bootstrap.scss | 181 +++++++++++++ src/CloseButton/CloseButton.scss | 2 +- src/CloseButton/_variables.scss | 8 +- src/CloseButton/close-button-bootstrap.scss | 32 +++ src/Code/Code.scss | 2 +- src/Code/_variables.scss | 6 +- src/Code/code-bootstrap.scss | 56 ++++ src/Collapsible/Collapsible.scss | 22 +- src/DataTable/DataTable.scss | 60 ++--- src/DataTable/_variables.scss | 6 +- src/Dropdown/_variables.scss | 20 +- src/Dropzone/Dropzone.scss | 20 +- src/Dropzone/_variables.scss | 16 +- src/Fieldset/Fieldset.scss | 2 +- src/Form/_Form.scss | 222 +++++++-------- src/Form/_FormText.scss | 16 +- src/Form/_mixins.scss | 4 +- src/Form/_variables.scss | 102 +++---- src/Icon/Icon.scss | 16 +- src/IconButton/IconButton.scss | 20 +- src/IconButton/_variables.scss | 18 +- src/Image/_variables.scss | 8 +- src/Menu/Menu.scss | 50 ++-- src/Modal/Modal.scss | 16 +- src/Modal/_ModalDialog.scss | 88 +++--- src/Modal/_variables.scss | 15 +- src/Nav/Nav.scss | 58 ++-- src/Nav/_variables.scss | 22 +- src/Navbar/_variables.scss | 32 +-- src/PageBanner/PageBanner.scss | 12 +- src/Pagination/Pagination.scss | 93 ++++--- src/Pagination/_variables.scss | 26 +- src/Popover/Popover.scss | 28 +- src/Popover/_variables.scss | 24 +- src/Popover/popover-bootstrap.scss | 192 +++++++++++++ src/ProductTour/Checkpoint.scss | 70 ++--- src/ProductTour/_variables.scss | 8 +- src/ProgressBar/ProgressBar.scss | 35 +-- src/ProgressBar/_variables.scss | 14 +- src/SearchField/SearchField.scss | 28 +- src/SearchField/_variables.scss | 12 +- src/SelectableBox/SelectableBox.scss | 18 +- src/Sheet/Sheet.scss | 8 +- src/Stack/Stack.scss | 2 +- src/Stepper/Stepper.scss | 16 +- src/Sticky/Sticky.scss | 8 +- src/Table/Table.scss | 4 +- src/Table/_variables.scss | 18 +- src/Table/tables-bootstrap.scss | 168 ++++++++++++ src/Tabs/Tabs.scss | 6 +- src/Tabs/_variables.scss | 2 +- src/Toast/Toast.scss | 12 +- src/Toast/ToastContainer.scss | 16 +- src/Toast/_variables.scss | 9 +- src/Tooltip/Tooltip.scss | 14 +- src/Tooltip/_variables.scss | 14 +- src/ValidationMessage/ValidationMessage.scss | 2 +- tokens/build/_variables.scss | 75 ++++-- tokens/build/scss-to-css-components.json | 2 +- tokens/build/scss-to-css-core.json | 2 +- tokens/build/variables.css | 75 ++++-- .../source/borders-fills/border.tokens.json | 7 + tokens/source/colors/colors.tokens.json | 3 + .../colors/component/component.tokens.json | 12 +- .../ActionRow.tokens.json} | 0 .../Alert.tokens.json} | 0 .../Annotation.tokens.json} | 0 .../Avatar.tokens.json} | 0 .../AvatarButton.tokens.json} | 0 .../Badge.tokens.json} | 0 .../Breadcrumb.tokens.json} | 4 +- .../Bubble.tokens.json} | 0 .../Button.tokens.json} | 14 +- .../Card.tokens.json} | 2 +- .../Carousel.tokens.json} | 0 .../Chip.tokens.json} | 0 .../CloseButton.tokens.json} | 0 .../source/components/Code/Code.tokens.json | 39 +++ .../Collapsible.tokens.json} | 0 .../Container.tokens.json} | 0 .../DataTable.tokens.json} | 0 .../Dropdown.tokens.json} | 0 .../Dropzone.tokens.json} | 0 .../Form.tokens.json} | 0 .../Icon.tokens.json} | 0 .../IconButton.tokens.json} | 0 .../Image.tokens.json} | 0 .../Menu.tokens.json} | 0 .../Modal.tokens.json} | 7 +- .../nav.tokens.json => Nav/Nav.tokens.json} | 0 .../Navbar.tokens.json} | 0 .../Pagination.tokens.json} | 0 .../Popover.tokens.json} | 0 .../ProductTour.tokens.json} | 0 .../ProgressBar.tokens.json} | 0 .../SearchField.tokens.json} | 0 .../SelectableBox.tokens.json} | 0 .../Spinner.tokens.json} | 0 .../Stack.tokens.json} | 0 .../Sticky.tokens.json} | 0 .../Table.tokens.json} | 5 + .../Tabs.tokens.json} | 0 .../Toast.tokens.json} | 0 .../Tooltip.tokens.json} | 0 .../source/components/code/code.tokens.json | 43 --- tokens/source/core/core.tokens.json | 30 ++- .../box-shadow/box-shadow.tokens.json | 6 +- .../layout/list-group/list-group.tokens.json | 51 ++++ tokens/source/layout/table/table.tokens.json | 19 -- tokens/source/links/links.tokens.json | 7 + .../source/typography/font/font.tokens.json | 10 +- tokens/source/www/zindex/zindex.tokens.json | 8 + www/src/components/Header.scss | 2 +- www/src/scss/_variables.scss | 8 +- 138 files changed, 2361 insertions(+), 1097 deletions(-) create mode 100644 src/Badge/badge-bootstrap.scss create mode 100644 src/Button/button-bootstrap.scss create mode 100644 src/Card/card-bootstrap.scss create mode 100644 src/Carousel/carousel-bootstrap.scss create mode 100644 src/CloseButton/close-button-bootstrap.scss create mode 100644 src/Code/code-bootstrap.scss create mode 100644 src/Popover/popover-bootstrap.scss create mode 100644 src/Table/tables-bootstrap.scss rename tokens/source/components/{action-row/action-row.tokens.json => ActionRow/ActionRow.tokens.json} (100%) rename tokens/source/components/{alert/alert.tokens.json => Alert/Alert.tokens.json} (100%) rename tokens/source/components/{annotation/annotation.tokens.json => Annotation/Annotation.tokens.json} (100%) rename tokens/source/components/{avatar/avatar.tokens.json => Avatar/Avatar.tokens.json} (100%) rename tokens/source/components/{avatar-button/avatar-button.tokens.json => AvatarButton/AvatarButton.tokens.json} (100%) rename tokens/source/components/{badge/badge.tokens.json => Badge/Badge.tokens.json} (100%) rename tokens/source/components/{breadcrumb/breadcrumb.tokens.json => Breadcrumb/Breadcrumb.tokens.json} (89%) rename tokens/source/components/{bubble/bubble.tokens.json => Bubble/Bubble.tokens.json} (100%) rename tokens/source/components/{button/button.tokens.json => Button/Button.tokens.json} (89%) rename tokens/source/components/{card/card.tokens.json => Card/Card.tokens.json} (97%) rename tokens/source/components/{carousel/carousel.tokens.json => Carousel/Carousel.tokens.json} (100%) rename tokens/source/components/{chip/chip.tokens.json => Chip/Chip.tokens.json} (100%) rename tokens/source/components/{close-button/close-button.tokens.json => CloseButton/CloseButton.tokens.json} (100%) create mode 100644 tokens/source/components/Code/Code.tokens.json rename tokens/source/components/{collapsible/collapsible.tokens.json => Collapsible/Collapsible.tokens.json} (100%) rename tokens/source/components/{container/container.tokens.json => Container/Container.tokens.json} (100%) rename tokens/source/components/{data-table/data-table.tokens.json => DataTable/DataTable.tokens.json} (100%) rename tokens/source/components/{dropdown/dropdown.tokens.json => Dropdown/Dropdown.tokens.json} (100%) rename tokens/source/components/{dropzone/dropzone.tokens.json => Dropzone/Dropzone.tokens.json} (100%) rename tokens/source/components/{form/form.tokens.json => Form/Form.tokens.json} (100%) rename tokens/source/components/{icon/icon.tokens.json => Icon/Icon.tokens.json} (100%) rename tokens/source/components/{icon-button/icon-button.tokens.json => IconButton/IconButton.tokens.json} (100%) rename tokens/source/components/{image/image.tokens.json => Image/Image.tokens.json} (100%) rename tokens/source/components/{menu/menu.tokens.json => Menu/Menu.tokens.json} (100%) rename tokens/source/components/{modal/modal.tokens.json => Modal/Modal.tokens.json} (92%) rename tokens/source/components/{nav/nav.tokens.json => Nav/Nav.tokens.json} (100%) rename tokens/source/components/{navbar/navbar.tokens.json => Navbar/Navbar.tokens.json} (100%) rename tokens/source/components/{pagination/pagination.tokens.json => Pagination/Pagination.tokens.json} (100%) rename tokens/source/components/{popover/popover.tokens.json => Popover/Popover.tokens.json} (100%) rename tokens/source/components/{product-tour/product-tour.tokens.json => ProductTour/ProductTour.tokens.json} (100%) rename tokens/source/components/{progress-bar/progress-bar.tokens.json => ProgressBar/ProgressBar.tokens.json} (100%) rename tokens/source/components/{search-field/search-field.tokens.json => SearchField/SearchField.tokens.json} (100%) rename tokens/source/components/{selectable-box/selectable-box.tokens.json => SelectableBox/SelectableBox.tokens.json} (100%) rename tokens/source/components/{spinner/spinner.tokens.json => Spinner/Spinner.tokens.json} (100%) rename tokens/source/components/{stack/stack.tokens.json => Stack/Stack.tokens.json} (100%) rename tokens/source/components/{sticky/sticky.tokens.json => Sticky/Sticky.tokens.json} (100%) rename tokens/source/components/{table/table.tokens.json => Table/Table.tokens.json} (94%) rename tokens/source/components/{tabs/tabs.tokens.json => Tabs/Tabs.tokens.json} (100%) rename tokens/source/components/{toast/toast.tokens.json => Toast/Toast.tokens.json} (100%) rename tokens/source/components/{tooltip/tooltip.tokens.json => Tooltip/Tooltip.tokens.json} (100%) delete mode 100644 tokens/source/components/code/code.tokens.json create mode 100644 tokens/source/layout/list-group/list-group.tokens.json delete mode 100644 tokens/source/layout/table/table.tokens.json create mode 100644 tokens/source/www/zindex/zindex.tokens.json diff --git a/scss/core/tokens.css b/scss/core/tokens.css index 474dbec35b..80cfaab7c9 100644 --- a/scss/core/tokens.css +++ b/scss/core/tokens.css @@ -1,4 +1,8 @@ :root { + --pgn-www-zindex-modal: 2503; + --pgn-www-zindex-sheet-backdrop: 2501; + --pgn-www-zindex-sheet: 2502; + --pgn-www-zindex-header: 2500; --pgn-paragraph-margin-bottom: 1rem; --pgn-line-height-sm: 1.5; --pgn-line-height-lg: 1.5; @@ -6,6 +10,7 @@ --pgn-headings-line-height: 1.25; --pgn-headings-font-family: null; --pgn-headings-margin-bottom: .5rem; + --pgn-font-weight-lead: null; --pgn-font-weight-bolder: bolder; --pgn-font-weight-bold: 700; --pgn-font-weight-semi-bold: 500; @@ -41,6 +46,7 @@ --pgn-transition-collapse: height .35s ease; --pgn-transition-fade: opacity .15s linear; --pgn-transition-base: all .2s ease-in-out; + --pgn-link-emphasized-hover-darken-percentage: 15%; --pgn-link-brand-inline-hover-decoration-color: #003C5E; --pgn-link-brand-inline-hover-decoration: underline; --pgn-link-brand-inline-hover-color: #003C5E; @@ -90,6 +96,9 @@ --pgn-size-base-75: 75rem; --pgn-size-base-50: 50rem; --pgn-size-base-25: 25rem; + --pgn-list-group-item-padding-x: 1.25rem; + --pgn-list-group-item-padding-y: .75rem; + --pgn-list-group-color: null; --pgn-grid-row-columns: 6; --pgn-grid-gutter-width: 24px; --pgn-grid-columns: 12; @@ -124,18 +133,24 @@ --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); + --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); + --pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-core-list-inline-padding: .5rem; + --pgn-core-mark-bg: #FFF243; + --pgn-core-mark-padding: .2em; --pgn-core-input-btn-focus-width: 1px; --pgn-core-input-btn-line-height-sm: 1.4286; --pgn-core-input-btn-line-height-base: 1.3333; --pgn-core-input-btn-font-size-lg: 1.325rem; --pgn-core-input-btn-font-size-sm: .875rem; --pgn-core-input-btn-font-size-base: 1.125rem; - --pgn-core-input-btn-font-family: null; + --pgn-core-input-btn-font-family: inherit; --pgn-core-input-btn-padding-lg-x: 1.25rem; --pgn-core-input-btn-padding-lg-y: .6875rem; --pgn-core-input-btn-padding-sm-x: .75rem; @@ -279,20 +294,21 @@ --pgn-modal-footer-padding-y: 1.5rem; --pgn-modal-footer-padding-x: 1rem; --pgn-modal-footer-margin-between: .5rem; - --pgn-modal-inner-padding: 1.5rem; + --pgn-modal-inner-padding-bottom: .7rem; + --pgn-modal-inner-padding-base: 1.5rem; --pgn-menu-border-hover: transparent; --pgn-menu-border-active: transparent; --pgn-menu-border-base: transparent; --pgn-image-figure-caption-font-size: 90%; --pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); --pgn-image-thumbnail-padding: .25rem; + --pgn-icon-button-bg: transparent; + --pgn-icon-button-diameter-sm: 2.25rem; + --pgn-icon-button-diameter-md: 2.75rem; --pgn-icon-lg: 1.75rem; --pgn-icon-md: 1.5rem; --pgn-icon-sm: 1.25rem; --pgn-icon-inline: .8em; - --pgn-icon-button-bg: transparent; - --pgn-icon-button-diameter-sm: 2.25rem; - --pgn-icon-button-diameter-md: 2.75rem; --pgn-form-select-icon-padding: .5625rem; --pgn-form-control-icon-width: 32px; --pgn-form-feedback-tooltip-opacity: .9; @@ -413,12 +429,14 @@ --pgn-card-cap-color: null; --pgn-card-cap-bg: rgba(0, 0, 0, .03); --pgn-card-border-color-focus: rgba(0, 0, 0, .5); + --pgn-card-border-color-base: rgba(0, 0, 0, .125); --pgn-card-border-radius-logo: .25rem; --pgn-card-border-radius-image: .3125rem; --pgn-card-spacer-y: .75rem; --pgn-card-spacer-x: 1.25rem; --pgn-btn-transition: null; --pgn-btn-block-spacing-y: .5rem; + --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); --pgn-btn-tertiary-inverse-bg-base: transparent; --pgn-btn-tertiary-bg-base: transparent; --pgn-btn-disabled-opacity: .65; @@ -444,6 +462,9 @@ --pgn-badge-padding-x-pill: .6em; --pgn-badge-padding-x-base: .5rem; --pgn-badge-font-size: 75%; + --pgn-avatar-button-padding-left-lg: .25em; + --pgn-avatar-button-padding-left-sm: .25em; + --pgn-avatar-button-padding-left-base: .25em; --pgn-avatar-size-huge: 18.75rem; --pgn-avatar-size-xxl: 11.5rem; --pgn-avatar-size-xl: 6rem; @@ -452,9 +473,6 @@ --pgn-avatar-size-xs: 1.5rem; --pgn-avatar-size-base: 3rem; --pgn-avatar-border-radius: 100%; - --pgn-avatar-button-padding-left-lg: .25em; - --pgn-avatar-button-padding-left-sm: .25em; - --pgn-avatar-button-padding-left-base: .25em; --pgn-annotation-arrow-border-width: .5rem; --pgn-annotation-arrow-side-margin: .25rem; --pgn-annotation-max-width: 18.75rem; @@ -560,6 +578,7 @@ --pgn-color-gray-300: #ADADAD; --pgn-color-gray-200: #CCCCCC; --pgn-color-gray-100: #EBEBEB; + --pgn-color-theme-interval: 8%; --pgn-color-accent-b: #FFEE88; --pgn-color-accent-a: #00BBF9; --pgn-color-teal: #006DAA; @@ -579,6 +598,7 @@ --pgn-headings-color: var(--pgn-color-black); --pgn-headings-font-weight: var(--pgn-font-weight-bold); --pgn-font-weight-base: var(--pgn-font-weight-normal); + --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25); --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); --pgn-font-size-mobile-h5: var(--pgn-font-size-h5); --pgn-font-size-mobile-h4: var(--pgn-font-size-h4); @@ -589,9 +609,17 @@ --pgn-display-weight-3: var(--pgn-font-weight-bold); --pgn-display-weight-2: var(--pgn-font-weight-bold); --pgn-display-weight-1: var(--pgn-font-weight-bold); - --pgn-box-shadow-lg: 0 .25rem .5rem rgba(var(--pgn-color-black), .3); - --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(var(--pgn-color-black), .2); - --pgn-box-shadow-base: 0 .125rem .25rem rgba(var(--pgn-color-black), .3); + --pgn-list-group-action-active-bg: var(--pgn-color-gray-200); + --pgn-list-group-action-color-base: var(--pgn-color-gray-700); + --pgn-list-group-disabled-color: var(--pgn-color-gray-600); + --pgn-list-group-border-radius: var(--pgn-border-radius-base); + --pgn-list-group-border-width: var(--pgn-border-width); + --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); + --pgn-list-group-bg-hover: var(--pgn-color-gray-100); + --pgn-list-group-bg-base: var(--pgn-color-white); + --pgn-core-dt-font-weight: var(--pgn-font-weight-bold); + --pgn-core-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25); + --pgn-core-blockquote-small-font-size: var(--pgn-font-size-small-base); --pgn-core-input-btn-border-width: var(--pgn-border-width); --pgn-core-input-btn-focus-box-shadow: 0 0 0 var(--pgn-core-input-btn-focus-width) var(--pgn-core-input-btn-focus-color); --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg); @@ -670,7 +698,7 @@ --pgn-modal-content-border-radius: var(--pgn-border-radius-lg); --pgn-modal-content-bg: var(--pgn-color-white); --pgn-modal-title-line-height: var(--pgn-line-height-base); - --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-y) var(--pgn-modal-footer-padding-x); + --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y); --pgn-menu-background-base: var(--pgn-btn-tertiary-bg-base); --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200); @@ -729,6 +757,7 @@ --pgn-dropdown-bg: var(--pgn-color-white); --pgn-dropdown-font-size: var(--pgn-font-size-base); --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item); + --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); --pgn-data-table-border: 1px solid var(--pgn-color-gray-200); --pgn-data-table-background-color: var(--pgn-color-white); --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x); @@ -755,10 +784,9 @@ --pgn-card-margin-deck: var(--pgn-card-margin-group); --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max); --pgn-card-bg: var(--pgn-color-white); - --pgn-card-border-color-base: rgba(var(--pgn-color-black), .125); --pgn-card-border-radius-base: var(--pgn-border-radius-base); --pgn-card-border-width: var(--pgn-border-width); - --pgn-btn-tertiary-inverse-bg-hover: rgba(var(--pgn-color-white), .1); + --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); --pgn-btn-tertiary-inverse-color: var(--pgn-color-white); --pgn-btn-tertiary-color: var(--pgn-color-gray-700); --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075); @@ -772,12 +800,14 @@ --pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm); --pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base); --pgn-btn-font-family: var(--pgn-core-input-btn-font-family); + --pgn-btn-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x); --pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); --pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x); - --pgn-btn-padding-y-sm-x: var(--pgn-core-input-btn-padding-sm-x); - --pgn-btn-padding-y-sm-y: var(--pgn-core-input-btn-padding-sm-y); + --pgn-btn-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y); --pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); --pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-breadcrumb-inverse-color: var(--pgn-color-white); + --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700); --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600); --pgn-breadcrumb-bg: var(--pgn-color-gray-200); --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base); @@ -803,16 +833,22 @@ --pgn-color-gray-500: var(--pgn-color-gray-base); --pgn-body-color: var(--pgn-color-gray-700); --pgn-body-bg: var(--pgn-color-white); + --pgn-border-hr-margin-y: var(--pgn-core-spacer); + --pgn-border-hr-width: var(--pgn-border-width); + --pgn-border-hr-color: rgba(var(--pgn-color-black), .1); --pgn-border-color: var(--pgn-color-gray-200); --pgn-link-brand-inline-color: var(--pgn-color-brand-500); --pgn-link-brand-color: var(--pgn-color-brand-500); --pgn-link-muted-inline-color: var(--pgn-color-primary-500); --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-list-group-action-active-color: var(--pgn-body-color); + --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); + --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); + --pgn-list-group-active-color-base: var(--pgn-component-active-color); --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); --pgn-table-dark-color-border: var(--pgn-table-dark-bg-base); --pgn-table-dark-color-hover: var(--pgn-table-dark-color-base); --pgn-table-border-color: var(--pgn-border-color); - --pgn-table-color-border: var(--pgn-border-color); --pgn-table-color-base: var(--pgn-body-color); --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); --pgn-search-field-border-color-base: var(--pgn-color-gray-500); @@ -895,8 +931,6 @@ --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width)); --pgn-dropdown-color-header: var(--pgn-color-gray-500); --pgn-dropdown-color-base: var(--pgn-body-color); - --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); - --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); @@ -914,9 +948,9 @@ --pgn-color-secondary-500: var(--pgn-color-secondary-base); --pgn-link-inline-color: var(--pgn-color-info-500); --pgn-link-color: var(--pgn-color-info-500); + --pgn-list-group-active-bg: var(--pgn-component-active-bg); --pgn-core-input-btn-focus-color: var(--pgn-component-active-bg); --pgn-table-caption-color: var(--pgn-text-muted); - --pgn-table-color-caption: var(--pgn-text-muted); --pgn-table-color-hover: var(--pgn-table-color-base); --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); @@ -952,6 +986,7 @@ --pgn-form-input-focus-color-border: var(--pgn-component-active-bg); --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); + --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); --pgn-pagination-color-base: var(--pgn-link-color); --pgn-form-feedback-icon-color-invalid: var(--pgn-form-feedback-color-invalid); diff --git a/src/ActionRow/_ActionRow.scss b/src/ActionRow/_ActionRow.scss index d562aa6567..1d73f2e4b2 100644 --- a/src/ActionRow/_ActionRow.scss +++ b/src/ActionRow/_ActionRow.scss @@ -11,7 +11,7 @@ } & > * + * { - margin-inline-start: $action-row-gap-x; + margin-inline-start: var(--pgn-action-row-gap-x); } } @@ -27,7 +27,7 @@ } & > * + * { - margin-bottom: $action-row-gap-y; + margin-bottom: var(--pgn-action-row-gap-y); } } diff --git a/src/Alert/Alert.scss b/src/Alert/Alert.scss index c17ad75a07..e393f582db 100644 --- a/src/Alert/Alert.scss +++ b/src/Alert/Alert.scss @@ -12,11 +12,11 @@ .alert { position: relative; - padding: $alert-padding-y $alert-padding-x; - margin-bottom: $alert-margin-bottom; - border: $alert-border-width solid transparent; + padding: var(--pgn-alert-padding-y) var(--pgn-alert-padding-x); + margin-bottom: var(--pgn-alert-margin-bottom); + border: var(--pgn-alert-border-width) solid transparent; - @include border-radius($alert-border-radius); + @include border-radius(var(--pgn-alert-border-radius)); @include pgn-box-shadow(1, "down"); .alert-message-content > :last-child { @@ -25,7 +25,7 @@ .alert-icon { float: left; - margin-inline-end: $alert-icon-space; + margin-inline-end: var(--pgn-alert-icon-space); width: 1.5rem; height: 1.5rem; flex-shrink: 0; @@ -34,17 +34,17 @@ // Headings for larger alerts .alert-heading { - // Specified to prevent conflicts of changing $headings-color - color: $alert-title-color; + // Specified to prevent conflicts of changing var(--pgn-headings-color) + color: var(--pgn-alert-color-title); display: flex; } // added to align content and icon .alert-content { display: flex; - font-size: $alert-font-size; - line-height: $alert-line-height; - color: $alert-content-color; + font-size: var(--pgn-alert-font-size); + line-height: var(--pgn-alert-line-height); + color: var(--pgn-alert-color-content); text-align: start; div { @@ -54,7 +54,7 @@ // Provide class for links that match alerts .alert-link { - font-weight: $alert-link-font-weight; + font-weight: var(--pgn-alert-font-weight-link); text-decoration: underline; &:hover { @@ -66,16 +66,16 @@ // // Expand the right padding and account for the close button's positioning. -// Baking in $close-font-size: $font-size-base * 1.5 !default; to avoid any dependency +// Baking in $close-font-size: var(--pgn-font-size-base) * 1.5 !default; to avoid any dependency .alert-dismissible { - padding-right: ($font-size-base * 1.5) + $alert-padding-x * 2; + padding-right: calc((var(--pgn-font-size-base) * 1.5) + var(--pgn-alert-padding-x) * 2); // Adjust close link position .close { position: absolute; top: 0; right: 0; - padding: $alert-padding-y $alert-padding-x; + padding: var(--pgn-alert-padding-y) var(--pgn-alert-padding-x); color: inherit; } } diff --git a/src/Alert/_variables.scss b/src/Alert/_variables.scss index 493a06fece..f6e4a8de54 100644 --- a/src/Alert/_variables.scss +++ b/src/Alert/_variables.scss @@ -5,8 +5,8 @@ $alert-padding-y: 1.5rem !default; $alert-padding-x: 1.5rem !default; $alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: $font-weight-normal !default; +$alert-border-radius: var(--pgn-border-radius-base) !default; +$alert-link-font-weight: var(--pgn-font-weight-normal) !default; $alert-border-width: 0 !default; $alert-title-color: #000000 !default; $alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default; @@ -19,6 +19,6 @@ $alert-icon-space: .8rem !default; $alert-font-size: .875rem !default; $alert-line-height: 1.5rem !default; -$alert-content-color: $gray-700 !default; +$alert-content-color: var(--pgn-color-gray-700) !default; $alert-actions-gap: map-get($spacers, 3); diff --git a/src/Annotation/Annotation.scss b/src/Annotation/Annotation.scss index 3e6c9bc3f5..b1680ed204 100644 --- a/src/Annotation/Annotation.scss +++ b/src/Annotation/Annotation.scss @@ -9,41 +9,41 @@ @if $triangle-direction == top { border-bottom-color: $triangle-color; - border-width: 0 $annotation-arrow-border-width $annotation-arrow-border-width; + border-width: 0 var(--pgn-annotation-arrow-border-width) var(--pgn-annotation-arrow-border-width); right: 0; left: 0; - top: calc(#{$annotation-arrow-border-width} * -1); + top: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); margin: 0 auto; } @else if $triangle-direction == right { border-left-color: $triangle-color; border-width: - $annotation-arrow-border-width 0 $annotation-arrow-border-width - $annotation-arrow-border-width; + var(--pgn-annotation-arrow-border-width) 0 var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-border-width); top: 0; bottom: 0; - right: calc(#{$annotation-arrow-border-width} * -1); + right: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); margin: auto 0; } @else if $triangle-direction == bottom { border-top-color: $triangle-color; - border-width: $annotation-arrow-border-width $annotation-arrow-border-width 0; + border-width: var(--pgn-annotation-arrow-border-width) var(--pgn-annotation-arrow-border-width) 0; right: 0; left: 0; - bottom: calc(#{$annotation-arrow-border-width} * -1); + bottom: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); margin: 0 auto; } @else if $triangle-direction == left { border-right-color: $triangle-color; border-width: - $annotation-arrow-border-width $annotation-arrow-border-width - $annotation-arrow-border-width 0; + var(--pgn-annotation-arrow-border-width) var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-border-width) 0; top: 0; bottom: 0; - left: calc(#{$annotation-arrow-border-width} * -1); + left: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); margin: auto 0; } @@ -53,15 +53,15 @@ } .pgn__annotation { - padding: $annotation-padding; - border-radius: $annotation-border-radius; - max-width: $annotation-max-width; - filter: $annotation-box-shadow; + padding: var(--pgn-annotation-padding); + border-radius: var(--pgn-annotation-border-radius); + max-width: var(--pgn-annotation-max-width); + filter: var(--pgn-annotation-box-shadow); word-wrap: break-word; position: relative; display: inline-block; - font-size: $annotation-font-size; - line-height: $annotation-line-height; + font-size: var(--pgn-annotation-font-size); + line-height: var(--pgn-annotation-line-height); text-align: center; } @@ -74,17 +74,17 @@ $arrow-directions: top, right, bottom, left; color: map-get($colors, "color"); // set additional margin to arrow side of the Annotation - margin-#{$direction}: $annotation-arrow-border-width + $annotation-arrow-side-margin; + margin-#{$direction}: calc(var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin)); [dir="rtl"] & { @if $direction == left { margin-left: 0; - margin-right: $annotation-arrow-border-width + $annotation-arrow-side-margin; + margin-right: calc(var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin)); } @else if $direction == right { margin-right: 0; - margin-left: $annotation-arrow-border-width + $annotation-arrow-side-margin; + margin-left: calc(var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-side-margin)); } } @@ -94,19 +94,19 @@ $arrow-directions: top, right, bottom, left; [dir="rtl"] & { @if $direction == left { left: initial; - right: calc(#{$annotation-arrow-border-width} * -1); + right: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); border-width: - $annotation-arrow-border-width 0 $annotation-arrow-border-width - $annotation-arrow-border-width; + var(--pgn-annotation-arrow-border-width) 0 var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-border-width); border-left-color: map-get($colors, "background-color"); } @else if $direction == right { right: initial; - left: calc(#{$annotation-arrow-border-width} * -1); + left: calc(#{var(--pgn-annotation-arrow-border-width)} * -1); border-width: - $annotation-arrow-border-width $annotation-arrow-border-width - $annotation-arrow-border-width 0; + var(--pgn-annotation-arrow-border-width) var(--pgn-annotation-arrow-border-width) + var(--pgn-annotation-arrow-border-width) 0; border-right-color: map-get($colors, "background-color"); } } diff --git a/src/Annotation/_variables.scss b/src/Annotation/_variables.scss index dfe1de4e58..097ef8b5fe 100644 --- a/src/Annotation/_variables.scss +++ b/src/Annotation/_variables.scss @@ -3,15 +3,15 @@ $annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; $annotation-border-radius: .25rem !default; $annotation-max-width: 18.75rem !default; -$annotation-font-size: $font-size-sm !default; -$annotation-line-height: $line-height-sm !default; +$annotation-font-size: var(--pgn-font-size-sm) !default; +$annotation-line-height: var(--pgn-line-height-sm) !default; $annotation-variants: ( - "success": ( "background-color": $success, "color": $white ), - "warning": ( "background-color": $accent-b, "color": $black ), - "error": ( "background-color": $danger, "color": $white ), - "light": ( "background-color": $white, "color": $primary-500 ), - "dark": ( "background-color": $dark, "color": $white ), + "success": ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ), + "warning": ( "background-color": var(--pgn-color-accent-b), "color": var(--pgn-color-black) ), + "error": ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ), + "light": ( "background-color": var(--pgn-color-white), "color": var(--pgn-color-primary-500) ), + "dark": ( "background-color": var(--pgn-color-dark-base), "color": var(--pgn-color-white) ), ) !default; $annotation-arrow-side-margin: .25rem !default; diff --git a/src/Avatar/Avatar.scss b/src/Avatar/Avatar.scss index 9386a97960..8fb8f888cb 100644 --- a/src/Avatar/Avatar.scss +++ b/src/Avatar/Avatar.scss @@ -1,46 +1,46 @@ @import "variables"; .pgn__avatar { - border-radius: $avatar-border-radius; - border: $avatar-border; + border-radius: var(--pgn-avatar-border-radius); + border: var(--pgn-avatar-border-base); display: inline-block; - height: $avatar-size; + height: var(--pgn-avatar-size-base); overflow: hidden; - width: $avatar-size; + width: var(--pgn-avatar-size-base); object-fit: cover; &.pgn__avatar-xs { - height: $avatar-size-xs; - width: $avatar-size-xs; + height: var(--pgn-avatar-size-xs); + width: var(--pgn-avatar-size-xs); } &.pgn__avatar-sm { - height: $avatar-size-sm; - width: $avatar-size-sm; + height: var(--pgn-avatar-size-sm); + width: var(--pgn-avatar-size-sm); } &.pgn__avatar-md { - height: $avatar-size; - width: $avatar-size; + height: var(--pgn-avatar-size-base); + width: var(--pgn-avatar-size-base); } &.pgn__avatar-lg { - height: $avatar-size-lg; - width: $avatar-size-lg; + height: var(--pgn-avatar-size-lg); + width: var(--pgn-avatar-size-lg); } &.pgn__avatar-xl { - height: $avatar-size-xl; - width: $avatar-size-xl; + height: var(--pgn-avatar-size-xl); + width: var(--pgn-avatar-size-xl); } &.pgn__avatar-xxl { - height: $avatar-size-xxl; - width: $avatar-size-xxl; + height: var(--pgn-avatar-size-xxl); + width: var(--pgn-avatar-size-xxl); } &.pgn__avatar-huge { - height: $avatar-size-huge; - width: $avatar-size-huge; + height: var(--pgn-avatar-size-huge); + width: var(--pgn-avatar-size-huge); } } diff --git a/src/Avatar/_variables.scss b/src/Avatar/_variables.scss index 1d38482cab..127b6d7672 100644 --- a/src/Avatar/_variables.scss +++ b/src/Avatar/_variables.scss @@ -1,5 +1,5 @@ $avatar-border-radius: 100% !default; -$avatar-border: solid 1px $light-300 !default; +$avatar-border: solid 1px var(--pgn-color-light-300) !default; $avatar-size-xs: 1.5rem !default; $avatar-size-sm: 2.25rem !default; diff --git a/src/AvatarButton/AvatarButton.scss b/src/AvatarButton/AvatarButton.scss index ed06038d0a..b9237f16bb 100644 --- a/src/AvatarButton/AvatarButton.scss +++ b/src/AvatarButton/AvatarButton.scss @@ -1,14 +1,14 @@ @import "variables"; .btn.pgn__avatar-button-avatar { - padding-left: $avatar-button-padding-left; + padding-left: var(--pgn-avatar-button-padding-left-base); &.pgn__avatar-button-avatar-sm { - padding-left: $avatar-button-padding-left-sm; + padding-left: var(--pgn-avatar-button-padding-left-sm); } &.pgn__avatar-button-avatar-lg { - padding-left: $avatar-button-padding-left-lg; + padding-left: var(--pgn-avatar-button-padding-left-lg); } .pgn__avatar { diff --git a/src/Badge/Badge.scss b/src/Badge/Badge.scss index c019627d0e..7f352e8457 100644 --- a/src/Badge/Badge.scss +++ b/src/Badge/Badge.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/badge"; +@import "badge-bootstrap"; diff --git a/src/Badge/_variables.scss b/src/Badge/_variables.scss index 6067ea7d8a..fde26f880a 100644 --- a/src/Badge/_variables.scss +++ b/src/Badge/_variables.scss @@ -1,13 +1,13 @@ // Badges $badge-font-size: 75% !default; -$badge-font-weight: $font-weight-bold !default; +$badge-font-weight: var(--pgn-font-weight-bold) !default; $badge-padding-y: .125rem !default; $badge-padding-x: .5rem !default; $badge-border-radius: .25rem !default; $badge-transition: none !default; -$badge-focus-width: $input-btn-focus-width !default; +$badge-focus-width: var(--pgn-core-input-btn-focus-width) !default; $badge-pill-padding-x: .6em !default; diff --git a/src/Badge/badge-bootstrap.scss b/src/Badge/badge-bootstrap.scss new file mode 100644 index 0000000000..7efc2bae71 --- /dev/null +++ b/src/Badge/badge-bootstrap.scss @@ -0,0 +1,43 @@ +.badge { + display: inline-block; + padding: var(--pgn-badge-padding-y) var(--pgn-badge-padding-x-base); + + @include font-size($badge-font-size); + + font-weight: var(--pgn-badge-font-weight); + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + + @include border-radius(var(--pgn-badge-border-radius-base)); + @include transition(var(--pgn-badge-transition)); + + @at-root a#{&} { + @include hover-focus() { + text-decoration: none; + } + } + + &:empty { + display: none; + } +} + +.btn .badge { + position: relative; + top: -1px; +} + +.badge-pill { + padding-right: var(--pgn-badge-padding-x-pill); + padding-left: var(--pgn-badge-padding-x-pill); + + @include border-radius(var(--pgn-badge-border-radius-pill)); +} + +@each $color, $value in $theme-colors { + .badge-#{$color} { + @include badge-variant($value); + } +} diff --git a/src/Breadcrumb/Breadcrumb.scss b/src/Breadcrumb/Breadcrumb.scss index 80d1230c23..757fe82d44 100644 --- a/src/Breadcrumb/Breadcrumb.scss +++ b/src/Breadcrumb/Breadcrumb.scss @@ -4,11 +4,11 @@ .pgn__breadcrumb { .list-inline-item { &.active { - color: $breadcrumb-active-color; + color: var(--pgn-breadcrumb-color-active); } a.link-muted { - color: $breadcrumb-color; + color: var(--pgn-breadcrumb-color-base); &:focus { position: relative; @@ -20,18 +20,18 @@ &:focus::before { content: ""; position: absolute; - top: calc(#{$breadcrumb-border-focus-axis-y} * -1); - right: calc(#{$breadcrumb-border-focus-axis-x} * -1); - bottom: calc(#{$breadcrumb-border-focus-axis-y} * -1); - left: calc(#{$breadcrumb-border-focus-axis-x} * -1); - border: $breadcrumb-border-focus-width solid $breadcrumb-color; - border-radius: $breadcrumb-focus-border-radius; + top: calc(#{var(--pgn-breadcrumb-border-focus-axis-y)} * -1); + right: calc(#{var(--pgn-breadcrumb-border-focus-axis-x)} * -1); + bottom: calc(#{var(--pgn-breadcrumb-border-focus-axis-y)} * -1); + left: calc(#{var(--pgn-breadcrumb-border-focus-axis-x)} * -1); + border: var(--pgn-breadcrumb-border-focus-width) solid var(--pgn-breadcrumb-color-base); + border-radius: var(--pgn-breadcrumb-border-radius-focus); } } [dir="rtl"] & { margin-right: 0; - margin-left: $breadcrumb-margin-left; + margin-left: var(--pgn-breadcrumb-margin-left); } .pgn__icon { @@ -44,21 +44,21 @@ &-dark { .list-inline-item { &.active { - color: $breadcrumb-inverse-active; + color: var(--pgn-breadcrumb-inverse-active); } a.link-muted { - color: $breadcrumb-inverse-color; + color: var(--pgn-breadcrumb-inverse-color); &:focus::before { - border: $breadcrumb-border-focus-width solid $breadcrumb-inverse-color; + border: var(--pgn-breadcrumb-border-focus-width) solid var(--pgn-breadcrumb-inverse-color); } } } .pgn__icon, .custom-spacer { - color: $breadcrumb-inverse-spacer; + color: var(--pgn-breadcrumb-inverse-spacer); } } @@ -68,7 +68,7 @@ .list-inline-item:not(:last-child) { margin-right: 0; - margin-left: $breadcrumb-margin-left; + margin-left: var(--pgn-breadcrumb-margin-left); } .pgn__icon { diff --git a/src/Breadcrumb/_variables.scss b/src/Breadcrumb/_variables.scss index 955751b0d7..274675364b 100644 --- a/src/Breadcrumb/_variables.scss +++ b/src/Breadcrumb/_variables.scss @@ -14,14 +14,14 @@ $breadcrumb-border-focus-axis-y: .5rem !default; $breadcrumb-border-focus-width: .0625rem !default; -$breadcrumb-bg: $gray-200 !default; -$breadcrumb-divider-color: $gray-600 !default; -$breadcrumb-active-color: $gray-500 !default; -$breadcrumb-inverse-active: $light-500 !default; -$breadcrumb-inverse-spacer: $light-700 !default; -$breadcrumb-color: $primary-500 !default; -$breadcrumb-inverse-color: $white !default; +$breadcrumb-bg: var(--pgn-color-gray-200) !default; +$breadcrumb-divider-color: var(--pgn-color-gray-600) !default; +$breadcrumb-active-color: var(--pgn-color-gray-500) !default; +$breadcrumb-inverse-active: var(--pgn-color-light-500) !default; +$breadcrumb-inverse-spacer: var(--pgn-color-light-700) !default; +$breadcrumb-color: var(--pgn-color-primary-500) !default; +$breadcrumb-inverse-color: var(--pgn-color-white) !default; $breadcrumb-divider: "/" !default; -$breadcrumb-border-radius: $border-radius !default; +$breadcrumb-border-radius: var(--pgn-border-radius-base) !default; $breadcrumb-focus-border-radius: .125rem !default; diff --git a/src/Bubble/Bubble.scss b/src/Bubble/Bubble.scss index c176a95097..f1a651f198 100644 --- a/src/Bubble/Bubble.scss +++ b/src/Bubble/Bubble.scss @@ -8,7 +8,7 @@ display: inline-flex; align-items: center; justify-content: center; - font-size: $font-size-xs; + font-size: var(--pgn-font-size-xs); @each $name, $colors in $bubble-variants { &.pgn__bubble-#{$name} { @@ -19,10 +19,10 @@ &:disabled, &.disabled { - background: $gray-500; + background: var(--pgn-color-gray-500); } &.expandable { - padding: $bubble-expandable-padding-y $bubble-expandable-padding-x; + padding: var(--pgn-bubble-expandable-padding-y) var(--pgn-bubble-expandable-padding-x); } } diff --git a/src/Bubble/_variables.scss b/src/Bubble/_variables.scss index e09ee586c8..046c52c363 100644 --- a/src/Bubble/_variables.scss +++ b/src/Bubble/_variables.scss @@ -1,8 +1,8 @@ $bubble-variants: ( - "success": ( "background-color": $success, "color": $white ), - "warning": ( "background-color": $warning, "color": $white ), - "error": ( "background-color": $danger, "color": $white ), - "primary": ( "background-color": $primary, "color": $white ), + "success": ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ), + "warning": ( "background-color": var(--pgn-color-warning-base), "color": var(--pgn-color-white) ), + "error": ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ), + "primary": ( "background-color": var(--pgn-color-primary-base), "color": var(--pgn-color-white) ), ) !default; $bubble-expandable-padding-x: .25rem !default; $bubble-expandable-padding-y: 0 !default; diff --git a/src/Button/Button.scss b/src/Button/Button.scss index 9d76a289dd..ee8e9d6b36 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -1,5 +1,5 @@ @import "variables"; -@import "~bootstrap/scss/button-group"; +@import "button-bootstrap"; @mixin button-variant( $btn-variant-bg, $btn-variant-border, $btn-variant-hover-bg: darken($btn-variant-bg, 7.5%), @@ -15,7 +15,7 @@ border-color: $btn-variant-border; - @include box-shadow($btn-box-shadow); + @include box-shadow(var(--pgn-btn-box-shadow-base)); @include hover { color: $btn-variant-hover-color; @@ -55,30 +55,31 @@ // OVERRIDE FROM BOOTSTRAP // We do this to better control active and focus states. @mixin button-outline-variant( - $btn-outline-variant-color, $btn-outline-variant-color-hover: color-yiq($btn-outline-variant-color), - $btn-outline-variant-active-bg: $btn-outline-variant-color, - $btn-outline-variant-active-border: $btn-outline-variant-color + $color-val, + $color-val-hover: color-yiq($color-val), + $color-val-active-bg: $color-val, + $btn-outline-variant-active-border: $color-val ) { - color: $btn-outline-variant-color; - border-color: $btn-outline-variant-color; + color: $color-val; + border-color: $color-val; @include hover { - color: $btn-outline-variant-color-hover; - background-color: $btn-outline-variant-active-bg; + color: $color-val-hover; + background-color: $color-val-active-bg; border-color: $btn-outline-variant-active-border; } &.disabled, &:disabled { - color: $btn-outline-variant-color; + color: $color-val; background-color: transparent; } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { - color: color-yiq($btn-outline-variant-active-bg); - background-color: $btn-outline-variant-active-bg; + color: color-yiq($color-val-active-bg); + background-color: $color-val-active-bg; border-color: $btn-outline-variant-active-border; } } @@ -142,8 +143,8 @@ $btn-size-line-height, $btn-size-border-radius) { outline: 0; box-shadow: none; - $distance: $btn-focus-width + $btn-focus-gap; - $distance-include-btn-border: $distance + $btn-border-width; + $distance: calc(var(--pgn-btn-focus-width) + var(--pgn-btn-focus-gap)); + $distance-include-btn-border: calc($distance + var(--pgn-btn-border-width)); &::before { content: ""; @@ -152,16 +153,16 @@ $btn-size-line-height, $btn-size-border-radius) { right: calc(#{$distance-include-btn-border} * -1); bottom: calc(#{$distance-include-btn-border} * -1); left: calc(#{$distance-include-btn-border} * -1); - border: solid $btn-focus-width $ring-color; + border: solid var(--pgn-btn-focus-width) $ring-color; border-radius: calc(#{$btn-border-radius} + #{$distance}); } &.btn-lg::before { - border-radius: calc(#{$btn-border-radius-lg} + #{$distance}); + border-radius: calc(#{var(--pgn-btn-border-radius-lg)} + #{$distance}); } &.btn-sm::before { - border-radius: calc(#{$btn-border-radius-sm} + #{$distance}); + border-radius: calc(#{var(--pgn-btn-border-radius-sm)} + #{$distance}); } &:active, @@ -196,28 +197,28 @@ $btn-size-line-height, $btn-size-border-radius) { display: inline-flex; align-items: center; justify-content: center; - font-family: $btn-font-family; - font-weight: $btn-font-weight; - color: $body-color; + font-family: var(--pgn-btn-font-family); + font-weight: var(--pgn-btn-font-width); + color: var(--pgn-body-color); text-align: center; vertical-align: middle; user-select: none; background-color: transparent; - border: $btn-border-width solid transparent; + border: var(--pgn-btn-border-width) solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, - $btn-line-height, $btn-border-radius); - @include transition($btn-transition); + @include button-size(var(--pgn-btn-padding-y-base), var(--pgn-btn-padding-x-base), var(--pgn-btn-font-size-base), + var(--pgn-btn-line-height-base), $btn-border-radius); + @include transition(var(--pgn-btn-transition)); @include hover { - color: $body-color; + color: var(--pgn-body-color); text-decoration: none; } // Disabled comes first so active can properly restyle &.disabled, &:disabled { - opacity: $btn-disabled-opacity; + opacity: var(--pgn-btn-disabled-opacity); } // Button Icon Sizes @@ -318,28 +319,28 @@ fieldset:disabled a.btn { $btn-inverse-active-bg, $btn-inverse-active-border, ); - @include button-focus($white); + @include button-focus(var(--pgn-color-white)); } .btn-inverse-outline-#{$color} { - $text-and-border: $white; + $text-and-border: var(--pgn-color-white); $color-hover: theme-color($color, "hover"); - $active-background: theme-color($color, "background"); - $active-border: transparent; + $active-bg-color: theme-color($color, "background"); + $active-border-color: transparent; // Defaults $color-hover: color-yiq($value) !default; - $btn-inverse-outline-active-bg: $value !default; - $btn-inverse-outline-active-border: $value !default; + $active-bg-color: $value !default; + $active-border-color: $value !default; @include button-outline-variant( $text-and-border, $color-hover, - $btn-inverse-outline-active-bg, - $btn-inverse-outline-active-border, + $active-bg-color, + $active-border-color, ); - @include button-focus($white); + @include button-focus(var(--pgn-color-white)); } } @@ -350,45 +351,45 @@ fieldset:disabled a.btn { .btn-tertiary { $button-tertiary-background: $btn-tertiary-bg; $button-tertiary-border: transparent; - $hover-background: $btn-tertiary-hover-bg; - $hover-border: transparent; - $button-tertiary-active-bg: $btn-tertiary-active-bg; + $hover-background: var(--pgn-btn-tertiary-bg-hover); + $button-tertiary-hover-border: transparent; + $button-tertiary-active-bg: var(--pgn-btn-tertiary-bg-active); $button-tertiary-active-border: transparent; @include button-variant( $button-tertiary-background, $button-tertiary-border, $hover-background, - $hover-border, + $button-tertiary-hover-border, $button-tertiary-active-bg, $button-tertiary-active-border, - $btn-tertiary-color, - $btn-tertiary-color, - $btn-tertiary-color + var(--pgn-btn-tertiary-color), + var(--pgn-btn-tertiary-color), + var(--pgn-btn-tertiary-color) ); @include button-focus(theme-color("primary", "focus")); } .btn-inverse-tertiary { - $button-inverse-tertiary-bg: $btn-inverse-tertiary-bg; + $button-inverse-tertiary-bg: $btn-tertiary-bg; $button-inverse-tertiary-border: transparent; - $hover-background: $btn-inverse-tertiary-hover-bg; - $hover-border: transparent; - $button-inverse-tertiary-active-bg: $btn-inverse-tertiary-active-bg; + $hover-background: var(--pgn-btn-tertiary-inverse-bg-hover); + $button-inverse-hover-border: transparent; + $button-inverse-tertiary-active-bg: var(--pgn-btn-tertiary-inverse-bg-active); $button-inverse-tertiary-active-border: transparent; @include button-variant( $button-inverse-tertiary-bg, $button-inverse-tertiary-border, $hover-background, - $hover-border, + $button-inverse-hover-border, $button-inverse-tertiary-active-bg, $button-inverse-tertiary-active-border, - $btn-inverse-tertiary-color, - $btn-inverse-tertiary-color, - $btn-inverse-tertiary-color + var(--pgn-btn-tertiary-inverse-color), + var(--pgn-btn-tertiary-inverse-color), + var(--pgn-btn-tertiary-inverse-color) ); - @include button-focus($white); + @include button-focus(var(--pgn-color-white)); } // @@ -397,24 +398,24 @@ fieldset:disabled a.btn { // Make a button look and behave like a link .btn-link { - font-weight: $font-weight-normal; - color: $link-color; - text-decoration: $link-decoration; + font-weight: var(--pgn-font-weight-normal); + color: var(--pgn-link-color); + text-decoration: var(--pgn-link-decoration); @include hover { - color: $link-hover-color; - text-decoration: $link-hover-decoration; + color: var(--pgn-link-hover-color); + text-decoration: var(--pgn-link-hover-decoration); } &:focus, &.focus { - text-decoration: $link-hover-decoration; + text-decoration: var(--pgn-link-hover-decoration); box-shadow: none; } &:disabled, &.disabled { - color: $btn-link-disabled-color; + color: var(--pgn-btn-disabled-link-color); pointer-events: none; } @@ -432,15 +433,15 @@ fieldset:disabled a.btn { .btn-lg { @include button-size( - $btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, - $btn-line-height-lg, $btn-border-radius-lg + var(--pgn-btn-padding-y-lg), var(--pgn-btn-padding-x-lg), var(--pgn-btn-font-size-lg), + var(--pgn-btn-line-height-lg), var(--pgn-btn-border-radius-lg) ); } .btn-sm { @include button-size( - $btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, - $btn-line-height-sm, $btn-border-radius-sm + var(--pgn-btn-padding-y-sm), var(--pgn-btn-padding-x-sm), var(--pgn-btn-font-size-sm), + var(--pgn-btn-line-height-sm), var(--pgn-btn-border-radius-sm) ); } @@ -454,12 +455,12 @@ fieldset:disabled a.btn { // Vertically space out multiple block buttons + .btn-block { - margin-top: $btn-block-spacing-y; + margin-top: var(--pgn-btn-block-spacing-y); } } .btn-inline { - line-height: calc(#{$line-height-base}em - #{2 * $btn-border-width}); + line-height: calc(#{var(--pgn-line-height-base)}em - 2 * #{var(--pgn-btn-border-width)}); font-size: inherit; vertical-align: bottom; padding: 0 .25em; @@ -482,11 +483,11 @@ input[type="button"] { [dir="rtl"] .btn-group > .btn:not(:first-child), [dir="rtl"] .btn-group > .btn-group:not(:first-child) > .btn { - border-radius: $btn-border-radius 0 0 $btn-border-radius; + border-radius: var(--pgn-btn-border-radius-base) 0 0 var(--pgn-btn-border-radius-base); } [dir="rtl"] .btn-group > .btn:first-child, [dir="rtl"] .btn-group > .btn-group:first-child > .btn { - border-top-right-radius: $btn-border-radius; - border-bottom-right-radius: $btn-border-radius; + border-top-right-radius: var(--pgn-btn-border-radius-base); + border-bottom-right-radius: var(--pgn-btn-border-radius-base); } diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss index 525a3380a2..79a6896474 100644 --- a/src/Button/_variables.scss +++ b/src/Button/_variables.scss @@ -1,34 +1,35 @@ -$btn-padding-y: $input-btn-padding-y !default; -$btn-padding-x: $input-btn-padding-x !default; -$btn-font-family: $input-btn-font-family !default; -$btn-font-size: $input-btn-font-size !default; -$btn-line-height: $input-btn-line-height !default; - -$btn-padding-y-sm: $input-btn-padding-y-sm !default; -$btn-padding-x-sm: $input-btn-padding-x-sm !default; -$btn-font-size-sm: $input-btn-font-size-sm !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; - -$btn-padding-y-lg: $input-btn-padding-y-lg !default; -$btn-padding-x-lg: $input-btn-padding-x-lg !default; -$btn-font-size-lg: $input-btn-font-size-lg !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; - -$btn-border-width: $input-btn-border-width !default; - -$btn-font-weight: $font-weight-normal !default; -$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; +$btn-padding-y: var(--pgn-core-input-btn-padding-y) !default; +$btn-padding-x: var(--pgn-core-input-btn-padding-x) !default; +$btn-font-family: var(--pgn-core-input-btn-font-family) !default; +$btn-font-size: var(--pgn-core-input-btn-font-size-base) !default; +$btn-line-height: var(--pgn-core-input-btn-line-height-base) !default; + +$btn-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y) !default; +$btn-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x) !default; +$btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm) !default; +$btn-line-height-sm: var(--pgn-core-input-btn-line-height-sm) !default; + +$btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y) !default; +$btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x) !default; +$btn-font-size-lg: var(--pgn-core-input-btn-font-size-lg) !default; +$btn-line-height-lg: var(--pgn-core-input-btn-line-height-lg) !default; + +$btn-border-width: var(--pgn-core-input-btn-border-width) !default; + +$btn-font-weight: var(--pgn-font-weight-normal) !default; +$btn-box-shadow: inset 0 1px 0 rgba(var(--pgn-color-white), .15), + 0 1px 1px rgba(var(--pgn-color-black), .075) !default; $btn-focus-width: 2px !default; $btn-focus-gap: 1px !default; -$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; +$btn-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow) !default; $btn-disabled-opacity: .65 !default; $btn-active-box-shadow: none; -$btn-tertiary-color: $gray-700 !default; +$btn-tertiary-color: var(--pgn-color-gray-700) !default; $btn-tertiary-bg: transparent !default; -$btn-tertiary-hover-bg: $light-500 !default; -$btn-tertiary-active-bg: $light-500 !default; -$btn-inverse-tertiary-color: $white !default; +$btn-tertiary-hover-bg: var(--pgn-color-light-500) !default; +$btn-tertiary-active-bg: var(--pgn-color-light-500) !default; +$btn-inverse-tertiary-color: var(--pgn-color-white) !default; $btn-inverse-tertiary-bg: transparent !default; $btn-inverse-tertiary-hover-bg: rgba(255, 255, 255, .1) !default; $btn-inverse-tertiary-active-bg: rgba(255, 255, 255, .1) !default; @@ -38,8 +39,8 @@ $btn-link-disabled-color: theme-color("gray", "light-text") !default; $btn-block-spacing-y: .5rem !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius-lg !default; -$btn-border-radius-sm: $border-radius-sm !default; +$btn-border-radius: var(--pgn-border-radius-base) !default; +$btn-border-radius-lg: var(--pgn-border-radius-lg) !default; +$btn-border-radius-sm: var(--pgn-border-radius-sm) !default; $btn-transition: null; diff --git a/src/Button/button-bootstrap.scss b/src/Button/button-bootstrap.scss new file mode 100644 index 0000000000..e77bd7d3d0 --- /dev/null +++ b/src/Button/button-bootstrap.scss @@ -0,0 +1,126 @@ +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-flex; + vertical-align: middle; + + > .btn { + position: relative; + flex: 1 1 auto; + + @include hover() { + z-index: 1; + } + + &:focus, + &:active, + &.active { + z-index: 1; + } + } +} + +.btn-toolbar { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + + .input-group { + width: auto; + } +} + +.btn-group { + > .btn:not(:first-child), + > .btn-group:not(:first-child) { + margin-left: calc(var(--pgn-btn-border-width) * -1); + } + + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn { + @include border-right-radius(0); + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) > .btn { + @include border-left-radius(0); + } +} + +/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +.btn-group-sm > .btn { @extend .btn-sm; } +/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ +.btn-group-lg > .btn { @extend .btn-lg; } + +.dropdown-toggle-split { + padding-right: calc(var(--pgn-btn-padding-x) * .75); + padding-left: calc(var(--pgn-btn-padding-x) * .75); + + &::after, + .dropup &::after, + .dropright &::after { + margin-left: 0; + } + + .dropleft &::before { + margin-right: 0; + } +} + +.btn-sm + .dropdown-toggle-split { + padding-right: calc(var(--pgn-btn-padding-x-sm) * .75); + padding-left: calc(var(--pgn-btn-padding-x-sm) * .75); +} + +.btn-lg + .dropdown-toggle-split { + padding-right: calc(var(--pgn-btn-padding-x-lg) * .75); + padding-left: calc(var(--pgn-btn-padding-x-lg) * .75); +} + +.btn-group.show .dropdown-toggle { + @include box-shadow(var(--pgn-btn-box-shadow-active)); + + &.btn-link { + @include box-shadow(none); + } +} + +.btn-group-vertical { + flex-direction: column; + align-items: flex-start; + justify-content: center; + + > .btn, + > .btn-group { + width: 100%; + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) { + margin-top: calc(var(--pgn-btn-border-width) * -1); + } + + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn { + @include border-bottom-radius(0); + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) > .btn { + @include border-top-radius(0); + } +} + +.btn-group-toggle { + > .btn, + > .btn-group > .btn { + margin-bottom: 0; + + input[type="radio"], + input[type="checkbox"] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; + } + } +} diff --git a/src/Card/Card.scss b/src/Card/Card.scss index 6c5c74189a..910dde7c97 100644 --- a/src/Card/Card.scss +++ b/src/Card/Card.scss @@ -1,31 +1,31 @@ @import "variables"; -@import "~bootstrap/scss/card"; +@import "card-bootstrap"; .pgn__card, .pgn__card-body { width: 100%; &.is-muted { - background-color: $light-200; + background-color: var(--pgn-color-light-200); } } a .pgn__card { - color: $gray-700; + color: var(--pgn-color-gray-700); display: inline-block; margin-right: 100%; } .pgn__card-grid { .row > div[class*="col-"] { - margin-bottom: $card-grid-margin; + margin-bottom: var(--pgn-card-margin-grid); display: flex; flex: 1 0 auto; } } .pgn__card-header { - padding: 0 $card-spacer-x; + padding: 0 var(--pgn-card-spacer-x); display: flex; justify-content: space-between; @@ -39,8 +39,8 @@ a .pgn__card { } %header-title { - color: $black; - font-weight: $font-weight-bold; + color: var(--pgn-color-black); + font-weight: var(--pgn-font-weight-bold); text-align: start; } @@ -51,15 +51,15 @@ a .pgn__card { } .pgn__card-header-title-sm { - font-size: $h4-font-size; + font-size: var(--pgn-font-size-h4); } .pgn__card-header-title-md { - font-size: $h3-font-size; + font-size: var(--pgn-font-size-h3); } %header-subtitle { - color: $gray-700; + color: var(--pgn-color-gray-700); margin-top: map_get($spacers, 1); } @@ -70,16 +70,16 @@ a .pgn__card { } .pgn__card-header-subtitle-sm { - font-size: $h5-font-size; + font-size: var(--pgn-font-size-h5); } .pgn__card-header-subtitle-md { - font-size: $h4-font-size; + font-size: var(--pgn-font-size-h4); } .pgn__card-header-actions { - margin-top: $spacer; - margin-inline-start: $spacer; + margin-top: var(--pgn-core-spacer); + margin-inline-start: var(--pgn-core-spacer); flex-shrink: 0; } @@ -93,30 +93,30 @@ a .pgn__card { } .pgn__card-divider { - border-top: 1px solid $card-divider-bg; + border-top: 1px solid var(--pgn-card-divider-bg); height: 0; } .pgn__card-section { - padding: $card-spacer-x; + padding: var(--pgn-card-spacer-x); flex-grow: 1; text-align: start; &.is-muted { - background-color: $light-200; + background-color: var(--pgn-color-light-200); } .pgn__card-section-title { - color: $black; - font-weight: $font-weight-bold; - font-size: $h5-font-size; - margin-bottom: $card-spacer-y; + color: var(--pgn-color-black); + font-weight: var(--pgn-font-weight-bold); + font-size: var(--pgn-font-size-h5); + margin-bottom: var(--pgn-card-spacer-y); } .pgn__card-section-actions { display: flex; justify-content: flex-end; - margin-top: $card-spacer-y; + margin-top: var(--pgn-card-spacer-y); } dd { @@ -135,7 +135,7 @@ a .pgn__card { .pgn__card-footer { width: 100%; - padding: $card-spacer-x; + padding: var(--pgn-card-spacer-x); display: flex; align-items: center; justify-content: center; @@ -145,7 +145,7 @@ a .pgn__card { padding-top: 0; & > * + * { - margin-inline-start: $card-footer-actions-gap; + margin-inline-start: var(--pgn-card-footer-action-gap); } } @@ -156,11 +156,11 @@ a .pgn__card { &.vertical-stacked { flex-direction: column-reverse; - padding-top: $card-spacer-x - $card-footer-actions-gap; + padding-top: var(--pgn-card-spacer-x) - var(--pgn-card-footer-action-gap); & > * { width: 100%; - margin-top: $card-footer-actions-gap; + margin-top: var(--pgn-card-footer-action-gap); } } @@ -168,24 +168,24 @@ a .pgn__card { flex-wrap: wrap; & > :not(:last-child) { - margin-inline-end: $card-footer-actions-gap; + margin-inline-end: var(--pgn-card-footer-action-gap); } } &.horizontal-stacked { flex-direction: column-reverse; - padding-top: $card-spacer-x - $card-footer-actions-gap; + padding-top: var(--pgn-card-spacer-x) - var(--pgn-card-footer-action-gap); & > * { - margin-top: $card-footer-actions-gap; + margin-top: var(--pgn-card-footer-action-gap); } } } .pgn__card-footer-text { - color: $gray-700; + color: var(--pgn-color-gray-700); order: 1; - font-size: $card-footer-text-font-size; + font-size: var(--pgn-card-footer-text-font-size); &.vertical { margin-inline-end: auto; @@ -197,13 +197,13 @@ a .pgn__card { } &.horizontal { - margin-top: $card-spacer-x; + margin-top: var(--pgn-card-spacer-x); width: 100%; text-align: center; } &.horizontal-stacked { - margin-top: $card-spacer-x; + margin-top: var(--pgn-card-spacer-x); width: 100%; text-align: center; order: -1; @@ -214,14 +214,14 @@ a .pgn__card { position: relative; &.horizontal { - max-width: $card-image-horizontal-max-width; - min-width: $card-image-horizontal-min-width; + max-width: var(--pgn-card-image-horizontal-width-max); + min-width: var(--pgn-card-image-horizontal-width-min); overflow: hidden; .pgn__card-image-cap { height: 100%; - border-top-left-radius: $card-image-border-radius; - border-bottom-left-radius: $card-image-border-radius; + border-top-left-radius: var(--pgn-card-border-radius-image); + border-bottom-left-radius: var(--pgn-card-border-radius-image); border-top-right-radius: 0; max-width: inherit; width: auto; @@ -229,20 +229,20 @@ a .pgn__card { } .pgn__card-logo-cap { - inset-inline-start: $card-logo-left-offset-horizontal; - bottom: $card-logo-bottom-offset-horizontal; + inset-inline-start: var(--pgn-card-logo-left-offset-horizontal); + bottom: var(--pgn-card-logo-bottom-offset-horizontal); } } &.vertical { - max-height: $card-image-vertical-max-height; + max-height: var(--pgn-card-image-vertical-height-max); } .pgn__card-image-cap-loader { .react-loading-skeleton { - margin-bottom: calc(#{$loading-skeleton-spacer} * -1); + margin-bottom: calc(#{var(--pgn-card-loading-skeleton-spacer)} * -1); position: relative; - top: calc(#{$loading-skeleton-spacer} * -1); + top: calc(#{var(--pgn-card-loading-skeleton-spacer)} * -1); height: 100%; } } @@ -252,21 +252,21 @@ a .pgn__card { object-fit: cover; max-height: inherit; width: 100%; - border-top-left-radius: $card-image-border-radius; - border-top-right-radius: $card-image-border-radius; + border-top-left-radius: var(--pgn-card-border-radius-image); + border-top-right-radius: var(--pgn-card-border-radius-image); } .pgn__card-logo-cap { position: absolute; - inset-inline-start: $card-logo-left-offset; - bottom: #{calc(#{$card-logo-bottom-offset} * -1)}; - width: $card-logo-width; - height: $card-logo-height; - border-radius: $card-logo-border-radius; - box-shadow: $level-1-box-shadow; + inset-inline-start: var(--pgn-card-logo-left-offset-base); + bottom: #{calc(#{var(--pgn-card-logo-bottom-offset-base)} * -1)}; + width: var(--pgn-card-logo-width); + height: var(--pgn-card-logo-height); + border-radius: var(--pgn-card-border-radius-logo); + box-shadow: var(--pgn-box-shadow-level-1); z-index: 1; padding: map_get($spacers, 2); - background-color: $white; + background-color: var(--pgn-color-white); } .pgn__card { @@ -281,9 +281,9 @@ a .pgn__card { &:focus, &.focus { - box-shadow: $level-1-box-shadow; + box-shadow: var(--pgn-box-shadow-level-1); outline: none; - border-color: $card-border-focus-color; + border-color: var(--pgn-card-border-color-focus); } } @@ -296,7 +296,7 @@ a .pgn__card { box-shadow: none; margin-bottom: 0; display: flex; - font-size: $font-size-sm; + font-size: var(--pgn-font-size-sm); line-height: 1.5rem; text-align: start; position: relative; @@ -311,10 +311,10 @@ a .pgn__card { } .pgn__card-status__heading { - font-size: $h4-font-size; - color: $black; + font-size: var(--pgn-font-size-h4); + color: var(--pgn-color-black); display: flex; - font-weight: $font-weight-bold; + font-weight: var(--pgn-font-weight-bold); line-height: 1.5rem; margin-bottom: .5rem; } @@ -340,13 +340,13 @@ a .pgn__card { } &.pgn__card-status__primary { - color: $white; - background-color: $primary-500; - border-color: $primary-500; - box-shadow: 0 0 0 1px $primary-500; + color: var(--pgn-color-white); + background-color: var(--pgn-color-primary-500); + border-color: var(--pgn-color-primary-500); + box-shadow: 0 0 0 1px var(--pgn-color-primary-500); .pgn__icon { - color: $white; + color: var(--pgn-color-white); } } } diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss index 20ed7f7a8b..4a99ef5374 100644 --- a/src/Card/_variables.scss +++ b/src/Card/_variables.scss @@ -2,20 +2,20 @@ $card-spacer-y: .75rem !default; $card-spacer-x: 1.25rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba($black, .125) !default; -$card-border-focus-color: rgba($black, .5) !default; +$card-border-width: var(--pgn-border-width) !default; +$card-border-radius: var(--pgn-border-radius-base) !default; +$card-border-color: rgba(var(--pgn-color-black), .125) !default; +$card-border-focus-color: rgba(var(--pgn-color-black), .5) !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; -$card-cap-bg: rgba($black, .03) !default; +$card-cap-bg: rgba(var(--pgn-color-black), .03) !default; $card-cap-color: null !default; $card-height: null !default; $card-color: null !default; -$card-bg: $white !default; +$card-bg: var(--pgn-color-white) !default; $card-img-overlay-padding: 1.25rem !default; -$card-group-margin: calc($grid-gutter-width / 2) !default; +$card-group-margin: calc(var(--pgn-grid-gutter-width) / 2) !default; $card-deck-margin: $card-group-margin !default; $card-grid-margin: $card-group-margin !default; @@ -23,7 +23,7 @@ $card-columns-count: 3 !default; $card-columns-gap: 1.25rem !default; $card-columns-margin: $card-spacer-y !default; -$card-divider-bg: $light-400 !default; +$card-divider-bg: var(--pgn-color-light-400) !default; $card-divider-margin-y: $card-spacer-y !default; $card-footer-actions-gap: .5rem !default; @@ -39,7 +39,7 @@ $card-logo-height: 4.125rem !default; $card-image-border-radius: .3125rem !default; $card-logo-border-radius: .25rem !default; -$card-footer-text-font-size: $x-small-font-size; +$card-footer-text-font-size: var(--pgn-font-size-small-x); $card-image-horizontal-max-width: 240px; $card-image-horizontal-min-width: $card-image-horizontal-max-width; diff --git a/src/Card/card-bootstrap.scss b/src/Card/card-bootstrap.scss new file mode 100644 index 0000000000..312355e7fd --- /dev/null +++ b/src/Card/card-bootstrap.scss @@ -0,0 +1,254 @@ +.card { + display: flex; + flex-direction: column; + min-width: 0; + height: var(--pgn-card-height-base); + word-wrap: break-word; + background-color: var(--pgn-card-bg); + background-clip: border-box; + border: var(--pgn-card-border-width) solid var(--pgn-card-border-color-base); + position: relative; + + @include border-radius(var(--pgn-card-border-radius-base)); + + > hr { + margin-right: 0; + margin-left: 0; + } + + > .list-group { + border-top: inherit; + border-bottom: inherit; + + &:first-child { + border-top-width: 0; + + @include border-top-radius($card-inner-border-radius); + } + + &:last-child { + border-bottom-width: 0; + + @include border-bottom-radius($card-inner-border-radius); + } + } + + > .card-header + .list-group, + > .list-group + .card-footer { + border-top: 0; + } +} + +.card-body { + flex: 1 1 auto; + min-height: 1px; + padding: var(--pgn-card-spacer-x); + color: var(--pgn-card-color); +} + +.card-title { + margin-bottom: var(--pgn-card-spacer-y); +} + +.card-subtitle { + margin-top: calc(var(--pgn-card-spacer-y) * -.5); + margin-bottom: 0; +} + +.card-text:last-child { + margin-bottom: 0; +} + +.card-link { + @include hover() { + text-decoration: none; + } + + + .card-link { + margin-left: var(--pgn-card-spacer-x); + } +} + +// Optional textual caps +.card-header { + padding: var(--pgn-card-spacer-y) var(--pgn-card-spacer-x); + margin-bottom: 0; // Removes the default margin-bottom of + color: var(--pgn-card-cap-color); + background-color: var(--pgn-card-cap-bg); + border-bottom: var(--pgn-card-border-width) solid var(--pgn-card-border-color-base); + + &:first-child { + @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); + } +} + +.card-footer { + padding: var(--pgn-card-spacer-y) var(--pgn-card-spacer-x); + color: var(--pgn-card-cap-color); + background-color: var(--pgn-card-cap-bg); + border-top: var(--pgn-card-border-width) solid var(--pgn-card-border-color-base); + + &:last-child { + @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); + } +} + +// Header navs +.card-header-tabs { + margin-right: calc(var(--pgn-card-spacer-x) * -.5); + margin-bottom: calc(var(--pgn-card-spacer-y) * -1); + margin-left: calc(var(--pgn-card-spacer-x) * -.5); + border-bottom: 0; +} + +.card-header-pills { + margin-right: calc(var(--pgn-card-spacer-x) * -.5); + margin-left: calc(var(--pgn-card-spacer-x) * .5); +} + +// Card image +.card-img-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: var(--pgn-card-image-overlay-padding); + + @include border-radius($card-inner-border-radius); +} + +.card-img, +.card-img-top, +.card-img-bottom { + flex-shrink: 0; + width: 100%; +} + +.card-img, +.card-img-top { + @include border-top-radius($card-inner-border-radius); +} + +.card-img, +.card-img-bottom { + @include border-bottom-radius($card-inner-border-radius); +} + +// Card deck +.card-deck { + .card { + margin-bottom: var(--pgn-card-margin-deck); + } + + @include media-breakpoint-up(sm) { + display: flex; + flex-flow: row wrap; + margin-right: calc(var(--pgn-card-margin-deck) * -1); + margin-left: calc(var(--pgn-card-margin-deck) * -1); + + .card { + flex: 1 0 0%; + margin-right: var(--pgn-card-margin-deck); + margin-bottom: 0; // Override the default + margin-left: var(--pgn-card-margin-deck); + } + } +} + +// Card groups +.card-group { + > .card { + margin-bottom: var(--pgn-card-margin-group); + } + + @include media-breakpoint-up(sm) { + display: flex; + flex-flow: row wrap; + + > .card { + flex: 1 0 0%; + margin-bottom: 0; + + + .card { + margin-left: 0; + border-left: 0; + } + + // Handle rounded corners + @if $enable-rounded { + &:not(:last-child) { + @include border-right-radius(0); + + .card-img-top, + .card-header { + border-top-right-radius: 0; + } + + .card-img-bottom, + .card-footer { + border-bottom-right-radius: 0; + } + } + + &:not(:first-child) { + @include border-left-radius(0); + + .card-img-top, + .card-header { + border-top-left-radius: 0; + } + + .card-img-bottom, + .card-footer { + border-bottom-left-radius: 0; + } + } + } + } + } +} + +// Columns +.card-columns { + .card { + margin-bottom: var(--pgn-card-columns-margin); + } + + @include media-breakpoint-up(sm) { + column-count: var(--pgn-card-columns-count); + column-gap: var(--pgn-card-columns-gap); + orphans: 1; + widows: 1; + + .card { + display: inline-block; + width: 100%; + } + } +} + +// Accordion +.accordion { + overflow-anchor: none; + + > .card { + overflow: hidden; + + &:not(:last-of-type) { + border-bottom: 0; + + @include border-bottom-radius(0); + } + + &:not(:first-of-type) { + @include border-top-radius(0); + } + + > .card-header { + @include border-radius(0); + + margin-bottom: calc(var(--pgn-card-border-width) * -1); + } + } +} diff --git a/src/Carousel/Carousel.scss b/src/Carousel/Carousel.scss index f2aad61197..060291e5eb 100644 --- a/src/Carousel/Carousel.scss +++ b/src/Carousel/Carousel.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/carousel"; +@import "carousel-bootstrap"; diff --git a/src/Carousel/_variables.scss b/src/Carousel/_variables.scss index 6ee4508d9a..f9dfac2002 100644 --- a/src/Carousel/_variables.scss +++ b/src/Carousel/_variables.scss @@ -10,11 +10,11 @@ $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-hit-area-height: 10px !default; $carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !default; +$carousel-indicator-active-bg: var(--pgn-color-white) !default; $carousel-indicator-transition: opacity .6s ease !default; $carousel-caption-width: 70% !default; -$carousel-caption-color: $white !default; +$carousel-caption-color: var(--pgn-color-white) !default; $carousel-control-icon-width: 20px !default; diff --git a/src/Carousel/carousel-bootstrap.scss b/src/Carousel/carousel-bootstrap.scss new file mode 100644 index 0000000000..3fead9d04c --- /dev/null +++ b/src/Carousel/carousel-bootstrap.scss @@ -0,0 +1,181 @@ +.carousel { + position: relative; +} + +.carousel.pointer-event { + touch-action: pan-y; +} + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; + + @include clearfix(); +} + +.carousel-item { + position: relative; + display: none; + float: left; + width: 100%; + margin-right: -100%; + backface-visibility: hidden; + + @include transition($carousel-transition); +} + +.carousel-item.active, +.carousel-item-next, +.carousel-item-prev { + display: block; +} + +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { + transform: translateX(100%); +} + +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { + transform: translateX(-100%); +} + +// Alternate transitions +.carousel-fade { + .carousel-item { + opacity: 0; + transition-property: opacity; + transform: none; + } + + .carousel-item.active, + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + z-index: 1; + opacity: 1; + } + + .active.carousel-item-left, + .active.carousel-item-right { + z-index: 0; + opacity: 0; + + @include transition(opacity 0s var(--pgn-carousel-transition-base)); + } +} + + +// Left/right controls for nav +.carousel-control-prev, +.carousel-control-next { + position: absolute; + top: 0; + bottom: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + width: var(--pgn-carousel-control-width-base); + padding: 0; + color: var(--pgn-carousel-control-color); + text-align: center; + background: none; + border: 0; + opacity: var(--pgn-carousel-control-opacity-base); + + @include transition(var(--pgn-carousel-control-transition)); + + @include hover-focus() { + color: var(--pgn-carousel-control-color); + text-decoration: none; + outline: 0; + opacity: var(--pgn-carousel-control-opacity-hover); + } +} + +.carousel-control-prev { + left: 0; + + @if $enable-gradients { + background-image: linear-gradient(90deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001)); + } +} + +.carousel-control-next { + right: 0; + + @if $enable-gradients { + background-image: linear-gradient(270deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001)); + } +} + +// Icons for within +.carousel-control-prev-icon, +.carousel-control-next-icon { + display: inline-block; + width: var(--pgn-carousel-control-width-icon); + height: var(--pgn-carousel-control-width-icon); + background: 50% / 100% 100% no-repeat; +} + +.carousel-control-prev-icon { + background-image: escape-svg($carousel-control-prev-icon-bg); +} + +.carousel-control-next-icon { + background-image: escape-svg($carousel-control-next-icon-bg); +} + +// Optional indicator pips +// +// Add an ordered list with the following class and add a list item for each +// slide your carousel holds. +.carousel-indicators { + position: absolute; + right: 0; + bottom: 0; + left: 0; + z-index: 15; + display: flex; + justify-content: center; + padding-left: 0; + margin-right: var(--pgn-carousel-control-width-base); + margin-left: var(--pgn-carousel-control-width-base); + list-style: none; + + li { + box-sizing: content-box; + flex: 0 1 auto; + width: var(--pgn-carousel-indicator-width); + height: var(--pgn-carousel-indicator-height-base); + margin-right: var(--pgn-carousel-indicator-spacer); + margin-left: var(--pgn-carousel-indicator-spacer); + text-indent: -999px; + cursor: pointer; + background-color: var(--pgn-carousel-indicator-active-bg); + background-clip: padding-box; + border-top: var(--pgn-carousel-indicator-height-area-hit) solid transparent; + border-bottom: var(--pgn-carousel-indicator-height-area-hit) solid transparent; + opacity: .5; + + @include transition(var(--pgn-carousel-indicator-transition)); + } + + .active { + opacity: 1; + } +} + +// Optional captions +.carousel-caption { + position: absolute; + right: calc((calc(100% - var(--pgn-carousel-caption-width))) * .5); + bottom: 20px; + left: calc((calc(100% - var(--pgn-carousel-caption-width))) * .5); + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: var(--pgn-carousel-caption-color); + text-align: center; +} diff --git a/src/CloseButton/CloseButton.scss b/src/CloseButton/CloseButton.scss index a84e20236e..e13cdb3822 100644 --- a/src/CloseButton/CloseButton.scss +++ b/src/CloseButton/CloseButton.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/close"; +@import "close-button-bootstrap"; diff --git a/src/CloseButton/_variables.scss b/src/CloseButton/_variables.scss index 3ce0a0d790..683fb9dbdc 100644 --- a/src/CloseButton/_variables.scss +++ b/src/CloseButton/_variables.scss @@ -1,6 +1,6 @@ // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; +$close-font-size: calc(var(--pgn-font-size-base) * 1.5) !default; +$close-font-weight: var(--pgn-font-weight-bold) !default; +$close-color: var(--pgn-color-black) !default; +$close-text-shadow: 0 1px 0 var(--pgn-color-white) !default; diff --git a/src/CloseButton/close-button-bootstrap.scss b/src/CloseButton/close-button-bootstrap.scss new file mode 100644 index 0000000000..e96dfaecf6 --- /dev/null +++ b/src/CloseButton/close-button-bootstrap.scss @@ -0,0 +1,32 @@ +.close { + float: right; + + @include font-size(var(--pgn-close-button-font-size)); + + font-weight: var(--pgn-close-button-font-weight); + line-height: 1; + color: var(--pgn-close-button-color); + text-shadow: var(--pgn-close-button-text-shadow); + opacity: .5; + + @include hover() { + color: var(--pgn-close-button-color); + text-decoration: none; + } + + &:not(:disabled):not(.disabled) { + @include hover-focus() { + opacity: .75; + } + } +} + +button.close { + padding: 0; + background-color: transparent; + border: 0; +} + +a.close.disabled { + pointer-events: none; +} diff --git a/src/Code/Code.scss b/src/Code/Code.scss index 62147a3ba5..f92537e5e8 100644 --- a/src/Code/Code.scss +++ b/src/Code/Code.scss @@ -1,2 +1,2 @@ @import "variables"; -@import "~bootstrap/scss/code"; +@import "code-bootstrap"; diff --git a/src/Code/_variables.scss b/src/Code/_variables.scss index f48f830f0b..9f0b60f426 100644 --- a/src/Code/_variables.scss +++ b/src/Code/_variables.scss @@ -3,14 +3,14 @@ $code-font-size: 87.5% !default; $code-color: #E83E8C !default; -$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; -$nested-kbd-font-weight: $font-weight-bold !default; +$kbd-box-shadow: inset 0 -.1rem 0 rgba(var(--pgn-color-black), .25) !default; +$nested-kbd-font-weight: var(--pgn-font-weight-bold) !default; // HTML Keyboard Input element () styles $kbd-padding-y: .2rem !default; $kbd-padding-x: .4rem !default; $kbd-font-size: $code-font-size !default; -$kbd-color: $white !default; +$kbd-color: var(--pgn-color-white) !default; $kbd-bg: theme-color("gray", "hover") !default; $pre-color: theme-color("gray", "dark-text") !default; diff --git a/src/Code/code-bootstrap.scss b/src/Code/code-bootstrap.scss new file mode 100644 index 0000000000..3f6a4173ad --- /dev/null +++ b/src/Code/code-bootstrap.scss @@ -0,0 +1,56 @@ +code { + @include font-size(var(--pgn-code-font-size)); + + color: var(--pgn-code-color); + word-wrap: break-word; + + a > & { + color: inherit; + } +} + +// User input typically entered via keyboard +kbd { + padding: var(--pgn-code-kbd-padding-y) var(--pgn-code-kbd-padding-x); + + @include font-size(var(--pgn-code-kbd-font-size)); + + color: var(--pgn-code-kbd-color); + background-color: var(--pgn-code-kbd-bg); + + @include border-radius(var(--pgn-border-radius-sm)); + @include box-shadow(var(--pgn-code-kbd-box-shadow)); + + kbd { + padding: 0; + + @include font-size(100%); + + font-weight: var(--pgn-code-kbd-nested-font-weight); + + @include box-shadow(none); + } +} + +// Blocks of code +pre { + display: block; + + @include font-size(var(--pgn-code-font-size)); + + color: var(--pgn-code-pre-color); + + // Account for some code outputs that place code tags in pre tags + code { + @include font-size(inherit); + + color: inherit; + word-break: normal; + } +} + +// Enable scrollable blocks of code +.pre-scrollable { + max-height: var(--pgn-code-pre-scrollable-max-height); + overflow-y: scroll; +} diff --git a/src/Collapsible/Collapsible.scss b/src/Collapsible/Collapsible.scss index 8af3b67ce9..cfc3db11e1 100644 --- a/src/Collapsible/Collapsible.scss +++ b/src/Collapsible/Collapsible.scss @@ -7,9 +7,9 @@ border-radius: 0; .collapsible-trigger { - padding: $collapsible-card-spacer-y $collapsible-card-spacer-x; + padding: var(--pgn-collapsible-card-spacer-y-base) var(--pgn-collapsible-card-spacer-x-base); border-radius: $card-inner-border-radius; - border-bottom: $card-border-width solid transparent; + border-bottom: var(--pgn-card-border-width) solid transparent; transition: border-color 100ms ease 150ms; cursor: pointer; display: flex; @@ -24,7 +24,7 @@ &[aria-expanded="true"] { border-radius: $card-inner-border-radius $card-inner-border-radius 0 0; - border-color: $card-border-color; + border-color: var(--pgn-card-border-color-base); transition: none; text-align: start; } @@ -34,8 +34,8 @@ // stylelint-disable-next-line @extend .card-body; - padding: $collapsible-card-spacer-y $collapsible-card-spacer-x; - padding-left: $collapsible-card-body-spacer-left; + padding: var(--pgn-collapsible-card-spacer-y-base) var(--pgn-collapsible-card-spacer-x-base); + padding-left: var(--pgn-collapsible-card-spacer-left-body); text-align: start; & > *:last-child { @@ -44,7 +44,7 @@ } .collapsible-icon { - margin-inline-start: $collapsible-card-spacer-icon; + margin-inline-start: var(--pgn-collapsible-card-spacer-icon); } } @@ -53,11 +53,11 @@ @extend .collapsible-card; .collapsible-trigger { - padding: $collapsible-card-spacer-y-lg $collapsible-card-spacer-x-lg; + padding: var(--pgn-collapsible-card-spacer-y-lg) var(--pgn-collapsible-card-spacer-x-lg); } .collapsible-body { - padding: $collapsible-card-spacer-y-lg $collapsible-card-spacer-x-lg; + padding: var(--pgn-collapsible-card-spacer-y-lg) var(--pgn-collapsible-card-spacer-x-lg); } } @@ -68,11 +68,11 @@ align-items: center; text-decoration: underline; color: theme-color("primary", "default"); - padding: $collapsible-basic-spacer-y $collapsible-basic-spacer-x; + padding: var(--pgn-collapsible-card-spacer-basic-y) var(--pgn-collapsible-card-spacer-basic-x); } .collapsible-body { - padding: $collapsible-basic-spacer-y $collapsible-basic-spacer-x; + padding: var(--pgn-collapsible-card-spacer-basic-y) var(--pgn-collapsible-card-spacer-basic-x); text-align: start; &.collapsing { @@ -81,6 +81,6 @@ } .collapsible-icon { - margin-left: $collapsible-basic-spacer-icon; + margin-left: var(--pgn-collapsible-card-spacer-basic-icon); } } diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss index 4934f22d30..e9fcf4c56a 100644 --- a/src/DataTable/DataTable.scss +++ b/src/DataTable/DataTable.scss @@ -1,23 +1,23 @@ @import "variables"; .pgn__data-table-wrapper { - font-size: $font-size-sm; - border-radius: $border-radius; - background-color: $data-table-background-color; - box-shadow: $data-table-box-shadow; + font-size: var(--pgn-font-size-sm); + border-radius: var(--pgn-border-radius-base); + background-color: var(--pgn-data-table-background-color); + box-shadow: var(--pgn-data-table-box-shadow); &.hide-shadow { box-shadow: none; } > :first-child { - border-top-left-radius: $border-radius; - border-top-right-radius: $border-radius; + border-top-left-radius: var(--pgn-border-radius-base); + border-top-right-radius: var(--pgn-border-radius-base); } > :last-child { - border-bottom-left-radius: $border-radius; - border-bottom-right-radius: $border-radius; + border-bottom-left-radius: var(--pgn-border-radius-base); + border-bottom-right-radius: var(--pgn-border-radius-base); } } @@ -88,15 +88,15 @@ display: flex; align-items: flex-start; - @media (max-width: $max-width-xl) { + @media (max-width: var(--pgn-container-max-width-xl)) { overflow-x: scroll; } .pgn__data-table-layout-sidebar { - background-color: $data-table-background-color; - border-radius: $border-radius; - box-shadow: $data-table-box-shadow; - padding: $data-table-padding-small; + background-color: var(--pgn-data-table-background-color); + border-radius: var(--pgn-border-radius-base); + box-shadow: var(--pgn-data-table-box-shadow); + padding: var(--pgn-data-table-padding-small); margin-right: map_get($spacers, 4); flex-grow: 0; } @@ -123,23 +123,23 @@ width: 100%; &.is-striped tr:nth-child(even) { - background-color: $light-200; + background-color: var(--pgn-color-light-200); } th { - background-color: $light-300; - padding: $data-table-cell-padding; + background-color: var(--pgn-color-light-300); + padding: var(--pgn-data-table-padding-cell); text-align: start; } td { - padding: $table-cell-padding; + padding: var(--pgn-table-cell-padding-base); line-height: 24px; text-align: start; } & tr.is-selected { - background-color: $info-100 !important; + background-color: var(--pgn-color-info-100) !important; } } @@ -151,17 +151,17 @@ } .pgn__data-table-empty { - padding: $data-table-padding-x $data-table-padding-y; + padding: var(--pgn-data-table-padding-x) var(--pgn-data-table-padding-y); } .pgn__data-table-actions { display: flex; justify-content: space-between; - padding-bottom: $data-table-padding-small; + padding-bottom: var(--pgn-data-table-padding-small); } .pgn__data-table-status-bar { - padding: $data-table-padding-y $data-table-padding-x; + padding: var(--pgn-data-table-padding-y) var(--pgn-data-table-padding-x); } .pgn__data-table-filters { @@ -173,7 +173,7 @@ } .pgn__data-table-filters-dropdown-item { - padding: $data-table-padding-small 14px; + padding: var(--pgn-data-table-padding-small) 14px; min-width: 15em; } @@ -186,9 +186,9 @@ .pgn__data-table-footer { display: flex; justify-content: space-between; - padding: $data-table-padding-x $data-table-padding-y; + padding: var(--pgn-data-table-padding-x) var(--pgn-data-table-padding-y); align-items: center; - border-top: $data-table-border; + border-top: var(--pgn-data-table-border); .btn-icon .pgn__icon { [dir="rtl"] & { @@ -201,14 +201,14 @@ display: flex; .pgn__page-count { - align-self: $data-table-footer-position; + align-self: var(--pgn-data-table-footer-position); } } .pgn__data-table-pagination-dropdown { overflow-y: auto; - max-height: $data-table-pagination-dropdown-max-height; - min-width: $data-table-pagination-dropdown-min-width; + max-height: var(--pgn-data-table-pagination-dropdown-max-height); + min-width: var(--pgn-data-table-pagination-dropdown-min-width); a { text-align: center; @@ -216,7 +216,7 @@ } .pgn__checkbox-filter-label { - font-weight: $font-weight-bold; + font-weight: var(--pgn-font-weight-bold); } .pgn__checkbox-filter { @@ -251,7 +251,7 @@ } .pgn__data-table-card-view { - padding: 0 $data-table-padding-x; + padding: 0 var(--pgn-data-table-padding-x); } .pgn__data-table__action-btn { @@ -273,6 +273,6 @@ .pgn__datatable__overflow-actions-menu { background: #FFFFFF; padding: map_get($spacers, 2); - box-shadow: $level-1-box-shadow; + box-shadow: var(--pgn-box-shadow-level-1); border-radius: 4px; } diff --git a/src/DataTable/_variables.scss b/src/DataTable/_variables.scss index 50648dafa3..e401be795c 100644 --- a/src/DataTable/_variables.scss +++ b/src/DataTable/_variables.scss @@ -1,6 +1,6 @@ -$data-table-background-color: $white !default; -$data-table-border: 1px solid $gray-200 !default; -$data-table-box-shadow: $box-shadow-sm !default; +$data-table-background-color: var(--pgn-color-white) !default; +$data-table-border: 1px solid var(--pgn-color-gray-200) !default; +$data-table-box-shadow: var(--pgn-box-shadow-sm) !default; $data-table-padding-x: .75rem !default; $data-table-padding-y: .75rem !default; $data-table-padding-small: .5rem !default; diff --git a/src/Dropdown/_variables.scss b/src/Dropdown/_variables.scss index dfc4e9316f..24e768c403 100644 --- a/src/Dropdown/_variables.scss +++ b/src/Dropdown/_variables.scss @@ -6,23 +6,23 @@ $dropdown-min-width: 18rem !default; $dropdown-padding-x: 0 !default; $dropdown-padding-y: .5rem !default; $dropdown-spacer: .125rem !default; -$dropdown-font-size: $font-size-base !default; -$dropdown-color: $body-color !default; -$dropdown-bg: $white !default; +$dropdown-font-size: var(--pgn-font-size-base) !default; +$dropdown-color: var(--pgn-body-color) !default; +$dropdown-bg: var(--pgn-color-white) !default; $dropdown-border-color: rgba($black, .15) !default; -$dropdown-border-radius: $border-radius !default; -$dropdown-border-width: $border-width !default; +$dropdown-border-radius: var(--pgn-border-radius-base) !default; +$dropdown-border-width: var(--pgn-border-width) !default; $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; $dropdown-divider-bg: theme-color("gray", "background") !default; -$dropdown-divider-margin-y: calc($spacer / 2) !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; +$dropdown-divider-margin-y: calc(var(--pgn-core-spacer) / 2) !default; +$dropdown-box-shadow: 0 .5rem 1rem rgba(var(--pgn-color-black), .175) !default; $dropdown-link-color: theme-color("gray", "dark-text") !default; $dropdown-link-hover-color: darken(theme-color("gray", "dark-text"), 5%) !default; -$dropdown-link-hover-bg: $light-300 !default; +$dropdown-link-hover-bg: var(--pgn-color-light-300) !default; -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-active-color: var(--pgn-component-active-color) !default; +$dropdown-link-active-bg: var(--pgn-component-active-bg) !default; $dropdown-link-disabled-color: theme-color("gray", "light-text") !default; diff --git a/src/Dropzone/Dropzone.scss b/src/Dropzone/Dropzone.scss index e804efeff4..7ed9ce53e9 100644 --- a/src/Dropzone/Dropzone.scss +++ b/src/Dropzone/Dropzone.scss @@ -5,31 +5,31 @@ justify-content: center; align-items: center; min-height: 200px; - padding: $dropzone-padding; - border: $dropzone-border-default; + padding: var(--pgn-dropzone-padding); + border: var(--pgn-dropzone-border-default); box-sizing: border-box; cursor: pointer; &:hover { - border: $dropzone-border-hover; + border: var(--pgn-dropzone-border-hover); } &:focus { - border: $dropzone-border-focus; + border: var(--pgn-dropzone-border-focus); } &.pgn__dropzone-validation-error { - border: $dropzone-border-error; + border: var(--pgn-dropzone-border-error); } &.pgn__dropzone-active { - border: $dropzone-border-active; + border: var(--pgn-dropzone-border-active); } } .pgn__dropzone-error-wrapper { text-align: center; - color: $dropzone-error-wrapper-color; + color: var(--pgn-dropzone-error-wrapper-color); } .pgn__dropzone-generic-alert { @@ -46,7 +46,7 @@ .pgn__dropzone__upload-icon-wrapper { height: 56px; width: 56px; - background: $light-300; + background: var(--pgn-color-light-300); border-radius: 50%; position: relative; margin-bottom: map-get($spacers, 4); @@ -62,6 +62,6 @@ } .pgn__dropzone__upload-restriction-message { - font-size: $dropzone-restriction-msg-font-size; - color: $dropzone-restriction-msg-color; + font-size: var(--pgn-dropzone-restriction-msg-font-size); + color: var(--pgn-dropzone-restriction-msg-color); } diff --git a/src/Dropzone/_variables.scss b/src/Dropzone/_variables.scss index ee7caed6a4..b2bb8b1a9a 100644 --- a/src/Dropzone/_variables.scss +++ b/src/Dropzone/_variables.scss @@ -1,9 +1,9 @@ $dropzone-padding: 1.5rem !default; -$dropzone-border-default: 1px dashed $gray-500 !default; -$dropzone-border-hover: 2px solid $info-300 !default; -$dropzone-border-focus: 2px solid $info-300 !default; -$dropzone-border-active: 2px solid $primary-500 !default; -$dropzone-border-error: 2px solid $danger-300 !default; -$dropzone-error-wrapper-color: $danger-500 !default; -$dropzone-restriction-msg-font-size: $x-small-font-size !default; -$dropzone-restriction-msg-color: $gray-500 !default; +$dropzone-border-default: 1px dashed var(--pgn-color-gray-500) !default; +$dropzone-border-hover: 2px solid var(--pgn-color-info-300) !default; +$dropzone-border-focus: 2px solid var(--pgn-color-info-300) !default; +$dropzone-border-active: 2px solid var(--pgn-color-primary-500) !default; +$dropzone-border-error: 2px solid var(--pgn-color-danger-300) !default; +$dropzone-error-wrapper-color: var(--pgn-color-danger-500) !default; +$dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x) !default; +$dropzone-restriction-msg-color: var(--pgn-color-gray-500) !default; diff --git a/src/Fieldset/Fieldset.scss b/src/Fieldset/Fieldset.scss index 5e039319ad..1b8ce84463 100644 --- a/src/Fieldset/Fieldset.scss +++ b/src/Fieldset/Fieldset.scss @@ -1,5 +1,5 @@ .paragon-fieldset { - margin-bottom: $spacer * 1.5; + margin-bottom: calc(var(--pgn-core-spacer) * 1.5); .form-control { height: auto; diff --git a/src/Form/_Form.scss b/src/Form/_Form.scss index 2ec5576aab..6685888b1d 100644 --- a/src/Form/_Form.scss +++ b/src/Form/_Form.scss @@ -14,15 +14,15 @@ $select-icon-padding: .5625rem !default; .form-control.is-invalid.is-invalid-nodanger { @include form-control-focus(true); - border-color: $input-border-color; + border-color: var(--pgn-form-input-border-color); } .form-control:hover { - border: solid $input-hover-width $dark-700; + border: solid var(--pgn-form-input-width-hover) var(--pgn-color-dark-700); } .pgn__form-group { - margin-bottom: $form-group-margin-bottom; + margin-bottom: var(--pgn-form-group-margin-bottom); text-align: start; .form-check { @@ -47,52 +47,52 @@ $select-icon-padding: .5625rem !default; align-items: flex-start; @media (min-width: map-get($grid-breakpoints, "sm")) { - margin-inline-end: $custom-control-gutter; + margin-inline-end: var(--pgn-form-custom-control-gutter); } &.has-prepended-node { .form-control { - padding-inline-start: calc(#{$input-padding-x} + #{$form-control-icon-width}); + padding-inline-start: calc(#{var(--pgn-form-input-padding-x-base)} + #{var(--pgn-form-control-icon-width)}); [dir="rtl"] & { - background-position: left $select-icon-padding center; + background-position: left var(--pgn-form-select-icon-padding) center; } } .form-control-lg { - padding-inline-start: calc(#{$input-padding-x-lg} + #{$form-control-icon-width}); + padding-inline-start: calc(#{var(--pgn-form-input-padding-x-lg)} + #{var(--pgn-form-control-icon-width)}); } .form-control-sm { - padding-inline-start: calc(#{$input-padding-x-sm} + #{$form-control-icon-width}); + padding-inline-start: calc(#{var(--pgn-form-input-padding-x-sm)} + #{var(--pgn-form-control-icon-width)}); } } &.has-appended-node { .form-control { - padding-inline-end: calc(#{$input-padding-x} + #{$form-control-icon-width}); + padding-inline-end: calc(#{var(--pgn-form-input-padding-x-base)} + #{var(--pgn-form-control-icon-width)}); } .form-control-lg { - padding-inline-end: calc(#{$input-padding-x-lg} + #{$form-control-icon-width}); + padding-inline-end: calc(#{var(--pgn-form-input-padding-x-lg)} + #{var(--pgn-form-control-icon-width)}); } .form-control-sm { - padding-inline-end: calc(#{$input-padding-x-sm} + #{$form-control-icon-width}); + padding-inline-end: calc(#{var(--pgn-form-input-padding-x-sm)} + #{var(--pgn-form-control-icon-width)}); } } - font-size: $input-font-size; - line-height: $input-line-height; + font-size: var(--pgn-form-input-font-size-base); + line-height: var(--pgn-form-input-line-height-base); &.pgn__form-control-decorator-group-sm { - font-size: $input-font-size-sm; - line-height: $input-line-height-sm; + font-size: var(--pgn-form-input-font-size-sm); + line-height: var(--pgn-form-input-line-height-sm); } &.pgn__form-control-decorator-group-lg { - font-size: $input-font-size-lg; - line-height: $input-line-height-lg; + font-size: var(--pgn-form-input-font-size-lg); + line-height: var(--pgn-form-input-line-height-lg); } } @@ -106,8 +106,8 @@ $select-icon-padding: .5625rem !default; pointer-events: initial; } - height: $input-height; - min-width: $input-height; + height: var(--pgn-form-input-height-base); + min-width: var(--pgn-form-input-height-base); line-height: inherit; display: flex; justify-content: center; @@ -116,58 +116,58 @@ $select-icon-padding: .5625rem !default; &.pgn__form-control-decorator-leading { inset-inline-start: 0; - padding-inline-start: $input-padding-x; - padding-inline-end: calc($input-padding-x / 2); + padding-inline-start: var(--pgn-form-input-padding-x-base); + padding-inline-end: calc(var(--pgn-form-input-padding-x-base) / 2); } &.pgn__form-control-decorator-trailing { inset-inline-end: 0; - padding-inline-start: calc($input-padding-x / 2); - padding-inline-end: calc(#{$input-padding-y-sm} - #{2 * $input-border-width}); + padding-inline-start: calc(var(--pgn-form-input-padding-x-base) / 2); + padding-inline-end: calc(#{var(--pgn-form-input-padding-y-sm)} - (2 * var(--pgn-form-input-border-width))); } .pgn__form-control-decorator-group-lg & { - height: $input-height-lg; - min-width: $input-height-lg; + height: var(--pgn-form-input-height-lg); + min-width: var(--pgn-form-input-height-lg); &.pgn__form-control-decorator-leading { - padding-left: $input-padding-x-lg; - padding-right: calc($input-padding-x-lg / 2); + padding-left: var(--pgn-form-input-padding-x-lg); + padding-right: calc(var(--pgn-form-input-padding-x-lg) / 2); } &.pgn__form-control-decorator-trailing { - padding-left: calc($input-padding-x-lg / 2); - padding-right: calc(#{$input-padding-y} - #{2 * $input-border-width}); + padding-left: calc(var(--pgn-form-input-padding-x-lg) / 2); + padding-right: calc(#{var(--pgn-form-input-padding-y-base)} - (2 * var(--pgn-form-input-border-width))); } } .pgn__form-control-decorator-group-sm & { - height: $input-height-sm; - min-width: $input-height-lg; + height: var(--pgn-form-input-height-sm); + min-width: var(--pgn-form-input-height-lg); &.pgn__form-control-decorator-leading { - padding-left: $input-padding-x-sm; - padding-right: calc($input-padding-x-sm / 2); + padding-left: var(--pgn-form-input-padding-x-sm); + padding-right: calc(var(--pgn-form-input-padding-x-sm) / 2); } &.pgn__form-control-decorator-trailing { - padding-left: calc($input-padding-x-sm / 2); - padding-right: calc(#{$input-padding-y-sm} - #{2 * $input-border-width}); + padding-left: calc(var(--pgn-form-input-padding-x-sm) / 2); + padding-right: calc(var(--pgn-form-input-padding-y-sm) - (2 * var(--pgn-form-input-border-width))); } } .btn-icon { - color: $gray-500 !important; + color: var(--pgn-color-gray-500) !important; &:hover { - background-color: $gray-500 !important; - color: $white !important; + background-color: var(--pgn-color-gray-500) !important; + color: var(--pgn-color-white) !important; } &:focus { - background-color: $white !important; - color: $gray-500 !important; - box-shadow: inset 0 0 0 2px $gray-500 !important; + background-color: var(--pgn-color-white) !important; + color: var(--pgn-color-gray-500) !important; + box-shadow: inset 0 0 0 2px var(--pgn-color-gray-500) !important; } } } @@ -176,7 +176,7 @@ $select-icon-padding: .5625rem !default; .pgn__form-control-floating-label { position: absolute; - inset-inline-start: $input-border-width; + inset-inline-start: var(--pgn-form-input-border-width); inset-inline-end: 0; display: flex; width: 100%; @@ -198,7 +198,7 @@ $select-icon-padding: .5625rem !default; // Prevent background-color from being output as "transparent" // Firefox doesn't handle the first animation well from transparent to // a color. Adding an alpha channel smooths it out. - background-color: rgba($input-bg, .01); + background-color: rgba(var(--pgn-form-input-bg-base), .01); white-space: nowrap; max-width: 75vw; display: block; @@ -212,39 +212,39 @@ $select-icon-padding: .5625rem !default; .has-leading-element & { .pgn__form-control-floating-label-text { - transform: translateX(#{$form-control-icon-width}); + transform: translateX(#{var(--pgn-form-control-icon-width)}); [dir="rtl"] & { - transform: translateX(-#{$form-control-icon-width}); + transform: translateX(-#{var(--pgn-form-control-icon-width)}); } } } @include form-control-floating-label-initial( - $input-padding-x, - $input-padding-y, - $input-line-height, - $input-font-size, - $input-border-width + var(--pgn-form-input-padding-x-base), + var(--pgn-form-input-padding-y-base), + var(--pgn-form-input-line-height-base), + var(--pgn-form-input-font-size-base), + var(--pgn-form-input-border-width) ); .pgn__form-control-decorator-group-lg & { @include form-control-floating-label-initial( - $input-padding-x-lg, - $input-padding-y-lg, - $input-line-height-lg, - $input-font-size-lg, - $input-border-width + var(--pgn-form-input-padding-x-lg), + var(--pgn-form-input-padding-y-lg), + var(--pgn-form-input-line-height-lg), + var(--pgn-form-input-font-size-lg), + var(--pgn-form-input-border-width) ); } .pgn__form-control-decorator-group-sm & { @include form-control-floating-label-initial( - $input-padding-x-sm, - $input-padding-y-sm, - $input-line-height-sm, - $input-font-size-sm, - $input-border-width + var(--pgn-form-input-padding-x-sm), + var(--pgn-form-input-padding-y-sm), + var(--pgn-form-input-line-height-sm), + var(--pgn-form-input-font-size-sm), + var(--pgn-form-input-border-width) ); } @@ -252,35 +252,35 @@ $select-icon-padding: .5625rem !default; // select.form-control ~ &, .form-control.has-value ~ & { .pgn__form-control-floating-label-text { - background-color: $input-bg; + background-color: var(--pgn-form-input-bg-base); } @include form-control-floating-label-float( - $input-padding-x, - $input-padding-y, - $input-line-height, - $input-font-size, - $input-border-width + var(--pgn-form-input-padding-x-base), + var(--pgn-form-input-padding-y-base), + var(--pgn-form-input-line-height-base), + var(--pgn-form-input-font-size-base), + var(--pgn-form-input-border-width) ); } .float-label.pgn__form-control-decorator-group-lg & { @include form-control-floating-label-float( - $input-padding-x-lg, - $input-padding-y-lg, - $input-line-height-lg, - $input-font-size-lg, - $input-border-width + var(--pgn-form-input-padding-x-lg), + var(--pgn-form-input-padding-y-lg), + var(--pgn-form-input-line-height-lg), + var(--pgn-form-input-font-size-lg), + var(--pgn-form-input-border-width) ); } .float-label.pgn__form-control-decorator-group-sm & { @include form-control-floating-label-float( - $input-padding-x-sm, - $input-padding-y-sm, - $input-line-height-sm, - $input-font-size-sm, - $input-border-width + var(--pgn-form-input-padding-x-sm), + var(--pgn-form-input-padding-y-sm), + var(--pgn-form-input-line-height-sm), + var(--pgn-form-input-font-size-sm), + var(--pgn-form-input-border-width) ); } } @@ -319,22 +319,22 @@ $select-icon-padding: .5625rem !default; } select.form-control { - padding-inline-end: 2rem + $select-icon-padding; + padding-inline-end: calc(#{var(--pgn-form-select-icon-padding)} + 2rem); background-image: $custom-select-indicator; - background-position: right $select-icon-padding center; + background-position: right var(--pgn-form-select-icon-padding) center; background-repeat: no-repeat; background-size: 24px 24px; appearance: none; [dir="rtl"] & { - background-position: left $select-icon-padding center; + background-position: left var(--pgn-form-select-icon-padding) center; } } // Regular Form Label .pgn__form-label { - font-size: $input-font-size; + font-size: var(--pgn-form-input-font-size-base); display: inline-block; margin-bottom: .5rem; @@ -348,11 +348,11 @@ select.form-control { } &.pgn__form-label-lg { - font-size: $input-font-size-lg; + font-size: var(--pgn-form-input-font-size-lg); } &.pgn__form-label-sm { - font-size: $input-font-size-sm; + font-size: var(--pgn-form-input-font-size-sm); } } @@ -362,14 +362,14 @@ select.form-control { .pgn__form-radio-input, .pgn__form-switch-input { appearance: none; - height: $custom-control-indicator-size; - width: $custom-control-indicator-size; - background-color: $custom-control-indicator-bg; + height: var(--pgn-form-custom-control-indicator-size); + width: var(--pgn-form-custom-control-indicator-size); + background-color: var(--pgn-form-custom-control-indicator-bg-base); border: - solid $custom-control-indicator-border-width - $custom-control-indicator-border-color; - border-radius: $custom-checkbox-indicator-border-radius; - margin-inline-end: $custom-control-gutter; + solid var(--pgn-form-custom-control-indicator-border-width) + var(--pgn-form-custom-control-indicator-border-color); + border-radius: var(--pgn-form-custom-checkbox-indicator-border-radius); + margin-inline-end: var(--pgn-form-custom-control-gutter); background-position: center; &:not(:disabled) { @@ -377,7 +377,7 @@ select.form-control { } &:not(:disabled):hover { - box-shadow: $custom-control-indicator-focus-box-shadow; + box-shadow: var(--pgn-form-custom-control-indicator-checked-box-shadow-focus); } &:disabled { @@ -385,7 +385,7 @@ select.form-control { } &:checked { - border-color: $custom-control-indicator-checked-border-color; + border-color: var(--pgn-form-custom-control-indicator-checked-border-color-base); } } @@ -406,24 +406,24 @@ select.form-control { outline: none; box-shadow: none; text-decoration: none; - border-color: $input-focus-border-color; + border-color: var(--pgn-form-input-focus-color-border); } &:focus::before { content: ""; position: absolute; - top: calc(#{$form-check-position-axis} * -1); - right: calc(#{$form-check-position-axis} * -1); - bottom: calc(#{$form-check-position-axis} * -1); - left: calc(#{$form-check-position-axis} * -1); - border: $form-check-border-width solid $input-focus-border-color; - border-radius: $form-check-focus-border-radius; + top: calc(#{var(--pgn-form-check-position-axis)} * -1); + right: calc(#{var(--pgn-form-check-position-axis)} * -1); + bottom: calc(#{var(--pgn-form-check-position-axis)} * -1); + left: calc(#{var(--pgn-form-check-position-axis)} * -1); + border: var(--pgn-form-check-border-width) solid var(--pgn-form-input-focus-color-border); + border-radius: var(--pgn-form-check-border-radius-focus); } } .pgn__form-switch-input { - width: $custom-switch-width; - border-radius: $custom-switch-indicator-border-radius; + width: var(--pgn-form-custom-switch-width); + border-radius: var(--pgn-form-custom-switch-indicator-border-radius); background-image: escape-svg($custom-switch-indicator-icon-off); background-position: left center; background-repeat: no-repeat; @@ -442,23 +442,23 @@ select.form-control { } .pgn__form-switch-helper-text { - color: $gray-500; - font-size: $font-size-xs; + color: var(--pgn-color-gray-500); + font-size: var(--pgn-font-size-xs); margin-top: .25rem; } .pgn__form-radio-input { - border-radius: $custom-radio-indicator-border-radius; + border-radius: var(--pgn-form-custom-radio-indicator-border-radius); &:checked { background-image: escape-svg($custom-radio-indicator-icon-checked); } &:focus { - border-color: $black; + border-color: var(--pgn-color-black); &::before { - border-radius: $custom-radio-indicator-border-radius; + border-radius: var(--pgn-form-custom-radio-indicator-border-radius); } } } @@ -472,7 +472,7 @@ select.form-control { display: flex; align-items: center; margin-bottom: 0; - line-height: $custom-control-indicator-size; + line-height: var(--pgn-form-custom-control-indicator-size); } input:disabled ~ * { @@ -480,17 +480,17 @@ select.form-control { } &.pgn__form-control-invalid input { - border-color: $form-feedback-invalid-color; + border-color: var(--pgn-form-feedback-color-invalid); } &.pgn__form-control-valid input { - border-color: $form-feedback-valid-color; + border-color: var(--pgn-form-feedback-color-valid); } &.pgn__form-control-label-left { .pgn__form-label { order: 1; - margin-inline-end: $custom-control-gutter; + margin-inline-end: var(--pgn-form-custom-control-gutter); } input { @@ -508,7 +508,7 @@ select.form-control { .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { [dir="rtl"] & { - border-radius: 0 $input-border-radius $input-border-radius 0; + border-radius: 0 var(--pgn-form-input-border-radius-base) var(--pgn-form-input-border-radius-base) 0; } } @@ -519,7 +519,7 @@ select.form-control { .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { [dir="rtl"] & { - border-radius: $input-border-radius 0 0 $input-border-radius; + border-radius: var(--pgn-form-input-border-radius-base) 0 0 var(--pgn-form-input-border-radius-base); } } diff --git a/src/Form/_FormText.scss b/src/Form/_FormText.scss index 77a5aa7c97..74492ce621 100644 --- a/src/Form/_FormText.scss +++ b/src/Form/_FormText.scss @@ -1,5 +1,5 @@ .pgn__form-text { - font-size: $small-font-size; + font-size: var(--pgn-font-size-small-base); align-items: center; .pgn__icon { @@ -21,35 +21,35 @@ } .pgn__form-text-default { - color: $text-muted; + color: var(--pgn-text-muted); } .pgn__form-text-valid { - color: $form-feedback-valid-color; + color: var(--pgn-form-feedback-color-valid); } .pgn__form-text-invalid { - color: $form-feedback-invalid-color; + color: var(--pgn-form-feedback-color-invalid); } .pgn__form-text-warning { - color: $gray-900; + color: var(--pgn-color-gray-900); } .pgn__form-text-criteria-empty { .pgn__icon { - color: $text-muted; + color: var(--pgn-text-muted); } } .pgn__form-text-criteria-valid { .pgn__icon { - color: $form-feedback-valid-color; + color: var(--pgn-form-feedback-color-valid); } } .pgn__form-text-criteria-invalid { .pgn__icon { - color: $form-feedback-invalid-color; + color: var(--pgn-form-feedback-color-invalid); } } diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss index a186e6d6c6..97e8d0cfea 100644 --- a/src/Form/_mixins.scss +++ b/src/Form/_mixins.scss @@ -25,6 +25,8 @@ $half-leading: calc(($line-height - .8) / 2); $percent-height-minus-no-bottom-leading: calc((($line-height - $half-leading) / $line-height) * 100%); - transform: translateY(-$padding-y) scale(.75) translateY(-$percent-height-minus-no-bottom-leading); + transform: + translateY(calc($padding-y * -1)) scale(.75) + translateY(calc($percent-height-minus-no-bottom-leading * -1)); } } diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss index 8f8b6a01b9..400e0f2d44 100644 --- a/src/Form/_variables.scss +++ b/src/Form/_variables.scss @@ -1,55 +1,55 @@ -$input-padding-y: $input-btn-padding-y !default; -$input-padding-x: $input-btn-padding-x !default; -$input-font-family: $input-btn-font-family !default; -$input-font-size: $input-btn-font-size !default; -$input-font-weight: $font-weight-base !default; -$input-line-height: $input-btn-line-height !default; - -$input-padding-y-sm: $input-btn-padding-y-sm !default; -$input-padding-x-sm: $input-btn-padding-x-sm !default; -$input-font-size-sm: $input-btn-font-size-sm !default; -$input-line-height-sm: $input-btn-line-height-sm !default; - -$input-padding-y-lg: $input-btn-padding-y-lg !default; -$input-padding-x-lg: $input-btn-padding-x-lg !default; -$input-font-size-lg: $input-btn-font-size-lg !default; -$input-line-height-lg: $input-btn-line-height-lg !default; - -$input-bg: $white !default; +$input-padding-y: var(--pgn-core-input-btn-padding-y) !default; +$input-padding-x: var(--pgn-core-input-btn-padding-x) !default; +$input-font-family: var(--pgn-core-input-btn-font-family) !default; +$input-font-size: var(--pgn-core-input-btn-font-size-base) !default; +$input-font-weight: var(--pgn-font-weight-base) !default; +$input-line-height: var(--pgn-core-input-btn-line-height-base) !default; + +$input-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y) !default; +$input-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x) !default; +$input-font-size-sm: var(--pgn-core-input-btn-font-size-sm) !default; +$input-line-height-sm: var(--pgn-core-input-btn-line-height-sm) !default; + +$input-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y) !default; +$input-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x) !default; +$input-font-size-lg: var(--pgn-core-input-btn-font-size-lg) !default; +$input-line-height-lg: var(--pgn-core-input-btn-line-height-lg) !default; + +$input-bg: var(--pgn-color-white) !default; $input-disabled-bg: theme-color("gray", "background") !default; $input-color: theme-color("gray", "text") !default; -$input-border-color: $gray-500 !default; -$input-border-width: $input-btn-border-width !default; -$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; +$input-border-color: var(--pgn-color-gray-500) !default; +$input-border-width: var(--pgn-core-input-btn-border-width) !default; +$input-box-shadow: inset 0 1px 1px rgba(var(--pgn-color-black), .075) !default; -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; +$input-border-radius: var(--pgn-border-radius-base) !default; +$input-border-radius-lg: var(--pgn-border-radius-lg) !default; +$input-border-radius-sm: var(--pgn-border-radius-sm) !default; $input-focus-bg: $input-bg !default; -$input-focus-border-color: $component-active-bg !default; +$input-focus-border-color: var(--pgn-component-active-bg) !default; $input-focus-color: $input-color !default; $input-focus-width: 1px !default; -$input-focus-box-shadow: $input-btn-focus-box-shadow !default; +$input-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow) !default; $input-placeholder-color: theme-color("gray", "light-text") !default; -$input-plaintext-color: $body-color !default; +$input-plaintext-color: var(--pgn-body-color) !default; -$input-height-border: $input-border-width * 2 !default; +$input-height-border: calc($input-border-width * 2) !default; -$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default; -$input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default; -$input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{calc($input-padding-y / 2)}) !default; +$input-height-inner: calc($input-line-height * 1em + $input-padding-y * 2) !default; +$input-height-inner-half: calc($input-line-height * .5em + $input-padding-y) !default; +$input-height-inner-quarter: calc($input-line-height * .25em + calc($input-padding-y / 2)) !default; $input-height: calc( - #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border} + ($input-line-height * 1em) + ($input-padding-y * 2) + ($input-height-border) ) !default; $input-height-sm: calc( - #{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border} + ($input-line-height-sm * 1em) + (var(--pgn-core-input-btn-padding-sm-y) * 2) + $input-height-border ) !default; $input-height-lg: calc( - #{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border} + ($input-line-height-lg * 1em) + (var(--pgn-core-input-btn-padding-lg-y) * 2) + ($input-height-border) ) !default; $input-hover-width: 1px !default; @@ -87,7 +87,7 @@ $custom-control-indicator-bg: $input-bg !default; $custom-control-indicator-bg-size: 100% !default; $custom-control-indicator-box-shadow: $input-box-shadow !default; -$custom-control-indicator-border-color: $gray-700 !default; +$custom-control-indicator-border-color: var(--pgn-color-gray-700) !default; $custom-control-indicator-border-width: 2px !default; $custom-control-label-color: null !default; @@ -95,8 +95,8 @@ $custom-control-indicator-disabled-bg: $input-disabled-bg !default; $custom-control-label-disabled-color: theme-color("gray", "light-text") !default; $custom-control-indicator-checked-color: $component-active-bg !default; -$custom-control-indicator-checked-bg: $component-active-bg !default; -$custom-control-indicator-checked-disabled-bg: rgba($primary, .5) !default; +$custom-control-indicator-checked-bg: var(--pgn-component-active-bg) !default; +$custom-control-indicator-checked-disabled-bg: rgba(var(--pgn-color-primary-base), .5) !default; $custom-control-indicator-checked-box-shadow: none !default; $custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default; @@ -104,13 +104,13 @@ $custom-control-indicator-focus-box-shadow: 0 0 0 4px rgba(0, 0, 0, .1) !def $custom-control-indicator-focus-border-color: $input-focus-border-color !default; $custom-control-indicator-active-color: $component-active-color !default; -$custom-control-indicator-active-bg: $component-active-bg !default; +$custom-control-indicator-active-bg: var(--pgn-component-active-bg) !default; $custom-control-indicator-active-box-shadow: none !default; $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default; $custom-checkbox-indicator-border-radius: 0 !default; $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-bg: var(--pgn-component-active-bg) !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; $custom-checkbox-indicator-indeterminate-box-shadow: none !default; @@ -152,7 +152,7 @@ $custom-select-background: $custom-select-indicator no-repeat right $input-padding-y center / $custom-select-bg-size !default; $custom-select-feedback-icon-padding-right: calc( - (1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding} + (1em + (2 * $custom-select-padding-y)) * 3 / 4 + ($custom-select-padding-x + $custom-select-indicator-padding) ) !default; $custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default; @@ -160,12 +160,12 @@ $custom-select-feedback-icon-size: $input-height-inner-half $input-heig $custom-select-border-width: $input-border-width !default; $custom-select-border-color: $input-border-color !default; -$custom-select-border-radius: $border-radius !default; -$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default; +$custom-select-border-radius: var(--pgn-border-radius-base) !default; +$custom-select-box-shadow: inset 0 1px 2px rgba(var(--pgn-color-black), .075) !default; $custom-select-focus-border-color: $input-focus-border-color !default; $custom-select-focus-width: $input-focus-width !default; -$custom-select-focus-box-shadow: $input-btn-focus-box-shadow !default; +$custom-select-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow) !default; $custom-select-padding-y-sm: $input-padding-y-sm !default; $custom-select-padding-x-sm: $input-padding-x-sm !default; @@ -182,15 +182,15 @@ $custom-range-track-height: .5rem !default; $custom-range-track-cursor: pointer !default; $custom-range-track-bg: theme-color("gray", "graphic") !default; $custom-range-track-border-radius: 1rem !default; -$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; +$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba(var(--pgn-color-black), .1) !default; $custom-range-thumb-width: 1rem !default; $custom-range-thumb-height: $custom-range-thumb-width !default; -$custom-range-thumb-bg: $component-active-bg !default; +$custom-range-thumb-bg: var(--pgn-component-active-bg) !default; $custom-range-thumb-border: 0 !default; $custom-range-thumb-border-radius: 1rem !default; -$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; -$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; +$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba(var(--pgn-color-black), .1) !default; +$custom-range-thumb-focus-box-shadow: 0 0 0 1px var(--pgn-body-bg), $input-focus-box-shadow !default; $custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge $custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; $custom-range-thumb-disabled-bg: theme-color("gray", "default") !default; @@ -221,7 +221,7 @@ $custom-file-text: ( // Form validation $form-feedback-margin-top: $form-text-margin-top !default; -$form-feedback-font-size: $small-font-size !default; +$form-feedback-font-size: var(--pgn-font-size-small-base) !default; $form-feedback-valid-color: theme-color("success") !default; $form-feedback-invalid-color: theme-color("danger") !default; @@ -249,10 +249,10 @@ $form-validation-states: map-merge( // Form tooltips must come after regular tooltips $form-feedback-tooltip-padding-y: .25rem !default; $form-feedback-tooltip-padding-x: .5rem !default; -$form-feedback-tooltip-font-size: $font-size-sm !default; -$form-feedback-tooltip-line-height: $line-height-base !default; +$form-feedback-tooltip-font-size: var(--pgn-font-size-sm) !default; +$form-feedback-tooltip-line-height: var(--pgn-line-height-base) !default; $form-feedback-tooltip-opacity: .9 !default; -$form-feedback-tooltip-border-radius: $border-radius !default; +$form-feedback-tooltip-border-radius: var(--pgn-border-radius-base) !default; $form-autosuggest-icon-width: 2.4rem; $form-autosuggest-icon-height: $form-autosuggest-icon-width; diff --git a/src/Icon/Icon.scss b/src/Icon/Icon.scss index beb47b5d4e..c0a30afc0e 100644 --- a/src/Icon/Icon.scss +++ b/src/Icon/Icon.scss @@ -8,23 +8,23 @@ flex-shrink: 0; &.pgn__icon__inline { - width: $icon-inline; - height: $icon-inline; + width: var(--pgn-icon-inline); + height: var(--pgn-icon-inline); } &.pgn__icon__sm { - width: $icon-sm; - height: $icon-sm; + width: var(--pgn-icon-sm); + height: var(--pgn-icon-sm); } &.pgn__icon__md { - width: $icon-md; - height: $icon-md; + width: var(--pgn-icon-md); + height: var(--pgn-icon-md); } &.pgn__icon__lg { - width: $icon-lg; - height: $icon-lg; + width: var(--pgn-icon-lg); + height: var(--pgn-icon-lg); } } diff --git a/src/IconButton/IconButton.scss b/src/IconButton/IconButton.scss index d6e920c97c..64faa77c53 100644 --- a/src/IconButton/IconButton.scss +++ b/src/IconButton/IconButton.scss @@ -27,21 +27,21 @@ } @else { - background-color: $btn-icon-bg; + background-color: var(--pgn-icon-button-bg); color: $icon-color; &.focus, &:focus { outline: 2px transparent; - background-color: $btn-icon-bg; + background-color: var(--pgn-icon-button-bg); color: $icon-color; - box-shadow: inset 0 0 0 $btn-focus-width $icon-color; + box-shadow: inset 0 0 0 var(--pgn-btn-focus-width) $icon-color; } } } .btn-icon { - @include btn-icon-size($btn-icon-diameter-md); + @include btn-icon-size(var(--pgn-icon-button-diameter-md)); border-radius: 50%; padding: 0; @@ -50,7 +50,7 @@ border: none; &.btn-icon-sm { - @include btn-icon-size($btn-icon-diameter-sm); + @include btn-icon-size(var(--pgn-icon-button-diameter-sm)); } &.btn-icon-inline { @@ -84,25 +84,25 @@ &.disabled, &:disabled { - opacity: $btn-disabled-opacity; + opacity: var(--pgn-btn-disabled-opacity); pointer-events: none; } @each $name, $color in $icon-button-colors { &.btn-icon-#{$name} { - @include btn-icon-variant($color, $btn-icon-accent-color); + @include btn-icon-variant($color, var(--pgn-icon-button-accent-color)); } &.btn-icon-inverse-#{$name} { - @include btn-icon-variant($btn-icon-accent-color, $color); + @include btn-icon-variant(var(--pgn-icon-button-accent-color), $color); } &.btn-icon-#{$name}-active { - @include btn-icon-variant($color, $btn-icon-accent-color, true); + @include btn-icon-variant($color, var(--pgn-icon-button-accent-color), true); } &.btn-icon-inverse-#{$name}-active { - @include btn-icon-variant($btn-icon-accent-color, $color, true); + @include btn-icon-variant(var(--pgn-icon-button-accent-color), $color, true); } } } diff --git a/src/IconButton/_variables.scss b/src/IconButton/_variables.scss index 60c47e012c..b2b26f95f6 100644 --- a/src/IconButton/_variables.scss +++ b/src/IconButton/_variables.scss @@ -1,13 +1,13 @@ $icon-button-colors: ( - "primary": $primary, - "secondary": $secondary, - "brand": $brand, - "success": $success, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark, - "black": $black, + "primary": var(--pgn-color-primary-base), + "secondary": var(--pgn-color-secondary-base), + "brand": var(--pgn-color-brand-base), + "success": var(--pgn-color-success-base), + "warning": var(--pgn-color-warning-base), + "danger": var(--pgn-color-danger-base), + "light": var(--pgn-color-light-base), + "dark": var(--pgn-color-dark-base), + "black": var(--pgn-color-black), ) !default; $btn-icon-diameter-md: 2.75rem !default; $btn-icon-diameter-sm: 2.25rem !default; diff --git a/src/Image/_variables.scss b/src/Image/_variables.scss index 9de7935300..2e2f000537 100644 --- a/src/Image/_variables.scss +++ b/src/Image/_variables.scss @@ -1,11 +1,11 @@ // Image thumbnails $thumbnail-padding: .25rem !default; -$thumbnail-bg: $body-bg !default; -$thumbnail-border-width: $border-width !default; +$thumbnail-bg: var(--pgn-body-bg) !default; +$thumbnail-border-width: var(--pgn-border-width) !default; $thumbnail-border-color: theme-color("gray", "border") !default; -$thumbnail-border-radius: $border-radius !default; -$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default; +$thumbnail-border-radius: var(--pgn-border-radius-base) !default; +$thumbnail-box-shadow: 0 1px 2px rgba(var(--pgn-color-black), .075) !default; // Figures diff --git a/src/Menu/Menu.scss b/src/Menu/Menu.scss index 3b6ac0f8f7..ed43829b14 100644 --- a/src/Menu/Menu.scss +++ b/src/Menu/Menu.scss @@ -10,16 +10,16 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - font-family: $btn-font-family; - font-weight: $btn-font-weight; - color: $body-color; + font-family: var(--pgn-btn-font-family); + font-weight: var(--pgn-btn-font-width); + color: var(--pgn-body-color); text-align: center; vertical-align: middle; user-select: none; background-color: transparent; - border: $btn-border-width solid transparent; - padding: $btn-padding-y $btn-padding-x; - font-size: $btn-font-size; + border: var(--pgn-btn-border-width) solid transparent; + padding: var(--pgn-btn-padding-y-base) var(--pgn-btn-padding-x-base); + font-size: var(--pgn-btn-font-size-base); height: 48px; border-radius: 0; @@ -29,31 +29,31 @@ @include hover { text-decoration: none; - color: $btn-tertiary-color; - border-color: $hover-border; - background: $btn-tertiary-hover-bg; + color: var(--pgn-btn-tertiary-color); + border-color: var(--pgn-menu-border-hover); + background: var(--pgn-btn-tertiary-bg-hover); } // Disabled comes first so active can properly restyle &.disabled, &:disabled { - opacity: $btn-disabled-opacity; + opacity: var(--pgn-btn-disabled-opacity); } &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle { - color: $btn-tertiary-color; - background-color: $active-background; - border-color: $active-border; + color: var(--pgn-btn-tertiary-color); + background-color: var(--pgn-menu-background-active); + border-color: var(--pgn-menu-border-active); } &.focus, &:focus { - font-weight: $font-weight-bolder; - color: $btn-tertiary-color; - background-color: $active-background; - border-color: $active-border; + font-weight: var(--pgn-font-weight-bolder); + color: var(--pgn-btn-tertiary-color); + background-color: var(--pgn-menu-background-active); + border-color: var(--pgn-menu-border-active); } .btn-icon-before { @@ -79,14 +79,14 @@ .pgn__menu { border-radius: .25em; - box-shadow: $box-shadow; - background-color: $white; + box-shadow: var(--pgn-box-shadow-base); + background-color: var(--pgn-color-white); overflow: auto; max-height: 264px; } .pgn__menu-select-popup { - color: $btn-tertiary-bg; + color: var(--pgn-btn-tertiary-bg-base); position: relative; } @@ -95,14 +95,14 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - background: $white; + background: var(--pgn-color-white); box-sizing: border-box; - color: $dark; + color: var(--pgn-color-dark-base); @include hover { - color: $white; - background: $primary; - border: 1px solid $white; + color: var(--pgn-color-white); + background: var(--pgn-color-primary-base); + border: 1px solid var(--pgn-color-white); box-sizing: border-box; } } diff --git a/src/Modal/Modal.scss b/src/Modal/Modal.scss index 6d8aae5209..38e0b41018 100644 --- a/src/Modal/Modal.scss +++ b/src/Modal/Modal.scss @@ -13,15 +13,15 @@ position: fixed; top: 0; width: 100vw; - z-index: $zindex-modal; + z-index: var(--pgn-www-zindex-modal); -webkit-overflow-scrolling: touch; } .pgn__modal-backdrop { - background: $modal-backdrop-bg; + background: var(--pgn-modal-backdrop-bg); bottom: 0; left: 0; - opacity: $modal-backdrop-opacity; + opacity: var(--pgn-modal-backdrop-opacity); position: fixed; right: 0; top: 0; @@ -86,15 +86,15 @@ .modal-dialog { height: 100%; margin: auto; - padding: calc($spacer / 2); + padding: calc(var(--pgn-core-spacer) / 2); @media (min-width: map-get($grid-breakpoints, "sm")) { - padding: $spacer; + padding: var(--pgn-core-spacer); } } .modal-content { - max-height: calc(100vh - (#{$spacer} * 2)); + max-height: calc(100vh - (#{var(--pgn-core-spacer)} * 2)); &:focus { outline: 1px dotted; @@ -164,8 +164,8 @@ .pgn__modal-popup__arrow::after, .pgn__modal-popup__arrow-top-start::after, .pgn__modal-popup__arrow-top::after { - bottom: $border-width; - border-top-color: $white; + bottom: var(--pgn-border-width); + border-top-color: var(--pgn-color-white); } [data-popper-placement^="right"] .pgn__modal-popup__arrow-auto, diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss index 57bae8234c..57910e6e9a 100644 --- a/src/Modal/_ModalDialog.scss +++ b/src/Modal/_ModalDialog.scss @@ -1,49 +1,49 @@ .pgn__modal { - background: $modal-content-bg; + background: var(--pgn-modal-content-bg); border-radius: $modal-content-inner-border-radius; display: flex; flex-direction: column; - margin: 0 $modal-dialog-margin; + margin: 0 var(--pgn-modal-dialog-margin-base); max-height: 80vh; - max-width: $modal-md; + max-width: var(--pgn-modal-md); overflow: auto; width: 100vw; - box-shadow: $modal-content-box-shadow-sm-up; - border: solid $modal-content-border-width $modal-content-border-color; + box-shadow: var(--pgn-modal-content-box-shadow-sm-up); + border: solid var(--pgn-modal-content-border-width) var(--pgn-modal-content-border-color); position: relative; &:not(.pgn__modal-fullscreen) > *:first-child { - border-top-left-radius: $modal-content-border-radius; - border-top-right-radius: $modal-content-border-radius; + border-top-left-radius: var(--pgn-modal-content-border-radius); + border-top-right-radius: var(--pgn-modal-content-border-radius); } &:not(.pgn__modal-fullscreen) > *:last-child { - border-bottom-left-radius: $modal-content-border-radius; - border-bottom-right-radius: $modal-content-border-radius; + border-bottom-left-radius: var(--pgn-modal-content-border-radius); + border-bottom-right-radius: var(--pgn-modal-content-border-radius); } &.pgn__modal-scroll-fullscreen { max-height: none; - margin: $modal-dialog-margin; + margin: var(--pgn-modal-dialog-margin-base); } } // Sizes .pgn__modal-sm { - max-width: $modal-sm; + max-width: var(--pgn-modal-sm); } .pgn__modal-lg { - max-width: $modal-lg; + max-width: var(--pgn-modal-lg); } .pgn__modal-md { - max-width: $modal-md; + max-width: var(--pgn-modal-md); } .pgn__modal-xl { - max-width: $modal-xl; + max-width: var(--pgn-modal-xl); } .pgn__modal-fullscreen { @@ -53,8 +53,8 @@ max-width: none; .pgn__modal-footer { - border-top: solid 1px $light; - padding-top: $modal-footer-padding-y; + border-top: solid 1px var(--pgn-color-light-base); + padding-top: var(--pgn-modal-footer-padding-y); } } @@ -72,8 +72,8 @@ .pgn__modal-close-container { position: absolute; z-index: 10; - top: $modal-header-padding-y; - inset-inline-end: $modal-header-padding-y; + top: var(--pgn-modal-header-padding-y); + inset-inline-end: var(--pgn-modal-header-padding-y); } .pgn__modal-header { @@ -82,8 +82,8 @@ justify-content: center; position: sticky; top: 0; - padding: $modal-header-padding; - background-color: $modal-content-bg; + padding: var(--pgn-modal-header-padding-base); + background-color: var(--pgn-modal-content-bg); transition: box-shadow 150ms ease; min-height: 2rem; // height of the icon close button box-sizing: content-box; @@ -96,14 +96,14 @@ } .pgn__modal-title { - font-size: $h3-font-size; + font-size: var(--pgn-font-size-h3); margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn text-align: start; } } .pgn__modal-hero { - padding: $modal-header-padding; + padding: var(--pgn-modal-header-padding-base); position: relative; display: flex; align-items: center; @@ -129,7 +129,9 @@ .pgn__modal-body { flex-grow: 1; - padding: $modal-inner-padding $modal-inner-padding calc(#{$modal-inner-padding} / 2); + padding: + var(--pgn-modal-inner-padding-base) + var(--pgn-modal-inner-padding-base) calc(#{var(--pgn-modal-inner-padding-base)} / 2); overflow: auto; position: relative; @@ -140,10 +142,10 @@ display: block; height: 20px; position: sticky; - top: calc($modal-inner-padding * -1); - margin-top: calc($modal-inner-padding * -1); - margin-left: calc($modal-inner-padding * -1); - margin-right: calc($modal-inner-padding * -1); + top: calc(var(--pgn-modal-inner-padding-base) * -1); + margin-top: calc(var(--pgn-modal-inner-padding-base) * -1); + margin-left: calc(var(--pgn-modal-inner-padding-base) * -1); + margin-right: calc(var(--pgn-modal-inner-padding-base) * -1); opacity: .5; z-index: 2; } @@ -161,10 +163,10 @@ display: block; height: 20px; position: sticky; - bottom: calc(#{$modal-inner-padding} / 2 * -1); + bottom: calc(#{var(--pgn-modal-inner-padding-base)} / 2 * -1); margin-bottom: calc($modal-inner-padding-bottom * -1); - margin-left: calc($modal-inner-padding * -1); - margin-right: calc($modal-inner-padding * -1); + margin-left: calc(var(--pgn-modal-inner-padding-base) * -1); + margin-right: calc(var(--pgn-modal-inner-padding-base) * -1); opacity: .5; } @@ -222,10 +224,10 @@ bottom: 0; display: flex; justify-content: flex-end; - background-color: $modal-content-bg; + background-color: var(--pgn-modal-content-bg); transition: box-shadow 150ms ease; - padding: $modal-footer-padding; - padding-top: calc(#{$modal-inner-padding} / 2); + padding: var(--pgn-modal-footer-padding-base); + padding-top: calc(#{var(--pgn-modal-inner-padding-base)} / 2); } // Color Variants @@ -234,14 +236,14 @@ // Default style modals don't have a background on the header which // ends up looking spaced too far away from the body content. .pgn__modal-header { - padding-bottom: calc(#{$modal-inner-padding} / 2); + padding-bottom: calc(#{var(--pgn-modal-inner-padding-base)} / 2); } .pgn__modal-body { - padding: calc(#{$modal-inner-padding} / 2) $modal-inner-padding; + padding: calc(#{var(--pgn-modal-inner-padding-base)} / 2) var(--pgn-modal-inner-padding-base); &::before { - top: calc(#{$modal-inner-padding} / 2 * -1); + top: calc(#{var(--pgn-modal-inner-padding-base)} / 2 * -1); } } } @@ -249,8 +251,8 @@ .pgn__modal-dark { .pgn__modal-header, .pgn__modal-hero { - background-color: $dark; - color: $white; + background-color: var(--pgn-color-dark-base); + color: var(--pgn-color-white); * { color: inherit; @@ -258,20 +260,20 @@ } .pgn__modal-header { - border-bottom: solid 1px $light; + border-bottom: solid 1px var(--pgn-color-light-base); } } .pgn__modal-warning .pgn__modal-header { - background-color: $warning-100; + background-color: var(--pgn-color-warning-100); } .pgn__modal-danger .pgn__modal-header { - background-color: $danger-100; + background-color: var(--pgn-color-danger-100); } .pgn__modal-success .pgn__modal-header { - background-color: $success-100; + background-color: var(--pgn-color-success-100); } // Modal types @@ -284,6 +286,6 @@ } .pgn__modal-title { - font-size: $h4-font-size; + font-size: var(--pgn-font-size-h4); } } diff --git a/src/Modal/_variables.scss b/src/Modal/_variables.scss index f84739bfd0..2f73c56d1e 100644 --- a/src/Modal/_variables.scss +++ b/src/Modal/_variables.scss @@ -10,20 +10,21 @@ $modal-footer-margin-between: .5rem !default; $modal-dialog-margin: 1.5rem !default; $modal-dialog-margin-y-sm-up: 1.75rem !default; -$modal-title-line-height: $line-height-base !default; +$modal-title-line-height: var(--pgn-line-height-base) !default; $modal-content-color: null !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, .2) !default; +$modal-content-bg: var(--pgn-color-white) !default; +$modal-content-border-color: rgba(var(--pgn-color-black), .2) !default; $modal-content-border-width: 0 !default; $modal-content-border-radius: $border-radius-lg !default; $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; -$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; -$modal-content-box-shadow-sm-up: 0 10px 20px rgba($black, .15), 0 8px 20px rgba($black, .15) !default; +$modal-content-box-shadow-xs: 0 .25rem .5rem rgba(var(--pgn-color-black), .5) !default; +$modal-content-box-shadow-sm-up: 0 10px 20px rgba(var(--pgn-color-black), .15), + 0 8px 20px rgba(var(--pgn-color-black), .15) !default; -$modal-backdrop-bg: $black !default; +$modal-backdrop-bg: var(--pgn-color-black) !default; $modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $border-color !default; +$modal-header-border-color: var(--pgn-border-color) !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; diff --git a/src/Nav/Nav.scss b/src/Nav/Nav.scss index a90f6ce3b0..42395ea75f 100644 --- a/src/Nav/Nav.scss +++ b/src/Nav/Nav.scss @@ -15,19 +15,19 @@ .nav-link { display: block; - padding: $nav-link-padding-y $nav-link-padding-x; - text-decoration: if($link-decoration == none, null, none); - color: $nav-link-color; - font-weight: $nav-link-font-weight; + padding: var(--pgn-nav-link-padding-y) var(--pgn-nav-link-padding-x); + text-decoration: if(var(--pgn-link-decoration) == none, null, none); + color: var(--pgn-nav-link-color-base); + font-weight: var(--pgn-nav-link-font-weight); @include hover-focus { text-decoration: none; - color: $nav-link-color; + color: var(--pgn-nav-link-color-base); } // Disabled state lightens text &.disabled { - color: $nav-link-disabled-color; + color: var(--pgn-nav-link-color-disabled); pointer-events: none; cursor: default; } @@ -38,24 +38,24 @@ // .nav-tabs { - border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; + border-bottom: var(--pgn-nav-tabs-border-width) solid var(--pgn-nav-tabs-border-color); .nav-link { - margin-bottom: calc($nav-tabs-border-width * -1); - border-top: $nav-tabs-border-width solid transparent; - border-bottom: $nav-tabs-border-width solid transparent; + margin-bottom: calc(var(--pgn-nav-tabs-border-width) * -1); + border-top: var(--pgn-nav-tabs-border-width) solid transparent; + border-bottom: var(--pgn-nav-tabs-border-width) solid transparent; border-left: none; border-right: none; - @include border-top-radius($nav-tabs-border-radius); + @include border-top-radius(var(--pgn-nav-tabs-border-radius)); @include hover-focus { - border-color: $nav-tabs-link-hover-border-color; - background-color: $nav-tabs-link-hover-bg; + border-color: var(--pgn-nav-tabs-link-hover-border-color); + background-color: var(--pgn-nav-tabs-link-hover-bg); } &.disabled { - color: $nav-link-disabled-color; + color: var(--pgn-nav-link-color-disabled); background-color: transparent; border-color: transparent; } @@ -63,14 +63,14 @@ .nav-link.active, .nav-item.show .nav-link { - color: $nav-tabs-link-active-color; - background-color: $nav-tabs-link-active-bg; - border-color: $nav-tabs-link-active-border-color; + color: var(--pgn-nav-tabs-link-active-color-base); + background-color: var(--pgn-nav-tabs-link-active-bg); + border-color: var(--pgn-nav-tabs-link-active-color-border); } .dropdown-menu { // Make dropdown border overlap tab border - margin-top: calc($nav-tabs-border-width * -1); + margin-top: calc(var(--pgn-nav-tabs-border-width) * -1); // Remove the top rounded corners here since there is a hard edge above the menu @include border-top-radius(0); @@ -83,13 +83,13 @@ .nav-pills { .nav-link { - @include border-radius($nav-pills-border-radius); + @include border-radius(var(--pgn-nav-pills-border-radius)); } .nav-link.active, .show > .nav-link { - color: $nav-pills-link-active-color; - background-color: $nav-pills-link-active-bg; + color: var(--pgn-nav-pills-link-link-active-color); + background-color: var(--pgn-nav-pills-link-link-active-bg); } } @@ -99,13 +99,13 @@ .nav-button-group { .nav-link { - border: solid 1px $nav-tabs-border-color; + border: solid 1px var(--pgn-nav-tabs-border-color); &:first-child { - @include border-left-radius($nav-pills-border-radius); + @include border-left-radius(var(--pgn-nav-pills-border-radius)); [dir="rtl"] & { - @include border-right-radius($nav-pills-border-radius); + @include border-right-radius(var(--pgn-nav-pills-border-radius)); border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -114,10 +114,10 @@ } &:last-child { - @include border-right-radius($nav-pills-border-radius); + @include border-right-radius(var(--pgn-nav-pills-border-radius)); [dir="rtl"] & { - @include border-left-radius($nav-pills-border-radius); + @include border-left-radius(var(--pgn-nav-pills-border-radius)); border-top-right-radius: 0; border-bottom-right-radius: 0; @@ -125,7 +125,7 @@ } &:hover { - background: $nav-tabs-link-hover-bg; + background: var(--pgn-nav-tabs-link-hover-bg); } & + .nav-link { @@ -135,8 +135,8 @@ .nav-link.active, .show > .nav-link { - color: $nav-pills-link-active-color; - background-color: $nav-pills-link-active-bg; + color: var(--pgn-nav-pills-link-link-active-color); + background-color: var(--pgn-nav-pills-link-link-active-bg); border-color: transparent; } } diff --git a/src/Nav/_variables.scss b/src/Nav/_variables.scss index 668909b664..6445804108 100644 --- a/src/Nav/_variables.scss +++ b/src/Nav/_variables.scss @@ -2,22 +2,22 @@ $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; -$nav-link-color: $gray-700 !default; -$nav-link-disabled-color: $gray-300 !default; +$nav-link-color: var(--pgn-color-gray-700) !default; +$nav-link-disabled-color: var(--pgn-color-gray-300) !default; $nav-link-font-weight: 500 !default; -$nav-tabs-border-color: $light-400 !default; +$nav-tabs-border-color: var(--pgn-color-light-400) !default; $nav-tabs-border-width: 2px !default; $nav-tabs-border-radius: 0 !default; $nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-color !default; -$nav-tabs-link-hover-bg: $light-400 !default; -$nav-tabs-link-active-color: $primary-500 !default; -$nav-tabs-link-active-bg: $body-bg !default; -$nav-tabs-link-active-border-color: transparent transparent $primary-500 !default; +$nav-tabs-link-hover-bg: var(--pgn-color-light-400) !default; +$nav-tabs-link-active-color: var(--pgn-color-primary-500) !default; +$nav-tabs-link-active-bg: var(--pgn-body-bg) !default; +$nav-tabs-link-active-border-color: transparent transparent var(--pgn-color-primary-500) !default; -$nav-pills-border-radius: $border-radius !default; -$nav-pills-link-active-color: $component-active-color !default; -$nav-pills-link-active-bg: $component-active-bg !default; +$nav-pills-border-radius: var(--pgn-border-radius-base) !default; +$nav-pills-link-active-color: var(--pgn-component-active-color) !default; +$nav-pills-link-active-bg: var(--pgn-component-active-bg) !default; $nav-divider-color: theme-color("gray", "background") !default; -$nav-divider-margin-y: calc($spacer / 2) !default; +$nav-divider-margin-y: calc(var(--pgn-core-spacer) / 2) !default; diff --git a/src/Navbar/_variables.scss b/src/Navbar/_variables.scss index ad0fd8830a..9af95b0228 100644 --- a/src/Navbar/_variables.scss +++ b/src/Navbar/_variables.scss @@ -1,38 +1,38 @@ // Navbar -$navbar-padding-y: calc($spacer / 2) !default; -$navbar-padding-x: $spacer !default; +$navbar-padding-y: calc(var(--pgn-core-spacer) / 2) !default; +$navbar-padding-x: var(--pgn-core-spacer) !default; $navbar-nav-link-padding-x: .5rem !default; -$navbar-brand-font-size: $font-size-lg !default; +$navbar-brand-font-size: var(--pgn-font-size-lg) !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link // The default for $nav-link-padding-y is .5rem. Copied here for modularization -$nav-link-height: $font-size-base * $line-height-base + .5rem * 2 !default; -$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; +$nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2) !default; +$navbar-brand-height: calc($navbar-brand-font-size * var(--pgn-line-height-base)) !default; $navbar-brand-padding-y: calc(($nav-link-height - $navbar-brand-height) / 2) !default; $navbar-toggler-padding-y: .25rem !default; $navbar-toggler-padding-x: .75rem !default; -$navbar-toggler-font-size: $font-size-lg !default; +$navbar-toggler-font-size: var(--pgn-font-size-lg) !default; $navbar-toggler-border-radius: $btn-border-radius !default; $navbar-nav-scroll-max-height: 75vh !default; -$navbar-dark-color: rgba($white, .5) !default; -$navbar-dark-hover-color: rgba($white, .75) !default; -$navbar-dark-active-color: $white !default; -$navbar-dark-disabled-color: rgba($white, .25) !default; +$navbar-dark-color: rgba(var(--pgn-color-white), .5) !default; +$navbar-dark-hover-color: rgba(var(--pgn-color-white), .75) !default; +$navbar-dark-active-color: var(--pgn-color-white) !default; +$navbar-dark-disabled-color: rgba(var(--pgn-color-white), .25) !default; $navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; -$navbar-dark-toggler-border-color: rgba($white, .1) !default; +$navbar-dark-toggler-border-color: rgba(var(--pgn-color-white), .1) !default; -$navbar-light-color: rgba($black, .5) !default; -$navbar-light-hover-color: rgba($black, .7) !default; -$navbar-light-active-color: rgba($black, .9) !default; -$navbar-light-disabled-color: rgba($black, .3) !default; +$navbar-light-color: rgba(var(--pgn-color-black), .5) !default; +$navbar-light-hover-color: rgba(var(--pgn-color-black), .7) !default; +$navbar-light-active-color: rgba(var(--pgn-color-black), .9) !default; +$navbar-light-disabled-color: rgba(var(--pgn-color-black), .3) !default; $navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; -$navbar-light-toggler-border-color: rgba($black, .1) !default; +$navbar-light-toggler-border-color: rgba(var(--pgn-color-black), .1) !default; $navbar-light-brand-color: $navbar-light-active-color !default; $navbar-light-brand-hover-color: $navbar-light-active-color !default; diff --git a/src/PageBanner/PageBanner.scss b/src/PageBanner/PageBanner.scss index 229dbda334..645a786a70 100644 --- a/src/PageBanner/PageBanner.scss +++ b/src/PageBanner/PageBanner.scss @@ -4,28 +4,28 @@ min-height: 36px; display: flex; flex-wrap: nowrap; - font-size: $x-small-font-size; + font-size: var(--pgn-font-size-small-x); @include media-breakpoint-up(md) { - font-size: $small-font-size; + font-size: var(--pgn-font-size-small-base); } } // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__dark { - background-color: $dark-500; + background-color: var(--pgn-color-dark-500); color: white; } // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__light { - background-color: $light-400; + background-color: var(--pgn-color-light-400); color: black; } // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__accentA { - background-color: $accent-a; + background-color: var(--pgn-color-accent-a); color: black; } // stylelint-disable-next-line selector-class-pattern @@ -36,7 +36,7 @@ // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__warning { - background-color: $warning-100; + background-color: var(--pgn-color-warning-100); color: black; } diff --git a/src/Pagination/Pagination.scss b/src/Pagination/Pagination.scss index d1f634d917..46d5c8421c 100644 --- a/src/Pagination/Pagination.scss +++ b/src/Pagination/Pagination.scss @@ -31,11 +31,11 @@ .page-link { &.previous .pgn__icon { margin-inline-start: 0; - margin-inline-end: $pagination-margin-x; + margin-inline-end: var(--pgn-pagination-margin-x); } &.next .pgn__icon { - margin-inline-start: $pagination-margin-x; + margin-inline-start: var(--pgn-pagination-margin-x); margin-inline-end: 0; } } @@ -43,13 +43,13 @@ .page-item { &:first-child .page-link { [dir="rtl"] & { - border-radius: 0 $pagination-border-radius-lg $pagination-border-radius-lg 0; + border-radius: 0 var(--pgn-pagination-border-radius-lg) var(--pgn-pagination-border-radius-lg) 0; } } &:last-child .page-link { [dir="rtl"] & { - border-radius: $pagination-border-radius-lg 0 0 $pagination-border-radius-lg; + border-radius: var(--pgn-pagination-border-radius-lg) 0 0 var(--pgn-pagination-border-radius-lg); } } } @@ -59,8 +59,8 @@ border: none; &.btn-primary:not(:disabled):not(.disabled):focus { - background-color: $pagination-bg; - color: $pagination-focus-color-text; + background-color: var(--pgn-pagination-bg-base); + color: var(--pgn-pagination-focus-color-text); } &:focus { @@ -68,9 +68,14 @@ } &.btn-primary:focus::before { - border: $pagination-focus-border-width solid $pagination-focus-color; + border: var(--pgn-pagination-focus-border-width) solid var(--pgn-pagination-focus-color-base); - @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); + @include button-size( + var(--pgn-btn-padding-y-base), + var(--pgn-btn-padding-x-base), + var(--pgn-btn-font-size-base), + var(--pgn-btn-line-height-base), + var(--pgn-btn-border-radius-base)); } div { @@ -92,25 +97,25 @@ .page-item { > .btn { transition: none; - line-height: $pagination-line-height; + line-height: var(--pgn-pagination-line-height); } &.active .page-link.btn-primary:not(:disabled):not(.disabled):focus { - background-color: $pagination-focus-color; - color: $pagination-bg; + background-color: var(--pgn-pagination-focus-color-base); + color: var(--pgn-pagination-bg-base); } } .pagination-small { .page-link { - font-size: $pagination-font-size-sm; - line-height: $pagination-line-height; + font-size: var(--pgn-pagination-font-size-sm); + line-height: var(--pgn-pagination-line-height); padding: .375rem .78rem; &.previous, &.next { - padding: 0 $pagination-padding-y; - line-height: $pagination-secondary-height-sm; + padding: 0 var(--pgn-pagination-padding-y-base); + line-height: var(--pgn-pagination-secondary-height-sm); div { display: flex; @@ -124,7 +129,7 @@ &.previous, &.next { padding: 0; - width: $pagination-icon-width; + width: var(--pgn-pagination-icon-width); } } } @@ -133,15 +138,15 @@ .pagination-secondary { button.next, button.previous { - height: $pagination-secondary-height; - padding: 0 $pagination-padding-y; + height: var(--pgn-pagination-secondary-height-base); + padding: 0 var(--pgn-pagination-padding-y-base); } &.pagination-small { button.next, button.previous { - height: $pagination-secondary-height-sm; - line-height: $pagination-line-height; + height: var(--pgn-pagination-secondary-height-sm); + line-height: var(--pgn-pagination-line-height); } } @@ -157,7 +162,7 @@ .pagination-inverse { %dark-styles { background-color: transparent; - color: $white; + color: var(--pgn-color-white); } .pgn__dark-styles { @@ -170,8 +175,8 @@ } &.active button.page-link { - background-color: $pagination-bg; - color: $pagination-color; + background-color: var(--pgn-pagination-bg-base); + color: var(--pgn-pagination-color-base); } button.page-link { @@ -183,7 +188,7 @@ } &:not(.active):focus { - box-shadow: $level-1-box-shadow; + box-shadow: var(--pgn-box-shadow-level-1); } } @@ -196,10 +201,10 @@ .dropdown { .btn-tertiary { - color: $pagination-color-inverse; + color: var(--pgn-pagination-color-inverse); &::after { - border-top: $pagination-toggle-border solid $pagination-color-inverse; + border-top: var(--pgn-pagination-toggle-border-base) solid var(--pgn-pagination-color-inverse); } &:active, @@ -208,7 +213,7 @@ } &:not(:disabled):not(.disabled):active { - color: $pagination-color-inverse; + color: var(--pgn-pagination-color-inverse); } } } @@ -220,8 +225,8 @@ .pgn__reduced-pagination-dropdown { overflow-y: auto; - max-height: $pagination-reduced-dropdown-max-height; - min-width: $pagination-reduced-dropdown-min-width; + max-height: var(--pgn-reduced-dropdown-height-max); + min-width: var(--pgn-reduced-dropdown-width-min); a { text-align: center; @@ -232,9 +237,9 @@ .dropdown-toggle::after { width: 0; height: 0; - border-left: $pagination-toggle-border solid transparent; - border-right: $pagination-toggle-border solid transparent; - border-top: $pagination-toggle-border solid $gray-700; + border-left: var(--pgn-pagination-toggle-border-base) solid transparent; + border-right: var(--pgn-pagination-toggle-border-base) solid transparent; + border-top: var(--pgn-pagination-toggle-border-base) solid var(--pgn-color-gray-700); transform: rotate(0); inset-inline-start: .5rem; top: 0; @@ -243,25 +248,25 @@ button.next, button.previous { - height: $pagination-secondary-height; - padding: 0 $pagination-padding-y; + height: var(--pgn-pagination-secondary-height-base); + padding: 0 var(--pgn-pagination-padding-y-base); } &.pagination-small { .btn.dropdown-toggle { - font-size: $pagination-font-size-sm; + font-size: var(--pgn-pagination-font-size-sm); &::after { - border-left-width: $pagination-toggle-border-sm; - border-right-width: $pagination-toggle-border-sm; - border-top-width: $pagination-toggle-border-sm; + border-left-width: var(--pgn-pagination-toggle-border-sm); + border-right-width: var(--pgn-pagination-toggle-border-sm); + border-top-width: var(--pgn-pagination-toggle-border-sm); } } button.previous, button.next { - line-height: $pagination-icon-height; - height: $pagination-icon-height; + line-height: var(--pgn-pagination-icon-height); + height: var(--pgn-pagination-icon-height); } } @@ -281,15 +286,15 @@ button.next, button.previous { - padding: $pagination-padding-y; - height: $pagination-secondary-height; + padding: var(--pgn-pagination-padding-y-base); + height: var(--pgn-pagination-secondary-height-base); } &.pagination-small { button.next, button.previous { - padding: 0 $pagination-padding-y; - height: $pagination-secondary-height-sm; + padding: 0 var(--pgn-pagination-padding-y-base); + height: var(--pgn-pagination-secondary-height-sm); } } diff --git a/src/Pagination/_variables.scss b/src/Pagination/_variables.scss index 1fc4c09c41..5e69041cf4 100644 --- a/src/Pagination/_variables.scss +++ b/src/Pagination/_variables.scss @@ -21,32 +21,32 @@ $pagination-toggle-border-sm: .25rem !default; $pagination-secondary-height: 2.75rem !default; $pagination-secondary-height-sm: 2.25rem !default; -$pagination-color: $link-color !default; -$pagination-color-inverse: $white !default; -$pagination-bg: $white !default; -$pagination-border-width: $border-width !default; +$pagination-color: var(--pgn-link-color) !default; +$pagination-color-inverse: var(--pgn-color-white) !default; +$pagination-bg: var(--pgn-color-white) !default; +$pagination-border-width: var(--pgn-border-width) !default; $pagination-border-color: theme-color("gray", "border") !default; -$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +$pagination-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow) !default; $pagination-focus-outline: 0 !default; $pagination-focus-border-width: .125rem !default; -$pagination-focus-color: $primary-500 !default; -$pagination-focus-color-text: $black !default; +$pagination-focus-color: var(--pgn-color-primary-500) !default; +$pagination-focus-color-text: var(--pgn-color-black) !default; -$pagination-hover-color: $link-hover-color !default; +$pagination-hover-color: var(--pgn-link-hover-color) !default; $pagination-hover-bg: theme-color("gray", "background") !default; $pagination-hover-border-color: theme-color("gray", "border") !default; -$pagination-active-color: $component-active-color !default; -$pagination-active-bg: $component-active-bg !default; +$pagination-active-color: var(--pgn-component-active-color) !default; +$pagination-active-bg: var(--pgn-component-active-bg) !default; $pagination-active-border-color: $pagination-active-bg !default; $pagination-disabled-color: theme-color("gray", "light-text") !default; -$pagination-disabled-bg: $white !default; +$pagination-disabled-bg: var(--pgn-color-white) !default; $pagination-disabled-border-color: theme-color("gray", "disabled-border") !default; -$pagination-border-radius-sm: $border-radius-sm !default; -$pagination-border-radius-lg: $border-radius-lg !default; +$pagination-border-radius-sm: var(--pgn-border-radius-sm) !default; +$pagination-border-radius-lg: var(--pgn-border-radius-lg) !default; $pagination-reduced-dropdown-max-height: 60vh !default; $pagination-reduced-dropdown-min-width: 6rem !default; diff --git a/src/Popover/Popover.scss b/src/Popover/Popover.scss index 5da744d740..462cd66576 100644 --- a/src/Popover/Popover.scss +++ b/src/Popover/Popover.scss @@ -2,53 +2,53 @@ @import "~bootstrap/scss/popover"; .popover { - filter: $popover-box-shadow; + filter: var(--pgn-popover-box-shadow); .popover-header { display: flex; align-items: center; - font-size: $h5-font-size; + font-size: var(--pgn-font-size-h5); } .pgn__icon { - margin-inline-end: $popover-icon-margin-right; - height: $popover-icon-height; - width: $popover-icon-width; + margin-inline-end: var(--pgn-popover-icon-margin-right); + height: var(--pgn-popover-icon-height); + width: var(--pgn-popover-icon-width); } } .popover-success { - background: $popover-success-bg; + background: var(--pgn-popover-success-bg); .popover-header { - background: $popover-success-bg; + background: var(--pgn-popover-success-bg); } .pgn__icon { - color: $popover-success-icon-color; + color: var(--pgn-popover-success-icon-color); } } .popover-warning { - background: $popover-warning-bg; + background: var(--pgn-popover-warning-bg); .popover-header { - background: $popover-warning-bg; + background: var(--pgn-popover-warning-bg); } .pgn__icon { - color: $popover-warning-icon-color; + color: var(--pgn-popover-warning-icon-color); } } .popover-danger { - background: $popover-danger-bg; + background: var(--pgn-popover-danger-bg); .popover-header { - background: $popover-danger-bg; + background: var(--pgn-popover-danger-bg); } .pgn__icon { - color: $popover-danger-icon-color; + color: var(--pgn-popover-danger-icon-color); } } diff --git a/src/Popover/_variables.scss b/src/Popover/_variables.scss index 869f00f212..411e090192 100644 --- a/src/Popover/_variables.scss +++ b/src/Popover/_variables.scss @@ -1,11 +1,11 @@ // Popovers -$popover-font-size: $font-size-sm !default; -$popover-bg: $white !default; +$popover-font-size: var(--pgn-font-size-sm) !default; +$popover-bg: var(--pgn-color-white) !default; $popover-max-width: 480px !default; -$popover-border-width: $border-width !default; +$popover-border-width: var(--pgn-border-width) !default; $popover-border-color: rgba($black, .2) !default; -$popover-border-radius: $border-radius-sm !default; +$popover-border-radius: var(--pgn-border-radius-sm) !default; $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; $popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; @@ -14,11 +14,11 @@ $popover-icon-height: 1rem; $popover-icon-width: 1rem; $popover-header-bg: $white !default; -$popover-header-color: $headings-color !default; +$popover-header-color: var(--pgn-headings-color) !default; $popover-header-padding-y: .5rem !default; $popover-header-padding-x: 1rem !default; -$popover-body-color: $body-color !default; +$popover-body-color: var(--pgn-body-color) !default; $popover-body-padding-y: $popover-header-padding-y !default; $popover-body-padding-x: $popover-header-padding-x !default; @@ -28,9 +28,9 @@ $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; -$popover-success-bg: $success-100 !default; -$popover-success-icon-color: $success-500 !default; -$popover-warning-bg: $warning-100 !default; -$popover-warning-icon-color: $warning-500 !default; -$popover-danger-bg: $danger-100 !default; -$popover-danger-icon-color: $danger-500 !default; +$popover-success-bg: var(--pgn-color-success-100) !default; +$popover-success-icon-color: var(--pgn-color-success-500) !default; +$popover-warning-bg: var(--pgn-color-warning-100) !default; +$popover-warning-icon-color: var(--pgn-color-warning-500) !default; +$popover-danger-bg: var(--pgn-color-danger-100) !default; +$popover-danger-icon-color: var(--pgn-color-danger-500) !default; diff --git a/src/Popover/popover-bootstrap.scss b/src/Popover/popover-bootstrap.scss new file mode 100644 index 0000000000..10c2205f00 --- /dev/null +++ b/src/Popover/popover-bootstrap.scss @@ -0,0 +1,192 @@ +.popover { + position: absolute; + top: 0; + left: 0; + z-index: var(--pgn-zindex-popover); + display: block; + max-width: var(--pgn-popover-max-width); + + @include reset-text(); + @include font-size(var(--pgn-popover-font-size)); + + word-wrap: break-word; + background-color: var(--pgn-popover-bg); + background-clip: padding-box; + border: var(--pgn-popover-border-border) solid var(--pgn-popover-border-color); + + @include border-radius(var(--pgn-popover-border-radius)); + @include box-shadow(var(--pgn-popover-box-shadow)); + + .arrow { + position: absolute; + display: block; + width: var(--pgn-popover-arrow-width); + height: var(--pgn-popover-arrow-height); + margin: 0 var(--pgn-popover-border-radius); + + &::before, + &::after { + position: absolute; + display: block; + content: ""; + border-color: transparent; + border-style: solid; + } + } +} + +.bs-popover-top { + margin-bottom: var(--pgn-popover-arrow-height); + + > .arrow { + bottom: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); + + &::before { + bottom: 0; + border-width: var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5) 0; + border-top-color: $popover-arrow-outer-color; + } + + &::after { + bottom: var(--pgn-popover-border-border); + border-width: var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5) 0; + border-top-color: var(--pgn-popover-arrow-color); + } + } +} + +.bs-popover-right { + margin-left: var(--pgn-popover-arrow-height); + + > .arrow { + left: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); + width: var(--pgn-popover-arrow-height); + height: var(--pgn-popover-arrow-width); + margin: var(--pgn-popover-border-radius) 0; + + &::before { + left: 0; + border-width: + ( + var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5) 0; + border-right-color: $popover-arrow-outer-color; + } + + &::after { + left: var(--pgn-popover-border-border); + border-width: + ( + var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5) 0; + border-right-color: var(--pgn-popover-arrow-color); + } + } +} + +.bs-popover-bottom { + margin-top: var(--pgn-popover-arrow-height); + + > .arrow { + top: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); + + &::before { + top: 0; + border-width: + 0 ( + var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5); + border-bottom-color: $popover-arrow-outer-color; + } + + &::after { + top: var(--pgn-popover-border-border); + border-width: + 0 ( + var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height) (var(--pgn-popover-arrow-width) * .5); + border-bottom-color: var(--pgn-popover-arrow-color); + } + } + + // This will remove the popover-header's border just below the arrow + .popover-header::before { + position: absolute; + top: 0; + left: 50%; + display: block; + width: var(--pgn-popover-arrow-width); + margin-left: calc(var(--pgn-popover-arrow-width) * -.5); + content: ""; + border-bottom: var(--pgn-popover-border-border) solid var(--pgn-popover-header-bg); + } +} + +.bs-popover-left { + margin-right: var(--pgn-popover-arrow-height); + + > .arrow { + right: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); + width: var(--pgn-popover-arrow-height); + height: var(--pgn-popover-arrow-width); + margin: var(--pgn-popover-border-radius) 0; + + &::before { + right: 0; + border-width: + ( + var(--pgn-popover-arrow-width) * .5) 0 (var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height); + border-left-color: $popover-arrow-outer-color; + } + + &::after { + right: var(--pgn-popover-border-border); + border-width: + ( + var(--pgn-popover-arrow-width) * .5) 0 (var(--pgn-popover-arrow-width) * .5) var(--pgn-popover-arrow-height); + border-left-color: var(--pgn-popover-arrow-color); + } + } +} + +.bs-popover-auto { + &[x-placement^="top"] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ + @extend .bs-popover-top; + } + + &[x-placement^="right"] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ + @extend .bs-popover-right; + } + + &[x-placement^="bottom"] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ + @extend .bs-popover-bottom; + } + + &[x-placement^="left"] { + /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */ + @extend .bs-popover-left; + } +} + + +// Offset the popover to account for the popover arrow +.popover-header { + padding: var(--pgn-popover-header-padding-y) var(--pgn-popover-header-padding-x); + margin-bottom: 0; + + @include font-size(var(--pgn-font-size-base)); + + color: var(--pgn-popover-header-color); + background-color: var(--pgn-popover-header-bg); + border-bottom: var(--pgn-popover-border-border) solid darken(var(--pgn-popover-header-bg), 5%); + + @include border-top-radius($popover-inner-border-radius); + + &:empty { + display: none; + } +} + +.popover-body { + padding: var(--pgn-popover-body-padding-y) var(--pgn-popover-body-padding-x); + color: var(--pgn-popover-body-color); +} diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss index 7c4d370c19..38784ec8cc 100644 --- a/src/ProductTour/Checkpoint.scss +++ b/src/ProductTour/Checkpoint.scss @@ -1,18 +1,20 @@ @import "variables"; -$checkpoint-arrow-top-color: solid $checkpoint-arrow-width $checkpoint-border-color; -$checkpoint-arrow-default-color: solid $checkpoint-arrow-width $checkpoint-background-color; -$checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; +$checkpoint-arrow-top-color: solid var(--pgn-product-tour-checkpoint-width-arrow) + var(--pgn-product-tour-checkpoint-color-border); +$checkpoint-arrow-default-color: solid var(--pgn-product-tour-checkpoint-width-arrow) + var(--pgn-product-tour-checkpoint-color-background); +$checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arrow) transparent; .pgn__checkpoint { position: absolute; - background: $checkpoint-background-color; - border-top: $checkpoint-border-width solid $checkpoint-border-color; - border-radius: $border-radius; + background: var(--pgn-product-tour-checkpoint-color-background); + border-top: var(--pgn-product-tour-checkpoint-width-border) solid var(--pgn-product-tour-checkpoint-color-border); + border-radius: var(--pgn-border-radius-base); padding: map_get($spacers, 4); box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3); - z-index: $checkpoint-z-index; - max-width: $checkpoint-max-width; + z-index: var(--pgn-product-tour-checkpoint-zindex); + max-width: var(--pgn-product-tour-checkpoint-width-max); @media (max-width: map-get($grid-breakpoints, "md")) { min-width: 90%; @@ -52,11 +54,11 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; border-radius: 50%; &.pgn__checkpoint-breadcrumb_active { - background: $checkpoint-breadcrumb-color; + background: var(--pgn-product-tour-checkpoint-color-breadcrumb); } &.pgn__checkpoint-breadcrumb_inactive { - border: 1px solid $checkpoint-breadcrumb-color; + border: 1px solid var(--pgn-product-tour-checkpoint-color-breadcrumb); background: transparent; } @@ -80,7 +82,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; } .pgn__checkpoint-body { - color: $checkpoint-body-color; + color: var(--pgn-product-tour-checkpoint-color-body); margin-bottom: map_get($spacers, 3\.5); text-align: start; } @@ -92,25 +94,25 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; } #pgn__checkpoint-title { - font-size: $h3-font-size; + font-size: var(--pgn-font-size-h3); margin-inline-end: map_get($spacers, 2\.5); margin-bottom: 0; } } .pgn__checkpoint[data-popper-placement^="top"] > #pgn__checkpoint-arrow { - left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement + left: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement bottom: 1px; [dir="rtl"] & { - left: $checkpoint-arrow-width !important; + left: var(--pgn-product-tour-checkpoint-width-arrow) !important; } &::after { - border-bottom: $checkpoint-arrow-transparent; - border-top: $checkpoint-arrow-default-color; - border-left: $checkpoint-arrow-transparent; - border-right: $checkpoint-arrow-transparent; + border-bottom: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-top: var(--pgn-product-tour-checkpoint-arrow-color-default); + border-left: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-right: var(--pgn-product-tour-checkpoint-arrow-transparent); filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1)); -webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1)); } @@ -118,39 +120,39 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; .pgn__checkpoint[data-popper-placement^="bottom"] > #pgn__checkpoint-arrow { top: -36px; - left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement + left: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement &::after { - border-bottom: $checkpoint-arrow-top-color; - border-top: $checkpoint-arrow-transparent; - border-left: $checkpoint-arrow-transparent; - border-right: $checkpoint-arrow-transparent; + border-bottom: var(--pgn-product-tour-checkpoint-arrow-color-top); + border-top: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-left: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-right: var(--pgn-product-tour-checkpoint-arrow-transparent); } } .pgn__checkpoint[data-popper-placement^="left"] > #pgn__checkpoint-arrow { - top: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement + top: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement right: 1px; &::after { - border-bottom: $checkpoint-arrow-transparent; - border-top: $checkpoint-arrow-transparent; - border-left: $checkpoint-arrow-default-color; - border-right: $checkpoint-arrow-transparent; + border-bottom: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-top: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-left: var(--pgn-product-tour-checkpoint-arrow-color-default); + border-right: var(--pgn-product-tour-checkpoint-arrow-transparent); filter: drop-shadow(3px 1px 2px rgba(0, 0, 0, .1)); } } .pgn__checkpoint[data-popper-placement^="right"] > #pgn__checkpoint-arrow { - top: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement + top: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement left: 1px; &::after { - left: -2 * $checkpoint-arrow-width; - border-bottom: $checkpoint-arrow-transparent; - border-top: $checkpoint-arrow-transparent; - border-left: $checkpoint-arrow-transparent; - border-right: $checkpoint-arrow-default-color; + left: calc(-2 * var(--pgn-product-tour-checkpoint-width-arrow)); + border-bottom: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-top: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-left: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-right: var(--pgn-product-tour-checkpoint-arrow-color-default); filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, .1)); } } diff --git a/src/ProductTour/_variables.scss b/src/ProductTour/_variables.scss index 73635c8120..543e3dfdd3 100644 --- a/src/ProductTour/_variables.scss +++ b/src/ProductTour/_variables.scss @@ -1,13 +1,13 @@ // Checkpoints -$checkpoint-background-color: $light-300 !default; +$checkpoint-background-color: var(--pgn-color-light-300) !default; -$checkpoint-body-color: $gray-700; +$checkpoint-body-color: var(--pgn-color-gray-700); -$checkpoint-border-color: $brand !default; +$checkpoint-border-color: var(--pgn-color-brand-base) !default; $checkpoint-border-width: 8px !default; -$checkpoint-breadcrumb-color: $primary !default; +$checkpoint-breadcrumb-color: var(--pgn-color-primary-base) !default; $checkpoint-arrow-width: 15px !default; $checkpoint-max-width: 480px !default; diff --git a/src/ProgressBar/ProgressBar.scss b/src/ProgressBar/ProgressBar.scss index 5b3532d62f..4ab59b44a1 100644 --- a/src/ProgressBar/ProgressBar.scss +++ b/src/ProgressBar/ProgressBar.scss @@ -2,11 +2,11 @@ @import "~bootstrap/scss/progress"; .progress { - border: $progress-bar-border-width solid $progress-bar-border-color; + border: var(--pgn-progress-bar-border-width) solid var(--pgn-progress-bar-border-color); } .progress-bar { - background-color: $progress-bar-bg; + background-color: var(--pgn-progress-bar-bar-bg-base); } .pgn__progress-annotated { @@ -16,12 +16,12 @@ .progress { overflow: visible; - background-color: $light-300; - height: $annotated-progress-height; + background-color: var(--pgn-color-light-300); + height: var(--pgn-progress-bar-height-annotated); border: none; .progress-bar { - background-color: $annotated-progress-bar-bg; + background-color: var(--pgn-progress-bar-bar-bg-annotated); overflow: visible; position: relative; } @@ -30,17 +30,17 @@ .pgn__progress-tick--black::after { content: ""; position: absolute; - height: $annotated-progress-height; + height: var(--pgn-progress-bar-height-annotated); width: 1px; right: 0; } .pgn__progress-tick--white::after { - background: $light-300; + background: var(--pgn-color-light-300); } .pgn__progress-tick--black::after { - background: $primary-500; + background: var(--pgn-color-primary-500); } @each $name, $color in $progress-colors { @@ -52,11 +52,12 @@ display: block; background: $color; position: absolute; - top: -(calc($progress-threshold-circle / 2) - calc($annotated-progress-height / 2)); - right: -(calc($progress-threshold-circle / 2)); - width: $progress-threshold-circle; - height: $progress-threshold-circle; - border-radius: calc($progress-threshold-circle / 2); + /* stylelint-disable max-line-length */ + top: calc(var(--pgn-progress-bar-threshold-circle) / 2 - var(--pgn-progress-bar-height-annotated) / 2); + right: calc(var(--pgn-progress-bar-threshold-circle) / -2); + width: var(--pgn-progress-bar-threshold-circle); + height: var(--pgn-progress-bar-threshold-circle); + border-radius: calc(var(--pgn-progress-bar-threshold-circle) / 2); z-index: 1; } } @@ -67,9 +68,9 @@ .progress::after { position: absolute; content: ""; - height: $annotated-progress-height; + height: var(--pgn-progress-bar-height-annotated); width: 1px; - background: $primary-500; + background: var(--pgn-color-primary-500); } .progress::after { @@ -83,7 +84,7 @@ .pgn__progress-hint { box-sizing: border-box; - padding: 0 $progress-hint-annotation-gap; - font-size: $small-font-size; + padding: 0 var(--pgn-progress-bar-hint-annotation-gap); + font-size: var(--pgn-font-size-small-base); } } diff --git a/src/ProgressBar/_variables.scss b/src/ProgressBar/_variables.scss index cd0d49b4e9..86348f7531 100644 --- a/src/ProgressBar/_variables.scss +++ b/src/ProgressBar/_variables.scss @@ -2,22 +2,22 @@ $progress-height: 1rem !default; $annotated-progress-height: .3125rem !default; -$progress-font-size: $font-size-base * .75 !default; +$progress-font-size: calc(var(--pgn-font-size-base) * .75) !default; $progress-bg: transparent !default; $progress-border-radius: 0 !default; $progress-box-shadow: none !default; -$progress-bar-color: $white !default; +$progress-bar-color: var(--pgn-color-white) !default; $progress-bar-bg: theme-color("accent-a") !default; $annotated-progress-bar-bg: theme-color("dark") !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; $progress-bar-border-width: 1px !default; -$progress-bar-border-color: $gray-500 !default; +$progress-bar-border-color: var(--pgn-color-gray-500) !default; $progress-threshold-circle: .5625rem !default; $progress-hint-annotation-gap: .5rem !default; $progress-colors: ( - "dark": $primary-500, - "success": $success-500, - "error": $danger-500, - "warning": $accent-b, + "dark": var(--pgn-color-primary-500), + "success": var(--pgn-color-success-500), + "error": var(--pgn-color-danger-500), + "warning": var(--pgn-color-accent-b), ) !default; diff --git a/src/SearchField/SearchField.scss b/src/SearchField/SearchField.scss index e07d39aa64..2e48dcbeaa 100644 --- a/src/SearchField/SearchField.scss +++ b/src/SearchField/SearchField.scss @@ -1,17 +1,17 @@ @import "variables"; .pgn__searchfield { - transition: $input-transition; - border: $search-border-width solid $search-border-color; + transition: var(--pgn-form-input-transition); + border: var(--pgn-search-field-border-width-base) solid var(--pgn-search-field-border-color-base); .btn:focus-visible { outline: none; position: relative; - transition: $input-transition; + transition: var(--pgn-form-input-transition); &::after { content: ""; - border: $search-border-focus-width double $search-border-focus-color; + border: var(--pgn-search-field-border-width-focus) double var(--pgn-search-field-border-color-focus); position: absolute; width: 100%; height: 100%; @@ -20,7 +20,7 @@ &.disabled, &:disabled { - opacity: $search-disabled-opacity; + opacity: var(--pgn-search-field-disabled-opacity); pointer-events: none; } @@ -29,26 +29,26 @@ &::after { content: ""; - border: $search-border-focus-width double $search-border-focus-color; + border: var(--pgn-search-field-border-width-focus) double var(--pgn-search-field-border-color-focus); position: absolute; width: 100%; height: 100%; } .pgn__searchfield_wrapper { - box-shadow: 0 0 0 $search-border-width $search-border-color-interaction; + box-shadow: 0 0 0 var(--pgn-search-field-border-width-base) var(--pgn-search-field-border-color-interaction); } } &:hover, &:active { - border-color: $search-border-color-interaction; + border-color: var(--pgn-search-field-border-color-interaction); } .form-control { border: none; - border-radius: $search-border-radius; - height: $input-height-search; + border-radius: var(--pgn-search-field-border-radius); + height: var(--pgn-search-field-input-height-search); &:focus { box-shadow: none; @@ -100,7 +100,7 @@ &::after { content: ""; - border: $search-border-focus-width double $search-border-focus-color; + border: var(--pgn-search-field-border-width-focus) double var(--pgn-search-field-border-color-focus); position: absolute; width: 100%; height: 100%; @@ -121,16 +121,16 @@ display: flex; align-items: center; width: 100%; - border: $search-border-width solid $search-border-color; + border: var(--pgn-search-field-border-width-base) solid var(--pgn-search-field-border-color-base); &:hover, &:active { - border-color: $search-border-color-interaction; + border-color: var(--pgn-search-field-border-color-interaction); } } } .pgn__searchfield__button.btn[type="submit"] { border-radius: 0; - margin-inline-start: $search-button-margin; + margin-inline-start: var(--pgn-search-field-button-margin); } diff --git a/src/SearchField/_variables.scss b/src/SearchField/_variables.scss index ebbdad6ae5..67948ad3c1 100644 --- a/src/SearchField/_variables.scss +++ b/src/SearchField/_variables.scss @@ -1,15 +1,15 @@ $search-btn-variants: ( - "light": $primary-500, - "dark": $brand-500, + "light": var(--pgn-color-primary-500), + "dark": var(--pgn-color-brand-500), ); $search-border-radius: 0 !default; $search-line-height: 1.5rem !default; -$search-border-color: $gray-500 !default; -$search-border-color-interaction: $black !default; +$search-border-color: var(--pgn-color-gray-500) !default; +$search-border-color-interaction: var(--pgn-color-black) !default; $search-border-width: .0625rem !default; $search-border-width-interaction: .125rem !default; $search-disabled-opacity: .3 !default; $search-button-margin: .5rem !default; -$input-height-search: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default; -$search-border-focus-color: $black !default; +$input-height-search: calc(($input-line-height * 1em) + ($input-padding-y * 2)) !default; +$search-border-focus-color: var(--pgn-color-black) !default; $search-border-focus-width: .3125rem !default; diff --git a/src/SelectableBox/SelectableBox.scss b/src/SelectableBox/SelectableBox.scss index 2b3cac4ac3..aef50cafce 100644 --- a/src/SelectableBox/SelectableBox.scss +++ b/src/SelectableBox/SelectableBox.scss @@ -3,7 +3,7 @@ .pgn__selectable_box-set { display: grid; grid-auto-rows: 1fr; - grid-gap: $selectable-box-space; + grid-gap: var(--pgn-selectable-box-box-space); @for $i from $min-cols-number through $max-cols-number { &.pgn__selectable_box-set--#{$i} { @@ -19,20 +19,20 @@ .pgn__selectable_box { position: relative; height: 100%; - padding: $selectable-box-padding; - box-shadow: $level-1-box-shadow; - border-radius: $selectable-box-border-radius; + padding: var(--pgn-selectable-box-padding); + box-shadow: var(--pgn-box-shadow-level-1); + border-radius: var(--pgn-selectable-box-border-radius); text-align: start; &:focus-visible { - outline: 1px solid $primary-700; + outline: 1px solid var(--pgn-color-primary-700); } .pgn__form-radio, .pgn__form-checkbox { position: absolute; - top: $selectable-box-padding; - inset-inline-end: $selectable-box-padding; + top: var(--pgn-selectable-box-padding); + inset-inline-end: var(--pgn-selectable-box-padding); input { margin-inline-end: 0; @@ -45,9 +45,9 @@ } .pgn__selectable_box-active { - outline: 2px solid $primary-500; + outline: 2px solid var(--pgn-color-primary-500); } .pgn__selectable_box-invalid { - outline: 2px solid $danger-300; + outline: 2px solid var(--pgn-color-danger-300); } diff --git a/src/Sheet/Sheet.scss b/src/Sheet/Sheet.scss index e5f5754440..4d2b3d9c8e 100644 --- a/src/Sheet/Sheet.scss +++ b/src/Sheet/Sheet.scss @@ -10,7 +10,7 @@ display: none; } - z-index: $zindex-sheet-backdrop; + z-index: var(--pgn-www-zindex-sheet-backdrop); } %component-left { @@ -35,11 +35,11 @@ position: fixed; padding: 1.25rem; background-color: white; - z-index: $zindex-sheet; + z-index: var(--pgn-www-zindex-sheet); &.pgn__sheet__dark { - background-color: $dark-500; - color: $light-300; + background-color: var(--pgn-color-dark-500); + color: var(--pgn-color-light-300); } &.bottom { diff --git a/src/Stack/Stack.scss b/src/Stack/Stack.scss index 52ed5b134d..fd38c3a0a0 100644 --- a/src/Stack/Stack.scss +++ b/src/Stack/Stack.scss @@ -4,7 +4,7 @@ .pgn__hstack { display: flex; align-self: stretch; - gap: $stack-gap; + gap: var(--pgn-stack-gap); @each $level, $space in $spacers { &.pgn__stack-gap--#{$level} { diff --git a/src/Stepper/Stepper.scss b/src/Stepper/Stepper.scss index 720684b4df..a5d754add7 100644 --- a/src/Stepper/Stepper.scss +++ b/src/Stepper/Stepper.scss @@ -12,7 +12,7 @@ display: flex; justify-content: center; align-items: center; - background: $white; + background: var(--pgn-color-white); padding: .75rem 1rem; min-height: 5.13rem; } @@ -20,7 +20,7 @@ .pgn__stepper-header-step { display: flex; align-items: center; - color: $primary; + color: var(--pgn-color-primary-base); flex-shrink: 1; min-width: 0; @@ -41,25 +41,25 @@ } .pgn__stepper-header-step-description { - font-size: $x-small-font-size; + font-size: var(--pgn-font-size-small-x); } &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step { - color: $gray-500; + color: var(--pgn-color-gray-500); } &.pgn__stepper-header-step-has-error { .pgn__bubble { background: transparent; - box-shadow: inset 0 0 0 3px $danger; + box-shadow: inset 0 0 0 3px var(--pgn-color-danger-base); * { - color: $danger; + color: var(--pgn-color-danger-base); } } .pgn__stepper-header-step-description { - color: $danger; + color: var(--pgn-color-danger-base); } } } @@ -67,7 +67,7 @@ .pgn__stepper-header-line { display: block; height: 1px; - background: $light; + background: var(--pgn-color-light-base); flex-basis: 80px; margin: 0 .5rem; } diff --git a/src/Sticky/Sticky.scss b/src/Sticky/Sticky.scss index c4029a9323..b7a6fb9f83 100644 --- a/src/Sticky/Sticky.scss +++ b/src/Sticky/Sticky.scss @@ -7,7 +7,7 @@ &.pgn__sticky-top { align-self: self-start; - top: $sticky-offset; + top: var(--pgn-sticky-offset); @each $level, $offset in $spacers { &.pgn__sticky-offset--#{$level} { @@ -16,13 +16,13 @@ } &.pgn__sticky-shadow { - box-shadow: $sticky-shadow-bottom; + box-shadow: var(--pgn-sticky-shadow-bottom); } } &.pgn__sticky-bottom { align-self: self-end; - bottom: $sticky-offset; + bottom: var(--pgn-sticky-offset); @each $level, $offset in $spacers { &.pgn__sticky-offset--#{$level} { @@ -31,7 +31,7 @@ } &.pgn__sticky-shadow { - box-shadow: $sticky-shadow-top; + box-shadow: var(--pgn-sticky-shadow-top); } } } diff --git a/src/Table/Table.scss b/src/Table/Table.scss index 9ae065437f..6a638fd46b 100644 --- a/src/Table/Table.scss +++ b/src/Table/Table.scss @@ -1,9 +1,9 @@ @import "variables"; -@import "~bootstrap/scss/tables"; +@import "tables-bootstrap"; .btn-header { padding: 0; - font-weight: $font-weight-bold; + font-weight: var(--pgn-font-weight-bold); } .table th, diff --git a/src/Table/_variables.scss b/src/Table/_variables.scss index a494d0a47a..a3b755f44d 100644 --- a/src/Table/_variables.scss +++ b/src/Table/_variables.scss @@ -5,30 +5,30 @@ $table-cell-padding: .75rem !default; $table-cell-padding-sm: .3rem !default; -$table-color: $body-color !default; +$table-color: var(--pgn-body-color) !default; $table-bg: null !default; -$table-accent-bg: rgba($black, .05) !default; +$table-accent-bg: rgba(var(--pgn-color-black), .05) !default; $table-hover-color: $table-color !default; $table-hover-bg: rgba($black, .075) !default; $table-active-bg: $table-hover-bg !default; -$table-border-width: $border-width !default; -$table-border-color: $border-color !default; +$table-border-width: var(--pgn-border-width) !default; +$table-border-color: var(--pgn-border-color) !default; $table-head-bg: theme-color("gray", "background") !default; $table-head-color: theme-color("gray", "text") !default; -$table-dark-color: $white !default; +$table-dark-color: var(--pgn-color-white) !default; $table-dark-bg: theme-color("gray", "hover") !default; -$table-dark-accent-bg: rgba($white, .05) !default; +$table-dark-accent-bg: rgba(var(--pgn-color-white), .05) !default; $table-dark-hover-color: $table-dark-color !default; -$table-dark-hover-bg: rgba($white, .075) !default; +$table-dark-hover-bg: rgba(var(--pgn-color-white), .075) !default; $table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; -$table-dark-color: $white !default; +$table-dark-color: var(--pgn-color-white) !default; $table-striped-order: odd !default; -$table-caption-color: $text-muted !default; +$table-caption-color: var(--pgn-text-muted) !default; $table-bg-level: -9 !default; $table-border-level: -6 !default; diff --git a/src/Table/tables-bootstrap.scss b/src/Table/tables-bootstrap.scss new file mode 100644 index 0000000000..89844bf41f --- /dev/null +++ b/src/Table/tables-bootstrap.scss @@ -0,0 +1,168 @@ +.table { + width: 100%; + margin-bottom: var(--pgn-core-spacer); + color: var(--pgn-table-color-base); + background-color: var(--pgn-table-bg-base); + + th, + td { + padding: var(--pgn-table-cell-padding-base); + vertical-align: top; + border-top: var(--pgn-table-border-width) solid var(--pgn-table-color-border); + } + + thead th { + vertical-align: bottom; + border-bottom: calc(2 * var(--pgn-table-border-width)) solid var(--pgn-table-color-border); + } + + tbody + tbody { + border-top: calc(2 * var(--pgn-table-border-width)) solid var(--pgn-table-color-border); + } + + .thead-dark { + th { + color: var(--pgn-table-dark-color-base); + background-color: var(--pgn-table-dark-bg-base); + border-color: var(--pgn-table-dark-color-border); + } + } + + .thead-light { + th { + color: var(--pgn-table-color-head); + background-color: var(--pgn-table-bg-head); + border-color: var(--pgn-table-color-border); + } + } +} + +// Condensed table w/ half padding +.table-sm { + th, + td { + padding: var(--pgn-table-cell-padding-sm); + } +} + +// Border versions +// +// Add or remove borders all around the table and between all the columns. +.table-bordered { + border: var(--pgn-table-border-width) solid var(--pgn-table-color-border); + + th, + td { + border: var(--pgn-table-border-width) solid var(--pgn-table-color-border); + } + + thead { + th, + td { + border-bottom-width: calc(2 * var(--pgn-table-border-width)); + } + } +} + +.table-borderless { + th, + td, + thead th, + tbody + tbody { + border: 0; + } +} + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) +.table-striped { + tbody tr:nth-of-type(#{var(--pgn-table-striped-order)}) { + background-color: var(--pgn-table-bg-accent); + } +} + +// Hover effect +// +// Placed here since it has to come after the potential zebra striping +.table-hover { + tbody tr { + @include hover() { + color: var(--pgn-table-color-hover); + background-color: var(--pgn-table-bg-hover); + } + } +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. +@each $color, $value in $theme-colors { + @include table-row-variant( + $color, + theme-color-level($color, $table-bg-level), + theme-color-level($color, $table-border-level)); +} + +@include table-row-variant(active, $table-active-bg); + + +// Dark styles +// +// Same table markup, but inverted color scheme: dark background and light text. +.table-dark { + color: var(--pgn-table-dark-color-base); + background-color: var(--pgn-table-dark-bg-base); + + th, + td, + thead th { + border-color: var(--pgn-table-dark-color-border); + } + + &.table-bordered { + border: 0; + } + + &.table-striped { + tbody tr:nth-of-type(#{var(--pgn-table-striped-order)}) { + background-color: var(--pgn-table-dark-bg-accent); + } + } + + &.table-hover { + tbody tr { + @include hover() { + color: var(--pgn-table-dark-color-hover); + background-color: var(--pgn-table-dark-bg-hover); + } + } + } +} + + +// Responsive tables +// +// Generate series of `.table-responsive-*` classes for configuring the screen +// size of where your table will overflow. +.table-responsive { + @each $breakpoint in map-keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); + + &#{$infix} { + @include media-breakpoint-down($breakpoint) { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + + > .table-bordered { + border: 0; + } + } + } + } +} diff --git a/src/Tabs/Tabs.scss b/src/Tabs/Tabs.scss index 48214e7d0b..4ea9c1a25c 100644 --- a/src/Tabs/Tabs.scss +++ b/src/Tabs/Tabs.scss @@ -11,9 +11,9 @@ position: absolute; top: 0; right: 0; - min-height: $tab-notification-height; - min-width: $tab-notification-width; - font-size: $tab-notification-font-size; + min-height: var(--pgn-tabs-notification-height); + min-width: var(--pgn-tabs-notification-width); + font-size: var(--pgn-tabs-notification-font-size); } } diff --git a/src/Tabs/_variables.scss b/src/Tabs/_variables.scss index 1aa61d194a..9d58323477 100644 --- a/src/Tabs/_variables.scss +++ b/src/Tabs/_variables.scss @@ -1,3 +1,3 @@ $tab-notification-height: 1rem !default; $tab-notification-width: 1rem !default; -$tab-notification-font-size: $font-size-xs !default; +$tab-notification-font-size: var(--pgn-font-size-xs) !default; diff --git a/src/Toast/Toast.scss b/src/Toast/Toast.scss index 58658f0e9c..8336935d75 100644 --- a/src/Toast/Toast.scss +++ b/src/Toast/Toast.scss @@ -2,12 +2,12 @@ @import "~bootstrap/scss/toasts"; .toast { - background-color: $toast-background-color; - box-shadow: $toast-box-shadow; + background-color: var(--pgn-toast-color-background); + box-shadow: var(--pgn-toast-box-shadow); margin: 0; padding: 1rem; position: relative; - border-radius: $toast-border-radius; + border-radius: var(--pgn-toast-border-radius); z-index: 2; &.show { @@ -32,7 +32,7 @@ padding: 0; p { - font-size: $small-font-size; + font-size: var(--pgn-font-size-small-base); margin: 0; padding-right: .75rem; } @@ -47,7 +47,7 @@ } @media only screen and (min-width: 768px) { - min-width: $toast-max-width; - max-width: $toast-max-width; + min-width: var(--pgn-toast-max-width); + max-width: var(--pgn-toast-max-width); } } diff --git a/src/Toast/ToastContainer.scss b/src/Toast/ToastContainer.scss index b29ba0e5dc..4d652d1b1f 100644 --- a/src/Toast/ToastContainer.scss +++ b/src/Toast/ToastContainer.scss @@ -1,24 +1,24 @@ @import "variables"; .toast-container { - bottom: $toast-container-gutter-lg; - left: $toast-container-gutter-lg; + bottom: var(--pgn-toast-container-gutter-lg); + left: var(--pgn-toast-container-gutter-lg); position: fixed; z-index: 2; [dir="rtl"] & { - right: $toast-container-gutter-lg; + right: var(--pgn-toast-container-gutter-lg); left: 0; } @media only screen and (max-width: 768px) { - bottom: $toast-container-gutter-sm; - right: $toast-container-gutter-sm; - left: $toast-container-gutter-sm; + bottom: var(--pgn-toast-container-gutter-sm); + right: var(--pgn-toast-container-gutter-sm); + left: var(--pgn-toast-container-gutter-sm); [dir="rtl"] & { - left: $toast-container-gutter-sm; - right: $toast-container-gutter-sm; + left: var(--pgn-toast-container-gutter-sm); + right: var(--pgn-toast-container-gutter-sm); } } } diff --git a/src/Toast/_variables.scss b/src/Toast/_variables.scss index 34168aaa62..c167f328f5 100644 --- a/src/Toast/_variables.scss +++ b/src/Toast/_variables.scss @@ -5,14 +5,15 @@ $toast-padding-x: .75rem !default; $toast-padding-y: .25rem !default; $toast-font-size: .875rem !default; $toast-color: null !default; -$toast-background-color: $gray-700 !default; +$toast-background-color: var(--pgn-color-gray-700) !default; $toast-border-width: 1px !default; $toast-border-color: rgba(0, 0, 0, .1) !default; $toast-border-radius: .25rem !default; -$toast-box-shadow: 0 1.25rem 2.5rem rgba($black, .15), 0 .5rem 3rem rgba($black, .15) !default; +$toast-box-shadow: 0 1.25rem 2.5rem rgba(var(--pgn-color-black), .15), + 0 .5rem 3rem rgba(var(--pgn-color-black), .15) !default; -$toast-header-color: $white !default; -$toast-header-background-color: $gray-700 !default; +$toast-header-color: var(--pgn-color-white) !default; +$toast-header-background-color: var(--pgn-color-gray-700) !default; $toast-header-border-color: rgba(0, 0, 0, .5) !default; $toast-container-gutter-lg: 1.25rem !default; diff --git a/src/Tooltip/Tooltip.scss b/src/Tooltip/Tooltip.scss index 20ce7a4350..bc73eebf8b 100644 --- a/src/Tooltip/Tooltip.scss +++ b/src/Tooltip/Tooltip.scss @@ -2,36 +2,36 @@ @import "~bootstrap/scss/tooltip"; .tooltip { - filter: $tooltip-box-shadow; + filter: var(--pgn-tooltip-box-shadow); } .tooltip-light { .tooltip-inner { - color: $tooltip-color-light; - background-color: $tooltip-bg-light; + color: var(--pgn-tooltip-color-light); + background-color: var(--pgn-tooltip-bg-light); } &.bs-tooltip-top .arrow { &::before { - border-top-color: $tooltip-arrow-color-light; + border-top-color: var(--pgn-tooltip-arrow-color-light); } } &.bs-tooltip-right .arrow { &::before { - border-right-color: $tooltip-arrow-color-light; + border-right-color: var(--pgn-tooltip-arrow-color-light); } } &.bs-tooltip-bottom .arrow { &::before { - border-bottom-color: $tooltip-arrow-color-light; + border-bottom-color: var(--pgn-tooltip-arrow-color-light); } } &.bs-tooltip-left .arrow { &::before { - border-left-color: $tooltip-arrow-color-light; + border-left-color: var(--pgn-tooltip-arrow-color-light); } } } diff --git a/src/Tooltip/_variables.scss b/src/Tooltip/_variables.scss index cd74cfe212..002a34705f 100644 --- a/src/Tooltip/_variables.scss +++ b/src/Tooltip/_variables.scss @@ -1,10 +1,10 @@ // Tooltips -$tooltip-font-size: $font-size-sm !default; +$tooltip-font-size: var(--pgn-font-size-sm) !default; $tooltip-max-width: 200px !default; -$tooltip-color: $white !default; -$tooltip-bg: $black !default; -$tooltip-border-radius: $border-radius !default; +$tooltip-color: var(--pgn-color-white) !default; +$tooltip-bg: var(--pgn-color-black) !default; +$tooltip-border-radius: var(--pgn-border-radius-base) !default; $tooltip-opacity: 1 !default; $tooltip-padding-y: .5rem !default; $tooltip-padding-x: .5rem !default; @@ -16,6 +16,6 @@ $tooltip-arrow-width: .8rem !default; $tooltip-arrow-height: .4rem !default; $tooltip-arrow-color: $tooltip-bg !default; -$tooltip-color-light: $black !default; -$tooltip-bg-light: $white !default; -$tooltip-arrow-color-light: $white !default; +$tooltip-color-light: var(--pgn-color-black) !default; +$tooltip-bg-light: var(--pgn-color-white) !default; +$tooltip-arrow-color-light: var(--pgn-color-white) !default; diff --git a/src/ValidationMessage/ValidationMessage.scss b/src/ValidationMessage/ValidationMessage.scss index 2ca69ff4dc..5c71067148 100644 --- a/src/ValidationMessage/ValidationMessage.scss +++ b/src/ValidationMessage/ValidationMessage.scss @@ -1,5 +1,5 @@ .form-control.is-invalid ~ .invalid-feedback-nodanger { - color: $body-color; + color: var(--pgn-body-color); } .fa-icon-spacing { diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss index 1c152549eb..931fa58fbb 100644 --- a/tokens/build/_variables.scss +++ b/tokens/build/_variables.scss @@ -1,3 +1,7 @@ +$pgn-www-zindex-modal: 2503 !default; +$pgn-www-zindex-sheet-backdrop: 2501 !default; +$pgn-www-zindex-sheet: 2502 !default; +$pgn-www-zindex-header: 2500 !default; $pgn-paragraph-margin-bottom: 1rem !default; $pgn-line-height-sm: 1.5 !default; $pgn-line-height-lg: 1.5 !default; @@ -5,6 +9,7 @@ $pgn-line-height-base: 1.5556 !default; $pgn-headings-line-height: 1.25 !default; $pgn-headings-font-family: null !default; $pgn-headings-margin-bottom: .5rem !default; +$pgn-font-weight-lead: null !default; $pgn-font-weight-bolder: bolder !default; $pgn-font-weight-bold: 700 !default; $pgn-font-weight-semi-bold: 500 !default; @@ -40,6 +45,7 @@ $pgn-display-size-1: 3.75rem !default; $pgn-transition-collapse: height .35s ease !default; $pgn-transition-fade: opacity .15s linear !default; $pgn-transition-base: all .2s ease-in-out !default; +$pgn-link-emphasized-hover-darken-percentage: 15% !default; $pgn-link-brand-inline-hover-decoration-color: #003C5E !default; $pgn-link-brand-inline-hover-decoration: underline !default; $pgn-link-brand-inline-hover-color: #003C5E !default; @@ -89,6 +95,9 @@ $pgn-size-base-100: 100rem !default; $pgn-size-base-75: 75rem !default; $pgn-size-base-50: 50rem !default; $pgn-size-base-25: 25rem !default; +$pgn-list-group-item-padding-x: 1.25rem !default; +$pgn-list-group-item-padding-y: .75rem !default; +$pgn-list-group-color: null !default; $pgn-grid-row-columns: 6 !default; $pgn-grid-gutter-width: 24px !default; $pgn-grid-columns: 12 !default; @@ -123,18 +132,24 @@ $pgn-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rg $pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default; +$pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3) !default; +$pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2) !default; +$pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3) !default; $pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default; +$pgn-core-list-inline-padding: .5rem !default; +$pgn-core-mark-bg: #FFF243 !default; +$pgn-core-mark-padding: .2em !default; $pgn-core-input-btn-focus-width: 1px !default; $pgn-core-input-btn-line-height-sm: 1.4286 !default; $pgn-core-input-btn-line-height-base: 1.3333 !default; $pgn-core-input-btn-font-size-lg: 1.325rem !default; $pgn-core-input-btn-font-size-sm: .875rem !default; $pgn-core-input-btn-font-size-base: 1.125rem !default; -$pgn-core-input-btn-font-family: null !default; +$pgn-core-input-btn-font-family: inherit !default; $pgn-core-input-btn-padding-lg-x: 1.25rem !default; $pgn-core-input-btn-padding-lg-y: .6875rem !default; $pgn-core-input-btn-padding-sm-x: .75rem !default; @@ -278,20 +293,21 @@ $pgn-modal-dialog-margin-base: 1.5rem !default; $pgn-modal-footer-padding-y: 1.5rem !default; $pgn-modal-footer-padding-x: 1rem !default; $pgn-modal-footer-margin-between: .5rem !default; -$pgn-modal-inner-padding: 1.5rem !default; +$pgn-modal-inner-padding-bottom: .7rem !default; +$pgn-modal-inner-padding-base: 1.5rem !default; $pgn-menu-border-hover: transparent !default; $pgn-menu-border-active: transparent !default; $pgn-menu-border-base: transparent !default; $pgn-image-figure-caption-font-size: 90% !default; $pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075) !default; $pgn-image-thumbnail-padding: .25rem !default; +$pgn-icon-button-bg: transparent !default; +$pgn-icon-button-diameter-sm: 2.25rem !default; +$pgn-icon-button-diameter-md: 2.75rem !default; $pgn-icon-lg: 1.75rem !default; $pgn-icon-md: 1.5rem !default; $pgn-icon-sm: 1.25rem !default; $pgn-icon-inline: .8em !default; -$pgn-icon-button-bg: transparent !default; -$pgn-icon-button-diameter-sm: 2.25rem !default; -$pgn-icon-button-diameter-md: 2.75rem !default; $pgn-form-select-icon-padding: .5625rem !default; $pgn-form-control-icon-width: 32px !default; $pgn-form-feedback-tooltip-opacity: .9 !default; @@ -412,12 +428,14 @@ $pgn-card-height-base: null !default; $pgn-card-cap-color: null !default; $pgn-card-cap-bg: rgba(0, 0, 0, .03) !default; $pgn-card-border-color-focus: rgba(0, 0, 0, .5) !default; +$pgn-card-border-color-base: rgba(0, 0, 0, .125) !default; $pgn-card-border-radius-logo: .25rem !default; $pgn-card-border-radius-image: .3125rem !default; $pgn-card-spacer-y: .75rem !default; $pgn-card-spacer-x: 1.25rem !default; $pgn-btn-transition: null !default; $pgn-btn-block-spacing-y: .5rem !default; +$pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1) !default; $pgn-btn-tertiary-inverse-bg-base: transparent !default; $pgn-btn-tertiary-bg-base: transparent !default; $pgn-btn-disabled-opacity: .65 !default; @@ -443,6 +461,9 @@ $pgn-badge-padding-y: .125rem !default; $pgn-badge-padding-x-pill: .6em !default; $pgn-badge-padding-x-base: .5rem !default; $pgn-badge-font-size: 75% !default; +$pgn-avatar-button-padding-left-lg: .25em !default; +$pgn-avatar-button-padding-left-sm: .25em !default; +$pgn-avatar-button-padding-left-base: .25em !default; $pgn-avatar-size-huge: 18.75rem !default; $pgn-avatar-size-xxl: 11.5rem !default; $pgn-avatar-size-xl: 6rem !default; @@ -451,9 +472,6 @@ $pgn-avatar-size-sm: 2.25rem !default; $pgn-avatar-size-xs: 1.5rem !default; $pgn-avatar-size-base: 3rem !default; $pgn-avatar-border-radius: 100% !default; -$pgn-avatar-button-padding-left-lg: .25em !default; -$pgn-avatar-button-padding-left-sm: .25em !default; -$pgn-avatar-button-padding-left-base: .25em !default; $pgn-annotation-arrow-border-width: .5rem !default; $pgn-annotation-arrow-side-margin: .25rem !default; $pgn-annotation-max-width: 18.75rem !default; @@ -559,6 +577,7 @@ $pgn-color-gray-400: #8F8F8F !default; $pgn-color-gray-300: #ADADAD !default; $pgn-color-gray-200: #CCCCCC !default; $pgn-color-gray-100: #EBEBEB !default; +$pgn-color-theme-interval: 8% !default; $pgn-color-accent-b: #FFEE88 !default; $pgn-color-accent-a: #00BBF9 !default; $pgn-color-teal: #006DAA !default; @@ -578,6 +597,7 @@ $pgn-border-width: 1px !default; $pgn-headings-color: $pgn-color-black !default; $pgn-headings-font-weight: $pgn-font-weight-bold !default; $pgn-font-weight-base: $pgn-font-weight-normal !default; +$pgn-font-size-lead: calc($pgn-font-size-base * 1.25) !default; $pgn-font-size-mobile-h6: $pgn-font-size-h6 !default; $pgn-font-size-mobile-h5: $pgn-font-size-h5 !default; $pgn-font-size-mobile-h4: $pgn-font-size-h4 !default; @@ -588,9 +608,17 @@ $pgn-display-weight-4: $pgn-font-weight-bold !default; $pgn-display-weight-3: $pgn-font-weight-bold !default; $pgn-display-weight-2: $pgn-font-weight-bold !default; $pgn-display-weight-1: $pgn-font-weight-bold !default; -$pgn-box-shadow-lg: 0 .25rem .5rem rgba($pgn-color-black, .3) !default; -$pgn-box-shadow-sm: 0 .0625rem .125rem rgba($pgn-color-black, .2) !default; -$pgn-box-shadow-base: 0 .125rem .25rem rgba($pgn-color-black, .3) !default; +$pgn-list-group-action-active-bg: $pgn-color-gray-200 !default; +$pgn-list-group-action-color-base: $pgn-color-gray-700 !default; +$pgn-list-group-disabled-color: $pgn-color-gray-600 !default; +$pgn-list-group-border-radius: $pgn-border-radius-base !default; +$pgn-list-group-border-width: $pgn-border-width !default; +$pgn-list-group-border-color: rgba($pgn-color-black, .125) !default; +$pgn-list-group-bg-hover: $pgn-color-gray-100 !default; +$pgn-list-group-bg-base: $pgn-color-white !default; +$pgn-core-dt-font-weight: $pgn-font-weight-bold !default; +$pgn-core-blockquote-font-size: calc($pgn-font-size-base * 1.25) !default; +$pgn-core-blockquote-small-font-size: $pgn-font-size-small-base !default; $pgn-core-input-btn-border-width: $pgn-border-width !default; $pgn-core-input-btn-focus-box-shadow: 0 0 0 $pgn-core-input-btn-focus-width $pgn-core-input-btn-focus-color !default; $pgn-core-input-btn-line-height-lg: $pgn-line-height-lg !default; @@ -669,7 +697,7 @@ $pgn-modal-backdrop-bg: $pgn-color-black !default; $pgn-modal-content-border-radius: $pgn-border-radius-lg !default; $pgn-modal-content-bg: $pgn-color-white !default; $pgn-modal-title-line-height: $pgn-line-height-base !default; -$pgn-modal-footer-padding-base: $pgn-modal-footer-padding-y $pgn-modal-footer-padding-x !default; +$pgn-modal-footer-padding-base: $pgn-modal-footer-padding-x $pgn-modal-footer-padding-y !default; $pgn-menu-background-base: $pgn-btn-tertiary-bg-base !default; $pgn-image-thumbnail-border-radius: $pgn-border-radius-base !default; $pgn-image-thumbnail-border-color: $pgn-color-gray-200 !default; @@ -728,6 +756,7 @@ $pgn-dropdown-border-width: $pgn-border-width !default; $pgn-dropdown-bg: $pgn-color-white !default; $pgn-dropdown-font-size: $pgn-font-size-base !default; $pgn-dropdown-padding-header: $pgn-dropdown-padding-y-base $pgn-dropdown-padding-x-item !default; +$pgn-data-table-box-shadow: $pgn-box-shadow-sm !default; $pgn-data-table-border: 1px solid $pgn-color-gray-200 !default; $pgn-data-table-background-color: $pgn-color-white !default; $pgn-collapsible-card-spacer-x-lg: $pgn-card-spacer-x !default; @@ -754,10 +783,9 @@ $pgn-card-margin-grid: $pgn-card-margin-group !default; $pgn-card-margin-deck: $pgn-card-margin-group !default; $pgn-card-image-horizontal-width-min: $pgn-card-image-horizontal-width-max !default; $pgn-card-bg: $pgn-color-white !default; -$pgn-card-border-color-base: rgba($pgn-color-black, .125) !default; $pgn-card-border-radius-base: $pgn-border-radius-base !default; $pgn-card-border-width: $pgn-border-width !default; -$pgn-btn-tertiary-inverse-bg-hover: rgba($pgn-color-white, .1) !default; +$pgn-btn-tertiary-inverse-bg-active: $pgn-btn-tertiary-inverse-bg-hover !default; $pgn-btn-tertiary-inverse-color: $pgn-color-white !default; $pgn-btn-tertiary-color: $pgn-color-gray-700 !default; $pgn-btn-box-shadow-base: inset 0 1px 0 rgba($pgn-color-white, .15), 0 1px 1px rgba($pgn-color-black, .075) !default; @@ -771,12 +799,14 @@ $pgn-btn-font-size-lg: $pgn-core-input-btn-font-size-lg !default; $pgn-btn-font-size-sm: $pgn-core-input-btn-font-size-sm !default; $pgn-btn-font-size-base: $pgn-core-input-btn-font-size-base !default; $pgn-btn-font-family: $pgn-core-input-btn-font-family !default; +$pgn-btn-padding-x-sm: $pgn-core-input-btn-padding-sm-x !default; $pgn-btn-padding-x-lg: $pgn-core-input-btn-padding-lg-x !default; $pgn-btn-padding-x-base: $pgn-core-input-btn-padding-x !default; -$pgn-btn-padding-y-sm-x: $pgn-core-input-btn-padding-sm-x !default; -$pgn-btn-padding-y-sm-y: $pgn-core-input-btn-padding-sm-y !default; +$pgn-btn-padding-y-sm: $pgn-core-input-btn-padding-sm-y !default; $pgn-btn-padding-y-lg: $pgn-core-input-btn-padding-lg-y !default; $pgn-btn-padding-y-base: $pgn-core-input-btn-padding-y !default; +$pgn-breadcrumb-inverse-color: $pgn-color-white !default; +$pgn-breadcrumb-inverse-spacer: $pgn-color-light-700 !default; $pgn-breadcrumb-color-divider: $pgn-color-gray-600 !default; $pgn-breadcrumb-bg: $pgn-color-gray-200 !default; $pgn-breadcrumb-border-radius-base: $pgn-border-radius-base !default; @@ -802,16 +832,22 @@ $pgn-color-primary-500: $pgn-color-primary-base !default; $pgn-color-gray-500: $pgn-color-gray-base !default; $pgn-body-color: $pgn-color-gray-700 !default; $pgn-body-bg: $pgn-color-white !default; +$pgn-border-hr-margin-y: $pgn-core-spacer !default; +$pgn-border-hr-width: $pgn-border-width !default; +$pgn-border-hr-color: rgba($pgn-color-black, .1) !default; $pgn-border-color: $pgn-color-gray-200 !default; $pgn-link-brand-inline-color: $pgn-color-brand-500 !default; $pgn-link-brand-color: $pgn-color-brand-500 !default; $pgn-link-muted-inline-color: $pgn-color-primary-500 !default; $pgn-link-muted-color: $pgn-color-primary-500 !default; +$pgn-list-group-action-active-color: $pgn-body-color !default; +$pgn-list-group-action-color-hover: $pgn-list-group-action-color-base !default; +$pgn-list-group-disabled-bg: $pgn-list-group-bg-base !default; +$pgn-list-group-active-color-base: $pgn-component-active-color !default; $pgn-tooltip-arrow-color-base: $pgn-tooltip-bg-base !default; $pgn-table-dark-color-border: $pgn-table-dark-bg-base !default; $pgn-table-dark-color-hover: $pgn-table-dark-color-base !default; $pgn-table-border-color: $pgn-border-color !default; -$pgn-table-color-border: $pgn-border-color !default; $pgn-table-color-base: $pgn-body-color !default; $pgn-search-field-input-height-search: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2) !default; $pgn-search-field-border-color-base: $pgn-color-gray-500 !default; @@ -894,8 +930,6 @@ $pgn-dropdown-link-active-color: $pgn-component-active-color !default; $pgn-dropdown-border-radius-inner: calc($pgn-dropdown-border-radius-base - $pgn-dropdown-border-width) !default; $pgn-dropdown-color-header: $pgn-color-gray-500 !default; $pgn-dropdown-color-base: $pgn-body-color !default; -$pgn-data-table-box-shadow: $pgn-box-shadow-sm !default; -$pgn-btn-tertiary-inverse-bg-active: $pgn-btn-tertiary-inverse-bg-hover !default; $pgn-btn-tertiary-bg-active: $pgn-color-light-500 !default; $pgn-btn-tertiary-bg-hover: $pgn-color-light-500 !default; $pgn-btn-disabled-link-color: $pgn-color-gray-500 !default; @@ -913,9 +947,9 @@ $pgn-color-success-500: $pgn-color-success-base !default; $pgn-color-secondary-500: $pgn-color-secondary-base !default; $pgn-link-inline-color: $pgn-color-info-500 !default; $pgn-link-color: $pgn-color-info-500 !default; +$pgn-list-group-active-bg: $pgn-component-active-bg !default; $pgn-core-input-btn-focus-color: $pgn-component-active-bg !default; $pgn-table-caption-color: $pgn-text-muted !default; -$pgn-table-color-caption: $pgn-text-muted !default; $pgn-table-color-hover: $pgn-table-color-base !default; $pgn-popover-danger-icon-color: $pgn-color-warning-500 !default; $pgn-popover-warning-icon-color: $pgn-color-warning-500 !default; @@ -951,6 +985,7 @@ $pgn-form-input-height-lg: calc($pgn-form-input-line-height-lg * 1em + $pgn-core $pgn-form-input-focus-color-border: $pgn-component-active-bg !default; $pgn-form-input-border-height: calc($pgn-form-input-border-width * 2) !default; $pgn-dropzone-error-wrapper-color: $pgn-color-danger-500 !default; +$pgn-list-group-active-color-border: $pgn-list-group-active-bg !default; $pgn-pagination-border-color-active: $pgn-pagination-bg-active !default; $pgn-pagination-color-base: $pgn-link-color !default; $pgn-form-feedback-icon-color-invalid: $pgn-form-feedback-color-invalid !default; diff --git a/tokens/build/scss-to-css-components.json b/tokens/build/scss-to-css-components.json index 4ccf126be4..303b3a35bd 100644 --- a/tokens/build/scss-to-css-components.json +++ b/tokens/build/scss-to-css-components.json @@ -1 +1 @@ -{"$alert-padding-y":"--pgn-alert-padding-y","$alert-padding-x":"--pgn-alert-padding-x","$alert-margin-bottom":"--pgn-alert-margin-bottom","$alert-border-radius":"--pgn-alert-border-radius","$alert-border-width":"--pgn-alert-border-width","$alert-link-font-weight":"--pgn-alert-font-weight-link","$alert-font-size":"--pgn-alert-font-size","$alert-title-color":"--pgn-alert-color-title","$alert-content-color":"--pgn-alert-color-content","$alert-box-shadow":"--pgn-alert-box-shadow","$alert-bg-level":"--pgn-alert-level-bg","$alert-border-level":"--pgn-alert-level-border","$alert-color-level":"--pgn-alert-level-color","$alert-icon-space":"--pgn-alert-icon-space","$alert-line-height":"--pgn-alert-line-height","$avatar-border":"--pgn-avatar-border-base","$avatar-border-radius":"--pgn-avatar-border-radius","$avatar-size":"--pgn-avatar-size-base","$avatar-size-xs":"--pgn-avatar-size-xs","$avatar-size-sm":"--pgn-avatar-size-sm","$avatar-size-lg":"--pgn-avatar-size-lg","$avatar-size-xl":"--pgn-avatar-size-xl","$avatar-size-xxl":"--pgn-avatar-size-xxl","$avatar-size-huge":"--pgn-avatar-size-huge","$avatar-button-padding-left":"--pgn-avatar-button-padding-left-base","$avatar-button-padding-left-sm":"--pgn-avatar-button-padding-left-sm","$avatar-button-padding-left-lg":"--pgn-avatar-button-padding-left-lg","$btn-padding-y":"--pgn-btn-padding-y-base","$btn-padding-y-lg":"--pgn-btn-padding-y-lg","$btn-padding-x":"--pgn-btn-padding-x-base","$btn-padding-x-lg":"--pgn-btn-padding-x-lg","$input-btn-padding-y-sm":"--pgn-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-btn-padding-sm-x","$btn-font-family":"--pgn-btn-font-family","$btn-font-size":"--pgn-btn-font-size-base","$btn-font-size-sm":"--pgn-btn-font-size-sm","$btn-font-size-lg":"--pgn-btn-font-size-lg","$btn-font-weight":"--pgn-btn-font-width","$btn-line-height":"--pgn-btn-line-height-base","$btn-line-height-sm":"--pgn-btn-line-height-sm","$btn-line-height-lg":"--pgn-btn-line-height-lg","$btn-border-width":"--pgn-btn-border-width","$btn-border-radius":"--pgn-btn-border-radius-base","$btn-border-radius-lg":"--pgn-btn-border-radius-lg","$btn-border-radius-sm":"--pgn-btn-border-radius-sm","$btn-box-shadow":"--pgn-btn-box-shadow-base","$btn-active-box-shadow":"--pgn-btn-box-shadow-active","$btn-focus-width":"--pgn-btn-focus-width","$btn-focus-gap":"--pgn-btn-focus-gap","$btn-disabled-opacity":"--pgn-btn-disabled-opacity","$btn-link-disabled-color":"--pgn-btn-disabled-link-color","$btn-tertiary-color":"--pgn-btn-tertiary-color","$btn-tertiary-bg":"--pgn-btn-tertiary-bg-base","$btn-tertiary-hover-bg":"--pgn-btn-tertiary-bg-hover","$btn-tertiary-active-bg":"--pgn-btn-tertiary-bg-active","$btn-inverse-tertiary-color":"--pgn-btn-tertiary-inverse-color","$btn-inverse-tertiary-bg":"--pgn-btn-tertiary-inverse-bg-base","$btn-inverse-tertiary-hover-bg":"--pgn-btn-tertiary-inverse-bg-hover","$btn-inverse-tertiary-active-bg":"--pgn-btn-tertiary-inverse-bg-active","$btn-block-spacing-y":"--pgn-btn-block-spacing-y","$btn-transition":"--pgn-btn-transition","$spinner-width":"--pgn-spinner-width","$spinner-height":"--pgn-spinner-height","$spinner-border-width":"--pgn-spinner-border-width","$spinner-width-sm":"--pgn-spinner-sm-width","$spinner-height-sm":"--pgn-spinner-sm-height","$spinner-border-width-sm":"--pgn-spinner-sm-border-width"} \ No newline at end of file +{"$action-row-gap-x":"--pgn-action-row-gap-x","$action-row-gap-y":"--pgn-action-row-gap-y","$alert-padding-y":"--pgn-alert-padding-y","$alert-padding-x":"--pgn-alert-padding-x","$alert-margin-bottom":"--pgn-alert-margin-bottom","$alert-border-radius":"--pgn-alert-border-radius","$alert-border-width":"--pgn-alert-border-width","$alert-link-font-weight":"--pgn-alert-font-weight-link","$alert-font-size":"--pgn-alert-font-size","$alert-title-color":"--pgn-alert-color-title","$alert-content-color":"--pgn-alert-color-content","$alert-box-shadow":"--pgn-alert-box-shadow","$alert-bg-level":"--pgn-alert-level-bg","$alert-border-level":"--pgn-alert-level-border","$alert-color-level":"--pgn-alert-level-color","$alert-icon-space":"--pgn-alert-icon-space","$alert-line-height":"--pgn-alert-line-height","$annotation-padding":"--pgn-annotation-padding","$annotation-box-shadow":"--pgn-annotation-box-shadow","$annotation-border-radius":"--pgn-annotation-border-radius","$annotation-max-width":"--pgn-annotation-max-width","$annotation-font-size":"--pgn-annotation-font-size","$annotation-line-height":"--pgn-annotation-line-height","$annotation-arrow-side-margin":"--pgn-annotation-arrow-side-margin","$annotation-arrow-border-width":"--pgn-annotation-arrow-border-width","$avatar-border":"--pgn-avatar-border-base","$avatar-border-radius":"--pgn-avatar-border-radius","$avatar-size":"--pgn-avatar-size-base","$avatar-size-xs":"--pgn-avatar-size-xs","$avatar-size-sm":"--pgn-avatar-size-sm","$avatar-size-lg":"--pgn-avatar-size-lg","$avatar-size-xl":"--pgn-avatar-size-xl","$avatar-size-xxl":"--pgn-avatar-size-xxl","$avatar-size-huge":"--pgn-avatar-size-huge","$avatar-button-padding-left":"--pgn-avatar-button-padding-left-base","$avatar-button-padding-left-sm":"--pgn-avatar-button-padding-left-sm","$avatar-button-padding-left-lg":"--pgn-avatar-button-padding-left-lg","$badge-font-size":"--pgn-badge-font-size","$badge-font-weight":"--pgn-badge-font-weight","$badge-padding-x":"--pgn-badge-padding-x-base","$badge-pill-padding-x":"--pgn-badge-padding-x-pill","$badge-padding-y":"--pgn-badge-padding-y","$badge-border-radius":"--pgn-badge-border-radius-base","$badge-pill-border-radius":"--pgn-badge-border-radius-pill","$badge-transition":"--pgn-badge-transition","$badge-focus-width":"--pgn-badge-focus-width","$breadcrumb-font-size":"--pgn-breadcrumb-font-size","$breadcrumb-padding-y":"--pgn-breadcrumb-padding-y","$breadcrumb-padding-x":"--pgn-breadcrumb-padding-x","$breadcrumb-item-padding":"--pgn-breadcrumb-padding-item","$breadcrumb-margin-bottom":"--pgn-breadcrumb-margin-bottom","$breadcrumb-margin-left":"--pgn-breadcrumb-margin-left","$breadcrumb-border-focus-axis-y":"--pgn-breadcrumb-border-focus-axis-y","$breadcrumb-border-focus-axis-x":"--pgn-breadcrumb-border-focus-axis-x","$breadcrumb-border-focus-width":"--pgn-breadcrumb-border-focus-width","$breadcrumb-border-radius":"--pgn-breadcrumb-border-radius-base","$breadcrumb-focus-border-radius":"--pgn-breadcrumb-border-radius-focus","$breadcrumb-bg":"--pgn-breadcrumb-bg","$breadcrumb-color":"--pgn-breadcrumb-color-base","$breadcrumb-divider-color":"--pgn-breadcrumb-color-divider","$breadcrumb-active-color":"--pgn-breadcrumb-color-active","$breadcrumb-inverse-active":"--pgn-breadcrumb-inverse-active","$breadcrumb-inverse-spacer":"--pgn-breadcrumb-inverse-spacer","$breadcrumb-inverse-color":"--pgn-breadcrumb-inverse-color","$bubble-expandable-padding-y":"--pgn-bubble-expandable-padding-y","$bubble-expandable-padding-x":"--pgn-bubble-expandable-padding-x","$btn-padding-y":"--pgn-btn-padding-y-base","$btn-padding-y-lg":"--pgn-btn-padding-y-lg","$btn-padding-y-sm":"--pgn-btn-padding-y-sm","$btn-padding-x":"--pgn-btn-padding-x-base","$btn-padding-x-lg":"--pgn-btn-padding-x-lg","$btn-padding-x-sm":"--pgn-btn-padding-x-sm","$btn-font-family":"--pgn-btn-font-family","$btn-font-size":"--pgn-btn-font-size-base","$btn-font-size-sm":"--pgn-btn-font-size-sm","$btn-font-size-lg":"--pgn-btn-font-size-lg","$btn-font-weight":"--pgn-btn-font-width","$btn-line-height":"--pgn-btn-line-height-base","$btn-line-height-sm":"--pgn-btn-line-height-sm","$btn-line-height-lg":"--pgn-btn-line-height-lg","$btn-border-width":"--pgn-btn-border-width","$btn-border-radius":"--pgn-btn-border-radius-base","$btn-border-radius-lg":"--pgn-btn-border-radius-lg","$btn-border-radius-sm":"--pgn-btn-border-radius-sm","$btn-box-shadow":"--pgn-btn-box-shadow-base","$btn-active-box-shadow":"--pgn-btn-box-shadow-active","$btn-focus-width":"--pgn-btn-focus-width","$btn-focus-gap":"--pgn-btn-focus-gap","$btn-disabled-opacity":"--pgn-btn-disabled-opacity","$btn-link-disabled-color":"--pgn-btn-disabled-link-color","$btn-tertiary-color":"--pgn-btn-tertiary-color","$btn-tertiary-bg":"--pgn-btn-tertiary-bg-base","$btn-tertiary-hover-bg":"--pgn-btn-tertiary-bg-hover","$btn-tertiary-active-bg":"--pgn-btn-tertiary-bg-active","$btn-inverse-tertiary-color":"--pgn-btn-tertiary-inverse-color","$btn-inverse-tertiary-bg":"--pgn-btn-tertiary-inverse-bg-base","$btn-inverse-tertiary-hover-bg":"--pgn-btn-tertiary-inverse-bg-hover","$btn-inverse-tertiary-active-bg":"--pgn-btn-tertiary-inverse-bg-active","$btn-block-spacing-y":"--pgn-btn-block-spacing-y","$btn-transition":"--pgn-btn-transition","$card-spacer-x":"--pgn-card-spacer-x","$card-spacer-y":"--pgn-card-spacer-y","$card-border-width":"--pgn-card-border-width","$card-border-radius":"--pgn-card-border-radius-base","$card-image-border-radius":"--pgn-card-border-radius-image","$card-logo-border-radius":"--pgn-card-border-radius-logo","$card-border-color":"--pgn-card-border-color-base","$card-border-focus-color":"--pgn-card-border-color-focus","$card-cap-bg":"--pgn-card-cap-bg","$card-cap-color":"--pgn-card-cap-color","$card-height":"--pgn-card-height-base","$card-color":"--pgn-card-color","$card-bg":"--pgn-card-bg","$card-img-overlay-padding":"--pgn-card-image-overlay-padding","$card-image-horizontal-max-width":"--pgn-card-image-horizontal-width-max","$card-image-horizontal-min-width":"--pgn-card-image-horizontal-width-min","$card-image-vertical-max-height":"--pgn-card-image-vertical-height-max","$card-group-margin":"--pgn-card-margin-group","$card-deck-margin":"--pgn-card-margin-deck","$card-grid-margin":"--pgn-card-margin-grid","$card-columns-count":"--pgn-card-columns-count","$card-columns-gap":"--pgn-card-columns-gap","$card-columns-margin":"--pgn-card-columns-margin","$card-divider-bg":"--pgn-card-divider-bg","$card-divider-margin-y":"--pgn-card-divider-margin-y","$card-footer-actions-gap":"--pgn-card-footer-action-gap","$card-footer-text-font-size":"--pgn-card-footer-text-font-size","$card-logo-left-offset":"--pgn-card-logo-left-offset-base","$card-logo-left-offset-horizontal":"--pgn-card-logo-left-offset-horizontal","$card-logo-bottom-offset":"--pgn-card-logo-bottom-offset-base","$card-logo-bottom-offset-horizontal":"--pgn-card-logo-bottom-offset-horizontal","$card-logo-width":"--pgn-card-logo-width","$card-logo-height":"--pgn-card-logo-height","$loading-skeleton-spacer":"--pgn-card-loading-skeleton-spacer","$carousel-control-color":"--pgn-carousel-control-color","$carousel-control-width":"--pgn-carousel-control-width-base","$carousel-control-icon-width":"--pgn-carousel-control-width-icon","$carousel-control-opacity":"--pgn-carousel-control-opacity-base","$carousel-control-hover-opacity":"--pgn-carousel-control-opacity-hover","$carousel-control-transition":"--pgn-carousel-control-transition","$carousel-indicator-width":"--pgn-carousel-indicator-width","$carousel-indicator-height":"--pgn-carousel-indicator-height-base","$carousel-indicator-hit-area-height":"--pgn-carousel-indicator-height-area-hit","$carousel-indicator-spacer":"--pgn-carousel-indicator-spacer","$carousel-indicator-active-bg":"--pgn-carousel-indicator-active-bg","$carousel-indicator-transition":"--pgn-carousel-indicator-transition","$carousel-caption-width":"--pgn-carousel-caption-width","$carousel-caption-color":"--pgn-carousel-caption-color","$carousel-transition-duration":"--pgn-carousel-transition-base","$chip-padding-y":"--pgn-chip-padding-y","$chip-padding-x":"--pgn-chip-padding-x","$chip-margin-inline":"--pgn-chip-margin-inline","$chip-border-radius":"--pgn-chip-border-radius-base","$chip-focus-border-radius":"--pgn-chip-border-radius-focus","$chip-border-width":"--pgn-chip-border-width","$chip-position-axis":"--pgn-chip-position-axis","$chip-font-size":"--pgn-chip-font-size","$chip-font-weight":"--pgn-chip-font-weight","$chip-line-height":"--pgn-chip-line-height","$close-font-size":"--pgn-close-button-font-size","$close-font-weight":"--pgn-close-button-font-weight","$close-color":"--pgn-close-button-color","$close-text-shadow":"--pgn-close-button-text-shadow","$code-font-size":"--pgn-code-font-size","$code-color":"--pgn-code-color","$kbd-font-size":"--pgn-code-kbd-font-size","$kbd-box-shadow":"--pgn-code-kbd-box-shadow","$nested-kbd-font-weight":"--pgn-code-kbd-nested-font-weight","$kbd-padding-y":"--pgn-code-kbd-padding-y","$kbd-padding-x":"--pgn-code-kbd-padding-x","$kbd-color":"--pgn-code-kbd-color","$kbd-bg":"--pgn-code-kbd-bg","$pre-color":"--pgn-code-pre-color","$pre-scrollable-max-height":"--pgn-code-pre-scrollable-max-height","$collapsible-card-spacer-y":"--pgn-collapsible-card-spacer-y-base","$collapsible-card-spacer-y-lg":"--pgn-collapsible-card-spacer-y-lg","$collapsible-card-spacer-x":"--pgn-collapsible-card-spacer-x-base","$collapsible-card-spacer-x-lg":"--pgn-collapsible-card-spacer-x-lg","$collapsible-card-body-spacer-left":"--pgn-collapsible-card-spacer-left-body","$collapsible-card-spacer-icon":"--pgn-collapsible-card-spacer-icon","$collapsible-basic-spacer-y":"--pgn-collapsible-card-spacer-basic-y","$collapsible-basic-spacer-x":"--pgn-collapsible-card-spacer-basic-x","$collapsible-basic-spacer-icon":"--pgn-collapsible-card-spacer-basic-icon","$max-width-xs":"--pgn-container-max-width-xs","$max-width-sm":"--pgn-container-max-width-sm","$max-width-md":"--pgn-container-max-width-md","$max-width-lg":"--pgn-container-max-width-lg","$max-width-xl":"--pgn-container-max-width-xl","$data-table-background-color":"--pgn-data-table-background-color","$data-table-border":"--pgn-data-table-border","$data-table-box-shadow":"--pgn-data-table-box-shadow","$data-table-padding-x":"--pgn-data-table-padding-x","$data-table-padding-y":"--pgn-data-table-padding-y","$data-table-padding-small":"--pgn-data-table-padding-small","$data-table-cell-padding":"--pgn-data-table-padding-cell","$data-table-footer-position":"--pgn-data-table-footer-position","$data-table-pagination-dropdown-max-height":"--pgn-data-table-pagination-dropdown-max-height","$data-table-pagination-dropdown-min-width":"--pgn-data-table-pagination-dropdown-min-width","$dropdown-min-width":"--pgn-dropdown-min-width","$dropdown-padding-x":"--pgn-dropdown-padding-x-base","$dropdown-item-padding-x":"--pgn-dropdown-padding-x-item","$dropdown-padding-y":"--pgn-dropdown-padding-y-base","$dropdown-item-padding-y":"--pgn-dropdown-padding-y-item","$dropdown-header-padding":"--pgn-dropdown-padding-header","$dropdown-spacer":"--pgn-dropdown-spacer","$dropdown-font-size":"--pgn-dropdown-font-size","$dropdown-color":"--pgn-dropdown-color-base","$dropdown-header-color":"--pgn-dropdown-color-header","$dropdown-bg":"--pgn-dropdown-bg","$dropdown-border-color":"--pgn-dropdown-border-color","$dropdown-border-width":"--pgn-dropdown-border-width","$dropdown-border-radius":"--pgn-dropdown-border-radius-base","$dropdown-inner-border-radius":"--pgn-dropdown-border-radius-inner","$dropdown-divider-bg":"--pgn-dropdown-divider-bg","$dropdown-divider-margin-y":"--pgn-dropdown-divider-margin-y","$dropdown-box-shadow":"--pgn-dropdown-box-shadow","$dropdown-link-color":"--pgn-dropdown-link-color","$dropdown-link-hover-color":"--pgn-dropdown-link-hover-color","$dropdown-link-hover-bg":"--pgn-dropdown-link-hover-bg","$dropdown-link-active-color":"--pgn-dropdown-link-active-color","$dropdown-link-active-bg":"--pgn-dropdown-link-active-bg","$dropdown-link-disabled-color":"--pgn-dropdown-link-disabled-color","$dropzone-padding":"--pgn-dropzone-padding","$dropzone-border-default":"--pgn-dropzone-border-default","$dropzone-border-hover":"--pgn-dropzone-border-hover","$dropzone-border-focus":"--pgn-dropzone-border-focus","$dropzone-border-active":"--pgn-dropzone-border-active","$dropzone-border-error":"--pgn-dropzone-border-error","$dropzone-error-wrapper-color":"--pgn-dropzone-error-wrapper-color","$dropzone-restriction-msg-font-size":"--pgn-dropzone-restriction-msg-font-size","$dropzone-restriction-msg-color":"--pgn-dropzone-restriction-msg-color","$input-padding-y":"--pgn-form-input-padding-y-base","$input-padding-y-sm":"--pgn-form-input-padding-y-sm","$input-padding-y-lg":"--pgn-form-input-padding-y-lg","$input-padding-x":"--pgn-form-input-padding-x-base","$input-padding-x-sm":"--pgn-form-input-padding-x-sm","$input-padding-x-lg":"--pgn-form-input-padding-x-lg","$input-font-family":"--pgn-form-input-font-family","$input-font-size":"--pgn-form-input-font-size-base","$input-font-size-sm":"--pgn-form-input-font-size-sm","$input-font-size-lg":"--pgn-form-input-font-size-lg","$input-font-weight":"--pgn-form-input-font-weight","$input-line-height":"--pgn-form-input-line-height-base","$input-line-height-sm":"--pgn-form-input-line-height-sm","$input-line-height-lg":"--pgn-form-input-line-height-lg","$input-bg":"--pgn-form-input-bg-base","$input-disabled-bg":"--pgn-form-input-bg-disabled","$input-color":"--pgn-form-input-color-base","$input-placeholder-color":"--pgn-form-input-color-plaintext","$input-border-color":"--pgn-form-input-border-color","$input-border-width":"--pgn-form-input-border-width","$input-height-border":"--pgn-form-input-border-height","$input-border-radius":"--pgn-form-input-border-radius-base","$input-border-radius-lg":"--pgn-form-input-border-radius-lg","$input-border-radius-sm":"--pgn-form-input-border-radius-sm","$input-box-shadow":"--pgn-form-input-box-shadow-base","$input-focus-box-shadow":"--pgn-form-input-box-shadow-focus","$input-focus-bg":"--pgn-form-input-focus-bg","$input-focus-color":"--pgn-form-input-focus-color-base","$input-focus-border-color":"--pgn-form-input-focus-color-border","$input-focus-width":"--pgn-form-input-focus-width","$input-height":"--pgn-form-input-height-base","$input-height-sm":"--pgn-form-input-height-sm","$input-height-lg":"--pgn-form-input-height-lg","$input-height-inner":"--pgn-form-input-height-inner-base","$input-height-inner-half":"--pgn-form-input-height-inner-half","$input-height-inner-quarter":"--pgn-form-input-height-inner-quarter","$input-hover-width":"--pgn-form-input-width-hover","$input-transition":"--pgn-form-input-transition","$form-check-input-gutter":"--pgn-form-input-check-gutter","$form-check-input-margin-x":"--pgn-form-input-check-margin-x-base","$form-check-inline-input-margin-x":"--pgn-form-input-check-margin-x-inline","$form-check-input-margin-y":"--pgn-form-input-check-margin-y","$input-group-addon-color":"--pgn-form-input-group-addon-color-base","$input-group-addon-border-color":"--pgn-form-input-group-addon-color-border","$input-group-addon-bg":"--pgn-form-input-group-addon-bg","$form-text-margin-top":"--pgn-form-text-margin-top","$form-check-inline-margin-x":"--pgn-form-check-inline-margin-x","$form-check-position-axis":"--pgn-form-check-position-axis","$form-check-focus-border-radius":"--pgn-form-check-border-radius-focus","$form-check-border-width":"--pgn-form-check-border-width","$form-grid-gutter-width":"--pgn-form-grid-gutter-width","$form-group-margin-bottom":"--pgn-form-group-margin-bottom","$custom-forms-transition":"--pgn-form-custom-transition","$custom-control-gutter":"--pgn-form-custom-control-gutter","$custom-control-spacer-x":"--pgn-form-custom-control-spacer-x","$custom-control-cursor":"--pgn-form-custom-control-cursor","$custom-control-indicator-size":"--pgn-form-custom-control-indicator-size","$custom-control-indicator-bg":"--pgn-form-custom-control-indicator-bg-base","$custom-control-indicator-bg-size":"--pgn-form-custom-control-indicator-bg-size","$custom-control-indicator-box-shadow":"--pgn-form-custom-control-indicator-box-shadow","$custom-control-indicator-border-color":"--pgn-form-custom-control-indicator-border-color","$custom-control-indicator-border-width":"--pgn-form-custom-control-indicator-border-width","$custom-control-indicator-disabled-bg":"--pgn-form-custom-control-indicator-disabled-bg","$custom-control-indicator-checked-color":"--pgn-form-custom-control-indicator-checked-color","$custom-control-indicator-checked-bg":"--pgn-form-custom-control-indicator-checked-bg-base","$custom-control-indicator-checked-disabled-bg":"--pgn-form-custom-control-indicator-checked-bg-disabled","$custom-control-indicator-checked-box-shadow":"--pgn-form-custom-control-indicator-checked-box-shadow-base","$custom-control-indicator-focus-box-shadow":"--pgn-form-custom-control-indicator-checked-box-shadow-focus","$custom-control-indicator-checked-border-color":"--pgn-form-custom-control-indicator-checked-border-color-base","$custom-control-indicator-focus-border-color":"--pgn-form-custom-control-indicator-checked-border-color-focus","$custom-control-indicator-active-color":"--pgn-form-custom-control-indicator-active-color-base","$custom-control-indicator-active-border-color":"--pgn-form-custom-control-indicator-active-color-border","$custom-control-indicator-active-bg":"--pgn-form-custom-control-indicator-active-bg","$custom-control-indicator-active-box-shadow":"--pgn-form-custom-control-indicator-active-box-shadow","$custom-control-label-color":"--pgn-form-custom-control-label-color-base","$custom-control-label-disabled-color":"--pgn-form-custom-control-label-color-disabled","$custom-checkbox-indicator-border-radius":"--pgn-form-custom-checkbox-indicator-border-radius","$custom-checkbox-indicator-indeterminate-bg":"--pgn-form-custom-checkbox-indicator-indeterminate-bg","$custom-checkbox-indicator-indeterminate-color":"--pgn-form-custom-checkbox-indicator-indeterminate-color","$custom-checkbox-indicator-indeterminate-box-shadow":"--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow","$custom-checkbox-indicator-indeterminate-border-color":"--pgn-form-custom-checkbox-indicator-indeterminate-border-color","$custom-radio-indicator-border-radius":"--pgn-form-custom-radio-indicator-border-radius","$custom-switch-width":"--pgn-form-custom-switch-width","$custom-switch-indicator-border-radius":"--pgn-form-custom-switch-indicator-border-radius","$custom-switch-indicator-size":"--pgn-form-custom-switch-indicator-size","$custom-select-padding-y":"--pgn-form-custom-select-padding-y-base","$custom-select-padding-y-sm":"--pgn-form-custom-select-padding-y-sm","$custom-select-padding-y-lg":"--pgn-form-custom-select-padding-y-lg","$custom-select-padding-x":"--pgn-form-custom-select-padding-x-base","$custom-select-padding-x-sm":"--pgn-form-custom-select-padding-x-sm","$custom-select-padding-x-lg":"--pgn-form-custom-select-padding-x-lg","$custom-select-font-family":"--pgn-form-custom-select-font-family","$custom-select-font-size":"--pgn-form-custom-select-font-size-base","$custom-select-font-size-sm":"--pgn-form-custom-select-font-size-sm","$custom-select-font-size-lg":"--pgn-form-custom-select-font-size-lg","$custom-select-height":"--pgn-form-custom-select-font-height-base","$custom-select-height-lg":"--pgn-form-custom-select-font-height-lg","$custom-select-font-weight":"--pgn-form-custom-select-font-weight","$custom-select-line-height":"--pgn-form-custom-select-line-height","$custom-select-indicator-padding":"--pgn-form-custom-select-indicator-padding","$custom-select-indicator-color":"--pgn-form-custom-select-indicator-color","$custom-select-color":"--pgn-form-custom-select-color-base","$custom-select-disabled-color":"--pgn-form-custom-select-color-disabled","$custom-select-bg":"--pgn-form-custom-select-bg-base","$custom-select-disabled-bg":"--pgn-form-custom-select-bg-disabled","$custom-select-bg-size":"--pgn-form-custom-select-bg-size","$custom-select-feedback-icon-padding-right":"--pgn-form-custom-select-feedback-icon-padding-right","$custom-select-feedback-icon-position":"--pgn-form-custom-select-feedback-icon-position","$custom-select-feedback-icon-size":"--pgn-form-custom-select-feedback-icon-size","$custom-select-border-width":"--pgn-form-custom-select-border-width-base","$custom-select-focus-width":"--pgn-form-custom-select-border-width-focus","$custom-select-border-color":"--pgn-form-custom-select-border-color-base","$custom-select-focus-border-color":"--pgn-form-custom-select-border-color-focus","$custom-select-border-radius":"--pgn-form-custom-select-border-radius","$custom-select-box-shadow":"--pgn-form-custom-select-border-box-shadow-base","$custom-select-focus-box-shadow":"--pgn-form-custom-select-border-box-shadow-focus","$custom-select-height-sm":"--pgn-form-custom-select-height-sm","$custom-range-track-width":"--pgn-form-custom-range-track-width","$custom-range-track-height":"--pgn-form-custom-range-track-height","$custom-range-track-cursor":"--pgn-form-custom-range-track-cursor","$custom-range-track-bg":"--pgn-form-custom-range-track-bg","$custom-range-track-border-radius":"--pgn-form-custom-range-track-border-radius","$custom-range-track-box-shadow":"--pgn-form-custom-range-track-box-shadow","$custom-range-thumb-width":"--pgn-form-custom-range-thumb-width","$custom-range-thumb-height":"--pgn-form-custom-range-thumb-height","$custom-range-thumb-bg":"--pgn-form-custom-range-thumb-bg-base","$custom-range-thumb-disabled-bg":"--pgn-form-custom-range-thumb-bg-disabled","$custom-range-thumb-border":"--pgn-form-custom-range-thumb-border-base","$custom-range-thumb-border-radius":"--pgn-form-custom-range-thumb-border-radius","$custom-range-thumb-box-shadow":"--pgn-form-custom-range-thumb-box-shadow-base","$custom-range-thumb-focus-box-shadow":"--pgn-form-custom-range-thumb-box-shadow-focus-base","$custom-range-thumb-focus-box-shadow-width":"--pgn-form-custom-range-thumb-box-shadow-focus-width","$custom-file-height":"--pgn-form-custom-file-height-base","$custom-file-height-inner":"--pgn-form-custom-file-height-inner","$custom-file-border-color":"--pgn-form-custom-file-border-color-base","$custom-file-focus-border-color":"--pgn-form-custom-file-border-color-focus","$custom-file-border-radius":"--pgn-form-custom-file-border-color-radius","$custom-file-border-width":"--pgn-form-custom-file-border-width","$custom-file-box-shadow":"--pgn-form-custom-file-box-shadow-base","$custom-file-focus-box-shadow":"--pgn-form-custom-file-box-shadow-focus","$custom-file-bg":"--pgn-form-custom-file-bg-base","$custom-file-disabled-bg":"--pgn-form-custom-file-bg-disabled","$custom-file-padding-y":"--pgn-form-custom-file-padding-y","$custom-file-padding-x":"--pgn-form-custom-file-padding-x","$custom-file-line-height":"--pgn-form-custom-file-line-height","$custom-file-font-family":"--pgn-form-custom-file-font-family","$custom-file-font-weight":"--pgn-form-custom-file-font-weight","$custom-file-color":"--pgn-form-custom-file-color","$custom-file-button-color":"--pgn-form-custom-file-button-color","$custom-file-button-bg":"--pgn-form-custom-file-button-bg","$form-feedback-margin-top":"--pgn-form-feedback-margin-top","$form-feedback-font-size":"--pgn-form-feedback-font-size","$form-feedback-valid-color":"--pgn-form-feedback-color-valid","$form-feedback-invalid-color":"--pgn-form-feedback-color-invalid","$form-feedback-icon-valid-color":"--pgn-form-feedback-icon-color-valid","$form-feedback-icon-invalid":"--pgn-form-feedback-icon-color-invalid","$form-feedback-tooltip-padding-y":"--pgn-form-feedback-tooltip-padding-y","$form-feedback-tooltip-padding-x":"--pgn-form-feedback-tooltip-padding-x","$form-feedback-tooltip-font-size":"--pgn-form-feedback-tooltip-font-size","$form-feedback-tooltip-line-height":"--pgn-form-feedback-tooltip-line-height","$form-feedback-tooltip-opacity":"--pgn-form-feedback-tooltip-opacity","$form-feedback-tooltip-border-radius":"--pgn-form-feedback-tooltip-border-radius","$form-control-icon-width":"--pgn-form-control-icon-width","$select-icon-padding":"--pgn-form-select-icon-padding","$icon-inline":"--pgn-icon-inline","$icon-sm":"--pgn-icon-sm","$icon-md":"--pgn-icon-md","$icon-lg":"--pgn-icon-lg","$btn-icon-diameter-md":"--pgn-icon-button-diameter-md","$btn-icon-diameter-sm":"--pgn-icon-button-diameter-sm","$btn-icon-diameter-inline":"--pgn-icon-button-diameter-inline","$btn-icon-bg":"--pgn-icon-button-bg","$btn-icon-accent-color":"--pgn-icon-button-accent-color","$thumbnail-padding":"--pgn-image-thumbnail-padding","$thumbnail-bg":"--pgn-image-thumbnail-bg","$thumbnail-border-width":"--pgn-image-thumbnail-border-width","$thumbnail-border-color":"--pgn-image-thumbnail-border-color","$thumbnail-border-radius":"--pgn-image-thumbnail-border-radius","$thumbnail-box-shadow":"--pgn-image-thumbnail-box-shadow","$figure-caption-font-size":"--pgn-image-figure-caption-font-size","$figure-caption-color":"--pgn-image-figure-caption-color","$background":"--pgn-menu-background-base","$active-background":"--pgn-menu-background-active","$border":"--pgn-menu-border-base","$active-border":"--pgn-menu-border-active","$hover-border":"--pgn-menu-border-hover","$modal-inner-padding":"--pgn-modal-inner-padding-base","$modal-inner-padding-bottom":"--pgn-modal-inner-padding-bottom","$modal-footer-margin-between":"--pgn-modal-footer-margin-between","$modal-footer-border-color":"--pgn-modal-footer-border-color","$modal-footer-border-width":"--pgn-modal-footer-border-width","$modal-footer-padding":"--pgn-modal-footer-padding-base","$modal-footer-padding-x":"--pgn-modal-footer-padding-x","$modal-footer-padding-y":"--pgn-modal-footer-padding-y","$modal-dialog-margin":"--pgn-modal-dialog-margin-base","$modal-dialog-margin-y-sm-up":"--pgn-modal-dialog-margin-y-sm-up","$modal-title-line-height":"--pgn-modal-title-line-height","$modal-content-color":"--pgn-modal-content-color","$modal-content-bg":"--pgn-modal-content-bg","$modal-content-border-color":"--pgn-modal-content-border-color","$modal-content-border-width":"--pgn-modal-content-border-width","$modal-content-border-radius":"--pgn-modal-content-border-radius","$modal-content-box-shadow-xs":"--pgn-modal-content-box-shadow-xs","$modal-content-box-shadow-sm-up":"--pgn-modal-content-box-shadow-sm-up","$modal-backdrop-bg":"--pgn-modal-backdrop-bg","$modal-backdrop-opacity":"--pgn-modal-backdrop-opacity","$modal-header-border-color":"--pgn-modal-header-border-color","$modal-header-border-width":"--pgn-modal-header-border-width","$modal-header-padding":"--pgn-modal-header-padding-base","$modal-header-padding-y":"--pgn-modal-header-padding-y","$modal-header-padding-x":"--pgn-modal-header-padding-x","$modal-xl":"--pgn-modal-xl","$modal-lg":"--pgn-modal-lg","$modal-md":"--pgn-modal-md","$modal-sm":"--pgn-modal-sm","$modal-transition":"--pgn-modal-transform-base","$modal-fade-transform":"--pgn-modal-transform-fade","$modal-show-transform":"--pgn-modal-transform-show","$modal-scale-transform":"--pgn-modal-transform-scale","$nav-link-padding-y":"--pgn-nav-link-padding-y","$nav-link-padding-x":"--pgn-nav-link-padding-x","$nav-link-color":"--pgn-nav-link-color-base","$nav-link-disabled-color":"--pgn-nav-link-color-disabled","$nav-link-font-weight":"--pgn-nav-link-font-weight","$nav-tabs-border-color":"--pgn-nav-tabs-border-color","$nav-tabs-border-width":"--pgn-nav-tabs-border-width","$nav-tabs-border-radius":"--pgn-nav-tabs-border-radius","$nav-tabs-link-hover-border-color":"--pgn-nav-tabs-link-hover-border-color","$nav-tabs-link-hover-bg":"--pgn-nav-tabs-link-hover-bg","$nav-tabs-link-active-color":"--pgn-nav-tabs-link-active-color-base","$nav-tabs-link-active-border-color":"--pgn-nav-tabs-link-active-color-border","$nav-tabs-link-active-bg":"--pgn-nav-tabs-link-active-bg","$nav-pills-border-radius":"--pgn-nav-pills-border-radius","$nav-pills-link-active-color":"--pgn-nav-pills-link-link-active-color","$nav-pills-link-active-bg":"--pgn-nav-pills-link-link-active-bg","$nav-divider-color":"--pgn-nav-divider-color","$nav-divider-margin-y":"--pgn-nav-divider-margin-y","$navbar-padding-y":"--pgn-navbar-padding-y","$navbar-padding-x":"--pgn-navbar-padding-x-base","$navbar-nav-link-padding-x":"--pgn-navbar-padding-x-nav-link","$nav-link-height":"--pgn-navbar-nav-link-height","$navbar-nav-scroll-max-height":"--pgn-navbar-nav-scroll-max-height","$navbar-brand-font-size":"--pgn-navbar-brand-font-size","$navbar-brand-height":"--pgn-navbar-brand-height","$navbar-brand-padding-y":"--pgn-navbar-brand-padding-y","$navbar-toggler-padding-y":"--pgn-navbar-toggler-padding-y","$navbar-toggler-padding-x":"--pgn-navbar-toggler-padding-x","$navbar-toggler-font-size":"--pgn-navbar-toggler-font-size","$navbar-toggler-border-radius":"--pgn-navbar-toggler-border-radius","$navbar-dark-color":"--pgn-navbar-dark-color-base","$navbar-dark-hover-color":"--pgn-navbar-dark-color-hover","$navbar-dark-active-color":"--pgn-navbar-dark-color-active","$navbar-dark-disabled-color":"--pgn-navbar-dark-color-disabled","$navbar-dark-toggler-border-color":"--pgn-navbar-dark-toggler-border-color","$navbar-dark-brand-color":"--pgn-navbar-dark-brand-color-base","$navbar-dark-brand-hover-color":"--pgn-navbar-dark-brand-color-hover","$navbar-light-color":"--pgn-navbar-light-color-base","$navbar-light-hover-color":"--pgn-navbar-light-color-hover","$navbar-light-active-color":"--pgn-navbar-light-color-active","$navbar-light-disabled-color":"--pgn-navbar-light-color-disabled","$navbar-light-toggler-border-color":"--pgn-navbar-light-toggler-border-color","$navbar-light-brand-color":"--pgn-navbar-light-brand-color-base","$navbar-light-brand-hover-color":"--pgn-navbar-light-brand-color-hover","$pagination-padding-y":"--pgn-pagination-padding-y-base","$pagination-padding-y-sm":"--pgn-pagination-padding-y-sm","$pagination-padding-y-lg":"--pgn-pagination-padding-y-lg","$pagination-padding-x":"--pgn-pagination-padding-x-base","$pagination-padding-x-sm":"--pgn-pagination-padding-x-sm","$pagination-padding-x-lg":"--pgn-pagination-padding-x-lg","$pagination-padding-icon":"--pgn-pagination-padding-icon","$pagination-margin-x":"--pgn-pagination-margin-x","$pagination-margin-y":"--pgn-pagination-margin-y","$pagination-line-height":"--pgn-pagination-line-height","$pagination-font-size-sm":"--pgn-pagination-font-size-sm","$pagination-icon-size":"--pgn-pagination-icon-size-base","$pagination-icon-size-sm":"--pgn-pagination-icon-size-sm","$pagination-icon-width":"--pgn-pagination-icon-width","$pagination-icon-height":"--pgn-pagination-icon-height","$pagination-toggle-border":"--pgn-pagination-toggle-border-base","$pagination-toggle-border-sm":"--pgn-pagination-toggle-border-sm","$pagination-secondary-height":"--pgn-pagination-secondary-height-base","$pagination-secondary-height-sm":"--pgn-pagination-secondary-height-sm","$pagination-color":"--pgn-pagination-color-base","$pagination-color-inverse":"--pgn-pagination-color-inverse","$pagination-hover-color":"--pgn-pagination-color-hover","$pagination-active-color":"--pgn-pagination-color-active","$pagination-disabled-color":"--pgn-pagination-color-disabled","$pagination-bg":"--pgn-pagination-bg-base","$pagination-hover-bg":"--pgn-pagination-bg-hover","$pagination-active-bg":"--pgn-pagination-bg-active","$pagination-disabled-bg":"--pgn-pagination-bg-disabled","$pagination-border-width":"--pgn-pagination-border-width","$pagination-border-color":"--pgn-pagination-border-color-base","$pagination-hover-border-color":"--pgn-pagination-border-color-hover","$pagination-active-border-color":"--pgn-pagination-border-color-active","$pagination-disabled-border-color":"--pgn-pagination-border-color-disabled","$pagination-border-radius-sm":"--pgn-pagination-border-radius-sm","$pagination-border-radius-lg":"--pgn-pagination-border-radius-lg","$pagination-focus-box-shadow":"--pgn-pagination-focus-box-shadow","$pagination-focus-outline":"--pgn-pagination-focus-box-outline","$pagination-focus-border-width":"--pgn-pagination-focus-border-width","$pagination-focus-color":"--pgn-pagination-focus-color-base","$pagination-focus-color-text":"--pgn-pagination-focus-color-text","$pagination-reduced-dropdown-max-height":"--pgn-reduced-dropdown-height-max","$pagination-reduced-dropdown-min-width":"--pgn-reduced-dropdown-width-min","$popover-font-size":"--pgn-popover-font-size","$popover-bg":"--pgn-popover-bg","$popover-max-width":"--pgn-popover-max-width","$popover-border-color":"--pgn-popover-border-color","$popover-border-radius":"--pgn-popover-border-radius","$popover-border-width":"--pgn-popover-border-border","$popover-box-shadow":"--pgn-popover-box-shadow","$popover-header-bg":"--pgn-popover-header-bg","$popover-header-color":"--pgn-popover-header-color","$popover-header-padding-y":"--pgn-popover-header-padding-y","$popover-header-padding-x":"--pgn-popover-header-padding-x","$popover-body-color":"--pgn-popover-body-color","$popover-body-padding-y":"--pgn-popover-body-padding-y","$popover-body-padding-x":"--pgn-popover-body-padding-x","$popover-icon-margin-right":"--pgn-popover-icon-margin-right","$popover-icon-height":"--pgn-popover-icon-height","$popover-icon-width":"--pgn-popover-icon-width","$popover-arrow-width":"--pgn-popover-arrow-width","$popover-arrow-height":"--pgn-popover-arrow-height","$popover-arrow-color":"--pgn-popover-arrow-color","$popover-success-bg":"--pgn-popover-success-bg","$popover-success-icon-color":"--pgn-popover-success-icon-color","$popover-warning-bg":"--pgn-popover-warning-bg","$popover-warning-icon-color":"--pgn-popover-warning-icon-color","$popover-danger-bg":"--pgn-popover-danger-bg","$popover-danger-icon-color":"--pgn-popover-danger-icon-color","$checkpoint-background-color":"--pgn-product-tour-checkpoint-color-background","$checkpoint-body-color":"--pgn-product-tour-checkpoint-color-body","$checkpoint-border-color":"--pgn-product-tour-checkpoint-color-border","$checkpoint-breadcrumb-color":"--pgn-product-tour-checkpoint-color-breadcrumb","$checkpoint-border-width":"--pgn-product-tour-checkpoint-width-border","$checkpoint-arrow-width":"--pgn-product-tour-checkpoint-width-arrow","$checkpoint-max-width":"--pgn-product-tour-checkpoint-width-max","$checkpoint-arrow-top-color":"--pgn-product-tour-checkpoint-arrow-color-top","$checkpoint-arrow-default-color":"--pgn-product-tour-checkpoint-arrow-color-default","$checkpoint-arrow-transparent":"--pgn-product-tour-checkpoint-arrow-transparent","$checkpoint-z-index":"--pgn-product-tour-checkpoint-zindex","$progress-height":"--pgn-progress-bar-height-base","$annotated-progress-height":"--pgn-progress-bar-height-annotated","$progress-font-size":"--pgn-progress-bar-font-size","$progress-bg":"--pgn-progress-bar-bg","$progress-border-radius":"--pgn-progress-bar-border-radius","$progress-bar-border-width":"--pgn-progress-bar-border-width","$progress-bar-border-color":"--pgn-progress-bar-border-color","$progress-box-shadow":"--pgn-progress-bar-box-shadow","$progress-bar-color":"--pgn-progress-bar-bar-color","$progress-bar-bg":"--pgn-progress-bar-bar-bg-base","$annotated-progress-bar-bg":"--pgn-progress-bar-bar-bg-annotated","$progress-bar-animation-timing":"--pgn-progress-bar-bar-animation-timing","$progress-bar-transition":"--pgn-progress-bar-bar-transition","$progress-threshold-circle":"--pgn-progress-bar-threshold-circle","$progress-hint-annotation-gap":"--pgn-progress-bar-hint-annotation-gap","$search-border-radius":"--pgn-search-field-border-radius","$search-border-color":"--pgn-search-field-border-color-base","$search-border-color-interaction":"--pgn-search-field-border-color-interaction","$search-border-focus-color":"--pgn-search-field-border-color-focus","$search-border-width":"--pgn-search-field-border-width-base","$search-border-width-interaction":"--pgn-search-field-border-width-interaction","$search-border-focus-width":"--pgn-search-field-border-width-focus","$search-line-height":"--pgn-search-field-line-height","$search-disabled-opacity":"--pgn-search-field-disabled-opacity","$search-button-margin":"--pgn-search-field-button-margin","$input-height-search":"--pgn-search-field-input-height-search","$selectable-box-padding":"--pgn-selectable-box-padding","$selectable-box-border-radius":"--pgn-selectable-box-border-radius","$selectable-box-space":"--pgn-selectable-box-box-space","$min-cols-number":"--pgn-selectable-box-cols-number-min","$max-cols-number":"--pgn-selectable-box-cols-number-max","$spinner-width":"--pgn-spinner-width","$spinner-height":"--pgn-spinner-height","$spinner-border-width":"--pgn-spinner-border-width","$spinner-width-sm":"--pgn-spinner-sm-width","$spinner-height-sm":"--pgn-spinner-sm-height","$spinner-border-width-sm":"--pgn-spinner-sm-border-width","$stack-gap":"--pgn-stack-gap","$sticky-offset":"--pgn-sticky-offset","$sticky-shadow-top":"--pgn-sticky-shadow-top","$sticky-shadow-bottom":"--pgn-sticky-shadow-bottom","$table-cell-padding":"--pgn-table-cell-padding-base","$table-cell-padding-sm":"--pgn-table-cell-padding-sm","$table-color":"--pgn-table-color-base","$table-hover-color":"--pgn-table-color-hover","$table-head-color":"--pgn-table-color-head","$table-bg":"--pgn-table-bg-base","$table-accent-bg":"--pgn-table-bg-accent","$table-hover-bg":"--pgn-table-bg-hover","$table-active-bg":"--pgn-table-bg-active","$table-head-bg":"--pgn-table-bg-head","$table-border-width":"--pgn-table-border-width","$table-border-color":"--pgn-table-border-color","$table-dark-color":"--pgn-table-dark-color-base","$table-dark-hover-color":"--pgn-table-dark-color-hover","$table-dark-border-color":"--pgn-table-dark-color-border","$table-dark-bg":"--pgn-table-dark-bg-base","$table-dark-accent-bg":"--pgn-table-dark-bg-accent","$table-dark-hover-bg":"--pgn-table-dark-bg-hover","$table-striped-order":"--pgn-table-striped-order","$table-caption-color":"--pgn-table-caption-color","$table-bg-level":"--pgn-table-level-bg","$table-border-level":"--pgn-table-level-border","$table-th-font-weight":"--pgn-table-th-font-weight","$tab-notification-height":"--pgn-tabs-notification-height","$tab-notification-width":"--pgn-tabs-notification-width","$tab-notification-font-size":"--pgn-tabs-notification-font-size","$toast-max-width":"--pgn-toast-max-width","$toast-padding-x":"--pgn-toast-padding-x","$toast-padding-y":"--pgn-toast-padding-y","$toast-font-size":"--pgn-toast-font-size","$toast-color":"--pgn-toast-color-base","$toast-background-color":"--pgn-toast-color-background","$toast-border-width":"--pgn-toast-border-width","$toast-border-color":"--pgn-toast-border-color","$toast-border-radius":"--pgn-toast-border-radius","$toast-box-shadow":"--pgn-toast-box-shadow","$toast-header-color":"--pgn-toast-header-color-base","$toast-header-background-color":"--pgn-toast-header-color-background","$toast-header-border-color":"--pgn-toast-header-color-border","$toast-container-gutter-lg":"--pgn-toast-container-gutter-lg","$toast-container-gutter-sm":"--pgn-toast-container-gutter-sm","$tooltip-font-size":"--pgn-tooltip-font-size","$tooltip-max-width":"--pgn-tooltip-max-width","$tooltip-color":"--pgn-tooltip-color-base","$tooltip-color-light":"--pgn-tooltip-color-light","$tooltip-bg":"--pgn-tooltip-bg-base","$tooltip-bg-light":"--pgn-tooltip-bg-light","$tooltip-border-radius":"--pgn-tooltip-border-radius","$tooltip-opacity":"--pgn-tooltip-opacity","$tooltip-padding-y":"--pgn-tooltip-padding-y","$tooltip-padding-x":"--pgn-tooltip-padding-x","$tooltip-margin":"--pgn-tooltip-margin","$tooltip-box-shadow":"--pgn-tooltip-box-shadow","$tooltip-arrow-width":"--pgn-tooltip-arrow-width","$tooltip-arrow-height":"--pgn-tooltip-arrow-height","$tooltip-arrow-color":"--pgn-tooltip-arrow-color-base","$tooltip-arrow-color-light":"--pgn-tooltip-arrow-color-light"} \ No newline at end of file diff --git a/tokens/build/scss-to-css-core.json b/tokens/build/scss-to-css-core.json index 79ff5364dc..6640f39936 100644 --- a/tokens/build/scss-to-css-core.json +++ b/tokens/build/scss-to-css-core.json @@ -1 +1 @@ -{"$border-width":"--pgn-border-width","$border-color":"--pgn-border-color","$border-radius":"--pgn-border-radius-base","$border-radius-lg":"--pgn-border-radius-lg","$border-radius-sm":"--pgn-border-radius-sm","$caret-width":"--pgn-caret-width","$caret-vertical-align":"--pgn-caret-vertical-align","$caret-spacing":"--pgn-caret-spacing","$body-bg":"--pgn-body-bg","$body-color":"--pgn-body-color","$white":"--pgn-color-white","$black":"--pgn-color-black","$blue":"--pgn-color-blue","$red":"--pgn-color-red","$green":"--pgn-color-green","$yellow":"--pgn-color-yellow","$teal":"--pgn-color-teal","$accent-a":"--pgn-color-accent-a","$accent-b":"--pgn-color-accent-b","$gray-100":"--pgn-color-gray-100","$gray-200":"--pgn-color-gray-200","$gray-300":"--pgn-color-gray-300","$gray-400":"--pgn-color-gray-400","$gray-500":"--pgn-color-gray-500","$gray-600":"--pgn-color-gray-600","$gray-700":"--pgn-color-gray-700","$gray-800":"--pgn-color-gray-800","$gray-900":"--pgn-color-gray-900","$primary-100":"--pgn-color-primary-100","$primary-200":"--pgn-color-primary-200","$primary-300":"--pgn-color-primary-300","$primary-400":"--pgn-color-primary-400","$primary-500":"--pgn-color-primary-500","$primary-600":"--pgn-color-primary-600","$primary-700":"--pgn-color-primary-700","$primary-800":"--pgn-color-primary-800","$primary-900":"--pgn-color-primary-900","$secondary-100":"--pgn-color-secondary-100","$secondary-200":"--pgn-color-secondary-200","$secondary-300":"--pgn-color-secondary-300","$secondary-400":"--pgn-color-secondary-400","$secondary-500":"--pgn-color-secondary-500","$secondary-600":"--pgn-color-secondary-600","$secondary-700":"--pgn-color-secondary-700","$secondary-800":"--pgn-color-secondary-800","$secondary-900":"--pgn-color-secondary-900","$brand-100":"--pgn-color-brand-100","$brand-200":"--pgn-color-brand-200","$brand-300":"--pgn-color-brand-300","$brand-400":"--pgn-color-brand-400","$brand-500":"--pgn-color-brand-500","$brand-600":"--pgn-color-brand-600","$brand-700":"--pgn-color-brand-700","$brand-800":"--pgn-color-brand-800","$brand-900":"--pgn-color-brand-900","$success-100":"--pgn-color-success-100","$success-200":"--pgn-color-success-200","$success-300":"--pgn-color-success-300","$success-400":"--pgn-color-success-400","$success-500":"--pgn-color-success-500","$success-600":"--pgn-color-success-600","$success-700":"--pgn-color-success-700","$success-800":"--pgn-color-success-800","$success-900":"--pgn-color-success-900","$info-100":"--pgn-color-info-100","$info-200":"--pgn-color-info-200","$info-300":"--pgn-color-info-300","$info-400":"--pgn-color-info-400","$info-500":"--pgn-color-info-500","$info-600":"--pgn-color-info-600","$info-700":"--pgn-color-info-700","$info-800":"--pgn-color-info-800","$info-900":"--pgn-color-info-900","$warning-100":"--pgn-color-warning-100","$warning-200":"--pgn-color-warning-200","$warning-300":"--pgn-color-warning-300","$warning-400":"--pgn-color-warning-400","$warning-500":"--pgn-color-warning-500","$warning-600":"--pgn-color-warning-600","$warning-700":"--pgn-color-warning-700","$warning-800":"--pgn-color-warning-800","$warning-900":"--pgn-color-warning-900","$danger-100":"--pgn-color-danger-100","$danger-200":"--pgn-color-danger-200","$danger-300":"--pgn-color-danger-300","$danger-400":"--pgn-color-danger-400","$danger-500":"--pgn-color-danger-500","$danger-600":"--pgn-color-danger-600","$danger-700":"--pgn-color-danger-700","$danger-800":"--pgn-color-danger-800","$danger-900":"--pgn-color-danger-900","$light-100":"--pgn-color-light-100","$light-200":"--pgn-color-light-200","$light-300":"--pgn-color-light-300","$light-400":"--pgn-color-light-400","$light-500":"--pgn-color-light-500","$light-600":"--pgn-color-light-600","$light-700":"--pgn-color-light-700","$light-800":"--pgn-color-light-800","$light-900":"--pgn-color-light-900","$dark-100":"--pgn-color-dark-100","$dark-200":"--pgn-color-dark-200","$dark-300":"--pgn-color-dark-300","$dark-400":"--pgn-color-dark-400","$dark-500":"--pgn-color-dark-500","$dark-600":"--pgn-color-dark-600","$dark-700":"--pgn-color-dark-700","$dark-800":"--pgn-color-dark-800","$dark-900":"--pgn-color-dark-900","$text-muted":"--pgn-text-muted","$input-btn-padding-y":"--pgn-core-input-btn-padding-y","$input-btn-padding-x":"--pgn-core-input-btn-padding-x","$input-btn-padding-y-sm":"--pgn-core-input-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-core-input-btn-padding-sm-x","$input-btn-padding-y-lg":"--pgn-core-input-btn-padding-lg-y","$input-btn-padding-x-lg":"--pgn-core-input-btn-padding-lg-x","$input-btn-font-family":"--pgn-core-input-btn-font-family","$input-btn-font-size":"--pgn-core-input-btn-font-size-base","$input-btn-font-size-sm":"--pgn-core-input-btn-font-size-sm","$input-btn-font-size-lg":"--pgn-core-input-btn-font-size-lg","$input-btn-line-height":"--pgn-core-input-btn-line-height-base","$input-btn-line-height-sm":"--pgn-core-input-btn-line-height-sm","$input-btn-line-height-lg":"--pgn-core-input-btn-line-height-lg","$input-btn-focus-width":"--pgn-core-input-btn-focus-width","$input-btn-border-width":"--pgn-core-input-btn-border-width","$box-shadow-down-1":"--pgn-box-shadow-down-1","$box-shadow-down-2":"--pgn-box-shadow-down-2","$box-shadow-down-3":"--pgn-box-shadow-down-3","$box-shadow-down-4":"--pgn-box-shadow-down-4","$box-shadow-down-5":"--pgn-box-shadow-down-5","$box-shadow-left-1":"--pgn-box-shadow-left-1","$box-shadow-left-2":"--pgn-box-shadow-left-2","$box-shadow-left-3":"--pgn-box-shadow-left-3","$box-shadow-left-4":"--pgn-box-shadow-left-4","$box-shadow-left-5":"--pgn-box-shadow-left-5","$box-shadow-up-1":"--pgn-box-shadow-up-1","$box-shadow-up-2":"--pgn-box-shadow-up-2","$box-shadow-up-3":"--pgn-box-shadow-up-3","$box-shadow-up-4":"--pgn-box-shadow-up-4","$box-shadow-up-5":"--pgn-box-shadow-up-5","$box-shadow-right-1":"--pgn-box-shadow-right-1","$box-shadow-right-2":"--pgn-box-shadow-right-2","$box-shadow-right-3":"--pgn-box-shadow-right-3","$box-shadow-right-4":"--pgn-box-shadow-right-4","$box-shadow-right-5":"--pgn-box-shadow-right-5","$box-shadow-centered-1":"--pgn-box-shadow-centered-1","$box-shadow-centered-2":"--pgn-box-shadow-centered-2","$box-shadow-centered-3":"--pgn-box-shadow-centered-3","$box-shadow-centered-4":"--pgn-box-shadow-centered-4","$box-shadow-centered-5":"--pgn-box-shadow-centered-5","$grid-columns":"--pgn-grid-columns","$grid-gutter-width":"--pgn-grid-gutter-width","$grid-row-columns":"--pgn-grid-row-columns","$table-cell-padding":"--pgn-table-cell-padding-base","$table-cell-padding-sm":"--pgn-table-cell-padding-sm","$table-caption-color":"--pgn-table-color-caption","$table-border-color":"--pgn-table-color-border","$table-th-font-weight":"--pgn-table-th-font-weight","$zindex-dropdown":"--pgn-zindex-dropdown","$zindex-sticky":"--pgn-zindex-sticky","$zindex-fixed":"--pgn-zindex-fixed","$zindex-sheet-backdrop":"--pgn-zindex-sheet-backdrop","$zindex-sheet":"--pgn-zindex-sheet","$zindex-modal-backdrop":"--pgn-zindex-modal-backdrop","$zindex-modal":"--pgn-zindex-modal","$zindex-popover":"--pgn-zindex-popover","$zindex-tooltip":"--pgn-zindex-tooltip","$link-color":"--pgn-link-color","$link-decoration":"--pgn-link-decoration","$link-hover-color":"--pgn-link-hover-color","$link-hover-decoration":"--pgn-link-hover-decoration","$inline-link-color":"--pgn-link-brand-inline-color","$inline-link-decoration":"--pgn-link-brand-inline-decoration","$inline-link-decoration-color":"--pgn-link-brand-inline-decoration-color","$inline-link-hover-color":"--pgn-link-brand-inline-hover-color","$inline-link-hover-decoration":"--pgn-link-brand-inline-hover-decoration","$inline-link-hover-decoration-color":"--pgn-link-brand-inline-hover-decoration-color","$muted-link-color":"--pgn-link-muted-color","$muted-link-decoration":"--pgn-link-muted-decoration","$muted-link-hover-color":"--pgn-link-muted-hover-color","$muted-link-hover-decoration":"--pgn-link-muted-hover-decoration","$muted-inline-link-color":"--pgn-link-muted-inline-color","$muted-inline-link-decoration":"--pgn-link-muted-inline-decoration","$muted-inline-link-decoration-color":"--pgn-link-muted-inline-decoration-color","$muted-inline-link-hover-color":"--pgn-link-muted-inline-hover-color","$muted-inline-link-hover-decoration":"--pgn-link-muted-inline-hover-decoration","$muted-inline-link-hover-decoration-color":"--pgn-link-muted-inline-hover-decoration-color","$brand-link-color":"--pgn-link-brand-color","$brand-link-decoration":"--pgn-link-brand-decoration","$brand-link-hover-color":"--pgn-link-brand-hover-color","$brand-link-hover-decoration":"--pgn-link-brand-hover-decoration","$transition-base":"--pgn-transition-base","$transition-fade":"--pgn-transition-fade","$transition-collapse":"--pgn-transition-collapse","$display1-size":"--pgn-display-size-1","$display2-size":"--pgn-display-size-2","$display3-size":"--pgn-display-size-3","$display4-size":"--pgn-display-size-4","$display-mobile-size":"--pgn-display-size-mobile","$display1-weight":"--pgn-display-weight-1","$display2-weight":"--pgn-display-weight-2","$display3-weight":"--pgn-display-weight-3","$display4-weight":"--pgn-display-weight-4","$display-line-height":"--pgn-display-line-height-base","$display-mobile-line-height":"--pgn-display-line-height-mobile","$font-family-sans-serif":"--pgn-font-family-sans-serif","$font-family-serif":"--pgn-font-family-serif","$font-family-monospace":"--pgn-font-family-monospace","$font-family-base":"--pgn-font-family-base","$font-size-base":"--pgn-font-size-base","$font-size-lg":"--pgn-font-size-lg","$font-size-sm":"--pgn-font-size-sm","$font-size-xs":"--pgn-font-size-xs","$h1-font-size":"--pgn-font-size-h1","$h2-font-size":"--pgn-font-size-h2","$h3-font-size":"--pgn-font-size-h3","$h4-font-size":"--pgn-font-size-h4","$h5-font-size":"--pgn-font-size-h5","$h6-font-size":"--pgn-font-size-h6","$h1-mobile-font-size":"--pgn-font-size-mobile-h1","$h2-mobile-font-size":"--pgn-font-size-mobile-h2","$h3-mobile-font-size":"--pgn-font-size-mobile-h3","$h4-mobile-font-size":"--pgn-font-size-mobile-h4","$h5-mobile-font-size":"--pgn-font-size-mobile-h5","$h6-mobile-font-size":"--pgn-font-size-mobile-h6","$font-weight-lighter":"--pgn-font-weight-lighter","$font-weight-light":"--pgn-font-weight-light","$font-weight-normal":"--pgn-font-weight-normal","$font-weight-semi-bold":"--pgn-font-weight-semi-bold","$font-weight-bold":"--pgn-font-weight-bold","$font-weight-bolder":"--pgn-font-weight-bolder","$font-weight-base":"--pgn-font-weight-base","$headings-margin-bottom":"--pgn-headings-margin-bottom","$headings-font-family":"--pgn-headings-font-family","$headings-font-weight":"--pgn-headings-font-weight","$headings-line-height":"--pgn-headings-line-height","$headings-color":"--pgn-headings-color","$line-height-base":"--pgn-line-height-base","$line-height-lg":"--pgn-line-height-lg","$line-height-sm":"--pgn-line-height-sm","$paragraph-margin-bottom":"--pgn-paragraph-margin-bottom"} \ No newline at end of file +{"$border-width":"--pgn-border-width","$border-color":"--pgn-border-color","$border-radius":"--pgn-border-radius-base","$border-radius-lg":"--pgn-border-radius-lg","$border-radius-sm":"--pgn-border-radius-sm","$hr-border-color":"--pgn-border-hr-color","$hr-border-width":"--pgn-border-hr-width","$hr-margin-y":"--pgn-border-hr-margin-y","$caret-width":"--pgn-caret-width","$caret-vertical-align":"--pgn-caret-vertical-align","$caret-spacing":"--pgn-caret-spacing","$body-bg":"--pgn-body-bg","$body-color":"--pgn-body-color","$white":"--pgn-color-white","$black":"--pgn-color-black","$blue":"--pgn-color-blue","$red":"--pgn-color-red","$green":"--pgn-color-green","$yellow":"--pgn-color-yellow","$teal":"--pgn-color-teal","$accent-a":"--pgn-color-accent-a","$accent-b":"--pgn-color-accent-b","$theme-color-interval":"--pgn-color-theme-interval","$gray-100":"--pgn-color-gray-100","$gray-200":"--pgn-color-gray-200","$gray-300":"--pgn-color-gray-300","$gray-400":"--pgn-color-gray-400","$gray-500":"--pgn-color-gray-500","$gray-600":"--pgn-color-gray-600","$gray-700":"--pgn-color-gray-700","$gray-800":"--pgn-color-gray-800","$gray-900":"--pgn-color-gray-900","$gray":"--pgn-color-gray-base","$primary-100":"--pgn-color-primary-100","$primary-200":"--pgn-color-primary-200","$primary-300":"--pgn-color-primary-300","$primary-400":"--pgn-color-primary-400","$primary-500":"--pgn-color-primary-500","$primary-600":"--pgn-color-primary-600","$primary-700":"--pgn-color-primary-700","$primary-800":"--pgn-color-primary-800","$primary-900":"--pgn-color-primary-900","$primary":"--pgn-color-primary-base","$secondary-100":"--pgn-color-secondary-100","$secondary-200":"--pgn-color-secondary-200","$secondary-300":"--pgn-color-secondary-300","$secondary-400":"--pgn-color-secondary-400","$secondary-500":"--pgn-color-secondary-500","$secondary-600":"--pgn-color-secondary-600","$secondary-700":"--pgn-color-secondary-700","$secondary-800":"--pgn-color-secondary-800","$secondary-900":"--pgn-color-secondary-900","$secondary":"--pgn-color-secondary-base","$brand-100":"--pgn-color-brand-100","$brand-200":"--pgn-color-brand-200","$brand-300":"--pgn-color-brand-300","$brand-400":"--pgn-color-brand-400","$brand-500":"--pgn-color-brand-500","$brand-600":"--pgn-color-brand-600","$brand-700":"--pgn-color-brand-700","$brand-800":"--pgn-color-brand-800","$brand-900":"--pgn-color-brand-900","$brand":"--pgn-color-brand-base","$success-100":"--pgn-color-success-100","$success-200":"--pgn-color-success-200","$success-300":"--pgn-color-success-300","$success-400":"--pgn-color-success-400","$success-500":"--pgn-color-success-500","$success-600":"--pgn-color-success-600","$success-700":"--pgn-color-success-700","$success-800":"--pgn-color-success-800","$success-900":"--pgn-color-success-900","$success":"--pgn-color-success-base","$info-100":"--pgn-color-info-100","$info-200":"--pgn-color-info-200","$info-300":"--pgn-color-info-300","$info-400":"--pgn-color-info-400","$info-500":"--pgn-color-info-500","$info-600":"--pgn-color-info-600","$info-700":"--pgn-color-info-700","$info-800":"--pgn-color-info-800","$info-900":"--pgn-color-info-900","$info":"--pgn-color-info-base","$warning-100":"--pgn-color-warning-100","$warning-200":"--pgn-color-warning-200","$warning-300":"--pgn-color-warning-300","$warning-400":"--pgn-color-warning-400","$warning-500":"--pgn-color-warning-500","$warning-600":"--pgn-color-warning-600","$warning-700":"--pgn-color-warning-700","$warning-800":"--pgn-color-warning-800","$warning-900":"--pgn-color-warning-900","$warning":"--pgn-color-warning-base","$danger-100":"--pgn-color-danger-100","$danger-200":"--pgn-color-danger-200","$danger-300":"--pgn-color-danger-300","$danger-400":"--pgn-color-danger-400","$danger-500":"--pgn-color-danger-500","$danger-600":"--pgn-color-danger-600","$danger-700":"--pgn-color-danger-700","$danger-800":"--pgn-color-danger-800","$danger-900":"--pgn-color-danger-900","$danger":"--pgn-color-danger-base","$light-100":"--pgn-color-light-100","$light-200":"--pgn-color-light-200","$light-300":"--pgn-color-light-300","$light-400":"--pgn-color-light-400","$light-500":"--pgn-color-light-500","$light-600":"--pgn-color-light-600","$light-700":"--pgn-color-light-700","$light-800":"--pgn-color-light-800","$light-900":"--pgn-color-light-900","$light":"--pgn-color-light-base","$dark-100":"--pgn-color-dark-100","$dark-200":"--pgn-color-dark-200","$dark-300":"--pgn-color-dark-300","$dark-400":"--pgn-color-dark-400","$dark-500":"--pgn-color-dark-500","$dark-600":"--pgn-color-dark-600","$dark-700":"--pgn-color-dark-700","$dark-800":"--pgn-color-dark-800","$dark-900":"--pgn-color-dark-900","$dark":"--pgn-color-dark-base","$component-active-color":"--pgn-component-active-color","$component-active-bg":"--pgn-component-active-bg","$text-muted":"--pgn-text-muted","$spacer":"--pgn-core-spacer","$input-btn-padding-y":"--pgn-core-input-btn-padding-y","$input-btn-padding-x":"--pgn-core-input-btn-padding-x","$input-btn-padding-y-sm":"--pgn-core-input-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-core-input-btn-padding-sm-x","$input-btn-padding-y-lg":"--pgn-core-input-btn-padding-lg-y","$input-btn-padding-x-lg":"--pgn-core-input-btn-padding-lg-x","$input-btn-font-family":"--pgn-core-input-btn-font-family","$input-btn-font-size":"--pgn-core-input-btn-font-size-base","$input-btn-font-size-sm":"--pgn-core-input-btn-font-size-sm","$input-btn-font-size-lg":"--pgn-core-input-btn-font-size-lg","$input-btn-line-height":"--pgn-core-input-btn-line-height-base","$input-btn-line-height-sm":"--pgn-core-input-btn-line-height-sm","$input-btn-line-height-lg":"--pgn-core-input-btn-line-height-lg","$input-btn-focus-width":"--pgn-core-input-btn-focus-width","$input-btn-focus-color":"--pgn-core-input-btn-focus-color","$input-btn-focus-box-shadow":"--pgn-core-input-btn-focus-box-shadow","$input-btn-border-width":"--pgn-core-input-btn-border-width","$blockquote-small-font-size":"--pgn-core-blockquote-small-font-size","$blockquote-font-size":"--pgn-core-blockquote-font-size","$mark-padding":"--pgn-core-mark-padding","$mark-bg":"--pgn-core-mark-bg","$dt-font-weight":"--pgn-core-dt-font-weight","$list-inline-padding":"--pgn-core-list-inline-padding","$level-1-box-shadow":"--pgn-box-shadow-level-1","$level-2-box-shadow":"--pgn-box-shadow-level-2","$level-3-box-shadow":"--pgn-box-shadow-level-3","$level-4-box-shadow":"--pgn-box-shadow-level-4","$level-5-box-shadow":"--pgn-box-shadow-level-5","$box-shadow":"--pgn-box-shadow-base","$box-shadow-sm":"--pgn-box-shadow-sm","$box-shadow-lg":"--pgn-box-shadow-lg","$box-shadow-down-1":"--pgn-box-shadow-down-1","$box-shadow-down-2":"--pgn-box-shadow-down-2","$box-shadow-down-3":"--pgn-box-shadow-down-3","$box-shadow-down-4":"--pgn-box-shadow-down-4","$box-shadow-down-5":"--pgn-box-shadow-down-5","$box-shadow-left-1":"--pgn-box-shadow-left-1","$box-shadow-left-2":"--pgn-box-shadow-left-2","$box-shadow-left-3":"--pgn-box-shadow-left-3","$box-shadow-left-4":"--pgn-box-shadow-left-4","$box-shadow-left-5":"--pgn-box-shadow-left-5","$box-shadow-up-1":"--pgn-box-shadow-up-1","$box-shadow-up-2":"--pgn-box-shadow-up-2","$box-shadow-up-3":"--pgn-box-shadow-up-3","$box-shadow-up-4":"--pgn-box-shadow-up-4","$box-shadow-up-5":"--pgn-box-shadow-up-5","$box-shadow-right-1":"--pgn-box-shadow-right-1","$box-shadow-right-2":"--pgn-box-shadow-right-2","$box-shadow-right-3":"--pgn-box-shadow-right-3","$box-shadow-right-4":"--pgn-box-shadow-right-4","$box-shadow-right-5":"--pgn-box-shadow-right-5","$box-shadow-centered-1":"--pgn-box-shadow-centered-1","$box-shadow-centered-2":"--pgn-box-shadow-centered-2","$box-shadow-centered-3":"--pgn-box-shadow-centered-3","$box-shadow-centered-4":"--pgn-box-shadow-centered-4","$box-shadow-centered-5":"--pgn-box-shadow-centered-5","$grid-columns":"--pgn-grid-columns","$grid-gutter-width":"--pgn-grid-gutter-width","$grid-row-columns":"--pgn-grid-row-columns","$list-group-color":"--pgn-list-group-color","$list-group-bg":"--pgn-list-group-bg-base","$list-group-hover-bg":"--pgn-list-group-bg-hover","$list-group-border-color":"--pgn-list-group-border-color","$list-group-border-width":"--pgn-list-group-border-width","$list-group-border-radius":"--pgn-list-group-border-radius","$list-group-item-padding-y":"--pgn-list-group-item-padding-y","$list-group-item-padding-x":"--pgn-list-group-item-padding-x","$list-group-active-color":"--pgn-list-group-active-color-base","$list-group-active-border-color":"--pgn-list-group-active-color-border","$list-group-active-bg":"--pgn-list-group-active-bg","$list-group-disabled-color":"--pgn-list-group-disabled-color","$list-group-disabled-bg":"--pgn-list-group-disabled-bg","$list-group-action-color":"--pgn-list-group-action-color-base","$list-group-action-hover-color":"--pgn-list-group-action-color-hover","$list-group-action-active-color":"--pgn-list-group-action-active-color","$list-group-action-active-bg":"--pgn-list-group-action-active-bg","$zindex-dropdown":"--pgn-zindex-dropdown","$zindex-sticky":"--pgn-zindex-sticky","$zindex-fixed":"--pgn-zindex-fixed","$zindex-sheet-backdrop":"--pgn-zindex-sheet-backdrop","$zindex-sheet":"--pgn-zindex-sheet","$zindex-modal-backdrop":"--pgn-zindex-modal-backdrop","$zindex-modal":"--pgn-zindex-modal","$zindex-popover":"--pgn-zindex-popover","$zindex-tooltip":"--pgn-zindex-tooltip","$link-color":"--pgn-link-color","$link-decoration":"--pgn-link-decoration","$link-hover-color":"--pgn-link-hover-color","$link-hover-decoration":"--pgn-link-hover-decoration","$inline-link-color":"--pgn-link-brand-inline-color","$inline-link-decoration":"--pgn-link-brand-inline-decoration","$inline-link-decoration-color":"--pgn-link-brand-inline-decoration-color","$inline-link-hover-color":"--pgn-link-brand-inline-hover-color","$inline-link-hover-decoration":"--pgn-link-brand-inline-hover-decoration","$inline-link-hover-decoration-color":"--pgn-link-brand-inline-hover-decoration-color","$muted-link-color":"--pgn-link-muted-color","$muted-link-decoration":"--pgn-link-muted-decoration","$muted-link-hover-color":"--pgn-link-muted-hover-color","$muted-link-hover-decoration":"--pgn-link-muted-hover-decoration","$muted-inline-link-color":"--pgn-link-muted-inline-color","$muted-inline-link-decoration":"--pgn-link-muted-inline-decoration","$muted-inline-link-decoration-color":"--pgn-link-muted-inline-decoration-color","$muted-inline-link-hover-color":"--pgn-link-muted-inline-hover-color","$muted-inline-link-hover-decoration":"--pgn-link-muted-inline-hover-decoration","$muted-inline-link-hover-decoration-color":"--pgn-link-muted-inline-hover-decoration-color","$brand-link-color":"--pgn-link-brand-color","$brand-link-decoration":"--pgn-link-brand-decoration","$brand-link-hover-color":"--pgn-link-brand-hover-color","$brand-link-hover-decoration":"--pgn-link-brand-hover-decoration","$emphasized-link-hover-darken-percentage":"--pgn-link-emphasized-hover-darken-percentage","$transition-base":"--pgn-transition-base","$transition-fade":"--pgn-transition-fade","$transition-collapse":"--pgn-transition-collapse","$display1-size":"--pgn-display-size-1","$display2-size":"--pgn-display-size-2","$display3-size":"--pgn-display-size-3","$display4-size":"--pgn-display-size-4","$display-mobile-size":"--pgn-display-size-mobile","$display1-weight":"--pgn-display-weight-1","$display2-weight":"--pgn-display-weight-2","$display3-weight":"--pgn-display-weight-3","$display4-weight":"--pgn-display-weight-4","$display-line-height":"--pgn-display-line-height-base","$display-mobile-line-height":"--pgn-display-line-height-mobile","$font-family-base":"--pgn-font-family-base","$font-family-sans-serif":"--pgn-font-family-sans-serif","$font-family-serif":"--pgn-font-family-serif","$font-family-monospace":"--pgn-font-family-monospace","$font-size-base":"--pgn-font-size-base","$font-size-lg":"--pgn-font-size-lg","$font-size-sm":"--pgn-font-size-sm","$font-size-xs":"--pgn-font-size-xs","$small-font-size":"--pgn-font-size-small-base","$x-small-font-size":"--pgn-font-size-small-x","$h1-font-size":"--pgn-font-size-h1","$h2-font-size":"--pgn-font-size-h2","$h3-font-size":"--pgn-font-size-h3","$h4-font-size":"--pgn-font-size-h4","$h5-font-size":"--pgn-font-size-h5","$h6-font-size":"--pgn-font-size-h6","$h1-mobile-font-size":"--pgn-font-size-mobile-h1","$h2-mobile-font-size":"--pgn-font-size-mobile-h2","$h3-mobile-font-size":"--pgn-font-size-mobile-h3","$h4-mobile-font-size":"--pgn-font-size-mobile-h4","$h5-mobile-font-size":"--pgn-font-size-mobile-h5","$h6-mobile-font-size":"--pgn-font-size-mobile-h6","$lead-font-size":"--pgn-font-size-lead","$font-weight-lighter":"--pgn-font-weight-lighter","$font-weight-light":"--pgn-font-weight-light","$font-weight-normal":"--pgn-font-weight-normal","$font-weight-semi-bold":"--pgn-font-weight-semi-bold","$font-weight-bold":"--pgn-font-weight-bold","$font-weight-bolder":"--pgn-font-weight-bolder","$font-weight-base":"--pgn-font-weight-base","$lead-font-weight":"--pgn-font-weight-lead","$headings-margin-bottom":"--pgn-headings-margin-bottom","$headings-font-family":"--pgn-headings-font-family","$headings-font-weight":"--pgn-headings-font-weight","$headings-line-height":"--pgn-headings-line-height","$headings-color":"--pgn-headings-color","$line-height-base":"--pgn-line-height-base","$line-height-lg":"--pgn-line-height-lg","$line-height-sm":"--pgn-line-height-sm","$paragraph-margin-bottom":"--pgn-paragraph-margin-bottom","$pgn-www-zindex-header":"--pgn-www-zindex-header","$pgn-www-zindex-sheet":"--pgn-www-zindex-sheet","$pgn-www-zindex-sheet-backdrop":"--pgn-www-zindex-sheet-backdrop","$pgn-www-zindex-modal":"--pgn-www-zindex-modal"} \ No newline at end of file diff --git a/tokens/build/variables.css b/tokens/build/variables.css index 474dbec35b..80cfaab7c9 100644 --- a/tokens/build/variables.css +++ b/tokens/build/variables.css @@ -1,4 +1,8 @@ :root { + --pgn-www-zindex-modal: 2503; + --pgn-www-zindex-sheet-backdrop: 2501; + --pgn-www-zindex-sheet: 2502; + --pgn-www-zindex-header: 2500; --pgn-paragraph-margin-bottom: 1rem; --pgn-line-height-sm: 1.5; --pgn-line-height-lg: 1.5; @@ -6,6 +10,7 @@ --pgn-headings-line-height: 1.25; --pgn-headings-font-family: null; --pgn-headings-margin-bottom: .5rem; + --pgn-font-weight-lead: null; --pgn-font-weight-bolder: bolder; --pgn-font-weight-bold: 700; --pgn-font-weight-semi-bold: 500; @@ -41,6 +46,7 @@ --pgn-transition-collapse: height .35s ease; --pgn-transition-fade: opacity .15s linear; --pgn-transition-base: all .2s ease-in-out; + --pgn-link-emphasized-hover-darken-percentage: 15%; --pgn-link-brand-inline-hover-decoration-color: #003C5E; --pgn-link-brand-inline-hover-decoration: underline; --pgn-link-brand-inline-hover-color: #003C5E; @@ -90,6 +96,9 @@ --pgn-size-base-75: 75rem; --pgn-size-base-50: 50rem; --pgn-size-base-25: 25rem; + --pgn-list-group-item-padding-x: 1.25rem; + --pgn-list-group-item-padding-y: .75rem; + --pgn-list-group-color: null; --pgn-grid-row-columns: 6; --pgn-grid-gutter-width: 24px; --pgn-grid-columns: 12; @@ -124,18 +133,24 @@ --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3); + --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2); + --pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3); --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); + --pgn-core-list-inline-padding: .5rem; + --pgn-core-mark-bg: #FFF243; + --pgn-core-mark-padding: .2em; --pgn-core-input-btn-focus-width: 1px; --pgn-core-input-btn-line-height-sm: 1.4286; --pgn-core-input-btn-line-height-base: 1.3333; --pgn-core-input-btn-font-size-lg: 1.325rem; --pgn-core-input-btn-font-size-sm: .875rem; --pgn-core-input-btn-font-size-base: 1.125rem; - --pgn-core-input-btn-font-family: null; + --pgn-core-input-btn-font-family: inherit; --pgn-core-input-btn-padding-lg-x: 1.25rem; --pgn-core-input-btn-padding-lg-y: .6875rem; --pgn-core-input-btn-padding-sm-x: .75rem; @@ -279,20 +294,21 @@ --pgn-modal-footer-padding-y: 1.5rem; --pgn-modal-footer-padding-x: 1rem; --pgn-modal-footer-margin-between: .5rem; - --pgn-modal-inner-padding: 1.5rem; + --pgn-modal-inner-padding-bottom: .7rem; + --pgn-modal-inner-padding-base: 1.5rem; --pgn-menu-border-hover: transparent; --pgn-menu-border-active: transparent; --pgn-menu-border-base: transparent; --pgn-image-figure-caption-font-size: 90%; --pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); --pgn-image-thumbnail-padding: .25rem; + --pgn-icon-button-bg: transparent; + --pgn-icon-button-diameter-sm: 2.25rem; + --pgn-icon-button-diameter-md: 2.75rem; --pgn-icon-lg: 1.75rem; --pgn-icon-md: 1.5rem; --pgn-icon-sm: 1.25rem; --pgn-icon-inline: .8em; - --pgn-icon-button-bg: transparent; - --pgn-icon-button-diameter-sm: 2.25rem; - --pgn-icon-button-diameter-md: 2.75rem; --pgn-form-select-icon-padding: .5625rem; --pgn-form-control-icon-width: 32px; --pgn-form-feedback-tooltip-opacity: .9; @@ -413,12 +429,14 @@ --pgn-card-cap-color: null; --pgn-card-cap-bg: rgba(0, 0, 0, .03); --pgn-card-border-color-focus: rgba(0, 0, 0, .5); + --pgn-card-border-color-base: rgba(0, 0, 0, .125); --pgn-card-border-radius-logo: .25rem; --pgn-card-border-radius-image: .3125rem; --pgn-card-spacer-y: .75rem; --pgn-card-spacer-x: 1.25rem; --pgn-btn-transition: null; --pgn-btn-block-spacing-y: .5rem; + --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); --pgn-btn-tertiary-inverse-bg-base: transparent; --pgn-btn-tertiary-bg-base: transparent; --pgn-btn-disabled-opacity: .65; @@ -444,6 +462,9 @@ --pgn-badge-padding-x-pill: .6em; --pgn-badge-padding-x-base: .5rem; --pgn-badge-font-size: 75%; + --pgn-avatar-button-padding-left-lg: .25em; + --pgn-avatar-button-padding-left-sm: .25em; + --pgn-avatar-button-padding-left-base: .25em; --pgn-avatar-size-huge: 18.75rem; --pgn-avatar-size-xxl: 11.5rem; --pgn-avatar-size-xl: 6rem; @@ -452,9 +473,6 @@ --pgn-avatar-size-xs: 1.5rem; --pgn-avatar-size-base: 3rem; --pgn-avatar-border-radius: 100%; - --pgn-avatar-button-padding-left-lg: .25em; - --pgn-avatar-button-padding-left-sm: .25em; - --pgn-avatar-button-padding-left-base: .25em; --pgn-annotation-arrow-border-width: .5rem; --pgn-annotation-arrow-side-margin: .25rem; --pgn-annotation-max-width: 18.75rem; @@ -560,6 +578,7 @@ --pgn-color-gray-300: #ADADAD; --pgn-color-gray-200: #CCCCCC; --pgn-color-gray-100: #EBEBEB; + --pgn-color-theme-interval: 8%; --pgn-color-accent-b: #FFEE88; --pgn-color-accent-a: #00BBF9; --pgn-color-teal: #006DAA; @@ -579,6 +598,7 @@ --pgn-headings-color: var(--pgn-color-black); --pgn-headings-font-weight: var(--pgn-font-weight-bold); --pgn-font-weight-base: var(--pgn-font-weight-normal); + --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25); --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); --pgn-font-size-mobile-h5: var(--pgn-font-size-h5); --pgn-font-size-mobile-h4: var(--pgn-font-size-h4); @@ -589,9 +609,17 @@ --pgn-display-weight-3: var(--pgn-font-weight-bold); --pgn-display-weight-2: var(--pgn-font-weight-bold); --pgn-display-weight-1: var(--pgn-font-weight-bold); - --pgn-box-shadow-lg: 0 .25rem .5rem rgba(var(--pgn-color-black), .3); - --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(var(--pgn-color-black), .2); - --pgn-box-shadow-base: 0 .125rem .25rem rgba(var(--pgn-color-black), .3); + --pgn-list-group-action-active-bg: var(--pgn-color-gray-200); + --pgn-list-group-action-color-base: var(--pgn-color-gray-700); + --pgn-list-group-disabled-color: var(--pgn-color-gray-600); + --pgn-list-group-border-radius: var(--pgn-border-radius-base); + --pgn-list-group-border-width: var(--pgn-border-width); + --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); + --pgn-list-group-bg-hover: var(--pgn-color-gray-100); + --pgn-list-group-bg-base: var(--pgn-color-white); + --pgn-core-dt-font-weight: var(--pgn-font-weight-bold); + --pgn-core-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25); + --pgn-core-blockquote-small-font-size: var(--pgn-font-size-small-base); --pgn-core-input-btn-border-width: var(--pgn-border-width); --pgn-core-input-btn-focus-box-shadow: 0 0 0 var(--pgn-core-input-btn-focus-width) var(--pgn-core-input-btn-focus-color); --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg); @@ -670,7 +698,7 @@ --pgn-modal-content-border-radius: var(--pgn-border-radius-lg); --pgn-modal-content-bg: var(--pgn-color-white); --pgn-modal-title-line-height: var(--pgn-line-height-base); - --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-y) var(--pgn-modal-footer-padding-x); + --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y); --pgn-menu-background-base: var(--pgn-btn-tertiary-bg-base); --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200); @@ -729,6 +757,7 @@ --pgn-dropdown-bg: var(--pgn-color-white); --pgn-dropdown-font-size: var(--pgn-font-size-base); --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item); + --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); --pgn-data-table-border: 1px solid var(--pgn-color-gray-200); --pgn-data-table-background-color: var(--pgn-color-white); --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x); @@ -755,10 +784,9 @@ --pgn-card-margin-deck: var(--pgn-card-margin-group); --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max); --pgn-card-bg: var(--pgn-color-white); - --pgn-card-border-color-base: rgba(var(--pgn-color-black), .125); --pgn-card-border-radius-base: var(--pgn-border-radius-base); --pgn-card-border-width: var(--pgn-border-width); - --pgn-btn-tertiary-inverse-bg-hover: rgba(var(--pgn-color-white), .1); + --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); --pgn-btn-tertiary-inverse-color: var(--pgn-color-white); --pgn-btn-tertiary-color: var(--pgn-color-gray-700); --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075); @@ -772,12 +800,14 @@ --pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm); --pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base); --pgn-btn-font-family: var(--pgn-core-input-btn-font-family); + --pgn-btn-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x); --pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); --pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x); - --pgn-btn-padding-y-sm-x: var(--pgn-core-input-btn-padding-sm-x); - --pgn-btn-padding-y-sm-y: var(--pgn-core-input-btn-padding-sm-y); + --pgn-btn-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y); --pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); --pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-breadcrumb-inverse-color: var(--pgn-color-white); + --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700); --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600); --pgn-breadcrumb-bg: var(--pgn-color-gray-200); --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base); @@ -803,16 +833,22 @@ --pgn-color-gray-500: var(--pgn-color-gray-base); --pgn-body-color: var(--pgn-color-gray-700); --pgn-body-bg: var(--pgn-color-white); + --pgn-border-hr-margin-y: var(--pgn-core-spacer); + --pgn-border-hr-width: var(--pgn-border-width); + --pgn-border-hr-color: rgba(var(--pgn-color-black), .1); --pgn-border-color: var(--pgn-color-gray-200); --pgn-link-brand-inline-color: var(--pgn-color-brand-500); --pgn-link-brand-color: var(--pgn-color-brand-500); --pgn-link-muted-inline-color: var(--pgn-color-primary-500); --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-list-group-action-active-color: var(--pgn-body-color); + --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); + --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); + --pgn-list-group-active-color-base: var(--pgn-component-active-color); --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); --pgn-table-dark-color-border: var(--pgn-table-dark-bg-base); --pgn-table-dark-color-hover: var(--pgn-table-dark-color-base); --pgn-table-border-color: var(--pgn-border-color); - --pgn-table-color-border: var(--pgn-border-color); --pgn-table-color-base: var(--pgn-body-color); --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); --pgn-search-field-border-color-base: var(--pgn-color-gray-500); @@ -895,8 +931,6 @@ --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width)); --pgn-dropdown-color-header: var(--pgn-color-gray-500); --pgn-dropdown-color-base: var(--pgn-body-color); - --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); - --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); @@ -914,9 +948,9 @@ --pgn-color-secondary-500: var(--pgn-color-secondary-base); --pgn-link-inline-color: var(--pgn-color-info-500); --pgn-link-color: var(--pgn-color-info-500); + --pgn-list-group-active-bg: var(--pgn-component-active-bg); --pgn-core-input-btn-focus-color: var(--pgn-component-active-bg); --pgn-table-caption-color: var(--pgn-text-muted); - --pgn-table-color-caption: var(--pgn-text-muted); --pgn-table-color-hover: var(--pgn-table-color-base); --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); @@ -952,6 +986,7 @@ --pgn-form-input-focus-color-border: var(--pgn-component-active-bg); --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); + --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); --pgn-pagination-color-base: var(--pgn-link-color); --pgn-form-feedback-icon-color-invalid: var(--pgn-form-feedback-color-invalid); diff --git a/tokens/source/borders-fills/border.tokens.json b/tokens/source/borders-fills/border.tokens.json index 153e7c3959..be7a20d040 100644 --- a/tokens/source/borders-fills/border.tokens.json +++ b/tokens/source/borders-fills/border.tokens.json @@ -6,6 +6,13 @@ "base": { "value": ".375rem", "themeable": true, "source": "$border-radius" }, "lg": { "value": ".425rem", "themeable": true, "source": "$border-radius-lg" }, "sm": { "value": ".25rem", "themeable": true, "source": "$border-radius-sm" } + }, + "hr": { + "color": { "value": "rgba({color.black.value}, .1)", "themeable": true, "source": "$hr-border-color" }, + "width": { "value": "{border.width.value}", "themeable": true, "source": "$hr-border-width" }, + "margin": { + "y": { "value": "{core.spacer.value}", "themeable": true, "source": "$hr-margin-y" } + } } } } diff --git a/tokens/source/colors/colors.tokens.json b/tokens/source/colors/colors.tokens.json index d24d6299a1..c2263a4fb7 100644 --- a/tokens/source/colors/colors.tokens.json +++ b/tokens/source/colors/colors.tokens.json @@ -11,6 +11,9 @@ "a": { "value": "#00BBF9", "themeable": true, "source": "$accent-a" }, "b": { "value": "#FFEE88", "themeable": true, "source": "$accent-b" } }, + "theme": { + "interval": { "value": "8%", "themeable": true, "source": "$theme-color-interval" } + }, "gray": { "base": { "value": "#707070", "themeable": true, "source": "$gray" }, "100": { "value": "#EBEBEB", "themeable": true, "source": "$gray-100" }, diff --git a/tokens/source/colors/component/component.tokens.json b/tokens/source/colors/component/component.tokens.json index a110908f47..42bc8ce720 100644 --- a/tokens/source/colors/component/component.tokens.json +++ b/tokens/source/colors/component/component.tokens.json @@ -1,8 +1,8 @@ { - "component": { - "active": { - "color": { "value": "{color.white.value}", "themeable": true, "source": "$component-active-color" }, - "bg": { "value": "{color.primary.500.value}", "themeable": true, "source": "$component-active-bg" } - } + "component": { + "active": { + "color": { "value": "{color.white.value}", "themeable": true, "source": "$component-active-color" }, + "bg": { "value": "{color.primary.500.value}", "themeable": true, "source": "$component-active-bg" } } -} \ No newline at end of file + } +} diff --git a/tokens/source/components/action-row/action-row.tokens.json b/tokens/source/components/ActionRow/ActionRow.tokens.json similarity index 100% rename from tokens/source/components/action-row/action-row.tokens.json rename to tokens/source/components/ActionRow/ActionRow.tokens.json diff --git a/tokens/source/components/alert/alert.tokens.json b/tokens/source/components/Alert/Alert.tokens.json similarity index 100% rename from tokens/source/components/alert/alert.tokens.json rename to tokens/source/components/Alert/Alert.tokens.json diff --git a/tokens/source/components/annotation/annotation.tokens.json b/tokens/source/components/Annotation/Annotation.tokens.json similarity index 100% rename from tokens/source/components/annotation/annotation.tokens.json rename to tokens/source/components/Annotation/Annotation.tokens.json diff --git a/tokens/source/components/avatar/avatar.tokens.json b/tokens/source/components/Avatar/Avatar.tokens.json similarity index 100% rename from tokens/source/components/avatar/avatar.tokens.json rename to tokens/source/components/Avatar/Avatar.tokens.json diff --git a/tokens/source/components/avatar-button/avatar-button.tokens.json b/tokens/source/components/AvatarButton/AvatarButton.tokens.json similarity index 100% rename from tokens/source/components/avatar-button/avatar-button.tokens.json rename to tokens/source/components/AvatarButton/AvatarButton.tokens.json diff --git a/tokens/source/components/badge/badge.tokens.json b/tokens/source/components/Badge/Badge.tokens.json similarity index 100% rename from tokens/source/components/badge/badge.tokens.json rename to tokens/source/components/Badge/Badge.tokens.json diff --git a/tokens/source/components/breadcrumb/breadcrumb.tokens.json b/tokens/source/components/Breadcrumb/Breadcrumb.tokens.json similarity index 89% rename from tokens/source/components/breadcrumb/breadcrumb.tokens.json rename to tokens/source/components/Breadcrumb/Breadcrumb.tokens.json index e1f7707d9c..99356c306b 100644 --- a/tokens/source/components/breadcrumb/breadcrumb.tokens.json +++ b/tokens/source/components/Breadcrumb/Breadcrumb.tokens.json @@ -33,8 +33,8 @@ }, "inverse": { "active": { "value": "{color.light.500.value}", "themeable": true, "source": "$breadcrumb-inverse-active" }, - "spacer": { "valued": "{color.light.700.value}", "themeable": true, "source": "$breadcrumb-inverse-spacer" }, - "color": { "valued": "{color.white.value}", "themeable": true, "source": "$breadcrumb-inverse-color" } + "spacer": { "value": "{color.light.700.value}", "themeable": true, "source": "$breadcrumb-inverse-spacer" }, + "color": { "value": "{color.white.value}", "themeable": true, "source": "$breadcrumb-inverse-color" } } } } diff --git a/tokens/source/components/bubble/bubble.tokens.json b/tokens/source/components/Bubble/Bubble.tokens.json similarity index 100% rename from tokens/source/components/bubble/bubble.tokens.json rename to tokens/source/components/Bubble/Bubble.tokens.json diff --git a/tokens/source/components/button/button.tokens.json b/tokens/source/components/Button/Button.tokens.json similarity index 89% rename from tokens/source/components/button/button.tokens.json rename to tokens/source/components/Button/Button.tokens.json index 1476ecce3a..b2ac8790bd 100644 --- a/tokens/source/components/button/button.tokens.json +++ b/tokens/source/components/Button/Button.tokens.json @@ -4,14 +4,12 @@ "y": { "base": { "value": "{core.input.btn.padding.y.value}", "themeable": true, "source": "$btn-padding-y" }, "lg": { "value": "{core.input.btn.padding.lg.y.value}", "themeable": true, "source": "$btn-padding-y-lg" }, - "sm": { - "y": { "value": "{core.input.btn.padding.sm.y.value}", "themeable": true, "source": "$btn-padding-y-sm" }, - "x": { "value": "{core.input.btn.padding.sm.x.value}", "themeable": true, "source": "$btn-padding-x-sm" } - } + "sm": { "value": "{core.input.btn.padding.sm.y.value}", "themeable": true, "source": "$btn-padding-y-sm" } }, "x": { "base": { "value": "{core.input.btn.padding.x.value}", "themeable": true, "source": "$btn-padding-x" }, - "lg": { "value": "{core.input.btn.padding.lg.x.value}", "themeable": true, "source": "$btn-padding-x-lg" } + "lg": { "value": "{core.input.btn.padding.lg.x.value}", "themeable": true, "source": "$btn-padding-x-lg" }, + "sm": { "value": "{core.input.btn.padding.sm.x.value}", "themeable": true, "source": "$btn-padding-x-sm" } } }, "font": { @@ -40,7 +38,9 @@ }, "box-shadow": { "base": { - "value": "inset 0 1px 0 rgba({color.white.value}, .15), 0 1px 1px rgba({color.black.value}, .075)", "themeable": true, "source": "$btn-box-shadow" + "value": "inset 0 1px 0 rgba({color.white.value}, .15), 0 1px 1px rgba({color.black.value}, .075)", + "themeable": true, + "source": "$btn-box-shadow" }, "active": { "value": "none", "themeable": true, "source": "$btn-active-box-shadow" } }, @@ -66,7 +66,7 @@ "bg": { "base": { "value": "transparent", "themeable": true, "source": "$btn-inverse-tertiary-bg" }, "hover": { - "value": "rgba({color.white.value}, .1)", + "value": "rgba(255, 255, 255, .1)", "themeable": true, "source": "$btn-inverse-tertiary-hover-bg" }, diff --git a/tokens/source/components/card/card.tokens.json b/tokens/source/components/Card/Card.tokens.json similarity index 97% rename from tokens/source/components/card/card.tokens.json rename to tokens/source/components/Card/Card.tokens.json index 09860769fb..e7a2d59123 100644 --- a/tokens/source/components/card/card.tokens.json +++ b/tokens/source/components/Card/Card.tokens.json @@ -12,7 +12,7 @@ "logo": { "value": ".25rem", "themeable": true, "source": "$card-logo-border-radius" } }, "color": { - "base": { "value": "rgba({color.black.value}, .125)", "themeable": true, "source": "$card-border-color" }, + "base": { "value": "rgba(0, 0, 0, .125)", "themeable": true, "source": "$card-border-color" }, "focus": { "value": "rgba(0, 0, 0, .5)", "themeable": true, "source": "$card-border-focus-color" } } }, diff --git a/tokens/source/components/carousel/carousel.tokens.json b/tokens/source/components/Carousel/Carousel.tokens.json similarity index 100% rename from tokens/source/components/carousel/carousel.tokens.json rename to tokens/source/components/Carousel/Carousel.tokens.json diff --git a/tokens/source/components/chip/chip.tokens.json b/tokens/source/components/Chip/Chip.tokens.json similarity index 100% rename from tokens/source/components/chip/chip.tokens.json rename to tokens/source/components/Chip/Chip.tokens.json diff --git a/tokens/source/components/close-button/close-button.tokens.json b/tokens/source/components/CloseButton/CloseButton.tokens.json similarity index 100% rename from tokens/source/components/close-button/close-button.tokens.json rename to tokens/source/components/CloseButton/CloseButton.tokens.json diff --git a/tokens/source/components/Code/Code.tokens.json b/tokens/source/components/Code/Code.tokens.json new file mode 100644 index 0000000000..376929693c --- /dev/null +++ b/tokens/source/components/Code/Code.tokens.json @@ -0,0 +1,39 @@ +{ + "code": { + "font": { + "size": { "value": "87.5%", "themeable": true, "source": "$code-font-size" } + }, + "color": { "value": "#E83E8C", "themeable": true, "source": "$code-color" }, + "kbd": { + "font": { + "size": { "value": "{code.font.size.value}", "themeable": true, "source": "$kbd-font-size" } + }, + "box": { + "shadow": { + "value": "inset 0 -.1rem 0 rgba({color.black.value}, .25)", + "themeable": true, + "source": "$kbd-box-shadow" + } + }, + "nested": { + "font": { + "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$nested-kbd-font-weight" } + } + }, + "padding": { + "y": { "value": ".2rem", "themeable": true, "source": "$kbd-padding-y" }, + "x": { "value": ".4rem", "themeable": true, "source": "$kbd-padding-x" } + }, + "color": { "value": "{color.white.value}", "themeable": true, "source": "$kbd-color" }, + "bg": { "value": "{color.gray.700.value}", "themeable": true, "source": "$kbd-bg" } + }, + "pre": { + "color": { "value": "{color.gray.900.value}", "themeable": true, "source": "$pre-color" }, + "scrollable": { + "max": { + "height": { "value": "340px", "themeable": true, "source": "$pre-scrollable-max-height" } + } + } + } + } +} diff --git a/tokens/source/components/collapsible/collapsible.tokens.json b/tokens/source/components/Collapsible/Collapsible.tokens.json similarity index 100% rename from tokens/source/components/collapsible/collapsible.tokens.json rename to tokens/source/components/Collapsible/Collapsible.tokens.json diff --git a/tokens/source/components/container/container.tokens.json b/tokens/source/components/Container/Container.tokens.json similarity index 100% rename from tokens/source/components/container/container.tokens.json rename to tokens/source/components/Container/Container.tokens.json diff --git a/tokens/source/components/data-table/data-table.tokens.json b/tokens/source/components/DataTable/DataTable.tokens.json similarity index 100% rename from tokens/source/components/data-table/data-table.tokens.json rename to tokens/source/components/DataTable/DataTable.tokens.json diff --git a/tokens/source/components/dropdown/dropdown.tokens.json b/tokens/source/components/Dropdown/Dropdown.tokens.json similarity index 100% rename from tokens/source/components/dropdown/dropdown.tokens.json rename to tokens/source/components/Dropdown/Dropdown.tokens.json diff --git a/tokens/source/components/dropzone/dropzone.tokens.json b/tokens/source/components/Dropzone/Dropzone.tokens.json similarity index 100% rename from tokens/source/components/dropzone/dropzone.tokens.json rename to tokens/source/components/Dropzone/Dropzone.tokens.json diff --git a/tokens/source/components/form/form.tokens.json b/tokens/source/components/Form/Form.tokens.json similarity index 100% rename from tokens/source/components/form/form.tokens.json rename to tokens/source/components/Form/Form.tokens.json diff --git a/tokens/source/components/icon/icon.tokens.json b/tokens/source/components/Icon/Icon.tokens.json similarity index 100% rename from tokens/source/components/icon/icon.tokens.json rename to tokens/source/components/Icon/Icon.tokens.json diff --git a/tokens/source/components/icon-button/icon-button.tokens.json b/tokens/source/components/IconButton/IconButton.tokens.json similarity index 100% rename from tokens/source/components/icon-button/icon-button.tokens.json rename to tokens/source/components/IconButton/IconButton.tokens.json diff --git a/tokens/source/components/image/image.tokens.json b/tokens/source/components/Image/Image.tokens.json similarity index 100% rename from tokens/source/components/image/image.tokens.json rename to tokens/source/components/Image/Image.tokens.json diff --git a/tokens/source/components/menu/menu.tokens.json b/tokens/source/components/Menu/Menu.tokens.json similarity index 100% rename from tokens/source/components/menu/menu.tokens.json rename to tokens/source/components/Menu/Menu.tokens.json diff --git a/tokens/source/components/modal/modal.tokens.json b/tokens/source/components/Modal/Modal.tokens.json similarity index 92% rename from tokens/source/components/modal/modal.tokens.json rename to tokens/source/components/Modal/Modal.tokens.json index db1c394753..a936345a35 100644 --- a/tokens/source/components/modal/modal.tokens.json +++ b/tokens/source/components/Modal/Modal.tokens.json @@ -1,7 +1,10 @@ { "modal": { "inner": { - "padding": { "value": "1.5rem", "themeable": true, "source": "$modal-inner-padding" } + "padding": { + "base": { "value": "1.5rem", "themeable": true, "source": "$modal-inner-padding" }, + "bottom": { "value": ".7rem", "themeable": true, "source": "$modal-inner-padding-bottom" } + } }, "footer": { "margin": { @@ -17,7 +20,7 @@ }, "padding": { "base": { - "value": "{modal.footer.padding.y.value} {modal.footer.padding.x.value}", + "value": "{modal.footer.padding.x.value} {modal.footer.padding.y.value}", "themeable": true, "source": "$modal-footer-padding" }, diff --git a/tokens/source/components/nav/nav.tokens.json b/tokens/source/components/Nav/Nav.tokens.json similarity index 100% rename from tokens/source/components/nav/nav.tokens.json rename to tokens/source/components/Nav/Nav.tokens.json diff --git a/tokens/source/components/navbar/navbar.tokens.json b/tokens/source/components/Navbar/Navbar.tokens.json similarity index 100% rename from tokens/source/components/navbar/navbar.tokens.json rename to tokens/source/components/Navbar/Navbar.tokens.json diff --git a/tokens/source/components/pagination/pagination.tokens.json b/tokens/source/components/Pagination/Pagination.tokens.json similarity index 100% rename from tokens/source/components/pagination/pagination.tokens.json rename to tokens/source/components/Pagination/Pagination.tokens.json diff --git a/tokens/source/components/popover/popover.tokens.json b/tokens/source/components/Popover/Popover.tokens.json similarity index 100% rename from tokens/source/components/popover/popover.tokens.json rename to tokens/source/components/Popover/Popover.tokens.json diff --git a/tokens/source/components/product-tour/product-tour.tokens.json b/tokens/source/components/ProductTour/ProductTour.tokens.json similarity index 100% rename from tokens/source/components/product-tour/product-tour.tokens.json rename to tokens/source/components/ProductTour/ProductTour.tokens.json diff --git a/tokens/source/components/progress-bar/progress-bar.tokens.json b/tokens/source/components/ProgressBar/ProgressBar.tokens.json similarity index 100% rename from tokens/source/components/progress-bar/progress-bar.tokens.json rename to tokens/source/components/ProgressBar/ProgressBar.tokens.json diff --git a/tokens/source/components/search-field/search-field.tokens.json b/tokens/source/components/SearchField/SearchField.tokens.json similarity index 100% rename from tokens/source/components/search-field/search-field.tokens.json rename to tokens/source/components/SearchField/SearchField.tokens.json diff --git a/tokens/source/components/selectable-box/selectable-box.tokens.json b/tokens/source/components/SelectableBox/SelectableBox.tokens.json similarity index 100% rename from tokens/source/components/selectable-box/selectable-box.tokens.json rename to tokens/source/components/SelectableBox/SelectableBox.tokens.json diff --git a/tokens/source/components/spinner/spinner.tokens.json b/tokens/source/components/Spinner/Spinner.tokens.json similarity index 100% rename from tokens/source/components/spinner/spinner.tokens.json rename to tokens/source/components/Spinner/Spinner.tokens.json diff --git a/tokens/source/components/stack/stack.tokens.json b/tokens/source/components/Stack/Stack.tokens.json similarity index 100% rename from tokens/source/components/stack/stack.tokens.json rename to tokens/source/components/Stack/Stack.tokens.json diff --git a/tokens/source/components/sticky/sticky.tokens.json b/tokens/source/components/Sticky/Sticky.tokens.json similarity index 100% rename from tokens/source/components/sticky/sticky.tokens.json rename to tokens/source/components/Sticky/Sticky.tokens.json diff --git a/tokens/source/components/table/table.tokens.json b/tokens/source/components/Table/Table.tokens.json similarity index 94% rename from tokens/source/components/table/table.tokens.json rename to tokens/source/components/Table/Table.tokens.json index 77c06a37aa..6d2bcc692b 100644 --- a/tokens/source/components/table/table.tokens.json +++ b/tokens/source/components/Table/Table.tokens.json @@ -43,6 +43,11 @@ "level": { "bg": { "value": "-9", "themeable": true, "source": "$table-bg-level" }, "border": { "value": "-6", "themeable": true, "source": "$table-border-level" } + }, + "th": { + "font": { + "weight": { "value": "null", "themeable": true, "source": "$table-th-font-weight" } + } } } } diff --git a/tokens/source/components/tabs/tabs.tokens.json b/tokens/source/components/Tabs/Tabs.tokens.json similarity index 100% rename from tokens/source/components/tabs/tabs.tokens.json rename to tokens/source/components/Tabs/Tabs.tokens.json diff --git a/tokens/source/components/toast/toast.tokens.json b/tokens/source/components/Toast/Toast.tokens.json similarity index 100% rename from tokens/source/components/toast/toast.tokens.json rename to tokens/source/components/Toast/Toast.tokens.json diff --git a/tokens/source/components/tooltip/tooltip.tokens.json b/tokens/source/components/Tooltip/Tooltip.tokens.json similarity index 100% rename from tokens/source/components/tooltip/tooltip.tokens.json rename to tokens/source/components/Tooltip/Tooltip.tokens.json diff --git a/tokens/source/components/code/code.tokens.json b/tokens/source/components/code/code.tokens.json deleted file mode 100644 index 28db8ef831..0000000000 --- a/tokens/source/components/code/code.tokens.json +++ /dev/null @@ -1,43 +0,0 @@ -{ - "code": { - "font": { - "size": { "value": "87.5%", "themeable": true, "source": "$code-font-size" } - }, - "color": { "value": "#E83E8C", "themeable": true, "source": "$code-color" }, - "kbd": { - "font": { - "size": { "value": "{code.font.size.value}", "themeable": true, "source": "$kbd-font-size" } - }, - "box": { - "shadow": { - "value": "inset 0 -.1rem 0 rgba({color.black.value}, .25)", - "themeable": true, - "source": "$kbd-box-shadow" - } - }, - "nested": { - "font": { - "weight": { - "value": "{font.weight.bold.value}", - "themeable": true, - "source": "$nested-kbd-font-weight" - } - } - }, - "padding": { - "y": { "value": ".2rem", "themeable": true, "source": "$kbd-padding-y" }, - "x": { "value": ".4rem", "themeable": true, "source": "$kbd-padding-x" } - }, - "color": { "value": "{color.white.value}", "themeable": true, "source": "$kbd-color" }, - "bg": { "value": "{color.gray.700.value}", "themeable": true, "source": "$kbd-bg" } - }, - "pre": { - "color": { "value": "{color.gray.900.value}", "themeable": true, "source": "$pre-color" }, - "scrollable": { - "max": { - "height": { "value": "340px", "themeable": true, "source": "$pre-scrollable-max-height" } - } - } - } - } -} diff --git a/tokens/source/core/core.tokens.json b/tokens/source/core/core.tokens.json index c87f5cc8c1..171f43bb0f 100644 --- a/tokens/source/core/core.tokens.json +++ b/tokens/source/core/core.tokens.json @@ -16,7 +16,7 @@ } }, "font": { - "family": { "value": "null", "themeable": true, "source": "$input-btn-font-family" }, + "family": { "value": "inherit", "themeable": true, "source": "$input-btn-font-family" }, "size": { "base": { "value": "1.125rem", "themeable": true, "source": "$input-btn-font-size" }, "sm": { "value": ".875rem", "themeable": true, "source": "$input-btn-font-size-sm" }, @@ -45,6 +45,34 @@ "width": { "value": "{border.width.value}", "themeable": true, "source": "$input-btn-border-width" } } } + }, + "blockquote": { + "small": { + "font": { + "size": { + "value": "{font.size.small.base.value}", "themeable": true, "source": "$blockquote-small-font-size" + } + } + }, + "font": { + "size": { + "value": "calc({font.size.base.value} * 1.25)", "themeable": true, "source": "$blockquote-font-size" + } + } + }, + "mark": { + "padding": { "value": ".2em", "themeable": true, "source": "$mark-padding" }, + "bg": { "value": "#FFF243", "themeable": true, "source": "$mark-bg" } + }, + "dt": { + "font": { + "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$dt-font-weight" } + } + }, + "list": { + "inline": { + "padding": { "value": ".5rem", "themeable": true, "source": "$list-inline-padding" } + } } } } diff --git a/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json b/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json index 4261242f14..236f2f665e 100644 --- a/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json +++ b/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json @@ -27,9 +27,9 @@ "source": "$level-5-box-shadow" } }, - "base": { "value": "0 .125rem .25rem rgba({color.black.value}, .3)", "themeable": true, "source": "$box-shadow" }, - "sm": { "value": "0 .0625rem .125rem rgba({color.black.value}, .2)", "themeable": true, "source": "$box-shadow-sm" }, - "lg": { "value": "0 .25rem .5rem rgba({color.black.value}, .3)", "themeable": true, "source": "$box-shadow-lg" }, + "base": { "value": "0 .125rem .25rem rgba(0, 0, 0, .3)", "themeable": true, "source": "$box-shadow" }, + "sm": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", "themeable": true, "source": "$box-shadow-sm" }, + "lg": { "value": "0 .25rem .5rem rgba(0, 0, 0, .3)", "themeable": true, "source": "$box-shadow-lg" }, "down": { "1": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)", diff --git a/tokens/source/layout/list-group/list-group.tokens.json b/tokens/source/layout/list-group/list-group.tokens.json new file mode 100644 index 0000000000..1b140af3f6 --- /dev/null +++ b/tokens/source/layout/list-group/list-group.tokens.json @@ -0,0 +1,51 @@ +{ + "list-group": { + "color": { "value": "null", "themeable": true, "source": "$list-group-color" }, + "bg": { + "base": { "value": "{color.white.value}", "themeable": true, "source": "$list-group-bg" }, + "hover": { "value": "{color.gray.100.value}", "themeable": true, "source": "$list-group-hover-bg" } + }, + "border": { + "color": { "value": "rgba({color.black.value}, .125)", "themeable": true, "source": "$list-group-border-color" }, + "width": { "value": "{border.width.value}", "themeable": true, "source": "$list-group-border-width" }, + "radius": { "value": "{border.radius.base.value}", "themeable": true, "source": "$list-group-border-radius" } + }, + "item": { + "padding": { + "y": { "value": ".75rem", "themeable": true, "source": "$list-group-item-padding-y" }, + "x": { "value": "1.25rem", "themeable": true, "source": "$list-group-item-padding-x" } + } + }, + "active": { + "color": { + "base": { + "value": "{component.active.color.value}", "themeable": true, "source": "$list-group-active-color" + }, + "border": { + "value": "{list-group.active.bg.value}", + "themeable": true, + "source": "$list-group-active-border-color" + } + }, + "bg": { "value": "{component.active.bg.value}", "themeable": true, "source": "$list-group-active-bg" } + }, + "disabled": { + "color": { "value": "{color.gray.600.value}", "themeable": true, "source": "$list-group-disabled-color" }, + "bg": { "value": "{list-group.bg.base.value}", "themeable": true, "source": "$list-group-disabled-bg" } + }, + "action": { + "color": { + "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$list-group-action-color" }, + "hover": { + "value": "{list-group.action.color.base.value}", + "themeable": true, + "source": "$list-group-action-hover-color" + } + }, + "active": { + "color": { "value": "{body.color.value}", "themeable": true, "source": "$list-group-action-active-color" }, + "bg": { "value": "{color.gray.200.value}", "themeable": true, "source": "$list-group-action-active-bg" } + } + } + } +} diff --git a/tokens/source/layout/table/table.tokens.json b/tokens/source/layout/table/table.tokens.json deleted file mode 100644 index 0e2b75d562..0000000000 --- a/tokens/source/layout/table/table.tokens.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "table": { - "cell": { - "padding": { - "base": { "value": ".75rem", "themeable": true, "source": "$table-cell-padding" }, - "sm": { "value": ".3rem", "themeable": true, "source": "$table-cell-padding-sm" } - } - }, - "color": { - "caption": { "value": "{text.muted.value}", "themeable": true, "source": "$table-caption-color" }, - "border": { "value": "{border.color.value}", "themeable": true, "source": "$table-border-color" } - }, - "th": { - "font": { - "weight": { "value": "null", "themeable": true, "source": "$table-th-font-weight" } - } - } - } -} diff --git a/tokens/source/links/links.tokens.json b/tokens/source/links/links.tokens.json index 9aa3474e8c..91f196734c 100644 --- a/tokens/source/links/links.tokens.json +++ b/tokens/source/links/links.tokens.json @@ -63,6 +63,13 @@ "decoration-color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-decoration-color" } } } + }, + "emphasized": { + "hover": { + "darken": { + "percentage": { "value": "15%", "themeable": true, "source": "$emphasized-link-hover-darken-percentage" } + } + } } } } diff --git a/tokens/source/typography/font/font.tokens.json b/tokens/source/typography/font/font.tokens.json index f207f2f126..124f53fdcb 100644 --- a/tokens/source/typography/font/font.tokens.json +++ b/tokens/source/typography/font/font.tokens.json @@ -1,6 +1,7 @@ { "font": { "family": { + "base": { "value": "{font.family.sans.serif.value}", "themeable": true, "source": "$font-family-base" }, "sans": { "serif": { "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\",\n Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", @@ -13,8 +14,7 @@ "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace", "themeable": true, "source": "$font-family-monospace" - }, - "base": { "value": "{font.family.sans.serif.value}", "themeable": true, "source": "$font-family-base" } + } }, "size": { "base": { "value": "1.125rem", "themeable": true, "source": "$font-size-base" }, @@ -38,7 +38,8 @@ "h4": { "value": "{font.size.h4.value}", "themeable": true, "source": "$h4-mobile-font-size" }, "h5": { "value": "{font.size.h5.value}", "themeable": true, "source": "$h5-mobile-font-size" }, "h6": { "value": "{font.size.h6.value}", "themeable": true, "source": "$h6-mobile-font-size" } - } + }, + "lead": { "value": "calc({font.size.base.value} * 1.25)", "themeable": true, "source": "$lead-font-size" } }, "weight": { "lighter": { "value": "lighter", "themeable": true, "source": "$font-weight-lighter" }, @@ -49,7 +50,8 @@ }, "bold": { "value": "700", "themeable": true, "source": "$font-weight-bold" }, "bolder": { "value": "bolder", "themeable": true, "source": "$font-weight-bolder" }, - "base": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$font-weight-base" } + "base": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$font-weight-base" }, + "lead": { "value": "null", "themeable": true, "source": "$lead-font-weight" } } } } diff --git a/tokens/source/www/zindex/zindex.tokens.json b/tokens/source/www/zindex/zindex.tokens.json new file mode 100644 index 0000000000..0416ae83df --- /dev/null +++ b/tokens/source/www/zindex/zindex.tokens.json @@ -0,0 +1,8 @@ +{ + "www-zindex": { + "header": { "value": "2500", "themeable": true, "source": "$pgn-www-zindex-header" }, + "sheet": { "value": "2502", "themeable": true, "source": "$pgn-www-zindex-sheet" }, + "sheet-backdrop": { "value": "2501", "themeable": true, "source": "$pgn-www-zindex-sheet-backdrop" }, + "modal": { "value": "2503", "themeable": true, "source": "$pgn-www-zindex-modal" } + } +} diff --git a/www/src/components/Header.scss b/www/src/components/Header.scss index a4ff80fbfc..a4bbd18fde 100644 --- a/www/src/components/Header.scss +++ b/www/src/components/Header.scss @@ -1,3 +1,3 @@ .pgn-doc-header { - z-index: $zindex-header; + z-index: $pgn-www-zindex-header; } diff --git a/www/src/scss/_variables.scss b/www/src/scss/_variables.scss index 70e92c2f39..23ed88ad39 100644 --- a/www/src/scss/_variables.scss +++ b/www/src/scss/_variables.scss @@ -1,4 +1,4 @@ -$zindex-header: 2500; -$zindex-sheet-backdrop: 2501; -$zindex-sheet: 2502; -$zindex-modal: 2503; +$pgn-www-zindex-header: 2500; +$pgn-www-zindex-sheet-backdrop: 2501; +$pgn-www-zindex-sheet: 2502; +$pgn-www-zindex-modal: 2503; From 7c9ad6ee314af9109f91bbf817a9f08a2fb1c883 Mon Sep 17 00:00:00 2001 From: monteri <36768631+monteri@users.noreply.github.com> Date: Fri, 30 Sep 2022 14:46:59 +0300 Subject: [PATCH 07/19] feat: add initial documentation (#1623) Co-authored-by: vzadorozhnii --- README.md | 18 +++ www/src/components/Menu.tsx | 3 + www/src/pages/foundations/design-tokens.mdx | 124 ++++++++++++++++++++ 3 files changed, 145 insertions(+) create mode 100644 www/src/pages/foundations/design-tokens.mdx diff --git a/README.md b/README.md index f4e5c15200..050476a3d7 100644 --- a/README.md +++ b/README.md @@ -433,3 +433,21 @@ BREAKING CHANGE: The graphiteWidth option has been removed. The default graphite Paragon is distributed on npm as ES6 modules. This means that webpack can use treeshaking on any Paragon components that a consuming app is not using, resulting in greatly reduced bundle sizes. To get treeshaking to work, your app may require some updates - most notably, Babel 7. See this PR for an example of the changes necessary to update an app to take advantage of treeshaking with Paragon: https://github.com/openedx/frontend-app-payment/pull/48 + +## Design Tokens + +Design tokens are all the values needed to build and maintain a design system — spacing, color, typography, object styles, etc. They can represent anything defined by the design: color as an RGB value, opacity as a number, spacing as a REM value. They are used instead of hard-coded values to provide flexibility and uniformity across the application. + +### Design Tokens in Paragon + +Folder `tokens` in the project root contains split by categories `json` files. They consist of `JSON` objects that store information about the variable name and its value. Scripts that also reside in the `tokens` folder provide following facilities: build tokens into `css`, `scss` variables, map `scss` to `css` variables and replace old `scss` to new `css` variables. + +### Usage + +``` +cd tokens +npm install +npm run build-tokens # creates "build" folder with scss and css variables based on json tokens +npm run build-scss-to-css-map # creats scss-to-css-core.json and scss-to-css-components.json +npm run replace-variables -- --path ../src # this will replace all scss variables in the project with the new css variables based on the "scss-to-css-core.json" and "scss-to-css-components.json" files +``` diff --git a/www/src/components/Menu.tsx b/www/src/components/Menu.tsx index 6437f125f2..0c0b37f521 100644 --- a/www/src/components/Menu.tsx +++ b/www/src/components/Menu.tsx @@ -174,6 +174,9 @@ const Menu = () => {
  • Colors
    • +
  • + Design Tokens +
  • Elevation
    • diff --git a/www/src/pages/foundations/design-tokens.mdx b/www/src/pages/foundations/design-tokens.mdx new file mode 100644 index 0000000000..1f47260db4 --- /dev/null +++ b/www/src/pages/foundations/design-tokens.mdx @@ -0,0 +1,124 @@ +--- +title: Design Tokens +--- + +# Design Tokens + +Design tokens are names used to express design decisions in your organisation's design language. Design decisions can be a color, a typeface, a border radius, an icon, a font size, a gradient or even an animation duration. + +## Description + +In Paragon Design Tokens are represented as variables in `JSON` format organized by the categories. + +Example: + +``` +# color.tokens.json +{ + "color": { + "white": { "value": "#FFFFFF", "themeable": true, "source": "$white" }, + "black": { "value": "#000000", "themeable": true, "source": "$black" }, + "blue": { "value": "#23419F", "themeable": true, "source": "$blue" }, + ... + }, +} +# breakpoints.tokens.json +{ + "breakpoint": { + "xs": { "value": "0", "themeable": true }, + "sm": { "value": "576px", "themeable": true }, + "md": { "value": "768px", "themeable": true }, + "lg": { "value": "992px", "themeable": true }, + "xl": { "value": "1200px", "themeable": true }, + "xxl": { "value": "1400px", "themeable": true } + }, +} +``` + +They can be transformed into required format like `css`, `scss` to use in the application code. + +Example: + +``` +# original json +{ + "color": { + "white": { "value": "#FFFFFF", "themeable": true, "source": "$white" }, + ... + }, +} +# scss +$pgn-color-white: #FFFFFF !default; +# css +--pgn-color-white: #FFFFFF; +``` + +``` +# original json +{ + "breakpoint": { + ... + "md": { "value": "768px", "themeable": true }, + "lg": { "value": "992px", "themeable": true }, + ... + }, +} +# scss +$pgn-breakpoint-md: 768px !default; +$pgn-breakpoint-lg: 992px !default; +# css +--pgn-breakpoint-md: 768px; +--pgn-breakpoint-lg: 992px; +``` + +## Design token types + +All tokens can be of two types: general (global) and specific (component) tokens. + +### Global tokens + +Color palette, elevation levels, typography, and dimension values are all global tokens. These can be directly used, and are inherited by component-specific tokens. + +Example: + +``` +"color": { + ... + "black": { "value": "#000000", "themeable": true, "source": "$black" }, + ... + "gray": { + "100": { "value": "#EBEBEB", "themeable": true, "source": "$gray-100" }, + "200": { "value": "#CCCCCC", "themeable": true, "source": "$gray-200" }, + "300": { "value": "#ADADAD", "themeable": true, "source": "$gray-300" }, + "400": { "value": "#8F8F8F", "themeable": true, "source": "$gray-400" }, + "500": { "value": "#707070", "themeable": true, "source": "$gray-500" }, + "600": { "value": "#5C5C5C", "themeable": true, "source": "$gray-600" }, + "700": { "value": "#454545", "themeable": true, "source": "$gray-700" }, + }, + ... +} +``` + +### Component-specific tokens + +Component-specific tokens are a comprehensive representation of each value associated with a component. They are often inherited from global tokens, but are named so that engineering teams can apply the tokens as accurately as possible when developing components. + +Example: + +``` +"alert": { + "color": { + "title": { + "value": "{color.black.value}", + "themeable": true, + "source": "$alert-title-color" + }, + "content": { + "value": "{color.gray.700.value}", + "themeable": true, + "source": "$alert-content-color" + } + }, + ... +}, +``` From 23573eacbd6a524f607b8f915c0e3d421a321df5 Mon Sep 17 00:00:00 2001 From: Viktor Rusakov Date: Wed, 12 Oct 2022 09:13:44 +0300 Subject: [PATCH 08/19] chore: remove variables related to www project from design tokens --- scss/core/tokens.css | 4 ---- src/Modal/Modal.scss | 2 +- src/Sheet/Sheet.scss | 4 ++-- tokens/build/_variables.scss | 4 ---- tokens/build/scss-to-css-core.json | 2 +- tokens/build/variables.css | 4 ---- tokens/source/www/zindex/zindex.tokens.json | 8 -------- www/src/components/Header.scss | 2 +- www/src/scss/_variables.scss | 4 ---- www/src/scss/base.scss | 7 +++++++ www/src/scss/edxorg-theme.scss | 1 - www/src/scss/openedx-theme.scss | 1 - 12 files changed, 12 insertions(+), 31 deletions(-) delete mode 100644 tokens/source/www/zindex/zindex.tokens.json delete mode 100644 www/src/scss/_variables.scss diff --git a/scss/core/tokens.css b/scss/core/tokens.css index 80cfaab7c9..0d2ef0deaf 100644 --- a/scss/core/tokens.css +++ b/scss/core/tokens.css @@ -1,8 +1,4 @@ :root { - --pgn-www-zindex-modal: 2503; - --pgn-www-zindex-sheet-backdrop: 2501; - --pgn-www-zindex-sheet: 2502; - --pgn-www-zindex-header: 2500; --pgn-paragraph-margin-bottom: 1rem; --pgn-line-height-sm: 1.5; --pgn-line-height-lg: 1.5; diff --git a/src/Modal/Modal.scss b/src/Modal/Modal.scss index 38e0b41018..cb37764ea5 100644 --- a/src/Modal/Modal.scss +++ b/src/Modal/Modal.scss @@ -13,7 +13,7 @@ position: fixed; top: 0; width: 100vw; - z-index: var(--pgn-www-zindex-modal); + z-index: var(--pgn-zindex-modal); -webkit-overflow-scrolling: touch; } diff --git a/src/Sheet/Sheet.scss b/src/Sheet/Sheet.scss index 4d2b3d9c8e..8885375a05 100644 --- a/src/Sheet/Sheet.scss +++ b/src/Sheet/Sheet.scss @@ -10,7 +10,7 @@ display: none; } - z-index: var(--pgn-www-zindex-sheet-backdrop); + z-index: var(--pgn-zindex-sheet-backdrop); } %component-left { @@ -35,7 +35,7 @@ position: fixed; padding: 1.25rem; background-color: white; - z-index: var(--pgn-www-zindex-sheet); + z-index: var(--pgn-zindex-sheet); &.pgn__sheet__dark { background-color: var(--pgn-color-dark-500); diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss index 931fa58fbb..7539956915 100644 --- a/tokens/build/_variables.scss +++ b/tokens/build/_variables.scss @@ -1,7 +1,3 @@ -$pgn-www-zindex-modal: 2503 !default; -$pgn-www-zindex-sheet-backdrop: 2501 !default; -$pgn-www-zindex-sheet: 2502 !default; -$pgn-www-zindex-header: 2500 !default; $pgn-paragraph-margin-bottom: 1rem !default; $pgn-line-height-sm: 1.5 !default; $pgn-line-height-lg: 1.5 !default; diff --git a/tokens/build/scss-to-css-core.json b/tokens/build/scss-to-css-core.json index 6640f39936..c247ecae6c 100644 --- a/tokens/build/scss-to-css-core.json +++ b/tokens/build/scss-to-css-core.json @@ -1 +1 @@ -{"$border-width":"--pgn-border-width","$border-color":"--pgn-border-color","$border-radius":"--pgn-border-radius-base","$border-radius-lg":"--pgn-border-radius-lg","$border-radius-sm":"--pgn-border-radius-sm","$hr-border-color":"--pgn-border-hr-color","$hr-border-width":"--pgn-border-hr-width","$hr-margin-y":"--pgn-border-hr-margin-y","$caret-width":"--pgn-caret-width","$caret-vertical-align":"--pgn-caret-vertical-align","$caret-spacing":"--pgn-caret-spacing","$body-bg":"--pgn-body-bg","$body-color":"--pgn-body-color","$white":"--pgn-color-white","$black":"--pgn-color-black","$blue":"--pgn-color-blue","$red":"--pgn-color-red","$green":"--pgn-color-green","$yellow":"--pgn-color-yellow","$teal":"--pgn-color-teal","$accent-a":"--pgn-color-accent-a","$accent-b":"--pgn-color-accent-b","$theme-color-interval":"--pgn-color-theme-interval","$gray-100":"--pgn-color-gray-100","$gray-200":"--pgn-color-gray-200","$gray-300":"--pgn-color-gray-300","$gray-400":"--pgn-color-gray-400","$gray-500":"--pgn-color-gray-500","$gray-600":"--pgn-color-gray-600","$gray-700":"--pgn-color-gray-700","$gray-800":"--pgn-color-gray-800","$gray-900":"--pgn-color-gray-900","$gray":"--pgn-color-gray-base","$primary-100":"--pgn-color-primary-100","$primary-200":"--pgn-color-primary-200","$primary-300":"--pgn-color-primary-300","$primary-400":"--pgn-color-primary-400","$primary-500":"--pgn-color-primary-500","$primary-600":"--pgn-color-primary-600","$primary-700":"--pgn-color-primary-700","$primary-800":"--pgn-color-primary-800","$primary-900":"--pgn-color-primary-900","$primary":"--pgn-color-primary-base","$secondary-100":"--pgn-color-secondary-100","$secondary-200":"--pgn-color-secondary-200","$secondary-300":"--pgn-color-secondary-300","$secondary-400":"--pgn-color-secondary-400","$secondary-500":"--pgn-color-secondary-500","$secondary-600":"--pgn-color-secondary-600","$secondary-700":"--pgn-color-secondary-700","$secondary-800":"--pgn-color-secondary-800","$secondary-900":"--pgn-color-secondary-900","$secondary":"--pgn-color-secondary-base","$brand-100":"--pgn-color-brand-100","$brand-200":"--pgn-color-brand-200","$brand-300":"--pgn-color-brand-300","$brand-400":"--pgn-color-brand-400","$brand-500":"--pgn-color-brand-500","$brand-600":"--pgn-color-brand-600","$brand-700":"--pgn-color-brand-700","$brand-800":"--pgn-color-brand-800","$brand-900":"--pgn-color-brand-900","$brand":"--pgn-color-brand-base","$success-100":"--pgn-color-success-100","$success-200":"--pgn-color-success-200","$success-300":"--pgn-color-success-300","$success-400":"--pgn-color-success-400","$success-500":"--pgn-color-success-500","$success-600":"--pgn-color-success-600","$success-700":"--pgn-color-success-700","$success-800":"--pgn-color-success-800","$success-900":"--pgn-color-success-900","$success":"--pgn-color-success-base","$info-100":"--pgn-color-info-100","$info-200":"--pgn-color-info-200","$info-300":"--pgn-color-info-300","$info-400":"--pgn-color-info-400","$info-500":"--pgn-color-info-500","$info-600":"--pgn-color-info-600","$info-700":"--pgn-color-info-700","$info-800":"--pgn-color-info-800","$info-900":"--pgn-color-info-900","$info":"--pgn-color-info-base","$warning-100":"--pgn-color-warning-100","$warning-200":"--pgn-color-warning-200","$warning-300":"--pgn-color-warning-300","$warning-400":"--pgn-color-warning-400","$warning-500":"--pgn-color-warning-500","$warning-600":"--pgn-color-warning-600","$warning-700":"--pgn-color-warning-700","$warning-800":"--pgn-color-warning-800","$warning-900":"--pgn-color-warning-900","$warning":"--pgn-color-warning-base","$danger-100":"--pgn-color-danger-100","$danger-200":"--pgn-color-danger-200","$danger-300":"--pgn-color-danger-300","$danger-400":"--pgn-color-danger-400","$danger-500":"--pgn-color-danger-500","$danger-600":"--pgn-color-danger-600","$danger-700":"--pgn-color-danger-700","$danger-800":"--pgn-color-danger-800","$danger-900":"--pgn-color-danger-900","$danger":"--pgn-color-danger-base","$light-100":"--pgn-color-light-100","$light-200":"--pgn-color-light-200","$light-300":"--pgn-color-light-300","$light-400":"--pgn-color-light-400","$light-500":"--pgn-color-light-500","$light-600":"--pgn-color-light-600","$light-700":"--pgn-color-light-700","$light-800":"--pgn-color-light-800","$light-900":"--pgn-color-light-900","$light":"--pgn-color-light-base","$dark-100":"--pgn-color-dark-100","$dark-200":"--pgn-color-dark-200","$dark-300":"--pgn-color-dark-300","$dark-400":"--pgn-color-dark-400","$dark-500":"--pgn-color-dark-500","$dark-600":"--pgn-color-dark-600","$dark-700":"--pgn-color-dark-700","$dark-800":"--pgn-color-dark-800","$dark-900":"--pgn-color-dark-900","$dark":"--pgn-color-dark-base","$component-active-color":"--pgn-component-active-color","$component-active-bg":"--pgn-component-active-bg","$text-muted":"--pgn-text-muted","$spacer":"--pgn-core-spacer","$input-btn-padding-y":"--pgn-core-input-btn-padding-y","$input-btn-padding-x":"--pgn-core-input-btn-padding-x","$input-btn-padding-y-sm":"--pgn-core-input-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-core-input-btn-padding-sm-x","$input-btn-padding-y-lg":"--pgn-core-input-btn-padding-lg-y","$input-btn-padding-x-lg":"--pgn-core-input-btn-padding-lg-x","$input-btn-font-family":"--pgn-core-input-btn-font-family","$input-btn-font-size":"--pgn-core-input-btn-font-size-base","$input-btn-font-size-sm":"--pgn-core-input-btn-font-size-sm","$input-btn-font-size-lg":"--pgn-core-input-btn-font-size-lg","$input-btn-line-height":"--pgn-core-input-btn-line-height-base","$input-btn-line-height-sm":"--pgn-core-input-btn-line-height-sm","$input-btn-line-height-lg":"--pgn-core-input-btn-line-height-lg","$input-btn-focus-width":"--pgn-core-input-btn-focus-width","$input-btn-focus-color":"--pgn-core-input-btn-focus-color","$input-btn-focus-box-shadow":"--pgn-core-input-btn-focus-box-shadow","$input-btn-border-width":"--pgn-core-input-btn-border-width","$blockquote-small-font-size":"--pgn-core-blockquote-small-font-size","$blockquote-font-size":"--pgn-core-blockquote-font-size","$mark-padding":"--pgn-core-mark-padding","$mark-bg":"--pgn-core-mark-bg","$dt-font-weight":"--pgn-core-dt-font-weight","$list-inline-padding":"--pgn-core-list-inline-padding","$level-1-box-shadow":"--pgn-box-shadow-level-1","$level-2-box-shadow":"--pgn-box-shadow-level-2","$level-3-box-shadow":"--pgn-box-shadow-level-3","$level-4-box-shadow":"--pgn-box-shadow-level-4","$level-5-box-shadow":"--pgn-box-shadow-level-5","$box-shadow":"--pgn-box-shadow-base","$box-shadow-sm":"--pgn-box-shadow-sm","$box-shadow-lg":"--pgn-box-shadow-lg","$box-shadow-down-1":"--pgn-box-shadow-down-1","$box-shadow-down-2":"--pgn-box-shadow-down-2","$box-shadow-down-3":"--pgn-box-shadow-down-3","$box-shadow-down-4":"--pgn-box-shadow-down-4","$box-shadow-down-5":"--pgn-box-shadow-down-5","$box-shadow-left-1":"--pgn-box-shadow-left-1","$box-shadow-left-2":"--pgn-box-shadow-left-2","$box-shadow-left-3":"--pgn-box-shadow-left-3","$box-shadow-left-4":"--pgn-box-shadow-left-4","$box-shadow-left-5":"--pgn-box-shadow-left-5","$box-shadow-up-1":"--pgn-box-shadow-up-1","$box-shadow-up-2":"--pgn-box-shadow-up-2","$box-shadow-up-3":"--pgn-box-shadow-up-3","$box-shadow-up-4":"--pgn-box-shadow-up-4","$box-shadow-up-5":"--pgn-box-shadow-up-5","$box-shadow-right-1":"--pgn-box-shadow-right-1","$box-shadow-right-2":"--pgn-box-shadow-right-2","$box-shadow-right-3":"--pgn-box-shadow-right-3","$box-shadow-right-4":"--pgn-box-shadow-right-4","$box-shadow-right-5":"--pgn-box-shadow-right-5","$box-shadow-centered-1":"--pgn-box-shadow-centered-1","$box-shadow-centered-2":"--pgn-box-shadow-centered-2","$box-shadow-centered-3":"--pgn-box-shadow-centered-3","$box-shadow-centered-4":"--pgn-box-shadow-centered-4","$box-shadow-centered-5":"--pgn-box-shadow-centered-5","$grid-columns":"--pgn-grid-columns","$grid-gutter-width":"--pgn-grid-gutter-width","$grid-row-columns":"--pgn-grid-row-columns","$list-group-color":"--pgn-list-group-color","$list-group-bg":"--pgn-list-group-bg-base","$list-group-hover-bg":"--pgn-list-group-bg-hover","$list-group-border-color":"--pgn-list-group-border-color","$list-group-border-width":"--pgn-list-group-border-width","$list-group-border-radius":"--pgn-list-group-border-radius","$list-group-item-padding-y":"--pgn-list-group-item-padding-y","$list-group-item-padding-x":"--pgn-list-group-item-padding-x","$list-group-active-color":"--pgn-list-group-active-color-base","$list-group-active-border-color":"--pgn-list-group-active-color-border","$list-group-active-bg":"--pgn-list-group-active-bg","$list-group-disabled-color":"--pgn-list-group-disabled-color","$list-group-disabled-bg":"--pgn-list-group-disabled-bg","$list-group-action-color":"--pgn-list-group-action-color-base","$list-group-action-hover-color":"--pgn-list-group-action-color-hover","$list-group-action-active-color":"--pgn-list-group-action-active-color","$list-group-action-active-bg":"--pgn-list-group-action-active-bg","$zindex-dropdown":"--pgn-zindex-dropdown","$zindex-sticky":"--pgn-zindex-sticky","$zindex-fixed":"--pgn-zindex-fixed","$zindex-sheet-backdrop":"--pgn-zindex-sheet-backdrop","$zindex-sheet":"--pgn-zindex-sheet","$zindex-modal-backdrop":"--pgn-zindex-modal-backdrop","$zindex-modal":"--pgn-zindex-modal","$zindex-popover":"--pgn-zindex-popover","$zindex-tooltip":"--pgn-zindex-tooltip","$link-color":"--pgn-link-color","$link-decoration":"--pgn-link-decoration","$link-hover-color":"--pgn-link-hover-color","$link-hover-decoration":"--pgn-link-hover-decoration","$inline-link-color":"--pgn-link-brand-inline-color","$inline-link-decoration":"--pgn-link-brand-inline-decoration","$inline-link-decoration-color":"--pgn-link-brand-inline-decoration-color","$inline-link-hover-color":"--pgn-link-brand-inline-hover-color","$inline-link-hover-decoration":"--pgn-link-brand-inline-hover-decoration","$inline-link-hover-decoration-color":"--pgn-link-brand-inline-hover-decoration-color","$muted-link-color":"--pgn-link-muted-color","$muted-link-decoration":"--pgn-link-muted-decoration","$muted-link-hover-color":"--pgn-link-muted-hover-color","$muted-link-hover-decoration":"--pgn-link-muted-hover-decoration","$muted-inline-link-color":"--pgn-link-muted-inline-color","$muted-inline-link-decoration":"--pgn-link-muted-inline-decoration","$muted-inline-link-decoration-color":"--pgn-link-muted-inline-decoration-color","$muted-inline-link-hover-color":"--pgn-link-muted-inline-hover-color","$muted-inline-link-hover-decoration":"--pgn-link-muted-inline-hover-decoration","$muted-inline-link-hover-decoration-color":"--pgn-link-muted-inline-hover-decoration-color","$brand-link-color":"--pgn-link-brand-color","$brand-link-decoration":"--pgn-link-brand-decoration","$brand-link-hover-color":"--pgn-link-brand-hover-color","$brand-link-hover-decoration":"--pgn-link-brand-hover-decoration","$emphasized-link-hover-darken-percentage":"--pgn-link-emphasized-hover-darken-percentage","$transition-base":"--pgn-transition-base","$transition-fade":"--pgn-transition-fade","$transition-collapse":"--pgn-transition-collapse","$display1-size":"--pgn-display-size-1","$display2-size":"--pgn-display-size-2","$display3-size":"--pgn-display-size-3","$display4-size":"--pgn-display-size-4","$display-mobile-size":"--pgn-display-size-mobile","$display1-weight":"--pgn-display-weight-1","$display2-weight":"--pgn-display-weight-2","$display3-weight":"--pgn-display-weight-3","$display4-weight":"--pgn-display-weight-4","$display-line-height":"--pgn-display-line-height-base","$display-mobile-line-height":"--pgn-display-line-height-mobile","$font-family-base":"--pgn-font-family-base","$font-family-sans-serif":"--pgn-font-family-sans-serif","$font-family-serif":"--pgn-font-family-serif","$font-family-monospace":"--pgn-font-family-monospace","$font-size-base":"--pgn-font-size-base","$font-size-lg":"--pgn-font-size-lg","$font-size-sm":"--pgn-font-size-sm","$font-size-xs":"--pgn-font-size-xs","$small-font-size":"--pgn-font-size-small-base","$x-small-font-size":"--pgn-font-size-small-x","$h1-font-size":"--pgn-font-size-h1","$h2-font-size":"--pgn-font-size-h2","$h3-font-size":"--pgn-font-size-h3","$h4-font-size":"--pgn-font-size-h4","$h5-font-size":"--pgn-font-size-h5","$h6-font-size":"--pgn-font-size-h6","$h1-mobile-font-size":"--pgn-font-size-mobile-h1","$h2-mobile-font-size":"--pgn-font-size-mobile-h2","$h3-mobile-font-size":"--pgn-font-size-mobile-h3","$h4-mobile-font-size":"--pgn-font-size-mobile-h4","$h5-mobile-font-size":"--pgn-font-size-mobile-h5","$h6-mobile-font-size":"--pgn-font-size-mobile-h6","$lead-font-size":"--pgn-font-size-lead","$font-weight-lighter":"--pgn-font-weight-lighter","$font-weight-light":"--pgn-font-weight-light","$font-weight-normal":"--pgn-font-weight-normal","$font-weight-semi-bold":"--pgn-font-weight-semi-bold","$font-weight-bold":"--pgn-font-weight-bold","$font-weight-bolder":"--pgn-font-weight-bolder","$font-weight-base":"--pgn-font-weight-base","$lead-font-weight":"--pgn-font-weight-lead","$headings-margin-bottom":"--pgn-headings-margin-bottom","$headings-font-family":"--pgn-headings-font-family","$headings-font-weight":"--pgn-headings-font-weight","$headings-line-height":"--pgn-headings-line-height","$headings-color":"--pgn-headings-color","$line-height-base":"--pgn-line-height-base","$line-height-lg":"--pgn-line-height-lg","$line-height-sm":"--pgn-line-height-sm","$paragraph-margin-bottom":"--pgn-paragraph-margin-bottom","$pgn-www-zindex-header":"--pgn-www-zindex-header","$pgn-www-zindex-sheet":"--pgn-www-zindex-sheet","$pgn-www-zindex-sheet-backdrop":"--pgn-www-zindex-sheet-backdrop","$pgn-www-zindex-modal":"--pgn-www-zindex-modal"} \ No newline at end of file +{"$border-width":"--pgn-border-width","$border-color":"--pgn-border-color","$border-radius":"--pgn-border-radius-base","$border-radius-lg":"--pgn-border-radius-lg","$border-radius-sm":"--pgn-border-radius-sm","$hr-border-color":"--pgn-border-hr-color","$hr-border-width":"--pgn-border-hr-width","$hr-margin-y":"--pgn-border-hr-margin-y","$caret-width":"--pgn-caret-width","$caret-vertical-align":"--pgn-caret-vertical-align","$caret-spacing":"--pgn-caret-spacing","$body-bg":"--pgn-body-bg","$body-color":"--pgn-body-color","$white":"--pgn-color-white","$black":"--pgn-color-black","$blue":"--pgn-color-blue","$red":"--pgn-color-red","$green":"--pgn-color-green","$yellow":"--pgn-color-yellow","$teal":"--pgn-color-teal","$accent-a":"--pgn-color-accent-a","$accent-b":"--pgn-color-accent-b","$theme-color-interval":"--pgn-color-theme-interval","$gray-100":"--pgn-color-gray-100","$gray-200":"--pgn-color-gray-200","$gray-300":"--pgn-color-gray-300","$gray-400":"--pgn-color-gray-400","$gray-500":"--pgn-color-gray-500","$gray-600":"--pgn-color-gray-600","$gray-700":"--pgn-color-gray-700","$gray-800":"--pgn-color-gray-800","$gray-900":"--pgn-color-gray-900","$gray":"--pgn-color-gray-base","$primary-100":"--pgn-color-primary-100","$primary-200":"--pgn-color-primary-200","$primary-300":"--pgn-color-primary-300","$primary-400":"--pgn-color-primary-400","$primary-500":"--pgn-color-primary-500","$primary-600":"--pgn-color-primary-600","$primary-700":"--pgn-color-primary-700","$primary-800":"--pgn-color-primary-800","$primary-900":"--pgn-color-primary-900","$primary":"--pgn-color-primary-base","$secondary-100":"--pgn-color-secondary-100","$secondary-200":"--pgn-color-secondary-200","$secondary-300":"--pgn-color-secondary-300","$secondary-400":"--pgn-color-secondary-400","$secondary-500":"--pgn-color-secondary-500","$secondary-600":"--pgn-color-secondary-600","$secondary-700":"--pgn-color-secondary-700","$secondary-800":"--pgn-color-secondary-800","$secondary-900":"--pgn-color-secondary-900","$secondary":"--pgn-color-secondary-base","$brand-100":"--pgn-color-brand-100","$brand-200":"--pgn-color-brand-200","$brand-300":"--pgn-color-brand-300","$brand-400":"--pgn-color-brand-400","$brand-500":"--pgn-color-brand-500","$brand-600":"--pgn-color-brand-600","$brand-700":"--pgn-color-brand-700","$brand-800":"--pgn-color-brand-800","$brand-900":"--pgn-color-brand-900","$brand":"--pgn-color-brand-base","$success-100":"--pgn-color-success-100","$success-200":"--pgn-color-success-200","$success-300":"--pgn-color-success-300","$success-400":"--pgn-color-success-400","$success-500":"--pgn-color-success-500","$success-600":"--pgn-color-success-600","$success-700":"--pgn-color-success-700","$success-800":"--pgn-color-success-800","$success-900":"--pgn-color-success-900","$success":"--pgn-color-success-base","$info-100":"--pgn-color-info-100","$info-200":"--pgn-color-info-200","$info-300":"--pgn-color-info-300","$info-400":"--pgn-color-info-400","$info-500":"--pgn-color-info-500","$info-600":"--pgn-color-info-600","$info-700":"--pgn-color-info-700","$info-800":"--pgn-color-info-800","$info-900":"--pgn-color-info-900","$info":"--pgn-color-info-base","$warning-100":"--pgn-color-warning-100","$warning-200":"--pgn-color-warning-200","$warning-300":"--pgn-color-warning-300","$warning-400":"--pgn-color-warning-400","$warning-500":"--pgn-color-warning-500","$warning-600":"--pgn-color-warning-600","$warning-700":"--pgn-color-warning-700","$warning-800":"--pgn-color-warning-800","$warning-900":"--pgn-color-warning-900","$warning":"--pgn-color-warning-base","$danger-100":"--pgn-color-danger-100","$danger-200":"--pgn-color-danger-200","$danger-300":"--pgn-color-danger-300","$danger-400":"--pgn-color-danger-400","$danger-500":"--pgn-color-danger-500","$danger-600":"--pgn-color-danger-600","$danger-700":"--pgn-color-danger-700","$danger-800":"--pgn-color-danger-800","$danger-900":"--pgn-color-danger-900","$danger":"--pgn-color-danger-base","$light-100":"--pgn-color-light-100","$light-200":"--pgn-color-light-200","$light-300":"--pgn-color-light-300","$light-400":"--pgn-color-light-400","$light-500":"--pgn-color-light-500","$light-600":"--pgn-color-light-600","$light-700":"--pgn-color-light-700","$light-800":"--pgn-color-light-800","$light-900":"--pgn-color-light-900","$light":"--pgn-color-light-base","$dark-100":"--pgn-color-dark-100","$dark-200":"--pgn-color-dark-200","$dark-300":"--pgn-color-dark-300","$dark-400":"--pgn-color-dark-400","$dark-500":"--pgn-color-dark-500","$dark-600":"--pgn-color-dark-600","$dark-700":"--pgn-color-dark-700","$dark-800":"--pgn-color-dark-800","$dark-900":"--pgn-color-dark-900","$dark":"--pgn-color-dark-base","$component-active-color":"--pgn-component-active-color","$component-active-bg":"--pgn-component-active-bg","$text-muted":"--pgn-text-muted","$spacer":"--pgn-core-spacer","$input-btn-padding-y":"--pgn-core-input-btn-padding-y","$input-btn-padding-x":"--pgn-core-input-btn-padding-x","$input-btn-padding-y-sm":"--pgn-core-input-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-core-input-btn-padding-sm-x","$input-btn-padding-y-lg":"--pgn-core-input-btn-padding-lg-y","$input-btn-padding-x-lg":"--pgn-core-input-btn-padding-lg-x","$input-btn-font-family":"--pgn-core-input-btn-font-family","$input-btn-font-size":"--pgn-core-input-btn-font-size-base","$input-btn-font-size-sm":"--pgn-core-input-btn-font-size-sm","$input-btn-font-size-lg":"--pgn-core-input-btn-font-size-lg","$input-btn-line-height":"--pgn-core-input-btn-line-height-base","$input-btn-line-height-sm":"--pgn-core-input-btn-line-height-sm","$input-btn-line-height-lg":"--pgn-core-input-btn-line-height-lg","$input-btn-focus-width":"--pgn-core-input-btn-focus-width","$input-btn-focus-color":"--pgn-core-input-btn-focus-color","$input-btn-focus-box-shadow":"--pgn-core-input-btn-focus-box-shadow","$input-btn-border-width":"--pgn-core-input-btn-border-width","$blockquote-small-font-size":"--pgn-core-blockquote-small-font-size","$blockquote-font-size":"--pgn-core-blockquote-font-size","$mark-padding":"--pgn-core-mark-padding","$mark-bg":"--pgn-core-mark-bg","$dt-font-weight":"--pgn-core-dt-font-weight","$list-inline-padding":"--pgn-core-list-inline-padding","$level-1-box-shadow":"--pgn-box-shadow-level-1","$level-2-box-shadow":"--pgn-box-shadow-level-2","$level-3-box-shadow":"--pgn-box-shadow-level-3","$level-4-box-shadow":"--pgn-box-shadow-level-4","$level-5-box-shadow":"--pgn-box-shadow-level-5","$box-shadow":"--pgn-box-shadow-base","$box-shadow-sm":"--pgn-box-shadow-sm","$box-shadow-lg":"--pgn-box-shadow-lg","$box-shadow-down-1":"--pgn-box-shadow-down-1","$box-shadow-down-2":"--pgn-box-shadow-down-2","$box-shadow-down-3":"--pgn-box-shadow-down-3","$box-shadow-down-4":"--pgn-box-shadow-down-4","$box-shadow-down-5":"--pgn-box-shadow-down-5","$box-shadow-left-1":"--pgn-box-shadow-left-1","$box-shadow-left-2":"--pgn-box-shadow-left-2","$box-shadow-left-3":"--pgn-box-shadow-left-3","$box-shadow-left-4":"--pgn-box-shadow-left-4","$box-shadow-left-5":"--pgn-box-shadow-left-5","$box-shadow-up-1":"--pgn-box-shadow-up-1","$box-shadow-up-2":"--pgn-box-shadow-up-2","$box-shadow-up-3":"--pgn-box-shadow-up-3","$box-shadow-up-4":"--pgn-box-shadow-up-4","$box-shadow-up-5":"--pgn-box-shadow-up-5","$box-shadow-right-1":"--pgn-box-shadow-right-1","$box-shadow-right-2":"--pgn-box-shadow-right-2","$box-shadow-right-3":"--pgn-box-shadow-right-3","$box-shadow-right-4":"--pgn-box-shadow-right-4","$box-shadow-right-5":"--pgn-box-shadow-right-5","$box-shadow-centered-1":"--pgn-box-shadow-centered-1","$box-shadow-centered-2":"--pgn-box-shadow-centered-2","$box-shadow-centered-3":"--pgn-box-shadow-centered-3","$box-shadow-centered-4":"--pgn-box-shadow-centered-4","$box-shadow-centered-5":"--pgn-box-shadow-centered-5","$grid-columns":"--pgn-grid-columns","$grid-gutter-width":"--pgn-grid-gutter-width","$grid-row-columns":"--pgn-grid-row-columns","$list-group-color":"--pgn-list-group-color","$list-group-bg":"--pgn-list-group-bg-base","$list-group-hover-bg":"--pgn-list-group-bg-hover","$list-group-border-color":"--pgn-list-group-border-color","$list-group-border-width":"--pgn-list-group-border-width","$list-group-border-radius":"--pgn-list-group-border-radius","$list-group-item-padding-y":"--pgn-list-group-item-padding-y","$list-group-item-padding-x":"--pgn-list-group-item-padding-x","$list-group-active-color":"--pgn-list-group-active-color-base","$list-group-active-border-color":"--pgn-list-group-active-color-border","$list-group-active-bg":"--pgn-list-group-active-bg","$list-group-disabled-color":"--pgn-list-group-disabled-color","$list-group-disabled-bg":"--pgn-list-group-disabled-bg","$list-group-action-color":"--pgn-list-group-action-color-base","$list-group-action-hover-color":"--pgn-list-group-action-color-hover","$list-group-action-active-color":"--pgn-list-group-action-active-color","$list-group-action-active-bg":"--pgn-list-group-action-active-bg","$zindex-dropdown":"--pgn-zindex-dropdown","$zindex-sticky":"--pgn-zindex-sticky","$zindex-fixed":"--pgn-zindex-fixed","$zindex-sheet-backdrop":"--pgn-zindex-sheet-backdrop","$zindex-sheet":"--pgn-zindex-sheet","$zindex-modal-backdrop":"--pgn-zindex-modal-backdrop","$zindex-modal":"--pgn-zindex-modal","$zindex-popover":"--pgn-zindex-popover","$zindex-tooltip":"--pgn-zindex-tooltip","$link-color":"--pgn-link-color","$link-decoration":"--pgn-link-decoration","$link-hover-color":"--pgn-link-hover-color","$link-hover-decoration":"--pgn-link-hover-decoration","$inline-link-color":"--pgn-link-brand-inline-color","$inline-link-decoration":"--pgn-link-brand-inline-decoration","$inline-link-decoration-color":"--pgn-link-brand-inline-decoration-color","$inline-link-hover-color":"--pgn-link-brand-inline-hover-color","$inline-link-hover-decoration":"--pgn-link-brand-inline-hover-decoration","$inline-link-hover-decoration-color":"--pgn-link-brand-inline-hover-decoration-color","$muted-link-color":"--pgn-link-muted-color","$muted-link-decoration":"--pgn-link-muted-decoration","$muted-link-hover-color":"--pgn-link-muted-hover-color","$muted-link-hover-decoration":"--pgn-link-muted-hover-decoration","$muted-inline-link-color":"--pgn-link-muted-inline-color","$muted-inline-link-decoration":"--pgn-link-muted-inline-decoration","$muted-inline-link-decoration-color":"--pgn-link-muted-inline-decoration-color","$muted-inline-link-hover-color":"--pgn-link-muted-inline-hover-color","$muted-inline-link-hover-decoration":"--pgn-link-muted-inline-hover-decoration","$muted-inline-link-hover-decoration-color":"--pgn-link-muted-inline-hover-decoration-color","$brand-link-color":"--pgn-link-brand-color","$brand-link-decoration":"--pgn-link-brand-decoration","$brand-link-hover-color":"--pgn-link-brand-hover-color","$brand-link-hover-decoration":"--pgn-link-brand-hover-decoration","$emphasized-link-hover-darken-percentage":"--pgn-link-emphasized-hover-darken-percentage","$transition-base":"--pgn-transition-base","$transition-fade":"--pgn-transition-fade","$transition-collapse":"--pgn-transition-collapse","$display1-size":"--pgn-display-size-1","$display2-size":"--pgn-display-size-2","$display3-size":"--pgn-display-size-3","$display4-size":"--pgn-display-size-4","$display-mobile-size":"--pgn-display-size-mobile","$display1-weight":"--pgn-display-weight-1","$display2-weight":"--pgn-display-weight-2","$display3-weight":"--pgn-display-weight-3","$display4-weight":"--pgn-display-weight-4","$display-line-height":"--pgn-display-line-height-base","$display-mobile-line-height":"--pgn-display-line-height-mobile","$font-family-base":"--pgn-font-family-base","$font-family-sans-serif":"--pgn-font-family-sans-serif","$font-family-serif":"--pgn-font-family-serif","$font-family-monospace":"--pgn-font-family-monospace","$font-size-base":"--pgn-font-size-base","$font-size-lg":"--pgn-font-size-lg","$font-size-sm":"--pgn-font-size-sm","$font-size-xs":"--pgn-font-size-xs","$small-font-size":"--pgn-font-size-small-base","$x-small-font-size":"--pgn-font-size-small-x","$h1-font-size":"--pgn-font-size-h1","$h2-font-size":"--pgn-font-size-h2","$h3-font-size":"--pgn-font-size-h3","$h4-font-size":"--pgn-font-size-h4","$h5-font-size":"--pgn-font-size-h5","$h6-font-size":"--pgn-font-size-h6","$h1-mobile-font-size":"--pgn-font-size-mobile-h1","$h2-mobile-font-size":"--pgn-font-size-mobile-h2","$h3-mobile-font-size":"--pgn-font-size-mobile-h3","$h4-mobile-font-size":"--pgn-font-size-mobile-h4","$h5-mobile-font-size":"--pgn-font-size-mobile-h5","$h6-mobile-font-size":"--pgn-font-size-mobile-h6","$lead-font-size":"--pgn-font-size-lead","$font-weight-lighter":"--pgn-font-weight-lighter","$font-weight-light":"--pgn-font-weight-light","$font-weight-normal":"--pgn-font-weight-normal","$font-weight-semi-bold":"--pgn-font-weight-semi-bold","$font-weight-bold":"--pgn-font-weight-bold","$font-weight-bolder":"--pgn-font-weight-bolder","$font-weight-base":"--pgn-font-weight-base","$lead-font-weight":"--pgn-font-weight-lead","$headings-margin-bottom":"--pgn-headings-margin-bottom","$headings-font-family":"--pgn-headings-font-family","$headings-font-weight":"--pgn-headings-font-weight","$headings-line-height":"--pgn-headings-line-height","$headings-color":"--pgn-headings-color","$line-height-base":"--pgn-line-height-base","$line-height-lg":"--pgn-line-height-lg","$line-height-sm":"--pgn-line-height-sm","$paragraph-margin-bottom":"--pgn-paragraph-margin-bottom"} \ No newline at end of file diff --git a/tokens/build/variables.css b/tokens/build/variables.css index 80cfaab7c9..0d2ef0deaf 100644 --- a/tokens/build/variables.css +++ b/tokens/build/variables.css @@ -1,8 +1,4 @@ :root { - --pgn-www-zindex-modal: 2503; - --pgn-www-zindex-sheet-backdrop: 2501; - --pgn-www-zindex-sheet: 2502; - --pgn-www-zindex-header: 2500; --pgn-paragraph-margin-bottom: 1rem; --pgn-line-height-sm: 1.5; --pgn-line-height-lg: 1.5; diff --git a/tokens/source/www/zindex/zindex.tokens.json b/tokens/source/www/zindex/zindex.tokens.json deleted file mode 100644 index 0416ae83df..0000000000 --- a/tokens/source/www/zindex/zindex.tokens.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "www-zindex": { - "header": { "value": "2500", "themeable": true, "source": "$pgn-www-zindex-header" }, - "sheet": { "value": "2502", "themeable": true, "source": "$pgn-www-zindex-sheet" }, - "sheet-backdrop": { "value": "2501", "themeable": true, "source": "$pgn-www-zindex-sheet-backdrop" }, - "modal": { "value": "2503", "themeable": true, "source": "$pgn-www-zindex-modal" } - } -} diff --git a/www/src/components/Header.scss b/www/src/components/Header.scss index a4bbd18fde..f240d07648 100644 --- a/www/src/components/Header.scss +++ b/www/src/components/Header.scss @@ -1,3 +1,3 @@ .pgn-doc-header { - z-index: $pgn-www-zindex-header; + z-index: var(--pgn-www-zindex-header); } diff --git a/www/src/scss/_variables.scss b/www/src/scss/_variables.scss deleted file mode 100644 index 23ed88ad39..0000000000 --- a/www/src/scss/_variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -$pgn-www-zindex-header: 2500; -$pgn-www-zindex-sheet-backdrop: 2501; -$pgn-www-zindex-sheet: 2502; -$pgn-www-zindex-modal: 2503; diff --git a/www/src/scss/base.scss b/www/src/scss/base.scss index a464dbc607..574e392258 100644 --- a/www/src/scss/base.scss +++ b/www/src/scss/base.scss @@ -9,6 +9,13 @@ @import "../components/IconsTable"; @import "../components/exampleComponents/ExamplePropsForm"; +:root { + --pgn-zindex-modal: 2503; + --pgn-zindex-sheet-backdrop: 2501; + --pgn-zindex-sheet: 2502; + --pgn-www-zindex-header: 2500; +} + body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/www/src/scss/edxorg-theme.scss b/www/src/scss/edxorg-theme.scss index c327b2b6ca..bf1287cdce 100644 --- a/www/src/scss/edxorg-theme.scss +++ b/www/src/scss/edxorg-theme.scss @@ -1,6 +1,5 @@ @import "~font-awesome/css/font-awesome.min.css"; @import "~@edx/brand-edx.org/paragon/fonts"; -@import "variables"; @import "~@edx/brand-edx.org/paragon/variables"; @import "~paragon-style/core/core"; @import "~@edx/brand-edx.org/paragon/overrides"; diff --git a/www/src/scss/openedx-theme.scss b/www/src/scss/openedx-theme.scss index 8d49bb81cc..967ceaf021 100644 --- a/www/src/scss/openedx-theme.scss +++ b/www/src/scss/openedx-theme.scss @@ -1,6 +1,5 @@ @import "~font-awesome/css/font-awesome.min.css"; @import "~@edx/brand-openedx/paragon/fonts"; -@import "variables"; @import "~@edx/brand-openedx/paragon/variables"; @import "~paragon-style/core/core"; @import "~@edx/brand-openedx/paragon/overrides"; From 7cc79e4f964b7fe2386e9facf73c58d13eec5c81 Mon Sep 17 00:00:00 2001 From: Viktor Rusakov Date: Mon, 24 Oct 2022 17:41:34 +0300 Subject: [PATCH 09/19] refactor: update json schema of design tokens --- scss/core/tokens.css | 379 ++++++++---------- tokens/build/_variables.scss | 379 ++++++++---------- tokens/build/css-to-scss.json | 1 + tokens/build/scss-to-css-components.json | 1 - tokens/build/scss-to-css-core.json | 1 - tokens/build/scss-to-css.json | 1 + tokens/build/variables.css | 379 ++++++++---------- tokens/map-scss-to-css.js | 30 +- tokens/package.json | 2 +- tokens/replace-variables.js | 6 +- tokens/source/alias/color.json | 7 + tokens/source/colors/text/text.tokens.json | 5 - .../ActionRow.tokens.json => ActionRow.json} | 0 .../{Alert/Alert.tokens.json => Alert.json} | 0 ...Annotation.tokens.json => Annotation.json} | 0 .../Avatar.tokens.json => Avatar.json} | 0 ...arButton.tokens.json => AvatarButton.json} | 0 .../{Badge/Badge.tokens.json => Badge.json} | 2 +- ...Breadcrumb.tokens.json => Breadcrumb.json} | 0 .../Bubble.tokens.json => Bubble.json} | 0 .../Button.tokens.json => Button.json} | 29 +- .../{Card/Card.tokens.json => Card.json} | 0 .../Carousel.tokens.json => Carousel.json} | 9 - .../{Chip/Chip.tokens.json => Chip.json} | 0 ...oseButton.tokens.json => CloseButton.json} | 0 .../{Code/Code.tokens.json => Code.json} | 0 ...llapsible.tokens.json => Collapsible.json} | 0 .../Container.tokens.json => Container.json} | 0 .../DataTable.tokens.json => DataTable.json} | 3 +- .../Dropdown.tokens.json => Dropdown.json} | 5 +- .../Dropzone.tokens.json => Dropzone.json} | 0 .../{Form/Form.tokens.json => Form.json} | 103 +---- .../{Icon/Icon.tokens.json => Icon.json} | 0 ...IconButton.tokens.json => IconButton.json} | 0 .../{Image/Image.tokens.json => Image.json} | 0 .../{Menu/Menu.tokens.json => Menu.json} | 1 - .../{Modal/Modal.tokens.json => Modal.json} | 6 +- .../{Nav/Nav.tokens.json => Nav.json} | 2 +- .../Navbar.tokens.json => Navbar.json} | 8 +- ...Pagination.tokens.json => Pagination.json} | 2 +- .../Popover.tokens.json => Popover.json} | 5 +- ...oductTour.tokens.json => ProductTour.json} | 0 ...ogressBar.tokens.json => ProgressBar.json} | 0 ...archField.tokens.json => SearchField.json} | 0 ...ableBox.tokens.json => SelectableBox.json} | 6 - tokens/source/components/Sheet.json | 8 + .../Spinner.tokens.json => Spinner.json} | 0 .../{Stack/Stack.tokens.json => Stack.json} | 0 .../Sticky.tokens.json => Sticky.json} | 0 .../source/components/Table/Table.tokens.json | 53 --- .../{Tabs/Tabs.tokens.json => Tabs.json} | 0 .../{Toast/Toast.tokens.json => Toast.json} | 0 .../Tooltip.tokens.json => Tooltip.json} | 0 .../general/body.json} | 2 +- .../general/caret.json} | 0 .../general/component.json} | 0 .../general/headings.json} | 0 tokens/source/components/general/hr.json | 11 + tokens/source/components/general/input.json | 47 +++ .../general/link.json} | 0 .../general/list.json} | 12 +- tokens/source/components/general/text.json | 28 ++ tokens/source/core/core.tokens.json | 78 ---- .../border.tokens.json => global/border.json} | 7 - .../breakpoints.json} | 0 .../colors.tokens.json => global/color.json} | 0 .../display.json} | 0 .../elevation.json} | 15 + .../grid.tokens.json => global/grid.json} | 0 .../spacing.json} | 3 + .../transition.json} | 0 .../typography.json} | 5 + tokens/source/layout/sizes/sizes.tokens.json | 10 - .../source/layout/z-index/zindex.tokens.json | 13 - .../line-height/line-height.tokens.json | 7 - .../paragraph/paragraph.tokens.json | 7 - tokens/utils.js | 60 +-- 77 files changed, 749 insertions(+), 989 deletions(-) create mode 100644 tokens/build/css-to-scss.json delete mode 100644 tokens/build/scss-to-css-components.json delete mode 100644 tokens/build/scss-to-css-core.json create mode 100644 tokens/build/scss-to-css.json create mode 100644 tokens/source/alias/color.json delete mode 100644 tokens/source/colors/text/text.tokens.json rename tokens/source/components/{ActionRow/ActionRow.tokens.json => ActionRow.json} (100%) rename tokens/source/components/{Alert/Alert.tokens.json => Alert.json} (100%) rename tokens/source/components/{Annotation/Annotation.tokens.json => Annotation.json} (100%) rename tokens/source/components/{Avatar/Avatar.tokens.json => Avatar.json} (100%) rename tokens/source/components/{AvatarButton/AvatarButton.tokens.json => AvatarButton.json} (100%) rename tokens/source/components/{Badge/Badge.tokens.json => Badge.json} (88%) rename tokens/source/components/{Breadcrumb/Breadcrumb.tokens.json => Breadcrumb.json} (100%) rename tokens/source/components/{Bubble/Bubble.tokens.json => Bubble.json} (100%) rename tokens/source/components/{Button/Button.tokens.json => Button.json} (60%) rename tokens/source/components/{Card/Card.tokens.json => Card.json} (100%) rename tokens/source/components/{Carousel/Carousel.tokens.json => Carousel.json} (78%) rename tokens/source/components/{Chip/Chip.tokens.json => Chip.json} (100%) rename tokens/source/components/{CloseButton/CloseButton.tokens.json => CloseButton.json} (100%) rename tokens/source/components/{Code/Code.tokens.json => Code.json} (100%) rename tokens/source/components/{Collapsible/Collapsible.tokens.json => Collapsible.json} (100%) rename tokens/source/components/{Container/Container.tokens.json => Container.json} (100%) rename tokens/source/components/{DataTable/DataTable.tokens.json => DataTable.json} (85%) rename tokens/source/components/{Dropdown/Dropdown.tokens.json => Dropdown.json} (95%) rename tokens/source/components/{Dropzone/Dropzone.tokens.json => Dropzone.json} (100%) rename tokens/source/components/{Form/Form.tokens.json => Form.json} (85%) rename tokens/source/components/{Icon/Icon.tokens.json => Icon.json} (100%) rename tokens/source/components/{IconButton/IconButton.tokens.json => IconButton.json} (100%) rename tokens/source/components/{Image/Image.tokens.json => Image.json} (100%) rename tokens/source/components/{Menu/Menu.tokens.json => Menu.json} (81%) rename tokens/source/components/{Modal/Modal.tokens.json => Modal.json} (95%) rename tokens/source/components/{Nav/Nav.tokens.json => Nav.json} (97%) rename tokens/source/components/{Navbar/Navbar.tokens.json => Navbar.json} (91%) rename tokens/source/components/{Pagination/Pagination.tokens.json => Pagination.json} (97%) rename tokens/source/components/{Popover/Popover.tokens.json => Popover.json} (93%) rename tokens/source/components/{ProductTour/ProductTour.tokens.json => ProductTour.json} (100%) rename tokens/source/components/{ProgressBar/ProgressBar.tokens.json => ProgressBar.json} (100%) rename tokens/source/components/{SearchField/SearchField.tokens.json => SearchField.json} (100%) rename tokens/source/components/{SelectableBox/SelectableBox.tokens.json => SelectableBox.json} (62%) create mode 100644 tokens/source/components/Sheet.json rename tokens/source/components/{Spinner/Spinner.tokens.json => Spinner.json} (100%) rename tokens/source/components/{Stack/Stack.tokens.json => Stack.json} (100%) rename tokens/source/components/{Sticky/Sticky.tokens.json => Sticky.json} (100%) delete mode 100644 tokens/source/components/Table/Table.tokens.json rename tokens/source/components/{Tabs/Tabs.tokens.json => Tabs.json} (100%) rename tokens/source/components/{Toast/Toast.tokens.json => Toast.json} (100%) rename tokens/source/components/{Tooltip/Tooltip.tokens.json => Tooltip.json} (100%) rename tokens/source/{colors/body/body.tokens.json => components/general/body.json} (54%) rename tokens/source/{caret/caret.tokens.json => components/general/caret.json} (100%) rename tokens/source/{colors/component/component.tokens.json => components/general/component.json} (100%) rename tokens/source/{typography/headings/headings.tokens.json => components/general/headings.json} (100%) create mode 100644 tokens/source/components/general/hr.json create mode 100644 tokens/source/components/general/input.json rename tokens/source/{links/links.tokens.json => components/general/link.json} (100%) rename tokens/source/{layout/list-group/list-group.tokens.json => components/general/list.json} (89%) create mode 100644 tokens/source/components/general/text.json delete mode 100644 tokens/source/core/core.tokens.json rename tokens/source/{borders-fills/border.tokens.json => global/border.json} (57%) rename tokens/source/{layout/breakpoints/breakpoints.tokens.json => global/breakpoints.json} (100%) rename tokens/source/{colors/colors.tokens.json => global/color.json} (100%) rename tokens/source/{typography/display/display.tokens.json => global/display.json} (100%) rename tokens/source/{elevation-shadows/box-shadow/box-shadow.tokens.json => global/elevation.json} (89%) rename tokens/source/{layout/grid/grid.tokens.json => global/grid.json} (100%) rename tokens/source/{layout/spacing/spacing.tokens.json => global/spacing.json} (87%) rename tokens/source/{transition/transition.tokens.json => global/transition.json} (100%) rename tokens/source/{typography/font/font.tokens.json => global/typography.json} (92%) delete mode 100644 tokens/source/layout/sizes/sizes.tokens.json delete mode 100644 tokens/source/layout/z-index/zindex.tokens.json delete mode 100644 tokens/source/typography/line-height/line-height.tokens.json delete mode 100644 tokens/source/typography/paragraph/paragraph.tokens.json diff --git a/scss/core/tokens.css b/scss/core/tokens.css index 0d2ef0deaf..f8f228305d 100644 --- a/scss/core/tokens.css +++ b/scss/core/tokens.css @@ -1,11 +1,7 @@ :root { - --pgn-paragraph-margin-bottom: 1rem; --pgn-line-height-sm: 1.5; --pgn-line-height-lg: 1.5; --pgn-line-height-base: 1.5556; - --pgn-headings-line-height: 1.25; - --pgn-headings-font-family: null; - --pgn-headings-margin-bottom: .5rem; --pgn-font-weight-lead: null; --pgn-font-weight-bolder: bolder; --pgn-font-weight-bold: 700; @@ -32,50 +28,10 @@ --pgn-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-display-line-height-mobile: 3.5rem; - --pgn-display-line-height-base: 1; - --pgn-display-size-mobile: 3.25rem; - --pgn-display-size-4: 7.5rem; - --pgn-display-size-3: 5.625rem; - --pgn-display-size-2: 4.875rem; - --pgn-display-size-1: 3.75rem; --pgn-transition-collapse: height .35s ease; --pgn-transition-fade: opacity .15s linear; --pgn-transition-base: all .2s ease-in-out; - --pgn-link-emphasized-hover-darken-percentage: 15%; - --pgn-link-brand-inline-hover-decoration-color: #003C5E; - --pgn-link-brand-inline-hover-decoration: underline; - --pgn-link-brand-inline-hover-color: #003C5E; - --pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3); - --pgn-link-brand-inline-decoration: underline; - --pgn-link-brand-hover-decoration: underline; - --pgn-link-brand-hover-color: #51002B; - --pgn-link-brand-decoration: none; - --pgn-link-muted-inline-hover-decoration-color: #020911; - --pgn-link-muted-inline-hover-decoration: underline; - --pgn-link-muted-inline-hover-color: #020911; - --pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3); - --pgn-link-muted-inline-decoration: underline; - --pgn-link-muted-hover-decoration: underline; - --pgn-link-muted-hover-color: #020911; - --pgn-link-muted-decoration: none; - --pgn-link-inline-hover-decoration-color: #003C5E; - --pgn-link-inline-hover-decoration: underline; - --pgn-link-inline-hover-color: #003C5E; - --pgn-link-inline-decoration-color: rgba(0, 109, 170, .3); - --pgn-link-inline-decoration: underline; - --pgn-link-hover-decoration: underline; - --pgn-link-hover-color: #003C5E; - --pgn-link-decoration: none; - --pgn-zindex-tooltip: 1070; - --pgn-zindex-popover: 1060; - --pgn-zindex-modal: 1050; - --pgn-zindex-modal-backdrop: 1040; - --pgn-zindex-sheet: 1032; - --pgn-zindex-sheet-backdrop: 1031; - --pgn-zindex-fixed: 1030; - --pgn-zindex-sticky: 1020; - --pgn-zindex-dropdown: 1000; + --pgn-spacer-base: 1rem; --pgn-spacing-base-5-5: 4rem; --pgn-spacing-base-4-5: 2rem; --pgn-spacing-base-3-5: 1.25rem; @@ -88,22 +44,22 @@ --pgn-spacing-base-2: .5rem; --pgn-spacing-base-1: .25rem; --pgn-spacing-base-0: 0; - --pgn-size-base-100: 100rem; - --pgn-size-base-75: 75rem; - --pgn-size-base-50: 50rem; - --pgn-size-base-25: 25rem; - --pgn-list-group-item-padding-x: 1.25rem; - --pgn-list-group-item-padding-y: .75rem; - --pgn-list-group-color: null; --pgn-grid-row-columns: 6; --pgn-grid-gutter-width: 24px; --pgn-grid-columns: 12; - --pgn-breakpoint-xxl: 1400px; - --pgn-breakpoint-xl: 1200px; - --pgn-breakpoint-lg: 992px; - --pgn-breakpoint-md: 768px; - --pgn-breakpoint-sm: 576px; - --pgn-breakpoint-xs: 0; + --pgn-zindex-fixed: 1030; + --pgn-zindex-sticky: 1020; + --pgn-zindex-2000: 2000; + --pgn-zindex-1800: 1800; + --pgn-zindex-1600: 1600; + --pgn-zindex-1400: 1400; + --pgn-zindex-1200: 1200; + --pgn-zindex-1000: 1000; + --pgn-zindex-800: 800; + --pgn-zindex-600: 600; + --pgn-zindex-400: 400; + --pgn-zindex-200: 200; + --pgn-zindex-0: 0; --pgn-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); --pgn-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); --pgn-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); @@ -137,23 +93,23 @@ --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); - --pgn-core-list-inline-padding: .5rem; - --pgn-core-mark-bg: #FFF243; - --pgn-core-mark-padding: .2em; - --pgn-core-input-btn-focus-width: 1px; - --pgn-core-input-btn-line-height-sm: 1.4286; - --pgn-core-input-btn-line-height-base: 1.3333; - --pgn-core-input-btn-font-size-lg: 1.325rem; - --pgn-core-input-btn-font-size-sm: .875rem; - --pgn-core-input-btn-font-size-base: 1.125rem; - --pgn-core-input-btn-font-family: inherit; - --pgn-core-input-btn-padding-lg-x: 1.25rem; - --pgn-core-input-btn-padding-lg-y: .6875rem; - --pgn-core-input-btn-padding-sm-x: .75rem; - --pgn-core-input-btn-padding-sm-y: .4375rem; - --pgn-core-input-btn-padding-x: 1rem; - --pgn-core-input-btn-padding-y: .5625rem; - --pgn-core-spacer: 1rem; + --pgn-display-line-height-mobile: 3.5rem; + --pgn-display-line-height-base: 1; + --pgn-display-size-mobile: 3.25rem; + --pgn-display-size-4: 7.5rem; + --pgn-display-size-3: 5.625rem; + --pgn-display-size-2: 4.875rem; + --pgn-display-size-1: 3.75rem; + --pgn-breakpoint-xxl: 1400px; + --pgn-breakpoint-xl: 1200px; + --pgn-breakpoint-lg: 992px; + --pgn-breakpoint-md: 768px; + --pgn-breakpoint-sm: 576px; + --pgn-breakpoint-xs: 0; + --pgn-border-radius-sm: .25rem; + --pgn-border-radius-lg: .425rem; + --pgn-border-radius-base: .375rem; + --pgn-border-width: 1px; --pgn-tooltip-arrow-height: .4rem; --pgn-tooltip-arrow-width: .8rem; --pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); @@ -176,17 +132,6 @@ --pgn-toast-max-width: 400px; --pgn-tabs-notification-width: 1rem; --pgn-tabs-notification-height: 1rem; - --pgn-table-th-font-weight: null; - --pgn-table-level-border: -6; - --pgn-table-level-bg: -9; - --pgn-table-striped-order: odd; - --pgn-table-dark-bg-hover: rgba(255, 255, 255, .075); - --pgn-table-dark-bg-accent: rgba(255, 255, 255, .05); - --pgn-table-bg-hover: rgba(0, 0, 0, .075); - --pgn-table-bg-accent: rgba(0, 0, 0, .05); - --pgn-table-bg-base: null; - --pgn-table-cell-padding-sm: .3rem; - --pgn-table-cell-padding-base: .75rem; --pgn-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); --pgn-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); --pgn-sticky-offset: 0; @@ -195,8 +140,8 @@ --pgn-spinner-sm-width: 1rem; --pgn-spinner-border-width: .25em; --pgn-spinner-width: 2rem; - --pgn-selectable-box-cols-number-max: 12; - --pgn-selectable-box-cols-number-min: 1; + --pgn-sheet-zindex-main: 1032; + --pgn-sheet-zindex-backdrop: 1031; --pgn-selectable-box-box-space: .75rem; --pgn-selectable-box-border-radius: .25rem; --pgn-selectable-box-padding: 1rem; @@ -221,6 +166,7 @@ --pgn-product-tour-checkpoint-width-max: 480px; --pgn-product-tour-checkpoint-width-arrow: 15px; --pgn-product-tour-checkpoint-width-border: 8px; + --pgn-popover-zindex: 1060; --pgn-popover-arrow-height: .5rem; --pgn-popover-arrow-width: 1rem; --pgn-popover-icon-width: 1rem; @@ -229,7 +175,6 @@ --pgn-popover-header-padding-x: 1rem; --pgn-popover-header-padding-y: .5rem; --pgn-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); - --pgn-popover-border-color: rgba(0, 0, 0, .2); --pgn-popover-max-width: 480px; --pgn-reduced-dropdown-width-min: 6rem; --pgn-reduced-dropdown-height-max: 60vh; @@ -258,8 +203,6 @@ --pgn-navbar-light-color-disabled: rgba(0, 0, 0, .3); --pgn-navbar-light-color-active: rgba(0, 0, 0, .9); --pgn-navbar-light-color-hover: rgba(0, 0, 0, .7); - --pgn-navbar-light-color-base: rgba(0, 0, 0, .5); - --pgn-navbar-dark-color-base: rgba(255, 255, 255, .5); --pgn-navbar-toggler-padding-x: .75rem; --pgn-navbar-toggler-padding-y: .25rem; --pgn-navbar-nav-scroll-max-height: 75vh; @@ -269,6 +212,7 @@ --pgn-nav-link-font-weight: 500; --pgn-nav-link-padding-x: 1rem; --pgn-nav-link-padding-y: .5rem; + --pgn-modal-zindex: 1050; --pgn-modal-transform-scale: scale(1.02); --pgn-modal-transform-show: none; --pgn-modal-transform-fade: translate(0, -50px); @@ -279,6 +223,7 @@ --pgn-modal-xl: 1140px; --pgn-modal-header-padding-x: 1.5rem; --pgn-modal-header-padding-y: 1rem; + --pgn-modal-backdrop-zindex: 1040; --pgn-modal-backdrop-opacity: .5; --pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); --pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5); @@ -305,6 +250,57 @@ --pgn-icon-md: 1.5rem; --pgn-icon-sm: 1.25rem; --pgn-icon-inline: .8em; + --pgn-mark-bg: #FFF243; + --pgn-mark-padding: .2em; + --pgn-paragraph-margin-bottom: 1rem; + --pgn-list-group-item-padding-x: 1.25rem; + --pgn-list-group-item-padding-y: .75rem; + --pgn-list-group-color: null; + --pgn-list-inline-padding: .5rem; + --pgn-link-emphasized-hover-darken-percentage: 15%; + --pgn-link-brand-inline-hover-decoration-color: #003C5E; + --pgn-link-brand-inline-hover-decoration: underline; + --pgn-link-brand-inline-hover-color: #003C5E; + --pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3); + --pgn-link-brand-inline-decoration: underline; + --pgn-link-brand-hover-decoration: underline; + --pgn-link-brand-hover-color: #51002B; + --pgn-link-brand-decoration: none; + --pgn-link-muted-inline-hover-decoration-color: #020911; + --pgn-link-muted-inline-hover-decoration: underline; + --pgn-link-muted-inline-hover-color: #020911; + --pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3); + --pgn-link-muted-inline-decoration: underline; + --pgn-link-muted-hover-decoration: underline; + --pgn-link-muted-hover-color: #020911; + --pgn-link-muted-decoration: none; + --pgn-link-inline-hover-decoration-color: #003C5E; + --pgn-link-inline-hover-decoration: underline; + --pgn-link-inline-hover-color: #003C5E; + --pgn-link-inline-decoration-color: rgba(0, 109, 170, .3); + --pgn-link-inline-decoration: underline; + --pgn-link-hover-decoration: underline; + --pgn-link-hover-color: #003C5E; + --pgn-link-decoration: none; + --pgn-input-btn-focus-width: 1px; + --pgn-input-btn-line-height-sm: 1.4286; + --pgn-input-btn-line-height-base: 1.3333; + --pgn-input-btn-font-size-lg: 1.325rem; + --pgn-input-btn-font-size-sm: .875rem; + --pgn-input-btn-font-size-base: 1.125rem; + --pgn-input-btn-font-family: inherit; + --pgn-input-btn-padding-lg-x: 1.25rem; + --pgn-input-btn-padding-lg-y: .6875rem; + --pgn-input-btn-padding-sm-x: .75rem; + --pgn-input-btn-padding-sm-y: .4375rem; + --pgn-input-btn-padding-x: 1rem; + --pgn-input-btn-padding-y: .5625rem; + --pgn-headings-line-height: 1.25; + --pgn-headings-font-family: null; + --pgn-headings-margin-bottom: .5rem; + --pgn-caret-spacing: .255em; + --pgn-caret-vertical-align: .255em; + --pgn-caret-width: .3em; --pgn-form-select-icon-padding: .5625rem; --pgn-form-control-icon-width: 32px; --pgn-form-feedback-tooltip-opacity: .9; @@ -353,6 +349,7 @@ --pgn-form-input-focus-width: 1px; --pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075); --pgn-dropzone-padding: 1.5rem; + --pgn-dropdown-zindex: 1000; --pgn-dropdown-border-color: rgba(0, 0, 0, .15); --pgn-dropdown-spacer: .125rem; --pgn-dropdown-padding-y-item: .5rem; @@ -363,7 +360,8 @@ --pgn-data-table-pagination-dropdown-min-width: 6rem; --pgn-data-table-pagination-dropdown-max-height: 60vh; --pgn-data-table-footer-position: center; - --pgn-data-table-padding-cell: .5rem .75rem; + --pgn-data-table-padding-head-cell: .5rem .75rem; + --pgn-data-table-padding-cell: .75rem; --pgn-data-table-padding-small: .5rem; --pgn-data-table-padding-y: .75rem; --pgn-data-table-padding-x: .75rem; @@ -394,7 +392,6 @@ --pgn-chip-margin-inline: .5rem; --pgn-chip-padding-x: .5rem; --pgn-chip-padding-y: .125rem; - --pgn-carousel-transition-duration: .6s; --pgn-carousel-caption-width: 70%; --pgn-carousel-indicator-transition: opacity .6s ease; --pgn-carousel-indicator-spacer: 3px; @@ -434,7 +431,6 @@ --pgn-btn-block-spacing-y: .5rem; --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); --pgn-btn-tertiary-inverse-bg-base: transparent; - --pgn-btn-tertiary-bg-base: transparent; --pgn-btn-disabled-opacity: .65; --pgn-btn-focus-gap: 1px; --pgn-btn-focus-width: 2px; @@ -584,15 +580,6 @@ --pgn-color-blue: #23419F; --pgn-color-black: #000000; --pgn-color-white: #FFFFFF; - --pgn-caret-spacing: .255em; - --pgn-caret-vertical-align: .255em; - --pgn-caret-width: .3em; - --pgn-border-radius-sm: .25rem; - --pgn-border-radius-lg: .425rem; - --pgn-border-radius-base: .375rem; - --pgn-border-width: 1px; - --pgn-headings-color: var(--pgn-color-black); - --pgn-headings-font-weight: var(--pgn-font-weight-bold); --pgn-font-weight-base: var(--pgn-font-weight-normal); --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25); --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); @@ -605,20 +592,7 @@ --pgn-display-weight-3: var(--pgn-font-weight-bold); --pgn-display-weight-2: var(--pgn-font-weight-bold); --pgn-display-weight-1: var(--pgn-font-weight-bold); - --pgn-list-group-action-active-bg: var(--pgn-color-gray-200); - --pgn-list-group-action-color-base: var(--pgn-color-gray-700); - --pgn-list-group-disabled-color: var(--pgn-color-gray-600); - --pgn-list-group-border-radius: var(--pgn-border-radius-base); - --pgn-list-group-border-width: var(--pgn-border-width); - --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); - --pgn-list-group-bg-hover: var(--pgn-color-gray-100); - --pgn-list-group-bg-base: var(--pgn-color-white); - --pgn-core-dt-font-weight: var(--pgn-font-weight-bold); - --pgn-core-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25); - --pgn-core-blockquote-small-font-size: var(--pgn-font-size-small-base); - --pgn-core-input-btn-border-width: var(--pgn-border-width); - --pgn-core-input-btn-focus-box-shadow: 0 0 0 var(--pgn-core-input-btn-focus-width) var(--pgn-core-input-btn-focus-color); - --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg); + --pgn-border-color: var(--pgn-color-gray-200); --pgn-tooltip-arrow-color-light: var(--pgn-color-white); --pgn-tooltip-border-radius: var(--pgn-border-radius-base); --pgn-tooltip-bg-light: var(--pgn-color-white); @@ -630,12 +604,6 @@ --pgn-toast-header-color-base: var(--pgn-color-white); --pgn-toast-color-background: var(--pgn-color-gray-700); --pgn-tabs-notification-font-size: var(--pgn-font-size-xs); - --pgn-table-dark-bg-base: var(--pgn-color-gray-700); - --pgn-table-dark-color-base: var(--pgn-color-white); - --pgn-table-border-width: var(--pgn-border-width); - --pgn-table-bg-head: var(--pgn-color-gray-100); - --pgn-table-bg-active: var(--pgn-table-bg-hover); - --pgn-table-color-head: var(--pgn-color-gray-700); --pgn-spinner-sm-height: var(--pgn-spinner-sm-width); --pgn-spinner-height: var(--pgn-spinner-width); --pgn-search-field-border-color-focus: var(--pgn-color-black); @@ -653,7 +621,6 @@ --pgn-popover-success-bg: var(--pgn-color-success-100); --pgn-popover-body-padding-x: var(--pgn-popover-header-padding-x); --pgn-popover-body-padding-y: var(--pgn-popover-header-padding-y); - --pgn-popover-header-bg: var(--pgn-color-white); --pgn-popover-border-border: var(--pgn-border-width); --pgn-popover-border-radius: var(--pgn-border-radius-sm); --pgn-popover-bg: var(--pgn-color-white); @@ -679,9 +646,9 @@ --pgn-navbar-toggler-font-size: var(--pgn-font-size-lg); --pgn-navbar-brand-font-size: var(--pgn-font-size-lg); --pgn-navbar-nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2); - --pgn-navbar-padding-x-base: var(--pgn-core-spacer); - --pgn-navbar-padding-y: calc(var(--pgn-core-spacer) / 2); - --pgn-nav-divider-margin-y: calc(var(--pgn-core-spacer) / 2); + --pgn-navbar-padding-x-base: var(--pgn-spacer-base); + --pgn-navbar-padding-y: calc(var(--pgn-spacer-base) / 2); + --pgn-nav-divider-margin-y: calc(var(--pgn-spacer-base) / 2); --pgn-nav-divider-color: var(--pgn-color-gray-100); --pgn-nav-pills-border-radius: var(--pgn-border-radius-base); --pgn-nav-tabs-link-hover-bg: var(--pgn-color-light-400); @@ -695,12 +662,32 @@ --pgn-modal-content-bg: var(--pgn-color-white); --pgn-modal-title-line-height: var(--pgn-line-height-base); --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y); - --pgn-menu-background-base: var(--pgn-btn-tertiary-bg-base); --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200); --pgn-image-thumbnail-border-width: var(--pgn-border-width); --pgn-icon-button-accent-color: var(--pgn-color-white); --pgn-icon-button-diameter-inline: calc(var(--pgn-line-height-base) + .1em); + --pgn-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25); + --pgn-blockquote-small-font-size: var(--pgn-font-size-small-base); + --pgn-list-group-action-active-bg: var(--pgn-color-gray-200); + --pgn-list-group-action-color-base: var(--pgn-color-gray-700); + --pgn-list-group-disabled-color: var(--pgn-color-gray-600); + --pgn-list-group-border-radius: var(--pgn-border-radius-base); + --pgn-list-group-border-width: var(--pgn-border-width); + --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); + --pgn-list-group-bg-hover: var(--pgn-color-gray-100); + --pgn-list-group-bg-base: var(--pgn-color-white); + --pgn-dt-font-weight: var(--pgn-font-weight-bold); + --pgn-input-btn-border-width: var(--pgn-border-width); + --pgn-input-btn-focus-box-shadow: 0 0 0 var(--pgn-input-btn-focus-width) var(--pgn-input-btn-focus-color); + --pgn-input-btn-line-height-lg: var(--pgn-line-height-lg); + --pgn-hr-border-margin-y: var(--pgn-spacer-base); + --pgn-hr-border-width: var(--pgn-border-width); + --pgn-hr-border-color: rgba(var(--pgn-color-black), .1); + --pgn-headings-color: var(--pgn-color-black); + --pgn-headings-font-weight: var(--pgn-font-weight-bold); + --pgn-component-active-color: var(--pgn-color-white); + --pgn-body-color: var(--pgn-color-gray-700); --pgn-form-feedback-tooltip-border-radius: var(--pgn-border-radius-base); --pgn-form-feedback-tooltip-line-height: var(--pgn-line-height-base); --pgn-form-feedback-tooltip-font-size: var(--pgn-font-size-sm); @@ -713,7 +700,6 @@ --pgn-form-custom-select-border-radius: var(--pgn-border-radius-base); --pgn-form-custom-select-border-width-focus: var(--pgn-form-input-focus-width); --pgn-form-custom-select-bg-disabled: var(--pgn-color-gray-100); - --pgn-form-custom-select-indicator-color: var(--pgn-color-gray-700); --pgn-form-custom-switch-indicator-size: calc(var(--pgn-form-custom-control-indicator-size) - var(--pgn-form-custom-control-indicator-border-width) * 4); --pgn-form-custom-switch-indicator-border-radius: calc(var(--pgn-form-custom-control-indicator-size) / 2); --pgn-form-custom-switch-width: calc(var(--pgn-form-custom-control-indicator-size) * 1.75); @@ -726,18 +712,18 @@ --pgn-form-input-color-base: var(--pgn-color-gray-700); --pgn-form-input-bg-disabled: var(--pgn-color-gray-100); --pgn-form-input-bg-base: var(--pgn-color-white); - --pgn-form-input-line-height-sm: var(--pgn-core-input-btn-line-height-sm); - --pgn-form-input-line-height-base: var(--pgn-core-input-btn-line-height-base); - --pgn-form-input-font-size-lg: var(--pgn-core-input-btn-font-size-lg); - --pgn-form-input-font-size-sm: var(--pgn-core-input-btn-font-size-sm); - --pgn-form-input-font-size-base: var(--pgn-core-input-btn-font-size-base); - --pgn-form-input-font-family: var(--pgn-core-input-btn-font-family); - --pgn-form-input-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); - --pgn-form-input-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x); - --pgn-form-input-padding-x-base: var(--pgn-core-input-btn-padding-x); - --pgn-form-input-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); - --pgn-form-input-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y); - --pgn-form-input-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-form-input-line-height-sm: var(--pgn-input-btn-line-height-sm); + --pgn-form-input-line-height-base: var(--pgn-input-btn-line-height-base); + --pgn-form-input-font-size-lg: var(--pgn-input-btn-font-size-lg); + --pgn-form-input-font-size-sm: var(--pgn-input-btn-font-size-sm); + --pgn-form-input-font-size-base: var(--pgn-input-btn-font-size-base); + --pgn-form-input-font-family: var(--pgn-input-btn-font-family); + --pgn-form-input-padding-x-lg: var(--pgn-input-btn-padding-lg-x); + --pgn-form-input-padding-x-sm: var(--pgn-input-btn-padding-sm-x); + --pgn-form-input-padding-x-base: var(--pgn-input-btn-padding-x); + --pgn-form-input-padding-y-lg: var(--pgn-input-btn-padding-lg-y); + --pgn-form-input-padding-y-sm: var(--pgn-input-btn-padding-sm-y); + --pgn-form-input-padding-y-base: var(--pgn-input-btn-padding-y); --pgn-dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x); --pgn-dropzone-border-error: 2px solid var(--pgn-color-danger-300); --pgn-dropzone-border-focus: 2px solid var(--pgn-color-info-300); @@ -746,7 +732,7 @@ --pgn-dropdown-link-hover-color: var(--pgn-color-gray-900); --pgn-dropdown-link-color: var(--pgn-color-gray-900); --pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(var(--pgn-color-black), .175); - --pgn-dropdown-divider-margin-y: calc(var(--pgn-core-spacer) / 2); + --pgn-dropdown-divider-margin-y: calc(var(--pgn-spacer-base) / 2); --pgn-dropdown-divider-bg: var(--pgn-color-gray-100); --pgn-dropdown-border-radius-base: var(--pgn-border-radius-base); --pgn-dropdown-border-width: var(--pgn-border-width); @@ -768,10 +754,8 @@ --pgn-close-button-color: var(--pgn-color-black); --pgn-close-button-font-weight: var(--pgn-font-weight-bold); --pgn-close-button-font-size: calc(var(--pgn-font-size-base) * 1.5); - --pgn-carousel-transition-base: transform var(--pgn-carousel-transition-duration) ease-in-out; --pgn-carousel-caption-color: var(--pgn-color-white); --pgn-carousel-indicator-active-bg: var(--pgn-color-white); - --pgn-carousel-control-color: var(--pgn-color-white); --pgn-card-footer-text-font-size: var(--pgn-font-size-small-x); --pgn-card-divider-margin-y: var(--pgn-card-spacer-y); --pgn-card-divider-bg: var(--pgn-color-light-400); @@ -789,25 +773,25 @@ --pgn-btn-border-radius-sm: var(--pgn-border-radius-sm); --pgn-btn-border-radius-lg: var(--pgn-border-radius-lg); --pgn-btn-border-radius-base: var(--pgn-border-radius-base); - --pgn-btn-line-height-sm: var(--pgn-core-input-btn-line-height-sm); - --pgn-btn-line-height-base: var(--pgn-core-input-btn-line-height-base); + --pgn-btn-line-height-sm: var(--pgn-input-btn-line-height-sm); + --pgn-btn-line-height-base: var(--pgn-input-btn-line-height-base); --pgn-btn-font-width: var(--pgn-font-weight-normal); - --pgn-btn-font-size-lg: var(--pgn-core-input-btn-font-size-lg); - --pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm); - --pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base); - --pgn-btn-font-family: var(--pgn-core-input-btn-font-family); - --pgn-btn-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x); - --pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); - --pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x); - --pgn-btn-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y); - --pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); - --pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-btn-font-size-lg: var(--pgn-input-btn-font-size-lg); + --pgn-btn-font-size-sm: var(--pgn-input-btn-font-size-sm); + --pgn-btn-font-size-base: var(--pgn-input-btn-font-size-base); + --pgn-btn-font-family: var(--pgn-input-btn-font-family); + --pgn-btn-padding-x-sm: var(--pgn-input-btn-padding-sm-x); + --pgn-btn-padding-x-lg: var(--pgn-input-btn-padding-lg-x); + --pgn-btn-padding-x-base: var(--pgn-input-btn-padding-x); + --pgn-btn-padding-y-sm: var(--pgn-input-btn-padding-sm-y); + --pgn-btn-padding-y-lg: var(--pgn-input-btn-padding-lg-y); + --pgn-btn-padding-y-base: var(--pgn-input-btn-padding-y); --pgn-breadcrumb-inverse-color: var(--pgn-color-white); --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700); --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600); --pgn-breadcrumb-bg: var(--pgn-color-gray-200); --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base); - --pgn-badge-focus-width: var(--pgn-core-input-btn-focus-width); + --pgn-badge-focus-width: var(--pgn-input-btn-focus-width); --pgn-badge-font-weight: var(--pgn-font-weight-bold); --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300); --pgn-annotation-line-height: var(--pgn-line-height-sm); @@ -816,7 +800,6 @@ --pgn-alert-color-title: var(--pgn-color-black); --pgn-alert-font-weight-link: var(--pgn-font-weight-normal); --pgn-alert-border-radius: var(--pgn-border-radius-base); - --pgn-component-active-color: var(--pgn-color-white); --pgn-color-dark-500: var(--pgn-color-dark-base); --pgn-color-light-500: var(--pgn-color-light-base); --pgn-color-danger-base: var(--pgn-color-red); @@ -827,25 +810,8 @@ --pgn-color-secondary-base: var(--pgn-color-gray-700); --pgn-color-primary-500: var(--pgn-color-primary-base); --pgn-color-gray-500: var(--pgn-color-gray-base); - --pgn-body-color: var(--pgn-color-gray-700); - --pgn-body-bg: var(--pgn-color-white); - --pgn-border-hr-margin-y: var(--pgn-core-spacer); - --pgn-border-hr-width: var(--pgn-border-width); - --pgn-border-hr-color: rgba(var(--pgn-color-black), .1); - --pgn-border-color: var(--pgn-color-gray-200); - --pgn-link-brand-inline-color: var(--pgn-color-brand-500); - --pgn-link-brand-color: var(--pgn-color-brand-500); - --pgn-link-muted-inline-color: var(--pgn-color-primary-500); - --pgn-link-muted-color: var(--pgn-color-primary-500); - --pgn-list-group-action-active-color: var(--pgn-body-color); - --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); - --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); - --pgn-list-group-active-color-base: var(--pgn-component-active-color); + --pgn-color-background-base: var(--pgn-color-white); --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); - --pgn-table-dark-color-border: var(--pgn-table-dark-bg-base); - --pgn-table-dark-color-hover: var(--pgn-table-dark-color-base); - --pgn-table-border-color: var(--pgn-border-color); - --pgn-table-color-base: var(--pgn-body-color); --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); --pgn-search-field-border-color-base: var(--pgn-color-gray-500); --pgn-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500); @@ -856,7 +822,7 @@ --pgn-popover-body-color: var(--pgn-body-color); --pgn-popover-header-color: var(--pgn-headings-color); --pgn-pagination-focus-color-base: var(--pgn-color-primary-500); - --pgn-pagination-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow); + --pgn-pagination-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow); --pgn-pagination-color-disabled: var(--pgn-color-gray-500); --pgn-pagination-color-active: var(--pgn-component-active-color); --pgn-navbar-dark-brand-color-hover: var(--pgn-navbar-dark-color-active); @@ -865,14 +831,23 @@ --pgn-navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2); --pgn-navbar-brand-height: calc(var(--pgn-navbar-brand-font-size) * var(--pgn-line-height-base)); --pgn-nav-pills-link-link-active-color: var(--pgn-component-active-color); - --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg); --pgn-nav-tabs-link-active-color-border: transparent transparent var(--pgn-color-primary-500); --pgn-nav-tabs-link-active-color-base: var(--pgn-color-primary-500); --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color); --pgn-modal-header-border-color: var(--pgn-border-color); --pgn-modal-footer-border-width: var(--pgn-modal-header-border-width); --pgn-image-figure-caption-color: var(--pgn-color-gray-500); - --pgn-image-thumbnail-bg: var(--pgn-body-bg); + --pgn-text-muted: var(--pgn-color-gray-500); + --pgn-list-group-action-active-color: var(--pgn-body-color); + --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); + --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); + --pgn-list-group-active-color-base: var(--pgn-component-active-color); + --pgn-link-brand-inline-color: var(--pgn-color-brand-500); + --pgn-link-brand-color: var(--pgn-color-brand-500); + --pgn-link-muted-inline-color: var(--pgn-color-primary-500); + --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-component-active-bg: var(--pgn-color-primary-500); + --pgn-body-bg: var(--pgn-color-background-base); --pgn-form-custom-file-button-bg: var(--pgn-form-input-group-addon-bg); --pgn-form-custom-file-color: var(--pgn-form-input-color-base); --pgn-form-custom-file-font-family: var(--pgn-form-input-font-family); @@ -882,9 +857,8 @@ --pgn-form-custom-file-bg-disabled: var(--pgn-form-input-bg-disabled); --pgn-form-custom-file-bg-base: var(--pgn-form-input-bg-base); --pgn-form-custom-file-border-color-radius: var(--pgn-form-input-border-radius-base); - --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus); --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-gray-500); - --pgn-form-custom-select-border-box-shadow-focus: var(--pgn-core-input-btn-focus-box-shadow); + --pgn-form-custom-select-border-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow); --pgn-form-custom-select-bg-base: var(--pgn-form-input-bg-base); --pgn-form-custom-select-color-disabled: var(--pgn-color-gray-500); --pgn-form-custom-select-color-base: var(--pgn-form-input-color-base); @@ -900,23 +874,22 @@ --pgn-form-custom-select-padding-y-sm: var(--pgn-form-input-padding-y-sm); --pgn-form-custom-select-padding-y-base: var(--pgn-form-input-padding-y-base); --pgn-form-custom-control-label-color-disabled: var(--pgn-color-gray-500); - --pgn-form-custom-control-indicator-active-color-base: var(--pgn-component-active-color); --pgn-form-custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled); --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base); --pgn-form-input-group-addon-color-base: var(--pgn-form-input-color-base); --pgn-form-input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2)); --pgn-form-input-height-inner-half: calc(var(--pgn-form-input-line-height-base) * .5em + var(--pgn-form-input-padding-y-base)); --pgn-form-input-height-inner-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); - --pgn-form-input-height-sm: calc(var(--pgn-form-input-line-height-sm) * 1em + var(--pgn-core-input-btn-padding-sm-y) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-height-sm: calc(var(--pgn-form-input-line-height-sm) * 1em + var(--pgn-input-btn-padding-sm-y) * 2 + var(--pgn-form-input-border-height)); --pgn-form-input-height-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2 + var(--pgn-form-input-border-height)); --pgn-form-input-focus-color-base: var(--pgn-form-input-color-base); --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base); - --pgn-form-input-box-shadow-focus: var(--pgn-core-input-btn-focus-box-shadow); - --pgn-form-input-border-width: var(--pgn-core-input-btn-border-width); + --pgn-form-input-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow); + --pgn-form-input-border-width: var(--pgn-input-btn-border-width); --pgn-form-input-border-color: var(--pgn-color-gray-500); --pgn-form-input-color-plaintext: var(--pgn-body-color); --pgn-form-input-color-placeholder: var(--pgn-color-gray-500); - --pgn-form-input-line-height-lg: var(--pgn-core-input-btn-line-height-lg); + --pgn-form-input-line-height-lg: var(--pgn-input-btn-line-height-lg); --pgn-form-input-font-weight: var(--pgn-font-weight-base); --pgn-dropzone-restriction-msg-color: var(--pgn-color-gray-500); --pgn-dropzone-border-active: 2px solid var(--pgn-color-primary-500); @@ -930,33 +903,29 @@ --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); - --pgn-btn-border-width: var(--pgn-core-input-btn-border-width); - --pgn-btn-line-height-lg: var(--pgn-core-input-btn-line-height-lg); + --pgn-btn-border-width: var(--pgn-input-btn-border-width); + --pgn-btn-line-height-lg: var(--pgn-input-btn-line-height-lg); --pgn-breadcrumb-inverse-active: var(--pgn-color-light-500); --pgn-breadcrumb-color-active: var(--pgn-color-gray-500); --pgn-breadcrumb-color-base: var(--pgn-color-primary-500); - --pgn-text-muted: var(--pgn-color-gray-500); - --pgn-component-active-bg: var(--pgn-color-primary-500); --pgn-color-danger-500: var(--pgn-color-danger-base); --pgn-color-warning-500: var(--pgn-color-warning-base); --pgn-color-info-500: var(--pgn-color-info-base); --pgn-color-success-500: var(--pgn-color-success-base); --pgn-color-secondary-500: var(--pgn-color-secondary-base); - --pgn-link-inline-color: var(--pgn-color-info-500); - --pgn-link-color: var(--pgn-color-info-500); - --pgn-list-group-active-bg: var(--pgn-component-active-bg); - --pgn-core-input-btn-focus-color: var(--pgn-component-active-bg); - --pgn-table-caption-color: var(--pgn-text-muted); - --pgn-table-color-hover: var(--pgn-table-color-base); --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); --pgn-popover-success-icon-color: var(--pgn-color-success-500); --pgn-pagination-bg-active: var(--pgn-component-active-bg); --pgn-nav-pills-link-link-active-bg: var(--pgn-component-active-bg); + --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg); --pgn-modal-footer-border-color: var(--pgn-modal-header-border-color); --pgn-menu-background-active: var(--pgn-btn-tertiary-bg-active); - --pgn-form-feedback-color-invalid: var(--pgn-color-danger-500); - --pgn-form-feedback-color-valid: var(--pgn-color-success-500); + --pgn-image-thumbnail-bg: var(--pgn-body-bg); + --pgn-list-group-active-bg: var(--pgn-component-active-bg); + --pgn-link-inline-color: var(--pgn-color-info-500); + --pgn-link-color: var(--pgn-color-info-500); + --pgn-input-btn-focus-color: var(--pgn-component-active-bg); --pgn-form-custom-file-button-color: var(--pgn-form-custom-file-color); --pgn-form-custom-file-font-weight: var(--pgn-form-input-font-weight); --pgn-form-custom-file-box-shadow-focus: var(--pgn-form-input-box-shadow-focus); @@ -964,6 +933,7 @@ --pgn-form-custom-file-border-color-base: var(--pgn-form-input-border-color); --pgn-form-custom-file-height-inner: var(--pgn-form-input-height-inner-base); --pgn-form-custom-file-height-base: var(--pgn-form-input-height-base); + --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus); --pgn-form-custom-range-thumb-bg-base: var(--pgn-component-active-bg); --pgn-form-custom-select-height-sm: var(--pgn-form-input-height-sm); --pgn-form-custom-select-border-color-base: var(--pgn-form-input-border-color); @@ -974,25 +944,18 @@ --pgn-form-custom-select-font-weight: var(--pgn-form-input-font-weight); --pgn-form-custom-select-font-height-base: var(--pgn-form-input-height-base); --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-component-active-bg); - --pgn-form-custom-control-indicator-active-bg: var(--pgn-component-active-bg); - --pgn-form-custom-control-indicator-checked-bg-base: var(--pgn-component-active-bg); - --pgn-form-custom-control-indicator-checked-color: var(--pgn-component-active-bg); + --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-component-active-bg); --pgn-form-input-group-addon-color-border: var(--pgn-form-input-border-color); - --pgn-form-input-height-lg: calc(var(--pgn-form-input-line-height-lg) * 1em + var(--pgn-core-input-btn-padding-lg-y) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-height-lg: calc(var(--pgn-form-input-line-height-lg) * 1em + var(--pgn-input-btn-padding-lg-y) * 2 + var(--pgn-form-input-border-height)); --pgn-form-input-focus-color-border: var(--pgn-component-active-bg); --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); - --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); --pgn-pagination-color-base: var(--pgn-link-color); - --pgn-form-feedback-icon-color-invalid: var(--pgn-form-feedback-color-invalid); - --pgn-form-feedback-icon-color-valid: var(--pgn-form-feedback-color-valid); + --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); --pgn-form-custom-file-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-font-height-lg: var(--pgn-form-input-height-lg); --pgn-form-custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg); - --pgn-form-custom-checkbox-indicator-indeterminate-color: var(--pgn-form-custom-control-indicator-checked-color); - --pgn-form-custom-control-indicator-active-color-border: var(--pgn-form-custom-control-indicator-active-bg); --pgn-form-custom-control-indicator-checked-border-color-focus: var(--pgn-form-input-focus-color-border); - --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-form-custom-control-indicator-checked-color); } diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss index 7539956915..0913e42be8 100644 --- a/tokens/build/_variables.scss +++ b/tokens/build/_variables.scss @@ -1,10 +1,6 @@ -$pgn-paragraph-margin-bottom: 1rem !default; $pgn-line-height-sm: 1.5 !default; $pgn-line-height-lg: 1.5 !default; $pgn-line-height-base: 1.5556 !default; -$pgn-headings-line-height: 1.25 !default; -$pgn-headings-font-family: null !default; -$pgn-headings-margin-bottom: .5rem !default; $pgn-font-weight-lead: null !default; $pgn-font-weight-bolder: bolder !default; $pgn-font-weight-bold: 700 !default; @@ -31,50 +27,10 @@ $pgn-font-family-serif: serif !default; $pgn-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" !default; -$pgn-display-line-height-mobile: 3.5rem !default; -$pgn-display-line-height-base: 1 !default; -$pgn-display-size-mobile: 3.25rem !default; -$pgn-display-size-4: 7.5rem !default; -$pgn-display-size-3: 5.625rem !default; -$pgn-display-size-2: 4.875rem !default; -$pgn-display-size-1: 3.75rem !default; $pgn-transition-collapse: height .35s ease !default; $pgn-transition-fade: opacity .15s linear !default; $pgn-transition-base: all .2s ease-in-out !default; -$pgn-link-emphasized-hover-darken-percentage: 15% !default; -$pgn-link-brand-inline-hover-decoration-color: #003C5E !default; -$pgn-link-brand-inline-hover-decoration: underline !default; -$pgn-link-brand-inline-hover-color: #003C5E !default; -$pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3) !default; -$pgn-link-brand-inline-decoration: underline !default; -$pgn-link-brand-hover-decoration: underline !default; -$pgn-link-brand-hover-color: #51002B !default; -$pgn-link-brand-decoration: none !default; -$pgn-link-muted-inline-hover-decoration-color: #020911 !default; -$pgn-link-muted-inline-hover-decoration: underline !default; -$pgn-link-muted-inline-hover-color: #020911 !default; -$pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3) !default; -$pgn-link-muted-inline-decoration: underline !default; -$pgn-link-muted-hover-decoration: underline !default; -$pgn-link-muted-hover-color: #020911 !default; -$pgn-link-muted-decoration: none !default; -$pgn-link-inline-hover-decoration-color: #003C5E !default; -$pgn-link-inline-hover-decoration: underline !default; -$pgn-link-inline-hover-color: #003C5E !default; -$pgn-link-inline-decoration-color: rgba(0, 109, 170, .3) !default; -$pgn-link-inline-decoration: underline !default; -$pgn-link-hover-decoration: underline !default; -$pgn-link-hover-color: #003C5E !default; -$pgn-link-decoration: none !default; -$pgn-zindex-tooltip: 1070 !default; -$pgn-zindex-popover: 1060 !default; -$pgn-zindex-modal: 1050 !default; -$pgn-zindex-modal-backdrop: 1040 !default; -$pgn-zindex-sheet: 1032 !default; -$pgn-zindex-sheet-backdrop: 1031 !default; -$pgn-zindex-fixed: 1030 !default; -$pgn-zindex-sticky: 1020 !default; -$pgn-zindex-dropdown: 1000 !default; +$pgn-spacer-base: 1rem !default; $pgn-spacing-base-5-5: 4rem !default; $pgn-spacing-base-4-5: 2rem !default; $pgn-spacing-base-3-5: 1.25rem !default; @@ -87,22 +43,22 @@ $pgn-spacing-base-3: 1rem !default; $pgn-spacing-base-2: .5rem !default; $pgn-spacing-base-1: .25rem !default; $pgn-spacing-base-0: 0 !default; -$pgn-size-base-100: 100rem !default; -$pgn-size-base-75: 75rem !default; -$pgn-size-base-50: 50rem !default; -$pgn-size-base-25: 25rem !default; -$pgn-list-group-item-padding-x: 1.25rem !default; -$pgn-list-group-item-padding-y: .75rem !default; -$pgn-list-group-color: null !default; $pgn-grid-row-columns: 6 !default; $pgn-grid-gutter-width: 24px !default; $pgn-grid-columns: 12 !default; -$pgn-breakpoint-xxl: 1400px !default; -$pgn-breakpoint-xl: 1200px !default; -$pgn-breakpoint-lg: 992px !default; -$pgn-breakpoint-md: 768px !default; -$pgn-breakpoint-sm: 576px !default; -$pgn-breakpoint-xs: 0 !default; +$pgn-zindex-fixed: 1030 !default; +$pgn-zindex-sticky: 1020 !default; +$pgn-zindex-2000: 2000 !default; +$pgn-zindex-1800: 1800 !default; +$pgn-zindex-1600: 1600 !default; +$pgn-zindex-1400: 1400 !default; +$pgn-zindex-1200: 1200 !default; +$pgn-zindex-1000: 1000 !default; +$pgn-zindex-800: 800 !default; +$pgn-zindex-600: 600 !default; +$pgn-zindex-400: 400 !default; +$pgn-zindex-200: 200 !default; +$pgn-zindex-0: 0 !default; $pgn-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default; @@ -136,23 +92,23 @@ $pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem r $pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default; $pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default; -$pgn-core-list-inline-padding: .5rem !default; -$pgn-core-mark-bg: #FFF243 !default; -$pgn-core-mark-padding: .2em !default; -$pgn-core-input-btn-focus-width: 1px !default; -$pgn-core-input-btn-line-height-sm: 1.4286 !default; -$pgn-core-input-btn-line-height-base: 1.3333 !default; -$pgn-core-input-btn-font-size-lg: 1.325rem !default; -$pgn-core-input-btn-font-size-sm: .875rem !default; -$pgn-core-input-btn-font-size-base: 1.125rem !default; -$pgn-core-input-btn-font-family: inherit !default; -$pgn-core-input-btn-padding-lg-x: 1.25rem !default; -$pgn-core-input-btn-padding-lg-y: .6875rem !default; -$pgn-core-input-btn-padding-sm-x: .75rem !default; -$pgn-core-input-btn-padding-sm-y: .4375rem !default; -$pgn-core-input-btn-padding-x: 1rem !default; -$pgn-core-input-btn-padding-y: .5625rem !default; -$pgn-core-spacer: 1rem !default; +$pgn-display-line-height-mobile: 3.5rem !default; +$pgn-display-line-height-base: 1 !default; +$pgn-display-size-mobile: 3.25rem !default; +$pgn-display-size-4: 7.5rem !default; +$pgn-display-size-3: 5.625rem !default; +$pgn-display-size-2: 4.875rem !default; +$pgn-display-size-1: 3.75rem !default; +$pgn-breakpoint-xxl: 1400px !default; +$pgn-breakpoint-xl: 1200px !default; +$pgn-breakpoint-lg: 992px !default; +$pgn-breakpoint-md: 768px !default; +$pgn-breakpoint-sm: 576px !default; +$pgn-breakpoint-xs: 0 !default; +$pgn-border-radius-sm: .25rem !default; +$pgn-border-radius-lg: .425rem !default; +$pgn-border-radius-base: .375rem !default; +$pgn-border-width: 1px !default; $pgn-tooltip-arrow-height: .4rem !default; $pgn-tooltip-arrow-width: .8rem !default; $pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; @@ -175,17 +131,6 @@ $pgn-toast-padding-x: .75rem !default; $pgn-toast-max-width: 400px !default; $pgn-tabs-notification-width: 1rem !default; $pgn-tabs-notification-height: 1rem !default; -$pgn-table-th-font-weight: null !default; -$pgn-table-level-border: -6 !default; -$pgn-table-level-bg: -9 !default; -$pgn-table-striped-order: odd !default; -$pgn-table-dark-bg-hover: rgba(255, 255, 255, .075) !default; -$pgn-table-dark-bg-accent: rgba(255, 255, 255, .05) !default; -$pgn-table-bg-hover: rgba(0, 0, 0, .075) !default; -$pgn-table-bg-accent: rgba(0, 0, 0, .05) !default; -$pgn-table-bg-base: null !default; -$pgn-table-cell-padding-sm: .3rem !default; -$pgn-table-cell-padding-base: .75rem !default; $pgn-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default; $pgn-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default; $pgn-sticky-offset: 0 !default; @@ -194,8 +139,8 @@ $pgn-spinner-sm-border-width: .2em !default; $pgn-spinner-sm-width: 1rem !default; $pgn-spinner-border-width: .25em !default; $pgn-spinner-width: 2rem !default; -$pgn-selectable-box-cols-number-max: 12 !default; -$pgn-selectable-box-cols-number-min: 1 !default; +$pgn-sheet-zindex-main: 1032 !default; +$pgn-sheet-zindex-backdrop: 1031 !default; $pgn-selectable-box-box-space: .75rem !default; $pgn-selectable-box-border-radius: .25rem !default; $pgn-selectable-box-padding: 1rem !default; @@ -220,6 +165,7 @@ $pgn-product-tour-checkpoint-zindex: 1060 !default; $pgn-product-tour-checkpoint-width-max: 480px !default; $pgn-product-tour-checkpoint-width-arrow: 15px !default; $pgn-product-tour-checkpoint-width-border: 8px !default; +$pgn-popover-zindex: 1060 !default; $pgn-popover-arrow-height: .5rem !default; $pgn-popover-arrow-width: 1rem !default; $pgn-popover-icon-width: 1rem !default; @@ -228,7 +174,6 @@ $pgn-popover-icon-margin-right: .5rem !default; $pgn-popover-header-padding-x: 1rem !default; $pgn-popover-header-padding-y: .5rem !default; $pgn-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; -$pgn-popover-border-color: rgba(0, 0, 0, .2) !default; $pgn-popover-max-width: 480px !default; $pgn-reduced-dropdown-width-min: 6rem !default; $pgn-reduced-dropdown-height-max: 60vh !default; @@ -257,8 +202,6 @@ $pgn-navbar-light-toggler-border-color: rgba(0, 0, 0, .1) !default; $pgn-navbar-light-color-disabled: rgba(0, 0, 0, .3) !default; $pgn-navbar-light-color-active: rgba(0, 0, 0, .9) !default; $pgn-navbar-light-color-hover: rgba(0, 0, 0, .7) !default; -$pgn-navbar-light-color-base: rgba(0, 0, 0, .5) !default; -$pgn-navbar-dark-color-base: rgba(255, 255, 255, .5) !default; $pgn-navbar-toggler-padding-x: .75rem !default; $pgn-navbar-toggler-padding-y: .25rem !default; $pgn-navbar-nav-scroll-max-height: 75vh !default; @@ -268,6 +211,7 @@ $pgn-nav-tabs-border-width: 2px !default; $pgn-nav-link-font-weight: 500 !default; $pgn-nav-link-padding-x: 1rem !default; $pgn-nav-link-padding-y: .5rem !default; +$pgn-modal-zindex: 1050 !default; $pgn-modal-transform-scale: scale(1.02) !default; $pgn-modal-transform-show: none !default; $pgn-modal-transform-fade: translate(0, -50px) !default; @@ -278,6 +222,7 @@ $pgn-modal-lg: 800px !default; $pgn-modal-xl: 1140px !default; $pgn-modal-header-padding-x: 1.5rem !default; $pgn-modal-header-padding-y: 1rem !default; +$pgn-modal-backdrop-zindex: 1040 !default; $pgn-modal-backdrop-opacity: .5 !default; $pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15) !default; $pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5) !default; @@ -304,6 +249,57 @@ $pgn-icon-lg: 1.75rem !default; $pgn-icon-md: 1.5rem !default; $pgn-icon-sm: 1.25rem !default; $pgn-icon-inline: .8em !default; +$pgn-mark-bg: #FFF243 !default; +$pgn-mark-padding: .2em !default; +$pgn-paragraph-margin-bottom: 1rem !default; +$pgn-list-group-item-padding-x: 1.25rem !default; +$pgn-list-group-item-padding-y: .75rem !default; +$pgn-list-group-color: null !default; +$pgn-list-inline-padding: .5rem !default; +$pgn-link-emphasized-hover-darken-percentage: 15% !default; +$pgn-link-brand-inline-hover-decoration-color: #003C5E !default; +$pgn-link-brand-inline-hover-decoration: underline !default; +$pgn-link-brand-inline-hover-color: #003C5E !default; +$pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3) !default; +$pgn-link-brand-inline-decoration: underline !default; +$pgn-link-brand-hover-decoration: underline !default; +$pgn-link-brand-hover-color: #51002B !default; +$pgn-link-brand-decoration: none !default; +$pgn-link-muted-inline-hover-decoration-color: #020911 !default; +$pgn-link-muted-inline-hover-decoration: underline !default; +$pgn-link-muted-inline-hover-color: #020911 !default; +$pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3) !default; +$pgn-link-muted-inline-decoration: underline !default; +$pgn-link-muted-hover-decoration: underline !default; +$pgn-link-muted-hover-color: #020911 !default; +$pgn-link-muted-decoration: none !default; +$pgn-link-inline-hover-decoration-color: #003C5E !default; +$pgn-link-inline-hover-decoration: underline !default; +$pgn-link-inline-hover-color: #003C5E !default; +$pgn-link-inline-decoration-color: rgba(0, 109, 170, .3) !default; +$pgn-link-inline-decoration: underline !default; +$pgn-link-hover-decoration: underline !default; +$pgn-link-hover-color: #003C5E !default; +$pgn-link-decoration: none !default; +$pgn-input-btn-focus-width: 1px !default; +$pgn-input-btn-line-height-sm: 1.4286 !default; +$pgn-input-btn-line-height-base: 1.3333 !default; +$pgn-input-btn-font-size-lg: 1.325rem !default; +$pgn-input-btn-font-size-sm: .875rem !default; +$pgn-input-btn-font-size-base: 1.125rem !default; +$pgn-input-btn-font-family: inherit !default; +$pgn-input-btn-padding-lg-x: 1.25rem !default; +$pgn-input-btn-padding-lg-y: .6875rem !default; +$pgn-input-btn-padding-sm-x: .75rem !default; +$pgn-input-btn-padding-sm-y: .4375rem !default; +$pgn-input-btn-padding-x: 1rem !default; +$pgn-input-btn-padding-y: .5625rem !default; +$pgn-headings-line-height: 1.25 !default; +$pgn-headings-font-family: null !default; +$pgn-headings-margin-bottom: .5rem !default; +$pgn-caret-spacing: .255em !default; +$pgn-caret-vertical-align: .255em !default; +$pgn-caret-width: .3em !default; $pgn-form-select-icon-padding: .5625rem !default; $pgn-form-control-icon-width: 32px !default; $pgn-form-feedback-tooltip-opacity: .9 !default; @@ -352,6 +348,7 @@ $pgn-form-input-width-hover: 1px !default; $pgn-form-input-focus-width: 1px !default; $pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075) !default; $pgn-dropzone-padding: 1.5rem !default; +$pgn-dropdown-zindex: 1000 !default; $pgn-dropdown-border-color: rgba(0, 0, 0, .15) !default; $pgn-dropdown-spacer: .125rem !default; $pgn-dropdown-padding-y-item: .5rem !default; @@ -362,7 +359,8 @@ $pgn-dropdown-min-width: 18rem !default; $pgn-data-table-pagination-dropdown-min-width: 6rem !default; $pgn-data-table-pagination-dropdown-max-height: 60vh !default; $pgn-data-table-footer-position: center !default; -$pgn-data-table-padding-cell: .5rem .75rem !default; +$pgn-data-table-padding-head-cell: .5rem .75rem !default; +$pgn-data-table-padding-cell: .75rem !default; $pgn-data-table-padding-small: .5rem !default; $pgn-data-table-padding-y: .75rem !default; $pgn-data-table-padding-x: .75rem !default; @@ -393,7 +391,6 @@ $pgn-chip-border-radius-base: .4375rem !default; $pgn-chip-margin-inline: .5rem !default; $pgn-chip-padding-x: .5rem !default; $pgn-chip-padding-y: .125rem !default; -$pgn-carousel-transition-duration: .6s !default; $pgn-carousel-caption-width: 70% !default; $pgn-carousel-indicator-transition: opacity .6s ease !default; $pgn-carousel-indicator-spacer: 3px !default; @@ -433,7 +430,6 @@ $pgn-btn-transition: null !default; $pgn-btn-block-spacing-y: .5rem !default; $pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1) !default; $pgn-btn-tertiary-inverse-bg-base: transparent !default; -$pgn-btn-tertiary-bg-base: transparent !default; $pgn-btn-disabled-opacity: .65 !default; $pgn-btn-focus-gap: 1px !default; $pgn-btn-focus-width: 2px !default; @@ -583,15 +579,6 @@ $pgn-color-red: #C32D3A !default; $pgn-color-blue: #23419F !default; $pgn-color-black: #000000 !default; $pgn-color-white: #FFFFFF !default; -$pgn-caret-spacing: .255em !default; -$pgn-caret-vertical-align: .255em !default; -$pgn-caret-width: .3em !default; -$pgn-border-radius-sm: .25rem !default; -$pgn-border-radius-lg: .425rem !default; -$pgn-border-radius-base: .375rem !default; -$pgn-border-width: 1px !default; -$pgn-headings-color: $pgn-color-black !default; -$pgn-headings-font-weight: $pgn-font-weight-bold !default; $pgn-font-weight-base: $pgn-font-weight-normal !default; $pgn-font-size-lead: calc($pgn-font-size-base * 1.25) !default; $pgn-font-size-mobile-h6: $pgn-font-size-h6 !default; @@ -604,20 +591,7 @@ $pgn-display-weight-4: $pgn-font-weight-bold !default; $pgn-display-weight-3: $pgn-font-weight-bold !default; $pgn-display-weight-2: $pgn-font-weight-bold !default; $pgn-display-weight-1: $pgn-font-weight-bold !default; -$pgn-list-group-action-active-bg: $pgn-color-gray-200 !default; -$pgn-list-group-action-color-base: $pgn-color-gray-700 !default; -$pgn-list-group-disabled-color: $pgn-color-gray-600 !default; -$pgn-list-group-border-radius: $pgn-border-radius-base !default; -$pgn-list-group-border-width: $pgn-border-width !default; -$pgn-list-group-border-color: rgba($pgn-color-black, .125) !default; -$pgn-list-group-bg-hover: $pgn-color-gray-100 !default; -$pgn-list-group-bg-base: $pgn-color-white !default; -$pgn-core-dt-font-weight: $pgn-font-weight-bold !default; -$pgn-core-blockquote-font-size: calc($pgn-font-size-base * 1.25) !default; -$pgn-core-blockquote-small-font-size: $pgn-font-size-small-base !default; -$pgn-core-input-btn-border-width: $pgn-border-width !default; -$pgn-core-input-btn-focus-box-shadow: 0 0 0 $pgn-core-input-btn-focus-width $pgn-core-input-btn-focus-color !default; -$pgn-core-input-btn-line-height-lg: $pgn-line-height-lg !default; +$pgn-border-color: $pgn-color-gray-200 !default; $pgn-tooltip-arrow-color-light: $pgn-color-white !default; $pgn-tooltip-border-radius: $pgn-border-radius-base !default; $pgn-tooltip-bg-light: $pgn-color-white !default; @@ -629,12 +603,6 @@ $pgn-toast-header-color-background: $pgn-color-gray-700 !default; $pgn-toast-header-color-base: $pgn-color-white !default; $pgn-toast-color-background: $pgn-color-gray-700 !default; $pgn-tabs-notification-font-size: $pgn-font-size-xs !default; -$pgn-table-dark-bg-base: $pgn-color-gray-700 !default; -$pgn-table-dark-color-base: $pgn-color-white !default; -$pgn-table-border-width: $pgn-border-width !default; -$pgn-table-bg-head: $pgn-color-gray-100 !default; -$pgn-table-bg-active: $pgn-table-bg-hover !default; -$pgn-table-color-head: $pgn-color-gray-700 !default; $pgn-spinner-sm-height: $pgn-spinner-sm-width !default; $pgn-spinner-height: $pgn-spinner-width !default; $pgn-search-field-border-color-focus: $pgn-color-black !default; @@ -652,7 +620,6 @@ $pgn-popover-warning-bg: $pgn-color-warning-100 !default; $pgn-popover-success-bg: $pgn-color-success-100 !default; $pgn-popover-body-padding-x: $pgn-popover-header-padding-x !default; $pgn-popover-body-padding-y: $pgn-popover-header-padding-y !default; -$pgn-popover-header-bg: $pgn-color-white !default; $pgn-popover-border-border: $pgn-border-width !default; $pgn-popover-border-radius: $pgn-border-radius-sm !default; $pgn-popover-bg: $pgn-color-white !default; @@ -678,9 +645,9 @@ $pgn-navbar-dark-color-hover: rgba($pgn-color-white, .75) !default; $pgn-navbar-toggler-font-size: $pgn-font-size-lg !default; $pgn-navbar-brand-font-size: $pgn-font-size-lg !default; $pgn-navbar-nav-link-height: calc($pgn-font-size-base * $pgn-line-height-base + .5rem * 2) !default; -$pgn-navbar-padding-x-base: $pgn-core-spacer !default; -$pgn-navbar-padding-y: calc($pgn-core-spacer / 2) !default; -$pgn-nav-divider-margin-y: calc($pgn-core-spacer / 2) !default; +$pgn-navbar-padding-x-base: $pgn-spacer-base !default; +$pgn-navbar-padding-y: calc($pgn-spacer-base / 2) !default; +$pgn-nav-divider-margin-y: calc($pgn-spacer-base / 2) !default; $pgn-nav-divider-color: $pgn-color-gray-100 !default; $pgn-nav-pills-border-radius: $pgn-border-radius-base !default; $pgn-nav-tabs-link-hover-bg: $pgn-color-light-400 !default; @@ -694,12 +661,32 @@ $pgn-modal-content-border-radius: $pgn-border-radius-lg !default; $pgn-modal-content-bg: $pgn-color-white !default; $pgn-modal-title-line-height: $pgn-line-height-base !default; $pgn-modal-footer-padding-base: $pgn-modal-footer-padding-x $pgn-modal-footer-padding-y !default; -$pgn-menu-background-base: $pgn-btn-tertiary-bg-base !default; $pgn-image-thumbnail-border-radius: $pgn-border-radius-base !default; $pgn-image-thumbnail-border-color: $pgn-color-gray-200 !default; $pgn-image-thumbnail-border-width: $pgn-border-width !default; $pgn-icon-button-accent-color: $pgn-color-white !default; $pgn-icon-button-diameter-inline: calc($pgn-line-height-base + .1em) !default; +$pgn-blockquote-font-size: calc($pgn-font-size-base * 1.25) !default; +$pgn-blockquote-small-font-size: $pgn-font-size-small-base !default; +$pgn-list-group-action-active-bg: $pgn-color-gray-200 !default; +$pgn-list-group-action-color-base: $pgn-color-gray-700 !default; +$pgn-list-group-disabled-color: $pgn-color-gray-600 !default; +$pgn-list-group-border-radius: $pgn-border-radius-base !default; +$pgn-list-group-border-width: $pgn-border-width !default; +$pgn-list-group-border-color: rgba($pgn-color-black, .125) !default; +$pgn-list-group-bg-hover: $pgn-color-gray-100 !default; +$pgn-list-group-bg-base: $pgn-color-white !default; +$pgn-dt-font-weight: $pgn-font-weight-bold !default; +$pgn-input-btn-border-width: $pgn-border-width !default; +$pgn-input-btn-focus-box-shadow: 0 0 0 $pgn-input-btn-focus-width $pgn-input-btn-focus-color !default; +$pgn-input-btn-line-height-lg: $pgn-line-height-lg !default; +$pgn-hr-border-margin-y: $pgn-spacer-base !default; +$pgn-hr-border-width: $pgn-border-width !default; +$pgn-hr-border-color: rgba($pgn-color-black, .1) !default; +$pgn-headings-color: $pgn-color-black !default; +$pgn-headings-font-weight: $pgn-font-weight-bold !default; +$pgn-component-active-color: $pgn-color-white !default; +$pgn-body-color: $pgn-color-gray-700 !default; $pgn-form-feedback-tooltip-border-radius: $pgn-border-radius-base !default; $pgn-form-feedback-tooltip-line-height: $pgn-line-height-base !default; $pgn-form-feedback-tooltip-font-size: $pgn-font-size-sm !default; @@ -712,7 +699,6 @@ $pgn-form-custom-range-track-bg: $pgn-color-gray-300 !default; $pgn-form-custom-select-border-radius: $pgn-border-radius-base !default; $pgn-form-custom-select-border-width-focus: $pgn-form-input-focus-width !default; $pgn-form-custom-select-bg-disabled: $pgn-color-gray-100 !default; -$pgn-form-custom-select-indicator-color: $pgn-color-gray-700 !default; $pgn-form-custom-switch-indicator-size: calc($pgn-form-custom-control-indicator-size - $pgn-form-custom-control-indicator-border-width * 4) !default; $pgn-form-custom-switch-indicator-border-radius: calc($pgn-form-custom-control-indicator-size / 2) !default; $pgn-form-custom-switch-width: calc($pgn-form-custom-control-indicator-size * 1.75) !default; @@ -725,18 +711,18 @@ $pgn-form-input-border-radius-base: $pgn-border-radius-base !default; $pgn-form-input-color-base: $pgn-color-gray-700 !default; $pgn-form-input-bg-disabled: $pgn-color-gray-100 !default; $pgn-form-input-bg-base: $pgn-color-white !default; -$pgn-form-input-line-height-sm: $pgn-core-input-btn-line-height-sm !default; -$pgn-form-input-line-height-base: $pgn-core-input-btn-line-height-base !default; -$pgn-form-input-font-size-lg: $pgn-core-input-btn-font-size-lg !default; -$pgn-form-input-font-size-sm: $pgn-core-input-btn-font-size-sm !default; -$pgn-form-input-font-size-base: $pgn-core-input-btn-font-size-base !default; -$pgn-form-input-font-family: $pgn-core-input-btn-font-family !default; -$pgn-form-input-padding-x-lg: $pgn-core-input-btn-padding-lg-x !default; -$pgn-form-input-padding-x-sm: $pgn-core-input-btn-padding-sm-x !default; -$pgn-form-input-padding-x-base: $pgn-core-input-btn-padding-x !default; -$pgn-form-input-padding-y-lg: $pgn-core-input-btn-padding-lg-y !default; -$pgn-form-input-padding-y-sm: $pgn-core-input-btn-padding-sm-y !default; -$pgn-form-input-padding-y-base: $pgn-core-input-btn-padding-y !default; +$pgn-form-input-line-height-sm: $pgn-input-btn-line-height-sm !default; +$pgn-form-input-line-height-base: $pgn-input-btn-line-height-base !default; +$pgn-form-input-font-size-lg: $pgn-input-btn-font-size-lg !default; +$pgn-form-input-font-size-sm: $pgn-input-btn-font-size-sm !default; +$pgn-form-input-font-size-base: $pgn-input-btn-font-size-base !default; +$pgn-form-input-font-family: $pgn-input-btn-font-family !default; +$pgn-form-input-padding-x-lg: $pgn-input-btn-padding-lg-x !default; +$pgn-form-input-padding-x-sm: $pgn-input-btn-padding-sm-x !default; +$pgn-form-input-padding-x-base: $pgn-input-btn-padding-x !default; +$pgn-form-input-padding-y-lg: $pgn-input-btn-padding-lg-y !default; +$pgn-form-input-padding-y-sm: $pgn-input-btn-padding-sm-y !default; +$pgn-form-input-padding-y-base: $pgn-input-btn-padding-y !default; $pgn-dropzone-restriction-msg-font-size: $pgn-font-size-small-x !default; $pgn-dropzone-border-error: 2px solid $pgn-color-danger-300 !default; $pgn-dropzone-border-focus: 2px solid $pgn-color-info-300 !default; @@ -745,7 +731,7 @@ $pgn-dropdown-link-hover-bg: $pgn-color-light-300 !default; $pgn-dropdown-link-hover-color: $pgn-color-gray-900 !default; $pgn-dropdown-link-color: $pgn-color-gray-900 !default; $pgn-dropdown-box-shadow: 0 .5rem 1rem rgba($pgn-color-black, .175) !default; -$pgn-dropdown-divider-margin-y: calc($pgn-core-spacer / 2) !default; +$pgn-dropdown-divider-margin-y: calc($pgn-spacer-base / 2) !default; $pgn-dropdown-divider-bg: $pgn-color-gray-100 !default; $pgn-dropdown-border-radius-base: $pgn-border-radius-base !default; $pgn-dropdown-border-width: $pgn-border-width !default; @@ -767,10 +753,8 @@ $pgn-close-button-text-shadow: 0 1px 0 $pgn-color-white !default; $pgn-close-button-color: $pgn-color-black !default; $pgn-close-button-font-weight: $pgn-font-weight-bold !default; $pgn-close-button-font-size: calc($pgn-font-size-base * 1.5) !default; -$pgn-carousel-transition-base: transform $pgn-carousel-transition-duration ease-in-out !default; $pgn-carousel-caption-color: $pgn-color-white !default; $pgn-carousel-indicator-active-bg: $pgn-color-white !default; -$pgn-carousel-control-color: $pgn-color-white !default; $pgn-card-footer-text-font-size: $pgn-font-size-small-x !default; $pgn-card-divider-margin-y: $pgn-card-spacer-y !default; $pgn-card-divider-bg: $pgn-color-light-400 !default; @@ -788,25 +772,25 @@ $pgn-btn-box-shadow-base: inset 0 1px 0 rgba($pgn-color-white, .15), 0 1px 1px r $pgn-btn-border-radius-sm: $pgn-border-radius-sm !default; $pgn-btn-border-radius-lg: $pgn-border-radius-lg !default; $pgn-btn-border-radius-base: $pgn-border-radius-base !default; -$pgn-btn-line-height-sm: $pgn-core-input-btn-line-height-sm !default; -$pgn-btn-line-height-base: $pgn-core-input-btn-line-height-base !default; +$pgn-btn-line-height-sm: $pgn-input-btn-line-height-sm !default; +$pgn-btn-line-height-base: $pgn-input-btn-line-height-base !default; $pgn-btn-font-width: $pgn-font-weight-normal !default; -$pgn-btn-font-size-lg: $pgn-core-input-btn-font-size-lg !default; -$pgn-btn-font-size-sm: $pgn-core-input-btn-font-size-sm !default; -$pgn-btn-font-size-base: $pgn-core-input-btn-font-size-base !default; -$pgn-btn-font-family: $pgn-core-input-btn-font-family !default; -$pgn-btn-padding-x-sm: $pgn-core-input-btn-padding-sm-x !default; -$pgn-btn-padding-x-lg: $pgn-core-input-btn-padding-lg-x !default; -$pgn-btn-padding-x-base: $pgn-core-input-btn-padding-x !default; -$pgn-btn-padding-y-sm: $pgn-core-input-btn-padding-sm-y !default; -$pgn-btn-padding-y-lg: $pgn-core-input-btn-padding-lg-y !default; -$pgn-btn-padding-y-base: $pgn-core-input-btn-padding-y !default; +$pgn-btn-font-size-lg: $pgn-input-btn-font-size-lg !default; +$pgn-btn-font-size-sm: $pgn-input-btn-font-size-sm !default; +$pgn-btn-font-size-base: $pgn-input-btn-font-size-base !default; +$pgn-btn-font-family: $pgn-input-btn-font-family !default; +$pgn-btn-padding-x-sm: $pgn-input-btn-padding-sm-x !default; +$pgn-btn-padding-x-lg: $pgn-input-btn-padding-lg-x !default; +$pgn-btn-padding-x-base: $pgn-input-btn-padding-x !default; +$pgn-btn-padding-y-sm: $pgn-input-btn-padding-sm-y !default; +$pgn-btn-padding-y-lg: $pgn-input-btn-padding-lg-y !default; +$pgn-btn-padding-y-base: $pgn-input-btn-padding-y !default; $pgn-breadcrumb-inverse-color: $pgn-color-white !default; $pgn-breadcrumb-inverse-spacer: $pgn-color-light-700 !default; $pgn-breadcrumb-color-divider: $pgn-color-gray-600 !default; $pgn-breadcrumb-bg: $pgn-color-gray-200 !default; $pgn-breadcrumb-border-radius-base: $pgn-border-radius-base !default; -$pgn-badge-focus-width: $pgn-core-input-btn-focus-width !default; +$pgn-badge-focus-width: $pgn-input-btn-focus-width !default; $pgn-badge-font-weight: $pgn-font-weight-bold !default; $pgn-avatar-border-base: solid 1px $pgn-color-light-300 !default; $pgn-annotation-line-height: $pgn-line-height-sm !default; @@ -815,7 +799,6 @@ $pgn-alert-color-content: $pgn-color-gray-700 !default; $pgn-alert-color-title: $pgn-color-black !default; $pgn-alert-font-weight-link: $pgn-font-weight-normal !default; $pgn-alert-border-radius: $pgn-border-radius-base !default; -$pgn-component-active-color: $pgn-color-white !default; $pgn-color-dark-500: $pgn-color-dark-base !default; $pgn-color-light-500: $pgn-color-light-base !default; $pgn-color-danger-base: $pgn-color-red !default; @@ -826,25 +809,8 @@ $pgn-color-brand-500: $pgn-color-brand-base !default; $pgn-color-secondary-base: $pgn-color-gray-700 !default; $pgn-color-primary-500: $pgn-color-primary-base !default; $pgn-color-gray-500: $pgn-color-gray-base !default; -$pgn-body-color: $pgn-color-gray-700 !default; -$pgn-body-bg: $pgn-color-white !default; -$pgn-border-hr-margin-y: $pgn-core-spacer !default; -$pgn-border-hr-width: $pgn-border-width !default; -$pgn-border-hr-color: rgba($pgn-color-black, .1) !default; -$pgn-border-color: $pgn-color-gray-200 !default; -$pgn-link-brand-inline-color: $pgn-color-brand-500 !default; -$pgn-link-brand-color: $pgn-color-brand-500 !default; -$pgn-link-muted-inline-color: $pgn-color-primary-500 !default; -$pgn-link-muted-color: $pgn-color-primary-500 !default; -$pgn-list-group-action-active-color: $pgn-body-color !default; -$pgn-list-group-action-color-hover: $pgn-list-group-action-color-base !default; -$pgn-list-group-disabled-bg: $pgn-list-group-bg-base !default; -$pgn-list-group-active-color-base: $pgn-component-active-color !default; +$pgn-color-background-base: $pgn-color-white !default; $pgn-tooltip-arrow-color-base: $pgn-tooltip-bg-base !default; -$pgn-table-dark-color-border: $pgn-table-dark-bg-base !default; -$pgn-table-dark-color-hover: $pgn-table-dark-color-base !default; -$pgn-table-border-color: $pgn-border-color !default; -$pgn-table-color-base: $pgn-body-color !default; $pgn-search-field-input-height-search: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2) !default; $pgn-search-field-border-color-base: $pgn-color-gray-500 !default; $pgn-progress-bar-bar-bg-annotated: $pgn-color-dark-500 !default; @@ -855,7 +821,7 @@ $pgn-popover-arrow-color: $pgn-popover-bg !default; $pgn-popover-body-color: $pgn-body-color !default; $pgn-popover-header-color: $pgn-headings-color !default; $pgn-pagination-focus-color-base: $pgn-color-primary-500 !default; -$pgn-pagination-focus-box-shadow: $pgn-core-input-btn-focus-box-shadow !default; +$pgn-pagination-focus-box-shadow: $pgn-input-btn-focus-box-shadow !default; $pgn-pagination-color-disabled: $pgn-color-gray-500 !default; $pgn-pagination-color-active: $pgn-component-active-color !default; $pgn-navbar-dark-brand-color-hover: $pgn-navbar-dark-color-active !default; @@ -864,14 +830,23 @@ $pgn-navbar-toggler-border-radius: $pgn-btn-border-radius-base !default; $pgn-navbar-brand-padding-y: calc(($pgn-navbar-nav-link-height - $pgn-navbar-brand-height) / 2) !default; $pgn-navbar-brand-height: calc($pgn-navbar-brand-font-size * $pgn-line-height-base) !default; $pgn-nav-pills-link-link-active-color: $pgn-component-active-color !default; -$pgn-nav-tabs-link-active-bg: $pgn-body-bg !default; $pgn-nav-tabs-link-active-color-border: transparent transparent $pgn-color-primary-500 !default; $pgn-nav-tabs-link-active-color-base: $pgn-color-primary-500 !default; $pgn-nav-tabs-link-hover-border-color: transparent transparent $pgn-nav-tabs-border-color !default; $pgn-modal-header-border-color: $pgn-border-color !default; $pgn-modal-footer-border-width: $pgn-modal-header-border-width !default; $pgn-image-figure-caption-color: $pgn-color-gray-500 !default; -$pgn-image-thumbnail-bg: $pgn-body-bg !default; +$pgn-text-muted: $pgn-color-gray-500 !default; +$pgn-list-group-action-active-color: $pgn-body-color !default; +$pgn-list-group-action-color-hover: $pgn-list-group-action-color-base !default; +$pgn-list-group-disabled-bg: $pgn-list-group-bg-base !default; +$pgn-list-group-active-color-base: $pgn-component-active-color !default; +$pgn-link-brand-inline-color: $pgn-color-brand-500 !default; +$pgn-link-brand-color: $pgn-color-brand-500 !default; +$pgn-link-muted-inline-color: $pgn-color-primary-500 !default; +$pgn-link-muted-color: $pgn-color-primary-500 !default; +$pgn-component-active-bg: $pgn-color-primary-500 !default; +$pgn-body-bg: $pgn-color-background-base !default; $pgn-form-custom-file-button-bg: $pgn-form-input-group-addon-bg !default; $pgn-form-custom-file-color: $pgn-form-input-color-base !default; $pgn-form-custom-file-font-family: $pgn-form-input-font-family !default; @@ -881,9 +856,8 @@ $pgn-form-custom-file-padding-y: $pgn-form-input-padding-y-base !default; $pgn-form-custom-file-bg-disabled: $pgn-form-input-bg-disabled !default; $pgn-form-custom-file-bg-base: $pgn-form-input-bg-base !default; $pgn-form-custom-file-border-color-radius: $pgn-form-input-border-radius-base !default; -$pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px $pgn-body-bg, $pgn-form-input-box-shadow-focus !default; $pgn-form-custom-range-thumb-bg-disabled: $pgn-color-gray-500 !default; -$pgn-form-custom-select-border-box-shadow-focus: $pgn-core-input-btn-focus-box-shadow !default; +$pgn-form-custom-select-border-box-shadow-focus: $pgn-input-btn-focus-box-shadow !default; $pgn-form-custom-select-bg-base: $pgn-form-input-bg-base !default; $pgn-form-custom-select-color-disabled: $pgn-color-gray-500 !default; $pgn-form-custom-select-color-base: $pgn-form-input-color-base !default; @@ -899,23 +873,22 @@ $pgn-form-custom-select-padding-y-lg: $pgn-form-input-padding-y-lg !default; $pgn-form-custom-select-padding-y-sm: $pgn-form-input-padding-y-sm !default; $pgn-form-custom-select-padding-y-base: $pgn-form-input-padding-y-base !default; $pgn-form-custom-control-label-color-disabled: $pgn-color-gray-500 !default; -$pgn-form-custom-control-indicator-active-color-base: $pgn-component-active-color !default; $pgn-form-custom-control-indicator-disabled-bg: $pgn-form-input-bg-disabled !default; $pgn-form-custom-control-indicator-bg-base: $pgn-form-input-bg-base !default; $pgn-form-input-group-addon-color-base: $pgn-form-input-color-base !default; $pgn-form-input-height-inner-quarter: calc($pgn-form-input-line-height-base * .25em + calc($pgn-form-input-padding-y-base / 2)) !default; $pgn-form-input-height-inner-half: calc($pgn-form-input-line-height-base * .5em + $pgn-form-input-padding-y-base) !default; $pgn-form-input-height-inner-base: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2) !default; -$pgn-form-input-height-sm: calc($pgn-form-input-line-height-sm * 1em + $pgn-core-input-btn-padding-sm-y * 2 + $pgn-form-input-border-height) !default; +$pgn-form-input-height-sm: calc($pgn-form-input-line-height-sm * 1em + $pgn-input-btn-padding-sm-y * 2 + $pgn-form-input-border-height) !default; $pgn-form-input-height-base: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2 + $pgn-form-input-border-height) !default; $pgn-form-input-focus-color-base: $pgn-form-input-color-base !default; $pgn-form-input-focus-bg: $pgn-form-input-bg-base !default; -$pgn-form-input-box-shadow-focus: $pgn-core-input-btn-focus-box-shadow !default; -$pgn-form-input-border-width: $pgn-core-input-btn-border-width !default; +$pgn-form-input-box-shadow-focus: $pgn-input-btn-focus-box-shadow !default; +$pgn-form-input-border-width: $pgn-input-btn-border-width !default; $pgn-form-input-border-color: $pgn-color-gray-500 !default; $pgn-form-input-color-plaintext: $pgn-body-color !default; $pgn-form-input-color-placeholder: $pgn-color-gray-500 !default; -$pgn-form-input-line-height-lg: $pgn-core-input-btn-line-height-lg !default; +$pgn-form-input-line-height-lg: $pgn-input-btn-line-height-lg !default; $pgn-form-input-font-weight: $pgn-font-weight-base !default; $pgn-dropzone-restriction-msg-color: $pgn-color-gray-500 !default; $pgn-dropzone-border-active: 2px solid $pgn-color-primary-500 !default; @@ -929,33 +902,29 @@ $pgn-dropdown-color-base: $pgn-body-color !default; $pgn-btn-tertiary-bg-active: $pgn-color-light-500 !default; $pgn-btn-tertiary-bg-hover: $pgn-color-light-500 !default; $pgn-btn-disabled-link-color: $pgn-color-gray-500 !default; -$pgn-btn-border-width: $pgn-core-input-btn-border-width !default; -$pgn-btn-line-height-lg: $pgn-core-input-btn-line-height-lg !default; +$pgn-btn-border-width: $pgn-input-btn-border-width !default; +$pgn-btn-line-height-lg: $pgn-input-btn-line-height-lg !default; $pgn-breadcrumb-inverse-active: $pgn-color-light-500 !default; $pgn-breadcrumb-color-active: $pgn-color-gray-500 !default; $pgn-breadcrumb-color-base: $pgn-color-primary-500 !default; -$pgn-text-muted: $pgn-color-gray-500 !default; -$pgn-component-active-bg: $pgn-color-primary-500 !default; $pgn-color-danger-500: $pgn-color-danger-base !default; $pgn-color-warning-500: $pgn-color-warning-base !default; $pgn-color-info-500: $pgn-color-info-base !default; $pgn-color-success-500: $pgn-color-success-base !default; $pgn-color-secondary-500: $pgn-color-secondary-base !default; -$pgn-link-inline-color: $pgn-color-info-500 !default; -$pgn-link-color: $pgn-color-info-500 !default; -$pgn-list-group-active-bg: $pgn-component-active-bg !default; -$pgn-core-input-btn-focus-color: $pgn-component-active-bg !default; -$pgn-table-caption-color: $pgn-text-muted !default; -$pgn-table-color-hover: $pgn-table-color-base !default; $pgn-popover-danger-icon-color: $pgn-color-warning-500 !default; $pgn-popover-warning-icon-color: $pgn-color-warning-500 !default; $pgn-popover-success-icon-color: $pgn-color-success-500 !default; $pgn-pagination-bg-active: $pgn-component-active-bg !default; $pgn-nav-pills-link-link-active-bg: $pgn-component-active-bg !default; +$pgn-nav-tabs-link-active-bg: $pgn-body-bg !default; $pgn-modal-footer-border-color: $pgn-modal-header-border-color !default; $pgn-menu-background-active: $pgn-btn-tertiary-bg-active !default; -$pgn-form-feedback-color-invalid: $pgn-color-danger-500 !default; -$pgn-form-feedback-color-valid: $pgn-color-success-500 !default; +$pgn-image-thumbnail-bg: $pgn-body-bg !default; +$pgn-list-group-active-bg: $pgn-component-active-bg !default; +$pgn-link-inline-color: $pgn-color-info-500 !default; +$pgn-link-color: $pgn-color-info-500 !default; +$pgn-input-btn-focus-color: $pgn-component-active-bg !default; $pgn-form-custom-file-button-color: $pgn-form-custom-file-color !default; $pgn-form-custom-file-font-weight: $pgn-form-input-font-weight !default; $pgn-form-custom-file-box-shadow-focus: $pgn-form-input-box-shadow-focus !default; @@ -963,6 +932,7 @@ $pgn-form-custom-file-border-width: $pgn-form-input-border-width !default; $pgn-form-custom-file-border-color-base: $pgn-form-input-border-color !default; $pgn-form-custom-file-height-inner: $pgn-form-input-height-inner-base !default; $pgn-form-custom-file-height-base: $pgn-form-input-height-base !default; +$pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px $pgn-body-bg, $pgn-form-input-box-shadow-focus !default; $pgn-form-custom-range-thumb-bg-base: $pgn-component-active-bg !default; $pgn-form-custom-select-height-sm: $pgn-form-input-height-sm !default; $pgn-form-custom-select-border-color-base: $pgn-form-input-border-color !default; @@ -973,24 +943,17 @@ $pgn-form-custom-select-feedback-icon-padding-right: calc((1em + 2 * $pgn-form-c $pgn-form-custom-select-font-weight: $pgn-form-input-font-weight !default; $pgn-form-custom-select-font-height-base: $pgn-form-input-height-base !default; $pgn-form-custom-checkbox-indicator-indeterminate-bg: $pgn-component-active-bg !default; -$pgn-form-custom-control-indicator-active-bg: $pgn-component-active-bg !default; -$pgn-form-custom-control-indicator-checked-bg-base: $pgn-component-active-bg !default; -$pgn-form-custom-control-indicator-checked-color: $pgn-component-active-bg !default; +$pgn-form-custom-control-indicator-checked-border-color-base: $pgn-component-active-bg !default; $pgn-form-input-group-addon-color-border: $pgn-form-input-border-color !default; -$pgn-form-input-height-lg: calc($pgn-form-input-line-height-lg * 1em + $pgn-core-input-btn-padding-lg-y * 2 + $pgn-form-input-border-height) !default; +$pgn-form-input-height-lg: calc($pgn-form-input-line-height-lg * 1em + $pgn-input-btn-padding-lg-y * 2 + $pgn-form-input-border-height) !default; $pgn-form-input-focus-color-border: $pgn-component-active-bg !default; $pgn-form-input-border-height: calc($pgn-form-input-border-width * 2) !default; $pgn-dropzone-error-wrapper-color: $pgn-color-danger-500 !default; -$pgn-list-group-active-color-border: $pgn-list-group-active-bg !default; $pgn-pagination-border-color-active: $pgn-pagination-bg-active !default; $pgn-pagination-color-base: $pgn-link-color !default; -$pgn-form-feedback-icon-color-invalid: $pgn-form-feedback-color-invalid !default; -$pgn-form-feedback-icon-color-valid: $pgn-form-feedback-color-valid !default; +$pgn-list-group-active-color-border: $pgn-list-group-active-bg !default; $pgn-form-custom-file-border-color-focus: $pgn-form-input-focus-color-border !default; $pgn-form-custom-select-border-color-focus: $pgn-form-input-focus-color-border !default; $pgn-form-custom-select-font-height-lg: $pgn-form-input-height-lg !default; $pgn-form-custom-checkbox-indicator-indeterminate-border-color: $pgn-form-custom-checkbox-indicator-indeterminate-bg !default; -$pgn-form-custom-checkbox-indicator-indeterminate-color: $pgn-form-custom-control-indicator-checked-color !default; -$pgn-form-custom-control-indicator-active-color-border: $pgn-form-custom-control-indicator-active-bg !default; $pgn-form-custom-control-indicator-checked-border-color-focus: $pgn-form-input-focus-color-border !default; -$pgn-form-custom-control-indicator-checked-border-color-base: $pgn-form-custom-control-indicator-checked-color !default; diff --git a/tokens/build/css-to-scss.json b/tokens/build/css-to-scss.json new file mode 100644 index 0000000000..a51f2e527c --- /dev/null +++ b/tokens/build/css-to-scss.json @@ -0,0 +1 @@ +{"var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-width)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-gutter)":"$form-check-input-gutter","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-grid-gutter-width)":"$form-grid-gutter-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-margin-between)":"$modal-footer-margin-between","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-dialog-margin-base)":"$modal-dialog-margin","var(--pgn-modal-dialog-margin-y-sm-up)":"$modal-dialog-margin-y-sm-up","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-box-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-border)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-width)":"$tooltip-arrow-width","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-component-active-color)":"$component-active-color","var(--pgn-component-active-bg)":"$component-active-bg","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-brand-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"} \ No newline at end of file diff --git a/tokens/build/scss-to-css-components.json b/tokens/build/scss-to-css-components.json deleted file mode 100644 index 303b3a35bd..0000000000 --- a/tokens/build/scss-to-css-components.json +++ /dev/null @@ -1 +0,0 @@ -{"$action-row-gap-x":"--pgn-action-row-gap-x","$action-row-gap-y":"--pgn-action-row-gap-y","$alert-padding-y":"--pgn-alert-padding-y","$alert-padding-x":"--pgn-alert-padding-x","$alert-margin-bottom":"--pgn-alert-margin-bottom","$alert-border-radius":"--pgn-alert-border-radius","$alert-border-width":"--pgn-alert-border-width","$alert-link-font-weight":"--pgn-alert-font-weight-link","$alert-font-size":"--pgn-alert-font-size","$alert-title-color":"--pgn-alert-color-title","$alert-content-color":"--pgn-alert-color-content","$alert-box-shadow":"--pgn-alert-box-shadow","$alert-bg-level":"--pgn-alert-level-bg","$alert-border-level":"--pgn-alert-level-border","$alert-color-level":"--pgn-alert-level-color","$alert-icon-space":"--pgn-alert-icon-space","$alert-line-height":"--pgn-alert-line-height","$annotation-padding":"--pgn-annotation-padding","$annotation-box-shadow":"--pgn-annotation-box-shadow","$annotation-border-radius":"--pgn-annotation-border-radius","$annotation-max-width":"--pgn-annotation-max-width","$annotation-font-size":"--pgn-annotation-font-size","$annotation-line-height":"--pgn-annotation-line-height","$annotation-arrow-side-margin":"--pgn-annotation-arrow-side-margin","$annotation-arrow-border-width":"--pgn-annotation-arrow-border-width","$avatar-border":"--pgn-avatar-border-base","$avatar-border-radius":"--pgn-avatar-border-radius","$avatar-size":"--pgn-avatar-size-base","$avatar-size-xs":"--pgn-avatar-size-xs","$avatar-size-sm":"--pgn-avatar-size-sm","$avatar-size-lg":"--pgn-avatar-size-lg","$avatar-size-xl":"--pgn-avatar-size-xl","$avatar-size-xxl":"--pgn-avatar-size-xxl","$avatar-size-huge":"--pgn-avatar-size-huge","$avatar-button-padding-left":"--pgn-avatar-button-padding-left-base","$avatar-button-padding-left-sm":"--pgn-avatar-button-padding-left-sm","$avatar-button-padding-left-lg":"--pgn-avatar-button-padding-left-lg","$badge-font-size":"--pgn-badge-font-size","$badge-font-weight":"--pgn-badge-font-weight","$badge-padding-x":"--pgn-badge-padding-x-base","$badge-pill-padding-x":"--pgn-badge-padding-x-pill","$badge-padding-y":"--pgn-badge-padding-y","$badge-border-radius":"--pgn-badge-border-radius-base","$badge-pill-border-radius":"--pgn-badge-border-radius-pill","$badge-transition":"--pgn-badge-transition","$badge-focus-width":"--pgn-badge-focus-width","$breadcrumb-font-size":"--pgn-breadcrumb-font-size","$breadcrumb-padding-y":"--pgn-breadcrumb-padding-y","$breadcrumb-padding-x":"--pgn-breadcrumb-padding-x","$breadcrumb-item-padding":"--pgn-breadcrumb-padding-item","$breadcrumb-margin-bottom":"--pgn-breadcrumb-margin-bottom","$breadcrumb-margin-left":"--pgn-breadcrumb-margin-left","$breadcrumb-border-focus-axis-y":"--pgn-breadcrumb-border-focus-axis-y","$breadcrumb-border-focus-axis-x":"--pgn-breadcrumb-border-focus-axis-x","$breadcrumb-border-focus-width":"--pgn-breadcrumb-border-focus-width","$breadcrumb-border-radius":"--pgn-breadcrumb-border-radius-base","$breadcrumb-focus-border-radius":"--pgn-breadcrumb-border-radius-focus","$breadcrumb-bg":"--pgn-breadcrumb-bg","$breadcrumb-color":"--pgn-breadcrumb-color-base","$breadcrumb-divider-color":"--pgn-breadcrumb-color-divider","$breadcrumb-active-color":"--pgn-breadcrumb-color-active","$breadcrumb-inverse-active":"--pgn-breadcrumb-inverse-active","$breadcrumb-inverse-spacer":"--pgn-breadcrumb-inverse-spacer","$breadcrumb-inverse-color":"--pgn-breadcrumb-inverse-color","$bubble-expandable-padding-y":"--pgn-bubble-expandable-padding-y","$bubble-expandable-padding-x":"--pgn-bubble-expandable-padding-x","$btn-padding-y":"--pgn-btn-padding-y-base","$btn-padding-y-lg":"--pgn-btn-padding-y-lg","$btn-padding-y-sm":"--pgn-btn-padding-y-sm","$btn-padding-x":"--pgn-btn-padding-x-base","$btn-padding-x-lg":"--pgn-btn-padding-x-lg","$btn-padding-x-sm":"--pgn-btn-padding-x-sm","$btn-font-family":"--pgn-btn-font-family","$btn-font-size":"--pgn-btn-font-size-base","$btn-font-size-sm":"--pgn-btn-font-size-sm","$btn-font-size-lg":"--pgn-btn-font-size-lg","$btn-font-weight":"--pgn-btn-font-width","$btn-line-height":"--pgn-btn-line-height-base","$btn-line-height-sm":"--pgn-btn-line-height-sm","$btn-line-height-lg":"--pgn-btn-line-height-lg","$btn-border-width":"--pgn-btn-border-width","$btn-border-radius":"--pgn-btn-border-radius-base","$btn-border-radius-lg":"--pgn-btn-border-radius-lg","$btn-border-radius-sm":"--pgn-btn-border-radius-sm","$btn-box-shadow":"--pgn-btn-box-shadow-base","$btn-active-box-shadow":"--pgn-btn-box-shadow-active","$btn-focus-width":"--pgn-btn-focus-width","$btn-focus-gap":"--pgn-btn-focus-gap","$btn-disabled-opacity":"--pgn-btn-disabled-opacity","$btn-link-disabled-color":"--pgn-btn-disabled-link-color","$btn-tertiary-color":"--pgn-btn-tertiary-color","$btn-tertiary-bg":"--pgn-btn-tertiary-bg-base","$btn-tertiary-hover-bg":"--pgn-btn-tertiary-bg-hover","$btn-tertiary-active-bg":"--pgn-btn-tertiary-bg-active","$btn-inverse-tertiary-color":"--pgn-btn-tertiary-inverse-color","$btn-inverse-tertiary-bg":"--pgn-btn-tertiary-inverse-bg-base","$btn-inverse-tertiary-hover-bg":"--pgn-btn-tertiary-inverse-bg-hover","$btn-inverse-tertiary-active-bg":"--pgn-btn-tertiary-inverse-bg-active","$btn-block-spacing-y":"--pgn-btn-block-spacing-y","$btn-transition":"--pgn-btn-transition","$card-spacer-x":"--pgn-card-spacer-x","$card-spacer-y":"--pgn-card-spacer-y","$card-border-width":"--pgn-card-border-width","$card-border-radius":"--pgn-card-border-radius-base","$card-image-border-radius":"--pgn-card-border-radius-image","$card-logo-border-radius":"--pgn-card-border-radius-logo","$card-border-color":"--pgn-card-border-color-base","$card-border-focus-color":"--pgn-card-border-color-focus","$card-cap-bg":"--pgn-card-cap-bg","$card-cap-color":"--pgn-card-cap-color","$card-height":"--pgn-card-height-base","$card-color":"--pgn-card-color","$card-bg":"--pgn-card-bg","$card-img-overlay-padding":"--pgn-card-image-overlay-padding","$card-image-horizontal-max-width":"--pgn-card-image-horizontal-width-max","$card-image-horizontal-min-width":"--pgn-card-image-horizontal-width-min","$card-image-vertical-max-height":"--pgn-card-image-vertical-height-max","$card-group-margin":"--pgn-card-margin-group","$card-deck-margin":"--pgn-card-margin-deck","$card-grid-margin":"--pgn-card-margin-grid","$card-columns-count":"--pgn-card-columns-count","$card-columns-gap":"--pgn-card-columns-gap","$card-columns-margin":"--pgn-card-columns-margin","$card-divider-bg":"--pgn-card-divider-bg","$card-divider-margin-y":"--pgn-card-divider-margin-y","$card-footer-actions-gap":"--pgn-card-footer-action-gap","$card-footer-text-font-size":"--pgn-card-footer-text-font-size","$card-logo-left-offset":"--pgn-card-logo-left-offset-base","$card-logo-left-offset-horizontal":"--pgn-card-logo-left-offset-horizontal","$card-logo-bottom-offset":"--pgn-card-logo-bottom-offset-base","$card-logo-bottom-offset-horizontal":"--pgn-card-logo-bottom-offset-horizontal","$card-logo-width":"--pgn-card-logo-width","$card-logo-height":"--pgn-card-logo-height","$loading-skeleton-spacer":"--pgn-card-loading-skeleton-spacer","$carousel-control-color":"--pgn-carousel-control-color","$carousel-control-width":"--pgn-carousel-control-width-base","$carousel-control-icon-width":"--pgn-carousel-control-width-icon","$carousel-control-opacity":"--pgn-carousel-control-opacity-base","$carousel-control-hover-opacity":"--pgn-carousel-control-opacity-hover","$carousel-control-transition":"--pgn-carousel-control-transition","$carousel-indicator-width":"--pgn-carousel-indicator-width","$carousel-indicator-height":"--pgn-carousel-indicator-height-base","$carousel-indicator-hit-area-height":"--pgn-carousel-indicator-height-area-hit","$carousel-indicator-spacer":"--pgn-carousel-indicator-spacer","$carousel-indicator-active-bg":"--pgn-carousel-indicator-active-bg","$carousel-indicator-transition":"--pgn-carousel-indicator-transition","$carousel-caption-width":"--pgn-carousel-caption-width","$carousel-caption-color":"--pgn-carousel-caption-color","$carousel-transition-duration":"--pgn-carousel-transition-base","$chip-padding-y":"--pgn-chip-padding-y","$chip-padding-x":"--pgn-chip-padding-x","$chip-margin-inline":"--pgn-chip-margin-inline","$chip-border-radius":"--pgn-chip-border-radius-base","$chip-focus-border-radius":"--pgn-chip-border-radius-focus","$chip-border-width":"--pgn-chip-border-width","$chip-position-axis":"--pgn-chip-position-axis","$chip-font-size":"--pgn-chip-font-size","$chip-font-weight":"--pgn-chip-font-weight","$chip-line-height":"--pgn-chip-line-height","$close-font-size":"--pgn-close-button-font-size","$close-font-weight":"--pgn-close-button-font-weight","$close-color":"--pgn-close-button-color","$close-text-shadow":"--pgn-close-button-text-shadow","$code-font-size":"--pgn-code-font-size","$code-color":"--pgn-code-color","$kbd-font-size":"--pgn-code-kbd-font-size","$kbd-box-shadow":"--pgn-code-kbd-box-shadow","$nested-kbd-font-weight":"--pgn-code-kbd-nested-font-weight","$kbd-padding-y":"--pgn-code-kbd-padding-y","$kbd-padding-x":"--pgn-code-kbd-padding-x","$kbd-color":"--pgn-code-kbd-color","$kbd-bg":"--pgn-code-kbd-bg","$pre-color":"--pgn-code-pre-color","$pre-scrollable-max-height":"--pgn-code-pre-scrollable-max-height","$collapsible-card-spacer-y":"--pgn-collapsible-card-spacer-y-base","$collapsible-card-spacer-y-lg":"--pgn-collapsible-card-spacer-y-lg","$collapsible-card-spacer-x":"--pgn-collapsible-card-spacer-x-base","$collapsible-card-spacer-x-lg":"--pgn-collapsible-card-spacer-x-lg","$collapsible-card-body-spacer-left":"--pgn-collapsible-card-spacer-left-body","$collapsible-card-spacer-icon":"--pgn-collapsible-card-spacer-icon","$collapsible-basic-spacer-y":"--pgn-collapsible-card-spacer-basic-y","$collapsible-basic-spacer-x":"--pgn-collapsible-card-spacer-basic-x","$collapsible-basic-spacer-icon":"--pgn-collapsible-card-spacer-basic-icon","$max-width-xs":"--pgn-container-max-width-xs","$max-width-sm":"--pgn-container-max-width-sm","$max-width-md":"--pgn-container-max-width-md","$max-width-lg":"--pgn-container-max-width-lg","$max-width-xl":"--pgn-container-max-width-xl","$data-table-background-color":"--pgn-data-table-background-color","$data-table-border":"--pgn-data-table-border","$data-table-box-shadow":"--pgn-data-table-box-shadow","$data-table-padding-x":"--pgn-data-table-padding-x","$data-table-padding-y":"--pgn-data-table-padding-y","$data-table-padding-small":"--pgn-data-table-padding-small","$data-table-cell-padding":"--pgn-data-table-padding-cell","$data-table-footer-position":"--pgn-data-table-footer-position","$data-table-pagination-dropdown-max-height":"--pgn-data-table-pagination-dropdown-max-height","$data-table-pagination-dropdown-min-width":"--pgn-data-table-pagination-dropdown-min-width","$dropdown-min-width":"--pgn-dropdown-min-width","$dropdown-padding-x":"--pgn-dropdown-padding-x-base","$dropdown-item-padding-x":"--pgn-dropdown-padding-x-item","$dropdown-padding-y":"--pgn-dropdown-padding-y-base","$dropdown-item-padding-y":"--pgn-dropdown-padding-y-item","$dropdown-header-padding":"--pgn-dropdown-padding-header","$dropdown-spacer":"--pgn-dropdown-spacer","$dropdown-font-size":"--pgn-dropdown-font-size","$dropdown-color":"--pgn-dropdown-color-base","$dropdown-header-color":"--pgn-dropdown-color-header","$dropdown-bg":"--pgn-dropdown-bg","$dropdown-border-color":"--pgn-dropdown-border-color","$dropdown-border-width":"--pgn-dropdown-border-width","$dropdown-border-radius":"--pgn-dropdown-border-radius-base","$dropdown-inner-border-radius":"--pgn-dropdown-border-radius-inner","$dropdown-divider-bg":"--pgn-dropdown-divider-bg","$dropdown-divider-margin-y":"--pgn-dropdown-divider-margin-y","$dropdown-box-shadow":"--pgn-dropdown-box-shadow","$dropdown-link-color":"--pgn-dropdown-link-color","$dropdown-link-hover-color":"--pgn-dropdown-link-hover-color","$dropdown-link-hover-bg":"--pgn-dropdown-link-hover-bg","$dropdown-link-active-color":"--pgn-dropdown-link-active-color","$dropdown-link-active-bg":"--pgn-dropdown-link-active-bg","$dropdown-link-disabled-color":"--pgn-dropdown-link-disabled-color","$dropzone-padding":"--pgn-dropzone-padding","$dropzone-border-default":"--pgn-dropzone-border-default","$dropzone-border-hover":"--pgn-dropzone-border-hover","$dropzone-border-focus":"--pgn-dropzone-border-focus","$dropzone-border-active":"--pgn-dropzone-border-active","$dropzone-border-error":"--pgn-dropzone-border-error","$dropzone-error-wrapper-color":"--pgn-dropzone-error-wrapper-color","$dropzone-restriction-msg-font-size":"--pgn-dropzone-restriction-msg-font-size","$dropzone-restriction-msg-color":"--pgn-dropzone-restriction-msg-color","$input-padding-y":"--pgn-form-input-padding-y-base","$input-padding-y-sm":"--pgn-form-input-padding-y-sm","$input-padding-y-lg":"--pgn-form-input-padding-y-lg","$input-padding-x":"--pgn-form-input-padding-x-base","$input-padding-x-sm":"--pgn-form-input-padding-x-sm","$input-padding-x-lg":"--pgn-form-input-padding-x-lg","$input-font-family":"--pgn-form-input-font-family","$input-font-size":"--pgn-form-input-font-size-base","$input-font-size-sm":"--pgn-form-input-font-size-sm","$input-font-size-lg":"--pgn-form-input-font-size-lg","$input-font-weight":"--pgn-form-input-font-weight","$input-line-height":"--pgn-form-input-line-height-base","$input-line-height-sm":"--pgn-form-input-line-height-sm","$input-line-height-lg":"--pgn-form-input-line-height-lg","$input-bg":"--pgn-form-input-bg-base","$input-disabled-bg":"--pgn-form-input-bg-disabled","$input-color":"--pgn-form-input-color-base","$input-placeholder-color":"--pgn-form-input-color-plaintext","$input-border-color":"--pgn-form-input-border-color","$input-border-width":"--pgn-form-input-border-width","$input-height-border":"--pgn-form-input-border-height","$input-border-radius":"--pgn-form-input-border-radius-base","$input-border-radius-lg":"--pgn-form-input-border-radius-lg","$input-border-radius-sm":"--pgn-form-input-border-radius-sm","$input-box-shadow":"--pgn-form-input-box-shadow-base","$input-focus-box-shadow":"--pgn-form-input-box-shadow-focus","$input-focus-bg":"--pgn-form-input-focus-bg","$input-focus-color":"--pgn-form-input-focus-color-base","$input-focus-border-color":"--pgn-form-input-focus-color-border","$input-focus-width":"--pgn-form-input-focus-width","$input-height":"--pgn-form-input-height-base","$input-height-sm":"--pgn-form-input-height-sm","$input-height-lg":"--pgn-form-input-height-lg","$input-height-inner":"--pgn-form-input-height-inner-base","$input-height-inner-half":"--pgn-form-input-height-inner-half","$input-height-inner-quarter":"--pgn-form-input-height-inner-quarter","$input-hover-width":"--pgn-form-input-width-hover","$input-transition":"--pgn-form-input-transition","$form-check-input-gutter":"--pgn-form-input-check-gutter","$form-check-input-margin-x":"--pgn-form-input-check-margin-x-base","$form-check-inline-input-margin-x":"--pgn-form-input-check-margin-x-inline","$form-check-input-margin-y":"--pgn-form-input-check-margin-y","$input-group-addon-color":"--pgn-form-input-group-addon-color-base","$input-group-addon-border-color":"--pgn-form-input-group-addon-color-border","$input-group-addon-bg":"--pgn-form-input-group-addon-bg","$form-text-margin-top":"--pgn-form-text-margin-top","$form-check-inline-margin-x":"--pgn-form-check-inline-margin-x","$form-check-position-axis":"--pgn-form-check-position-axis","$form-check-focus-border-radius":"--pgn-form-check-border-radius-focus","$form-check-border-width":"--pgn-form-check-border-width","$form-grid-gutter-width":"--pgn-form-grid-gutter-width","$form-group-margin-bottom":"--pgn-form-group-margin-bottom","$custom-forms-transition":"--pgn-form-custom-transition","$custom-control-gutter":"--pgn-form-custom-control-gutter","$custom-control-spacer-x":"--pgn-form-custom-control-spacer-x","$custom-control-cursor":"--pgn-form-custom-control-cursor","$custom-control-indicator-size":"--pgn-form-custom-control-indicator-size","$custom-control-indicator-bg":"--pgn-form-custom-control-indicator-bg-base","$custom-control-indicator-bg-size":"--pgn-form-custom-control-indicator-bg-size","$custom-control-indicator-box-shadow":"--pgn-form-custom-control-indicator-box-shadow","$custom-control-indicator-border-color":"--pgn-form-custom-control-indicator-border-color","$custom-control-indicator-border-width":"--pgn-form-custom-control-indicator-border-width","$custom-control-indicator-disabled-bg":"--pgn-form-custom-control-indicator-disabled-bg","$custom-control-indicator-checked-color":"--pgn-form-custom-control-indicator-checked-color","$custom-control-indicator-checked-bg":"--pgn-form-custom-control-indicator-checked-bg-base","$custom-control-indicator-checked-disabled-bg":"--pgn-form-custom-control-indicator-checked-bg-disabled","$custom-control-indicator-checked-box-shadow":"--pgn-form-custom-control-indicator-checked-box-shadow-base","$custom-control-indicator-focus-box-shadow":"--pgn-form-custom-control-indicator-checked-box-shadow-focus","$custom-control-indicator-checked-border-color":"--pgn-form-custom-control-indicator-checked-border-color-base","$custom-control-indicator-focus-border-color":"--pgn-form-custom-control-indicator-checked-border-color-focus","$custom-control-indicator-active-color":"--pgn-form-custom-control-indicator-active-color-base","$custom-control-indicator-active-border-color":"--pgn-form-custom-control-indicator-active-color-border","$custom-control-indicator-active-bg":"--pgn-form-custom-control-indicator-active-bg","$custom-control-indicator-active-box-shadow":"--pgn-form-custom-control-indicator-active-box-shadow","$custom-control-label-color":"--pgn-form-custom-control-label-color-base","$custom-control-label-disabled-color":"--pgn-form-custom-control-label-color-disabled","$custom-checkbox-indicator-border-radius":"--pgn-form-custom-checkbox-indicator-border-radius","$custom-checkbox-indicator-indeterminate-bg":"--pgn-form-custom-checkbox-indicator-indeterminate-bg","$custom-checkbox-indicator-indeterminate-color":"--pgn-form-custom-checkbox-indicator-indeterminate-color","$custom-checkbox-indicator-indeterminate-box-shadow":"--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow","$custom-checkbox-indicator-indeterminate-border-color":"--pgn-form-custom-checkbox-indicator-indeterminate-border-color","$custom-radio-indicator-border-radius":"--pgn-form-custom-radio-indicator-border-radius","$custom-switch-width":"--pgn-form-custom-switch-width","$custom-switch-indicator-border-radius":"--pgn-form-custom-switch-indicator-border-radius","$custom-switch-indicator-size":"--pgn-form-custom-switch-indicator-size","$custom-select-padding-y":"--pgn-form-custom-select-padding-y-base","$custom-select-padding-y-sm":"--pgn-form-custom-select-padding-y-sm","$custom-select-padding-y-lg":"--pgn-form-custom-select-padding-y-lg","$custom-select-padding-x":"--pgn-form-custom-select-padding-x-base","$custom-select-padding-x-sm":"--pgn-form-custom-select-padding-x-sm","$custom-select-padding-x-lg":"--pgn-form-custom-select-padding-x-lg","$custom-select-font-family":"--pgn-form-custom-select-font-family","$custom-select-font-size":"--pgn-form-custom-select-font-size-base","$custom-select-font-size-sm":"--pgn-form-custom-select-font-size-sm","$custom-select-font-size-lg":"--pgn-form-custom-select-font-size-lg","$custom-select-height":"--pgn-form-custom-select-font-height-base","$custom-select-height-lg":"--pgn-form-custom-select-font-height-lg","$custom-select-font-weight":"--pgn-form-custom-select-font-weight","$custom-select-line-height":"--pgn-form-custom-select-line-height","$custom-select-indicator-padding":"--pgn-form-custom-select-indicator-padding","$custom-select-indicator-color":"--pgn-form-custom-select-indicator-color","$custom-select-color":"--pgn-form-custom-select-color-base","$custom-select-disabled-color":"--pgn-form-custom-select-color-disabled","$custom-select-bg":"--pgn-form-custom-select-bg-base","$custom-select-disabled-bg":"--pgn-form-custom-select-bg-disabled","$custom-select-bg-size":"--pgn-form-custom-select-bg-size","$custom-select-feedback-icon-padding-right":"--pgn-form-custom-select-feedback-icon-padding-right","$custom-select-feedback-icon-position":"--pgn-form-custom-select-feedback-icon-position","$custom-select-feedback-icon-size":"--pgn-form-custom-select-feedback-icon-size","$custom-select-border-width":"--pgn-form-custom-select-border-width-base","$custom-select-focus-width":"--pgn-form-custom-select-border-width-focus","$custom-select-border-color":"--pgn-form-custom-select-border-color-base","$custom-select-focus-border-color":"--pgn-form-custom-select-border-color-focus","$custom-select-border-radius":"--pgn-form-custom-select-border-radius","$custom-select-box-shadow":"--pgn-form-custom-select-border-box-shadow-base","$custom-select-focus-box-shadow":"--pgn-form-custom-select-border-box-shadow-focus","$custom-select-height-sm":"--pgn-form-custom-select-height-sm","$custom-range-track-width":"--pgn-form-custom-range-track-width","$custom-range-track-height":"--pgn-form-custom-range-track-height","$custom-range-track-cursor":"--pgn-form-custom-range-track-cursor","$custom-range-track-bg":"--pgn-form-custom-range-track-bg","$custom-range-track-border-radius":"--pgn-form-custom-range-track-border-radius","$custom-range-track-box-shadow":"--pgn-form-custom-range-track-box-shadow","$custom-range-thumb-width":"--pgn-form-custom-range-thumb-width","$custom-range-thumb-height":"--pgn-form-custom-range-thumb-height","$custom-range-thumb-bg":"--pgn-form-custom-range-thumb-bg-base","$custom-range-thumb-disabled-bg":"--pgn-form-custom-range-thumb-bg-disabled","$custom-range-thumb-border":"--pgn-form-custom-range-thumb-border-base","$custom-range-thumb-border-radius":"--pgn-form-custom-range-thumb-border-radius","$custom-range-thumb-box-shadow":"--pgn-form-custom-range-thumb-box-shadow-base","$custom-range-thumb-focus-box-shadow":"--pgn-form-custom-range-thumb-box-shadow-focus-base","$custom-range-thumb-focus-box-shadow-width":"--pgn-form-custom-range-thumb-box-shadow-focus-width","$custom-file-height":"--pgn-form-custom-file-height-base","$custom-file-height-inner":"--pgn-form-custom-file-height-inner","$custom-file-border-color":"--pgn-form-custom-file-border-color-base","$custom-file-focus-border-color":"--pgn-form-custom-file-border-color-focus","$custom-file-border-radius":"--pgn-form-custom-file-border-color-radius","$custom-file-border-width":"--pgn-form-custom-file-border-width","$custom-file-box-shadow":"--pgn-form-custom-file-box-shadow-base","$custom-file-focus-box-shadow":"--pgn-form-custom-file-box-shadow-focus","$custom-file-bg":"--pgn-form-custom-file-bg-base","$custom-file-disabled-bg":"--pgn-form-custom-file-bg-disabled","$custom-file-padding-y":"--pgn-form-custom-file-padding-y","$custom-file-padding-x":"--pgn-form-custom-file-padding-x","$custom-file-line-height":"--pgn-form-custom-file-line-height","$custom-file-font-family":"--pgn-form-custom-file-font-family","$custom-file-font-weight":"--pgn-form-custom-file-font-weight","$custom-file-color":"--pgn-form-custom-file-color","$custom-file-button-color":"--pgn-form-custom-file-button-color","$custom-file-button-bg":"--pgn-form-custom-file-button-bg","$form-feedback-margin-top":"--pgn-form-feedback-margin-top","$form-feedback-font-size":"--pgn-form-feedback-font-size","$form-feedback-valid-color":"--pgn-form-feedback-color-valid","$form-feedback-invalid-color":"--pgn-form-feedback-color-invalid","$form-feedback-icon-valid-color":"--pgn-form-feedback-icon-color-valid","$form-feedback-icon-invalid":"--pgn-form-feedback-icon-color-invalid","$form-feedback-tooltip-padding-y":"--pgn-form-feedback-tooltip-padding-y","$form-feedback-tooltip-padding-x":"--pgn-form-feedback-tooltip-padding-x","$form-feedback-tooltip-font-size":"--pgn-form-feedback-tooltip-font-size","$form-feedback-tooltip-line-height":"--pgn-form-feedback-tooltip-line-height","$form-feedback-tooltip-opacity":"--pgn-form-feedback-tooltip-opacity","$form-feedback-tooltip-border-radius":"--pgn-form-feedback-tooltip-border-radius","$form-control-icon-width":"--pgn-form-control-icon-width","$select-icon-padding":"--pgn-form-select-icon-padding","$icon-inline":"--pgn-icon-inline","$icon-sm":"--pgn-icon-sm","$icon-md":"--pgn-icon-md","$icon-lg":"--pgn-icon-lg","$btn-icon-diameter-md":"--pgn-icon-button-diameter-md","$btn-icon-diameter-sm":"--pgn-icon-button-diameter-sm","$btn-icon-diameter-inline":"--pgn-icon-button-diameter-inline","$btn-icon-bg":"--pgn-icon-button-bg","$btn-icon-accent-color":"--pgn-icon-button-accent-color","$thumbnail-padding":"--pgn-image-thumbnail-padding","$thumbnail-bg":"--pgn-image-thumbnail-bg","$thumbnail-border-width":"--pgn-image-thumbnail-border-width","$thumbnail-border-color":"--pgn-image-thumbnail-border-color","$thumbnail-border-radius":"--pgn-image-thumbnail-border-radius","$thumbnail-box-shadow":"--pgn-image-thumbnail-box-shadow","$figure-caption-font-size":"--pgn-image-figure-caption-font-size","$figure-caption-color":"--pgn-image-figure-caption-color","$background":"--pgn-menu-background-base","$active-background":"--pgn-menu-background-active","$border":"--pgn-menu-border-base","$active-border":"--pgn-menu-border-active","$hover-border":"--pgn-menu-border-hover","$modal-inner-padding":"--pgn-modal-inner-padding-base","$modal-inner-padding-bottom":"--pgn-modal-inner-padding-bottom","$modal-footer-margin-between":"--pgn-modal-footer-margin-between","$modal-footer-border-color":"--pgn-modal-footer-border-color","$modal-footer-border-width":"--pgn-modal-footer-border-width","$modal-footer-padding":"--pgn-modal-footer-padding-base","$modal-footer-padding-x":"--pgn-modal-footer-padding-x","$modal-footer-padding-y":"--pgn-modal-footer-padding-y","$modal-dialog-margin":"--pgn-modal-dialog-margin-base","$modal-dialog-margin-y-sm-up":"--pgn-modal-dialog-margin-y-sm-up","$modal-title-line-height":"--pgn-modal-title-line-height","$modal-content-color":"--pgn-modal-content-color","$modal-content-bg":"--pgn-modal-content-bg","$modal-content-border-color":"--pgn-modal-content-border-color","$modal-content-border-width":"--pgn-modal-content-border-width","$modal-content-border-radius":"--pgn-modal-content-border-radius","$modal-content-box-shadow-xs":"--pgn-modal-content-box-shadow-xs","$modal-content-box-shadow-sm-up":"--pgn-modal-content-box-shadow-sm-up","$modal-backdrop-bg":"--pgn-modal-backdrop-bg","$modal-backdrop-opacity":"--pgn-modal-backdrop-opacity","$modal-header-border-color":"--pgn-modal-header-border-color","$modal-header-border-width":"--pgn-modal-header-border-width","$modal-header-padding":"--pgn-modal-header-padding-base","$modal-header-padding-y":"--pgn-modal-header-padding-y","$modal-header-padding-x":"--pgn-modal-header-padding-x","$modal-xl":"--pgn-modal-xl","$modal-lg":"--pgn-modal-lg","$modal-md":"--pgn-modal-md","$modal-sm":"--pgn-modal-sm","$modal-transition":"--pgn-modal-transform-base","$modal-fade-transform":"--pgn-modal-transform-fade","$modal-show-transform":"--pgn-modal-transform-show","$modal-scale-transform":"--pgn-modal-transform-scale","$nav-link-padding-y":"--pgn-nav-link-padding-y","$nav-link-padding-x":"--pgn-nav-link-padding-x","$nav-link-color":"--pgn-nav-link-color-base","$nav-link-disabled-color":"--pgn-nav-link-color-disabled","$nav-link-font-weight":"--pgn-nav-link-font-weight","$nav-tabs-border-color":"--pgn-nav-tabs-border-color","$nav-tabs-border-width":"--pgn-nav-tabs-border-width","$nav-tabs-border-radius":"--pgn-nav-tabs-border-radius","$nav-tabs-link-hover-border-color":"--pgn-nav-tabs-link-hover-border-color","$nav-tabs-link-hover-bg":"--pgn-nav-tabs-link-hover-bg","$nav-tabs-link-active-color":"--pgn-nav-tabs-link-active-color-base","$nav-tabs-link-active-border-color":"--pgn-nav-tabs-link-active-color-border","$nav-tabs-link-active-bg":"--pgn-nav-tabs-link-active-bg","$nav-pills-border-radius":"--pgn-nav-pills-border-radius","$nav-pills-link-active-color":"--pgn-nav-pills-link-link-active-color","$nav-pills-link-active-bg":"--pgn-nav-pills-link-link-active-bg","$nav-divider-color":"--pgn-nav-divider-color","$nav-divider-margin-y":"--pgn-nav-divider-margin-y","$navbar-padding-y":"--pgn-navbar-padding-y","$navbar-padding-x":"--pgn-navbar-padding-x-base","$navbar-nav-link-padding-x":"--pgn-navbar-padding-x-nav-link","$nav-link-height":"--pgn-navbar-nav-link-height","$navbar-nav-scroll-max-height":"--pgn-navbar-nav-scroll-max-height","$navbar-brand-font-size":"--pgn-navbar-brand-font-size","$navbar-brand-height":"--pgn-navbar-brand-height","$navbar-brand-padding-y":"--pgn-navbar-brand-padding-y","$navbar-toggler-padding-y":"--pgn-navbar-toggler-padding-y","$navbar-toggler-padding-x":"--pgn-navbar-toggler-padding-x","$navbar-toggler-font-size":"--pgn-navbar-toggler-font-size","$navbar-toggler-border-radius":"--pgn-navbar-toggler-border-radius","$navbar-dark-color":"--pgn-navbar-dark-color-base","$navbar-dark-hover-color":"--pgn-navbar-dark-color-hover","$navbar-dark-active-color":"--pgn-navbar-dark-color-active","$navbar-dark-disabled-color":"--pgn-navbar-dark-color-disabled","$navbar-dark-toggler-border-color":"--pgn-navbar-dark-toggler-border-color","$navbar-dark-brand-color":"--pgn-navbar-dark-brand-color-base","$navbar-dark-brand-hover-color":"--pgn-navbar-dark-brand-color-hover","$navbar-light-color":"--pgn-navbar-light-color-base","$navbar-light-hover-color":"--pgn-navbar-light-color-hover","$navbar-light-active-color":"--pgn-navbar-light-color-active","$navbar-light-disabled-color":"--pgn-navbar-light-color-disabled","$navbar-light-toggler-border-color":"--pgn-navbar-light-toggler-border-color","$navbar-light-brand-color":"--pgn-navbar-light-brand-color-base","$navbar-light-brand-hover-color":"--pgn-navbar-light-brand-color-hover","$pagination-padding-y":"--pgn-pagination-padding-y-base","$pagination-padding-y-sm":"--pgn-pagination-padding-y-sm","$pagination-padding-y-lg":"--pgn-pagination-padding-y-lg","$pagination-padding-x":"--pgn-pagination-padding-x-base","$pagination-padding-x-sm":"--pgn-pagination-padding-x-sm","$pagination-padding-x-lg":"--pgn-pagination-padding-x-lg","$pagination-padding-icon":"--pgn-pagination-padding-icon","$pagination-margin-x":"--pgn-pagination-margin-x","$pagination-margin-y":"--pgn-pagination-margin-y","$pagination-line-height":"--pgn-pagination-line-height","$pagination-font-size-sm":"--pgn-pagination-font-size-sm","$pagination-icon-size":"--pgn-pagination-icon-size-base","$pagination-icon-size-sm":"--pgn-pagination-icon-size-sm","$pagination-icon-width":"--pgn-pagination-icon-width","$pagination-icon-height":"--pgn-pagination-icon-height","$pagination-toggle-border":"--pgn-pagination-toggle-border-base","$pagination-toggle-border-sm":"--pgn-pagination-toggle-border-sm","$pagination-secondary-height":"--pgn-pagination-secondary-height-base","$pagination-secondary-height-sm":"--pgn-pagination-secondary-height-sm","$pagination-color":"--pgn-pagination-color-base","$pagination-color-inverse":"--pgn-pagination-color-inverse","$pagination-hover-color":"--pgn-pagination-color-hover","$pagination-active-color":"--pgn-pagination-color-active","$pagination-disabled-color":"--pgn-pagination-color-disabled","$pagination-bg":"--pgn-pagination-bg-base","$pagination-hover-bg":"--pgn-pagination-bg-hover","$pagination-active-bg":"--pgn-pagination-bg-active","$pagination-disabled-bg":"--pgn-pagination-bg-disabled","$pagination-border-width":"--pgn-pagination-border-width","$pagination-border-color":"--pgn-pagination-border-color-base","$pagination-hover-border-color":"--pgn-pagination-border-color-hover","$pagination-active-border-color":"--pgn-pagination-border-color-active","$pagination-disabled-border-color":"--pgn-pagination-border-color-disabled","$pagination-border-radius-sm":"--pgn-pagination-border-radius-sm","$pagination-border-radius-lg":"--pgn-pagination-border-radius-lg","$pagination-focus-box-shadow":"--pgn-pagination-focus-box-shadow","$pagination-focus-outline":"--pgn-pagination-focus-box-outline","$pagination-focus-border-width":"--pgn-pagination-focus-border-width","$pagination-focus-color":"--pgn-pagination-focus-color-base","$pagination-focus-color-text":"--pgn-pagination-focus-color-text","$pagination-reduced-dropdown-max-height":"--pgn-reduced-dropdown-height-max","$pagination-reduced-dropdown-min-width":"--pgn-reduced-dropdown-width-min","$popover-font-size":"--pgn-popover-font-size","$popover-bg":"--pgn-popover-bg","$popover-max-width":"--pgn-popover-max-width","$popover-border-color":"--pgn-popover-border-color","$popover-border-radius":"--pgn-popover-border-radius","$popover-border-width":"--pgn-popover-border-border","$popover-box-shadow":"--pgn-popover-box-shadow","$popover-header-bg":"--pgn-popover-header-bg","$popover-header-color":"--pgn-popover-header-color","$popover-header-padding-y":"--pgn-popover-header-padding-y","$popover-header-padding-x":"--pgn-popover-header-padding-x","$popover-body-color":"--pgn-popover-body-color","$popover-body-padding-y":"--pgn-popover-body-padding-y","$popover-body-padding-x":"--pgn-popover-body-padding-x","$popover-icon-margin-right":"--pgn-popover-icon-margin-right","$popover-icon-height":"--pgn-popover-icon-height","$popover-icon-width":"--pgn-popover-icon-width","$popover-arrow-width":"--pgn-popover-arrow-width","$popover-arrow-height":"--pgn-popover-arrow-height","$popover-arrow-color":"--pgn-popover-arrow-color","$popover-success-bg":"--pgn-popover-success-bg","$popover-success-icon-color":"--pgn-popover-success-icon-color","$popover-warning-bg":"--pgn-popover-warning-bg","$popover-warning-icon-color":"--pgn-popover-warning-icon-color","$popover-danger-bg":"--pgn-popover-danger-bg","$popover-danger-icon-color":"--pgn-popover-danger-icon-color","$checkpoint-background-color":"--pgn-product-tour-checkpoint-color-background","$checkpoint-body-color":"--pgn-product-tour-checkpoint-color-body","$checkpoint-border-color":"--pgn-product-tour-checkpoint-color-border","$checkpoint-breadcrumb-color":"--pgn-product-tour-checkpoint-color-breadcrumb","$checkpoint-border-width":"--pgn-product-tour-checkpoint-width-border","$checkpoint-arrow-width":"--pgn-product-tour-checkpoint-width-arrow","$checkpoint-max-width":"--pgn-product-tour-checkpoint-width-max","$checkpoint-arrow-top-color":"--pgn-product-tour-checkpoint-arrow-color-top","$checkpoint-arrow-default-color":"--pgn-product-tour-checkpoint-arrow-color-default","$checkpoint-arrow-transparent":"--pgn-product-tour-checkpoint-arrow-transparent","$checkpoint-z-index":"--pgn-product-tour-checkpoint-zindex","$progress-height":"--pgn-progress-bar-height-base","$annotated-progress-height":"--pgn-progress-bar-height-annotated","$progress-font-size":"--pgn-progress-bar-font-size","$progress-bg":"--pgn-progress-bar-bg","$progress-border-radius":"--pgn-progress-bar-border-radius","$progress-bar-border-width":"--pgn-progress-bar-border-width","$progress-bar-border-color":"--pgn-progress-bar-border-color","$progress-box-shadow":"--pgn-progress-bar-box-shadow","$progress-bar-color":"--pgn-progress-bar-bar-color","$progress-bar-bg":"--pgn-progress-bar-bar-bg-base","$annotated-progress-bar-bg":"--pgn-progress-bar-bar-bg-annotated","$progress-bar-animation-timing":"--pgn-progress-bar-bar-animation-timing","$progress-bar-transition":"--pgn-progress-bar-bar-transition","$progress-threshold-circle":"--pgn-progress-bar-threshold-circle","$progress-hint-annotation-gap":"--pgn-progress-bar-hint-annotation-gap","$search-border-radius":"--pgn-search-field-border-radius","$search-border-color":"--pgn-search-field-border-color-base","$search-border-color-interaction":"--pgn-search-field-border-color-interaction","$search-border-focus-color":"--pgn-search-field-border-color-focus","$search-border-width":"--pgn-search-field-border-width-base","$search-border-width-interaction":"--pgn-search-field-border-width-interaction","$search-border-focus-width":"--pgn-search-field-border-width-focus","$search-line-height":"--pgn-search-field-line-height","$search-disabled-opacity":"--pgn-search-field-disabled-opacity","$search-button-margin":"--pgn-search-field-button-margin","$input-height-search":"--pgn-search-field-input-height-search","$selectable-box-padding":"--pgn-selectable-box-padding","$selectable-box-border-radius":"--pgn-selectable-box-border-radius","$selectable-box-space":"--pgn-selectable-box-box-space","$min-cols-number":"--pgn-selectable-box-cols-number-min","$max-cols-number":"--pgn-selectable-box-cols-number-max","$spinner-width":"--pgn-spinner-width","$spinner-height":"--pgn-spinner-height","$spinner-border-width":"--pgn-spinner-border-width","$spinner-width-sm":"--pgn-spinner-sm-width","$spinner-height-sm":"--pgn-spinner-sm-height","$spinner-border-width-sm":"--pgn-spinner-sm-border-width","$stack-gap":"--pgn-stack-gap","$sticky-offset":"--pgn-sticky-offset","$sticky-shadow-top":"--pgn-sticky-shadow-top","$sticky-shadow-bottom":"--pgn-sticky-shadow-bottom","$table-cell-padding":"--pgn-table-cell-padding-base","$table-cell-padding-sm":"--pgn-table-cell-padding-sm","$table-color":"--pgn-table-color-base","$table-hover-color":"--pgn-table-color-hover","$table-head-color":"--pgn-table-color-head","$table-bg":"--pgn-table-bg-base","$table-accent-bg":"--pgn-table-bg-accent","$table-hover-bg":"--pgn-table-bg-hover","$table-active-bg":"--pgn-table-bg-active","$table-head-bg":"--pgn-table-bg-head","$table-border-width":"--pgn-table-border-width","$table-border-color":"--pgn-table-border-color","$table-dark-color":"--pgn-table-dark-color-base","$table-dark-hover-color":"--pgn-table-dark-color-hover","$table-dark-border-color":"--pgn-table-dark-color-border","$table-dark-bg":"--pgn-table-dark-bg-base","$table-dark-accent-bg":"--pgn-table-dark-bg-accent","$table-dark-hover-bg":"--pgn-table-dark-bg-hover","$table-striped-order":"--pgn-table-striped-order","$table-caption-color":"--pgn-table-caption-color","$table-bg-level":"--pgn-table-level-bg","$table-border-level":"--pgn-table-level-border","$table-th-font-weight":"--pgn-table-th-font-weight","$tab-notification-height":"--pgn-tabs-notification-height","$tab-notification-width":"--pgn-tabs-notification-width","$tab-notification-font-size":"--pgn-tabs-notification-font-size","$toast-max-width":"--pgn-toast-max-width","$toast-padding-x":"--pgn-toast-padding-x","$toast-padding-y":"--pgn-toast-padding-y","$toast-font-size":"--pgn-toast-font-size","$toast-color":"--pgn-toast-color-base","$toast-background-color":"--pgn-toast-color-background","$toast-border-width":"--pgn-toast-border-width","$toast-border-color":"--pgn-toast-border-color","$toast-border-radius":"--pgn-toast-border-radius","$toast-box-shadow":"--pgn-toast-box-shadow","$toast-header-color":"--pgn-toast-header-color-base","$toast-header-background-color":"--pgn-toast-header-color-background","$toast-header-border-color":"--pgn-toast-header-color-border","$toast-container-gutter-lg":"--pgn-toast-container-gutter-lg","$toast-container-gutter-sm":"--pgn-toast-container-gutter-sm","$tooltip-font-size":"--pgn-tooltip-font-size","$tooltip-max-width":"--pgn-tooltip-max-width","$tooltip-color":"--pgn-tooltip-color-base","$tooltip-color-light":"--pgn-tooltip-color-light","$tooltip-bg":"--pgn-tooltip-bg-base","$tooltip-bg-light":"--pgn-tooltip-bg-light","$tooltip-border-radius":"--pgn-tooltip-border-radius","$tooltip-opacity":"--pgn-tooltip-opacity","$tooltip-padding-y":"--pgn-tooltip-padding-y","$tooltip-padding-x":"--pgn-tooltip-padding-x","$tooltip-margin":"--pgn-tooltip-margin","$tooltip-box-shadow":"--pgn-tooltip-box-shadow","$tooltip-arrow-width":"--pgn-tooltip-arrow-width","$tooltip-arrow-height":"--pgn-tooltip-arrow-height","$tooltip-arrow-color":"--pgn-tooltip-arrow-color-base","$tooltip-arrow-color-light":"--pgn-tooltip-arrow-color-light"} \ No newline at end of file diff --git a/tokens/build/scss-to-css-core.json b/tokens/build/scss-to-css-core.json deleted file mode 100644 index c247ecae6c..0000000000 --- a/tokens/build/scss-to-css-core.json +++ /dev/null @@ -1 +0,0 @@ -{"$border-width":"--pgn-border-width","$border-color":"--pgn-border-color","$border-radius":"--pgn-border-radius-base","$border-radius-lg":"--pgn-border-radius-lg","$border-radius-sm":"--pgn-border-radius-sm","$hr-border-color":"--pgn-border-hr-color","$hr-border-width":"--pgn-border-hr-width","$hr-margin-y":"--pgn-border-hr-margin-y","$caret-width":"--pgn-caret-width","$caret-vertical-align":"--pgn-caret-vertical-align","$caret-spacing":"--pgn-caret-spacing","$body-bg":"--pgn-body-bg","$body-color":"--pgn-body-color","$white":"--pgn-color-white","$black":"--pgn-color-black","$blue":"--pgn-color-blue","$red":"--pgn-color-red","$green":"--pgn-color-green","$yellow":"--pgn-color-yellow","$teal":"--pgn-color-teal","$accent-a":"--pgn-color-accent-a","$accent-b":"--pgn-color-accent-b","$theme-color-interval":"--pgn-color-theme-interval","$gray-100":"--pgn-color-gray-100","$gray-200":"--pgn-color-gray-200","$gray-300":"--pgn-color-gray-300","$gray-400":"--pgn-color-gray-400","$gray-500":"--pgn-color-gray-500","$gray-600":"--pgn-color-gray-600","$gray-700":"--pgn-color-gray-700","$gray-800":"--pgn-color-gray-800","$gray-900":"--pgn-color-gray-900","$gray":"--pgn-color-gray-base","$primary-100":"--pgn-color-primary-100","$primary-200":"--pgn-color-primary-200","$primary-300":"--pgn-color-primary-300","$primary-400":"--pgn-color-primary-400","$primary-500":"--pgn-color-primary-500","$primary-600":"--pgn-color-primary-600","$primary-700":"--pgn-color-primary-700","$primary-800":"--pgn-color-primary-800","$primary-900":"--pgn-color-primary-900","$primary":"--pgn-color-primary-base","$secondary-100":"--pgn-color-secondary-100","$secondary-200":"--pgn-color-secondary-200","$secondary-300":"--pgn-color-secondary-300","$secondary-400":"--pgn-color-secondary-400","$secondary-500":"--pgn-color-secondary-500","$secondary-600":"--pgn-color-secondary-600","$secondary-700":"--pgn-color-secondary-700","$secondary-800":"--pgn-color-secondary-800","$secondary-900":"--pgn-color-secondary-900","$secondary":"--pgn-color-secondary-base","$brand-100":"--pgn-color-brand-100","$brand-200":"--pgn-color-brand-200","$brand-300":"--pgn-color-brand-300","$brand-400":"--pgn-color-brand-400","$brand-500":"--pgn-color-brand-500","$brand-600":"--pgn-color-brand-600","$brand-700":"--pgn-color-brand-700","$brand-800":"--pgn-color-brand-800","$brand-900":"--pgn-color-brand-900","$brand":"--pgn-color-brand-base","$success-100":"--pgn-color-success-100","$success-200":"--pgn-color-success-200","$success-300":"--pgn-color-success-300","$success-400":"--pgn-color-success-400","$success-500":"--pgn-color-success-500","$success-600":"--pgn-color-success-600","$success-700":"--pgn-color-success-700","$success-800":"--pgn-color-success-800","$success-900":"--pgn-color-success-900","$success":"--pgn-color-success-base","$info-100":"--pgn-color-info-100","$info-200":"--pgn-color-info-200","$info-300":"--pgn-color-info-300","$info-400":"--pgn-color-info-400","$info-500":"--pgn-color-info-500","$info-600":"--pgn-color-info-600","$info-700":"--pgn-color-info-700","$info-800":"--pgn-color-info-800","$info-900":"--pgn-color-info-900","$info":"--pgn-color-info-base","$warning-100":"--pgn-color-warning-100","$warning-200":"--pgn-color-warning-200","$warning-300":"--pgn-color-warning-300","$warning-400":"--pgn-color-warning-400","$warning-500":"--pgn-color-warning-500","$warning-600":"--pgn-color-warning-600","$warning-700":"--pgn-color-warning-700","$warning-800":"--pgn-color-warning-800","$warning-900":"--pgn-color-warning-900","$warning":"--pgn-color-warning-base","$danger-100":"--pgn-color-danger-100","$danger-200":"--pgn-color-danger-200","$danger-300":"--pgn-color-danger-300","$danger-400":"--pgn-color-danger-400","$danger-500":"--pgn-color-danger-500","$danger-600":"--pgn-color-danger-600","$danger-700":"--pgn-color-danger-700","$danger-800":"--pgn-color-danger-800","$danger-900":"--pgn-color-danger-900","$danger":"--pgn-color-danger-base","$light-100":"--pgn-color-light-100","$light-200":"--pgn-color-light-200","$light-300":"--pgn-color-light-300","$light-400":"--pgn-color-light-400","$light-500":"--pgn-color-light-500","$light-600":"--pgn-color-light-600","$light-700":"--pgn-color-light-700","$light-800":"--pgn-color-light-800","$light-900":"--pgn-color-light-900","$light":"--pgn-color-light-base","$dark-100":"--pgn-color-dark-100","$dark-200":"--pgn-color-dark-200","$dark-300":"--pgn-color-dark-300","$dark-400":"--pgn-color-dark-400","$dark-500":"--pgn-color-dark-500","$dark-600":"--pgn-color-dark-600","$dark-700":"--pgn-color-dark-700","$dark-800":"--pgn-color-dark-800","$dark-900":"--pgn-color-dark-900","$dark":"--pgn-color-dark-base","$component-active-color":"--pgn-component-active-color","$component-active-bg":"--pgn-component-active-bg","$text-muted":"--pgn-text-muted","$spacer":"--pgn-core-spacer","$input-btn-padding-y":"--pgn-core-input-btn-padding-y","$input-btn-padding-x":"--pgn-core-input-btn-padding-x","$input-btn-padding-y-sm":"--pgn-core-input-btn-padding-sm-y","$input-btn-padding-x-sm":"--pgn-core-input-btn-padding-sm-x","$input-btn-padding-y-lg":"--pgn-core-input-btn-padding-lg-y","$input-btn-padding-x-lg":"--pgn-core-input-btn-padding-lg-x","$input-btn-font-family":"--pgn-core-input-btn-font-family","$input-btn-font-size":"--pgn-core-input-btn-font-size-base","$input-btn-font-size-sm":"--pgn-core-input-btn-font-size-sm","$input-btn-font-size-lg":"--pgn-core-input-btn-font-size-lg","$input-btn-line-height":"--pgn-core-input-btn-line-height-base","$input-btn-line-height-sm":"--pgn-core-input-btn-line-height-sm","$input-btn-line-height-lg":"--pgn-core-input-btn-line-height-lg","$input-btn-focus-width":"--pgn-core-input-btn-focus-width","$input-btn-focus-color":"--pgn-core-input-btn-focus-color","$input-btn-focus-box-shadow":"--pgn-core-input-btn-focus-box-shadow","$input-btn-border-width":"--pgn-core-input-btn-border-width","$blockquote-small-font-size":"--pgn-core-blockquote-small-font-size","$blockquote-font-size":"--pgn-core-blockquote-font-size","$mark-padding":"--pgn-core-mark-padding","$mark-bg":"--pgn-core-mark-bg","$dt-font-weight":"--pgn-core-dt-font-weight","$list-inline-padding":"--pgn-core-list-inline-padding","$level-1-box-shadow":"--pgn-box-shadow-level-1","$level-2-box-shadow":"--pgn-box-shadow-level-2","$level-3-box-shadow":"--pgn-box-shadow-level-3","$level-4-box-shadow":"--pgn-box-shadow-level-4","$level-5-box-shadow":"--pgn-box-shadow-level-5","$box-shadow":"--pgn-box-shadow-base","$box-shadow-sm":"--pgn-box-shadow-sm","$box-shadow-lg":"--pgn-box-shadow-lg","$box-shadow-down-1":"--pgn-box-shadow-down-1","$box-shadow-down-2":"--pgn-box-shadow-down-2","$box-shadow-down-3":"--pgn-box-shadow-down-3","$box-shadow-down-4":"--pgn-box-shadow-down-4","$box-shadow-down-5":"--pgn-box-shadow-down-5","$box-shadow-left-1":"--pgn-box-shadow-left-1","$box-shadow-left-2":"--pgn-box-shadow-left-2","$box-shadow-left-3":"--pgn-box-shadow-left-3","$box-shadow-left-4":"--pgn-box-shadow-left-4","$box-shadow-left-5":"--pgn-box-shadow-left-5","$box-shadow-up-1":"--pgn-box-shadow-up-1","$box-shadow-up-2":"--pgn-box-shadow-up-2","$box-shadow-up-3":"--pgn-box-shadow-up-3","$box-shadow-up-4":"--pgn-box-shadow-up-4","$box-shadow-up-5":"--pgn-box-shadow-up-5","$box-shadow-right-1":"--pgn-box-shadow-right-1","$box-shadow-right-2":"--pgn-box-shadow-right-2","$box-shadow-right-3":"--pgn-box-shadow-right-3","$box-shadow-right-4":"--pgn-box-shadow-right-4","$box-shadow-right-5":"--pgn-box-shadow-right-5","$box-shadow-centered-1":"--pgn-box-shadow-centered-1","$box-shadow-centered-2":"--pgn-box-shadow-centered-2","$box-shadow-centered-3":"--pgn-box-shadow-centered-3","$box-shadow-centered-4":"--pgn-box-shadow-centered-4","$box-shadow-centered-5":"--pgn-box-shadow-centered-5","$grid-columns":"--pgn-grid-columns","$grid-gutter-width":"--pgn-grid-gutter-width","$grid-row-columns":"--pgn-grid-row-columns","$list-group-color":"--pgn-list-group-color","$list-group-bg":"--pgn-list-group-bg-base","$list-group-hover-bg":"--pgn-list-group-bg-hover","$list-group-border-color":"--pgn-list-group-border-color","$list-group-border-width":"--pgn-list-group-border-width","$list-group-border-radius":"--pgn-list-group-border-radius","$list-group-item-padding-y":"--pgn-list-group-item-padding-y","$list-group-item-padding-x":"--pgn-list-group-item-padding-x","$list-group-active-color":"--pgn-list-group-active-color-base","$list-group-active-border-color":"--pgn-list-group-active-color-border","$list-group-active-bg":"--pgn-list-group-active-bg","$list-group-disabled-color":"--pgn-list-group-disabled-color","$list-group-disabled-bg":"--pgn-list-group-disabled-bg","$list-group-action-color":"--pgn-list-group-action-color-base","$list-group-action-hover-color":"--pgn-list-group-action-color-hover","$list-group-action-active-color":"--pgn-list-group-action-active-color","$list-group-action-active-bg":"--pgn-list-group-action-active-bg","$zindex-dropdown":"--pgn-zindex-dropdown","$zindex-sticky":"--pgn-zindex-sticky","$zindex-fixed":"--pgn-zindex-fixed","$zindex-sheet-backdrop":"--pgn-zindex-sheet-backdrop","$zindex-sheet":"--pgn-zindex-sheet","$zindex-modal-backdrop":"--pgn-zindex-modal-backdrop","$zindex-modal":"--pgn-zindex-modal","$zindex-popover":"--pgn-zindex-popover","$zindex-tooltip":"--pgn-zindex-tooltip","$link-color":"--pgn-link-color","$link-decoration":"--pgn-link-decoration","$link-hover-color":"--pgn-link-hover-color","$link-hover-decoration":"--pgn-link-hover-decoration","$inline-link-color":"--pgn-link-brand-inline-color","$inline-link-decoration":"--pgn-link-brand-inline-decoration","$inline-link-decoration-color":"--pgn-link-brand-inline-decoration-color","$inline-link-hover-color":"--pgn-link-brand-inline-hover-color","$inline-link-hover-decoration":"--pgn-link-brand-inline-hover-decoration","$inline-link-hover-decoration-color":"--pgn-link-brand-inline-hover-decoration-color","$muted-link-color":"--pgn-link-muted-color","$muted-link-decoration":"--pgn-link-muted-decoration","$muted-link-hover-color":"--pgn-link-muted-hover-color","$muted-link-hover-decoration":"--pgn-link-muted-hover-decoration","$muted-inline-link-color":"--pgn-link-muted-inline-color","$muted-inline-link-decoration":"--pgn-link-muted-inline-decoration","$muted-inline-link-decoration-color":"--pgn-link-muted-inline-decoration-color","$muted-inline-link-hover-color":"--pgn-link-muted-inline-hover-color","$muted-inline-link-hover-decoration":"--pgn-link-muted-inline-hover-decoration","$muted-inline-link-hover-decoration-color":"--pgn-link-muted-inline-hover-decoration-color","$brand-link-color":"--pgn-link-brand-color","$brand-link-decoration":"--pgn-link-brand-decoration","$brand-link-hover-color":"--pgn-link-brand-hover-color","$brand-link-hover-decoration":"--pgn-link-brand-hover-decoration","$emphasized-link-hover-darken-percentage":"--pgn-link-emphasized-hover-darken-percentage","$transition-base":"--pgn-transition-base","$transition-fade":"--pgn-transition-fade","$transition-collapse":"--pgn-transition-collapse","$display1-size":"--pgn-display-size-1","$display2-size":"--pgn-display-size-2","$display3-size":"--pgn-display-size-3","$display4-size":"--pgn-display-size-4","$display-mobile-size":"--pgn-display-size-mobile","$display1-weight":"--pgn-display-weight-1","$display2-weight":"--pgn-display-weight-2","$display3-weight":"--pgn-display-weight-3","$display4-weight":"--pgn-display-weight-4","$display-line-height":"--pgn-display-line-height-base","$display-mobile-line-height":"--pgn-display-line-height-mobile","$font-family-base":"--pgn-font-family-base","$font-family-sans-serif":"--pgn-font-family-sans-serif","$font-family-serif":"--pgn-font-family-serif","$font-family-monospace":"--pgn-font-family-monospace","$font-size-base":"--pgn-font-size-base","$font-size-lg":"--pgn-font-size-lg","$font-size-sm":"--pgn-font-size-sm","$font-size-xs":"--pgn-font-size-xs","$small-font-size":"--pgn-font-size-small-base","$x-small-font-size":"--pgn-font-size-small-x","$h1-font-size":"--pgn-font-size-h1","$h2-font-size":"--pgn-font-size-h2","$h3-font-size":"--pgn-font-size-h3","$h4-font-size":"--pgn-font-size-h4","$h5-font-size":"--pgn-font-size-h5","$h6-font-size":"--pgn-font-size-h6","$h1-mobile-font-size":"--pgn-font-size-mobile-h1","$h2-mobile-font-size":"--pgn-font-size-mobile-h2","$h3-mobile-font-size":"--pgn-font-size-mobile-h3","$h4-mobile-font-size":"--pgn-font-size-mobile-h4","$h5-mobile-font-size":"--pgn-font-size-mobile-h5","$h6-mobile-font-size":"--pgn-font-size-mobile-h6","$lead-font-size":"--pgn-font-size-lead","$font-weight-lighter":"--pgn-font-weight-lighter","$font-weight-light":"--pgn-font-weight-light","$font-weight-normal":"--pgn-font-weight-normal","$font-weight-semi-bold":"--pgn-font-weight-semi-bold","$font-weight-bold":"--pgn-font-weight-bold","$font-weight-bolder":"--pgn-font-weight-bolder","$font-weight-base":"--pgn-font-weight-base","$lead-font-weight":"--pgn-font-weight-lead","$headings-margin-bottom":"--pgn-headings-margin-bottom","$headings-font-family":"--pgn-headings-font-family","$headings-font-weight":"--pgn-headings-font-weight","$headings-line-height":"--pgn-headings-line-height","$headings-color":"--pgn-headings-color","$line-height-base":"--pgn-line-height-base","$line-height-lg":"--pgn-line-height-lg","$line-height-sm":"--pgn-line-height-sm","$paragraph-margin-bottom":"--pgn-paragraph-margin-bottom"} \ No newline at end of file diff --git a/tokens/build/scss-to-css.json b/tokens/build/scss-to-css.json new file mode 100644 index 0000000000..4ea209eb19 --- /dev/null +++ b/tokens/build/scss-to-css.json @@ -0,0 +1 @@ +{"$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-width)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-gutter":"var(--pgn-form-input-check-gutter)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-grid-gutter-width":"var(--pgn-form-grid-gutter-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-margin-between":"var(--pgn-modal-footer-margin-between)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-dialog-margin":"var(--pgn-modal-dialog-margin-base)","$modal-dialog-margin-y-sm-up":"var(--pgn-modal-dialog-margin-y-sm-up)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-box-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-border)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-width":"var(--pgn-tooltip-arrow-width)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$component-active-color":"var(--pgn-component-active-color)","$component-active-bg":"var(--pgn-component-active-bg)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"} \ No newline at end of file diff --git a/tokens/build/variables.css b/tokens/build/variables.css index 0d2ef0deaf..f8f228305d 100644 --- a/tokens/build/variables.css +++ b/tokens/build/variables.css @@ -1,11 +1,7 @@ :root { - --pgn-paragraph-margin-bottom: 1rem; --pgn-line-height-sm: 1.5; --pgn-line-height-lg: 1.5; --pgn-line-height-base: 1.5556; - --pgn-headings-line-height: 1.25; - --pgn-headings-font-family: null; - --pgn-headings-margin-bottom: .5rem; --pgn-font-weight-lead: null; --pgn-font-weight-bolder: bolder; --pgn-font-weight-bold: 700; @@ -32,50 +28,10 @@ --pgn-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-display-line-height-mobile: 3.5rem; - --pgn-display-line-height-base: 1; - --pgn-display-size-mobile: 3.25rem; - --pgn-display-size-4: 7.5rem; - --pgn-display-size-3: 5.625rem; - --pgn-display-size-2: 4.875rem; - --pgn-display-size-1: 3.75rem; --pgn-transition-collapse: height .35s ease; --pgn-transition-fade: opacity .15s linear; --pgn-transition-base: all .2s ease-in-out; - --pgn-link-emphasized-hover-darken-percentage: 15%; - --pgn-link-brand-inline-hover-decoration-color: #003C5E; - --pgn-link-brand-inline-hover-decoration: underline; - --pgn-link-brand-inline-hover-color: #003C5E; - --pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3); - --pgn-link-brand-inline-decoration: underline; - --pgn-link-brand-hover-decoration: underline; - --pgn-link-brand-hover-color: #51002B; - --pgn-link-brand-decoration: none; - --pgn-link-muted-inline-hover-decoration-color: #020911; - --pgn-link-muted-inline-hover-decoration: underline; - --pgn-link-muted-inline-hover-color: #020911; - --pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3); - --pgn-link-muted-inline-decoration: underline; - --pgn-link-muted-hover-decoration: underline; - --pgn-link-muted-hover-color: #020911; - --pgn-link-muted-decoration: none; - --pgn-link-inline-hover-decoration-color: #003C5E; - --pgn-link-inline-hover-decoration: underline; - --pgn-link-inline-hover-color: #003C5E; - --pgn-link-inline-decoration-color: rgba(0, 109, 170, .3); - --pgn-link-inline-decoration: underline; - --pgn-link-hover-decoration: underline; - --pgn-link-hover-color: #003C5E; - --pgn-link-decoration: none; - --pgn-zindex-tooltip: 1070; - --pgn-zindex-popover: 1060; - --pgn-zindex-modal: 1050; - --pgn-zindex-modal-backdrop: 1040; - --pgn-zindex-sheet: 1032; - --pgn-zindex-sheet-backdrop: 1031; - --pgn-zindex-fixed: 1030; - --pgn-zindex-sticky: 1020; - --pgn-zindex-dropdown: 1000; + --pgn-spacer-base: 1rem; --pgn-spacing-base-5-5: 4rem; --pgn-spacing-base-4-5: 2rem; --pgn-spacing-base-3-5: 1.25rem; @@ -88,22 +44,22 @@ --pgn-spacing-base-2: .5rem; --pgn-spacing-base-1: .25rem; --pgn-spacing-base-0: 0; - --pgn-size-base-100: 100rem; - --pgn-size-base-75: 75rem; - --pgn-size-base-50: 50rem; - --pgn-size-base-25: 25rem; - --pgn-list-group-item-padding-x: 1.25rem; - --pgn-list-group-item-padding-y: .75rem; - --pgn-list-group-color: null; --pgn-grid-row-columns: 6; --pgn-grid-gutter-width: 24px; --pgn-grid-columns: 12; - --pgn-breakpoint-xxl: 1400px; - --pgn-breakpoint-xl: 1200px; - --pgn-breakpoint-lg: 992px; - --pgn-breakpoint-md: 768px; - --pgn-breakpoint-sm: 576px; - --pgn-breakpoint-xs: 0; + --pgn-zindex-fixed: 1030; + --pgn-zindex-sticky: 1020; + --pgn-zindex-2000: 2000; + --pgn-zindex-1800: 1800; + --pgn-zindex-1600: 1600; + --pgn-zindex-1400: 1400; + --pgn-zindex-1200: 1200; + --pgn-zindex-1000: 1000; + --pgn-zindex-800: 800; + --pgn-zindex-600: 600; + --pgn-zindex-400: 400; + --pgn-zindex-200: 200; + --pgn-zindex-0: 0; --pgn-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); --pgn-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); --pgn-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); @@ -137,23 +93,23 @@ --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); - --pgn-core-list-inline-padding: .5rem; - --pgn-core-mark-bg: #FFF243; - --pgn-core-mark-padding: .2em; - --pgn-core-input-btn-focus-width: 1px; - --pgn-core-input-btn-line-height-sm: 1.4286; - --pgn-core-input-btn-line-height-base: 1.3333; - --pgn-core-input-btn-font-size-lg: 1.325rem; - --pgn-core-input-btn-font-size-sm: .875rem; - --pgn-core-input-btn-font-size-base: 1.125rem; - --pgn-core-input-btn-font-family: inherit; - --pgn-core-input-btn-padding-lg-x: 1.25rem; - --pgn-core-input-btn-padding-lg-y: .6875rem; - --pgn-core-input-btn-padding-sm-x: .75rem; - --pgn-core-input-btn-padding-sm-y: .4375rem; - --pgn-core-input-btn-padding-x: 1rem; - --pgn-core-input-btn-padding-y: .5625rem; - --pgn-core-spacer: 1rem; + --pgn-display-line-height-mobile: 3.5rem; + --pgn-display-line-height-base: 1; + --pgn-display-size-mobile: 3.25rem; + --pgn-display-size-4: 7.5rem; + --pgn-display-size-3: 5.625rem; + --pgn-display-size-2: 4.875rem; + --pgn-display-size-1: 3.75rem; + --pgn-breakpoint-xxl: 1400px; + --pgn-breakpoint-xl: 1200px; + --pgn-breakpoint-lg: 992px; + --pgn-breakpoint-md: 768px; + --pgn-breakpoint-sm: 576px; + --pgn-breakpoint-xs: 0; + --pgn-border-radius-sm: .25rem; + --pgn-border-radius-lg: .425rem; + --pgn-border-radius-base: .375rem; + --pgn-border-width: 1px; --pgn-tooltip-arrow-height: .4rem; --pgn-tooltip-arrow-width: .8rem; --pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); @@ -176,17 +132,6 @@ --pgn-toast-max-width: 400px; --pgn-tabs-notification-width: 1rem; --pgn-tabs-notification-height: 1rem; - --pgn-table-th-font-weight: null; - --pgn-table-level-border: -6; - --pgn-table-level-bg: -9; - --pgn-table-striped-order: odd; - --pgn-table-dark-bg-hover: rgba(255, 255, 255, .075); - --pgn-table-dark-bg-accent: rgba(255, 255, 255, .05); - --pgn-table-bg-hover: rgba(0, 0, 0, .075); - --pgn-table-bg-accent: rgba(0, 0, 0, .05); - --pgn-table-bg-base: null; - --pgn-table-cell-padding-sm: .3rem; - --pgn-table-cell-padding-base: .75rem; --pgn-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); --pgn-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); --pgn-sticky-offset: 0; @@ -195,8 +140,8 @@ --pgn-spinner-sm-width: 1rem; --pgn-spinner-border-width: .25em; --pgn-spinner-width: 2rem; - --pgn-selectable-box-cols-number-max: 12; - --pgn-selectable-box-cols-number-min: 1; + --pgn-sheet-zindex-main: 1032; + --pgn-sheet-zindex-backdrop: 1031; --pgn-selectable-box-box-space: .75rem; --pgn-selectable-box-border-radius: .25rem; --pgn-selectable-box-padding: 1rem; @@ -221,6 +166,7 @@ --pgn-product-tour-checkpoint-width-max: 480px; --pgn-product-tour-checkpoint-width-arrow: 15px; --pgn-product-tour-checkpoint-width-border: 8px; + --pgn-popover-zindex: 1060; --pgn-popover-arrow-height: .5rem; --pgn-popover-arrow-width: 1rem; --pgn-popover-icon-width: 1rem; @@ -229,7 +175,6 @@ --pgn-popover-header-padding-x: 1rem; --pgn-popover-header-padding-y: .5rem; --pgn-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); - --pgn-popover-border-color: rgba(0, 0, 0, .2); --pgn-popover-max-width: 480px; --pgn-reduced-dropdown-width-min: 6rem; --pgn-reduced-dropdown-height-max: 60vh; @@ -258,8 +203,6 @@ --pgn-navbar-light-color-disabled: rgba(0, 0, 0, .3); --pgn-navbar-light-color-active: rgba(0, 0, 0, .9); --pgn-navbar-light-color-hover: rgba(0, 0, 0, .7); - --pgn-navbar-light-color-base: rgba(0, 0, 0, .5); - --pgn-navbar-dark-color-base: rgba(255, 255, 255, .5); --pgn-navbar-toggler-padding-x: .75rem; --pgn-navbar-toggler-padding-y: .25rem; --pgn-navbar-nav-scroll-max-height: 75vh; @@ -269,6 +212,7 @@ --pgn-nav-link-font-weight: 500; --pgn-nav-link-padding-x: 1rem; --pgn-nav-link-padding-y: .5rem; + --pgn-modal-zindex: 1050; --pgn-modal-transform-scale: scale(1.02); --pgn-modal-transform-show: none; --pgn-modal-transform-fade: translate(0, -50px); @@ -279,6 +223,7 @@ --pgn-modal-xl: 1140px; --pgn-modal-header-padding-x: 1.5rem; --pgn-modal-header-padding-y: 1rem; + --pgn-modal-backdrop-zindex: 1040; --pgn-modal-backdrop-opacity: .5; --pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); --pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5); @@ -305,6 +250,57 @@ --pgn-icon-md: 1.5rem; --pgn-icon-sm: 1.25rem; --pgn-icon-inline: .8em; + --pgn-mark-bg: #FFF243; + --pgn-mark-padding: .2em; + --pgn-paragraph-margin-bottom: 1rem; + --pgn-list-group-item-padding-x: 1.25rem; + --pgn-list-group-item-padding-y: .75rem; + --pgn-list-group-color: null; + --pgn-list-inline-padding: .5rem; + --pgn-link-emphasized-hover-darken-percentage: 15%; + --pgn-link-brand-inline-hover-decoration-color: #003C5E; + --pgn-link-brand-inline-hover-decoration: underline; + --pgn-link-brand-inline-hover-color: #003C5E; + --pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3); + --pgn-link-brand-inline-decoration: underline; + --pgn-link-brand-hover-decoration: underline; + --pgn-link-brand-hover-color: #51002B; + --pgn-link-brand-decoration: none; + --pgn-link-muted-inline-hover-decoration-color: #020911; + --pgn-link-muted-inline-hover-decoration: underline; + --pgn-link-muted-inline-hover-color: #020911; + --pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3); + --pgn-link-muted-inline-decoration: underline; + --pgn-link-muted-hover-decoration: underline; + --pgn-link-muted-hover-color: #020911; + --pgn-link-muted-decoration: none; + --pgn-link-inline-hover-decoration-color: #003C5E; + --pgn-link-inline-hover-decoration: underline; + --pgn-link-inline-hover-color: #003C5E; + --pgn-link-inline-decoration-color: rgba(0, 109, 170, .3); + --pgn-link-inline-decoration: underline; + --pgn-link-hover-decoration: underline; + --pgn-link-hover-color: #003C5E; + --pgn-link-decoration: none; + --pgn-input-btn-focus-width: 1px; + --pgn-input-btn-line-height-sm: 1.4286; + --pgn-input-btn-line-height-base: 1.3333; + --pgn-input-btn-font-size-lg: 1.325rem; + --pgn-input-btn-font-size-sm: .875rem; + --pgn-input-btn-font-size-base: 1.125rem; + --pgn-input-btn-font-family: inherit; + --pgn-input-btn-padding-lg-x: 1.25rem; + --pgn-input-btn-padding-lg-y: .6875rem; + --pgn-input-btn-padding-sm-x: .75rem; + --pgn-input-btn-padding-sm-y: .4375rem; + --pgn-input-btn-padding-x: 1rem; + --pgn-input-btn-padding-y: .5625rem; + --pgn-headings-line-height: 1.25; + --pgn-headings-font-family: null; + --pgn-headings-margin-bottom: .5rem; + --pgn-caret-spacing: .255em; + --pgn-caret-vertical-align: .255em; + --pgn-caret-width: .3em; --pgn-form-select-icon-padding: .5625rem; --pgn-form-control-icon-width: 32px; --pgn-form-feedback-tooltip-opacity: .9; @@ -353,6 +349,7 @@ --pgn-form-input-focus-width: 1px; --pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075); --pgn-dropzone-padding: 1.5rem; + --pgn-dropdown-zindex: 1000; --pgn-dropdown-border-color: rgba(0, 0, 0, .15); --pgn-dropdown-spacer: .125rem; --pgn-dropdown-padding-y-item: .5rem; @@ -363,7 +360,8 @@ --pgn-data-table-pagination-dropdown-min-width: 6rem; --pgn-data-table-pagination-dropdown-max-height: 60vh; --pgn-data-table-footer-position: center; - --pgn-data-table-padding-cell: .5rem .75rem; + --pgn-data-table-padding-head-cell: .5rem .75rem; + --pgn-data-table-padding-cell: .75rem; --pgn-data-table-padding-small: .5rem; --pgn-data-table-padding-y: .75rem; --pgn-data-table-padding-x: .75rem; @@ -394,7 +392,6 @@ --pgn-chip-margin-inline: .5rem; --pgn-chip-padding-x: .5rem; --pgn-chip-padding-y: .125rem; - --pgn-carousel-transition-duration: .6s; --pgn-carousel-caption-width: 70%; --pgn-carousel-indicator-transition: opacity .6s ease; --pgn-carousel-indicator-spacer: 3px; @@ -434,7 +431,6 @@ --pgn-btn-block-spacing-y: .5rem; --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); --pgn-btn-tertiary-inverse-bg-base: transparent; - --pgn-btn-tertiary-bg-base: transparent; --pgn-btn-disabled-opacity: .65; --pgn-btn-focus-gap: 1px; --pgn-btn-focus-width: 2px; @@ -584,15 +580,6 @@ --pgn-color-blue: #23419F; --pgn-color-black: #000000; --pgn-color-white: #FFFFFF; - --pgn-caret-spacing: .255em; - --pgn-caret-vertical-align: .255em; - --pgn-caret-width: .3em; - --pgn-border-radius-sm: .25rem; - --pgn-border-radius-lg: .425rem; - --pgn-border-radius-base: .375rem; - --pgn-border-width: 1px; - --pgn-headings-color: var(--pgn-color-black); - --pgn-headings-font-weight: var(--pgn-font-weight-bold); --pgn-font-weight-base: var(--pgn-font-weight-normal); --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25); --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); @@ -605,20 +592,7 @@ --pgn-display-weight-3: var(--pgn-font-weight-bold); --pgn-display-weight-2: var(--pgn-font-weight-bold); --pgn-display-weight-1: var(--pgn-font-weight-bold); - --pgn-list-group-action-active-bg: var(--pgn-color-gray-200); - --pgn-list-group-action-color-base: var(--pgn-color-gray-700); - --pgn-list-group-disabled-color: var(--pgn-color-gray-600); - --pgn-list-group-border-radius: var(--pgn-border-radius-base); - --pgn-list-group-border-width: var(--pgn-border-width); - --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); - --pgn-list-group-bg-hover: var(--pgn-color-gray-100); - --pgn-list-group-bg-base: var(--pgn-color-white); - --pgn-core-dt-font-weight: var(--pgn-font-weight-bold); - --pgn-core-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25); - --pgn-core-blockquote-small-font-size: var(--pgn-font-size-small-base); - --pgn-core-input-btn-border-width: var(--pgn-border-width); - --pgn-core-input-btn-focus-box-shadow: 0 0 0 var(--pgn-core-input-btn-focus-width) var(--pgn-core-input-btn-focus-color); - --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg); + --pgn-border-color: var(--pgn-color-gray-200); --pgn-tooltip-arrow-color-light: var(--pgn-color-white); --pgn-tooltip-border-radius: var(--pgn-border-radius-base); --pgn-tooltip-bg-light: var(--pgn-color-white); @@ -630,12 +604,6 @@ --pgn-toast-header-color-base: var(--pgn-color-white); --pgn-toast-color-background: var(--pgn-color-gray-700); --pgn-tabs-notification-font-size: var(--pgn-font-size-xs); - --pgn-table-dark-bg-base: var(--pgn-color-gray-700); - --pgn-table-dark-color-base: var(--pgn-color-white); - --pgn-table-border-width: var(--pgn-border-width); - --pgn-table-bg-head: var(--pgn-color-gray-100); - --pgn-table-bg-active: var(--pgn-table-bg-hover); - --pgn-table-color-head: var(--pgn-color-gray-700); --pgn-spinner-sm-height: var(--pgn-spinner-sm-width); --pgn-spinner-height: var(--pgn-spinner-width); --pgn-search-field-border-color-focus: var(--pgn-color-black); @@ -653,7 +621,6 @@ --pgn-popover-success-bg: var(--pgn-color-success-100); --pgn-popover-body-padding-x: var(--pgn-popover-header-padding-x); --pgn-popover-body-padding-y: var(--pgn-popover-header-padding-y); - --pgn-popover-header-bg: var(--pgn-color-white); --pgn-popover-border-border: var(--pgn-border-width); --pgn-popover-border-radius: var(--pgn-border-radius-sm); --pgn-popover-bg: var(--pgn-color-white); @@ -679,9 +646,9 @@ --pgn-navbar-toggler-font-size: var(--pgn-font-size-lg); --pgn-navbar-brand-font-size: var(--pgn-font-size-lg); --pgn-navbar-nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2); - --pgn-navbar-padding-x-base: var(--pgn-core-spacer); - --pgn-navbar-padding-y: calc(var(--pgn-core-spacer) / 2); - --pgn-nav-divider-margin-y: calc(var(--pgn-core-spacer) / 2); + --pgn-navbar-padding-x-base: var(--pgn-spacer-base); + --pgn-navbar-padding-y: calc(var(--pgn-spacer-base) / 2); + --pgn-nav-divider-margin-y: calc(var(--pgn-spacer-base) / 2); --pgn-nav-divider-color: var(--pgn-color-gray-100); --pgn-nav-pills-border-radius: var(--pgn-border-radius-base); --pgn-nav-tabs-link-hover-bg: var(--pgn-color-light-400); @@ -695,12 +662,32 @@ --pgn-modal-content-bg: var(--pgn-color-white); --pgn-modal-title-line-height: var(--pgn-line-height-base); --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y); - --pgn-menu-background-base: var(--pgn-btn-tertiary-bg-base); --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200); --pgn-image-thumbnail-border-width: var(--pgn-border-width); --pgn-icon-button-accent-color: var(--pgn-color-white); --pgn-icon-button-diameter-inline: calc(var(--pgn-line-height-base) + .1em); + --pgn-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25); + --pgn-blockquote-small-font-size: var(--pgn-font-size-small-base); + --pgn-list-group-action-active-bg: var(--pgn-color-gray-200); + --pgn-list-group-action-color-base: var(--pgn-color-gray-700); + --pgn-list-group-disabled-color: var(--pgn-color-gray-600); + --pgn-list-group-border-radius: var(--pgn-border-radius-base); + --pgn-list-group-border-width: var(--pgn-border-width); + --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); + --pgn-list-group-bg-hover: var(--pgn-color-gray-100); + --pgn-list-group-bg-base: var(--pgn-color-white); + --pgn-dt-font-weight: var(--pgn-font-weight-bold); + --pgn-input-btn-border-width: var(--pgn-border-width); + --pgn-input-btn-focus-box-shadow: 0 0 0 var(--pgn-input-btn-focus-width) var(--pgn-input-btn-focus-color); + --pgn-input-btn-line-height-lg: var(--pgn-line-height-lg); + --pgn-hr-border-margin-y: var(--pgn-spacer-base); + --pgn-hr-border-width: var(--pgn-border-width); + --pgn-hr-border-color: rgba(var(--pgn-color-black), .1); + --pgn-headings-color: var(--pgn-color-black); + --pgn-headings-font-weight: var(--pgn-font-weight-bold); + --pgn-component-active-color: var(--pgn-color-white); + --pgn-body-color: var(--pgn-color-gray-700); --pgn-form-feedback-tooltip-border-radius: var(--pgn-border-radius-base); --pgn-form-feedback-tooltip-line-height: var(--pgn-line-height-base); --pgn-form-feedback-tooltip-font-size: var(--pgn-font-size-sm); @@ -713,7 +700,6 @@ --pgn-form-custom-select-border-radius: var(--pgn-border-radius-base); --pgn-form-custom-select-border-width-focus: var(--pgn-form-input-focus-width); --pgn-form-custom-select-bg-disabled: var(--pgn-color-gray-100); - --pgn-form-custom-select-indicator-color: var(--pgn-color-gray-700); --pgn-form-custom-switch-indicator-size: calc(var(--pgn-form-custom-control-indicator-size) - var(--pgn-form-custom-control-indicator-border-width) * 4); --pgn-form-custom-switch-indicator-border-radius: calc(var(--pgn-form-custom-control-indicator-size) / 2); --pgn-form-custom-switch-width: calc(var(--pgn-form-custom-control-indicator-size) * 1.75); @@ -726,18 +712,18 @@ --pgn-form-input-color-base: var(--pgn-color-gray-700); --pgn-form-input-bg-disabled: var(--pgn-color-gray-100); --pgn-form-input-bg-base: var(--pgn-color-white); - --pgn-form-input-line-height-sm: var(--pgn-core-input-btn-line-height-sm); - --pgn-form-input-line-height-base: var(--pgn-core-input-btn-line-height-base); - --pgn-form-input-font-size-lg: var(--pgn-core-input-btn-font-size-lg); - --pgn-form-input-font-size-sm: var(--pgn-core-input-btn-font-size-sm); - --pgn-form-input-font-size-base: var(--pgn-core-input-btn-font-size-base); - --pgn-form-input-font-family: var(--pgn-core-input-btn-font-family); - --pgn-form-input-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); - --pgn-form-input-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x); - --pgn-form-input-padding-x-base: var(--pgn-core-input-btn-padding-x); - --pgn-form-input-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); - --pgn-form-input-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y); - --pgn-form-input-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-form-input-line-height-sm: var(--pgn-input-btn-line-height-sm); + --pgn-form-input-line-height-base: var(--pgn-input-btn-line-height-base); + --pgn-form-input-font-size-lg: var(--pgn-input-btn-font-size-lg); + --pgn-form-input-font-size-sm: var(--pgn-input-btn-font-size-sm); + --pgn-form-input-font-size-base: var(--pgn-input-btn-font-size-base); + --pgn-form-input-font-family: var(--pgn-input-btn-font-family); + --pgn-form-input-padding-x-lg: var(--pgn-input-btn-padding-lg-x); + --pgn-form-input-padding-x-sm: var(--pgn-input-btn-padding-sm-x); + --pgn-form-input-padding-x-base: var(--pgn-input-btn-padding-x); + --pgn-form-input-padding-y-lg: var(--pgn-input-btn-padding-lg-y); + --pgn-form-input-padding-y-sm: var(--pgn-input-btn-padding-sm-y); + --pgn-form-input-padding-y-base: var(--pgn-input-btn-padding-y); --pgn-dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x); --pgn-dropzone-border-error: 2px solid var(--pgn-color-danger-300); --pgn-dropzone-border-focus: 2px solid var(--pgn-color-info-300); @@ -746,7 +732,7 @@ --pgn-dropdown-link-hover-color: var(--pgn-color-gray-900); --pgn-dropdown-link-color: var(--pgn-color-gray-900); --pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(var(--pgn-color-black), .175); - --pgn-dropdown-divider-margin-y: calc(var(--pgn-core-spacer) / 2); + --pgn-dropdown-divider-margin-y: calc(var(--pgn-spacer-base) / 2); --pgn-dropdown-divider-bg: var(--pgn-color-gray-100); --pgn-dropdown-border-radius-base: var(--pgn-border-radius-base); --pgn-dropdown-border-width: var(--pgn-border-width); @@ -768,10 +754,8 @@ --pgn-close-button-color: var(--pgn-color-black); --pgn-close-button-font-weight: var(--pgn-font-weight-bold); --pgn-close-button-font-size: calc(var(--pgn-font-size-base) * 1.5); - --pgn-carousel-transition-base: transform var(--pgn-carousel-transition-duration) ease-in-out; --pgn-carousel-caption-color: var(--pgn-color-white); --pgn-carousel-indicator-active-bg: var(--pgn-color-white); - --pgn-carousel-control-color: var(--pgn-color-white); --pgn-card-footer-text-font-size: var(--pgn-font-size-small-x); --pgn-card-divider-margin-y: var(--pgn-card-spacer-y); --pgn-card-divider-bg: var(--pgn-color-light-400); @@ -789,25 +773,25 @@ --pgn-btn-border-radius-sm: var(--pgn-border-radius-sm); --pgn-btn-border-radius-lg: var(--pgn-border-radius-lg); --pgn-btn-border-radius-base: var(--pgn-border-radius-base); - --pgn-btn-line-height-sm: var(--pgn-core-input-btn-line-height-sm); - --pgn-btn-line-height-base: var(--pgn-core-input-btn-line-height-base); + --pgn-btn-line-height-sm: var(--pgn-input-btn-line-height-sm); + --pgn-btn-line-height-base: var(--pgn-input-btn-line-height-base); --pgn-btn-font-width: var(--pgn-font-weight-normal); - --pgn-btn-font-size-lg: var(--pgn-core-input-btn-font-size-lg); - --pgn-btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm); - --pgn-btn-font-size-base: var(--pgn-core-input-btn-font-size-base); - --pgn-btn-font-family: var(--pgn-core-input-btn-font-family); - --pgn-btn-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x); - --pgn-btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x); - --pgn-btn-padding-x-base: var(--pgn-core-input-btn-padding-x); - --pgn-btn-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y); - --pgn-btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y); - --pgn-btn-padding-y-base: var(--pgn-core-input-btn-padding-y); + --pgn-btn-font-size-lg: var(--pgn-input-btn-font-size-lg); + --pgn-btn-font-size-sm: var(--pgn-input-btn-font-size-sm); + --pgn-btn-font-size-base: var(--pgn-input-btn-font-size-base); + --pgn-btn-font-family: var(--pgn-input-btn-font-family); + --pgn-btn-padding-x-sm: var(--pgn-input-btn-padding-sm-x); + --pgn-btn-padding-x-lg: var(--pgn-input-btn-padding-lg-x); + --pgn-btn-padding-x-base: var(--pgn-input-btn-padding-x); + --pgn-btn-padding-y-sm: var(--pgn-input-btn-padding-sm-y); + --pgn-btn-padding-y-lg: var(--pgn-input-btn-padding-lg-y); + --pgn-btn-padding-y-base: var(--pgn-input-btn-padding-y); --pgn-breadcrumb-inverse-color: var(--pgn-color-white); --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700); --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600); --pgn-breadcrumb-bg: var(--pgn-color-gray-200); --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base); - --pgn-badge-focus-width: var(--pgn-core-input-btn-focus-width); + --pgn-badge-focus-width: var(--pgn-input-btn-focus-width); --pgn-badge-font-weight: var(--pgn-font-weight-bold); --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300); --pgn-annotation-line-height: var(--pgn-line-height-sm); @@ -816,7 +800,6 @@ --pgn-alert-color-title: var(--pgn-color-black); --pgn-alert-font-weight-link: var(--pgn-font-weight-normal); --pgn-alert-border-radius: var(--pgn-border-radius-base); - --pgn-component-active-color: var(--pgn-color-white); --pgn-color-dark-500: var(--pgn-color-dark-base); --pgn-color-light-500: var(--pgn-color-light-base); --pgn-color-danger-base: var(--pgn-color-red); @@ -827,25 +810,8 @@ --pgn-color-secondary-base: var(--pgn-color-gray-700); --pgn-color-primary-500: var(--pgn-color-primary-base); --pgn-color-gray-500: var(--pgn-color-gray-base); - --pgn-body-color: var(--pgn-color-gray-700); - --pgn-body-bg: var(--pgn-color-white); - --pgn-border-hr-margin-y: var(--pgn-core-spacer); - --pgn-border-hr-width: var(--pgn-border-width); - --pgn-border-hr-color: rgba(var(--pgn-color-black), .1); - --pgn-border-color: var(--pgn-color-gray-200); - --pgn-link-brand-inline-color: var(--pgn-color-brand-500); - --pgn-link-brand-color: var(--pgn-color-brand-500); - --pgn-link-muted-inline-color: var(--pgn-color-primary-500); - --pgn-link-muted-color: var(--pgn-color-primary-500); - --pgn-list-group-action-active-color: var(--pgn-body-color); - --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); - --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); - --pgn-list-group-active-color-base: var(--pgn-component-active-color); + --pgn-color-background-base: var(--pgn-color-white); --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); - --pgn-table-dark-color-border: var(--pgn-table-dark-bg-base); - --pgn-table-dark-color-hover: var(--pgn-table-dark-color-base); - --pgn-table-border-color: var(--pgn-border-color); - --pgn-table-color-base: var(--pgn-body-color); --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); --pgn-search-field-border-color-base: var(--pgn-color-gray-500); --pgn-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500); @@ -856,7 +822,7 @@ --pgn-popover-body-color: var(--pgn-body-color); --pgn-popover-header-color: var(--pgn-headings-color); --pgn-pagination-focus-color-base: var(--pgn-color-primary-500); - --pgn-pagination-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow); + --pgn-pagination-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow); --pgn-pagination-color-disabled: var(--pgn-color-gray-500); --pgn-pagination-color-active: var(--pgn-component-active-color); --pgn-navbar-dark-brand-color-hover: var(--pgn-navbar-dark-color-active); @@ -865,14 +831,23 @@ --pgn-navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2); --pgn-navbar-brand-height: calc(var(--pgn-navbar-brand-font-size) * var(--pgn-line-height-base)); --pgn-nav-pills-link-link-active-color: var(--pgn-component-active-color); - --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg); --pgn-nav-tabs-link-active-color-border: transparent transparent var(--pgn-color-primary-500); --pgn-nav-tabs-link-active-color-base: var(--pgn-color-primary-500); --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color); --pgn-modal-header-border-color: var(--pgn-border-color); --pgn-modal-footer-border-width: var(--pgn-modal-header-border-width); --pgn-image-figure-caption-color: var(--pgn-color-gray-500); - --pgn-image-thumbnail-bg: var(--pgn-body-bg); + --pgn-text-muted: var(--pgn-color-gray-500); + --pgn-list-group-action-active-color: var(--pgn-body-color); + --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); + --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); + --pgn-list-group-active-color-base: var(--pgn-component-active-color); + --pgn-link-brand-inline-color: var(--pgn-color-brand-500); + --pgn-link-brand-color: var(--pgn-color-brand-500); + --pgn-link-muted-inline-color: var(--pgn-color-primary-500); + --pgn-link-muted-color: var(--pgn-color-primary-500); + --pgn-component-active-bg: var(--pgn-color-primary-500); + --pgn-body-bg: var(--pgn-color-background-base); --pgn-form-custom-file-button-bg: var(--pgn-form-input-group-addon-bg); --pgn-form-custom-file-color: var(--pgn-form-input-color-base); --pgn-form-custom-file-font-family: var(--pgn-form-input-font-family); @@ -882,9 +857,8 @@ --pgn-form-custom-file-bg-disabled: var(--pgn-form-input-bg-disabled); --pgn-form-custom-file-bg-base: var(--pgn-form-input-bg-base); --pgn-form-custom-file-border-color-radius: var(--pgn-form-input-border-radius-base); - --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus); --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-gray-500); - --pgn-form-custom-select-border-box-shadow-focus: var(--pgn-core-input-btn-focus-box-shadow); + --pgn-form-custom-select-border-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow); --pgn-form-custom-select-bg-base: var(--pgn-form-input-bg-base); --pgn-form-custom-select-color-disabled: var(--pgn-color-gray-500); --pgn-form-custom-select-color-base: var(--pgn-form-input-color-base); @@ -900,23 +874,22 @@ --pgn-form-custom-select-padding-y-sm: var(--pgn-form-input-padding-y-sm); --pgn-form-custom-select-padding-y-base: var(--pgn-form-input-padding-y-base); --pgn-form-custom-control-label-color-disabled: var(--pgn-color-gray-500); - --pgn-form-custom-control-indicator-active-color-base: var(--pgn-component-active-color); --pgn-form-custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled); --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base); --pgn-form-input-group-addon-color-base: var(--pgn-form-input-color-base); --pgn-form-input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2)); --pgn-form-input-height-inner-half: calc(var(--pgn-form-input-line-height-base) * .5em + var(--pgn-form-input-padding-y-base)); --pgn-form-input-height-inner-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); - --pgn-form-input-height-sm: calc(var(--pgn-form-input-line-height-sm) * 1em + var(--pgn-core-input-btn-padding-sm-y) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-height-sm: calc(var(--pgn-form-input-line-height-sm) * 1em + var(--pgn-input-btn-padding-sm-y) * 2 + var(--pgn-form-input-border-height)); --pgn-form-input-height-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2 + var(--pgn-form-input-border-height)); --pgn-form-input-focus-color-base: var(--pgn-form-input-color-base); --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base); - --pgn-form-input-box-shadow-focus: var(--pgn-core-input-btn-focus-box-shadow); - --pgn-form-input-border-width: var(--pgn-core-input-btn-border-width); + --pgn-form-input-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow); + --pgn-form-input-border-width: var(--pgn-input-btn-border-width); --pgn-form-input-border-color: var(--pgn-color-gray-500); --pgn-form-input-color-plaintext: var(--pgn-body-color); --pgn-form-input-color-placeholder: var(--pgn-color-gray-500); - --pgn-form-input-line-height-lg: var(--pgn-core-input-btn-line-height-lg); + --pgn-form-input-line-height-lg: var(--pgn-input-btn-line-height-lg); --pgn-form-input-font-weight: var(--pgn-font-weight-base); --pgn-dropzone-restriction-msg-color: var(--pgn-color-gray-500); --pgn-dropzone-border-active: 2px solid var(--pgn-color-primary-500); @@ -930,33 +903,29 @@ --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); - --pgn-btn-border-width: var(--pgn-core-input-btn-border-width); - --pgn-btn-line-height-lg: var(--pgn-core-input-btn-line-height-lg); + --pgn-btn-border-width: var(--pgn-input-btn-border-width); + --pgn-btn-line-height-lg: var(--pgn-input-btn-line-height-lg); --pgn-breadcrumb-inverse-active: var(--pgn-color-light-500); --pgn-breadcrumb-color-active: var(--pgn-color-gray-500); --pgn-breadcrumb-color-base: var(--pgn-color-primary-500); - --pgn-text-muted: var(--pgn-color-gray-500); - --pgn-component-active-bg: var(--pgn-color-primary-500); --pgn-color-danger-500: var(--pgn-color-danger-base); --pgn-color-warning-500: var(--pgn-color-warning-base); --pgn-color-info-500: var(--pgn-color-info-base); --pgn-color-success-500: var(--pgn-color-success-base); --pgn-color-secondary-500: var(--pgn-color-secondary-base); - --pgn-link-inline-color: var(--pgn-color-info-500); - --pgn-link-color: var(--pgn-color-info-500); - --pgn-list-group-active-bg: var(--pgn-component-active-bg); - --pgn-core-input-btn-focus-color: var(--pgn-component-active-bg); - --pgn-table-caption-color: var(--pgn-text-muted); - --pgn-table-color-hover: var(--pgn-table-color-base); --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); --pgn-popover-success-icon-color: var(--pgn-color-success-500); --pgn-pagination-bg-active: var(--pgn-component-active-bg); --pgn-nav-pills-link-link-active-bg: var(--pgn-component-active-bg); + --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg); --pgn-modal-footer-border-color: var(--pgn-modal-header-border-color); --pgn-menu-background-active: var(--pgn-btn-tertiary-bg-active); - --pgn-form-feedback-color-invalid: var(--pgn-color-danger-500); - --pgn-form-feedback-color-valid: var(--pgn-color-success-500); + --pgn-image-thumbnail-bg: var(--pgn-body-bg); + --pgn-list-group-active-bg: var(--pgn-component-active-bg); + --pgn-link-inline-color: var(--pgn-color-info-500); + --pgn-link-color: var(--pgn-color-info-500); + --pgn-input-btn-focus-color: var(--pgn-component-active-bg); --pgn-form-custom-file-button-color: var(--pgn-form-custom-file-color); --pgn-form-custom-file-font-weight: var(--pgn-form-input-font-weight); --pgn-form-custom-file-box-shadow-focus: var(--pgn-form-input-box-shadow-focus); @@ -964,6 +933,7 @@ --pgn-form-custom-file-border-color-base: var(--pgn-form-input-border-color); --pgn-form-custom-file-height-inner: var(--pgn-form-input-height-inner-base); --pgn-form-custom-file-height-base: var(--pgn-form-input-height-base); + --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus); --pgn-form-custom-range-thumb-bg-base: var(--pgn-component-active-bg); --pgn-form-custom-select-height-sm: var(--pgn-form-input-height-sm); --pgn-form-custom-select-border-color-base: var(--pgn-form-input-border-color); @@ -974,25 +944,18 @@ --pgn-form-custom-select-font-weight: var(--pgn-form-input-font-weight); --pgn-form-custom-select-font-height-base: var(--pgn-form-input-height-base); --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-component-active-bg); - --pgn-form-custom-control-indicator-active-bg: var(--pgn-component-active-bg); - --pgn-form-custom-control-indicator-checked-bg-base: var(--pgn-component-active-bg); - --pgn-form-custom-control-indicator-checked-color: var(--pgn-component-active-bg); + --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-component-active-bg); --pgn-form-input-group-addon-color-border: var(--pgn-form-input-border-color); - --pgn-form-input-height-lg: calc(var(--pgn-form-input-line-height-lg) * 1em + var(--pgn-core-input-btn-padding-lg-y) * 2 + var(--pgn-form-input-border-height)); + --pgn-form-input-height-lg: calc(var(--pgn-form-input-line-height-lg) * 1em + var(--pgn-input-btn-padding-lg-y) * 2 + var(--pgn-form-input-border-height)); --pgn-form-input-focus-color-border: var(--pgn-component-active-bg); --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); - --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); --pgn-pagination-color-base: var(--pgn-link-color); - --pgn-form-feedback-icon-color-invalid: var(--pgn-form-feedback-color-invalid); - --pgn-form-feedback-icon-color-valid: var(--pgn-form-feedback-color-valid); + --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); --pgn-form-custom-file-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-font-height-lg: var(--pgn-form-input-height-lg); --pgn-form-custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg); - --pgn-form-custom-checkbox-indicator-indeterminate-color: var(--pgn-form-custom-control-indicator-checked-color); - --pgn-form-custom-control-indicator-active-color-border: var(--pgn-form-custom-control-indicator-active-bg); --pgn-form-custom-control-indicator-checked-border-color-focus: var(--pgn-form-input-focus-color-border); - --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-form-custom-control-indicator-checked-color); } diff --git a/tokens/map-scss-to-css.js b/tokens/map-scss-to-css.js index 0e27d8d9df..600b2f08d3 100644 --- a/tokens/map-scss-to-css.js +++ b/tokens/map-scss-to-css.js @@ -2,26 +2,22 @@ const fs = require('fs'); const path = require('path'); const { getSCSStoCSSMap, getFilesWithExtension } = require('./utils'); -const CORE_BASE_PATH = path.resolve(__dirname, './source'); -const COMPONENTS_BASE_PATH = path.resolve(__dirname, './source/components'); +const BASE_PATH = path.resolve(__dirname, './source'); const BASE_PREFIX = '--pgn'; -const coreContent = {}; -const componentsContent = {}; -const coreTokenPaths = getFilesWithExtension(CORE_BASE_PATH, '.json', [], ['components']); -const componentsTokenPaths = getFilesWithExtension(COMPONENTS_BASE_PATH, '.json'); +const SCSStoCSSMap = {}; +const CSStoSCSSMap = {}; +const tokenPaths = getFilesWithExtension(BASE_PATH, '.json'); -coreTokenPaths.forEach(tokenFile => { - const content = fs.readFileSync(tokenFile, 'utf-8'); - const parsed = JSON.parse(content); - getSCSStoCSSMap(BASE_PREFIX, parsed, coreContent); +tokenPaths.forEach(tokenFile => { + const tokenContent = fs.readFileSync(tokenFile, 'utf-8'); + const parsed = JSON.parse(tokenContent); + getSCSStoCSSMap(BASE_PREFIX, parsed, SCSStoCSSMap); }); -componentsTokenPaths.forEach(tokenFile => { - const content = fs.readFileSync(tokenFile, 'utf-8'); - const parsed = JSON.parse(content); - getSCSStoCSSMap(BASE_PREFIX, parsed, componentsContent); -}); +Object.entries(SCSStoCSSMap).forEach(([key, value]) => { + CSStoSCSSMap[value] = key; +}) -fs.writeFileSync(path.resolve(__dirname, './build/scss-to-css-core.json'), JSON.stringify(coreContent)); -fs.writeFileSync(path.resolve(__dirname, './build/scss-to-css-components.json'), JSON.stringify(componentsContent)); +fs.writeFileSync(path.resolve(__dirname, './build/scss-to-css.json'), JSON.stringify(SCSStoCSSMap)); +fs.writeFileSync(path.resolve(__dirname, './build/css-to-scss.json'), JSON.stringify(CSStoSCSSMap)); diff --git a/tokens/package.json b/tokens/package.json index 9175fd31d8..ac6aa45a42 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -5,7 +5,7 @@ "main": "build-tokens.js", "scripts": { "build-tokens": "node build-tokens.js", - "replace-variables": "node replace-variables.js", + "replace-variables": "node replace-variables.js -p ../src/", "build-scss-to-css-map": "node map-scss-to-css.js" }, "author": "", diff --git a/tokens/replace-variables.js b/tokens/replace-variables.js index 329f4563c5..60d4e8e0c9 100644 --- a/tokens/replace-variables.js +++ b/tokens/replace-variables.js @@ -9,9 +9,9 @@ program .default('scss-to-css')) .action((options) => { const { direction, path } = options; - const sourceFiles = getFilesWithExtension(path, '.scss'); - sourceFiles.forEach(filePath => { - replaceVariables(filePath, direction); + const sourceFiles = getFilesWithExtension(path, '.scss', [], ['Table']); + sourceFiles.forEach(async (filePath) => { + await replaceVariables(filePath, direction); }); }); diff --git a/tokens/source/alias/color.json b/tokens/source/alias/color.json new file mode 100644 index 0000000000..fcbc9f714b --- /dev/null +++ b/tokens/source/alias/color.json @@ -0,0 +1,7 @@ +{ + "color": { + "background": { + "base": { "value": "{color.white.value}", "themeable": true} + } + } +} diff --git a/tokens/source/colors/text/text.tokens.json b/tokens/source/colors/text/text.tokens.json deleted file mode 100644 index 11a4c6de83..0000000000 --- a/tokens/source/colors/text/text.tokens.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "text": { - "muted": { "value": "{color.gray.500.value}", "themeable": true, "source": "$text-muted" } - } -} diff --git a/tokens/source/components/ActionRow/ActionRow.tokens.json b/tokens/source/components/ActionRow.json similarity index 100% rename from tokens/source/components/ActionRow/ActionRow.tokens.json rename to tokens/source/components/ActionRow.json diff --git a/tokens/source/components/Alert/Alert.tokens.json b/tokens/source/components/Alert.json similarity index 100% rename from tokens/source/components/Alert/Alert.tokens.json rename to tokens/source/components/Alert.json diff --git a/tokens/source/components/Annotation/Annotation.tokens.json b/tokens/source/components/Annotation.json similarity index 100% rename from tokens/source/components/Annotation/Annotation.tokens.json rename to tokens/source/components/Annotation.json diff --git a/tokens/source/components/Avatar/Avatar.tokens.json b/tokens/source/components/Avatar.json similarity index 100% rename from tokens/source/components/Avatar/Avatar.tokens.json rename to tokens/source/components/Avatar.json diff --git a/tokens/source/components/AvatarButton/AvatarButton.tokens.json b/tokens/source/components/AvatarButton.json similarity index 100% rename from tokens/source/components/AvatarButton/AvatarButton.tokens.json rename to tokens/source/components/AvatarButton.json diff --git a/tokens/source/components/Badge/Badge.tokens.json b/tokens/source/components/Badge.json similarity index 88% rename from tokens/source/components/Badge/Badge.tokens.json rename to tokens/source/components/Badge.json index 830ab3936f..98cbb60b99 100644 --- a/tokens/source/components/Badge/Badge.tokens.json +++ b/tokens/source/components/Badge.json @@ -19,7 +19,7 @@ }, "transition": { "value": "none", "themeable": true, "source": "$badge-transition" }, "focus": { - "width": { "value": "{core.input.btn.focus.width.value}", "themeable": true, "source": "$badge-focus-width" } + "width": { "value": "{input.btn.focus.width.value}", "themeable": true, "source": "$badge-focus-width" } } } } diff --git a/tokens/source/components/Breadcrumb/Breadcrumb.tokens.json b/tokens/source/components/Breadcrumb.json similarity index 100% rename from tokens/source/components/Breadcrumb/Breadcrumb.tokens.json rename to tokens/source/components/Breadcrumb.json diff --git a/tokens/source/components/Bubble/Bubble.tokens.json b/tokens/source/components/Bubble.json similarity index 100% rename from tokens/source/components/Bubble/Bubble.tokens.json rename to tokens/source/components/Bubble.json diff --git a/tokens/source/components/Button/Button.tokens.json b/tokens/source/components/Button.json similarity index 60% rename from tokens/source/components/Button/Button.tokens.json rename to tokens/source/components/Button.json index b2ac8790bd..8c42c66438 100644 --- a/tokens/source/components/Button/Button.tokens.json +++ b/tokens/source/components/Button.json @@ -2,34 +2,34 @@ "btn": { "padding": { "y": { - "base": { "value": "{core.input.btn.padding.y.value}", "themeable": true, "source": "$btn-padding-y" }, - "lg": { "value": "{core.input.btn.padding.lg.y.value}", "themeable": true, "source": "$btn-padding-y-lg" }, - "sm": { "value": "{core.input.btn.padding.sm.y.value}", "themeable": true, "source": "$btn-padding-y-sm" } + "base": { "value": "{input.btn.padding.y.value}", "themeable": true, "source": "$btn-padding-y" }, + "lg": { "value": "{input.btn.padding.lg.y.value}", "themeable": true, "source": "$btn-padding-y-lg" }, + "sm": { "value": "{input.btn.padding.sm.y.value}", "themeable": true, "source": "$btn-padding-y-sm" } }, "x": { - "base": { "value": "{core.input.btn.padding.x.value}", "themeable": true, "source": "$btn-padding-x" }, - "lg": { "value": "{core.input.btn.padding.lg.x.value}", "themeable": true, "source": "$btn-padding-x-lg" }, - "sm": { "value": "{core.input.btn.padding.sm.x.value}", "themeable": true, "source": "$btn-padding-x-sm" } + "base": { "value": "{input.btn.padding.x.value}", "themeable": true, "source": "$btn-padding-x" }, + "lg": { "value": "{input.btn.padding.lg.x.value}", "themeable": true, "source": "$btn-padding-x-lg" }, + "sm": { "value": "{input.btn.padding.sm.x.value}", "themeable": true, "source": "$btn-padding-x-sm" } } }, "font": { - "family": { "value": "{core.input.btn.font.family.value}", "themeable": true, "source": "$btn-font-family" }, + "family": { "value": "{input.btn.font.family.value}", "themeable": true, "source": "$btn-font-family" }, "size": { - "base": { "value": "{core.input.btn.font.size.base.value}", "themeable": true, "source": "$btn-font-size" }, - "sm": { "value": "{core.input.btn.font.size.sm.value}", "themeable": true, "source": "$btn-font-size-sm" }, - "lg": { "value": "{core.input.btn.font.size.lg.value}", "themeable": true, "source": "$btn-font-size-lg" } + "base": { "value": "{input.btn.font.size.base.value}", "themeable": true, "source": "$btn-font-size" }, + "sm": { "value": "{input.btn.font.size.sm.value}", "themeable": true, "source": "$btn-font-size-sm" }, + "lg": { "value": "{input.btn.font.size.lg.value}", "themeable": true, "source": "$btn-font-size-lg" } }, "width": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$btn-font-weight" } }, "line": { "height": { - "base": { "value": "{core.input.btn.line.height.base.value}", "themeable": true, "source": "$btn-line-height" }, - "sm": { "value": "{core.input.btn.line.height.sm.value}", "themeable": true, "source": "$btn-line-height-sm" }, - "lg": { "value": "{core.input.btn.line.height.lg.value}", "themeable": true, "source": "$btn-line-height-lg" } + "base": { "value": "{input.btn.line.height.base.value}", "themeable": true, "source": "$btn-line-height" }, + "sm": { "value": "{input.btn.line.height.sm.value}", "themeable": true, "source": "$btn-line-height-sm" }, + "lg": { "value": "{input.btn.line.height.lg.value}", "themeable": true, "source": "$btn-line-height-lg" } } }, "border": { - "width": { "value": "{core.input.btn.border.width.value}", "themeable": true, "source": "$btn-border-width" }, + "width": { "value": "{input.btn.border.width.value}", "themeable": true, "source": "$btn-border-width" }, "radius": { "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$btn-border-radius" }, "lg": { "value": "{border.radius.lg.value}", "themeable": true, "source": "$btn-border-radius-lg" }, @@ -57,7 +57,6 @@ "tertiary": { "color": { "value": "{color.gray.700.value}", "themeable": true, "source": "$btn-tertiary-color" }, "bg": { - "base": { "value": "transparent", "themeable": true, "source": "$btn-tertiary-bg" }, "hover": { "value": "{color.light.500.value}", "themeable": true, "source": "$btn-tertiary-hover-bg" }, "active": { "value": "{color.light.500.value}", "themeable": true, "source": "$btn-tertiary-active-bg" } }, diff --git a/tokens/source/components/Card/Card.tokens.json b/tokens/source/components/Card.json similarity index 100% rename from tokens/source/components/Card/Card.tokens.json rename to tokens/source/components/Card.json diff --git a/tokens/source/components/Carousel/Carousel.tokens.json b/tokens/source/components/Carousel.json similarity index 78% rename from tokens/source/components/Carousel/Carousel.tokens.json rename to tokens/source/components/Carousel.json index 2cb7531351..e78c3b039d 100644 --- a/tokens/source/components/Carousel/Carousel.tokens.json +++ b/tokens/source/components/Carousel.json @@ -1,7 +1,6 @@ { "carousel": { "control": { - "color": { "value": "{color.white.value}", "themeable": true, "source": "$carousel-control-color" }, "width": { "base": { "value": "15%", "themeable": true, "source": "$carousel-control-width" }, "icon": { "value": "20px", "themeable": true, "source": "$carousel-control-icon-width" } @@ -29,14 +28,6 @@ "caption": { "width": { "value": "70%", "themeable": true, "source": "$carousel-caption-width" }, "color": { "value": "{color.white.value}", "themeable": true, "source": "$carousel-caption-color" } - }, - "transition": { - "duration": { "value": ".6s", "themeable": true, "source": "$carousel-transition-duration" }, - "base": { - "value": "transform {carousel.transition.duration.value} ease-in-out", - "themeable": true, - "source": "$carousel-transition-duration" - } } } } diff --git a/tokens/source/components/Chip/Chip.tokens.json b/tokens/source/components/Chip.json similarity index 100% rename from tokens/source/components/Chip/Chip.tokens.json rename to tokens/source/components/Chip.json diff --git a/tokens/source/components/CloseButton/CloseButton.tokens.json b/tokens/source/components/CloseButton.json similarity index 100% rename from tokens/source/components/CloseButton/CloseButton.tokens.json rename to tokens/source/components/CloseButton.json diff --git a/tokens/source/components/Code/Code.tokens.json b/tokens/source/components/Code.json similarity index 100% rename from tokens/source/components/Code/Code.tokens.json rename to tokens/source/components/Code.json diff --git a/tokens/source/components/Collapsible/Collapsible.tokens.json b/tokens/source/components/Collapsible.json similarity index 100% rename from tokens/source/components/Collapsible/Collapsible.tokens.json rename to tokens/source/components/Collapsible.json diff --git a/tokens/source/components/Container/Container.tokens.json b/tokens/source/components/Container.json similarity index 100% rename from tokens/source/components/Container/Container.tokens.json rename to tokens/source/components/Container.json diff --git a/tokens/source/components/DataTable/DataTable.tokens.json b/tokens/source/components/DataTable.json similarity index 85% rename from tokens/source/components/DataTable/DataTable.tokens.json rename to tokens/source/components/DataTable.json index 553cba6a31..568f85d8f8 100644 --- a/tokens/source/components/DataTable/DataTable.tokens.json +++ b/tokens/source/components/DataTable.json @@ -12,7 +12,8 @@ "x": { "value": ".75rem", "themeable": true, "source": "$data-table-padding-x" }, "y": { "value": ".75rem", "themeable": true, "source": "$data-table-padding-y" }, "small": { "value": ".5rem", "themeable": true, "source": "$data-table-padding-small" }, - "cell": { "value": ".5rem .75rem", "themeable": true, "source": "$data-table-cell-padding" } + "cell": { "value": ".75rem", "themeable": true, "source": "$data-table-cell-padding" }, + "head-cell": { "value": ".5rem .75rem", "themeable": true, "source": "$data-table-head-cell-padding" } }, "footer": { "position": { "value": "center", "themeable": true, "source": "$data-table-footer-position" } diff --git a/tokens/source/components/Dropdown/Dropdown.tokens.json b/tokens/source/components/Dropdown.json similarity index 95% rename from tokens/source/components/Dropdown/Dropdown.tokens.json rename to tokens/source/components/Dropdown.json index fd80976e67..8777782143 100644 --- a/tokens/source/components/Dropdown/Dropdown.tokens.json +++ b/tokens/source/components/Dropdown.json @@ -42,7 +42,7 @@ "divider": { "bg": { "value": "{color.gray.100.value}", "themeable": true, "source": "$dropdown-divider-bg" }, "margin": { - "y": { "value": "calc({core.spacer.value} / 2)", "themeable": true, "source": "$dropdown-divider-margin-y" } + "y": { "value": "calc({spacer.base.value} / 2)", "themeable": true, "source": "$dropdown-divider-margin-y" } } }, "box": { @@ -61,6 +61,7 @@ "disabled": { "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$dropdown-link-disabled-color" } } - } + }, + "zindex": { "value": "1000", "themeable": true, "source": "$zindex-dropdown" } } } diff --git a/tokens/source/components/Dropzone/Dropzone.tokens.json b/tokens/source/components/Dropzone.json similarity index 100% rename from tokens/source/components/Dropzone/Dropzone.tokens.json rename to tokens/source/components/Dropzone.json diff --git a/tokens/source/components/Form/Form.tokens.json b/tokens/source/components/Form.json similarity index 85% rename from tokens/source/components/Form/Form.tokens.json rename to tokens/source/components/Form.json index 0e45b24d63..ce91ed01e6 100644 --- a/tokens/source/components/Form/Form.tokens.json +++ b/tokens/source/components/Form.json @@ -3,30 +3,30 @@ "input": { "padding": { "y": { - "base": { "value": "{core.input.btn.padding.y.value}", "themeable": true, "source": "$input-padding-y" }, - "sm": { "value": "{core.input.btn.padding.sm.y.value}", "themeable": true, "source": "$input-padding-y-sm" }, - "lg": { "value": "{core.input.btn.padding.lg.y.value}", "themeable": true, "source": "$input-padding-y-lg" } + "base": { "value": "{input.btn.padding.y.value}", "themeable": true, "source": "$input-padding-y" }, + "sm": { "value": "{input.btn.padding.sm.y.value}", "themeable": true, "source": "$input-padding-y-sm" }, + "lg": { "value": "{input.btn.padding.lg.y.value}", "themeable": true, "source": "$input-padding-y-lg" } }, "x": { - "base": { "value": "{core.input.btn.padding.x.value}", "themeable": true, "source": "$input-padding-x" }, - "sm": { "value": "{core.input.btn.padding.sm.x.value}", "themeable": true, "source": "$input-padding-x-sm" }, - "lg": { "value": "{core.input.btn.padding.lg.x.value}", "themeable": true, "source": "$input-padding-x-lg" } + "base": { "value": "{input.btn.padding.x.value}", "themeable": true, "source": "$input-padding-x" }, + "sm": { "value": "{input.btn.padding.sm.x.value}", "themeable": true, "source": "$input-padding-x-sm" }, + "lg": { "value": "{input.btn.padding.lg.x.value}", "themeable": true, "source": "$input-padding-x-lg" } } }, "font": { - "family": { "value": "{core.input.btn.font.family.value}", "themeable": true, "source": "$input-font-family" }, + "family": { "value": "{input.btn.font.family.value}", "themeable": true, "source": "$input-font-family" }, "size": { - "base": { "value": "{core.input.btn.font.size.base.value}", "themeable": true, "source": "$input-font-size" }, - "sm": { "value": "{core.input.btn.font.size.sm.value}", "themeable": true, "source": "$input-font-size-sm" }, - "lg": { "value": "{core.input.btn.font.size.lg.value}", "themeable": true, "source": "$input-font-size-lg" } + "base": { "value": "{input.btn.font.size.base.value}", "themeable": true, "source": "$input-font-size" }, + "sm": { "value": "{input.btn.font.size.sm.value}", "themeable": true, "source": "$input-font-size-sm" }, + "lg": { "value": "{input.btn.font.size.lg.value}", "themeable": true, "source": "$input-font-size-lg" } }, "weight": { "value": "{font.weight.base.value}", "themeable": true, "source": "$input-font-weight" } }, "line": { "height": { - "base": { "value": "{core.input.btn.line.height.base.value}", "themeable": true, "source": "$input-line-height" }, - "sm": { "value": "{core.input.btn.line.height.sm.value}", "themeable": true, "source": "$input-line-height-sm" }, - "lg": { "value": "{core.input.btn.line.height.lg.value}", "themeable": true, "source": "$input-line-height-lg" } + "base": { "value": "{input.btn.line.height.base.value}", "themeable": true, "source": "$input-line-height" }, + "sm": { "value": "{input.btn.line.height.sm.value}", "themeable": true, "source": "$input-line-height-sm" }, + "lg": { "value": "{input.btn.line.height.lg.value}", "themeable": true, "source": "$input-line-height-lg" } } }, "bg": { @@ -40,7 +40,7 @@ }, "border": { "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$input-border-color" }, - "width": { "value": "{core.input.btn.border.width.value}", "themeable": true, "source": "$input-border-width" }, + "width": { "value": "{input.btn.border.width.value}", "themeable": true, "source": "$input-border-width" }, "height": { "value": "calc({form.input.border.width.value} * 2)", "themeable": true, @@ -56,7 +56,7 @@ "shadow": { "base": { "value": "inset 0 1px 1px rgba(0, 0, 0, .075)", "themeable": true, "source": "$input-box-shadow" }, "focus": { - "value": "{core.input.btn.focus.box.shadow.value}", + "value": "{input.btn.focus.box.shadow.value}", "themeable": true, "source": "$input-focus-box-shadow" } @@ -77,12 +77,12 @@ "source": "$input-height" }, "sm": { - "value": "calc({form.input.line.height.sm.value} * 1em + {core.input.btn.padding.sm.y.value} * 2 + {form.input.border.height.value})", + "value": "calc({form.input.line.height.sm.value} * 1em + {input.btn.padding.sm.y.value} * 2 + {form.input.border.height.value})", "themeable": true, "source": "$input-height-sm" }, "lg": { - "value": "calc({form.input.line.height.lg.value} * 1em + {core.input.btn.padding.lg.y.value} * 2 + {form.input.border.height.value})", + "value": "calc({form.input.line.height.lg.value} * 1em + {input.btn.padding.lg.y.value} * 2 + {form.input.border.height.value})", "themeable": true, "source": "$input-height-lg" }, @@ -208,17 +208,7 @@ } }, "checked": { - "color": { - "value": "{component.active.bg.value}", - "themeable": true, - "source": "$custom-control-indicator-checked-color" - }, "bg": { - "base": { - "value": "{component.active.bg.value}", - "themeable": true, - "source": "$custom-control-indicator-checked-bg" - }, "disabled": { "value": "rgba(10, 48, 85, .5)", "themeable": true, @@ -238,7 +228,7 @@ "border": { "color": { "base": { - "value": "{form.custom.control.indicator.checked.color.value}", + "value": "{component.active.bg.value}", "themeable": true, "source": "$custom-control-indicator-checked-border-color" }, @@ -251,23 +241,6 @@ } }, "active": { - "color": { - "base": { - "value": "{component.active.color.value}", - "themeable": true, - "source": "$custom-control-indicator-active-color" - }, - "border": { - "value": "{form.custom.control.indicator.active.bg.value}", - "themeable": true, - "source": "$custom-control-indicator-active-border-color" - } - }, - "bg": { - "value": "{component.active.bg.value}", - "themeable": true, - "source": "$custom-control-indicator-active-bg" - }, "box": { "shadow": { "value": "none", "themeable": true, "source": "$custom-control-indicator-active-box-shadow" } } @@ -295,11 +268,6 @@ "themeable": true, "source": "$custom-checkbox-indicator-indeterminate-bg" }, - "color": { - "value": "{form.custom.control.indicator.checked.color.value}", - "themeable": true, - "source": "$custom-checkbox-indicator-indeterminate-color" - }, "box": { "shadow": { "value": "none", @@ -423,12 +391,7 @@ } }, "indicator": { - "padding": { "value": "1rem", "themeable": true, "source": "$custom-select-indicator-padding" }, - "color": { - "value": "{color.gray.700.value}", - "themeable": true, - "source": "$custom-select-indicator-color" - } + "padding": { "value": "1rem", "themeable": true, "source": "$custom-select-indicator-padding" } }, "color": { "base": { @@ -514,7 +477,7 @@ "source": "$custom-select-box-shadow" }, "focus": { - "value": "{core.input.btn.focus.box.shadow.value}", + "value": "{input.btn.focus.box.shadow.value}", "themeable": true, "source": "$custom-select-focus-box-shadow" } @@ -720,32 +683,6 @@ "source": "$form-feedback-font-size" } }, - "color": { - "valid": { - "value": "{color.success.500.value}", - "themeable": true, - "source": "$form-feedback-valid-color" - }, - "invalid": { - "value": "{color.danger.500.value}", - "themeable": true, - "source": "$form-feedback-invalid-color" - } - }, - "icon": { - "color": { - "valid": { - "value": "{form.feedback.color.valid.value}", - "themeable": true, - "source": "$form-feedback-icon-valid-color" - }, - "invalid": { - "value": "{form.feedback.color.invalid.value}", - "themeable": true, - "source": "$form-feedback-icon-invalid" - } - } - }, "tooltip": { "padding": { "y": { "value": ".25rem", "themeable": true, "source": "$form-feedback-tooltip-padding-y" }, diff --git a/tokens/source/components/Icon/Icon.tokens.json b/tokens/source/components/Icon.json similarity index 100% rename from tokens/source/components/Icon/Icon.tokens.json rename to tokens/source/components/Icon.json diff --git a/tokens/source/components/IconButton/IconButton.tokens.json b/tokens/source/components/IconButton.json similarity index 100% rename from tokens/source/components/IconButton/IconButton.tokens.json rename to tokens/source/components/IconButton.json diff --git a/tokens/source/components/Image/Image.tokens.json b/tokens/source/components/Image.json similarity index 100% rename from tokens/source/components/Image/Image.tokens.json rename to tokens/source/components/Image.json diff --git a/tokens/source/components/Menu/Menu.tokens.json b/tokens/source/components/Menu.json similarity index 81% rename from tokens/source/components/Menu/Menu.tokens.json rename to tokens/source/components/Menu.json index bf3de60853..a414aa71ce 100644 --- a/tokens/source/components/Menu/Menu.tokens.json +++ b/tokens/source/components/Menu.json @@ -1,7 +1,6 @@ { "menu": { "background": { - "base": { "value": "{btn.tertiary.bg.base.value}", "themeable": true, "source": "$background" }, "active": { "value": "{btn.tertiary.bg.active.value}", "themeable": true, "source": "$active-background" } }, "border": { diff --git a/tokens/source/components/Modal/Modal.tokens.json b/tokens/source/components/Modal.json similarity index 95% rename from tokens/source/components/Modal/Modal.tokens.json rename to tokens/source/components/Modal.json index a936345a35..7144458ba0 100644 --- a/tokens/source/components/Modal/Modal.tokens.json +++ b/tokens/source/components/Modal.json @@ -66,7 +66,8 @@ }, "backdrop": { "bg": { "value": "{color.black.value}", "themeable": true, "source": "$modal-backdrop-bg" }, - "opacity": { "value": ".5", "themeable": true, "source": "$modal-backdrop-opacity" } + "opacity": { "value": ".5", "themeable": true, "source": "$modal-backdrop-opacity" }, + "zindex": { "value": "1040", "themeable": true, "source": "$zindex-modal-backdrop" } }, "header": { "border": { @@ -92,6 +93,7 @@ "fade": { "value": "translate(0, -50px)", "themeable": true, "source": "$modal-fade-transform" }, "show": { "value": "none", "themeable": true, "source": "$modal-show-transform" }, "scale": { "value": "scale(1.02)", "themeable": true, "source": "$modal-scale-transform" } - } + }, + "zindex": { "value": "1050", "themeable": true, "source": "$zindex-modal" } } } diff --git a/tokens/source/components/Nav/Nav.tokens.json b/tokens/source/components/Nav.json similarity index 97% rename from tokens/source/components/Nav/Nav.tokens.json rename to tokens/source/components/Nav.json index 27ea7c1d99..58a137f202 100644 --- a/tokens/source/components/Nav/Nav.tokens.json +++ b/tokens/source/components/Nav.json @@ -63,7 +63,7 @@ "divider": { "color": { "value": "{color.gray.100.value}", "themeable": true, "source": "$nav-divider-color" }, "margin": { - "y": { "value": "calc({core.spacer.value} / 2)", "themeable": true, "source": "$nav-divider-margin-y" } + "y": { "value": "calc({spacer.base.value} / 2)", "themeable": true, "source": "$nav-divider-margin-y" } } } } diff --git a/tokens/source/components/Navbar/Navbar.tokens.json b/tokens/source/components/Navbar.json similarity index 91% rename from tokens/source/components/Navbar/Navbar.tokens.json rename to tokens/source/components/Navbar.json index 2545babb63..cd88ada607 100644 --- a/tokens/source/components/Navbar/Navbar.tokens.json +++ b/tokens/source/components/Navbar.json @@ -1,9 +1,9 @@ { "navbar": { "padding": { - "y": { "value": "calc({core.spacer.value} / 2)", "themeable": true, "source": "$navbar-padding-y" }, + "y": { "value": "calc({spacer.base.value} / 2)", "themeable": true, "source": "$navbar-padding-y" }, "x": { - "base": { "value": "{core.spacer.value}", "themeable": true, "source": "$navbar-padding-x" }, + "base": { "value": "{spacer.base.value}", "themeable": true, "source": "$navbar-padding-x" }, "nav": { "link": { "value": ".5rem", "themeable": true, "source": "$navbar-nav-link-padding-x" } } @@ -58,9 +58,6 @@ }, "dark": { "color": { - "base": { - "value": "rgba(255, 255, 255, .5)", "themeable": true, "source": "$navbar-dark-color" - }, "hover": { "value": "rgba({color.white.value}, .75)", "themeable": true, "source": "$navbar-dark-hover-color" }, @@ -91,7 +88,6 @@ }, "light": { "color": { - "base": { "value": "rgba(0, 0, 0, .5)", "themeable": true, "source": "$navbar-light-color" }, "hover": { "value": "rgba(0, 0, 0, .7)", "themeable": true, "source": "$navbar-light-hover-color" }, "active": { "value": "rgba(0, 0, 0, .9)", "themeable": true, "source": "$navbar-light-active-color" }, "disabled": { "value": "rgba(0, 0, 0, .3)", "themeable": true, "source": "$navbar-light-disabled-color" } diff --git a/tokens/source/components/Pagination/Pagination.tokens.json b/tokens/source/components/Pagination.json similarity index 97% rename from tokens/source/components/Pagination/Pagination.tokens.json rename to tokens/source/components/Pagination.json index 5d8ea92e94..a621a1b0d1 100644 --- a/tokens/source/components/Pagination/Pagination.tokens.json +++ b/tokens/source/components/Pagination.json @@ -76,7 +76,7 @@ "focus": { "box": { "shadow": { - "value": "{core.input.btn.focus.box.shadow.value}", "themeable": true, "source": "$pagination-focus-box-shadow" + "value": "{input.btn.focus.box.shadow.value}", "themeable": true, "source": "$pagination-focus-box-shadow" }, "outline": { "value": "0", "themeable": true, "source": "$pagination-focus-outline" } }, diff --git a/tokens/source/components/Popover/Popover.tokens.json b/tokens/source/components/Popover.json similarity index 93% rename from tokens/source/components/Popover/Popover.tokens.json rename to tokens/source/components/Popover.json index bbfb5568e6..48ef329ae0 100644 --- a/tokens/source/components/Popover/Popover.tokens.json +++ b/tokens/source/components/Popover.json @@ -8,7 +8,6 @@ "width": { "value": "480px", "themeable": true, "source": "$popover-max-width" } }, "border": { - "color": { "value": "rgba(0, 0, 0, .2)", "themeable": true, "source": "$popover-border-color" }, "radius": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$popover-border-radius" }, "border": { "value": "{border.width.value}", "themeable": true, "source": "$popover-border-width" } }, @@ -20,7 +19,6 @@ } }, "header": { - "bg": { "value": "{color.white.value}", "themeable": true, "source": "$popover-header-bg" }, "color": { "value": "{headings.color.value}", "themeable": true, "source": "$popover-header-color" }, "padding": { "y": { "value": ".5rem", "themeable": true, "source": "$popover-header-padding-y" }, @@ -63,6 +61,7 @@ "icon": { "color": { "value": "{color.warning.500.value}", "themeable": true, "source": "$popover-danger-icon-color" } } - } + }, + "zindex": { "value": "1060", "themeable": true, "source": "$zindex-popover" } } } diff --git a/tokens/source/components/ProductTour/ProductTour.tokens.json b/tokens/source/components/ProductTour.json similarity index 100% rename from tokens/source/components/ProductTour/ProductTour.tokens.json rename to tokens/source/components/ProductTour.json diff --git a/tokens/source/components/ProgressBar/ProgressBar.tokens.json b/tokens/source/components/ProgressBar.json similarity index 100% rename from tokens/source/components/ProgressBar/ProgressBar.tokens.json rename to tokens/source/components/ProgressBar.json diff --git a/tokens/source/components/SearchField/SearchField.tokens.json b/tokens/source/components/SearchField.json similarity index 100% rename from tokens/source/components/SearchField/SearchField.tokens.json rename to tokens/source/components/SearchField.json diff --git a/tokens/source/components/SelectableBox/SelectableBox.tokens.json b/tokens/source/components/SelectableBox.json similarity index 62% rename from tokens/source/components/SelectableBox/SelectableBox.tokens.json rename to tokens/source/components/SelectableBox.json index 5d5c320878..b5261a656e 100644 --- a/tokens/source/components/SelectableBox/SelectableBox.tokens.json +++ b/tokens/source/components/SelectableBox.json @@ -6,12 +6,6 @@ }, "box": { "space": { "value": ".75rem", "themeable": true, "source": "$selectable-box-space" } - }, - "cols": { - "number": { - "min": { "value": "1", "themeable": true, "source": "$min-cols-number" }, - "max": { "value": "12", "themeable": true, "source": "$max-cols-number" } - } } } } diff --git a/tokens/source/components/Sheet.json b/tokens/source/components/Sheet.json new file mode 100644 index 0000000000..7671589cd1 --- /dev/null +++ b/tokens/source/components/Sheet.json @@ -0,0 +1,8 @@ +{ + "sheet": { + "zindex": { + "backdrop": { "value": "1031", "themeable": true, "source": "$zindex-sheet-backdrop" }, + "main": { "value": "1032", "themeable": true, "source": "$zindex-sheet" } + } + } +} \ No newline at end of file diff --git a/tokens/source/components/Spinner/Spinner.tokens.json b/tokens/source/components/Spinner.json similarity index 100% rename from tokens/source/components/Spinner/Spinner.tokens.json rename to tokens/source/components/Spinner.json diff --git a/tokens/source/components/Stack/Stack.tokens.json b/tokens/source/components/Stack.json similarity index 100% rename from tokens/source/components/Stack/Stack.tokens.json rename to tokens/source/components/Stack.json diff --git a/tokens/source/components/Sticky/Sticky.tokens.json b/tokens/source/components/Sticky.json similarity index 100% rename from tokens/source/components/Sticky/Sticky.tokens.json rename to tokens/source/components/Sticky.json diff --git a/tokens/source/components/Table/Table.tokens.json b/tokens/source/components/Table/Table.tokens.json deleted file mode 100644 index 6d2bcc692b..0000000000 --- a/tokens/source/components/Table/Table.tokens.json +++ /dev/null @@ -1,53 +0,0 @@ -{ - "table": { - "cell": { - "padding": { - "base": { "value": ".75rem", "themeable": true, "source": "$table-cell-padding" }, - "sm": { "value": ".3rem", "themeable": true, "source": "$table-cell-padding-sm" } - } - }, - "color": { - "base": { "value": "{body.color.value}", "themeable": true, "source": "$table-color" }, - "hover": { "value": "{table.color.base.value}", "themeable": true, "source": "$table-hover-color" }, - "head": { "value": "{color.gray.700.value}", "themeable": true, "source": "$table-head-color" } - }, - "bg": { - "base": { "value": "null", "themeable": true, "source": "$table-bg" }, - "accent": { "value": "rgba(0, 0, 0, .05)", "themeable": true, "source": "$table-accent-bg" }, - "hover": { "value": "rgba(0, 0, 0, .075)", "themeable": true, "source": "$table-hover-bg" }, - "active": { "value": "{table.bg.hover.value}", "themeable": true, "source": "$table-active-bg" }, - "head": { "value": "{color.gray.100.value}", "themeable": true, "source": "$table-head-bg" } - }, - "border": { - "width": { "value": "{border.width.value}", "themeable": true, "source": "$table-border-width" }, - "color": { "value": "{border.color.value}", "themeable": true, "source": "$table-border-color" } - }, - "dark": { - "color": { - "base": { "value": "{color.white.value}", "themeable": true, "source": "$table-dark-color" }, - "hover": { "value": "{table.dark.color.base.value}", "themeable": true, "source": "$table-dark-hover-color" }, - "border": { "value": "{table.dark.bg.base.value}", "themeable": true, "source": "$table-dark-border-color" } - }, - "bg": { - "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$table-dark-bg" }, - "accent": { "value": "rgba(255, 255, 255, .05)", "themeable": true, "source": "$table-dark-accent-bg" }, - "hover": { "value": "rgba(255, 255, 255, .075)", "themeable": true, "source": "$table-dark-hover-bg" } - } - }, - "striped": { - "order": { "value": "odd", "themeable": true, "source": "$table-striped-order" } - }, - "caption": { - "color": { "value": "{text.muted.value}", "themeable": true, "source": "$table-caption-color" } - }, - "level": { - "bg": { "value": "-9", "themeable": true, "source": "$table-bg-level" }, - "border": { "value": "-6", "themeable": true, "source": "$table-border-level" } - }, - "th": { - "font": { - "weight": { "value": "null", "themeable": true, "source": "$table-th-font-weight" } - } - } - } -} diff --git a/tokens/source/components/Tabs/Tabs.tokens.json b/tokens/source/components/Tabs.json similarity index 100% rename from tokens/source/components/Tabs/Tabs.tokens.json rename to tokens/source/components/Tabs.json diff --git a/tokens/source/components/Toast/Toast.tokens.json b/tokens/source/components/Toast.json similarity index 100% rename from tokens/source/components/Toast/Toast.tokens.json rename to tokens/source/components/Toast.json diff --git a/tokens/source/components/Tooltip/Tooltip.tokens.json b/tokens/source/components/Tooltip.json similarity index 100% rename from tokens/source/components/Tooltip/Tooltip.tokens.json rename to tokens/source/components/Tooltip.json diff --git a/tokens/source/colors/body/body.tokens.json b/tokens/source/components/general/body.json similarity index 54% rename from tokens/source/colors/body/body.tokens.json rename to tokens/source/components/general/body.json index d3a06e3c49..5d16794e53 100644 --- a/tokens/source/colors/body/body.tokens.json +++ b/tokens/source/components/general/body.json @@ -1,6 +1,6 @@ { "body": { - "bg": { "value": "{color.white.value}", "themeable": true, "source": "$body-bg" }, + "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$body-bg" }, "color": { "value": "{color.gray.700.value}", "themeable": true, "source": "$body-color" } } } diff --git a/tokens/source/caret/caret.tokens.json b/tokens/source/components/general/caret.json similarity index 100% rename from tokens/source/caret/caret.tokens.json rename to tokens/source/components/general/caret.json diff --git a/tokens/source/colors/component/component.tokens.json b/tokens/source/components/general/component.json similarity index 100% rename from tokens/source/colors/component/component.tokens.json rename to tokens/source/components/general/component.json diff --git a/tokens/source/typography/headings/headings.tokens.json b/tokens/source/components/general/headings.json similarity index 100% rename from tokens/source/typography/headings/headings.tokens.json rename to tokens/source/components/general/headings.json diff --git a/tokens/source/components/general/hr.json b/tokens/source/components/general/hr.json new file mode 100644 index 0000000000..232af07917 --- /dev/null +++ b/tokens/source/components/general/hr.json @@ -0,0 +1,11 @@ +{ + "hr": { + "border": { + "color": { "value": "rgba({color.black.value}, .1)", "themeable": true, "source": "$hr-border-color" }, + "width": { "value": "{border.width.value}", "themeable": true, "source": "$hr-border-width" }, + "margin": { + "y": { "value": "{spacer.base.value}", "themeable": true, "source": "$hr-margin-y" } + } + } + } +} diff --git a/tokens/source/components/general/input.json b/tokens/source/components/general/input.json new file mode 100644 index 0000000000..d719f4eda2 --- /dev/null +++ b/tokens/source/components/general/input.json @@ -0,0 +1,47 @@ +{ + "input": { + "btn": { + "padding": { + "y": { "value": ".5625rem", "themeable": true, "source": "$input-btn-padding-y" }, + "x": { "value": "1rem", "themeable": true, "source": "$input-btn-padding-x" }, + "sm": { + "y": { "value": ".4375rem", "themeable": true, "source": "$input-btn-padding-y-sm" }, + "x": { "value": ".75rem", "themeable": true, "source": "$input-btn-padding-x-sm" } + }, + "lg": { + "y": { "value": ".6875rem", "themeable": true, "source": "$input-btn-padding-y-lg" }, + "x": { "value": "1.25rem", "themeable": true, "source": "$input-btn-padding-x-lg" } + } + }, + "font": { + "family": { "value": "inherit", "themeable": true, "source": "$input-btn-font-family" }, + "size": { + "base": { "value": "1.125rem", "themeable": true, "source": "$input-btn-font-size" }, + "sm": { "value": ".875rem", "themeable": true, "source": "$input-btn-font-size-sm" }, + "lg": { "value": "1.325rem", "themeable": true, "source": "$input-btn-font-size-lg" } + } + }, + "line": { + "height": { + "base": { "value": "1.3333", "themeable": true, "source": "$input-btn-line-height" }, + "sm": { "value": "1.4286", "themeable": true, "source": "$input-btn-line-height-sm" }, + "lg": { "value": "{line-height.lg.value}", "themeable": true, "source": "$input-btn-line-height-lg" } + } + }, + "focus": { + "width": { "value": "1px", "themeable": true, "source": "$input-btn-focus-width" }, + "color": { "value": "{component.active.bg.value}", "themeable": true, "source": "$input-btn-focus-color" }, + "box": { + "shadow": { + "value": "0 0 0 {input.btn.focus.width.value} {input.btn.focus.color.value}", + "themeable": true, + "source": "$input-btn-focus-box-shadow" + } + } + }, + "border": { + "width": { "value": "{border.width.value}", "themeable": true, "source": "$input-btn-border-width" } + } + } + } +} \ No newline at end of file diff --git a/tokens/source/links/links.tokens.json b/tokens/source/components/general/link.json similarity index 100% rename from tokens/source/links/links.tokens.json rename to tokens/source/components/general/link.json diff --git a/tokens/source/layout/list-group/list-group.tokens.json b/tokens/source/components/general/list.json similarity index 89% rename from tokens/source/layout/list-group/list-group.tokens.json rename to tokens/source/components/general/list.json index 1b140af3f6..4d00978ec2 100644 --- a/tokens/source/layout/list-group/list-group.tokens.json +++ b/tokens/source/components/general/list.json @@ -1,4 +1,14 @@ { + "dt": { + "font": { + "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$dt-font-weight" } + } + }, + "list": { + "inline": { + "padding": { "value": ".5rem", "themeable": true, "source": "$list-inline-padding" } + } + }, "list-group": { "color": { "value": "null", "themeable": true, "source": "$list-group-color" }, "bg": { @@ -48,4 +58,4 @@ } } } -} +} \ No newline at end of file diff --git a/tokens/source/components/general/text.json b/tokens/source/components/general/text.json new file mode 100644 index 0000000000..ab170be554 --- /dev/null +++ b/tokens/source/components/general/text.json @@ -0,0 +1,28 @@ +{ + "text": { + "muted": { "value": "{color.gray.500.value}", "themeable": true, "source": "$text-muted" } + }, + "paragraph": { + "margin": { + "bottom": { "value": "1rem", "themeable": true, "source": "$paragraph-margin-bottom" } + } + }, + "blockquote": { + "small": { + "font": { + "size": { + "value": "{font.size.small.base.value}", "themeable": true, "source": "$blockquote-small-font-size" + } + } + }, + "font": { + "size": { + "value": "calc({font.size.base.value} * 1.25)", "themeable": true, "source": "$blockquote-font-size" + } + } + }, + "mark": { + "padding": { "value": ".2em", "themeable": true, "source": "$mark-padding" }, + "bg": { "value": "#FFF243", "themeable": true, "source": "$mark-bg" } + } +} diff --git a/tokens/source/core/core.tokens.json b/tokens/source/core/core.tokens.json deleted file mode 100644 index 171f43bb0f..0000000000 --- a/tokens/source/core/core.tokens.json +++ /dev/null @@ -1,78 +0,0 @@ -{ - "core": { - "spacer": { "value": "1rem", "themeable": true, "source": "$spacer" }, - "input": { - "btn": { - "padding": { - "y": { "value": ".5625rem", "themeable": true, "source": "$input-btn-padding-y" }, - "x": { "value": "1rem", "themeable": true, "source": "$input-btn-padding-x" }, - "sm": { - "y": { "value": ".4375rem", "themeable": true, "source": "$input-btn-padding-y-sm" }, - "x": { "value": ".75rem", "themeable": true, "source": "$input-btn-padding-x-sm" } - }, - "lg": { - "y": { "value": ".6875rem", "themeable": true, "source": "$input-btn-padding-y-lg" }, - "x": { "value": "1.25rem", "themeable": true, "source": "$input-btn-padding-x-lg" } - } - }, - "font": { - "family": { "value": "inherit", "themeable": true, "source": "$input-btn-font-family" }, - "size": { - "base": { "value": "1.125rem", "themeable": true, "source": "$input-btn-font-size" }, - "sm": { "value": ".875rem", "themeable": true, "source": "$input-btn-font-size-sm" }, - "lg": { "value": "1.325rem", "themeable": true, "source": "$input-btn-font-size-lg" } - } - }, - "line": { - "height": { - "base": { "value": "1.3333", "themeable": true, "source": "$input-btn-line-height" }, - "sm": { "value": "1.4286", "themeable": true, "source": "$input-btn-line-height-sm" }, - "lg": { "value": "{line-height.lg.value}", "themeable": true, "source": "$input-btn-line-height-lg" } - } - }, - "focus": { - "width": { "value": "1px", "themeable": true, "source": "$input-btn-focus-width" }, - "color": { "value": "{component.active.bg.value}", "themeable": true, "source": "$input-btn-focus-color" }, - "box": { - "shadow": { - "value": "0 0 0 {core.input.btn.focus.width.value} {core.input.btn.focus.color.value}", - "themeable": true, - "source": "$input-btn-focus-box-shadow" - } - } - }, - "border": { - "width": { "value": "{border.width.value}", "themeable": true, "source": "$input-btn-border-width" } - } - } - }, - "blockquote": { - "small": { - "font": { - "size": { - "value": "{font.size.small.base.value}", "themeable": true, "source": "$blockquote-small-font-size" - } - } - }, - "font": { - "size": { - "value": "calc({font.size.base.value} * 1.25)", "themeable": true, "source": "$blockquote-font-size" - } - } - }, - "mark": { - "padding": { "value": ".2em", "themeable": true, "source": "$mark-padding" }, - "bg": { "value": "#FFF243", "themeable": true, "source": "$mark-bg" } - }, - "dt": { - "font": { - "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$dt-font-weight" } - } - }, - "list": { - "inline": { - "padding": { "value": ".5rem", "themeable": true, "source": "$list-inline-padding" } - } - } - } -} diff --git a/tokens/source/borders-fills/border.tokens.json b/tokens/source/global/border.json similarity index 57% rename from tokens/source/borders-fills/border.tokens.json rename to tokens/source/global/border.json index be7a20d040..153e7c3959 100644 --- a/tokens/source/borders-fills/border.tokens.json +++ b/tokens/source/global/border.json @@ -6,13 +6,6 @@ "base": { "value": ".375rem", "themeable": true, "source": "$border-radius" }, "lg": { "value": ".425rem", "themeable": true, "source": "$border-radius-lg" }, "sm": { "value": ".25rem", "themeable": true, "source": "$border-radius-sm" } - }, - "hr": { - "color": { "value": "rgba({color.black.value}, .1)", "themeable": true, "source": "$hr-border-color" }, - "width": { "value": "{border.width.value}", "themeable": true, "source": "$hr-border-width" }, - "margin": { - "y": { "value": "{core.spacer.value}", "themeable": true, "source": "$hr-margin-y" } - } } } } diff --git a/tokens/source/layout/breakpoints/breakpoints.tokens.json b/tokens/source/global/breakpoints.json similarity index 100% rename from tokens/source/layout/breakpoints/breakpoints.tokens.json rename to tokens/source/global/breakpoints.json diff --git a/tokens/source/colors/colors.tokens.json b/tokens/source/global/color.json similarity index 100% rename from tokens/source/colors/colors.tokens.json rename to tokens/source/global/color.json diff --git a/tokens/source/typography/display/display.tokens.json b/tokens/source/global/display.json similarity index 100% rename from tokens/source/typography/display/display.tokens.json rename to tokens/source/global/display.json diff --git a/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json b/tokens/source/global/elevation.json similarity index 89% rename from tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json rename to tokens/source/global/elevation.json index 236f2f665e..2fbd569130 100644 --- a/tokens/source/elevation-shadows/box-shadow/box-shadow.tokens.json +++ b/tokens/source/global/elevation.json @@ -165,5 +165,20 @@ "source": "$box-shadow-centered-5" } } + }, + "zindex": { + "0": {"value": 0, "themeable": true}, + "200": {"value": 200, "themeable": true}, + "400": {"value": 400, "themeable": true}, + "600": {"value": 600, "themeable": true}, + "800": {"value": 800, "themeable": true}, + "1000": {"value": 1000, "themeable": true}, + "1200": {"value": 1200, "themeable": true}, + "1400": {"value": 1400, "themeable": true}, + "1600": {"value": 1600, "themeable": true}, + "1800": {"value": 1800, "themeable": true}, + "2000": {"value": 2000, "themeable": true}, + "sticky": {"value": 1020, "themeable": true, "source": "$zindex-sticky"}, + "fixed": {"value": 1030, "themeable": true, "source": "$zindex-fixed"} } } diff --git a/tokens/source/layout/grid/grid.tokens.json b/tokens/source/global/grid.json similarity index 100% rename from tokens/source/layout/grid/grid.tokens.json rename to tokens/source/global/grid.json diff --git a/tokens/source/layout/spacing/spacing.tokens.json b/tokens/source/global/spacing.json similarity index 87% rename from tokens/source/layout/spacing/spacing.tokens.json rename to tokens/source/global/spacing.json index ec0d2fb337..da1895cd20 100644 --- a/tokens/source/layout/spacing/spacing.tokens.json +++ b/tokens/source/global/spacing.json @@ -14,5 +14,8 @@ "5.5": { "value": "4rem", "themeable": true }, "6": { "value": "5rem", "themeable": true } } + }, + "spacer": { + "base": { "value": "1rem", "themeable": true, "source": "$spacer" } } } diff --git a/tokens/source/transition/transition.tokens.json b/tokens/source/global/transition.json similarity index 100% rename from tokens/source/transition/transition.tokens.json rename to tokens/source/global/transition.json diff --git a/tokens/source/typography/font/font.tokens.json b/tokens/source/global/typography.json similarity index 92% rename from tokens/source/typography/font/font.tokens.json rename to tokens/source/global/typography.json index 124f53fdcb..c858b84a7b 100644 --- a/tokens/source/typography/font/font.tokens.json +++ b/tokens/source/global/typography.json @@ -53,5 +53,10 @@ "base": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$font-weight-base" }, "lead": { "value": "null", "themeable": true, "source": "$lead-font-weight" } } + }, + "line-height": { + "base": { "value": "1.5556", "themeable": true, "source": "$line-height-base" }, + "lg": { "value": "1.5", "themeable": true, "source": "$line-height-lg" }, + "sm": { "value": "1.5", "themeable": true, "source": "$line-height-sm" } } } diff --git a/tokens/source/layout/sizes/sizes.tokens.json b/tokens/source/layout/sizes/sizes.tokens.json deleted file mode 100644 index 5a9737d988..0000000000 --- a/tokens/source/layout/sizes/sizes.tokens.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "size": { - "base": { - "25": { "value": "25%", "themeable": true }, - "50": { "value": "50%", "themeable": true }, - "75": { "value": "75%", "themeable": true }, - "100": { "value": "100%", "themeable": true } - } - } -} diff --git a/tokens/source/layout/z-index/zindex.tokens.json b/tokens/source/layout/z-index/zindex.tokens.json deleted file mode 100644 index b237b26d14..0000000000 --- a/tokens/source/layout/z-index/zindex.tokens.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "zindex": { - "dropdown": { "value": "1000", "themeable": true, "source": "$zindex-dropdown" }, - "sticky": { "value": "1020", "themeable": true, "source": "$zindex-sticky" }, - "fixed": { "value": "1030", "themeable": true, "source": "$zindex-fixed" }, - "sheet-backdrop": { "value": "1031", "themeable": true, "source": "$zindex-sheet-backdrop" }, - "sheet": { "value": "1032", "themeable": true, "source": "$zindex-sheet" }, - "modal-backdrop": { "value": "1040", "themeable": true, "source": "$zindex-modal-backdrop" }, - "modal": { "value": "1050", "themeable": true, "source": "$zindex-modal" }, - "popover": { "value": "1060", "themeable": true, "source": "$zindex-popover" }, - "tooltip": { "value": "1070", "themeable": true, "source": "$zindex-tooltip" } - } -} diff --git a/tokens/source/typography/line-height/line-height.tokens.json b/tokens/source/typography/line-height/line-height.tokens.json deleted file mode 100644 index e2b00fac39..0000000000 --- a/tokens/source/typography/line-height/line-height.tokens.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "line-height": { - "base": { "value": "1.5556", "themeable": true, "source": "$line-height-base" }, - "lg": { "value": "1.5", "themeable": true, "source": "$line-height-lg" }, - "sm": { "value": "1.5", "themeable": true, "source": "$line-height-sm" } - } -} diff --git a/tokens/source/typography/paragraph/paragraph.tokens.json b/tokens/source/typography/paragraph/paragraph.tokens.json deleted file mode 100644 index 3483024070..0000000000 --- a/tokens/source/typography/paragraph/paragraph.tokens.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "paragraph": { - "margin": { - "bottom": { "value": "1rem", "themeable": true, "source": "$paragraph-margin-bottom" } - } - } -} diff --git a/tokens/utils.js b/tokens/utils.js index 40e046a05f..c6074f6479 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -1,4 +1,5 @@ const fs = require('fs'); +const readline = require('readline'); const path = require('path'); function getFilesWithExtension(location, extension, files = [], excludeDirectories = []) { @@ -23,47 +24,48 @@ function getSCSStoCSSMap(prefix, key, result) { getSCSStoCSSMap(newPrefix, key[node], result); } else if (node === 'source') { // eslint-disable-next-line no-param-reassign - result[key[node]] = prefix; + result[key[node]] = `var(${prefix})`; } }); return result; } -function cssVariableWrapper(variable) { - return `var(${variable})`; -} +async function replaceVariables(filePath, direction = 'scss-to-css') { + const mapFile = fs.readFileSync(path.resolve(__dirname,`./build/${direction}.json`), 'utf-8'); + const variablesMap = JSON.parse(mapFile); + let variableRegex; + let result = ''; -function regExpEscape(string) { - return string.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); -} + if (direction === 'css-to-scss') { + variableRegex = /var\((\w|-|_)*\)/g; + } else if (direction === 'scss-to-css') { + variableRegex = /\$(\w|-|_)*(,|;|\)|\s|}|$)/g; + } -function toRegExp(string) { - return new RegExp(`${regExpEscape(string)}(?![\\w:-])`, 'g'); -} + const fileStream = fs.createReadStream(path.resolve(__dirname, filePath)); -function replaceVariable(content, scss, css, direction) { - const cssVariable = cssVariableWrapper(css); - return direction === 'scss-to-css' - ? content.replaceAll(toRegExp(scss), cssVariable) - : content.replaceAll(toRegExp(cssVariable), scss); -} + const rl = readline.createInterface({ + input: fileStream, + crlfDelay: Infinity, + }); -function replaceVariables(filePath, direction = 'css-to-scss') { - const targetFile = fs.readFileSync(filePath, 'utf-8'); - const coreMapFile = fs.readFileSync(path.resolve(__dirname, './build/scss-to-css-core.json'), 'utf-8'); - const componentsMapFile = fs.readFileSync(path.resolve(__dirname, './build/scss-to-css-components.json'), 'utf-8'); - const coreVariables = JSON.parse(coreMapFile); + for await (const line of rl) { + let parsedLine = line; + const variables = [...parsedLine.matchAll(variableRegex)]; - let result = targetFile; - Object.keys(coreVariables).forEach(variable => { - result = replaceVariable(result, variable, coreVariables[variable], direction); - }); - if (!filePath.endsWith('_variables.scss')) { - const componentsVariables = JSON.parse(componentsMapFile); - Object.keys(componentsVariables).forEach(variable => { - result = replaceVariable(result, variable, componentsVariables[variable], direction); + variables.forEach(variableData => { + let variable = variableData[0]; + if (direction === 'scss-to-css' && [',', ';', ')', ' ', '}'].includes(variable.slice(-1))) { + variable = variable.slice(0, -1); + } + if (variable in variablesMap) { + parsedLine = parsedLine.replaceAll(variable, variablesMap[variable]); + } }); + + result += `${parsedLine}\n`; } + fs.writeFileSync(filePath, result); } From 04d6114e25f0a820ffe0ed3bec12f40a4cf4edc3 Mon Sep 17 00:00:00 2001 From: Viktor Rusakov Date: Mon, 24 Oct 2022 21:50:09 +0300 Subject: [PATCH 10/19] refactor: update css variables usage --- src/Badge/_variables.scss | 2 +- src/Badge/badge-bootstrap.scss | 2 +- src/Button/Button.scss | 6 +- src/Button/_variables.scss | 32 +- src/Card/Card.scss | 4 +- src/Card/_variables.scss | 12 +- src/Carousel/_variables.scss | 3 +- src/Code/_variables.scss | 2 +- src/Collapsible/_variables.scss | 4 +- src/DataTable/DataTable.scss | 6 +- src/DataTable/_variables.scss | 3 +- src/Dropdown/_variables.scss | 9 +- src/Fieldset/Fieldset.scss | 2 +- src/Form/_Form.scss | 8 +- src/Form/_FormText.scss | 8 +- src/Form/_bootstrap-custom-forms.scss | 526 ++++++++++++++++++++++++++ src/Form/_variables.scss | 182 ++++----- src/IconButton/IconButton.scss | 2 +- src/IconButton/_variables.scss | 2 +- src/Menu/Menu.scss | 2 +- src/Menu/_variables.scss | 2 +- src/Modal/Modal.scss | 10 +- src/Modal/_variables.scss | 16 +- src/Nav/_variables.scss | 4 +- src/Navbar/_variables.scss | 37 +- src/Pagination/_variables.scss | 4 +- src/Popover/Popover.scss | 2 +- src/Popover/_variables.scss | 17 +- src/Popover/popover-bootstrap.scss | 38 +- src/SearchField/_variables.scss | 2 +- src/SelectableBox/_variables.scss | 2 + src/Sheet/Sheet.scss | 4 +- src/Spinner/_variables.scss | 4 +- src/Table/Table.scss | 4 +- src/Table/_variables.scss | 18 +- src/Table/tables-bootstrap.scss | 168 -------- src/Tooltip/_variables.scss | 2 +- 37 files changed, 757 insertions(+), 394 deletions(-) create mode 100644 src/Form/_bootstrap-custom-forms.scss delete mode 100644 src/Table/tables-bootstrap.scss diff --git a/src/Badge/_variables.scss b/src/Badge/_variables.scss index fde26f880a..742e42b0f1 100644 --- a/src/Badge/_variables.scss +++ b/src/Badge/_variables.scss @@ -7,7 +7,7 @@ $badge-padding-x: .5rem !default; $badge-border-radius: .25rem !default; $badge-transition: none !default; -$badge-focus-width: var(--pgn-core-input-btn-focus-width) !default; +$badge-focus-width: var(--pgn-input-btn-focus-width) !default; $badge-pill-padding-x: .6em !default; diff --git a/src/Badge/badge-bootstrap.scss b/src/Badge/badge-bootstrap.scss index 7efc2bae71..ab843dc9d5 100644 --- a/src/Badge/badge-bootstrap.scss +++ b/src/Badge/badge-bootstrap.scss @@ -2,7 +2,7 @@ display: inline-block; padding: var(--pgn-badge-padding-y) var(--pgn-badge-padding-x-base); - @include font-size($badge-font-size); + @include font-size(var(--pgn-badge-font-size)); font-weight: var(--pgn-badge-font-weight); line-height: 1; diff --git a/src/Button/Button.scss b/src/Button/Button.scss index ee8e9d6b36..796f7c622c 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -144,7 +144,7 @@ $btn-size-line-height, $btn-size-border-radius) { box-shadow: none; $distance: calc(var(--pgn-btn-focus-width) + var(--pgn-btn-focus-gap)); - $distance-include-btn-border: calc($distance + var(--pgn-btn-border-width)); + $distance-include-btn-border: calc(#{$distance} + var(--pgn-btn-border-width)); &::before { content: ""; @@ -154,7 +154,7 @@ $btn-size-line-height, $btn-size-border-radius) { bottom: calc(#{$distance-include-btn-border} * -1); left: calc(#{$distance-include-btn-border} * -1); border: solid var(--pgn-btn-focus-width) $ring-color; - border-radius: calc(#{$btn-border-radius} + #{$distance}); + border-radius: calc(#{var(--pgn-btn-border-radius-base)} + #{$distance}); } &.btn-lg::before { @@ -207,7 +207,7 @@ $btn-size-line-height, $btn-size-border-radius) { border: var(--pgn-btn-border-width) solid transparent; @include button-size(var(--pgn-btn-padding-y-base), var(--pgn-btn-padding-x-base), var(--pgn-btn-font-size-base), - var(--pgn-btn-line-height-base), $btn-border-radius); + var(--pgn-btn-line-height-base), var(--pgn-btn-border-radius-base)); @include transition(var(--pgn-btn-transition)); @include hover { diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss index 79a6896474..7cad9a9d46 100644 --- a/src/Button/_variables.scss +++ b/src/Button/_variables.scss @@ -1,32 +1,34 @@ -$btn-padding-y: var(--pgn-core-input-btn-padding-y) !default; -$btn-padding-x: var(--pgn-core-input-btn-padding-x) !default; -$btn-font-family: var(--pgn-core-input-btn-font-family) !default; -$btn-font-size: var(--pgn-core-input-btn-font-size-base) !default; -$btn-line-height: var(--pgn-core-input-btn-line-height-base) !default; +$btn-padding-y: var(--pgn-input-btn-padding-y) !default; +$btn-padding-x: var(--pgn-input-btn-padding-x) !default; +$btn-font-family: var(--pgn-input-btn-font-family) !default; +$btn-font-size: var(--pgn-input-btn-font-size-base) !default; +$btn-line-height: var(--pgn-input-btn-line-height-base) !default; -$btn-padding-y-sm: var(--pgn-core-input-btn-padding-sm-y) !default; -$btn-padding-x-sm: var(--pgn-core-input-btn-padding-sm-x) !default; -$btn-font-size-sm: var(--pgn-core-input-btn-font-size-sm) !default; -$btn-line-height-sm: var(--pgn-core-input-btn-line-height-sm) !default; +$btn-padding-y-sm: var(--pgn-input-btn-padding-sm-y) !default; +$btn-padding-x-sm: var(--pgn-input-btn-padding-sm-x) !default; +$btn-font-size-sm: var(--pgn-input-btn-font-size-sm) !default; +$btn-line-height-sm: var(--pgn-input-btn-line-height-sm) !default; -$btn-padding-y-lg: var(--pgn-core-input-btn-padding-lg-y) !default; -$btn-padding-x-lg: var(--pgn-core-input-btn-padding-lg-x) !default; -$btn-font-size-lg: var(--pgn-core-input-btn-font-size-lg) !default; -$btn-line-height-lg: var(--pgn-core-input-btn-line-height-lg) !default; +$btn-padding-y-lg: var(--pgn-input-btn-padding-lg-y) !default; +$btn-padding-x-lg: var(--pgn-input-btn-padding-lg-x) !default; +$btn-font-size-lg: var(--pgn-input-btn-font-size-lg) !default; +$btn-line-height-lg: var(--pgn-input-btn-line-height-lg) !default; -$btn-border-width: var(--pgn-core-input-btn-border-width) !default; +$btn-border-width: var(--pgn-input-btn-border-width) !default; $btn-font-weight: var(--pgn-font-weight-normal) !default; $btn-box-shadow: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075) !default; $btn-focus-width: 2px !default; $btn-focus-gap: 1px !default; -$btn-focus-box-shadow: var(--pgn-core-input-btn-focus-box-shadow) !default; +$btn-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow) !default; $btn-disabled-opacity: .65 !default; $btn-active-box-shadow: none; $btn-tertiary-color: var(--pgn-color-gray-700) !default; +// TODO can't use css variable due to conflict with SCSS functions $btn-tertiary-bg: transparent !default; + $btn-tertiary-hover-bg: var(--pgn-color-light-500) !default; $btn-tertiary-active-bg: var(--pgn-color-light-500) !default; $btn-inverse-tertiary-color: var(--pgn-color-white) !default; diff --git a/src/Card/Card.scss b/src/Card/Card.scss index 910dde7c97..3e0cdcea3c 100644 --- a/src/Card/Card.scss +++ b/src/Card/Card.scss @@ -78,8 +78,8 @@ a .pgn__card { } .pgn__card-header-actions { - margin-top: var(--pgn-core-spacer); - margin-inline-start: var(--pgn-core-spacer); + margin-top: var(--pgn-spacer-base); + margin-inline-start: var(--pgn-spacer-base); flex-shrink: 0; } diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss index 4a99ef5374..2e673314d6 100644 --- a/src/Card/_variables.scss +++ b/src/Card/_variables.scss @@ -6,7 +6,7 @@ $card-border-width: var(--pgn-border-width) !default; $card-border-radius: var(--pgn-border-radius-base) !default; $card-border-color: rgba(var(--pgn-color-black), .125) !default; $card-border-focus-color: rgba(var(--pgn-color-black), .5) !default; -$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; +$card-inner-border-radius: subtract(var(--pgn-card-border-radius-base), var(--pgn-card-border-width)) !default; $card-cap-bg: rgba(var(--pgn-color-black), .03) !default; $card-cap-color: null !default; $card-height: null !default; @@ -16,15 +16,15 @@ $card-bg: var(--pgn-color-white) !default; $card-img-overlay-padding: 1.25rem !default; $card-group-margin: calc(var(--pgn-grid-gutter-width) / 2) !default; -$card-deck-margin: $card-group-margin !default; -$card-grid-margin: $card-group-margin !default; +$card-deck-margin: var(--pgn-card-margin-group) !default; +$card-grid-margin: var(--pgn-card-margin-group) !default; $card-columns-count: 3 !default; $card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; +$card-columns-margin: var(--pgn-card-spacer-y) !default; $card-divider-bg: var(--pgn-color-light-400) !default; -$card-divider-margin-y: $card-spacer-y !default; +$card-divider-margin-y: var(--pgn-card-spacer-y) !default; $card-footer-actions-gap: .5rem !default; @@ -42,6 +42,6 @@ $card-logo-border-radius: .25rem !default; $card-footer-text-font-size: var(--pgn-font-size-small-x); $card-image-horizontal-max-width: 240px; -$card-image-horizontal-min-width: $card-image-horizontal-max-width; +$card-image-horizontal-min-width: var(--pgn-card-image-horizontal-width-max); $card-image-vertical-max-height: 140px; $loading-skeleton-spacer: .313rem; diff --git a/src/Carousel/_variables.scss b/src/Carousel/_variables.scss index f9dfac2002..161a0e52fd 100644 --- a/src/Carousel/_variables.scss +++ b/src/Carousel/_variables.scss @@ -1,6 +1,7 @@ // Carousel -$carousel-control-color: $white !default; +// TODO use css variable +$carousel-control-color: #FFFFFF !default; $carousel-control-width: 15% !default; $carousel-control-opacity: .5 !default; $carousel-control-hover-opacity: .9 !default; diff --git a/src/Code/_variables.scss b/src/Code/_variables.scss index 9f0b60f426..3ebd134bc9 100644 --- a/src/Code/_variables.scss +++ b/src/Code/_variables.scss @@ -9,7 +9,7 @@ $nested-kbd-font-weight: var(--pgn-font-weight-bold) !default; // HTML Keyboard Input element () styles $kbd-padding-y: .2rem !default; $kbd-padding-x: .4rem !default; -$kbd-font-size: $code-font-size !default; +$kbd-font-size: var(--pgn-code-font-size) !default; $kbd-color: var(--pgn-color-white) !default; $kbd-bg: theme-color("gray", "hover") !default; diff --git a/src/Collapsible/_variables.scss b/src/Collapsible/_variables.scss index 19b10836b7..d759eec3aa 100644 --- a/src/Collapsible/_variables.scss +++ b/src/Collapsible/_variables.scss @@ -2,8 +2,8 @@ $collapsible-card-spacer-y: .5rem !default; $collapsible-card-spacer-x: .5rem !default; -$collapsible-card-spacer-y-lg: $card-spacer-y !default; -$collapsible-card-spacer-x-lg: $card-spacer-x !default; +$collapsible-card-spacer-y-lg: var(--pgn-card-spacer-y) !default; +$collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x) !default; $collapsible-card-body-spacer-left: .75rem !default; $collapsible-card-spacer-icon: 2.5rem !default; diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss index e9fcf4c56a..0aeea9e520 100644 --- a/src/DataTable/DataTable.scss +++ b/src/DataTable/DataTable.scss @@ -79,7 +79,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba($white, .7); + background-color: rgba(var(--pgn-color-white), .7); z-index: 1; } } @@ -128,12 +128,12 @@ th { background-color: var(--pgn-color-light-300); - padding: var(--pgn-data-table-padding-cell); + padding: var(--pgn-data-table-padding-head-cell); text-align: start; } td { - padding: var(--pgn-table-cell-padding-base); + padding: var(--pgn-data-table-padding-cell); line-height: 24px; text-align: start; } diff --git a/src/DataTable/_variables.scss b/src/DataTable/_variables.scss index e401be795c..fc2b86fb6a 100644 --- a/src/DataTable/_variables.scss +++ b/src/DataTable/_variables.scss @@ -4,7 +4,8 @@ $data-table-box-shadow: var(--pgn-box-shadow-sm) !default; $data-table-padding-x: .75rem !default; $data-table-padding-y: .75rem !default; $data-table-padding-small: .5rem !default; -$data-table-cell-padding: .5rem .75rem !default; +$data-table-head-cell-padding: .5rem .75rem !default; +$data-table-cell-padding: .75rem !default; $data-table-footer-position: center !default; $data-table-pagination-dropdown-max-height: 60vh !default; $data-table-pagination-dropdown-min-width: 6rem !default; diff --git a/src/Dropdown/_variables.scss b/src/Dropdown/_variables.scss index 24e768c403..c530bdf489 100644 --- a/src/Dropdown/_variables.scss +++ b/src/Dropdown/_variables.scss @@ -9,12 +9,13 @@ $dropdown-spacer: .125rem !default; $dropdown-font-size: var(--pgn-font-size-base) !default; $dropdown-color: var(--pgn-body-color) !default; $dropdown-bg: var(--pgn-color-white) !default; -$dropdown-border-color: rgba($black, .15) !default; +// TODO use css variable +$dropdown-border-color: rgba(#000000, .15) !default; $dropdown-border-radius: var(--pgn-border-radius-base) !default; $dropdown-border-width: var(--pgn-border-width) !default; -$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; +$dropdown-inner-border-radius: calc(#{var(--pgn-dropdown-border-radius-base)} - #{var(--pgn-dropdown-border-width)}) !default; $dropdown-divider-bg: theme-color("gray", "background") !default; -$dropdown-divider-margin-y: calc(var(--pgn-core-spacer) / 2) !default; +$dropdown-divider-margin-y: calc(var(--pgn-spacer-base) / 2) !default; $dropdown-box-shadow: 0 .5rem 1rem rgba(var(--pgn-color-black), .175) !default; $dropdown-link-color: theme-color("gray", "dark-text") !default; @@ -30,4 +31,4 @@ $dropdown-item-padding-y: .25rem !default; $dropdown-item-padding-x: 1rem !default; $dropdown-header-color: theme-color("gray", "light-text") !default; -$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; +$dropdown-header-padding: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item) !default; diff --git a/src/Fieldset/Fieldset.scss b/src/Fieldset/Fieldset.scss index 1b8ce84463..a6cb4be6c0 100644 --- a/src/Fieldset/Fieldset.scss +++ b/src/Fieldset/Fieldset.scss @@ -1,5 +1,5 @@ .paragon-fieldset { - margin-bottom: calc(var(--pgn-core-spacer) * 1.5); + margin-bottom: calc(var(--pgn-spacer-base) * 1.5); .form-control { height: auto; diff --git a/src/Form/_Form.scss b/src/Form/_Form.scss index 6685888b1d..f5fe8c2fc7 100644 --- a/src/Form/_Form.scss +++ b/src/Form/_Form.scss @@ -1,7 +1,7 @@ @import "variables"; @import "~bootstrap/scss/forms"; @import "~bootstrap/scss/input-group"; -@import "~bootstrap/scss/custom-forms"; +@import "bootstrap-custom-forms"; @import "mixins"; @import "FormText"; @import "FormControlSet"; @@ -215,7 +215,7 @@ $select-icon-padding: .5625rem !default; transform: translateX(#{var(--pgn-form-control-icon-width)}); [dir="rtl"] & { - transform: translateX(-#{var(--pgn-form-control-icon-width)}); + transform: translateX(calc(-1 * #{var(--pgn-form-control-icon-width)})); } } } @@ -480,11 +480,11 @@ select.form-control { } &.pgn__form-control-invalid input { - border-color: var(--pgn-form-feedback-color-invalid); + border-color: $form-feedback-invalid-color; } &.pgn__form-control-valid input { - border-color: var(--pgn-form-feedback-color-valid); + border-color: $form-feedback-valid-color; } &.pgn__form-control-label-left { diff --git a/src/Form/_FormText.scss b/src/Form/_FormText.scss index 74492ce621..34b919ca34 100644 --- a/src/Form/_FormText.scss +++ b/src/Form/_FormText.scss @@ -25,11 +25,11 @@ } .pgn__form-text-valid { - color: var(--pgn-form-feedback-color-valid); + color: $form-feedback-valid-color; } .pgn__form-text-invalid { - color: var(--pgn-form-feedback-color-invalid); + color: $form-feedback-invalid-color; } .pgn__form-text-warning { @@ -44,12 +44,12 @@ .pgn__form-text-criteria-valid { .pgn__icon { - color: var(--pgn-form-feedback-color-valid); + color: $form-feedback-valid-color; } } .pgn__form-text-criteria-invalid { .pgn__icon { - color: var(--pgn-form-feedback-color-invalid); + color: $form-feedback-invalid-color; } } diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss new file mode 100644 index 0000000000..d9eb11c869 --- /dev/null +++ b/src/Form/_bootstrap-custom-forms.scss @@ -0,0 +1,526 @@ +// Embedded icons from Open Iconic. +// Released under MIT and copyright 2014 Waybury. +// https://useiconic.com/open + + +// Checkboxes and radios +// +// Base class takes care of all the key behavioral aspects. + +.custom-control { + position: relative; + z-index: 1; + display: block; + min-height: calc(#{var(--pgn-font-size-base)} * #{var(--pgn-line-height-base)}); + padding-left: calc(#{var(--pgn-form-custom-control-gutter)} + #{var(--pgn-form-custom-control-indicator-size)}); + print-color-adjust: exact; // Keep themed appearance for print +} + +.custom-control-inline { + display: inline-flex; + margin-right: var(--pgn-form-custom-control-spacer-x); +} + +.custom-control-input { + position: absolute; + left: 0; + z-index: -1; // Put the input behind the label so it doesn't overlay text + width: var(--pgn-form-custom-control-indicator-size); + height: calc((#{var(--pgn-font-size-base)} * #{var(--pgn-line-height-base)} + #{var(--pgn-form-custom-control-indicator-size)}) * .5); + opacity: 0; + + &:checked ~ .custom-control-label::before { + color: var(--pgn-form-custom-control-indicator-checked-color); + border-color: var(--pgn-form-custom-control-indicator-checked-border-color-base); + @include gradient-bg(var(--pgn-form-custom-control-indicator-checked-bg-base)); + @include box-shadow(var(--pgn-form-custom-control-indicator-checked-box-shadow-base)); + } + + &:focus ~ .custom-control-label::before { + // the mixin is not used here to make sure there is feedback + @if $enable-shadows { + box-shadow: var(--pgn-form-input-box-shadow-base), var(--pgn-form-custom-control-indicator-checked-box-shadow-focus); + } @else { + box-shadow: var(--pgn-form-custom-control-indicator-checked-box-shadow-focus); + } + } + + &:focus:not(:checked) ~ .custom-control-label::before { + border-color: var(--pgn-form-custom-control-indicator-checked-border-color-focus); + } + + &:not(:disabled):active ~ .custom-control-label::before { + color: var(--pgn-form-custom-control-indicator-active-color-base); + background-color: var(--pgn-form-custom-control-indicator-active-bg); + border-color: $custom-control-indicator-active-border-color; + @include box-shadow(var(--pgn-form-custom-control-indicator-active-box-shadow)); + } + + // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 + &[disabled], + &:disabled { + ~ .custom-control-label { + color: var(--pgn-form-custom-control-label-color-disabled); + + &::before { + background-color: var(--pgn-form-custom-control-indicator-disabled-bg); + } + } + } +} + +// Custom control indicators +// +// Build the custom controls out of pseudo-elements. + +.custom-control-label { + position: relative; + margin-bottom: 0; + color: var(--pgn-form-custom-control-label-color-base); + vertical-align: top; + cursor: var(--pgn-form-custom-control-cursor); + + // Background-color and (when enabled) gradient + &::before { + position: absolute; + top: calc((#{var(--pgn-font-size-base)} * #{var(--pgn-line-height-base)} - #{var(--pgn-form-custom-control-indicator-size)}) * .5); + left: -(var(--pgn-form-custom-control-gutter) + var(--pgn-form-custom-control-indicator-size)); + display: block; + width: var(--pgn-form-custom-control-indicator-size); + height: var(--pgn-form-custom-control-indicator-size); + pointer-events: none; + content: ""; + background-color: var(--pgn-form-custom-control-indicator-bg-base); + border: var(--pgn-form-custom-control-indicator-border-width) solid var(--pgn-form-custom-control-indicator-border-color); + @include box-shadow(var(--pgn-form-custom-control-indicator-box-shadow)); + } + + // Foreground (icon) + &::after { + position: absolute; + top: calc((#{var(--pgn-font-size-base)} * #{var(--pgn-line-height-base)} - #{var(--pgn-form-custom-control-indicator-size)}) * .5); + left: -(var(--pgn-form-custom-control-gutter) + var(--pgn-form-custom-control-indicator-size)); + display: block; + width: var(--pgn-form-custom-control-indicator-size); + height: var(--pgn-form-custom-control-indicator-size); + content: ""; + background: 50% / #{var(--pgn-form-custom-control-indicator-bg-size)} no-repeat; + } +} + + +// Checkboxes +// +// Tweak just a few things for checkboxes. + +.custom-checkbox { + .custom-control-label::before { + @include border-radius(var(--pgn-form-custom-checkbox-indicator-border-radius)); + } + + .custom-control-input:checked ~ .custom-control-label { + &::after { + background-image: escape-svg($custom-checkbox-indicator-icon-checked); + } + } + + .custom-control-input:indeterminate ~ .custom-control-label { + &::before { + border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color); + @include gradient-bg(var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)); + @include box-shadow(var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)); + } + &::after { + background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate); + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + @include gradient-bg(var(--pgn-form-custom-control-indicator-checked-bg-disabled)); + } + &:indeterminate ~ .custom-control-label::before { + @include gradient-bg(var(--pgn-form-custom-control-indicator-checked-bg-disabled)); + } + } +} + +// Radios +// +// Tweak just a few things for radios. + +.custom-radio { + .custom-control-label::before { + // stylelint-disable-next-line property-disallowed-list + border-radius: var(--pgn-form-custom-radio-indicator-border-radius); + } + + .custom-control-input:checked ~ .custom-control-label { + &::after { + background-image: escape-svg($custom-radio-indicator-icon-checked); + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + @include gradient-bg(var(--pgn-form-custom-control-indicator-checked-bg-disabled)); + } + } +} + + +// switches +// +// Tweak a few things for switches + +.custom-switch { + padding-left: calc(#{var(--pgn-form-custom-switch-width)} + #{var(--pgn-form-custom-control-gutter)}); + + .custom-control-label { + &::before { + left: calc(-1 * (#{var(--pgn-form-custom-switch-width)} + #{var(--pgn-form-custom-control-gutter)})); + width: var(--pgn-form-custom-switch-width); + pointer-events: all; + // stylelint-disable-next-line property-disallowed-list + border-radius: var(--pgn-form-custom-switch-indicator-border-radius); + } + + &::after { + top: add(calc((#{var(--pgn-font-size-base)} * #{var(--pgn-line-height-base)} - #{var(--pgn-form-custom-control-indicator-size)}) * .5), calc(#{var(--pgn-form-custom-control-indicator-border-width)} * 2)); + left: add(calc(-1 * (#{var(--pgn-form-custom-switch-width)} + #{var(--pgn-form-custom-control-gutter)})), calc(#{var(--pgn-form-custom-control-indicator-border-width)} * 2)); + width: var(--pgn-form-custom-switch-indicator-size); + height: var(--pgn-form-custom-switch-indicator-size); + background-color: var(--pgn-form-custom-control-indicator-border-color); + // stylelint-disable-next-line property-disallowed-list + border-radius: var(--pgn-form-custom-switch-indicator-border-radius); + @include transition(transform .15s ease-in-out, var(--pgn-form-custom-transition)); + } + } + + .custom-control-input:checked ~ .custom-control-label { + &::after { + background-color: var(--pgn-form-custom-control-indicator-bg-base); + transform: translateX(calc(#{var(--pgn-form-custom-switch-width)} - #{var(--pgn-form-custom-control-indicator-size)})); + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + @include gradient-bg(var(--pgn-form-custom-control-indicator-checked-bg-disabled)); + } + } +} + + +// Select +// +// Replaces the browser default select with a custom one, mostly pulled from +// https://primer.github.io/. +// + +.custom-select { + display: inline-block; + width: 100%; + height: var(--pgn-form-custom-select-font-height-base); + padding: var(--pgn-form-custom-select-padding-y-base) (var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding)) var(--pgn-form-custom-select-padding-y-base) var(--pgn-form-custom-select-padding-x-base); + font-family: var(--pgn-form-custom-select-font-family); + @include font-size(var(--pgn-form-custom-select-font-size-base)); + font-weight: var(--pgn-form-custom-select-font-weight); + line-height: var(--pgn-form-custom-select-line-height); + color: var(--pgn-form-custom-select-color-base); + vertical-align: middle; + background: var(--pgn-form-custom-select-bg-base) $custom-select-background; + border: var(--pgn-form-custom-select-border-width-base) solid var(--pgn-form-custom-select-border-color-base); + @include border-radius(var(--pgn-form-custom-select-border-radius), 0); + @include box-shadow(var(--pgn-form-custom-select-border-box-shadow-base)); + appearance: none; + + &:focus { + border-color: var(--pgn-form-custom-select-border-color-focus); + outline: 0; + @if $enable-shadows { + @include box-shadow(var(--pgn-form-custom-select-border-box-shadow-base), var(--pgn-form-custom-select-border-box-shadow-focus)); + } @else { + // Avoid using mixin so we can pass custom focus shadow properly + box-shadow: var(--pgn-form-custom-select-border-box-shadow-focus); + } + + &::-ms-value { + // For visual consistency with other platforms/browsers, + // suppress the default white text on blue background highlight given to + // the selected option text when the (still closed) receives focus // in IE and (under certain conditions) Edge. // See https://github.com/twbs/bootstrap/issues/19398. - color: var(--pgn-form-input-color-base); - background-color: var(--pgn-form-input-bg-base); + color: $input-color; + background-color: $input-bg; } } &[multiple], &[size]:not([size="1"]) { height: auto; - padding-right: var(--pgn-form-custom-select-padding-x-base); + padding-right: $custom-select-padding-x; background-image: none; } &:disabled { - color: var(--pgn-form-custom-select-color-disabled); - background-color: var(--pgn-form-custom-select-bg-disabled); + color: $custom-select-disabled-color; + background-color: $custom-select-disabled-bg; } // Hides the default caret in IE11 @@ -276,24 +276,24 @@ // Remove outline from select box in FF &:-moz-focusring { color: transparent; - text-shadow: 0 0 0 var(--pgn-form-custom-select-color-base); + text-shadow: 0 0 0 $custom-select-color; } } .custom-select-sm { - height: var(--pgn-form-custom-select-height-sm); - padding-top: var(--pgn-form-custom-select-padding-y-sm); - padding-bottom: var(--pgn-form-custom-select-padding-y-sm); - padding-left: var(--pgn-form-custom-select-padding-x-sm); - @include font-size(var(--pgn-form-custom-select-font-size-sm)); + height: $custom-select-height-sm; + padding-top: $custom-select-padding-y-sm; + padding-bottom: $custom-select-padding-y-sm; + padding-left: $custom-select-padding-x-sm; + @include font-size($custom-select-font-size-sm); } .custom-select-lg { - height: var(--pgn-form-custom-select-font-height-lg); - padding-top: var(--pgn-form-custom-select-padding-y-lg); - padding-bottom: var(--pgn-form-custom-select-padding-y-lg); - padding-left: var(--pgn-form-custom-select-padding-x-lg); - @include font-size(var(--pgn-form-custom-select-font-size-lg)); + height: $custom-select-height-lg; + padding-top: $custom-select-padding-y-lg; + padding-bottom: $custom-select-padding-y-lg; + padding-left: $custom-select-padding-x-lg; + @include font-size($custom-select-font-size-lg); } @@ -305,7 +305,7 @@ position: relative; display: inline-block; width: 100%; - height: var(--pgn-form-custom-file-height-base); + height: $custom-file-height; margin-bottom: 0; } @@ -313,20 +313,20 @@ position: relative; z-index: 2; width: 100%; - height: var(--pgn-form-custom-file-height-base); + height: $custom-file-height; margin: 0; overflow: hidden; opacity: 0; &:focus ~ .custom-file-label { - border-color: var(--pgn-form-custom-file-border-color-focus); - box-shadow: var(--pgn-form-custom-file-box-shadow-focus); + border-color: $custom-file-focus-border-color; + box-shadow: $custom-file-focus-box-shadow; } // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 &[disabled] ~ .custom-file-label, &:disabled ~ .custom-file-label { - background-color: var(--pgn-form-custom-file-bg-disabled); + background-color: $custom-file-disabled-bg; } @each $lang, $value in $custom-file-text { @@ -346,17 +346,17 @@ right: 0; left: 0; z-index: 1; - height: var(--pgn-form-custom-file-height-base); - padding: var(--pgn-form-custom-file-padding-y) var(--pgn-form-custom-file-padding-x); + height: $custom-file-height; + padding: $custom-file-padding-y $custom-file-padding-x; overflow: hidden; - font-family: var(--pgn-form-custom-file-font-family); - font-weight: var(--pgn-form-custom-file-font-weight); - line-height: var(--pgn-form-custom-file-line-height); - color: var(--pgn-form-custom-file-color); - background-color: var(--pgn-form-custom-file-bg-base); - border: var(--pgn-form-custom-file-border-width) solid var(--pgn-form-custom-file-border-color-base); - @include border-radius(var(--pgn-form-custom-file-border-color-radius)); - @include box-shadow(var(--pgn-form-custom-file-box-shadow-base)); + font-family: $custom-file-font-family; + font-weight: $custom-file-font-weight; + line-height: $custom-file-line-height; + color: $custom-file-color; + background-color: $custom-file-bg; + border: $custom-file-border-width solid $custom-file-border-color; + @include border-radius($custom-file-border-radius); + @include box-shadow($custom-file-box-shadow); &::after { position: absolute; @@ -365,14 +365,14 @@ bottom: 0; z-index: 3; display: block; - height: var(--pgn-form-custom-file-height-inner); - padding: var(--pgn-form-custom-file-padding-y) var(--pgn-form-custom-file-padding-x); - line-height: var(--pgn-form-custom-file-line-height); - color: var(--pgn-form-custom-file-button-color); + height: $custom-file-height-inner; + padding: $custom-file-padding-y $custom-file-padding-x; + line-height: $custom-file-line-height; + color: $custom-file-button-color; content: "Browse"; - @include gradient-bg(var(--pgn-form-custom-file-button-bg)); + @include gradient-bg($custom-file-button-bg); border-left: inherit; - @include border-radius(0 var(--pgn-form-custom-file-border-color-radius) var(--pgn-form-custom-file-border-color-radius) 0); + @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); } } @@ -384,7 +384,7 @@ .custom-range { width: 100%; - height: add(var(--pgn-form-custom-range-thumb-height), calc(#{var(--pgn-form-custom-range-thumb-box-shadow-focus-width)} * 2)); + height: add($custom-range-thumb-height, calc(#{$custom-range-thumb-focus-box-shadow-width} * 2)); padding: 0; // Need to reset padding background-color: transparent; appearance: none; @@ -394,9 +394,9 @@ // Pseudo-elements must be split across multiple rulesets to have an effect. // No box-shadow() mixin for focus accessibility. - &::-webkit-slider-thumb { box-shadow: var(--pgn-form-custom-range-thumb-box-shadow-focus-base); } - &::-moz-range-thumb { box-shadow: var(--pgn-form-custom-range-thumb-box-shadow-focus-base); } - &::-ms-thumb { box-shadow: var(--pgn-form-custom-range-thumb-box-shadow-focus-base); } + &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } } &::-moz-focus-outer { @@ -404,14 +404,14 @@ } &::-webkit-slider-thumb { - width: var(--pgn-form-custom-range-thumb-width); - height: var(--pgn-form-custom-range-thumb-height); - margin-top: calc((#{var(--pgn-form-custom-range-track-height)} - #{var(--pgn-form-custom-range-thumb-height)}) * .5); // Webkit specific - @include gradient-bg(var(--pgn-form-custom-range-thumb-bg-base)); - border: var(--pgn-form-custom-range-thumb-border-base); - @include border-radius(var(--pgn-form-custom-range-thumb-border-radius)); - @include box-shadow(var(--pgn-form-custom-range-thumb-box-shadow-base)); - @include transition(var(--pgn-form-custom-transition)); + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + margin-top: calc((#{$custom-range-track-height} - #{$custom-range-thumb-height}) * .5); // Webkit specific + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); appearance: none; &:active { @@ -420,24 +420,24 @@ } &::-webkit-slider-runnable-track { - width: var(--pgn-form-custom-range-track-width); - height: var(--pgn-form-custom-range-track-height); + width: $custom-range-track-width; + height: $custom-range-track-height; color: transparent; // Why? - cursor: var(--pgn-form-custom-range-track-cursor); - background-color: var(--pgn-form-custom-range-track-bg); + cursor: $custom-range-track-cursor; + background-color: $custom-range-track-bg; border-color: transparent; - @include border-radius(var(--pgn-form-custom-range-track-border-radius)); - @include box-shadow(var(--pgn-form-custom-range-track-box-shadow)); + @include border-radius($custom-range-track-border-radius); + @include box-shadow($custom-range-track-box-shadow); } &::-moz-range-thumb { - width: var(--pgn-form-custom-range-thumb-width); - height: var(--pgn-form-custom-range-thumb-height); - @include gradient-bg(var(--pgn-form-custom-range-thumb-bg-base)); - border: var(--pgn-form-custom-range-thumb-border-base); - @include border-radius(var(--pgn-form-custom-range-thumb-border-radius)); - @include box-shadow(var(--pgn-form-custom-range-thumb-box-shadow-base)); - @include transition(var(--pgn-form-custom-transition)); + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); appearance: none; &:active { @@ -446,27 +446,27 @@ } &::-moz-range-track { - width: var(--pgn-form-custom-range-track-width); - height: var(--pgn-form-custom-range-track-height); + width: $custom-range-track-width; + height: $custom-range-track-height; color: transparent; - cursor: var(--pgn-form-custom-range-track-cursor); - background-color: var(--pgn-form-custom-range-track-bg); + cursor: $custom-range-track-cursor; + background-color: $custom-range-track-bg; border-color: transparent; // Firefox specific? - @include border-radius(var(--pgn-form-custom-range-track-border-radius)); - @include box-shadow(var(--pgn-form-custom-range-track-box-shadow)); + @include border-radius($custom-range-track-border-radius); + @include box-shadow($custom-range-track-box-shadow); } &::-ms-thumb { - width: var(--pgn-form-custom-range-thumb-width); - height: var(--pgn-form-custom-range-thumb-height); + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; margin-top: 0; // Edge specific - margin-right: var(--pgn-form-custom-range-thumb-box-shadow-focus-width); // Workaround that overflowed box-shadow is hidden. - margin-left: var(--pgn-form-custom-range-thumb-box-shadow-focus-width); // Workaround that overflowed box-shadow is hidden. - @include gradient-bg(var(--pgn-form-custom-range-thumb-bg-base)); - border: var(--pgn-form-custom-range-thumb-border-base); - @include border-radius(var(--pgn-form-custom-range-thumb-border-radius)); - @include box-shadow(var(--pgn-form-custom-range-thumb-box-shadow-base)); - @include transition(var(--pgn-form-custom-transition)); + margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); appearance: none; &:active { @@ -475,30 +475,30 @@ } &::-ms-track { - width: var(--pgn-form-custom-range-track-width); - height: var(--pgn-form-custom-range-track-height); + width: $custom-range-track-width; + height: $custom-range-track-height; color: transparent; - cursor: var(--pgn-form-custom-range-track-cursor); + cursor: $custom-range-track-cursor; background-color: transparent; border-color: transparent; - border-width: calc(#{var(--pgn-form-custom-range-thumb-height)} * .5); - @include box-shadow(var(--pgn-form-custom-range-track-box-shadow)); + border-width: calc(#{$custom-range-thumb-height} * .5); + @include box-shadow($custom-range-track-box-shadow); } &::-ms-fill-lower { - background-color: var(--pgn-form-custom-range-track-bg); - @include border-radius(var(--pgn-form-custom-range-track-border-radius)); + background-color: $custom-range-track-bg; + @include border-radius($custom-range-track-border-radius); } &::-ms-fill-upper { margin-right: 15px; // arbitrary? - background-color: var(--pgn-form-custom-range-track-bg); - @include border-radius(var(--pgn-form-custom-range-track-border-radius)); + background-color: $custom-range-track-bg; + @include border-radius($custom-range-track-border-radius); } &:disabled { &::-webkit-slider-thumb { - background-color: var(--pgn-form-custom-range-thumb-bg-disabled); + background-color: $custom-range-thumb-disabled-bg; } &::-webkit-slider-runnable-track { @@ -506,7 +506,7 @@ } &::-moz-range-thumb { - background-color: var(--pgn-form-custom-range-thumb-bg-disabled); + background-color: $custom-range-thumb-disabled-bg; } &::-moz-range-track { @@ -514,7 +514,7 @@ } &::-ms-thumb { - background-color: var(--pgn-form-custom-range-thumb-bg-disabled); + background-color: $custom-range-thumb-disabled-bg; } } } @@ -522,5 +522,5 @@ .custom-control-label::before, .custom-file-label, .custom-select { - @include transition(var(--pgn-form-custom-transition)); + @include transition($custom-forms-transition); } diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss index 4515ca1f7f..eaa646c0cf 100644 --- a/src/Form/_variables.scss +++ b/src/Form/_variables.scss @@ -1,55 +1,55 @@ -$input-padding-y: var(--pgn-input-btn-padding-y) !default; -$input-padding-x: var(--pgn-input-btn-padding-x) !default; -$input-font-family: var(--pgn-input-btn-font-family) !default; -$input-font-size: var(--pgn-input-btn-font-size-base) !default; -$input-font-weight: var(--pgn-font-weight-base) !default; -$input-line-height: var(--pgn-input-btn-line-height-base) !default; - -$input-padding-y-sm: var(--pgn-input-btn-padding-sm-y) !default; -$input-padding-x-sm: var(--pgn-input-btn-padding-sm-x) !default; -$input-font-size-sm: var(--pgn-input-btn-font-size-sm) !default; -$input-line-height-sm: var(--pgn-input-btn-line-height-sm) !default; - -$input-padding-y-lg: var(--pgn-input-btn-padding-lg-y) !default; -$input-padding-x-lg: var(--pgn-input-btn-padding-lg-x) !default; -$input-font-size-lg: var(--pgn-input-btn-font-size-lg) !default; -$input-line-height-lg: var(--pgn-input-btn-line-height-lg) !default; - -$input-bg: var(--pgn-color-white) !default; +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-font-family: $input-btn-font-family !default; +$input-font-size: $input-btn-font-size !default; +$input-font-weight: $font-weight-base !default; +$input-line-height: $input-btn-line-height !default; + +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-font-size-sm: $input-btn-font-size-sm !default; +$input-line-height-sm: $input-btn-line-height-sm !default; + +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-font-size-lg: $input-btn-font-size-lg !default; +$input-line-height-lg: $input-btn-line-height-lg !default; + +$input-bg: $white !default; $input-disabled-bg: theme-color("gray", "background") !default; $input-color: theme-color("gray", "text") !default; -$input-border-color: var(--pgn-color-gray-500) !default; -$input-border-width: var(--pgn-input-btn-border-width) !default; -$input-box-shadow: inset 0 1px 1px rgba(var(--pgn-color-black), .075) !default; +$input-border-color: $gray-500 !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; -$input-border-radius: var(--pgn-border-radius-base) !default; -$input-border-radius-lg: var(--pgn-border-radius-lg) !default; -$input-border-radius-sm: var(--pgn-border-radius-sm) !default; +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; -$input-focus-bg: var(--pgn-form-input-bg-base) !default; -$input-focus-border-color: var(--pgn-component-active-bg) !default; -$input-focus-color: var(--pgn-form-input-color-base) !default; +$input-focus-bg: $input-bg !default; +$input-focus-border-color: $component-active-bg !default; +$input-focus-color: $input-color !default; $input-focus-width: 1px !default; -$input-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow) !default; +$input-focus-box-shadow: $input-btn-focus-box-shadow !default; $input-placeholder-color: theme-color("gray", "light-text") !default; -$input-plaintext-color: var(--pgn-body-color) !default; +$input-plaintext-color: $body-color !default; -$input-height-border: calc(var(--pgn-form-input-border-width) * 2) !default; +$input-height-border: calc($input-border-width * 2) !default; -$input-height-inner: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2) !default; -$input-height-inner-half: calc(var(--pgn-form-input-line-height-base) * .5em + var(--pgn-form-input-padding-y-base)) !default; -$input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2)) !default; +$input-height-inner: calc($input-line-height * 1em + $input-padding-y * 2) !default; +$input-height-inner-half: calc($input-line-height * .5em + $input-padding-y) !default; +$input-height-inner-quarter: calc($input-line-height * .25em + calc($input-padding-y / 2)) !default; $input-height: calc( - (var(--pgn-form-input-line-height-base) * 1em) + (var(--pgn-form-input-padding-y-base) * 2) + (var(--pgn-form-input-border-height)) + ($input-line-height * 1em) + ($input-padding-y * 2) + ($input-height-border) ) !default; $input-height-sm: calc( - (var(--pgn-form-input-line-height-sm) * 1em) + (var(--pgn-input-btn-padding-sm-y) * 2) + var(--pgn-form-input-border-height) + ($input-line-height-sm * 1em) + ($input-btn-padding-y-sm * 2) + $input-height-border ) !default; $input-height-lg: calc( - (var(--pgn-form-input-line-height-lg) * 1em) + (var(--pgn-input-btn-padding-lg-y) * 2) + (var(--pgn-form-input-border-height)) + ($input-line-height-lg * 1em) + ($input-btn-padding-y-lg * 2) + ($input-height-border) ) !default; $input-hover-width: 1px !default; @@ -71,9 +71,9 @@ $form-check-border-width: .125rem !default; $form-grid-gutter-width: 10px !default; $form-group-margin-bottom: 1rem !default; -$input-group-addon-color: var(--pgn-form-input-color-base) !default; +$input-group-addon-color: $input-color !default; $input-group-addon-bg: theme-color("gray", "background") !default; -$input-group-addon-border-color: var(--pgn-form-input-border-color) !default; +$input-group-addon-border-color: $input-border-color !default; $custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; @@ -83,26 +83,26 @@ $custom-control-spacer-x: 1rem !default; $custom-control-cursor: null !default; $custom-control-indicator-size: 1.25rem !default; -$custom-control-indicator-bg: var(--pgn-form-input-bg-base) !default; +$custom-control-indicator-bg: $input-bg !default; $custom-control-indicator-bg-size: 100% !default; -$custom-control-indicator-box-shadow: var(--pgn-form-input-box-shadow-base) !default; -$custom-control-indicator-border-color: var(--pgn-color-gray-700) !default; +$custom-control-indicator-box-shadow: $input-box-shadow !default; +$custom-control-indicator-border-color: $gray-700 !default; $custom-control-indicator-border-width: 2px !default; $custom-control-label-color: null !default; -$custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled) !default; +$custom-control-indicator-disabled-bg: $input-disabled-bg !default; $custom-control-label-disabled-color: theme-color("gray", "light-text") !default; // TODO switch to css variable $custom-control-indicator-checked-color: #0A3055 !default; $custom-control-indicator-checked-bg: #0A3055 !default; -$custom-control-indicator-checked-disabled-bg: rgba(var(--pgn-color-primary-base), .5) !default; +$custom-control-indicator-checked-disabled-bg: rgba($primary, .5) !default; $custom-control-indicator-checked-box-shadow: none !default; $custom-control-indicator-checked-border-color: var(--pgn-form-custom-control-indicator-checked-bg-base) !default; $custom-control-indicator-focus-box-shadow: 0 0 0 4px rgba(0, 0, 0, .1) !default; -$custom-control-indicator-focus-border-color: var(--pgn-form-input-focus-color-border) !default; +$custom-control-indicator-focus-border-color: $input-focus-border-color !default; // TODO switch to css variable $custom-control-indicator-active-color: #FFFFFF !default; @@ -112,37 +112,37 @@ $custom-control-indicator-active-border-color: $custom-control-indicator-active $custom-checkbox-indicator-border-radius: 0 !default; $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-bg: var(--pgn-component-active-bg) !default; +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; $custom-checkbox-indicator-indeterminate-box-shadow: none !default; -$custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg) !default; +$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default; $custom-radio-indicator-border-radius: 50% !default; $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default; $custom-switch-indicator-icon-off: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default; $custom-switch-indicator-icon-on: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-active-color}'/%3e%3c/svg%3e"), "#", "%23") !default; -$custom-switch-width: calc(var(--pgn-form-custom-control-indicator-size) * 1.75) !default; -$custom-switch-indicator-border-radius: calc(var(--pgn-form-custom-control-indicator-size) / 2) !default; +$custom-switch-width: calc($custom-control-indicator-size * 1.75) !default; +$custom-switch-indicator-border-radius: calc($custom-control-indicator-size / 2) !default; $custom-switch-indicator-size: calc( - #{var(--pgn-form-custom-control-indicator-size)} - calc(#{var(--pgn-form-custom-control-indicator-border-width)} * 4) + #{$custom-control-indicator-size} - calc(#{$custom-control-indicator-border-width} * 4) ) !default; $custom-switch-indicator-checked-bg: theme-color("success") !default; -$custom-select-padding-y: var(--pgn-form-input-padding-y-base) !default; -$custom-select-padding-x: var(--pgn-form-input-padding-x-base) !default; -$custom-select-font-family: var(--pgn-form-input-font-family) !default; -$custom-select-font-size: var(--pgn-form-input-font-size-base) !default; -$custom-select-height: var(--pgn-form-input-height-base) !default; +$custom-select-padding-y: $input-padding-y !default; +$custom-select-padding-x: $input-padding-x !default; +$custom-select-font-family: $input-font-family !default; +$custom-select-font-size: $input-font-size !default; +$custom-select-height: $input-height !default; // Extra padding to account for the presence of the background-image based indicator $custom-select-indicator-padding: 1rem !default; -$custom-select-font-weight: var(--pgn-form-input-font-weight) !default; -$custom-select-line-height: var(--pgn-form-input-line-height-base) !default; -$custom-select-color: var(--pgn-form-input-color-base) !default; +$custom-select-font-weight: $input-font-weight !default; +$custom-select-line-height: $input-line-height !default; +$custom-select-color: $input-color !default; $custom-select-disabled-color: theme-color("gray", "light-text") !default; -$custom-select-bg: var(--pgn-form-input-bg-base) !default; +$custom-select-bg: $input-bg !default; $custom-select-disabled-bg: theme-color("gray", "background") !default; $custom-select-bg-size: 24px 24px !default; // In pixels because image dimensions $custom-select-indicator-color: theme-color("gray", "hover") !default; @@ -151,80 +151,80 @@ $custom-select-indicator: str-replace(url('data:image/svg+xml, &.dropdown-toggle { - color: var(--pgn-btn-tertiary-color); - background-color: var(--pgn-menu-background-active); - border-color: var(--pgn-menu-border-active); + color: $btn-tertiary-color; + background-color: $active-background; + border-color: $active-border; } &.focus, &:focus { - font-weight: var(--pgn-font-weight-bolder); - color: var(--pgn-btn-tertiary-color); - background-color: var(--pgn-menu-background-active); - border-color: var(--pgn-menu-border-active); + font-weight: $font-weight-bolder; + color: $btn-tertiary-color; + background-color: $active-background; + border-color: $active-border; } .btn-icon-before { @@ -79,8 +79,8 @@ .pgn__menu { border-radius: .25em; - box-shadow: var(--pgn-box-shadow-base); - background-color: var(--pgn-color-white); + box-shadow: $box-shadow; + background-color: $white; overflow: auto; max-height: 264px; } @@ -95,14 +95,14 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - background: var(--pgn-color-white); + background: $white; box-sizing: border-box; - color: var(--pgn-color-dark-base); + color: $dark; @include hover { - color: var(--pgn-color-white); - background: var(--pgn-color-primary-base); - border: 1px solid var(--pgn-color-white); + color: $white; + background: $primary; + border: 1px solid $white; box-sizing: border-box; } } diff --git a/src/Menu/_variables.scss b/src/Menu/_variables.scss index 4f4388fe1c..a235671ddf 100644 --- a/src/Menu/_variables.scss +++ b/src/Menu/_variables.scss @@ -1,5 +1,5 @@ $background: $btn-tertiary-bg; $border: transparent; -$active-background: var(--pgn-btn-tertiary-bg-active); +$active-background: $btn-tertiary-active-bg; $active-border: transparent; $hover-border: transparent; diff --git a/src/Modal/Modal.scss b/src/Modal/Modal.scss index 2281e7e57d..6d8aae5209 100644 --- a/src/Modal/Modal.scss +++ b/src/Modal/Modal.scss @@ -13,15 +13,15 @@ position: fixed; top: 0; width: 100vw; - z-index: var(--pgn-modal-zindex); + z-index: $zindex-modal; -webkit-overflow-scrolling: touch; } .pgn__modal-backdrop { - background: var(--pgn-modal-backdrop-bg); + background: $modal-backdrop-bg; bottom: 0; left: 0; - opacity: var(--pgn-modal-backdrop-opacity); + opacity: $modal-backdrop-opacity; position: fixed; right: 0; top: 0; @@ -86,15 +86,15 @@ .modal-dialog { height: 100%; margin: auto; - padding: calc(var(--pgn-spacer-base) / 2); + padding: calc($spacer / 2); @media (min-width: map-get($grid-breakpoints, "sm")) { - padding: var(--pgn-spacer-base); + padding: $spacer; } } .modal-content { - max-height: calc(100vh - (#{var(--pgn-spacer-base)} * 2)); + max-height: calc(100vh - (#{$spacer} * 2)); &:focus { outline: 1px dotted; @@ -129,7 +129,7 @@ } &::before { - border-top-color: rgba(var(--pgn-color-black), 20%); + border-top-color: rgba($black, 20%); } } @@ -164,8 +164,8 @@ .pgn__modal-popup__arrow::after, .pgn__modal-popup__arrow-top-start::after, .pgn__modal-popup__arrow-top::after { - bottom: var(--pgn-border-width); - border-top-color: var(--pgn-color-white); + bottom: $border-width; + border-top-color: $white; } [data-popper-placement^="right"] .pgn__modal-popup__arrow-auto, diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss index 57910e6e9a..da6dceba58 100644 --- a/src/Modal/_ModalDialog.scss +++ b/src/Modal/_ModalDialog.scss @@ -1,49 +1,49 @@ .pgn__modal { - background: var(--pgn-modal-content-bg); + background: $modal-content-bg; border-radius: $modal-content-inner-border-radius; display: flex; flex-direction: column; - margin: 0 var(--pgn-modal-dialog-margin-base); + margin: 0 $modal-dialog-margin; max-height: 80vh; - max-width: var(--pgn-modal-md); + max-width: $modal-md; overflow: auto; width: 100vw; - box-shadow: var(--pgn-modal-content-box-shadow-sm-up); - border: solid var(--pgn-modal-content-border-width) var(--pgn-modal-content-border-color); + box-shadow: $modal-content-box-shadow-sm-up; + border: solid $modal-content-border-width $modal-content-border-color; position: relative; &:not(.pgn__modal-fullscreen) > *:first-child { - border-top-left-radius: var(--pgn-modal-content-border-radius); - border-top-right-radius: var(--pgn-modal-content-border-radius); + border-top-left-radius: $modal-content-border-radius; + border-top-right-radius: $modal-content-border-radius; } &:not(.pgn__modal-fullscreen) > *:last-child { - border-bottom-left-radius: var(--pgn-modal-content-border-radius); - border-bottom-right-radius: var(--pgn-modal-content-border-radius); + border-bottom-left-radius: $modal-content-border-radius; + border-bottom-right-radius: $modal-content-border-radius; } &.pgn__modal-scroll-fullscreen { max-height: none; - margin: var(--pgn-modal-dialog-margin-base); + margin: $modal-dialog-margin; } } // Sizes .pgn__modal-sm { - max-width: var(--pgn-modal-sm); + max-width: $modal-sm; } .pgn__modal-lg { - max-width: var(--pgn-modal-lg); + max-width: $modal-lg; } .pgn__modal-md { - max-width: var(--pgn-modal-md); + max-width: $modal-md; } .pgn__modal-xl { - max-width: var(--pgn-modal-xl); + max-width: $modal-xl; } .pgn__modal-fullscreen { @@ -53,8 +53,8 @@ max-width: none; .pgn__modal-footer { - border-top: solid 1px var(--pgn-color-light-base); - padding-top: var(--pgn-modal-footer-padding-y); + border-top: solid 1px $light; + padding-top: $modal-footer-padding-y; } } @@ -72,8 +72,8 @@ .pgn__modal-close-container { position: absolute; z-index: 10; - top: var(--pgn-modal-header-padding-y); - inset-inline-end: var(--pgn-modal-header-padding-y); + top: $modal-header-padding-y; + inset-inline-end: $modal-header-padding-y; } .pgn__modal-header { @@ -82,8 +82,8 @@ justify-content: center; position: sticky; top: 0; - padding: var(--pgn-modal-header-padding-base); - background-color: var(--pgn-modal-content-bg); + padding: $modal-header-padding; + background-color: $modal-content-bg; transition: box-shadow 150ms ease; min-height: 2rem; // height of the icon close button box-sizing: content-box; @@ -96,14 +96,14 @@ } .pgn__modal-title { - font-size: var(--pgn-font-size-h3); + font-size: $h3-font-size; margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn text-align: start; } } .pgn__modal-hero { - padding: var(--pgn-modal-header-padding-base); + padding: $modal-header-padding; position: relative; display: flex; align-items: center; @@ -130,8 +130,8 @@ .pgn__modal-body { flex-grow: 1; padding: - var(--pgn-modal-inner-padding-base) - var(--pgn-modal-inner-padding-base) calc(#{var(--pgn-modal-inner-padding-base)} / 2); + $modal-inner-padding + $modal-inner-padding calc(#{$modal-inner-padding} / 2); overflow: auto; position: relative; @@ -142,10 +142,10 @@ display: block; height: 20px; position: sticky; - top: calc(var(--pgn-modal-inner-padding-base) * -1); - margin-top: calc(var(--pgn-modal-inner-padding-base) * -1); - margin-left: calc(var(--pgn-modal-inner-padding-base) * -1); - margin-right: calc(var(--pgn-modal-inner-padding-base) * -1); + top: calc($modal-inner-padding * -1); + margin-top: calc($modal-inner-padding * -1); + margin-left: calc($modal-inner-padding * -1); + margin-right: calc($modal-inner-padding * -1); opacity: .5; z-index: 2; } @@ -163,10 +163,10 @@ display: block; height: 20px; position: sticky; - bottom: calc(#{var(--pgn-modal-inner-padding-base)} / 2 * -1); + bottom: calc(#{$modal-inner-padding} / 2 * -1); margin-bottom: calc($modal-inner-padding-bottom * -1); - margin-left: calc(var(--pgn-modal-inner-padding-base) * -1); - margin-right: calc(var(--pgn-modal-inner-padding-base) * -1); + margin-left: calc($modal-inner-padding * -1); + margin-right: calc($modal-inner-padding * -1); opacity: .5; } @@ -224,10 +224,10 @@ bottom: 0; display: flex; justify-content: flex-end; - background-color: var(--pgn-modal-content-bg); + background-color: $modal-content-bg; transition: box-shadow 150ms ease; - padding: var(--pgn-modal-footer-padding-base); - padding-top: calc(#{var(--pgn-modal-inner-padding-base)} / 2); + padding: $modal-footer-padding; + padding-top: calc(#{$modal-inner-padding} / 2); } // Color Variants @@ -236,14 +236,14 @@ // Default style modals don't have a background on the header which // ends up looking spaced too far away from the body content. .pgn__modal-header { - padding-bottom: calc(#{var(--pgn-modal-inner-padding-base)} / 2); + padding-bottom: calc(#{$modal-inner-padding} / 2); } .pgn__modal-body { - padding: calc(#{var(--pgn-modal-inner-padding-base)} / 2) var(--pgn-modal-inner-padding-base); + padding: calc(#{$modal-inner-padding} / 2) $modal-inner-padding; &::before { - top: calc(#{var(--pgn-modal-inner-padding-base)} / 2 * -1); + top: calc(#{$modal-inner-padding} / 2 * -1); } } } @@ -251,8 +251,8 @@ .pgn__modal-dark { .pgn__modal-header, .pgn__modal-hero { - background-color: var(--pgn-color-dark-base); - color: var(--pgn-color-white); + background-color: $dark; + color: $white; * { color: inherit; @@ -260,20 +260,20 @@ } .pgn__modal-header { - border-bottom: solid 1px var(--pgn-color-light-base); + border-bottom: solid 1px $light; } } .pgn__modal-warning .pgn__modal-header { - background-color: var(--pgn-color-warning-100); + background-color: $warning-100; } .pgn__modal-danger .pgn__modal-header { - background-color: var(--pgn-color-danger-100); + background-color: $danger-100; } .pgn__modal-success .pgn__modal-header { - background-color: var(--pgn-color-success-100); + background-color: $success-100; } // Modal types @@ -286,6 +286,6 @@ } .pgn__modal-title { - font-size: var(--pgn-font-size-h4); + font-size: $h4-font-size; } } diff --git a/src/Modal/_variables.scss b/src/Modal/_variables.scss index e7e480fc24..feb5a4d980 100644 --- a/src/Modal/_variables.scss +++ b/src/Modal/_variables.scss @@ -4,40 +4,40 @@ $modal-inner-padding: 1.5rem !default; $modal-inner-padding-bottom: .7rem !default; -// Margin between elements in footer, must be lower than or equal to 2 * var(--pgn-modal-inner-padding-base) +// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding $modal-footer-margin-between: .5rem !default; $modal-dialog-margin: 1.5rem !default; $modal-dialog-margin-y-sm-up: 1.75rem !default; -$modal-title-line-height: var(--pgn-line-height-base) !default; +$modal-title-line-height: $line-height-base !default; $modal-content-color: null !default; -$modal-content-bg: var(--pgn-color-white) !default; -$modal-content-border-color: rgba(var(--pgn-color-black), .2) !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, .2) !default; $modal-content-border-width: 0 !default; -$modal-content-border-radius: var(--pgn-border-radius-lg) !default; -$modal-content-inner-border-radius: subtract(var(--pgn-modal-content-border-radius), var(--pgn-modal-content-border-width)) !default; -$modal-content-box-shadow-xs: 0 .25rem .5rem rgba(var(--pgn-color-black), .5) !default; -$modal-content-box-shadow-sm-up: 0 10px 20px rgba(var(--pgn-color-black), .15), - 0 8px 20px rgba(var(--pgn-color-black), .15) !default; +$modal-content-border-radius: $border-radius-lg !default; +$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; +$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; +$modal-content-box-shadow-sm-up: 0 10px 20px rgba($black, .15), + 0 8px 20px rgba($black, .15) !default; -$modal-backdrop-bg: var(--pgn-color-black) !default; +$modal-backdrop-bg: $black !default; $modal-backdrop-opacity: .5 !default; -$modal-header-border-color: var(--pgn-border-color) !default; -$modal-footer-border-color: var(--pgn-modal-header-border-color) !default; -$modal-header-border-width: var(--pgn-modal-content-border-width) !default; -$modal-footer-border-width: var(--pgn-modal-header-border-width) !default; +$modal-header-border-color: $border-color !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; $modal-header-padding-y: 1rem !default; $modal-header-padding-x: 1.5rem !default; // Keep this for backwards compatibility -$modal-header-padding: var(--pgn-modal-header-padding-y) var(--pgn-modal-header-padding-x) !default; +$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; $modal-footer-padding-y: 1rem !default; $modal-footer-padding-x: 1.5rem !default; // Keep this for backwards compatibility -$modal-footer-padding: var(--pgn-modal-footer-padding-y) var(--pgn-modal-footer-padding-x) !default; +$modal-footer-padding: $modal-footer-padding-y $modal-footer-padding-x !default; $modal-xl: 1140px !default; $modal-lg: 800px !default; diff --git a/src/Nav/Nav.scss b/src/Nav/Nav.scss index 42395ea75f..a90f6ce3b0 100644 --- a/src/Nav/Nav.scss +++ b/src/Nav/Nav.scss @@ -15,19 +15,19 @@ .nav-link { display: block; - padding: var(--pgn-nav-link-padding-y) var(--pgn-nav-link-padding-x); - text-decoration: if(var(--pgn-link-decoration) == none, null, none); - color: var(--pgn-nav-link-color-base); - font-weight: var(--pgn-nav-link-font-weight); + padding: $nav-link-padding-y $nav-link-padding-x; + text-decoration: if($link-decoration == none, null, none); + color: $nav-link-color; + font-weight: $nav-link-font-weight; @include hover-focus { text-decoration: none; - color: var(--pgn-nav-link-color-base); + color: $nav-link-color; } // Disabled state lightens text &.disabled { - color: var(--pgn-nav-link-color-disabled); + color: $nav-link-disabled-color; pointer-events: none; cursor: default; } @@ -38,24 +38,24 @@ // .nav-tabs { - border-bottom: var(--pgn-nav-tabs-border-width) solid var(--pgn-nav-tabs-border-color); + border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; .nav-link { - margin-bottom: calc(var(--pgn-nav-tabs-border-width) * -1); - border-top: var(--pgn-nav-tabs-border-width) solid transparent; - border-bottom: var(--pgn-nav-tabs-border-width) solid transparent; + margin-bottom: calc($nav-tabs-border-width * -1); + border-top: $nav-tabs-border-width solid transparent; + border-bottom: $nav-tabs-border-width solid transparent; border-left: none; border-right: none; - @include border-top-radius(var(--pgn-nav-tabs-border-radius)); + @include border-top-radius($nav-tabs-border-radius); @include hover-focus { - border-color: var(--pgn-nav-tabs-link-hover-border-color); - background-color: var(--pgn-nav-tabs-link-hover-bg); + border-color: $nav-tabs-link-hover-border-color; + background-color: $nav-tabs-link-hover-bg; } &.disabled { - color: var(--pgn-nav-link-color-disabled); + color: $nav-link-disabled-color; background-color: transparent; border-color: transparent; } @@ -63,14 +63,14 @@ .nav-link.active, .nav-item.show .nav-link { - color: var(--pgn-nav-tabs-link-active-color-base); - background-color: var(--pgn-nav-tabs-link-active-bg); - border-color: var(--pgn-nav-tabs-link-active-color-border); + color: $nav-tabs-link-active-color; + background-color: $nav-tabs-link-active-bg; + border-color: $nav-tabs-link-active-border-color; } .dropdown-menu { // Make dropdown border overlap tab border - margin-top: calc(var(--pgn-nav-tabs-border-width) * -1); + margin-top: calc($nav-tabs-border-width * -1); // Remove the top rounded corners here since there is a hard edge above the menu @include border-top-radius(0); @@ -83,13 +83,13 @@ .nav-pills { .nav-link { - @include border-radius(var(--pgn-nav-pills-border-radius)); + @include border-radius($nav-pills-border-radius); } .nav-link.active, .show > .nav-link { - color: var(--pgn-nav-pills-link-link-active-color); - background-color: var(--pgn-nav-pills-link-link-active-bg); + color: $nav-pills-link-active-color; + background-color: $nav-pills-link-active-bg; } } @@ -99,13 +99,13 @@ .nav-button-group { .nav-link { - border: solid 1px var(--pgn-nav-tabs-border-color); + border: solid 1px $nav-tabs-border-color; &:first-child { - @include border-left-radius(var(--pgn-nav-pills-border-radius)); + @include border-left-radius($nav-pills-border-radius); [dir="rtl"] & { - @include border-right-radius(var(--pgn-nav-pills-border-radius)); + @include border-right-radius($nav-pills-border-radius); border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -114,10 +114,10 @@ } &:last-child { - @include border-right-radius(var(--pgn-nav-pills-border-radius)); + @include border-right-radius($nav-pills-border-radius); [dir="rtl"] & { - @include border-left-radius(var(--pgn-nav-pills-border-radius)); + @include border-left-radius($nav-pills-border-radius); border-top-right-radius: 0; border-bottom-right-radius: 0; @@ -125,7 +125,7 @@ } &:hover { - background: var(--pgn-nav-tabs-link-hover-bg); + background: $nav-tabs-link-hover-bg; } & + .nav-link { @@ -135,8 +135,8 @@ .nav-link.active, .show > .nav-link { - color: var(--pgn-nav-pills-link-link-active-color); - background-color: var(--pgn-nav-pills-link-link-active-bg); + color: $nav-pills-link-active-color; + background-color: $nav-pills-link-active-bg; border-color: transparent; } } diff --git a/src/Nav/_variables.scss b/src/Nav/_variables.scss index 93ca577511..668909b664 100644 --- a/src/Nav/_variables.scss +++ b/src/Nav/_variables.scss @@ -2,22 +2,22 @@ $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; -$nav-link-color: var(--pgn-color-gray-700) !default; -$nav-link-disabled-color: var(--pgn-color-gray-300) !default; +$nav-link-color: $gray-700 !default; +$nav-link-disabled-color: $gray-300 !default; $nav-link-font-weight: 500 !default; -$nav-tabs-border-color: var(--pgn-color-light-400) !default; +$nav-tabs-border-color: $light-400 !default; $nav-tabs-border-width: 2px !default; $nav-tabs-border-radius: 0 !default; -$nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color) !default; -$nav-tabs-link-hover-bg: var(--pgn-color-light-400) !default; -$nav-tabs-link-active-color: var(--pgn-color-primary-500) !default; -$nav-tabs-link-active-bg: var(--pgn-body-bg) !default; -$nav-tabs-link-active-border-color: transparent transparent var(--pgn-color-primary-500) !default; +$nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-color !default; +$nav-tabs-link-hover-bg: $light-400 !default; +$nav-tabs-link-active-color: $primary-500 !default; +$nav-tabs-link-active-bg: $body-bg !default; +$nav-tabs-link-active-border-color: transparent transparent $primary-500 !default; -$nav-pills-border-radius: var(--pgn-border-radius-base) !default; -$nav-pills-link-active-color: var(--pgn-component-active-color) !default; -$nav-pills-link-active-bg: var(--pgn-component-active-bg) !default; +$nav-pills-border-radius: $border-radius !default; +$nav-pills-link-active-color: $component-active-color !default; +$nav-pills-link-active-bg: $component-active-bg !default; $nav-divider-color: theme-color("gray", "background") !default; -$nav-divider-margin-y: calc(var(--pgn-spacer-base) / 2) !default; +$nav-divider-margin-y: calc($spacer / 2) !default; diff --git a/src/Navbar/_variables.scss b/src/Navbar/_variables.scss index c0c63c44f2..0e418c808c 100644 --- a/src/Navbar/_variables.scss +++ b/src/Navbar/_variables.scss @@ -1,29 +1,29 @@ // Navbar -$navbar-padding-y: calc(var(--pgn-spacer-base) / 2) !default; -$navbar-padding-x: var(--pgn-spacer-base) !default; +$navbar-padding-y: calc($spacer / 2) !default; +$navbar-padding-x: $spacer !default; $navbar-nav-link-padding-x: .5rem !default; -$navbar-brand-font-size: var(--pgn-font-size-lg) !default; +$navbar-brand-font-size: $font-size-lg !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link -// The default for var(--pgn-nav-link-padding-y) is .5rem. Copied here for modularization -$nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2) !default; -$navbar-brand-height: calc(var(--pgn-navbar-brand-font-size) * var(--pgn-line-height-base)) !default; -$navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2) !default; +// The default for $nav-link-padding-y is .5rem. Copied here for modularization +$nav-link-height: calc($font-size-base * $line-height-base + .5rem * 2) !default; +$navbar-brand-height: calc($navbar-brand-font-size * $line-height-base) !default; +$navbar-brand-padding-y: calc(($nav-link-height - $navbar-brand-height) / 2) !default; $navbar-toggler-padding-y: .25rem !default; $navbar-toggler-padding-x: .75rem !default; -$navbar-toggler-font-size: var(--pgn-font-size-lg) !default; -$navbar-toggler-border-radius: var(--pgn-btn-border-radius-base) !default; +$navbar-toggler-font-size: $font-size-lg !default; +$navbar-toggler-border-radius: $btn-border-radius !default; $navbar-nav-scroll-max-height: 75vh !default; // TODO use css variable $navbar-dark-color: rgba(#FFFFFF, .5) !default; $navbar-dark-hover-color: rgba(#FFFFFF, .75) !default; -$navbar-dark-active-color: var(--pgn-color-white) !default; +$navbar-dark-active-color: $white !default; $navbar-dark-disabled-color: rgba(#FFFFFF, .25) !default; $navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; $navbar-dark-toggler-border-color: rgba(#FFFFFF, .1) !default; @@ -33,9 +33,9 @@ $navbar-light-hover-color: rgba(#000000, .7) !default; $navbar-light-active-color: rgba(#000000, .9) !default; $navbar-light-disabled-color: rgba(#000000, .3) !default; $navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; -$navbar-light-toggler-border-color: rgba(var(--pgn-color-black), .1) !default; +$navbar-light-toggler-border-color: rgba($black, .1) !default; -$navbar-light-brand-color: var(--pgn-navbar-light-color-active) !default; -$navbar-light-brand-hover-color: var(--pgn-navbar-light-color-active) !default; -$navbar-dark-brand-color: var(--pgn-navbar-dark-color-active) !default; -$navbar-dark-brand-hover-color: var(--pgn-navbar-dark-color-active) !default; +$navbar-light-brand-color: $navbar-light-active-color !default; +$navbar-light-brand-hover-color: $navbar-light-active-color !default; +$navbar-dark-brand-color: $navbar-dark-active-color !default; +$navbar-dark-brand-hover-color: $navbar-dark-active-color !default; diff --git a/src/PageBanner/PageBanner.scss b/src/PageBanner/PageBanner.scss index 645a786a70..229dbda334 100644 --- a/src/PageBanner/PageBanner.scss +++ b/src/PageBanner/PageBanner.scss @@ -4,28 +4,28 @@ min-height: 36px; display: flex; flex-wrap: nowrap; - font-size: var(--pgn-font-size-small-x); + font-size: $x-small-font-size; @include media-breakpoint-up(md) { - font-size: var(--pgn-font-size-small-base); + font-size: $small-font-size; } } // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__dark { - background-color: var(--pgn-color-dark-500); + background-color: $dark-500; color: white; } // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__light { - background-color: var(--pgn-color-light-400); + background-color: $light-400; color: black; } // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__accentA { - background-color: var(--pgn-color-accent-a); + background-color: $accent-a; color: black; } // stylelint-disable-next-line selector-class-pattern @@ -36,7 +36,7 @@ // stylelint-disable-next-line selector-class-pattern .pgn__pageBanner__warning { - background-color: var(--pgn-color-warning-100); + background-color: $warning-100; color: black; } diff --git a/src/Pagination/Pagination.scss b/src/Pagination/Pagination.scss index 46d5c8421c..1dce76af02 100644 --- a/src/Pagination/Pagination.scss +++ b/src/Pagination/Pagination.scss @@ -31,11 +31,11 @@ .page-link { &.previous .pgn__icon { margin-inline-start: 0; - margin-inline-end: var(--pgn-pagination-margin-x); + margin-inline-end: $pagination-margin-x; } &.next .pgn__icon { - margin-inline-start: var(--pgn-pagination-margin-x); + margin-inline-start: $pagination-margin-x; margin-inline-end: 0; } } @@ -43,13 +43,13 @@ .page-item { &:first-child .page-link { [dir="rtl"] & { - border-radius: 0 var(--pgn-pagination-border-radius-lg) var(--pgn-pagination-border-radius-lg) 0; + border-radius: 0 $pagination-border-radius-lg $pagination-border-radius-lg 0; } } &:last-child .page-link { [dir="rtl"] & { - border-radius: var(--pgn-pagination-border-radius-lg) 0 0 var(--pgn-pagination-border-radius-lg); + border-radius: $pagination-border-radius-lg 0 0 $pagination-border-radius-lg; } } } @@ -59,8 +59,8 @@ border: none; &.btn-primary:not(:disabled):not(.disabled):focus { - background-color: var(--pgn-pagination-bg-base); - color: var(--pgn-pagination-focus-color-text); + background-color: $pagination-bg; + color: $pagination-focus-color-text; } &:focus { @@ -68,14 +68,14 @@ } &.btn-primary:focus::before { - border: var(--pgn-pagination-focus-border-width) solid var(--pgn-pagination-focus-color-base); + border: $pagination-focus-border-width solid $pagination-focus-color; @include button-size( - var(--pgn-btn-padding-y-base), - var(--pgn-btn-padding-x-base), - var(--pgn-btn-font-size-base), - var(--pgn-btn-line-height-base), - var(--pgn-btn-border-radius-base)); + $btn-padding-y, + $btn-padding-x, + $btn-font-size, + $btn-line-height, + $btn-border-radius); } div { @@ -97,25 +97,25 @@ .page-item { > .btn { transition: none; - line-height: var(--pgn-pagination-line-height); + line-height: $pagination-line-height; } &.active .page-link.btn-primary:not(:disabled):not(.disabled):focus { - background-color: var(--pgn-pagination-focus-color-base); - color: var(--pgn-pagination-bg-base); + background-color: $pagination-focus-color; + color: $pagination-bg; } } .pagination-small { .page-link { - font-size: var(--pgn-pagination-font-size-sm); - line-height: var(--pgn-pagination-line-height); + font-size: $pagination-font-size-sm; + line-height: $pagination-line-height; padding: .375rem .78rem; &.previous, &.next { - padding: 0 var(--pgn-pagination-padding-y-base); - line-height: var(--pgn-pagination-secondary-height-sm); + padding: 0 $pagination-padding-y; + line-height: $pagination-secondary-height-sm; div { display: flex; @@ -129,7 +129,7 @@ &.previous, &.next { padding: 0; - width: var(--pgn-pagination-icon-width); + width: $pagination-icon-width; } } } @@ -138,15 +138,15 @@ .pagination-secondary { button.next, button.previous { - height: var(--pgn-pagination-secondary-height-base); - padding: 0 var(--pgn-pagination-padding-y-base); + height: $pagination-secondary-height; + padding: 0 $pagination-padding-y; } &.pagination-small { button.next, button.previous { - height: var(--pgn-pagination-secondary-height-sm); - line-height: var(--pgn-pagination-line-height); + height: $pagination-secondary-height-sm; + line-height: $pagination-line-height; } } @@ -162,7 +162,7 @@ .pagination-inverse { %dark-styles { background-color: transparent; - color: var(--pgn-color-white); + color: $white; } .pgn__dark-styles { @@ -175,8 +175,8 @@ } &.active button.page-link { - background-color: var(--pgn-pagination-bg-base); - color: var(--pgn-pagination-color-base); + background-color: $pagination-bg; + color: $pagination-color; } button.page-link { @@ -188,7 +188,7 @@ } &:not(.active):focus { - box-shadow: var(--pgn-box-shadow-level-1); + box-shadow: $level-1-box-shadow; } } @@ -201,10 +201,10 @@ .dropdown { .btn-tertiary { - color: var(--pgn-pagination-color-inverse); + color: $pagination-color-inverse; &::after { - border-top: var(--pgn-pagination-toggle-border-base) solid var(--pgn-pagination-color-inverse); + border-top: $pagination-toggle-border solid $pagination-color-inverse; } &:active, @@ -213,7 +213,7 @@ } &:not(:disabled):not(.disabled):active { - color: var(--pgn-pagination-color-inverse); + color: $pagination-color-inverse; } } } @@ -225,8 +225,8 @@ .pgn__reduced-pagination-dropdown { overflow-y: auto; - max-height: var(--pgn-reduced-dropdown-height-max); - min-width: var(--pgn-reduced-dropdown-width-min); + max-height: $pagination-reduced-dropdown-max-height; + min-width: $pagination-reduced-dropdown-min-width; a { text-align: center; @@ -237,9 +237,9 @@ .dropdown-toggle::after { width: 0; height: 0; - border-left: var(--pgn-pagination-toggle-border-base) solid transparent; - border-right: var(--pgn-pagination-toggle-border-base) solid transparent; - border-top: var(--pgn-pagination-toggle-border-base) solid var(--pgn-color-gray-700); + border-left: $pagination-toggle-border solid transparent; + border-right: $pagination-toggle-border solid transparent; + border-top: $pagination-toggle-border solid $gray-700; transform: rotate(0); inset-inline-start: .5rem; top: 0; @@ -248,25 +248,25 @@ button.next, button.previous { - height: var(--pgn-pagination-secondary-height-base); - padding: 0 var(--pgn-pagination-padding-y-base); + height: $pagination-secondary-height; + padding: 0 $pagination-padding-y; } &.pagination-small { .btn.dropdown-toggle { - font-size: var(--pgn-pagination-font-size-sm); + font-size: $pagination-font-size-sm; &::after { - border-left-width: var(--pgn-pagination-toggle-border-sm); - border-right-width: var(--pgn-pagination-toggle-border-sm); - border-top-width: var(--pgn-pagination-toggle-border-sm); + border-left-width: $pagination-toggle-border-sm; + border-right-width: $pagination-toggle-border-sm; + border-top-width: $pagination-toggle-border-sm; } } button.previous, button.next { - line-height: var(--pgn-pagination-icon-height); - height: var(--pgn-pagination-icon-height); + line-height: $pagination-icon-height; + height: $pagination-icon-height; } } @@ -286,15 +286,15 @@ button.next, button.previous { - padding: var(--pgn-pagination-padding-y-base); - height: var(--pgn-pagination-secondary-height-base); + padding: $pagination-padding-y; + height: $pagination-secondary-height; } &.pagination-small { button.next, button.previous { - padding: 0 var(--pgn-pagination-padding-y-base); - height: var(--pgn-pagination-secondary-height-sm); + padding: 0 $pagination-padding-y; + height: $pagination-secondary-height-sm; } } diff --git a/src/Pagination/_variables.scss b/src/Pagination/_variables.scss index 56a15aae39..1fc4c09c41 100644 --- a/src/Pagination/_variables.scss +++ b/src/Pagination/_variables.scss @@ -21,32 +21,32 @@ $pagination-toggle-border-sm: .25rem !default; $pagination-secondary-height: 2.75rem !default; $pagination-secondary-height-sm: 2.25rem !default; -$pagination-color: var(--pgn-link-color) !default; -$pagination-color-inverse: var(--pgn-color-white) !default; -$pagination-bg: var(--pgn-color-white) !default; -$pagination-border-width: var(--pgn-border-width) !default; +$pagination-color: $link-color !default; +$pagination-color-inverse: $white !default; +$pagination-bg: $white !default; +$pagination-border-width: $border-width !default; $pagination-border-color: theme-color("gray", "border") !default; -$pagination-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow) !default; +$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; $pagination-focus-outline: 0 !default; $pagination-focus-border-width: .125rem !default; -$pagination-focus-color: var(--pgn-color-primary-500) !default; -$pagination-focus-color-text: var(--pgn-color-black) !default; +$pagination-focus-color: $primary-500 !default; +$pagination-focus-color-text: $black !default; -$pagination-hover-color: var(--pgn-link-hover-color) !default; +$pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: theme-color("gray", "background") !default; $pagination-hover-border-color: theme-color("gray", "border") !default; -$pagination-active-color: var(--pgn-component-active-color) !default; -$pagination-active-bg: var(--pgn-component-active-bg) !default; -$pagination-active-border-color: var(--pgn-pagination-bg-active) !default; +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; $pagination-disabled-color: theme-color("gray", "light-text") !default; -$pagination-disabled-bg: var(--pgn-color-white) !default; +$pagination-disabled-bg: $white !default; $pagination-disabled-border-color: theme-color("gray", "disabled-border") !default; -$pagination-border-radius-sm: var(--pgn-border-radius-sm) !default; -$pagination-border-radius-lg: var(--pgn-border-radius-lg) !default; +$pagination-border-radius-sm: $border-radius-sm !default; +$pagination-border-radius-lg: $border-radius-lg !default; $pagination-reduced-dropdown-max-height: 60vh !default; $pagination-reduced-dropdown-min-width: 6rem !default; diff --git a/src/Popover/Popover.scss b/src/Popover/Popover.scss index ffa0330e33..61049a3bdf 100644 --- a/src/Popover/Popover.scss +++ b/src/Popover/Popover.scss @@ -2,53 +2,53 @@ @import "popover-bootstrap"; .popover { - filter: var(--pgn-popover-box-shadow); + filter: $popover-box-shadow; .popover-header { display: flex; align-items: center; - font-size: var(--pgn-font-size-h5); + font-size: $h5-font-size; } .pgn__icon { - margin-inline-end: var(--pgn-popover-icon-margin-right); - height: var(--pgn-popover-icon-height); - width: var(--pgn-popover-icon-width); + margin-inline-end: $popover-icon-margin-right; + height: $popover-icon-height; + width: $popover-icon-width; } } .popover-success { - background: var(--pgn-popover-success-bg); + background: $popover-success-bg; .popover-header { - background: var(--pgn-popover-success-bg); + background: $popover-success-bg; } .pgn__icon { - color: var(--pgn-popover-success-icon-color); + color: $popover-success-icon-color; } } .popover-warning { - background: var(--pgn-popover-warning-bg); + background: $popover-warning-bg; .popover-header { - background: var(--pgn-popover-warning-bg); + background: $popover-warning-bg; } .pgn__icon { - color: var(--pgn-popover-warning-icon-color); + color: $popover-warning-icon-color; } } .popover-danger { - background: var(--pgn-popover-danger-bg); + background: $popover-danger-bg; .popover-header { - background: var(--pgn-popover-danger-bg); + background: $popover-danger-bg; } .pgn__icon { - color: var(--pgn-popover-danger-icon-color); + color: $popover-danger-icon-color; } } diff --git a/src/Popover/_variables.scss b/src/Popover/_variables.scss index a8306370a1..e19c6e82aa 100644 --- a/src/Popover/_variables.scss +++ b/src/Popover/_variables.scss @@ -1,14 +1,14 @@ // Popovers -$popover-font-size: var(--pgn-font-size-sm) !default; -$popover-bg: var(--pgn-color-white) !default; +$popover-font-size: $font-size-sm !default; +$popover-bg: $white !default; $popover-max-width: 480px !default; -$popover-border-width: var(--pgn-border-width) !default; +$popover-border-width: $border-width !default; // TODO use css variable $popover-border-color: rgba(#000000, .2) !default; -$popover-border-radius: var(--pgn-border-radius-sm) !default; -$popover-inner-border-radius: subtract(var(--pgn-popover-border-radius), var(--pgn-popover-border-border)) !default; +$popover-border-radius: $border-radius-sm !default; +$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; $popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; $popover-icon-margin-right: .5rem; @@ -18,24 +18,24 @@ $popover-icon-width: 1rem; // TODO can't use css variable due to conflict with SCSS functions, should use #FFFFFF instead $popover-header-bg: #FFFFFF !default; -$popover-header-color: var(--pgn-headings-color) !default; +$popover-header-color: $headings-color !default; $popover-header-padding-y: .5rem !default; $popover-header-padding-x: 1rem !default; -$popover-body-color: var(--pgn-body-color) !default; -$popover-body-padding-y: var(--pgn-popover-header-padding-y) !default; -$popover-body-padding-x: var(--pgn-popover-header-padding-x) !default; +$popover-body-color: $body-color !default; +$popover-body-padding-y: $popover-header-padding-y !default; +$popover-body-padding-x: $popover-header-padding-x !default; $popover-arrow-width: 1rem !default; $popover-arrow-height: .5rem !default; -$popover-arrow-color: var(--pgn-popover-bg) !default; +$popover-arrow-color: $popover-bg !default; // TODO can't use css variable due to conflict with SCSS functions, should use var(--pgn-popover-border-color) instead of #000000 $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; -$popover-success-bg: var(--pgn-color-success-100) !default; -$popover-success-icon-color: var(--pgn-color-success-500) !default; -$popover-warning-bg: var(--pgn-color-warning-100) !default; -$popover-warning-icon-color: var(--pgn-color-warning-500) !default; -$popover-danger-bg: var(--pgn-color-danger-100) !default; -$popover-danger-icon-color: var(--pgn-color-danger-500) !default; +$popover-success-bg: $success-100 !default; +$popover-success-icon-color: $success-500 !default; +$popover-warning-bg: $warning-100 !default; +$popover-warning-icon-color: $warning-500 !default; +$popover-danger-bg: $danger-100 !default; +$popover-danger-icon-color: $danger-500 !default; diff --git a/src/Popover/popover-bootstrap.scss b/src/Popover/popover-bootstrap.scss index 5614506269..47517dba8f 100644 --- a/src/Popover/popover-bootstrap.scss +++ b/src/Popover/popover-bootstrap.scss @@ -2,27 +2,27 @@ position: absolute; top: 0; left: 0; - z-index: var(--pgn-popover-zindex); + z-index: $zindex-popover; display: block; - max-width: var(--pgn-popover-max-width); + max-width: $popover-max-width; @include reset-text(); - @include font-size(var(--pgn-popover-font-size)); + @include font-size($popover-font-size); word-wrap: break-word; - background-color: var(--pgn-popover-bg); + background-color: $popover-bg; background-clip: padding-box; - border: var(--pgn-popover-border-border) solid $popover-border-color; + border: $popover-border-width solid $popover-border-color; - @include border-radius(var(--pgn-popover-border-radius)); - @include box-shadow(var(--pgn-popover-box-shadow)); + @include border-radius($popover-border-radius); + @include box-shadow($popover-box-shadow); .arrow { position: absolute; display: block; - width: var(--pgn-popover-arrow-width); - height: var(--pgn-popover-arrow-height); - margin: 0 var(--pgn-popover-border-radius); + width: $popover-arrow-width; + height: $popover-arrow-height; + margin: 0 $popover-border-radius; &::before, &::after { @@ -36,64 +36,64 @@ } .bs-popover-top { - margin-bottom: var(--pgn-popover-arrow-height); + margin-bottom: $popover-arrow-height; > .arrow { - bottom: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); + bottom: subtract(calc($popover-arrow-height * -1), $popover-border-width); &::before { bottom: 0; - border-width: var(--pgn-popover-arrow-height) calc(#{var(--pgn-popover-arrow-width)} * .5) 0; + border-width: $popover-arrow-height calc(#{$popover-arrow-width} * .5) 0; border-top-color: $popover-arrow-outer-color; } &::after { - bottom: var(--pgn-popover-border-border); - border-width: var(--pgn-popover-arrow-height) calc(#{var(--pgn-popover-arrow-width)} * .5) 0; - border-top-color: var(--pgn-popover-arrow-color); + bottom: $popover-border-width; + border-width: $popover-arrow-height calc(#{$popover-arrow-width} * .5) 0; + border-top-color: $popover-arrow-color; } } } .bs-popover-right { - margin-left: var(--pgn-popover-arrow-height); + margin-left: $popover-arrow-height; > .arrow { - left: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); - width: var(--pgn-popover-arrow-height); - height: var(--pgn-popover-arrow-width); - margin: var(--pgn-popover-border-radius) 0; + left: subtract(calc($popover-arrow-height * -1), $popover-border-width); + width: $popover-arrow-height; + height: $popover-arrow-width; + margin: $popover-border-radius 0; &::before { left: 0; - border-width: calc(#{var(--pgn-popover-arrow-width)} * .5) var(--pgn-popover-arrow-height) calc(#{var(--pgn-popover-arrow-width)} * .5) 0; + border-width: calc(#{$popover-arrow-width} * .5) $popover-arrow-height calc(#{$popover-arrow-width} * .5) 0; border-right-color: $popover-arrow-outer-color; } &::after { - left: var(--pgn-popover-border-border); - border-width: calc(#{var(--pgn-popover-arrow-width)} * .5) var(--pgn-popover-arrow-height) calc(#{var(--pgn-popover-arrow-width)} * .5) 0; - border-right-color: var(--pgn-popover-arrow-color); + left: $popover-border-width; + border-width: calc(#{$popover-arrow-width} * .5) $popover-arrow-height calc(#{$popover-arrow-width} * .5) 0; + border-right-color: $popover-arrow-color; } } } .bs-popover-bottom { - margin-top: var(--pgn-popover-arrow-height); + margin-top: $popover-arrow-height; > .arrow { - top: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); + top: subtract(calc($popover-arrow-height * -1), $popover-border-width); &::before { top: 0; - border-width: 0 calc(#{var(--pgn-popover-arrow-width)} * .5) var(--pgn-popover-arrow-height) calc(#{var(--pgn-popover-arrow-width)} * .5); + border-width: 0 calc(#{$popover-arrow-width} * .5) $popover-arrow-height calc(#{$popover-arrow-width} * .5); border-bottom-color: $popover-arrow-outer-color; } &::after { - top: var(--pgn-popover-border-border); - border-width: 0 calc(#{var(--pgn-popover-arrow-width)} * .5) var(--pgn-popover-arrow-height) calc(#{var(--pgn-popover-arrow-width)} * .5); - border-bottom-color: var(--pgn-popover-arrow-color); + top: $popover-border-width; + border-width: 0 calc(#{$popover-arrow-width} * .5) $popover-arrow-height calc(#{$popover-arrow-width} * .5); + border-bottom-color: $popover-arrow-color; } } @@ -103,32 +103,32 @@ top: 0; left: 50%; display: block; - width: var(--pgn-popover-arrow-width); - margin-left: calc(var(--pgn-popover-arrow-width) * -.5); + width: $popover-arrow-width; + margin-left: calc($popover-arrow-width * -.5); content: ""; - border-bottom: var(--pgn-popover-border-border) solid $popover-header-bg; + border-bottom: $popover-border-width solid $popover-header-bg; } } .bs-popover-left { - margin-right: var(--pgn-popover-arrow-height); + margin-right: $popover-arrow-height; > .arrow { - right: subtract(calc(var(--pgn-popover-arrow-height) * -1), var(--pgn-popover-border-border)); - width: var(--pgn-popover-arrow-height); - height: var(--pgn-popover-arrow-width); - margin: var(--pgn-popover-border-radius) 0; + right: subtract(calc($popover-arrow-height * -1), $popover-border-width); + width: $popover-arrow-height; + height: $popover-arrow-width; + margin: $popover-border-radius 0; &::before { right: 0; - border-width: calc(#{var(--pgn-popover-arrow-width)} * .5) 0 calc(#{var(--pgn-popover-arrow-width)} * .5) var(--pgn-popover-arrow-height); + border-width: calc(#{$popover-arrow-width} * .5) 0 calc(#{$popover-arrow-width} * .5) $popover-arrow-height; border-left-color: $popover-arrow-outer-color; } &::after { - right: var(--pgn-popover-border-border); - border-width: calc(#{var(--pgn-popover-arrow-width)} * .5) 0 calc(#{var(--pgn-popover-arrow-width)} * .5) var(--pgn-popover-arrow-height); - border-left-color: var(--pgn-popover-arrow-color); + right: $popover-border-width; + border-width: calc(#{$popover-arrow-width} * .5) 0 calc(#{$popover-arrow-width} * .5) $popover-arrow-height; + border-left-color: $popover-arrow-color; } } } @@ -158,14 +158,14 @@ // Offset the popover to account for the popover arrow .popover-header { - padding: var(--pgn-popover-header-padding-y) var(--pgn-popover-header-padding-x); + padding: $popover-header-padding-y $popover-header-padding-x; margin-bottom: 0; - @include font-size(var(--pgn-font-size-base)); + @include font-size($font-size-base); - color: var(--pgn-popover-header-color); + color: $popover-header-color; background-color: $popover-header-bg; - border-bottom: var(--pgn-popover-border-border) solid darken($popover-header-bg, 5%); + border-bottom: $popover-border-width solid darken($popover-header-bg, 5%); @include border-top-radius($popover-inner-border-radius); @@ -175,6 +175,6 @@ } .popover-body { - padding: var(--pgn-popover-body-padding-y) var(--pgn-popover-body-padding-x); - color: var(--pgn-popover-body-color); + padding: $popover-body-padding-y $popover-body-padding-x; + color: $popover-body-color; } diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss index 38784ec8cc..3965df46dc 100644 --- a/src/ProductTour/Checkpoint.scss +++ b/src/ProductTour/Checkpoint.scss @@ -1,20 +1,14 @@ @import "variables"; -$checkpoint-arrow-top-color: solid var(--pgn-product-tour-checkpoint-width-arrow) - var(--pgn-product-tour-checkpoint-color-border); -$checkpoint-arrow-default-color: solid var(--pgn-product-tour-checkpoint-width-arrow) - var(--pgn-product-tour-checkpoint-color-background); -$checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arrow) transparent; - .pgn__checkpoint { position: absolute; - background: var(--pgn-product-tour-checkpoint-color-background); - border-top: var(--pgn-product-tour-checkpoint-width-border) solid var(--pgn-product-tour-checkpoint-color-border); - border-radius: var(--pgn-border-radius-base); + background: $checkpoint-background-color; + border-top: $checkpoint-border-width solid $checkpoint-border-color; + border-radius: $border-radius; padding: map_get($spacers, 4); box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3); - z-index: var(--pgn-product-tour-checkpoint-zindex); - max-width: var(--pgn-product-tour-checkpoint-width-max); + z-index: $checkpoint-z-index; + max-width: $checkpoint-max-width; @media (max-width: map-get($grid-breakpoints, "md")) { min-width: 90%; @@ -54,11 +48,11 @@ $checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arr border-radius: 50%; &.pgn__checkpoint-breadcrumb_active { - background: var(--pgn-product-tour-checkpoint-color-breadcrumb); + background: $checkpoint-breadcrumb-color; } &.pgn__checkpoint-breadcrumb_inactive { - border: 1px solid var(--pgn-product-tour-checkpoint-color-breadcrumb); + border: 1px solid $checkpoint-breadcrumb-color; background: transparent; } @@ -82,7 +76,7 @@ $checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arr } .pgn__checkpoint-body { - color: var(--pgn-product-tour-checkpoint-color-body); + color: $checkpoint-body-color; margin-bottom: map_get($spacers, 3\.5); text-align: start; } @@ -94,25 +88,25 @@ $checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arr } #pgn__checkpoint-title { - font-size: var(--pgn-font-size-h3); + font-size: $h3-font-size; margin-inline-end: map_get($spacers, 2\.5); margin-bottom: 0; } } .pgn__checkpoint[data-popper-placement^="top"] > #pgn__checkpoint-arrow { - left: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement + left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement bottom: 1px; [dir="rtl"] & { - left: var(--pgn-product-tour-checkpoint-width-arrow) !important; + left: $checkpoint-arrow-width !important; } &::after { - border-bottom: var(--pgn-product-tour-checkpoint-arrow-transparent); - border-top: var(--pgn-product-tour-checkpoint-arrow-color-default); - border-left: var(--pgn-product-tour-checkpoint-arrow-transparent); - border-right: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-bottom: $checkpoint-arrow-transparent; + border-top: $checkpoint-arrow-default-color; + border-left: $checkpoint-arrow-transparent; + border-right: $checkpoint-arrow-transparent; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1)); -webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1)); } @@ -120,39 +114,39 @@ $checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arr .pgn__checkpoint[data-popper-placement^="bottom"] > #pgn__checkpoint-arrow { top: -36px; - left: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement + left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement &::after { - border-bottom: var(--pgn-product-tour-checkpoint-arrow-color-top); - border-top: var(--pgn-product-tour-checkpoint-arrow-transparent); - border-left: var(--pgn-product-tour-checkpoint-arrow-transparent); - border-right: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-bottom: $checkpoint-arrow-top-color; + border-top: $checkpoint-arrow-transparent; + border-left: $checkpoint-arrow-transparent; + border-right: $checkpoint-arrow-transparent; } } .pgn__checkpoint[data-popper-placement^="left"] > #pgn__checkpoint-arrow { - top: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement + top: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement right: 1px; &::after { - border-bottom: var(--pgn-product-tour-checkpoint-arrow-transparent); - border-top: var(--pgn-product-tour-checkpoint-arrow-transparent); - border-left: var(--pgn-product-tour-checkpoint-arrow-color-default); - border-right: var(--pgn-product-tour-checkpoint-arrow-transparent); + border-bottom: $checkpoint-arrow-transparent; + border-top: $checkpoint-arrow-transparent; + border-left: $checkpoint-arrow-default-color; + border-right: $checkpoint-arrow-transparent; filter: drop-shadow(3px 1px 2px rgba(0, 0, 0, .1)); } } .pgn__checkpoint[data-popper-placement^="right"] > #pgn__checkpoint-arrow { - top: calc(var(--pgn-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement + top: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement left: 1px; &::after { - left: calc(-2 * var(--pgn-product-tour-checkpoint-width-arrow)); - border-bottom: var(--pgn-product-tour-checkpoint-arrow-transparent); - border-top: var(--pgn-product-tour-checkpoint-arrow-transparent); - border-left: var(--pgn-product-tour-checkpoint-arrow-transparent); - border-right: var(--pgn-product-tour-checkpoint-arrow-color-default); + left: calc(-2 * $checkpoint-arrow-width); + border-bottom: $checkpoint-arrow-transparent; + border-top: $checkpoint-arrow-transparent; + border-left: $checkpoint-arrow-transparent; + border-right: $checkpoint-arrow-default-color; filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, .1)); } } diff --git a/src/ProductTour/_variables.scss b/src/ProductTour/_variables.scss index 543e3dfdd3..a8d2077cc0 100644 --- a/src/ProductTour/_variables.scss +++ b/src/ProductTour/_variables.scss @@ -1,15 +1,19 @@ // Checkpoints -$checkpoint-background-color: var(--pgn-color-light-300) !default; +$checkpoint-background-color: $light-300 !default; -$checkpoint-body-color: var(--pgn-color-gray-700); +$checkpoint-body-color: $gray-700; -$checkpoint-border-color: var(--pgn-color-brand-base) !default; +$checkpoint-border-color: $brand !default; $checkpoint-border-width: 8px !default; -$checkpoint-breadcrumb-color: var(--pgn-color-primary-base) !default; +$checkpoint-breadcrumb-color: $primary !default; $checkpoint-arrow-width: 15px !default; $checkpoint-max-width: 480px !default; $checkpoint-z-index: 1060 !default; + +$checkpoint-arrow-top-color: solid $checkpoint-arrow-width $checkpoint-border-color; +$checkpoint-arrow-default-color: solid $checkpoint-arrow-width $checkpoint-background-color; +$checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent; diff --git a/src/ProgressBar/ProgressBar.scss b/src/ProgressBar/ProgressBar.scss index 4ab59b44a1..8c09f6110a 100644 --- a/src/ProgressBar/ProgressBar.scss +++ b/src/ProgressBar/ProgressBar.scss @@ -2,11 +2,11 @@ @import "~bootstrap/scss/progress"; .progress { - border: var(--pgn-progress-bar-border-width) solid var(--pgn-progress-bar-border-color); + border: $progress-bar-border-width solid $progress-bar-border-color; } .progress-bar { - background-color: var(--pgn-progress-bar-bar-bg-base); + background-color: $progress-bar-bg; } .pgn__progress-annotated { @@ -16,12 +16,12 @@ .progress { overflow: visible; - background-color: var(--pgn-color-light-300); - height: var(--pgn-progress-bar-height-annotated); + background-color: $light-300; + height: $annotated-progress-height; border: none; .progress-bar { - background-color: var(--pgn-progress-bar-bar-bg-annotated); + background-color: $annotated-progress-bar-bg; overflow: visible; position: relative; } @@ -30,17 +30,17 @@ .pgn__progress-tick--black::after { content: ""; position: absolute; - height: var(--pgn-progress-bar-height-annotated); + height: $annotated-progress-height; width: 1px; right: 0; } .pgn__progress-tick--white::after { - background: var(--pgn-color-light-300); + background: $light-300; } .pgn__progress-tick--black::after { - background: var(--pgn-color-primary-500); + background: $primary-500; } @each $name, $color in $progress-colors { @@ -53,11 +53,11 @@ background: $color; position: absolute; /* stylelint-disable max-line-length */ - top: calc(var(--pgn-progress-bar-threshold-circle) / 2 - var(--pgn-progress-bar-height-annotated) / 2); - right: calc(var(--pgn-progress-bar-threshold-circle) / -2); - width: var(--pgn-progress-bar-threshold-circle); - height: var(--pgn-progress-bar-threshold-circle); - border-radius: calc(var(--pgn-progress-bar-threshold-circle) / 2); + top: calc($progress-threshold-circle / 2 - $annotated-progress-height / 2); + right: calc($progress-threshold-circle / -2); + width: $progress-threshold-circle; + height: $progress-threshold-circle; + border-radius: calc($progress-threshold-circle / 2); z-index: 1; } } @@ -68,9 +68,9 @@ .progress::after { position: absolute; content: ""; - height: var(--pgn-progress-bar-height-annotated); + height: $annotated-progress-height; width: 1px; - background: var(--pgn-color-primary-500); + background: $primary-500; } .progress::after { @@ -84,7 +84,7 @@ .pgn__progress-hint { box-sizing: border-box; - padding: 0 var(--pgn-progress-bar-hint-annotation-gap); - font-size: var(--pgn-font-size-small-base); + padding: 0 $progress-hint-annotation-gap; + font-size: $small-font-size; } } diff --git a/src/ProgressBar/_variables.scss b/src/ProgressBar/_variables.scss index 86348f7531..de1c784f1b 100644 --- a/src/ProgressBar/_variables.scss +++ b/src/ProgressBar/_variables.scss @@ -2,22 +2,22 @@ $progress-height: 1rem !default; $annotated-progress-height: .3125rem !default; -$progress-font-size: calc(var(--pgn-font-size-base) * .75) !default; +$progress-font-size: calc($font-size-base * .75) !default; $progress-bg: transparent !default; $progress-border-radius: 0 !default; $progress-box-shadow: none !default; -$progress-bar-color: var(--pgn-color-white) !default; +$progress-bar-color: $white !default; $progress-bar-bg: theme-color("accent-a") !default; $annotated-progress-bar-bg: theme-color("dark") !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; $progress-bar-border-width: 1px !default; -$progress-bar-border-color: var(--pgn-color-gray-500) !default; +$progress-bar-border-color: $gray-500 !default; $progress-threshold-circle: .5625rem !default; $progress-hint-annotation-gap: .5rem !default; $progress-colors: ( - "dark": var(--pgn-color-primary-500), - "success": var(--pgn-color-success-500), - "error": var(--pgn-color-danger-500), - "warning": var(--pgn-color-accent-b), + "dark": $primary-500, + "success": $success-500, + "error": $danger-500, + "warning": $accent-b, ) !default; diff --git a/src/SearchField/SearchField.scss b/src/SearchField/SearchField.scss index 2e48dcbeaa..e07d39aa64 100644 --- a/src/SearchField/SearchField.scss +++ b/src/SearchField/SearchField.scss @@ -1,17 +1,17 @@ @import "variables"; .pgn__searchfield { - transition: var(--pgn-form-input-transition); - border: var(--pgn-search-field-border-width-base) solid var(--pgn-search-field-border-color-base); + transition: $input-transition; + border: $search-border-width solid $search-border-color; .btn:focus-visible { outline: none; position: relative; - transition: var(--pgn-form-input-transition); + transition: $input-transition; &::after { content: ""; - border: var(--pgn-search-field-border-width-focus) double var(--pgn-search-field-border-color-focus); + border: $search-border-focus-width double $search-border-focus-color; position: absolute; width: 100%; height: 100%; @@ -20,7 +20,7 @@ &.disabled, &:disabled { - opacity: var(--pgn-search-field-disabled-opacity); + opacity: $search-disabled-opacity; pointer-events: none; } @@ -29,26 +29,26 @@ &::after { content: ""; - border: var(--pgn-search-field-border-width-focus) double var(--pgn-search-field-border-color-focus); + border: $search-border-focus-width double $search-border-focus-color; position: absolute; width: 100%; height: 100%; } .pgn__searchfield_wrapper { - box-shadow: 0 0 0 var(--pgn-search-field-border-width-base) var(--pgn-search-field-border-color-interaction); + box-shadow: 0 0 0 $search-border-width $search-border-color-interaction; } } &:hover, &:active { - border-color: var(--pgn-search-field-border-color-interaction); + border-color: $search-border-color-interaction; } .form-control { border: none; - border-radius: var(--pgn-search-field-border-radius); - height: var(--pgn-search-field-input-height-search); + border-radius: $search-border-radius; + height: $input-height-search; &:focus { box-shadow: none; @@ -100,7 +100,7 @@ &::after { content: ""; - border: var(--pgn-search-field-border-width-focus) double var(--pgn-search-field-border-color-focus); + border: $search-border-focus-width double $search-border-focus-color; position: absolute; width: 100%; height: 100%; @@ -121,16 +121,16 @@ display: flex; align-items: center; width: 100%; - border: var(--pgn-search-field-border-width-base) solid var(--pgn-search-field-border-color-base); + border: $search-border-width solid $search-border-color; &:hover, &:active { - border-color: var(--pgn-search-field-border-color-interaction); + border-color: $search-border-color-interaction; } } } .pgn__searchfield__button.btn[type="submit"] { border-radius: 0; - margin-inline-start: var(--pgn-search-field-button-margin); + margin-inline-start: $search-button-margin; } diff --git a/src/SearchField/_variables.scss b/src/SearchField/_variables.scss index 7d45aab3c3..d436c78823 100644 --- a/src/SearchField/_variables.scss +++ b/src/SearchField/_variables.scss @@ -1,15 +1,15 @@ $search-btn-variants: ( - "light": var(--pgn-color-primary-500), - "dark": var(--pgn-color-brand-500), + "light": $primary-500, + "dark": $brand-500, ); $search-border-radius: 0 !default; $search-line-height: 1.5rem !default; -$search-border-color: var(--pgn-color-gray-500) !default; -$search-border-color-interaction: var(--pgn-color-black) !default; +$search-border-color: $gray-500 !default; +$search-border-color-interaction: $black !default; $search-border-width: .0625rem !default; $search-border-width-interaction: .125rem !default; $search-disabled-opacity: .3 !default; $search-button-margin: .5rem !default; -$input-height-search: calc((var(--pgn-form-input-line-height-base) * 1em) + (var(--pgn-form-input-padding-y-base) * 2)) !default; -$search-border-focus-color: var(--pgn-color-black) !default; +$input-height-search: calc(($input-line-height * 1em) + ($input-padding-y * 2)) !default; +$search-border-focus-color: $black !default; $search-border-focus-width: .3125rem !default; diff --git a/src/SelectableBox/SelectableBox.scss b/src/SelectableBox/SelectableBox.scss index aef50cafce..2b3cac4ac3 100644 --- a/src/SelectableBox/SelectableBox.scss +++ b/src/SelectableBox/SelectableBox.scss @@ -3,7 +3,7 @@ .pgn__selectable_box-set { display: grid; grid-auto-rows: 1fr; - grid-gap: var(--pgn-selectable-box-box-space); + grid-gap: $selectable-box-space; @for $i from $min-cols-number through $max-cols-number { &.pgn__selectable_box-set--#{$i} { @@ -19,20 +19,20 @@ .pgn__selectable_box { position: relative; height: 100%; - padding: var(--pgn-selectable-box-padding); - box-shadow: var(--pgn-box-shadow-level-1); - border-radius: var(--pgn-selectable-box-border-radius); + padding: $selectable-box-padding; + box-shadow: $level-1-box-shadow; + border-radius: $selectable-box-border-radius; text-align: start; &:focus-visible { - outline: 1px solid var(--pgn-color-primary-700); + outline: 1px solid $primary-700; } .pgn__form-radio, .pgn__form-checkbox { position: absolute; - top: var(--pgn-selectable-box-padding); - inset-inline-end: var(--pgn-selectable-box-padding); + top: $selectable-box-padding; + inset-inline-end: $selectable-box-padding; input { margin-inline-end: 0; @@ -45,9 +45,9 @@ } .pgn__selectable_box-active { - outline: 2px solid var(--pgn-color-primary-500); + outline: 2px solid $primary-500; } .pgn__selectable_box-invalid { - outline: 2px solid var(--pgn-color-danger-300); + outline: 2px solid $danger-300; } diff --git a/src/Sheet/Sheet.scss b/src/Sheet/Sheet.scss index d21854487c..e5f5754440 100644 --- a/src/Sheet/Sheet.scss +++ b/src/Sheet/Sheet.scss @@ -10,7 +10,7 @@ display: none; } - z-index: var(--pgn-sheet-zindex-backdrop); + z-index: $zindex-sheet-backdrop; } %component-left { @@ -35,11 +35,11 @@ position: fixed; padding: 1.25rem; background-color: white; - z-index: var(--pgn-sheet-zindex-main); + z-index: $zindex-sheet; &.pgn__sheet__dark { - background-color: var(--pgn-color-dark-500); - color: var(--pgn-color-light-300); + background-color: $dark-500; + color: $light-300; } &.bottom { diff --git a/src/Spinner/_variables.scss b/src/Spinner/_variables.scss index 59de8cdea0..ce9d97c7da 100644 --- a/src/Spinner/_variables.scss +++ b/src/Spinner/_variables.scss @@ -1,9 +1,9 @@ // Spinners $spinner-width: 2rem !default; -$spinner-height: var(--pgn-spinner-width) !default; +$spinner-height: $spinner-width !default; $spinner-border-width: .25em !default; $spinner-width-sm: 1rem !default; -$spinner-height-sm: var(--pgn-spinner-sm-width) !default; +$spinner-height-sm: $spinner-width-sm !default; $spinner-border-width-sm: .2em !default; diff --git a/src/Stack/Stack.scss b/src/Stack/Stack.scss index fd38c3a0a0..52ed5b134d 100644 --- a/src/Stack/Stack.scss +++ b/src/Stack/Stack.scss @@ -4,7 +4,7 @@ .pgn__hstack { display: flex; align-self: stretch; - gap: var(--pgn-stack-gap); + gap: $stack-gap; @each $level, $space in $spacers { &.pgn__stack-gap--#{$level} { diff --git a/src/Stepper/Stepper.scss b/src/Stepper/Stepper.scss index a5d754add7..720684b4df 100644 --- a/src/Stepper/Stepper.scss +++ b/src/Stepper/Stepper.scss @@ -12,7 +12,7 @@ display: flex; justify-content: center; align-items: center; - background: var(--pgn-color-white); + background: $white; padding: .75rem 1rem; min-height: 5.13rem; } @@ -20,7 +20,7 @@ .pgn__stepper-header-step { display: flex; align-items: center; - color: var(--pgn-color-primary-base); + color: $primary; flex-shrink: 1; min-width: 0; @@ -41,25 +41,25 @@ } .pgn__stepper-header-step-description { - font-size: var(--pgn-font-size-small-x); + font-size: $x-small-font-size; } &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step { - color: var(--pgn-color-gray-500); + color: $gray-500; } &.pgn__stepper-header-step-has-error { .pgn__bubble { background: transparent; - box-shadow: inset 0 0 0 3px var(--pgn-color-danger-base); + box-shadow: inset 0 0 0 3px $danger; * { - color: var(--pgn-color-danger-base); + color: $danger; } } .pgn__stepper-header-step-description { - color: var(--pgn-color-danger-base); + color: $danger; } } } @@ -67,7 +67,7 @@ .pgn__stepper-header-line { display: block; height: 1px; - background: var(--pgn-color-light-base); + background: $light; flex-basis: 80px; margin: 0 .5rem; } diff --git a/src/Sticky/Sticky.scss b/src/Sticky/Sticky.scss index b7a6fb9f83..c4029a9323 100644 --- a/src/Sticky/Sticky.scss +++ b/src/Sticky/Sticky.scss @@ -7,7 +7,7 @@ &.pgn__sticky-top { align-self: self-start; - top: var(--pgn-sticky-offset); + top: $sticky-offset; @each $level, $offset in $spacers { &.pgn__sticky-offset--#{$level} { @@ -16,13 +16,13 @@ } &.pgn__sticky-shadow { - box-shadow: var(--pgn-sticky-shadow-bottom); + box-shadow: $sticky-shadow-bottom; } } &.pgn__sticky-bottom { align-self: self-end; - bottom: var(--pgn-sticky-offset); + bottom: $sticky-offset; @each $level, $offset in $spacers { &.pgn__sticky-offset--#{$level} { @@ -31,7 +31,7 @@ } &.pgn__sticky-shadow { - box-shadow: var(--pgn-sticky-shadow-top); + box-shadow: $sticky-shadow-top; } } } diff --git a/src/Tabs/Tabs.scss b/src/Tabs/Tabs.scss index 4ea9c1a25c..48214e7d0b 100644 --- a/src/Tabs/Tabs.scss +++ b/src/Tabs/Tabs.scss @@ -11,9 +11,9 @@ position: absolute; top: 0; right: 0; - min-height: var(--pgn-tabs-notification-height); - min-width: var(--pgn-tabs-notification-width); - font-size: var(--pgn-tabs-notification-font-size); + min-height: $tab-notification-height; + min-width: $tab-notification-width; + font-size: $tab-notification-font-size; } } diff --git a/src/Tabs/_variables.scss b/src/Tabs/_variables.scss index 9d58323477..1aa61d194a 100644 --- a/src/Tabs/_variables.scss +++ b/src/Tabs/_variables.scss @@ -1,3 +1,3 @@ $tab-notification-height: 1rem !default; $tab-notification-width: 1rem !default; -$tab-notification-font-size: var(--pgn-font-size-xs) !default; +$tab-notification-font-size: $font-size-xs !default; diff --git a/src/Toast/Toast.scss b/src/Toast/Toast.scss index 8336935d75..58658f0e9c 100644 --- a/src/Toast/Toast.scss +++ b/src/Toast/Toast.scss @@ -2,12 +2,12 @@ @import "~bootstrap/scss/toasts"; .toast { - background-color: var(--pgn-toast-color-background); - box-shadow: var(--pgn-toast-box-shadow); + background-color: $toast-background-color; + box-shadow: $toast-box-shadow; margin: 0; padding: 1rem; position: relative; - border-radius: var(--pgn-toast-border-radius); + border-radius: $toast-border-radius; z-index: 2; &.show { @@ -32,7 +32,7 @@ padding: 0; p { - font-size: var(--pgn-font-size-small-base); + font-size: $small-font-size; margin: 0; padding-right: .75rem; } @@ -47,7 +47,7 @@ } @media only screen and (min-width: 768px) { - min-width: var(--pgn-toast-max-width); - max-width: var(--pgn-toast-max-width); + min-width: $toast-max-width; + max-width: $toast-max-width; } } diff --git a/src/Toast/ToastContainer.scss b/src/Toast/ToastContainer.scss index 4d652d1b1f..b29ba0e5dc 100644 --- a/src/Toast/ToastContainer.scss +++ b/src/Toast/ToastContainer.scss @@ -1,24 +1,24 @@ @import "variables"; .toast-container { - bottom: var(--pgn-toast-container-gutter-lg); - left: var(--pgn-toast-container-gutter-lg); + bottom: $toast-container-gutter-lg; + left: $toast-container-gutter-lg; position: fixed; z-index: 2; [dir="rtl"] & { - right: var(--pgn-toast-container-gutter-lg); + right: $toast-container-gutter-lg; left: 0; } @media only screen and (max-width: 768px) { - bottom: var(--pgn-toast-container-gutter-sm); - right: var(--pgn-toast-container-gutter-sm); - left: var(--pgn-toast-container-gutter-sm); + bottom: $toast-container-gutter-sm; + right: $toast-container-gutter-sm; + left: $toast-container-gutter-sm; [dir="rtl"] & { - left: var(--pgn-toast-container-gutter-sm); - right: var(--pgn-toast-container-gutter-sm); + left: $toast-container-gutter-sm; + right: $toast-container-gutter-sm; } } } diff --git a/src/Toast/_variables.scss b/src/Toast/_variables.scss index c167f328f5..35c2ec635f 100644 --- a/src/Toast/_variables.scss +++ b/src/Toast/_variables.scss @@ -5,15 +5,15 @@ $toast-padding-x: .75rem !default; $toast-padding-y: .25rem !default; $toast-font-size: .875rem !default; $toast-color: null !default; -$toast-background-color: var(--pgn-color-gray-700) !default; +$toast-background-color: $gray-700 !default; $toast-border-width: 1px !default; $toast-border-color: rgba(0, 0, 0, .1) !default; $toast-border-radius: .25rem !default; -$toast-box-shadow: 0 1.25rem 2.5rem rgba(var(--pgn-color-black), .15), - 0 .5rem 3rem rgba(var(--pgn-color-black), .15) !default; +$toast-box-shadow: 0 1.25rem 2.5rem rgba($black, .15), + 0 .5rem 3rem rgba($black, .15) !default; -$toast-header-color: var(--pgn-color-white) !default; -$toast-header-background-color: var(--pgn-color-gray-700) !default; +$toast-header-color: $white !default; +$toast-header-background-color: $gray-700 !default; $toast-header-border-color: rgba(0, 0, 0, .5) !default; $toast-container-gutter-lg: 1.25rem !default; diff --git a/src/Tooltip/Tooltip.scss b/src/Tooltip/Tooltip.scss index bc73eebf8b..20ce7a4350 100644 --- a/src/Tooltip/Tooltip.scss +++ b/src/Tooltip/Tooltip.scss @@ -2,36 +2,36 @@ @import "~bootstrap/scss/tooltip"; .tooltip { - filter: var(--pgn-tooltip-box-shadow); + filter: $tooltip-box-shadow; } .tooltip-light { .tooltip-inner { - color: var(--pgn-tooltip-color-light); - background-color: var(--pgn-tooltip-bg-light); + color: $tooltip-color-light; + background-color: $tooltip-bg-light; } &.bs-tooltip-top .arrow { &::before { - border-top-color: var(--pgn-tooltip-arrow-color-light); + border-top-color: $tooltip-arrow-color-light; } } &.bs-tooltip-right .arrow { &::before { - border-right-color: var(--pgn-tooltip-arrow-color-light); + border-right-color: $tooltip-arrow-color-light; } } &.bs-tooltip-bottom .arrow { &::before { - border-bottom-color: var(--pgn-tooltip-arrow-color-light); + border-bottom-color: $tooltip-arrow-color-light; } } &.bs-tooltip-left .arrow { &::before { - border-left-color: var(--pgn-tooltip-arrow-color-light); + border-left-color: $tooltip-arrow-color-light; } } } diff --git a/src/Tooltip/_variables.scss b/src/Tooltip/_variables.scss index 04a9c091cf..cd74cfe212 100644 --- a/src/Tooltip/_variables.scss +++ b/src/Tooltip/_variables.scss @@ -1,10 +1,10 @@ // Tooltips -$tooltip-font-size: var(--pgn-font-size-sm) !default; +$tooltip-font-size: $font-size-sm !default; $tooltip-max-width: 200px !default; -$tooltip-color: var(--pgn-color-white) !default; -$tooltip-bg: var(--pgn-color-black) !default; -$tooltip-border-radius: var(--pgn-border-radius-base) !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; +$tooltip-border-radius: $border-radius !default; $tooltip-opacity: 1 !default; $tooltip-padding-y: .5rem !default; $tooltip-padding-x: .5rem !default; @@ -14,8 +14,8 @@ $tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) $tooltip-arrow-width: .8rem !default; $tooltip-arrow-height: .4rem !default; -$tooltip-arrow-color: var(--pgn-tooltip-bg-base) !default; +$tooltip-arrow-color: $tooltip-bg !default; -$tooltip-color-light: var(--pgn-color-black) !default; -$tooltip-bg-light: var(--pgn-color-white) !default; -$tooltip-arrow-color-light: var(--pgn-color-white) !default; +$tooltip-color-light: $black !default; +$tooltip-bg-light: $white !default; +$tooltip-arrow-color-light: $white !default; diff --git a/src/ValidationMessage/ValidationMessage.scss b/src/ValidationMessage/ValidationMessage.scss index 5c71067148..2ca69ff4dc 100644 --- a/src/ValidationMessage/ValidationMessage.scss +++ b/src/ValidationMessage/ValidationMessage.scss @@ -1,5 +1,5 @@ .form-control.is-invalid ~ .invalid-feedback-nodanger { - color: var(--pgn-body-color); + color: $body-color; } .fa-icon-spacing { From 6ad31addb6f079f422a6329d85ec6ff72236dfc3 Mon Sep 17 00:00:00 2001 From: Viktor Rusakov Date: Tue, 1 Nov 2022 13:22:52 +0200 Subject: [PATCH 12/19] feat: add new script to replace definitions of SCSS variable with CSS ones --- scss/core/tokens.css | 6 - src/ActionRow/_variables.scss | 4 +- src/Alert/_variables.scss | 30 +-- src/Annotation/_variables.scss | 17 +- src/Avatar/_variables.scss | 18 +- src/AvatarButton/_variables.scss | 6 +- src/Badge/_variables.scss | 18 +- src/Breadcrumb/_variables.scss | 36 +-- src/Bubble/_variables.scss | 4 +- src/Button/_variables.scss | 76 +++--- src/Card/_variables.scss | 68 ++--- src/Carousel/_variables.scss | 26 +- src/Chip/_variables.scss | 6 +- src/CloseButton/_variables.scss | 8 +- src/Code/_variables.scss | 22 +- src/Collapsible/_variables.scss | 18 +- src/Container/_variables.scss | 10 +- src/DataTable/_variables.scss | 22 +- src/Dropdown/_variables.scss | 49 ++-- src/Dropzone/_variables.scss | 18 +- src/Form/_variables.scss | 348 ++++++++++++-------------- src/Icon/_variables.scss | 8 +- src/IconButton/_variables.scss | 10 +- src/Image/_variables.scss | 16 +- src/Menu/_variables.scss | 8 +- src/Modal/_variables.scss | 63 +++-- src/Nav/_variables.scss | 36 +-- src/Navbar/_variables.scss | 48 ++-- src/Pagination/_variables.scss | 100 ++++---- src/Popover/_variables.scss | 50 ++-- src/ProductTour/_variables.scss | 22 +- src/ProgressBar/_variables.scss | 30 +-- src/SearchField/_variables.scss | 22 +- src/SelectableBox/_variables.scss | 6 +- src/Spinner/_variables.scss | 12 +- src/Stack/_variables.scss | 2 +- src/Sticky/_variables.scss | 6 +- src/Tabs/_variables.scss | 6 +- src/Toast/_variables.scss | 31 ++- src/Tooltip/_variables.scss | 31 ++- tokens/build/_variables.scss | 6 - tokens/build/css-to-scss.json | 2 +- tokens/build/scss-to-css.json | 2 +- tokens/build/variables.css | 6 - tokens/map-scss-to-css.js | 2 +- tokens/package.json | 3 +- tokens/replace-variables.js | 30 ++- tokens/source/components/Form.json | 6 - tokens/source/components/Modal.json | 13 - tokens/source/components/Tooltip.json | 1 - tokens/utils.js | 89 ++++++- 51 files changed, 754 insertions(+), 723 deletions(-) diff --git a/scss/core/tokens.css b/scss/core/tokens.css index f8f228305d..0868fabc0e 100644 --- a/scss/core/tokens.css +++ b/scss/core/tokens.css @@ -111,7 +111,6 @@ --pgn-border-radius-base: .375rem; --pgn-border-width: 1px; --pgn-tooltip-arrow-height: .4rem; - --pgn-tooltip-arrow-width: .8rem; --pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); --pgn-tooltip-margin: 0; --pgn-tooltip-padding-x: .5rem; @@ -230,11 +229,8 @@ --pgn-modal-content-border-width: 0; --pgn-modal-content-border-color: rgba(0, 0, 0, .2); --pgn-modal-content-color: null; - --pgn-modal-dialog-margin-y-sm-up: 1.75rem; - --pgn-modal-dialog-margin-base: 1.5rem; --pgn-modal-footer-padding-y: 1.5rem; --pgn-modal-footer-padding-x: 1rem; - --pgn-modal-footer-margin-between: .5rem; --pgn-modal-inner-padding-bottom: .7rem; --pgn-modal-inner-padding-base: 1.5rem; --pgn-menu-border-hover: transparent; @@ -334,7 +330,6 @@ --pgn-form-custom-control-gutter: .5rem; --pgn-form-custom-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; --pgn-form-group-margin-bottom: 1rem; - --pgn-form-grid-gutter-width: 10px; --pgn-form-check-border-width: .125rem; --pgn-form-check-border-radius-focus: .0625rem; --pgn-form-check-position-axis: .375rem; @@ -343,7 +338,6 @@ --pgn-form-input-check-margin-y: .3rem; --pgn-form-input-check-margin-x-inline: .3125rem; --pgn-form-input-check-margin-x-base: .25rem; - --pgn-form-input-check-gutter: 1.25rem; --pgn-form-input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; --pgn-form-input-width-hover: 1px; --pgn-form-input-focus-width: 1px; diff --git a/src/ActionRow/_variables.scss b/src/ActionRow/_variables.scss index 37b2d3913d..65e304d57a 100644 --- a/src/ActionRow/_variables.scss +++ b/src/ActionRow/_variables.scss @@ -1,2 +1,2 @@ -$action-row-gap-x: .5rem !default; -$action-row-gap-y: .5rem !default; +$action-row-gap-x: var(--pgn-action-row-gap-x) !default; +$action-row-gap-y: var(--pgn-action-row-gap-y) !default; diff --git a/src/Alert/_variables.scss b/src/Alert/_variables.scss index 493a06fece..313f2c9812 100644 --- a/src/Alert/_variables.scss +++ b/src/Alert/_variables.scss @@ -2,23 +2,23 @@ // // Define alert colors, border radius, and padding. -$alert-padding-y: 1.5rem !default; -$alert-padding-x: 1.5rem !default; -$alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: $font-weight-normal !default; -$alert-border-width: 0 !default; -$alert-title-color: #000000 !default; -$alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default; +$alert-padding-y: var(--pgn-alert-padding-y) !default; +$alert-padding-x: var(--pgn-alert-padding-x) !default; +$alert-margin-bottom: var(--pgn-alert-margin-bottom) !default; +$alert-border-radius: var(--pgn-alert-border-radius) !default; +$alert-link-font-weight: var(--pgn-alert-font-weight-link) !default; +$alert-border-width: var(--pgn-alert-border-width) !default; +$alert-title-color: var(--pgn-alert-color-title) !default; +$alert-box-shadow: var(--pgn-alert-box-shadow) !default; -$alert-bg-level: -10 !default; -$alert-border-level: -9 !default; -$alert-color-level: 6 !default; +$alert-bg-level: var(--pgn-alert-level-bg) !default; +$alert-border-level: var(--pgn-alert-level-border) !default; +$alert-color-level: var(--pgn-alert-level-color) !default; -$alert-icon-space: .8rem !default; +$alert-icon-space: var(--pgn-alert-icon-space) !default; -$alert-font-size: .875rem !default; -$alert-line-height: 1.5rem !default; -$alert-content-color: $gray-700 !default; +$alert-font-size: var(--pgn-alert-font-size) !default; +$alert-line-height: var(--pgn-alert-line-height) !default; +$alert-content-color: var(--pgn-alert-color-content) !default; $alert-actions-gap: map-get($spacers, 3); diff --git a/src/Annotation/_variables.scss b/src/Annotation/_variables.scss index dfe1de4e58..d93cb65292 100644 --- a/src/Annotation/_variables.scss +++ b/src/Annotation/_variables.scss @@ -1,10 +1,9 @@ -$annotation-padding: .5rem !default; -$annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) - drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; -$annotation-border-radius: .25rem !default; -$annotation-max-width: 18.75rem !default; -$annotation-font-size: $font-size-sm !default; -$annotation-line-height: $line-height-sm !default; +$annotation-padding: var(--pgn-annotation-padding) !default; +$annotation-box-shadow: var(--pgn-annotation-box-shadow) !default; +$annotation-border-radius: var(--pgn-annotation-border-radius) !default; +$annotation-max-width: var(--pgn-annotation-max-width) !default; +$annotation-font-size: var(--pgn-annotation-font-size) !default; +$annotation-line-height: var(--pgn-annotation-line-height) !default; $annotation-variants: ( "success": ( "background-color": $success, "color": $white ), @@ -14,5 +13,5 @@ $annotation-variants: ( "dark": ( "background-color": $dark, "color": $white ), ) !default; -$annotation-arrow-side-margin: .25rem !default; -$annotation-arrow-border-width: .5rem !default; +$annotation-arrow-side-margin: var(--pgn-annotation-arrow-side-margin) !default; +$annotation-arrow-border-width: var(--pgn-annotation-arrow-border-width) !default; diff --git a/src/Avatar/_variables.scss b/src/Avatar/_variables.scss index 1d38482cab..e8a3f3a8f2 100644 --- a/src/Avatar/_variables.scss +++ b/src/Avatar/_variables.scss @@ -1,10 +1,10 @@ -$avatar-border-radius: 100% !default; -$avatar-border: solid 1px $light-300 !default; +$avatar-border-radius: var(--pgn-avatar-border-radius) !default; +$avatar-border: var(--pgn-avatar-border-base) !default; -$avatar-size-xs: 1.5rem !default; -$avatar-size-sm: 2.25rem !default; -$avatar-size: 3rem !default; -$avatar-size-lg: 4rem !default; -$avatar-size-xl: 6rem !default; -$avatar-size-xxl: 11.5rem !default; -$avatar-size-huge: 18.75rem !default; +$avatar-size-xs: var(--pgn-avatar-size-xs) !default; +$avatar-size-sm: var(--pgn-avatar-size-sm) !default; +$avatar-size: var(--pgn-avatar-size-base) !default; +$avatar-size-lg: var(--pgn-avatar-size-lg) !default; +$avatar-size-xl: var(--pgn-avatar-size-xl) !default; +$avatar-size-xxl: var(--pgn-avatar-size-xxl) !default; +$avatar-size-huge: var(--pgn-avatar-size-huge) !default; diff --git a/src/AvatarButton/_variables.scss b/src/AvatarButton/_variables.scss index cf568ae127..21bc685e14 100644 --- a/src/AvatarButton/_variables.scss +++ b/src/AvatarButton/_variables.scss @@ -1,3 +1,3 @@ -$avatar-button-padding-left: .25em !default; -$avatar-button-padding-left-sm: .25em !default; -$avatar-button-padding-left-lg: .25em !default; +$avatar-button-padding-left: var(--pgn-avatar-button-padding-left-base) !default; +$avatar-button-padding-left-sm: var(--pgn-avatar-button-padding-left-sm) !default; +$avatar-button-padding-left-lg: var(--pgn-avatar-button-padding-left-lg) !default; diff --git a/src/Badge/_variables.scss b/src/Badge/_variables.scss index 6067ea7d8a..50dd068450 100644 --- a/src/Badge/_variables.scss +++ b/src/Badge/_variables.scss @@ -1,16 +1,16 @@ // Badges -$badge-font-size: 75% !default; -$badge-font-weight: $font-weight-bold !default; -$badge-padding-y: .125rem !default; -$badge-padding-x: .5rem !default; -$badge-border-radius: .25rem !default; +$badge-font-size: var(--pgn-badge-font-size) !default; +$badge-font-weight: var(--pgn-badge-font-weight) !default; +$badge-padding-y: var(--pgn-badge-padding-y) !default; +$badge-padding-x: var(--pgn-badge-padding-x-base) !default; +$badge-border-radius: var(--pgn-badge-border-radius-base) !default; -$badge-transition: none !default; -$badge-focus-width: $input-btn-focus-width !default; +$badge-transition: var(--pgn-badge-transition) !default; +$badge-focus-width: var(--pgn-badge-focus-width) !default; -$badge-pill-padding-x: .6em !default; +$badge-pill-padding-x: var(--pgn-badge-padding-x-pill) !default; // Use a higher than normal value to ensure completely rounded edges when // customizing padding or font-size on labels. -$badge-pill-border-radius: 10rem !default; +$badge-pill-border-radius: var(--pgn-badge-border-radius-pill) !default; diff --git a/src/Breadcrumb/_variables.scss b/src/Breadcrumb/_variables.scss index 955751b0d7..10b8d580d8 100644 --- a/src/Breadcrumb/_variables.scss +++ b/src/Breadcrumb/_variables.scss @@ -1,27 +1,27 @@ // Breadcrumbs -$breadcrumb-font-size: null !default; +$breadcrumb-font-size: var(--pgn-breadcrumb-font-size) !default; -$breadcrumb-padding-y: .75rem !default; -$breadcrumb-padding-x: 1rem !default; -$breadcrumb-item-padding: .5rem !default; +$breadcrumb-padding-y: var(--pgn-breadcrumb-padding-y) !default; +$breadcrumb-padding-x: var(--pgn-breadcrumb-padding-x) !default; +$breadcrumb-item-padding: var(--pgn-breadcrumb-padding-item) !default; -$breadcrumb-margin-bottom: 1rem !default; -$breadcrumb-margin-left: .5rem !default; +$breadcrumb-margin-bottom: var(--pgn-breadcrumb-margin-bottom) !default; +$breadcrumb-margin-left: var(--pgn-breadcrumb-margin-left) !default; -$breadcrumb-border-focus-axis-x: .25rem !default; -$breadcrumb-border-focus-axis-y: .5rem !default; +$breadcrumb-border-focus-axis-x: var(--pgn-breadcrumb-border-focus-axis-x) !default; +$breadcrumb-border-focus-axis-y: var(--pgn-breadcrumb-border-focus-axis-y) !default; -$breadcrumb-border-focus-width: .0625rem !default; +$breadcrumb-border-focus-width: var(--pgn-breadcrumb-border-focus-width) !default; -$breadcrumb-bg: $gray-200 !default; -$breadcrumb-divider-color: $gray-600 !default; -$breadcrumb-active-color: $gray-500 !default; -$breadcrumb-inverse-active: $light-500 !default; -$breadcrumb-inverse-spacer: $light-700 !default; -$breadcrumb-color: $primary-500 !default; -$breadcrumb-inverse-color: $white !default; +$breadcrumb-bg: var(--pgn-breadcrumb-bg) !default; +$breadcrumb-divider-color: var(--pgn-breadcrumb-color-divider) !default; +$breadcrumb-active-color: var(--pgn-breadcrumb-color-active) !default; +$breadcrumb-inverse-active: var(--pgn-breadcrumb-inverse-active) !default; +$breadcrumb-inverse-spacer: var(--pgn-breadcrumb-inverse-spacer) !default; +$breadcrumb-color: var(--pgn-breadcrumb-color-base) !default; +$breadcrumb-inverse-color: var(--pgn-breadcrumb-inverse-color) !default; $breadcrumb-divider: "/" !default; -$breadcrumb-border-radius: $border-radius !default; -$breadcrumb-focus-border-radius: .125rem !default; +$breadcrumb-border-radius: var(--pgn-breadcrumb-border-radius-base) !default; +$breadcrumb-focus-border-radius: var(--pgn-breadcrumb-border-radius-focus) !default; diff --git a/src/Bubble/_variables.scss b/src/Bubble/_variables.scss index e09ee586c8..db7f5a9c7b 100644 --- a/src/Bubble/_variables.scss +++ b/src/Bubble/_variables.scss @@ -4,5 +4,5 @@ $bubble-variants: ( "error": ( "background-color": $danger, "color": $white ), "primary": ( "background-color": $primary, "color": $white ), ) !default; -$bubble-expandable-padding-x: .25rem !default; -$bubble-expandable-padding-y: 0 !default; +$bubble-expandable-padding-x: var(--pgn-bubble-expandable-padding-x) !default; +$bubble-expandable-padding-y: var(--pgn-bubble-expandable-padding-y) !default; diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss index e724fb9a71..b5dfe51316 100644 --- a/src/Button/_variables.scss +++ b/src/Button/_variables.scss @@ -1,48 +1,46 @@ -$btn-padding-y: $input-btn-padding-y !default; -$btn-padding-x: $input-btn-padding-x !default; -$btn-font-family: $input-btn-font-family !default; -$btn-font-size: $input-btn-font-size !default; -$btn-line-height: $input-btn-line-height !default; - -$btn-padding-y-sm: $input-btn-padding-y-sm !default; -$btn-padding-x-sm: $input-btn-padding-x-sm !default; -$btn-font-size-sm: $input-btn-font-size-sm !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; - -$btn-padding-y-lg: $input-btn-padding-y-lg !default; -$btn-padding-x-lg: $input-btn-padding-x-lg !default; -$btn-font-size-lg: $input-btn-font-size-lg !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; - -$btn-border-width: $input-btn-border-width !default; - -$btn-font-weight: $font-weight-normal !default; -$btn-box-shadow: inset 0 1px 0 rgba($white, .15), - 0 1px 1px rgba($black, .075) !default; -$btn-focus-width: 2px !default; -$btn-focus-gap: 1px !default; +$btn-padding-y: var(--pgn-btn-padding-y-base) !default; +$btn-padding-x: var(--pgn-btn-padding-x-base) !default; +$btn-font-family: var(--pgn-btn-font-family) !default; +$btn-font-size: var(--pgn-btn-font-size-base) !default; +$btn-line-height: var(--pgn-btn-line-height-base) !default; + +$btn-padding-y-sm: var(--pgn-btn-padding-y-sm) !default; +$btn-padding-x-sm: var(--pgn-btn-padding-x-sm) !default; +$btn-font-size-sm: var(--pgn-btn-font-size-sm) !default; +$btn-line-height-sm: var(--pgn-btn-line-height-sm) !default; + +$btn-padding-y-lg: var(--pgn-btn-padding-y-lg) !default; +$btn-padding-x-lg: var(--pgn-btn-padding-x-lg) !default; +$btn-font-size-lg: var(--pgn-btn-font-size-lg) !default; +$btn-line-height-lg: var(--pgn-btn-line-height-lg) !default; + +$btn-border-width: var(--pgn-btn-border-width) !default; + +$btn-font-weight: var(--pgn-btn-font-width) !default; +$btn-box-shadow: var(--pgn-btn-box-shadow-base) !default; +$btn-focus-width: var(--pgn-btn-focus-width) !default; +$btn-focus-gap: var(--pgn-btn-focus-gap) !default; $btn-focus-box-shadow: $input-btn-focus-box-shadow !default; -$btn-disabled-opacity: .65 !default; -$btn-active-box-shadow: none; +$btn-disabled-opacity: var(--pgn-btn-disabled-opacity) !default; +$btn-active-box-shadow: var(--pgn-btn-box-shadow-active) !default; -$btn-tertiary-color: $gray-700 !default; -// TODO can't use css variable due to conflict with SCSS functions +$btn-tertiary-color: var(--pgn-btn-tertiary-color) !default; $btn-tertiary-bg: transparent !default; -$btn-tertiary-hover-bg: $light-500 !default; -$btn-tertiary-active-bg: $light-500 !default; -$btn-inverse-tertiary-color: $white !default; -$btn-inverse-tertiary-bg: transparent !default; -$btn-inverse-tertiary-hover-bg: rgba(255, 255, 255, .1) !default; -$btn-inverse-tertiary-active-bg: rgba(255, 255, 255, .1) !default; +$btn-tertiary-hover-bg: var(--pgn-btn-tertiary-bg-hover) !default; +$btn-tertiary-active-bg: var(--pgn-btn-tertiary-bg-active) !default; +$btn-inverse-tertiary-color: var(--pgn-btn-tertiary-inverse-color) !default; +$btn-inverse-tertiary-bg: var(--pgn-btn-tertiary-inverse-bg-base) !default; +$btn-inverse-tertiary-hover-bg: var(--pgn-btn-tertiary-inverse-bg-hover) !default; +$btn-inverse-tertiary-active-bg: var(--pgn-btn-tertiary-inverse-bg-active) !default; -$btn-link-disabled-color: theme-color("gray", "light-text") !default; +$btn-link-disabled-color: var(--pgn-btn-disabled-link-color) !default; -$btn-block-spacing-y: .5rem !default; +$btn-block-spacing-y: var(--pgn-btn-block-spacing-y) !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius-lg !default; -$btn-border-radius-sm: $border-radius-sm !default; +$btn-border-radius: var(--pgn-btn-border-radius-base) !default; +$btn-border-radius-lg: var(--pgn-btn-border-radius-lg) !default; +$btn-border-radius-sm: var(--pgn-btn-border-radius-sm) !default; -$btn-transition: null; +$btn-transition: var(--pgn-btn-transition) !default; diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss index 20ed7f7a8b..cc8ee56c13 100644 --- a/src/Card/_variables.scss +++ b/src/Card/_variables.scss @@ -1,47 +1,47 @@ // Cards -$card-spacer-y: .75rem !default; -$card-spacer-x: 1.25rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba($black, .125) !default; -$card-border-focus-color: rgba($black, .5) !default; +$card-spacer-y: var(--pgn-card-spacer-y) !default; +$card-spacer-x: var(--pgn-card-spacer-x) !default; +$card-border-width: var(--pgn-card-border-width) !default; +$card-border-radius: var(--pgn-card-border-radius-base) !default; +$card-border-color: var(--pgn-card-border-color-base) !default; +$card-border-focus-color: var(--pgn-card-border-color-focus) !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; -$card-cap-bg: rgba($black, .03) !default; -$card-cap-color: null !default; -$card-height: null !default; -$card-color: null !default; -$card-bg: $white !default; +$card-cap-bg: var(--pgn-card-cap-bg) !default; +$card-cap-color: var(--pgn-card-cap-color) !default; +$card-height: var(--pgn-card-height-base) !default; +$card-color: var(--pgn-card-color) !default; +$card-bg: var(--pgn-card-bg) !default; -$card-img-overlay-padding: 1.25rem !default; +$card-img-overlay-padding: var(--pgn-card-image-overlay-padding) !default; -$card-group-margin: calc($grid-gutter-width / 2) !default; -$card-deck-margin: $card-group-margin !default; -$card-grid-margin: $card-group-margin !default; +$card-group-margin: var(--pgn-card-margin-group) !default; +$card-deck-margin: var(--pgn-card-margin-deck) !default; +$card-grid-margin: var(--pgn-card-margin-grid) !default; -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; +$card-columns-count: var(--pgn-card-columns-count) !default; +$card-columns-gap: var(--pgn-card-columns-gap) !default; +$card-columns-margin: var(--pgn-card-columns-margin) !default; -$card-divider-bg: $light-400 !default; -$card-divider-margin-y: $card-spacer-y !default; +$card-divider-bg: var(--pgn-card-divider-bg) !default; +$card-divider-margin-y: var(--pgn-card-divider-margin-y) !default; -$card-footer-actions-gap: .5rem !default; +$card-footer-actions-gap: var(--pgn-card-footer-action-gap) !default; -$card-logo-left-offset: 1.5rem !default; -$card-logo-bottom-offset: 1rem !default; -$card-logo-left-offset-horizontal: .4375rem !default; -$card-logo-bottom-offset-horizontal: .4375rem !default; +$card-logo-left-offset: var(--pgn-card-logo-left-offset-base) !default; +$card-logo-bottom-offset: var(--pgn-card-logo-bottom-offset-base) !default; +$card-logo-left-offset-horizontal: var(--pgn-card-logo-left-offset-horizontal) !default; +$card-logo-bottom-offset-horizontal: var(--pgn-card-logo-bottom-offset-horizontal) !default; -$card-logo-width: 7.25rem !default; -$card-logo-height: 4.125rem !default; +$card-logo-width: var(--pgn-card-logo-width) !default; +$card-logo-height: var(--pgn-card-logo-height) !default; -$card-image-border-radius: .3125rem !default; -$card-logo-border-radius: .25rem !default; +$card-image-border-radius: var(--pgn-card-border-radius-image) !default; +$card-logo-border-radius: var(--pgn-card-border-radius-logo) !default; -$card-footer-text-font-size: $x-small-font-size; +$card-footer-text-font-size: var(--pgn-card-footer-text-font-size) !default; -$card-image-horizontal-max-width: 240px; -$card-image-horizontal-min-width: $card-image-horizontal-max-width; -$card-image-vertical-max-height: 140px; -$loading-skeleton-spacer: .313rem; +$card-image-horizontal-max-width: var(--pgn-card-image-horizontal-width-max) !default; +$card-image-horizontal-min-width: var(--pgn-card-image-horizontal-width-min) !default; +$card-image-vertical-max-height: var(--pgn-card-image-vertical-height-max) !default; +$loading-skeleton-spacer: var(--pgn-card-loading-skeleton-spacer) !default; diff --git a/src/Carousel/_variables.scss b/src/Carousel/_variables.scss index 158663fccd..7da5bf1eac 100644 --- a/src/Carousel/_variables.scss +++ b/src/Carousel/_variables.scss @@ -2,22 +2,22 @@ // TODO use css variable $carousel-control-color: #FFFFFF !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: .5 !default; -$carousel-control-hover-opacity: .9 !default; -$carousel-control-transition: opacity .15s ease !default; +$carousel-control-width: var(--pgn-carousel-control-width-base) !default; +$carousel-control-opacity: var(--pgn-carousel-control-opacity-base) !default; +$carousel-control-hover-opacity: var(--pgn-carousel-control-opacity-hover) !default; +$carousel-control-transition: var(--pgn-carousel-control-transition) !default; -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-hit-area-height: 10px !default; -$carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !default; -$carousel-indicator-transition: opacity .6s ease !default; +$carousel-indicator-width: var(--pgn-carousel-indicator-width) !default; +$carousel-indicator-height: var(--pgn-carousel-indicator-height-base) !default; +$carousel-indicator-hit-area-height: var(--pgn-carousel-indicator-height-area-hit) !default; +$carousel-indicator-spacer: var(--pgn-carousel-indicator-spacer) !default; +$carousel-indicator-active-bg: var(--pgn-carousel-indicator-active-bg) !default; +$carousel-indicator-transition: var(--pgn-carousel-indicator-transition) !default; -$carousel-caption-width: 70% !default; -$carousel-caption-color: $white !default; +$carousel-caption-width: var(--pgn-carousel-caption-width) !default; +$carousel-caption-color: var(--pgn-carousel-caption-color) !default; -$carousel-control-icon-width: 20px !default; +$carousel-control-icon-width: var(--pgn-carousel-control-width-icon) !default; $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default; $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default; diff --git a/src/Chip/_variables.scss b/src/Chip/_variables.scss index 90c2878e07..9527461bab 100644 --- a/src/Chip/_variables.scss +++ b/src/Chip/_variables.scss @@ -1,9 +1,9 @@ -$chip-padding-x: .5rem !default; -$chip-padding-y: .125rem !default; +$chip-padding-x: var(--pgn-chip-padding-x) !default; +$chip-padding-y: var(--pgn-chip-padding-y) !default; $chip-padding-to-icon: 3px !default; $chip-icon-padding: .25rem !default; $chip-margin: .125rem !default; -$chip-border-radius: .25rem !default; +$chip-border-radius: var(--pgn-chip-border-radius-base) !default; $chip-disable-opacity: .3 !default; $chip-icon-size: 1.25rem !default; diff --git a/src/CloseButton/_variables.scss b/src/CloseButton/_variables.scss index 53deb2384c..0415c62774 100644 --- a/src/CloseButton/_variables.scss +++ b/src/CloseButton/_variables.scss @@ -1,6 +1,6 @@ // Close -$close-font-size: calc($font-size-base * 1.5) !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; +$close-font-size: var(--pgn-close-button-font-size) !default; +$close-font-weight: var(--pgn-close-button-font-weight) !default; +$close-color: var(--pgn-close-button-color) !default; +$close-text-shadow: var(--pgn-close-button-text-shadow) !default; diff --git a/src/Code/_variables.scss b/src/Code/_variables.scss index f48f830f0b..118d2cab28 100644 --- a/src/Code/_variables.scss +++ b/src/Code/_variables.scss @@ -1,17 +1,17 @@ // Code -$code-font-size: 87.5% !default; -$code-color: #E83E8C !default; +$code-font-size: var(--pgn-code-font-size) !default; +$code-color: var(--pgn-code-color) !default; -$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; -$nested-kbd-font-weight: $font-weight-bold !default; +$kbd-box-shadow: var(--pgn-code-kbd-box-shadow) !default; +$nested-kbd-font-weight: var(--pgn-code-kbd-nested-font-weight) !default; // HTML Keyboard Input element () styles -$kbd-padding-y: .2rem !default; -$kbd-padding-x: .4rem !default; -$kbd-font-size: $code-font-size !default; -$kbd-color: $white !default; -$kbd-bg: theme-color("gray", "hover") !default; +$kbd-padding-y: var(--pgn-code-kbd-padding-y) !default; +$kbd-padding-x: var(--pgn-code-kbd-padding-x) !default; +$kbd-font-size: var(--pgn-code-kbd-font-size) !default; +$kbd-color: var(--pgn-code-kbd-color) !default; +$kbd-bg: var(--pgn-code-kbd-bg) !default; -$pre-color: theme-color("gray", "dark-text") !default; -$pre-scrollable-max-height: 340px !default; +$pre-color: var(--pgn-code-pre-color) !default; +$pre-scrollable-max-height: var(--pgn-code-pre-scrollable-max-height) !default; diff --git a/src/Collapsible/_variables.scss b/src/Collapsible/_variables.scss index 19b10836b7..f7ae8f19b0 100644 --- a/src/Collapsible/_variables.scss +++ b/src/Collapsible/_variables.scss @@ -1,12 +1,12 @@ // Collapsible -$collapsible-card-spacer-y: .5rem !default; -$collapsible-card-spacer-x: .5rem !default; -$collapsible-card-spacer-y-lg: $card-spacer-y !default; -$collapsible-card-spacer-x-lg: $card-spacer-x !default; -$collapsible-card-body-spacer-left: .75rem !default; -$collapsible-card-spacer-icon: 2.5rem !default; +$collapsible-card-spacer-y: var(--pgn-collapsible-card-spacer-y-base) !default; +$collapsible-card-spacer-x: var(--pgn-collapsible-card-spacer-x-base) !default; +$collapsible-card-spacer-y-lg: var(--pgn-collapsible-card-spacer-y-lg) !default; +$collapsible-card-spacer-x-lg: var(--pgn-collapsible-card-spacer-x-lg) !default; +$collapsible-card-body-spacer-left: var(--pgn-collapsible-card-spacer-left-body) !default; +$collapsible-card-spacer-icon: var(--pgn-collapsible-card-spacer-icon) !default; -$collapsible-basic-spacer-y: .5rem !default; -$collapsible-basic-spacer-x: .5rem !default; -$collapsible-basic-spacer-icon: .625rem !default; +$collapsible-basic-spacer-y: var(--pgn-collapsible-card-spacer-basic-y) !default; +$collapsible-basic-spacer-x: var(--pgn-collapsible-card-spacer-basic-x) !default; +$collapsible-basic-spacer-icon: var(--pgn-collapsible-card-spacer-basic-icon) !default; diff --git a/src/Container/_variables.scss b/src/Container/_variables.scss index 64d6f892c5..428adb0ae4 100644 --- a/src/Container/_variables.scss +++ b/src/Container/_variables.scss @@ -1,5 +1,5 @@ -$max-width-xs: 464px !default; -$max-width-sm: 708px !default; -$max-width-md: 952px !default; -$max-width-lg: 1192px !default; -$max-width-xl: 1440px !default; +$max-width-xs: var(--pgn-container-max-width-xs) !default; +$max-width-sm: var(--pgn-container-max-width-sm) !default; +$max-width-md: var(--pgn-container-max-width-md) !default; +$max-width-lg: var(--pgn-container-max-width-lg) !default; +$max-width-xl: var(--pgn-container-max-width-xl) !default; diff --git a/src/DataTable/_variables.scss b/src/DataTable/_variables.scss index 1081b8e435..e733401b76 100644 --- a/src/DataTable/_variables.scss +++ b/src/DataTable/_variables.scss @@ -1,11 +1,11 @@ -$data-table-background-color: $white !default; -$data-table-border: 1px solid $gray-200 !default; -$data-table-box-shadow: $box-shadow-sm !default; -$data-table-padding-x: .75rem !default; -$data-table-padding-y: .75rem !default; -$data-table-padding-small: .5rem !default; -$data-table-head-cell-padding: .5rem .75rem !default; -$data-table-cell-padding: .75rem !default; -$data-table-footer-position: center !default; -$data-table-pagination-dropdown-max-height: 60vh !default; -$data-table-pagination-dropdown-min-width: 6rem !default; +$data-table-background-color: var(--pgn-data-table-background-color) !default; +$data-table-border: var(--pgn-data-table-border) !default; +$data-table-box-shadow: var(--pgn-data-table-box-shadow) !default; +$data-table-padding-x: var(--pgn-data-table-padding-x) !default; +$data-table-padding-y: var(--pgn-data-table-padding-y) !default; +$data-table-padding-small: var(--pgn-data-table-padding-small) !default; +$data-table-head-cell-padding: var(--pgn-data-table-padding-head-cell) !default; +$data-table-cell-padding: var(--pgn-data-table-padding-cell) !default; +$data-table-footer-position: var(--pgn-data-table-footer-position) !default; +$data-table-pagination-dropdown-max-height: var(--pgn-data-table-pagination-dropdown-max-height) !default; +$data-table-pagination-dropdown-min-width: var(--pgn-data-table-pagination-dropdown-min-width) !default; diff --git a/src/Dropdown/_variables.scss b/src/Dropdown/_variables.scss index 8bf82b0a0b..3337c9807e 100644 --- a/src/Dropdown/_variables.scss +++ b/src/Dropdown/_variables.scss @@ -2,33 +2,32 @@ // // Dropdown menu container and contents. -$dropdown-min-width: 18rem !default; -$dropdown-padding-x: 0 !default; -$dropdown-padding-y: .5rem !default; -$dropdown-spacer: .125rem !default; -$dropdown-font-size: $font-size-base !default; -$dropdown-color: $body-color !default; -$dropdown-bg: $white !default; -// TODO use css variable -$dropdown-border-color: rgba(#000000, .15) !default; -$dropdown-border-radius: $border-radius !default; -$dropdown-border-width: $border-width !default; -$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; -$dropdown-divider-bg: theme-color("gray", "background") !default; -$dropdown-divider-margin-y: calc($spacer / 2) !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; +$dropdown-min-width: var(--pgn-dropdown-min-width) !default; +$dropdown-padding-x: var(--pgn-dropdown-padding-x-base) !default; +$dropdown-padding-y: var(--pgn-dropdown-padding-y-base) !default; +$dropdown-spacer: var(--pgn-dropdown-spacer) !default; +$dropdown-font-size: var(--pgn-dropdown-font-size) !default; +$dropdown-color: var(--pgn-dropdown-color-base) !default; +$dropdown-bg: var(--pgn-dropdown-bg) !default; +$dropdown-border-color: var(--pgn-dropdown-border-color) !default; +$dropdown-border-radius: var(--pgn-dropdown-border-radius-base) !default; +$dropdown-border-width: var(--pgn-dropdown-border-width) !default; +$dropdown-inner-border-radius: var(--pgn-dropdown-border-radius-inner) !default; +$dropdown-divider-bg: var(--pgn-dropdown-divider-bg) !default; +$dropdown-divider-margin-y: var(--pgn-dropdown-divider-margin-y) !default; +$dropdown-box-shadow: var(--pgn-dropdown-box-shadow) !default; -$dropdown-link-color: theme-color("gray", "dark-text") !default; -$dropdown-link-hover-color: darken(theme-color("gray", "dark-text"), 5%) !default; -$dropdown-link-hover-bg: $light-300 !default; +$dropdown-link-color: var(--pgn-dropdown-link-color) !default; +$dropdown-link-hover-color: var(--pgn-dropdown-link-hover-color) !default; +$dropdown-link-hover-bg: var(--pgn-dropdown-link-hover-bg) !default; -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-active-color: var(--pgn-dropdown-link-active-color) !default; +$dropdown-link-active-bg: var(--pgn-dropdown-link-active-bg) !default; -$dropdown-link-disabled-color: theme-color("gray", "light-text") !default; +$dropdown-link-disabled-color: var(--pgn-dropdown-link-disabled-color) !default; -$dropdown-item-padding-y: .25rem !default; -$dropdown-item-padding-x: 1rem !default; +$dropdown-item-padding-y: var(--pgn-dropdown-padding-y-item) !default; +$dropdown-item-padding-x: var(--pgn-dropdown-padding-x-item) !default; -$dropdown-header-color: theme-color("gray", "light-text") !default; -$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; +$dropdown-header-color: var(--pgn-dropdown-color-header) !default; +$dropdown-header-padding: var(--pgn-dropdown-padding-header) !default; diff --git a/src/Dropzone/_variables.scss b/src/Dropzone/_variables.scss index ee7caed6a4..41a7567004 100644 --- a/src/Dropzone/_variables.scss +++ b/src/Dropzone/_variables.scss @@ -1,9 +1,9 @@ -$dropzone-padding: 1.5rem !default; -$dropzone-border-default: 1px dashed $gray-500 !default; -$dropzone-border-hover: 2px solid $info-300 !default; -$dropzone-border-focus: 2px solid $info-300 !default; -$dropzone-border-active: 2px solid $primary-500 !default; -$dropzone-border-error: 2px solid $danger-300 !default; -$dropzone-error-wrapper-color: $danger-500 !default; -$dropzone-restriction-msg-font-size: $x-small-font-size !default; -$dropzone-restriction-msg-color: $gray-500 !default; +$dropzone-padding: var(--pgn-dropzone-padding) !default; +$dropzone-border-default: var(--pgn-dropzone-border-default) !default; +$dropzone-border-hover: var(--pgn-dropzone-border-hover) !default; +$dropzone-border-focus: var(--pgn-dropzone-border-focus) !default; +$dropzone-border-active: var(--pgn-dropzone-border-active) !default; +$dropzone-border-error: var(--pgn-dropzone-border-error) !default; +$dropzone-error-wrapper-color: var(--pgn-dropzone-error-wrapper-color) !default; +$dropzone-restriction-msg-font-size: var(--pgn-dropzone-restriction-msg-font-size) !default; +$dropzone-restriction-msg-color: var(--pgn-dropzone-restriction-msg-color) !default; diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss index eaa646c0cf..2bf6451829 100644 --- a/src/Form/_variables.scss +++ b/src/Form/_variables.scss @@ -1,150 +1,141 @@ -$input-padding-y: $input-btn-padding-y !default; -$input-padding-x: $input-btn-padding-x !default; -$input-font-family: $input-btn-font-family !default; -$input-font-size: $input-btn-font-size !default; -$input-font-weight: $font-weight-base !default; -$input-line-height: $input-btn-line-height !default; - -$input-padding-y-sm: $input-btn-padding-y-sm !default; -$input-padding-x-sm: $input-btn-padding-x-sm !default; -$input-font-size-sm: $input-btn-font-size-sm !default; -$input-line-height-sm: $input-btn-line-height-sm !default; - -$input-padding-y-lg: $input-btn-padding-y-lg !default; -$input-padding-x-lg: $input-btn-padding-x-lg !default; -$input-font-size-lg: $input-btn-font-size-lg !default; -$input-line-height-lg: $input-btn-line-height-lg !default; - -$input-bg: $white !default; -$input-disabled-bg: theme-color("gray", "background") !default; - -$input-color: theme-color("gray", "text") !default; -$input-border-color: $gray-500 !default; -$input-border-width: $input-btn-border-width !default; -$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; - -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; - -$input-focus-bg: $input-bg !default; -$input-focus-border-color: $component-active-bg !default; -$input-focus-color: $input-color !default; -$input-focus-width: 1px !default; -$input-focus-box-shadow: $input-btn-focus-box-shadow !default; - -$input-placeholder-color: theme-color("gray", "light-text") !default; +$input-padding-y: var(--pgn-form-input-padding-y-base) !default; +$input-padding-x: var(--pgn-form-input-padding-x-base) !default; +$input-font-family: var(--pgn-form-input-font-family) !default; +$input-font-size: var(--pgn-form-input-font-size-base) !default; +$input-font-weight: var(--pgn-form-input-font-weight) !default; +$input-line-height: var(--pgn-form-input-line-height-base) !default; + +$input-padding-y-sm: var(--pgn-form-input-padding-y-sm) !default; +$input-padding-x-sm: var(--pgn-form-input-padding-x-sm) !default; +$input-font-size-sm: var(--pgn-form-input-font-size-sm) !default; +$input-line-height-sm: var(--pgn-form-input-line-height-sm) !default; + +$input-padding-y-lg: var(--pgn-form-input-padding-y-lg) !default; +$input-padding-x-lg: var(--pgn-form-input-padding-x-lg) !default; +$input-font-size-lg: var(--pgn-form-input-font-size-lg) !default; +$input-line-height-lg: var(--pgn-form-input-line-height-lg) !default; + +$input-bg: var(--pgn-form-input-bg-base) !default; +$input-disabled-bg: var(--pgn-form-input-bg-disabled) !default; + +$input-color: var(--pgn-form-input-color-base) !default; +$input-border-color: var(--pgn-form-input-border-color) !default; +$input-border-width: var(--pgn-form-input-border-width) !default; +$input-box-shadow: var(--pgn-form-input-box-shadow-base) !default; + +$input-border-radius: var(--pgn-form-input-border-radius-base) !default; +$input-border-radius-lg: var(--pgn-form-input-border-radius-lg) !default; +$input-border-radius-sm: var(--pgn-form-input-border-radius-sm) !default; + +$input-focus-bg: var(--pgn-form-input-focus-bg) !default; +$input-focus-border-color: var(--pgn-form-input-focus-color-border) !default; +$input-focus-color: var(--pgn-form-input-focus-color-base) !default; +$input-focus-width: var(--pgn-form-input-focus-width) !default; +$input-focus-box-shadow: var(--pgn-form-input-box-shadow-focus) !default; + +$input-placeholder-color: var(--pgn-form-input-color-plaintext) !default; $input-plaintext-color: $body-color !default; -$input-height-border: calc($input-border-width * 2) !default; +$input-height-border: var(--pgn-form-input-border-height) !default; -$input-height-inner: calc($input-line-height * 1em + $input-padding-y * 2) !default; -$input-height-inner-half: calc($input-line-height * .5em + $input-padding-y) !default; -$input-height-inner-quarter: calc($input-line-height * .25em + calc($input-padding-y / 2)) !default; +$input-height-inner: var(--pgn-form-input-height-inner-base) !default; +$input-height-inner-half: var(--pgn-form-input-height-inner-half) !default; +$input-height-inner-quarter: var(--pgn-form-input-height-inner-quarter) !default; -$input-height: calc( - ($input-line-height * 1em) + ($input-padding-y * 2) + ($input-height-border) -) !default; -$input-height-sm: calc( - ($input-line-height-sm * 1em) + ($input-btn-padding-y-sm * 2) + $input-height-border -) !default; -$input-height-lg: calc( - ($input-line-height-lg * 1em) + ($input-btn-padding-y-lg * 2) + ($input-height-border) -) !default; +$input-height: var(--pgn-form-input-height-base) !default; +$input-height-sm: var(--pgn-form-input-height-sm) !default; +$input-height-lg: var(--pgn-form-input-height-lg) !default; -$input-hover-width: 1px !default; -$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$input-hover-width: var(--pgn-form-input-width-hover) !default; +$input-transition: var(--pgn-form-input-transition) !default; -$form-text-margin-top: .25rem !default; +$form-text-margin-top: var(--pgn-form-text-margin-top) !default; $form-check-input-gutter: 1.25rem !default; -$form-check-input-margin-y: .3rem !default; -$form-check-input-margin-x: .25rem !default; +$form-check-input-margin-y: var(--pgn-form-input-check-margin-y) !default; +$form-check-input-margin-x: var(--pgn-form-input-check-margin-x-base) !default; -$form-check-inline-margin-x: .75rem !default; -$form-check-inline-input-margin-x: .3125rem !default; +$form-check-inline-margin-x: var(--pgn-form-check-inline-margin-x) !default; +$form-check-inline-input-margin-x: var(--pgn-form-input-check-margin-x-inline) !default; -$form-check-position-axis: .375rem !default; -$form-check-focus-border-radius: .0625rem !default; -$form-check-border-width: .125rem !default; +$form-check-position-axis: var(--pgn-form-check-position-axis) !default; +$form-check-focus-border-radius: var(--pgn-form-check-border-radius-focus) !default; +$form-check-border-width: var(--pgn-form-check-border-width) !default; $form-grid-gutter-width: 10px !default; -$form-group-margin-bottom: 1rem !default; +$form-group-margin-bottom: var(--pgn-form-group-margin-bottom) !default; -$input-group-addon-color: $input-color !default; -$input-group-addon-bg: theme-color("gray", "background") !default; -$input-group-addon-border-color: $input-border-color !default; +$input-group-addon-color: var(--pgn-form-input-group-addon-color-base) !default; +$input-group-addon-bg: var(--pgn-form-input-group-addon-bg) !default; +$input-group-addon-border-color: var(--pgn-form-input-group-addon-color-border) !default; -$custom-forms-transition: background-color .15s ease-in-out, - border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$custom-forms-transition: var(--pgn-form-custom-transition) !default; -$custom-control-gutter: .5rem !default; -$custom-control-spacer-x: 1rem !default; -$custom-control-cursor: null !default; +$custom-control-gutter: var(--pgn-form-custom-control-gutter) !default; +$custom-control-spacer-x: var(--pgn-form-custom-control-spacer-x) !default; +$custom-control-cursor: var(--pgn-form-custom-control-cursor) !default; -$custom-control-indicator-size: 1.25rem !default; -$custom-control-indicator-bg: $input-bg !default; +$custom-control-indicator-size: var(--pgn-form-custom-control-indicator-size) !default; +$custom-control-indicator-bg: var(--pgn-form-custom-control-indicator-bg-base) !default; -$custom-control-indicator-bg-size: 100% !default; -$custom-control-indicator-box-shadow: $input-box-shadow !default; -$custom-control-indicator-border-color: $gray-700 !default; -$custom-control-indicator-border-width: 2px !default; +$custom-control-indicator-bg-size: var(--pgn-form-custom-control-indicator-bg-size) !default; +$custom-control-indicator-box-shadow: var(--pgn-form-custom-control-indicator-box-shadow) !default; +$custom-control-indicator-border-color: var(--pgn-form-custom-control-indicator-border-color) !default; +$custom-control-indicator-border-width: var(--pgn-form-custom-control-indicator-border-width) !default; -$custom-control-label-color: null !default; -$custom-control-indicator-disabled-bg: $input-disabled-bg !default; -$custom-control-label-disabled-color: theme-color("gray", "light-text") !default; +$custom-control-label-color: var(--pgn-form-custom-control-label-color-base) !default; +$custom-control-indicator-disabled-bg: var(--pgn-form-custom-control-indicator-disabled-bg) !default; +$custom-control-label-disabled-color: var(--pgn-form-custom-control-label-color-disabled) !default; // TODO switch to css variable $custom-control-indicator-checked-color: #0A3055 !default; $custom-control-indicator-checked-bg: #0A3055 !default; -$custom-control-indicator-checked-disabled-bg: rgba($primary, .5) !default; -$custom-control-indicator-checked-box-shadow: none !default; -$custom-control-indicator-checked-border-color: var(--pgn-form-custom-control-indicator-checked-bg-base) !default; +$custom-control-indicator-checked-disabled-bg: var(--pgn-form-custom-control-indicator-checked-bg-disabled) !default; +$custom-control-indicator-checked-box-shadow: var(--pgn-form-custom-control-indicator-checked-box-shadow-base) !default; +$custom-control-indicator-checked-border-color: var(--pgn-form-custom-control-indicator-checked-border-color-base) !default; -$custom-control-indicator-focus-box-shadow: 0 0 0 4px rgba(0, 0, 0, .1) !default; -$custom-control-indicator-focus-border-color: $input-focus-border-color !default; +$custom-control-indicator-focus-box-shadow: var(--pgn-form-custom-control-indicator-checked-box-shadow-focus) !default; +$custom-control-indicator-focus-border-color: var(--pgn-form-custom-control-indicator-checked-border-color-focus) !default; // TODO switch to css variable $custom-control-indicator-active-color: #FFFFFF !default; $custom-control-indicator-active-bg: #0A3055 !default; -$custom-control-indicator-active-box-shadow: none !default; +$custom-control-indicator-active-box-shadow: var(--pgn-form-custom-control-indicator-active-box-shadow) !default; $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default; -$custom-checkbox-indicator-border-radius: 0 !default; +$custom-checkbox-indicator-border-radius: var(--pgn-form-custom-checkbox-indicator-border-radius) !default; $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-bg: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg) !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-box-shadow: none !default; -$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default; +$custom-checkbox-indicator-indeterminate-box-shadow: var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow) !default; +$custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color) !default; -$custom-radio-indicator-border-radius: 50% !default; +$custom-radio-indicator-border-radius: var(--pgn-form-custom-radio-indicator-border-radius) !default; $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default; $custom-switch-indicator-icon-off: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default; $custom-switch-indicator-icon-on: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-active-color}'/%3e%3c/svg%3e"), "#", "%23") !default; -$custom-switch-width: calc($custom-control-indicator-size * 1.75) !default; -$custom-switch-indicator-border-radius: calc($custom-control-indicator-size / 2) !default; -$custom-switch-indicator-size: calc( - #{$custom-control-indicator-size} - calc(#{$custom-control-indicator-border-width} * 4) -) !default; +$custom-switch-width: var(--pgn-form-custom-switch-width) !default; +$custom-switch-indicator-border-radius: var(--pgn-form-custom-switch-indicator-border-radius) !default; +$custom-switch-indicator-size: var(--pgn-form-custom-switch-indicator-size) !default; $custom-switch-indicator-checked-bg: theme-color("success") !default; -$custom-select-padding-y: $input-padding-y !default; -$custom-select-padding-x: $input-padding-x !default; -$custom-select-font-family: $input-font-family !default; -$custom-select-font-size: $input-font-size !default; -$custom-select-height: $input-height !default; +$custom-select-padding-y: var(--pgn-form-custom-select-padding-y-base) !default; +$custom-select-padding-x: var(--pgn-form-custom-select-padding-x-base) !default; +$custom-select-font-family: var(--pgn-form-custom-select-font-family) !default; +$custom-select-font-size: var(--pgn-form-custom-select-font-size-base) !default; +$custom-select-height: var(--pgn-form-custom-select-font-height-base) !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-indicator-padding: 1rem !default; -$custom-select-font-weight: $input-font-weight !default; -$custom-select-line-height: $input-line-height !default; -$custom-select-color: $input-color !default; -$custom-select-disabled-color: theme-color("gray", "light-text") !default; -$custom-select-bg: $input-bg !default; -$custom-select-disabled-bg: theme-color("gray", "background") !default; -$custom-select-bg-size: 24px 24px !default; // In pixels because image dimensions +$custom-select-indicator-padding: var(--pgn-form-custom-select-indicator-padding) !default; +$custom-select-font-weight: var(--pgn-form-custom-select-font-weight) !default; +$custom-select-line-height: var(--pgn-form-custom-select-line-height) !default; +$custom-select-color: var(--pgn-form-custom-select-color-base) !default; +$custom-select-disabled-color: var(--pgn-form-custom-select-color-disabled) !default; +$custom-select-bg: var(--pgn-form-custom-select-bg-base) !default; +$custom-select-disabled-bg: var(--pgn-form-custom-select-bg-disabled) !default; +$custom-select-bg-size: var(--pgn-form-custom-select-bg-size) !default; $custom-select-indicator-color: theme-color("gray", "hover") !default; $custom-select-indicator: str-replace(url('data:image/svg+xml,'), "#", "%23") !default; @@ -153,79 +144,74 @@ $custom-select-indicator: str-replace(url('data:image/svg+xml, { Object.entries(SCSStoCSSMap).forEach(([key, value]) => { CSStoSCSSMap[value] = key; -}) +}); fs.writeFileSync(path.resolve(__dirname, './build/scss-to-css.json'), JSON.stringify(SCSStoCSSMap)); fs.writeFileSync(path.resolve(__dirname, './build/css-to-scss.json'), JSON.stringify(CSStoSCSSMap)); diff --git a/tokens/package.json b/tokens/package.json index ac6aa45a42..eefd387f5c 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -5,7 +5,8 @@ "main": "build-tokens.js", "scripts": { "build-tokens": "node build-tokens.js", - "replace-variables": "node replace-variables.js -p ../src/", + "replace-variables-usage": "node replace-variables.js -p ../src/ -t usage", + "replace-variables-definition": "node replace-variables.js -p ../src -t definition", "build-scss-to-css-map": "node map-scss-to-css.js" }, "author": "", diff --git a/tokens/replace-variables.js b/tokens/replace-variables.js index 60d4e8e0c9..3ce952e30f 100644 --- a/tokens/replace-variables.js +++ b/tokens/replace-variables.js @@ -1,18 +1,28 @@ +const fs = require('fs'); +const path = require('path'); const { program, Option } = require('commander'); -const { replaceVariables, getFilesWithExtension } = require('./utils'); +const { transformInPath } = require('./utils'); program - .description('CLI to replace SCSS variables to CSS variables and vice versa in .scss files.') - .requiredOption('-p, --path ', 'Path to the file or directory where to replace variables.') - .addOption(new Option('-d, --direction ', 'Map direction: css-to-scss or scss-to-css.') + .description('CLI to replace SCSS variables usages or definitions to CSS variables and vice versa in .scss files.') + .requiredOption('-p, --filePath ', 'Path to the file or directory where to replace variables.') + .addOption(new Option('-t, --replacementType ', 'Type of replacement: usage or definition. If set to "definition" the command will only update SCSS variables definitions with CSS variables, if set to "usage" - all occurrences of SCSS variables will we replaced') + .choices(['usage', 'definition']) + .default('definition')) + .addOption(new Option('-d, --direction ', 'Map direction: css-to-scss or scss-to-css, if replacement type parameter is set to "definition" this has no effect.') .choices(['scss-to-css', 'css-to-scss']) .default('scss-to-css')) - .action((options) => { - const { direction, path } = options; - const sourceFiles = getFilesWithExtension(path, '.scss', [], ['Table']); - sourceFiles.forEach(async (filePath) => { - await replaceVariables(filePath, direction); - }); + .action(async (options) => { + const { direction, filePath, replacementType } = options; + if (replacementType === 'usage') { + const mapFile = fs.readFileSync(path.resolve(__dirname, `./build/${direction}.json`), 'utf-8'); + const variablesMap = JSON.parse(mapFile); + await transformInPath(filePath, variablesMap, 'usage', ['Table'], direction); + } else { + const mapFile = fs.readFileSync(path.resolve(__dirname, './build/scss-to-css.json'), 'utf-8'); + const variablesMap = JSON.parse(mapFile); + await transformInPath(filePath, variablesMap); + } }); program.parse(process.argv); diff --git a/tokens/source/components/Form.json b/tokens/source/components/Form.json index ce91ed01e6..43f6d544d0 100644 --- a/tokens/source/components/Form.json +++ b/tokens/source/components/Form.json @@ -113,7 +113,6 @@ "source": "$input-transition" }, "check": { - "gutter": { "value": "1.25rem", "themeable": true, "source": "$form-check-input-gutter" }, "margin": { "x": { "base": { "value": ".25rem", "themeable": true, "source": "$form-check-input-margin-x" }, @@ -157,11 +156,6 @@ "width": { "value": ".125rem", "themeable": true, "source": "$form-check-border-width" } } }, - "grid": { - "gutter": { - "width": { "value": "10px", "themeable": true, "source": "$form-grid-gutter-width" } - } - }, "group": { "margin": { "bottom": { "value": "1rem", "themeable": true, "source": "$form-group-margin-bottom" } diff --git a/tokens/source/components/Modal.json b/tokens/source/components/Modal.json index 7144458ba0..146f837eb0 100644 --- a/tokens/source/components/Modal.json +++ b/tokens/source/components/Modal.json @@ -7,9 +7,6 @@ } }, "footer": { - "margin": { - "between": { "value": ".5rem", "themeable": true, "source": "$modal-footer-margin-between" } - }, "border": { "color": { "value": "{modal.header.border.color.value}", "themeable": true, "source": "$modal-footer-border-color" @@ -28,16 +25,6 @@ "y": { "value": "1.5rem", "themeable": true, "source": "$modal-footer-padding-y" } } }, - "dialog": { - "margin": { - "base": { "value": "1.5rem", "themeable": true, "source": "$modal-dialog-margin" }, - "y": { - "sm": { - "up": { "value": "1.75rem", "themeable": true, "source": "$modal-dialog-margin-y-sm-up" } - } - } - } - }, "title": { "line": { "height": { "value": "{line-height.base.value}", "themeable": true, "source": "$modal-title-line-height" } diff --git a/tokens/source/components/Tooltip.json b/tokens/source/components/Tooltip.json index d6698a8776..4b213d9444 100644 --- a/tokens/source/components/Tooltip.json +++ b/tokens/source/components/Tooltip.json @@ -31,7 +31,6 @@ } }, "arrow": { - "width": { "value": ".8rem", "themeable": true, "source": "$tooltip-arrow-width" }, "height": { "value": ".4rem", "themeable": true, "source": "$tooltip-arrow-height" }, "color": { "base": { "value": "{tooltip.bg.base.value}", "themeable": true, "source": "$tooltip-arrow-color" }, diff --git a/tokens/utils.js b/tokens/utils.js index c6074f6479..6cf0277607 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -30,9 +30,7 @@ function getSCSStoCSSMap(prefix, key, result) { return result; } -async function replaceVariables(filePath, direction = 'scss-to-css') { - const mapFile = fs.readFileSync(path.resolve(__dirname,`./build/${direction}.json`), 'utf-8'); - const variablesMap = JSON.parse(mapFile); +async function replaceVariablesUsage(filePath, variablesMap, direction = 'scss-to-css') { let variableRegex; let result = ''; @@ -69,8 +67,91 @@ async function replaceVariables(filePath, direction = 'scss-to-css') { fs.writeFileSync(filePath, result); } +/** + * Replaces SCSS variables definition with value from design tokens + * + * @async + * @param {string} pathToStylesheet - full path to the stylesheet where to perform replacement + * @param {Object} variablesMap - object that contains variables definitions to use during replacement + */ +async function replaceVariablesDefinitions(pathToStylesheet, variablesMap) { + const fileStream = fs.createReadStream(pathToStylesheet); + + const rl = readline.createInterface({ + input: fileStream, + crlfDelay: Infinity, + }); + + let result = ''; + let currentVar = ''; + let currentValue = ''; + + function processVariable() { + if (currentVar) { + if (currentVar in variablesMap) { + result += `${currentVar}: ${variablesMap[currentVar]} !default;\n`; + } else { + result += `${currentVar}:${currentValue}`; + } + } else { + result += currentValue; + } + } + + // eslint-disable-next-line no-restricted-syntax + for await (const line of rl) { + if (line.startsWith('$')) { + processVariable(); + [currentVar, ...currentValue] = line.split(':'); + currentValue = `${currentValue.join(':')}\n`; + } else if (!line.trim() || line.startsWith('\\')) { + processVariable(); + currentVar = ''; + currentValue = `${line}\n`; + } else { + currentValue += `${line}\n`; + } + } + + // last variable was not covered by the loop + processVariable(); + + fs.writeFileSync(pathToStylesheet, result); +} + +/** + * Update SCSS variables definitions or usages in given path with CSS variables derived from design tokens + * + * @param {string} location - path where to update variables + * @param {Object} variablesMap - SCSS-to-CSS or CSS-to-SCSS mapping of the variables + * @param {string} transformType - type of operation, one of ['definition', 'usage']. + * 'definition' will replace SCSS variables definitions with CSS ones, while 'usage' will replace all occurrences + * of SCSS / CSS variables (depends on the direction parameter). + * @param {Array[string]} excludePaths - exclude paths from the search + * @param {string} direction - replacement direction of variables, takes effect only when transformType === 'usage'. + * Can be either 'scss-to-css' or 'css-to-scss'. + * @return {Promise} + */ +async function transformInPath(location, variablesMap, transformType = 'definition', excludePaths = [], direction = 'scss-to-css') { + const content = fs.statSync(location); + if (content.isDirectory()) { + const contentPaths = fs.readdirSync(location); + contentPaths.forEach(contentPath => { + if (!excludePaths.includes(contentPath)) { + transformInPath(path.join(location, contentPath), variablesMap, transformType, excludePaths, direction); + } + }); + } else if (location.endsWith('.scss')) { + if (transformType === 'usage') { + await replaceVariablesUsage(location, variablesMap, direction); + } else { + await replaceVariablesDefinitions(location, variablesMap); + } + } +} + module.exports = { getFilesWithExtension, getSCSStoCSSMap, - replaceVariables, + transformInPath, }; From e91704673051d4f90fbb883347a0da3be98cf0b2 Mon Sep 17 00:00:00 2001 From: Viktor Rusakov Date: Wed, 2 Nov 2022 10:27:10 +0200 Subject: [PATCH 13/19] feat: introduce initial alias tokens --- scss/core/tokens.css | 85 ++++++++++--------- tokens/build/_variables.scss | 85 ++++++++++--------- tokens/build/css-to-scss.json | 2 +- tokens/build/scss-to-css.json | 2 +- tokens/build/variables.css | 85 ++++++++++--------- tokens/source/alias/color.json | 9 +- tokens/source/components/Button.json | 2 +- tokens/source/components/Card.json | 2 +- tokens/source/components/DataTable.json | 2 +- tokens/source/components/Dropdown.json | 8 +- tokens/source/components/Form.json | 16 ++-- tokens/source/components/Modal.json | 2 +- tokens/source/components/Nav.json | 4 +- tokens/source/components/Navbar.json | 2 +- tokens/source/components/Pagination.json | 10 +-- tokens/source/components/Popover.json | 2 +- .../source/components/general/component.json | 8 -- tokens/source/components/general/input.json | 2 +- tokens/source/components/general/link.json | 4 +- tokens/source/components/general/list.json | 6 +- 20 files changed, 173 insertions(+), 165 deletions(-) delete mode 100644 tokens/source/components/general/component.json diff --git a/scss/core/tokens.css b/scss/core/tokens.css index 0868fabc0e..b4552ec1f6 100644 --- a/scss/core/tokens.css +++ b/scss/core/tokens.css @@ -617,7 +617,6 @@ --pgn-popover-body-padding-y: var(--pgn-popover-header-padding-y); --pgn-popover-border-border: var(--pgn-border-width); --pgn-popover-border-radius: var(--pgn-border-radius-sm); - --pgn-popover-bg: var(--pgn-color-white); --pgn-popover-font-size: var(--pgn-font-size-sm); --pgn-pagination-focus-color-text: var(--pgn-color-black); --pgn-pagination-border-radius-lg: var(--pgn-border-radius-lg); @@ -628,14 +627,12 @@ --pgn-pagination-border-width: var(--pgn-border-width); --pgn-pagination-bg-disabled: var(--pgn-color-white); --pgn-pagination-bg-hover: var(--pgn-color-gray-100); - --pgn-pagination-bg-base: var(--pgn-color-white); --pgn-pagination-color-hover: var(--pgn-link-hover-color); --pgn-pagination-color-inverse: var(--pgn-color-white); --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active); --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active); --pgn-navbar-dark-toggler-border-color: rgba(var(--pgn-color-white), .1); --pgn-navbar-dark-color-disabled: rgba(var(--pgn-color-white), .25); - --pgn-navbar-dark-color-active: var(--pgn-color-white); --pgn-navbar-dark-color-hover: rgba(var(--pgn-color-white), .75); --pgn-navbar-toggler-font-size: var(--pgn-font-size-lg); --pgn-navbar-brand-font-size: var(--pgn-font-size-lg); @@ -653,7 +650,6 @@ --pgn-modal-header-border-width: var(--pgn-modal-content-border-width); --pgn-modal-backdrop-bg: var(--pgn-color-black); --pgn-modal-content-border-radius: var(--pgn-border-radius-lg); - --pgn-modal-content-bg: var(--pgn-color-white); --pgn-modal-title-line-height: var(--pgn-line-height-base); --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y); --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); @@ -670,7 +666,6 @@ --pgn-list-group-border-width: var(--pgn-border-width); --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); --pgn-list-group-bg-hover: var(--pgn-color-gray-100); - --pgn-list-group-bg-base: var(--pgn-color-white); --pgn-dt-font-weight: var(--pgn-font-weight-bold); --pgn-input-btn-border-width: var(--pgn-border-width); --pgn-input-btn-focus-box-shadow: 0 0 0 var(--pgn-input-btn-focus-width) var(--pgn-input-btn-focus-color); @@ -680,7 +675,6 @@ --pgn-hr-border-color: rgba(var(--pgn-color-black), .1); --pgn-headings-color: var(--pgn-color-black); --pgn-headings-font-weight: var(--pgn-font-weight-bold); - --pgn-component-active-color: var(--pgn-color-white); --pgn-body-color: var(--pgn-color-gray-700); --pgn-form-feedback-tooltip-border-radius: var(--pgn-border-radius-base); --pgn-form-feedback-tooltip-line-height: var(--pgn-line-height-base); @@ -705,7 +699,6 @@ --pgn-form-input-border-radius-base: var(--pgn-border-radius-base); --pgn-form-input-color-base: var(--pgn-color-gray-700); --pgn-form-input-bg-disabled: var(--pgn-color-gray-100); - --pgn-form-input-bg-base: var(--pgn-color-white); --pgn-form-input-line-height-sm: var(--pgn-input-btn-line-height-sm); --pgn-form-input-line-height-base: var(--pgn-input-btn-line-height-base); --pgn-form-input-font-size-lg: var(--pgn-input-btn-font-size-lg); @@ -730,12 +723,10 @@ --pgn-dropdown-divider-bg: var(--pgn-color-gray-100); --pgn-dropdown-border-radius-base: var(--pgn-border-radius-base); --pgn-dropdown-border-width: var(--pgn-border-width); - --pgn-dropdown-bg: var(--pgn-color-white); --pgn-dropdown-font-size: var(--pgn-font-size-base); --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item); --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); --pgn-data-table-border: 1px solid var(--pgn-color-gray-200); - --pgn-data-table-background-color: var(--pgn-color-white); --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x); --pgn-collapsible-card-spacer-y-lg: var(--pgn-card-spacer-y); --pgn-code-pre-color: var(--pgn-color-gray-900); @@ -757,7 +748,6 @@ --pgn-card-margin-grid: var(--pgn-card-margin-group); --pgn-card-margin-deck: var(--pgn-card-margin-group); --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max); - --pgn-card-bg: var(--pgn-color-white); --pgn-card-border-radius-base: var(--pgn-border-radius-base); --pgn-card-border-width: var(--pgn-border-width); --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); @@ -804,6 +794,7 @@ --pgn-color-secondary-base: var(--pgn-color-gray-700); --pgn-color-primary-500: var(--pgn-color-primary-base); --pgn-color-gray-500: var(--pgn-color-gray-base); + --pgn-color-active: var(--pgn-color-white); --pgn-color-background-base: var(--pgn-color-white); --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); @@ -812,35 +803,34 @@ --pgn-progress-bar-border-color: var(--pgn-color-gray-500); --pgn-product-tour-checkpoint-color-breadcrumb: var(--pgn-color-primary-500); --pgn-product-tour-checkpoint-color-border: var(--pgn-color-brand-500); - --pgn-popover-arrow-color: var(--pgn-popover-bg); --pgn-popover-body-color: var(--pgn-body-color); --pgn-popover-header-color: var(--pgn-headings-color); + --pgn-popover-bg: var(--pgn-color-background-base); --pgn-pagination-focus-color-base: var(--pgn-color-primary-500); --pgn-pagination-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow); - --pgn-pagination-color-disabled: var(--pgn-color-gray-500); - --pgn-pagination-color-active: var(--pgn-component-active-color); - --pgn-navbar-dark-brand-color-hover: var(--pgn-navbar-dark-color-active); - --pgn-navbar-dark-brand-color-base: var(--pgn-navbar-dark-color-active); + --pgn-pagination-bg-base: var(--pgn-color-background-base); + --pgn-pagination-color-active: var(--pgn-color-active); + --pgn-navbar-dark-color-active: var(--pgn-color-active); --pgn-navbar-toggler-border-radius: var(--pgn-btn-border-radius-base); --pgn-navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2); --pgn-navbar-brand-height: calc(var(--pgn-navbar-brand-font-size) * var(--pgn-line-height-base)); - --pgn-nav-pills-link-link-active-color: var(--pgn-component-active-color); + --pgn-nav-pills-link-link-active-color: var(--pgn-color-active); --pgn-nav-tabs-link-active-color-border: transparent transparent var(--pgn-color-primary-500); --pgn-nav-tabs-link-active-color-base: var(--pgn-color-primary-500); --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color); --pgn-modal-header-border-color: var(--pgn-border-color); + --pgn-modal-content-bg: var(--pgn-color-background-base); --pgn-modal-footer-border-width: var(--pgn-modal-header-border-width); --pgn-image-figure-caption-color: var(--pgn-color-gray-500); --pgn-text-muted: var(--pgn-color-gray-500); --pgn-list-group-action-active-color: var(--pgn-body-color); --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); - --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); - --pgn-list-group-active-color-base: var(--pgn-component-active-color); + --pgn-list-group-active-color-base: var(--pgn-color-active); + --pgn-list-group-bg-base: var(--pgn-color-background-base); --pgn-link-brand-inline-color: var(--pgn-color-brand-500); --pgn-link-brand-color: var(--pgn-color-brand-500); --pgn-link-muted-inline-color: var(--pgn-color-primary-500); --pgn-link-muted-color: var(--pgn-color-primary-500); - --pgn-component-active-bg: var(--pgn-color-primary-500); --pgn-body-bg: var(--pgn-color-background-base); --pgn-form-custom-file-button-bg: var(--pgn-form-input-group-addon-bg); --pgn-form-custom-file-color: var(--pgn-form-input-color-base); @@ -849,12 +839,8 @@ --pgn-form-custom-file-padding-x: var(--pgn-form-input-padding-x-base); --pgn-form-custom-file-padding-y: var(--pgn-form-input-padding-y-base); --pgn-form-custom-file-bg-disabled: var(--pgn-form-input-bg-disabled); - --pgn-form-custom-file-bg-base: var(--pgn-form-input-bg-base); --pgn-form-custom-file-border-color-radius: var(--pgn-form-input-border-radius-base); - --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-gray-500); --pgn-form-custom-select-border-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow); - --pgn-form-custom-select-bg-base: var(--pgn-form-input-bg-base); - --pgn-form-custom-select-color-disabled: var(--pgn-color-gray-500); --pgn-form-custom-select-color-base: var(--pgn-form-input-color-base); --pgn-form-custom-select-line-height: var(--pgn-form-input-line-height-base); --pgn-form-custom-select-font-size-lg: var(--pgn-form-input-font-size-lg); @@ -867,9 +853,8 @@ --pgn-form-custom-select-padding-y-lg: var(--pgn-form-input-padding-y-lg); --pgn-form-custom-select-padding-y-sm: var(--pgn-form-input-padding-y-sm); --pgn-form-custom-select-padding-y-base: var(--pgn-form-input-padding-y-base); - --pgn-form-custom-control-label-color-disabled: var(--pgn-color-gray-500); + --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-color-primary-500); --pgn-form-custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled); - --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base); --pgn-form-input-group-addon-color-base: var(--pgn-form-input-color-base); --pgn-form-input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2)); --pgn-form-input-height-inner-half: calc(var(--pgn-form-input-line-height-base) * .5em + var(--pgn-form-input-padding-y-base)); @@ -877,26 +862,26 @@ --pgn-form-input-height-sm: calc(var(--pgn-form-input-line-height-sm) * 1em + var(--pgn-input-btn-padding-sm-y) * 2 + var(--pgn-form-input-border-height)); --pgn-form-input-height-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2 + var(--pgn-form-input-border-height)); --pgn-form-input-focus-color-base: var(--pgn-form-input-color-base); - --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base); --pgn-form-input-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow); --pgn-form-input-border-width: var(--pgn-input-btn-border-width); --pgn-form-input-border-color: var(--pgn-color-gray-500); --pgn-form-input-color-plaintext: var(--pgn-body-color); --pgn-form-input-color-placeholder: var(--pgn-color-gray-500); + --pgn-form-input-bg-base: var(--pgn-color-background-base); --pgn-form-input-line-height-lg: var(--pgn-input-btn-line-height-lg); --pgn-form-input-font-weight: var(--pgn-font-weight-base); --pgn-dropzone-restriction-msg-color: var(--pgn-color-gray-500); --pgn-dropzone-border-active: 2px solid var(--pgn-color-primary-500); --pgn-dropzone-border-default: 1px dashed var(--pgn-color-gray-500); - --pgn-dropdown-link-disabled-color: var(--pgn-color-gray-500); - --pgn-dropdown-link-active-bg: var(--pgn-component-active-color); - --pgn-dropdown-link-active-color: var(--pgn-component-active-color); + --pgn-dropdown-link-active-color: var(--pgn-color-active); --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width)); + --pgn-dropdown-bg: var(--pgn-color-background-base); --pgn-dropdown-color-header: var(--pgn-color-gray-500); --pgn-dropdown-color-base: var(--pgn-body-color); + --pgn-data-table-background-color: var(--pgn-color-background-base); + --pgn-card-bg: var(--pgn-color-background-base); --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); - --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); --pgn-btn-border-width: var(--pgn-input-btn-border-width); --pgn-btn-line-height-lg: var(--pgn-input-btn-line-height-lg); --pgn-breadcrumb-inverse-active: var(--pgn-color-light-500); @@ -907,46 +892,64 @@ --pgn-color-info-500: var(--pgn-color-info-base); --pgn-color-success-500: var(--pgn-color-success-base); --pgn-color-secondary-500: var(--pgn-color-secondary-base); + --pgn-color-input-focus: var(--pgn-color-primary-500); + --pgn-color-disabled: var(--pgn-color-gray-500); + --pgn-color-background-active: var(--pgn-color-primary-500); --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); --pgn-popover-success-icon-color: var(--pgn-color-success-500); - --pgn-pagination-bg-active: var(--pgn-component-active-bg); - --pgn-nav-pills-link-link-active-bg: var(--pgn-component-active-bg); + --pgn-popover-arrow-color: var(--pgn-popover-bg); + --pgn-pagination-bg-active: var(--pgn-color-background-active); + --pgn-pagination-color-disabled: var(--pgn-color-disabled); + --pgn-navbar-dark-brand-color-hover: var(--pgn-navbar-dark-color-active); + --pgn-navbar-dark-brand-color-base: var(--pgn-navbar-dark-color-active); + --pgn-nav-pills-link-link-active-bg: var(--pgn-color-background-active); --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg); --pgn-modal-footer-border-color: var(--pgn-modal-header-border-color); --pgn-menu-background-active: var(--pgn-btn-tertiary-bg-active); --pgn-image-thumbnail-bg: var(--pgn-body-bg); - --pgn-list-group-active-bg: var(--pgn-component-active-bg); - --pgn-link-inline-color: var(--pgn-color-info-500); - --pgn-link-color: var(--pgn-color-info-500); - --pgn-input-btn-focus-color: var(--pgn-component-active-bg); + --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); + --pgn-list-group-active-bg: var(--pgn-color-background-active); + --pgn-input-btn-focus-color: var(--pgn-color-input-focus); --pgn-form-custom-file-button-color: var(--pgn-form-custom-file-color); --pgn-form-custom-file-font-weight: var(--pgn-form-input-font-weight); + --pgn-form-custom-file-bg-base: var(--pgn-form-input-bg-base); --pgn-form-custom-file-box-shadow-focus: var(--pgn-form-input-box-shadow-focus); --pgn-form-custom-file-border-width: var(--pgn-form-input-border-width); --pgn-form-custom-file-border-color-base: var(--pgn-form-input-border-color); --pgn-form-custom-file-height-inner: var(--pgn-form-input-height-inner-base); --pgn-form-custom-file-height-base: var(--pgn-form-input-height-base); --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus); - --pgn-form-custom-range-thumb-bg-base: var(--pgn-component-active-bg); + --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-disabled); + --pgn-form-custom-range-thumb-bg-base: var(--pgn-color-background-active); --pgn-form-custom-select-height-sm: var(--pgn-form-input-height-sm); --pgn-form-custom-select-border-color-base: var(--pgn-form-input-border-color); --pgn-form-custom-select-border-width-base: var(--pgn-form-input-border-width); --pgn-form-custom-select-feedback-icon-size: var(--pgn-form-input-height-inner-half) var(--pgn-form-input-height-inner-half); --pgn-form-custom-select-feedback-icon-position: center right calc(var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding)); --pgn-form-custom-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-form-custom-select-padding-y-base)) * 3 / 4 + var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding)); + --pgn-form-custom-select-bg-base: var(--pgn-form-input-bg-base); + --pgn-form-custom-select-color-disabled: var(--pgn-color-disabled); --pgn-form-custom-select-font-weight: var(--pgn-form-input-font-weight); --pgn-form-custom-select-font-height-base: var(--pgn-form-input-height-base); - --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-component-active-bg); - --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-component-active-bg); + --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-color-background-active); + --pgn-form-custom-control-label-color-disabled: var(--pgn-color-disabled); + --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base); --pgn-form-input-group-addon-color-border: var(--pgn-form-input-border-color); --pgn-form-input-height-lg: calc(var(--pgn-form-input-line-height-lg) * 1em + var(--pgn-input-btn-padding-lg-y) * 2 + var(--pgn-form-input-border-height)); - --pgn-form-input-focus-color-border: var(--pgn-component-active-bg); + --pgn-form-input-focus-color-border: var(--pgn-color-input-focus); + --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base); --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); + --pgn-dropdown-link-disabled-color: var(--pgn-color-disabled); + --pgn-dropdown-link-active-bg: var(--pgn-color-background-active); + --pgn-btn-disabled-link-color: var(--pgn-color-disabled); + --pgn-color-link: var(--pgn-color-info-500); --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); - --pgn-pagination-color-base: var(--pgn-link-color); + --pgn-pagination-color-base: var(--pgn-color-link); --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); + --pgn-link-inline-color: var(--pgn-color-link); + --pgn-link-color: var(--pgn-color-link); --pgn-form-custom-file-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-font-height-lg: var(--pgn-form-input-height-lg); diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss index a6d1620cd2..7a468752ef 100644 --- a/tokens/build/_variables.scss +++ b/tokens/build/_variables.scss @@ -616,7 +616,6 @@ $pgn-popover-body-padding-x: $pgn-popover-header-padding-x !default; $pgn-popover-body-padding-y: $pgn-popover-header-padding-y !default; $pgn-popover-border-border: $pgn-border-width !default; $pgn-popover-border-radius: $pgn-border-radius-sm !default; -$pgn-popover-bg: $pgn-color-white !default; $pgn-popover-font-size: $pgn-font-size-sm !default; $pgn-pagination-focus-color-text: $pgn-color-black !default; $pgn-pagination-border-radius-lg: $pgn-border-radius-lg !default; @@ -627,14 +626,12 @@ $pgn-pagination-border-color-base: $pgn-color-gray-200 !default; $pgn-pagination-border-width: $pgn-border-width !default; $pgn-pagination-bg-disabled: $pgn-color-white !default; $pgn-pagination-bg-hover: $pgn-color-gray-100 !default; -$pgn-pagination-bg-base: $pgn-color-white !default; $pgn-pagination-color-hover: $pgn-link-hover-color !default; $pgn-pagination-color-inverse: $pgn-color-white !default; $pgn-navbar-light-brand-color-hover: $pgn-navbar-light-color-active !default; $pgn-navbar-light-brand-color-base: $pgn-navbar-light-color-active !default; $pgn-navbar-dark-toggler-border-color: rgba($pgn-color-white, .1) !default; $pgn-navbar-dark-color-disabled: rgba($pgn-color-white, .25) !default; -$pgn-navbar-dark-color-active: $pgn-color-white !default; $pgn-navbar-dark-color-hover: rgba($pgn-color-white, .75) !default; $pgn-navbar-toggler-font-size: $pgn-font-size-lg !default; $pgn-navbar-brand-font-size: $pgn-font-size-lg !default; @@ -652,7 +649,6 @@ $pgn-modal-header-padding-base: $pgn-modal-header-padding-y $pgn-modal-header-pa $pgn-modal-header-border-width: $pgn-modal-content-border-width !default; $pgn-modal-backdrop-bg: $pgn-color-black !default; $pgn-modal-content-border-radius: $pgn-border-radius-lg !default; -$pgn-modal-content-bg: $pgn-color-white !default; $pgn-modal-title-line-height: $pgn-line-height-base !default; $pgn-modal-footer-padding-base: $pgn-modal-footer-padding-x $pgn-modal-footer-padding-y !default; $pgn-image-thumbnail-border-radius: $pgn-border-radius-base !default; @@ -669,7 +665,6 @@ $pgn-list-group-border-radius: $pgn-border-radius-base !default; $pgn-list-group-border-width: $pgn-border-width !default; $pgn-list-group-border-color: rgba($pgn-color-black, .125) !default; $pgn-list-group-bg-hover: $pgn-color-gray-100 !default; -$pgn-list-group-bg-base: $pgn-color-white !default; $pgn-dt-font-weight: $pgn-font-weight-bold !default; $pgn-input-btn-border-width: $pgn-border-width !default; $pgn-input-btn-focus-box-shadow: 0 0 0 $pgn-input-btn-focus-width $pgn-input-btn-focus-color !default; @@ -679,7 +674,6 @@ $pgn-hr-border-width: $pgn-border-width !default; $pgn-hr-border-color: rgba($pgn-color-black, .1) !default; $pgn-headings-color: $pgn-color-black !default; $pgn-headings-font-weight: $pgn-font-weight-bold !default; -$pgn-component-active-color: $pgn-color-white !default; $pgn-body-color: $pgn-color-gray-700 !default; $pgn-form-feedback-tooltip-border-radius: $pgn-border-radius-base !default; $pgn-form-feedback-tooltip-line-height: $pgn-line-height-base !default; @@ -704,7 +698,6 @@ $pgn-form-input-border-radius-lg: $pgn-border-radius-lg !default; $pgn-form-input-border-radius-base: $pgn-border-radius-base !default; $pgn-form-input-color-base: $pgn-color-gray-700 !default; $pgn-form-input-bg-disabled: $pgn-color-gray-100 !default; -$pgn-form-input-bg-base: $pgn-color-white !default; $pgn-form-input-line-height-sm: $pgn-input-btn-line-height-sm !default; $pgn-form-input-line-height-base: $pgn-input-btn-line-height-base !default; $pgn-form-input-font-size-lg: $pgn-input-btn-font-size-lg !default; @@ -729,12 +722,10 @@ $pgn-dropdown-divider-margin-y: calc($pgn-spacer-base / 2) !default; $pgn-dropdown-divider-bg: $pgn-color-gray-100 !default; $pgn-dropdown-border-radius-base: $pgn-border-radius-base !default; $pgn-dropdown-border-width: $pgn-border-width !default; -$pgn-dropdown-bg: $pgn-color-white !default; $pgn-dropdown-font-size: $pgn-font-size-base !default; $pgn-dropdown-padding-header: $pgn-dropdown-padding-y-base $pgn-dropdown-padding-x-item !default; $pgn-data-table-box-shadow: $pgn-box-shadow-sm !default; $pgn-data-table-border: 1px solid $pgn-color-gray-200 !default; -$pgn-data-table-background-color: $pgn-color-white !default; $pgn-collapsible-card-spacer-x-lg: $pgn-card-spacer-x !default; $pgn-collapsible-card-spacer-y-lg: $pgn-card-spacer-y !default; $pgn-code-pre-color: $pgn-color-gray-900 !default; @@ -756,7 +747,6 @@ $pgn-card-columns-margin: $pgn-card-spacer-y !default; $pgn-card-margin-grid: $pgn-card-margin-group !default; $pgn-card-margin-deck: $pgn-card-margin-group !default; $pgn-card-image-horizontal-width-min: $pgn-card-image-horizontal-width-max !default; -$pgn-card-bg: $pgn-color-white !default; $pgn-card-border-radius-base: $pgn-border-radius-base !default; $pgn-card-border-width: $pgn-border-width !default; $pgn-btn-tertiary-inverse-bg-active: $pgn-btn-tertiary-inverse-bg-hover !default; @@ -803,6 +793,7 @@ $pgn-color-brand-500: $pgn-color-brand-base !default; $pgn-color-secondary-base: $pgn-color-gray-700 !default; $pgn-color-primary-500: $pgn-color-primary-base !default; $pgn-color-gray-500: $pgn-color-gray-base !default; +$pgn-color-active: $pgn-color-white !default; $pgn-color-background-base: $pgn-color-white !default; $pgn-tooltip-arrow-color-base: $pgn-tooltip-bg-base !default; $pgn-search-field-input-height-search: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2) !default; @@ -811,35 +802,34 @@ $pgn-progress-bar-bar-bg-annotated: $pgn-color-dark-500 !default; $pgn-progress-bar-border-color: $pgn-color-gray-500 !default; $pgn-product-tour-checkpoint-color-breadcrumb: $pgn-color-primary-500 !default; $pgn-product-tour-checkpoint-color-border: $pgn-color-brand-500 !default; -$pgn-popover-arrow-color: $pgn-popover-bg !default; $pgn-popover-body-color: $pgn-body-color !default; $pgn-popover-header-color: $pgn-headings-color !default; +$pgn-popover-bg: $pgn-color-background-base !default; $pgn-pagination-focus-color-base: $pgn-color-primary-500 !default; $pgn-pagination-focus-box-shadow: $pgn-input-btn-focus-box-shadow !default; -$pgn-pagination-color-disabled: $pgn-color-gray-500 !default; -$pgn-pagination-color-active: $pgn-component-active-color !default; -$pgn-navbar-dark-brand-color-hover: $pgn-navbar-dark-color-active !default; -$pgn-navbar-dark-brand-color-base: $pgn-navbar-dark-color-active !default; +$pgn-pagination-bg-base: $pgn-color-background-base !default; +$pgn-pagination-color-active: $pgn-color-active !default; +$pgn-navbar-dark-color-active: $pgn-color-active !default; $pgn-navbar-toggler-border-radius: $pgn-btn-border-radius-base !default; $pgn-navbar-brand-padding-y: calc(($pgn-navbar-nav-link-height - $pgn-navbar-brand-height) / 2) !default; $pgn-navbar-brand-height: calc($pgn-navbar-brand-font-size * $pgn-line-height-base) !default; -$pgn-nav-pills-link-link-active-color: $pgn-component-active-color !default; +$pgn-nav-pills-link-link-active-color: $pgn-color-active !default; $pgn-nav-tabs-link-active-color-border: transparent transparent $pgn-color-primary-500 !default; $pgn-nav-tabs-link-active-color-base: $pgn-color-primary-500 !default; $pgn-nav-tabs-link-hover-border-color: transparent transparent $pgn-nav-tabs-border-color !default; $pgn-modal-header-border-color: $pgn-border-color !default; +$pgn-modal-content-bg: $pgn-color-background-base !default; $pgn-modal-footer-border-width: $pgn-modal-header-border-width !default; $pgn-image-figure-caption-color: $pgn-color-gray-500 !default; $pgn-text-muted: $pgn-color-gray-500 !default; $pgn-list-group-action-active-color: $pgn-body-color !default; $pgn-list-group-action-color-hover: $pgn-list-group-action-color-base !default; -$pgn-list-group-disabled-bg: $pgn-list-group-bg-base !default; -$pgn-list-group-active-color-base: $pgn-component-active-color !default; +$pgn-list-group-active-color-base: $pgn-color-active !default; +$pgn-list-group-bg-base: $pgn-color-background-base !default; $pgn-link-brand-inline-color: $pgn-color-brand-500 !default; $pgn-link-brand-color: $pgn-color-brand-500 !default; $pgn-link-muted-inline-color: $pgn-color-primary-500 !default; $pgn-link-muted-color: $pgn-color-primary-500 !default; -$pgn-component-active-bg: $pgn-color-primary-500 !default; $pgn-body-bg: $pgn-color-background-base !default; $pgn-form-custom-file-button-bg: $pgn-form-input-group-addon-bg !default; $pgn-form-custom-file-color: $pgn-form-input-color-base !default; @@ -848,12 +838,8 @@ $pgn-form-custom-file-line-height: $pgn-form-input-line-height-base !default; $pgn-form-custom-file-padding-x: $pgn-form-input-padding-x-base !default; $pgn-form-custom-file-padding-y: $pgn-form-input-padding-y-base !default; $pgn-form-custom-file-bg-disabled: $pgn-form-input-bg-disabled !default; -$pgn-form-custom-file-bg-base: $pgn-form-input-bg-base !default; $pgn-form-custom-file-border-color-radius: $pgn-form-input-border-radius-base !default; -$pgn-form-custom-range-thumb-bg-disabled: $pgn-color-gray-500 !default; $pgn-form-custom-select-border-box-shadow-focus: $pgn-input-btn-focus-box-shadow !default; -$pgn-form-custom-select-bg-base: $pgn-form-input-bg-base !default; -$pgn-form-custom-select-color-disabled: $pgn-color-gray-500 !default; $pgn-form-custom-select-color-base: $pgn-form-input-color-base !default; $pgn-form-custom-select-line-height: $pgn-form-input-line-height-base !default; $pgn-form-custom-select-font-size-lg: $pgn-form-input-font-size-lg !default; @@ -866,9 +852,8 @@ $pgn-form-custom-select-padding-x-base: $pgn-form-input-padding-x-base !default; $pgn-form-custom-select-padding-y-lg: $pgn-form-input-padding-y-lg !default; $pgn-form-custom-select-padding-y-sm: $pgn-form-input-padding-y-sm !default; $pgn-form-custom-select-padding-y-base: $pgn-form-input-padding-y-base !default; -$pgn-form-custom-control-label-color-disabled: $pgn-color-gray-500 !default; +$pgn-form-custom-control-indicator-checked-border-color-base: $pgn-color-primary-500 !default; $pgn-form-custom-control-indicator-disabled-bg: $pgn-form-input-bg-disabled !default; -$pgn-form-custom-control-indicator-bg-base: $pgn-form-input-bg-base !default; $pgn-form-input-group-addon-color-base: $pgn-form-input-color-base !default; $pgn-form-input-height-inner-quarter: calc($pgn-form-input-line-height-base * .25em + calc($pgn-form-input-padding-y-base / 2)) !default; $pgn-form-input-height-inner-half: calc($pgn-form-input-line-height-base * .5em + $pgn-form-input-padding-y-base) !default; @@ -876,26 +861,26 @@ $pgn-form-input-height-inner-base: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-height-sm: calc($pgn-form-input-line-height-sm * 1em + $pgn-input-btn-padding-sm-y * 2 + $pgn-form-input-border-height) !default; $pgn-form-input-height-base: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2 + $pgn-form-input-border-height) !default; $pgn-form-input-focus-color-base: $pgn-form-input-color-base !default; -$pgn-form-input-focus-bg: $pgn-form-input-bg-base !default; $pgn-form-input-box-shadow-focus: $pgn-input-btn-focus-box-shadow !default; $pgn-form-input-border-width: $pgn-input-btn-border-width !default; $pgn-form-input-border-color: $pgn-color-gray-500 !default; $pgn-form-input-color-plaintext: $pgn-body-color !default; $pgn-form-input-color-placeholder: $pgn-color-gray-500 !default; +$pgn-form-input-bg-base: $pgn-color-background-base !default; $pgn-form-input-line-height-lg: $pgn-input-btn-line-height-lg !default; $pgn-form-input-font-weight: $pgn-font-weight-base !default; $pgn-dropzone-restriction-msg-color: $pgn-color-gray-500 !default; $pgn-dropzone-border-active: 2px solid $pgn-color-primary-500 !default; $pgn-dropzone-border-default: 1px dashed $pgn-color-gray-500 !default; -$pgn-dropdown-link-disabled-color: $pgn-color-gray-500 !default; -$pgn-dropdown-link-active-bg: $pgn-component-active-color !default; -$pgn-dropdown-link-active-color: $pgn-component-active-color !default; +$pgn-dropdown-link-active-color: $pgn-color-active !default; $pgn-dropdown-border-radius-inner: calc($pgn-dropdown-border-radius-base - $pgn-dropdown-border-width) !default; +$pgn-dropdown-bg: $pgn-color-background-base !default; $pgn-dropdown-color-header: $pgn-color-gray-500 !default; $pgn-dropdown-color-base: $pgn-body-color !default; +$pgn-data-table-background-color: $pgn-color-background-base !default; +$pgn-card-bg: $pgn-color-background-base !default; $pgn-btn-tertiary-bg-active: $pgn-color-light-500 !default; $pgn-btn-tertiary-bg-hover: $pgn-color-light-500 !default; -$pgn-btn-disabled-link-color: $pgn-color-gray-500 !default; $pgn-btn-border-width: $pgn-input-btn-border-width !default; $pgn-btn-line-height-lg: $pgn-input-btn-line-height-lg !default; $pgn-breadcrumb-inverse-active: $pgn-color-light-500 !default; @@ -906,46 +891,64 @@ $pgn-color-warning-500: $pgn-color-warning-base !default; $pgn-color-info-500: $pgn-color-info-base !default; $pgn-color-success-500: $pgn-color-success-base !default; $pgn-color-secondary-500: $pgn-color-secondary-base !default; +$pgn-color-input-focus: $pgn-color-primary-500 !default; +$pgn-color-disabled: $pgn-color-gray-500 !default; +$pgn-color-background-active: $pgn-color-primary-500 !default; $pgn-popover-danger-icon-color: $pgn-color-warning-500 !default; $pgn-popover-warning-icon-color: $pgn-color-warning-500 !default; $pgn-popover-success-icon-color: $pgn-color-success-500 !default; -$pgn-pagination-bg-active: $pgn-component-active-bg !default; -$pgn-nav-pills-link-link-active-bg: $pgn-component-active-bg !default; +$pgn-popover-arrow-color: $pgn-popover-bg !default; +$pgn-pagination-bg-active: $pgn-color-background-active !default; +$pgn-pagination-color-disabled: $pgn-color-disabled !default; +$pgn-navbar-dark-brand-color-hover: $pgn-navbar-dark-color-active !default; +$pgn-navbar-dark-brand-color-base: $pgn-navbar-dark-color-active !default; +$pgn-nav-pills-link-link-active-bg: $pgn-color-background-active !default; $pgn-nav-tabs-link-active-bg: $pgn-body-bg !default; $pgn-modal-footer-border-color: $pgn-modal-header-border-color !default; $pgn-menu-background-active: $pgn-btn-tertiary-bg-active !default; $pgn-image-thumbnail-bg: $pgn-body-bg !default; -$pgn-list-group-active-bg: $pgn-component-active-bg !default; -$pgn-link-inline-color: $pgn-color-info-500 !default; -$pgn-link-color: $pgn-color-info-500 !default; -$pgn-input-btn-focus-color: $pgn-component-active-bg !default; +$pgn-list-group-disabled-bg: $pgn-list-group-bg-base !default; +$pgn-list-group-active-bg: $pgn-color-background-active !default; +$pgn-input-btn-focus-color: $pgn-color-input-focus !default; $pgn-form-custom-file-button-color: $pgn-form-custom-file-color !default; $pgn-form-custom-file-font-weight: $pgn-form-input-font-weight !default; +$pgn-form-custom-file-bg-base: $pgn-form-input-bg-base !default; $pgn-form-custom-file-box-shadow-focus: $pgn-form-input-box-shadow-focus !default; $pgn-form-custom-file-border-width: $pgn-form-input-border-width !default; $pgn-form-custom-file-border-color-base: $pgn-form-input-border-color !default; $pgn-form-custom-file-height-inner: $pgn-form-input-height-inner-base !default; $pgn-form-custom-file-height-base: $pgn-form-input-height-base !default; $pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px $pgn-body-bg, $pgn-form-input-box-shadow-focus !default; -$pgn-form-custom-range-thumb-bg-base: $pgn-component-active-bg !default; +$pgn-form-custom-range-thumb-bg-disabled: $pgn-color-disabled !default; +$pgn-form-custom-range-thumb-bg-base: $pgn-color-background-active !default; $pgn-form-custom-select-height-sm: $pgn-form-input-height-sm !default; $pgn-form-custom-select-border-color-base: $pgn-form-input-border-color !default; $pgn-form-custom-select-border-width-base: $pgn-form-input-border-width !default; $pgn-form-custom-select-feedback-icon-size: $pgn-form-input-height-inner-half $pgn-form-input-height-inner-half !default; $pgn-form-custom-select-feedback-icon-position: center right calc($pgn-form-custom-select-padding-x-base + $pgn-form-custom-select-indicator-padding) !default; $pgn-form-custom-select-feedback-icon-padding-right: calc((1em + 2 * $pgn-form-custom-select-padding-y-base) * 3 / 4 + $pgn-form-custom-select-padding-x-base + $pgn-form-custom-select-indicator-padding) !default; +$pgn-form-custom-select-bg-base: $pgn-form-input-bg-base !default; +$pgn-form-custom-select-color-disabled: $pgn-color-disabled !default; $pgn-form-custom-select-font-weight: $pgn-form-input-font-weight !default; $pgn-form-custom-select-font-height-base: $pgn-form-input-height-base !default; -$pgn-form-custom-checkbox-indicator-indeterminate-bg: $pgn-component-active-bg !default; -$pgn-form-custom-control-indicator-checked-border-color-base: $pgn-component-active-bg !default; +$pgn-form-custom-checkbox-indicator-indeterminate-bg: $pgn-color-background-active !default; +$pgn-form-custom-control-label-color-disabled: $pgn-color-disabled !default; +$pgn-form-custom-control-indicator-bg-base: $pgn-form-input-bg-base !default; $pgn-form-input-group-addon-color-border: $pgn-form-input-border-color !default; $pgn-form-input-height-lg: calc($pgn-form-input-line-height-lg * 1em + $pgn-input-btn-padding-lg-y * 2 + $pgn-form-input-border-height) !default; -$pgn-form-input-focus-color-border: $pgn-component-active-bg !default; +$pgn-form-input-focus-color-border: $pgn-color-input-focus !default; +$pgn-form-input-focus-bg: $pgn-form-input-bg-base !default; $pgn-form-input-border-height: calc($pgn-form-input-border-width * 2) !default; $pgn-dropzone-error-wrapper-color: $pgn-color-danger-500 !default; +$pgn-dropdown-link-disabled-color: $pgn-color-disabled !default; +$pgn-dropdown-link-active-bg: $pgn-color-background-active !default; +$pgn-btn-disabled-link-color: $pgn-color-disabled !default; +$pgn-color-link: $pgn-color-info-500 !default; $pgn-pagination-border-color-active: $pgn-pagination-bg-active !default; -$pgn-pagination-color-base: $pgn-link-color !default; +$pgn-pagination-color-base: $pgn-color-link !default; $pgn-list-group-active-color-border: $pgn-list-group-active-bg !default; +$pgn-link-inline-color: $pgn-color-link !default; +$pgn-link-color: $pgn-color-link !default; $pgn-form-custom-file-border-color-focus: $pgn-form-input-focus-color-border !default; $pgn-form-custom-select-border-color-focus: $pgn-form-input-focus-color-border !default; $pgn-form-custom-select-font-height-lg: $pgn-form-input-height-lg !default; diff --git a/tokens/build/css-to-scss.json b/tokens/build/css-to-scss.json index b922f319c4..2358382626 100644 --- a/tokens/build/css-to-scss.json +++ b/tokens/build/css-to-scss.json @@ -1 +1 @@ -{"var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-width)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-box-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-border)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-component-active-color)":"$component-active-color","var(--pgn-component-active-bg)":"$component-active-bg","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-brand-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"} \ No newline at end of file +{"var(--pgn-color-background-active)":"$component-active-bg","var(--pgn-color-active)":"$component-active-color","var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-width)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-box-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-border)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-brand-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"} \ No newline at end of file diff --git a/tokens/build/scss-to-css.json b/tokens/build/scss-to-css.json index 2a5db921ec..ec50cfa438 100644 --- a/tokens/build/scss-to-css.json +++ b/tokens/build/scss-to-css.json @@ -1 +1 @@ -{"$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-width)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-box-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-border)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$component-active-color":"var(--pgn-component-active-color)","$component-active-bg":"var(--pgn-component-active-bg)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"} \ No newline at end of file +{"$component-active-bg":"var(--pgn-color-background-active)","$component-active-color":"var(--pgn-color-active)","$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-width)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-box-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-border)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"} \ No newline at end of file diff --git a/tokens/build/variables.css b/tokens/build/variables.css index 0868fabc0e..b4552ec1f6 100644 --- a/tokens/build/variables.css +++ b/tokens/build/variables.css @@ -617,7 +617,6 @@ --pgn-popover-body-padding-y: var(--pgn-popover-header-padding-y); --pgn-popover-border-border: var(--pgn-border-width); --pgn-popover-border-radius: var(--pgn-border-radius-sm); - --pgn-popover-bg: var(--pgn-color-white); --pgn-popover-font-size: var(--pgn-font-size-sm); --pgn-pagination-focus-color-text: var(--pgn-color-black); --pgn-pagination-border-radius-lg: var(--pgn-border-radius-lg); @@ -628,14 +627,12 @@ --pgn-pagination-border-width: var(--pgn-border-width); --pgn-pagination-bg-disabled: var(--pgn-color-white); --pgn-pagination-bg-hover: var(--pgn-color-gray-100); - --pgn-pagination-bg-base: var(--pgn-color-white); --pgn-pagination-color-hover: var(--pgn-link-hover-color); --pgn-pagination-color-inverse: var(--pgn-color-white); --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active); --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active); --pgn-navbar-dark-toggler-border-color: rgba(var(--pgn-color-white), .1); --pgn-navbar-dark-color-disabled: rgba(var(--pgn-color-white), .25); - --pgn-navbar-dark-color-active: var(--pgn-color-white); --pgn-navbar-dark-color-hover: rgba(var(--pgn-color-white), .75); --pgn-navbar-toggler-font-size: var(--pgn-font-size-lg); --pgn-navbar-brand-font-size: var(--pgn-font-size-lg); @@ -653,7 +650,6 @@ --pgn-modal-header-border-width: var(--pgn-modal-content-border-width); --pgn-modal-backdrop-bg: var(--pgn-color-black); --pgn-modal-content-border-radius: var(--pgn-border-radius-lg); - --pgn-modal-content-bg: var(--pgn-color-white); --pgn-modal-title-line-height: var(--pgn-line-height-base); --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y); --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); @@ -670,7 +666,6 @@ --pgn-list-group-border-width: var(--pgn-border-width); --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); --pgn-list-group-bg-hover: var(--pgn-color-gray-100); - --pgn-list-group-bg-base: var(--pgn-color-white); --pgn-dt-font-weight: var(--pgn-font-weight-bold); --pgn-input-btn-border-width: var(--pgn-border-width); --pgn-input-btn-focus-box-shadow: 0 0 0 var(--pgn-input-btn-focus-width) var(--pgn-input-btn-focus-color); @@ -680,7 +675,6 @@ --pgn-hr-border-color: rgba(var(--pgn-color-black), .1); --pgn-headings-color: var(--pgn-color-black); --pgn-headings-font-weight: var(--pgn-font-weight-bold); - --pgn-component-active-color: var(--pgn-color-white); --pgn-body-color: var(--pgn-color-gray-700); --pgn-form-feedback-tooltip-border-radius: var(--pgn-border-radius-base); --pgn-form-feedback-tooltip-line-height: var(--pgn-line-height-base); @@ -705,7 +699,6 @@ --pgn-form-input-border-radius-base: var(--pgn-border-radius-base); --pgn-form-input-color-base: var(--pgn-color-gray-700); --pgn-form-input-bg-disabled: var(--pgn-color-gray-100); - --pgn-form-input-bg-base: var(--pgn-color-white); --pgn-form-input-line-height-sm: var(--pgn-input-btn-line-height-sm); --pgn-form-input-line-height-base: var(--pgn-input-btn-line-height-base); --pgn-form-input-font-size-lg: var(--pgn-input-btn-font-size-lg); @@ -730,12 +723,10 @@ --pgn-dropdown-divider-bg: var(--pgn-color-gray-100); --pgn-dropdown-border-radius-base: var(--pgn-border-radius-base); --pgn-dropdown-border-width: var(--pgn-border-width); - --pgn-dropdown-bg: var(--pgn-color-white); --pgn-dropdown-font-size: var(--pgn-font-size-base); --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item); --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); --pgn-data-table-border: 1px solid var(--pgn-color-gray-200); - --pgn-data-table-background-color: var(--pgn-color-white); --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x); --pgn-collapsible-card-spacer-y-lg: var(--pgn-card-spacer-y); --pgn-code-pre-color: var(--pgn-color-gray-900); @@ -757,7 +748,6 @@ --pgn-card-margin-grid: var(--pgn-card-margin-group); --pgn-card-margin-deck: var(--pgn-card-margin-group); --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max); - --pgn-card-bg: var(--pgn-color-white); --pgn-card-border-radius-base: var(--pgn-border-radius-base); --pgn-card-border-width: var(--pgn-border-width); --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); @@ -804,6 +794,7 @@ --pgn-color-secondary-base: var(--pgn-color-gray-700); --pgn-color-primary-500: var(--pgn-color-primary-base); --pgn-color-gray-500: var(--pgn-color-gray-base); + --pgn-color-active: var(--pgn-color-white); --pgn-color-background-base: var(--pgn-color-white); --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); @@ -812,35 +803,34 @@ --pgn-progress-bar-border-color: var(--pgn-color-gray-500); --pgn-product-tour-checkpoint-color-breadcrumb: var(--pgn-color-primary-500); --pgn-product-tour-checkpoint-color-border: var(--pgn-color-brand-500); - --pgn-popover-arrow-color: var(--pgn-popover-bg); --pgn-popover-body-color: var(--pgn-body-color); --pgn-popover-header-color: var(--pgn-headings-color); + --pgn-popover-bg: var(--pgn-color-background-base); --pgn-pagination-focus-color-base: var(--pgn-color-primary-500); --pgn-pagination-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow); - --pgn-pagination-color-disabled: var(--pgn-color-gray-500); - --pgn-pagination-color-active: var(--pgn-component-active-color); - --pgn-navbar-dark-brand-color-hover: var(--pgn-navbar-dark-color-active); - --pgn-navbar-dark-brand-color-base: var(--pgn-navbar-dark-color-active); + --pgn-pagination-bg-base: var(--pgn-color-background-base); + --pgn-pagination-color-active: var(--pgn-color-active); + --pgn-navbar-dark-color-active: var(--pgn-color-active); --pgn-navbar-toggler-border-radius: var(--pgn-btn-border-radius-base); --pgn-navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2); --pgn-navbar-brand-height: calc(var(--pgn-navbar-brand-font-size) * var(--pgn-line-height-base)); - --pgn-nav-pills-link-link-active-color: var(--pgn-component-active-color); + --pgn-nav-pills-link-link-active-color: var(--pgn-color-active); --pgn-nav-tabs-link-active-color-border: transparent transparent var(--pgn-color-primary-500); --pgn-nav-tabs-link-active-color-base: var(--pgn-color-primary-500); --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color); --pgn-modal-header-border-color: var(--pgn-border-color); + --pgn-modal-content-bg: var(--pgn-color-background-base); --pgn-modal-footer-border-width: var(--pgn-modal-header-border-width); --pgn-image-figure-caption-color: var(--pgn-color-gray-500); --pgn-text-muted: var(--pgn-color-gray-500); --pgn-list-group-action-active-color: var(--pgn-body-color); --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base); - --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); - --pgn-list-group-active-color-base: var(--pgn-component-active-color); + --pgn-list-group-active-color-base: var(--pgn-color-active); + --pgn-list-group-bg-base: var(--pgn-color-background-base); --pgn-link-brand-inline-color: var(--pgn-color-brand-500); --pgn-link-brand-color: var(--pgn-color-brand-500); --pgn-link-muted-inline-color: var(--pgn-color-primary-500); --pgn-link-muted-color: var(--pgn-color-primary-500); - --pgn-component-active-bg: var(--pgn-color-primary-500); --pgn-body-bg: var(--pgn-color-background-base); --pgn-form-custom-file-button-bg: var(--pgn-form-input-group-addon-bg); --pgn-form-custom-file-color: var(--pgn-form-input-color-base); @@ -849,12 +839,8 @@ --pgn-form-custom-file-padding-x: var(--pgn-form-input-padding-x-base); --pgn-form-custom-file-padding-y: var(--pgn-form-input-padding-y-base); --pgn-form-custom-file-bg-disabled: var(--pgn-form-input-bg-disabled); - --pgn-form-custom-file-bg-base: var(--pgn-form-input-bg-base); --pgn-form-custom-file-border-color-radius: var(--pgn-form-input-border-radius-base); - --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-gray-500); --pgn-form-custom-select-border-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow); - --pgn-form-custom-select-bg-base: var(--pgn-form-input-bg-base); - --pgn-form-custom-select-color-disabled: var(--pgn-color-gray-500); --pgn-form-custom-select-color-base: var(--pgn-form-input-color-base); --pgn-form-custom-select-line-height: var(--pgn-form-input-line-height-base); --pgn-form-custom-select-font-size-lg: var(--pgn-form-input-font-size-lg); @@ -867,9 +853,8 @@ --pgn-form-custom-select-padding-y-lg: var(--pgn-form-input-padding-y-lg); --pgn-form-custom-select-padding-y-sm: var(--pgn-form-input-padding-y-sm); --pgn-form-custom-select-padding-y-base: var(--pgn-form-input-padding-y-base); - --pgn-form-custom-control-label-color-disabled: var(--pgn-color-gray-500); + --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-color-primary-500); --pgn-form-custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled); - --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base); --pgn-form-input-group-addon-color-base: var(--pgn-form-input-color-base); --pgn-form-input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2)); --pgn-form-input-height-inner-half: calc(var(--pgn-form-input-line-height-base) * .5em + var(--pgn-form-input-padding-y-base)); @@ -877,26 +862,26 @@ --pgn-form-input-height-sm: calc(var(--pgn-form-input-line-height-sm) * 1em + var(--pgn-input-btn-padding-sm-y) * 2 + var(--pgn-form-input-border-height)); --pgn-form-input-height-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2 + var(--pgn-form-input-border-height)); --pgn-form-input-focus-color-base: var(--pgn-form-input-color-base); - --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base); --pgn-form-input-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow); --pgn-form-input-border-width: var(--pgn-input-btn-border-width); --pgn-form-input-border-color: var(--pgn-color-gray-500); --pgn-form-input-color-plaintext: var(--pgn-body-color); --pgn-form-input-color-placeholder: var(--pgn-color-gray-500); + --pgn-form-input-bg-base: var(--pgn-color-background-base); --pgn-form-input-line-height-lg: var(--pgn-input-btn-line-height-lg); --pgn-form-input-font-weight: var(--pgn-font-weight-base); --pgn-dropzone-restriction-msg-color: var(--pgn-color-gray-500); --pgn-dropzone-border-active: 2px solid var(--pgn-color-primary-500); --pgn-dropzone-border-default: 1px dashed var(--pgn-color-gray-500); - --pgn-dropdown-link-disabled-color: var(--pgn-color-gray-500); - --pgn-dropdown-link-active-bg: var(--pgn-component-active-color); - --pgn-dropdown-link-active-color: var(--pgn-component-active-color); + --pgn-dropdown-link-active-color: var(--pgn-color-active); --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width)); + --pgn-dropdown-bg: var(--pgn-color-background-base); --pgn-dropdown-color-header: var(--pgn-color-gray-500); --pgn-dropdown-color-base: var(--pgn-body-color); + --pgn-data-table-background-color: var(--pgn-color-background-base); + --pgn-card-bg: var(--pgn-color-background-base); --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); - --pgn-btn-disabled-link-color: var(--pgn-color-gray-500); --pgn-btn-border-width: var(--pgn-input-btn-border-width); --pgn-btn-line-height-lg: var(--pgn-input-btn-line-height-lg); --pgn-breadcrumb-inverse-active: var(--pgn-color-light-500); @@ -907,46 +892,64 @@ --pgn-color-info-500: var(--pgn-color-info-base); --pgn-color-success-500: var(--pgn-color-success-base); --pgn-color-secondary-500: var(--pgn-color-secondary-base); + --pgn-color-input-focus: var(--pgn-color-primary-500); + --pgn-color-disabled: var(--pgn-color-gray-500); + --pgn-color-background-active: var(--pgn-color-primary-500); --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); --pgn-popover-success-icon-color: var(--pgn-color-success-500); - --pgn-pagination-bg-active: var(--pgn-component-active-bg); - --pgn-nav-pills-link-link-active-bg: var(--pgn-component-active-bg); + --pgn-popover-arrow-color: var(--pgn-popover-bg); + --pgn-pagination-bg-active: var(--pgn-color-background-active); + --pgn-pagination-color-disabled: var(--pgn-color-disabled); + --pgn-navbar-dark-brand-color-hover: var(--pgn-navbar-dark-color-active); + --pgn-navbar-dark-brand-color-base: var(--pgn-navbar-dark-color-active); + --pgn-nav-pills-link-link-active-bg: var(--pgn-color-background-active); --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg); --pgn-modal-footer-border-color: var(--pgn-modal-header-border-color); --pgn-menu-background-active: var(--pgn-btn-tertiary-bg-active); --pgn-image-thumbnail-bg: var(--pgn-body-bg); - --pgn-list-group-active-bg: var(--pgn-component-active-bg); - --pgn-link-inline-color: var(--pgn-color-info-500); - --pgn-link-color: var(--pgn-color-info-500); - --pgn-input-btn-focus-color: var(--pgn-component-active-bg); + --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); + --pgn-list-group-active-bg: var(--pgn-color-background-active); + --pgn-input-btn-focus-color: var(--pgn-color-input-focus); --pgn-form-custom-file-button-color: var(--pgn-form-custom-file-color); --pgn-form-custom-file-font-weight: var(--pgn-form-input-font-weight); + --pgn-form-custom-file-bg-base: var(--pgn-form-input-bg-base); --pgn-form-custom-file-box-shadow-focus: var(--pgn-form-input-box-shadow-focus); --pgn-form-custom-file-border-width: var(--pgn-form-input-border-width); --pgn-form-custom-file-border-color-base: var(--pgn-form-input-border-color); --pgn-form-custom-file-height-inner: var(--pgn-form-input-height-inner-base); --pgn-form-custom-file-height-base: var(--pgn-form-input-height-base); --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus); - --pgn-form-custom-range-thumb-bg-base: var(--pgn-component-active-bg); + --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-disabled); + --pgn-form-custom-range-thumb-bg-base: var(--pgn-color-background-active); --pgn-form-custom-select-height-sm: var(--pgn-form-input-height-sm); --pgn-form-custom-select-border-color-base: var(--pgn-form-input-border-color); --pgn-form-custom-select-border-width-base: var(--pgn-form-input-border-width); --pgn-form-custom-select-feedback-icon-size: var(--pgn-form-input-height-inner-half) var(--pgn-form-input-height-inner-half); --pgn-form-custom-select-feedback-icon-position: center right calc(var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding)); --pgn-form-custom-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-form-custom-select-padding-y-base)) * 3 / 4 + var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding)); + --pgn-form-custom-select-bg-base: var(--pgn-form-input-bg-base); + --pgn-form-custom-select-color-disabled: var(--pgn-color-disabled); --pgn-form-custom-select-font-weight: var(--pgn-form-input-font-weight); --pgn-form-custom-select-font-height-base: var(--pgn-form-input-height-base); - --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-component-active-bg); - --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-component-active-bg); + --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-color-background-active); + --pgn-form-custom-control-label-color-disabled: var(--pgn-color-disabled); + --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base); --pgn-form-input-group-addon-color-border: var(--pgn-form-input-border-color); --pgn-form-input-height-lg: calc(var(--pgn-form-input-line-height-lg) * 1em + var(--pgn-input-btn-padding-lg-y) * 2 + var(--pgn-form-input-border-height)); - --pgn-form-input-focus-color-border: var(--pgn-component-active-bg); + --pgn-form-input-focus-color-border: var(--pgn-color-input-focus); + --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base); --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); + --pgn-dropdown-link-disabled-color: var(--pgn-color-disabled); + --pgn-dropdown-link-active-bg: var(--pgn-color-background-active); + --pgn-btn-disabled-link-color: var(--pgn-color-disabled); + --pgn-color-link: var(--pgn-color-info-500); --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); - --pgn-pagination-color-base: var(--pgn-link-color); + --pgn-pagination-color-base: var(--pgn-color-link); --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); + --pgn-link-inline-color: var(--pgn-color-link); + --pgn-link-color: var(--pgn-color-link); --pgn-form-custom-file-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-font-height-lg: var(--pgn-form-input-height-lg); diff --git a/tokens/source/alias/color.json b/tokens/source/alias/color.json index fcbc9f714b..654217fe15 100644 --- a/tokens/source/alias/color.json +++ b/tokens/source/alias/color.json @@ -1,7 +1,14 @@ { "color": { "background": { - "base": { "value": "{color.white.value}", "themeable": true} + "base": { "value": "{color.white.value}", "themeable": true } , + "active": { "value": "{color.primary.500.value}", "themeable": true, "source": "$component-active-bg" } + }, + "active": { "value": "{color.white.value}", "themeable": true, "source": "$component-active-color" }, + "disabled": { "value": "{color.gray.500.value}", "themeable": true }, + "link": { "value": "{color.info.500.value}", "themeable": true }, + "input": { + "focus": { "value": "{color.primary.500.value}", "themeable": true } } } } diff --git a/tokens/source/components/Button.json b/tokens/source/components/Button.json index 8c42c66438..5cc3ad8080 100644 --- a/tokens/source/components/Button.json +++ b/tokens/source/components/Button.json @@ -51,7 +51,7 @@ "disabled": { "opacity": { "value": ".65", "themeable": true, "source": "$btn-disabled-opacity" }, "link": { - "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$btn-link-disabled-color" } + "color": { "value": "{color.disabled.value}", "themeable": true, "source": "$btn-link-disabled-color" } } }, "tertiary": { diff --git a/tokens/source/components/Card.json b/tokens/source/components/Card.json index e7a2d59123..c055a51bac 100644 --- a/tokens/source/components/Card.json +++ b/tokens/source/components/Card.json @@ -24,7 +24,7 @@ "base": { "value": "null", "themeable": true, "source": "$card-height" } }, "color": { "value": "null", "themeable": true, "source": "$card-color" }, - "bg": { "value": "{color.white.value}", "themeable": true, "source": "$card-bg" }, + "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$card-bg" }, "image": { "overlay": { "padding": { "value": "1.25rem", "themeable": true, "source": "$card-img-overlay-padding" } diff --git a/tokens/source/components/DataTable.json b/tokens/source/components/DataTable.json index 568f85d8f8..2813f9a853 100644 --- a/tokens/source/components/DataTable.json +++ b/tokens/source/components/DataTable.json @@ -1,7 +1,7 @@ { "data-table": { "background": { - "color": { "value": "{color.white.value}", "themeable": true, "source": "$data-table-background-color" + "color": { "value": "{color.background.base.value}", "themeable": true, "source": "$data-table-background-color" } }, "border": { "value": "1px solid {color.gray.200.value}", "themeable": true, "source": "$data-table-border" }, diff --git a/tokens/source/components/Dropdown.json b/tokens/source/components/Dropdown.json index 8777782143..76c5f9ac31 100644 --- a/tokens/source/components/Dropdown.json +++ b/tokens/source/components/Dropdown.json @@ -26,7 +26,7 @@ "base": { "value": "{body.color.value}", "themeable": true, "source": "$dropdown-color" }, "header": { "value": "{color.gray.500.value}", "themeable": true, "source": "$dropdown-header-color" } }, - "bg": { "value": "{color.white.value}", "themeable": true, "source": "$dropdown-bg" }, + "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$dropdown-bg" }, "border": { "color": { "value": "rgba(0, 0, 0, .15)", "themeable": true, "source": "$dropdown-border-color" }, "width": { "value": "{border.width.value}", "themeable": true, "source": "$dropdown-border-width" }, @@ -55,11 +55,11 @@ "bg": { "value": "{color.light.300.value}", "themeable": true, "source": "$dropdown-link-hover-bg" } }, "active": { - "color": { "value": "{component.active.color.value}", "themeable": true, "source": "$dropdown-link-active-color" }, - "bg": { "value": "{component.active.color.value}", "themeable": true, "source": "$dropdown-link-active-bg" } + "color": { "value": "{color.active.value}", "themeable": true, "source": "$dropdown-link-active-color" }, + "bg": { "value": "{color.background.active.value}", "themeable": true, "source": "$dropdown-link-active-bg" } }, "disabled": { - "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$dropdown-link-disabled-color" } + "color": { "value": "{color.disabled.value}", "themeable": true, "source": "$dropdown-link-disabled-color" } } }, "zindex": { "value": "1000", "themeable": true, "source": "$zindex-dropdown" } diff --git a/tokens/source/components/Form.json b/tokens/source/components/Form.json index 43f6d544d0..28a4d3a7da 100644 --- a/tokens/source/components/Form.json +++ b/tokens/source/components/Form.json @@ -30,7 +30,7 @@ } }, "bg": { - "base": { "value": "{color.white.value}", "themeable": true, "source": "$input-bg" }, + "base": { "value": "{color.background.base.value}", "themeable": true, "source": "$input-bg" }, "disabled": { "value": "{color.gray.100.value}", "themeable": true, "source": "$input-disabled-bg" } }, "color": { @@ -66,7 +66,7 @@ "bg": { "value": "{form.input.bg.base.value}", "themeable": true, "source": "$input-focus-bg" }, "color": { "base": { "value": "{form.input.color.base.value}", "themeable": true, "source": "$input-focus-color" }, - "border": { "value": "{component.active.bg.value}", "themeable": true, "source": "$input-focus-border-color" } + "border": { "value": "{color.input.focus.value}", "themeable": true, "source": "$input-focus-border-color" } }, "width": { "value": "1px", "themeable": true, "source": "$input-focus-width" } }, @@ -222,7 +222,7 @@ "border": { "color": { "base": { - "value": "{component.active.bg.value}", + "value": "{color.primary.500.value}", "themeable": true, "source": "$custom-control-indicator-checked-border-color" }, @@ -244,7 +244,7 @@ "color": { "base": { "value": "null", "themeable": true, "source": "$custom-control-label-color" }, "disabled": { - "value": "{color.gray.500.value}", + "value": "{color.disabled.value}", "themeable": true, "source": "$custom-control-label-disabled-color" } @@ -258,7 +258,7 @@ }, "indeterminate": { "bg": { - "value": "{component.active.bg.value}", + "value": "{color.background.active.value}", "themeable": true, "source": "$custom-checkbox-indicator-indeterminate-bg" }, @@ -394,7 +394,7 @@ "source": "$custom-select-color" }, "disabled": { - "value": "{color.gray.500.value}", + "value": "{color.disabled.value}", "themeable": true, "source": "$custom-select-disabled-color" } @@ -512,12 +512,12 @@ }, "bg": { "base": { - "value": "{component.active.bg.value}", + "value": "{color.background.active.value}", "themeable": true, "source": "$custom-range-thumb-bg" }, "disabled": { - "value": "{color.gray.500.value}", + "value": "{color.disabled.value}", "themeable": true, "source": "$custom-range-thumb-disabled-bg" } diff --git a/tokens/source/components/Modal.json b/tokens/source/components/Modal.json index 146f837eb0..0dbc7497b4 100644 --- a/tokens/source/components/Modal.json +++ b/tokens/source/components/Modal.json @@ -32,7 +32,7 @@ }, "content": { "color": { "value": "null", "themeable": true, "source": "$modal-content-color" }, - "bg": { "value": "{color.white.value}", "themeable": true, "source": "$modal-content-bg" }, + "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$modal-content-bg" }, "border": { "color": { "value": "rgba(0, 0, 0, .2)", "themeable": true, "source": "$modal-content-border-color" }, "width": { "value": "0", "themeable": true, "source": "$modal-content-border-width" }, diff --git a/tokens/source/components/Nav.json b/tokens/source/components/Nav.json index 58a137f202..e1e68e47c5 100644 --- a/tokens/source/components/Nav.json +++ b/tokens/source/components/Nav.json @@ -51,11 +51,11 @@ "link": { "active": { "color": { - "value": "{component.active.color.value}", + "value": "{color.active.value}", "themeable": true, "source": "$nav-pills-link-active-color" }, - "bg": { "value": "{component.active.bg.value}", "themeable": true, "source": "$nav-pills-link-active-bg" } + "bg": { "value": "{color.background.active.value}", "themeable": true, "source": "$nav-pills-link-active-bg" } } } } diff --git a/tokens/source/components/Navbar.json b/tokens/source/components/Navbar.json index cd88ada607..4e29483fa7 100644 --- a/tokens/source/components/Navbar.json +++ b/tokens/source/components/Navbar.json @@ -62,7 +62,7 @@ "value": "rgba({color.white.value}, .75)", "themeable": true, "source": "$navbar-dark-hover-color" }, "active": { - "value": "{color.white.value}", "themeable": true, "source": "$navbar-dark-active-color" + "value": "{color.active.value}", "themeable": true, "source": "$navbar-dark-active-color" }, "disabled": { "value": "rgba({color.white.value}, .25)", "themeable": true, "source": "$navbar-dark-disabled-color" diff --git a/tokens/source/components/Pagination.json b/tokens/source/components/Pagination.json index a621a1b0d1..661e237da2 100644 --- a/tokens/source/components/Pagination.json +++ b/tokens/source/components/Pagination.json @@ -48,16 +48,16 @@ } }, "color": { - "base": { "value": "{link.color.value}", "themeable": true, "source": "$pagination-color" }, + "base": { "value": "{color.link.value}", "themeable": true, "source": "$pagination-color" }, "inverse": { "value": "{color.white.value}", "themeable": true, "source": "$pagination-color-inverse" }, "hover": { "value": "{link.hover.color.value}", "themeable": true, "source": "$pagination-hover-color" }, - "active": { "value": "{component.active.color.value}", "themeable": true, "source": "$pagination-active-color" }, - "disabled": { "value": "{color.gray.500.value}", "themeable": true, "source": "$pagination-disabled-color" } + "active": { "value": "{color.active.value}", "themeable": true, "source": "$pagination-active-color" }, + "disabled": { "value": "{color.disabled.value}", "themeable": true, "source": "$pagination-disabled-color" } }, "bg": { - "base": { "value": "{color.white.value}", "themeable": true, "source": "$pagination-bg" }, + "base": { "value": "{color.background.base.value}", "themeable": true, "source": "$pagination-bg" }, "hover": { "value": "{color.gray.100.value}", "themeable": true, "source": "$pagination-hover-bg" }, - "active": { "value": "{component.active.bg.value}", "themeable": true, "source": "$pagination-active-bg" }, + "active": { "value": "{color.background.active.value}", "themeable": true, "source": "$pagination-active-bg" }, "disabled": { "value": "{color.white.value}", "themeable": true, "source": "$pagination-disabled-bg" } }, "border": { diff --git a/tokens/source/components/Popover.json b/tokens/source/components/Popover.json index 48ef329ae0..45796a33ae 100644 --- a/tokens/source/components/Popover.json +++ b/tokens/source/components/Popover.json @@ -3,7 +3,7 @@ "font": { "size": { "value": "{font.size.sm.value}", "themeable": true, "source": "$popover-font-size" } }, - "bg": { "value": "{color.white.value}", "themeable": true, "source": "$popover-bg" }, + "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$popover-bg" }, "max": { "width": { "value": "480px", "themeable": true, "source": "$popover-max-width" } }, diff --git a/tokens/source/components/general/component.json b/tokens/source/components/general/component.json deleted file mode 100644 index 42bc8ce720..0000000000 --- a/tokens/source/components/general/component.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "component": { - "active": { - "color": { "value": "{color.white.value}", "themeable": true, "source": "$component-active-color" }, - "bg": { "value": "{color.primary.500.value}", "themeable": true, "source": "$component-active-bg" } - } - } -} diff --git a/tokens/source/components/general/input.json b/tokens/source/components/general/input.json index d719f4eda2..eba3133707 100644 --- a/tokens/source/components/general/input.json +++ b/tokens/source/components/general/input.json @@ -30,7 +30,7 @@ }, "focus": { "width": { "value": "1px", "themeable": true, "source": "$input-btn-focus-width" }, - "color": { "value": "{component.active.bg.value}", "themeable": true, "source": "$input-btn-focus-color" }, + "color": { "value": "{color.input.focus.value}", "themeable": true, "source": "$input-btn-focus-color" }, "box": { "shadow": { "value": "0 0 0 {input.btn.focus.width.value} {input.btn.focus.color.value}", diff --git a/tokens/source/components/general/link.json b/tokens/source/components/general/link.json index 91f196734c..9f9147f393 100644 --- a/tokens/source/components/general/link.json +++ b/tokens/source/components/general/link.json @@ -1,13 +1,13 @@ { "link": { - "color": { "value": "{color.info.500.value}", "themeable": true, "source": "$link-color" }, + "color": { "value": "{color.link.value}", "themeable": true, "source": "$link-color" }, "decoration": { "value": "none", "themeable": true, "source": "$link-decoration" }, "hover": { "color": { "value": "#003C5E", "themeable": true, "source": "$link-hover-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$link-hover-decoration" } }, "inline": { - "color": { "value": "{color.info.500.value}", "themeable": true, "source": "$inline-link-color" }, + "color": { "value": "{color.link.value}", "themeable": true, "source": "$inline-link-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-decoration" }, "decoration-color": { "value": "rgba(0, 109, 170, .3)", "themeable": true, "source": "$inline-link-decoration-color" }, "hover": { diff --git a/tokens/source/components/general/list.json b/tokens/source/components/general/list.json index 4d00978ec2..97622a0ca8 100644 --- a/tokens/source/components/general/list.json +++ b/tokens/source/components/general/list.json @@ -12,7 +12,7 @@ "list-group": { "color": { "value": "null", "themeable": true, "source": "$list-group-color" }, "bg": { - "base": { "value": "{color.white.value}", "themeable": true, "source": "$list-group-bg" }, + "base": { "value": "{color.background.base.value}", "themeable": true, "source": "$list-group-bg" }, "hover": { "value": "{color.gray.100.value}", "themeable": true, "source": "$list-group-hover-bg" } }, "border": { @@ -29,7 +29,7 @@ "active": { "color": { "base": { - "value": "{component.active.color.value}", "themeable": true, "source": "$list-group-active-color" + "value": "{color.active.value}", "themeable": true, "source": "$list-group-active-color" }, "border": { "value": "{list-group.active.bg.value}", @@ -37,7 +37,7 @@ "source": "$list-group-active-border-color" } }, - "bg": { "value": "{component.active.bg.value}", "themeable": true, "source": "$list-group-active-bg" } + "bg": { "value": "{color.background.active.value}", "themeable": true, "source": "$list-group-active-bg" } }, "disabled": { "color": { "value": "{color.gray.600.value}", "themeable": true, "source": "$list-group-disabled-color" }, From 045290bc18bc78efa930b72f814d1b0fd530d5f6 Mon Sep 17 00:00:00 2001 From: Viktor Rusakov Date: Fri, 4 Nov 2022 09:56:14 +0200 Subject: [PATCH 14/19] fix: use css variables for zindex property --- scss/core/_variables.scss | 18 +++++++++--------- scss/core/tokens.css | 1 + tokens/build/_variables.scss | 1 + tokens/build/css-to-scss.json | 2 +- tokens/build/scss-to-css.json | 2 +- tokens/build/variables.css | 1 + tokens/source/components/Tooltip.json | 3 ++- www/src/scss/base.scss | 6 +++--- 8 files changed, 19 insertions(+), 15 deletions(-) diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss index 2cdbb3bb83..502ce9c290 100644 --- a/scss/core/_variables.scss +++ b/scss/core/_variables.scss @@ -787,15 +787,15 @@ $table-th-font-weight: null !default; // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. -$zindex-dropdown: 1000 !default; -$zindex-sticky: 1020 !default; -$zindex-fixed: 1030 !default; -$zindex-sheet-backdrop: 1031 !default; -$zindex-sheet: 1032 !default; -$zindex-modal-backdrop: 1040 !default; -$zindex-modal: 1050 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; +$zindex-dropdown: var(--pgn-dropdown-zindex) !default; +$zindex-sticky: var(--pgn-zindex-sticky) !default; +$zindex-fixed: var(--pgn-zindex-fixed) !default; +$zindex-sheet-backdrop: var(--pgn-sheet-zindex-backdrop) !default; +$zindex-sheet: var(--pgn-sheet-zindex-main) !default; +$zindex-modal-backdrop: var(--pgn-modal-backdrop-zindex) !default; +$zindex-modal: var(--pgn-modal-zindex) !default; +$zindex-popover: var(--pgn-popover-zindex) !default; +$zindex-tooltip: var(--pgn-tooltip-zindex) !default; // Buttons + Forms // diff --git a/scss/core/tokens.css b/scss/core/tokens.css index b4552ec1f6..ac12cf76c7 100644 --- a/scss/core/tokens.css +++ b/scss/core/tokens.css @@ -110,6 +110,7 @@ --pgn-border-radius-lg: .425rem; --pgn-border-radius-base: .375rem; --pgn-border-width: 1px; + --pgn-tooltip-zindex: 1070; --pgn-tooltip-arrow-height: .4rem; --pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); --pgn-tooltip-margin: 0; diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss index 7a468752ef..4cb2e6c97e 100644 --- a/tokens/build/_variables.scss +++ b/tokens/build/_variables.scss @@ -109,6 +109,7 @@ $pgn-border-radius-sm: .25rem !default; $pgn-border-radius-lg: .425rem !default; $pgn-border-radius-base: .375rem !default; $pgn-border-width: 1px !default; +$pgn-tooltip-zindex: 1070 !default; $pgn-tooltip-arrow-height: .4rem !default; $pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default; $pgn-tooltip-margin: 0 !default; diff --git a/tokens/build/css-to-scss.json b/tokens/build/css-to-scss.json index 2358382626..6a52c75f1a 100644 --- a/tokens/build/css-to-scss.json +++ b/tokens/build/css-to-scss.json @@ -1 +1 @@ -{"var(--pgn-color-background-active)":"$component-active-bg","var(--pgn-color-active)":"$component-active-color","var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-width)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-box-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-border)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-brand-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"} \ No newline at end of file +{"var(--pgn-color-background-active)":"$component-active-bg","var(--pgn-color-active)":"$component-active-color","var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-width)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-box-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-border)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-tooltip-zindex)":"$zindex-tooltip","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-brand-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"} \ No newline at end of file diff --git a/tokens/build/scss-to-css.json b/tokens/build/scss-to-css.json index ec50cfa438..124595bd19 100644 --- a/tokens/build/scss-to-css.json +++ b/tokens/build/scss-to-css.json @@ -1 +1 @@ -{"$component-active-bg":"var(--pgn-color-background-active)","$component-active-color":"var(--pgn-color-active)","$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-width)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-box-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-border)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"} \ No newline at end of file +{"$component-active-bg":"var(--pgn-color-background-active)","$component-active-color":"var(--pgn-color-active)","$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-width)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-box-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-border)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$zindex-tooltip":"var(--pgn-tooltip-zindex)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"} \ No newline at end of file diff --git a/tokens/build/variables.css b/tokens/build/variables.css index b4552ec1f6..ac12cf76c7 100644 --- a/tokens/build/variables.css +++ b/tokens/build/variables.css @@ -110,6 +110,7 @@ --pgn-border-radius-lg: .425rem; --pgn-border-radius-base: .375rem; --pgn-border-width: 1px; + --pgn-tooltip-zindex: 1070; --pgn-tooltip-arrow-height: .4rem; --pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); --pgn-tooltip-margin: 0; diff --git a/tokens/source/components/Tooltip.json b/tokens/source/components/Tooltip.json index 4b213d9444..da44f8c443 100644 --- a/tokens/source/components/Tooltip.json +++ b/tokens/source/components/Tooltip.json @@ -36,6 +36,7 @@ "base": { "value": "{tooltip.bg.base.value}", "themeable": true, "source": "$tooltip-arrow-color" }, "light": { "value": "{color.white.value}", "themeable": true, "source": "$tooltip-arrow-color-light" } } - } + }, + "zindex": { "value": 1070, "themeable": true, "source": "$zindex-tooltip" } } } diff --git a/www/src/scss/base.scss b/www/src/scss/base.scss index 574e392258..b7ee26249c 100644 --- a/www/src/scss/base.scss +++ b/www/src/scss/base.scss @@ -10,9 +10,9 @@ @import "../components/exampleComponents/ExamplePropsForm"; :root { - --pgn-zindex-modal: 2503; - --pgn-zindex-sheet-backdrop: 2501; - --pgn-zindex-sheet: 2502; + --pgn-modal-zindex: 2503; + --pgn-sheet-zindex-backdrop: 2501; + --pgn-sheet-zindex-main: 2502; --pgn-www-zindex-header: 2500; } From 637c457c8250bba451a32827bdbdff5a70cbbc08 Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Fri, 4 Nov 2022 02:16:19 -0600 Subject: [PATCH 15/19] [BD-46] refactor: refactoring tokens of the Paragon documentation site (#1736) chore: improve code style and update tokens map Co-authored-by: Viktor Rusakov --- scss/core/tokens.css | 4 +- src/Form/_bootstrap-custom-forms.scss | 56 ++++++++++++++++++------ src/Form/_variables.scss | 5 +++ src/Popover/_variables.scss | 3 +- tokens/build/_variables.scss | 4 +- tokens/build/css-to-scss.json | 2 +- tokens/build/scss-to-css.json | 2 +- tokens/build/variables.css | 4 +- tokens/source/components/Button.json | 2 +- tokens/source/components/Pagination.json | 2 +- tokens/utils.js | 1 + 11 files changed, 60 insertions(+), 25 deletions(-) diff --git a/scss/core/tokens.css b/scss/core/tokens.css index ac12cf76c7..6342e05fe9 100644 --- a/scss/core/tokens.css +++ b/scss/core/tokens.css @@ -180,7 +180,7 @@ --pgn-reduced-dropdown-height-max: 60vh; --pgn-pagination-focus-border-width: .125rem; --pgn-pagination-focus-box-outline: 0; - --pgn-pagination-secondary-height-sm: 2.75rem; + --pgn-pagination-secondary-height-sm: 2.25rem; --pgn-pagination-secondary-height-base: 2.75rem; --pgn-pagination-toggle-border-sm: .25rem; --pgn-pagination-toggle-border-base: .3125rem; @@ -760,7 +760,7 @@ --pgn-btn-border-radius-base: var(--pgn-border-radius-base); --pgn-btn-line-height-sm: var(--pgn-input-btn-line-height-sm); --pgn-btn-line-height-base: var(--pgn-input-btn-line-height-base); - --pgn-btn-font-width: var(--pgn-font-weight-normal); + --pgn-btn-font-weight: var(--pgn-font-weight-normal); --pgn-btn-font-size-lg: var(--pgn-input-btn-font-size-lg); --pgn-btn-font-size-sm: var(--pgn-input-btn-font-size-sm); --pgn-btn-font-size-base: var(--pgn-input-btn-font-size-base); diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss index 6cb1032cc8..adb2824657 100644 --- a/src/Form/_bootstrap-custom-forms.scss +++ b/src/Form/_bootstrap-custom-forms.scss @@ -32,6 +32,7 @@ &:checked ~ .custom-control-label::before { color: $custom-control-indicator-checked-color; border-color: $custom-control-indicator-checked-border-color; + @include gradient-bg($custom-control-indicator-checked-bg); @include box-shadow($custom-control-indicator-checked-box-shadow); } @@ -40,7 +41,9 @@ // the mixin is not used here to make sure there is feedback @if $enable-shadows { box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow; - } @else { + } + + @else { box-shadow: $custom-control-indicator-focus-box-shadow; } } @@ -53,6 +56,7 @@ color: $custom-control-indicator-active-color; background-color: $custom-control-indicator-active-bg; border-color: $custom-control-indicator-active-border-color; + @include box-shadow($custom-control-indicator-active-box-shadow); } @@ -92,6 +96,7 @@ content: ""; background-color: $custom-control-indicator-bg; border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color; + @include box-shadow($custom-control-indicator-box-shadow); } @@ -127,9 +132,11 @@ .custom-control-input:indeterminate ~ .custom-control-label { &::before { border-color: $custom-checkbox-indicator-indeterminate-border-color; + @include gradient-bg($custom-checkbox-indicator-indeterminate-bg); @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); } + &::after { background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate); } @@ -139,6 +146,7 @@ &:checked ~ .custom-control-label::before { @include gradient-bg($custom-control-indicator-checked-disabled-bg); } + &:indeterminate ~ .custom-control-label::before { @include gradient-bg($custom-control-indicator-checked-disabled-bg); } @@ -186,13 +194,16 @@ } &::after { + // stylelint-disable-next-line max-line-length top: add(calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5), calc(#{$custom-control-indicator-border-width} * 2)); + // stylelint-disable-next-line max-line-length left: add(calc(-1 * (#{$custom-switch-width} + #{$custom-control-gutter})), calc(#{$custom-control-indicator-border-width} * 2)); width: $custom-switch-indicator-size; height: $custom-switch-indicator-size; background-color: $custom-control-indicator-border-color; // stylelint-disable-next-line property-disallowed-list border-radius: $custom-switch-indicator-border-radius; + @include transition(transform .15s ease-in-out, $custom-forms-transition); } } @@ -222,25 +233,30 @@ display: inline-block; width: 100%; height: $custom-select-height; + // stylelint-disable-next-line max-line-length padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; font-family: $custom-select-font-family; - @include font-size($custom-select-font-size); font-weight: $custom-select-font-weight; line-height: $custom-select-line-height; color: $custom-select-color; vertical-align: middle; background: $custom-select-bg $custom-select-background; border: $custom-select-border-width solid $custom-select-border-color; - @include border-radius($custom-select-border-radius, 0); - @include box-shadow($custom-select-box-shadow); appearance: none; + @include font-size($custom-select-font-size); + @include border-radius($custom-select-border-radius,0); + @include box-shadow($custom-select-box-shadow); + &:focus { border-color: $custom-select-focus-border-color; outline: 0; + @if $enable-shadows { @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow); - } @else { + } + + @else { // Avoid using mixin so we can pass custom focus shadow properly box-shadow: $custom-select-focus-box-shadow; } @@ -285,6 +301,7 @@ padding-top: $custom-select-padding-y-sm; padding-bottom: $custom-select-padding-y-sm; padding-left: $custom-select-padding-x-sm; + @include font-size($custom-select-font-size-sm); } @@ -293,6 +310,7 @@ padding-top: $custom-select-padding-y-lg; padding-bottom: $custom-select-padding-y-lg; padding-left: $custom-select-padding-x-lg; + @include font-size($custom-select-font-size-lg); } @@ -355,6 +373,7 @@ color: $custom-file-color; background-color: $custom-file-bg; border: $custom-file-border-width solid $custom-file-border-color; + @include border-radius($custom-file-border-radius); @include box-shadow($custom-file-box-shadow); @@ -370,8 +389,9 @@ line-height: $custom-file-line-height; color: $custom-file-button-color; content: "Browse"; - @include gradient-bg($custom-file-button-bg); border-left: inherit; + + @include gradient-bg($custom-file-button-bg); @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); } } @@ -395,8 +415,8 @@ // Pseudo-elements must be split across multiple rulesets to have an effect. // No box-shadow() mixin for focus accessibility. &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } - &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } - &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } } &::-moz-focus-outer { @@ -407,12 +427,13 @@ width: $custom-range-thumb-width; height: $custom-range-thumb-height; margin-top: calc((#{$custom-range-track-height} - #{$custom-range-thumb-height}) * .5); // Webkit specific - @include gradient-bg($custom-range-thumb-bg); border: $custom-range-thumb-border; + appearance: none; + + @include gradient-bg($custom-range-thumb-bg); @include border-radius($custom-range-thumb-border-radius); @include box-shadow($custom-range-thumb-box-shadow); @include transition($custom-forms-transition); - appearance: none; &:active { @include gradient-bg($custom-range-thumb-active-bg); @@ -426,6 +447,7 @@ cursor: $custom-range-track-cursor; background-color: $custom-range-track-bg; border-color: transparent; + @include border-radius($custom-range-track-border-radius); @include box-shadow($custom-range-track-box-shadow); } @@ -433,12 +455,13 @@ &::-moz-range-thumb { width: $custom-range-thumb-width; height: $custom-range-thumb-height; - @include gradient-bg($custom-range-thumb-bg); border: $custom-range-thumb-border; + appearance: none; + + @include gradient-bg($custom-range-thumb-bg); @include border-radius($custom-range-thumb-border-radius); @include box-shadow($custom-range-thumb-box-shadow); @include transition($custom-forms-transition); - appearance: none; &:active { @include gradient-bg($custom-range-thumb-active-bg); @@ -452,6 +475,7 @@ cursor: $custom-range-track-cursor; background-color: $custom-range-track-bg; border-color: transparent; // Firefox specific? + @include border-radius($custom-range-track-border-radius); @include box-shadow($custom-range-track-box-shadow); } @@ -462,12 +486,13 @@ margin-top: 0; // Edge specific margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. - @include gradient-bg($custom-range-thumb-bg); border: $custom-range-thumb-border; + appearance: none; + + @include gradient-bg($custom-range-thumb-bg); @include border-radius($custom-range-thumb-border-radius); @include box-shadow($custom-range-thumb-box-shadow); @include transition($custom-forms-transition); - appearance: none; &:active { @include gradient-bg($custom-range-thumb-active-bg); @@ -482,17 +507,20 @@ background-color: transparent; border-color: transparent; border-width: calc(#{$custom-range-thumb-height} * .5); + @include box-shadow($custom-range-track-box-shadow); } &::-ms-fill-lower { background-color: $custom-range-track-bg; + @include border-radius($custom-range-track-border-radius); } &::-ms-fill-upper { margin-right: 15px; // arbitrary? background-color: $custom-range-track-bg; + @include border-radius($custom-range-track-border-radius); } diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss index 2bf6451829..1a5577de5a 100644 --- a/src/Form/_variables.scss +++ b/src/Form/_variables.scss @@ -91,10 +91,13 @@ $custom-control-label-disabled-color: var(--pgn-form-custom-control-label-color- $custom-control-indicator-checked-color: #0A3055 !default; $custom-control-indicator-checked-bg: #0A3055 !default; $custom-control-indicator-checked-disabled-bg: var(--pgn-form-custom-control-indicator-checked-bg-disabled) !default; +// stylelint-disable-next-line max-line-length $custom-control-indicator-checked-box-shadow: var(--pgn-form-custom-control-indicator-checked-box-shadow-base) !default; +// stylelint-disable-next-line max-line-length $custom-control-indicator-checked-border-color: var(--pgn-form-custom-control-indicator-checked-border-color-base) !default; $custom-control-indicator-focus-box-shadow: var(--pgn-form-custom-control-indicator-checked-box-shadow-focus) !default; +// stylelint-disable-next-line max-line-length $custom-control-indicator-focus-border-color: var(--pgn-form-custom-control-indicator-checked-border-color-focus) !default; // TODO switch to css variable @@ -108,7 +111,9 @@ $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+ $custom-checkbox-indicator-indeterminate-bg: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg) !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; +// stylelint-disable-next-line max-line-length $custom-checkbox-indicator-indeterminate-box-shadow: var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow) !default; +// stylelint-disable-next-line max-line-length $custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color) !default; $custom-radio-indicator-border-radius: var(--pgn-form-custom-radio-indicator-border-radius) !default; diff --git a/src/Popover/_variables.scss b/src/Popover/_variables.scss index e63456f651..3bb71510dd 100644 --- a/src/Popover/_variables.scss +++ b/src/Popover/_variables.scss @@ -28,7 +28,8 @@ $popover-arrow-width: var(--pgn-popover-arrow-width) !default; $popover-arrow-height: var(--pgn-popover-arrow-height) !default; $popover-arrow-color: var(--pgn-popover-arrow-color) !default; -// TODO can't use css variable due to conflict with SCSS functions, should use var(--pgn-popover-border-color) instead of #000000 +// TODO can't use css variable due to conflict with SCSS functions, +// should use var(--pgn-popover-border-color) instead of #000000. $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; $popover-success-bg: var(--pgn-popover-success-bg) !default; diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss index 4cb2e6c97e..b082fe8c4b 100644 --- a/tokens/build/_variables.scss +++ b/tokens/build/_variables.scss @@ -179,7 +179,7 @@ $pgn-reduced-dropdown-width-min: 6rem !default; $pgn-reduced-dropdown-height-max: 60vh !default; $pgn-pagination-focus-border-width: .125rem !default; $pgn-pagination-focus-box-outline: 0 !default; -$pgn-pagination-secondary-height-sm: 2.75rem !default; +$pgn-pagination-secondary-height-sm: 2.25rem !default; $pgn-pagination-secondary-height-base: 2.75rem !default; $pgn-pagination-toggle-border-sm: .25rem !default; $pgn-pagination-toggle-border-base: .3125rem !default; @@ -759,7 +759,7 @@ $pgn-btn-border-radius-lg: $pgn-border-radius-lg !default; $pgn-btn-border-radius-base: $pgn-border-radius-base !default; $pgn-btn-line-height-sm: $pgn-input-btn-line-height-sm !default; $pgn-btn-line-height-base: $pgn-input-btn-line-height-base !default; -$pgn-btn-font-width: $pgn-font-weight-normal !default; +$pgn-btn-font-weight: $pgn-font-weight-normal !default; $pgn-btn-font-size-lg: $pgn-input-btn-font-size-lg !default; $pgn-btn-font-size-sm: $pgn-input-btn-font-size-sm !default; $pgn-btn-font-size-base: $pgn-input-btn-font-size-base !default; diff --git a/tokens/build/css-to-scss.json b/tokens/build/css-to-scss.json index 6a52c75f1a..dc06754d4c 100644 --- a/tokens/build/css-to-scss.json +++ b/tokens/build/css-to-scss.json @@ -1 +1 @@ -{"var(--pgn-color-background-active)":"$component-active-bg","var(--pgn-color-active)":"$component-active-color","var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-width)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-box-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-border)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-tooltip-zindex)":"$zindex-tooltip","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-brand-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"} \ No newline at end of file +{"var(--pgn-color-background-active)":"$component-active-bg","var(--pgn-color-active)":"$component-active-color","var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-weight)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-box-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-border)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-tooltip-zindex)":"$zindex-tooltip","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-brand-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"} \ No newline at end of file diff --git a/tokens/build/scss-to-css.json b/tokens/build/scss-to-css.json index 124595bd19..963e17db53 100644 --- a/tokens/build/scss-to-css.json +++ b/tokens/build/scss-to-css.json @@ -1 +1 @@ -{"$component-active-bg":"var(--pgn-color-background-active)","$component-active-color":"var(--pgn-color-active)","$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-width)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-box-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-border)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$zindex-tooltip":"var(--pgn-tooltip-zindex)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"} \ No newline at end of file +{"$component-active-bg":"var(--pgn-color-background-active)","$component-active-color":"var(--pgn-color-active)","$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-weight)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-box-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-border)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$zindex-tooltip":"var(--pgn-tooltip-zindex)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"} \ No newline at end of file diff --git a/tokens/build/variables.css b/tokens/build/variables.css index ac12cf76c7..6342e05fe9 100644 --- a/tokens/build/variables.css +++ b/tokens/build/variables.css @@ -180,7 +180,7 @@ --pgn-reduced-dropdown-height-max: 60vh; --pgn-pagination-focus-border-width: .125rem; --pgn-pagination-focus-box-outline: 0; - --pgn-pagination-secondary-height-sm: 2.75rem; + --pgn-pagination-secondary-height-sm: 2.25rem; --pgn-pagination-secondary-height-base: 2.75rem; --pgn-pagination-toggle-border-sm: .25rem; --pgn-pagination-toggle-border-base: .3125rem; @@ -760,7 +760,7 @@ --pgn-btn-border-radius-base: var(--pgn-border-radius-base); --pgn-btn-line-height-sm: var(--pgn-input-btn-line-height-sm); --pgn-btn-line-height-base: var(--pgn-input-btn-line-height-base); - --pgn-btn-font-width: var(--pgn-font-weight-normal); + --pgn-btn-font-weight: var(--pgn-font-weight-normal); --pgn-btn-font-size-lg: var(--pgn-input-btn-font-size-lg); --pgn-btn-font-size-sm: var(--pgn-input-btn-font-size-sm); --pgn-btn-font-size-base: var(--pgn-input-btn-font-size-base); diff --git a/tokens/source/components/Button.json b/tokens/source/components/Button.json index 5cc3ad8080..2c73215949 100644 --- a/tokens/source/components/Button.json +++ b/tokens/source/components/Button.json @@ -19,7 +19,7 @@ "sm": { "value": "{input.btn.font.size.sm.value}", "themeable": true, "source": "$btn-font-size-sm" }, "lg": { "value": "{input.btn.font.size.lg.value}", "themeable": true, "source": "$btn-font-size-lg" } }, - "width": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$btn-font-weight" } + "weight": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$btn-font-weight" } }, "line": { "height": { diff --git a/tokens/source/components/Pagination.json b/tokens/source/components/Pagination.json index 661e237da2..64b5f0b9ce 100644 --- a/tokens/source/components/Pagination.json +++ b/tokens/source/components/Pagination.json @@ -44,7 +44,7 @@ "secondary": { "height": { "base": { "value": "2.75rem", "themeable": true, "source": "$pagination-secondary-height" }, - "sm": { "value": "2.75rem", "themeable": true, "source": "$pagination-secondary-height-sm" } + "sm": { "value": "2.25rem", "themeable": true, "source": "$pagination-secondary-height-sm" } } }, "color": { diff --git a/tokens/utils.js b/tokens/utils.js index 6cf0277607..e6302eb1fb 100644 --- a/tokens/utils.js +++ b/tokens/utils.js @@ -47,6 +47,7 @@ async function replaceVariablesUsage(filePath, variablesMap, direction = 'scss-t crlfDelay: Infinity, }); + // eslint-disable-next-line no-restricted-syntax for await (const line of rl) { let parsedLine = line; const variables = [...parsedLine.matchAll(variableRegex)]; From 95c6a1b75d234cbc446fb131dd7398344da2a264 Mon Sep 17 00:00:00 2001 From: Viktor Rusakov Date: Sun, 6 Nov 2022 18:22:26 +0200 Subject: [PATCH 16/19] feat: add sass functions design tokens transform --- scss/core/tokens.css | 218 ++++++++++----------- src/Button/_variables.scss | 2 +- src/Form/_variables.scss | 5 + tokens/build-tokens.js | 43 +++- tokens/build/_variables.scss | 218 ++++++++++----------- tokens/build/css-to-scss.json | 2 +- tokens/build/scss-to-css.json | 2 +- tokens/build/variables.css | 218 ++++++++++----------- tokens/package-lock.json | 11 ++ tokens/package.json | 1 + tokens/source/components/general/link.json | 116 +++++++++-- tokens/source/global/color.json | 104 +++++++++- 12 files changed, 579 insertions(+), 361 deletions(-) diff --git a/scss/core/tokens.css b/scss/core/tokens.css index 6342e05fe9..aefa4f6480 100644 --- a/scss/core/tokens.css +++ b/scss/core/tokens.css @@ -247,7 +247,7 @@ --pgn-icon-md: 1.5rem; --pgn-icon-sm: 1.25rem; --pgn-icon-inline: .8em; - --pgn-mark-bg: #FFF243; + --pgn-mark-bg: #FFF243FF; --pgn-mark-padding: .2em; --pgn-paragraph-margin-bottom: 1rem; --pgn-list-group-item-padding-x: 1.25rem; @@ -255,29 +255,17 @@ --pgn-list-group-color: null; --pgn-list-inline-padding: .5rem; --pgn-link-emphasized-hover-darken-percentage: 15%; - --pgn-link-brand-inline-hover-decoration-color: #003C5E; --pgn-link-brand-inline-hover-decoration: underline; - --pgn-link-brand-inline-hover-color: #003C5E; - --pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3); --pgn-link-brand-inline-decoration: underline; --pgn-link-brand-hover-decoration: underline; - --pgn-link-brand-hover-color: #51002B; --pgn-link-brand-decoration: none; - --pgn-link-muted-inline-hover-decoration-color: #020911; --pgn-link-muted-inline-hover-decoration: underline; - --pgn-link-muted-inline-hover-color: #020911; - --pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3); --pgn-link-muted-inline-decoration: underline; --pgn-link-muted-hover-decoration: underline; - --pgn-link-muted-hover-color: #020911; --pgn-link-muted-decoration: none; - --pgn-link-inline-hover-decoration-color: #003C5E; --pgn-link-inline-hover-decoration: underline; - --pgn-link-inline-hover-color: #003C5E; - --pgn-link-inline-decoration-color: rgba(0, 109, 170, .3); --pgn-link-inline-decoration: underline; --pgn-link-hover-decoration: underline; - --pgn-link-hover-color: #003C5E; --pgn-link-decoration: none; --pgn-input-btn-focus-width: 1px; --pgn-input-btn-line-height-sm: 1.4286; @@ -375,7 +363,7 @@ --pgn-code-pre-scrollable-max-height: 340px; --pgn-code-kbd-padding-x: .4rem; --pgn-code-kbd-padding-y: .2rem; - --pgn-code-color: #E83E8C; + --pgn-code-color: #E83E8CFF; --pgn-code-font-size: 87.5%; --pgn-chip-line-height: 1.5rem; --pgn-chip-font-weight: 400; @@ -480,101 +468,93 @@ --pgn-alert-padding-y: 1.5rem; --pgn-action-row-gap-y: .5rem; --pgn-action-row-gap-x: .5rem; - --pgn-color-dark-base: #273F2F; - --pgn-color-dark-900: #1B2C21; - --pgn-color-dark-800: #1D2F23; - --pgn-color-dark-700: #1F3226; - --pgn-color-dark-600: #23392A; - --pgn-color-dark-400: #5D6F63; - --pgn-color-dark-300: #939F97; - --pgn-color-dark-200: #C9CFCB; - --pgn-color-dark-100: #F2F3F3; - --pgn-color-light-base: #E1DDDB; - --pgn-color-light-900: #9E9B99; - --pgn-color-light-800: #A9A6A4; - --pgn-color-light-700: #B4B1AF; - --pgn-color-light-600: #CBC7C5; - --pgn-color-light-400: #E9E6E4; - --pgn-color-light-300: #F0EEED; - --pgn-color-light-200: #F8F7F6; - --pgn-color-light-100: #FDFDFD; - --pgn-color-danger-900: #892029; - --pgn-color-danger-800: #92222C; - --pgn-color-danger-700: #9C242E; - --pgn-color-danger-600: #B02934; - --pgn-color-danger-400: #D2626B; - --pgn-color-danger-300: #E1969D; - --pgn-color-danger-200: #F0CBCE; - --pgn-color-danger-100: #FBF2F3; - --pgn-color-warning-900: #B39800; - --pgn-color-warning-800: #BFA300; - --pgn-color-warning-700: #CCAE00; - --pgn-color-warning-600: #E6C300; - --pgn-color-warning-400: #FFE340; - --pgn-color-warning-300: #FFEC80; - --pgn-color-warning-200: #FFF6BF; - --pgn-color-warning-100: #FFFDF0; - --pgn-color-info-900: #004C77; - --pgn-color-info-800: #005280; - --pgn-color-info-700: #005788; - --pgn-color-info-600: #006299; - --pgn-color-info-400: #4092BF; - --pgn-color-info-300: #80B6D5; - --pgn-color-info-200: #BFDBEA; - --pgn-color-info-100: #F0F6FA; - --pgn-color-success-900: #105B3A; - --pgn-color-success-800: #11623E; - --pgn-color-success-700: #126842; - --pgn-color-success-600: #15754B; - --pgn-color-success-400: #51A17E; - --pgn-color-success-300: #8BC1A9; - --pgn-color-success-200: #C5E0D4; - --pgn-color-success-100: #F1F8F5; - --pgn-color-brand-base: #9D0054; - --pgn-color-brand-900: #6E003B; - --pgn-color-brand-800: #76003F; - --pgn-color-brand-700: #7E0043; - --pgn-color-brand-600: #8D004C; - --pgn-color-brand-400: #B6407F; - --pgn-color-brand-300: #CE80AA; - --pgn-color-brand-200: #E7BFD4; - --pgn-color-brand-100: #F9F0F5; - --pgn-color-secondary-900: #303030; - --pgn-color-secondary-800: #343434; - --pgn-color-secondary-700: #373737; - --pgn-color-secondary-600: #3E3E3E; - --pgn-color-secondary-400: #747474; - --pgn-color-secondary-300: #A2A2A2; - --pgn-color-secondary-200: #D1D1D1; - --pgn-color-secondary-100: #F4F4F4; - --pgn-color-primary-base: #0A3055; - --pgn-color-primary-900: #07223C; - --pgn-color-primary-800: #082440; - --pgn-color-primary-700: #082644; - --pgn-color-primary-600: #092B4D; - --pgn-color-primary-400: #476480; - --pgn-color-primary-300: #8598AA; - --pgn-color-primary-200: #C2CBD5; - --pgn-color-primary-100: #F0F3F5; - --pgn-color-gray-base: #707070; - --pgn-color-gray-900: #212529; - --pgn-color-gray-800: #333333; - --pgn-color-gray-700: #454545; - --pgn-color-gray-600: #5C5C5C; - --pgn-color-gray-400: #8F8F8F; - --pgn-color-gray-300: #ADADAD; - --pgn-color-gray-200: #CCCCCC; - --pgn-color-gray-100: #EBEBEB; + --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-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-400: #E9E6E4FF; + --pgn-color-light-300: #F0EEEDFF; + --pgn-color-light-200: #F8F7F6FF; + --pgn-color-light-100: #FDFDFDFF; + --pgn-color-danger-900: #892029FF; + --pgn-color-danger-800: #92222CFF; + --pgn-color-danger-700: #9C242EFF; + --pgn-color-danger-600: #B02934FF; + --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-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-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-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-400: #B6407FFF; + --pgn-color-brand-300: #CE80AAFF; + --pgn-color-brand-200: #E7BFD4FF; + --pgn-color-brand-100: #F9F0F5FF; + --pgn-color-secondary-900: #303030FF; + --pgn-color-secondary-800: #343434FF; + --pgn-color-secondary-700: #373737FF; + --pgn-color-secondary-600: #3E3E3EFF; + --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-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-theme-interval: 8%; - --pgn-color-accent-b: #FFEE88; - --pgn-color-accent-a: #00BBF9; - --pgn-color-teal: #006DAA; - --pgn-color-yellow: #FFD900; - --pgn-color-green: #178253; - --pgn-color-red: #C32D3A; - --pgn-color-blue: #23419F; - --pgn-color-black: #000000; - --pgn-color-white: #FFFFFF; + --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-font-weight-base: var(--pgn-font-weight-normal); --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25); --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); @@ -628,7 +608,6 @@ --pgn-pagination-border-width: var(--pgn-border-width); --pgn-pagination-bg-disabled: var(--pgn-color-white); --pgn-pagination-bg-hover: var(--pgn-color-gray-100); - --pgn-pagination-color-hover: var(--pgn-link-hover-color); --pgn-pagination-color-inverse: var(--pgn-color-white); --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active); --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active); @@ -793,7 +772,15 @@ --pgn-color-success-base: var(--pgn-color-green); --pgn-color-brand-500: var(--pgn-color-brand-base); --pgn-color-secondary-base: var(--pgn-color-gray-700); + --pgn-color-primary-900: #07223CFF; + --pgn-color-primary-800: #082440FF; + --pgn-color-primary-700: #082644FF; + --pgn-color-primary-600: #092B4DFF; --pgn-color-primary-500: var(--pgn-color-primary-base); + --pgn-color-primary-400: #476480FF; + --pgn-color-primary-300: #8598AAFF; + --pgn-color-primary-200: #C2CBD5FF; + --pgn-color-primary-100: #F0F3F5FF; --pgn-color-gray-500: var(--pgn-color-gray-base); --pgn-color-active: var(--pgn-color-white); --pgn-color-background-base: var(--pgn-color-white); @@ -911,6 +898,12 @@ --pgn-image-thumbnail-bg: var(--pgn-body-bg); --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); --pgn-list-group-active-bg: var(--pgn-color-background-active); + --pgn-link-brand-inline-hover-color: #95004EFF; + --pgn-link-brand-inline-decoration-color: #9D00544D; + --pgn-link-brand-hover-color: #95004EFF; + --pgn-link-muted-inline-hover-color: #002A4FFF; + --pgn-link-muted-inline-decoration-color: #0A30554D; + --pgn-link-muted-hover-color: #002A4FFF; --pgn-input-btn-focus-color: var(--pgn-color-input-focus); --pgn-form-custom-file-button-color: var(--pgn-form-custom-file-color); --pgn-form-custom-file-font-weight: var(--pgn-form-input-font-weight); @@ -949,11 +942,18 @@ --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); --pgn-pagination-color-base: var(--pgn-color-link); --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); + --pgn-link-brand-inline-hover-decoration-color: var(--pgn-link-brand-inline-hover-color); + --pgn-link-muted-inline-hover-decoration-color: var(--pgn-link-muted-inline-hover-color); --pgn-link-inline-color: var(--pgn-color-link); + --pgn-link-hover-color: #0066A3FF; --pgn-link-color: var(--pgn-color-link); --pgn-form-custom-file-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-font-height-lg: var(--pgn-form-input-height-lg); --pgn-form-custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg); --pgn-form-custom-control-indicator-checked-border-color-focus: var(--pgn-form-input-focus-color-border); + --pgn-pagination-color-hover: var(--pgn-link-hover-color); + --pgn-link-inline-hover-color: #0066A3FF; + --pgn-link-inline-decoration-color: #006DAA4D; + --pgn-link-inline-hover-decoration-color: var(--pgn-link-inline-hover-color); } diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss index b5dfe51316..086b0a5dc1 100644 --- a/src/Button/_variables.scss +++ b/src/Button/_variables.scss @@ -16,7 +16,7 @@ $btn-line-height-lg: var(--pgn-btn-line-height-lg) !default; $btn-border-width: var(--pgn-btn-border-width) !default; -$btn-font-weight: var(--pgn-btn-font-width) !default; +$btn-font-weight: var(--pgn-btn-font-weight) !default; $btn-box-shadow: var(--pgn-btn-box-shadow-base) !default; $btn-focus-width: var(--pgn-btn-focus-width) !default; $btn-focus-gap: var(--pgn-btn-focus-gap) !default; diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss index 1a5577de5a..5445dbd280 100644 --- a/src/Form/_variables.scss +++ b/src/Form/_variables.scss @@ -91,12 +91,15 @@ $custom-control-label-disabled-color: var(--pgn-form-custom-control-label-color- $custom-control-indicator-checked-color: #0A3055 !default; $custom-control-indicator-checked-bg: #0A3055 !default; $custom-control-indicator-checked-disabled-bg: var(--pgn-form-custom-control-indicator-checked-bg-disabled) !default; + // stylelint-disable-next-line max-line-length $custom-control-indicator-checked-box-shadow: var(--pgn-form-custom-control-indicator-checked-box-shadow-base) !default; + // stylelint-disable-next-line max-line-length $custom-control-indicator-checked-border-color: var(--pgn-form-custom-control-indicator-checked-border-color-base) !default; $custom-control-indicator-focus-box-shadow: var(--pgn-form-custom-control-indicator-checked-box-shadow-focus) !default; + // stylelint-disable-next-line max-line-length $custom-control-indicator-focus-border-color: var(--pgn-form-custom-control-indicator-checked-border-color-focus) !default; @@ -111,8 +114,10 @@ $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+ $custom-checkbox-indicator-indeterminate-bg: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg) !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; + // stylelint-disable-next-line max-line-length $custom-checkbox-indicator-indeterminate-box-shadow: var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow) !default; + // stylelint-disable-next-line max-line-length $custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color) !default; diff --git a/tokens/build-tokens.js b/tokens/build-tokens.js index 9ab2dba17b..c29dbf2d24 100644 --- a/tokens/build-tokens.js +++ b/tokens/build-tokens.js @@ -1,23 +1,52 @@ const StyleDictionary = require('style-dictionary'); const path = require('path'); +const chroma = require('chroma-js'); const { formattedVariables, fileHeader } = StyleDictionary.formatHelpers; const PGN_PREFIX = 'pgn'; const BASE_BUILD_PATH = path.resolve(__dirname, 'build'); +const colorTransform = (token) => { + const { value, modify = [], original } = token; + + if (original.value.endsWith('%')) { + return original.value; + } + + let color = chroma(value); + + if (modify.length > 0) { + // iterate over the modify array (see tokens/color.json) + // and apply each modification in order + modify.forEach(({type, amount, otherColor}) => { + // modifier type must match a method name in chromajs + // https://gka.github.io/chroma.js/ + // chroma methods can be chained, so each time we override the color variable + // we can still call other chroma methods, similar to + // chroma(value).brighten(1).darken(1).hex(); + if (type === 'mix') { + color = color[type](otherColor, amount, 'rgb'); + } else { + color = color[type](amount); + } + }); + } + + return color.hex('rgba').toUpperCase(); +} + /** * Transforms color values to be in uppercase format to be compatible with our stylelint rules. */ StyleDictionary.registerTransform({ - name: 'color/uppercase', + name: 'color/sass-functions', + transitive: true, type: 'value', matcher(token) { - return token.attributes.category === 'color'; - }, - transformer(token) { - return token.original.value.toUpperCase(); + return token.attributes.category === 'color' || token.value.toString().startsWith('#'); }, + transformer: colorTransform, }); /** @@ -50,7 +79,7 @@ const paragonStyleDictionary = StyleDictionary.extend({ outputReferences: true, }, }], - transforms: StyleDictionary.transformGroup.scss.concat('color/uppercase'), + transforms: StyleDictionary.transformGroup.scss.concat('color/sass-functions'), options: { showFileHeader: false, }, @@ -74,7 +103,7 @@ const paragonStyleDictionary = StyleDictionary.extend({ }, }, ], - transforms: StyleDictionary.transformGroup.css.concat('color/uppercase'), + transforms: StyleDictionary.transformGroup.css.concat('color/sass-functions'), options: { showFileHeader: false, }, diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss index b082fe8c4b..436f0cd947 100644 --- a/tokens/build/_variables.scss +++ b/tokens/build/_variables.scss @@ -246,7 +246,7 @@ $pgn-icon-lg: 1.75rem !default; $pgn-icon-md: 1.5rem !default; $pgn-icon-sm: 1.25rem !default; $pgn-icon-inline: .8em !default; -$pgn-mark-bg: #FFF243 !default; +$pgn-mark-bg: #FFF243FF !default; $pgn-mark-padding: .2em !default; $pgn-paragraph-margin-bottom: 1rem !default; $pgn-list-group-item-padding-x: 1.25rem !default; @@ -254,29 +254,17 @@ $pgn-list-group-item-padding-y: .75rem !default; $pgn-list-group-color: null !default; $pgn-list-inline-padding: .5rem !default; $pgn-link-emphasized-hover-darken-percentage: 15% !default; -$pgn-link-brand-inline-hover-decoration-color: #003C5E !default; $pgn-link-brand-inline-hover-decoration: underline !default; -$pgn-link-brand-inline-hover-color: #003C5E !default; -$pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3) !default; $pgn-link-brand-inline-decoration: underline !default; $pgn-link-brand-hover-decoration: underline !default; -$pgn-link-brand-hover-color: #51002B !default; $pgn-link-brand-decoration: none !default; -$pgn-link-muted-inline-hover-decoration-color: #020911 !default; $pgn-link-muted-inline-hover-decoration: underline !default; -$pgn-link-muted-inline-hover-color: #020911 !default; -$pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3) !default; $pgn-link-muted-inline-decoration: underline !default; $pgn-link-muted-hover-decoration: underline !default; -$pgn-link-muted-hover-color: #020911 !default; $pgn-link-muted-decoration: none !default; -$pgn-link-inline-hover-decoration-color: #003C5E !default; $pgn-link-inline-hover-decoration: underline !default; -$pgn-link-inline-hover-color: #003C5E !default; -$pgn-link-inline-decoration-color: rgba(0, 109, 170, .3) !default; $pgn-link-inline-decoration: underline !default; $pgn-link-hover-decoration: underline !default; -$pgn-link-hover-color: #003C5E !default; $pgn-link-decoration: none !default; $pgn-input-btn-focus-width: 1px !default; $pgn-input-btn-line-height-sm: 1.4286 !default; @@ -374,7 +362,7 @@ $pgn-collapsible-card-spacer-y-base: .5rem !default; $pgn-code-pre-scrollable-max-height: 340px !default; $pgn-code-kbd-padding-x: .4rem !default; $pgn-code-kbd-padding-y: .2rem !default; -$pgn-code-color: #E83E8C !default; +$pgn-code-color: #E83E8CFF !default; $pgn-code-font-size: 87.5% !default; $pgn-chip-line-height: 1.5rem !default; $pgn-chip-font-weight: 400 !default; @@ -479,101 +467,93 @@ $pgn-alert-padding-x: 1.5rem !default; $pgn-alert-padding-y: 1.5rem !default; $pgn-action-row-gap-y: .5rem !default; $pgn-action-row-gap-x: .5rem !default; -$pgn-color-dark-base: #273F2F !default; -$pgn-color-dark-900: #1B2C21 !default; -$pgn-color-dark-800: #1D2F23 !default; -$pgn-color-dark-700: #1F3226 !default; -$pgn-color-dark-600: #23392A !default; -$pgn-color-dark-400: #5D6F63 !default; -$pgn-color-dark-300: #939F97 !default; -$pgn-color-dark-200: #C9CFCB !default; -$pgn-color-dark-100: #F2F3F3 !default; -$pgn-color-light-base: #E1DDDB !default; -$pgn-color-light-900: #9E9B99 !default; -$pgn-color-light-800: #A9A6A4 !default; -$pgn-color-light-700: #B4B1AF !default; -$pgn-color-light-600: #CBC7C5 !default; -$pgn-color-light-400: #E9E6E4 !default; -$pgn-color-light-300: #F0EEED !default; -$pgn-color-light-200: #F8F7F6 !default; -$pgn-color-light-100: #FDFDFD !default; -$pgn-color-danger-900: #892029 !default; -$pgn-color-danger-800: #92222C !default; -$pgn-color-danger-700: #9C242E !default; -$pgn-color-danger-600: #B02934 !default; -$pgn-color-danger-400: #D2626B !default; -$pgn-color-danger-300: #E1969D !default; -$pgn-color-danger-200: #F0CBCE !default; -$pgn-color-danger-100: #FBF2F3 !default; -$pgn-color-warning-900: #B39800 !default; -$pgn-color-warning-800: #BFA300 !default; -$pgn-color-warning-700: #CCAE00 !default; -$pgn-color-warning-600: #E6C300 !default; -$pgn-color-warning-400: #FFE340 !default; -$pgn-color-warning-300: #FFEC80 !default; -$pgn-color-warning-200: #FFF6BF !default; -$pgn-color-warning-100: #FFFDF0 !default; -$pgn-color-info-900: #004C77 !default; -$pgn-color-info-800: #005280 !default; -$pgn-color-info-700: #005788 !default; -$pgn-color-info-600: #006299 !default; -$pgn-color-info-400: #4092BF !default; -$pgn-color-info-300: #80B6D5 !default; -$pgn-color-info-200: #BFDBEA !default; -$pgn-color-info-100: #F0F6FA !default; -$pgn-color-success-900: #105B3A !default; -$pgn-color-success-800: #11623E !default; -$pgn-color-success-700: #126842 !default; -$pgn-color-success-600: #15754B !default; -$pgn-color-success-400: #51A17E !default; -$pgn-color-success-300: #8BC1A9 !default; -$pgn-color-success-200: #C5E0D4 !default; -$pgn-color-success-100: #F1F8F5 !default; -$pgn-color-brand-base: #9D0054 !default; -$pgn-color-brand-900: #6E003B !default; -$pgn-color-brand-800: #76003F !default; -$pgn-color-brand-700: #7E0043 !default; -$pgn-color-brand-600: #8D004C !default; -$pgn-color-brand-400: #B6407F !default; -$pgn-color-brand-300: #CE80AA !default; -$pgn-color-brand-200: #E7BFD4 !default; -$pgn-color-brand-100: #F9F0F5 !default; -$pgn-color-secondary-900: #303030 !default; -$pgn-color-secondary-800: #343434 !default; -$pgn-color-secondary-700: #373737 !default; -$pgn-color-secondary-600: #3E3E3E !default; -$pgn-color-secondary-400: #747474 !default; -$pgn-color-secondary-300: #A2A2A2 !default; -$pgn-color-secondary-200: #D1D1D1 !default; -$pgn-color-secondary-100: #F4F4F4 !default; -$pgn-color-primary-base: #0A3055 !default; -$pgn-color-primary-900: #07223C !default; -$pgn-color-primary-800: #082440 !default; -$pgn-color-primary-700: #082644 !default; -$pgn-color-primary-600: #092B4D !default; -$pgn-color-primary-400: #476480 !default; -$pgn-color-primary-300: #8598AA !default; -$pgn-color-primary-200: #C2CBD5 !default; -$pgn-color-primary-100: #F0F3F5 !default; -$pgn-color-gray-base: #707070 !default; -$pgn-color-gray-900: #212529 !default; -$pgn-color-gray-800: #333333 !default; -$pgn-color-gray-700: #454545 !default; -$pgn-color-gray-600: #5C5C5C !default; -$pgn-color-gray-400: #8F8F8F !default; -$pgn-color-gray-300: #ADADAD !default; -$pgn-color-gray-200: #CCCCCC !default; -$pgn-color-gray-100: #EBEBEB !default; +$pgn-color-dark-base: #273F2FFF !default; +$pgn-color-dark-900: #1B2C21FF !default; +$pgn-color-dark-800: #1D2F23FF !default; +$pgn-color-dark-700: #1F3226FF !default; +$pgn-color-dark-600: #23392AFF !default; +$pgn-color-dark-400: #5D6F63FF !default; +$pgn-color-dark-300: #939F97FF !default; +$pgn-color-dark-200: #C9CFCBFF !default; +$pgn-color-dark-100: #F2F3F3FF !default; +$pgn-color-light-base: #E1DDDBFF !default; +$pgn-color-light-900: #9E9B99FF !default; +$pgn-color-light-800: #A9A6A4FF !default; +$pgn-color-light-700: #B4B1AFFF !default; +$pgn-color-light-600: #CBC7C5FF !default; +$pgn-color-light-400: #E9E6E4FF !default; +$pgn-color-light-300: #F0EEEDFF !default; +$pgn-color-light-200: #F8F7F6FF !default; +$pgn-color-light-100: #FDFDFDFF !default; +$pgn-color-danger-900: #892029FF !default; +$pgn-color-danger-800: #92222CFF !default; +$pgn-color-danger-700: #9C242EFF !default; +$pgn-color-danger-600: #B02934FF !default; +$pgn-color-danger-400: #D2626BFF !default; +$pgn-color-danger-300: #E1969DFF !default; +$pgn-color-danger-200: #F0CBCEFF !default; +$pgn-color-danger-100: #FBF2F3FF !default; +$pgn-color-warning-900: #B39800FF !default; +$pgn-color-warning-800: #BFA300FF !default; +$pgn-color-warning-700: #CCAE00FF !default; +$pgn-color-warning-600: #E6C300FF !default; +$pgn-color-warning-400: #FFE340FF !default; +$pgn-color-warning-300: #FFEC80FF !default; +$pgn-color-warning-200: #FFF6BFFF !default; +$pgn-color-warning-100: #FFFDF0FF !default; +$pgn-color-info-900: #004C77FF !default; +$pgn-color-info-800: #005280FF !default; +$pgn-color-info-700: #005788FF !default; +$pgn-color-info-600: #006299FF !default; +$pgn-color-info-400: #4092BFFF !default; +$pgn-color-info-300: #80B6D5FF !default; +$pgn-color-info-200: #BFDBEAFF !default; +$pgn-color-info-100: #F0F6FAFF !default; +$pgn-color-success-900: #105B3AFF !default; +$pgn-color-success-800: #11623EFF !default; +$pgn-color-success-700: #126842FF !default; +$pgn-color-success-600: #15754BFF !default; +$pgn-color-success-400: #51A17EFF !default; +$pgn-color-success-300: #8BC1A9FF !default; +$pgn-color-success-200: #C5E0D4FF !default; +$pgn-color-success-100: #F1F8F5FF !default; +$pgn-color-brand-base: #9D0054FF !default; +$pgn-color-brand-900: #6E003BFF !default; +$pgn-color-brand-800: #76003FFF !default; +$pgn-color-brand-700: #7E0043FF !default; +$pgn-color-brand-600: #8D004CFF !default; +$pgn-color-brand-400: #B6407FFF !default; +$pgn-color-brand-300: #CE80AAFF !default; +$pgn-color-brand-200: #E7BFD4FF !default; +$pgn-color-brand-100: #F9F0F5FF !default; +$pgn-color-secondary-900: #303030FF !default; +$pgn-color-secondary-800: #343434FF !default; +$pgn-color-secondary-700: #373737FF !default; +$pgn-color-secondary-600: #3E3E3EFF !default; +$pgn-color-secondary-400: #747474FF !default; +$pgn-color-secondary-300: #A2A2A2FF !default; +$pgn-color-secondary-200: #D1D1D1FF !default; +$pgn-color-secondary-100: #F4F4F4FF !default; +$pgn-color-primary-base: #0A3055FF !default; +$pgn-color-gray-base: #707070FF !default; +$pgn-color-gray-900: #212529FF !default; +$pgn-color-gray-800: #333333FF !default; +$pgn-color-gray-700: #454545FF !default; +$pgn-color-gray-600: #5C5C5CFF !default; +$pgn-color-gray-400: #8F8F8FFF !default; +$pgn-color-gray-300: #ADADADFF !default; +$pgn-color-gray-200: #CCCCCCFF !default; +$pgn-color-gray-100: #EBEBEBFF !default; $pgn-color-theme-interval: 8% !default; -$pgn-color-accent-b: #FFEE88 !default; -$pgn-color-accent-a: #00BBF9 !default; -$pgn-color-teal: #006DAA !default; -$pgn-color-yellow: #FFD900 !default; -$pgn-color-green: #178253 !default; -$pgn-color-red: #C32D3A !default; -$pgn-color-blue: #23419F !default; -$pgn-color-black: #000000 !default; -$pgn-color-white: #FFFFFF !default; +$pgn-color-accent-b: #FFEE88FF !default; +$pgn-color-accent-a: #00BBF9FF !default; +$pgn-color-teal: #006DAAFF !default; +$pgn-color-yellow: #FFD900FF !default; +$pgn-color-green: #178253FF !default; +$pgn-color-red: #C32D3AFF !default; +$pgn-color-blue: #23419FFF !default; +$pgn-color-black: #000000FF !default; +$pgn-color-white: #FFFFFFFF !default; $pgn-font-weight-base: $pgn-font-weight-normal !default; $pgn-font-size-lead: calc($pgn-font-size-base * 1.25) !default; $pgn-font-size-mobile-h6: $pgn-font-size-h6 !default; @@ -627,7 +607,6 @@ $pgn-pagination-border-color-base: $pgn-color-gray-200 !default; $pgn-pagination-border-width: $pgn-border-width !default; $pgn-pagination-bg-disabled: $pgn-color-white !default; $pgn-pagination-bg-hover: $pgn-color-gray-100 !default; -$pgn-pagination-color-hover: $pgn-link-hover-color !default; $pgn-pagination-color-inverse: $pgn-color-white !default; $pgn-navbar-light-brand-color-hover: $pgn-navbar-light-color-active !default; $pgn-navbar-light-brand-color-base: $pgn-navbar-light-color-active !default; @@ -792,7 +771,15 @@ $pgn-color-info-base: $pgn-color-teal !default; $pgn-color-success-base: $pgn-color-green !default; $pgn-color-brand-500: $pgn-color-brand-base !default; $pgn-color-secondary-base: $pgn-color-gray-700 !default; +$pgn-color-primary-900: #07223CFF !default; +$pgn-color-primary-800: #082440FF !default; +$pgn-color-primary-700: #082644FF !default; +$pgn-color-primary-600: #092B4DFF !default; $pgn-color-primary-500: $pgn-color-primary-base !default; +$pgn-color-primary-400: #476480FF !default; +$pgn-color-primary-300: #8598AAFF !default; +$pgn-color-primary-200: #C2CBD5FF !default; +$pgn-color-primary-100: #F0F3F5FF !default; $pgn-color-gray-500: $pgn-color-gray-base !default; $pgn-color-active: $pgn-color-white !default; $pgn-color-background-base: $pgn-color-white !default; @@ -910,6 +897,12 @@ $pgn-menu-background-active: $pgn-btn-tertiary-bg-active !default; $pgn-image-thumbnail-bg: $pgn-body-bg !default; $pgn-list-group-disabled-bg: $pgn-list-group-bg-base !default; $pgn-list-group-active-bg: $pgn-color-background-active !default; +$pgn-link-brand-inline-hover-color: #95004EFF !default; +$pgn-link-brand-inline-decoration-color: #9D00544D !default; +$pgn-link-brand-hover-color: #95004EFF !default; +$pgn-link-muted-inline-hover-color: #002A4FFF !default; +$pgn-link-muted-inline-decoration-color: #0A30554D !default; +$pgn-link-muted-hover-color: #002A4FFF !default; $pgn-input-btn-focus-color: $pgn-color-input-focus !default; $pgn-form-custom-file-button-color: $pgn-form-custom-file-color !default; $pgn-form-custom-file-font-weight: $pgn-form-input-font-weight !default; @@ -948,10 +941,17 @@ $pgn-color-link: $pgn-color-info-500 !default; $pgn-pagination-border-color-active: $pgn-pagination-bg-active !default; $pgn-pagination-color-base: $pgn-color-link !default; $pgn-list-group-active-color-border: $pgn-list-group-active-bg !default; +$pgn-link-brand-inline-hover-decoration-color: $pgn-link-brand-inline-hover-color !default; +$pgn-link-muted-inline-hover-decoration-color: $pgn-link-muted-inline-hover-color !default; $pgn-link-inline-color: $pgn-color-link !default; +$pgn-link-hover-color: #0066A3FF !default; $pgn-link-color: $pgn-color-link !default; $pgn-form-custom-file-border-color-focus: $pgn-form-input-focus-color-border !default; $pgn-form-custom-select-border-color-focus: $pgn-form-input-focus-color-border !default; $pgn-form-custom-select-font-height-lg: $pgn-form-input-height-lg !default; $pgn-form-custom-checkbox-indicator-indeterminate-border-color: $pgn-form-custom-checkbox-indicator-indeterminate-bg !default; $pgn-form-custom-control-indicator-checked-border-color-focus: $pgn-form-input-focus-color-border !default; +$pgn-pagination-color-hover: $pgn-link-hover-color !default; +$pgn-link-inline-hover-color: #0066A3FF !default; +$pgn-link-inline-decoration-color: #006DAA4D !default; +$pgn-link-inline-hover-decoration-color: $pgn-link-inline-hover-color !default; diff --git a/tokens/build/css-to-scss.json b/tokens/build/css-to-scss.json index dc06754d4c..20444eac5a 100644 --- a/tokens/build/css-to-scss.json +++ b/tokens/build/css-to-scss.json @@ -1 +1 @@ -{"var(--pgn-color-background-active)":"$component-active-bg","var(--pgn-color-active)":"$component-active-color","var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-weight)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-box-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-border)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-tooltip-zindex)":"$zindex-tooltip","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-brand-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"} \ No newline at end of file +{"var(--pgn-color-background-active)":"$component-active-bg","var(--pgn-color-active)":"$component-active-color","var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-weight)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-box-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-border)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-tooltip-zindex)":"$zindex-tooltip","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-brand-inline-decoration-color)":"$brand-inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$brand-inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$brand-inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$brand-inline-link-hover-decoration-color","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"} \ No newline at end of file diff --git a/tokens/build/scss-to-css.json b/tokens/build/scss-to-css.json index 963e17db53..c605586b25 100644 --- a/tokens/build/scss-to-css.json +++ b/tokens/build/scss-to-css.json @@ -1 +1 @@ -{"$component-active-bg":"var(--pgn-color-background-active)","$component-active-color":"var(--pgn-color-active)","$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-weight)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-box-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-border)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$zindex-tooltip":"var(--pgn-tooltip-zindex)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"} \ No newline at end of file +{"$component-active-bg":"var(--pgn-color-background-active)","$component-active-color":"var(--pgn-color-active)","$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-weight)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-box-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-border)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$zindex-tooltip":"var(--pgn-tooltip-zindex)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$brand-inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$brand-inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$brand-inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$brand-inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"} \ No newline at end of file diff --git a/tokens/build/variables.css b/tokens/build/variables.css index 6342e05fe9..aefa4f6480 100644 --- a/tokens/build/variables.css +++ b/tokens/build/variables.css @@ -247,7 +247,7 @@ --pgn-icon-md: 1.5rem; --pgn-icon-sm: 1.25rem; --pgn-icon-inline: .8em; - --pgn-mark-bg: #FFF243; + --pgn-mark-bg: #FFF243FF; --pgn-mark-padding: .2em; --pgn-paragraph-margin-bottom: 1rem; --pgn-list-group-item-padding-x: 1.25rem; @@ -255,29 +255,17 @@ --pgn-list-group-color: null; --pgn-list-inline-padding: .5rem; --pgn-link-emphasized-hover-darken-percentage: 15%; - --pgn-link-brand-inline-hover-decoration-color: #003C5E; --pgn-link-brand-inline-hover-decoration: underline; - --pgn-link-brand-inline-hover-color: #003C5E; - --pgn-link-brand-inline-decoration-color: rgba(0, 109, 170, .3); --pgn-link-brand-inline-decoration: underline; --pgn-link-brand-hover-decoration: underline; - --pgn-link-brand-hover-color: #51002B; --pgn-link-brand-decoration: none; - --pgn-link-muted-inline-hover-decoration-color: #020911; --pgn-link-muted-inline-hover-decoration: underline; - --pgn-link-muted-inline-hover-color: #020911; - --pgn-link-muted-inline-decoration-color: rgba(10, 48, 85, .3); --pgn-link-muted-inline-decoration: underline; --pgn-link-muted-hover-decoration: underline; - --pgn-link-muted-hover-color: #020911; --pgn-link-muted-decoration: none; - --pgn-link-inline-hover-decoration-color: #003C5E; --pgn-link-inline-hover-decoration: underline; - --pgn-link-inline-hover-color: #003C5E; - --pgn-link-inline-decoration-color: rgba(0, 109, 170, .3); --pgn-link-inline-decoration: underline; --pgn-link-hover-decoration: underline; - --pgn-link-hover-color: #003C5E; --pgn-link-decoration: none; --pgn-input-btn-focus-width: 1px; --pgn-input-btn-line-height-sm: 1.4286; @@ -375,7 +363,7 @@ --pgn-code-pre-scrollable-max-height: 340px; --pgn-code-kbd-padding-x: .4rem; --pgn-code-kbd-padding-y: .2rem; - --pgn-code-color: #E83E8C; + --pgn-code-color: #E83E8CFF; --pgn-code-font-size: 87.5%; --pgn-chip-line-height: 1.5rem; --pgn-chip-font-weight: 400; @@ -480,101 +468,93 @@ --pgn-alert-padding-y: 1.5rem; --pgn-action-row-gap-y: .5rem; --pgn-action-row-gap-x: .5rem; - --pgn-color-dark-base: #273F2F; - --pgn-color-dark-900: #1B2C21; - --pgn-color-dark-800: #1D2F23; - --pgn-color-dark-700: #1F3226; - --pgn-color-dark-600: #23392A; - --pgn-color-dark-400: #5D6F63; - --pgn-color-dark-300: #939F97; - --pgn-color-dark-200: #C9CFCB; - --pgn-color-dark-100: #F2F3F3; - --pgn-color-light-base: #E1DDDB; - --pgn-color-light-900: #9E9B99; - --pgn-color-light-800: #A9A6A4; - --pgn-color-light-700: #B4B1AF; - --pgn-color-light-600: #CBC7C5; - --pgn-color-light-400: #E9E6E4; - --pgn-color-light-300: #F0EEED; - --pgn-color-light-200: #F8F7F6; - --pgn-color-light-100: #FDFDFD; - --pgn-color-danger-900: #892029; - --pgn-color-danger-800: #92222C; - --pgn-color-danger-700: #9C242E; - --pgn-color-danger-600: #B02934; - --pgn-color-danger-400: #D2626B; - --pgn-color-danger-300: #E1969D; - --pgn-color-danger-200: #F0CBCE; - --pgn-color-danger-100: #FBF2F3; - --pgn-color-warning-900: #B39800; - --pgn-color-warning-800: #BFA300; - --pgn-color-warning-700: #CCAE00; - --pgn-color-warning-600: #E6C300; - --pgn-color-warning-400: #FFE340; - --pgn-color-warning-300: #FFEC80; - --pgn-color-warning-200: #FFF6BF; - --pgn-color-warning-100: #FFFDF0; - --pgn-color-info-900: #004C77; - --pgn-color-info-800: #005280; - --pgn-color-info-700: #005788; - --pgn-color-info-600: #006299; - --pgn-color-info-400: #4092BF; - --pgn-color-info-300: #80B6D5; - --pgn-color-info-200: #BFDBEA; - --pgn-color-info-100: #F0F6FA; - --pgn-color-success-900: #105B3A; - --pgn-color-success-800: #11623E; - --pgn-color-success-700: #126842; - --pgn-color-success-600: #15754B; - --pgn-color-success-400: #51A17E; - --pgn-color-success-300: #8BC1A9; - --pgn-color-success-200: #C5E0D4; - --pgn-color-success-100: #F1F8F5; - --pgn-color-brand-base: #9D0054; - --pgn-color-brand-900: #6E003B; - --pgn-color-brand-800: #76003F; - --pgn-color-brand-700: #7E0043; - --pgn-color-brand-600: #8D004C; - --pgn-color-brand-400: #B6407F; - --pgn-color-brand-300: #CE80AA; - --pgn-color-brand-200: #E7BFD4; - --pgn-color-brand-100: #F9F0F5; - --pgn-color-secondary-900: #303030; - --pgn-color-secondary-800: #343434; - --pgn-color-secondary-700: #373737; - --pgn-color-secondary-600: #3E3E3E; - --pgn-color-secondary-400: #747474; - --pgn-color-secondary-300: #A2A2A2; - --pgn-color-secondary-200: #D1D1D1; - --pgn-color-secondary-100: #F4F4F4; - --pgn-color-primary-base: #0A3055; - --pgn-color-primary-900: #07223C; - --pgn-color-primary-800: #082440; - --pgn-color-primary-700: #082644; - --pgn-color-primary-600: #092B4D; - --pgn-color-primary-400: #476480; - --pgn-color-primary-300: #8598AA; - --pgn-color-primary-200: #C2CBD5; - --pgn-color-primary-100: #F0F3F5; - --pgn-color-gray-base: #707070; - --pgn-color-gray-900: #212529; - --pgn-color-gray-800: #333333; - --pgn-color-gray-700: #454545; - --pgn-color-gray-600: #5C5C5C; - --pgn-color-gray-400: #8F8F8F; - --pgn-color-gray-300: #ADADAD; - --pgn-color-gray-200: #CCCCCC; - --pgn-color-gray-100: #EBEBEB; + --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-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-400: #E9E6E4FF; + --pgn-color-light-300: #F0EEEDFF; + --pgn-color-light-200: #F8F7F6FF; + --pgn-color-light-100: #FDFDFDFF; + --pgn-color-danger-900: #892029FF; + --pgn-color-danger-800: #92222CFF; + --pgn-color-danger-700: #9C242EFF; + --pgn-color-danger-600: #B02934FF; + --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-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-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-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-400: #B6407FFF; + --pgn-color-brand-300: #CE80AAFF; + --pgn-color-brand-200: #E7BFD4FF; + --pgn-color-brand-100: #F9F0F5FF; + --pgn-color-secondary-900: #303030FF; + --pgn-color-secondary-800: #343434FF; + --pgn-color-secondary-700: #373737FF; + --pgn-color-secondary-600: #3E3E3EFF; + --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-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-theme-interval: 8%; - --pgn-color-accent-b: #FFEE88; - --pgn-color-accent-a: #00BBF9; - --pgn-color-teal: #006DAA; - --pgn-color-yellow: #FFD900; - --pgn-color-green: #178253; - --pgn-color-red: #C32D3A; - --pgn-color-blue: #23419F; - --pgn-color-black: #000000; - --pgn-color-white: #FFFFFF; + --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-font-weight-base: var(--pgn-font-weight-normal); --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25); --pgn-font-size-mobile-h6: var(--pgn-font-size-h6); @@ -628,7 +608,6 @@ --pgn-pagination-border-width: var(--pgn-border-width); --pgn-pagination-bg-disabled: var(--pgn-color-white); --pgn-pagination-bg-hover: var(--pgn-color-gray-100); - --pgn-pagination-color-hover: var(--pgn-link-hover-color); --pgn-pagination-color-inverse: var(--pgn-color-white); --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active); --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active); @@ -793,7 +772,15 @@ --pgn-color-success-base: var(--pgn-color-green); --pgn-color-brand-500: var(--pgn-color-brand-base); --pgn-color-secondary-base: var(--pgn-color-gray-700); + --pgn-color-primary-900: #07223CFF; + --pgn-color-primary-800: #082440FF; + --pgn-color-primary-700: #082644FF; + --pgn-color-primary-600: #092B4DFF; --pgn-color-primary-500: var(--pgn-color-primary-base); + --pgn-color-primary-400: #476480FF; + --pgn-color-primary-300: #8598AAFF; + --pgn-color-primary-200: #C2CBD5FF; + --pgn-color-primary-100: #F0F3F5FF; --pgn-color-gray-500: var(--pgn-color-gray-base); --pgn-color-active: var(--pgn-color-white); --pgn-color-background-base: var(--pgn-color-white); @@ -911,6 +898,12 @@ --pgn-image-thumbnail-bg: var(--pgn-body-bg); --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base); --pgn-list-group-active-bg: var(--pgn-color-background-active); + --pgn-link-brand-inline-hover-color: #95004EFF; + --pgn-link-brand-inline-decoration-color: #9D00544D; + --pgn-link-brand-hover-color: #95004EFF; + --pgn-link-muted-inline-hover-color: #002A4FFF; + --pgn-link-muted-inline-decoration-color: #0A30554D; + --pgn-link-muted-hover-color: #002A4FFF; --pgn-input-btn-focus-color: var(--pgn-color-input-focus); --pgn-form-custom-file-button-color: var(--pgn-form-custom-file-color); --pgn-form-custom-file-font-weight: var(--pgn-form-input-font-weight); @@ -949,11 +942,18 @@ --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active); --pgn-pagination-color-base: var(--pgn-color-link); --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg); + --pgn-link-brand-inline-hover-decoration-color: var(--pgn-link-brand-inline-hover-color); + --pgn-link-muted-inline-hover-decoration-color: var(--pgn-link-muted-inline-hover-color); --pgn-link-inline-color: var(--pgn-color-link); + --pgn-link-hover-color: #0066A3FF; --pgn-link-color: var(--pgn-color-link); --pgn-form-custom-file-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-border-color-focus: var(--pgn-form-input-focus-color-border); --pgn-form-custom-select-font-height-lg: var(--pgn-form-input-height-lg); --pgn-form-custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg); --pgn-form-custom-control-indicator-checked-border-color-focus: var(--pgn-form-input-focus-color-border); + --pgn-pagination-color-hover: var(--pgn-link-hover-color); + --pgn-link-inline-hover-color: #0066A3FF; + --pgn-link-inline-decoration-color: #006DAA4D; + --pgn-link-inline-hover-decoration-color: var(--pgn-link-inline-hover-color); } diff --git a/tokens/package-lock.json b/tokens/package-lock.json index 3caf0b7ee9..c4688a97d8 100644 --- a/tokens/package-lock.json +++ b/tokens/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "ISC", "dependencies": { + "chroma-js": "^2.4.2", "commander": "^7.1.0", "style-dictionary": "^3.7.1" } @@ -94,6 +95,11 @@ "tslib": "^2.0.3" } }, + "node_modules/chroma-js": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz", + "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==" + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -491,6 +497,11 @@ "tslib": "^2.0.3" } }, + "chroma-js": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz", + "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==" + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", diff --git a/tokens/package.json b/tokens/package.json index eefd387f5c..68deb57dfa 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -12,6 +12,7 @@ "author": "", "license": "ISC", "dependencies": { + "chroma-js": "^2.4.2", "commander": "^7.1.0", "style-dictionary": "^3.7.1" } diff --git a/tokens/source/components/general/link.json b/tokens/source/components/general/link.json index 9f9147f393..142e712f46 100644 --- a/tokens/source/components/general/link.json +++ b/tokens/source/components/general/link.json @@ -3,41 +3,97 @@ "color": { "value": "{color.link.value}", "themeable": true, "source": "$link-color" }, "decoration": { "value": "none", "themeable": true, "source": "$link-decoration" }, "hover": { - "color": { "value": "#003C5E", "themeable": true, "source": "$link-hover-color" }, + "color": { + "value": "{color.link.value}", + "themeable": true, + "source": "$link-hover-color", + "modify": [{ + "type": "darken", + "amount": 0.15 + }] + }, "decoration": { "value": "underline", "themeable": true, "source": "$link-hover-decoration" } }, "inline": { "color": { "value": "{color.link.value}", "themeable": true, "source": "$inline-link-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-decoration" }, - "decoration-color": { "value": "rgba(0, 109, 170, .3)", "themeable": true, "source": "$inline-link-decoration-color" }, + "decoration-color": { + "value": "{link.inline.color.value}", + "themeable": true, + "source": "$inline-link-decoration-color", + "modify": [{ + "type": "alpha", + "amount": 0.3 + }] + }, "hover": { - "color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-color" }, + "color": { + "value": "{link.inline.color.value}", + "themeable": true, + "source": "$inline-link-hover-color", + "modify": [{ + "type": "darken", + "amount": 0.15 + }] + }, "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-hover-decoration" }, - "decoration-color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-decoration-color" } + "decoration-color": { + "value": "{link.inline.hover.color.value}", + "themeable": true, + "source": "$inline-link-hover-decoration-color", + "modify": [{ + "type": "alpha", + "amount": 1 + }] + } } }, "muted": { "color": { "value": "{color.primary.500.value}", "themeable": true, "source": "$muted-link-color" }, "decoration": { "value": "none", "themeable": true, "source": "$muted-link-decoration" }, "hover": { - "color": { "value": "#020911", "themeable": true, "source": "$muted-link-hover-color" }, + "color": { + "value": "{link.muted.color.value}", + "themeable": true, + "source": "$muted-link-hover-color", + "modify": [{ + "type": "darken", + "amount": 0.15 + }] + }, "decoration": { "value": "underline", "themeable": true, "source": "$muted-link-hover-decoration" } }, "inline": { "color": { "value": "{color.primary.500.value}", "themeable": true, "source": "$muted-inline-link-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$muted-inline-link-decoration" }, "decoration-color": { - "value": "rgba(10, 48, 85, .3)", + "value": "{link.muted.inline.color.value}", "themeable": true, - "source": "$muted-inline-link-decoration-color" + "source": "$muted-inline-link-decoration-color", + "modify": [{ + "type": "alpha", + "amount": 0.3 + }] }, "hover": { - "color": { "value": "#020911", "themeable": true, "source": "$muted-inline-link-hover-color" }, + "color": { + "value": "{link.muted.inline.color.value}", + "themeable": true, + "source": "$muted-inline-link-hover-color", + "modify": [{ + "type": "darken", + "amount": 0.15 + }] + }, "decoration": { "value": "underline", "themeable": true, "source": "$muted-inline-link-hover-decoration" }, "decoration-color": { - "value": "#020911", + "value": "{link.muted.inline.hover.color.value}", "themeable": true, - "source": "$muted-inline-link-hover-decoration-color" + "source": "$muted-inline-link-hover-decoration-color", + "modify": [{ + "type": "alpha", + "amount": 1 + }] } } } @@ -46,21 +102,49 @@ "color": { "value": "{color.brand.500.value}", "themeable": true, "source": "$brand-link-color" }, "decoration": { "value": "none", "themeable": true, "source": "$brand-link-decoration" }, "hover": { - "color": { "value": "#51002B", "themeable": true, "source": "$brand-link-hover-color" }, + "color": { + "value": "{link.brand.color.value}", + "themeable": true, + "source": "$brand-link-hover-color", + "modify": [{ + "type": "darken", + "amount": 0.15 + }] + }, "decoration": { "value": "underline", "themeable": true, "source": "$brand-link-hover-decoration" } }, "inline": { "color": { "value": "{color.brand.500.value}", "themeable": true, "source": "$inline-link-color" }, "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-decoration" }, "decoration-color": { - "value": "rgba(0, 109, 170, .3)", + "value": "{link.brand.inline.color.value}", "themeable": true, - "source": "$inline-link-decoration-color" + "source": "$brand-inline-link-decoration-color", + "modify": [{ + "type": "alpha", + "amount": 0.3 + }] }, "hover": { - "color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-color" }, - "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-hover-decoration" }, - "decoration-color": { "value": "#003C5E", "themeable": true, "source": "$inline-link-hover-decoration-color" } + "color": { + "value": "{link.brand.inline.color.value}", + "themeable": true, + "source": "$brand-inline-link-hover-color", + "modify": [{ + "type": "darken", + "amount": 0.15 + }] + }, + "decoration": { "value": "underline", "themeable": true, "source": "$brand-inline-link-hover-decoration" }, + "decoration-color": { + "value": "{link.brand.inline.hover.color.value}", + "themeable": true, + "source": "$brand-inline-link-hover-decoration-color", + "modify": [{ + "type": "alpha", + "amount": 1 + }] + } } } }, diff --git a/tokens/source/global/color.json b/tokens/source/global/color.json index c2263a4fb7..d08279f56f 100644 --- a/tokens/source/global/color.json +++ b/tokens/source/global/color.json @@ -28,15 +28,103 @@ }, "primary": { "base": { "value": "#0A3055", "themeable": true, "source": "$primary" }, - "100": { "value": "#F0F3F5", "themeable": true, "source": "$primary-100" }, - "200": { "value": "#C2CBD5", "themeable": true, "source": "$primary-200" }, - "300": { "value": "#8598AA", "themeable": true, "source": "$primary-300" }, - "400": { "value": "#476480", "themeable": true, "source": "$primary-400" }, + "100": { + "value": "{color.primary.base.value}", + "themeable": true, + "source": "$primary-100", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ] + }, + "200": { + "value": "{color.primary.base.value}", + "themeable": true, + "source": "$primary-200", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ] + }, + "300": { + "value": "{color.primary.base.value}", + "themeable": true, + "source": "$primary-300", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ] + }, + "400": { + "value": "{color.primary.base.value}", + "themeable": true, + "source": "$primary-400", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ] + }, "500": { "value": "{color.primary.base.value}", "themeable": true, "source": "$primary-500" }, - "600": { "value": "#092B4D", "themeable": true, "source": "$primary-600" }, - "700": { "value": "#082644", "themeable": true, "source": "$primary-700" }, - "800": { "value": "#082440", "themeable": true, "source": "$primary-800" }, - "900": { "value": "#07223C", "themeable": true, "source": "$primary-900" } + "600": { + "value": "{color.primary.base.value}", + "themeable": true, + "source": "$primary-600", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ] + }, + "700": { + "value": "{color.primary.base.value}", + "themeable": true, + "source": "$primary-700", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ] + }, + "800": { + "value": "{color.primary.base.value}", + "themeable": true, + "source": "$primary-800", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ] + }, + "900": { + "value": "{color.primary.base.value}", + "themeable": true, + "source": "$primary-900", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ] + } }, "secondary": { "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$secondary" }, From 340a6ba7c7c30fe907b84b57006bf26c8aae1a4d Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Mon, 14 Nov 2022 10:58:55 +0200 Subject: [PATCH 17/19] [BD-46] feat: update design tokens (#1748) feat: update design tokens --- scss/core/tokens.css | 255 +++--- src/Alert/_variables.scss | 2 +- src/Annotation/Annotation.scss | 2 +- src/Annotation/_variables.scss | 10 +- src/Breadcrumb/_variables.scss | 2 +- src/Bubble/_variables.scss | 8 +- src/Button/Button.scss | 3 +- src/Button/_variables.scss | 2 +- src/Button/button-bootstrap.scss | 4 +- src/Card/Card.scss | 2 +- src/Card/_variables.scss | 2 +- src/Carousel/_variables.scss | 11 +- src/Carousel/carousel-bootstrap.scss | 2 + src/Chip/_variables.scss | 18 +- src/DataTable/CollapsibleButtonGroup.jsx | 4 +- src/DataTable/DataTable.scss | 9 +- src/DataTable/_variables.scss | 1 + src/Dropdown/Dropdown.scss | 2 +- src/Form/_Form.scss | 8 +- src/Form/_bootstrap-custom-forms.scss | 12 +- src/Form/_variables.scss | 23 +- src/IconButton/_variables.scss | 18 +- src/Modal/Modal.scss | 2 +- src/Modal/_ModalDialog.scss | 2 + src/Modal/_variables.scss | 9 +- src/Navbar/_variables.scss | 11 +- src/PageBanner/PageBanner.scss | 10 +- src/Pagination/_variables.scss | 2 +- src/Popover/_variables.scss | 12 +- src/Popover/popover-bootstrap.scss | 14 +- src/ProductTour/Checkpoint.scss | 4 +- src/ProductTour/_variables.scss | 1 + src/ProgressBar/_variables.scss | 8 +- src/Scrollable/Scrollable.scss | 6 +- src/Scrollable/_variables.scss | 1 + src/SearchField/_variables.scss | 4 +- src/Sheet/Sheet.scss | 14 +- src/Sheet/_variables.scss | 2 + src/Table/_variables.scss | 2 + src/Tooltip/_variables.scss | 2 +- tokens/build-tokens.js | 4 +- tokens/build/_variables.scss | 255 +++--- tokens/build/css-to-scss.json | 2 +- tokens/build/scss-to-css.json | 2 +- tokens/build/variables.css | 255 +++--- tokens/source/components/Alert.json | 7 +- tokens/source/components/Button.json | 10 +- tokens/source/components/Card.json | 32 +- tokens/source/components/Carousel.json | 3 + tokens/source/components/Chip.json | 17 +- tokens/source/components/Code.json | 10 +- tokens/source/components/DataTable.json | 72 +- tokens/source/components/Dropdown.json | 14 +- tokens/source/components/Form.json | 151 ++-- tokens/source/components/Image.json | 4 +- tokens/source/components/Modal.json | 28 +- tokens/source/components/Nav.json | 20 + tokens/source/components/Navbar.json | 64 +- tokens/source/components/Pagination.json | 8 +- tokens/source/components/Popover.json | 34 +- tokens/source/components/ProductTour.json | 11 +- tokens/source/components/ProgressBar.json | 4 +- tokens/source/components/Scrollable.json | 15 + tokens/source/components/SearchField.json | 6 +- tokens/source/components/Sheet.json | 24 +- tokens/source/components/Toast.json | 30 +- tokens/source/components/Tooltip.json | 10 +- tokens/source/components/general/hr.json | 10 +- tokens/source/components/general/input.json | 10 +- tokens/source/components/general/list.json | 10 +- tokens/source/global/color.json | 832 ++++++++++++++++++-- tokens/source/global/spacing.json | 30 +- 72 files changed, 1775 insertions(+), 715 deletions(-) create mode 100644 src/Scrollable/_variables.scss create mode 100644 src/Sheet/_variables.scss create mode 100644 tokens/source/components/Scrollable.json diff --git a/scss/core/tokens.css b/scss/core/tokens.css index aefa4f6480..36ef076386 100644 --- a/scss/core/tokens.css +++ b/scss/core/tokens.css @@ -32,18 +32,7 @@ --pgn-transition-fade: opacity .15s linear; --pgn-transition-base: all .2s ease-in-out; --pgn-spacer-base: 1rem; - --pgn-spacing-base-5-5: 4rem; - --pgn-spacing-base-4-5: 2rem; - --pgn-spacing-base-3-5: 1.25rem; - --pgn-spacing-base-2-5: .75rem; - --pgn-spacing-base-1-5: .375rem; - --pgn-spacing-base-6: 5rem; - --pgn-spacing-base-5: 3rem; - --pgn-spacing-base-4: 1.5rem; - --pgn-spacing-base-3: 1rem; - --pgn-spacing-base-2: .5rem; - --pgn-spacing-base-1: .25rem; - --pgn-spacing-base-0: 0; + --pgn-spacer-0: 0; --pgn-grid-row-columns: 6; --pgn-grid-gutter-width: 24px; --pgn-grid-columns: 12; @@ -120,10 +109,8 @@ --pgn-tooltip-max-width: 200px; --pgn-toast-container-gutter-sm: .625rem; --pgn-toast-container-gutter-lg: 1.25rem; - --pgn-toast-header-color-border: rgba(0, 0, 0, .5); --pgn-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15); --pgn-toast-border-radius: .25rem; - --pgn-toast-border-color: rgba(0, 0, 0, .1); --pgn-toast-border-width: 1px; --pgn-toast-color-base: null; --pgn-toast-font-size: .875rem; @@ -179,7 +166,7 @@ --pgn-reduced-dropdown-width-min: 6rem; --pgn-reduced-dropdown-height-max: 60vh; --pgn-pagination-focus-border-width: .125rem; - --pgn-pagination-focus-box-outline: 0; + --pgn-pagination-focus-outline: 0; --pgn-pagination-secondary-height-sm: 2.25rem; --pgn-pagination-secondary-height-base: 2.75rem; --pgn-pagination-toggle-border-sm: .25rem; @@ -199,10 +186,6 @@ --pgn-pagination-padding-y-lg: .75rem; --pgn-pagination-padding-y-sm: .8rem; --pgn-pagination-padding-y-base: .625rem; - --pgn-navbar-light-toggler-border-color: rgba(0, 0, 0, .1); - --pgn-navbar-light-color-disabled: rgba(0, 0, 0, .3); - --pgn-navbar-light-color-active: rgba(0, 0, 0, .9); - --pgn-navbar-light-color-hover: rgba(0, 0, 0, .7); --pgn-navbar-toggler-padding-x: .75rem; --pgn-navbar-toggler-padding-y: .25rem; --pgn-navbar-nav-scroll-max-height: 75vh; @@ -227,8 +210,7 @@ --pgn-modal-backdrop-opacity: .5; --pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); --pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5); - --pgn-modal-content-border-width: 0; - --pgn-modal-content-border-color: rgba(0, 0, 0, .2); + --pgn-modal-content-border-width: 0rem; --pgn-modal-content-color: null; --pgn-modal-footer-padding-y: 1.5rem; --pgn-modal-footer-padding-x: 1rem; @@ -307,10 +289,10 @@ --pgn-form-custom-checkbox-indicator-indeterminate-box-shadow: none; --pgn-form-custom-checkbox-indicator-border-radius: 0; --pgn-form-custom-control-label-color-base: null; + --pgn-form-custom-control-indicator-active-bg: #0A3055FF; --pgn-form-custom-control-indicator-active-box-shadow: none; --pgn-form-custom-control-indicator-checked-box-shadow-focus: 0 0 0 4px rgba(0, 0, 0, .1); --pgn-form-custom-control-indicator-checked-box-shadow-base: none; - --pgn-form-custom-control-indicator-checked-bg-disabled: rgba(10, 48, 85, .5); --pgn-form-custom-control-indicator-border-width: 2px; --pgn-form-custom-control-indicator-bg-size: 100%; --pgn-form-custom-control-indicator-size: 1.25rem; @@ -333,7 +315,7 @@ --pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075); --pgn-dropzone-padding: 1.5rem; --pgn-dropdown-zindex: 1000; - --pgn-dropdown-border-color: rgba(0, 0, 0, .15); + --pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); --pgn-dropdown-spacer: .125rem; --pgn-dropdown-padding-y-item: .5rem; --pgn-dropdown-padding-y-base: .25rem; @@ -363,8 +345,11 @@ --pgn-code-pre-scrollable-max-height: 340px; --pgn-code-kbd-padding-x: .4rem; --pgn-code-kbd-padding-y: .2rem; + --pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25); --pgn-code-color: #E83E8CFF; --pgn-code-font-size: 87.5%; + --pgn-chip-icon-size: 1.25rem; + --pgn-chip-disabled-opacity: .3; --pgn-chip-line-height: 1.5rem; --pgn-chip-font-weight: 400; --pgn-chip-font-size: .75rem; @@ -373,8 +358,12 @@ --pgn-chip-border-radius-focus: .5rem; --pgn-chip-border-radius-base: .4375rem; --pgn-chip-margin-inline: .5rem; + --pgn-chip-margin-base: .125rem; + --pgn-chip-padding-icon-to: 3px; + --pgn-chip-padding-icon-base: .25rem; --pgn-chip-padding-x: .5rem; --pgn-chip-padding-y: .125rem; + --pgn-carousel-transition-duration: .6s; --pgn-carousel-caption-width: 70%; --pgn-carousel-indicator-transition: opacity .6s ease; --pgn-carousel-indicator-spacer: 3px; @@ -403,21 +392,18 @@ --pgn-card-color: null; --pgn-card-height-base: null; --pgn-card-cap-color: null; - --pgn-card-cap-bg: rgba(0, 0, 0, .03); - --pgn-card-border-color-focus: rgba(0, 0, 0, .5); - --pgn-card-border-color-base: rgba(0, 0, 0, .125); --pgn-card-border-radius-logo: .25rem; --pgn-card-border-radius-image: .3125rem; --pgn-card-spacer-y: .75rem; --pgn-card-spacer-x: 1.25rem; --pgn-btn-transition: null; --pgn-btn-block-spacing-y: .5rem; - --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); --pgn-btn-tertiary-inverse-bg-base: transparent; --pgn-btn-disabled-opacity: .65; --pgn-btn-focus-gap: 1px; --pgn-btn-focus-width: 2px; --pgn-btn-box-shadow-active: none; + --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); --pgn-bubble-expandable-padding-x: .25rem; --pgn-bubble-expandable-padding-y: 0; --pgn-breadcrumb-border-radius-focus: .125rem; @@ -469,72 +455,8 @@ --pgn-action-row-gap-y: .5rem; --pgn-action-row-gap-x: .5rem; --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-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-400: #E9E6E4FF; - --pgn-color-light-300: #F0EEEDFF; - --pgn-color-light-200: #F8F7F6FF; - --pgn-color-light-100: #FDFDFDFF; - --pgn-color-danger-900: #892029FF; - --pgn-color-danger-800: #92222CFF; - --pgn-color-danger-700: #9C242EFF; - --pgn-color-danger-600: #B02934FF; - --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-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-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-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-400: #B6407FFF; - --pgn-color-brand-300: #CE80AAFF; - --pgn-color-brand-200: #E7BFD4FF; - --pgn-color-brand-100: #F9F0F5FF; - --pgn-color-secondary-900: #303030FF; - --pgn-color-secondary-800: #343434FF; - --pgn-color-secondary-700: #373737FF; - --pgn-color-secondary-600: #3E3E3EFF; - --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-gray-base: #707070FF; --pgn-color-gray-900: #212529FF; @@ -563,6 +485,17 @@ --pgn-font-size-mobile-h3: var(--pgn-font-size-h3); --pgn-font-size-mobile-h2: var(--pgn-font-size-h2); --pgn-font-family-base: var(--pgn-font-family-sans-serif); + --pgn-spacer-5-5: calc(var(--pgn-spacer-base) * 4rem); + --pgn-spacer-4-5: calc(var(--pgn-spacer-base) * 2rem); + --pgn-spacer-3-5: calc(var(--pgn-spacer-base) * 1.25rem); + --pgn-spacer-2-5: calc(var(--pgn-spacer-base) * .75rem); + --pgn-spacer-1-5: calc(var(--pgn-spacer-base) * .375rem); + --pgn-spacer-6: calc(var(--pgn-spacer-base) * 5rem); + --pgn-spacer-5: calc(var(--pgn-spacer-base) * 3rem); + --pgn-spacer-4: calc(var(--pgn-spacer-base) * 1.5rem); + --pgn-spacer-3: var(--pgn-spacer-base); + --pgn-spacer-2: calc(var(--pgn-spacer-base) * .5rem); + --pgn-spacer-1: calc(var(--pgn-spacer-base) * .25rem); --pgn-display-weight-4: var(--pgn-font-weight-bold); --pgn-display-weight-3: var(--pgn-font-weight-bold); --pgn-display-weight-2: var(--pgn-font-weight-bold); @@ -575,28 +508,32 @@ --pgn-tooltip-color-light: var(--pgn-color-black); --pgn-tooltip-color-base: var(--pgn-color-white); --pgn-tooltip-font-size: var(--pgn-font-size-sm); + --pgn-toast-header-color-border: #00000080; --pgn-toast-header-color-background: var(--pgn-color-gray-700); --pgn-toast-header-color-base: var(--pgn-color-white); + --pgn-toast-border-color: #0000001A; --pgn-toast-color-background: var(--pgn-color-gray-700); --pgn-tabs-notification-font-size: var(--pgn-font-size-xs); --pgn-spinner-sm-height: var(--pgn-spinner-sm-width); --pgn-spinner-height: var(--pgn-spinner-width); + --pgn-sheet-skrim-component-box-shadow: #00000026; + --pgn-sheet-skrim-bg: #ADADAD80; --pgn-search-field-border-color-focus: var(--pgn-color-black); --pgn-search-field-border-color-interaction: var(--pgn-color-black); + --pgn-scrollable-body-box-shadow: #0000008C; --pgn-progress-bar-bar-bg-base: var(--pgn-color-accent-a); --pgn-progress-bar-bar-color: var(--pgn-color-white); --pgn-progress-bar-font-size: calc(var(--pgn-font-size-base) * .75); --pgn-product-tour-checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arrow) transparent; --pgn-product-tour-checkpoint-arrow-color-default: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-color-background); --pgn-product-tour-checkpoint-arrow-color-top: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-width-border); + --pgn-product-tour-checkpoint-color-box-shadow: #0000004D; --pgn-product-tour-checkpoint-color-body: var(--pgn-color-gray-700); - --pgn-product-tour-checkpoint-color-background: var(--pgn-color-light-300); - --pgn-popover-danger-bg: var(--pgn-color-danger-100); - --pgn-popover-warning-bg: var(--pgn-color-warning-100); - --pgn-popover-success-bg: var(--pgn-color-success-100); --pgn-popover-body-padding-x: var(--pgn-popover-header-padding-x); --pgn-popover-body-padding-y: var(--pgn-popover-header-padding-y); - --pgn-popover-border-border: var(--pgn-border-width); + --pgn-popover-header-border-darken: #E5E5E5FF; + --pgn-popover-header-bg-darken: #E5E5E5FF; + --pgn-popover-border-width: var(--pgn-border-width); --pgn-popover-border-radius: var(--pgn-border-radius-sm); --pgn-popover-font-size: var(--pgn-font-size-sm); --pgn-pagination-focus-color-text: var(--pgn-color-black); @@ -609,27 +546,30 @@ --pgn-pagination-bg-disabled: var(--pgn-color-white); --pgn-pagination-bg-hover: var(--pgn-color-gray-100); --pgn-pagination-color-inverse: var(--pgn-color-white); - --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active); - --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active); - --pgn-navbar-dark-toggler-border-color: rgba(var(--pgn-color-white), .1); - --pgn-navbar-dark-color-disabled: rgba(var(--pgn-color-white), .25); - --pgn-navbar-dark-color-hover: rgba(var(--pgn-color-white), .75); + --pgn-navbar-light-toggler-border-color: #0000001A; + --pgn-navbar-light-color-disabled: #0000004D; + --pgn-navbar-light-color-active: #000000E6; + --pgn-navbar-light-color-hover: #000000B3; + --pgn-navbar-dark-toggler-border-color: #FFFFFF1A; + --pgn-navbar-dark-color-disabled: #FFFFFF40; + --pgn-navbar-dark-color-hover: #FFFFFFBF; --pgn-navbar-toggler-font-size: var(--pgn-font-size-lg); --pgn-navbar-brand-font-size: var(--pgn-font-size-lg); --pgn-navbar-nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2); --pgn-navbar-padding-x-base: var(--pgn-spacer-base); --pgn-navbar-padding-y: calc(var(--pgn-spacer-base) / 2); + --pgn-nav-color-light: #00000080; + --pgn-nav-color-dark: #FFFFFF80; --pgn-nav-divider-margin-y: calc(var(--pgn-spacer-base) / 2); --pgn-nav-divider-color: var(--pgn-color-gray-100); --pgn-nav-pills-border-radius: var(--pgn-border-radius-base); - --pgn-nav-tabs-link-hover-bg: var(--pgn-color-light-400); - --pgn-nav-tabs-border-color: var(--pgn-color-light-400); --pgn-nav-link-color-disabled: var(--pgn-color-gray-300); --pgn-nav-link-color-base: var(--pgn-color-gray-700); --pgn-modal-header-padding-base: var(--pgn-modal-header-padding-y) var(--pgn-modal-header-padding-x); --pgn-modal-header-border-width: var(--pgn-modal-content-border-width); --pgn-modal-backdrop-bg: var(--pgn-color-black); --pgn-modal-content-border-radius: var(--pgn-border-radius-lg); + --pgn-modal-content-border-color: #00000033; --pgn-modal-title-line-height: var(--pgn-line-height-base); --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y); --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); @@ -644,7 +584,7 @@ --pgn-list-group-disabled-color: var(--pgn-color-gray-600); --pgn-list-group-border-radius: var(--pgn-border-radius-base); --pgn-list-group-border-width: var(--pgn-border-width); - --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); + --pgn-list-group-border-color: #00000020; --pgn-list-group-bg-hover: var(--pgn-color-gray-100); --pgn-dt-font-weight: var(--pgn-font-weight-bold); --pgn-input-btn-border-width: var(--pgn-border-width); @@ -652,7 +592,7 @@ --pgn-input-btn-line-height-lg: var(--pgn-line-height-lg); --pgn-hr-border-margin-y: var(--pgn-spacer-base); --pgn-hr-border-width: var(--pgn-border-width); - --pgn-hr-border-color: rgba(var(--pgn-color-black), .1); + --pgn-hr-border-color: #0000001A; --pgn-headings-color: var(--pgn-color-black); --pgn-headings-font-weight: var(--pgn-font-weight-bold); --pgn-body-color: var(--pgn-color-gray-700); @@ -692,28 +632,24 @@ --pgn-form-input-padding-y-sm: var(--pgn-input-btn-padding-sm-y); --pgn-form-input-padding-y-base: var(--pgn-input-btn-padding-y); --pgn-dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x); - --pgn-dropzone-border-error: 2px solid var(--pgn-color-danger-300); - --pgn-dropzone-border-focus: 2px solid var(--pgn-color-info-300); - --pgn-dropzone-border-hover: 2px solid var(--pgn-color-info-300); - --pgn-dropdown-link-hover-bg: var(--pgn-color-light-300); --pgn-dropdown-link-hover-color: var(--pgn-color-gray-900); --pgn-dropdown-link-color: var(--pgn-color-gray-900); - --pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(var(--pgn-color-black), .175); --pgn-dropdown-divider-margin-y: calc(var(--pgn-spacer-base) / 2); --pgn-dropdown-divider-bg: var(--pgn-color-gray-100); --pgn-dropdown-border-radius-base: var(--pgn-border-radius-base); --pgn-dropdown-border-width: var(--pgn-border-width); + --pgn-dropdown-border-color: #00000026; --pgn-dropdown-font-size: var(--pgn-font-size-base); --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item); --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); --pgn-data-table-border: 1px solid var(--pgn-color-gray-200); + --pgn-data-table-background-is-loading: #FFFFFFB3; --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x); --pgn-collapsible-card-spacer-y-lg: var(--pgn-card-spacer-y); --pgn-code-pre-color: var(--pgn-color-gray-900); --pgn-code-kbd-bg: var(--pgn-color-gray-700); --pgn-code-kbd-color: var(--pgn-color-white); --pgn-code-kbd-nested-font-weight: var(--pgn-font-weight-bold); - --pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(var(--pgn-color-black), .25); --pgn-code-kbd-font-size: var(--pgn-code-font-size); --pgn-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); --pgn-close-button-color: var(--pgn-color-black); @@ -723,17 +659,18 @@ --pgn-carousel-indicator-active-bg: var(--pgn-color-white); --pgn-card-footer-text-font-size: var(--pgn-font-size-small-x); --pgn-card-divider-margin-y: var(--pgn-card-spacer-y); - --pgn-card-divider-bg: var(--pgn-color-light-400); --pgn-card-columns-margin: var(--pgn-card-spacer-y); --pgn-card-margin-grid: var(--pgn-card-margin-group); --pgn-card-margin-deck: var(--pgn-card-margin-group); --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max); + --pgn-card-cap-bg: #00000008; + --pgn-card-border-color-focus: #00000080; + --pgn-card-border-color-base: #00000020; --pgn-card-border-radius-base: var(--pgn-border-radius-base); --pgn-card-border-width: var(--pgn-border-width); - --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); + --pgn-btn-tertiary-inverse-bg-hover: #FFFFFF1A; --pgn-btn-tertiary-inverse-color: var(--pgn-color-white); --pgn-btn-tertiary-color: var(--pgn-color-gray-700); - --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075); --pgn-btn-border-radius-sm: var(--pgn-border-radius-sm); --pgn-btn-border-radius-lg: var(--pgn-border-radius-lg); --pgn-btn-border-radius-base: var(--pgn-border-radius-base); @@ -751,26 +688,48 @@ --pgn-btn-padding-y-lg: var(--pgn-input-btn-padding-lg-y); --pgn-btn-padding-y-base: var(--pgn-input-btn-padding-y); --pgn-breadcrumb-inverse-color: var(--pgn-color-white); - --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700); --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600); --pgn-breadcrumb-bg: var(--pgn-color-gray-200); --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base); --pgn-badge-focus-width: var(--pgn-input-btn-focus-width); --pgn-badge-font-weight: var(--pgn-font-weight-bold); - --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300); --pgn-annotation-line-height: var(--pgn-line-height-sm); --pgn-annotation-font-size: var(--pgn-font-size-sm); --pgn-alert-color-content: var(--pgn-color-gray-700); --pgn-alert-color-title: var(--pgn-color-black); --pgn-alert-font-weight-link: var(--pgn-font-weight-normal); --pgn-alert-border-radius: var(--pgn-border-radius-base); + --pgn-color-dark-900: #1B2C21FF; + --pgn-color-dark-800: #1D2F23FF; + --pgn-color-dark-700: #1F3226FF; + --pgn-color-dark-600: #23392AFF; --pgn-color-dark-500: var(--pgn-color-dark-base); + --pgn-color-dark-400: #5D6F63FF; + --pgn-color-dark-300: #939F97FF; + --pgn-color-dark-200: #C9CFCBFF; + --pgn-color-dark-100: #F2F3F3FF; + --pgn-color-light-900: #9E9B99FF; + --pgn-color-light-800: #A9A6A4FF; + --pgn-color-light-700: #B4B1AFFF; + --pgn-color-light-600: #CBC7C5FF; --pgn-color-light-500: var(--pgn-color-light-base); + --pgn-color-light-400: #E9E6E4FF; + --pgn-color-light-300: #F0EEEDFF; + --pgn-color-light-200: #F8F7F6FF; + --pgn-color-light-100: #FDFDFDFF; --pgn-color-danger-base: var(--pgn-color-red); --pgn-color-warning-base: var(--pgn-color-yellow); --pgn-color-info-base: var(--pgn-color-teal); --pgn-color-success-base: var(--pgn-color-green); + --pgn-color-brand-900: #6E003BFF; + --pgn-color-brand-800: #76003FFF; + --pgn-color-brand-700: #7E0043FF; + --pgn-color-brand-600: #8D004CFF; --pgn-color-brand-500: var(--pgn-color-brand-base); + --pgn-color-brand-400: #B6407FFF; + --pgn-color-brand-300: #CE80AAFF; + --pgn-color-brand-200: #E7BFD4FF; + --pgn-color-brand-100: #F9F0F5FF; --pgn-color-secondary-base: var(--pgn-color-gray-700); --pgn-color-primary-900: #07223CFF; --pgn-color-primary-800: #082440FF; @@ -786,11 +745,14 @@ --pgn-color-background-base: var(--pgn-color-white); --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); + --pgn-search-field-button-variants-dark: var(--pgn-color-brand-500); + --pgn-search-field-button-variants-light: var(--pgn-color-primary-500); --pgn-search-field-border-color-base: var(--pgn-color-gray-500); --pgn-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500); --pgn-progress-bar-border-color: var(--pgn-color-gray-500); --pgn-product-tour-checkpoint-color-breadcrumb: var(--pgn-color-primary-500); --pgn-product-tour-checkpoint-color-border: var(--pgn-color-brand-500); + --pgn-product-tour-checkpoint-color-background: var(--pgn-color-light-300); --pgn-popover-body-color: var(--pgn-body-color); --pgn-popover-header-color: var(--pgn-headings-color); --pgn-popover-bg: var(--pgn-color-background-base); @@ -798,6 +760,8 @@ --pgn-pagination-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow); --pgn-pagination-bg-base: var(--pgn-color-background-base); --pgn-pagination-color-active: var(--pgn-color-active); + --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active); + --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active); --pgn-navbar-dark-color-active: var(--pgn-color-active); --pgn-navbar-toggler-border-radius: var(--pgn-btn-border-radius-base); --pgn-navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2); @@ -805,7 +769,8 @@ --pgn-nav-pills-link-link-active-color: var(--pgn-color-active); --pgn-nav-tabs-link-active-color-border: transparent transparent var(--pgn-color-primary-500); --pgn-nav-tabs-link-active-color-base: var(--pgn-color-primary-500); - --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color); + --pgn-nav-tabs-link-hover-bg: var(--pgn-color-light-400); + --pgn-nav-tabs-border-color: var(--pgn-color-light-400); --pgn-modal-header-border-color: var(--pgn-border-color); --pgn-modal-content-bg: var(--pgn-color-background-base); --pgn-modal-footer-border-width: var(--pgn-modal-header-border-width); @@ -842,6 +807,7 @@ --pgn-form-custom-select-padding-y-sm: var(--pgn-form-input-padding-y-sm); --pgn-form-custom-select-padding-y-base: var(--pgn-form-input-padding-y-base); --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-color-primary-500); + --pgn-form-custom-control-indicator-checked-bg-disabled: #0A305580; --pgn-form-custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled); --pgn-form-input-group-addon-color-base: var(--pgn-form-input-color-base); --pgn-form-input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2)); @@ -862,30 +828,79 @@ --pgn-dropzone-border-active: 2px solid var(--pgn-color-primary-500); --pgn-dropzone-border-default: 1px dashed var(--pgn-color-gray-500); --pgn-dropdown-link-active-color: var(--pgn-color-active); + --pgn-dropdown-link-hover-bg: var(--pgn-color-light-300); --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width)); --pgn-dropdown-bg: var(--pgn-color-background-base); --pgn-dropdown-color-header: var(--pgn-color-gray-500); --pgn-dropdown-color-base: var(--pgn-body-color); --pgn-data-table-background-color: var(--pgn-color-background-base); + --pgn-card-divider-bg: var(--pgn-color-light-400); --pgn-card-bg: var(--pgn-color-background-base); + --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); --pgn-btn-border-width: var(--pgn-input-btn-border-width); --pgn-btn-line-height-lg: var(--pgn-input-btn-line-height-lg); + --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700); --pgn-breadcrumb-inverse-active: var(--pgn-color-light-500); --pgn-breadcrumb-color-active: var(--pgn-color-gray-500); --pgn-breadcrumb-color-base: var(--pgn-color-primary-500); + --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300); + --pgn-alert-actions-gap: var(--pgn-spacer-3); + --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-input-focus: var(--pgn-color-primary-500); --pgn-color-disabled: var(--pgn-color-gray-500); --pgn-color-background-active: var(--pgn-color-primary-500); --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); + --pgn-popover-danger-bg: var(--pgn-color-danger-100); --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); + --pgn-popover-warning-bg: var(--pgn-color-warning-100); --pgn-popover-success-icon-color: var(--pgn-color-success-500); + --pgn-popover-success-bg: var(--pgn-color-success-100); --pgn-popover-arrow-color: var(--pgn-popover-bg); --pgn-pagination-bg-active: var(--pgn-color-background-active); --pgn-pagination-color-disabled: var(--pgn-color-disabled); @@ -893,6 +908,7 @@ --pgn-navbar-dark-brand-color-base: var(--pgn-navbar-dark-color-active); --pgn-nav-pills-link-link-active-bg: var(--pgn-color-background-active); --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg); + --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color); --pgn-modal-footer-border-color: var(--pgn-modal-header-border-color); --pgn-menu-background-active: var(--pgn-btn-tertiary-bg-active); --pgn-image-thumbnail-bg: var(--pgn-body-bg); @@ -914,6 +930,7 @@ --pgn-form-custom-file-height-inner: var(--pgn-form-input-height-inner-base); --pgn-form-custom-file-height-base: var(--pgn-form-input-height-base); --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus); + --pgn-form-custom-range-thumb-bg-active: #1F3E64FF; --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-disabled); --pgn-form-custom-range-thumb-bg-base: var(--pgn-color-background-active); --pgn-form-custom-select-height-sm: var(--pgn-form-input-height-sm); @@ -927,6 +944,7 @@ --pgn-form-custom-select-font-weight: var(--pgn-form-input-font-weight); --pgn-form-custom-select-font-height-base: var(--pgn-form-input-height-base); --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-color-background-active); + --pgn-form-custom-control-label-floating-text: #FFFFFF1A; --pgn-form-custom-control-label-color-disabled: var(--pgn-color-disabled); --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base); --pgn-form-input-group-addon-color-border: var(--pgn-form-input-border-color); @@ -935,6 +953,9 @@ --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base); --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); + --pgn-dropzone-border-error: 2px solid var(--pgn-color-danger-300); + --pgn-dropzone-border-focus: 2px solid var(--pgn-color-info-300); + --pgn-dropzone-border-hover: 2px solid var(--pgn-color-info-300); --pgn-dropdown-link-disabled-color: var(--pgn-color-disabled); --pgn-dropdown-link-active-bg: var(--pgn-color-background-active); --pgn-btn-disabled-link-color: var(--pgn-color-disabled); diff --git a/src/Alert/_variables.scss b/src/Alert/_variables.scss index 313f2c9812..c6dd2eaa54 100644 --- a/src/Alert/_variables.scss +++ b/src/Alert/_variables.scss @@ -21,4 +21,4 @@ $alert-font-size: var(--pgn-alert-font-size) !default; $alert-line-height: var(--pgn-alert-line-height) !default; $alert-content-color: var(--pgn-alert-color-content) !default; -$alert-actions-gap: map-get($spacers, 3); +$alert-actions-gap: var(--pgn-alert-actions-gap) !default; diff --git a/src/Annotation/Annotation.scss b/src/Annotation/Annotation.scss index a6d4f84d0b..ba8cd74635 100644 --- a/src/Annotation/Annotation.scss +++ b/src/Annotation/Annotation.scss @@ -1,10 +1,10 @@ @import "variables"; @mixin triangle($triangle-color, $triangle-direction) { + content: ""; height: 0; width: 0; position: absolute; - content: ""; border: solid transparent; @if $triangle-direction == top { diff --git a/src/Annotation/_variables.scss b/src/Annotation/_variables.scss index d93cb65292..79aff6604f 100644 --- a/src/Annotation/_variables.scss +++ b/src/Annotation/_variables.scss @@ -6,11 +6,11 @@ $annotation-font-size: var(--pgn-annotation-font-size) !default; $annotation-line-height: var(--pgn-annotation-line-height) !default; $annotation-variants: ( - "success": ( "background-color": $success, "color": $white ), - "warning": ( "background-color": $accent-b, "color": $black ), - "error": ( "background-color": $danger, "color": $white ), - "light": ( "background-color": $white, "color": $primary-500 ), - "dark": ( "background-color": $dark, "color": $white ), + "success": ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ), + "warning": ( "background-color": var(--pgn-color-accent-b), "color": var(--pgn-color-black) ), + "error": ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ), + "light": ( "background-color": var(--pgn-color-white), "color": var(--pgn-color-primary-500) ), + "dark": ( "background-color": var(--pgn-color-dark-base), "color": var(--pgn-color-white) ), ) !default; $annotation-arrow-side-margin: var(--pgn-annotation-arrow-side-margin) !default; diff --git a/src/Breadcrumb/_variables.scss b/src/Breadcrumb/_variables.scss index 10b8d580d8..0672dfd8df 100644 --- a/src/Breadcrumb/_variables.scss +++ b/src/Breadcrumb/_variables.scss @@ -21,7 +21,7 @@ $breadcrumb-inverse-active: var(--pgn-breadcrumb-inverse-active) !default; $breadcrumb-inverse-spacer: var(--pgn-breadcrumb-inverse-spacer) !default; $breadcrumb-color: var(--pgn-breadcrumb-color-base) !default; $breadcrumb-inverse-color: var(--pgn-breadcrumb-inverse-color) !default; -$breadcrumb-divider: "/" !default; +$breadcrumb-divider: "/" !default; $breadcrumb-border-radius: var(--pgn-breadcrumb-border-radius-base) !default; $breadcrumb-focus-border-radius: var(--pgn-breadcrumb-border-radius-focus) !default; diff --git a/src/Bubble/_variables.scss b/src/Bubble/_variables.scss index db7f5a9c7b..7726e63f7d 100644 --- a/src/Bubble/_variables.scss +++ b/src/Bubble/_variables.scss @@ -1,8 +1,8 @@ $bubble-variants: ( - "success": ( "background-color": $success, "color": $white ), - "warning": ( "background-color": $warning, "color": $white ), - "error": ( "background-color": $danger, "color": $white ), - "primary": ( "background-color": $primary, "color": $white ), + "success": ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ), + "warning": ( "background-color": var(--pgn-color-warning-base), "color": var(--pgn-color-white) ), + "error": ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ), + "primary": ( "background-color": var(--pgn-color-primary-base), "color": var(--pgn-color-white) ), ) !default; $bubble-expandable-padding-x: var(--pgn-bubble-expandable-padding-x) !default; $bubble-expandable-padding-y: var(--pgn-bubble-expandable-padding-y) !default; diff --git a/src/Button/Button.scss b/src/Button/Button.scss index b52632921f..4ac8433be3 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -1,6 +1,7 @@ @import "variables"; @import "button-bootstrap"; +// TODO Pending decision on usage with CSS variables. @mixin button-variant( $btn-variant-bg, $btn-variant-border, $btn-variant-hover-bg: darken($btn-variant-bg, 7.5%), $btn-variant-hover-border: darken($btn-variant-border, 10%), @@ -146,7 +147,7 @@ box-shadow: none; $distance: calc($btn-focus-width + $btn-focus-gap); - $distance-include-btn-border: calc(#{$distance} + $btn-border-width); + $distance-include-btn-border: calc(#{$distance} + #{$btn-border-width}); &::before { content: ""; diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss index 086b0a5dc1..9b28add2fd 100644 --- a/src/Button/_variables.scss +++ b/src/Button/_variables.scss @@ -25,7 +25,7 @@ $btn-disabled-opacity: var(--pgn-btn-disabled-opacity) !default; $btn-active-box-shadow: var(--pgn-btn-box-shadow-active) !default; $btn-tertiary-color: var(--pgn-btn-tertiary-color) !default; -$btn-tertiary-bg: transparent !default; +$btn-tertiary-bg: transparent !default; $btn-tertiary-hover-bg: var(--pgn-btn-tertiary-bg-hover) !default; $btn-tertiary-active-bg: var(--pgn-btn-tertiary-bg-active) !default; diff --git a/src/Button/button-bootstrap.scss b/src/Button/button-bootstrap.scss index d391a6211e..b13a0a58b6 100644 --- a/src/Button/button-bootstrap.scss +++ b/src/Button/button-bootstrap.scss @@ -53,8 +53,8 @@ .btn-group-lg > .btn { @extend .btn-lg; } .dropdown-toggle-split { - padding-right: calc(var(--pgn-btn-padding-x) * .75); - padding-left: calc(var(--pgn-btn-padding-x) * .75); + padding-right: calc($btn-padding-x * .75); + padding-left: calc($btn-padding-x * .75); &::after, .dropup &::after, diff --git a/src/Card/Card.scss b/src/Card/Card.scss index c6abed6012..a8eeff7bc0 100644 --- a/src/Card/Card.scss +++ b/src/Card/Card.scss @@ -174,7 +174,7 @@ a .pgn__card { &.horizontal-stacked { flex-direction: column-reverse; - padding-top: $card-spacer-x - $card-footer-actions-gap; + padding-top: calc(#{$card-spacer-x} - #{$card-footer-actions-gap}); & > * { margin-top: $card-footer-actions-gap; diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss index cc8ee56c13..5bfccff039 100644 --- a/src/Card/_variables.scss +++ b/src/Card/_variables.scss @@ -6,7 +6,7 @@ $card-border-width: var(--pgn-card-border-width) !default; $card-border-radius: var(--pgn-card-border-radius-base) !default; $card-border-color: var(--pgn-card-border-color-base) !default; $card-border-focus-color: var(--pgn-card-border-color-focus) !default; -$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; +$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; $card-cap-bg: var(--pgn-card-cap-bg) !default; $card-cap-color: var(--pgn-card-cap-color) !default; $card-height: var(--pgn-card-height-base) !default; diff --git a/src/Carousel/_variables.scss b/src/Carousel/_variables.scss index 7da5bf1eac..6f32a28f0e 100644 --- a/src/Carousel/_variables.scss +++ b/src/Carousel/_variables.scss @@ -1,7 +1,7 @@ // Carousel // TODO use css variable -$carousel-control-color: #FFFFFF !default; +$carousel-control-color: #FFFFFF !default; $carousel-control-width: var(--pgn-carousel-control-width-base) !default; $carousel-control-opacity: var(--pgn-carousel-control-opacity-base) !default; $carousel-control-hover-opacity: var(--pgn-carousel-control-opacity-hover) !default; @@ -18,11 +18,10 @@ $carousel-caption-width: var(--pgn-carousel-caption-width) !default; $carousel-caption-color: var(--pgn-carousel-caption-color) !default; $carousel-control-icon-width: var(--pgn-carousel-control-width-icon) !default; +$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default; +$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default; -$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default; -$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default; - -$carousel-transition-duration: .6s !default; +$carousel-transition-duration: var(--pgn-carousel-transition-duration) !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) -$carousel-transition: transform $carousel-transition-duration ease-in-out !default; +$carousel-transition: transform $carousel-transition-duration ease-in-out !default; diff --git a/src/Carousel/carousel-bootstrap.scss b/src/Carousel/carousel-bootstrap.scss index ef3b827b70..1cfb8f0828 100644 --- a/src/Carousel/carousel-bootstrap.scss +++ b/src/Carousel/carousel-bootstrap.scss @@ -98,6 +98,7 @@ left: 0; @if $enable-gradients { + // TODO needs a decision background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); } } @@ -106,6 +107,7 @@ right: 0; @if $enable-gradients { + // TODO needs a decision background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); } } diff --git a/src/Chip/_variables.scss b/src/Chip/_variables.scss index 9527461bab..6b864dbd8f 100644 --- a/src/Chip/_variables.scss +++ b/src/Chip/_variables.scss @@ -1,19 +1,19 @@ $chip-padding-x: var(--pgn-chip-padding-x) !default; $chip-padding-y: var(--pgn-chip-padding-y) !default; -$chip-padding-to-icon: 3px !default; -$chip-icon-padding: .25rem !default; -$chip-margin: .125rem !default; +$chip-padding-to-icon: var(--pgn-chip-padding-icon-to) !default; +$chip-icon-padding: var(--pgn-chip-padding-icon-base) !default; +$chip-margin: var(--pgn-chip-margin-base) !default; $chip-border-radius: var(--pgn-chip-border-radius-base) !default; -$chip-disable-opacity: .3 !default; -$chip-icon-size: 1.25rem !default; +$chip-disable-opacity: var(--pgn-chip-disabled-opacity) !default; +$chip-icon-size: var(--pgn-chip-icon-size) !default; $chip-theme-variants: ( "light": ( - "background": $light-500, - "color": $black, + "background": var(--pgn-color-light-500), + "color": var(--pgn-color-black), ), "dark": ( - "background": $dark-200, - "color": $white, + "background": var(--pgn-color-dark-200), + "color": var(--pgn-color-white), ) ) !default; diff --git a/src/DataTable/CollapsibleButtonGroup.jsx b/src/DataTable/CollapsibleButtonGroup.jsx index fced75f8ea..2fc6a34623 100644 --- a/src/DataTable/CollapsibleButtonGroup.jsx +++ b/src/DataTable/CollapsibleButtonGroup.jsx @@ -79,7 +79,7 @@ function CollapsibleButtonGroup({ placement="bottom-end" isOpen={isOverflowMenuOpen} > -
    +
    {dropdownActions.map(cloneAction)} @@ -87,7 +87,7 @@ function CollapsibleButtonGroup({ )} -
    +
    {visibleActions.map(cloneAction)}
    diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss index 1bebf7e67d..274e539ed5 100644 --- a/src/DataTable/DataTable.scss +++ b/src/DataTable/DataTable.scss @@ -25,7 +25,7 @@ .pgn__table-actions { display: flex; - .pgn__datatable__visible-actions { + .pgn__data-table__visible-actions { margin-inline-start: map_get($spacers, 2); .btn { @@ -79,7 +79,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba($white, .7); + background-color: $data-table-is-loading-bg; z-index: 1; } } @@ -88,6 +88,7 @@ display: flex; align-items: flex-start; + // TODO CSS variables cannot be used as media breakpoints @media (max-width: $max-width-xl) { overflow-x: scroll; } @@ -270,8 +271,8 @@ z-index: 2; } -.pgn__datatable__overflow-actions-menu { - background: #FFFFFF; +.pgn__data-table__overflow-actions-menu { + background: $white; padding: map_get($spacers, 2); box-shadow: $level-1-box-shadow; border-radius: 4px; diff --git a/src/DataTable/_variables.scss b/src/DataTable/_variables.scss index e733401b76..d5d3cb07cc 100644 --- a/src/DataTable/_variables.scss +++ b/src/DataTable/_variables.scss @@ -9,3 +9,4 @@ $data-table-cell-padding: var(--pgn-data-table-padding-cell) !default; $data-table-footer-position: var(--pgn-data-table-footer-position) !default; $data-table-pagination-dropdown-max-height: var(--pgn-data-table-pagination-dropdown-max-height) !default; $data-table-pagination-dropdown-min-width: var(--pgn-data-table-pagination-dropdown-min-width) !default; +$data-table-is-loading-bg: var(--pgn-data-table-background-is-loading) !default; diff --git a/src/Dropdown/Dropdown.scss b/src/Dropdown/Dropdown.scss index cd3091a107..7982c3a2e2 100644 --- a/src/Dropdown/Dropdown.scss +++ b/src/Dropdown/Dropdown.scss @@ -38,10 +38,10 @@ } .dropdown-toggle::after { + content: ""; border: 0; border-style: solid; border-width: .15rem .15rem 0 0; - content: ""; height: .45rem; margin-inline-start: .5em; position: relative; diff --git a/src/Form/_Form.scss b/src/Form/_Form.scss index 2f67b9339e..13fd452065 100644 --- a/src/Form/_Form.scss +++ b/src/Form/_Form.scss @@ -114,13 +114,13 @@ &.pgn__form-control-decorator-leading { inset-inline-start: 0; padding-inline-start: $input-padding-x; - padding-inline-end: calc($input-padding-x / 2); + padding-inline-end: calc(#{$input-padding-x} / 2); } &.pgn__form-control-decorator-trailing { inset-inline-end: 0; - padding-inline-start: calc($input-padding-x / 2); - padding-inline-end: calc(#{$input-padding-y-sm} - (2 * $input-border-width)); + padding-inline-start: calc(#{$input-padding-x} / 2); + padding-inline-end: calc(#{$input-padding-y-sm} - calc(2 * #{$input-border-width})); } .pgn__form-control-decorator-group-lg & { @@ -195,7 +195,7 @@ // Prevent background-color from being output as "transparent" // Firefox doesn't handle the first animation well from transparent to // a color. Adding an alpha channel smooths it out. - background-color: rgba($input-bg, .01); + background-color: $form-control-floating-label-text-bg; white-space: nowrap; max-width: 75vw; display: block; diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss index adb2824657..8d86d34d2d 100644 --- a/src/Form/_bootstrap-custom-forms.scss +++ b/src/Form/_bootstrap-custom-forms.scss @@ -86,6 +86,7 @@ // Background-color and (when enabled) gradient &::before { + content: ""; position: absolute; top: calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5); left: -($custom-control-gutter + $custom-control-indicator-size); @@ -93,7 +94,6 @@ width: $custom-control-indicator-size; height: $custom-control-indicator-size; pointer-events: none; - content: ""; background-color: $custom-control-indicator-bg; border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color; @@ -102,13 +102,13 @@ // Foreground (icon) &::after { + content: ""; position: absolute; top: calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5); left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; height: $custom-control-indicator-size; - content: ""; background: 50% / #{$custom-control-indicator-bg-size} no-repeat; } } @@ -195,9 +195,9 @@ &::after { // stylelint-disable-next-line max-line-length - top: add(calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5), calc(#{$custom-control-indicator-border-width} * 2)); + top: calc(calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5) + calc(#{$custom-control-indicator-border-width} * 2)); // stylelint-disable-next-line max-line-length - left: add(calc(-1 * (#{$custom-switch-width} + #{$custom-control-gutter})), calc(#{$custom-control-indicator-border-width} * 2)); + left: calc(calc(-1 * (#{$custom-switch-width} + #{$custom-control-gutter})) + calc(#{$custom-control-indicator-border-width} * 2)); width: $custom-switch-indicator-size; height: $custom-switch-indicator-size; background-color: $custom-control-indicator-border-color; @@ -378,6 +378,7 @@ @include box-shadow($custom-file-box-shadow); &::after { + content: "Browse"; position: absolute; top: 0; right: 0; @@ -388,7 +389,6 @@ padding: $custom-file-padding-y $custom-file-padding-x; line-height: $custom-file-line-height; color: $custom-file-button-color; - content: "Browse"; border-left: inherit; @include gradient-bg($custom-file-button-bg); @@ -404,7 +404,7 @@ .custom-range { width: 100%; - height: add($custom-range-thumb-height, calc(#{$custom-range-thumb-focus-box-shadow-width} * 2)); + height: calc($custom-range-thumb-height + calc(#{$custom-range-thumb-focus-box-shadow-width} * 2)); padding: 0; // Need to reset padding background-color: transparent; appearance: none; diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss index 5445dbd280..52d4e43fa4 100644 --- a/src/Form/_variables.scss +++ b/src/Form/_variables.scss @@ -34,7 +34,7 @@ $input-focus-width: var(--pgn-form-input-focus-width) !default; $input-focus-box-shadow: var(--pgn-form-input-box-shadow-focus) !default; $input-placeholder-color: var(--pgn-form-input-color-plaintext) !default; -$input-plaintext-color: $body-color !default; +$input-plaintext-color: var(--pgn-body-color) !default; $input-height-border: var(--pgn-form-input-border-height) !default; @@ -87,9 +87,9 @@ $custom-control-label-color: var(--pgn-form-custom-control-label-color-base) !de $custom-control-indicator-disabled-bg: var(--pgn-form-custom-control-indicator-disabled-bg) !default; $custom-control-label-disabled-color: var(--pgn-form-custom-control-label-color-disabled) !default; -// TODO switch to css variable -$custom-control-indicator-checked-color: #0A3055 !default; -$custom-control-indicator-checked-bg: #0A3055 !default; +// TODO can't use css variables due to conflict with str-replace function. +$custom-control-indicator-checked-color: #0A3055 !default; +$custom-control-indicator-checked-bg: #0A3055 !default; $custom-control-indicator-checked-disabled-bg: var(--pgn-form-custom-control-indicator-checked-bg-disabled) !default; // stylelint-disable-next-line max-line-length @@ -103,13 +103,13 @@ $custom-control-indicator-focus-box-shadow: var(--pgn-form-custom-control-indica // stylelint-disable-next-line max-line-length $custom-control-indicator-focus-border-color: var(--pgn-form-custom-control-indicator-checked-border-color-focus) !default; -// TODO switch to css variable -$custom-control-indicator-active-color: #FFFFFF !default; -$custom-control-indicator-active-bg: #0A3055 !default; +// TODO can't use css variable due to conflict with str-replace function. +$custom-control-indicator-active-color: #FFFFFF !default; +$custom-control-indicator-active-bg: var(--pgn-form-custom-control-indicator-active-bg) !default; $custom-control-indicator-active-box-shadow: var(--pgn-form-custom-control-indicator-active-box-shadow) !default; -$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default; +$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default; $custom-checkbox-indicator-border-radius: var(--pgn-form-custom-checkbox-indicator-border-radius) !default; -$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; +$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; $custom-checkbox-indicator-indeterminate-bg: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg) !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; @@ -152,7 +152,7 @@ $custom-select-indicator: str-replace(url('data:image/svg+xml, .arrow { - bottom: subtract(calc($popover-arrow-height * -1), $popover-border-width); + bottom: calc(#{$popover-border-width} - #{$popover-arrow-height}); &::before { bottom: 0; @@ -59,7 +59,7 @@ margin-left: $popover-arrow-height; > .arrow { - left: subtract(calc($popover-arrow-height * -1), $popover-border-width); + left: calc(#{$popover-border-width} - #{$popover-arrow-height}); width: $popover-arrow-height; height: $popover-arrow-width; margin: $popover-border-radius 0; @@ -82,7 +82,7 @@ margin-top: $popover-arrow-height; > .arrow { - top: subtract(calc($popover-arrow-height * -1), $popover-border-width); + top: calc(#{$popover-border-width} - #{$popover-arrow-height}); &::before { top: 0; @@ -99,13 +99,13 @@ // This will remove the popover-header's border just below the arrow .popover-header::before { + content: ""; position: absolute; top: 0; left: 50%; display: block; width: $popover-arrow-width; margin-left: calc($popover-arrow-width * -.5); - content: ""; border-bottom: $popover-border-width solid $popover-header-bg; } } @@ -114,7 +114,7 @@ margin-right: $popover-arrow-height; > .arrow { - right: subtract(calc($popover-arrow-height * -1), $popover-border-width); + right: calc(#{$popover-border-width} - #{$popover-arrow-height}); width: $popover-arrow-height; height: $popover-arrow-width; margin: $popover-border-radius 0; @@ -165,7 +165,7 @@ color: $popover-header-color; background-color: $popover-header-bg; - border-bottom: $popover-border-width solid darken($popover-header-bg, 5%); + border-bottom: $popover-border-width solid $popover-header-border-bottom-darken; @include border-top-radius($popover-inner-border-radius); diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss index 3965df46dc..21aa11456d 100644 --- a/src/ProductTour/Checkpoint.scss +++ b/src/ProductTour/Checkpoint.scss @@ -6,7 +6,7 @@ border-top: $checkpoint-border-width solid $checkpoint-border-color; border-radius: $border-radius; padding: map_get($spacers, 4); - box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3); + box-shadow: 0 .25rem .5rem $checkpoint-box-shadow-color; z-index: $checkpoint-z-index; max-width: $checkpoint-max-width; @@ -34,8 +34,8 @@ #pgn__checkpoint-arrow::before, #pgn__checkpoint-arrow::after { - visibility: visible; content: ""; + visibility: visible; } .pgn__checkpoint-button_dismiss { diff --git a/src/ProductTour/_variables.scss b/src/ProductTour/_variables.scss index 4ed63bd874..31d4e18a0b 100644 --- a/src/ProductTour/_variables.scss +++ b/src/ProductTour/_variables.scss @@ -17,3 +17,4 @@ $checkpoint-z-index: var(--pgn-product-tour-checkpoint-zindex) !default; $checkpoint-arrow-top-color: var(--pgn-product-tour-checkpoint-arrow-color-top) !default; $checkpoint-arrow-default-color: var(--pgn-product-tour-checkpoint-arrow-color-default) !default; $checkpoint-arrow-transparent: var(--pgn-product-tour-checkpoint-arrow-transparent) !default; +$checkpoint-box-shadow-color: var(--pgn-product-tour-checkpoint-color-box-shadow) !default; diff --git a/src/ProgressBar/_variables.scss b/src/ProgressBar/_variables.scss index 0c92e84979..10e910dd35 100644 --- a/src/ProgressBar/_variables.scss +++ b/src/ProgressBar/_variables.scss @@ -16,8 +16,8 @@ $progress-bar-border-color: var(--pgn-progress-bar-border-color) !default; $progress-threshold-circle: var(--pgn-progress-bar-threshold-circle) !default; $progress-hint-annotation-gap: var(--pgn-progress-bar-hint-annotation-gap) !default; $progress-colors: ( - "dark": $primary-500, - "success": $success-500, - "error": $danger-500, - "warning": $accent-b, + "dark": var(--pgn-color-primary-500), + "success": var(--pgn-color-success-500), + "error": var(--pgn-color-danger-500), + "warning": var(--pgn-color-accent-b), ) !default; diff --git a/src/Scrollable/Scrollable.scss b/src/Scrollable/Scrollable.scss index f2b2ec5a26..cf3e5fcd45 100644 --- a/src/Scrollable/Scrollable.scss +++ b/src/Scrollable/Scrollable.scss @@ -1,3 +1,5 @@ +@import "variables"; + .pgn__scrollable-body { display: flex; flex-direction: column; @@ -9,7 +11,7 @@ &::before { content: ""; background-color: transparent; - box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55); + box-shadow: 5px 0 7px 2px $scrollable-body-box-shadow; display: block; height: 2px; position: sticky; @@ -21,7 +23,7 @@ &::after { content: ""; background-color: transparent; - box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55); + box-shadow: 5px 0 7px 2px $scrollable-body-box-shadow; display: block; height: 2px; position: sticky; diff --git a/src/Scrollable/_variables.scss b/src/Scrollable/_variables.scss new file mode 100644 index 0000000000..20292d21a1 --- /dev/null +++ b/src/Scrollable/_variables.scss @@ -0,0 +1 @@ +$scrollable-body-box-shadow: var(--pgn-scrollable-body-box-shadow) !default; diff --git a/src/SearchField/_variables.scss b/src/SearchField/_variables.scss index 1605ca3b8d..0bf6271c70 100644 --- a/src/SearchField/_variables.scss +++ b/src/SearchField/_variables.scss @@ -1,6 +1,6 @@ $search-btn-variants: ( - "light": $primary-500, - "dark": $brand-500, + "light": var(--pgn-color-primary-500), + "dark": var(--pgn-color-brand-500), ); $search-border-radius: var(--pgn-search-field-border-radius) !default; $search-line-height: var(--pgn-search-field-line-height) !default; diff --git a/src/Sheet/Sheet.scss b/src/Sheet/Sheet.scss index e5f5754440..fe14f92427 100644 --- a/src/Sheet/Sheet.scss +++ b/src/Sheet/Sheet.scss @@ -1,7 +1,9 @@ +@import "variables"; + .pgn__sheet-skrim { width: 100%; height: 100%; - background-color: rgba(196, 196, 196, .5); + background-color: $sheet-skrim-bg; position: fixed; top: 0; left: 0; @@ -15,12 +17,12 @@ %component-left { left: 0; - box-shadow: 8px 0 16px 0 rgba(0, 0, 0, .15); + box-shadow: 8px 0 16px 0 $sheet-skrim-component-box-shadow; } %component-right { right: 0; - box-shadow: -8px 0 16px 0 rgba(0, 0, 0, .15); + box-shadow: -8px 0 16px 0 $sheet-skrim-component-box-shadow; } .pgn__sheet-component-left { @@ -34,7 +36,7 @@ .pgn__sheet-component { position: fixed; padding: 1.25rem; - background-color: white; + background-color: $white; z-index: $zindex-sheet; &.pgn__sheet__dark { @@ -44,12 +46,12 @@ &.bottom { bottom: 0; - box-shadow: 0 -8px 16px 0 rgba(0, 0, 0, .15); + box-shadow: 0 -8px 16px 0 $sheet-skrim-component-box-shadow; } &.top { top: 0; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .15); + box-shadow: 0 8px 16px 0 $sheet-skrim-component-box-shadow; } &.left { diff --git a/src/Sheet/_variables.scss b/src/Sheet/_variables.scss new file mode 100644 index 0000000000..986710bec6 --- /dev/null +++ b/src/Sheet/_variables.scss @@ -0,0 +1,2 @@ +$sheet-skrim-bg: var(--pgn-sheet-skrim-bg) !default; +$sheet-skrim-component-box-shadow: var(--pgn-sheet-skrim-component-box-shadow) !default; diff --git a/src/Table/_variables.scss b/src/Table/_variables.scss index a494d0a47a..6ad5c5e594 100644 --- a/src/Table/_variables.scss +++ b/src/Table/_variables.scss @@ -2,6 +2,8 @@ // // Customizes the `.table` component with basic values, each used across all table variations. +// Design tokens for the Table component are not created because it is deprecated. + $table-cell-padding: .75rem !default; $table-cell-padding-sm: .3rem !default; diff --git a/src/Tooltip/_variables.scss b/src/Tooltip/_variables.scss index aa0716f6e8..2d226207aa 100644 --- a/src/Tooltip/_variables.scss +++ b/src/Tooltip/_variables.scss @@ -11,7 +11,7 @@ $tooltip-padding-x: var(--pgn-tooltip-padding-x) !default; $tooltip-margin: var(--pgn-tooltip-margin) !default; $tooltip-box-shadow: var(--pgn-tooltip-box-shadow) !default; -$tooltip-arrow-width: .8rem !default; +$tooltip-arrow-width: .8rem !default; $tooltip-arrow-height: var(--pgn-tooltip-arrow-height) !default; $tooltip-arrow-color: var(--pgn-tooltip-arrow-color-base) !default; diff --git a/tokens/build-tokens.js b/tokens/build-tokens.js index c29dbf2d24..d3b5cd2465 100644 --- a/tokens/build-tokens.js +++ b/tokens/build-tokens.js @@ -19,7 +19,7 @@ const colorTransform = (token) => { if (modify.length > 0) { // iterate over the modify array (see tokens/color.json) // and apply each modification in order - modify.forEach(({type, amount, otherColor}) => { + modify.forEach(({ type, amount, otherColor }) => { // modifier type must match a method name in chromajs // https://gka.github.io/chroma.js/ // chroma methods can be chained, so each time we override the color variable @@ -34,7 +34,7 @@ const colorTransform = (token) => { } return color.hex('rgba').toUpperCase(); -} +}; /** * Transforms color values to be in uppercase format to be compatible with our stylelint rules. diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss index 436f0cd947..963d69911c 100644 --- a/tokens/build/_variables.scss +++ b/tokens/build/_variables.scss @@ -31,18 +31,7 @@ $pgn-transition-collapse: height .35s ease !default; $pgn-transition-fade: opacity .15s linear !default; $pgn-transition-base: all .2s ease-in-out !default; $pgn-spacer-base: 1rem !default; -$pgn-spacing-base-5-5: 4rem !default; -$pgn-spacing-base-4-5: 2rem !default; -$pgn-spacing-base-3-5: 1.25rem !default; -$pgn-spacing-base-2-5: .75rem !default; -$pgn-spacing-base-1-5: .375rem !default; -$pgn-spacing-base-6: 5rem !default; -$pgn-spacing-base-5: 3rem !default; -$pgn-spacing-base-4: 1.5rem !default; -$pgn-spacing-base-3: 1rem !default; -$pgn-spacing-base-2: .5rem !default; -$pgn-spacing-base-1: .25rem !default; -$pgn-spacing-base-0: 0 !default; +$pgn-spacer-0: 0 !default; $pgn-grid-row-columns: 6 !default; $pgn-grid-gutter-width: 24px !default; $pgn-grid-columns: 12 !default; @@ -119,10 +108,8 @@ $pgn-tooltip-opacity: 1 !default; $pgn-tooltip-max-width: 200px !default; $pgn-toast-container-gutter-sm: .625rem !default; $pgn-toast-container-gutter-lg: 1.25rem !default; -$pgn-toast-header-color-border: rgba(0, 0, 0, .5) !default; $pgn-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15) !default; $pgn-toast-border-radius: .25rem !default; -$pgn-toast-border-color: rgba(0, 0, 0, .1) !default; $pgn-toast-border-width: 1px !default; $pgn-toast-color-base: null !default; $pgn-toast-font-size: .875rem !default; @@ -178,7 +165,7 @@ $pgn-popover-max-width: 480px !default; $pgn-reduced-dropdown-width-min: 6rem !default; $pgn-reduced-dropdown-height-max: 60vh !default; $pgn-pagination-focus-border-width: .125rem !default; -$pgn-pagination-focus-box-outline: 0 !default; +$pgn-pagination-focus-outline: 0 !default; $pgn-pagination-secondary-height-sm: 2.25rem !default; $pgn-pagination-secondary-height-base: 2.75rem !default; $pgn-pagination-toggle-border-sm: .25rem !default; @@ -198,10 +185,6 @@ $pgn-pagination-padding-x-base: 1rem !default; $pgn-pagination-padding-y-lg: .75rem !default; $pgn-pagination-padding-y-sm: .8rem !default; $pgn-pagination-padding-y-base: .625rem !default; -$pgn-navbar-light-toggler-border-color: rgba(0, 0, 0, .1) !default; -$pgn-navbar-light-color-disabled: rgba(0, 0, 0, .3) !default; -$pgn-navbar-light-color-active: rgba(0, 0, 0, .9) !default; -$pgn-navbar-light-color-hover: rgba(0, 0, 0, .7) !default; $pgn-navbar-toggler-padding-x: .75rem !default; $pgn-navbar-toggler-padding-y: .25rem !default; $pgn-navbar-nav-scroll-max-height: 75vh !default; @@ -226,8 +209,7 @@ $pgn-modal-backdrop-zindex: 1040 !default; $pgn-modal-backdrop-opacity: .5 !default; $pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15) !default; $pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5) !default; -$pgn-modal-content-border-width: 0 !default; -$pgn-modal-content-border-color: rgba(0, 0, 0, .2) !default; +$pgn-modal-content-border-width: 0rem !default; $pgn-modal-content-color: null !default; $pgn-modal-footer-padding-y: 1.5rem !default; $pgn-modal-footer-padding-x: 1rem !default; @@ -306,10 +288,10 @@ $pgn-form-custom-radio-indicator-border-radius: 50% !default; $pgn-form-custom-checkbox-indicator-indeterminate-box-shadow: none !default; $pgn-form-custom-checkbox-indicator-border-radius: 0 !default; $pgn-form-custom-control-label-color-base: null !default; +$pgn-form-custom-control-indicator-active-bg: #0A3055FF !default; $pgn-form-custom-control-indicator-active-box-shadow: none !default; $pgn-form-custom-control-indicator-checked-box-shadow-focus: 0 0 0 4px rgba(0, 0, 0, .1) !default; $pgn-form-custom-control-indicator-checked-box-shadow-base: none !default; -$pgn-form-custom-control-indicator-checked-bg-disabled: rgba(10, 48, 85, .5) !default; $pgn-form-custom-control-indicator-border-width: 2px !default; $pgn-form-custom-control-indicator-bg-size: 100% !default; $pgn-form-custom-control-indicator-size: 1.25rem !default; @@ -332,7 +314,7 @@ $pgn-form-input-focus-width: 1px !default; $pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075) !default; $pgn-dropzone-padding: 1.5rem !default; $pgn-dropdown-zindex: 1000 !default; -$pgn-dropdown-border-color: rgba(0, 0, 0, .15) !default; +$pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175) !default; $pgn-dropdown-spacer: .125rem !default; $pgn-dropdown-padding-y-item: .5rem !default; $pgn-dropdown-padding-y-base: .25rem !default; @@ -362,8 +344,11 @@ $pgn-collapsible-card-spacer-y-base: .5rem !default; $pgn-code-pre-scrollable-max-height: 340px !default; $pgn-code-kbd-padding-x: .4rem !default; $pgn-code-kbd-padding-y: .2rem !default; +$pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25) !default; $pgn-code-color: #E83E8CFF !default; $pgn-code-font-size: 87.5% !default; +$pgn-chip-icon-size: 1.25rem !default; +$pgn-chip-disabled-opacity: .3 !default; $pgn-chip-line-height: 1.5rem !default; $pgn-chip-font-weight: 400 !default; $pgn-chip-font-size: .75rem !default; @@ -372,8 +357,12 @@ $pgn-chip-border-width: .0625rem !default; $pgn-chip-border-radius-focus: .5rem !default; $pgn-chip-border-radius-base: .4375rem !default; $pgn-chip-margin-inline: .5rem !default; +$pgn-chip-margin-base: .125rem !default; +$pgn-chip-padding-icon-to: 3px !default; +$pgn-chip-padding-icon-base: .25rem !default; $pgn-chip-padding-x: .5rem !default; $pgn-chip-padding-y: .125rem !default; +$pgn-carousel-transition-duration: .6s !default; $pgn-carousel-caption-width: 70% !default; $pgn-carousel-indicator-transition: opacity .6s ease !default; $pgn-carousel-indicator-spacer: 3px !default; @@ -402,21 +391,18 @@ $pgn-card-image-overlay-padding: 1.25rem !default; $pgn-card-color: null !default; $pgn-card-height-base: null !default; $pgn-card-cap-color: null !default; -$pgn-card-cap-bg: rgba(0, 0, 0, .03) !default; -$pgn-card-border-color-focus: rgba(0, 0, 0, .5) !default; -$pgn-card-border-color-base: rgba(0, 0, 0, .125) !default; $pgn-card-border-radius-logo: .25rem !default; $pgn-card-border-radius-image: .3125rem !default; $pgn-card-spacer-y: .75rem !default; $pgn-card-spacer-x: 1.25rem !default; $pgn-btn-transition: null !default; $pgn-btn-block-spacing-y: .5rem !default; -$pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1) !default; $pgn-btn-tertiary-inverse-bg-base: transparent !default; $pgn-btn-disabled-opacity: .65 !default; $pgn-btn-focus-gap: 1px !default; $pgn-btn-focus-width: 2px !default; $pgn-btn-box-shadow-active: none !default; +$pgn-btn-box-shadow-base: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075) !default; $pgn-bubble-expandable-padding-x: .25rem !default; $pgn-bubble-expandable-padding-y: 0 !default; $pgn-breadcrumb-border-radius-focus: .125rem !default; @@ -468,72 +454,8 @@ $pgn-alert-padding-y: 1.5rem !default; $pgn-action-row-gap-y: .5rem !default; $pgn-action-row-gap-x: .5rem !default; $pgn-color-dark-base: #273F2FFF !default; -$pgn-color-dark-900: #1B2C21FF !default; -$pgn-color-dark-800: #1D2F23FF !default; -$pgn-color-dark-700: #1F3226FF !default; -$pgn-color-dark-600: #23392AFF !default; -$pgn-color-dark-400: #5D6F63FF !default; -$pgn-color-dark-300: #939F97FF !default; -$pgn-color-dark-200: #C9CFCBFF !default; -$pgn-color-dark-100: #F2F3F3FF !default; $pgn-color-light-base: #E1DDDBFF !default; -$pgn-color-light-900: #9E9B99FF !default; -$pgn-color-light-800: #A9A6A4FF !default; -$pgn-color-light-700: #B4B1AFFF !default; -$pgn-color-light-600: #CBC7C5FF !default; -$pgn-color-light-400: #E9E6E4FF !default; -$pgn-color-light-300: #F0EEEDFF !default; -$pgn-color-light-200: #F8F7F6FF !default; -$pgn-color-light-100: #FDFDFDFF !default; -$pgn-color-danger-900: #892029FF !default; -$pgn-color-danger-800: #92222CFF !default; -$pgn-color-danger-700: #9C242EFF !default; -$pgn-color-danger-600: #B02934FF !default; -$pgn-color-danger-400: #D2626BFF !default; -$pgn-color-danger-300: #E1969DFF !default; -$pgn-color-danger-200: #F0CBCEFF !default; -$pgn-color-danger-100: #FBF2F3FF !default; -$pgn-color-warning-900: #B39800FF !default; -$pgn-color-warning-800: #BFA300FF !default; -$pgn-color-warning-700: #CCAE00FF !default; -$pgn-color-warning-600: #E6C300FF !default; -$pgn-color-warning-400: #FFE340FF !default; -$pgn-color-warning-300: #FFEC80FF !default; -$pgn-color-warning-200: #FFF6BFFF !default; -$pgn-color-warning-100: #FFFDF0FF !default; -$pgn-color-info-900: #004C77FF !default; -$pgn-color-info-800: #005280FF !default; -$pgn-color-info-700: #005788FF !default; -$pgn-color-info-600: #006299FF !default; -$pgn-color-info-400: #4092BFFF !default; -$pgn-color-info-300: #80B6D5FF !default; -$pgn-color-info-200: #BFDBEAFF !default; -$pgn-color-info-100: #F0F6FAFF !default; -$pgn-color-success-900: #105B3AFF !default; -$pgn-color-success-800: #11623EFF !default; -$pgn-color-success-700: #126842FF !default; -$pgn-color-success-600: #15754BFF !default; -$pgn-color-success-400: #51A17EFF !default; -$pgn-color-success-300: #8BC1A9FF !default; -$pgn-color-success-200: #C5E0D4FF !default; -$pgn-color-success-100: #F1F8F5FF !default; $pgn-color-brand-base: #9D0054FF !default; -$pgn-color-brand-900: #6E003BFF !default; -$pgn-color-brand-800: #76003FFF !default; -$pgn-color-brand-700: #7E0043FF !default; -$pgn-color-brand-600: #8D004CFF !default; -$pgn-color-brand-400: #B6407FFF !default; -$pgn-color-brand-300: #CE80AAFF !default; -$pgn-color-brand-200: #E7BFD4FF !default; -$pgn-color-brand-100: #F9F0F5FF !default; -$pgn-color-secondary-900: #303030FF !default; -$pgn-color-secondary-800: #343434FF !default; -$pgn-color-secondary-700: #373737FF !default; -$pgn-color-secondary-600: #3E3E3EFF !default; -$pgn-color-secondary-400: #747474FF !default; -$pgn-color-secondary-300: #A2A2A2FF !default; -$pgn-color-secondary-200: #D1D1D1FF !default; -$pgn-color-secondary-100: #F4F4F4FF !default; $pgn-color-primary-base: #0A3055FF !default; $pgn-color-gray-base: #707070FF !default; $pgn-color-gray-900: #212529FF !default; @@ -562,6 +484,17 @@ $pgn-font-size-mobile-h4: $pgn-font-size-h4 !default; $pgn-font-size-mobile-h3: $pgn-font-size-h3 !default; $pgn-font-size-mobile-h2: $pgn-font-size-h2 !default; $pgn-font-family-base: $pgn-font-family-sans-serif !default; +$pgn-spacer-5-5: calc($pgn-spacer-base * 4rem) !default; +$pgn-spacer-4-5: calc($pgn-spacer-base * 2rem) !default; +$pgn-spacer-3-5: calc($pgn-spacer-base * 1.25rem) !default; +$pgn-spacer-2-5: calc($pgn-spacer-base * .75rem) !default; +$pgn-spacer-1-5: calc($pgn-spacer-base * .375rem) !default; +$pgn-spacer-6: calc($pgn-spacer-base * 5rem) !default; +$pgn-spacer-5: calc($pgn-spacer-base * 3rem) !default; +$pgn-spacer-4: calc($pgn-spacer-base * 1.5rem) !default; +$pgn-spacer-3: $pgn-spacer-base !default; +$pgn-spacer-2: calc($pgn-spacer-base * .5rem) !default; +$pgn-spacer-1: calc($pgn-spacer-base * .25rem) !default; $pgn-display-weight-4: $pgn-font-weight-bold !default; $pgn-display-weight-3: $pgn-font-weight-bold !default; $pgn-display-weight-2: $pgn-font-weight-bold !default; @@ -574,28 +507,32 @@ $pgn-tooltip-bg-base: $pgn-color-black !default; $pgn-tooltip-color-light: $pgn-color-black !default; $pgn-tooltip-color-base: $pgn-color-white !default; $pgn-tooltip-font-size: $pgn-font-size-sm !default; +$pgn-toast-header-color-border: #00000080 !default; $pgn-toast-header-color-background: $pgn-color-gray-700 !default; $pgn-toast-header-color-base: $pgn-color-white !default; +$pgn-toast-border-color: #0000001A !default; $pgn-toast-color-background: $pgn-color-gray-700 !default; $pgn-tabs-notification-font-size: $pgn-font-size-xs !default; $pgn-spinner-sm-height: $pgn-spinner-sm-width !default; $pgn-spinner-height: $pgn-spinner-width !default; +$pgn-sheet-skrim-component-box-shadow: #00000026 !default; +$pgn-sheet-skrim-bg: #ADADAD80 !default; $pgn-search-field-border-color-focus: $pgn-color-black !default; $pgn-search-field-border-color-interaction: $pgn-color-black !default; +$pgn-scrollable-body-box-shadow: #0000008C !default; $pgn-progress-bar-bar-bg-base: $pgn-color-accent-a !default; $pgn-progress-bar-bar-color: $pgn-color-white !default; $pgn-progress-bar-font-size: calc($pgn-font-size-base * .75) !default; $pgn-product-tour-checkpoint-arrow-transparent: solid $pgn-product-tour-checkpoint-width-arrow transparent !default; $pgn-product-tour-checkpoint-arrow-color-default: solid $pgn-product-tour-checkpoint-width-arrow $pgn-product-tour-checkpoint-color-background !default; $pgn-product-tour-checkpoint-arrow-color-top: solid $pgn-product-tour-checkpoint-width-arrow $pgn-product-tour-checkpoint-width-border !default; +$pgn-product-tour-checkpoint-color-box-shadow: #0000004D !default; $pgn-product-tour-checkpoint-color-body: $pgn-color-gray-700 !default; -$pgn-product-tour-checkpoint-color-background: $pgn-color-light-300 !default; -$pgn-popover-danger-bg: $pgn-color-danger-100 !default; -$pgn-popover-warning-bg: $pgn-color-warning-100 !default; -$pgn-popover-success-bg: $pgn-color-success-100 !default; $pgn-popover-body-padding-x: $pgn-popover-header-padding-x !default; $pgn-popover-body-padding-y: $pgn-popover-header-padding-y !default; -$pgn-popover-border-border: $pgn-border-width !default; +$pgn-popover-header-border-darken: #E5E5E5FF !default; +$pgn-popover-header-bg-darken: #E5E5E5FF !default; +$pgn-popover-border-width: $pgn-border-width !default; $pgn-popover-border-radius: $pgn-border-radius-sm !default; $pgn-popover-font-size: $pgn-font-size-sm !default; $pgn-pagination-focus-color-text: $pgn-color-black !default; @@ -608,27 +545,30 @@ $pgn-pagination-border-width: $pgn-border-width !default; $pgn-pagination-bg-disabled: $pgn-color-white !default; $pgn-pagination-bg-hover: $pgn-color-gray-100 !default; $pgn-pagination-color-inverse: $pgn-color-white !default; -$pgn-navbar-light-brand-color-hover: $pgn-navbar-light-color-active !default; -$pgn-navbar-light-brand-color-base: $pgn-navbar-light-color-active !default; -$pgn-navbar-dark-toggler-border-color: rgba($pgn-color-white, .1) !default; -$pgn-navbar-dark-color-disabled: rgba($pgn-color-white, .25) !default; -$pgn-navbar-dark-color-hover: rgba($pgn-color-white, .75) !default; +$pgn-navbar-light-toggler-border-color: #0000001A !default; +$pgn-navbar-light-color-disabled: #0000004D !default; +$pgn-navbar-light-color-active: #000000E6 !default; +$pgn-navbar-light-color-hover: #000000B3 !default; +$pgn-navbar-dark-toggler-border-color: #FFFFFF1A !default; +$pgn-navbar-dark-color-disabled: #FFFFFF40 !default; +$pgn-navbar-dark-color-hover: #FFFFFFBF !default; $pgn-navbar-toggler-font-size: $pgn-font-size-lg !default; $pgn-navbar-brand-font-size: $pgn-font-size-lg !default; $pgn-navbar-nav-link-height: calc($pgn-font-size-base * $pgn-line-height-base + .5rem * 2) !default; $pgn-navbar-padding-x-base: $pgn-spacer-base !default; $pgn-navbar-padding-y: calc($pgn-spacer-base / 2) !default; +$pgn-nav-color-light: #00000080 !default; +$pgn-nav-color-dark: #FFFFFF80 !default; $pgn-nav-divider-margin-y: calc($pgn-spacer-base / 2) !default; $pgn-nav-divider-color: $pgn-color-gray-100 !default; $pgn-nav-pills-border-radius: $pgn-border-radius-base !default; -$pgn-nav-tabs-link-hover-bg: $pgn-color-light-400 !default; -$pgn-nav-tabs-border-color: $pgn-color-light-400 !default; $pgn-nav-link-color-disabled: $pgn-color-gray-300 !default; $pgn-nav-link-color-base: $pgn-color-gray-700 !default; $pgn-modal-header-padding-base: $pgn-modal-header-padding-y $pgn-modal-header-padding-x !default; $pgn-modal-header-border-width: $pgn-modal-content-border-width !default; $pgn-modal-backdrop-bg: $pgn-color-black !default; $pgn-modal-content-border-radius: $pgn-border-radius-lg !default; +$pgn-modal-content-border-color: #00000033 !default; $pgn-modal-title-line-height: $pgn-line-height-base !default; $pgn-modal-footer-padding-base: $pgn-modal-footer-padding-x $pgn-modal-footer-padding-y !default; $pgn-image-thumbnail-border-radius: $pgn-border-radius-base !default; @@ -643,7 +583,7 @@ $pgn-list-group-action-color-base: $pgn-color-gray-700 !default; $pgn-list-group-disabled-color: $pgn-color-gray-600 !default; $pgn-list-group-border-radius: $pgn-border-radius-base !default; $pgn-list-group-border-width: $pgn-border-width !default; -$pgn-list-group-border-color: rgba($pgn-color-black, .125) !default; +$pgn-list-group-border-color: #00000020 !default; $pgn-list-group-bg-hover: $pgn-color-gray-100 !default; $pgn-dt-font-weight: $pgn-font-weight-bold !default; $pgn-input-btn-border-width: $pgn-border-width !default; @@ -651,7 +591,7 @@ $pgn-input-btn-focus-box-shadow: 0 0 0 $pgn-input-btn-focus-width $pgn-input-btn $pgn-input-btn-line-height-lg: $pgn-line-height-lg !default; $pgn-hr-border-margin-y: $pgn-spacer-base !default; $pgn-hr-border-width: $pgn-border-width !default; -$pgn-hr-border-color: rgba($pgn-color-black, .1) !default; +$pgn-hr-border-color: #0000001A !default; $pgn-headings-color: $pgn-color-black !default; $pgn-headings-font-weight: $pgn-font-weight-bold !default; $pgn-body-color: $pgn-color-gray-700 !default; @@ -691,28 +631,24 @@ $pgn-form-input-padding-y-lg: $pgn-input-btn-padding-lg-y !default; $pgn-form-input-padding-y-sm: $pgn-input-btn-padding-sm-y !default; $pgn-form-input-padding-y-base: $pgn-input-btn-padding-y !default; $pgn-dropzone-restriction-msg-font-size: $pgn-font-size-small-x !default; -$pgn-dropzone-border-error: 2px solid $pgn-color-danger-300 !default; -$pgn-dropzone-border-focus: 2px solid $pgn-color-info-300 !default; -$pgn-dropzone-border-hover: 2px solid $pgn-color-info-300 !default; -$pgn-dropdown-link-hover-bg: $pgn-color-light-300 !default; $pgn-dropdown-link-hover-color: $pgn-color-gray-900 !default; $pgn-dropdown-link-color: $pgn-color-gray-900 !default; -$pgn-dropdown-box-shadow: 0 .5rem 1rem rgba($pgn-color-black, .175) !default; $pgn-dropdown-divider-margin-y: calc($pgn-spacer-base / 2) !default; $pgn-dropdown-divider-bg: $pgn-color-gray-100 !default; $pgn-dropdown-border-radius-base: $pgn-border-radius-base !default; $pgn-dropdown-border-width: $pgn-border-width !default; +$pgn-dropdown-border-color: #00000026 !default; $pgn-dropdown-font-size: $pgn-font-size-base !default; $pgn-dropdown-padding-header: $pgn-dropdown-padding-y-base $pgn-dropdown-padding-x-item !default; $pgn-data-table-box-shadow: $pgn-box-shadow-sm !default; $pgn-data-table-border: 1px solid $pgn-color-gray-200 !default; +$pgn-data-table-background-is-loading: #FFFFFFB3 !default; $pgn-collapsible-card-spacer-x-lg: $pgn-card-spacer-x !default; $pgn-collapsible-card-spacer-y-lg: $pgn-card-spacer-y !default; $pgn-code-pre-color: $pgn-color-gray-900 !default; $pgn-code-kbd-bg: $pgn-color-gray-700 !default; $pgn-code-kbd-color: $pgn-color-white !default; $pgn-code-kbd-nested-font-weight: $pgn-font-weight-bold !default; -$pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba($pgn-color-black, .25) !default; $pgn-code-kbd-font-size: $pgn-code-font-size !default; $pgn-close-button-text-shadow: 0 1px 0 $pgn-color-white !default; $pgn-close-button-color: $pgn-color-black !default; @@ -722,17 +658,18 @@ $pgn-carousel-caption-color: $pgn-color-white !default; $pgn-carousel-indicator-active-bg: $pgn-color-white !default; $pgn-card-footer-text-font-size: $pgn-font-size-small-x !default; $pgn-card-divider-margin-y: $pgn-card-spacer-y !default; -$pgn-card-divider-bg: $pgn-color-light-400 !default; $pgn-card-columns-margin: $pgn-card-spacer-y !default; $pgn-card-margin-grid: $pgn-card-margin-group !default; $pgn-card-margin-deck: $pgn-card-margin-group !default; $pgn-card-image-horizontal-width-min: $pgn-card-image-horizontal-width-max !default; +$pgn-card-cap-bg: #00000008 !default; +$pgn-card-border-color-focus: #00000080 !default; +$pgn-card-border-color-base: #00000020 !default; $pgn-card-border-radius-base: $pgn-border-radius-base !default; $pgn-card-border-width: $pgn-border-width !default; -$pgn-btn-tertiary-inverse-bg-active: $pgn-btn-tertiary-inverse-bg-hover !default; +$pgn-btn-tertiary-inverse-bg-hover: #FFFFFF1A !default; $pgn-btn-tertiary-inverse-color: $pgn-color-white !default; $pgn-btn-tertiary-color: $pgn-color-gray-700 !default; -$pgn-btn-box-shadow-base: inset 0 1px 0 rgba($pgn-color-white, .15), 0 1px 1px rgba($pgn-color-black, .075) !default; $pgn-btn-border-radius-sm: $pgn-border-radius-sm !default; $pgn-btn-border-radius-lg: $pgn-border-radius-lg !default; $pgn-btn-border-radius-base: $pgn-border-radius-base !default; @@ -750,26 +687,48 @@ $pgn-btn-padding-y-sm: $pgn-input-btn-padding-sm-y !default; $pgn-btn-padding-y-lg: $pgn-input-btn-padding-lg-y !default; $pgn-btn-padding-y-base: $pgn-input-btn-padding-y !default; $pgn-breadcrumb-inverse-color: $pgn-color-white !default; -$pgn-breadcrumb-inverse-spacer: $pgn-color-light-700 !default; $pgn-breadcrumb-color-divider: $pgn-color-gray-600 !default; $pgn-breadcrumb-bg: $pgn-color-gray-200 !default; $pgn-breadcrumb-border-radius-base: $pgn-border-radius-base !default; $pgn-badge-focus-width: $pgn-input-btn-focus-width !default; $pgn-badge-font-weight: $pgn-font-weight-bold !default; -$pgn-avatar-border-base: solid 1px $pgn-color-light-300 !default; $pgn-annotation-line-height: $pgn-line-height-sm !default; $pgn-annotation-font-size: $pgn-font-size-sm !default; $pgn-alert-color-content: $pgn-color-gray-700 !default; $pgn-alert-color-title: $pgn-color-black !default; $pgn-alert-font-weight-link: $pgn-font-weight-normal !default; $pgn-alert-border-radius: $pgn-border-radius-base !default; +$pgn-color-dark-900: #1B2C21FF !default; +$pgn-color-dark-800: #1D2F23FF !default; +$pgn-color-dark-700: #1F3226FF !default; +$pgn-color-dark-600: #23392AFF !default; $pgn-color-dark-500: $pgn-color-dark-base !default; +$pgn-color-dark-400: #5D6F63FF !default; +$pgn-color-dark-300: #939F97FF !default; +$pgn-color-dark-200: #C9CFCBFF !default; +$pgn-color-dark-100: #F2F3F3FF !default; +$pgn-color-light-900: #9E9B99FF !default; +$pgn-color-light-800: #A9A6A4FF !default; +$pgn-color-light-700: #B4B1AFFF !default; +$pgn-color-light-600: #CBC7C5FF !default; $pgn-color-light-500: $pgn-color-light-base !default; +$pgn-color-light-400: #E9E6E4FF !default; +$pgn-color-light-300: #F0EEEDFF !default; +$pgn-color-light-200: #F8F7F6FF !default; +$pgn-color-light-100: #FDFDFDFF !default; $pgn-color-danger-base: $pgn-color-red !default; $pgn-color-warning-base: $pgn-color-yellow !default; $pgn-color-info-base: $pgn-color-teal !default; $pgn-color-success-base: $pgn-color-green !default; +$pgn-color-brand-900: #6E003BFF !default; +$pgn-color-brand-800: #76003FFF !default; +$pgn-color-brand-700: #7E0043FF !default; +$pgn-color-brand-600: #8D004CFF !default; $pgn-color-brand-500: $pgn-color-brand-base !default; +$pgn-color-brand-400: #B6407FFF !default; +$pgn-color-brand-300: #CE80AAFF !default; +$pgn-color-brand-200: #E7BFD4FF !default; +$pgn-color-brand-100: #F9F0F5FF !default; $pgn-color-secondary-base: $pgn-color-gray-700 !default; $pgn-color-primary-900: #07223CFF !default; $pgn-color-primary-800: #082440FF !default; @@ -785,11 +744,14 @@ $pgn-color-active: $pgn-color-white !default; $pgn-color-background-base: $pgn-color-white !default; $pgn-tooltip-arrow-color-base: $pgn-tooltip-bg-base !default; $pgn-search-field-input-height-search: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2) !default; +$pgn-search-field-button-variants-dark: $pgn-color-brand-500 !default; +$pgn-search-field-button-variants-light: $pgn-color-primary-500 !default; $pgn-search-field-border-color-base: $pgn-color-gray-500 !default; $pgn-progress-bar-bar-bg-annotated: $pgn-color-dark-500 !default; $pgn-progress-bar-border-color: $pgn-color-gray-500 !default; $pgn-product-tour-checkpoint-color-breadcrumb: $pgn-color-primary-500 !default; $pgn-product-tour-checkpoint-color-border: $pgn-color-brand-500 !default; +$pgn-product-tour-checkpoint-color-background: $pgn-color-light-300 !default; $pgn-popover-body-color: $pgn-body-color !default; $pgn-popover-header-color: $pgn-headings-color !default; $pgn-popover-bg: $pgn-color-background-base !default; @@ -797,6 +759,8 @@ $pgn-pagination-focus-color-base: $pgn-color-primary-500 !default; $pgn-pagination-focus-box-shadow: $pgn-input-btn-focus-box-shadow !default; $pgn-pagination-bg-base: $pgn-color-background-base !default; $pgn-pagination-color-active: $pgn-color-active !default; +$pgn-navbar-light-brand-color-hover: $pgn-navbar-light-color-active !default; +$pgn-navbar-light-brand-color-base: $pgn-navbar-light-color-active !default; $pgn-navbar-dark-color-active: $pgn-color-active !default; $pgn-navbar-toggler-border-radius: $pgn-btn-border-radius-base !default; $pgn-navbar-brand-padding-y: calc(($pgn-navbar-nav-link-height - $pgn-navbar-brand-height) / 2) !default; @@ -804,7 +768,8 @@ $pgn-navbar-brand-height: calc($pgn-navbar-brand-font-size * $pgn-line-height-ba $pgn-nav-pills-link-link-active-color: $pgn-color-active !default; $pgn-nav-tabs-link-active-color-border: transparent transparent $pgn-color-primary-500 !default; $pgn-nav-tabs-link-active-color-base: $pgn-color-primary-500 !default; -$pgn-nav-tabs-link-hover-border-color: transparent transparent $pgn-nav-tabs-border-color !default; +$pgn-nav-tabs-link-hover-bg: $pgn-color-light-400 !default; +$pgn-nav-tabs-border-color: $pgn-color-light-400 !default; $pgn-modal-header-border-color: $pgn-border-color !default; $pgn-modal-content-bg: $pgn-color-background-base !default; $pgn-modal-footer-border-width: $pgn-modal-header-border-width !default; @@ -841,6 +806,7 @@ $pgn-form-custom-select-padding-y-lg: $pgn-form-input-padding-y-lg !default; $pgn-form-custom-select-padding-y-sm: $pgn-form-input-padding-y-sm !default; $pgn-form-custom-select-padding-y-base: $pgn-form-input-padding-y-base !default; $pgn-form-custom-control-indicator-checked-border-color-base: $pgn-color-primary-500 !default; +$pgn-form-custom-control-indicator-checked-bg-disabled: #0A305580 !default; $pgn-form-custom-control-indicator-disabled-bg: $pgn-form-input-bg-disabled !default; $pgn-form-input-group-addon-color-base: $pgn-form-input-color-base !default; $pgn-form-input-height-inner-quarter: calc($pgn-form-input-line-height-base * .25em + calc($pgn-form-input-padding-y-base / 2)) !default; @@ -861,30 +827,79 @@ $pgn-dropzone-restriction-msg-color: $pgn-color-gray-500 !default; $pgn-dropzone-border-active: 2px solid $pgn-color-primary-500 !default; $pgn-dropzone-border-default: 1px dashed $pgn-color-gray-500 !default; $pgn-dropdown-link-active-color: $pgn-color-active !default; +$pgn-dropdown-link-hover-bg: $pgn-color-light-300 !default; $pgn-dropdown-border-radius-inner: calc($pgn-dropdown-border-radius-base - $pgn-dropdown-border-width) !default; $pgn-dropdown-bg: $pgn-color-background-base !default; $pgn-dropdown-color-header: $pgn-color-gray-500 !default; $pgn-dropdown-color-base: $pgn-body-color !default; $pgn-data-table-background-color: $pgn-color-background-base !default; +$pgn-card-divider-bg: $pgn-color-light-400 !default; $pgn-card-bg: $pgn-color-background-base !default; +$pgn-btn-tertiary-inverse-bg-active: $pgn-btn-tertiary-inverse-bg-hover !default; $pgn-btn-tertiary-bg-active: $pgn-color-light-500 !default; $pgn-btn-tertiary-bg-hover: $pgn-color-light-500 !default; $pgn-btn-border-width: $pgn-input-btn-border-width !default; $pgn-btn-line-height-lg: $pgn-input-btn-line-height-lg !default; +$pgn-breadcrumb-inverse-spacer: $pgn-color-light-700 !default; $pgn-breadcrumb-inverse-active: $pgn-color-light-500 !default; $pgn-breadcrumb-color-active: $pgn-color-gray-500 !default; $pgn-breadcrumb-color-base: $pgn-color-primary-500 !default; +$pgn-avatar-border-base: solid 1px $pgn-color-light-300 !default; +$pgn-alert-actions-gap: $pgn-spacer-3 !default; +$pgn-color-danger-900: #892029FF !default; +$pgn-color-danger-800: #92222CFF !default; +$pgn-color-danger-700: #9C242EFF !default; +$pgn-color-danger-600: #B02934FF !default; $pgn-color-danger-500: $pgn-color-danger-base !default; +$pgn-color-danger-400: #D2626BFF !default; +$pgn-color-danger-300: #E1969DFF !default; +$pgn-color-danger-200: #F0CBCEFF !default; +$pgn-color-danger-100: #FBF2F3FF !default; +$pgn-color-warning-900: #B39800FF !default; +$pgn-color-warning-800: #BFA300FF !default; +$pgn-color-warning-700: #CCAE00FF !default; +$pgn-color-warning-600: #E6C300FF !default; $pgn-color-warning-500: $pgn-color-warning-base !default; +$pgn-color-warning-400: #FFE340FF !default; +$pgn-color-warning-300: #FFEC80FF !default; +$pgn-color-warning-200: #FFF6BFFF !default; +$pgn-color-warning-100: #FFFDF0FF !default; +$pgn-color-info-900: #004C77FF !default; +$pgn-color-info-800: #005280FF !default; +$pgn-color-info-700: #005788FF !default; +$pgn-color-info-600: #006299FF !default; $pgn-color-info-500: $pgn-color-info-base !default; +$pgn-color-info-400: #4092BFFF !default; +$pgn-color-info-300: #80B6D5FF !default; +$pgn-color-info-200: #BFDBEAFF !default; +$pgn-color-info-100: #F0F6FAFF !default; +$pgn-color-success-900: #105B3AFF !default; +$pgn-color-success-800: #11623EFF !default; +$pgn-color-success-700: #126842FF !default; +$pgn-color-success-600: #15754BFF !default; $pgn-color-success-500: $pgn-color-success-base !default; +$pgn-color-success-400: #51A17EFF !default; +$pgn-color-success-300: #8BC1A9FF !default; +$pgn-color-success-200: #C5E0D4FF !default; +$pgn-color-success-100: #F1F8F5FF !default; +$pgn-color-secondary-900: #303030FF !default; +$pgn-color-secondary-800: #343434FF !default; +$pgn-color-secondary-700: #373737FF !default; +$pgn-color-secondary-600: #3E3E3EFF !default; $pgn-color-secondary-500: $pgn-color-secondary-base !default; +$pgn-color-secondary-400: #747474FF !default; +$pgn-color-secondary-300: #A2A2A2FF !default; +$pgn-color-secondary-200: #D1D1D1FF !default; +$pgn-color-secondary-100: #F4F4F4FF !default; $pgn-color-input-focus: $pgn-color-primary-500 !default; $pgn-color-disabled: $pgn-color-gray-500 !default; $pgn-color-background-active: $pgn-color-primary-500 !default; $pgn-popover-danger-icon-color: $pgn-color-warning-500 !default; +$pgn-popover-danger-bg: $pgn-color-danger-100 !default; $pgn-popover-warning-icon-color: $pgn-color-warning-500 !default; +$pgn-popover-warning-bg: $pgn-color-warning-100 !default; $pgn-popover-success-icon-color: $pgn-color-success-500 !default; +$pgn-popover-success-bg: $pgn-color-success-100 !default; $pgn-popover-arrow-color: $pgn-popover-bg !default; $pgn-pagination-bg-active: $pgn-color-background-active !default; $pgn-pagination-color-disabled: $pgn-color-disabled !default; @@ -892,6 +907,7 @@ $pgn-navbar-dark-brand-color-hover: $pgn-navbar-dark-color-active !default; $pgn-navbar-dark-brand-color-base: $pgn-navbar-dark-color-active !default; $pgn-nav-pills-link-link-active-bg: $pgn-color-background-active !default; $pgn-nav-tabs-link-active-bg: $pgn-body-bg !default; +$pgn-nav-tabs-link-hover-border-color: transparent transparent $pgn-nav-tabs-border-color !default; $pgn-modal-footer-border-color: $pgn-modal-header-border-color !default; $pgn-menu-background-active: $pgn-btn-tertiary-bg-active !default; $pgn-image-thumbnail-bg: $pgn-body-bg !default; @@ -913,6 +929,7 @@ $pgn-form-custom-file-border-color-base: $pgn-form-input-border-color !default; $pgn-form-custom-file-height-inner: $pgn-form-input-height-inner-base !default; $pgn-form-custom-file-height-base: $pgn-form-input-height-base !default; $pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px $pgn-body-bg, $pgn-form-input-box-shadow-focus !default; +$pgn-form-custom-range-thumb-bg-active: #1F3E64FF !default; $pgn-form-custom-range-thumb-bg-disabled: $pgn-color-disabled !default; $pgn-form-custom-range-thumb-bg-base: $pgn-color-background-active !default; $pgn-form-custom-select-height-sm: $pgn-form-input-height-sm !default; @@ -926,6 +943,7 @@ $pgn-form-custom-select-color-disabled: $pgn-color-disabled !default; $pgn-form-custom-select-font-weight: $pgn-form-input-font-weight !default; $pgn-form-custom-select-font-height-base: $pgn-form-input-height-base !default; $pgn-form-custom-checkbox-indicator-indeterminate-bg: $pgn-color-background-active !default; +$pgn-form-custom-control-label-floating-text: #FFFFFF1A !default; $pgn-form-custom-control-label-color-disabled: $pgn-color-disabled !default; $pgn-form-custom-control-indicator-bg-base: $pgn-form-input-bg-base !default; $pgn-form-input-group-addon-color-border: $pgn-form-input-border-color !default; @@ -934,6 +952,9 @@ $pgn-form-input-focus-color-border: $pgn-color-input-focus !default; $pgn-form-input-focus-bg: $pgn-form-input-bg-base !default; $pgn-form-input-border-height: calc($pgn-form-input-border-width * 2) !default; $pgn-dropzone-error-wrapper-color: $pgn-color-danger-500 !default; +$pgn-dropzone-border-error: 2px solid $pgn-color-danger-300 !default; +$pgn-dropzone-border-focus: 2px solid $pgn-color-info-300 !default; +$pgn-dropzone-border-hover: 2px solid $pgn-color-info-300 !default; $pgn-dropdown-link-disabled-color: $pgn-color-disabled !default; $pgn-dropdown-link-active-bg: $pgn-color-background-active !default; $pgn-btn-disabled-link-color: $pgn-color-disabled !default; diff --git a/tokens/build/css-to-scss.json b/tokens/build/css-to-scss.json index 20444eac5a..89e56f760a 100644 --- a/tokens/build/css-to-scss.json +++ b/tokens/build/css-to-scss.json @@ -1 +1 @@ -{"var(--pgn-color-background-active)":"$component-active-bg","var(--pgn-color-active)":"$component-active-color","var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-weight)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-box-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-border)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-tooltip-zindex)":"$zindex-tooltip","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-brand-inline-decoration-color)":"$brand-inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$brand-inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$brand-inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$brand-inline-link-hover-decoration-color","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"} \ No newline at end of file +{"var(--pgn-color-background-active)":"$component-active-bg","var(--pgn-color-active)":"$component-active-color","var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-alert-actions-gap)":"$alert-actions-gap","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-weight)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-carousel-transition-duration)":"$carousel-transition-duration","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-padding-icon-base)":"$chip-icon-padding","var(--pgn-chip-padding-icon-to)":"$chip-padding-to-icon","var(--pgn-chip-margin-base)":"$chip-margin","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-chip-disabled-opacity)":"$chip-disable-opacity","var(--pgn-chip-icon-size)":"$chip-icon-size","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-background-is-loading)":"$data-table-is-loading-bg","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-indicator-active-bg)":"$custom-control-indicator-active-bg","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-control-label-floating-text)":"$form-control-floating-label-text-bg","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-bg-active)":"$custom-range-thumb-active-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-nav-color-dark)":"$navbar-dark-color","var(--pgn-nav-color-light)":"$navbar-light-color","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-width)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-header-bg-darken)":"$popover-header-bg-dark","var(--pgn-popover-header-border-darken)":"$popover-header-border-bottom-darken","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-color-box-shadow)":"$checkpoint-box-shadow-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-scrollable-body-box-shadow)":"$scrollable-body-box-shadow","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-sheet-skrim-bg)":"$sheet-skrim-bg","var(--pgn-sheet-skrim-component-box-shadow)":"$sheet-skrim-component-box-shadow","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-tooltip-zindex)":"$zindex-tooltip","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-brand-inline-decoration-color)":"$brand-inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$brand-inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$brand-inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$brand-inline-link-hover-decoration-color","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"} \ No newline at end of file diff --git a/tokens/build/scss-to-css.json b/tokens/build/scss-to-css.json index c605586b25..0128bee4b7 100644 --- a/tokens/build/scss-to-css.json +++ b/tokens/build/scss-to-css.json @@ -1 +1 @@ -{"$component-active-bg":"var(--pgn-color-background-active)","$component-active-color":"var(--pgn-color-active)","$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-weight)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-box-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-border)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$zindex-tooltip":"var(--pgn-tooltip-zindex)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$brand-inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$brand-inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$brand-inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$brand-inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"} \ No newline at end of file +{"$component-active-bg":"var(--pgn-color-background-active)","$component-active-color":"var(--pgn-color-active)","$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$alert-actions-gap":"var(--pgn-alert-actions-gap)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-weight)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$carousel-transition-duration":"var(--pgn-carousel-transition-duration)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-icon-padding":"var(--pgn-chip-padding-icon-base)","$chip-padding-to-icon":"var(--pgn-chip-padding-icon-to)","$chip-margin":"var(--pgn-chip-margin-base)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$chip-disable-opacity":"var(--pgn-chip-disabled-opacity)","$chip-icon-size":"var(--pgn-chip-icon-size)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-is-loading-bg":"var(--pgn-data-table-background-is-loading)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-indicator-active-bg":"var(--pgn-form-custom-control-indicator-active-bg)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$form-control-floating-label-text-bg":"var(--pgn-form-custom-control-label-floating-text)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-active-bg":"var(--pgn-form-custom-range-thumb-bg-active)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-dark-color":"var(--pgn-nav-color-dark)","$navbar-light-color":"var(--pgn-nav-color-light)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-width)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-header-bg-dark":"var(--pgn-popover-header-bg-darken)","$popover-header-border-bottom-darken":"var(--pgn-popover-header-border-darken)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-box-shadow-color":"var(--pgn-product-tour-checkpoint-color-box-shadow)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$scrollable-body-box-shadow":"var(--pgn-scrollable-body-box-shadow)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$sheet-skrim-bg":"var(--pgn-sheet-skrim-bg)","$sheet-skrim-component-box-shadow":"var(--pgn-sheet-skrim-component-box-shadow)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$zindex-tooltip":"var(--pgn-tooltip-zindex)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$brand-inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$brand-inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$brand-inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$brand-inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"} \ No newline at end of file diff --git a/tokens/build/variables.css b/tokens/build/variables.css index aefa4f6480..36ef076386 100644 --- a/tokens/build/variables.css +++ b/tokens/build/variables.css @@ -32,18 +32,7 @@ --pgn-transition-fade: opacity .15s linear; --pgn-transition-base: all .2s ease-in-out; --pgn-spacer-base: 1rem; - --pgn-spacing-base-5-5: 4rem; - --pgn-spacing-base-4-5: 2rem; - --pgn-spacing-base-3-5: 1.25rem; - --pgn-spacing-base-2-5: .75rem; - --pgn-spacing-base-1-5: .375rem; - --pgn-spacing-base-6: 5rem; - --pgn-spacing-base-5: 3rem; - --pgn-spacing-base-4: 1.5rem; - --pgn-spacing-base-3: 1rem; - --pgn-spacing-base-2: .5rem; - --pgn-spacing-base-1: .25rem; - --pgn-spacing-base-0: 0; + --pgn-spacer-0: 0; --pgn-grid-row-columns: 6; --pgn-grid-gutter-width: 24px; --pgn-grid-columns: 12; @@ -120,10 +109,8 @@ --pgn-tooltip-max-width: 200px; --pgn-toast-container-gutter-sm: .625rem; --pgn-toast-container-gutter-lg: 1.25rem; - --pgn-toast-header-color-border: rgba(0, 0, 0, .5); --pgn-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15); --pgn-toast-border-radius: .25rem; - --pgn-toast-border-color: rgba(0, 0, 0, .1); --pgn-toast-border-width: 1px; --pgn-toast-color-base: null; --pgn-toast-font-size: .875rem; @@ -179,7 +166,7 @@ --pgn-reduced-dropdown-width-min: 6rem; --pgn-reduced-dropdown-height-max: 60vh; --pgn-pagination-focus-border-width: .125rem; - --pgn-pagination-focus-box-outline: 0; + --pgn-pagination-focus-outline: 0; --pgn-pagination-secondary-height-sm: 2.25rem; --pgn-pagination-secondary-height-base: 2.75rem; --pgn-pagination-toggle-border-sm: .25rem; @@ -199,10 +186,6 @@ --pgn-pagination-padding-y-lg: .75rem; --pgn-pagination-padding-y-sm: .8rem; --pgn-pagination-padding-y-base: .625rem; - --pgn-navbar-light-toggler-border-color: rgba(0, 0, 0, .1); - --pgn-navbar-light-color-disabled: rgba(0, 0, 0, .3); - --pgn-navbar-light-color-active: rgba(0, 0, 0, .9); - --pgn-navbar-light-color-hover: rgba(0, 0, 0, .7); --pgn-navbar-toggler-padding-x: .75rem; --pgn-navbar-toggler-padding-y: .25rem; --pgn-navbar-nav-scroll-max-height: 75vh; @@ -227,8 +210,7 @@ --pgn-modal-backdrop-opacity: .5; --pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); --pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5); - --pgn-modal-content-border-width: 0; - --pgn-modal-content-border-color: rgba(0, 0, 0, .2); + --pgn-modal-content-border-width: 0rem; --pgn-modal-content-color: null; --pgn-modal-footer-padding-y: 1.5rem; --pgn-modal-footer-padding-x: 1rem; @@ -307,10 +289,10 @@ --pgn-form-custom-checkbox-indicator-indeterminate-box-shadow: none; --pgn-form-custom-checkbox-indicator-border-radius: 0; --pgn-form-custom-control-label-color-base: null; + --pgn-form-custom-control-indicator-active-bg: #0A3055FF; --pgn-form-custom-control-indicator-active-box-shadow: none; --pgn-form-custom-control-indicator-checked-box-shadow-focus: 0 0 0 4px rgba(0, 0, 0, .1); --pgn-form-custom-control-indicator-checked-box-shadow-base: none; - --pgn-form-custom-control-indicator-checked-bg-disabled: rgba(10, 48, 85, .5); --pgn-form-custom-control-indicator-border-width: 2px; --pgn-form-custom-control-indicator-bg-size: 100%; --pgn-form-custom-control-indicator-size: 1.25rem; @@ -333,7 +315,7 @@ --pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075); --pgn-dropzone-padding: 1.5rem; --pgn-dropdown-zindex: 1000; - --pgn-dropdown-border-color: rgba(0, 0, 0, .15); + --pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); --pgn-dropdown-spacer: .125rem; --pgn-dropdown-padding-y-item: .5rem; --pgn-dropdown-padding-y-base: .25rem; @@ -363,8 +345,11 @@ --pgn-code-pre-scrollable-max-height: 340px; --pgn-code-kbd-padding-x: .4rem; --pgn-code-kbd-padding-y: .2rem; + --pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25); --pgn-code-color: #E83E8CFF; --pgn-code-font-size: 87.5%; + --pgn-chip-icon-size: 1.25rem; + --pgn-chip-disabled-opacity: .3; --pgn-chip-line-height: 1.5rem; --pgn-chip-font-weight: 400; --pgn-chip-font-size: .75rem; @@ -373,8 +358,12 @@ --pgn-chip-border-radius-focus: .5rem; --pgn-chip-border-radius-base: .4375rem; --pgn-chip-margin-inline: .5rem; + --pgn-chip-margin-base: .125rem; + --pgn-chip-padding-icon-to: 3px; + --pgn-chip-padding-icon-base: .25rem; --pgn-chip-padding-x: .5rem; --pgn-chip-padding-y: .125rem; + --pgn-carousel-transition-duration: .6s; --pgn-carousel-caption-width: 70%; --pgn-carousel-indicator-transition: opacity .6s ease; --pgn-carousel-indicator-spacer: 3px; @@ -403,21 +392,18 @@ --pgn-card-color: null; --pgn-card-height-base: null; --pgn-card-cap-color: null; - --pgn-card-cap-bg: rgba(0, 0, 0, .03); - --pgn-card-border-color-focus: rgba(0, 0, 0, .5); - --pgn-card-border-color-base: rgba(0, 0, 0, .125); --pgn-card-border-radius-logo: .25rem; --pgn-card-border-radius-image: .3125rem; --pgn-card-spacer-y: .75rem; --pgn-card-spacer-x: 1.25rem; --pgn-btn-transition: null; --pgn-btn-block-spacing-y: .5rem; - --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1); --pgn-btn-tertiary-inverse-bg-base: transparent; --pgn-btn-disabled-opacity: .65; --pgn-btn-focus-gap: 1px; --pgn-btn-focus-width: 2px; --pgn-btn-box-shadow-active: none; + --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); --pgn-bubble-expandable-padding-x: .25rem; --pgn-bubble-expandable-padding-y: 0; --pgn-breadcrumb-border-radius-focus: .125rem; @@ -469,72 +455,8 @@ --pgn-action-row-gap-y: .5rem; --pgn-action-row-gap-x: .5rem; --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-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-400: #E9E6E4FF; - --pgn-color-light-300: #F0EEEDFF; - --pgn-color-light-200: #F8F7F6FF; - --pgn-color-light-100: #FDFDFDFF; - --pgn-color-danger-900: #892029FF; - --pgn-color-danger-800: #92222CFF; - --pgn-color-danger-700: #9C242EFF; - --pgn-color-danger-600: #B02934FF; - --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-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-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-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-400: #B6407FFF; - --pgn-color-brand-300: #CE80AAFF; - --pgn-color-brand-200: #E7BFD4FF; - --pgn-color-brand-100: #F9F0F5FF; - --pgn-color-secondary-900: #303030FF; - --pgn-color-secondary-800: #343434FF; - --pgn-color-secondary-700: #373737FF; - --pgn-color-secondary-600: #3E3E3EFF; - --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-gray-base: #707070FF; --pgn-color-gray-900: #212529FF; @@ -563,6 +485,17 @@ --pgn-font-size-mobile-h3: var(--pgn-font-size-h3); --pgn-font-size-mobile-h2: var(--pgn-font-size-h2); --pgn-font-family-base: var(--pgn-font-family-sans-serif); + --pgn-spacer-5-5: calc(var(--pgn-spacer-base) * 4rem); + --pgn-spacer-4-5: calc(var(--pgn-spacer-base) * 2rem); + --pgn-spacer-3-5: calc(var(--pgn-spacer-base) * 1.25rem); + --pgn-spacer-2-5: calc(var(--pgn-spacer-base) * .75rem); + --pgn-spacer-1-5: calc(var(--pgn-spacer-base) * .375rem); + --pgn-spacer-6: calc(var(--pgn-spacer-base) * 5rem); + --pgn-spacer-5: calc(var(--pgn-spacer-base) * 3rem); + --pgn-spacer-4: calc(var(--pgn-spacer-base) * 1.5rem); + --pgn-spacer-3: var(--pgn-spacer-base); + --pgn-spacer-2: calc(var(--pgn-spacer-base) * .5rem); + --pgn-spacer-1: calc(var(--pgn-spacer-base) * .25rem); --pgn-display-weight-4: var(--pgn-font-weight-bold); --pgn-display-weight-3: var(--pgn-font-weight-bold); --pgn-display-weight-2: var(--pgn-font-weight-bold); @@ -575,28 +508,32 @@ --pgn-tooltip-color-light: var(--pgn-color-black); --pgn-tooltip-color-base: var(--pgn-color-white); --pgn-tooltip-font-size: var(--pgn-font-size-sm); + --pgn-toast-header-color-border: #00000080; --pgn-toast-header-color-background: var(--pgn-color-gray-700); --pgn-toast-header-color-base: var(--pgn-color-white); + --pgn-toast-border-color: #0000001A; --pgn-toast-color-background: var(--pgn-color-gray-700); --pgn-tabs-notification-font-size: var(--pgn-font-size-xs); --pgn-spinner-sm-height: var(--pgn-spinner-sm-width); --pgn-spinner-height: var(--pgn-spinner-width); + --pgn-sheet-skrim-component-box-shadow: #00000026; + --pgn-sheet-skrim-bg: #ADADAD80; --pgn-search-field-border-color-focus: var(--pgn-color-black); --pgn-search-field-border-color-interaction: var(--pgn-color-black); + --pgn-scrollable-body-box-shadow: #0000008C; --pgn-progress-bar-bar-bg-base: var(--pgn-color-accent-a); --pgn-progress-bar-bar-color: var(--pgn-color-white); --pgn-progress-bar-font-size: calc(var(--pgn-font-size-base) * .75); --pgn-product-tour-checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arrow) transparent; --pgn-product-tour-checkpoint-arrow-color-default: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-color-background); --pgn-product-tour-checkpoint-arrow-color-top: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-width-border); + --pgn-product-tour-checkpoint-color-box-shadow: #0000004D; --pgn-product-tour-checkpoint-color-body: var(--pgn-color-gray-700); - --pgn-product-tour-checkpoint-color-background: var(--pgn-color-light-300); - --pgn-popover-danger-bg: var(--pgn-color-danger-100); - --pgn-popover-warning-bg: var(--pgn-color-warning-100); - --pgn-popover-success-bg: var(--pgn-color-success-100); --pgn-popover-body-padding-x: var(--pgn-popover-header-padding-x); --pgn-popover-body-padding-y: var(--pgn-popover-header-padding-y); - --pgn-popover-border-border: var(--pgn-border-width); + --pgn-popover-header-border-darken: #E5E5E5FF; + --pgn-popover-header-bg-darken: #E5E5E5FF; + --pgn-popover-border-width: var(--pgn-border-width); --pgn-popover-border-radius: var(--pgn-border-radius-sm); --pgn-popover-font-size: var(--pgn-font-size-sm); --pgn-pagination-focus-color-text: var(--pgn-color-black); @@ -609,27 +546,30 @@ --pgn-pagination-bg-disabled: var(--pgn-color-white); --pgn-pagination-bg-hover: var(--pgn-color-gray-100); --pgn-pagination-color-inverse: var(--pgn-color-white); - --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active); - --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active); - --pgn-navbar-dark-toggler-border-color: rgba(var(--pgn-color-white), .1); - --pgn-navbar-dark-color-disabled: rgba(var(--pgn-color-white), .25); - --pgn-navbar-dark-color-hover: rgba(var(--pgn-color-white), .75); + --pgn-navbar-light-toggler-border-color: #0000001A; + --pgn-navbar-light-color-disabled: #0000004D; + --pgn-navbar-light-color-active: #000000E6; + --pgn-navbar-light-color-hover: #000000B3; + --pgn-navbar-dark-toggler-border-color: #FFFFFF1A; + --pgn-navbar-dark-color-disabled: #FFFFFF40; + --pgn-navbar-dark-color-hover: #FFFFFFBF; --pgn-navbar-toggler-font-size: var(--pgn-font-size-lg); --pgn-navbar-brand-font-size: var(--pgn-font-size-lg); --pgn-navbar-nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2); --pgn-navbar-padding-x-base: var(--pgn-spacer-base); --pgn-navbar-padding-y: calc(var(--pgn-spacer-base) / 2); + --pgn-nav-color-light: #00000080; + --pgn-nav-color-dark: #FFFFFF80; --pgn-nav-divider-margin-y: calc(var(--pgn-spacer-base) / 2); --pgn-nav-divider-color: var(--pgn-color-gray-100); --pgn-nav-pills-border-radius: var(--pgn-border-radius-base); - --pgn-nav-tabs-link-hover-bg: var(--pgn-color-light-400); - --pgn-nav-tabs-border-color: var(--pgn-color-light-400); --pgn-nav-link-color-disabled: var(--pgn-color-gray-300); --pgn-nav-link-color-base: var(--pgn-color-gray-700); --pgn-modal-header-padding-base: var(--pgn-modal-header-padding-y) var(--pgn-modal-header-padding-x); --pgn-modal-header-border-width: var(--pgn-modal-content-border-width); --pgn-modal-backdrop-bg: var(--pgn-color-black); --pgn-modal-content-border-radius: var(--pgn-border-radius-lg); + --pgn-modal-content-border-color: #00000033; --pgn-modal-title-line-height: var(--pgn-line-height-base); --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y); --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base); @@ -644,7 +584,7 @@ --pgn-list-group-disabled-color: var(--pgn-color-gray-600); --pgn-list-group-border-radius: var(--pgn-border-radius-base); --pgn-list-group-border-width: var(--pgn-border-width); - --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125); + --pgn-list-group-border-color: #00000020; --pgn-list-group-bg-hover: var(--pgn-color-gray-100); --pgn-dt-font-weight: var(--pgn-font-weight-bold); --pgn-input-btn-border-width: var(--pgn-border-width); @@ -652,7 +592,7 @@ --pgn-input-btn-line-height-lg: var(--pgn-line-height-lg); --pgn-hr-border-margin-y: var(--pgn-spacer-base); --pgn-hr-border-width: var(--pgn-border-width); - --pgn-hr-border-color: rgba(var(--pgn-color-black), .1); + --pgn-hr-border-color: #0000001A; --pgn-headings-color: var(--pgn-color-black); --pgn-headings-font-weight: var(--pgn-font-weight-bold); --pgn-body-color: var(--pgn-color-gray-700); @@ -692,28 +632,24 @@ --pgn-form-input-padding-y-sm: var(--pgn-input-btn-padding-sm-y); --pgn-form-input-padding-y-base: var(--pgn-input-btn-padding-y); --pgn-dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x); - --pgn-dropzone-border-error: 2px solid var(--pgn-color-danger-300); - --pgn-dropzone-border-focus: 2px solid var(--pgn-color-info-300); - --pgn-dropzone-border-hover: 2px solid var(--pgn-color-info-300); - --pgn-dropdown-link-hover-bg: var(--pgn-color-light-300); --pgn-dropdown-link-hover-color: var(--pgn-color-gray-900); --pgn-dropdown-link-color: var(--pgn-color-gray-900); - --pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(var(--pgn-color-black), .175); --pgn-dropdown-divider-margin-y: calc(var(--pgn-spacer-base) / 2); --pgn-dropdown-divider-bg: var(--pgn-color-gray-100); --pgn-dropdown-border-radius-base: var(--pgn-border-radius-base); --pgn-dropdown-border-width: var(--pgn-border-width); + --pgn-dropdown-border-color: #00000026; --pgn-dropdown-font-size: var(--pgn-font-size-base); --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item); --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm); --pgn-data-table-border: 1px solid var(--pgn-color-gray-200); + --pgn-data-table-background-is-loading: #FFFFFFB3; --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x); --pgn-collapsible-card-spacer-y-lg: var(--pgn-card-spacer-y); --pgn-code-pre-color: var(--pgn-color-gray-900); --pgn-code-kbd-bg: var(--pgn-color-gray-700); --pgn-code-kbd-color: var(--pgn-color-white); --pgn-code-kbd-nested-font-weight: var(--pgn-font-weight-bold); - --pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(var(--pgn-color-black), .25); --pgn-code-kbd-font-size: var(--pgn-code-font-size); --pgn-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); --pgn-close-button-color: var(--pgn-color-black); @@ -723,17 +659,18 @@ --pgn-carousel-indicator-active-bg: var(--pgn-color-white); --pgn-card-footer-text-font-size: var(--pgn-font-size-small-x); --pgn-card-divider-margin-y: var(--pgn-card-spacer-y); - --pgn-card-divider-bg: var(--pgn-color-light-400); --pgn-card-columns-margin: var(--pgn-card-spacer-y); --pgn-card-margin-grid: var(--pgn-card-margin-group); --pgn-card-margin-deck: var(--pgn-card-margin-group); --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max); + --pgn-card-cap-bg: #00000008; + --pgn-card-border-color-focus: #00000080; + --pgn-card-border-color-base: #00000020; --pgn-card-border-radius-base: var(--pgn-border-radius-base); --pgn-card-border-width: var(--pgn-border-width); - --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); + --pgn-btn-tertiary-inverse-bg-hover: #FFFFFF1A; --pgn-btn-tertiary-inverse-color: var(--pgn-color-white); --pgn-btn-tertiary-color: var(--pgn-color-gray-700); - --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075); --pgn-btn-border-radius-sm: var(--pgn-border-radius-sm); --pgn-btn-border-radius-lg: var(--pgn-border-radius-lg); --pgn-btn-border-radius-base: var(--pgn-border-radius-base); @@ -751,26 +688,48 @@ --pgn-btn-padding-y-lg: var(--pgn-input-btn-padding-lg-y); --pgn-btn-padding-y-base: var(--pgn-input-btn-padding-y); --pgn-breadcrumb-inverse-color: var(--pgn-color-white); - --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700); --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600); --pgn-breadcrumb-bg: var(--pgn-color-gray-200); --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base); --pgn-badge-focus-width: var(--pgn-input-btn-focus-width); --pgn-badge-font-weight: var(--pgn-font-weight-bold); - --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300); --pgn-annotation-line-height: var(--pgn-line-height-sm); --pgn-annotation-font-size: var(--pgn-font-size-sm); --pgn-alert-color-content: var(--pgn-color-gray-700); --pgn-alert-color-title: var(--pgn-color-black); --pgn-alert-font-weight-link: var(--pgn-font-weight-normal); --pgn-alert-border-radius: var(--pgn-border-radius-base); + --pgn-color-dark-900: #1B2C21FF; + --pgn-color-dark-800: #1D2F23FF; + --pgn-color-dark-700: #1F3226FF; + --pgn-color-dark-600: #23392AFF; --pgn-color-dark-500: var(--pgn-color-dark-base); + --pgn-color-dark-400: #5D6F63FF; + --pgn-color-dark-300: #939F97FF; + --pgn-color-dark-200: #C9CFCBFF; + --pgn-color-dark-100: #F2F3F3FF; + --pgn-color-light-900: #9E9B99FF; + --pgn-color-light-800: #A9A6A4FF; + --pgn-color-light-700: #B4B1AFFF; + --pgn-color-light-600: #CBC7C5FF; --pgn-color-light-500: var(--pgn-color-light-base); + --pgn-color-light-400: #E9E6E4FF; + --pgn-color-light-300: #F0EEEDFF; + --pgn-color-light-200: #F8F7F6FF; + --pgn-color-light-100: #FDFDFDFF; --pgn-color-danger-base: var(--pgn-color-red); --pgn-color-warning-base: var(--pgn-color-yellow); --pgn-color-info-base: var(--pgn-color-teal); --pgn-color-success-base: var(--pgn-color-green); + --pgn-color-brand-900: #6E003BFF; + --pgn-color-brand-800: #76003FFF; + --pgn-color-brand-700: #7E0043FF; + --pgn-color-brand-600: #8D004CFF; --pgn-color-brand-500: var(--pgn-color-brand-base); + --pgn-color-brand-400: #B6407FFF; + --pgn-color-brand-300: #CE80AAFF; + --pgn-color-brand-200: #E7BFD4FF; + --pgn-color-brand-100: #F9F0F5FF; --pgn-color-secondary-base: var(--pgn-color-gray-700); --pgn-color-primary-900: #07223CFF; --pgn-color-primary-800: #082440FF; @@ -786,11 +745,14 @@ --pgn-color-background-base: var(--pgn-color-white); --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base); --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2); + --pgn-search-field-button-variants-dark: var(--pgn-color-brand-500); + --pgn-search-field-button-variants-light: var(--pgn-color-primary-500); --pgn-search-field-border-color-base: var(--pgn-color-gray-500); --pgn-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500); --pgn-progress-bar-border-color: var(--pgn-color-gray-500); --pgn-product-tour-checkpoint-color-breadcrumb: var(--pgn-color-primary-500); --pgn-product-tour-checkpoint-color-border: var(--pgn-color-brand-500); + --pgn-product-tour-checkpoint-color-background: var(--pgn-color-light-300); --pgn-popover-body-color: var(--pgn-body-color); --pgn-popover-header-color: var(--pgn-headings-color); --pgn-popover-bg: var(--pgn-color-background-base); @@ -798,6 +760,8 @@ --pgn-pagination-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow); --pgn-pagination-bg-base: var(--pgn-color-background-base); --pgn-pagination-color-active: var(--pgn-color-active); + --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active); + --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active); --pgn-navbar-dark-color-active: var(--pgn-color-active); --pgn-navbar-toggler-border-radius: var(--pgn-btn-border-radius-base); --pgn-navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2); @@ -805,7 +769,8 @@ --pgn-nav-pills-link-link-active-color: var(--pgn-color-active); --pgn-nav-tabs-link-active-color-border: transparent transparent var(--pgn-color-primary-500); --pgn-nav-tabs-link-active-color-base: var(--pgn-color-primary-500); - --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color); + --pgn-nav-tabs-link-hover-bg: var(--pgn-color-light-400); + --pgn-nav-tabs-border-color: var(--pgn-color-light-400); --pgn-modal-header-border-color: var(--pgn-border-color); --pgn-modal-content-bg: var(--pgn-color-background-base); --pgn-modal-footer-border-width: var(--pgn-modal-header-border-width); @@ -842,6 +807,7 @@ --pgn-form-custom-select-padding-y-sm: var(--pgn-form-input-padding-y-sm); --pgn-form-custom-select-padding-y-base: var(--pgn-form-input-padding-y-base); --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-color-primary-500); + --pgn-form-custom-control-indicator-checked-bg-disabled: #0A305580; --pgn-form-custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled); --pgn-form-input-group-addon-color-base: var(--pgn-form-input-color-base); --pgn-form-input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2)); @@ -862,30 +828,79 @@ --pgn-dropzone-border-active: 2px solid var(--pgn-color-primary-500); --pgn-dropzone-border-default: 1px dashed var(--pgn-color-gray-500); --pgn-dropdown-link-active-color: var(--pgn-color-active); + --pgn-dropdown-link-hover-bg: var(--pgn-color-light-300); --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width)); --pgn-dropdown-bg: var(--pgn-color-background-base); --pgn-dropdown-color-header: var(--pgn-color-gray-500); --pgn-dropdown-color-base: var(--pgn-body-color); --pgn-data-table-background-color: var(--pgn-color-background-base); + --pgn-card-divider-bg: var(--pgn-color-light-400); --pgn-card-bg: var(--pgn-color-background-base); + --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover); --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500); --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500); --pgn-btn-border-width: var(--pgn-input-btn-border-width); --pgn-btn-line-height-lg: var(--pgn-input-btn-line-height-lg); + --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700); --pgn-breadcrumb-inverse-active: var(--pgn-color-light-500); --pgn-breadcrumb-color-active: var(--pgn-color-gray-500); --pgn-breadcrumb-color-base: var(--pgn-color-primary-500); + --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300); + --pgn-alert-actions-gap: var(--pgn-spacer-3); + --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-input-focus: var(--pgn-color-primary-500); --pgn-color-disabled: var(--pgn-color-gray-500); --pgn-color-background-active: var(--pgn-color-primary-500); --pgn-popover-danger-icon-color: var(--pgn-color-warning-500); + --pgn-popover-danger-bg: var(--pgn-color-danger-100); --pgn-popover-warning-icon-color: var(--pgn-color-warning-500); + --pgn-popover-warning-bg: var(--pgn-color-warning-100); --pgn-popover-success-icon-color: var(--pgn-color-success-500); + --pgn-popover-success-bg: var(--pgn-color-success-100); --pgn-popover-arrow-color: var(--pgn-popover-bg); --pgn-pagination-bg-active: var(--pgn-color-background-active); --pgn-pagination-color-disabled: var(--pgn-color-disabled); @@ -893,6 +908,7 @@ --pgn-navbar-dark-brand-color-base: var(--pgn-navbar-dark-color-active); --pgn-nav-pills-link-link-active-bg: var(--pgn-color-background-active); --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg); + --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color); --pgn-modal-footer-border-color: var(--pgn-modal-header-border-color); --pgn-menu-background-active: var(--pgn-btn-tertiary-bg-active); --pgn-image-thumbnail-bg: var(--pgn-body-bg); @@ -914,6 +930,7 @@ --pgn-form-custom-file-height-inner: var(--pgn-form-input-height-inner-base); --pgn-form-custom-file-height-base: var(--pgn-form-input-height-base); --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus); + --pgn-form-custom-range-thumb-bg-active: #1F3E64FF; --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-disabled); --pgn-form-custom-range-thumb-bg-base: var(--pgn-color-background-active); --pgn-form-custom-select-height-sm: var(--pgn-form-input-height-sm); @@ -927,6 +944,7 @@ --pgn-form-custom-select-font-weight: var(--pgn-form-input-font-weight); --pgn-form-custom-select-font-height-base: var(--pgn-form-input-height-base); --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-color-background-active); + --pgn-form-custom-control-label-floating-text: #FFFFFF1A; --pgn-form-custom-control-label-color-disabled: var(--pgn-color-disabled); --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base); --pgn-form-input-group-addon-color-border: var(--pgn-form-input-border-color); @@ -935,6 +953,9 @@ --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base); --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2); --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500); + --pgn-dropzone-border-error: 2px solid var(--pgn-color-danger-300); + --pgn-dropzone-border-focus: 2px solid var(--pgn-color-info-300); + --pgn-dropzone-border-hover: 2px solid var(--pgn-color-info-300); --pgn-dropdown-link-disabled-color: var(--pgn-color-disabled); --pgn-dropdown-link-active-bg: var(--pgn-color-background-active); --pgn-btn-disabled-link-color: var(--pgn-color-disabled); diff --git a/tokens/source/components/Alert.json b/tokens/source/components/Alert.json index d302931f46..1a48f65243 100644 --- a/tokens/source/components/Alert.json +++ b/tokens/source/components/Alert.json @@ -22,7 +22,9 @@ "content": { "value": "{color.gray.700.value}", "themeable": true, "source": "$alert-content-color" } }, "box-shadow": { - "value": "0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15)", "themeable": true, "source": "$alert-box-shadow" + "value": "0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$alert-box-shadow" }, "level": { "bg": { "value": "-10", "themeable": true, "source": "$alert-bg-level" }, @@ -32,6 +34,7 @@ "icon": { "space": { "value": ".8rem", "themeable": true, "source": "$alert-icon-space" } }, - "line-height": { "value": "1.5rem", "themeable": true, "source": "$alert-line-height" } + "line-height": { "value": "1.5rem", "themeable": true, "source": "$alert-line-height" }, + "actions-gap": { "value": "{spacer.3.value}", "themeable": true, "source": "$alert-actions-gap" } } } diff --git a/tokens/source/components/Button.json b/tokens/source/components/Button.json index 2c73215949..a27f98e197 100644 --- a/tokens/source/components/Button.json +++ b/tokens/source/components/Button.json @@ -38,7 +38,7 @@ }, "box-shadow": { "base": { - "value": "inset 0 1px 0 rgba({color.white.value}, .15), 0 1px 1px rgba({color.black.value}, .075)", + "value": "inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)", "themeable": true, "source": "$btn-box-shadow" }, @@ -65,9 +65,13 @@ "bg": { "base": { "value": "transparent", "themeable": true, "source": "$btn-inverse-tertiary-bg" }, "hover": { - "value": "rgba(255, 255, 255, .1)", + "value": "{color.white.value}", "themeable": true, - "source": "$btn-inverse-tertiary-hover-bg" + "source": "$btn-inverse-tertiary-hover-bg", + "modify": [{ + "type": "alpha", + "amount": 0.1 + }] }, "active": { "value": "{btn.tertiary.inverse.bg.hover.value}", diff --git a/tokens/source/components/Card.json b/tokens/source/components/Card.json index c055a51bac..38b30ff401 100644 --- a/tokens/source/components/Card.json +++ b/tokens/source/components/Card.json @@ -12,12 +12,36 @@ "logo": { "value": ".25rem", "themeable": true, "source": "$card-logo-border-radius" } }, "color": { - "base": { "value": "rgba(0, 0, 0, .125)", "themeable": true, "source": "$card-border-color" }, - "focus": { "value": "rgba(0, 0, 0, .5)", "themeable": true, "source": "$card-border-focus-color" } + "base": { + "value": "{color.black.value}", + "themeable": true, + "source": "$card-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.125 + }] + }, + "focus": { + "value": "{color.black.value}", + "themeable": true, + "source": "$card-border-focus-color", + "modify": [{ + "type": "alpha", + "amount": 0.5 + }] + } } }, "cap": { - "bg": { "value": "rgba(0, 0, 0, .03)", "themeable": true, "source": "$card-cap-bg" }, + "bg": { + "value": "{color.black.value}", + "themeable": true, + "source": "$card-cap-bg", + "modify": [{ + "type": "alpha", + "amount": 0.03 + }] + }, "color": { "value": "null", "themeable": true, "source": "$card-cap-color" } }, "height": { @@ -89,7 +113,7 @@ }, "loading": { "skeleton": { - "spacer": { "value": ".313rem", "themeable": true, "source": "$loading-skeleton-spacer" } + "spacer": { "value": ".313rem", "themeable": true, "source": "$loading-skeleton-spacer" } } } } diff --git a/tokens/source/components/Carousel.json b/tokens/source/components/Carousel.json index e78c3b039d..edef5e15cf 100644 --- a/tokens/source/components/Carousel.json +++ b/tokens/source/components/Carousel.json @@ -28,6 +28,9 @@ "caption": { "width": { "value": "70%", "themeable": true, "source": "$carousel-caption-width" }, "color": { "value": "{color.white.value}", "themeable": true, "source": "$carousel-caption-color" } + }, + "transition": { + "duration": { "value": ".6s", "themeable": true, "source": "$carousel-transition-duration" } } } } diff --git a/tokens/source/components/Chip.json b/tokens/source/components/Chip.json index 878f5201be..fe09b0ddee 100644 --- a/tokens/source/components/Chip.json +++ b/tokens/source/components/Chip.json @@ -2,9 +2,18 @@ "chip": { "padding": { "y": { "value": ".125rem", "themeable": true, "source": "$chip-padding-y" }, - "x": { "value": ".5rem", "themeable": true, "source": "$chip-padding-x" } + "x": { "value": ".5rem", "themeable": true, "source": "$chip-padding-x" }, + "icon": { + "base": { + "value": ".25rem", "themeable": true, "source": "$chip-icon-padding" + }, + "to": { + "value": "3px", "themeable": true, "source": "$chip-padding-to-icon" + } + } }, "margin": { + "base": { "value": ".125rem", "themeable": true, "source": "$chip-margin" }, "inline": { "value": ".5rem", "themeable": true, "source": "$chip-margin-inline" } }, "border": { @@ -23,6 +32,12 @@ }, "line": { "height": { "value": "1.5rem", "themeable": true, "source": "$chip-line-height" } + }, + "disabled": { + "opacity": { "value": ".3", "themeable": true, "source": "$chip-disable-opacity" } + }, + "icon": { + "size": { "value": "1.25rem", "themeable": true, "source": "$chip-icon-size" } } } } diff --git a/tokens/source/components/Code.json b/tokens/source/components/Code.json index 376929693c..22dc2214f5 100644 --- a/tokens/source/components/Code.json +++ b/tokens/source/components/Code.json @@ -8,12 +8,10 @@ "font": { "size": { "value": "{code.font.size.value}", "themeable": true, "source": "$kbd-font-size" } }, - "box": { - "shadow": { - "value": "inset 0 -.1rem 0 rgba({color.black.value}, .25)", - "themeable": true, - "source": "$kbd-box-shadow" - } + "box-shadow": { + "value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)", + "themeable": true, + "source": "$kbd-box-shadow" }, "nested": { "font": { diff --git a/tokens/source/components/DataTable.json b/tokens/source/components/DataTable.json index 2813f9a853..276798d6f9 100644 --- a/tokens/source/components/DataTable.json +++ b/tokens/source/components/DataTable.json @@ -1,30 +1,78 @@ { "data-table": { "background": { - "color": { "value": "{color.background.base.value}", "themeable": true, "source": "$data-table-background-color" + "color": { "value": "{color.background.base.value}", "themeable": true, "source": "$data-table-background-color" }, + "is-loading": { + "value": "{color.white.value}", + "themeable": true, + "source": "$data-table-is-loading-bg", + "modify": [ + { + "type": "alpha", + "amount": 0.7 + } + ] } }, - "border": { "value": "1px solid {color.gray.200.value}", "themeable": true, "source": "$data-table-border" }, - "box": { - "shadow": { "value": "{box-shadow.sm.value}", "themeable": true, "source": "$data-table-box-shadow" } + "border": { + "value": "1px solid {color.gray.200.value}", + "themeable": true, + "source": "$data-table-border" + }, + "box-shadow": { + "value": "{box-shadow.sm.value}", + "themeable": true, + "source": "$data-table-box-shadow" }, "padding": { - "x": { "value": ".75rem", "themeable": true, "source": "$data-table-padding-x" }, - "y": { "value": ".75rem", "themeable": true, "source": "$data-table-padding-y" }, - "small": { "value": ".5rem", "themeable": true, "source": "$data-table-padding-small" }, - "cell": { "value": ".75rem", "themeable": true, "source": "$data-table-cell-padding" }, - "head-cell": { "value": ".5rem .75rem", "themeable": true, "source": "$data-table-head-cell-padding" } + "x": { + "value": ".75rem", + "themeable": true, + "source": "$data-table-padding-x" + }, + "y": { + "value": ".75rem", + "themeable": true, + "source": "$data-table-padding-y" + }, + "small": { + "value": ".5rem", + "themeable": true, + "source": "$data-table-padding-small" + }, + "cell": { + "value": ".75rem", + "themeable": true, + "source": "$data-table-cell-padding" + }, + "head-cell": { + "value": ".5rem .75rem", + "themeable": true, + "source": "$data-table-head-cell-padding" + } }, "footer": { - "position": { "value": "center", "themeable": true, "source": "$data-table-footer-position" } + "position": { + "value": "center", + "themeable": true, + "source": "$data-table-footer-position" + } }, "pagination": { "dropdown": { "max": { - "height": { "value": "60vh", "themeable": true, "source": "$data-table-pagination-dropdown-max-height" } + "height": { + "value": "60vh", + "themeable": true, + "source": "$data-table-pagination-dropdown-max-height" + } }, "min": { - "width": { "value": "6rem", "themeable": true, "source": "$data-table-pagination-dropdown-min-width" } + "width": { + "value": "6rem", + "themeable": true, + "source": "$data-table-pagination-dropdown-min-width" + } } } } diff --git a/tokens/source/components/Dropdown.json b/tokens/source/components/Dropdown.json index 76c5f9ac31..2743b32906 100644 --- a/tokens/source/components/Dropdown.json +++ b/tokens/source/components/Dropdown.json @@ -28,7 +28,15 @@ }, "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$dropdown-bg" }, "border": { - "color": { "value": "rgba(0, 0, 0, .15)", "themeable": true, "source": "$dropdown-border-color" }, + "color": { + "value": "{color.black.value}", + "themeable": true, + "source": "$dropdown-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.15 + }] + }, "width": { "value": "{border.width.value}", "themeable": true, "source": "$dropdown-border-width" }, "radius": { "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$dropdown-border-radius" }, @@ -45,9 +53,7 @@ "y": { "value": "calc({spacer.base.value} / 2)", "themeable": true, "source": "$dropdown-divider-margin-y" } } }, - "box": { - "shadow": { "value": "0 .5rem 1rem rgba({color.black.value}, .175)", "themeable": true, "source": "$dropdown-box-shadow" } - }, + "box-shadow": { "value": "0 .5rem 1rem rgba(0, 0, 0, .175)", "themeable": true, "source": "$dropdown-box-shadow" }, "link": { "color": { "value": "{color.gray.900.value}", "themeable": true, "source": "$dropdown-link-color" }, "hover": { diff --git a/tokens/source/components/Form.json b/tokens/source/components/Form.json index 28a4d3a7da..1859be51de 100644 --- a/tokens/source/components/Form.json +++ b/tokens/source/components/Form.json @@ -52,15 +52,13 @@ "sm": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$input-border-radius-sm" } } }, - "box": { - "shadow": { + "box-shadow": { "base": { "value": "inset 0 1px 1px rgba(0, 0, 0, .075)", "themeable": true, "source": "$input-box-shadow" }, "focus": { - "value": "{input.btn.focus.box.shadow.value}", + "value": "{input.btn.focus.box-shadow.value}", "themeable": true, "source": "$input-focus-box-shadow" } - } }, "focus": { "bg": { "value": "{form.input.bg.base.value}", "themeable": true, "source": "$input-focus-bg" }, @@ -179,12 +177,10 @@ "base": { "value": "{form.input.bg.base.value}", "themeable": true, "source": "$custom-control-indicator-bg" }, "size": { "value": "100%", "themeable": true, "source": "$custom-control-indicator-bg-size" } }, - "box": { - "shadow": { - "value": "{form.input.box.shadow.base.value}", + "box-shadow": { + "value": "{form.input.box-shadow.base.value}", "themeable": true, "source": "$custom-control-indicator-box-shadow" - } }, "border": { "color": { @@ -204,19 +200,21 @@ "checked": { "bg": { "disabled": { - "value": "rgba(10, 48, 85, .5)", + "value": "{color.primary.500.value}", "themeable": true, - "source": "$custom-control-indicator-checked-disabled-bg" + "source": "$custom-control-indicator-checked-disabled-bg", + "modify": [{ + "type": "alpha", + "amount": 0.5 + }] } }, - "box": { - "shadow": { - "base": { "value": "none", "themeable": true, "source": "$custom-control-indicator-checked-box-shadow" }, - "focus": { - "value": "0 0 0 4px rgba(0, 0, 0, .1)", - "themeable": true, - "source": "$custom-control-indicator-focus-box-shadow" - } + "box-shadow": { + "base": { "value": "none", "themeable": true, "source": "$custom-control-indicator-checked-box-shadow" }, + "focus": { + "value": "0 0 0 4px rgba(0, 0, 0, .1)", + "themeable": true, + "source": "$custom-control-indicator-focus-box-shadow" } }, "border": { @@ -235,9 +233,8 @@ } }, "active": { - "box": { - "shadow": { "value": "none", "themeable": true, "source": "$custom-control-indicator-active-box-shadow" } - } + "box-shadow": {"value": "none", "themeable": true, "source": "$custom-control-indicator-active-box-shadow" }, + "bg": { "value": "#0A3055", "themeable": true, "source": "$custom-control-indicator-active-bg" } } }, "label": { @@ -248,6 +245,17 @@ "themeable": true, "source": "$custom-control-label-disabled-color" } + }, + "floating": { + "text": { + "value": "{form.input.bg.base.value}", + "themeable": true, + "source": "$form-control-floating-label-text-bg", + "modify": [{ + "type": "alpha", + "amount": 0.1 + }] + } } } }, @@ -262,12 +270,10 @@ "themeable": true, "source": "$custom-checkbox-indicator-indeterminate-bg" }, - "box": { - "shadow": { - "value": "none", - "themeable": true, - "source": "$custom-checkbox-indicator-indeterminate-box-shadow" - } + "box-shadow": { + "value": "none", + "themeable": true, + "source": "$custom-checkbox-indicator-indeterminate-box-shadow" }, "border": { "color": { @@ -463,18 +469,16 @@ "themeable": true, "source": "$custom-select-border-radius" }, - "box": { - "shadow": { - "base": { - "value": "inset 0 1px 2px rgba(0, 0, 0, .075)", - "themeable": true, - "source": "$custom-select-box-shadow" - }, - "focus": { - "value": "{input.btn.focus.box.shadow.value}", - "themeable": true, - "source": "$custom-select-focus-box-shadow" - } + "box-shadow": { + "base": { + "value": "inset 0 1px 2px rgba(0, 0, 0, .075)", + "themeable": true, + "source": "$custom-select-box-shadow" + }, + "focus": { + "value": "{input.btn.focus.box-shadow.value}", + "themeable": true, + "source": "$custom-select-focus-box-shadow" } } }, @@ -495,12 +499,10 @@ "border": { "radius": { "value": "1rem", "themeable": true, "source": "$custom-range-track-border-radius" } }, - "box": { - "shadow": { - "value": "inset 0 .25rem .25rem rgba(0, 0, 0, .1)", - "themeable": true, - "source": "$custom-range-track-box-shadow" - } + "box-shadow": { + "value": "inset 0 .25rem .25rem rgba(0, 0, 0, .1)", + "themeable": true, + "source": "$custom-range-track-box-shadow" } }, "thumb": { @@ -520,30 +522,37 @@ "value": "{color.disabled.value}", "themeable": true, "source": "$custom-range-thumb-disabled-bg" + }, + "active": { + "value": "{color.background.active.value}", + "themeable": true, + "source": "$custom-range-thumb-active-bg", + "modify": [{ + "type": "brighten", + "amount": "0.35" + }] } }, "border": { "base": { "value": "0", "themeable": true, "source": "$custom-range-thumb-border" }, "radius": { "value": "1rem", "themeable": true, "source": "$custom-range-thumb-border-radius" } }, - "box": { - "shadow": { + "box-shadow": { + "base": { + "value": "0 .1rem .25rem rgba(0, 0, 0, .1)", + "themeable": true, + "source": "$custom-range-thumb-box-shadow" + }, + "focus": { "base": { - "value": "0 .1rem .25rem rgba(0, 0, 0, .1)", + "value": "0 0 0 1px {body.bg.value}, {form.input.box-shadow.focus.value}", "themeable": true, - "source": "$custom-range-thumb-box-shadow" + "source": "$custom-range-thumb-focus-box-shadow" }, - "focus": { - "base": { - "value": "0 0 0 1px {body.bg.value}, {form.input.box.shadow.focus.value}", - "themeable": true, - "source": "$custom-range-thumb-focus-box-shadow" - }, - "width": { - "value": "{form.input.focus.width.value}", - "themeable": true, - "source": "$custom-range-thumb-focus-box-shadow-width" - } + "width": { + "value": "{form.input.focus.width.value}", + "themeable": true, + "source": "$custom-range-thumb-focus-box-shadow-width" } } } @@ -586,18 +595,16 @@ "source": "$custom-file-border-width" } }, - "box": { - "shadow": { - "base": { - "value": "{form.input.box.shadow.base.value}", - "themeable": true, - "source": "$custom-file-box-shadow" - }, - "focus": { - "value": "{form.input.box.shadow.focus.value}", - "themeable": true, - "source": "$custom-file-focus-box-shadow" - } + "box-shadow": { + "base": { + "value": "{form.input.box-shadow.base.value}", + "themeable": true, + "source": "$custom-file-box-shadow" + }, + "focus": { + "value": "{form.input.box-shadow.focus.value}", + "themeable": true, + "source": "$custom-file-focus-box-shadow" } }, "bg": { diff --git a/tokens/source/components/Image.json b/tokens/source/components/Image.json index c5913778a1..46abd45c8d 100644 --- a/tokens/source/components/Image.json +++ b/tokens/source/components/Image.json @@ -8,9 +8,7 @@ "color": { "value": "{color.gray.200.value}", "themeable": true, "source": "$thumbnail-border-color" }, "radius": { "value": "{border.radius.base.value}", "themeable": true, "source": "$thumbnail-border-radius"} }, - "box": { - "shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)", "themeable": true, "source": "$thumbnail-box-shadow" } - } + "box-shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)", "themeable": true, "source": "$thumbnail-box-shadow" } }, "figure": { "caption": { diff --git a/tokens/source/components/Modal.json b/tokens/source/components/Modal.json index 0dbc7497b4..71d26b31f1 100644 --- a/tokens/source/components/Modal.json +++ b/tokens/source/components/Modal.json @@ -34,19 +34,25 @@ "color": { "value": "null", "themeable": true, "source": "$modal-content-color" }, "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$modal-content-bg" }, "border": { - "color": { "value": "rgba(0, 0, 0, .2)", "themeable": true, "source": "$modal-content-border-color" }, - "width": { "value": "0", "themeable": true, "source": "$modal-content-border-width" }, + "color": { + "value": "{color.black.value}", + "themeable": true, + "source": "$modal-content-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.2 + }] + }, + "width": { "value": "0rem", "themeable": true, "source": "$modal-content-border-width" }, "radius": { "value": "{border.radius.lg.value}", "themeable": true, "source": "$modal-content-border-radius" } }, - "box": { - "shadow": { - "xs": { "value": "0 .25rem .5rem rgba(0, 0, 0, .5)", "themeable": true, "source": "$modal-content-box-shadow-xs" }, - "sm": { - "up": { - "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)", - "themeable": true, - "source": "$modal-content-box-shadow-sm-up" - } + "box-shadow": { + "xs": { "value": "0 .25rem .5rem rgba(0, 0, 0, .5)", "themeable": true, "source": "$modal-content-box-shadow-xs" }, + "sm": { + "up": { + "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$modal-content-box-shadow-sm-up" } } } diff --git a/tokens/source/components/Nav.json b/tokens/source/components/Nav.json index e1e68e47c5..d6bbe58972 100644 --- a/tokens/source/components/Nav.json +++ b/tokens/source/components/Nav.json @@ -65,6 +65,26 @@ "margin": { "y": { "value": "calc({spacer.base.value} / 2)", "themeable": true, "source": "$nav-divider-margin-y" } } + }, + "color": { + "dark": { + "value": "{color.white.value}", + "themeable": true, + "source": "$navbar-dark-color", + "modify": [{ + "type": "alpha", + "amount": 0.5 + }] + }, + "light": { + "value": "{color.black.value}", + "themeable": true, + "source": "$navbar-light-color", + "modify": [{ + "type": "alpha", + "amount": 0.5 + }] + } } } } diff --git a/tokens/source/components/Navbar.json b/tokens/source/components/Navbar.json index 4e29483fa7..670c8e8c2a 100644 --- a/tokens/source/components/Navbar.json +++ b/tokens/source/components/Navbar.json @@ -59,19 +59,37 @@ "dark": { "color": { "hover": { - "value": "rgba({color.white.value}, .75)", "themeable": true, "source": "$navbar-dark-hover-color" + "value": "{color.white.value}", + "themeable": true, + "source": "$navbar-dark-hover-color", + "modify": [{ + "type": "alpha", + "amount": 0.75 + }] }, "active": { "value": "{color.active.value}", "themeable": true, "source": "$navbar-dark-active-color" }, "disabled": { - "value": "rgba({color.white.value}, .25)", "themeable": true, "source": "$navbar-dark-disabled-color" + "value": "{color.white.value}", + "themeable": true, + "source": "$navbar-dark-disabled-color", + "modify": [{ + "type": "alpha", + "amount": 0.25 + }] } }, "toggler": { "border": { "color": { - "value": "rgba({color.white.value}, .1)", "themeable": true, "source": "$navbar-dark-toggler-border-color" + "value": "{color.white.value}", + "themeable": true, + "source": "$navbar-dark-toggler-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.1 + }] } } }, @@ -88,13 +106,45 @@ }, "light": { "color": { - "hover": { "value": "rgba(0, 0, 0, .7)", "themeable": true, "source": "$navbar-light-hover-color" }, - "active": { "value": "rgba(0, 0, 0, .9)", "themeable": true, "source": "$navbar-light-active-color" }, - "disabled": { "value": "rgba(0, 0, 0, .3)", "themeable": true, "source": "$navbar-light-disabled-color" } + "hover": { + "value": "{color.black.value}", + "themeable": true, + "source": "$navbar-light-hover-color", + "modify": [{ + "type": "alpha", + "amount": 0.7 + }] + }, + "active": { + "value": "{color.black.value}", + "themeable": true, + "source": "$navbar-light-active-color", + "modify": [{ + "type": "alpha", + "amount": 0.9 + }] + }, + "disabled": { + "value": "{color.black.value}", + "themeable": true, + "source": "$navbar-light-disabled-color", + "modify": [{ + "type": "alpha", + "amount": 0.3 + }] + } }, "toggler": { "border": { - "color": { "value": "rgba(0, 0, 0, .1)", "themeable": true, "source": "$navbar-light-toggler-border-color" } + "color": { + "value": "{color.black.value}", + "themeable": true, + "source": "$navbar-light-toggler-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.1 + }] + } } }, "brand": { diff --git a/tokens/source/components/Pagination.json b/tokens/source/components/Pagination.json index 64b5f0b9ce..004099fcd9 100644 --- a/tokens/source/components/Pagination.json +++ b/tokens/source/components/Pagination.json @@ -74,12 +74,10 @@ } }, "focus": { - "box": { - "shadow": { - "value": "{input.btn.focus.box.shadow.value}", "themeable": true, "source": "$pagination-focus-box-shadow" - }, - "outline": { "value": "0", "themeable": true, "source": "$pagination-focus-outline" } + "box-shadow": { + "value": "{input.btn.focus.box-shadow.value}", "themeable": true, "source": "$pagination-focus-box-shadow" }, + "outline": { "value": "0", "themeable": true, "source": "$pagination-focus-outline" }, "border": { "width": { "value": ".125rem", "themeable": true, "source": "$pagination-focus-border-width" } }, diff --git a/tokens/source/components/Popover.json b/tokens/source/components/Popover.json index 45796a33ae..775804ddd5 100644 --- a/tokens/source/components/Popover.json +++ b/tokens/source/components/Popover.json @@ -9,20 +9,40 @@ }, "border": { "radius": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$popover-border-radius" }, - "border": { "value": "{border.width.value}", "themeable": true, "source": "$popover-border-width" } + "width": { "value": "{border.width.value}", "themeable": true, "source": "$popover-border-width" } }, - "box": { - "shadow": { - "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", - "themeable": true, - "source": "$popover-box-shadow" - } + "box-shadow": { + "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", + "themeable": true, + "source": "$popover-box-shadow" }, "header": { "color": { "value": "{headings.color.value}", "themeable": true, "source": "$popover-header-color" }, "padding": { "y": { "value": ".5rem", "themeable": true, "source": "$popover-header-padding-y" }, "x": { "value": "1rem", "themeable": true, "source": "$popover-header-padding-x" } + }, + "bg": { + "darken": { + "value": "{color.white.value}", + "themeable": true, + "source": "$popover-header-bg-dark", + "modify": [{ + "type": "darken", + "amount": 0.5 + }] + } + }, + "border": { + "darken": { + "value": "{color.white.value}", + "themeable": true, + "source": "$popover-header-border-bottom-darken", + "modify": [{ + "type": "darken", + "amount": 0.5 + }] + } } }, "body": { diff --git a/tokens/source/components/ProductTour.json b/tokens/source/components/ProductTour.json index 0fd875b4f7..4250682542 100644 --- a/tokens/source/components/ProductTour.json +++ b/tokens/source/components/ProductTour.json @@ -5,7 +5,16 @@ "background": { "value": "{color.light.300.value}", "themeable": true, "source": "$checkpoint-background-color" }, "body": { "value": "{color.gray.700.value}", "themeable": true, "source": "$checkpoint-body-color" }, "border": { "value": "{color.brand.500.value}", "themeable": true, "source": "$checkpoint-border-color" }, - "breadcrumb": { "value": "{color.primary.500.value}", "themeable": true, "source": "$checkpoint-breadcrumb-color" } + "breadcrumb": { "value": "{color.primary.500.value}", "themeable": true, "source": "$checkpoint-breadcrumb-color" }, + "box-shadow": { + "value": "{color.black.value}", + "themeable": true, + "source": "$checkpoint-box-shadow-color", + "modify": [{ + "type": "alpha", + "amount": 0.3 + }] + } }, "width": { "border": { "value": "8px", "themeable": true, "source": "$checkpoint-border-width" }, diff --git a/tokens/source/components/ProgressBar.json b/tokens/source/components/ProgressBar.json index ba24a80f69..7d5a7b7752 100644 --- a/tokens/source/components/ProgressBar.json +++ b/tokens/source/components/ProgressBar.json @@ -15,9 +15,7 @@ "width": { "value": "1px", "themeable": true, "source": "$progress-bar-border-width" }, "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$progress-bar-border-color" } }, - "box": { - "shadow": { "value": "none", "themeable": true, "source": "$progress-box-shadow" } - }, + "box-shadow": { "value": "none", "themeable": true, "source": "$progress-box-shadow" }, "bar": { "color": { "value": "{color.white.value}", "themeable": true, "source": "$progress-bar-color" }, "bg": { diff --git a/tokens/source/components/Scrollable.json b/tokens/source/components/Scrollable.json new file mode 100644 index 0000000000..a70c7d7bcd --- /dev/null +++ b/tokens/source/components/Scrollable.json @@ -0,0 +1,15 @@ +{ + "scrollable": { + "body": { + "box-shadow": { + "value": "{color.black.value}", + "themeable": true, + "source": "$scrollable-body-box-shadow", + "modify": [{ + "type": "alpha", + "amount": 0.55 + }] + } + } + } +} diff --git a/tokens/source/components/SearchField.json b/tokens/source/components/SearchField.json index d32f86485c..8b5cddd9d0 100644 --- a/tokens/source/components/SearchField.json +++ b/tokens/source/components/SearchField.json @@ -20,7 +20,11 @@ "opacity": { "value": ".3", "themeable": true, "source": "$search-disabled-opacity" } }, "button": { - "margin": { "value": ".5rem", "themeable": true, "source": "$search-button-margin" } + "margin": { "value": ".5rem", "themeable": true, "source": "$search-button-margin" }, + "variants": { + "light": { "value": "{color.primary.500.value}", "themeable": true }, + "dark": { "value": "{color.brand.500.value}", "themeable": true } + } }, "input": { "height": { diff --git a/tokens/source/components/Sheet.json b/tokens/source/components/Sheet.json index 7671589cd1..e1ebbc7791 100644 --- a/tokens/source/components/Sheet.json +++ b/tokens/source/components/Sheet.json @@ -3,6 +3,28 @@ "zindex": { "backdrop": { "value": "1031", "themeable": true, "source": "$zindex-sheet-backdrop" }, "main": { "value": "1032", "themeable": true, "source": "$zindex-sheet" } + }, + "skrim": { + "bg": { + "value": "{color.gray.300.value}", + "themeable": true, + "source": "$sheet-skrim-bg", + "modify": [{ + "type": "alpha", + "amount": 0.5 + }] + }, + "component": { + "box-shadow": { + "value": "{color.black.value}", + "themeable": true, + "source": "$sheet-skrim-component-box-shadow", + "modify": [{ + "type": "alpha", + "amount": 0.15 + }] + } + } } } -} \ No newline at end of file +} diff --git a/tokens/source/components/Toast.json b/tokens/source/components/Toast.json index 30a59c92f1..e604a8aeb2 100644 --- a/tokens/source/components/Toast.json +++ b/tokens/source/components/Toast.json @@ -16,21 +16,35 @@ }, "border": { "width": { "value": "1px", "themeable": true, "source": "$toast-border-width" }, - "color": { "value": "rgba(0, 0, 0, .1)", "themeable": true, "source": "$toast-border-color" }, + "color": { + "value": "{color.black.value}", + "themeable": true, + "source": "$toast-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.1 + }] + }, "radius": { "value": ".25rem", "themeable": true, "source": "$toast-border-radius" } }, - "box": { - "shadow": { - "value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)", - "themeable": true, - "source": "$toast-box-shadow" - } + "box-shadow": { + "value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)", + "themeable": true, + "source": "$toast-box-shadow" }, "header": { "color": { "base": { "value": "{color.white.value}", "themeable": true, "source": "$toast-header-color" }, "background": { "value": "{color.gray.700.value}", "themeable": true, "source": "$toast-header-background-color" }, - "border": { "value": "rgba(0, 0, 0, .5)", "themeable": true, "source": "$toast-header-border-color" } + "border": { + "value": "{color.black.value}", + "themeable": true, + "source": "$toast-header-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.5 + }] + } } }, "container": { diff --git a/tokens/source/components/Tooltip.json b/tokens/source/components/Tooltip.json index da44f8c443..9a9b51199f 100644 --- a/tokens/source/components/Tooltip.json +++ b/tokens/source/components/Tooltip.json @@ -23,12 +23,10 @@ "x": { "value": ".5rem", "themeable": true, "source": "$tooltip-padding-x" } }, "margin": { "value": "0", "themeable": true, "source": "$tooltip-margin" }, - "box": { - "shadow": { - "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", - "themeable": true, - "source": "$tooltip-box-shadow" - } + "box-shadow": { + "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", + "themeable": true, + "source": "$tooltip-box-shadow" }, "arrow": { "height": { "value": ".4rem", "themeable": true, "source": "$tooltip-arrow-height" }, diff --git a/tokens/source/components/general/hr.json b/tokens/source/components/general/hr.json index 232af07917..948eebe656 100644 --- a/tokens/source/components/general/hr.json +++ b/tokens/source/components/general/hr.json @@ -1,7 +1,15 @@ { "hr": { "border": { - "color": { "value": "rgba({color.black.value}, .1)", "themeable": true, "source": "$hr-border-color" }, + "color": { + "value": "{color.black.value}", + "themeable": true, + "source": "$hr-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.1 + }] + }, "width": { "value": "{border.width.value}", "themeable": true, "source": "$hr-border-width" }, "margin": { "y": { "value": "{spacer.base.value}", "themeable": true, "source": "$hr-margin-y" } diff --git a/tokens/source/components/general/input.json b/tokens/source/components/general/input.json index eba3133707..1f2f6394d1 100644 --- a/tokens/source/components/general/input.json +++ b/tokens/source/components/general/input.json @@ -31,12 +31,10 @@ "focus": { "width": { "value": "1px", "themeable": true, "source": "$input-btn-focus-width" }, "color": { "value": "{color.input.focus.value}", "themeable": true, "source": "$input-btn-focus-color" }, - "box": { - "shadow": { - "value": "0 0 0 {input.btn.focus.width.value} {input.btn.focus.color.value}", - "themeable": true, - "source": "$input-btn-focus-box-shadow" - } + "box-shadow": { + "value": "0 0 0 {input.btn.focus.width.value} {input.btn.focus.color.value}", + "themeable": true, + "source": "$input-btn-focus-box-shadow" } }, "border": { diff --git a/tokens/source/components/general/list.json b/tokens/source/components/general/list.json index 97622a0ca8..530100bea6 100644 --- a/tokens/source/components/general/list.json +++ b/tokens/source/components/general/list.json @@ -16,7 +16,15 @@ "hover": { "value": "{color.gray.100.value}", "themeable": true, "source": "$list-group-hover-bg" } }, "border": { - "color": { "value": "rgba({color.black.value}, .125)", "themeable": true, "source": "$list-group-border-color" }, + "color": { + "value": "{color.black.value}", + "themeable": true, + "source": "$list-group-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.125 + }] + }, "width": { "value": "{border.width.value}", "themeable": true, "source": "$list-group-border-width" }, "radius": { "value": "{border.radius.base.value}", "themeable": true, "source": "$list-group-border-radius" } }, diff --git a/tokens/source/global/color.json b/tokens/source/global/color.json index d08279f56f..316bf61b6e 100644 --- a/tokens/source/global/color.json +++ b/tokens/source/global/color.json @@ -128,99 +128,803 @@ }, "secondary": { "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$secondary" }, - "100": { "value": "#F4F4F4", "themeable": true, "source": "$secondary-100" }, - "200": { "value": "#D1D1D1", "themeable": true, "source": "$secondary-200" }, - "300": { "value": "#A2A2A2", "themeable": true, "source": "$secondary-300" }, - "400": { "value": "#747474", "themeable": true, "source": "$secondary-400"}, + "100": { + "value": "{color.secondary.base.value}", + "themeable": true, + "source": "$secondary-100", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ] + }, + "200": { + "value": "{color.secondary.base.value}", + "themeable": true, + "source": "$secondary-200", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ] + }, + "300": { + "value": "{color.secondary.base.value}", + "themeable": true, + "source": "$secondary-300", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ] + }, + "400": { + "value": "{color.secondary.base.value}", + "themeable": true, + "source": "$secondary-400", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ] + }, "500": { "value": "{color.secondary.base.value}", "themeable": true, "source": "$secondary-500"}, - "600": { "value": "#3E3E3E", "themeable": true, "source": "$secondary-600"}, - "700": { "value": "#373737", "themeable": true, "source": "$secondary-700"}, - "800": { "value": "#343434", "themeable": true, "source": "$secondary-800"}, - "900": { "value": "#303030", "themeable": true, "source": "$secondary-900"} + "600": { + "value": "{color.secondary.base.value}", + "themeable": true, + "source": "$secondary-600", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ] + }, + "700": { + "value": "{color.secondary.base.value}", + "themeable": true, + "source": "$secondary-700", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ] + }, + "800": { + "value": "{color.secondary.base.value}", + "themeable": true, + "source": "$secondary-800", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ] + }, + "900": { + "value": "{color.secondary.base.value}", + "themeable": true, + "source": "$secondary-900", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ] + } }, "brand": { "base": { "value": "#9D0054", "themeable": true, "source": "$brand" }, - "100": { "value": "#F9F0F5", "themeable": true, "source": "$brand-100" }, - "200": { "value": "#E7BFD4", "themeable": true, "source": "$brand-200" }, - "300": { "value": "#CE80AA", "themeable": true, "source": "$brand-300" }, - "400": { "value": "#B6407F", "themeable": true, "source": "$brand-400" }, + "100": { + "value": "{color.brand.base.value}", + "themeable": true, + "source": "$brand-100", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ] + }, + "200": { + "value": "{color.brand.base.value}", + "themeable": true, + "source": "$brand-200", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ] + }, + "300": { + "value": "{color.brand.base.value}", + "themeable": true, + "source": "$brand-300", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ] + }, + "400": { + "value": "{color.brand.base.value}", + "themeable": true, + "source": "$brand-400", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ] + }, "500": { "value": "{color.brand.base.value}", "themeable": true, "source": "$brand-500" }, - "600": { "value": "#8D004C", "themeable": true, "source": "$brand-600" }, - "700": { "value": "#7E0043", "themeable": true, "source": "$brand-700" }, - "800": { "value": "#76003F", "themeable": true, "source": "$brand-800" }, - "900": { "value": "#6E003B", "themeable": true, "source": "$brand-900" } + "600": { + "value": "{color.brand.base.value}", + "themeable": true, + "source": "$brand-600", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ] + }, + "700": { + "value": "{color.brand.base.value}", + "themeable": true, + "source": "$brand-700", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ] + }, + "800": { + "value": "{color.brand.base.value}", + "themeable": true, + "source": "$brand-800", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ] + }, + "900": { + "value": "{color.brand.base.value}", + "themeable": true, + "source": "$brand-900", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ] + } }, "success": { "base": { "value": "{color.green.value}", "themeable": true, "source": "$success" }, - "100": { "value": "#F1F8F5", "themeable": true, "source": "$success-100" }, - "200": { "value": "#C5E0D4", "themeable": true, "source": "$success-200" }, - "300": { "value": "#8BC1A9", "themeable": true, "source": "$success-300" }, - "400": { "value": "#51A17E", "themeable": true, "source": "$success-400" }, + "100": { + "value": "{color.success.base.value}", + "themeable": true, + "source": "$success-100", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ] + }, + "200": { + "value": "{color.success.base.value}", + "themeable": true, + "source": "$success-200", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ] + }, + "300": { + "value": "{color.success.base.value}", + "themeable": true, + "source": "$success-300", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ] + }, + "400": { + "value": "{color.success.base.value}", + "themeable": true, + "source": "$success-400", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ] + }, "500": { "value": "{color.success.base.value}", "themeable": true, "source": "$success-500" }, - "600": { "value": "#15754B", "themeable": true, "source": "$success-600" }, - "700": { "value": "#126842", "themeable": true, "source": "$success-700" }, - "800": { "value": "#11623E", "themeable": true, "source": "$success-800" }, - "900": { "value": "#105b3A", "themeable": true, "source": "$success-900" } + "600": { + "value": "{color.success.base.value}", + "themeable": true, + "source": "$success-600", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ] + }, + "700": { + "value": "{color.success.base.value}", + "themeable": true, + "source": "$success-700", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ] + }, + "800": { + "value": "{color.success.base.value}", + "themeable": true, + "source": "$success-800", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ] + }, + "900": { + "value": "{color.success.base.value}", + "themeable": true, + "source": "$success-900", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ] + } }, "info": { "base": { "value": "{color.teal.value}", "themeable": true, "source": "$info" }, - "100": { "value": "#F0F6FA", "themeable": true, "source": "$info-100" }, - "200": { "value": "#BFDBEA", "themeable": true, "source": "$info-200" }, - "300": { "value": "#80B6D5", "themeable": true, "source": "$info-300" }, - "400": { "value": "#4092BF", "themeable": true, "source": "$info-400" }, + "100": { + "value": "{color.info.base.value}", + "themeable": true, + "source": "$info-100", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ] + }, + "200": { + "value": "{color.info.base.value}", + "themeable": true, + "source": "$info-200", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ] + }, + "300": { + "value": "{color.info.base.value}", + "themeable": true, + "source": "$info-300", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ] + }, + "400": { + "value": "{color.info.base.value}", + "themeable": true, + "source": "$info-400", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ] + }, "500": { "value": "{color.info.base.value}", "themeable": true, "source": "$info-500" }, - "600": { "value": "#006299", "themeable": true, "source": "$info-600" }, - "700": { "value": "#005788", "themeable": true, "source": "$info-700" }, - "800": { "value": "#005280", "themeable": true, "source": "$info-800" }, - "900": { "value": "#004C77", "themeable": true, "source": "$info-900" } + "600": { + "value": "{color.info.base.value}", + "themeable": true, + "source": "$info-600", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ] + }, + "700": { + "value": "{color.info.base.value}", + "themeable": true, + "source": "$info-700", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ] + }, + "800": { + "value": "{color.info.base.value}", + "themeable": true, + "source": "$info-800", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ] + }, + "900": { + "value": "{color.info.base.value}", + "themeable": true, + "source": "$info-900", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ] + } }, "warning": { "base": { "value": "{color.yellow.value}", "themeable": true, "source": "$warning" }, - "100": { "value": "#FFFDF0", "themeable": true, "source": "$warning-100" }, - "200": { "value": "#FFF6BF", "themeable": true, "source": "$warning-200" }, - "300": { "value": "#FFEC80", "themeable": true, "source": "$warning-300" }, - "400": { "value": "#FFE340", "themeable": true, "source": "$warning-400" }, + "100": { + "value": "{color.warning.base.value}", + "themeable": true, + "source": "$warning-100", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ] + }, + "200": { + "value": "{color.warning.base.value}", + "themeable": true, + "source": "$warning-200", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ] + }, + "300": { + "value": "{color.warning.base.value}", + "themeable": true, + "source": "$warning-300", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ] + }, + "400": { + "value": "{color.warning.base.value}", + "themeable": true, + "source": "$warning-400", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ] + }, "500": { "value": "{color.warning.base.value}", "themeable": true, "source": "$warning-500" }, - "600": { "value": "#E6C300", "themeable": true, "source": "$warning-600" }, - "700": { "value": "#CCAE00", "themeable": true, "source": "$warning-700" }, - "800": { "value": "#BFA300", "themeable": true, "source": "$warning-800" }, - "900": { "value": "#B39800", "themeable": true, "source": "$warning-900" } + "600": { + "value": "{color.warning.base.value}", + "themeable": true, + "source": "$warning-600", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ] + }, + "700": { + "value": "{color.warning.base.value}", + "themeable": true, + "source": "$warning-700", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ] + }, + "800": { + "value": "{color.warning.base.value}", + "themeable": true, + "source": "$warning-800", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ] + }, + "900": { + "value": "{color.warning.base.value}", + "themeable": true, + "source": "$warning-900", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ] + } }, "danger": { "base": { "value": "{color.red.value}", "themeable": true, "source": "$danger" }, - "100": { "value": "#FBF2F3", "themeable": true, "source": "$danger-100" }, - "200": { "value": "#F0CBCE", "themeable": true, "source": "$danger-200" }, - "300": { "value": "#E1969D", "themeable": true, "source": "$danger-300" }, - "400": { "value": "#D2626B", "themeable": true, "source": "$danger-400" }, + "100": { + "value": "{color.danger.base.value}", + "themeable": true, + "source": "$danger-100", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ] + }, + "200": { + "value": "{color.danger.base.value}", + "themeable": true, + "source": "$danger-200", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ] + }, + "300": { + "value": "{color.danger.base.value}", + "themeable": true, + "source": "$danger-300", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ] + }, + "400": { + "value": "{color.danger.base.value}", + "themeable": true, + "source": "$danger-400", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ] + }, "500": { "value": "{color.danger.base.value}", "themeable": true, "source": "$danger-500" }, - "600": { "value": "#B02934", "themeable": true, "source": "$danger-600" }, - "700": { "value": "#9C242E", "themeable": true, "source": "$danger-700" }, - "800": { "value": "#92222C", "themeable": true, "source": "$danger-800" }, - "900": { "value": "#892029", "themeable": true, "source": "$danger-900" } + "600": { + "value": "{color.danger.base.value}", + "themeable": true, + "source": "$danger-600", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ] + }, + "700": { + "value": "{color.danger.base.value}", + "themeable": true, + "source": "$danger-700", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ] + }, + "800": { + "value": "{color.danger.base.value}", + "themeable": true, + "source": "$danger-800", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ] + }, + "900": { + "value": "{color.danger.base.value}", + "themeable": true, + "source": "$danger-900", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ] + } }, "light": { "base": { "value": "#E1DDDB", "themeable": true, "source": "$light" }, - "100": { "value": "#FDFDFD", "themeable": true, "source": "$light-100" }, - "200": { "value": "#F8F7F6", "themeable": true, "source": "$light-200" }, - "300": { "value": "#F0EEED", "themeable": true, "source": "$light-300" }, - "400": { "value": "#E9E6E4", "themeable": true, "source": "$light-400" }, + "100": { + "value": "{color.light.base.value}", + "themeable": true, + "source": "$light-100", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ] + }, + "200": { + "value": "{color.light.base.value}", + "themeable": true, + "source": "$light-200", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ] + }, + "300": { + "value": "{color.light.base.value}", + "themeable": true, + "source": "$light-300", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ] + }, + "400": { + "value": "{color.light.base.value}", + "themeable": true, + "source": "$light-400", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ] + }, "500": { "value": "{color.light.base.value}", "themeable": true, "source": "$light-500" }, - "600": { "value": "#CBC7C5", "themeable": true, "source": "$light-600" }, - "700": { "value": "#B4B1AF", "themeable": true, "source": "$light-700" }, - "800": { "value": "#A9A6A4", "themeable": true, "source": "$light-800" }, - "900": { "value": "#9E9B99", "themeable": true, "source": "$light-900" } + "600": { + "value": "{color.light.base.value}", + "themeable": true, + "source": "$light-600", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ] + }, + "700": { + "value": "{color.light.base.value}", + "themeable": true, + "source": "$light-700", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ] + }, + "800": { + "value": "{color.light.base.value}", + "themeable": true, + "source": "$light-800", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ] + }, + "900": { + "value": "{color.light.base.value}", + "themeable": true, + "source": "$light-900", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ] + } }, "dark": { "base": { "value": "#273F2F", "themeable": true, "source": "$dark" }, - "100": { "value": "#F2F3F3", "themeable": true, "source": "$dark-100" }, - "200": { "value": "#C9CFCB", "themeable": true, "source": "$dark-200" }, - "300": { "value": "#939f97", "themeable": true, "source": "$dark-300" }, - "400": { "value": "#5D6F63", "themeable": true, "source": "$dark-400" }, + "100": { + "value": "{color.dark.base.value}", + "themeable": true, + "source": "$dark-100", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ] + }, + "200": { + "value": "{color.dark.base.value}", + "themeable": true, + "source": "$dark-200", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ] + }, + "300": { + "value": "{color.dark.base.value}", + "themeable": true, + "source": "$dark-300", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ] + }, + "400": { + "value": "{color.dark.base.value}", + "themeable": true, + "source": "$dark-400", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.25" + } + ] + }, "500": { "value": "{color.dark.base.value}", "themeable": true, "source": "$dark-500" }, - "600": { "value": "#23392A", "themeable": true, "source": "$dark-600" }, - "700": { "value": "#1F3226", "themeable": true, "source": "$dark-700" }, - "800": { "value": "#1D2F23", "themeable": true, "source": "$dark-800" }, - "900": { "value": "#1B2C21", "themeable": true, "source": "$dark-900" } + "600": { + "value": "{color.dark.base.value}", + "themeable": true, + "source": "$dark-600", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ] + }, + "700": { + "value": "{color.dark.base.value}", + "themeable": true, + "source": "$dark-700", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ] + }, + "800": { + "value": "{color.dark.base.value}", + "themeable": true, + "source": "$dark-800", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ] + }, + "900": { + "value": "{color.dark.base.value}", + "themeable": true, + "source": "$dark-900", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ] + } } } } diff --git a/tokens/source/global/spacing.json b/tokens/source/global/spacing.json index da1895cd20..35b06de6ff 100644 --- a/tokens/source/global/spacing.json +++ b/tokens/source/global/spacing.json @@ -1,21 +1,17 @@ { - "spacing": { - "base": { - "0": { "value": "0", "themeable": true }, - "1": { "value": ".25rem", "themeable": true }, - "1.5": { "value": ".375rem", "themeable": true }, - "2": { "value": ".5rem", "themeable": true }, - "2.5": { "value": ".75rem", "themeable": true }, - "3": { "value": "1rem", "themeable": true }, - "3.5": { "value": "1.25rem", "themeable": true }, - "4": { "value": "1.5rem", "themeable": true }, - "4.5": { "value": "2rem", "themeable": true }, - "5": { "value": "3rem", "themeable": true }, - "5.5": { "value": "4rem", "themeable": true }, - "6": { "value": "5rem", "themeable": true } - } - }, "spacer": { - "base": { "value": "1rem", "themeable": true, "source": "$spacer" } + "base": { "value": "1rem", "themeable": true, "source": "$spacer" }, + "0": { "value": "0", "themeable": true }, + "1": { "value": "calc({spacer.base.value} * .25rem)", "themeable": true }, + "1,5": { "value": "calc({spacer.base.value} * .375rem)", "themeable": true }, + "2": { "value": "calc({spacer.base.value} * .5rem)", "themeable": true }, + "2,5": { "value": "calc({spacer.base.value} * .75rem)", "themeable": true }, + "3": { "value": "{spacer.base.value}", "themeable": true }, + "3,5": { "value": "calc({spacer.base.value} * 1.25rem)", "themeable": true }, + "4": { "value": "calc({spacer.base.value} * 1.5rem)", "themeable": true }, + "4,5": { "value": "calc({spacer.base.value} * 2rem)", "themeable": true }, + "5": { "value": "calc({spacer.base.value} * 3rem)", "themeable": true }, + "5,5": { "value": "calc({spacer.base.value} * 4rem)", "themeable": true }, + "6": { "value": "calc({spacer.base.value} * 5rem)", "themeable": true } } } From eca58eb020c8fb7d68cbe53851b4cb281d58b767 Mon Sep 17 00:00:00 2001 From: Adam Stankiewicz Date: Fri, 18 Nov 2022 09:55:32 -0500 Subject: [PATCH 18/19] chore: add alpha/beta to releaserc --- .releaserc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.releaserc b/.releaserc index 2c101b5028..ab8f304c2d 100644 --- a/.releaserc +++ b/.releaserc @@ -1,5 +1,5 @@ { - "branches": ["master", "next"], + "branches": ["master", "next", "alpha", "beta"], "plugins": [ "@semantic-release/commit-analyzer", "@semantic-release/release-notes-generator", From 7d6e9ab13019c7774194458945495ae000193e50 Mon Sep 17 00:00:00 2001 From: Adam Stankiewicz Date: Fri, 18 Nov 2022 10:06:05 -0500 Subject: [PATCH 19/19] chore: add prerelease to beta/alpha --- .releaserc | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.releaserc b/.releaserc index ab8f304c2d..50eab9763c 100644 --- a/.releaserc +++ b/.releaserc @@ -1,5 +1,10 @@ { - "branches": ["master", "next", "alpha", "beta"], + "branches": [ + "master", + "next", + { "name": "alpha", "prerelease": true }, + { "name": "beta", "prerelease": true } + ], "plugins": [ "@semantic-release/commit-analyzer", "@semantic-release/release-notes-generator",